├── .gitignore ├── .stylelintrc ├── dictionaries ├── time.json ├── effects.json ├── fonts.json ├── breakpoints.json ├── spacing.json └── colors.json ├── scss ├── borders.scss ├── states.scss ├── base.scss ├── media-queries.scss ├── helpers │ ├── a11y.scss │ ├── positioning.scss │ └── resets.scss ├── tokens.scss ├── color-scheme.scss └── fonts.scss ├── swift ├── Tests │ ├── Tests.swift │ └── XCTestManifests.swift └── QuartzStyles │ └── QuartzStyles.swift ├── .editorconfig ├── Package.swift ├── README.md ├── package.json ├── config.json └── .github └── workflows └── ci.yml /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | /node_modules/ 3 | .build/ 4 | .swiftpm/ 5 | *.xcodeproj/ 6 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "@quartz/stylelint-config" 4 | ], 5 | "ignoreFiles": [ 6 | "scss/tokens.scss" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /dictionaries/time.json: -------------------------------------------------------------------------------- 1 | { 2 | "time": { 3 | "slowly": { 4 | "value": 300, 5 | "comment": "For animating state changes, e.g. hover transitions." 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /dictionaries/effects.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "border-radius": { 4 | "value": 0.5 5 | }, 6 | "border-width": { 7 | "value": 0.0625 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /scss/borders.scss: -------------------------------------------------------------------------------- 1 | @use 'tokens'; 2 | @use 'color-scheme'; 3 | 4 | $solid-decorative: solid tokens.$size-border-width color-scheme.$border-decorative; 5 | $solid-interactive: solid tokens.$size-border-width color-scheme.$border-interactive; 6 | -------------------------------------------------------------------------------- /dictionaries/fonts.json: -------------------------------------------------------------------------------- 1 | { 2 | "font": { 3 | "line-height": { 4 | "maison-extra-bold": { 5 | "value": 1.05 6 | }, 7 | "maison-medium": { 8 | "value": 1.3 9 | }, 10 | "pt-serif": { 11 | "value": 1.5 12 | } 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /swift/Tests/Tests.swift: -------------------------------------------------------------------------------- 1 | import XCTest 2 | @testable import QuartzStyles 3 | 4 | class Tests: XCTestCase { 5 | 6 | func testBlue() { 7 | #if canImport(UIKit) 8 | XCTAssertEqual(QuartzStyles.colorBlue, UIColor(red: 0.086, green: 0.553, blue: 0.851, alpha: 1)) 9 | #endif 10 | } 11 | 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | insert_final_newline = true 7 | trim_trailing_whitespace = true 8 | indent_size = 2 9 | 10 | [*.{js,jsx,css,gql}] 11 | indent_style = tab 12 | 13 | [*.json] 14 | indent_style = space 15 | 16 | [*.swift] 17 | indent_style = space 18 | indent_size = 4 19 | -------------------------------------------------------------------------------- /dictionaries/breakpoints.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "breakpoint": { 4 | "tablet-portrait": { 5 | "value": 48 6 | }, 7 | "tablet-landscape": { 8 | "value": 64 9 | }, 10 | "desktop": { 11 | "value": 75 12 | }, 13 | "desktop-large": { 14 | "value": 100 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /dictionaries/spacing.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "gutter": { 4 | "mobile": { 5 | "value": 1.25 6 | }, 7 | "tablet": { 8 | "value": 2.5 9 | }, 10 | "tablet-work": { 11 | "value": 1.5625 12 | }, 13 | "desktop": { 14 | "value": 5.625 15 | }, 16 | "desktop-work": { 17 | "value": 2.5 18 | } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /Package.swift: -------------------------------------------------------------------------------- 1 | // swift-tools-version:5.0 2 | import PackageDescription 3 | 4 | let package = Package( 5 | name: "QuartzStyles", 6 | products: [ 7 | .library(name: "QuartzStyles", targets: ["QuartzStyles"]) 8 | ], 9 | targets: [ 10 | .target(name: "QuartzStyles", path: "swift/QuartzStyles"), 11 | .testTarget(name: "Tests", dependencies: ["QuartzStyles"], path: "swift/Tests") 12 | ] 13 | ) 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Quartz Style Dictionary 2 | 3 | Quartz design tokens are defined in the [`dictionaries`](/dictionaries) directory. 4 | 5 | Build: 6 | 7 | ```sh 8 | npm i 9 | npm run build 10 | ``` 11 | 12 | Client styles are output in the [`scss`](/scss) and [`swift`](/swift) directories. 13 | 14 | For easy client usage, this repo is an NPM module (see [`package.json`](package.json)) and a Swift package (see [`Package.swift`](/Package.swift)). 15 | -------------------------------------------------------------------------------- /scss/states.scss: -------------------------------------------------------------------------------- 1 | @use 'media-queries'; 2 | @use 'tokens'; 3 | 4 | @mixin fade-on-hover { 5 | @include media-queries.has-hover { 6 | transition: opacity tokens.$time-slowly; 7 | } 8 | 9 | &:hover { 10 | @include media-queries.has-hover { 11 | opacity: 0.7; 12 | } 13 | } 14 | } 15 | 16 | @mixin reset-fade-on-hover { 17 | &:hover:not(:disabled) { 18 | @include media-queries.has-hover { 19 | opacity: 1; 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /swift/Tests/XCTestManifests.swift: -------------------------------------------------------------------------------- 1 | #if !canImport(ObjectiveC) 2 | import XCTest 3 | 4 | extension Tests { 5 | // DO NOT MODIFY: This is autogenerated, use: 6 | // `swift test --generate-linuxmain` 7 | // to regenerate. 8 | static let __allTests__Tests = [ 9 | ("testBlue", testBlue), 10 | ] 11 | } 12 | 13 | public func __allTests() -> [XCTestCaseEntry] { 14 | return [ 15 | testCase(Tests.__allTests__Tests), 16 | ] 17 | } 18 | #endif 19 | -------------------------------------------------------------------------------- /scss/base.scss: -------------------------------------------------------------------------------- 1 | @use 'color-scheme'; 2 | @use 'states'; 3 | @import '~normalize.css'; 4 | 5 | body { 6 | background: color-scheme.$background-1; 7 | color: color-scheme.$typography; 8 | text-rendering: optimizeLegibility; 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | 12 | ::selection { 13 | background-color: color-scheme.$accent; 14 | color: color-scheme.$background-1; 15 | } 16 | } 17 | 18 | a { 19 | @include states.fade-on-hover; 20 | 21 | color: color-scheme.$accent; 22 | text-decoration: none; 23 | } 24 | -------------------------------------------------------------------------------- /scss/media-queries.scss: -------------------------------------------------------------------------------- 1 | @use 'tokens'; 2 | 3 | @mixin tablet-portrait-up { 4 | @media (min-width: tokens.$size-breakpoint-tablet-portrait) { @content; } 5 | } 6 | 7 | @mixin tablet-landscape-up { 8 | @media (min-width: tokens.$size-breakpoint-tablet-landscape) { @content; } 9 | } 10 | 11 | @mixin desktop-up { 12 | @media (min-width: tokens.$size-breakpoint-desktop) { @content; } 13 | } 14 | 15 | @mixin desktop-large-up { 16 | @media (min-width: tokens.$size-breakpoint-desktop-large) { @content; } 17 | } 18 | 19 | @mixin has-hover { 20 | @media (hover: hover) { @content; } 21 | } 22 | -------------------------------------------------------------------------------- /scss/helpers/a11y.scss: -------------------------------------------------------------------------------- 1 | /* 2 | From https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements 3 | 4 | Hide elements visually but not from screen readers/assistive technology. 5 | */ 6 | @mixin visually-hidden { 7 | border: 0; 8 | clip: rect(0 0 0 0); 9 | height: 1px; 10 | margin: -1px; 11 | overflow: hidden; 12 | padding: 0; 13 | position: absolute; 14 | width: 1px; 15 | } 16 | 17 | @mixin reset-visually-hidden { 18 | border: initial; 19 | clip: auto; 20 | height: auto; 21 | width: auto; 22 | overflow: visible; 23 | margin: 0; 24 | padding: 0; 25 | position: static; 26 | } 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@quartz/styles", 3 | "description": "Quartz style dictionary", 4 | "version": "0.2.3", 5 | "devDependencies": { 6 | "@quartz/stylelint-config": "^1.2.0", 7 | "style-dictionary": "^2.10.0", 8 | "stylelint": "^13.6.1" 9 | }, 10 | "main": "scss/tokens.scss", 11 | "sass": "scss/tokens.scss", 12 | "files": [ 13 | "scss/**/*.scss", 14 | "dictionaries/colors.json" 15 | ], 16 | "scripts": { 17 | "build": "node build.js", 18 | "test": "stylelint 'scss/**/*.scss'" 19 | }, 20 | "dependencies": { 21 | "normalize.css": "^8.0.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /scss/helpers/positioning.scss: -------------------------------------------------------------------------------- 1 | @mixin center($position: absolute) { 2 | position: $position; 3 | left: 50%; 4 | top: 50%; 5 | transform: translate(-50%, -50%); 6 | } 7 | 8 | @mixin horizontal-center($position: absolute) { 9 | position: $position; 10 | left: 50%; 11 | transform: translateX(-50%); 12 | } 13 | 14 | @mixin vertical-center($position: absolute) { 15 | position: $position; 16 | top: 50%; 17 | transform: translateY(-50%); 18 | } 19 | 20 | @mixin reset-center { 21 | position: static; 22 | left: auto; 23 | top: auto; 24 | transform: none; 25 | } 26 | 27 | @mixin fit-to-container { 28 | position: absolute; 29 | top: 0; 30 | right: 0; 31 | bottom: 0; 32 | left: 0; 33 | width: 100%; 34 | height: 100%; 35 | } 36 | 37 | @mixin rotate-left { 38 | position: absolute; 39 | transform: rotate(-90deg) translate(100%); 40 | transform-origin: bottom right; 41 | } 42 | 43 | @mixin rotate-right { 44 | position: absolute; 45 | transform: rotate(90deg) translate(100%); 46 | transform-origin: top right; 47 | } 48 | -------------------------------------------------------------------------------- /config.json: -------------------------------------------------------------------------------- 1 | { 2 | "source": [ 3 | "dictionaries/**/*.json" 4 | ], 5 | "platforms": { 6 | "scss": { 7 | "buildPath": "scss/", 8 | "files": [ 9 | { 10 | "destination": "tokens.scss", 11 | "format": "scss/variables" 12 | } 13 | ], 14 | "transforms": [ 15 | "attribute/cti", 16 | "name/cti/kebab", 17 | "time/seconds", 18 | "content/icon", 19 | "color/css", 20 | "size/remToPx" 21 | ] 22 | }, 23 | "ios-swift": { 24 | "buildPath": "swift/QuartzStyles/", 25 | "files": [ 26 | { 27 | "destination": "QuartzStyles.swift", 28 | "format": "ios-swift/enum.swift", 29 | "className": "QuartzStyles", 30 | "filter": {} 31 | } 32 | ], 33 | "transforms": [ 34 | "attribute/cti", 35 | "name/cti/camel", 36 | "color/UIColorSwift", 37 | "content/swift/literal", 38 | "asset/swift/literal", 39 | "size/swift/remToCGFloat", 40 | "font/swift/literal", 41 | "font/swift/lineHeightToCGFloat", 42 | "time/swift/millisecondsToTimeInterval" 43 | ] 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /scss/tokens.scss: -------------------------------------------------------------------------------- 1 | 2 | // Do not edit directly 3 | // Generated on Fri, 15 Apr 2022 17:39:36 GMT 4 | 5 | $size-breakpoint-tablet-portrait: 768px; 6 | $size-breakpoint-tablet-landscape: 1024px; 7 | $size-breakpoint-desktop: 1200px; 8 | $size-breakpoint-desktop-large: 1600px; 9 | $size-border-radius: 8px; 10 | $size-border-width: 1px; 11 | $size-gutter-mobile: 20px; 12 | $size-gutter-tablet: 40px; 13 | $size-gutter-tablet-work: 25px; 14 | $size-gutter-desktop: 90px; 15 | $size-gutter-desktop-work: 40px; 16 | $color-accent-blue: #168dd9; 17 | $color-accent-blue-dark: #76cbff; 18 | $color-dark-blue: #171a23; 19 | $color-mid-dark-blue: #232634; 20 | $color-light-blue: #bcdef3; 21 | $color-black: #000000; 22 | $color-gold: #f1a33f; 23 | $color-white: #ffffff; 24 | $color-off-white: #f9f9f9; 25 | $color-silver: #bebebe; 26 | $color-gray: #a1a1a1; 27 | $color-light-gray: #e2e2e2; 28 | $color-dark-gray: #333333; 29 | $color-gray-table-row: #f1f1f1; 30 | $color-green: #00ac9d; 31 | $color-red: #c25250; 32 | $color-teal: #0083a4; 33 | $color-light-teal: #c2e5ee; 34 | $color-dark-teal: #006a85; 35 | $color-pink: #ff9bde; 36 | $font-line-height-maison-extra-bold: 1.05; 37 | $font-line-height-maison-medium: 1.3; 38 | $font-line-height-pt-serif: 1.5; 39 | $time-slowly: 0.30s; // For animating state changes, e.g. hover transitions. -------------------------------------------------------------------------------- /dictionaries/colors.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "accent-blue": { 4 | "value": "#168dd9" 5 | }, 6 | "accent-blue-dark": { 7 | "value": "#76cbff" 8 | }, 9 | "dark-blue": { 10 | "value": "#171a23" 11 | }, 12 | "mid-dark-blue": { 13 | "value": "#232634" 14 | }, 15 | "light-blue": { 16 | "value": "#bcdef3" 17 | }, 18 | "black": { 19 | "value": "#000000" 20 | }, 21 | "gold": { 22 | "value": "#f1a33f" 23 | }, 24 | "white": { 25 | "value": "#ffffff" 26 | }, 27 | "off-white": { 28 | "value": "#f9f9f9" 29 | }, 30 | "silver": { 31 | "value": "#bebebe" 32 | }, 33 | "gray": { 34 | "value": "#a1a1a1" 35 | }, 36 | "light-gray": { 37 | "value": "#e2e2e2" 38 | }, 39 | "dark-gray": { 40 | "value": "#333333" 41 | }, 42 | "gray-table-row": { 43 | "value": "#f1f1f1" 44 | }, 45 | "green": { 46 | "value": "#00ac9d" 47 | }, 48 | "red": { 49 | "value": "#c25250" 50 | }, 51 | "teal": { 52 | "value": "#0083a4" 53 | }, 54 | "light-teal": { 55 | "value": "#c2e5ee" 56 | }, 57 | "dark-teal": { 58 | "value": "#006a85" 59 | }, 60 | "pink": { 61 | "value": "#ff9bde" 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /scss/color-scheme.scss: -------------------------------------------------------------------------------- 1 | @use 'tokens'; 2 | 3 | /* 4 | Maps CSS variable names that are generated by our React color scheme 5 | component. CSS variables fall back (in IE11 and older) to an 6 | approximation of the default theme (Quartz Light). 7 | */ 8 | $accent: var(--color-accent, tokens.$color-accent-blue); 9 | $accent-navigation: var(--color-accent-navigation, tokens.$color-accent-blue); 10 | $background-1: var(--color-background-1, tokens.$color-off-white); 11 | $background-1-transparent: var(--color-background-1-transparent, rgba(255, 255, 255, 0.000001)); 12 | $background-2: var(--color-background-2, tokens.$color-white); 13 | $background-3: var(--color-background-3, rgba(0, 0, 0, 0.15)); 14 | $background-4: var(--color-background-4, tokens.$color-white); 15 | $background-navigation: var(--color-background-navigation, tokens.$color-off-white); 16 | $background-navigation-faint: var(--color-background-navigation-faint, tokens.$color-white); 17 | $background-modal: var(--color-background-modal, rgba(0, 0, 0, 0.98)); 18 | $border-decorative: var(--color-border-decorative, rgba(0, 0, 0, 0.15)); 19 | $border-interactive: var(--color-border-interactive, rgba(0, 0, 0, 0.3)); 20 | $highlight: var(--color-highlight, rgba(22, 141, 217, 0.2)); 21 | $typography: var(--color-typography, tokens.$color-black); 22 | $typography-faint: var(--color-typography-faint, rgba(0, 0, 0, 0.7)); 23 | $typography-inverted: var(--color-typography-inverted, tokens.$color-white); 24 | $typography-navigation: var(--color-typography-navigation, tokens.$color-black); 25 | $typography-navigation-faint: var(--color-typography-navigation-faint, rgba(0, 0, 0, 0.7)); 26 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | pull_request: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | build: 10 | name: Build Styles 11 | runs-on: ubuntu-latest 12 | outputs: 13 | sha: ${{ steps.git_commit.outputs.sha }} 14 | steps: 15 | - uses: actions/checkout@v2 16 | with: 17 | ref: ${{ github.head_ref }} 18 | 19 | - uses: actions/setup-node@v1 20 | with: 21 | node-version: 12.x 22 | 23 | - run: npm i 24 | 25 | - name: Build 26 | run: npm run build 27 | 28 | - name: Commit build files 29 | id: git_commit 30 | uses: zwaldowski/git-commit-action@v1 31 | with: 32 | commit_message: Add built client styles 33 | 34 | - run: git push 35 | 36 | - uses: Sibz/github-status-action@v1 37 | with: 38 | authToken: ${{ secrets.GITHUB_TOKEN }} 39 | sha: ${{ steps.git_commit.outputs.sha }} 40 | state: success 41 | context: Built client styles 42 | 43 | test-ios: 44 | name: Test iOS Output 45 | needs: build 46 | runs-on: macOS-latest 47 | steps: 48 | - uses: actions/checkout@v2 49 | 50 | - name: Switch to Xcode 11 51 | run: ls /Applications; sudo xcode-select -s /Applications/Xcode_11.7.app 52 | 53 | - run: swift package generate-xcodeproj 54 | 55 | - name: Cache build 56 | uses: actions/cache@v1 57 | with: 58 | path: ./.build 59 | key: ${{ runner.os }}-${{ hashFiles('./Package.swift') }} 60 | 61 | - run: xcodebuild -sdk iphonesimulator -destination 'platform=iOS Simulator,name=iPhone 8,OS=13.5' -scheme QuartzStyles-Package test | xcpretty --test --color 62 | 63 | - uses: Sibz/github-status-action@v1 64 | with: 65 | authToken: ${{ secrets.GITHUB_TOKEN }} 66 | sha: ${{ needs.build.outputs.sha }} 67 | state: success 68 | context: Test iOS output 69 | -------------------------------------------------------------------------------- /scss/helpers/resets.scss: -------------------------------------------------------------------------------- 1 | @mixin reset { 2 | font-size: inherit; 3 | font-family: inherit; 4 | margin: 0; 5 | padding: 0; 6 | border: 0; 7 | line-height: inherit; 8 | } 9 | 10 | @mixin appearance { 11 | appearance: none; 12 | -webkit-appearance: none; 13 | -moz-appearance: none; 14 | } 15 | 16 | @mixin focus-styles { 17 | /* Only remove focus styles when the user is using a pointing device */ 18 | :global(.intent-mouse) & { 19 | &:focus, 20 | &:active { 21 | outline: none; 22 | } 23 | } 24 | } 25 | 26 | @mixin button { 27 | @include reset; 28 | @include appearance; 29 | @include focus-styles; 30 | 31 | background-color: transparent; 32 | background-image: none; 33 | text-align: center; 34 | color: inherit; 35 | } 36 | 37 | @mixin checkbox { 38 | @include reset; 39 | @include appearance; 40 | @include focus-styles; 41 | 42 | background-color: transparent; 43 | } 44 | 45 | @mixin select { 46 | @include reset; 47 | @include appearance; 48 | @include focus-styles; 49 | 50 | background-color: transparent; 51 | } 52 | 53 | @mixin ul { 54 | @include reset; 55 | 56 | list-style: none; 57 | } 58 | 59 | @mixin text-input { 60 | @include reset; 61 | @include appearance; 62 | 63 | line-height: 2; 64 | font-family: inherit; 65 | font-weight: inherit; 66 | color: inherit; 67 | background: transparent; 68 | border: 0; 69 | border-radius: 0; 70 | box-shadow: none; 71 | 72 | /* Added specificity to override iOS default styles */ 73 | &[type=search] { 74 | @include appearance; 75 | 76 | border-radius: 0; 77 | box-shadow: none; 78 | } 79 | 80 | &:focus { 81 | outline: none; 82 | } 83 | } 84 | 85 | @mixin summary { 86 | @include reset; 87 | @include focus-styles; 88 | 89 | /* Firefox applies default display of "list-item" */ 90 | display: block; 91 | list-style: none; 92 | 93 | &::-webkit-details-marker { 94 | display: none; 95 | } 96 | } 97 | 98 | @mixin fieldset { 99 | @include reset; 100 | 101 | border: 0; 102 | } 103 | -------------------------------------------------------------------------------- /swift/QuartzStyles/QuartzStyles.swift: -------------------------------------------------------------------------------- 1 | 2 | // 3 | // QuartzStyles.swift 4 | // 5 | // Do not edit directly 6 | // Generated on Fri, 15 Apr 2022 17:39:36 GMT 7 | // 8 | 9 | import UIKit 10 | 11 | public enum QuartzStyles { 12 | public static let colorAccentBlue = UIColor(red: 0.086, green: 0.553, blue: 0.851, alpha:1) 13 | public static let colorAccentBlueDark = UIColor(red: 0.463, green: 0.796, blue: 1.000, alpha:1) 14 | public static let colorBlack = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha:1) 15 | public static let colorDarkBlue = UIColor(red: 0.090, green: 0.102, blue: 0.137, alpha:1) 16 | public static let colorDarkGray = UIColor(red: 0.200, green: 0.200, blue: 0.200, alpha:1) 17 | public static let colorDarkTeal = UIColor(red: 0.000, green: 0.416, blue: 0.522, alpha:1) 18 | public static let colorGold = UIColor(red: 0.945, green: 0.639, blue: 0.247, alpha:1) 19 | public static let colorGray = UIColor(red: 0.631, green: 0.631, blue: 0.631, alpha:1) 20 | public static let colorGrayTableRow = UIColor(red: 0.945, green: 0.945, blue: 0.945, alpha:1) 21 | public static let colorGreen = UIColor(red: 0.000, green: 0.675, blue: 0.616, alpha:1) 22 | public static let colorLightBlue = UIColor(red: 0.737, green: 0.871, blue: 0.953, alpha:1) 23 | public static let colorLightGray = UIColor(red: 0.886, green: 0.886, blue: 0.886, alpha:1) 24 | public static let colorLightTeal = UIColor(red: 0.761, green: 0.898, blue: 0.933, alpha:1) 25 | public static let colorMidDarkBlue = UIColor(red: 0.137, green: 0.149, blue: 0.204, alpha:1) 26 | public static let colorOffWhite = UIColor(red: 0.976, green: 0.976, blue: 0.976, alpha:1) 27 | public static let colorPink = UIColor(red: 1.000, green: 0.608, blue: 0.871, alpha:1) 28 | public static let colorRed = UIColor(red: 0.761, green: 0.322, blue: 0.314, alpha:1) 29 | public static let colorSilver = UIColor(red: 0.745, green: 0.745, blue: 0.745, alpha:1) 30 | public static let colorTeal = UIColor(red: 0.000, green: 0.514, blue: 0.643, alpha:1) 31 | public static let colorWhite = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha:1) 32 | public static let fontLineHeightMaisonExtraBold = CGFloat(1.05) 33 | public static let fontLineHeightMaisonMedium = CGFloat(1.30) 34 | public static let fontLineHeightPtSerif = CGFloat(1.50) 35 | public static let sizeBorderRadius = CGFloat(8.00) 36 | public static let sizeBorderWidth = CGFloat(1.00) 37 | public static let sizeBreakpointDesktop = CGFloat(1200.00) 38 | public static let sizeBreakpointDesktopLarge = CGFloat(1600.00) 39 | public static let sizeBreakpointTabletLandscape = CGFloat(1024.00) 40 | public static let sizeBreakpointTabletPortrait = CGFloat(768.00) 41 | public static let sizeGutterDesktop = CGFloat(90.00) 42 | public static let sizeGutterDesktopWork = CGFloat(40.00) 43 | public static let sizeGutterMobile = CGFloat(20.00) 44 | public static let sizeGutterTablet = CGFloat(40.00) 45 | public static let sizeGutterTabletWork = CGFloat(25.00) 46 | public static let timeSlowly = TimeInterval(0.3) 47 | } 48 | -------------------------------------------------------------------------------- /scss/fonts.scss: -------------------------------------------------------------------------------- 1 | @use 'media-queries'; 2 | @use 'tokens'; 3 | 4 | /** 5 | * Quartz Font Mixins 6 | * 7 | * These mixins allow us to maintain a consistent typographic style 8 | * throughout qz.com and our wider family of products. 9 | * 10 | * To identify the font mixin used in a design, inspect the text box in 11 | * Abstract and look for 'Text Style' under the Properties panel in the 12 | * bar on the right. 13 | * 14 | * IMPORTANT: 15 | * 16 | * If you can't find a mixin that matches your designs, talk to your 17 | * friendly neighborhood designer. Avoid writing one-offs and do not 18 | * create new mixins here without the knowledge and approval of the 19 | * design team. 20 | * 21 | * Our mixins should match this document: 22 | * https://docs.google.com/spreadsheets/d/1jk-QoK22_lAoJbbyZyxVM1Ym7sakCNZGHVBtMOY6hxE/edit#gid=0 23 | */ 24 | 25 | @mixin maison-500-1 { 26 | @include maison; 27 | @include font-size-helper(11px, 13px, null); 28 | 29 | font-weight: 500; 30 | line-height: tokens.$font-line-height-maison-medium; 31 | } 32 | 33 | @mixin maison-500-2 { 34 | @include maison; 35 | @include font-size-helper(14px, 16px, null); 36 | 37 | font-weight: 500; 38 | line-height: tokens.$font-line-height-maison-medium; 39 | } 40 | 41 | @mixin maison-500-3 { 42 | @include maison; 43 | @include font-size-helper(14px, 20px, null); 44 | 45 | font-weight: 500; 46 | line-height: tokens.$font-line-height-maison-medium; 47 | } 48 | 49 | @mixin maison-500-4 { 50 | @include maison; 51 | @include font-size-helper(16px, 20px, null); 52 | 53 | font-weight: 500; 54 | line-height: tokens.$font-line-height-maison-medium; 55 | } 56 | 57 | @mixin maison-500-5 { 58 | @include maison; 59 | @include font-size-helper(14px, 20px, 30px); 60 | 61 | font-weight: 500; 62 | line-height: tokens.$font-line-height-maison-medium; 63 | } 64 | 65 | @mixin pt-serif-400-1 { 66 | @include pt-serif; 67 | @include font-size-helper(16px, 20px, null); 68 | 69 | font-weight: 400; 70 | line-height: tokens.$font-line-height-pt-serif; 71 | } 72 | 73 | @mixin maison-extended-700-1 { 74 | @include maison-extended; 75 | @include font-size-helper(11px, 13px, null); 76 | 77 | font-weight: 700; 78 | line-height: tokens.$font-line-height-maison-extra-bold; 79 | text-transform: uppercase; 80 | -webkit-hyphens: auto; 81 | -ms-hyphens: auto; 82 | hyphens: auto; 83 | } 84 | 85 | @mixin maison-extended-700-2 { 86 | @include maison-extended; 87 | @include font-size-helper(14px, 16px, null); 88 | 89 | font-weight: 700; 90 | line-height: tokens.$font-line-height-maison-extra-bold; 91 | text-transform: uppercase; 92 | -webkit-hyphens: auto; 93 | -ms-hyphens: auto; 94 | hyphens: auto; 95 | } 96 | 97 | @mixin maison-800-1 { 98 | @include maison; 99 | @include font-size-helper(11px, 13px, null); 100 | 101 | font-weight: 800; 102 | line-height: tokens.$font-line-height-maison-extra-bold; 103 | } 104 | 105 | @mixin maison-800-2 { 106 | @include maison; 107 | @include font-size-helper(14px, 16px, null); 108 | 109 | font-weight: 800; 110 | line-height: tokens.$font-line-height-maison-extra-bold; 111 | } 112 | 113 | @mixin maison-800-3 { 114 | @include maison; 115 | @include font-size-helper(14px, 20px, null); 116 | 117 | font-weight: 800; 118 | line-height: tokens.$font-line-height-maison-extra-bold; 119 | } 120 | 121 | @mixin maison-800-4 { 122 | @include maison; 123 | @include font-size-helper(16px, 20px, null); 124 | 125 | font-weight: 800; 126 | line-height: tokens.$font-line-height-maison-extra-bold; 127 | } 128 | 129 | @mixin maison-800-5 { 130 | @include maison; 131 | @include font-size-helper(20px, 32px, null); 132 | 133 | font-weight: 800; 134 | line-height: tokens.$font-line-height-maison-extra-bold; 135 | } 136 | 137 | @mixin maison-800-6 { 138 | @include maison; 139 | @include font-size-helper(24px, 40px, null); 140 | 141 | font-weight: 800; 142 | line-height: tokens.$font-line-height-maison-extra-bold; 143 | } 144 | 145 | @mixin maison-800-7 { 146 | @include maison; 147 | @include font-size-helper(16px, 28px, 48px); 148 | 149 | font-weight: 800; 150 | line-height: tokens.$font-line-height-maison-extra-bold; 151 | } 152 | 153 | @mixin maison-800-8 { 154 | @include maison; 155 | @include font-size-helper(18px, 24px); 156 | 157 | font-weight: 800; 158 | line-height: tokens.$font-line-height-maison-extra-bold; 159 | } 160 | 161 | @mixin maison-800-9 { 162 | @include maison; 163 | @include font-size-helper(24px, 48px, 64px); 164 | 165 | font-weight: 800; 166 | line-height: tokens.$font-line-height-maison-extra-bold; 167 | } 168 | 169 | @mixin maison-800-10 { 170 | @include maison; 171 | @include font-size-helper(28px, 64px, 80px); 172 | 173 | font-weight: 800; 174 | line-height: tokens.$font-line-height-maison-extra-bold; 175 | } 176 | 177 | @mixin publico-800-1 { 178 | @include publico-headline; 179 | @include font-size-helper(24px, 48px, 64px); 180 | 181 | font-weight: 800; 182 | line-height: tokens.$font-line-height-maison-extra-bold; 183 | } 184 | 185 | /** 186 | * Helper mixins 187 | * 188 | * Avoid using the following mixins outside this file whenever 189 | * possible. 190 | */ 191 | 192 | @mixin maison { 193 | font-family: $maison; 194 | } 195 | 196 | @mixin maison-extended { 197 | font-family: $maison-extended; 198 | } 199 | 200 | @mixin pt-serif { 201 | font-family: $pt-serif; 202 | } 203 | 204 | @mixin publico-headline { 205 | font-family: $publico-headline; 206 | } 207 | 208 | /* 209 | * STOP HERE! 210 | * 211 | * Do not reference the following variables or mixins outside this file! 212 | * 213 | * Use a mixin to ensure non-system fonts are loaded correctly. 214 | */ 215 | 216 | $font-default-sans-fallback: -apple-system, 'Helvetica Neue', Helvetica, 'Hiragino Sans', sans-serif; 217 | $font-default-serif-fallback: Georgia, 'Hiragino Sans', serif; 218 | 219 | $maison: 'MaisonNeue', $font-default-sans-fallback; 220 | $maison-extended: 'MaisonNeueExtended', $font-default-sans-fallback; 221 | $publico-headline: 'Publico Headline', $font-default-serif-fallback; 222 | $pt-serif: 'PTSerif', $font-default-serif-fallback; 223 | 224 | /** 225 | * Do not use this mixin directly! This mixin is only to be used the 226 | * predefined font mixins above; ensure you shouldn't be using one of 227 | * them first. If you absolutely must create a one-off, e.g. for a 228 | * special editorial project, you should use the break points directly 229 | * in your component's CSS file. 230 | * */ 231 | @mixin font-size-helper($mobile, $tablet-portrait: null, $tablet-landscape: null) { 232 | font-size: $mobile; 233 | 234 | @if $tablet-portrait != null { 235 | @include media-queries.tablet-portrait-up { 236 | font-size: $tablet-portrait; 237 | } 238 | } 239 | 240 | @if $tablet-landscape != null { 241 | @include media-queries.tablet-landscape-up { 242 | font-size: $tablet-landscape; 243 | } 244 | } 245 | } 246 | --------------------------------------------------------------------------------