Update skeleton pattern to work on muted bg (#1053)

* add skeleton color * name update * Create olive-rabbits-clean.md * github-actions[bot] Regenerated snapshots --------- Co-authored-by: langermank <langermank@users.noreply.github.com>
primer · Sep 12, 2024 · 8892a4c · 8892a4c
1 parent 6c3f68f
commit 8892a4c
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 2 deletions.
diff --git a/.changeset/olive-rabbits-clean.md b/.changeset/olive-rabbits-clean.md
@@ -0,0 +1,5 @@
+---
+"@primer/primitives": patch
+---
+
+Update `skeleton` pattern color
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
@@ -932,4 +932,11 @@
       $type: 'color',
     },
   },
+  skeletonLoader: {
+    bgColor: {
+      $value: '{base.color.neutral.5}',
+      $type: 'color',
+      alpha: 1,
+    },
+  }
 }
diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5
@@ -2047,8 +2047,17 @@
   },
   skeletonLoader: {
     bgColor: {
-      $value: '{bgColor.muted}',
+      $value: '{base.color.neutral.8}',
       $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'dark',
+          group: 'component',
+          scopes: ['bgColor'],
+        },
+      },
+      alpha: 0.2,
     },
   },
   timelineBadge: {

diff --git a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 b/src/tokens/functional/color/light/overrides/light.high-contrast.json5
@@ -816,4 +816,11 @@
       },
     },
   },
+  skeletonLoader: {
+    bgColor: {
+      $value: '{base.color.neutral.5}',
+      $type: 'color',
+      alpha: 1,
+    },
+  }
 }
diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5
@@ -2041,8 +2041,17 @@
   },
   skeletonLoader: {
     bgColor: {
-      $value: '{bgColor.muted}',
+      $value: '{base.color.neutral.8}',
       $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'light',
+          group: 'component',
+          scopes: ['bgColor'],
+        },
+      },
+      alpha: 0.1,
     },
   },
   timelineBadge: {