@primer/primitives 9.1.1 → 9.1.2

package/dist/styleLint/functional/themes/light-colorblind.json

@@ -9042,13 +9042,31 @@
     "path": ["sideNav", "bgColor", "selected"]
   },
   "skeletonLoader-bgColor": {
-    "value": "#f6f8fa",
+    "value": "#818b981a",
     "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "alpha": 0.1,
     "filePath": "src/tokens/functional/color/light/patterns-light.json5",
     "isSource": true,
     "original": {
-      "value": "{bgColor.muted}",
-      "$type": "color"
+      "value": "{base.color.neutral.8}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      },
+      "alpha": 0.1
     },
     "name": "skeletonLoader-bgColor",
     "attributes": {},

package/dist/styleLint/functional/themes/light-high-contrast.json

@@ -9060,13 +9060,31 @@
     "path": ["sideNav", "bgColor", "selected"]
   },
   "skeletonLoader-bgColor": {
-    "value": "#e6eaef",
+    "value": "#dae0e7",
     "$type": "color",
-    "filePath": "src/tokens/functional/color/light/patterns-light.json5",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "alpha": 1,
+    "filePath": "src/tokens/functional/color/light/overrides/light.high-contrast.json5",
     "isSource": true,
     "original": {
-      "value": "{bgColor.muted}",
-      "$type": "color"
+      "value": "{base.color.neutral.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      },
+      "alpha": 1
     },
     "name": "skeletonLoader-bgColor",
     "attributes": {},

package/dist/styleLint/functional/themes/light-tritanopia.json

@@ -9038,13 +9038,31 @@
     "path": ["sideNav", "bgColor", "selected"]
   },
   "skeletonLoader-bgColor": {
-    "value": "#f6f8fa",
+    "value": "#818b981a",
     "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "alpha": 0.1,
     "filePath": "src/tokens/functional/color/light/patterns-light.json5",
     "isSource": true,
     "original": {
-      "value": "{bgColor.muted}",
-      "$type": "color"
+      "value": "{base.color.neutral.8}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      },
+      "alpha": 0.1
     },
     "name": "skeletonLoader-bgColor",
     "attributes": {},

package/dist/styleLint/functional/themes/light.json

@@ -9038,13 +9038,31 @@
     "path": ["sideNav", "bgColor", "selected"]
   },
   "skeletonLoader-bgColor": {
-    "value": "#f6f8fa",
+    "value": "#818b981a",
     "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "alpha": 0.1,
     "filePath": "src/tokens/functional/color/light/patterns-light.json5",
     "isSource": true,
     "original": {
-      "value": "{bgColor.muted}",
-      "$type": "color"
+      "value": "{base.color.neutral.8}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      },
+      "alpha": 0.1
     },
     "name": "skeletonLoader-bgColor",
     "attributes": {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "9.1.1",
+  "version": "9.1.2",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",

package/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,
+    },
+  }
 }

package/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: {

package/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,
+    },
+  }
 }

package/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: {

package/dist/build/transformers/colorToHexAlpha.d.ts

@@ -1,8 +0,0 @@
-import type StyleDictionary from 'style-dictionary';
-/**
- * @description replaces tokens value with `hex8` color using the tokens `alpha` property to specify the value used for alpha
- * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
- * @matcher matches all tokens of $type `color` with an `alpha` property
- * @transformer returns `hex8` string
- */
-export declare const colorToHexAlpha: StyleDictionary.Transform;

package/dist/build/transformers/colorToHexAlpha.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorToHexAlpha = void 0;
-const color2k_1 = require("color2k");
-const alpha_1 = require("./utilities/alpha");
-const filters_1 = require("../filters");
-const getTokenValue_1 = require("./utilities/getTokenValue");
-/**
- * @description replaces tokens value with `hex8` color using the tokens `alpha` property to specify the value used for alpha
- * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
- * @matcher matches all tokens of $type `color` with an `alpha` property
- * @transformer returns `hex8` string
- */
-exports.colorToHexAlpha = {
-    type: `value`,
-    transitive: true,
-    matcher: filters_1.isColorWithAlpha,
-    transformer: (token) => {
-        // don't change if alpha is null
-        if (token.alpha === null) {
-            return (0, color2k_1.toHex)((0, getTokenValue_1.getTokenValue)(token));
-        }
-        return (0, color2k_1.toHex)((0, alpha_1.alpha)((0, getTokenValue_1.getTokenValue)(token), token.alpha, token));
-    },
-};