Updated Light Theme Shadows to match Storybook (#195)

* Updated Light Theme Shadows to match Storybook * reverted MD back to 0 2 16 0 * reverted MD back to 0 2 16 0 * renamed primary & danger * fixed danger shadown value to 0 2 8 0 * reverting back to lowercase * Updating descriptions * updating description * Updating tests Co-authored-by: georgewrmarshall <[email protected]>
MetaMask · Jul 28, 2022 · f4092b2 · f4092b2
1 parent 39c7df5
commit f4092b2
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 90 deletions.
diff --git a/src/figma/tokens.json b/src/figma/tokens.json
@@ -941,67 +941,73 @@
         "value": {
           "color": "#0000001A",
           "type": "dropShadow",
-          "x": 0,
-          "y": 2,
-          "blur": 4,
-          "spread": 0
+          "x": "0",
+          "y": "2",
+          "blur": "4",
+          "spread": "0"
         },
-        "type": "boxShadow"
+        "type": "boxShadow",
+        "description": "Uses: Cards"
       },
       "sm": {
         "value": {
           "color": "#0000001A",
           "type": "dropShadow",
-          "x": 0,
-          "y": 2,
-          "blur": 8,
-          "spread": 0
+          "x": "0",
+          "y": "2",
+          "blur": "8",
+          "spread": "0"
         },
-        "type": "boxShadow"
+        "type": "boxShadow",
+        "description": "Uses: Dropdown, Menus"
       },
       "md": {
         "value": {
+          "x": "0",
+          "y": "2",
+          "blur": "16",
+          "spread": "0",
           "color": "#0000001A",
-          "type": "dropShadow",
-          "x": 0,
-          "y": 2,
-          "blur": 16,
-          "spread": 0
+          "type": "dropShadow"
         },
-        "type": "boxShadow"
+        "type": "boxShadow",
+        "description": "Uses: Toast"
       },
       "lg": {
         "value": {
+          "x": "0",
+          "y": "2",
+          "blur": "40",
+          "spread": "0",
           "color": "#0000001A",
-          "type": "dropShadow",
-          "x": 0,
-          "y": 8,
-          "blur": 40,
-          "spread": 0
+          "type": "dropShadow"
         },
-        "type": "boxShadow"
+        "type": "boxShadow",
+        "description": "Uses: Modals"
       },
       "primary": {
         "value": {
+          "x": "0",
+          "y": "2",
+          "blur": "8",
+          "spread": "0",
           "color": "#037DD633",
-          "type": "dropShadow",
-          "x": 0,
-          "y": 7,
-          "blur": 42,
-          "spread": 0
+          "type": "dropShadow"
         },
-        "type": "boxShadow"
+        "type": "boxShadow",
+        "description": "Uses: ButtonPrimary hover state"
       },
       "error": {
         "value": {
+          "x": "0",
+          "y": "2",
+          "blur": "8",
+          "spread": "0",
           "color": "#D73A4966",
-          "type": "dropShadow",
-          "x": 0,
-          "y": 7,
-          "blur": 42,
-          "spread": 0
+          "type": "dropShadow"
         },
-        "type": "boxShadow"
+        "type": "boxShadow",
+        "description": "Uses: ButtonPrimary alert:danger hover state"
       }
     }
   },
@@ -1250,65 +1256,65 @@
         "value": {
           "color": "#00000066",
           "type": "dropShadow",
-          "x": 0,
-          "y": 2,
-          "blur": 4,
-          "spread": 0
+          "x": "0",
+          "y": "2",
+          "blur": "4",
+          "spread": "0"
         },
         "type": "boxShadow"
       },
       "sm": {
         "value": {
           "color": "#00000066",
           "type": "dropShadow",
-          "x": 0,
-          "y": 2,
-          "blur": 8,
-          "spread": 0
+          "x": "0",
+          "y": "2",
+          "blur": "8",
+          "spread": "0"
         },
         "type": "boxShadow"
       },
       "md": {
         "value": {
           "color": "#00000066",
           "type": "dropShadow",
-          "x": 0,
-          "y": 2,
-          "blur": 16,
-          "spread": 0
+          "x": "0",
+          "y": "2",
+          "blur": "16",
+          "spread": "0"
         },
         "type": "boxShadow"
       },
       "lg": {
         "value": {
           "color": "#00000066",
           "type": "dropShadow",
-          "x": 0,
-          "y": 8,
-          "blur": 40,
-          "spread": 0
+          "x": "0",
+          "y": "2",
+          "blur": "40",
+          "spread": "0"
         },
         "type": "boxShadow"
       },
       "primary": {
         "value": {
           "color": "#1098FC66",
           "type": "dropShadow",
-          "x": 0,
-          "y": 7,
-          "blur": 42,
-          "spread": 0
+          "x": "0",
+          "y": "7",
+          "blur": "42",
+          "spread": "0"
         },
         "type": "boxShadow"
       },
       "error": {
         "value": {
           "color": "#D73A4966",
           "type": "dropShadow",
-          "x": 0,
-          "y": 7,
-          "blur": 42,
-          "spread": 0
+          "x": "0",
+          "y": "7",
+          "blur": "42",
+          "spread": "0"
         },
         "type": "boxShadow"
       }

diff --git a/src/js/themes/darkTheme/darkTheme.test.ts b/src/js/themes/darkTheme/darkTheme.test.ts
@@ -20,11 +20,11 @@ describe('dark Theme', () => {
     expect(darkTheme.shadows.size.xs).toStrictEqual({
       shadowColor: designTokens.dark.shadows.xs.value.color,
       shadowOffset: {
-        width: designTokens.dark.shadows.xs.value.x,
-        height: designTokens.dark.shadows.xs.value.y,
+        width: Number(designTokens.dark.shadows.xs.value.x),
+        height: Number(designTokens.dark.shadows.xs.value.y),
       },
       shadowOpacity: 1,
-      shadowRadius: designTokens.dark.shadows.xs.value.blur,
+      shadowRadius: Number(designTokens.dark.shadows.xs.value.blur),
     });
   });
 });
diff --git a/src/js/themes/darkTheme/shadows.test.ts b/src/js/themes/darkTheme/shadows.test.ts
@@ -10,17 +10,17 @@ describe('Shadows', () => {
     );
 
     expect(shadows.size.xs.shadowOffset.width).toStrictEqual(
-      designTokens.dark.shadows.xs.value.x,
+      Number(designTokens.dark.shadows.xs.value.x),
     );
 
     expect(shadows.size.xs.shadowOffset.height).toStrictEqual(
-      designTokens.dark.shadows.xs.value.y,
+      Number(designTokens.dark.shadows.xs.value.y),
     );
 
     expect(shadows.size.xs.shadowOpacity).toStrictEqual(1);
 
     expect(shadows.size.xs.shadowRadius).toStrictEqual(
-      designTokens.dark.shadows.xs.value.blur,
+      Number(designTokens.dark.shadows.xs.value.blur),
     );
   });
 
@@ -30,17 +30,17 @@ describe('Shadows', () => {
     );
 
     expect(shadows.size.sm.shadowOffset.width).toStrictEqual(
-      designTokens.dark.shadows.sm.value.x,
+      Number(designTokens.dark.shadows.sm.value.x),
     );
 
     expect(shadows.size.sm.shadowOffset.height).toStrictEqual(
-      designTokens.dark.shadows.sm.value.y,
+      Number(designTokens.dark.shadows.sm.value.y),
     );
 
     expect(shadows.size.sm.shadowOpacity).toStrictEqual(1);
 
     expect(shadows.size.sm.shadowRadius).toStrictEqual(
-      designTokens.dark.shadows.sm.value.blur,
+      Number(designTokens.dark.shadows.sm.value.blur),
     );
   });
 
@@ -50,17 +50,17 @@ describe('Shadows', () => {
     );
 
     expect(shadows.size.md.shadowOffset.width).toStrictEqual(
-      designTokens.dark.shadows.md.value.x,
+      Number(designTokens.dark.shadows.md.value.x),
     );
 
     expect(shadows.size.md.shadowOffset.height).toStrictEqual(
-      designTokens.dark.shadows.md.value.y,
+      Number(designTokens.dark.shadows.md.value.y),
     );
 
     expect(shadows.size.md.shadowOpacity).toStrictEqual(1);
 
     expect(shadows.size.md.shadowRadius).toStrictEqual(
-      designTokens.dark.shadows.md.value.blur,
+      Number(designTokens.dark.shadows.md.value.blur),
     );
   });
 
@@ -70,17 +70,17 @@ describe('Shadows', () => {
     );
 
     expect(shadows.size.lg.shadowOffset.width).toStrictEqual(
-      designTokens.dark.shadows.lg.value.x,
+      Number(designTokens.dark.shadows.lg.value.x),
     );
 
     expect(shadows.size.lg.shadowOffset.height).toStrictEqual(
-      designTokens.dark.shadows.lg.value.y,
+      Number(designTokens.dark.shadows.lg.value.y),
     );
 
     expect(shadows.size.lg.shadowOpacity).toStrictEqual(1);
 
     expect(shadows.size.lg.shadowRadius).toStrictEqual(
-      designTokens.dark.shadows.lg.value.blur,
+      Number(designTokens.dark.shadows.lg.value.blur),
     );
   });
 });
diff --git a/src/js/themes/darkTheme/shadows.ts b/src/js/themes/darkTheme/shadows.ts
@@ -34,7 +34,7 @@ export const shadows: ThemeShadows = {
       shadowColor: colors.shadow.default,
       shadowOffset: {
         width: 0,
-        height: 8,
+        height: 2,
       },
       shadowOpacity: 1,
       shadowRadius: 40,

diff --git a/src/js/themes/lightTheme/lightTheme.test.ts b/src/js/themes/lightTheme/lightTheme.test.ts
@@ -20,11 +20,11 @@ describe('Light Theme', () => {
     expect(lightTheme.shadows.size.xs).toStrictEqual({
       shadowColor: designTokens.light.shadows.xs.value.color,
       shadowOffset: {
-        width: designTokens.light.shadows.xs.value.x,
-        height: designTokens.light.shadows.xs.value.y,
+        width: Number(designTokens.light.shadows.xs.value.x),
+        height: Number(designTokens.light.shadows.xs.value.y),
       },
       shadowOpacity: 1,
-      shadowRadius: designTokens.light.shadows.xs.value.blur,
+      shadowRadius: Number(designTokens.light.shadows.xs.value.blur),
     });
   });
 });