Update shadow button tokens to replace hardcoded values

Shopify · Jan 18, 2024 · 5d2c9bd · 5d2c9bd
1 parent d26df7e
commit 5d2c9bd
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 35 deletions.
diff --git a/polaris-react/src/components/Button/Button.module.scss b/polaris-react/src/components/Button/Button.module.scss
@@ -126,11 +126,9 @@
     rgba(48, 48, 48, 0) 63.53%,
     rgba(255, 255, 255, 0.15) 100%
   );
-  --pc-button-box-shadow: 0px -1px 0px 1px rgba(0, 0, 0, 0.8) inset,
-    0px 0px 0px 1px rgba(48, 48, 48, 1) inset,
-    0px 0.5px 0px 1.5px rgba(255, 255, 255, 0.25) inset;
-  --pc-button-box-shadow_active: 0 3px 0 0 rgb(0, 0, 0) inset;
   // stylelint-enable
+  --pc-button-box-shadow: var(--p-shadow-button-primary);
+  --pc-button-box-shadow_active: var(--p-shadow-button-primary-inset);
   --pc-button-bg: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand);
   --pc-button-bg_hover: var(--pc-button-bg-gradient),
     var(--p-color-bg-fill-brand-hover);
@@ -144,13 +142,8 @@
 }
 
 .variantSecondary {
-  // stylelint-disable  -- custom button tokens
-  --pc-button-box-shadow: 0 -1px 0 0 #b5b5b5 inset,
-    0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 0.5px 0 1.5px #fff inset;
-  --pc-button-box-shadow_active: -1px 0 1px 0 rgba(26, 26, 26, 0.122) inset,
-    1px 0 1px 0 rgba(26, 26, 26, 0.122) inset,
-    0 2px 1px 0 rgba(26, 26, 26, 0.2) inset;
-  // stylelint-enable
+  --pc-button-box-shadow: var(--p-shadow-button);
+  --pc-button-box-shadow_active: var(--p-shadow-button-inset);
   --pc-button-bg: var(--p-color-bg-fill);
   --pc-button-bg_hover: var(--p-color-bg-fill-hover);
   --pc-button-bg_active: var(--p-color-bg-fill-active);
@@ -210,29 +203,17 @@
 }
 
 .toneSuccess:is(.variantPrimary) {
-  // stylelint-disable  -- custom button tokens
-  --pc-button-box-shadow: 0 -1px 0 1px rgba(12, 81, 50, 0.8) inset,
-    0 0 0 1px rgba(19, 111, 69, 0.8) inset,
-    0 0.5px 0 1.5px rgba(255, 255, 255, 0.251) inset;
-  --pc-button-box-shadow_active: -1px 0px 1px 0px rgba(0, 0, 0, 0.2) inset,
-    1px 0px 1px 0px rgba(0, 0, 0, 0.2) inset,
-    0px 2px 0px 0px rgba(0, 0, 0, 0.6) inset;
-  // stylelint-enable
+  --pc-button-box-shadow: var(--p-shadow-button-primary-success);
+  --pc-button-box-shadow_active: var(--p-shadow-button-primary-success-inset);
   --pc-button-bg: var(--p-color-bg-fill-success);
   --pc-button-bg_hover: var(--p-color-bg-fill-success-hover);
   --pc-button-bg_active: var(--p-color-bg-fill-success-active);
   --pc-button-bg_pressed: var(--p-color-bg-fill-success-selected);
 }
 
 .toneCritical:is(.variantPrimary) {
-  // stylelint-disable  -- custom button tokens
-  --pc-button-box-shadow: 0 -1px 0 1px rgba(142, 31, 11, 0.8) inset,
-    0 0 0 1px rgba(181, 38, 11, 0.8) inset,
-    0 0.5px 0 1.5px rgba(255, 255, 255, 0.349) inset;
-  --pc-button-box-shadow_active: -1px 0px 1px 0px rgba(0, 0, 0, 0.2) inset,
-    1px 0px 1px 0px rgba(0, 0, 0, 0.2) inset,
-    0px 2px 0px 0px rgba(0, 0, 0, 0.6) inset;
-  // stylelint-enable
+  --pc-button-box-shadow: var(--p-shadow-button-primary-critical);
+  --pc-button-box-shadow_active: var(--p-shadow-button-primary-critical-inset);
   --pc-button-bg: var(--p-color-bg-fill-critical);
   --pc-button-bg_hover: var(--p-color-bg-fill-critical-hover);
   --pc-button-bg_active: var(--p-color-bg-fill-critical-active);

diff --git a/polaris-tokens/src/themes/base/shadow.ts b/polaris-tokens/src/themes/base/shadow.ts
@@ -70,50 +70,50 @@ export const shadow: {
   },
   'shadow-button': {
     value:
-      '0px 1px 0px 0px #E3E3E3 inset, 1px 0px 0px 0px #E3E3E3 inset, -1px 0px 0px 0px #E3E3E3 inset, 0px -1px 0px 0px #B5B5B5 inset',
+      '0px -1px 0px 0px #b5b5b5 inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, 0px 0.5px 0px 1.5px #FFF inset',
   },
   'shadow-button-hover': {
     value:
       '0px 1px 0px 0px #EBEBEB inset, -1px 0px 0px 0px #EBEBEB inset, 1px 0px 0px 0px #EBEBEB inset, 0px -1px 0px 0px #CCC inset',
   },
   'shadow-button-inset': {
     value:
-      '0px 2px 1px 0px rgba(26, 26, 26, 0.20) inset, 1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset, -1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset',
+      '-1px 0px 1px 0px rgba(26, 26, 26, 0.122) inset, 1px 0px 1px 0px rgba(26, 26, 26, 0.122) inset, 0px 2px 1px 0px rgba(26, 26, 26, 0.2) inset',
   },
   'shadow-button-primary': {
     value:
-      '0px 2px 0px 0px rgba(255, 255, 255, 0.2) inset, 2px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, -2px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 1px #000 inset, 0px 1px 0px 0px #000 inset',
+      '0px -1px 0px 1px rgba(0, 0, 0, 0.8) inset, 0px 0px 0px 1px rgba(48, 48, 48, 1) inset, 0px 0.5px 0px 1.5px rgba(255, 255, 255, 0.25) inset;',
   },
   'shadow-button-primary-hover': {
     value:
       '0px 1px 0px 0px rgba(255, 255, 255, 0.24) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px -1px 0px 0px #000 inset, 0px -1px 0px 1px #1A1A1A',
   },
   'shadow-button-primary-inset': {
-    value: '0px 3px 0px 0px #000 inset',
+    value: '0px 3px 0px 0px rgb(0, 0, 0) inset',
   },
   'shadow-button-primary-critical': {
     value:
-      '0px 1px 0px 0px rgba(255, 255, 255, 0.48) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px -1.5px 0px 0px rgba(0, 0, 0, 0.25) inset',
+      '0px -1px 0px 1px rgba(142, 31, 11, 0.8) inset, 0px 0px 0px 1px rgba(181, 38, 11, 0.8) inset, 0px 0.5px 0px 1.5px rgba(255, 255, 255, 0.349) inset',
   },
   'shadow-button-primary-critical-hover': {
     value:
       '0px 1px 0px 0px rgba(255, 255, 255, 0.48) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px -1.5px 0px 0px rgba(0, 0, 0, 0.25) inset',
   },
   'shadow-button-primary-critical-inset': {
     value:
-      '0px 2px 0px 0px rgba(0, 0, 0, 0.60) inset, 1px 0px 1px 0px rgba(0, 0, 0, 0.20) inset, -1px 0px 1px 0px rgba(0, 0, 0, 0.20) inset',
+      '-1px 0px 1px 0px rgba(0, 0, 0, 0.2) inset, 1px 0px 1px 0px rgba(0, 0, 0, 0.2) inset, 0px 2px 0px 0px rgba(0, 0, 0, 0.6) inset',
   },
   'shadow-button-primary-success': {
     value:
-      '0px 1px 0px 0px rgba(255, 255, 255, 0.48) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px -1.5px 0px 0px rgba(0, 0, 0, 0.25) inset',
+      '0px -1px 0px 1px rgba(12, 81, 50, 0.8) inset, 0px 0px 0px 1px rgba(19, 111, 69, 0.8) inset, 0px 0.5px 0px 1.5px rgba(255, 255, 255, 0.251) inset',
   },
   'shadow-button-primary-success-hover': {
     value:
       '0px 1px 0px 0px rgba(255, 255, 255, 0.48) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px -1.5px 0px 0px rgba(0, 0, 0, 0.25) inset',
   },
   'shadow-button-primary-success-inset': {
     value:
-      '0px 2px 0px 0px rgba(0, 0, 0, 0.60) inset, 1px 0px 1px 0px rgba(0, 0, 0, 0.20) inset, -1px 0px 1px 0px rgba(0, 0, 0, 0.20) inset',
+      '-1px 0px 1px 0px rgba(0, 0, 0, 0.2) inset, 1px 0px 1px 0px rgba(0, 0, 0, 0.2) inset, 0px 2px 0px 0px rgba(0, 0, 0, 0.6) inset',
   },
   'shadow-border-inset': {
     value: '0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset',