Neutral bug fixes (#1026)

* add counter bg colors * dark hc * dark hc * neutral muted * test * try no alpha * github-actions[bot] Regenerated snapshots * fix invisible counter * Create quiet-wombats-punch.md * remove code comments * github-actions[bot] Regenerated snapshots --------- Co-authored-by: langermank <langermank@users.noreply.github.com>
primer · Aug 14, 2024 · 401fef1 · 401fef1
1 parent 9ab8102
commit 401fef1
Show file tree

Hide file tree

Showing 27 changed files with 135 additions and 8 deletions.
diff --git a/.changeset/quiet-wombats-punch.md b/.changeset/quiet-wombats-punch.md
@@ -0,0 +1,6 @@
+---
+"@primer/primitives": major
+---
+
+- Update counter bg styles
+- Contrast fixes
diff --git a/...torybook-all-color-swatches-dark-buttonCounter-invisible-bgColor-rest-linux.png b/...torybook-all-color-swatches-dark-buttonCounter-invisible-bgColor-rest-linux.png
diff --git a/...l-color-swatches-dark-colorblind-buttonCounter-invisible-bgColor-rest-linux.png b/...l-color-swatches-dark-colorblind-buttonCounter-invisible-bgColor-rest-linux.png
diff --git a/...storybook-all-color-swatches-dark-colorblind-counter-bgColor-emphasis-linux.png b/...storybook-all-color-swatches-dark-colorblind-counter-bgColor-emphasis-linux.png
diff --git a/...ts/storybook-all-color-swatches-dark-colorblind-counter-bgColor-muted-linux.png b/...ts/storybook-all-color-swatches-dark-colorblind-counter-bgColor-muted-linux.png
diff --git a/...-snapshots/storybook-all-color-swatches-dark-counter-bgColor-emphasis-linux.png b/...-snapshots/storybook-all-color-swatches-dark-counter-bgColor-emphasis-linux.png
diff --git a/....ts-snapshots/storybook-all-color-swatches-dark-counter-bgColor-muted-linux.png b/....ts-snapshots/storybook-all-color-swatches-dark-counter-bgColor-muted-linux.png
diff --git a/...rybook-all-color-swatches-dark-high-contrast-counter-bgColor-emphasis-linux.png b/...rybook-all-color-swatches-dark-high-contrast-counter-bgColor-emphasis-linux.png
diff --git a/...storybook-all-color-swatches-dark-high-contrast-counter-bgColor-muted-linux.png b/...storybook-all-color-swatches-dark-high-contrast-counter-bgColor-muted-linux.png
diff --git a/...l-color-swatches-dark-tritanopia-buttonCounter-invisible-bgColor-rest-linux.png b/...l-color-swatches-dark-tritanopia-buttonCounter-invisible-bgColor-rest-linux.png
diff --git a/...storybook-all-color-swatches-dark-tritanopia-counter-bgColor-emphasis-linux.png b/...storybook-all-color-swatches-dark-tritanopia-counter-bgColor-emphasis-linux.png
diff --git a/...ts/storybook-all-color-swatches-dark-tritanopia-counter-bgColor-muted-linux.png b/...ts/storybook-all-color-swatches-dark-tritanopia-counter-bgColor-muted-linux.png
diff --git a/...torybook-all-color-swatches-light-colorblind-counter-bgColor-emphasis-linux.png b/...torybook-all-color-swatches-light-colorblind-counter-bgColor-emphasis-linux.png
diff --git a/...s/storybook-all-color-swatches-light-colorblind-counter-bgColor-muted-linux.png b/...s/storybook-all-color-swatches-light-colorblind-counter-bgColor-muted-linux.png
diff --git a/...snapshots/storybook-all-color-swatches-light-counter-bgColor-emphasis-linux.png b/...snapshots/storybook-all-color-swatches-light-counter-bgColor-emphasis-linux.png
diff --git a/...ts-snapshots/storybook-all-color-swatches-light-counter-bgColor-muted-linux.png b/...ts-snapshots/storybook-all-color-swatches-light-counter-bgColor-muted-linux.png
diff --git a/...ybook-all-color-swatches-light-high-contrast-counter-bgColor-emphasis-linux.png b/...ybook-all-color-swatches-light-high-contrast-counter-bgColor-emphasis-linux.png
diff --git a/...torybook-all-color-swatches-light-high-contrast-counter-bgColor-muted-linux.png b/...torybook-all-color-swatches-light-high-contrast-counter-bgColor-muted-linux.png
diff --git a/...torybook-all-color-swatches-light-tritanopia-counter-bgColor-emphasis-linux.png b/...torybook-all-color-swatches-light-tritanopia-counter-bgColor-emphasis-linux.png
diff --git a/...s/storybook-all-color-swatches-light-tritanopia-counter-bgColor-muted-linux.png b/...s/storybook-all-color-swatches-light-tritanopia-counter-bgColor-muted-linux.png
diff --git a/blob-report/report.zip b/blob-report/report.zip
diff --git a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5
@@ -18,15 +18,23 @@
       $type: 'color',
     },
     neutral: {
-      $value: '{base.color.neutral.10}',
+      $value: '{base.color.neutral.11}',
       $type: 'color',
     },
     accent: {
       $value: '{base.color.blue.3}',
       $type: 'color',
       mix: {
         color: '{base.color.blue.2}',
-        weight: 0.05,
+        weight: 0.08,
+      },
+    },
+    success: {
+      $value: '{base.color.green.3}',
+      $type: 'color',
+      mix: {
+        color: '{base.color.green.2}',
+        weight: 0.08,
       },
     },
     danger: {
@@ -40,10 +48,18 @@
     done: {
       $value: '{base.color.purple.3}',
       $type: 'color',
+      mix: {
+        color: '{base.color.purple.2}',
+        weight: 0.5,
+      },
     },
     sponsors: {
       $value: '{base.color.pink.3}',
       $type: 'color',
+      mix: {
+        color: '{base.color.pink.2}',
+        weight: 0.08,
+      },
     },
   },
   bgColor: {
@@ -68,6 +84,11 @@
         $value: '{base.color.neutral.7}',
         $type: 'color',
       },
+      muted: {
+        $value: '{base.color.neutral.3}',
+        $type: 'color',
+        alpha: 1,
+      },
     },
     accent: {
       emphasis: {
@@ -226,6 +247,21 @@
       $value: '{borderColor.default}',
       $type: 'color',
     },
+    bgColor: {
+      muted: {
+        $value: '{bgColor.neutral.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+        alpha: 1,
+      },
+    },
   },
   control: {
     fgColor: {

diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5
@@ -749,6 +749,32 @@
         },
       },
     },
+    bgColor: {
+      muted: {
+        $value: '{bgColor.neutral.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+      emphasis: {
+        $value: '{bgColor.neutral.emphasis}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      }
+    },
   },
   button: {
     default: {
@@ -1572,7 +1598,6 @@
               scopes: ['bgColor'],
             },
           },
-          alpha: 1,
         },
       },
     },

diff --git a/src/tokens/functional/color/dark/primitives-dark.json5 b/src/tokens/functional/color/dark/primitives-dark.json5
@@ -402,7 +402,7 @@
     },
     neutral: {
       muted: {
-        $value: '{base.color.neutral.6}',
+        $value: '{base.color.neutral.8}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -412,7 +412,7 @@
             scopes: ['bgColor'],
           },
         },
-        alpha: 0.7,
+        alpha: 0.2,
       },
       emphasis: {
         $value: '{base.color.neutral.8}',

diff --git a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 b/src/tokens/functional/color/light/overrides/light.high-contrast.json5
@@ -14,7 +14,7 @@
       $type: 'color',
     },
     neutral: {
-      $value: '{base.color.neutral.10}',
+      $value: '{base.color.neutral.11}',
       $type: 'color',
     },
     success: {
@@ -64,6 +64,11 @@
         $value: '{base.color.neutral.10}',
         $type: 'color',
       },
+      muted: {
+        $value: '{base.color.neutral.4}',
+        $type: 'color',
+        alpha: 1,
+      },
     },
     disabled: {
       $value: '{base.color.neutral.4}',
@@ -205,6 +210,21 @@
       $value: '{borderColor.default}',
       $type: 'color',
     },
+    bgColor: {
+      muted: {
+        $value: '{bgColor.neutral.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+        alpha: 1,
+      },
+    },
   },
   control: {
     fgColor: {
@@ -364,6 +384,20 @@
         $type: 'color',
       },
     },
+    invisible: {
+      fgColor: {
+        hover: {
+          $value: '{base.color.neutral.11}',
+          $type: 'color',
+        },
+      },
+      iconColor: {
+        hover: {
+          $value: '{base.color.neutral.11}',
+          $type: 'color',
+        },
+      }
+    }
   },
   buttonCounter: {
     default: {

diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5
@@ -748,6 +748,32 @@
         },
       },
     },
+    bgColor: {
+      muted: {
+        $value: '{bgColor.neutral.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+      emphasis: {
+        $value: '{bgColor.neutral.emphasis}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      }
+    },
   },
   button: {
     default: {

diff --git a/src/tokens/functional/color/light/primitives-light.json5 b/src/tokens/functional/color/light/primitives-light.json5
@@ -401,7 +401,7 @@
     },
     neutral: {
       muted: {
-        $value: '{base.color.neutral.4}',
+        $value: '{base.color.neutral.8}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -411,7 +411,7 @@
             scopes: ['bgColor'],
           },
         },
-        alpha: 0.7,
+        alpha: 0.12,
       },
       emphasis: {
         $value: '{base.color.neutral.9}',