diff --git a/CHANGELOG.md b/CHANGELOG.md index aaa5ed94..b5cac744 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +- Updated `color-yellow-dark` for accessibility ([#44](https://github.com/Shopify/polaris-tokens/pull/44)) - Documented how to import tokens using ES Modules ([#37](https://github.com/Shopify/polaris-tokens/pull/37)) - Updated Node.js to v10 - Updated Node.js & Ruby dependencies diff --git a/__tests__/__snapshots__/colors.test.js.snap b/__tests__/__snapshots__/colors.test.js.snap index 414dc7fa..b87bce88 100644 --- a/__tests__/__snapshots__/colors.test.js.snap +++ b/__tests__/__snapshots__/colors.test.js.snap @@ -534,9 +534,9 @@ Array [ }, Object { "color": Array [ - 0.611764705882353, - 0.43529411764705883, - 0.09803921568627451, + 0.5411764705882353, + 0.3803921568627451, + 0.08627450980392157, ], "model": "RGB", "name": "yellow-dark", @@ -640,7 +640,7 @@ Object { "color-teal-text": "rgb(64, 83, 82)", "color-white": "rgb(255, 255, 255)", "color-yellow": "rgb(238, 194, 0)", - "color-yellow-dark": "rgb(156, 111, 25)", + "color-yellow-dark": "rgb(138, 97, 22)", "color-yellow-darker": "rgb(87, 59, 0)", "color-yellow-light": "rgb(255, 234, 138)", "color-yellow-lighter": "rgb(252, 241, 205)", @@ -810,7 +810,7 @@ Object { "value": "#eec200", }, "color-yellow-dark": Object { - "value": "#9c6f19", + "value": "#8a6116", }, "color-yellow-darker": Object { "value": "#573b00", @@ -1205,7 +1205,7 @@ Array [ "name": "color-yellow-dark", "originalValue": "{!color-yellow-dark}", "type": "color", - "value": "rgb(156, 111, 25)", + "value": "rgb(138, 97, 22)", }, Object { "category": "background-color", @@ -1388,9 +1388,9 @@ exports[`renders Polaris.sketchpalette correctly 1`] = ` \\"alpha\\": 1 }, { - \\"red\\": 0.611764705882353, - \\"green\\": 0.43529411764705883, - \\"blue\\": 0.09803921568627451, + \\"red\\": 0.5411764705882353, + \\"green\\": 0.3803921568627451, + \\"blue\\": 0.08627450980392157, \\"alpha\\": 1 }, { @@ -1666,7 +1666,7 @@ exports[`renders colors.android.xml correctly 1`] = ` #ff405352 #ffffffff #ffeec200 - #ff9c6f19 + #ff8a6116 #ff573b00 #ffffea8a #fffcf1cd @@ -1719,7 +1719,7 @@ exports[`renders colors.color-map.scss correctly 1`] = ` 'yellow': ( 'text': rgb(89, 81, 48), 'darker': rgb(87, 59, 0), - 'dark': rgb(156, 111, 25), + 'dark': rgb(138, 97, 22), 'base': rgb(238, 194, 0), 'light': rgb(255, 234, 138), 'lighter': rgb(252, 241, 205), @@ -1796,7 +1796,7 @@ exports[`renders colors.custom-properties.css correctly 1`] = ` --color-green-lighter: rgb(227, 241, 223); --color-yellow-text: rgb(89, 81, 48); --color-yellow-darker: rgb(87, 59, 0); - --color-yellow-dark: rgb(156, 111, 25); + --color-yellow-dark: rgb(138, 97, 22); --color-yellow: rgb(238, 194, 0); --color-yellow-light: rgb(255, 234, 138); --color-yellow-lighter: rgb(252, 241, 205); @@ -1859,7 +1859,7 @@ $color-green-light: rgb(187, 229, 179); $color-green-lighter: rgb(227, 241, 223); $color-yellow-text: rgb(89, 81, 48); $color-yellow-darker: rgb(87, 59, 0); -$color-yellow-dark: rgb(156, 111, 25); +$color-yellow-dark: rgb(138, 97, 22); $color-yellow: rgb(238, 194, 0); $color-yellow-light: rgb(255, 234, 138); $color-yellow-lighter: rgb(252, 241, 205); @@ -1943,7 +1943,7 @@ exports[`renders index.d.ts correctly 1`] = ` colorTealText: \\"rgb(64, 83, 82)\\"; colorWhite: \\"rgb(255, 255, 255)\\"; colorYellow: \\"rgb(238, 194, 0)\\"; - colorYellowDark: \\"rgb(156, 111, 25)\\"; + colorYellowDark: \\"rgb(138, 97, 22)\\"; colorYellowDarker: \\"rgb(87, 59, 0)\\"; colorYellowLight: \\"rgb(255, 234, 138)\\"; colorYellowLighter: \\"rgb(252, 241, 205)\\"; diff --git a/data/color-metadata.yml b/data/color-metadata.yml index f1c4f6be..6556bad4 100644 --- a/data/color-metadata.yml +++ b/data/color-metadata.yml @@ -63,7 +63,7 @@ color-yellow-text: color-yellow-darker: filter: brightness(0) saturate(100%) invert(19%) sepia(75%) saturate(981%) hue-rotate(17deg) brightness(103%) contrast(103%) color-yellow-dark: - filter: brightness(0) saturate(100%) invert(45%) sepia(48%) saturate(6022%) hue-rotate(31deg) brightness(93%) contrast(80%) + filter: brightness(0) saturate(100%) invert(37%) sepia(51%) saturate(709%) hue-rotate(0deg) brightness(93%) contrast(89%) color-yellow: filter: brightness(0) saturate(100%) invert(65%) sepia(91%) saturate(530%) hue-rotate(5deg) brightness(100%) contrast(100%) color-yellow-light: diff --git a/dist/Polaris.ase b/dist/Polaris.ase index 1656ee22..6e07ada6 100644 Binary files a/dist/Polaris.ase and b/dist/Polaris.ase differ diff --git a/dist/Polaris.clr b/dist/Polaris.clr index c55ae3c5..9b32751c 100644 Binary files a/dist/Polaris.clr and b/dist/Polaris.clr differ diff --git a/dist/Polaris.sketchpalette b/dist/Polaris.sketchpalette index 0a465682..e798ea6b 100644 --- a/dist/Polaris.sketchpalette +++ b/dist/Polaris.sketchpalette @@ -147,9 +147,9 @@ "alpha": 1 }, { - "red": 0.611764705882353, - "green": 0.43529411764705883, - "blue": 0.09803921568627451, + "red": 0.5411764705882353, + "green": 0.3803921568627451, + "blue": 0.08627450980392157, "alpha": 1 }, { diff --git a/dist/color-filters.raw.json b/dist/color-filters.raw.json index d1742b01..22bdd651 100644 --- a/dist/color-filters.raw.json +++ b/dist/color-filters.raw.json @@ -25,7 +25,7 @@ "value": "#b3bcf5" }, "color-yellow-dark": { - "value": "#9c6f19" + "value": "#8a6116" }, "color-ink-light": { "value": "#454f5b" diff --git a/dist/colors.android.xml b/dist/colors.android.xml index 015a1d15..e70a0834 100644 --- a/dist/colors.android.xml +++ b/dist/colors.android.xml @@ -53,7 +53,7 @@ #ff405352 #ffffffff #ffeec200 - #ff9c6f19 + #ff8a6116 #ff573b00 #ffffea8a #fffcf1cd diff --git a/dist/colors.ase.json b/dist/colors.ase.json index a2aa0098..886940cb 100644 --- a/dist/colors.ase.json +++ b/dist/colors.ase.json @@ -198,7 +198,7 @@ "name": "yellow-dark", "model": "RGB", "type": "global", - "color": [0.611764705882353, 0.43529411764705883, 0.09803921568627451] + "color": [0.5411764705882353, 0.3803921568627451, 0.08627450980392157] }, { "name": "yellow", diff --git a/dist/colors.color-map.scss b/dist/colors.color-map.scss index 14b2fbdd..5ecfbbcb 100644 --- a/dist/colors.color-map.scss +++ b/dist/colors.color-map.scss @@ -42,7 +42,7 @@ $polaris-colors: ( 'yellow': ( 'text': rgb(89, 81, 48), 'darker': rgb(87, 59, 0), - 'dark': rgb(156, 111, 25), + 'dark': rgb(138, 97, 22), 'base': rgb(238, 194, 0), 'light': rgb(255, 234, 138), 'lighter': rgb(252, 241, 205), diff --git a/dist/colors.common.js b/dist/colors.common.js index 17fd62af..feb546b5 100644 --- a/dist/colors.common.js +++ b/dist/colors.common.js @@ -31,7 +31,7 @@ module.exports = { colorGreenLighter: 'rgb(227, 241, 223)', colorYellowText: 'rgb(89, 81, 48)', colorYellowDarker: 'rgb(87, 59, 0)', - colorYellowDark: 'rgb(156, 111, 25)', + colorYellowDark: 'rgb(138, 97, 22)', colorYellow: 'rgb(238, 194, 0)', colorYellowLight: 'rgb(255, 234, 138)', colorYellowLighter: 'rgb(252, 241, 205)', diff --git a/dist/colors.custom-properties.css b/dist/colors.custom-properties.css index 0d9cff0a..75232ee3 100644 --- a/dist/colors.custom-properties.css +++ b/dist/colors.custom-properties.css @@ -31,7 +31,7 @@ --color-green-lighter: rgb(227, 241, 223); --color-yellow-text: rgb(89, 81, 48); --color-yellow-darker: rgb(87, 59, 0); - --color-yellow-dark: rgb(156, 111, 25); + --color-yellow-dark: rgb(138, 97, 22); --color-yellow: rgb(238, 194, 0); --color-yellow-light: rgb(255, 234, 138); --color-yellow-lighter: rgb(252, 241, 205); diff --git a/dist/colors.json b/dist/colors.json index b69b67b7..b2c73b5d 100644 --- a/dist/colors.json +++ b/dist/colors.json @@ -31,7 +31,7 @@ "color-green-lighter": "rgb(227, 241, 223)", "color-yellow-text": "rgb(89, 81, 48)", "color-yellow-darker": "rgb(87, 59, 0)", - "color-yellow-dark": "rgb(156, 111, 25)", + "color-yellow-dark": "rgb(138, 97, 22)", "color-yellow": "rgb(238, 194, 0)", "color-yellow-light": "rgb(255, 234, 138)", "color-yellow-lighter": "rgb(252, 241, 205)", diff --git a/dist/colors.map.scss b/dist/colors.map.scss index 04446ffa..d6f27045 100644 --- a/dist/colors.map.scss +++ b/dist/colors.map.scss @@ -96,7 +96,7 @@ $polaris-colors-map: ( rgb(87, 59, 0), ), 'color-yellow-dark': ( - rgb(156, 111, 25), + rgb(138, 97, 22), ), 'color-yellow': ( rgb(238, 194, 0), diff --git a/dist/colors.raw.json b/dist/colors.raw.json index 36f6986d..a6c8d1ca 100644 --- a/dist/colors.raw.json +++ b/dist/colors.raw.json @@ -25,7 +25,7 @@ "value": "#b3bcf5" }, "color-yellow-dark": { - "value": "#9c6f19" + "value": "#8a6116" }, "color-ink-light": { "value": "#454f5b" @@ -404,7 +404,7 @@ "type": "color", "category": "background-color", "name": "color-yellow-dark", - "value": "rgb(156, 111, 25)", + "value": "rgb(138, 97, 22)", "originalValue": "{!color-yellow-dark}" }, "color-yellow": { diff --git a/dist/colors.scss b/dist/colors.scss index 5bce3fb2..c2d553d6 100644 --- a/dist/colors.scss +++ b/dist/colors.scss @@ -30,7 +30,7 @@ $color-green-light: rgb(187, 229, 179); $color-green-lighter: rgb(227, 241, 223); $color-yellow-text: rgb(89, 81, 48); $color-yellow-darker: rgb(87, 59, 0); -$color-yellow-dark: rgb(156, 111, 25); +$color-yellow-dark: rgb(138, 97, 22); $color-yellow: rgb(238, 194, 0); $color-yellow-light: rgb(255, 234, 138); $color-yellow-lighter: rgb(252, 241, 205); diff --git a/dist/index.common.js b/dist/index.common.js index bedeb881..89b3236c 100644 --- a/dist/index.common.js +++ b/dist/index.common.js @@ -31,7 +31,7 @@ module.exports = { colorGreenLighter: 'rgb(227, 241, 223)', colorYellowText: 'rgb(89, 81, 48)', colorYellowDarker: 'rgb(87, 59, 0)', - colorYellowDark: 'rgb(156, 111, 25)', + colorYellowDark: 'rgb(138, 97, 22)', colorYellow: 'rgb(238, 194, 0)', colorYellowLight: 'rgb(255, 234, 138)', colorYellowLighter: 'rgb(252, 241, 205)', diff --git a/dist/index.custom-properties.css b/dist/index.custom-properties.css index 2af2aac8..8d9b8038 100644 --- a/dist/index.custom-properties.css +++ b/dist/index.custom-properties.css @@ -31,7 +31,7 @@ --color-green-lighter: rgb(227, 241, 223); --color-yellow-text: rgb(89, 81, 48); --color-yellow-darker: rgb(87, 59, 0); - --color-yellow-dark: rgb(156, 111, 25); + --color-yellow-dark: rgb(138, 97, 22); --color-yellow: rgb(238, 194, 0); --color-yellow-light: rgb(255, 234, 138); --color-yellow-lighter: rgb(252, 241, 205); diff --git a/dist/index.d.ts b/dist/index.d.ts index 074f91e5..18569aca 100644 --- a/dist/index.d.ts +++ b/dist/index.d.ts @@ -52,7 +52,7 @@ declare interface Tokens { colorTealText: "rgb(64, 83, 82)"; colorWhite: "rgb(255, 255, 255)"; colorYellow: "rgb(238, 194, 0)"; - colorYellowDark: "rgb(156, 111, 25)"; + colorYellowDark: "rgb(138, 97, 22)"; colorYellowDarker: "rgb(87, 59, 0)"; colorYellowLight: "rgb(255, 234, 138)"; colorYellowLighter: "rgb(252, 241, 205)"; diff --git a/dist/index.json b/dist/index.json index b537c9bf..40e47a67 100644 --- a/dist/index.json +++ b/dist/index.json @@ -31,7 +31,7 @@ "color-green-lighter": "rgb(227, 241, 223)", "color-yellow-text": "rgb(89, 81, 48)", "color-yellow-darker": "rgb(87, 59, 0)", - "color-yellow-dark": "rgb(156, 111, 25)", + "color-yellow-dark": "rgb(138, 97, 22)", "color-yellow": "rgb(238, 194, 0)", "color-yellow-light": "rgb(255, 234, 138)", "color-yellow-lighter": "rgb(252, 241, 205)", diff --git a/dist/index.map.scss b/dist/index.map.scss index d9593fa6..69177f13 100644 --- a/dist/index.map.scss +++ b/dist/index.map.scss @@ -96,7 +96,7 @@ $polaris-index-map: ( rgb(87, 59, 0), ), 'color-yellow-dark': ( - rgb(156, 111, 25), + rgb(138, 97, 22), ), 'color-yellow': ( rgb(238, 194, 0), diff --git a/dist/index.raw.json b/dist/index.raw.json index 376760d2..6442922f 100644 --- a/dist/index.raw.json +++ b/dist/index.raw.json @@ -25,7 +25,7 @@ "value": "#b3bcf5" }, "color-yellow-dark": { - "value": "#9c6f19" + "value": "#8a6116" }, "color-ink-light": { "value": "#454f5b" @@ -404,7 +404,7 @@ "type": "color", "category": "background-color", "name": "color-yellow-dark", - "value": "rgb(156, 111, 25)", + "value": "rgb(138, 97, 22)", "originalValue": "{!color-yellow-dark}" }, "color-yellow": { diff --git a/dist/index.scss b/dist/index.scss index 6123a7da..4e619557 100644 --- a/dist/index.scss +++ b/dist/index.scss @@ -30,7 +30,7 @@ $color-green-light: rgb(187, 229, 179); $color-green-lighter: rgb(227, 241, 223); $color-yellow-text: rgb(89, 81, 48); $color-yellow-darker: rgb(87, 59, 0); -$color-yellow-dark: rgb(156, 111, 25); +$color-yellow-dark: rgb(138, 97, 22); $color-yellow: rgb(238, 194, 0); $color-yellow-light: rgb(255, 234, 138); $color-yellow-lighter: rgb(252, 241, 205); diff --git a/docs/index.css b/docs/index.css index 0e5ea10b..887878c9 100644 --- a/docs/index.css +++ b/docs/index.css @@ -145,3 +145,5 @@ code { background-image: linear-gradient(#dfe3e8 1px, transparent 1px); background-size: 100% 1rem; } + +/*# sourceMappingURL=index.css.map */ diff --git a/docs/index.css.map b/docs/index.css.map index 3b31da16..c488a82b 100644 --- a/docs/index.css.map +++ b/docs/index.css.map @@ -1 +1 @@ -{"version":3,"file":"index.css","sources":["polaris-index.scss","../dist/index.scss"],"sourcesContent":["// stylelint-disable property-no-vendor-prefix, selector-max-type, selector-class-pattern\n\n@import '../dist/index';\n\nhtml,\nbody {\n font-size: 1.5rem;\n font-weight: 400;\n line-height: 2rem;\n text-transform: initial;\n letter-spacing: initial;\n color: $color-ink;\n font-family: unquote($font-stack-base);\n}\n\n@media (min-width: 40em) {\n html,\n body {\n font-size: 1.4rem;\n }\n}\n\nhtml {\n position: relative;\n box-sizing: border-box;\n font-size: 62.5%;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n -webkit-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n text-size-adjust: 100%;\n text-rendering: optimizeLegibility;\n}\n\nbody {\n min-height: 100%;\n margin: 0;\n padding: 0;\n background-color: $color-sky-light;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np {\n margin: 0;\n font-size: 1em;\n font-weight: 400;\n}\n\n.banner,\n.contentinfo {\n background: $color-sky-light;\n}\n\n.banner {\n padding: 1em 0;\n}\n\n.container {\n margin: 0 auto;\n padding: $spacing-base $spacing-extra-loose;\n max-width: 128rem;\n}\n\n.container--shadow {\n background: $color-white;\n border-radius: 6px;\n box-shadow: 0 1.2rem 3.6rem rgba(0, 0, 0, 0.2);\n margin-bottom: $spacing-extra-loose * 2;\n}\n\nh1 {\n margin: 0;\n font-size: 3rem;\n font-weight: 400;\n line-height: 2;\n padding-left: $spacing-loose;\n}\n\nsection + section {\n margin-top: $spacing-extra-loose * 2;\n}\n\ntable {\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 1rem;\n width: 100%;\n}\n\nth,\ntd {\n padding: 0 1rem;\n vertical-align: baseline;\n word-break: break-word;\n hyphens: auto;\n}\n\nth {\n font-weight: 400;\n text-align: left;\n}\n\nthead th {\n border-bottom: 1px solid $color-indigo-lighter;\n padding-top: 1rem;\n padding-bottom: 0.5rem;\n color: $color-ink-lighter;\n}\n\nthead th:first-child {\n font-size: 2rem;\n color: inherit;\n}\n\ncode {\n font-family: unquote($font-stack-monospace);\n}\n\n.metric-box,\n.radius-box {\n display: inline-block;\n vertical-align: middle;\n background: $color-sky;\n}\n\n.radius-box {\n width: 100%;\n height: 3rem;\n}\n\n.radius-box.borderRadiusCircle {\n width: 3rem;\n}\n\n.line-height-example {\n border-bottom: 1px solid $color-sky;\n background-image: linear-gradient($color-sky 1px, transparent 1px);\n background-size: 100% 1rem;\n}\n","\n$color-purple-text: rgb(80, 73, 90);\n$color-purple-darker: rgb(35, 0, 81);\n$color-purple-dark: rgb(80, 36, 143);\n$color-purple: rgb(156, 106, 222);\n$color-purple-light: rgb(227, 208, 255);\n$color-purple-lighter: rgb(246, 240, 253);\n$color-indigo-text: rgb(62, 65, 85);\n$color-indigo-darker: rgb(0, 6, 57);\n$color-indigo-dark: rgb(32, 46, 120);\n$color-indigo: rgb(92, 106, 196);\n$color-indigo-light: rgb(179, 188, 245);\n$color-indigo-lighter: rgb(244, 245, 250);\n$color-blue-text: rgb(62, 78, 87);\n$color-blue-darker: rgb(0, 20, 41);\n$color-blue-dark: rgb(8, 78, 138);\n$color-blue: rgb(0, 122, 206);\n$color-blue-light: rgb(180, 225, 250);\n$color-blue-lighter: rgb(235, 245, 250);\n$color-teal-text: rgb(64, 83, 82);\n$color-teal-darker: rgb(0, 49, 53);\n$color-teal-dark: rgb(0, 132, 142);\n$color-teal: rgb(71, 193, 191);\n$color-teal-light: rgb(183, 236, 236);\n$color-teal-lighter: rgb(224, 245, 245);\n$color-green-text: rgb(65, 79, 62);\n$color-green-darker: rgb(23, 54, 48);\n$color-green-dark: rgb(16, 128, 67);\n$color-green: rgb(80, 184, 60);\n$color-green-light: rgb(187, 229, 179);\n$color-green-lighter: rgb(227, 241, 223);\n$color-yellow-text: rgb(89, 81, 48);\n$color-yellow-darker: rgb(87, 59, 0);\n$color-yellow-dark: rgb(156, 111, 25);\n$color-yellow: rgb(238, 194, 0);\n$color-yellow-light: rgb(255, 234, 138);\n$color-yellow-lighter: rgb(252, 241, 205);\n$color-orange-text: rgb(89, 68, 48);\n$color-orange-darker: rgb(74, 21, 4);\n$color-orange-dark: rgb(192, 87, 23);\n$color-orange: rgb(244, 147, 66);\n$color-orange-light: rgb(255, 197, 139);\n$color-orange-lighter: rgb(252, 235, 219);\n$color-red-text: rgb(88, 60, 53);\n$color-red-darker: rgb(51, 1, 1);\n$color-red-dark: rgb(191, 7, 17);\n$color-red: rgb(222, 54, 24);\n$color-red-light: rgb(254, 173, 154);\n$color-red-lighter: rgb(251, 234, 229);\n$color-ink: rgb(33, 43, 54);\n$color-ink-light: rgb(69, 79, 91);\n$color-ink-lighter: rgb(99, 115, 129);\n$color-ink-lightest: rgb(145, 158, 171);\n$color-sky-dark: rgb(196, 205, 213);\n$color-sky: rgb(223, 227, 232);\n$color-sky-light: rgb(244, 246, 248);\n$color-sky-lighter: rgb(249, 250, 251);\n$color-black: rgb(0, 0, 0);\n$color-white: rgb(255, 255, 255);\n$spacing-none: 0;\n$spacing-extra-tight: 4px;\n$spacing-tight: 8px;\n$spacing-base: 16px;\n$spacing-loose: 20px;\n$spacing-extra-loose: 32px;\n$font-stack-base: \"-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif\";\n$font-stack-monospace: \"Monaco, Consolas, 'Lucida Console', monospace\";\n"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"index.css","sources":["polaris-index.scss","../dist/index.scss"],"sourcesContent":["// stylelint-disable property-no-vendor-prefix, selector-max-type, selector-class-pattern\n\n@import '../dist/index';\n\nhtml,\nbody {\n font-size: 1.5rem;\n font-weight: 400;\n line-height: 2rem;\n text-transform: initial;\n letter-spacing: initial;\n color: $color-ink;\n font-family: unquote($font-stack-base);\n}\n\n@media (min-width: 40em) {\n html,\n body {\n font-size: 1.4rem;\n }\n}\n\nhtml {\n position: relative;\n box-sizing: border-box;\n font-size: 62.5%;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n -webkit-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n text-size-adjust: 100%;\n text-rendering: optimizeLegibility;\n}\n\nbody {\n min-height: 100%;\n margin: 0;\n padding: 0;\n background-color: $color-sky-light;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np {\n margin: 0;\n font-size: 1em;\n font-weight: 400;\n}\n\n.banner,\n.contentinfo {\n background: $color-sky-light;\n}\n\n.banner {\n padding: 1em 0;\n}\n\n.container {\n margin: 0 auto;\n padding: $spacing-base $spacing-extra-loose;\n max-width: 128rem;\n}\n\n.container--shadow {\n background: $color-white;\n border-radius: 6px;\n box-shadow: 0 1.2rem 3.6rem rgba(0, 0, 0, 0.2);\n margin-bottom: $spacing-extra-loose * 2;\n}\n\nh1 {\n margin: 0;\n font-size: 3rem;\n font-weight: 400;\n line-height: 2;\n padding-left: $spacing-loose;\n}\n\nsection + section {\n margin-top: $spacing-extra-loose * 2;\n}\n\ntable {\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 1rem;\n width: 100%;\n}\n\nth,\ntd {\n padding: 0 1rem;\n vertical-align: baseline;\n word-break: break-word;\n hyphens: auto;\n}\n\nth {\n font-weight: 400;\n text-align: left;\n}\n\nthead th {\n border-bottom: 1px solid $color-indigo-lighter;\n padding-top: 1rem;\n padding-bottom: 0.5rem;\n color: $color-ink-lighter;\n}\n\nthead th:first-child {\n font-size: 2rem;\n color: inherit;\n}\n\ncode {\n font-family: unquote($font-stack-monospace);\n}\n\n.metric-box,\n.radius-box {\n display: inline-block;\n vertical-align: middle;\n background: $color-sky;\n}\n\n.radius-box {\n width: 100%;\n height: 3rem;\n}\n\n.radius-box.borderRadiusCircle {\n width: 3rem;\n}\n\n.line-height-example {\n border-bottom: 1px solid $color-sky;\n background-image: linear-gradient($color-sky 1px, transparent 1px);\n background-size: 100% 1rem;\n}\n","\n$color-purple-text: rgb(80, 73, 90);\n$color-purple-darker: rgb(35, 0, 81);\n$color-purple-dark: rgb(80, 36, 143);\n$color-purple: rgb(156, 106, 222);\n$color-purple-light: rgb(227, 208, 255);\n$color-purple-lighter: rgb(246, 240, 253);\n$color-indigo-text: rgb(62, 65, 85);\n$color-indigo-darker: rgb(0, 6, 57);\n$color-indigo-dark: rgb(32, 46, 120);\n$color-indigo: rgb(92, 106, 196);\n$color-indigo-light: rgb(179, 188, 245);\n$color-indigo-lighter: rgb(244, 245, 250);\n$color-blue-text: rgb(62, 78, 87);\n$color-blue-darker: rgb(0, 20, 41);\n$color-blue-dark: rgb(8, 78, 138);\n$color-blue: rgb(0, 122, 206);\n$color-blue-light: rgb(180, 225, 250);\n$color-blue-lighter: rgb(235, 245, 250);\n$color-teal-text: rgb(64, 83, 82);\n$color-teal-darker: rgb(0, 49, 53);\n$color-teal-dark: rgb(0, 132, 142);\n$color-teal: rgb(71, 193, 191);\n$color-teal-light: rgb(183, 236, 236);\n$color-teal-lighter: rgb(224, 245, 245);\n$color-green-text: rgb(65, 79, 62);\n$color-green-darker: rgb(23, 54, 48);\n$color-green-dark: rgb(16, 128, 67);\n$color-green: rgb(80, 184, 60);\n$color-green-light: rgb(187, 229, 179);\n$color-green-lighter: rgb(227, 241, 223);\n$color-yellow-text: rgb(89, 81, 48);\n$color-yellow-darker: rgb(87, 59, 0);\n$color-yellow-dark: rgb(138, 97, 22);\n$color-yellow: rgb(238, 194, 0);\n$color-yellow-light: rgb(255, 234, 138);\n$color-yellow-lighter: rgb(252, 241, 205);\n$color-orange-text: rgb(89, 68, 48);\n$color-orange-darker: rgb(74, 21, 4);\n$color-orange-dark: rgb(192, 87, 23);\n$color-orange: rgb(244, 147, 66);\n$color-orange-light: rgb(255, 197, 139);\n$color-orange-lighter: rgb(252, 235, 219);\n$color-red-text: rgb(88, 60, 53);\n$color-red-darker: rgb(51, 1, 1);\n$color-red-dark: rgb(191, 7, 17);\n$color-red: rgb(222, 54, 24);\n$color-red-light: rgb(254, 173, 154);\n$color-red-lighter: rgb(251, 234, 229);\n$color-ink: rgb(33, 43, 54);\n$color-ink-light: rgb(69, 79, 91);\n$color-ink-lighter: rgb(99, 115, 129);\n$color-ink-lightest: rgb(145, 158, 171);\n$color-sky-dark: rgb(196, 205, 213);\n$color-sky: rgb(223, 227, 232);\n$color-sky-light: rgb(244, 246, 248);\n$color-sky-lighter: rgb(249, 250, 251);\n$color-black: rgb(0, 0, 0);\n$color-white: rgb(255, 255, 255);\n$spacing-none: 0;\n$spacing-extra-tight: 4px;\n$spacing-tight: 8px;\n$spacing-base: 16px;\n$spacing-loose: 20px;\n$spacing-extra-loose: 32px;\n$font-stack-base: \"-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif\";\n$font-stack-monospace: \"Monaco, Consolas, 'Lucida Console', monospace\";\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index cacb6f9a..4996ffa8 100644 --- a/docs/index.html +++ b/docs/index.html @@ -351,8 +351,8 @@

Design Tokens

color-yellow-dark - #9c6f19 - + #8a6116 + diff --git a/tokens/colors.yml b/tokens/colors.yml index 6fc60fd7..f4a610be 100644 --- a/tokens/colors.yml +++ b/tokens/colors.yml @@ -1,7 +1,7 @@ # DO NOT MANUALLY EDIT THIS FILE # This file was automatically generated # Run 'yarn get-tokens-from-invision-dsm' to generate a new version -# Last updated: 2018-09-27T17:07:26.349Z +# Last updated: 2019-01-04T14:40:34.360Z aliases: color-purple-text: '#50495a' color-purple-darker: '#230051' @@ -35,7 +35,7 @@ aliases: color-green-lighter: '#e3f1df' color-yellow-text: '#595130' color-yellow-darker: '#573b00' - color-yellow-dark: '#9c6f19' + color-yellow-dark: '#8a6116' color-yellow: '#eec200' color-yellow-light: '#ffea8a' color-yellow-lighter: '#fcf1cd'