@primer/primitives 9.1.1 → 9.1.2

package/dist/build/PrimerStyleDictionary.js

@@ -59,7 +59,6 @@ style_dictionary_1.default.registerFormat({
  */
 style_dictionary_1.default.registerTransform(Object.assign({ name: 'color/rgbAlpha' }, transformers_1.colorToRgbAlpha));
 style_dictionary_1.default.registerTransform(Object.assign({ name: 'color/rgbaFloat' }, transformers_1.colorToRgbaFloat));
-style_dictionary_1.default.registerTransform(Object.assign({ name: 'color/hexAlpha' }, transformers_1.colorToHexAlpha));
 style_dictionary_1.default.registerTransform(Object.assign({ name: 'color/hexMix' }, transformers_1.colorToHexMix));
 style_dictionary_1.default.registerTransform(Object.assign({ name: 'color/hex' }, transformers_1.colorToHex));
 style_dictionary_1.default.registerTransform(Object.assign({ name: 'float/pixel' }, transformers_1.floatToPixel));

package/dist/build/platforms/css.js

@@ -25,7 +25,6 @@ const css = (outputFile, prefix, buildPath, options) => {
         transforms: [
             'name/pathToKebabCase',
             'color/hex',
-            'color/hexAlpha',
             'color/hexMix',
             'dimension/rem',
             'duration/css',

package/dist/build/platforms/docJson.js

@@ -9,7 +9,6 @@ const docJson = (outputFile, prefix, buildPath) => ({
         'name/pathToKebabCase',
         'color/hex',
         'color/hexMix',
-        'color/hexAlpha',
         'dimension/rem',
         'shadow/css',
         'border/css',

package/dist/build/platforms/fallbacks.js

@@ -9,7 +9,6 @@ const fallbacks = (outputFile, prefix, buildPath) => ({
         'name/pathToKebabCase',
         'color/hex',
         'color/hexMix',
-        'color/hexAlpha',
         'dimension/rem',
         'shadow/css',
         'border/css',

package/dist/build/platforms/javascript.js

@@ -8,7 +8,6 @@ const javascript = (outputFile, prefix, buildPath) => ({
     transforms: [
         'color/hex',
         'color/hexMix',
-        'color/hexAlpha',
         'dimension/rem',
         'shadow/css',
         'border/css',

package/dist/build/platforms/json.js

@@ -8,7 +8,6 @@ const json = (outputFile, prefix, buildPath) => ({
     transforms: [
         'color/hex',
         'color/hexMix',
-        'color/hexAlpha',
         'dimension/rem',
         'shadow/css',
         'border/css',

package/dist/build/platforms/styleLint.js

@@ -9,7 +9,6 @@ const styleLint = (outputFile, prefix, buildPath) => ({
         'name/pathToKebabCase',
         'color/hex',
         'color/hexMix',
-        'color/hexAlpha',
         'dimension/remPxArray',
         'shadow/css',
         'border/css',

package/dist/build/platforms/typeDefinitions.js

@@ -8,7 +8,6 @@ const typeDefinitions = (outputFile, prefix, buildPath) => ({
     buildPath,
     transforms: [
         'color/hex',
-        'color/hexAlpha',
         'shadow/css',
         'border/css',
         'dimension/rem',

package/dist/build/platforms/typescript.js

@@ -8,7 +8,6 @@ const typescript = (outputFile, prefix, buildPath) => ({
     transforms: [
         'color/hex',
         'color/hexMix',
-        'color/hexAlpha',
         'dimension/rem',
         'shadow/css',
         'border/css',

package/dist/build/transformers/colorToHex.js

@@ -4,6 +4,7 @@ exports.colorToHex = void 0;
 const color2k_1 = require("color2k");
 const filters_1 = require("../filters");
 const getTokenValue_1 = require("./utilities/getTokenValue");
+const alpha_1 = require("./utilities/alpha");
 /**
  * @description converts color tokens value to `hex6` or `hex8`
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
@@ -14,5 +15,12 @@ exports.colorToHex = {
     type: `value`,
     transitive: true,
     matcher: filters_1.isColor,
-    transformer: (token) => (0, color2k_1.toHex)((0, getTokenValue_1.getTokenValue)(token)),
+    transformer: (token) => {
+        var _a, _b;
+        const alphaValue = (_a = token.alpha) !== null && _a !== void 0 ? _a : (_b = token.$extensions) === null || _b === void 0 ? void 0 : _b.alpha;
+        if (alphaValue === null || alphaValue === undefined) {
+            return (0, color2k_1.toHex)((0, getTokenValue_1.getTokenValue)(token));
+        }
+        return (0, color2k_1.toHex)((0, alpha_1.alpha)((0, getTokenValue_1.getTokenValue)(token), alphaValue, token));
+    },
 };

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

@@ -1,6 +1,5 @@
 export { borderToCss } from './borderToCss';
 export { colorToHex } from './colorToHex';
-export { colorToHexAlpha } from './colorToHexAlpha';
 export { colorToHexMix } from './colorToHexMix';
 export { colorToRgbAlpha } from './colorToRgbAlpha';
 export { colorToRgbaFloat } from './colorToRgbaFloat';

package/dist/build/transformers/index.js

@@ -1,12 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.typographyToCss = exports.shadowToCss = exports.namePathToSlashNotation = exports.namePathToKebabCase = exports.namePathToFigma = exports.namePathToDotNotation = exports.namePathToPascalCase = exports.namePathToCamelCase = exports.jsonDeprecated = exports.fontWeightToNumber = exports.fontFamilyToFigma = exports.fontFamilyToCss = exports.figmaAttributes = exports.durationToCss = exports.dimensionToPixelUnitless = exports.dimensionToRemPxArray = exports.dimensionToRem = exports.floatToPixelUnitless = exports.floatToPixel = exports.colorToRgbaFloat = exports.colorToRgbAlpha = exports.colorToHexMix = exports.colorToHexAlpha = exports.colorToHex = exports.borderToCss = void 0;
+exports.typographyToCss = exports.shadowToCss = exports.namePathToSlashNotation = exports.namePathToKebabCase = exports.namePathToFigma = exports.namePathToDotNotation = exports.namePathToPascalCase = exports.namePathToCamelCase = exports.jsonDeprecated = exports.fontWeightToNumber = exports.fontFamilyToFigma = exports.fontFamilyToCss = exports.figmaAttributes = exports.durationToCss = exports.dimensionToPixelUnitless = exports.dimensionToRemPxArray = exports.dimensionToRem = exports.floatToPixelUnitless = exports.floatToPixel = exports.colorToRgbaFloat = exports.colorToRgbAlpha = exports.colorToHexMix = exports.colorToHex = exports.borderToCss = void 0;
 var borderToCss_1 = require("./borderToCss");
 Object.defineProperty(exports, "borderToCss", { enumerable: true, get: function () { return borderToCss_1.borderToCss; } });
 var colorToHex_1 = require("./colorToHex");
 Object.defineProperty(exports, "colorToHex", { enumerable: true, get: function () { return colorToHex_1.colorToHex; } });
-var colorToHexAlpha_1 = require("./colorToHexAlpha");
-Object.defineProperty(exports, "colorToHexAlpha", { enumerable: true, get: function () { return colorToHexAlpha_1.colorToHexAlpha; } });
 var colorToHexMix_1 = require("./colorToHexMix");
 Object.defineProperty(exports, "colorToHexMix", { enumerable: true, get: function () { return colorToHexMix_1.colorToHexMix; } });
 var colorToRgbAlpha_1 = require("./colorToRgbAlpha");

package/dist/css/functional/themes/dark-colorblind.css

@@ -308,7 +308,7 @@
   --selectMenu-borderColor: #3d444d;
   --selectMenu-bgColor-active: #0c2d6b;
   --sideNav-bgColor-selected: #212830;
-  --skeletonLoader-bgColor: #151b23;
+  --skeletonLoader-bgColor: #656c7633;
   --timelineBadge-bgColor: #212830;
   --treeViewItem-leadingVisual-iconColor-rest: #9198a1;
   --underlineNav-borderColor-active: #f78166;
@@ -877,7 +877,7 @@
     --selectMenu-borderColor: #3d444d;
     --selectMenu-bgColor-active: #0c2d6b;
     --sideNav-bgColor-selected: #212830;
-    --skeletonLoader-bgColor: #151b23;
+    --skeletonLoader-bgColor: #656c7633;
     --timelineBadge-bgColor: #212830;
     --treeViewItem-leadingVisual-iconColor-rest: #9198a1;
     --underlineNav-borderColor-active: #f78166;

package/dist/css/functional/themes/dark-dimmed.css

@@ -308,7 +308,7 @@
   --selectMenu-borderColor: #3d444d;
   --selectMenu-bgColor-active: #143d79;
   --sideNav-bgColor-selected: #212830;
-  --skeletonLoader-bgColor: #262c36;
+  --skeletonLoader-bgColor: #656c7633;
   --timelineBadge-bgColor: #262c36;
   --treeViewItem-leadingVisual-iconColor-rest: #9198a1;
   --underlineNav-borderColor-active: #ec775c;
@@ -877,7 +877,7 @@
     --selectMenu-borderColor: #3d444d;
     --selectMenu-bgColor-active: #143d79;
     --sideNav-bgColor-selected: #212830;
-    --skeletonLoader-bgColor: #262c36;
+    --skeletonLoader-bgColor: #656c7633;
     --timelineBadge-bgColor: #262c36;
     --treeViewItem-leadingVisual-iconColor-rest: #9198a1;
     --underlineNav-borderColor-active: #ec775c;

package/dist/css/functional/themes/dark-high-contrast.css

@@ -308,7 +308,7 @@
   --selectMenu-borderColor: #b7bdc8;
   --selectMenu-bgColor-active: #1e60d5;
   --sideNav-bgColor-selected: #212830;
-  --skeletonLoader-bgColor: #151b23;
+  --skeletonLoader-bgColor: #2a313c;
   --timelineBadge-bgColor: #212830;
   --treeViewItem-leadingVisual-iconColor-rest: #b7bdc8;
   --underlineNav-borderColor-active: #ff967d;
@@ -877,7 +877,7 @@
     --selectMenu-borderColor: #b7bdc8;
     --selectMenu-bgColor-active: #1e60d5;
     --sideNav-bgColor-selected: #212830;
-    --skeletonLoader-bgColor: #151b23;
+    --skeletonLoader-bgColor: #2a313c;
     --timelineBadge-bgColor: #212830;
     --treeViewItem-leadingVisual-iconColor-rest: #b7bdc8;
     --underlineNav-borderColor-active: #ff967d;

package/dist/css/functional/themes/dark-tritanopia.css

@@ -308,7 +308,7 @@
   --selectMenu-borderColor: #3d444d;
   --selectMenu-bgColor-active: #0c2d6b;
   --sideNav-bgColor-selected: #212830;
-  --skeletonLoader-bgColor: #151b23;
+  --skeletonLoader-bgColor: #656c7633;
   --timelineBadge-bgColor: #212830;
   --treeViewItem-leadingVisual-iconColor-rest: #9198a1;
   --underlineNav-borderColor-active: #f78166;
@@ -877,7 +877,7 @@
     --selectMenu-borderColor: #3d444d;
     --selectMenu-bgColor-active: #0c2d6b;
     --sideNav-bgColor-selected: #212830;
-    --skeletonLoader-bgColor: #151b23;
+    --skeletonLoader-bgColor: #656c7633;
     --timelineBadge-bgColor: #212830;
     --treeViewItem-leadingVisual-iconColor-rest: #9198a1;
     --underlineNav-borderColor-active: #f78166;

package/dist/css/functional/themes/dark.css

@@ -308,7 +308,7 @@
   --selectMenu-borderColor: #3d444d;
   --selectMenu-bgColor-active: #0c2d6b;
   --sideNav-bgColor-selected: #212830;
-  --skeletonLoader-bgColor: #151b23;
+  --skeletonLoader-bgColor: #656c7633;
   --timelineBadge-bgColor: #212830;
   --treeViewItem-leadingVisual-iconColor-rest: #9198a1;
   --underlineNav-borderColor-active: #f78166;
@@ -877,7 +877,7 @@
     --selectMenu-borderColor: #3d444d;
     --selectMenu-bgColor-active: #0c2d6b;
     --sideNav-bgColor-selected: #212830;
-    --skeletonLoader-bgColor: #151b23;
+    --skeletonLoader-bgColor: #656c7633;
     --timelineBadge-bgColor: #212830;
     --treeViewItem-leadingVisual-iconColor-rest: #9198a1;
     --underlineNav-borderColor-active: #f78166;

package/dist/css/functional/themes/light-colorblind.css

@@ -309,7 +309,7 @@
   --selectMenu-borderColor: #ffffff00;
   --selectMenu-bgColor-active: #b6e3ff;
   --sideNav-bgColor-selected: #ffffff;
-  --skeletonLoader-bgColor: #f6f8fa;
+  --skeletonLoader-bgColor: #818b981a;
   --timelineBadge-bgColor: #f6f8fa;
   --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
   --underlineNav-borderColor-active: #fd8c73;
@@ -878,7 +878,7 @@
     --selectMenu-borderColor: #ffffff00;
     --selectMenu-bgColor-active: #b6e3ff;
     --sideNav-bgColor-selected: #ffffff;
-    --skeletonLoader-bgColor: #f6f8fa;
+    --skeletonLoader-bgColor: #818b981a;
     --timelineBadge-bgColor: #f6f8fa;
     --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
     --underlineNav-borderColor-active: #fd8c73;

package/dist/css/functional/themes/light-high-contrast.css

@@ -309,7 +309,7 @@
   --selectMenu-borderColor: #ffffff00;
   --selectMenu-bgColor-active: #9cd7ff;
   --sideNav-bgColor-selected: #ffffff;
-  --skeletonLoader-bgColor: #e6eaef;
+  --skeletonLoader-bgColor: #dae0e7;
   --timelineBadge-bgColor: #e6eaef;
   --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
   --underlineNav-borderColor-active: #cd3425;
@@ -878,7 +878,7 @@
     --selectMenu-borderColor: #ffffff00;
     --selectMenu-bgColor-active: #9cd7ff;
     --sideNav-bgColor-selected: #ffffff;
-    --skeletonLoader-bgColor: #e6eaef;
+    --skeletonLoader-bgColor: #dae0e7;
     --timelineBadge-bgColor: #e6eaef;
     --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
     --underlineNav-borderColor-active: #cd3425;

package/dist/css/functional/themes/light-tritanopia.css

@@ -309,7 +309,7 @@
   --selectMenu-borderColor: #ffffff00;
   --selectMenu-bgColor-active: #b6e3ff;
   --sideNav-bgColor-selected: #ffffff;
-  --skeletonLoader-bgColor: #f6f8fa;
+  --skeletonLoader-bgColor: #818b981a;
   --timelineBadge-bgColor: #f6f8fa;
   --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
   --underlineNav-borderColor-active: #fd8c73;
@@ -878,7 +878,7 @@
     --selectMenu-borderColor: #ffffff00;
     --selectMenu-bgColor-active: #b6e3ff;
     --sideNav-bgColor-selected: #ffffff;
-    --skeletonLoader-bgColor: #f6f8fa;
+    --skeletonLoader-bgColor: #818b981a;
     --timelineBadge-bgColor: #f6f8fa;
     --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
     --underlineNav-borderColor-active: #fd8c73;

package/dist/css/functional/themes/light.css

@@ -309,7 +309,7 @@
   --selectMenu-borderColor: #ffffff00;
   --selectMenu-bgColor-active: #b6e3ff;
   --sideNav-bgColor-selected: #ffffff;
-  --skeletonLoader-bgColor: #f6f8fa;
+  --skeletonLoader-bgColor: #818b981a;
   --timelineBadge-bgColor: #f6f8fa;
   --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
   --underlineNav-borderColor-active: #fd8c73;
@@ -878,7 +878,7 @@
     --selectMenu-borderColor: #ffffff00;
     --selectMenu-bgColor-active: #b6e3ff;
     --sideNav-bgColor-selected: #ffffff;
-    --skeletonLoader-bgColor: #f6f8fa;
+    --skeletonLoader-bgColor: #818b981a;
     --timelineBadge-bgColor: #f6f8fa;
     --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
     --underlineNav-borderColor-active: #fd8c73;

package/dist/docs/functional/themes/dark-colorblind.json

@@ -8704,7 +8704,7 @@
     "path": ["reactionButton", "selected", "bgColor", "rest"]
   },
   "reactionButton-selected-bgColor-hover": {
-    "value": "#3a8cfd33",
+    "value": "#3a8cfd5c",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -9033,13 +9033,31 @@
     "path": ["sideNav", "bgColor", "selected"]
   },
   "skeletonLoader-bgColor": {
-    "value": "#151b23",
+    "value": "#656c7633",
     "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "alpha": 0.2,
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{bgColor.muted}",
-      "$type": "color"
+      "value": "{base.color.neutral.8}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      },
+      "alpha": 0.2
     },
     "name": "skeletonLoader-bgColor",
     "attributes": {},

package/dist/docs/functional/themes/dark-dimmed.json

@@ -8710,7 +8710,7 @@
     "path": ["reactionButton", "selected", "bgColor", "rest"]
   },
   "reactionButton-selected-bgColor-hover": {
-    "value": "#4285e533",
+    "value": "#4285e55c",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -9039,13 +9039,31 @@
     "path": ["sideNav", "bgColor", "selected"]
   },
   "skeletonLoader-bgColor": {
-    "value": "#262c36",
+    "value": "#656c7633",
     "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "alpha": 0.2,
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{bgColor.muted}",
-      "$type": "color"
+      "value": "{base.color.neutral.8}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      },
+      "alpha": 0.2
     },
     "name": "skeletonLoader-bgColor",
     "attributes": {},

package/dist/docs/functional/themes/dark-high-contrast.json

@@ -8740,7 +8740,7 @@
     "path": ["reactionButton", "selected", "bgColor", "rest"]
   },
   "reactionButton-selected-bgColor-hover": {
-    "value": "#5dadff33",
+    "value": "#5dadff5c",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -9071,13 +9071,31 @@
     "path": ["sideNav", "bgColor", "selected"]
   },
   "skeletonLoader-bgColor": {
-    "value": "#151b23",
+    "value": "#2a313c",
     "$type": "color",
-    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "alpha": 1,
+    "filePath": "src/tokens/functional/color/dark/overrides/dark.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": "dark",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      },
+      "alpha": 1
     },
     "name": "skeletonLoader-bgColor",
     "attributes": {},

package/dist/docs/functional/themes/dark-tritanopia.json

@@ -8710,7 +8710,7 @@
     "path": ["reactionButton", "selected", "bgColor", "rest"]
   },
   "reactionButton-selected-bgColor-hover": {
-    "value": "#3a8cfd33",
+    "value": "#3a8cfd5c",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -9039,13 +9039,31 @@
     "path": ["sideNav", "bgColor", "selected"]
   },
   "skeletonLoader-bgColor": {
-    "value": "#151b23",
+    "value": "#656c7633",
     "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "alpha": 0.2,
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{bgColor.muted}",
-      "$type": "color"
+      "value": "{base.color.neutral.8}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      },
+      "alpha": 0.2
     },
     "name": "skeletonLoader-bgColor",
     "attributes": {},

package/dist/docs/functional/themes/dark.json

@@ -8710,7 +8710,7 @@
     "path": ["reactionButton", "selected", "bgColor", "rest"]
   },
   "reactionButton-selected-bgColor-hover": {
-    "value": "#3a8cfd33",
+    "value": "#3a8cfd5c",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -9039,13 +9039,31 @@
     "path": ["sideNav", "bgColor", "selected"]
   },
   "skeletonLoader-bgColor": {
-    "value": "#151b23",
+    "value": "#656c7633",
     "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "alpha": 0.2,
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{bgColor.muted}",
-      "$type": "color"
+      "value": "{base.color.neutral.8}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      },
+      "alpha": 0.2
     },
     "name": "skeletonLoader-bgColor",
     "attributes": {},

package/dist/docs/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/docs/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/docs/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": {},