From bfb85926fa7a92b53f0b0ac25364fe75c3682119 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Mon, 20 Jan 2020 10:44:43 -0300 Subject: [PATCH 01/31] removed deprecated colors --- src/tokens/color.yml | 344 ------------------------------------------- 1 file changed, 344 deletions(-) diff --git a/src/tokens/color.yml b/src/tokens/color.yml index 6573fbc9d..72b70fb4c 100644 --- a/src/tokens/color.yml +++ b/src/tokens/color.yml @@ -27,350 +27,6 @@ props: value: '#05b5da' category: color-group-brand-creative-commons - color_red_0: - value: '#fff5f5' - category: color-group-function-red - color_red_1: - value: '#ffe3e3' - category: color-group-function-red - color_red_2: - value: '#ffc9c9' - category: color-group-function-red - color_red_3: - value: '#ffa8a8' - category: color-group-function-red - color_red_4: - value: '#ff8787' - category: color-group-function-red - color_red_5: - value: '#ff6b6b' - category: color-group-function-red - color_red_6: - value: '#fa5252' - category: color-group-function-red - color_red_7: - value: '#f03e3e' - category: color-group-function-red - color_red_8: - value: '#e03131' - category: color-group-function-red - color_red_9: - value: '#c92a2a' - category: color-group-function-red - - color_pink_0: - value: '#fff0f6' - category: color-group-function-pink - color_pink_1: - value: '#ffdeeb' - category: color-group-function-pink - color_pink_2: - value: '#fcc2d7' - category: color-group-function-pink - color_pink_3: - value: '#faa2c1' - category: color-group-function-pink - color_pink_4: - value: '#f783ac' - category: color-group-function-pink - color_pink_5: - value: '#f06595' - category: color-group-function-pink - color_pink_6: - value: '#e64980' - category: color-group-function-pink - color_pink_7: - value: '#d6336c' - category: color-group-function-pink - color_pink_8: - value: '#c2255c' - category: color-group-function-pink - color_pink_9: - value: '#a61e4d' - category: color-group-function-pink - - color_grape_0: - value: '#f8f0fc' - category: color-group-function-grape - color_grape_1: - value: '#f3d9fa' - category: color-group-function-grape - color_grape_2: - value: '#eebefa' - category: color-group-function-grape - color_grape_3: - value: '#e599f7' - category: color-group-function-grape - color_grape_4: - value: '#da77f2' - category: color-group-function-grape - color_grape_5: - value: '#cc5de8' - category: color-group-function-grape - color_grape_6: - value: '#be4bdb' - category: color-group-function-grape - color_grape_7: - value: '#ae3ec9' - category: color-group-function-grape - color_grape_8: - value: '#9c36b5' - category: color-group-function-grape - color_grape_9: - value: '#862e9c' - category: color-group-function-grape - - color_violet_0: - value: '#f3f0ff' - category: color-group-function-violet - color_violet_1: - value: '#e5dbff' - category: color-group-function-violet - color_violet_2: - value: '#d0bfff' - category: color-group-function-violet - color_violet_3: - value: '#b197fc' - category: color-group-function-violet - color_violet_4: - value: '#9775fa' - category: color-group-function-violet - color_violet_5: - value: '#845ef7' - category: color-group-function-violet - color_violet_6: - value: '#7950f2' - category: color-group-function-violet - color_violet_7: - value: '#7048e8' - category: color-group-function-violet - color_violet_8: - value: '#6741d9' - category: color-group-function-violet - color_violet_9: - value: '#5f3dc4' - category: color-group-function-violet - - color_indigo_0: - value: '#e7f5ff' - category: color-group-function-indigo - color_indigo_1: - value: '#d0ebff' - category: color-group-function-indigo - color_indigo_2: - value: '#a5d8ff' - category: color-group-function-indigo - color_indigo_3: - value: '#74c0fc' - category: color-group-function-indigo - color_indigo_4: - value: '#4dabf7' - category: color-group-function-indigo - color_indigo_5: - value: '#339af0' - category: color-group-function-indigo - color_indigo_6: - value: '#228be6' - category: color-group-function-indigo - color_indigo_7: - value: '#1c7ed6' - category: color-group-function-indigo - color_indigo_8: - value: '#1971c2' - category: color-group-function-indigo - color_indigo_9: - value: '#1864ab' - category: color-group-function-indigo - - color_cyan_0: - value: '#e3fafc' - category: color-group-function-cyan - color_cyan_1: - value: '#c5f6fa' - category: color-group-function-cyan - color_cyan_2: - value: '#99e9f2' - category: color-group-function-cyan - color_cyan_3: - value: '#66d9e8' - category: color-group-function-cyan - color_cyan_4: - value: '#3bc9db' - category: color-group-function-cyan - color_cyan_5: - value: '#22b8cf' - category: color-group-function-cyan - color_cyan_6: - value: '#15aabf' - category: color-group-function-cyan - color_cyan_7: - value: '#1098ad' - category: color-group-function-cyan - color_cyan_8: - value: '#0c8599' - category: color-group-function-cyan - color_cyan_9: - value: '#0b7285' - category: color-group-function-cyan - - color_teal_0: - value: '#e6fcf5' - category: color-group-function-teal - color_teal_1: - value: '#c3fae8' - category: color-group-function-teal - color_teal_2: - value: '#96f2d7' - category: color-group-function-teal - color_teal_3: - value: '#63e6be' - category: color-group-function-teal - color_teal_4: - value: '#38d9a9' - category: color-group-function-teal - color_teal_5: - value: '#20c997' - category: color-group-function-teal - color_teal_6: - value: '#12b886' - category: color-group-function-teal - color_teal_7: - value: '#0ca678' - category: color-group-function-teal - color_teal_8: - value: '#099268' - category: color-group-function-teal - color_teal_9: - value: '#087f5b' - category: color-group-function-teal - - color_green_0: - value: '#ebfbee' - category: color-group-function-green - color_green_1: - value: '#d3f9d8' - category: color-group-function-green - color_green_2: - value: '#b2f2bb' - category: color-group-function-green - color_green_3: - value: '#8ce99a' - category: color-group-function-green - color_green_4: - value: '#69db7c' - category: color-group-function-green - color_green_5: - value: '#51cf66' - category: color-group-function-green - color_green_6: - value: '#40c057' - category: color-group-function-green - color_green_7: - value: '#37b24d' - category: color-group-function-green - color_green_8: - value: '#2f9e44' - category: color-group-function-green - color_green_9: - value: '#2b8a3e' - category: color-group-function-green - - color_lime_0: - value: '#f4fce3' - category: color-group-function-lime - color_lime_1: - value: '#e9fac8' - category: color-group-function-lime - color_lime_2: - value: '#d8f5a2' - category: color-group-function-lime - color_lime_3: - value: '#c0eb75' - category: color-group-function-lime - color_lime_4: - value: '#a9e34b' - category: color-group-function-lime - color_lime_5: - value: '#94d82d' - category: color-group-function-lime - color_lime_6: - value: '#82c91e' - category: color-group-function-lime - color_lime_7: - value: '#74b816' - category: color-group-function-lime - color_lime_8: - value: '#66a80f' - category: color-group-function-lime - color_lime_9: - value: '#5c940d' - category: color-group-function-lime - - color_yellow_0: - value: '#fff9db' - category: color-group-function-yellow - color_yellow_1: - value: '#fff3bf' - category: color-group-function-yellow - color_yellow_2: - value: '#ffec99' - category: color-group-function-yellow - color_yellow_3: - value: '#ffe066' - category: color-group-function-yellow - color_yellow_4: - value: '#ffd43b' - category: color-group-function-yellow - color_yellow_5: - value: '#fcc419' - category: color-group-function-yellow - color_yellow_6: - value: '#fab005' - category: color-group-function-yellow - color_yellow_7: - value: '#f59f00' - category: color-group-function-yellow - color_yellow_8: - value: '#f08c00' - category: color-group-function-yellow - color_yellow_9: - value: '#e67700' - category: color-group-function-yellow - - color_tone_white: - value: "hsl({!none}, 100%)" - category: color-group-tone-white - comment: Pure white color - color_tone_near_white: - value: "hsl({!none}, 90%)" - category: color-group-tone-white - comment: Lightest grey, near white - color_tone_grey_lighter: - value: "hsl({!none}, 80%)" - category: color-group-tone-white - comment: Lighter grey - color_tone_grey_light: - value: "hsl({!none}, 60%)" - category: color-group-tone-white - comment: Slightly light grey - - color_tone_grey_dark: - value: "hsl({!none}, 40%)" - category: color-group-tone-black - comment: Slightly dark grey - color_tone_grey_darker: - value: "hsl({!none}, 20%)" - category: color-group-tone-black - comment: Darker grey - color_tone_near_black: - value: "hsl({!none}, 10%)" - category: color-group-tone-black - comment: Darkest grey, near black - color_tone_black: - value: "hsl({!none}, 0%)" - category: color-group-tone-black - comment: Pure black color - color_pure_white: value: '#ffffff' category: color-group-tone-pure From e00ef1bfb3710c052ec965f6ed67c5a11349c0b6 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Mon, 20 Jan 2020 10:44:56 -0300 Subject: [PATCH 02/31] updated black and white color names --- src/tokens/color.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tokens/color.yml b/src/tokens/color.yml index 72b70fb4c..1b5eaca9e 100644 --- a/src/tokens/color.yml +++ b/src/tokens/color.yml @@ -27,11 +27,11 @@ props: value: '#05b5da' category: color-group-brand-creative-commons - color_pure_white: + color_white: value: '#ffffff' category: color-group-tone-pure comment: Pure white color - color_pure_black: + color_black: value: '#000000' category: color-group-tone-pure comment: Pure black color From 1c6c608ef4c76fbb3cf5281816e89c0b1f3ccda0 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Mon, 20 Jan 2020 10:54:15 -0300 Subject: [PATCH 03/31] gray scale colours --- src/tokens/color.yml | 48 ++++++++++++++------------------------------ 1 file changed, 15 insertions(+), 33 deletions(-) diff --git a/src/tokens/color.yml b/src/tokens/color.yml index 1b5eaca9e..c02adfa03 100644 --- a/src/tokens/color.yml +++ b/src/tokens/color.yml @@ -17,9 +17,6 @@ props: color_blue: value: '#3c5c99' category: color-group-brand-creative-commons - color_slate: - value: '#333333' - category: color-group-brand-creative-commons color_orange: value: '#fb7729' category: color-group-brand-creative-commons @@ -36,36 +33,21 @@ props: category: color-group-tone-pure comment: Pure black color - color_grey_0: - value: '#f8f9fa' - category: color-group-tone-grey - color_grey_1: - value: '#f1f3f5' - category: color-group-tone-grey - color_grey_2: - value: '#e9ecef' - category: color-group-tone-grey - color_grey_3: - value: '#dee2e6' - category: color-group-tone-grey - color_grey_4: - value: '#ced4da' - category: color-group-tone-grey - color_grey_5: - value: '#adb5bd' - category: color-group-tone-grey - color_grey_6: - value: '#868e96' - category: color-group-tone-grey - color_grey_7: - value: '#495057' - category: color-group-tone-grey - color_grey_8: - value: '#343a40' - category: color-group-tone-grey - color_grey_9: - value: '#212529' - category: color-group-tone-grey + color_dark_slate_gray: + value: '#333333' + category: color-group-gray-scale + color_light_slate_gray: + value: '#787878' + category: color-group-gray-scale + color_gray: + value: '#B0B0B0' + category: color-group-gray-scale + color_light_gray: + value: '#D8D8D8' + category: color-group-gray-scale + color_lighter_gray: + value: '#F5F5F5' + category: color-group-gray-scale color_negative_0: value: '#fff5f5' From d62b6d015995e3e23d3fde64ea57c2c748634a25 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Mon, 20 Jan 2020 11:01:13 -0300 Subject: [PATCH 04/31] updated context colors --- src/tokens/color.yml | 95 +++----------------------------------------- 1 file changed, 6 insertions(+), 89 deletions(-) diff --git a/src/tokens/color.yml b/src/tokens/color.yml index c02adfa03..f3d297169 100644 --- a/src/tokens/color.yml +++ b/src/tokens/color.yml @@ -49,98 +49,15 @@ props: value: '#F5F5F5' category: color-group-gray-scale - color_negative_0: - value: '#fff5f5' - category: color-group-context-negative - color_negative_1: - value: '#ffe3e3' - category: color-group-context-negative - color_negative_2: - value: '#ffc9c9' - category: color-group-context-negative - color_negative_3: - value: '#ffa8a8' - category: color-group-context-negative - color_negative_4: - value: '#ff8787' - category: color-group-context-negative - color_negative_5: - value: '#ff6b6b' - category: color-group-context-negative - color_negative_6: - value: '#fa5252' - category: color-group-context-negative - color_negative_7: + color_error: value: '#f03e3e' - category: color-group-context-negative - color_negative_8: - value: '#e03131' - category: color-group-context-negative - color_negative_9: - value: '#c92a2a' - category: color-group-context-negative - - color_probably_0: - value: '#fff9db' - category: color-group-context-probably - color_probably_1: - value: '#fff3bf' - category: color-group-context-probably - color_probably_2: - value: '#ffec99' - category: color-group-context-probably - color_probably_3: - value: '#ffe066' - category: color-group-context-probably - color_probably_4: - value: '#ffd43b' - category: color-group-context-probably - color_probably_5: - value: '#fcc419' - category: color-group-context-probably - color_probably_6: - value: '#fab005' - category: color-group-context-probably - color_probably_7: + category: color-group-context + color_warning: value: '#f59f00' - category: color-group-context-probably - color_probably_8: - value: '#f08c00' - category: color-group-context-probably - color_probably_9: - value: '#e67700' - category: color-group-context-probably - - color_positive_0: - value: '#f4fce3' - category: color-group-context-positive - color_positive_1: - value: '#e9fac8' - category: color-group-context-positive - color_positive_2: - value: '#d8f5a2' - category: color-group-context-positive - color_positive_3: - value: '#c0eb75' - category: color-group-context-positive - color_positive_4: - value: '#a9e34b' - category: color-group-context-positive - color_positive_5: - value: '#94d82d' - category: color-group-context-positive - color_positive_6: - value: '#82c91e' - category: color-group-context-positive - color_positive_7: + category: color-group-context + color_success: value: '#74b816' - category: color-group-context-positive - color_positive_8: - value: '#66a80f' - category: color-group-context-positive - color_positive_9: - value: '#5c940d' - category: color-group-context-positive + category: color-group-context color_white_low: value: 'rgba(255, 255, 255, 0.15)' From 1b3c0c395d9bea35d473ec08c4460baa65255ff4 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Mon, 20 Jan 2020 11:37:37 -0300 Subject: [PATCH 05/31] removed high low colors --- src/tokens/color.yml | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/src/tokens/color.yml b/src/tokens/color.yml index f3d297169..30a948990 100644 --- a/src/tokens/color.yml +++ b/src/tokens/color.yml @@ -59,23 +59,5 @@ props: value: '#74b816' category: color-group-context - color_white_low: - value: 'rgba(255, 255, 255, 0.15)' - category: color-group-overlay-white - comment: 15% opaque shade of white - color_white_high: - value: 'rgba(255, 255, 255, 0.85)' - category: color-group-overlay-white - comment: 85% opaque shade of white - - color_black_low: - value: 'rgba(0, 0, 0, 0.15)' - category: color-group-overlay-black - comment: 15% opaque shade of black - color_black_high: - value: 'rgba(0, 0, 0, 0.85)' - category: color-group-overlay-black - comment: 85% opaque shade of black - global: type: color From 99705ce2f9b1aede35b67c6f664f666675c9f97e Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Mon, 20 Jan 2020 11:38:04 -0300 Subject: [PATCH 06/31] compiled colors --- .../tokens/tokens.custom-properties.css | 181 +-- src/assets/tokens/tokens.raw.json | 1129 +---------------- src/assets/tokens/tokens.scss | 183 +-- src/assets/tokens/tokens.styl | 183 +-- 4 files changed, 89 insertions(+), 1587 deletions(-) diff --git a/src/assets/tokens/tokens.custom-properties.css b/src/assets/tokens/tokens.custom-properties.css index 85ca5a4c5..e8199e4c6 100644 --- a/src/assets/tokens/tokens.custom-properties.css +++ b/src/assets/tokens/tokens.custom-properties.css @@ -1,180 +1,23 @@ :root { - --color-green-8: rgb(47, 158, 68); - --color-grape-0: rgb(248, 240, 252); - --color-indigo-1: rgb(208, 235, 255); - --color-yellow-0: rgb(255, 249, 219); - --color-green-9: rgb(43, 138, 62); - --color-grape-1: rgb(243, 217, 250); - --color-indigo-2: rgb(165, 216, 255); - /* 15% opaque shade of white */ - --color-white-low: rgba(255, 255, 255, 0.15); - --color-yellow-1: rgb(255, 243, 191); - --color-negative-0: rgb(255, 245, 245); - --color-grape-2: rgb(238, 190, 250); - --color-lime-0: rgb(244, 252, 227); - --color-indigo-3: rgb(116, 192, 252); - --color-pink-0: rgb(255, 240, 246); - --color-yellow-2: rgb(255, 236, 153); - --color-negative-1: rgb(255, 227, 227); - /* Lightest grey, near white */ - --color-tone-near-white: rgb(230, 230, 230); - --color-grape-3: rgb(229, 153, 247); - --color-lime-1: rgb(233, 250, 200); - --color-indigo-4: rgb(77, 171, 247); - --color-pink-1: rgb(255, 222, 235); - --color-yellow-3: rgb(255, 224, 102); - --color-negative-2: rgb(255, 201, 201); - --color-grape-4: rgb(218, 119, 242); - --color-lime-2: rgb(216, 245, 162); - --color-indigo-5: rgb(51, 154, 240); - --color-pink-2: rgb(252, 194, 215); - --color-yellow-4: rgb(255, 212, 59); - --color-negative-3: rgb(255, 168, 168); + --color-warning: rgb(245, 159, 0); + /* Pure black color */ + --color-black: rgb(0, 0, 0); --color-turquoise: rgb(5, 181, 218); - --color-grape-5: rgb(204, 93, 232); - --color-lime-3: rgb(192, 235, 117); - /* Slightly dark grey */ - --color-tone-grey-dark: rgb(102, 102, 102); - --color-indigo-6: rgb(34, 139, 230); - --color-pink-3: rgb(250, 162, 193); - --color-red-0: rgb(255, 245, 245); --color-tomato: rgb(237, 89, 47); - --color-yellow-5: rgb(252, 196, 25); - --color-negative-4: rgb(255, 135, 135); - --color-grape-6: rgb(190, 75, 219); - --color-positive-0: rgb(244, 252, 227); - --color-lime-4: rgb(169, 227, 75); - --color-indigo-7: rgb(28, 126, 214); - --color-pink-4: rgb(247, 131, 172); - --color-red-1: rgb(255, 227, 227); - --color-yellow-6: rgb(250, 176, 5); - --color-negative-5: rgb(255, 107, 107); - --color-grape-7: rgb(174, 62, 201); - --color-positive-1: rgb(233, 250, 200); - --color-lime-5: rgb(148, 216, 45); - --color-indigo-8: rgb(25, 113, 194); - /* Slightly light grey */ - --color-tone-grey-light: rgb(153, 153, 153); - --color-pink-5: rgb(240, 101, 149); - --color-red-2: rgb(255, 201, 201); - --color-yellow-7: rgb(245, 159, 0); - --color-negative-6: rgb(250, 82, 82); - --color-grape-8: rgb(156, 54, 181); - --color-positive-2: rgb(216, 245, 162); - --color-lime-6: rgb(130, 201, 30); - --color-indigo-9: rgb(24, 100, 171); - --color-pink-6: rgb(230, 73, 128); - --color-red-3: rgb(255, 168, 168); - --color-yellow-8: rgb(240, 140, 0); - --color-negative-7: rgb(240, 62, 62); - --color-grape-9: rgb(134, 46, 156); - --color-positive-3: rgb(192, 235, 117); - --color-lime-7: rgb(116, 184, 22); - --color-teal-0: rgb(230, 252, 245); - --color-pink-7: rgb(214, 51, 108); - --color-red-4: rgb(255, 135, 135); - --color-yellow-9: rgb(230, 119, 0); - --color-negative-8: rgb(224, 49, 49); - --color-positive-4: rgb(169, 227, 75); + --color-success: rgb(116, 184, 22); + --color-light-gray: rgb(216, 216, 216); --color-orange: rgb(251, 119, 41); - --color-lime-8: rgb(102, 168, 15); - --color-teal-1: rgb(195, 250, 232); - --color-pink-8: rgb(194, 37, 92); - --color-red-5: rgb(255, 107, 107); - --color-negative-9: rgb(201, 42, 42); - --color-positive-5: rgb(148, 216, 45); - --color-lime-9: rgb(92, 148, 13); - --color-teal-2: rgb(150, 242, 215); - --color-pink-9: rgb(166, 30, 77); - --color-red-6: rgb(250, 82, 82); - --color-violet-0: rgb(243, 240, 255); - --color-positive-6: rgb(130, 201, 30); - --color-grey-0: rgb(248, 249, 250); - --color-teal-3: rgb(99, 230, 190); - --color-red-7: rgb(240, 62, 62); - --color-violet-1: rgb(229, 219, 255); - --color-positive-7: rgb(116, 184, 22); - --color-grey-1: rgb(241, 243, 245); - --color-teal-4: rgb(56, 217, 169); - --color-red-8: rgb(224, 49, 49); - /* Pure black color */ - --color-tone-black: rgb(0, 0, 0); - --color-violet-2: rgb(208, 191, 255); - --color-positive-8: rgb(102, 168, 15); - --color-grey-2: rgb(233, 236, 239); - --color-teal-5: rgb(32, 201, 151); - --color-red-9: rgb(201, 42, 42); - --color-violet-3: rgb(177, 151, 252); - --color-positive-9: rgb(92, 148, 13); - --color-grey-3: rgb(222, 226, 230); - --color-teal-6: rgb(18, 184, 134); - --color-violet-4: rgb(151, 117, 250); - --color-cyan-0: rgb(227, 250, 252); - --color-grey-4: rgb(206, 212, 218); - --color-teal-7: rgb(12, 166, 120); - --color-probably-0: rgb(255, 249, 219); - --color-violet-5: rgb(132, 94, 247); - --color-cyan-1: rgb(197, 246, 250); - --color-grey-5: rgb(173, 181, 189); - --color-teal-8: rgb(9, 146, 104); - --color-probably-1: rgb(255, 243, 191); - --color-violet-6: rgb(121, 80, 242); - /* Darker grey */ - --color-tone-grey-darker: rgb(51, 51, 51); - --color-cyan-2: rgb(153, 233, 242); - --color-grey-6: rgb(134, 142, 150); - --color-teal-9: rgb(8, 127, 91); - --color-probably-2: rgb(255, 236, 153); - --color-violet-7: rgb(112, 72, 232); - --color-cyan-3: rgb(102, 217, 232); - --color-grey-7: rgb(73, 80, 87); - --color-probably-3: rgb(255, 224, 102); - --color-violet-8: rgb(103, 65, 217); - /* 85% opaque shade of white */ - --color-white-high: rgba(255, 255, 255, 0.85); - /* Pure black color */ - --color-pure-black: rgb(0, 0, 0); - --color-cyan-4: rgb(59, 201, 219); - /* Lighter grey */ - --color-tone-grey-lighter: rgb(204, 204, 204); - --color-grey-8: rgb(52, 58, 64); - --color-probably-4: rgb(255, 212, 59); - --color-violet-9: rgb(95, 61, 196); - --color-cyan-5: rgb(34, 184, 207); - --color-grey-9: rgb(33, 37, 41); - --color-probably-5: rgb(252, 196, 25); - --color-cyan-6: rgb(21, 170, 191); - --color-probably-6: rgb(250, 176, 5); - --color-blue: rgb(60, 92, 153); - --color-cyan-7: rgb(16, 152, 173); - --color-probably-7: rgb(245, 159, 0); - --color-green-0: rgb(235, 251, 238); - /* 15% opaque shade of black */ - --color-black-low: rgba(0, 0, 0, 0.15); + --color-error: rgb(240, 62, 62); /* Pure white color */ - --color-tone-white: rgb(255, 255, 255); - --color-cyan-8: rgb(12, 133, 153); - --color-probably-8: rgb(240, 140, 0); + --color-white: rgb(255, 255, 255); + --color-light-slate-gray: rgb(120, 120, 120); + --color-dark-slate-gray: rgb(51, 51, 51); + --color-blue: rgb(60, 92, 153); --color-forest: rgb(4, 166, 53); - --color-green-1: rgb(211, 249, 216); - /* Darkest grey, near black */ - --color-tone-near-black: rgb(26, 26, 26); - --color-cyan-9: rgb(11, 114, 133); - --color-probably-9: rgb(230, 119, 0); - --color-green-2: rgb(178, 242, 187); - --color-green-3: rgb(140, 233, 154); - --color-green-4: rgb(105, 219, 124); + --color-lighter-gray: rgb(245, 245, 245); --color-gold: rgb(239, 190, 0); - --color-green-5: rgb(81, 207, 102); - --color-slate: rgb(51, 51, 51); - /* 85% opaque shade of black */ - --color-black-high: rgba(0, 0, 0, 0.85); - --color-green-6: rgb(64, 192, 87); - /* Pure white color */ - --color-pure-white: rgb(255, 255, 255); - --color-green-7: rgb(55, 178, 77); - --color-indigo-0: rgb(231, 245, 255); + --color-gray: rgb(176, 176, 176); /* Font size for footnotes */ --size-small: 0.7937rem; /* Font size for normal copy */ diff --git a/src/assets/tokens/tokens.raw.json b/src/assets/tokens/tokens.raw.json index 262eb7f1b..66a7cf03e 100644 --- a/src/assets/tokens/tokens.raw.json +++ b/src/assets/tokens/tokens.raw.json @@ -5,422 +5,20 @@ } }, "props": { - "color_green_8": { - "type": "color", - "value": "rgb(47, 158, 68)", - "category": "color-group-function-green", - "originalValue": "#2f9e44", - "name": "color_green_8" - }, - "color_grape_0": { - "type": "color", - "value": "rgb(248, 240, 252)", - "category": "color-group-function-grape", - "originalValue": "#f8f0fc", - "name": "color_grape_0" - }, - "color_indigo_1": { - "type": "color", - "value": "rgb(208, 235, 255)", - "category": "color-group-function-indigo", - "originalValue": "#d0ebff", - "name": "color_indigo_1" - }, - "color_yellow_0": { - "type": "color", - "value": "rgb(255, 249, 219)", - "category": "color-group-function-yellow", - "originalValue": "#fff9db", - "name": "color_yellow_0" - }, - "color_green_9": { - "type": "color", - "value": "rgb(43, 138, 62)", - "category": "color-group-function-green", - "originalValue": "#2b8a3e", - "name": "color_green_9" - }, - "color_grape_1": { - "type": "color", - "value": "rgb(243, 217, 250)", - "category": "color-group-function-grape", - "originalValue": "#f3d9fa", - "name": "color_grape_1" - }, - "color_indigo_2": { - "type": "color", - "value": "rgb(165, 216, 255)", - "category": "color-group-function-indigo", - "originalValue": "#a5d8ff", - "name": "color_indigo_2" - }, - "color_white_low": { - "type": "color", - "value": "rgba(255, 255, 255, 0.15)", - "category": "color-group-overlay-white", - "comment": "15% opaque shade of white", - "originalValue": "rgba(255, 255, 255, 0.15)", - "name": "color_white_low" - }, - "color_yellow_1": { - "type": "color", - "value": "rgb(255, 243, 191)", - "category": "color-group-function-yellow", - "originalValue": "#fff3bf", - "name": "color_yellow_1" - }, - "color_negative_0": { - "type": "color", - "value": "rgb(255, 245, 245)", - "category": "color-group-context-negative", - "originalValue": "#fff5f5", - "name": "color_negative_0" - }, - "color_grape_2": { - "type": "color", - "value": "rgb(238, 190, 250)", - "category": "color-group-function-grape", - "originalValue": "#eebefa", - "name": "color_grape_2" - }, - "color_lime_0": { - "type": "color", - "value": "rgb(244, 252, 227)", - "category": "color-group-function-lime", - "originalValue": "#f4fce3", - "name": "color_lime_0" - }, - "color_indigo_3": { - "type": "color", - "value": "rgb(116, 192, 252)", - "category": "color-group-function-indigo", - "originalValue": "#74c0fc", - "name": "color_indigo_3" - }, - "color_pink_0": { - "type": "color", - "value": "rgb(255, 240, 246)", - "category": "color-group-function-pink", - "originalValue": "#fff0f6", - "name": "color_pink_0" - }, - "color_yellow_2": { - "type": "color", - "value": "rgb(255, 236, 153)", - "category": "color-group-function-yellow", - "originalValue": "#ffec99", - "name": "color_yellow_2" - }, - "color_negative_1": { - "type": "color", - "value": "rgb(255, 227, 227)", - "category": "color-group-context-negative", - "originalValue": "#ffe3e3", - "name": "color_negative_1" - }, - "color_tone_near_white": { - "type": "color", - "value": "rgb(230, 230, 230)", - "category": "color-group-tone-white", - "comment": "Lightest grey, near white", - "originalValue": "hsl({!none}, 90%)", - "name": "color_tone_near_white" - }, - "color_grape_3": { - "type": "color", - "value": "rgb(229, 153, 247)", - "category": "color-group-function-grape", - "originalValue": "#e599f7", - "name": "color_grape_3" - }, - "color_lime_1": { - "type": "color", - "value": "rgb(233, 250, 200)", - "category": "color-group-function-lime", - "originalValue": "#e9fac8", - "name": "color_lime_1" - }, - "color_indigo_4": { - "type": "color", - "value": "rgb(77, 171, 247)", - "category": "color-group-function-indigo", - "originalValue": "#4dabf7", - "name": "color_indigo_4" - }, - "color_pink_1": { - "type": "color", - "value": "rgb(255, 222, 235)", - "category": "color-group-function-pink", - "originalValue": "#ffdeeb", - "name": "color_pink_1" - }, - "color_yellow_3": { - "type": "color", - "value": "rgb(255, 224, 102)", - "category": "color-group-function-yellow", - "originalValue": "#ffe066", - "name": "color_yellow_3" - }, - "color_negative_2": { - "type": "color", - "value": "rgb(255, 201, 201)", - "category": "color-group-context-negative", - "originalValue": "#ffc9c9", - "name": "color_negative_2" - }, - "color_grape_4": { - "type": "color", - "value": "rgb(218, 119, 242)", - "category": "color-group-function-grape", - "originalValue": "#da77f2", - "name": "color_grape_4" - }, - "color_lime_2": { - "type": "color", - "value": "rgb(216, 245, 162)", - "category": "color-group-function-lime", - "originalValue": "#d8f5a2", - "name": "color_lime_2" - }, - "color_indigo_5": { - "type": "color", - "value": "rgb(51, 154, 240)", - "category": "color-group-function-indigo", - "originalValue": "#339af0", - "name": "color_indigo_5" - }, - "color_pink_2": { - "type": "color", - "value": "rgb(252, 194, 215)", - "category": "color-group-function-pink", - "originalValue": "#fcc2d7", - "name": "color_pink_2" - }, - "color_yellow_4": { - "type": "color", - "value": "rgb(255, 212, 59)", - "category": "color-group-function-yellow", - "originalValue": "#ffd43b", - "name": "color_yellow_4" - }, - "color_negative_3": { - "type": "color", - "value": "rgb(255, 168, 168)", - "category": "color-group-context-negative", - "originalValue": "#ffa8a8", - "name": "color_negative_3" - }, - "color_grape_5": { - "type": "color", - "value": "rgb(204, 93, 232)", - "category": "color-group-function-grape", - "originalValue": "#cc5de8", - "name": "color_grape_5" - }, - "color_lime_3": { - "type": "color", - "value": "rgb(192, 235, 117)", - "category": "color-group-function-lime", - "originalValue": "#c0eb75", - "name": "color_lime_3" - }, - "color_tone_grey_dark": { - "type": "color", - "value": "rgb(102, 102, 102)", - "category": "color-group-tone-black", - "comment": "Slightly dark grey", - "originalValue": "hsl({!none}, 40%)", - "name": "color_tone_grey_dark" - }, - "color_indigo_6": { - "type": "color", - "value": "rgb(34, 139, 230)", - "category": "color-group-function-indigo", - "originalValue": "#228be6", - "name": "color_indigo_6" - }, - "color_pink_3": { - "type": "color", - "value": "rgb(250, 162, 193)", - "category": "color-group-function-pink", - "originalValue": "#faa2c1", - "name": "color_pink_3" - }, - "color_red_0": { - "type": "color", - "value": "rgb(255, 245, 245)", - "category": "color-group-function-red", - "originalValue": "#fff5f5", - "name": "color_red_0" - }, - "color_tomato": { - "type": "color", - "value": "rgb(237, 89, 47)", - "category": "color-group-brand-creative-commons", - "originalValue": "#ed592f", - "name": "color_tomato" - }, - "color_yellow_5": { - "type": "color", - "value": "rgb(252, 196, 25)", - "category": "color-group-function-yellow", - "originalValue": "#fcc419", - "name": "color_yellow_5" - }, - "color_negative_4": { - "type": "color", - "value": "rgb(255, 135, 135)", - "category": "color-group-context-negative", - "originalValue": "#ff8787", - "name": "color_negative_4" - }, - "color_grape_6": { - "type": "color", - "value": "rgb(190, 75, 219)", - "category": "color-group-function-grape", - "originalValue": "#be4bdb", - "name": "color_grape_6" - }, - "color_positive_0": { - "type": "color", - "value": "rgb(244, 252, 227)", - "category": "color-group-context-positive", - "originalValue": "#f4fce3", - "name": "color_positive_0" - }, - "color_lime_4": { - "type": "color", - "value": "rgb(169, 227, 75)", - "category": "color-group-function-lime", - "originalValue": "#a9e34b", - "name": "color_lime_4" - }, - "color_indigo_7": { - "type": "color", - "value": "rgb(28, 126, 214)", - "category": "color-group-function-indigo", - "originalValue": "#1c7ed6", - "name": "color_indigo_7" - }, - "color_pink_4": { - "type": "color", - "value": "rgb(247, 131, 172)", - "category": "color-group-function-pink", - "originalValue": "#f783ac", - "name": "color_pink_4" - }, - "color_red_1": { - "type": "color", - "value": "rgb(255, 227, 227)", - "category": "color-group-function-red", - "originalValue": "#ffe3e3", - "name": "color_red_1" - }, - "color_yellow_6": { - "type": "color", - "value": "rgb(250, 176, 5)", - "category": "color-group-function-yellow", - "originalValue": "#fab005", - "name": "color_yellow_6" - }, - "color_negative_5": { - "type": "color", - "value": "rgb(255, 107, 107)", - "category": "color-group-context-negative", - "originalValue": "#ff6b6b", - "name": "color_negative_5" - }, - "color_grape_7": { - "type": "color", - "value": "rgb(174, 62, 201)", - "category": "color-group-function-grape", - "originalValue": "#ae3ec9", - "name": "color_grape_7" - }, - "color_positive_1": { - "type": "color", - "value": "rgb(233, 250, 200)", - "category": "color-group-context-positive", - "originalValue": "#e9fac8", - "name": "color_positive_1" - }, - "color_lime_5": { - "type": "color", - "value": "rgb(148, 216, 45)", - "category": "color-group-function-lime", - "originalValue": "#94d82d", - "name": "color_lime_5" - }, - "color_indigo_8": { - "type": "color", - "value": "rgb(25, 113, 194)", - "category": "color-group-function-indigo", - "originalValue": "#1971c2", - "name": "color_indigo_8" - }, - "color_tone_grey_light": { - "type": "color", - "value": "rgb(153, 153, 153)", - "category": "color-group-tone-white", - "comment": "Slightly light grey", - "originalValue": "hsl({!none}, 60%)", - "name": "color_tone_grey_light" - }, - "color_pink_5": { - "type": "color", - "value": "rgb(240, 101, 149)", - "category": "color-group-function-pink", - "originalValue": "#f06595", - "name": "color_pink_5" - }, - "color_red_2": { - "type": "color", - "value": "rgb(255, 201, 201)", - "category": "color-group-function-red", - "originalValue": "#ffc9c9", - "name": "color_red_2" - }, - "color_yellow_7": { + "color_warning": { "type": "color", "value": "rgb(245, 159, 0)", - "category": "color-group-function-yellow", + "category": "color-group-context", "originalValue": "#f59f00", - "name": "color_yellow_7" - }, - "color_negative_6": { - "type": "color", - "value": "rgb(250, 82, 82)", - "category": "color-group-context-negative", - "originalValue": "#fa5252", - "name": "color_negative_6" - }, - "color_grape_8": { - "type": "color", - "value": "rgb(156, 54, 181)", - "category": "color-group-function-grape", - "originalValue": "#9c36b5", - "name": "color_grape_8" - }, - "color_positive_2": { - "type": "color", - "value": "rgb(216, 245, 162)", - "category": "color-group-context-positive", - "originalValue": "#d8f5a2", - "name": "color_positive_2" - }, - "color_lime_6": { - "type": "color", - "value": "rgb(130, 201, 30)", - "category": "color-group-function-lime", - "originalValue": "#82c91e", - "name": "color_lime_6" + "name": "color_warning" }, - "color_indigo_9": { + "color_black": { "type": "color", - "value": "rgb(24, 100, 171)", - "category": "color-group-function-indigo", - "originalValue": "#1864ab", - "name": "color_indigo_9" + "value": "rgb(0, 0, 0)", + "category": "color-group-tone-pure", + "comment": "Pure black color", + "originalValue": "#000000", + "name": "color_black" }, "color_turquoise": { "type": "color", @@ -429,96 +27,26 @@ "originalValue": "#05b5da", "name": "color_turquoise" }, - "color_pink_6": { - "type": "color", - "value": "rgb(230, 73, 128)", - "category": "color-group-function-pink", - "originalValue": "#e64980", - "name": "color_pink_6" - }, - "color_red_3": { - "type": "color", - "value": "rgb(255, 168, 168)", - "category": "color-group-function-red", - "originalValue": "#ffa8a8", - "name": "color_red_3" - }, - "color_yellow_8": { - "type": "color", - "value": "rgb(240, 140, 0)", - "category": "color-group-function-yellow", - "originalValue": "#f08c00", - "name": "color_yellow_8" - }, - "color_negative_7": { - "type": "color", - "value": "rgb(240, 62, 62)", - "category": "color-group-context-negative", - "originalValue": "#f03e3e", - "name": "color_negative_7" - }, - "color_grape_9": { - "type": "color", - "value": "rgb(134, 46, 156)", - "category": "color-group-function-grape", - "originalValue": "#862e9c", - "name": "color_grape_9" - }, - "color_positive_3": { + "color_tomato": { "type": "color", - "value": "rgb(192, 235, 117)", - "category": "color-group-context-positive", - "originalValue": "#c0eb75", - "name": "color_positive_3" + "value": "rgb(237, 89, 47)", + "category": "color-group-brand-creative-commons", + "originalValue": "#ed592f", + "name": "color_tomato" }, - "color_lime_7": { + "color_success": { "type": "color", "value": "rgb(116, 184, 22)", - "category": "color-group-function-lime", + "category": "color-group-context", "originalValue": "#74b816", - "name": "color_lime_7" + "name": "color_success" }, - "color_teal_0": { + "color_light_gray": { "type": "color", - "value": "rgb(230, 252, 245)", - "category": "color-group-function-teal", - "originalValue": "#e6fcf5", - "name": "color_teal_0" - }, - "color_pink_7": { - "type": "color", - "value": "rgb(214, 51, 108)", - "category": "color-group-function-pink", - "originalValue": "#d6336c", - "name": "color_pink_7" - }, - "color_red_4": { - "type": "color", - "value": "rgb(255, 135, 135)", - "category": "color-group-function-red", - "originalValue": "#ff8787", - "name": "color_red_4" - }, - "color_yellow_9": { - "type": "color", - "value": "rgb(230, 119, 0)", - "category": "color-group-function-yellow", - "originalValue": "#e67700", - "name": "color_yellow_9" - }, - "color_negative_8": { - "type": "color", - "value": "rgb(224, 49, 49)", - "category": "color-group-context-negative", - "originalValue": "#e03131", - "name": "color_negative_8" - }, - "color_positive_4": { - "type": "color", - "value": "rgb(169, 227, 75)", - "category": "color-group-context-positive", - "originalValue": "#a9e34b", - "name": "color_positive_4" + "value": "rgb(216, 216, 216)", + "category": "color-group-gray-scale", + "originalValue": "#D8D8D8", + "name": "color_light_gray" }, "color_orange": { "type": "color", @@ -527,451 +55,34 @@ "originalValue": "#fb7729", "name": "color_orange" }, - "color_lime_8": { - "type": "color", - "value": "rgb(102, 168, 15)", - "category": "color-group-function-lime", - "originalValue": "#66a80f", - "name": "color_lime_8" - }, - "color_teal_1": { - "type": "color", - "value": "rgb(195, 250, 232)", - "category": "color-group-function-teal", - "originalValue": "#c3fae8", - "name": "color_teal_1" - }, - "color_pink_8": { - "type": "color", - "value": "rgb(194, 37, 92)", - "category": "color-group-function-pink", - "originalValue": "#c2255c", - "name": "color_pink_8" - }, - "color_red_5": { - "type": "color", - "value": "rgb(255, 107, 107)", - "category": "color-group-function-red", - "originalValue": "#ff6b6b", - "name": "color_red_5" - }, - "color_negative_9": { - "type": "color", - "value": "rgb(201, 42, 42)", - "category": "color-group-context-negative", - "originalValue": "#c92a2a", - "name": "color_negative_9" - }, - "color_positive_5": { - "type": "color", - "value": "rgb(148, 216, 45)", - "category": "color-group-context-positive", - "originalValue": "#94d82d", - "name": "color_positive_5" - }, - "color_lime_9": { - "type": "color", - "value": "rgb(92, 148, 13)", - "category": "color-group-function-lime", - "originalValue": "#5c940d", - "name": "color_lime_9" - }, - "color_teal_2": { - "type": "color", - "value": "rgb(150, 242, 215)", - "category": "color-group-function-teal", - "originalValue": "#96f2d7", - "name": "color_teal_2" - }, - "color_pink_9": { - "type": "color", - "value": "rgb(166, 30, 77)", - "category": "color-group-function-pink", - "originalValue": "#a61e4d", - "name": "color_pink_9" - }, - "color_red_6": { - "type": "color", - "value": "rgb(250, 82, 82)", - "category": "color-group-function-red", - "originalValue": "#fa5252", - "name": "color_red_6" - }, - "color_violet_0": { - "type": "color", - "value": "rgb(243, 240, 255)", - "category": "color-group-function-violet", - "originalValue": "#f3f0ff", - "name": "color_violet_0" - }, - "color_positive_6": { - "type": "color", - "value": "rgb(130, 201, 30)", - "category": "color-group-context-positive", - "originalValue": "#82c91e", - "name": "color_positive_6" - }, - "color_grey_0": { - "type": "color", - "value": "rgb(248, 249, 250)", - "category": "color-group-tone-grey", - "originalValue": "#f8f9fa", - "name": "color_grey_0" - }, - "color_teal_3": { - "type": "color", - "value": "rgb(99, 230, 190)", - "category": "color-group-function-teal", - "originalValue": "#63e6be", - "name": "color_teal_3" - }, - "color_red_7": { + "color_error": { "type": "color", "value": "rgb(240, 62, 62)", - "category": "color-group-function-red", + "category": "color-group-context", "originalValue": "#f03e3e", - "name": "color_red_7" - }, - "color_violet_1": { - "type": "color", - "value": "rgb(229, 219, 255)", - "category": "color-group-function-violet", - "originalValue": "#e5dbff", - "name": "color_violet_1" - }, - "color_positive_7": { - "type": "color", - "value": "rgb(116, 184, 22)", - "category": "color-group-context-positive", - "originalValue": "#74b816", - "name": "color_positive_7" - }, - "color_grey_1": { - "type": "color", - "value": "rgb(241, 243, 245)", - "category": "color-group-tone-grey", - "originalValue": "#f1f3f5", - "name": "color_grey_1" + "name": "color_error" }, - "color_teal_4": { + "color_white": { "type": "color", - "value": "rgb(56, 217, 169)", - "category": "color-group-function-teal", - "originalValue": "#38d9a9", - "name": "color_teal_4" - }, - "color_red_8": { - "type": "color", - "value": "rgb(224, 49, 49)", - "category": "color-group-function-red", - "originalValue": "#e03131", - "name": "color_red_8" - }, - "color_tone_black": { - "type": "color", - "value": "rgb(0, 0, 0)", - "category": "color-group-tone-black", - "comment": "Pure black color", - "originalValue": "hsl({!none}, 0%)", - "name": "color_tone_black" - }, - "color_violet_2": { - "type": "color", - "value": "rgb(208, 191, 255)", - "category": "color-group-function-violet", - "originalValue": "#d0bfff", - "name": "color_violet_2" - }, - "color_positive_8": { - "type": "color", - "value": "rgb(102, 168, 15)", - "category": "color-group-context-positive", - "originalValue": "#66a80f", - "name": "color_positive_8" - }, - "color_grey_2": { - "type": "color", - "value": "rgb(233, 236, 239)", - "category": "color-group-tone-grey", - "originalValue": "#e9ecef", - "name": "color_grey_2" - }, - "color_teal_5": { - "type": "color", - "value": "rgb(32, 201, 151)", - "category": "color-group-function-teal", - "originalValue": "#20c997", - "name": "color_teal_5" - }, - "color_red_9": { - "type": "color", - "value": "rgb(201, 42, 42)", - "category": "color-group-function-red", - "originalValue": "#c92a2a", - "name": "color_red_9" - }, - "color_violet_3": { - "type": "color", - "value": "rgb(177, 151, 252)", - "category": "color-group-function-violet", - "originalValue": "#b197fc", - "name": "color_violet_3" - }, - "color_positive_9": { - "type": "color", - "value": "rgb(92, 148, 13)", - "category": "color-group-context-positive", - "originalValue": "#5c940d", - "name": "color_positive_9" - }, - "color_grey_3": { - "type": "color", - "value": "rgb(222, 226, 230)", - "category": "color-group-tone-grey", - "originalValue": "#dee2e6", - "name": "color_grey_3" - }, - "color_teal_6": { - "type": "color", - "value": "rgb(18, 184, 134)", - "category": "color-group-function-teal", - "originalValue": "#12b886", - "name": "color_teal_6" - }, - "color_violet_4": { - "type": "color", - "value": "rgb(151, 117, 250)", - "category": "color-group-function-violet", - "originalValue": "#9775fa", - "name": "color_violet_4" - }, - "color_cyan_0": { - "type": "color", - "value": "rgb(227, 250, 252)", - "category": "color-group-function-cyan", - "originalValue": "#e3fafc", - "name": "color_cyan_0" - }, - "color_grey_4": { - "type": "color", - "value": "rgb(206, 212, 218)", - "category": "color-group-tone-grey", - "originalValue": "#ced4da", - "name": "color_grey_4" - }, - "color_teal_7": { - "type": "color", - "value": "rgb(12, 166, 120)", - "category": "color-group-function-teal", - "originalValue": "#0ca678", - "name": "color_teal_7" - }, - "color_probably_0": { - "type": "color", - "value": "rgb(255, 249, 219)", - "category": "color-group-context-probably", - "originalValue": "#fff9db", - "name": "color_probably_0" - }, - "color_violet_5": { - "type": "color", - "value": "rgb(132, 94, 247)", - "category": "color-group-function-violet", - "originalValue": "#845ef7", - "name": "color_violet_5" - }, - "color_cyan_1": { - "type": "color", - "value": "rgb(197, 246, 250)", - "category": "color-group-function-cyan", - "originalValue": "#c5f6fa", - "name": "color_cyan_1" - }, - "color_grey_5": { - "type": "color", - "value": "rgb(173, 181, 189)", - "category": "color-group-tone-grey", - "originalValue": "#adb5bd", - "name": "color_grey_5" - }, - "color_teal_8": { - "type": "color", - "value": "rgb(9, 146, 104)", - "category": "color-group-function-teal", - "originalValue": "#099268", - "name": "color_teal_8" - }, - "color_probably_1": { - "type": "color", - "value": "rgb(255, 243, 191)", - "category": "color-group-context-probably", - "originalValue": "#fff3bf", - "name": "color_probably_1" - }, - "color_violet_6": { - "type": "color", - "value": "rgb(121, 80, 242)", - "category": "color-group-function-violet", - "originalValue": "#7950f2", - "name": "color_violet_6" - }, - "color_tone_grey_darker": { - "type": "color", - "value": "rgb(51, 51, 51)", - "category": "color-group-tone-black", - "comment": "Darker grey", - "originalValue": "hsl({!none}, 20%)", - "name": "color_tone_grey_darker" - }, - "color_cyan_2": { - "type": "color", - "value": "rgb(153, 233, 242)", - "category": "color-group-function-cyan", - "originalValue": "#99e9f2", - "name": "color_cyan_2" - }, - "color_grey_6": { - "type": "color", - "value": "rgb(134, 142, 150)", - "category": "color-group-tone-grey", - "originalValue": "#868e96", - "name": "color_grey_6" - }, - "color_teal_9": { - "type": "color", - "value": "rgb(8, 127, 91)", - "category": "color-group-function-teal", - "originalValue": "#087f5b", - "name": "color_teal_9" - }, - "color_probably_2": { - "type": "color", - "value": "rgb(255, 236, 153)", - "category": "color-group-context-probably", - "originalValue": "#ffec99", - "name": "color_probably_2" - }, - "color_violet_7": { - "type": "color", - "value": "rgb(112, 72, 232)", - "category": "color-group-function-violet", - "originalValue": "#7048e8", - "name": "color_violet_7" - }, - "color_cyan_3": { - "type": "color", - "value": "rgb(102, 217, 232)", - "category": "color-group-function-cyan", - "originalValue": "#66d9e8", - "name": "color_cyan_3" - }, - "color_grey_7": { - "type": "color", - "value": "rgb(73, 80, 87)", - "category": "color-group-tone-grey", - "originalValue": "#495057", - "name": "color_grey_7" - }, - "color_probably_3": { - "type": "color", - "value": "rgb(255, 224, 102)", - "category": "color-group-context-probably", - "originalValue": "#ffe066", - "name": "color_probably_3" - }, - "color_violet_8": { - "type": "color", - "value": "rgb(103, 65, 217)", - "category": "color-group-function-violet", - "originalValue": "#6741d9", - "name": "color_violet_8" - }, - "color_white_high": { - "type": "color", - "value": "rgba(255, 255, 255, 0.85)", - "category": "color-group-overlay-white", - "comment": "85% opaque shade of white", - "originalValue": "rgba(255, 255, 255, 0.85)", - "name": "color_white_high" - }, - "color_pure_black": { - "type": "color", - "value": "rgb(0, 0, 0)", + "value": "rgb(255, 255, 255)", "category": "color-group-tone-pure", - "comment": "Pure black color", - "originalValue": "#000000", - "name": "color_pure_black" - }, - "color_cyan_4": { - "type": "color", - "value": "rgb(59, 201, 219)", - "category": "color-group-function-cyan", - "originalValue": "#3bc9db", - "name": "color_cyan_4" - }, - "color_tone_grey_lighter": { - "type": "color", - "value": "rgb(204, 204, 204)", - "category": "color-group-tone-white", - "comment": "Lighter grey", - "originalValue": "hsl({!none}, 80%)", - "name": "color_tone_grey_lighter" - }, - "color_grey_8": { - "type": "color", - "value": "rgb(52, 58, 64)", - "category": "color-group-tone-grey", - "originalValue": "#343a40", - "name": "color_grey_8" - }, - "color_probably_4": { - "type": "color", - "value": "rgb(255, 212, 59)", - "category": "color-group-context-probably", - "originalValue": "#ffd43b", - "name": "color_probably_4" - }, - "color_violet_9": { - "type": "color", - "value": "rgb(95, 61, 196)", - "category": "color-group-function-violet", - "originalValue": "#5f3dc4", - "name": "color_violet_9" - }, - "color_cyan_5": { - "type": "color", - "value": "rgb(34, 184, 207)", - "category": "color-group-function-cyan", - "originalValue": "#22b8cf", - "name": "color_cyan_5" - }, - "color_grey_9": { - "type": "color", - "value": "rgb(33, 37, 41)", - "category": "color-group-tone-grey", - "originalValue": "#212529", - "name": "color_grey_9" - }, - "color_probably_5": { - "type": "color", - "value": "rgb(252, 196, 25)", - "category": "color-group-context-probably", - "originalValue": "#fcc419", - "name": "color_probably_5" + "comment": "Pure white color", + "originalValue": "#ffffff", + "name": "color_white" }, - "color_cyan_6": { + "color_light_slate_gray": { "type": "color", - "value": "rgb(21, 170, 191)", - "category": "color-group-function-cyan", - "originalValue": "#15aabf", - "name": "color_cyan_6" + "value": "rgb(120, 120, 120)", + "category": "color-group-gray-scale", + "originalValue": "#787878", + "name": "color_light_slate_gray" }, - "color_probably_6": { + "color_dark_slate_gray": { "type": "color", - "value": "rgb(250, 176, 5)", - "category": "color-group-context-probably", - "originalValue": "#fab005", - "name": "color_probably_6" + "value": "rgb(51, 51, 51)", + "category": "color-group-gray-scale", + "originalValue": "#333333", + "name": "color_dark_slate_gray" }, "color_blue": { "type": "color", @@ -980,57 +91,6 @@ "originalValue": "#3c5c99", "name": "color_blue" }, - "color_cyan_7": { - "type": "color", - "value": "rgb(16, 152, 173)", - "category": "color-group-function-cyan", - "originalValue": "#1098ad", - "name": "color_cyan_7" - }, - "color_probably_7": { - "type": "color", - "value": "rgb(245, 159, 0)", - "category": "color-group-context-probably", - "originalValue": "#f59f00", - "name": "color_probably_7" - }, - "color_green_0": { - "type": "color", - "value": "rgb(235, 251, 238)", - "category": "color-group-function-green", - "originalValue": "#ebfbee", - "name": "color_green_0" - }, - "color_black_low": { - "type": "color", - "value": "rgba(0, 0, 0, 0.15)", - "category": "color-group-overlay-black", - "comment": "15% opaque shade of black", - "originalValue": "rgba(0, 0, 0, 0.15)", - "name": "color_black_low" - }, - "color_tone_white": { - "type": "color", - "value": "rgb(255, 255, 255)", - "category": "color-group-tone-white", - "comment": "Pure white color", - "originalValue": "hsl({!none}, 100%)", - "name": "color_tone_white" - }, - "color_cyan_8": { - "type": "color", - "value": "rgb(12, 133, 153)", - "category": "color-group-function-cyan", - "originalValue": "#0c8599", - "name": "color_cyan_8" - }, - "color_probably_8": { - "type": "color", - "value": "rgb(240, 140, 0)", - "category": "color-group-context-probably", - "originalValue": "#f08c00", - "name": "color_probably_8" - }, "color_forest": { "type": "color", "value": "rgb(4, 166, 53)", @@ -1038,55 +98,12 @@ "originalValue": "#04a635", "name": "color_forest" }, - "color_green_1": { + "color_lighter_gray": { "type": "color", - "value": "rgb(211, 249, 216)", - "category": "color-group-function-green", - "originalValue": "#d3f9d8", - "name": "color_green_1" - }, - "color_tone_near_black": { - "type": "color", - "value": "rgb(26, 26, 26)", - "category": "color-group-tone-black", - "comment": "Darkest grey, near black", - "originalValue": "hsl({!none}, 10%)", - "name": "color_tone_near_black" - }, - "color_cyan_9": { - "type": "color", - "value": "rgb(11, 114, 133)", - "category": "color-group-function-cyan", - "originalValue": "#0b7285", - "name": "color_cyan_9" - }, - "color_probably_9": { - "type": "color", - "value": "rgb(230, 119, 0)", - "category": "color-group-context-probably", - "originalValue": "#e67700", - "name": "color_probably_9" - }, - "color_green_2": { - "type": "color", - "value": "rgb(178, 242, 187)", - "category": "color-group-function-green", - "originalValue": "#b2f2bb", - "name": "color_green_2" - }, - "color_green_3": { - "type": "color", - "value": "rgb(140, 233, 154)", - "category": "color-group-function-green", - "originalValue": "#8ce99a", - "name": "color_green_3" - }, - "color_green_4": { - "type": "color", - "value": "rgb(105, 219, 124)", - "category": "color-group-function-green", - "originalValue": "#69db7c", - "name": "color_green_4" + "value": "rgb(245, 245, 245)", + "category": "color-group-gray-scale", + "originalValue": "#F5F5F5", + "name": "color_lighter_gray" }, "color_gold": { "type": "color", @@ -1095,56 +112,12 @@ "originalValue": "#efbe00", "name": "color_gold" }, - "color_green_5": { - "type": "color", - "value": "rgb(81, 207, 102)", - "category": "color-group-function-green", - "originalValue": "#51cf66", - "name": "color_green_5" - }, - "color_slate": { - "type": "color", - "value": "rgb(51, 51, 51)", - "category": "color-group-brand-creative-commons", - "originalValue": "#333333", - "name": "color_slate" - }, - "color_black_high": { - "type": "color", - "value": "rgba(0, 0, 0, 0.85)", - "category": "color-group-overlay-black", - "comment": "85% opaque shade of black", - "originalValue": "rgba(0, 0, 0, 0.85)", - "name": "color_black_high" - }, - "color_green_6": { - "type": "color", - "value": "rgb(64, 192, 87)", - "category": "color-group-function-green", - "originalValue": "#40c057", - "name": "color_green_6" - }, - "color_pure_white": { - "type": "color", - "value": "rgb(255, 255, 255)", - "category": "color-group-tone-pure", - "comment": "Pure white color", - "originalValue": "#ffffff", - "name": "color_pure_white" - }, - "color_green_7": { - "type": "color", - "value": "rgb(55, 178, 77)", - "category": "color-group-function-green", - "originalValue": "#37b24d", - "name": "color_green_7" - }, - "color_indigo_0": { + "color_gray": { "type": "color", - "value": "rgb(231, 245, 255)", - "category": "color-group-function-indigo", - "originalValue": "#e7f5ff", - "name": "color_indigo_0" + "value": "rgb(176, 176, 176)", + "category": "color-group-gray-scale", + "originalValue": "#B0B0B0", + "name": "color_gray" }, "size_small": { "type": "size", @@ -1507,4 +480,4 @@ "name": "duration_longest" } } -} +} \ No newline at end of file diff --git a/src/assets/tokens/tokens.scss b/src/assets/tokens/tokens.scss index a30f3425f..fc214e0e9 100644 --- a/src/assets/tokens/tokens.scss +++ b/src/assets/tokens/tokens.scss @@ -1,179 +1,22 @@ -$color-green-8: rgb(47, 158, 68); -$color-grape-0: rgb(248, 240, 252); -$color-indigo-1: rgb(208, 235, 255); -$color-yellow-0: rgb(255, 249, 219); -$color-green-9: rgb(43, 138, 62); -$color-grape-1: rgb(243, 217, 250); -$color-indigo-2: rgb(165, 216, 255); -/* 15% opaque shade of white */ -$color-white-low: rgba(255, 255, 255, 0.15); -$color-yellow-1: rgb(255, 243, 191); -$color-negative-0: rgb(255, 245, 245); -$color-grape-2: rgb(238, 190, 250); -$color-lime-0: rgb(244, 252, 227); -$color-indigo-3: rgb(116, 192, 252); -$color-pink-0: rgb(255, 240, 246); -$color-yellow-2: rgb(255, 236, 153); -$color-negative-1: rgb(255, 227, 227); -/* Lightest grey, near white */ -$color-tone-near-white: rgb(230, 230, 230); -$color-grape-3: rgb(229, 153, 247); -$color-lime-1: rgb(233, 250, 200); -$color-indigo-4: rgb(77, 171, 247); -$color-pink-1: rgb(255, 222, 235); -$color-yellow-3: rgb(255, 224, 102); -$color-negative-2: rgb(255, 201, 201); -$color-grape-4: rgb(218, 119, 242); -$color-lime-2: rgb(216, 245, 162); -$color-indigo-5: rgb(51, 154, 240); -$color-pink-2: rgb(252, 194, 215); -$color-yellow-4: rgb(255, 212, 59); -$color-negative-3: rgb(255, 168, 168); -$color-grape-5: rgb(204, 93, 232); -$color-lime-3: rgb(192, 235, 117); -/* Slightly dark grey */ -$color-tone-grey-dark: rgb(102, 102, 102); -$color-indigo-6: rgb(34, 139, 230); -$color-pink-3: rgb(250, 162, 193); -$color-red-0: rgb(255, 245, 245); -$color-tomato: rgb(237, 89, 47); -$color-yellow-5: rgb(252, 196, 25); -$color-negative-4: rgb(255, 135, 135); -$color-grape-6: rgb(190, 75, 219); -$color-positive-0: rgb(244, 252, 227); -$color-lime-4: rgb(169, 227, 75); -$color-indigo-7: rgb(28, 126, 214); -$color-pink-4: rgb(247, 131, 172); -$color-red-1: rgb(255, 227, 227); -$color-yellow-6: rgb(250, 176, 5); -$color-negative-5: rgb(255, 107, 107); -$color-grape-7: rgb(174, 62, 201); -$color-positive-1: rgb(233, 250, 200); -$color-lime-5: rgb(148, 216, 45); -$color-indigo-8: rgb(25, 113, 194); -/* Slightly light grey */ -$color-tone-grey-light: rgb(153, 153, 153); -$color-pink-5: rgb(240, 101, 149); -$color-red-2: rgb(255, 201, 201); -$color-yellow-7: rgb(245, 159, 0); -$color-negative-6: rgb(250, 82, 82); -$color-grape-8: rgb(156, 54, 181); -$color-positive-2: rgb(216, 245, 162); -$color-lime-6: rgb(130, 201, 30); -$color-indigo-9: rgb(24, 100, 171); +$color-warning: rgb(245, 159, 0); +/* Pure black color */ +$color-black: rgb(0, 0, 0); $color-turquoise: rgb(5, 181, 218); -$color-pink-6: rgb(230, 73, 128); -$color-red-3: rgb(255, 168, 168); -$color-yellow-8: rgb(240, 140, 0); -$color-negative-7: rgb(240, 62, 62); -$color-grape-9: rgb(134, 46, 156); -$color-positive-3: rgb(192, 235, 117); -$color-lime-7: rgb(116, 184, 22); -$color-teal-0: rgb(230, 252, 245); -$color-pink-7: rgb(214, 51, 108); -$color-red-4: rgb(255, 135, 135); -$color-yellow-9: rgb(230, 119, 0); -$color-negative-8: rgb(224, 49, 49); -$color-positive-4: rgb(169, 227, 75); +$color-tomato: rgb(237, 89, 47); +$color-success: rgb(116, 184, 22); +$color-light-gray: rgb(216, 216, 216); $color-orange: rgb(251, 119, 41); -$color-lime-8: rgb(102, 168, 15); -$color-teal-1: rgb(195, 250, 232); -$color-pink-8: rgb(194, 37, 92); -$color-red-5: rgb(255, 107, 107); -$color-negative-9: rgb(201, 42, 42); -$color-positive-5: rgb(148, 216, 45); -$color-lime-9: rgb(92, 148, 13); -$color-teal-2: rgb(150, 242, 215); -$color-pink-9: rgb(166, 30, 77); -$color-red-6: rgb(250, 82, 82); -$color-violet-0: rgb(243, 240, 255); -$color-positive-6: rgb(130, 201, 30); -$color-grey-0: rgb(248, 249, 250); -$color-teal-3: rgb(99, 230, 190); -$color-red-7: rgb(240, 62, 62); -$color-violet-1: rgb(229, 219, 255); -$color-positive-7: rgb(116, 184, 22); -$color-grey-1: rgb(241, 243, 245); -$color-teal-4: rgb(56, 217, 169); -$color-red-8: rgb(224, 49, 49); -/* Pure black color */ -$color-tone-black: rgb(0, 0, 0); -$color-violet-2: rgb(208, 191, 255); -$color-positive-8: rgb(102, 168, 15); -$color-grey-2: rgb(233, 236, 239); -$color-teal-5: rgb(32, 201, 151); -$color-red-9: rgb(201, 42, 42); -$color-violet-3: rgb(177, 151, 252); -$color-positive-9: rgb(92, 148, 13); -$color-grey-3: rgb(222, 226, 230); -$color-teal-6: rgb(18, 184, 134); -$color-violet-4: rgb(151, 117, 250); -$color-cyan-0: rgb(227, 250, 252); -$color-grey-4: rgb(206, 212, 218); -$color-teal-7: rgb(12, 166, 120); -$color-probably-0: rgb(255, 249, 219); -$color-violet-5: rgb(132, 94, 247); -$color-cyan-1: rgb(197, 246, 250); -$color-grey-5: rgb(173, 181, 189); -$color-teal-8: rgb(9, 146, 104); -$color-probably-1: rgb(255, 243, 191); -$color-violet-6: rgb(121, 80, 242); -/* Darker grey */ -$color-tone-grey-darker: rgb(51, 51, 51); -$color-cyan-2: rgb(153, 233, 242); -$color-grey-6: rgb(134, 142, 150); -$color-teal-9: rgb(8, 127, 91); -$color-probably-2: rgb(255, 236, 153); -$color-violet-7: rgb(112, 72, 232); -$color-cyan-3: rgb(102, 217, 232); -$color-grey-7: rgb(73, 80, 87); -$color-probably-3: rgb(255, 224, 102); -$color-violet-8: rgb(103, 65, 217); -/* 85% opaque shade of white */ -$color-white-high: rgba(255, 255, 255, 0.85); -/* Pure black color */ -$color-pure-black: rgb(0, 0, 0); -$color-cyan-4: rgb(59, 201, 219); -/* Lighter grey */ -$color-tone-grey-lighter: rgb(204, 204, 204); -$color-grey-8: rgb(52, 58, 64); -$color-probably-4: rgb(255, 212, 59); -$color-violet-9: rgb(95, 61, 196); -$color-cyan-5: rgb(34, 184, 207); -$color-grey-9: rgb(33, 37, 41); -$color-probably-5: rgb(252, 196, 25); -$color-cyan-6: rgb(21, 170, 191); -$color-probably-6: rgb(250, 176, 5); -$color-blue: rgb(60, 92, 153); -$color-cyan-7: rgb(16, 152, 173); -$color-probably-7: rgb(245, 159, 0); -$color-green-0: rgb(235, 251, 238); -/* 15% opaque shade of black */ -$color-black-low: rgba(0, 0, 0, 0.15); +$color-error: rgb(240, 62, 62); /* Pure white color */ -$color-tone-white: rgb(255, 255, 255); -$color-cyan-8: rgb(12, 133, 153); -$color-probably-8: rgb(240, 140, 0); +$color-white: rgb(255, 255, 255); +$color-light-slate-gray: rgb(120, 120, 120); +$color-dark-slate-gray: rgb(51, 51, 51); +$color-blue: rgb(60, 92, 153); $color-forest: rgb(4, 166, 53); -$color-green-1: rgb(211, 249, 216); -/* Darkest grey, near black */ -$color-tone-near-black: rgb(26, 26, 26); -$color-cyan-9: rgb(11, 114, 133); -$color-probably-9: rgb(230, 119, 0); -$color-green-2: rgb(178, 242, 187); -$color-green-3: rgb(140, 233, 154); -$color-green-4: rgb(105, 219, 124); +$color-lighter-gray: rgb(245, 245, 245); $color-gold: rgb(239, 190, 0); -$color-green-5: rgb(81, 207, 102); -$color-slate: rgb(51, 51, 51); -/* 85% opaque shade of black */ -$color-black-high: rgba(0, 0, 0, 0.85); -$color-green-6: rgb(64, 192, 87); -/* Pure white color */ -$color-pure-white: rgb(255, 255, 255); -$color-green-7: rgb(55, 178, 77); -$color-indigo-0: rgb(231, 245, 255); +$color-gray: rgb(176, 176, 176); /* Font size for footnotes */ $size-small: 0.7937rem; /* Font size for normal copy */ diff --git a/src/assets/tokens/tokens.styl b/src/assets/tokens/tokens.styl index 55caf2aaa..6ad7d0da2 100644 --- a/src/assets/tokens/tokens.styl +++ b/src/assets/tokens/tokens.styl @@ -1,179 +1,22 @@ -$color-green-8 = rgb(47, 158, 68) -$color-grape-0 = rgb(248, 240, 252) -$color-indigo-1 = rgb(208, 235, 255) -$color-yellow-0 = rgb(255, 249, 219) -$color-green-9 = rgb(43, 138, 62) -$color-grape-1 = rgb(243, 217, 250) -$color-indigo-2 = rgb(165, 216, 255) -/* 15% opaque shade of white */ -$color-white-low = rgba(255, 255, 255, 0.15) -$color-yellow-1 = rgb(255, 243, 191) -$color-negative-0 = rgb(255, 245, 245) -$color-grape-2 = rgb(238, 190, 250) -$color-lime-0 = rgb(244, 252, 227) -$color-indigo-3 = rgb(116, 192, 252) -$color-pink-0 = rgb(255, 240, 246) -$color-yellow-2 = rgb(255, 236, 153) -$color-negative-1 = rgb(255, 227, 227) -/* Lightest grey, near white */ -$color-tone-near-white = rgb(230, 230, 230) -$color-grape-3 = rgb(229, 153, 247) -$color-lime-1 = rgb(233, 250, 200) -$color-indigo-4 = rgb(77, 171, 247) -$color-pink-1 = rgb(255, 222, 235) -$color-yellow-3 = rgb(255, 224, 102) -$color-negative-2 = rgb(255, 201, 201) -$color-grape-4 = rgb(218, 119, 242) -$color-lime-2 = rgb(216, 245, 162) -$color-indigo-5 = rgb(51, 154, 240) -$color-pink-2 = rgb(252, 194, 215) -$color-yellow-4 = rgb(255, 212, 59) -$color-negative-3 = rgb(255, 168, 168) -$color-grape-5 = rgb(204, 93, 232) -$color-lime-3 = rgb(192, 235, 117) -/* Slightly dark grey */ -$color-tone-grey-dark = rgb(102, 102, 102) -$color-indigo-6 = rgb(34, 139, 230) -$color-pink-3 = rgb(250, 162, 193) -$color-red-0 = rgb(255, 245, 245) -$color-tomato = rgb(237, 89, 47) -$color-yellow-5 = rgb(252, 196, 25) -$color-negative-4 = rgb(255, 135, 135) -$color-grape-6 = rgb(190, 75, 219) -$color-positive-0 = rgb(244, 252, 227) -$color-lime-4 = rgb(169, 227, 75) -$color-indigo-7 = rgb(28, 126, 214) -$color-pink-4 = rgb(247, 131, 172) -$color-red-1 = rgb(255, 227, 227) -$color-yellow-6 = rgb(250, 176, 5) -$color-negative-5 = rgb(255, 107, 107) -$color-grape-7 = rgb(174, 62, 201) -$color-positive-1 = rgb(233, 250, 200) -$color-lime-5 = rgb(148, 216, 45) -$color-indigo-8 = rgb(25, 113, 194) -/* Slightly light grey */ -$color-tone-grey-light = rgb(153, 153, 153) -$color-pink-5 = rgb(240, 101, 149) -$color-red-2 = rgb(255, 201, 201) -$color-yellow-7 = rgb(245, 159, 0) -$color-negative-6 = rgb(250, 82, 82) -$color-grape-8 = rgb(156, 54, 181) -$color-positive-2 = rgb(216, 245, 162) -$color-lime-6 = rgb(130, 201, 30) -$color-indigo-9 = rgb(24, 100, 171) +$color-warning = rgb(245, 159, 0) +/* Pure black color */ +$color-black = rgb(0, 0, 0) $color-turquoise = rgb(5, 181, 218) -$color-pink-6 = rgb(230, 73, 128) -$color-red-3 = rgb(255, 168, 168) -$color-yellow-8 = rgb(240, 140, 0) -$color-negative-7 = rgb(240, 62, 62) -$color-grape-9 = rgb(134, 46, 156) -$color-positive-3 = rgb(192, 235, 117) -$color-lime-7 = rgb(116, 184, 22) -$color-teal-0 = rgb(230, 252, 245) -$color-pink-7 = rgb(214, 51, 108) -$color-red-4 = rgb(255, 135, 135) -$color-yellow-9 = rgb(230, 119, 0) -$color-negative-8 = rgb(224, 49, 49) -$color-positive-4 = rgb(169, 227, 75) +$color-tomato = rgb(237, 89, 47) +$color-success = rgb(116, 184, 22) +$color-light-gray = rgb(216, 216, 216) $color-orange = rgb(251, 119, 41) -$color-lime-8 = rgb(102, 168, 15) -$color-teal-1 = rgb(195, 250, 232) -$color-pink-8 = rgb(194, 37, 92) -$color-red-5 = rgb(255, 107, 107) -$color-negative-9 = rgb(201, 42, 42) -$color-positive-5 = rgb(148, 216, 45) -$color-lime-9 = rgb(92, 148, 13) -$color-teal-2 = rgb(150, 242, 215) -$color-pink-9 = rgb(166, 30, 77) -$color-red-6 = rgb(250, 82, 82) -$color-violet-0 = rgb(243, 240, 255) -$color-positive-6 = rgb(130, 201, 30) -$color-grey-0 = rgb(248, 249, 250) -$color-teal-3 = rgb(99, 230, 190) -$color-red-7 = rgb(240, 62, 62) -$color-violet-1 = rgb(229, 219, 255) -$color-positive-7 = rgb(116, 184, 22) -$color-grey-1 = rgb(241, 243, 245) -$color-teal-4 = rgb(56, 217, 169) -$color-red-8 = rgb(224, 49, 49) -/* Pure black color */ -$color-tone-black = rgb(0, 0, 0) -$color-violet-2 = rgb(208, 191, 255) -$color-positive-8 = rgb(102, 168, 15) -$color-grey-2 = rgb(233, 236, 239) -$color-teal-5 = rgb(32, 201, 151) -$color-red-9 = rgb(201, 42, 42) -$color-violet-3 = rgb(177, 151, 252) -$color-positive-9 = rgb(92, 148, 13) -$color-grey-3 = rgb(222, 226, 230) -$color-teal-6 = rgb(18, 184, 134) -$color-violet-4 = rgb(151, 117, 250) -$color-cyan-0 = rgb(227, 250, 252) -$color-grey-4 = rgb(206, 212, 218) -$color-teal-7 = rgb(12, 166, 120) -$color-probably-0 = rgb(255, 249, 219) -$color-violet-5 = rgb(132, 94, 247) -$color-cyan-1 = rgb(197, 246, 250) -$color-grey-5 = rgb(173, 181, 189) -$color-teal-8 = rgb(9, 146, 104) -$color-probably-1 = rgb(255, 243, 191) -$color-violet-6 = rgb(121, 80, 242) -/* Darker grey */ -$color-tone-grey-darker = rgb(51, 51, 51) -$color-cyan-2 = rgb(153, 233, 242) -$color-grey-6 = rgb(134, 142, 150) -$color-teal-9 = rgb(8, 127, 91) -$color-probably-2 = rgb(255, 236, 153) -$color-violet-7 = rgb(112, 72, 232) -$color-cyan-3 = rgb(102, 217, 232) -$color-grey-7 = rgb(73, 80, 87) -$color-probably-3 = rgb(255, 224, 102) -$color-violet-8 = rgb(103, 65, 217) -/* 85% opaque shade of white */ -$color-white-high = rgba(255, 255, 255, 0.85) -/* Pure black color */ -$color-pure-black = rgb(0, 0, 0) -$color-cyan-4 = rgb(59, 201, 219) -/* Lighter grey */ -$color-tone-grey-lighter = rgb(204, 204, 204) -$color-grey-8 = rgb(52, 58, 64) -$color-probably-4 = rgb(255, 212, 59) -$color-violet-9 = rgb(95, 61, 196) -$color-cyan-5 = rgb(34, 184, 207) -$color-grey-9 = rgb(33, 37, 41) -$color-probably-5 = rgb(252, 196, 25) -$color-cyan-6 = rgb(21, 170, 191) -$color-probably-6 = rgb(250, 176, 5) -$color-blue = rgb(60, 92, 153) -$color-cyan-7 = rgb(16, 152, 173) -$color-probably-7 = rgb(245, 159, 0) -$color-green-0 = rgb(235, 251, 238) -/* 15% opaque shade of black */ -$color-black-low = rgba(0, 0, 0, 0.15) +$color-error = rgb(240, 62, 62) /* Pure white color */ -$color-tone-white = rgb(255, 255, 255) -$color-cyan-8 = rgb(12, 133, 153) -$color-probably-8 = rgb(240, 140, 0) +$color-white = rgb(255, 255, 255) +$color-light-slate-gray = rgb(120, 120, 120) +$color-dark-slate-gray = rgb(51, 51, 51) +$color-blue = rgb(60, 92, 153) $color-forest = rgb(4, 166, 53) -$color-green-1 = rgb(211, 249, 216) -/* Darkest grey, near black */ -$color-tone-near-black = rgb(26, 26, 26) -$color-cyan-9 = rgb(11, 114, 133) -$color-probably-9 = rgb(230, 119, 0) -$color-green-2 = rgb(178, 242, 187) -$color-green-3 = rgb(140, 233, 154) -$color-green-4 = rgb(105, 219, 124) +$color-lighter-gray = rgb(245, 245, 245) $color-gold = rgb(239, 190, 0) -$color-green-5 = rgb(81, 207, 102) -$color-slate = rgb(51, 51, 51) -/* 85% opaque shade of black */ -$color-black-high = rgba(0, 0, 0, 0.85) -$color-green-6 = rgb(64, 192, 87) -/* Pure white color */ -$color-pure-white = rgb(255, 255, 255) -$color-green-7 = rgb(55, 178, 77) -$color-indigo-0 = rgb(231, 245, 255) +$color-gray = rgb(176, 176, 176) /* Font size for footnotes */ $size-small = 0.7937rem /* Font size for normal copy */ From feed8b422b299503ece9e40870ba4101c063e75a Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Mon, 20 Jan 2020 11:38:13 -0300 Subject: [PATCH 07/31] updated button color names --- src/elements/Button.styl | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/elements/Button.styl b/src/elements/Button.styl index ef80ad302..afd5500f7 100644 --- a/src/elements/Button.styl +++ b/src/elements/Button.styl @@ -10,66 +10,66 @@ text-align: center; border-radius: 0.25rem; text-transform: uppercase; - background-color: $color-pure-white; - border: 0.125rem solid $color-grey-6; + background-color: $color-white; + border: 0.125rem solid $color-light-slate-gray; font-weight: 600; font-family: inherit; - color: $color-grey-6; + color: $color-light-slate-gray; font-size: $size-big; padding: 0.5rem 1rem; &.tomato background-color: $color-tomato; border: none; - color: $color-pure-white; + color: $color-white; &.forest background-color: $color-forest; border: none; - color: $color-pure-white; + color: $color-white; &.gold background-color: $color-gold border: none; - color: $color-pure-black; + color: $color-black; &.orange background-color: $color-orange; border: none; - color: $color-pure-white; + color: $color-white; &.turquoise background-color: $color-turquoise; border: none; - color: $color-pure-black; + color: $color-black; &.blue background-color: $color-blue; border: none; - color: $color-pure-white; + color: $color-white; &.primary background-color: $color-tomato - color: $color-pure-white + color: $color-white border: none; &.secondary background-color: $color-forest - color: $color-pure-white + color: $color-white border: none; &.tag-white border-radius: 1rem; - color: $color-grey-5; - border: 0.125rem solid $color-grey-3; + color: $color_gray; + border: 0.125rem solid $color_light_gray; text-transform: none; font-size: $size-small; padding: 0.3rem 1rem; &.tag-gray border-radius: 1rem; - color: $color-pure-white; - background: $color-grey-5; + color: $color-white; + background-color: $color-gray; border: none; text-transform: none; font-size: $size-small; @@ -77,7 +77,7 @@ &.donate background-color: $color-gold - color: $color-pure-black; + color: $color-black; border: none; &.big From d811d88c1fef756e5f7c753e58c75257da1305c2 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Mon, 20 Jan 2020 12:12:45 -0300 Subject: [PATCH 08/31] removed slate brand --- src/styles/brands.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/brands.styl b/src/styles/brands.styl index 04bf03958..532671c9b 100644 --- a/src/styles/brands.styl +++ b/src/styles/brands.styl @@ -1,7 +1,7 @@ // Generate given property for all brands brands(property) - $brands = 'blue' 'forest' 'gold' 'orange' 'tomato' 'turquoise' 'slate' + $brands = 'blue' 'forest' 'gold' 'orange' 'tomato' 'turquoise' for brand in $brands &.{brand}-branded.{brand}-branded From 93d5dd287b4407100a23d9bf63c09934f016953c Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Mon, 20 Jan 2020 13:38:20 -0300 Subject: [PATCH 09/31] removed colors.styl --- src/elements/Button.styl | 1 - src/elements/ChoiceField.styl | 2 -- src/elements/GitHubCorner.styl | 2 -- src/elements/Heading.styl | 2 -- src/elements/Heading/Heading.stories.js | 8 ------- src/elements/InputField.styl | 2 -- src/elements/Paragraph.styl | 2 -- src/elements/ProgressBar.styl | 2 -- src/elements/Rating.styl | 2 -- src/elements/SelectField.styl | 2 -- src/elements/Shield.styl | 2 -- src/elements/Statistic.styl | 2 -- src/elements/SwitchField.styl | 2 -- src/knobs/colored.js | 30 ------------------------- src/layouts/Section.styl | 2 -- src/layouts/Tabbed.styl | 2 -- src/layouts/Table.styl | 2 -- src/patterns/Card.styl | 4 ---- src/patterns/Header.styl | 2 -- src/patterns/Navigation.styl | 2 -- src/patterns/Popup.styl | 1 - src/patterns/Quote.styl | 1 - src/patterns/Trail.styl | 2 -- src/styles/colors.styl | 16 ------------- 24 files changed, 95 deletions(-) delete mode 100644 src/knobs/colored.js delete mode 100644 src/styles/colors.styl diff --git a/src/elements/Button.styl b/src/elements/Button.styl index afd5500f7..3f0a88d08 100644 --- a/src/elements/Button.styl +++ b/src/elements/Button.styl @@ -1,5 +1,4 @@ @import "../assets/tokens/tokens.styl" -@import "../styles/colors.styl" @import "../styles/brands.styl" @import "../styles/tones.styl" @import "../styles/indications.styl" diff --git a/src/elements/ChoiceField.styl b/src/elements/ChoiceField.styl index 92dd5d13b..7e36d5842 100644 --- a/src/elements/ChoiceField.styl +++ b/src/elements/ChoiceField.styl @@ -1,6 +1,5 @@ @import "../assets/tokens/tokens.styl" -@import "../styles/colors.styl" @import "../styles/brands.styl" @import "../styles/indications.styl" @import "../styles/tones.styl" @@ -15,7 +14,6 @@ &.inverted --choice-field-primary $color-tone-white - colors('--choice-field-primary') brands('--choice-field-primary') indications('--choice-field-primary', 9) tones('--choice-field-primary') diff --git a/src/elements/GitHubCorner.styl b/src/elements/GitHubCorner.styl index 74b258af4..f85e025b7 100644 --- a/src/elements/GitHubCorner.styl +++ b/src/elements/GitHubCorner.styl @@ -1,6 +1,5 @@ @import "../assets/tokens/tokens.styl" -@import "../styles/colors.styl" @import "../styles/brands.styl" @import "../styles/font-reset.styl" @import "../styles/sizes.styl" @@ -13,7 +12,6 @@ &.inverted --github-corner-primary $color-tone-white - colors('--github-corner-primary') brands('--github-corner-primary') --github-corner-secondary $color-tone-white diff --git a/src/elements/Heading.styl b/src/elements/Heading.styl index a81724e12..cc6b598cc 100644 --- a/src/elements/Heading.styl +++ b/src/elements/Heading.styl @@ -1,13 +1,11 @@ @import "../assets/tokens/tokens.styl" -@import "../styles/colors.styl" @import "../styles/brands.styl" @import "../styles/indications.styl" .vocab.heading //Color - colors('--heading-color') brands('--heading-color') indications('--heading-color', 9) diff --git a/src/elements/Heading/Heading.stories.js b/src/elements/Heading/Heading.stories.js index 858ab45ad..fcd98f969 100644 --- a/src/elements/Heading/Heading.stories.js +++ b/src/elements/Heading/Heading.stories.js @@ -1,5 +1,4 @@ import Branded from '@/knobs/branded' -import Colored from '@/knobs/colored' import Indicating from '@/knobs/indicating' import Text from '@/knobs/text' @@ -15,13 +14,6 @@ export const branded = () => ({ ` }) -export const colored = () => ({ - mixins: [ Colored ], - template: ` -
Vocabulary
- ` -}) - export const indicating = () => ({ mixins: [ Indicating ], template: ` diff --git a/src/elements/InputField.styl b/src/elements/InputField.styl index 14f29a647..3e38b4cc7 100644 --- a/src/elements/InputField.styl +++ b/src/elements/InputField.styl @@ -1,6 +1,5 @@ @import "../assets/tokens/tokens.styl" -@import "../styles/colors.styl" @import "../styles/brands.styl" @import "../styles/indications.styl" @import "../styles/tones.styl" @@ -15,7 +14,6 @@ &.inverted --input-field-primary $color-tone-white - colors('--input-field-primary') brands('--input-field-primary') indications('--input-field-primary', 9) tones('--input-field-primary') diff --git a/src/elements/Paragraph.styl b/src/elements/Paragraph.styl index 15c167651..6bb2e0c4e 100644 --- a/src/elements/Paragraph.styl +++ b/src/elements/Paragraph.styl @@ -1,12 +1,10 @@ @import "../assets/tokens/tokens.styl" -@import "../styles/colors.styl" @import "../styles/brands.styl" @import "../styles/indications.styl" .vocab.paragraph // Color - colors('--paragraph-color') brands('--paragraph-color') indications('--paragraph-color', 9) diff --git a/src/elements/ProgressBar.styl b/src/elements/ProgressBar.styl index b892c6241..f32b0f989 100644 --- a/src/elements/ProgressBar.styl +++ b/src/elements/ProgressBar.styl @@ -1,6 +1,5 @@ @import "../assets/tokens/tokens.styl" -@import "../styles/colors.styl" @import "../styles/brands.styl" @import "../styles/indications.styl" @import "../styles/sizes.styl" @@ -13,7 +12,6 @@ &.inverted --progress-bar-primary $color-tone-white - colors('--progress-bar-primary') brands('--progress-bar-primary') indications('--progress-bar-primary', 9) diff --git a/src/elements/Rating.styl b/src/elements/Rating.styl index c7cd9d0a0..5fa1fe594 100644 --- a/src/elements/Rating.styl +++ b/src/elements/Rating.styl @@ -1,6 +1,5 @@ @import "../assets/tokens/tokens.styl" -@import "../styles/colors.styl" @import "../styles/brands.styl" @import "../styles/indications.styl" @import "../styles/media.styl" @@ -14,7 +13,6 @@ &.inverted --rating-primary $color-tone-white - colors('--rating-primary') brands('--rating-primary') indications('--rating-primary', 9) diff --git a/src/elements/SelectField.styl b/src/elements/SelectField.styl index 6797ae8ad..48edee8e4 100644 --- a/src/elements/SelectField.styl +++ b/src/elements/SelectField.styl @@ -1,6 +1,5 @@ @import "../assets/tokens/tokens.styl" -@import "../styles/colors.styl" @import "../styles/brands.styl" @import "../styles/tones.styl" @import "../styles/indications.styl" @@ -16,7 +15,6 @@ --select-field-primary $color-tone-grey-light brands('--select-field-primary') - colors('--select-field-primary') tones('--select-field-primary') indications('--select-field-primary', 9) diff --git a/src/elements/Shield.styl b/src/elements/Shield.styl index 462f64aac..b2824177c 100644 --- a/src/elements/Shield.styl +++ b/src/elements/Shield.styl @@ -1,6 +1,5 @@ @import "../assets/tokens/tokens.styl" -@import "../styles/colors.styl" @import "../styles/brands.styl" @import "../styles/indications.styl" @import "../styles/sizes.styl" @@ -17,7 +16,6 @@ --shield-secondary $color-tone-near-white --shield-tertiary $color-tone-black - colors('--shield-primary') brands('--shield-primary') indications('--shield-primary', 9) diff --git a/src/elements/Statistic.styl b/src/elements/Statistic.styl index e2168d946..fb20b4070 100644 --- a/src/elements/Statistic.styl +++ b/src/elements/Statistic.styl @@ -1,6 +1,5 @@ @import "../assets/tokens/tokens.styl" -@import "../styles/colors.styl" @import "../styles/brands.styl" @import "../styles/indications.styl" @@ -12,7 +11,6 @@ &.inverted --statistic-primary $color-tone-white - colors('--statistic-primary') brands('--statistic-primary') indications('--statistic-primary', 9) diff --git a/src/elements/SwitchField.styl b/src/elements/SwitchField.styl index 374555f24..53fc133ff 100644 --- a/src/elements/SwitchField.styl +++ b/src/elements/SwitchField.styl @@ -1,6 +1,5 @@ @import "../assets/tokens/tokens.styl" -@import "../styles/colors.styl" @import "../styles/brands.styl" @import "../styles/indications.styl" @import "../styles/font-reset.styl" @@ -14,7 +13,6 @@ &.inverted --switch-field-primary $color-tone-white - colors('--switch-field-primary') brands('--switch-field-primary') indications('--switch-field-primary', 9) diff --git a/src/knobs/colored.js b/src/knobs/colored.js deleted file mode 100644 index 6b5cfb01e..000000000 --- a/src/knobs/colored.js +++ /dev/null @@ -1,30 +0,0 @@ -import { number, select } from '@storybook/addon-knobs' - -const colorOptions = { - Red: 'red', - Pink: 'pink', - Grape: 'grape', - Violet: 'violet', - Indigo: 'indigo', - Cyan: 'cyan', - Teal: 'teal', - Green: 'green', - Lime: 'lime', - Yellow: 'yellow' -} - -export default { - props: { - color: { - default: () => select('Color', colorOptions, colorOptions.Indigo) - }, - shade: { - default: () => number('Shade', 9, { - range: true, - min: 0, - max: 9, - step: 1 - }) - } - } -} diff --git a/src/layouts/Section.styl b/src/layouts/Section.styl index bd5e78a95..57195788e 100644 --- a/src/layouts/Section.styl +++ b/src/layouts/Section.styl @@ -1,6 +1,5 @@ @import "../assets/tokens/tokens.styl" -@import "../styles/colors.styl" @import "../styles/brands.styl" @import "../styles/indications.styl" @@ -11,7 +10,6 @@ &.inverted --section-primary $color-tone-grey-dark - colors('--section-primary') brands('--section-primary') indications('--section-primary', 9) diff --git a/src/layouts/Tabbed.styl b/src/layouts/Tabbed.styl index 620997651..64b0042a6 100644 --- a/src/layouts/Tabbed.styl +++ b/src/layouts/Tabbed.styl @@ -1,7 +1,6 @@ @import "../assets/tokens/tokens.styl" @import "../styles/brands.styl" -@import "../styles/colors.styl" @import "../styles/indications.styl" @import "../styles/list.styl" @import "../styles/media.styl" @@ -15,7 +14,6 @@ --tabbed-primary $color-tone-grey-dark brands('--tabbed-primary') - colors('--tabbed-primary') indications('--tabbed-primary') --tabbed-secondary $color-tone-white diff --git a/src/layouts/Table.styl b/src/layouts/Table.styl index bd3e06e4e..c16a6e4f9 100644 --- a/src/layouts/Table.styl +++ b/src/layouts/Table.styl @@ -2,7 +2,6 @@ @import "../styles/media.styl" @import "../styles/brands.styl" -@import "../styles/colors.styl" .vocab.table // Color palette @@ -13,7 +12,6 @@ --table-primary $color-tone-white brands('--table-primary') - colors('--table-primary') --table-secondary $color-tone-white diff --git a/src/patterns/Card.styl b/src/patterns/Card.styl index f93298e4d..920130166 100644 --- a/src/patterns/Card.styl +++ b/src/patterns/Card.styl @@ -1,7 +1,5 @@ @import "../assets/tokens/tokens.styl" -@import "../styles/colors.styl" - .vocab.card // Color palette @@ -10,8 +8,6 @@ &.inverted --card-primary $color-tone-white - colors('--card-primary') - --card-secondary $color-tone-grey-dark &.inverted diff --git a/src/patterns/Header.styl b/src/patterns/Header.styl index 35f27acd6..4ad8d3a76 100644 --- a/src/patterns/Header.styl +++ b/src/patterns/Header.styl @@ -1,7 +1,6 @@ @import "../assets/tokens/tokens.styl" @import "../styles/brands.styl" -@import "../styles/colors.styl" @import "../styles/font-reset.styl" @import "../styles/list.styl" @import "../styles/media.styl" @@ -12,7 +11,6 @@ --header-primary $color-tone-near-black brands('--header-primary') - colors('--header-primary') --header-secondary $color-tone-white diff --git a/src/patterns/Navigation.styl b/src/patterns/Navigation.styl index 7cf4f0bdd..e3c83626e 100644 --- a/src/patterns/Navigation.styl +++ b/src/patterns/Navigation.styl @@ -1,7 +1,6 @@ @import "../assets/tokens/tokens.styl" @import "../styles/brands.styl" -@import "../styles/colors.styl" @import "../styles/media.styl" @import "../styles/list.styl" @@ -14,7 +13,6 @@ --navigation-primary $color-tone-white brands('--navigation-primary') - colors('--navigation-primary') --navigation-overlay $color-overlay-black-low diff --git a/src/patterns/Popup.styl b/src/patterns/Popup.styl index 5ebdb89c7..40e6448fa 100644 --- a/src/patterns/Popup.styl +++ b/src/patterns/Popup.styl @@ -1,6 +1,5 @@ @import "../assets/tokens/tokens.styl" -@import "../styles/colors.styl" @import "../styles/font-reset.styl" @import "../styles/sizes.styl" diff --git a/src/patterns/Quote.styl b/src/patterns/Quote.styl index 4eea50569..b9b287f67 100644 --- a/src/patterns/Quote.styl +++ b/src/patterns/Quote.styl @@ -1,7 +1,6 @@ @import "../assets/tokens/tokens.styl" @import "../styles/brands.styl" -@import "../styles/colors.styl" @import "../styles/indications.styl" .vocab.quote diff --git a/src/patterns/Trail.styl b/src/patterns/Trail.styl index 8a8b846a4..9adfeda87 100644 --- a/src/patterns/Trail.styl +++ b/src/patterns/Trail.styl @@ -1,7 +1,6 @@ @import "../assets/tokens/tokens.styl" @import "../styles/brands.styl" -@import "../styles/colors.styl" @import "../styles/list.styl" @import "../styles/media.styl" @@ -14,7 +13,6 @@ --trail-primary $color-tone-white brands('--trail-primary') - colors('--trail-primary') --trail-secondary $color-tone-grey-light diff --git a/src/styles/colors.styl b/src/styles/colors.styl deleted file mode 100644 index 9aa319762..000000000 --- a/src/styles/colors.styl +++ /dev/null @@ -1,16 +0,0 @@ -// Generate given property for all colors and their opacitys - -colors(property) - &.inherit-colored - {property} inherit - - $colors = 'red' 'pink' 'grape' 'violet' 'indigo' 'cyan' 'teal' 'green' 'lime' 'yellow' - $shades = 0 1 2 3 4 5 6 7 8 9 - - for color in $colors - &.{color}-colored - {property} lookup('$color-' + color) || lookup('$color-' + color + '-9') // Highest valued default - - for shade in $shades - &.s{shade}-shaded - {property} lookup('$color-' + color + '-' + shade) From 87070642068634ef1cc845a6ad8c1767c10b9fe0 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Mon, 20 Jan 2020 15:08:25 -0300 Subject: [PATCH 10/31] remove unused imports in button styles --- src/elements/Button.styl | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/elements/Button.styl b/src/elements/Button.styl index 3f0a88d08..34dc86d7f 100644 --- a/src/elements/Button.styl +++ b/src/elements/Button.styl @@ -1,9 +1,4 @@ @import "../assets/tokens/tokens.styl" -@import "../styles/brands.styl" -@import "../styles/tones.styl" -@import "../styles/indications.styl" -@import "../styles/font-reset.styl" -@import "../styles/sizes.styl" .vocab.button text-align: center; From 51df060ac7a978880393853de8f4811069201e8d Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 09:43:04 -0300 Subject: [PATCH 11/31] moved dark slate gray to brand colors --- src/tokens/color.yml | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/tokens/color.yml b/src/tokens/color.yml index 30a948990..f9a9c5908 100644 --- a/src/tokens/color.yml +++ b/src/tokens/color.yml @@ -23,20 +23,20 @@ props: color_turquoise: value: '#05b5da' category: color-group-brand-creative-commons + color_dark_slate_gray: + value: '#333333' + category: color-group-brand-creative-commons color_white: value: '#ffffff' - category: color-group-tone-pure + category: color-group-black-white comment: Pure white color color_black: value: '#000000' - category: color-group-tone-pure + category: color-group-black-white comment: Pure black color - color_dark_slate_gray: - value: '#333333' - category: color-group-gray-scale - color_light_slate_gray: + color_dark_gray: value: '#787878' category: color-group-gray-scale color_gray: From 5fa1028b7e80f5a298da658a41ee2759acff44f0 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 10:19:16 -0300 Subject: [PATCH 12/31] replace elements color-tone-black with color-black --- src/elements/ChoiceField.styl | 4 ++-- src/elements/GitHubCorner.styl | 4 ++-- src/elements/InputField.styl | 6 +++--- src/elements/ProgressBar.styl | 2 +- src/elements/Rating.styl | 2 +- src/elements/SelectField.styl | 2 +- src/elements/Shield.styl | 2 +- src/elements/Statistic.styl | 2 +- src/elements/SwitchField.styl | 4 ++-- 9 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/elements/ChoiceField.styl b/src/elements/ChoiceField.styl index 7e36d5842..7a38c8943 100644 --- a/src/elements/ChoiceField.styl +++ b/src/elements/ChoiceField.styl @@ -9,7 +9,7 @@ .vocab.choice-field // Color palette - --choice-field-primary $color-tone-black + --choice-field-primary $color-black &.inverted --choice-field-primary $color-tone-white @@ -21,7 +21,7 @@ --choice-field-secondary $color-tone-white &.inverted - --choice-field-secondary $color-tone-black + --choice-field-secondary $color-black // Color diff --git a/src/elements/GitHubCorner.styl b/src/elements/GitHubCorner.styl index f85e025b7..d1d2f50e7 100644 --- a/src/elements/GitHubCorner.styl +++ b/src/elements/GitHubCorner.styl @@ -7,7 +7,7 @@ .vocab.github-corner // Color palette - --github-corner-primary $color-tone-black + --github-corner-primary $color-black &.inverted --github-corner-primary $color-tone-white @@ -17,7 +17,7 @@ --github-corner-secondary $color-tone-white &.inverted - --github-corner-secondary $color-tone-black + --github-corner-secondary $color-black // Color diff --git a/src/elements/InputField.styl b/src/elements/InputField.styl index 3e38b4cc7..1ad896aec 100644 --- a/src/elements/InputField.styl +++ b/src/elements/InputField.styl @@ -9,7 +9,7 @@ .vocab.input-field // Color palette - --input-field-primary $color-tone-black + --input-field-primary $color-black &.inverted --input-field-primary $color-tone-white @@ -21,9 +21,9 @@ --input-field-secondary $color-tone-white &.inverted - --input-field-secondary $color-tone-black + --input-field-secondary $color-black - --input-field-tertiary $color-tone-black + --input-field-tertiary $color-black &.inverted --input-field-tertiary $color-tone-white diff --git a/src/elements/ProgressBar.styl b/src/elements/ProgressBar.styl index f32b0f989..95d807cc1 100644 --- a/src/elements/ProgressBar.styl +++ b/src/elements/ProgressBar.styl @@ -7,7 +7,7 @@ .vocab.progress-bar // Color palette - --progress-bar-primary $color-tone-black + --progress-bar-primary $color-black &.inverted --progress-bar-primary $color-tone-white diff --git a/src/elements/Rating.styl b/src/elements/Rating.styl index 5fa1fe594..792de6334 100644 --- a/src/elements/Rating.styl +++ b/src/elements/Rating.styl @@ -8,7 +8,7 @@ .vocab.rating // Color palette - --rating-primary $color-tone-black + --rating-primary $color-black &.inverted --rating-primary $color-tone-white diff --git a/src/elements/SelectField.styl b/src/elements/SelectField.styl index 48edee8e4..71eddfabb 100644 --- a/src/elements/SelectField.styl +++ b/src/elements/SelectField.styl @@ -21,7 +21,7 @@ --select-field-secondary $color-tone-white &.inverted - --select-field-secondary $color-tone-black + --select-field-secondary $color-black --select-field-overlay $color-overlay-white-low diff --git a/src/elements/Shield.styl b/src/elements/Shield.styl index b2824177c..edf5ca335 100644 --- a/src/elements/Shield.styl +++ b/src/elements/Shield.styl @@ -14,7 +14,7 @@ &.inverted --shield-primary $color-tone-grey-light --shield-secondary $color-tone-near-white - --shield-tertiary $color-tone-black + --shield-tertiary $color-black brands('--shield-primary') indications('--shield-primary', 9) diff --git a/src/elements/Statistic.styl b/src/elements/Statistic.styl index fb20b4070..b644ee883 100644 --- a/src/elements/Statistic.styl +++ b/src/elements/Statistic.styl @@ -6,7 +6,7 @@ .vocab.statistic // Color palette - --statistic-primary $color-tone-black + --statistic-primary $color-black &.inverted --statistic-primary $color-tone-white diff --git a/src/elements/SwitchField.styl b/src/elements/SwitchField.styl index 53fc133ff..0863e06e3 100644 --- a/src/elements/SwitchField.styl +++ b/src/elements/SwitchField.styl @@ -8,7 +8,7 @@ .vocab.switch-field // Color palette - --switch-field-primary $color-tone-black + --switch-field-primary $color-black &.inverted --switch-field-primary $color-tone-white @@ -36,7 +36,7 @@ --switch-field-tertiary $color-tone-white &.inverted - --switch-field-tertiary $color-tone-black + --switch-field-tertiary $color-black // Color From 619b8a6834f98af8943c18416a0c9c31925a99c0 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 10:20:21 -0300 Subject: [PATCH 13/31] replace layouts color-tone-black with color-black --- src/layouts/Section.styl | 4 ++-- src/layouts/Tabbed.styl | 4 ++-- src/layouts/Table.styl | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/layouts/Section.styl b/src/layouts/Section.styl index 57195788e..cc6b96d84 100644 --- a/src/layouts/Section.styl +++ b/src/layouts/Section.styl @@ -16,11 +16,11 @@ --section-secondary $color-tone-white &.inverted - --section-secondary $color-tone-black + --section-secondary $color-black indications('--section-secondary', 1) - --section-tertiary $color-tone-black + --section-tertiary $color-black &.inverted --section-tertiary $color-tone-white diff --git a/src/layouts/Tabbed.styl b/src/layouts/Tabbed.styl index 64b0042a6..604063bb1 100644 --- a/src/layouts/Tabbed.styl +++ b/src/layouts/Tabbed.styl @@ -19,9 +19,9 @@ --tabbed-secondary $color-tone-white &.inverted - --tabbed-secondary $color-tone-black + --tabbed-secondary $color-black - --tabbed-tertiary $color-tone-black + --tabbed-tertiary $color-black &.inverted --tabbed-tertiary $color-tone-white diff --git a/src/layouts/Table.styl b/src/layouts/Table.styl index c16a6e4f9..84a64d252 100644 --- a/src/layouts/Table.styl +++ b/src/layouts/Table.styl @@ -6,7 +6,7 @@ .vocab.table // Color palette - --table-primary $color-tone-black + --table-primary $color-black &.inverted --table-primary $color-tone-white @@ -16,9 +16,9 @@ --table-secondary $color-tone-white &.inverted - --table-secondary $color-tone-black + --table-secondary $color-black - --table-tertiary $color-tone-black + --table-tertiary $color-black &.inverted --table-tertiary $color-tone-white From f7757cd3e2e272dec4d5cbfd2c2b58a2944fcfe4 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 10:21:29 -0300 Subject: [PATCH 14/31] replace patterns color-tone-black with color-black --- src/patterns/Card.styl | 2 +- src/patterns/Navigation.styl | 2 +- src/patterns/Trail.styl | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/patterns/Card.styl b/src/patterns/Card.styl index 920130166..8f1acdb07 100644 --- a/src/patterns/Card.styl +++ b/src/patterns/Card.styl @@ -3,7 +3,7 @@ .vocab.card // Color palette - --card-primary $color-tone-black + --card-primary $color-black &.inverted --card-primary $color-tone-white diff --git a/src/patterns/Navigation.styl b/src/patterns/Navigation.styl index e3c83626e..297a2926f 100644 --- a/src/patterns/Navigation.styl +++ b/src/patterns/Navigation.styl @@ -7,7 +7,7 @@ .vocab.navigation // Color palette - --navigation-primary $color-tone-black + --navigation-primary $color-black &.inverted --navigation-primary $color-tone-white diff --git a/src/patterns/Trail.styl b/src/patterns/Trail.styl index 9adfeda87..9bd7ca745 100644 --- a/src/patterns/Trail.styl +++ b/src/patterns/Trail.styl @@ -7,7 +7,7 @@ .vocab.trail // Color palette - --trail-primary $color-tone-black + --trail-primary $color-black &.inverted --trail-primary $color-tone-white @@ -19,7 +19,7 @@ &.inverted --trail-secondary $color-tone-grey-dark - --trail-tertiary $color-tone-black + --trail-tertiary $color-black &.inverted --trail-tertiary $color-tone-white From fcd3a048715bc508f8708df539f82abd1620065e Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 10:26:43 -0300 Subject: [PATCH 15/31] replace color-tone-white with color-white --- src/elements/ChoiceField.styl | 4 ++-- src/elements/GitHubCorner.styl | 4 ++-- src/elements/ImageView.styl | 2 +- src/elements/InputField.styl | 6 +++--- src/elements/ProgressBar.styl | 2 +- src/elements/Rating.styl | 2 +- src/elements/SelectField.styl | 2 +- src/elements/Shield.styl | 2 +- src/elements/Statistic.styl | 2 +- src/elements/SwitchField.styl | 4 ++-- src/layouts/Section.styl | 4 ++-- src/layouts/Tabbed.styl | 4 ++-- src/layouts/Table.styl | 6 +++--- src/patterns/Card.styl | 2 +- src/patterns/Footer.styl | 2 +- src/patterns/Header.styl | 4 ++-- src/patterns/Navigation.styl | 2 +- src/patterns/Trail.styl | 4 ++-- src/templates/Index/Index.styl | 2 +- 19 files changed, 30 insertions(+), 30 deletions(-) diff --git a/src/elements/ChoiceField.styl b/src/elements/ChoiceField.styl index 7a38c8943..d38a5d256 100644 --- a/src/elements/ChoiceField.styl +++ b/src/elements/ChoiceField.styl @@ -12,13 +12,13 @@ --choice-field-primary $color-black &.inverted - --choice-field-primary $color-tone-white + --choice-field-primary $color-white brands('--choice-field-primary') indications('--choice-field-primary', 9) tones('--choice-field-primary') - --choice-field-secondary $color-tone-white + --choice-field-secondary $color-white &.inverted --choice-field-secondary $color-black diff --git a/src/elements/GitHubCorner.styl b/src/elements/GitHubCorner.styl index d1d2f50e7..101de0a16 100644 --- a/src/elements/GitHubCorner.styl +++ b/src/elements/GitHubCorner.styl @@ -10,11 +10,11 @@ --github-corner-primary $color-black &.inverted - --github-corner-primary $color-tone-white + --github-corner-primary $color-white brands('--github-corner-primary') - --github-corner-secondary $color-tone-white + --github-corner-secondary $color-white &.inverted --github-corner-secondary $color-black diff --git a/src/elements/ImageView.styl b/src/elements/ImageView.styl index 5c3ab9e6c..2e60d2b17 100644 --- a/src/elements/ImageView.styl +++ b/src/elements/ImageView.styl @@ -6,7 +6,7 @@ .vocab.image-view // Color palette - --image-view-primary $color-tone-white + --image-view-primary $color-white --image-view-overlay $color-overlay-black-high // Color diff --git a/src/elements/InputField.styl b/src/elements/InputField.styl index 1ad896aec..1cbbf70af 100644 --- a/src/elements/InputField.styl +++ b/src/elements/InputField.styl @@ -12,13 +12,13 @@ --input-field-primary $color-black &.inverted - --input-field-primary $color-tone-white + --input-field-primary $color-white brands('--input-field-primary') indications('--input-field-primary', 9) tones('--input-field-primary') - --input-field-secondary $color-tone-white + --input-field-secondary $color-white &.inverted --input-field-secondary $color-black @@ -26,7 +26,7 @@ --input-field-tertiary $color-black &.inverted - --input-field-tertiary $color-tone-white + --input-field-tertiary $color-white &.infused --input-field-tertiary var(--input-field-primary) diff --git a/src/elements/ProgressBar.styl b/src/elements/ProgressBar.styl index 95d807cc1..afdac04ed 100644 --- a/src/elements/ProgressBar.styl +++ b/src/elements/ProgressBar.styl @@ -10,7 +10,7 @@ --progress-bar-primary $color-black &.inverted - --progress-bar-primary $color-tone-white + --progress-bar-primary $color-white brands('--progress-bar-primary') indications('--progress-bar-primary', 9) diff --git a/src/elements/Rating.styl b/src/elements/Rating.styl index 792de6334..b8b503ffe 100644 --- a/src/elements/Rating.styl +++ b/src/elements/Rating.styl @@ -11,7 +11,7 @@ --rating-primary $color-black &.inverted - --rating-primary $color-tone-white + --rating-primary $color-white brands('--rating-primary') indications('--rating-primary', 9) diff --git a/src/elements/SelectField.styl b/src/elements/SelectField.styl index 71eddfabb..155d9d654 100644 --- a/src/elements/SelectField.styl +++ b/src/elements/SelectField.styl @@ -18,7 +18,7 @@ tones('--select-field-primary') indications('--select-field-primary', 9) - --select-field-secondary $color-tone-white + --select-field-secondary $color-white &.inverted --select-field-secondary $color-black diff --git a/src/elements/Shield.styl b/src/elements/Shield.styl index edf5ca335..c80a4ddc8 100644 --- a/src/elements/Shield.styl +++ b/src/elements/Shield.styl @@ -9,7 +9,7 @@ --shield-primary $color-tone-grey-dark --shield-secondary $color-tone-near-black - --shield-tertiary $color-tone-white + --shield-tertiary $color-white &.inverted --shield-primary $color-tone-grey-light diff --git a/src/elements/Statistic.styl b/src/elements/Statistic.styl index b644ee883..44c1ef2b8 100644 --- a/src/elements/Statistic.styl +++ b/src/elements/Statistic.styl @@ -9,7 +9,7 @@ --statistic-primary $color-black &.inverted - --statistic-primary $color-tone-white + --statistic-primary $color-white brands('--statistic-primary') indications('--statistic-primary', 9) diff --git a/src/elements/SwitchField.styl b/src/elements/SwitchField.styl index 0863e06e3..e7a4dc492 100644 --- a/src/elements/SwitchField.styl +++ b/src/elements/SwitchField.styl @@ -11,7 +11,7 @@ --switch-field-primary $color-black &.inverted - --switch-field-primary $color-tone-white + --switch-field-primary $color-white brands('--switch-field-primary') indications('--switch-field-primary', 9) @@ -33,7 +33,7 @@ &.anticonditional-indicating.anticonditional-indicating --switch-field-secondary $color-positive-9 - --switch-field-tertiary $color-tone-white + --switch-field-tertiary $color-white &.inverted --switch-field-tertiary $color-black diff --git a/src/layouts/Section.styl b/src/layouts/Section.styl index cc6b96d84..a091166cd 100644 --- a/src/layouts/Section.styl +++ b/src/layouts/Section.styl @@ -13,7 +13,7 @@ brands('--section-primary') indications('--section-primary', 9) - --section-secondary $color-tone-white + --section-secondary $color-white &.inverted --section-secondary $color-black @@ -23,7 +23,7 @@ --section-tertiary $color-black &.inverted - --section-tertiary $color-tone-white + --section-tertiary $color-white indications('--section-tertiary', 9) diff --git a/src/layouts/Tabbed.styl b/src/layouts/Tabbed.styl index 604063bb1..553a572d7 100644 --- a/src/layouts/Tabbed.styl +++ b/src/layouts/Tabbed.styl @@ -16,7 +16,7 @@ brands('--tabbed-primary') indications('--tabbed-primary') - --tabbed-secondary $color-tone-white + --tabbed-secondary $color-white &.inverted --tabbed-secondary $color-black @@ -24,7 +24,7 @@ --tabbed-tertiary $color-black &.inverted - --tabbed-tertiary $color-tone-white + --tabbed-tertiary $color-white --tabbed-overlay $color-overlay-black-low diff --git a/src/layouts/Table.styl b/src/layouts/Table.styl index 84a64d252..eccc796f9 100644 --- a/src/layouts/Table.styl +++ b/src/layouts/Table.styl @@ -9,11 +9,11 @@ --table-primary $color-black &.inverted - --table-primary $color-tone-white + --table-primary $color-white brands('--table-primary') - --table-secondary $color-tone-white + --table-secondary $color-white &.inverted --table-secondary $color-black @@ -21,7 +21,7 @@ --table-tertiary $color-black &.inverted - --table-tertiary $color-tone-white + --table-tertiary $color-white --table-quaternary $color-tone-grey-lighter diff --git a/src/patterns/Card.styl b/src/patterns/Card.styl index 8f1acdb07..39bfd5e6c 100644 --- a/src/patterns/Card.styl +++ b/src/patterns/Card.styl @@ -6,7 +6,7 @@ --card-primary $color-black &.inverted - --card-primary $color-tone-white + --card-primary $color-white --card-secondary $color-tone-grey-dark diff --git a/src/patterns/Footer.styl b/src/patterns/Footer.styl index 4080c7c36..e18c44bf2 100644 --- a/src/patterns/Footer.styl +++ b/src/patterns/Footer.styl @@ -24,7 +24,7 @@ text-decoration none &:hover - color $color-tone-white + color $color-white h6 color var(--footer-highlighted-text-color) diff --git a/src/patterns/Header.styl b/src/patterns/Header.styl index 4ad8d3a76..abdc36f35 100644 --- a/src/patterns/Header.styl +++ b/src/patterns/Header.styl @@ -12,7 +12,7 @@ brands('--header-primary') - --header-secondary $color-tone-white + --header-secondary $color-white // Color @@ -92,7 +92,7 @@ display none +phone-only() - --button-border-color $color-tone-white + --button-border-color $color-white -webkit-tap-highlight-color rgba(0, 0, 0, 0) diff --git a/src/patterns/Navigation.styl b/src/patterns/Navigation.styl index 297a2926f..a5107af1d 100644 --- a/src/patterns/Navigation.styl +++ b/src/patterns/Navigation.styl @@ -10,7 +10,7 @@ --navigation-primary $color-black &.inverted - --navigation-primary $color-tone-white + --navigation-primary $color-white brands('--navigation-primary') diff --git a/src/patterns/Trail.styl b/src/patterns/Trail.styl index 9bd7ca745..e694080a4 100644 --- a/src/patterns/Trail.styl +++ b/src/patterns/Trail.styl @@ -10,7 +10,7 @@ --trail-primary $color-black &.inverted - --trail-primary $color-tone-white + --trail-primary $color-white brands('--trail-primary') @@ -22,7 +22,7 @@ --trail-tertiary $color-black &.inverted - --trail-tertiary $color-tone-white + --trail-tertiary $color-white // Children diff --git a/src/templates/Index/Index.styl b/src/templates/Index/Index.styl index 5d6f9e1ca..2dc578488 100644 --- a/src/templates/Index/Index.styl +++ b/src/templates/Index/Index.styl @@ -6,7 +6,7 @@ page() main - background radial-gradient($color-tone-white, $color-tone-near-white) + background radial-gradient($color-white, $color-tone-near-white) min-height 100vh From db67f0cb79723c991046c58fa1b7a6f95967d794 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 10:36:25 -0300 Subject: [PATCH 16/31] replace color-tone-grey-lighter with color-light-gray --- src/elements/ProgressBar.styl | 2 +- src/layouts/Section.styl | 2 +- src/layouts/Table.styl | 2 +- src/patterns/Footer.styl | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/elements/ProgressBar.styl b/src/elements/ProgressBar.styl index afdac04ed..66207b3d0 100644 --- a/src/elements/ProgressBar.styl +++ b/src/elements/ProgressBar.styl @@ -15,7 +15,7 @@ brands('--progress-bar-primary') indications('--progress-bar-primary', 9) - --progress-bar-secondary $color-tone-grey-lighter + --progress-bar-secondary $color-light-gray &.inverted --progress-bar-secondary $color-tone-grey-darker diff --git a/src/layouts/Section.styl b/src/layouts/Section.styl index a091166cd..c1344c693 100644 --- a/src/layouts/Section.styl +++ b/src/layouts/Section.styl @@ -27,7 +27,7 @@ indications('--section-tertiary', 9) - --section-shadow $color-tone-grey-lighter + --section-shadow $color-light-gray &.inverted --section-shadow $color-tone-grey-darker diff --git a/src/layouts/Table.styl b/src/layouts/Table.styl index eccc796f9..1f48f9997 100644 --- a/src/layouts/Table.styl +++ b/src/layouts/Table.styl @@ -23,7 +23,7 @@ &.inverted --table-tertiary $color-white - --table-quaternary $color-tone-grey-lighter + --table-quaternary $color-light-gray &.inverted --table-quaternary $color-tone-grey-darker diff --git a/src/patterns/Footer.styl b/src/patterns/Footer.styl index e18c44bf2..7abaf7500 100644 --- a/src/patterns/Footer.styl +++ b/src/patterns/Footer.styl @@ -7,7 +7,7 @@ --footer-background-color $color-tone-grey-darker --footer-text-color $color-tone-grey-light - --footer-highlighted-text-color $color-tone-grey-lighter + --footer-highlighted-text-color $color-light-gray // Rules From 84e5e9f1eef18a24a68e6c5b892df7e1b537e758 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 10:42:49 -0300 Subject: [PATCH 17/31] replace color-tone-grey-darker with color-dark-slate-gray --- src/elements/ProgressBar.styl | 2 +- src/layouts/Section.styl | 2 +- src/layouts/Table.styl | 2 +- src/patterns/Footer.styl | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/elements/ProgressBar.styl b/src/elements/ProgressBar.styl index 66207b3d0..87d079c29 100644 --- a/src/elements/ProgressBar.styl +++ b/src/elements/ProgressBar.styl @@ -18,7 +18,7 @@ --progress-bar-secondary $color-light-gray &.inverted - --progress-bar-secondary $color-tone-grey-darker + --progress-bar-secondary $color-dark-slate-gray --progress-bar-tertiary var(--progress-bar-primary) diff --git a/src/layouts/Section.styl b/src/layouts/Section.styl index c1344c693..e93eae60a 100644 --- a/src/layouts/Section.styl +++ b/src/layouts/Section.styl @@ -30,7 +30,7 @@ --section-shadow $color-light-gray &.inverted - --section-shadow $color-tone-grey-darker + --section-shadow $color-dark-slate-gray // Color diff --git a/src/layouts/Table.styl b/src/layouts/Table.styl index 1f48f9997..a655a08b3 100644 --- a/src/layouts/Table.styl +++ b/src/layouts/Table.styl @@ -26,7 +26,7 @@ --table-quaternary $color-light-gray &.inverted - --table-quaternary $color-tone-grey-darker + --table-quaternary $color-dark-slate-gray --table-quinary $color-tone-grey-dark diff --git a/src/patterns/Footer.styl b/src/patterns/Footer.styl index 7abaf7500..ae28ae1aa 100644 --- a/src/patterns/Footer.styl +++ b/src/patterns/Footer.styl @@ -5,7 +5,7 @@ .vocab.footer // Color - --footer-background-color $color-tone-grey-darker + --footer-background-color $color-dark-slate-gray --footer-text-color $color-tone-grey-light --footer-highlighted-text-color $color-light-gray From 5a56795a6e59475852c642540d54fc4f3d64d55e Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 10:47:48 -0300 Subject: [PATCH 18/31] replace color-tone-grey-dark with closest color-light-slate-gray --- src/elements/Rating.styl | 4 ++-- src/elements/SelectField.styl | 2 +- src/elements/Shield.styl | 2 +- src/elements/Statistic.styl | 2 +- src/elements/SwitchField.styl | 2 +- src/layouts/Section.styl | 2 +- src/layouts/Tabbed.styl | 2 +- src/layouts/Table.styl | 2 +- src/patterns/Card.styl | 2 +- src/patterns/Quote.styl | 2 +- src/patterns/Trail.styl | 2 +- 11 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/elements/Rating.styl b/src/elements/Rating.styl index b8b503ffe..1a63a9afd 100644 --- a/src/elements/Rating.styl +++ b/src/elements/Rating.styl @@ -16,7 +16,7 @@ brands('--rating-primary') indications('--rating-primary', 9) - --rating-secondary $color-tone-grey-dark + --rating-secondary $color-light-slate-gray &.inverted --rating-secondary $color-tone-grey-light @@ -24,7 +24,7 @@ --rating-tertiary $color-tone-grey-light &.inverted - --rating-tertiary $color-tone-grey-dark + --rating-tertiary $color-light-slate-gray // Color diff --git a/src/elements/SelectField.styl b/src/elements/SelectField.styl index 155d9d654..6b419411c 100644 --- a/src/elements/SelectField.styl +++ b/src/elements/SelectField.styl @@ -9,7 +9,7 @@ .vocab.select-field // Color palette - --select-field-primary $color-tone-grey-dark + --select-field-primary $color-light-slate-gray &.inverted --select-field-primary $color-tone-grey-light diff --git a/src/elements/Shield.styl b/src/elements/Shield.styl index c80a4ddc8..ee87c10bd 100644 --- a/src/elements/Shield.styl +++ b/src/elements/Shield.styl @@ -7,7 +7,7 @@ .vocab.shield // Color palette - --shield-primary $color-tone-grey-dark + --shield-primary $color-light-slate-gray --shield-secondary $color-tone-near-black --shield-tertiary $color-white diff --git a/src/elements/Statistic.styl b/src/elements/Statistic.styl index 44c1ef2b8..4bdef4c60 100644 --- a/src/elements/Statistic.styl +++ b/src/elements/Statistic.styl @@ -14,7 +14,7 @@ brands('--statistic-primary') indications('--statistic-primary', 9) - --statistic-secondary $color-tone-grey-dark + --statistic-secondary $color-light-slate-gray &.inverted --statistic-secondary $color-tone-grey-light diff --git a/src/elements/SwitchField.styl b/src/elements/SwitchField.styl index e7a4dc492..b6945699b 100644 --- a/src/elements/SwitchField.styl +++ b/src/elements/SwitchField.styl @@ -22,7 +22,7 @@ &.anticonditional-indicating.anticonditional-indicating --switch-field-primary $color-negative-9 - --switch-field-secondary $color-tone-grey-dark + --switch-field-secondary $color-light-slate-gray &.inverted --switch-field-secondary $color-tone-grey-light diff --git a/src/layouts/Section.styl b/src/layouts/Section.styl index e93eae60a..f22e67865 100644 --- a/src/layouts/Section.styl +++ b/src/layouts/Section.styl @@ -8,7 +8,7 @@ --section-primary $color-tone-grey-light &.inverted - --section-primary $color-tone-grey-dark + --section-primary $color-light-slate-gray brands('--section-primary') indications('--section-primary', 9) diff --git a/src/layouts/Tabbed.styl b/src/layouts/Tabbed.styl index 553a572d7..a256109e2 100644 --- a/src/layouts/Tabbed.styl +++ b/src/layouts/Tabbed.styl @@ -11,7 +11,7 @@ --tabbed-primary $color-tone-grey-light &.inverted - --tabbed-primary $color-tone-grey-dark + --tabbed-primary $color-light-slate-gray brands('--tabbed-primary') indications('--tabbed-primary') diff --git a/src/layouts/Table.styl b/src/layouts/Table.styl index a655a08b3..559538136 100644 --- a/src/layouts/Table.styl +++ b/src/layouts/Table.styl @@ -28,7 +28,7 @@ &.inverted --table-quaternary $color-dark-slate-gray - --table-quinary $color-tone-grey-dark + --table-quinary $color-light-slate-gray &.inverted --table-quinary $color-tone-grey-light diff --git a/src/patterns/Card.styl b/src/patterns/Card.styl index 39bfd5e6c..740d53a8f 100644 --- a/src/patterns/Card.styl +++ b/src/patterns/Card.styl @@ -8,7 +8,7 @@ &.inverted --card-primary $color-white - --card-secondary $color-tone-grey-dark + --card-secondary $color-light-slate-gray &.inverted --card-secondary $color-tone-grey-light diff --git a/src/patterns/Quote.styl b/src/patterns/Quote.styl index b9b287f67..163eb0dc8 100644 --- a/src/patterns/Quote.styl +++ b/src/patterns/Quote.styl @@ -6,7 +6,7 @@ .vocab.quote // Color palette - --quote-primary $color-tone-grey-dark + --quote-primary $color-light-slate-gray &.inverted --quote-primary $color-tone-grey-light diff --git a/src/patterns/Trail.styl b/src/patterns/Trail.styl index e694080a4..c162581a4 100644 --- a/src/patterns/Trail.styl +++ b/src/patterns/Trail.styl @@ -17,7 +17,7 @@ --trail-secondary $color-tone-grey-light &.inverted - --trail-secondary $color-tone-grey-dark + --trail-secondary $color-light-slate-gray --trail-tertiary $color-black From 7b3a38587dcc2d22950ff35e72f437556e486aa9 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 10:50:29 -0300 Subject: [PATCH 19/31] replace color-tone-grey-light with color-gray --- src/elements/Rating.styl | 4 ++-- src/elements/SelectField.styl | 2 +- src/elements/Shield.styl | 2 +- src/elements/Statistic.styl | 2 +- src/elements/SwitchField.styl | 2 +- src/layouts/Section.styl | 2 +- src/layouts/Tabbed.styl | 2 +- src/layouts/Table.styl | 2 +- src/patterns/Card.styl | 2 +- src/patterns/Footer.styl | 2 +- src/patterns/Quote.styl | 2 +- src/patterns/Trail.styl | 2 +- 12 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/elements/Rating.styl b/src/elements/Rating.styl index 1a63a9afd..60299d09e 100644 --- a/src/elements/Rating.styl +++ b/src/elements/Rating.styl @@ -19,9 +19,9 @@ --rating-secondary $color-light-slate-gray &.inverted - --rating-secondary $color-tone-grey-light + --rating-secondary $color-gray - --rating-tertiary $color-tone-grey-light + --rating-tertiary $color-gray &.inverted --rating-tertiary $color-light-slate-gray diff --git a/src/elements/SelectField.styl b/src/elements/SelectField.styl index 6b419411c..7518b0727 100644 --- a/src/elements/SelectField.styl +++ b/src/elements/SelectField.styl @@ -12,7 +12,7 @@ --select-field-primary $color-light-slate-gray &.inverted - --select-field-primary $color-tone-grey-light + --select-field-primary $color-gray brands('--select-field-primary') tones('--select-field-primary') diff --git a/src/elements/Shield.styl b/src/elements/Shield.styl index ee87c10bd..5657f8763 100644 --- a/src/elements/Shield.styl +++ b/src/elements/Shield.styl @@ -12,7 +12,7 @@ --shield-tertiary $color-white &.inverted - --shield-primary $color-tone-grey-light + --shield-primary $color-gray --shield-secondary $color-tone-near-white --shield-tertiary $color-black diff --git a/src/elements/Statistic.styl b/src/elements/Statistic.styl index 4bdef4c60..18d1c3c6f 100644 --- a/src/elements/Statistic.styl +++ b/src/elements/Statistic.styl @@ -17,7 +17,7 @@ --statistic-secondary $color-light-slate-gray &.inverted - --statistic-secondary $color-tone-grey-light + --statistic-secondary $color-gray // Color diff --git a/src/elements/SwitchField.styl b/src/elements/SwitchField.styl index b6945699b..d389526cd 100644 --- a/src/elements/SwitchField.styl +++ b/src/elements/SwitchField.styl @@ -25,7 +25,7 @@ --switch-field-secondary $color-light-slate-gray &.inverted - --switch-field-secondary $color-tone-grey-light + --switch-field-secondary $color-gray &.conditional-indicating.conditional-indicating --switch-field-secondary $color-negative-9 diff --git a/src/layouts/Section.styl b/src/layouts/Section.styl index f22e67865..638a258db 100644 --- a/src/layouts/Section.styl +++ b/src/layouts/Section.styl @@ -5,7 +5,7 @@ .vocab.section // Color palette - --section-primary $color-tone-grey-light + --section-primary $color-gray &.inverted --section-primary $color-light-slate-gray diff --git a/src/layouts/Tabbed.styl b/src/layouts/Tabbed.styl index a256109e2..d8df28476 100644 --- a/src/layouts/Tabbed.styl +++ b/src/layouts/Tabbed.styl @@ -8,7 +8,7 @@ .vocab.tabbed // Color palette - --tabbed-primary $color-tone-grey-light + --tabbed-primary $color-gray &.inverted --tabbed-primary $color-light-slate-gray diff --git a/src/layouts/Table.styl b/src/layouts/Table.styl index 559538136..f7162c3fe 100644 --- a/src/layouts/Table.styl +++ b/src/layouts/Table.styl @@ -31,7 +31,7 @@ --table-quinary $color-light-slate-gray &.inverted - --table-quinary $color-tone-grey-light + --table-quinary $color-gray --table-overlay-low $color-white-low --table-overlay-high $color-white-high diff --git a/src/patterns/Card.styl b/src/patterns/Card.styl index 740d53a8f..571fbda41 100644 --- a/src/patterns/Card.styl +++ b/src/patterns/Card.styl @@ -11,7 +11,7 @@ --card-secondary $color-light-slate-gray &.inverted - --card-secondary $color-tone-grey-light + --card-secondary $color-gray --card-tertiary $color-tone-near-white + 50% diff --git a/src/patterns/Footer.styl b/src/patterns/Footer.styl index ae28ae1aa..34148b88c 100644 --- a/src/patterns/Footer.styl +++ b/src/patterns/Footer.styl @@ -6,7 +6,7 @@ // Color --footer-background-color $color-dark-slate-gray - --footer-text-color $color-tone-grey-light + --footer-text-color $color-gray --footer-highlighted-text-color $color-light-gray // Rules diff --git a/src/patterns/Quote.styl b/src/patterns/Quote.styl index 163eb0dc8..d7c3f729f 100644 --- a/src/patterns/Quote.styl +++ b/src/patterns/Quote.styl @@ -9,7 +9,7 @@ --quote-primary $color-light-slate-gray &.inverted - --quote-primary $color-tone-grey-light + --quote-primary $color-gray brands('--quote-primary') colors('--quote-primary') diff --git a/src/patterns/Trail.styl b/src/patterns/Trail.styl index c162581a4..dcb1dba67 100644 --- a/src/patterns/Trail.styl +++ b/src/patterns/Trail.styl @@ -14,7 +14,7 @@ brands('--trail-primary') - --trail-secondary $color-tone-grey-light + --trail-secondary $color-gray &.inverted --trail-secondary $color-light-slate-gray From a6e500f8730fe2d55f502e69d6e3f1049c5a0b07 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 10:52:12 -0300 Subject: [PATCH 20/31] replace color-tone-near-black with color-dark-slate-gray --- src/elements/Shield.styl | 2 +- src/patterns/Card.styl | 2 +- src/patterns/Header.styl | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/elements/Shield.styl b/src/elements/Shield.styl index 5657f8763..a100a8659 100644 --- a/src/elements/Shield.styl +++ b/src/elements/Shield.styl @@ -8,7 +8,7 @@ // Color palette --shield-primary $color-light-slate-gray - --shield-secondary $color-tone-near-black + --shield-secondary $color-dark-slate-gray --shield-tertiary $color-white &.inverted diff --git a/src/patterns/Card.styl b/src/patterns/Card.styl index 571fbda41..9e195c1bc 100644 --- a/src/patterns/Card.styl +++ b/src/patterns/Card.styl @@ -16,7 +16,7 @@ --card-tertiary $color-tone-near-white + 50% &.inverted - --card-tertiary $color-tone-near-black - 50% + --card-tertiary $color-dark-slate-gray - 50% // Color diff --git a/src/patterns/Header.styl b/src/patterns/Header.styl index abdc36f35..da4712259 100644 --- a/src/patterns/Header.styl +++ b/src/patterns/Header.styl @@ -8,7 +8,7 @@ .vocab.header // Color palette - --header-primary $color-tone-near-black + --header-primary $color-dark-slate-gray brands('--header-primary') From d8e4542c4a67b4048c374a3b48ee39192d6d7779 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 10:53:13 -0300 Subject: [PATCH 21/31] replace color-tone-near-white with color-lighter-gray --- src/elements/Shield.styl | 2 +- src/patterns/Card.styl | 2 +- src/templates/Index/Index.styl | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/elements/Shield.styl b/src/elements/Shield.styl index a100a8659..3c0d844b7 100644 --- a/src/elements/Shield.styl +++ b/src/elements/Shield.styl @@ -13,7 +13,7 @@ &.inverted --shield-primary $color-gray - --shield-secondary $color-tone-near-white + --shield-secondary $color-lighter-gray --shield-tertiary $color-black brands('--shield-primary') diff --git a/src/patterns/Card.styl b/src/patterns/Card.styl index 9e195c1bc..08c058c06 100644 --- a/src/patterns/Card.styl +++ b/src/patterns/Card.styl @@ -13,7 +13,7 @@ &.inverted --card-secondary $color-gray - --card-tertiary $color-tone-near-white + 50% + --card-tertiary $color-lighter-gray + 50% &.inverted --card-tertiary $color-dark-slate-gray - 50% diff --git a/src/templates/Index/Index.styl b/src/templates/Index/Index.styl index 2dc578488..e4477ecd5 100644 --- a/src/templates/Index/Index.styl +++ b/src/templates/Index/Index.styl @@ -6,7 +6,7 @@ page() main - background radial-gradient($color-white, $color-tone-near-white) + background radial-gradient($color-white, $color-lighter-gray) min-height 100vh From f5c407d7a8709ee0fe1b10fba46a90e4d7cd88e9 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 11:05:13 -0300 Subject: [PATCH 22/31] update color error --- src/tokens/color.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tokens/color.yml b/src/tokens/color.yml index f9a9c5908..437b3eab9 100644 --- a/src/tokens/color.yml +++ b/src/tokens/color.yml @@ -50,7 +50,7 @@ props: category: color-group-gray-scale color_error: - value: '#f03e3e' + value: '#FFC9C9' category: color-group-context color_warning: value: '#f59f00' From f8bff412127f7e55e57467beadb86251f0438c35 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 11:05:28 -0300 Subject: [PATCH 23/31] replace color-negative with color-error --- src/elements/InputField.styl | 3 +-- src/elements/ProgressBar.styl | 2 +- src/elements/SwitchField.styl | 4 ++-- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/elements/InputField.styl b/src/elements/InputField.styl index 1cbbf70af..00b98be28 100644 --- a/src/elements/InputField.styl +++ b/src/elements/InputField.styl @@ -159,9 +159,8 @@ // States &:invalid - color $color-negative-9 - background-color $color-negative-2 + background-color $color-error box-shadow none diff --git a/src/elements/ProgressBar.styl b/src/elements/ProgressBar.styl index 87d079c29..455019d71 100644 --- a/src/elements/ProgressBar.styl +++ b/src/elements/ProgressBar.styl @@ -29,7 +29,7 @@ --progress-bar-tertiary $color-context-probably-dark &.negative-indicating.negative-indicating - --progress-bar-tertiary $color-negative-9 + --progress-bar-tertiary $color-error // Color diff --git a/src/elements/SwitchField.styl b/src/elements/SwitchField.styl index d389526cd..9a0fbba9e 100644 --- a/src/elements/SwitchField.styl +++ b/src/elements/SwitchField.styl @@ -20,7 +20,7 @@ --switch-field-primary $color-positive-9 &.anticonditional-indicating.anticonditional-indicating - --switch-field-primary $color-negative-9 + --switch-field-primary $color-error --switch-field-secondary $color-light-slate-gray @@ -28,7 +28,7 @@ --switch-field-secondary $color-gray &.conditional-indicating.conditional-indicating - --switch-field-secondary $color-negative-9 + --switch-field-secondary $color-error &.anticonditional-indicating.anticonditional-indicating --switch-field-secondary $color-positive-9 From d8236e1e9d0a794546836ee0fe2fcd39ea183f5e Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 11:07:13 -0300 Subject: [PATCH 24/31] update color success --- src/tokens/color.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tokens/color.yml b/src/tokens/color.yml index 437b3eab9..62863173c 100644 --- a/src/tokens/color.yml +++ b/src/tokens/color.yml @@ -56,7 +56,7 @@ props: value: '#f59f00' category: color-group-context color_success: - value: '#74b816' + value: '#E0F2BF' category: color-group-context global: From 86b1add8840eeb62dba504ddcffc1f7fc7a72074 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 11:07:26 -0300 Subject: [PATCH 25/31] replace color-positive with color-success --- src/elements/SwitchField.styl | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/elements/SwitchField.styl b/src/elements/SwitchField.styl index 9a0fbba9e..1d91dfa7f 100644 --- a/src/elements/SwitchField.styl +++ b/src/elements/SwitchField.styl @@ -17,7 +17,7 @@ indications('--switch-field-primary', 9) &.conditional-indicating.conditional-indicating - --switch-field-primary $color-positive-9 + --switch-field-primary $color-success &.anticonditional-indicating.anticonditional-indicating --switch-field-primary $color-error @@ -31,7 +31,7 @@ --switch-field-secondary $color-error &.anticonditional-indicating.anticonditional-indicating - --switch-field-secondary $color-positive-9 + --switch-field-secondary $color-success --switch-field-tertiary $color-white From 7a11e0ad02c05317936cbbbf9b1b1dee7a6c06a8 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 11:20:32 -0300 Subject: [PATCH 26/31] remove color-overlays --- src/elements/ImageView.styl | 14 -------------- src/elements/InputField.styl | 13 ------------- src/elements/SelectField.styl | 12 ------------ src/layouts/Tabbed.styl | 5 ----- src/patterns/Header.styl | 7 ------- src/patterns/Navigation.styl | 5 ----- 6 files changed, 56 deletions(-) diff --git a/src/elements/ImageView.styl b/src/elements/ImageView.styl index 2e60d2b17..dee04cdf3 100644 --- a/src/elements/ImageView.styl +++ b/src/elements/ImageView.styl @@ -7,21 +7,11 @@ // Color palette --image-view-primary $color-white - --image-view-overlay $color-overlay-black-high // Color --image-view-text var(--image-view-primary) - --image-view-background-overlay-o2t linear-gradient( - var(--image-view-overlay), - transparent - ) - --image-view-background-overlay-t2o linear-gradient( - transparent, - var(--image-view-overlay) - ) - // Measurement palette &.small-sized @@ -100,13 +90,9 @@ &.top top 0 - background-image var(--image-view-background-overlay-o2t) - &.bottom bottom 0 - background-image var(--image-view-background-overlay-t2o) - // States &.hoverable diff --git a/src/elements/InputField.styl b/src/elements/InputField.styl index 00b98be28..ee20d3865 100644 --- a/src/elements/InputField.styl +++ b/src/elements/InputField.styl @@ -31,11 +31,6 @@ &.infused --input-field-tertiary var(--input-field-primary) - --input-field-overlay $color-overlay-white-low - - &.inverted - --input-field-overlay $color-overlay-black-low - // Color --input-field-background-color var(--input-field-secondary) @@ -44,10 +39,6 @@ --input-field-addons-background-color var(--input-field-primary) --input-field-addons-text-color var(--input-field-secondary) - --input-field-addons-background-overlay linear-gradient( - var(--input-field-overlay), - var(--input-field-overlay) - ) --input-field-border-color var(--input-field-primary) @@ -239,10 +230,6 @@ border-top-left-radius var(--input-field-border-radius) border-bottom-left-radius var(--input-field-border-radius) - &:focus-within - .addons - background-image var(--input-field-addons-background-overlay) - &.disabled opacity 0.2 diff --git a/src/elements/SelectField.styl b/src/elements/SelectField.styl index 7518b0727..b6b1064a5 100644 --- a/src/elements/SelectField.styl +++ b/src/elements/SelectField.styl @@ -23,20 +23,11 @@ &.inverted --select-field-secondary $color-black - --select-field-overlay $color-overlay-white-low - - &.inverted - --select-field-overlay $color-overlay-black-low - // Color --select-field-background-color var(--select-field-primary) --select-field-text-color var(--select-field-secondary) --select-field-border-color var(--select-field-primary) - --select-field-background-overlay linear-gradient( - var(--select-field-overlay), - var(--select-field-overlay) - ) &.slightly-simple, &.extremely-simple @@ -158,9 +149,6 @@ // States - &:hover - background-image var(--select-field-background-overlay) - &:focus-within background-image none diff --git a/src/layouts/Tabbed.styl b/src/layouts/Tabbed.styl index d8df28476..9b6b11ba9 100644 --- a/src/layouts/Tabbed.styl +++ b/src/layouts/Tabbed.styl @@ -26,11 +26,6 @@ &.inverted --tabbed-tertiary $color-white - --tabbed-overlay $color-overlay-black-low - - &.inverted - --tabbed-overlay $color-overlay-white-low - // Color --tabbed-text-color var(--tabbed-tertiary) diff --git a/src/patterns/Header.styl b/src/patterns/Header.styl index da4712259..a208789b3 100644 --- a/src/patterns/Header.styl +++ b/src/patterns/Header.styl @@ -24,13 +24,6 @@ color var(--header-text-color) background-color var(--header-background-color) - background-image linear-gradient( - 90deg, - $color-overlay-black-low, - transparent 15%, - transparent 85%, - $color-overlay-black-low - ) // Children diff --git a/src/patterns/Navigation.styl b/src/patterns/Navigation.styl index a5107af1d..5ab71c76a 100644 --- a/src/patterns/Navigation.styl +++ b/src/patterns/Navigation.styl @@ -14,11 +14,6 @@ brands('--navigation-primary') - --navigation-overlay $color-overlay-black-low - - &.inverted - --navigation-overlay $color-overlay-white-low - // Rules // Children From 5d7c14cce582f282f27087c9d9f21a6fa4020ec9 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 11:22:52 -0300 Subject: [PATCH 27/31] remove inexisting color-context --- src/elements/ProgressBar.styl | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/elements/ProgressBar.styl b/src/elements/ProgressBar.styl index 455019d71..ce19089ca 100644 --- a/src/elements/ProgressBar.styl +++ b/src/elements/ProgressBar.styl @@ -22,12 +22,6 @@ --progress-bar-tertiary var(--progress-bar-primary) - &.positive-indicating.positive-indicating - --progress-bar-tertiary $color-context-positive-dark - - &.probably-indicating.probably-indicating - --progress-bar-tertiary $color-context-probably-dark - &.negative-indicating.negative-indicating --progress-bar-tertiary $color-error From 98596c00c6e5f2cea7eedf70363c2c1e8a2b54ba Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 11:26:05 -0300 Subject: [PATCH 28/31] removed more overlays --- src/layouts/TabbedPane.styl | 8 -------- src/layouts/Table.styl | 17 ----------------- src/layouts/TableCell.styl | 2 -- src/patterns/NavigationLink.styl | 8 -------- 4 files changed, 35 deletions(-) diff --git a/src/layouts/TabbedPane.styl b/src/layouts/TabbedPane.styl index fd1b95fbf..cd27a4c92 100644 --- a/src/layouts/TabbedPane.styl +++ b/src/layouts/TabbedPane.styl @@ -8,11 +8,6 @@ --tabbed-pane-background-color var(--tabbed-secondary) --tabbed-pane-border-color var(--tabbed-primary) - --tabbed-pane-background-overlay linear-gradient( - var(--tabbed-overlay), - var(--tabbed-overlay) - ) - // Border width palette --tabbed-pane-tab-border-width 1px @@ -65,9 +60,6 @@ border-color var(--tabbed-pane-border-color) - &:not(.active):hover - background-image var(--tabbed-pane-background-overlay) - &.rounded +tablet-portrait-down() & > .tabs diff --git a/src/layouts/Table.styl b/src/layouts/Table.styl index f7162c3fe..b6272f1cb 100644 --- a/src/layouts/Table.styl +++ b/src/layouts/Table.styl @@ -33,13 +33,6 @@ &.inverted --table-quinary $color-gray - --table-overlay-low $color-white-low - --table-overlay-high $color-white-high - - &.inverted - --table-overlay-low $color-black-low - --table-overlay-high $color-black-high - // Color --table-border-color var(--table-primary) @@ -51,17 +44,9 @@ --table-body-text-color var(--table-tertiary) --table-body-stripe-background-color var(--table-primary) - --table-body-stripe-background-overlay linear-gradient( - var(--table-overlay-high), - var(--table-overlay-high) - ) --table-body-following-text-color var(--table-secondary) --table-body-following-background-color var(--table-primary) - --table-body-following-background-overlay linear-gradient( - var(--table-overlay-low), - var(--table-overlay-low) - ) --table-foot-background-color var(--table-quaternary) --table-foot-text-color var(--table-tertiary) @@ -208,14 +193,12 @@ & > .body tr:nth-child(even) background-color var(--table-body-stripe-background-color) - background-image var(--table-body-stripe-background-overlay) &.following & > .body tr:hover color var(--table-body-following-text-color) background-color var(--table-body-following-background-color) - background-image var(--table-body-following-background-overlay) &.compact width auto diff --git a/src/layouts/TableCell.styl b/src/layouts/TableCell.styl index 86c4dacab..d66ee2d6f 100644 --- a/src/layouts/TableCell.styl +++ b/src/layouts/TableCell.styl @@ -24,7 +24,6 @@ &:hover --table-cell-text-color var(--table-body-following-text-color) --table-cell-background-color var(--table-body-following-background-color) - --table-cell-background-overlay var(--table-body-following-background-overlay) // Cursor @@ -40,7 +39,6 @@ cursor var(--table-cell-cursor) background-color var(--table-cell-background-color) - background-image var(--table-cell-background-overlay) padding $space-normal diff --git a/src/patterns/NavigationLink.styl b/src/patterns/NavigationLink.styl index 7ca91a005..c32d8dfca 100644 --- a/src/patterns/NavigationLink.styl +++ b/src/patterns/NavigationLink.styl @@ -7,11 +7,6 @@ --navigation-link-text-color var(--navigation-primary) --navigation-link-background-color var(--navigation-primary) - --navigation-link-background-overlay linear-gradient( - var(--navigation-overlay), - var(--navigation-overlay) - ) - // Rules & > .links @@ -38,6 +33,3 @@ +tablet-portrait-up() padding $space-small $space-large - - &:hover - background-image var(--navigation-link-background-overlay) From c288e89420e35133e2454258d8cf8b0a2658a29b Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 11:34:04 -0300 Subject: [PATCH 29/31] update color warning --- src/tokens/color.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tokens/color.yml b/src/tokens/color.yml index 62863173c..491519202 100644 --- a/src/tokens/color.yml +++ b/src/tokens/color.yml @@ -53,7 +53,7 @@ props: value: '#FFC9C9' category: color-group-context color_warning: - value: '#f59f00' + value: '#FAECBC' category: color-group-context color_success: value: '#E0F2BF' From 7a1705dd74155bb393c17335b4cb49b991849ccd Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 11:37:30 -0300 Subject: [PATCH 30/31] rename binary color group --- src/tokens/color.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tokens/color.yml b/src/tokens/color.yml index 491519202..286d1a032 100644 --- a/src/tokens/color.yml +++ b/src/tokens/color.yml @@ -29,11 +29,11 @@ props: color_white: value: '#ffffff' - category: color-group-black-white + category: color-group-binary comment: Pure white color color_black: value: '#000000' - category: color-group-black-white + category: color-group-binary comment: Pure black color color_dark_gray: From 1551c79d96bb483ef3ae1fa93f5ab4eb7d4fce38 Mon Sep 17 00:00:00 2001 From: Breno Ferreira Date: Tue, 21 Jan 2020 11:58:28 -0300 Subject: [PATCH 31/31] brighter brand colors --- src/tokens/color.yml | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/tokens/color.yml b/src/tokens/color.yml index 286d1a032..60ab3f241 100644 --- a/src/tokens/color.yml +++ b/src/tokens/color.yml @@ -26,6 +26,15 @@ props: color_dark_slate_gray: value: '#333333' category: color-group-brand-creative-commons + color_tomato_brighter: + value: '#FF6933' + category: color-group-brand-creative-commons + color_gold_brighter: + value: '#F5D400' + category: color-group-brand-creative-commons + color_forest_brighter: + value: '#00B850' + category: color-group-brand-creative-commons color_white: value: '#ffffff'