@primer/primitives 9.1.1 → 9.1.2

package/dist/docs/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/dist/figma/themes/dark-colorblind.json

@@ -3630,6 +3630,23 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "skeletonLoader/bgColor",
+    "value": {
+      "r": 0.396078431372549,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 0.2
+    },
+    "type": "COLOR",
+    "alpha": 0.2,
+    "refId": "mode/skeletonLoader/bgColor",
+    "reference": "base/color/dark/base/color/neutral/8",
+    "collection": "mode",
+    "mode": "dark colorblind",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "sideNav/bgColor/selected",
     "value": {

package/dist/figma/themes/dark-dimmed.json

@@ -3601,6 +3601,23 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "skeletonLoader/bgColor",
+    "value": {
+      "r": 0.396078431372549,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 0.2
+    },
+    "type": "COLOR",
+    "alpha": 0.2,
+    "refId": "mode/skeletonLoader/bgColor",
+    "reference": "base/color/dark/base/color/neutral/8",
+    "collection": "mode",
+    "mode": "dark dimmed",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "sideNav/bgColor/selected",
     "value": {

package/dist/figma/themes/dark-high-contrast.json

@@ -3499,6 +3499,23 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "skeletonLoader/bgColor",
+    "value": {
+      "r": 0.16470588235294117,
+      "g": 0.19215686274509805,
+      "b": 0.23529411764705882,
+      "a": 1
+    },
+    "type": "COLOR",
+    "alpha": 1,
+    "refId": "mode/skeletonLoader/bgColor",
+    "reference": "base/color/dark/base/color/neutral/5",
+    "collection": "mode",
+    "mode": "dark high contrast",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "sideNav/bgColor/selected",
     "value": {

package/dist/figma/themes/dark-tritanopia.json

@@ -3630,6 +3630,23 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "skeletonLoader/bgColor",
+    "value": {
+      "r": 0.396078431372549,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 0.2
+    },
+    "type": "COLOR",
+    "alpha": 0.2,
+    "refId": "mode/skeletonLoader/bgColor",
+    "reference": "base/color/dark/base/color/neutral/8",
+    "collection": "mode",
+    "mode": "dark tritanopia",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "sideNav/bgColor/selected",
     "value": {

package/dist/figma/themes/dark.json

@@ -3533,6 +3533,23 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "skeletonLoader/bgColor",
+    "value": {
+      "r": 0.396078431372549,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 0.2
+    },
+    "type": "COLOR",
+    "alpha": 0.2,
+    "refId": "mode/skeletonLoader/bgColor",
+    "reference": "base/color/dark/base/color/neutral/8",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "sideNav/bgColor/selected",
     "value": {

package/dist/figma/themes/light-colorblind.json

@@ -3618,6 +3618,23 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "skeletonLoader/bgColor",
+    "value": {
+      "r": 0.5058823529411764,
+      "g": 0.5450980392156862,
+      "b": 0.596078431372549,
+      "a": 0.1
+    },
+    "type": "COLOR",
+    "alpha": 0.1,
+    "refId": "mode/skeletonLoader/bgColor",
+    "reference": "base/color/light/base/color/neutral/8",
+    "collection": "mode",
+    "mode": "light colorblind",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "selectMenu/bgColor/active",
     "value": {

package/dist/figma/themes/light-high-contrast.json

@@ -3560,6 +3560,23 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "skeletonLoader/bgColor",
+    "value": {
+      "r": 0.8549019607843137,
+      "g": 0.8784313725490196,
+      "b": 0.9058823529411765,
+      "a": 1
+    },
+    "type": "COLOR",
+    "alpha": 1,
+    "refId": "mode/skeletonLoader/bgColor",
+    "reference": "base/color/light/base/color/neutral/5",
+    "collection": "mode",
+    "mode": "light high contrast",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "selectMenu/bgColor/active",
     "value": {

package/dist/figma/themes/light-tritanopia.json

@@ -3617,6 +3617,23 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "skeletonLoader/bgColor",
+    "value": {
+      "r": 0.5058823529411764,
+      "g": 0.5450980392156862,
+      "b": 0.596078431372549,
+      "a": 0.1
+    },
+    "type": "COLOR",
+    "alpha": 0.1,
+    "refId": "mode/skeletonLoader/bgColor",
+    "reference": "base/color/light/base/color/neutral/8",
+    "collection": "mode",
+    "mode": "light tritanopia",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "selectMenu/bgColor/active",
     "value": {

package/dist/figma/themes/light.json

@@ -3561,6 +3561,23 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "skeletonLoader/bgColor",
+    "value": {
+      "r": 0.5058823529411764,
+      "g": 0.5450980392156862,
+      "b": 0.596078431372549,
+      "a": 0.1
+    },
+    "type": "COLOR",
+    "alpha": 0.1,
+    "refId": "mode/skeletonLoader/bgColor",
+    "reference": "base/color/light/base/color/neutral/8",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "selectMenu/bgColor/active",
     "value": {

package/dist/internalCss/dark-colorblind.css

@@ -598,7 +598,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;
@@ -1457,7 +1457,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/internalCss/dark-dimmed.css

@@ -598,7 +598,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;
@@ -1457,7 +1457,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/internalCss/dark-high-contrast.css

@@ -598,7 +598,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;
@@ -1457,7 +1457,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/internalCss/dark-tritanopia.css

@@ -598,7 +598,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;
@@ -1457,7 +1457,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/internalCss/dark.css

@@ -598,7 +598,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;
@@ -1457,7 +1457,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/internalCss/light-colorblind.css

@@ -599,7 +599,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;
@@ -1458,7 +1458,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/internalCss/light-high-contrast.css

@@ -599,7 +599,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;
@@ -1458,7 +1458,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/internalCss/light-tritanopia.css

@@ -599,7 +599,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;
@@ -1458,7 +1458,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/internalCss/light.css

@@ -599,7 +599,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;
@@ -1458,7 +1458,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/styleLint/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/styleLint/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/styleLint/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/styleLint/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/styleLint/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": {},