Hover and pressed color tokens (#233)

* hover and pressed tokens for Light Mode * hover and pressed tokens for Light Mode * new hover and pressed tokens for Dark Theme * Adding new brand colors and color descriptions * Adding CSS and CSSinJS color tokens Co-authored-by: georgewrmarshall <[email protected]>
MetaMask · Sep 7, 2022 · 03c1768 · 03c1768
1 parent 4344f74
commit 03c1768
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 2 deletions.
diff --git a/docs/Shadows.mdx b/docs/Shadows.mdx
@@ -45,7 +45,7 @@ As well as the neutral colors for shadow 2 other colors exist that are used for
 Using both size and color tokens, different shadows can be applied to components.
 
 <Canvas>
-  <Story id="shadows-shadows--usage" />
+  <Story id="shadows-shadows--example-usage" />
 </Canvas>
 
 | Component                | JS                                                                              | CSS                                                              |

diff --git a/src/css/design-tokens.css b/src/css/design-tokens.css
@@ -18,6 +18,7 @@
   --brand-colors-grey-grey500: #6a737d;
   --brand-colors-grey-grey600: #535a61;
   --brand-colors-grey-grey700: #3b4046;
+  --brand-colors-grey-grey750: #2e3339;
   --brand-colors-grey-grey800: #24272a;
   --brand-colors-grey-grey900: #141618;
   --brand-colors-blue-blue000: #eaf6ff;
@@ -240,7 +241,11 @@
 
 :root {
   --color-background-default: var(--brand-colors-white-white000);
+  --color-background-default-hover: var(--brand-colors-grey-grey030);
+  --color-background-default-pressed: var(--brand-colors-grey-grey030);
   --color-background-alternative: var(--brand-colors-grey-grey040);
+  --color-background-alternative-hover: var(--brand-colors-grey-grey100);
+  --color-background-alternative-pressed: var(--brand-colors-grey-grey100);
   --color-text-default: var(--brand-colors-grey-grey800);
   --color-text-alternative: var(--brand-colors-grey-grey600);
   --color-text-muted: var(--brand-colors-grey-grey200);
@@ -301,7 +306,11 @@
 
 [data-theme='dark'] {
   --color-background-default: var(--brand-colors-grey-grey800);
+  --color-background-default-hover: var(--brand-colors-grey-grey700);
+  --color-background-default-pressed: var(--brand-colors-grey-grey700);
   --color-background-alternative: var(--brand-colors-grey-grey900);
+  --color-background-alternative-hover: var(--brand-colors-grey-grey750);
+  --color-background-alternative-pressed: var(--brand-colors-grey-grey750);
   --color-text-default: var(--brand-colors-white-white000);
   --color-text-alternative: var(--brand-colors-grey-grey100);
   --color-text-muted: var(--brand-colors-grey-grey400);

diff --git a/src/figma/tokens.json b/src/figma/tokens.json
@@ -66,6 +66,11 @@
           "description": "(HEX: #3B4046)",
           "type": "color"
         },
+        "grey750": {
+          "value": "#2E3339",
+          "description": "(HEX: #2E3339)",
+          "type": "color"
+        },
         "grey800": {
           "value": "#24272A",
           "description": "(HEX: #24272A)",
@@ -730,10 +735,30 @@
           "description": "(white000: #FFFFFF) For default neutral backgrounds",
           "type": "color"
         },
+        "default-hover": {
+          "value": "#FAFBFC",
+          "description": "(grey030: #FAFBFC) For interactive elements that need a hover state that use background/default as their background color.",
+          "type": "color"
+        },
+        "default-pressed": {
+          "value": "#FAFBFC",
+          "description": "(grey030: #FAFBFC) For interactive elements that need a pressed state that use background/default as their background color.",
+          "type": "color"
+        },
         "alternative": {
           "value": "#F2F4F6",
           "description": "(grey040: #F2F4F6) For a subtle contrast option for neutral backgrounds. (Example: backdrop, header background)",
           "type": "color"
+        },
+        "alternative-hover": {
+          "value": "#D6D9DC",
+          "description": "(grey100: #D6D9DC) For interactive elements that need a hover state that use background/alternative as their background color.",
+          "type": "color"
+        },
+        "alternative-pressed": {
+          "value": "#D6D9DC",
+          "description": "(grey100: #D6D9DC) For interactive elements that need a hover state that use background/alternative as their background color.",
+          "type": "color"
         }
       },
       "text": {
@@ -1045,10 +1070,30 @@
           "description": "(grey800: #24272A) For default neutral backgrounds",
           "type": "color"
         },
+        "default-hover": {
+          "value": "#3B4046",
+          "description": "(grey700: #3B4046) For interactive elements that need a hover state that use background/default as their background color.",
+          "type": "color"
+        },
+        "default-pressed": {
+          "value": "#3B4046",
+          "description": "(grey700: #3B4046) For interactive elements that need a pressed state that use background/default as their background color.",
+          "type": "color"
+        },
         "alternative": {
           "value": "#141618",
           "description": "(grey900: #141618) For a subtle contrast option for neutral backgrounds. (Example: backdrop, header background)",
           "type": "color"
+        },
+        "alternative-hover": {
+          "value": "#2E3339",
+          "description": "(grey750: #2E3339) For interactive elements that need a hover state that use background/alternative as their background color.",
+          "type": "color"
+        },
+        "alternative-pressed": {
+          "value": "#2E3339",
+          "description": "(grey750: #2E3339) For interactive elements that need a hover state that use background/alternative as their background color.",
+          "type": "color"
         }
       },
       "text": {
@@ -1346,5 +1391,8 @@
       }
     }
   },
-  "$themes": []
+  "$themes": [],
+  "$metadata": {
+    "tokenSetOrder": ["global", "light", "dark"]
+  }
 }
diff --git a/src/js/themes/darkTheme/colors.test.ts b/src/js/themes/darkTheme/colors.test.ts
@@ -10,12 +10,36 @@ describe('Dark Theme Colors', () => {
     );
   });
 
+  it('js tokens for background.defaultHover matches figma tokens background.defaultHover', () => {
+    expect(importableColors.background.defaultHover).toStrictEqual(
+      designTokens.dark.colors.background['default-hover'].value,
+    );
+  });
+
+  it('js tokens for background.defaultPressed matches figma tokens background.defaultPressed', () => {
+    expect(importableColors.background.defaultPressed).toStrictEqual(
+      designTokens.dark.colors.background['default-pressed'].value,
+    );
+  });
+
   it('js tokens for background.alternative matches figma tokens background.alternative', () => {
     expect(importableColors.background.alternative).toStrictEqual(
       designTokens.dark.colors.background.alternative.value,
     );
   });
 
+  it('js tokens for background.alternativeHover matches figma tokens background.alternativeHover', () => {
+    expect(importableColors.background.alternativeHover).toStrictEqual(
+      designTokens.dark.colors.background['alternative-hover'].value,
+    );
+  });
+
+  it('js tokens for background.alternativePressed matches figma tokens background.alternativePressed', () => {
+    expect(importableColors.background.alternativePressed).toStrictEqual(
+      designTokens.dark.colors.background['alternative-pressed'].value,
+    );
+  });
+
   it('js tokens for text.default matches figma tokens text.default', () => {
     expect(importableColors.text.default).toStrictEqual(
       designTokens.dark.colors.text.default.value,

diff --git a/src/js/themes/darkTheme/colors.ts b/src/js/themes/darkTheme/colors.ts
@@ -7,7 +7,11 @@ import { ThemeColors } from '../types';
 export const colors: ThemeColors = {
   background: {
     default: '#24272A',
+    defaultHover: '#3B4046',
+    defaultPressed: '#3B4046',
     alternative: '#141618',
+    alternativeHover: '#2E3339',
+    alternativePressed: '#2E3339',
   },
   text: {
     default: '#FFFFFF',

diff --git a/src/js/themes/lightTheme/colors.test.ts b/src/js/themes/lightTheme/colors.test.ts
@@ -10,12 +10,36 @@ describe('Light Theme Colors', () => {
     );
   });
 
+  it('js tokens for background.defaultHover matches figma tokens background.defaultHover', () => {
+    expect(importableColors.background.defaultHover).toStrictEqual(
+      designTokens.light.colors.background['default-hover'].value,
+    );
+  });
+
+  it('js tokens for background.defaultPressed matches figma tokens background.defaultPressed', () => {
+    expect(importableColors.background.defaultPressed).toStrictEqual(
+      designTokens.light.colors.background['default-pressed'].value,
+    );
+  });
+
   it('js tokens for background.alternative matches figma tokens background.alternative', () => {
     expect(importableColors.background.alternative).toStrictEqual(
       designTokens.light.colors.background.alternative.value,
     );
   });
 
+  it('js tokens for background.alternativeHover matches figma tokens background.alternativeHover', () => {
+    expect(importableColors.background.alternativeHover).toStrictEqual(
+      designTokens.light.colors.background['alternative-hover'].value,
+    );
+  });
+
+  it('js tokens for background.alternativePressed matches figma tokens background.alternativePressed', () => {
+    expect(importableColors.background.alternativePressed).toStrictEqual(
+      designTokens.light.colors.background['alternative-pressed'].value,
+    );
+  });
+
   it('js tokens for text.default matches figma tokens text.default', () => {
     expect(importableColors.text.default).toStrictEqual(
       designTokens.light.colors.text.default.value,

diff --git a/src/js/themes/lightTheme/colors.ts b/src/js/themes/lightTheme/colors.ts
@@ -7,7 +7,11 @@ import { ThemeColors } from '../types';
 export const colors: ThemeColors = {
   background: {
     default: '#FFFFFF',
+    defaultHover: '#FAFBFC',
+    defaultPressed: '#FAFBFC',
     alternative: '#F2F4F6',
+    alternativeHover: '#D6D9DC',
+    alternativePressed: '#D6D9DC',
   },
   text: {
     default: '#24272A',

diff --git a/src/js/themes/types.ts b/src/js/themes/types.ts
@@ -27,10 +27,26 @@ export interface ThemeColors {
      * {string} background.default - For default neutral backgrounds
      */
     default: string;
+    /**
+     * {string} background.defaultHover - For interactive elements that need a hover state that use background/default as their background color.
+     */
+    defaultHover: string;
+    /**
+     * {string} background.defaultPressed - For interactive elements that need a pressed state that use background/default as their background color.
+     */
+    defaultPressed: string;
     /**
      * {string} background.alternative - For a subtle contrast option for neutral backgrounds. (Example: backdrop, header background)
      */
     alternative: string;
+    /**
+     * {string} background.alternativeHover - For interactive elements that need a hover state that use background/alternative as their background color.
+     */
+    alternativeHover: string;
+    /**
+     * {string} background.alternativePressed - For interactive elements that need a pressed state that use background/alternative as their background color.
+     */
+    alternativePressed: string;
   };
   text: {
     /**