feat(colors): add level 800 for alert and brand hues

We want a darker shade for the hues being used on the button color variants which will then be used for the "active" button states. We're going to add those colors as level 800. So far we only have 2 confirmed colors here (brand 800 and alert 800), so we're just going to add those for now and come back for the others later.
chanzuckerberg · Jul 20, 2021 · 8a91592 · 8a91592
1 parent bbfdb63
commit 8a91592
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 12 deletions.
diff --git a/packages/components/src/Clickable/Clickable.module.css b/packages/components/src/Clickable/Clickable.module.css
@@ -37,8 +37,7 @@
 
   &:active,
   &.stateActive {
-    /* TODO: Replace with brand active color */
-    --button-primary-color: #312b9e;
+    --button-primary-color: var(--eds-color-brand-800);
   }
 
   /* override the hover/focus values */
@@ -61,8 +60,7 @@
 
   &:active,
   &.stateActive {
-    /* TODO: Replace with alert active color */
-    --button-primary-color: #a4002c;
+    --button-primary-color: var(--eds-color-alert-800);
   }
 
   /* override the hover/focus values */

diff --git a/packages/tokens/dist/css/variables.css b/packages/tokens/dist/css/variables.css
@@ -15,6 +15,7 @@
   --eds-color-alert-500: #F1497C;
   --eds-color-alert-600: #D41E52;
   --eds-color-alert-700: #BD0044;
+  --eds-color-alert-800: #8F0134;
   --eds-color-success-100: #ECFFF5;
   --eds-color-success-200: #B7E9CE;
   --eds-color-success-300: #8FDCB3;
@@ -43,6 +44,7 @@
   --eds-color-brand-500: #766FFD;
   --eds-color-brand-600: #574EFF;
   --eds-color-brand-700: #433BDE;
+  --eds-color-brand-800: #312B9E;
   --eds-color-grading-yellow-100: #FDF1D0;
   --eds-color-grading-yellow-500: #FFC55B;
   --eds-color-highlight-100: #FF9FEC;

diff --git a/packages/tokens/dist/js/colors.js b/packages/tokens/dist/js/colors.js
@@ -14,6 +14,7 @@ export const EdsColorAlert400 = "#F76C96";
 export const EdsColorAlert500 = "#F1497C";
 export const EdsColorAlert600 = "#D41E52";
 export const EdsColorAlert700 = "#BD0044";
+export const EdsColorAlert800 = "#8F0134";
 export const EdsColorSuccess100 = "#ECFFF5";
 export const EdsColorSuccess200 = "#B7E9CE";
 export const EdsColorSuccess300 = "#8FDCB3";
@@ -42,6 +43,7 @@ export const EdsColorBrand400 = "#928CFF";
 export const EdsColorBrand500 = "#766FFD";
 export const EdsColorBrand600 = "#574EFF";
 export const EdsColorBrand700 = "#433BDE";
+export const EdsColorBrand800 = "#312B9E";
 export const EdsColorGradingYellow100 = "#FDF1D0";
 export const EdsColorGradingYellow500 = "#FFC55B";
 export const EdsColorHighlight100 = "#FF9FEC";

diff --git a/packages/tokens/dist/json/css-variables-nested.json b/packages/tokens/dist/json/css-variables-nested.json
@@ -19,7 +19,8 @@
         "400": "var(--eds-color-alert-400)",
         "500": "var(--eds-color-alert-500)",
         "600": "var(--eds-color-alert-600)",
-        "700": "var(--eds-color-alert-700)"
+        "700": "var(--eds-color-alert-700)",
+        "800": "var(--eds-color-alert-800)"
       },
       "success": {
         "100": "var(--eds-color-success-100)",
@@ -55,7 +56,8 @@
         "400": "var(--eds-color-brand-400)",
         "500": "var(--eds-color-brand-500)",
         "600": "var(--eds-color-brand-600)",
-        "700": "var(--eds-color-brand-700)"
+        "700": "var(--eds-color-brand-700)",
+        "800": "var(--eds-color-brand-800)"
       },
       "grading": {
         "yellow": {

diff --git a/packages/tokens/dist/json/variables-nested.json b/packages/tokens/dist/json/variables-nested.json
@@ -19,7 +19,8 @@
         "400": "#F76C96",
         "500": "#F1497C",
         "600": "#D41E52",
-        "700": "#BD0044"
+        "700": "#BD0044",
+        "800": "#8F0134"
       },
       "success": {
         "100": "#ECFFF5",
@@ -55,7 +56,8 @@
         "400": "#928CFF",
         "500": "#766FFD",
         "600": "#574EFF",
-        "700": "#433BDE"
+        "700": "#433BDE",
+        "800": "#312B9E"
       },
       "grading": {
         "yellow": {

diff --git a/packages/tokens/dist/json/variables.json b/packages/tokens/dist/json/variables.json
@@ -15,6 +15,7 @@
   "EdsColorAlert500": "#F1497C",
   "EdsColorAlert600": "#D41E52",
   "EdsColorAlert700": "#BD0044",
+  "EdsColorAlert800": "#8F0134",
   "EdsColorSuccess100": "#ECFFF5",
   "EdsColorSuccess200": "#B7E9CE",
   "EdsColorSuccess300": "#8FDCB3",
@@ -43,6 +44,7 @@
   "EdsColorBrand500": "#766FFD",
   "EdsColorBrand600": "#574EFF",
   "EdsColorBrand700": "#433BDE",
+  "EdsColorBrand800": "#312B9E",
   "EdsColorGradingYellow100": "#FDF1D0",
   "EdsColorGradingYellow500": "#FFC55B",
   "EdsColorHighlight100": "#FF9FEC",

diff --git a/packages/tokens/dist/scss/_variables.scss b/packages/tokens/dist/scss/_variables.scss
@@ -16,6 +16,7 @@ $eds-color-alert-400: #F76C96 !default;
 $eds-color-alert-500: #F1497C !default;
 $eds-color-alert-600: #D41E52 !default;
 $eds-color-alert-700: #BD0044 !default;
+$eds-color-alert-800: #8F0134 !default;
 $eds-color-success-100: #ECFFF5 !default;
 $eds-color-success-200: #B7E9CE !default;
 $eds-color-success-300: #8FDCB3 !default;
@@ -44,6 +45,7 @@ $eds-color-brand-400: #928CFF !default;
 $eds-color-brand-500: #766FFD !default;
 $eds-color-brand-600: #574EFF !default;
 $eds-color-brand-700: #433BDE !default;
+$eds-color-brand-800: #312B9E !default;
 $eds-color-grading-yellow-100: #FDF1D0 !default;
 $eds-color-grading-yellow-500: #FFC55B !default;
 $eds-color-highlight-100: #FF9FEC !default;
@@ -146,7 +148,8 @@ $tokens: (
         '400': $eds-color-alert-400,
         '500': $eds-color-alert-500,
         '600': $eds-color-alert-600,
-        '700': $eds-color-alert-700
+        '700': $eds-color-alert-700,
+        '800': $eds-color-alert-800
       ),
       'success': (
         '100': $eds-color-success-100,
@@ -182,7 +185,8 @@ $tokens: (
         '400': $eds-color-brand-400,
         '500': $eds-color-brand-500,
         '600': $eds-color-brand-600,
-        '700': $eds-color-brand-700
+        '700': $eds-color-brand-700,
+        '800': $eds-color-brand-800
       ),
       'grading': (
         'yellow': (

diff --git a/packages/tokens/properties/color/base.json b/packages/tokens/properties/color/base.json
@@ -19,7 +19,8 @@
         "400": { "value": "#F76C96" },
         "500": { "value": "#F1497C" },
         "600": { "value": "#D41E52" },
-        "700": { "value": "#BD0044" }
+        "700": { "value": "#BD0044" },
+        "800": { "value": "#8F0134" }
       },
       "success": {
         "100": { "value": "#ECFFF5" },
@@ -55,7 +56,8 @@
         "400": { "value": "#928CFF" },
         "500": { "value": "#766FFD" },
         "600": { "value": "#574EFF" },
-        "700": { "value": "#433BDE" }
+        "700": { "value": "#433BDE" },
+        "800": { "value": "#312B9E" }
       },
       "grading": {
         "yellow": {