feat(colors): add level 800 success and warning colors, use in Clickable

chanzuckerberg · Aug 20, 2021 · b314501 · b314501
1 parent 199b68a
commit b314501
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 12 deletions.
diff --git a/packages/components/src/Clickable/Clickable.module.css b/packages/components/src/Clickable/Clickable.module.css
@@ -106,8 +106,7 @@
 
   &:active,
   &.stateActive {
-    /* TODO: Replace with success active color */
-    --button-primary-color: #005a30;
+    --button-primary-color: var(--eds-color-success-800);
   }
 
   /* override the hover/focus values */
@@ -130,8 +129,7 @@
 
   &:active,
   &.stateActive {
-    /* TODO: Replace with warning active color */
-    --button-primary-color: #952d00;
+    --button-primary-color: var(--eds-color-warning-800);
   }
 
   /* override the hover/focus values */

diff --git a/packages/tokens/lib/css/variables.css b/packages/tokens/lib/css/variables.css
@@ -23,6 +23,7 @@
   --eds-color-success-500: #00A66A;
   --eds-color-success-600: #008756;
   --eds-color-success-700: #007349;
+  --eds-color-success-800: #005939;
   --eds-color-info-100: #F1F9FF;
   --eds-color-info-200: #B0D5FF;
   --eds-color-info-300: #7FB9FD;
@@ -37,6 +38,7 @@
   --eds-color-warning-500: #E06C00;
   --eds-color-warning-600: #C64600;
   --eds-color-warning-700: #AC3400;
+  --eds-color-warning-800: #852800;
   --eds-color-brand-100: #F7F1FF;
   --eds-color-brand-200: #C3C0FE;
   --eds-color-brand-300: #A7A2FE;

diff --git a/packages/tokens/lib/js/colors.js b/packages/tokens/lib/js/colors.js
@@ -22,6 +22,7 @@ export const EdsColorSuccess400 = "#59C88C";
 export const EdsColorSuccess500 = "#00A66A";
 export const EdsColorSuccess600 = "#008756";
 export const EdsColorSuccess700 = "#007349";
+export const EdsColorSuccess800 = "#005939";
 export const EdsColorInfo100 = "#F1F9FF";
 export const EdsColorInfo200 = "#B0D5FF";
 export const EdsColorInfo300 = "#7FB9FD";
@@ -36,6 +37,7 @@ export const EdsColorWarning400 = "#F6924A";
 export const EdsColorWarning500 = "#E06C00";
 export const EdsColorWarning600 = "#C64600";
 export const EdsColorWarning700 = "#AC3400";
+export const EdsColorWarning800 = "#852800";
 export const EdsColorBrand100 = "#F7F1FF";
 export const EdsColorBrand200 = "#C3C0FE";
 export const EdsColorBrand300 = "#A7A2FE";

diff --git a/packages/tokens/lib/json/css-variables-nested.json b/packages/tokens/lib/json/css-variables-nested.json
@@ -29,7 +29,8 @@
         "400": "var(--eds-color-success-400)",
         "500": "var(--eds-color-success-500)",
         "600": "var(--eds-color-success-600)",
-        "700": "var(--eds-color-success-700)"
+        "700": "var(--eds-color-success-700)",
+        "800": "var(--eds-color-success-800)"
       },
       "info": {
         "100": "var(--eds-color-info-100)",
@@ -47,7 +48,8 @@
         "400": "var(--eds-color-warning-400)",
         "500": "var(--eds-color-warning-500)",
         "600": "var(--eds-color-warning-600)",
-        "700": "var(--eds-color-warning-700)"
+        "700": "var(--eds-color-warning-700)",
+        "800": "var(--eds-color-warning-800)"
       },
       "brand": {
         "100": "var(--eds-color-brand-100)",

diff --git a/packages/tokens/lib/json/variables-nested.json b/packages/tokens/lib/json/variables-nested.json
@@ -29,7 +29,8 @@
         "400": "#59C88C",
         "500": "#00A66A",
         "600": "#008756",
-        "700": "#007349"
+        "700": "#007349",
+        "800": "#005939"
       },
       "info": {
         "100": "#F1F9FF",
@@ -47,7 +48,8 @@
         "400": "#F6924A",
         "500": "#E06C00",
         "600": "#C64600",
-        "700": "#AC3400"
+        "700": "#AC3400",
+        "800": "#852800"
       },
       "brand": {
         "100": "#F7F1FF",

diff --git a/packages/tokens/lib/json/variables.json b/packages/tokens/lib/json/variables.json
@@ -23,6 +23,7 @@
   "EdsColorSuccess500": "#00A66A",
   "EdsColorSuccess600": "#008756",
   "EdsColorSuccess700": "#007349",
+  "EdsColorSuccess800": "#005939",
   "EdsColorInfo100": "#F1F9FF",
   "EdsColorInfo200": "#B0D5FF",
   "EdsColorInfo300": "#7FB9FD",
@@ -37,6 +38,7 @@
   "EdsColorWarning500": "#E06C00",
   "EdsColorWarning600": "#C64600",
   "EdsColorWarning700": "#AC3400",
+  "EdsColorWarning800": "#852800",
   "EdsColorBrand100": "#F7F1FF",
   "EdsColorBrand200": "#C3C0FE",
   "EdsColorBrand300": "#A7A2FE",

diff --git a/packages/tokens/lib/scss/_variables.scss b/packages/tokens/lib/scss/_variables.scss
@@ -24,6 +24,7 @@ $eds-color-success-400: #59C88C !default;
 $eds-color-success-500: #00A66A !default;
 $eds-color-success-600: #008756 !default;
 $eds-color-success-700: #007349 !default;
+$eds-color-success-800: #005939 !default;
 $eds-color-info-100: #F1F9FF !default;
 $eds-color-info-200: #B0D5FF !default;
 $eds-color-info-300: #7FB9FD !default;
@@ -38,6 +39,7 @@ $eds-color-warning-400: #F6924A !default;
 $eds-color-warning-500: #E06C00 !default;
 $eds-color-warning-600: #C64600 !default;
 $eds-color-warning-700: #AC3400 !default;
+$eds-color-warning-800: #852800 !default;
 $eds-color-brand-100: #F7F1FF !default;
 $eds-color-brand-200: #C3C0FE !default;
 $eds-color-brand-300: #A7A2FE !default;
@@ -158,7 +160,8 @@ $tokens: (
         '400': $eds-color-success-400,
         '500': $eds-color-success-500,
         '600': $eds-color-success-600,
-        '700': $eds-color-success-700
+        '700': $eds-color-success-700,
+        '800': $eds-color-success-800
       ),
       'info': (
         '100': $eds-color-info-100,
@@ -176,7 +179,8 @@ $tokens: (
         '400': $eds-color-warning-400,
         '500': $eds-color-warning-500,
         '600': $eds-color-warning-600,
-        '700': $eds-color-warning-700
+        '700': $eds-color-warning-700,
+        '800': $eds-color-warning-800
       ),
       'brand': (
         '100': $eds-color-brand-100,

diff --git a/packages/tokens/lib/ts/colors.ts b/packages/tokens/lib/ts/colors.ts
@@ -22,6 +22,7 @@ export const EdsColorSuccess400 = "#59C88C";
 export const EdsColorSuccess500 = "#00A66A";
 export const EdsColorSuccess600 = "#008756";
 export const EdsColorSuccess700 = "#007349";
+export const EdsColorSuccess800 = "#005939";
 export const EdsColorInfo100 = "#F1F9FF";
 export const EdsColorInfo200 = "#B0D5FF";
 export const EdsColorInfo300 = "#7FB9FD";
@@ -36,6 +37,7 @@ export const EdsColorWarning400 = "#F6924A";
 export const EdsColorWarning500 = "#E06C00";
 export const EdsColorWarning600 = "#C64600";
 export const EdsColorWarning700 = "#AC3400";
+export const EdsColorWarning800 = "#852800";
 export const EdsColorBrand100 = "#F7F1FF";
 export const EdsColorBrand200 = "#C3C0FE";
 export const EdsColorBrand300 = "#A7A2FE";

diff --git a/packages/tokens/properties/color/base.json b/packages/tokens/properties/color/base.json
@@ -29,7 +29,8 @@
         "400": { "value": "#59C88C" },
         "500": { "value": "#00A66A" },
         "600": { "value": "#008756" },
-        "700": { "value": "#007349" }
+        "700": { "value": "#007349" },
+        "800": { "value": "#005939" }
       },
       "info": {
         "100": { "value": "#F1F9FF" },
@@ -47,7 +48,8 @@
         "400": { "value": "#F6924A" },
         "500": { "value": "#E06C00" },
         "600": { "value": "#C64600" },
-        "700": { "value": "#AC3400" }
+        "700": { "value": "#AC3400" },
+        "800": { "value": "#852800" }
       },
       "brand": {
         "100": { "value": "#F7F1FF" },