@primer/primitives 7.14.2-rc.e58b70c → 7.15.0-rc.3991b9a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "7.14.2-rc.e58b70c",
+  "version": "7.15.0-rc.3991b9a",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",

package/tokens-next-private/css/functional/motion/motion.css

@@ -0,0 +1,5 @@
+:root {
+  --motion-skeletonLoader-shimmer-duration-scale: 1s;
+  --motion-spinner-duration-rotation: 1s;
+  --motion-loading-delay-default: 1s;
+}

package/tokens-next-private/css/functional/size/size.css

@@ -46,6 +46,10 @@
   --space-medium: 0.5rem;
   --space-large: 0.75rem;
   --space-xlarge: 1rem;
+  --spinner-strokeWidth-default: 0.125rem;
+  --spinner-size-small: 1rem;
+  --spinner-size-medium: 2rem;
+  --spinner-size-large: 4rem;
   --stack-padding-condensed: 0.5rem;
   --stack-padding-normal: 1rem;
   --stack-padding-spacious: 1.5rem;

package/tokens-next-private/css/functional/themes/dark-colorblind.css

@@ -181,6 +181,7 @@
   --selectMenu-borderColor: #484f58;
   --selectMenu-bgColor-active: #0c2d6b;
   --sideNav-bgColor-selected: #21262d;
+  --skeletonLoader-bgColor: #161b22;
   --timelineBadge-bgColor: #21262d;
   --treeViewItem-leadingVisual-iconColor-rest: #7d8590;
   --underlineNav-borderColor-active: #f78166;
@@ -598,6 +599,7 @@
     --selectMenu-borderColor: #484f58;
     --selectMenu-bgColor-active: #0c2d6b;
     --sideNav-bgColor-selected: #21262d;
+    --skeletonLoader-bgColor: #161b22;
     --timelineBadge-bgColor: #21262d;
     --treeViewItem-leadingVisual-iconColor-rest: #7d8590;
     --underlineNav-borderColor-active: #f78166;

package/tokens-next-private/css/functional/themes/dark-dimmed.css

@@ -181,6 +181,7 @@
   --selectMenu-borderColor: #545d68;
   --selectMenu-bgColor-active: #143d79;
   --sideNav-bgColor-selected: #373e47;
+  --skeletonLoader-bgColor: #2d333b;
   --timelineBadge-bgColor: #373e47;
   --treeViewItem-leadingVisual-iconColor-rest: #6d7986;
   --underlineNav-borderColor-active: #ec775c;
@@ -598,6 +599,7 @@
     --selectMenu-borderColor: #545d68;
     --selectMenu-bgColor-active: #143d79;
     --sideNav-bgColor-selected: #373e47;
+    --skeletonLoader-bgColor: #2d333b;
     --timelineBadge-bgColor: #373e47;
     --treeViewItem-leadingVisual-iconColor-rest: #6d7986;
     --underlineNav-borderColor-active: #ec775c;

package/tokens-next-private/css/functional/themes/dark-high-contrast.css

@@ -181,6 +181,7 @@
   --selectMenu-borderColor: #7a828e;
   --selectMenu-bgColor-active: #1e60d5;
   --sideNav-bgColor-selected: #272b33;
+  --skeletonLoader-bgColor: #272b33;
   --timelineBadge-bgColor: #272b33;
   --treeViewItem-leadingVisual-iconColor-rest: #f0f3f6;
   --underlineNav-borderColor-active: #ff967d;
@@ -598,6 +599,7 @@
     --selectMenu-borderColor: #7a828e;
     --selectMenu-bgColor-active: #1e60d5;
     --sideNav-bgColor-selected: #272b33;
+    --skeletonLoader-bgColor: #272b33;
     --timelineBadge-bgColor: #272b33;
     --treeViewItem-leadingVisual-iconColor-rest: #f0f3f6;
     --underlineNav-borderColor-active: #ff967d;

package/tokens-next-private/css/functional/themes/dark-tritanopia.css

@@ -181,6 +181,7 @@
   --selectMenu-borderColor: #484f58;
   --selectMenu-bgColor-active: #0c2d6b;
   --sideNav-bgColor-selected: #21262d;
+  --skeletonLoader-bgColor: #161b22;
   --timelineBadge-bgColor: #21262d;
   --treeViewItem-leadingVisual-iconColor-rest: #7d8590;
   --underlineNav-borderColor-active: #f78166;
@@ -598,6 +599,7 @@
     --selectMenu-borderColor: #484f58;
     --selectMenu-bgColor-active: #0c2d6b;
     --sideNav-bgColor-selected: #21262d;
+    --skeletonLoader-bgColor: #161b22;
     --timelineBadge-bgColor: #21262d;
     --treeViewItem-leadingVisual-iconColor-rest: #7d8590;
     --underlineNav-borderColor-active: #f78166;

package/tokens-next-private/css/functional/themes/dark.css

@@ -181,6 +181,7 @@
   --selectMenu-borderColor: #484f58;
   --selectMenu-bgColor-active: #0c2d6b;
   --sideNav-bgColor-selected: #21262d;
+  --skeletonLoader-bgColor: #161b22;
   --timelineBadge-bgColor: #21262d;
   --treeViewItem-leadingVisual-iconColor-rest: #7d8590;
   --underlineNav-borderColor-active: #f78166;
@@ -598,6 +599,7 @@
     --selectMenu-borderColor: #484f58;
     --selectMenu-bgColor-active: #0c2d6b;
     --sideNav-bgColor-selected: #21262d;
+    --skeletonLoader-bgColor: #161b22;
     --timelineBadge-bgColor: #21262d;
     --treeViewItem-leadingVisual-iconColor-rest: #7d8590;
     --underlineNav-borderColor-active: #f78166;

package/tokens-next-private/css/functional/themes/light-colorblind.css

@@ -182,6 +182,7 @@
   --selectMenu-borderColor: #ffffff00;
   --selectMenu-bgColor-active: #b6e3ff;
   --sideNav-bgColor-selected: #ffffff;
+  --skeletonLoader-bgColor: #f6f8fa;
   --timelineBadge-bgColor: #eaeef2;
   --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
   --underlineNav-borderColor-active: #fd8c73;
@@ -599,6 +600,7 @@
     --selectMenu-borderColor: #ffffff00;
     --selectMenu-bgColor-active: #b6e3ff;
     --sideNav-bgColor-selected: #ffffff;
+    --skeletonLoader-bgColor: #f6f8fa;
     --timelineBadge-bgColor: #eaeef2;
     --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
     --underlineNav-borderColor-active: #fd8c73;

package/tokens-next-private/css/functional/themes/light-high-contrast.css

@@ -182,6 +182,7 @@
   --selectMenu-borderColor: #ffffff00;
   --selectMenu-bgColor-active: #9cd7ff;
   --sideNav-bgColor-selected: #ffffff;
+  --skeletonLoader-bgColor: #e7ecf0;
   --timelineBadge-bgColor: #e7ecf0;
   --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
   --underlineNav-borderColor-active: #cd3425;
@@ -599,6 +600,7 @@
     --selectMenu-borderColor: #ffffff00;
     --selectMenu-bgColor-active: #9cd7ff;
     --sideNav-bgColor-selected: #ffffff;
+    --skeletonLoader-bgColor: #e7ecf0;
     --timelineBadge-bgColor: #e7ecf0;
     --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
     --underlineNav-borderColor-active: #cd3425;

package/tokens-next-private/css/functional/themes/light-tritanopia.css

@@ -182,6 +182,7 @@
   --selectMenu-borderColor: #ffffff00;
   --selectMenu-bgColor-active: #b6e3ff;
   --sideNav-bgColor-selected: #ffffff;
+  --skeletonLoader-bgColor: #f6f8fa;
   --timelineBadge-bgColor: #eaeef2;
   --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
   --underlineNav-borderColor-active: #fd8c73;
@@ -599,6 +600,7 @@
     --selectMenu-borderColor: #ffffff00;
     --selectMenu-bgColor-active: #b6e3ff;
     --sideNav-bgColor-selected: #ffffff;
+    --skeletonLoader-bgColor: #f6f8fa;
     --timelineBadge-bgColor: #eaeef2;
     --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
     --underlineNav-borderColor-active: #fd8c73;

package/tokens-next-private/css/functional/themes/light.css

@@ -182,6 +182,7 @@
   --selectMenu-borderColor: #ffffff00;
   --selectMenu-bgColor-active: #b6e3ff;
   --sideNav-bgColor-selected: #ffffff;
+  --skeletonLoader-bgColor: #f6f8fa;
   --timelineBadge-bgColor: #eaeef2;
   --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
   --underlineNav-borderColor-active: #fd8c73;
@@ -599,6 +600,7 @@
     --selectMenu-borderColor: #ffffff00;
     --selectMenu-bgColor-active: #b6e3ff;
     --sideNav-bgColor-selected: #ffffff;
+    --skeletonLoader-bgColor: #f6f8fa;
     --timelineBadge-bgColor: #eaeef2;
     --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
     --underlineNav-borderColor-active: #fd8c73;

package/tokens-next-private/docs/functional/motion/motion.json

@@ -0,0 +1,47 @@
+{
+  "motion-loading-delay-default": {
+    "value": "1000ms",
+    "$type": "duration",
+    "comment": "The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies.",
+    "filePath": "src/tokens/functional/motion/loading.json5",
+    "isSource": true,
+    "original": {
+      "value": "1000ms",
+      "$type": "duration",
+      "comment": "The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies."
+    },
+    "name": "motion-loading-delay-default",
+    "attributes": {},
+    "path": ["motion", "loading", "delay", "default"]
+  },
+  "motion-spinner-duration-rotation": {
+    "value": "1000ms",
+    "$type": "duration",
+    "comment": "The amount of time it takes the \"Spinner\" loading indicator to make a full 360deg rotation",
+    "filePath": "src/tokens/functional/motion/patterns.json5",
+    "isSource": true,
+    "original": {
+      "value": "1000ms",
+      "$type": "duration",
+      "comment": "The amount of time it takes the \"Spinner\" loading indicator to make a full 360deg rotation"
+    },
+    "name": "motion-spinner-duration-rotation",
+    "attributes": {},
+    "path": ["motion", "spinner", "duration", "rotation"]
+  },
+  "motion-skeletonLoader-shimmer-duration-scale": {
+    "value": "1000ms",
+    "$type": "duration",
+    "comment": "The amount of times it takes the \"shimmer\" effect to go from the start (left) of the skeleton loader to the end (right)",
+    "filePath": "src/tokens/functional/motion/patterns.json5",
+    "isSource": true,
+    "original": {
+      "value": "1000ms",
+      "$type": "duration",
+      "comment": "The amount of times it takes the \"shimmer\" effect to go from the start (left) of the skeleton loader to the end (right)"
+    },
+    "name": "motion-skeletonLoader-shimmer-duration-scale",
+    "attributes": {},
+    "path": ["motion", "skeletonLoader", "shimmer", "duration", "scale"]
+  }
+}

package/tokens-next-private/docs/functional/size/size.json

@@ -1174,6 +1174,94 @@
     "attributes": {},
     "path": ["space", "xlarge"]
   },
+  "spinner-strokeWidth-default": {
+    "value": "0.125rem",
+    "$type": "dimension",
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "2px",
+      "$type": "dimension"
+    },
+    "name": "spinner-strokeWidth-default",
+    "attributes": {},
+    "path": ["spinner", "strokeWidth", "default"]
+  },
+  "spinner-size-small": {
+    "value": "1rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "pattern/size",
+        "scopes": ["size"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "{base.size.16}",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["size"]
+        }
+      }
+    },
+    "name": "spinner-size-small",
+    "attributes": {},
+    "path": ["spinner", "size", "small"]
+  },
+  "spinner-size-medium": {
+    "value": "2rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "pattern/size",
+        "scopes": ["size"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "{base.size.32}",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["size"]
+        }
+      }
+    },
+    "name": "spinner-size-medium",
+    "attributes": {},
+    "path": ["spinner", "size", "medium"]
+  },
+  "spinner-size-large": {
+    "value": "4rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "pattern/size",
+        "scopes": ["size"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "{base.size.64}",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["size"]
+        }
+      }
+    },
+    "name": "spinner-size-large",
+    "attributes": {},
+    "path": ["spinner", "size", "large"]
+  },
   "stack-padding-condensed": {
     "value": "0.5rem",
     "$type": "dimension",

package/tokens-next-private/docs/functional/themes/dark-colorblind.json

@@ -5381,6 +5381,19 @@
     "attributes": {},
     "path": ["sideNav", "bgColor", "selected"]
   },
+  "skeletonLoader-bgColor": {
+    "value": "#161b22",
+    "$type": "color",
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{bgColor.muted}",
+      "$type": "color"
+    },
+    "name": "skeletonLoader-bgColor",
+    "attributes": {},
+    "path": ["skeletonLoader", "bgColor"]
+  },
   "timelineBadge-bgColor": {
     "value": "#21262d",
     "$type": "color",

package/tokens-next-private/docs/functional/themes/dark-dimmed.json

@@ -5387,6 +5387,19 @@
     "attributes": {},
     "path": ["sideNav", "bgColor", "selected"]
   },
+  "skeletonLoader-bgColor": {
+    "value": "#2d333b",
+    "$type": "color",
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{bgColor.muted}",
+      "$type": "color"
+    },
+    "name": "skeletonLoader-bgColor",
+    "attributes": {},
+    "path": ["skeletonLoader", "bgColor"]
+  },
   "timelineBadge-bgColor": {
     "value": "#373e47",
     "$type": "color",

package/tokens-next-private/docs/functional/themes/dark-high-contrast.json

@@ -5409,6 +5409,19 @@
     "attributes": {},
     "path": ["sideNav", "bgColor", "selected"]
   },
+  "skeletonLoader-bgColor": {
+    "value": "#272b33",
+    "$type": "color",
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{bgColor.muted}",
+      "$type": "color"
+    },
+    "name": "skeletonLoader-bgColor",
+    "attributes": {},
+    "path": ["skeletonLoader", "bgColor"]
+  },
   "timelineBadge-bgColor": {
     "value": "#272b33",
     "$type": "color",

package/tokens-next-private/docs/functional/themes/dark-tritanopia.json

@@ -5387,6 +5387,19 @@
     "attributes": {},
     "path": ["sideNav", "bgColor", "selected"]
   },
+  "skeletonLoader-bgColor": {
+    "value": "#161b22",
+    "$type": "color",
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{bgColor.muted}",
+      "$type": "color"
+    },
+    "name": "skeletonLoader-bgColor",
+    "attributes": {},
+    "path": ["skeletonLoader", "bgColor"]
+  },
   "timelineBadge-bgColor": {
     "value": "#21262d",
     "$type": "color",

package/tokens-next-private/docs/functional/themes/dark.json

@@ -5387,6 +5387,19 @@
     "attributes": {},
     "path": ["sideNav", "bgColor", "selected"]
   },
+  "skeletonLoader-bgColor": {
+    "value": "#161b22",
+    "$type": "color",
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{bgColor.muted}",
+      "$type": "color"
+    },
+    "name": "skeletonLoader-bgColor",
+    "attributes": {},
+    "path": ["skeletonLoader", "bgColor"]
+  },
   "timelineBadge-bgColor": {
     "value": "#21262d",
     "$type": "color",

package/tokens-next-private/docs/functional/themes/light-colorblind.json

@@ -5398,6 +5398,19 @@
     "attributes": {},
     "path": ["sideNav", "bgColor", "selected"]
   },
+  "skeletonLoader-bgColor": {
+    "value": "#f6f8fa",
+    "$type": "color",
+    "filePath": "src/tokens/functional/color/light/patterns-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{bgColor.muted}",
+      "$type": "color"
+    },
+    "name": "skeletonLoader-bgColor",
+    "attributes": {},
+    "path": ["skeletonLoader", "bgColor"]
+  },
   "timelineBadge-bgColor": {
     "value": "#eaeef2",
     "$type": "color",

package/tokens-next-private/docs/functional/themes/light-high-contrast.json

@@ -5418,6 +5418,19 @@
     "attributes": {},
     "path": ["sideNav", "bgColor", "selected"]
   },
+  "skeletonLoader-bgColor": {
+    "value": "#e7ecf0",
+    "$type": "color",
+    "filePath": "src/tokens/functional/color/light/patterns-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{bgColor.muted}",
+      "$type": "color"
+    },
+    "name": "skeletonLoader-bgColor",
+    "attributes": {},
+    "path": ["skeletonLoader", "bgColor"]
+  },
   "timelineBadge-bgColor": {
     "value": "#e7ecf0",
     "$type": "color",

package/tokens-next-private/docs/functional/themes/light-tritanopia.json

@@ -5394,6 +5394,19 @@
     "attributes": {},
     "path": ["sideNav", "bgColor", "selected"]
   },
+  "skeletonLoader-bgColor": {
+    "value": "#f6f8fa",
+    "$type": "color",
+    "filePath": "src/tokens/functional/color/light/patterns-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{bgColor.muted}",
+      "$type": "color"
+    },
+    "name": "skeletonLoader-bgColor",
+    "attributes": {},
+    "path": ["skeletonLoader", "bgColor"]
+  },
   "timelineBadge-bgColor": {
     "value": "#eaeef2",
     "$type": "color",

package/tokens-next-private/docs/functional/themes/light.json

@@ -5394,6 +5394,19 @@
     "attributes": {},
     "path": ["sideNav", "bgColor", "selected"]
   },
+  "skeletonLoader-bgColor": {
+    "value": "#f6f8fa",
+    "$type": "color",
+    "filePath": "src/tokens/functional/color/light/patterns-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{bgColor.muted}",
+      "$type": "color"
+    },
+    "name": "skeletonLoader-bgColor",
+    "attributes": {},
+    "path": ["skeletonLoader", "bgColor"]
+  },
   "timelineBadge-bgColor": {
     "value": "#eaeef2",
     "$type": "color",

package/tokens-next-private/fallbacks/functional/motion/motion.json

@@ -0,0 +1,5 @@
+{
+  "--motion-loading-delay-default": "1000ms",
+  "--motion-spinner-duration-rotation": "1000ms",
+  "--motion-skeletonLoader-shimmer-duration-scale": "1000ms"
+}

package/tokens-next-private/fallbacks/functional/size/size.json

@@ -46,6 +46,10 @@
   "--space-medium": "0.5rem",
   "--space-large": "0.75rem",
   "--space-xlarge": "1rem",
+  "--spinner-strokeWidth-default": "0.125rem",
+  "--spinner-size-small": "1rem",
+  "--spinner-size-medium": "2rem",
+  "--spinner-size-large": "4rem",
   "--stack-padding-condensed": "0.5rem",
   "--stack-padding-normal": "1rem",
   "--stack-padding-spacious": "1.5rem",

package/tokens-next-private/figma/dimension/dimension.json

@@ -618,6 +618,39 @@
     "group": "pattern/size",
     "scopes": ["GAP"]
   },
+  {
+    "name": "spinner/size/large",
+    "value": 64,
+    "type": "FLOAT",
+    "refId": "pattern/size/spinner/size/large",
+    "reference": "base/size/base/size/64",
+    "collection": "pattern/size",
+    "mode": "default",
+    "group": "pattern/size",
+    "scopes": ["WIDTH_HEIGHT"]
+  },
+  {
+    "name": "spinner/size/medium",
+    "value": 32,
+    "type": "FLOAT",
+    "refId": "pattern/size/spinner/size/medium",
+    "reference": "base/size/base/size/32",
+    "collection": "pattern/size",
+    "mode": "default",
+    "group": "pattern/size",
+    "scopes": ["WIDTH_HEIGHT"]
+  },
+  {
+    "name": "spinner/size/small",
+    "value": 16,
+    "type": "FLOAT",
+    "refId": "pattern/size/spinner/size/small",
+    "reference": "base/size/base/size/16",
+    "collection": "pattern/size",
+    "mode": "default",
+    "group": "pattern/size",
+    "scopes": ["WIDTH_HEIGHT"]
+  },
   {
     "name": "control/xlarge/gap",
     "value": 8,

package/tokens-next-private/scss/functional/motion/motion.scss

@@ -0,0 +1,3 @@
+$motion-loading-delay-default: 1s; // The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies.
+$motion-spinner-duration-rotation: 1s; // The amount of time it takes the "Spinner" loading indicator to make a full 360deg rotation
+$motion-skeletonLoader-shimmer-duration-scale: 1s; // The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right)

package/tokens-next-private/scss/functional/size/size.scss

@@ -45,6 +45,10 @@ $space-small: 0.375rem;
 $space-medium: 0.5rem;
 $space-large: 0.75rem;
 $space-xlarge: 1rem;
+$spinner-strokeWidth-default: 0.125rem;
+$spinner-size-small: 1rem;
+$spinner-size-medium: 2rem;
+$spinner-size-large: 4rem;
 $stack-padding-condensed: 0.5rem;
 $stack-padding-normal: 1rem;
 $stack-padding-spacious: 1.5rem;

package/tokens-next-private/scss/functional/themes/dark-colorblind.scss

@@ -179,6 +179,7 @@ $overlay-backdrop-bgColor: #161b2266;
 $selectMenu-borderColor: #484f58;
 $selectMenu-bgColor-active: #0c2d6b;
 $sideNav-bgColor-selected: #21262d;
+$skeletonLoader-bgColor: #161b22;
 $timelineBadge-bgColor: #21262d;
 $treeViewItem-leadingVisual-iconColor-rest: #7d8590;
 $underlineNav-borderColor-active: #f78166;

package/tokens-next-private/scss/functional/themes/dark-dimmed.scss

@@ -179,6 +179,7 @@ $overlay-backdrop-bgColor: #2d333b66;
 $selectMenu-borderColor: #545d68;
 $selectMenu-bgColor-active: #143d79;
 $sideNav-bgColor-selected: #373e47;
+$skeletonLoader-bgColor: #2d333b;
 $timelineBadge-bgColor: #373e47;
 $treeViewItem-leadingVisual-iconColor-rest: #6d7986;
 $underlineNav-borderColor-active: #ec775c;

package/tokens-next-private/scss/functional/themes/dark-high-contrast.scss

@@ -179,6 +179,7 @@ $overlay-backdrop-bgColor: #272b3366;
 $selectMenu-borderColor: #7a828e;
 $selectMenu-bgColor-active: #1e60d5;
 $sideNav-bgColor-selected: #272b33;
+$skeletonLoader-bgColor: #272b33;
 $timelineBadge-bgColor: #272b33;
 $treeViewItem-leadingVisual-iconColor-rest: #f0f3f6;
 $underlineNav-borderColor-active: #ff967d;

package/tokens-next-private/scss/functional/themes/dark-tritanopia.scss

@@ -179,6 +179,7 @@ $overlay-backdrop-bgColor: #161b2266;
 $selectMenu-borderColor: #484f58;
 $selectMenu-bgColor-active: #0c2d6b;
 $sideNav-bgColor-selected: #21262d;
+$skeletonLoader-bgColor: #161b22;
 $timelineBadge-bgColor: #21262d;
 $treeViewItem-leadingVisual-iconColor-rest: #7d8590;
 $underlineNav-borderColor-active: #f78166;

package/tokens-next-private/scss/functional/themes/dark.scss

@@ -179,6 +179,7 @@ $overlay-backdrop-bgColor: #161b2266;
 $selectMenu-borderColor: #484f58;
 $selectMenu-bgColor-active: #0c2d6b;
 $sideNav-bgColor-selected: #21262d;
+$skeletonLoader-bgColor: #161b22;
 $timelineBadge-bgColor: #21262d;
 $treeViewItem-leadingVisual-iconColor-rest: #7d8590;
 $underlineNav-borderColor-active: #f78166;

package/tokens-next-private/scss/functional/themes/light-colorblind.scss

@@ -180,6 +180,7 @@ $overlay-backdrop-bgColor: #8c959f33;
 $selectMenu-borderColor: #ffffff00;
 $selectMenu-bgColor-active: #b6e3ff;
 $sideNav-bgColor-selected: #ffffff;
+$skeletonLoader-bgColor: #f6f8fa;
 $timelineBadge-bgColor: #eaeef2;
 $treeViewItem-leadingVisual-iconColor-rest: #54aeff;
 $underlineNav-borderColor-active: #fd8c73;

package/tokens-next-private/scss/functional/themes/light-high-contrast.scss

@@ -180,6 +180,7 @@ $overlay-backdrop-bgColor: #88929d33;
 $selectMenu-borderColor: #ffffff00;
 $selectMenu-bgColor-active: #9cd7ff;
 $sideNav-bgColor-selected: #ffffff;
+$skeletonLoader-bgColor: #e7ecf0;
 $timelineBadge-bgColor: #e7ecf0;
 $treeViewItem-leadingVisual-iconColor-rest: #368cf9;
 $underlineNav-borderColor-active: #cd3425;