Add borderColor-translucent (#969)

* new border * Create sweet-jeans-pretend.md * add more dots to test * remove temp story * add to docs * github-actions[bot] Regenerated snapshots --------- Co-authored-by: langermank <langermank@users.noreply.github.com>
primer · Jun 17, 2024 · 52d8bf7 · 52d8bf7
1 parent 31e827d
commit 52d8bf7
Show file tree

Hide file tree

Showing 17 changed files with 44 additions and 4 deletions.
diff --git a/.changeset/sweet-jeans-pretend.md b/.changeset/sweet-jeans-pretend.md
@@ -0,0 +1,5 @@
+---
+"@primer/primitives": patch
+---
+
+Add `borderColor-translucent`
diff --git a/...s-snapshots/storybook-all-color-swatches-dark-borderColor-translucent-linux.png b/...s-snapshots/storybook-all-color-swatches-dark-borderColor-translucent-linux.png
diff --git a/.../storybook-all-color-swatches-dark-colorblind-borderColor-translucent-linux.png b/.../storybook-all-color-swatches-dark-colorblind-borderColor-translucent-linux.png
diff --git a/...orybook-all-color-swatches-dark-high-contrast-borderColor-translucent-linux.png b/...orybook-all-color-swatches-dark-high-contrast-borderColor-translucent-linux.png
diff --git a/.../storybook-all-color-swatches-dark-tritanopia-borderColor-translucent-linux.png b/.../storybook-all-color-swatches-dark-tritanopia-borderColor-translucent-linux.png
diff --git a/...-snapshots/storybook-all-color-swatches-light-borderColor-translucent-linux.png b/...-snapshots/storybook-all-color-swatches-light-borderColor-translucent-linux.png
diff --git a/...storybook-all-color-swatches-light-colorblind-borderColor-translucent-linux.png b/...storybook-all-color-swatches-light-colorblind-borderColor-translucent-linux.png
diff --git a/...rybook-all-color-swatches-light-high-contrast-borderColor-translucent-linux.png b/...rybook-all-color-swatches-light-high-contrast-borderColor-translucent-linux.png
diff --git a/...storybook-all-color-swatches-light-tritanopia-borderColor-translucent-linux.png b/...storybook-all-color-swatches-light-tritanopia-borderColor-translucent-linux.png
diff --git a/blob-report/report.zip b/blob-report/report.zip
diff --git a/docs/storybook/stories/Color/Functional/Border.stories.tsx b/docs/storybook/stories/Color/Functional/Border.stories.tsx
@@ -15,6 +15,7 @@ const borderColors = [
   'borderColor-emphasis',
   'borderColor-disabled',
   'borderColor-transparent',
+  'borderColor-translucent',
 ]
 
 export const Border = () => {

diff --git a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5
@@ -42,6 +42,11 @@
       $type: 'color',
       alpha: 1,
     },
+    translucent: {
+      $value: '{base.color.neutral.5}',
+      $type: 'color',
+      alpha: 1,
+    },
     neutral: {
       muted: {
         $value: '{base.color.neutral.4}',

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: '{base.color.white}',
+      $value: '{borderColor.translucent}',
       $type: 'color',
       $extensions: {
         'org.primer.figma': {
@@ -24,7 +24,6 @@
           scopes: ['borderColor'],
         },
       },
-      alpha: 0.15,
     },
   },
   avatarStack: {

diff --git a/src/tokens/functional/color/dark/primitives-dark.json5 b/src/tokens/functional/color/dark/primitives-dark.json5
@@ -846,6 +846,19 @@
         },
       },
     },
+    translucent: {
+      $value: '{base.color.white}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'dark',
+          group: 'component (internal)',
+          scopes: ['borderColor'],
+        },
+      },
+      alpha: 0.15,
+    },
     neutral: {
       muted: {
         $value: '{base.color.neutral.4}',

diff --git a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 b/src/tokens/functional/color/light/overrides/light.high-contrast.json5
@@ -71,6 +71,11 @@
       $type: 'color',
       alpha: 1,
     },
+    translucent: {
+      $value: '{base.color.neutral.8}',
+      $type: 'color',
+      alpha: 1,
+    },
     neutral: {
       muted: {
         $value: '{base.color.neutral.4}',

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: '{base.color.black}',
+      $value: '{borderColor.translucent}',
       $type: 'color',
       $extensions: {
         'org.primer.figma': {
@@ -23,7 +23,6 @@
           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
@@ -836,6 +836,19 @@
         },
       },
     },
+    translucent: {
+      $value: '{base.color.black}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'light',
+          group: 'semantic',
+          scopes: ['borderColor'],
+        },
+      },
+      alpha: 0.15,
+    },
     neutral: {
       muted: {
         $value: '{base.color.neutral.3}',