add hover pressed code and fix alternativePressed

Author: garrettbear

src/css/design-tokens.css

@@ -273,11 +273,13 @@
 
 :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-default-hover: #fafafa;
+  --color-background-default-pressed: #ebebeb;
   --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-background-alternative-hover: #edeff1;
+  --color-background-alternative-pressed: #dfe0e2;
+  --color-background-hover: #00000005;
+  --color-background-pressed: #00000014;
   --color-text-default: var(--brand-colors-grey-grey800);
   --color-text-alternative: var(--brand-colors-grey-grey600);
   --color-text-muted: var(--brand-colors-grey-grey200);
@@ -346,11 +348,13 @@
 
 [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-default-hover: #282b2e;
+  --color-background-default-pressed: #36383b;
   --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-background-alternative-hover: #191b1d;
+  --color-background-alternative-pressed: #27292a;
+  --color-background-hover: #ffffff05;
+  --color-background-pressed: #ffffff14;
   --color-text-default: var(--brand-colors-white-white000);
   --color-text-alternative: var(--brand-colors-grey-grey100);
   --color-text-muted: var(--brand-colors-grey-grey400);

src/figma/tokens.json

@@ -848,9 +848,9 @@
           "description": "(#EDEFF1) For component hover states that use background/alternative"
         },
         "alternative-pressed": {
-          "value": "#DFE0E2)",
+          "value": "#DFE0E2",
           "type": "color",
-          "description": "(#DFE0E2)) For component pressed states that use background/alternative"
+          "description": "(#DFE0E2) For component pressed states that use background/alternative"
         },
         "hover": {
           "value": "#00000005",
@@ -1605,10 +1605,6 @@
   },
   "$themes": [],
   "$metadata": {
-    "tokenSetOrder": [
-      "global",
-      "light",
-      "dark"
-    ]
+    "tokenSetOrder": ["global", "light", "dark"]
   }
-}
+}

src/js/themes/darkTheme/colors.test.ts

@@ -40,6 +40,18 @@ describe('Dark Theme Colors', () => {
     );
   });
 
+  it('js tokens for background.hover matches figma tokens background.hover', () => {
+    expect(importableColors.background.hover).toStrictEqual(
+      designTokens.dark.colors.background.hover.value,
+    );
+  });
+
+  it('js tokens for background.pressed matches figma tokens background.pressed', () => {
+    expect(importableColors.background.pressed).toStrictEqual(
+      designTokens.dark.colors.background.pressed.value,
+    );
+  });
+
   it('js tokens for text.default matches figma tokens text.default', () => {
     expect(importableColors.text.default).toStrictEqual(
       designTokens.dark.colors.text.default.value,

src/js/themes/darkTheme/colors.ts

@@ -7,11 +7,13 @@ import { ThemeColors } from '../types';
 export const colors: ThemeColors = {
   background: {
     default: '#24272A',
-    defaultHover: '#3B4046',
-    defaultPressed: '#3B4046',
+    defaultHover: '#282B2E',
+    defaultPressed: '#36383B',
     alternative: '#141618',
-    alternativeHover: '#2E3339',
-    alternativePressed: '#2E3339',
+    alternativeHover: '#191B1D',
+    alternativePressed: '#27292A',
+    hover: '#FFFFFF05',
+    pressed: '#FFFFFF14',
   },
   text: {
     default: '#FFFFFF',

src/js/themes/lightTheme/colors.test.ts

@@ -40,6 +40,18 @@ describe('Light Theme Colors', () => {
     );
   });
 
+  it('js tokens for background.hover matches figma tokens background.hover', () => {
+    expect(importableColors.background.hover).toStrictEqual(
+      designTokens.light.colors.background.hover.value,
+    );
+  });
+
+  it('js tokens for background.pressed matches figma tokens background.pressed', () => {
+    expect(importableColors.background.pressed).toStrictEqual(
+      designTokens.light.colors.background.pressed.value,
+    );
+  });
+
   it('js tokens for text.default matches figma tokens text.default', () => {
     expect(importableColors.text.default).toStrictEqual(
       designTokens.light.colors.text.default.value,

src/js/themes/lightTheme/colors.ts

@@ -7,11 +7,13 @@ import { ThemeColors } from '../types';
 export const colors: ThemeColors = {
   background: {
     default: '#FFFFFF',
-    defaultHover: '#FAFBFC',
-    defaultPressed: '#FAFBFC',
+    defaultHover: '#FAFAFA',
+    defaultPressed: '#EBEBEB',
     alternative: '#F2F4F6',
-    alternativeHover: '#D6D9DC',
-    alternativePressed: '#D6D9DC',
+    alternativeHover: '#EDEFF1',
+    alternativePressed: '#DFE0E2',
+    hover: '#00000005',
+    pressed: '#00000014',
   },
   text: {
     default: '#24272A',

src/js/themes/types.ts

@@ -47,6 +47,14 @@ export interface ThemeColors {
      * {string} background.alternativePressed - For component pressed states that use background/alternative
      */
     alternativePressed: string;
+    /**
+     * {string} background.hover - For component hover states that don't have a background color
+     */
+    hover: string;
+    /**
+     * {string} background.pressed - For component pressed states that don't have a background color
+     */
+    pressed: string;
   };
   text: {
     /**