v8 bug fixes + enhancements for rollout (#843)

* fix shadow * fix avatar box-shadow value * fix white, add black text * add white/black tokens * Create silver-jars-rescue.md * github-actions[bot] Regenerated snapshots * fix high contrast primary button * github-actions[bot] Regenerated snapshots --------- Co-authored-by: langermank <[email protected]>
primer · Mar 21, 2024 · d43b576 · d43b576
1 parent 16d44b3
commit d43b576
Show file tree

Hide file tree

Showing 41 changed files with 107 additions and 44 deletions.
diff --git a/.changeset/silver-jars-rescue.md b/.changeset/silver-jars-rescue.md
@@ -0,0 +1,5 @@
+---
+"@primer/primitives": patch
+---
+
+v8 bug fixes + enhancements for rollout
diff --git a/...ook.test.ts-snapshots/storybook-all-color-swatches-dark-bgColor-black-linux.png b/...ook.test.ts-snapshots/storybook-all-color-swatches-dark-bgColor-black-linux.png
diff --git a/...ook.test.ts-snapshots/storybook-all-color-swatches-dark-bgColor-white-linux.png b/...ook.test.ts-snapshots/storybook-all-color-swatches-dark-bgColor-white-linux.png
diff --git a/...ots/storybook-all-color-swatches-dark-button-primary-bgColor-disabled-linux.png b/...ots/storybook-all-color-swatches-dark-button-primary-bgColor-disabled-linux.png
diff --git a/...storybook-all-color-swatches-dark-button-primary-borderColor-disabled-linux.png b/...storybook-all-color-swatches-dark-button-primary-borderColor-disabled-linux.png
diff --git a/...ots/storybook-all-color-swatches-dark-button-primary-fgColor-disabled-linux.png b/...ots/storybook-all-color-swatches-dark-button-primary-fgColor-disabled-linux.png
diff --git a/...-snapshots/storybook-all-color-swatches-dark-colorblind-bgColor-black-linux.png b/...-snapshots/storybook-all-color-swatches-dark-colorblind-bgColor-black-linux.png
diff --git a/...-snapshots/storybook-all-color-swatches-dark-colorblind-bgColor-white-linux.png b/...-snapshots/storybook-all-color-swatches-dark-colorblind-bgColor-white-linux.png
diff --git a/...ok-all-color-swatches-dark-colorblind-button-primary-fgColor-disabled-linux.png b/...ok-all-color-swatches-dark-colorblind-button-primary-fgColor-disabled-linux.png
diff --git a/...-snapshots/storybook-all-color-swatches-dark-colorblind-fgColor-black-linux.png b/...-snapshots/storybook-all-color-swatches-dark-colorblind-fgColor-black-linux.png
diff --git a/...ook.test.ts-snapshots/storybook-all-color-swatches-dark-fgColor-black-linux.png b/...ook.test.ts-snapshots/storybook-all-color-swatches-dark-fgColor-black-linux.png
diff --git a/...apshots/storybook-all-color-swatches-dark-high-contrast-bgColor-black-linux.png b/...apshots/storybook-all-color-swatches-dark-high-contrast-bgColor-black-linux.png
diff --git a/...apshots/storybook-all-color-swatches-dark-high-contrast-bgColor-white-linux.png b/...apshots/storybook-all-color-swatches-dark-high-contrast-bgColor-white-linux.png
diff --git a/...all-color-swatches-dark-high-contrast-button-primary-bgColor-disabled-linux.png b/...all-color-swatches-dark-high-contrast-button-primary-bgColor-disabled-linux.png
diff --git a/...apshots/storybook-all-color-swatches-dark-high-contrast-fgColor-black-linux.png b/...apshots/storybook-all-color-swatches-dark-high-contrast-fgColor-black-linux.png
diff --git a/...-snapshots/storybook-all-color-swatches-dark-tritanopia-bgColor-black-linux.png b/...-snapshots/storybook-all-color-swatches-dark-tritanopia-bgColor-black-linux.png
diff --git a/...-snapshots/storybook-all-color-swatches-dark-tritanopia-bgColor-white-linux.png b/...-snapshots/storybook-all-color-swatches-dark-tritanopia-bgColor-white-linux.png
diff --git a/...ok-all-color-swatches-dark-tritanopia-button-primary-fgColor-disabled-linux.png b/...ok-all-color-swatches-dark-tritanopia-button-primary-fgColor-disabled-linux.png
diff --git a/...-snapshots/storybook-all-color-swatches-dark-tritanopia-fgColor-black-linux.png b/...-snapshots/storybook-all-color-swatches-dark-tritanopia-fgColor-black-linux.png
diff --git a/...ok.test.ts-snapshots/storybook-all-color-swatches-light-bgColor-black-linux.png b/...ok.test.ts-snapshots/storybook-all-color-swatches-light-bgColor-black-linux.png
diff --git a/...ok.test.ts-snapshots/storybook-all-color-swatches-light-bgColor-white-linux.png b/...ok.test.ts-snapshots/storybook-all-color-swatches-light-bgColor-white-linux.png
diff --git a/...snapshots/storybook-all-color-swatches-light-colorblind-bgColor-black-linux.png b/...snapshots/storybook-all-color-swatches-light-colorblind-bgColor-black-linux.png
diff --git a/...snapshots/storybook-all-color-swatches-light-colorblind-bgColor-white-linux.png b/...snapshots/storybook-all-color-swatches-light-colorblind-bgColor-white-linux.png
diff --git a/...snapshots/storybook-all-color-swatches-light-colorblind-fgColor-black-linux.png b/...snapshots/storybook-all-color-swatches-light-colorblind-fgColor-black-linux.png
diff --git a/...ok.test.ts-snapshots/storybook-all-color-swatches-light-fgColor-black-linux.png b/...ok.test.ts-snapshots/storybook-all-color-swatches-light-fgColor-black-linux.png
diff --git a/...pshots/storybook-all-color-swatches-light-high-contrast-bgColor-black-linux.png b/...pshots/storybook-all-color-swatches-light-high-contrast-bgColor-black-linux.png
diff --git a/...pshots/storybook-all-color-swatches-light-high-contrast-bgColor-white-linux.png b/...pshots/storybook-all-color-swatches-light-high-contrast-bgColor-white-linux.png
diff --git a/...pshots/storybook-all-color-swatches-light-high-contrast-fgColor-black-linux.png b/...pshots/storybook-all-color-swatches-light-high-contrast-fgColor-black-linux.png
diff --git a/...snapshots/storybook-all-color-swatches-light-tritanopia-bgColor-black-linux.png b/...snapshots/storybook-all-color-swatches-light-tritanopia-bgColor-black-linux.png
diff --git a/...snapshots/storybook-all-color-swatches-light-tritanopia-bgColor-white-linux.png b/...snapshots/storybook-all-color-swatches-light-tritanopia-bgColor-white-linux.png
diff --git a/...snapshots/storybook-all-color-swatches-light-tritanopia-fgColor-black-linux.png b/...snapshots/storybook-all-color-swatches-light-tritanopia-fgColor-black-linux.png
diff --git a/docs/storybook/stories/Color/Functional/Foreground.stories.tsx b/docs/storybook/stories/Color/Functional/Foreground.stories.tsx
@@ -9,14 +9,7 @@ export default {
   },
 }
 
-const fgColors = [
-  'fgColor-default',
-  'fgColor-muted',
-  'fgColor-onEmphasis',
-  'fgColor-disabled',
-  'fgColor-link',
-  'fgColor-white',
-]
+const fgColors = ['fgColor-default', 'fgColor-muted', 'fgColor-onEmphasis', 'fgColor-disabled', 'fgColor-link']
 
 export const Foreground = () => {
   return (

diff --git a/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 b/src/tokens/functional/color/dark/overrides/dark.dimmed.json5
@@ -24,6 +24,18 @@
           },
         },
       },
+      fgColor: {
+        rest: {
+          $value: '#ffffff',
+          $type: 'color',
+        },
+      },
+      iconColor: {
+        rest: {
+          $value: '#ffffff',
+          $type: 'color',
+        },
+      },
     },
     invisible: {
       iconColor: {

diff --git a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5
@@ -211,16 +211,6 @@
           $type: 'color',
         },
       },
-      bgColor: {
-        disabled: {
-          $value: '{base.color.green.5}',
-          $type: 'color',
-          mix: {
-            color: '{base.color.green.0}',
-            weight: 0.6,
-          },
-        },
-      },
       borderColor: {
         rest: {
           $value: '{base.color.green.2}',

diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5
@@ -14,7 +14,7 @@
       alpha: 0.1,
     },
     borderColor: {
-      $value: '{borderColor.muted}',
+      $value: '{base.color.white}',
       $type: 'color',
       $extensions: {
         'org.primer.figma': {
@@ -24,6 +24,7 @@
           scopes: ['borderColor'],
         },
       },
+      alpha: 0.15,
     },
   },
   avatarStack: {
@@ -932,7 +933,7 @@
               scopes: ['fgColor'],
             },
           },
-          alpha: 0.8,
+          alpha: 0.4,
         },
       },
       iconColor: {
@@ -1006,7 +1007,7 @@
             },
           },
           mix: {
-            color: '{base.color.green.0}',
+            color: '{base.color.green.8}',
             weight: 0.6,
           },
         },

diff --git a/src/tokens/functional/color/dark/primitives-dark.json5 b/src/tokens/functional/color/dark/primitives-dark.json5
@@ -54,7 +54,7 @@
       },
     },
     white: {
-      $value: '#ffffff',
+      $value: '{base.color.white}',
       $type: 'color',
       $extensions: {
         'org.primer.figma': {
@@ -65,6 +65,18 @@
         },
       },
     },
+    black: {
+      $value: '{base.color.black}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'dark',
+          group: 'semantic',
+          scopes: ['fgColor'],
+        },
+      },
+    },
     disabled: {
       $value: '{base.color.gray.4}',
       $type: 'color',
@@ -339,6 +351,30 @@
         },
       },
     },
+    white: {
+      $value: '{base.color.white}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'dark',
+          group: 'semantic',
+          scopes: ['bgColor'],
+        },
+      },
+    },
+    black: {
+      $value: '{base.color.black}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'dark',
+          group: 'semantic',
+          scopes: ['bgColor'],
+        },
+      },
+    },
     disabled: {
       $value: '{base.color.gray.7}',
       $type: 'color',

diff --git a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 b/src/tokens/functional/color/light/overrides/light.high-contrast.json5
@@ -137,6 +137,13 @@
     },
   },
   // patterns
+  avatar: {
+    borderColor: {
+      $value: '{base.color.black}',
+      $type: 'color',
+      alpha: 0.9,
+    },
+  },
   topicTag: {
     borderColor: {
       $value: '{borderColor.accent.emphasis}',
@@ -427,7 +434,7 @@
     borderColor: {
       $value: '{borderColor.muted}',
       $type: 'color',
-      alpha: null
+      alpha: null,
     },
   },
 }
diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5
@@ -13,7 +13,7 @@
       },
     },
     borderColor: {
-      $value: '{borderColor.default}',
+      $value: '{base.color.black}',
       $type: 'color',
       $extensions: {
         'org.primer.figma': {
@@ -23,6 +23,7 @@
           scopes: ['borderColor'],
         },
       },
+      alpha: 0.15,
     },
   },
   avatarStack: {

diff --git a/src/tokens/functional/color/light/primitives-light.json5 b/src/tokens/functional/color/light/primitives-light.json5
@@ -50,7 +50,19 @@
       },
     },
     white: {
-      $value: '#ffffff',
+      $value: '{base.color.white}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'light',
+          group: 'semantic',
+          scopes: ['fgColor'],
+        },
+      },
+    },
+    black: {
+      $value: '{base.color.black}',
       $type: 'color',
       $extensions: {
         'org.primer.figma': {
@@ -335,6 +347,30 @@
         },
       },
     },
+    white: {
+      $value: '{base.color.white}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'light',
+          group: 'semantic',
+          scopes: ['bgColor'],
+        },
+      },
+    },
+    black: {
+      $value: '{base.color.black}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'light',
+          group: 'semantic',
+          scopes: ['bgColor'],
+        },
+      },
+    },
     disabled: {
       $value: '{base.color.gray.1}',
       $type: 'color',

diff --git a/src/tokens/functional/shadow/dark.json5 b/src/tokens/functional/shadow/dark.json5
@@ -174,15 +174,6 @@
             spread: '0px',
             inset: false,
           },
-          {
-            color: '{base.color.black}',
-            alpha: 0.4,
-            offsetX: '0px',
-            offsetY: '1px',
-            blur: '3px',
-            spread: '0px',
-            inset: false,
-          },
         ],
         $type: 'shadow',
         $extensions: {

diff --git a/src/tokens/functional/shadow/light.json5 b/src/tokens/functional/shadow/light.json5
@@ -167,22 +167,13 @@
         $value: [
           {
             color: '{base.color.black}',
-            alpha: 0.06,
+            alpha: 0.04,
             offsetX: '0px',
             offsetY: '1px',
             blur: '0px',
             spread: '0px',
             inset: false,
           },
-          {
-            color: '{base.color.black}',
-            alpha: 0.08,
-            offsetX: '0px',
-            offsetY: '1px',
-            blur: '3px',
-            spread: '0px',
-            inset: false,
-          },
         ],
         $type: 'shadow',
         $extensions: {