@primer/primitives 9.0.1 → 9.0.2-rc.758febf5

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

@@ -264,11 +264,11 @@
   --button-outline-borderColor-hover: #3d444d;
   --button-outline-borderColor-selected: #3d444d;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-danger-fgColor-rest: #db6d28;
+  --button-danger-fgColor-rest: #fa5e55;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-disabled: #db6d2880;
-  --button-danger-iconColor-rest: #db6d28;
+  --button-danger-iconColor-rest: #fa5e55;
   --button-danger-iconColor-hover: #ffffff;
   --button-danger-bgColor-rest: #212830;
   --button-danger-bgColor-hover: #9b4215;
@@ -833,11 +833,11 @@
     --button-outline-borderColor-hover: #3d444d;
     --button-outline-borderColor-selected: #3d444d;
     --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-danger-fgColor-rest: #db6d28;
+    --button-danger-fgColor-rest: #fa5e55;
     --button-danger-fgColor-hover: #ffffff;
     --button-danger-fgColor-active: #ffffff;
     --button-danger-fgColor-disabled: #db6d2880;
-    --button-danger-iconColor-rest: #db6d28;
+    --button-danger-iconColor-rest: #fa5e55;
     --button-danger-iconColor-hover: #ffffff;
     --button-danger-bgColor-rest: #212830;
     --button-danger-bgColor-hover: #9b4215;

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

@@ -264,11 +264,11 @@
   --button-outline-borderColor-hover: #3d444d;
   --button-outline-borderColor-selected: #3d444d;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-danger-fgColor-rest: #e5534b;
+  --button-danger-fgColor-rest: #ea5c53;
   --button-danger-fgColor-hover: #cdd9e5;
   --button-danger-fgColor-active: #cdd9e5;
   --button-danger-fgColor-disabled: #e5534b80;
-  --button-danger-iconColor-rest: #e5534b;
+  --button-danger-iconColor-rest: #ea5c53;
   --button-danger-iconColor-hover: #cdd9e5;
   --button-danger-bgColor-rest: #2a313c;
   --button-danger-bgColor-hover: #ad2e2c;
@@ -833,11 +833,11 @@
     --button-outline-borderColor-hover: #3d444d;
     --button-outline-borderColor-selected: #3d444d;
     --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-danger-fgColor-rest: #e5534b;
+    --button-danger-fgColor-rest: #ea5c53;
     --button-danger-fgColor-hover: #cdd9e5;
     --button-danger-fgColor-active: #cdd9e5;
     --button-danger-fgColor-disabled: #e5534b80;
-    --button-danger-iconColor-rest: #e5534b;
+    --button-danger-iconColor-rest: #ea5c53;
     --button-danger-iconColor-hover: #cdd9e5;
     --button-danger-bgColor-rest: #2a313c;
     --button-danger-bgColor-hover: #ad2e2c;

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

@@ -264,15 +264,15 @@
   --button-outline-borderColor-hover: #b7bdc8;
   --button-outline-borderColor-selected: #b7bdc8;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-danger-fgColor-rest: #ff9492;
+  --button-danger-fgColor-rest: #ffa8a6;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-disabled: #ff949280;
-  --button-danger-iconColor-rest: #ff9492;
+  --button-danger-iconColor-rest: #ffa8a6;
   --button-danger-iconColor-hover: #ffffff;
   --button-danger-bgColor-rest: #262c36;
   --button-danger-bgColor-hover: #ad0116;
-  --button-danger-bgColor-active: #c51120;
+  --button-danger-bgColor-active: #ad0116;
   --button-danger-bgColor-disabled: #262c36;
   --button-danger-borderColor-rest: #b7bdc8;
   --button-danger-borderColor-hover: #ffb1af;
@@ -833,15 +833,15 @@
     --button-outline-borderColor-hover: #b7bdc8;
     --button-outline-borderColor-selected: #b7bdc8;
     --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-danger-fgColor-rest: #ff9492;
+    --button-danger-fgColor-rest: #ffa8a6;
     --button-danger-fgColor-hover: #ffffff;
     --button-danger-fgColor-active: #ffffff;
     --button-danger-fgColor-disabled: #ff949280;
-    --button-danger-iconColor-rest: #ff9492;
+    --button-danger-iconColor-rest: #ffa8a6;
     --button-danger-iconColor-hover: #ffffff;
     --button-danger-bgColor-rest: #262c36;
     --button-danger-bgColor-hover: #ad0116;
-    --button-danger-bgColor-active: #c51120;
+    --button-danger-bgColor-active: #ad0116;
     --button-danger-bgColor-disabled: #262c36;
     --button-danger-borderColor-rest: #b7bdc8;
     --button-danger-borderColor-hover: #ffb1af;

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

@@ -264,11 +264,11 @@
   --button-outline-borderColor-hover: #3d444d;
   --button-outline-borderColor-selected: #3d444d;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-danger-fgColor-rest: #f85149;
+  --button-danger-fgColor-rest: #fa5e55;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-disabled: #f8514980;
-  --button-danger-iconColor-rest: #f85149;
+  --button-danger-iconColor-rest: #fa5e55;
   --button-danger-iconColor-hover: #ffffff;
   --button-danger-bgColor-rest: #212830;
   --button-danger-bgColor-hover: #b62324;
@@ -833,11 +833,11 @@
     --button-outline-borderColor-hover: #3d444d;
     --button-outline-borderColor-selected: #3d444d;
     --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-danger-fgColor-rest: #f85149;
+    --button-danger-fgColor-rest: #fa5e55;
     --button-danger-fgColor-hover: #ffffff;
     --button-danger-fgColor-active: #ffffff;
     --button-danger-fgColor-disabled: #f8514980;
-    --button-danger-iconColor-rest: #f85149;
+    --button-danger-iconColor-rest: #fa5e55;
     --button-danger-iconColor-hover: #ffffff;
     --button-danger-bgColor-rest: #212830;
     --button-danger-bgColor-hover: #b62324;

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

@@ -264,11 +264,11 @@
   --button-outline-borderColor-hover: #3d444d;
   --button-outline-borderColor-selected: #3d444d;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-danger-fgColor-rest: #f85149;
+  --button-danger-fgColor-rest: #fa5e55;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-disabled: #f8514980;
-  --button-danger-iconColor-rest: #f85149;
+  --button-danger-iconColor-rest: #fa5e55;
   --button-danger-iconColor-hover: #ffffff;
   --button-danger-bgColor-rest: #212830;
   --button-danger-bgColor-hover: #b62324;
@@ -833,11 +833,11 @@
     --button-outline-borderColor-hover: #3d444d;
     --button-outline-borderColor-selected: #3d444d;
     --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-danger-fgColor-rest: #f85149;
+    --button-danger-fgColor-rest: #fa5e55;
     --button-danger-fgColor-hover: #ffffff;
     --button-danger-fgColor-active: #ffffff;
     --button-danger-fgColor-disabled: #f8514980;
-    --button-danger-iconColor-rest: #f85149;
+    --button-danger-iconColor-rest: #fa5e55;
     --button-danger-iconColor-hover: #ffffff;
     --button-danger-bgColor-rest: #212830;
     --button-danger-bgColor-hover: #b62324;

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

@@ -7701,7 +7701,7 @@
     "path": ["button", "outline", "shadow", "selected"]
   },
   "button-danger-fgColor-rest": {
-    "value": "#db6d28",
+    "value": "#fa5e55",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7711,10 +7711,14 @@
         "scopes": ["fgColor"]
       }
     },
+    "mix": {
+      "color": "#ff7b72",
+      "weight": 0.3
+    },
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.danger}",
+      "value": "{base.color.red.4}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -7723,6 +7727,10 @@
           "group": "component (internal)",
           "scopes": ["fgColor"]
         }
+      },
+      "mix": {
+        "color": "{base.color.red.3}",
+        "weight": 0.3
       }
     },
     "name": "button-danger-fgColor-rest",
@@ -7819,7 +7827,7 @@
     "path": ["button", "danger", "fgColor", "disabled"]
   },
   "button-danger-iconColor-rest": {
-    "value": "#db6d28",
+    "value": "#fa5e55",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7832,7 +7840,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.danger}",
+      "value": "{button.danger.fgColor.rest}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {

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

@@ -7707,7 +7707,7 @@
     "path": ["button", "outline", "shadow", "selected"]
   },
   "button-danger-fgColor-rest": {
-    "value": "#e5534b",
+    "value": "#ea5c53",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7717,10 +7717,14 @@
         "scopes": ["fgColor"]
       }
     },
+    "mix": {
+      "color": "#f47067",
+      "weight": 0.3
+    },
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.danger}",
+      "value": "{base.color.red.4}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -7729,6 +7733,10 @@
           "group": "component (internal)",
           "scopes": ["fgColor"]
         }
+      },
+      "mix": {
+        "color": "{base.color.red.3}",
+        "weight": 0.3
       }
     },
     "name": "button-danger-fgColor-rest",
@@ -7825,7 +7833,7 @@
     "path": ["button", "danger", "fgColor", "disabled"]
   },
   "button-danger-iconColor-rest": {
-    "value": "#e5534b",
+    "value": "#ea5c53",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7838,7 +7846,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.danger}",
+      "value": "{button.danger.fgColor.rest}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {

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

@@ -7739,7 +7739,7 @@
     "path": ["button", "outline", "shadow", "selected"]
   },
   "button-danger-fgColor-rest": {
-    "value": "#ff9492",
+    "value": "#ffa8a6",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7749,10 +7749,14 @@
         "scopes": ["fgColor"]
       }
     },
+    "mix": {
+      "color": "#ff9492",
+      "weight": 0.3
+    },
     "filePath": "src/tokens/functional/color/dark/overrides/dark.high-contrast.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.red.3}",
+      "value": "{base.color.red.2}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -7761,6 +7765,10 @@
           "group": "component (internal)",
           "scopes": ["fgColor"]
         }
+      },
+      "mix": {
+        "color": "{base.color.red.3}",
+        "weight": 0.3
       }
     },
     "name": "button-danger-fgColor-rest",
@@ -7857,7 +7865,7 @@
     "path": ["button", "danger", "fgColor", "disabled"]
   },
   "button-danger-iconColor-rest": {
-    "value": "#ff9492",
+    "value": "#ffa8a6",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7870,7 +7878,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.danger}",
+      "value": "{button.danger.fgColor.rest}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -7973,7 +7981,7 @@
     "path": ["button", "danger", "bgColor", "hover"]
   },
   "button-danger-bgColor-active": {
-    "value": "#c51120",
+    "value": "#ad0116",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7983,13 +7991,9 @@
         "scopes": ["bgColor"]
       }
     },
-    "mix": {
-      "color": "#e82a2f",
-      "weight": 0.4
-    },
+    "mix": null,
     "filePath": "src/tokens/functional/color/dark/overrides/dark.high-contrast.json5",
     "isSource": true,
-    "alpha": 1,
     "original": {
       "value": "{bgColor.danger.emphasis}",
       "$type": "color",
@@ -8001,11 +8005,7 @@
           "scopes": ["bgColor"]
         }
       },
-      "mix": {
-        "color": "{base.color.red.7}",
-        "weight": 0.4
-      },
-      "alpha": 1
+      "mix": null
     },
     "name": "button-danger-bgColor-active",
     "attributes": {},

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

@@ -7707,7 +7707,7 @@
     "path": ["button", "outline", "shadow", "selected"]
   },
   "button-danger-fgColor-rest": {
-    "value": "#f85149",
+    "value": "#fa5e55",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7717,10 +7717,14 @@
         "scopes": ["fgColor"]
       }
     },
+    "mix": {
+      "color": "#ff7b72",
+      "weight": 0.3
+    },
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.danger}",
+      "value": "{base.color.red.4}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -7729,6 +7733,10 @@
           "group": "component (internal)",
           "scopes": ["fgColor"]
         }
+      },
+      "mix": {
+        "color": "{base.color.red.3}",
+        "weight": 0.3
       }
     },
     "name": "button-danger-fgColor-rest",
@@ -7825,7 +7833,7 @@
     "path": ["button", "danger", "fgColor", "disabled"]
   },
   "button-danger-iconColor-rest": {
-    "value": "#f85149",
+    "value": "#fa5e55",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7838,7 +7846,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.danger}",
+      "value": "{button.danger.fgColor.rest}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {

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

@@ -7707,7 +7707,7 @@
     "path": ["button", "outline", "shadow", "selected"]
   },
   "button-danger-fgColor-rest": {
-    "value": "#f85149",
+    "value": "#fa5e55",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7717,10 +7717,14 @@
         "scopes": ["fgColor"]
       }
     },
+    "mix": {
+      "color": "#ff7b72",
+      "weight": 0.3
+    },
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.danger}",
+      "value": "{base.color.red.4}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -7729,6 +7733,10 @@
           "group": "component (internal)",
           "scopes": ["fgColor"]
         }
+      },
+      "mix": {
+        "color": "{base.color.red.3}",
+        "weight": 0.3
       }
     },
     "name": "button-danger-fgColor-rest",
@@ -7825,7 +7833,7 @@
     "path": ["button", "danger", "fgColor", "disabled"]
   },
   "button-danger-iconColor-rest": {
-    "value": "#f85149",
+    "value": "#fa5e55",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7838,7 +7846,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.danger}",
+      "value": "{button.danger.fgColor.rest}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {

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

@@ -3975,6 +3975,23 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "button/danger/fgColor/rest",
+    "value": {
+      "r": 0.9803921568627451,
+      "g": 0.3686274509803922,
+      "b": 0.3333333333333333,
+      "a": 1
+    },
+    "type": "COLOR",
+    "isMix": true,
+    "refId": "mode/button/danger/fgColor/rest",
+    "reference": "base/color/dark/base/color/red/4",
+    "collection": "mode",
+    "mode": "dark colorblind",
+    "group": "component (internal)",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "button/outline/shadow/selected/offsetX",
     "value": 0,
@@ -7741,14 +7758,14 @@
   {
     "name": "button/danger/iconColor/rest",
     "value": {
-      "r": 0.8588235294117647,
-      "g": 0.42745098039215684,
-      "b": 0.1568627450980392,
+      "r": 0.9803921568627451,
+      "g": 0.3686274509803922,
+      "b": 0.3333333333333333,
       "a": 1
     },
     "type": "COLOR",
     "refId": "mode/button/danger/iconColor/rest",
-    "reference": "mode/fgColor/danger",
+    "reference": "mode/button/danger/fgColor/rest",
     "collection": "mode",
     "mode": "dark colorblind",
     "group": "component (internal)",
@@ -7803,22 +7820,6 @@
     "group": "component (internal)",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
-  {
-    "name": "button/danger/fgColor/rest",
-    "value": {
-      "r": 0.8588235294117647,
-      "g": 0.42745098039215684,
-      "b": 0.1568627450980392,
-      "a": 1
-    },
-    "type": "COLOR",
-    "refId": "mode/button/danger/fgColor/rest",
-    "reference": "mode/fgColor/danger",
-    "collection": "mode",
-    "mode": "dark colorblind",
-    "group": "component (internal)",
-    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
-  },
   {
     "name": "button/outline/bgColor/hover",
     "value": {

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

@@ -3962,6 +3962,23 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "button/danger/fgColor/rest",
+    "value": {
+      "r": 0.9176470588235294,
+      "g": 0.3607843137254902,
+      "b": 0.3254901960784314,
+      "a": 1
+    },
+    "type": "COLOR",
+    "isMix": true,
+    "refId": "mode/button/danger/fgColor/rest",
+    "reference": "base/color/dark-dimmed/base/color/red/4",
+    "collection": "mode",
+    "mode": "dark dimmed",
+    "group": "component (internal)",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "button/outline/shadow/selected/offsetX",
     "value": 0,
@@ -7840,14 +7857,14 @@
   {
     "name": "button/danger/iconColor/rest",
     "value": {
-      "r": 0.8980392156862745,
-      "g": 0.3254901960784314,
-      "b": 0.29411764705882354,
+      "r": 0.9176470588235294,
+      "g": 0.3607843137254902,
+      "b": 0.3254901960784314,
       "a": 1
     },
     "type": "COLOR",
     "refId": "mode/button/danger/iconColor/rest",
-    "reference": "mode/fgColor/danger",
+    "reference": "mode/button/danger/fgColor/rest",
     "collection": "mode",
     "mode": "dark dimmed",
     "group": "component (internal)",
@@ -7902,22 +7919,6 @@
     "group": "component (internal)",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
-  {
-    "name": "button/danger/fgColor/rest",
-    "value": {
-      "r": 0.8980392156862745,
-      "g": 0.3254901960784314,
-      "b": 0.29411764705882354,
-      "a": 1
-    },
-    "type": "COLOR",
-    "refId": "mode/button/danger/fgColor/rest",
-    "reference": "mode/fgColor/danger",
-    "collection": "mode",
-    "mode": "dark dimmed",
-    "group": "component (internal)",
-    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
-  },
   {
     "name": "button/outline/bgColor/hover",
     "value": {

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

@@ -3799,13 +3799,14 @@
     "name": "button/danger/fgColor/rest",
     "value": {
       "r": 1,
-      "g": 0.5803921568627451,
-      "b": 0.5725490196078431,
+      "g": 0.6588235294117647,
+      "b": 0.6509803921568628,
       "a": 1
     },
     "type": "COLOR",
+    "isMix": true,
     "refId": "mode/button/danger/fgColor/rest",
-    "reference": "base/color/dark-high-contrast/base/color/red/3",
+    "reference": "base/color/dark-high-contrast/base/color/red/2",
     "collection": "mode",
     "mode": "dark high contrast",
     "group": "component (internal)",
@@ -7869,14 +7870,12 @@
   {
     "name": "button/danger/bgColor/active",
     "value": {
-      "r": 0.7725490196078432,
-      "g": 0.06666666666666667,
-      "b": 0.12549019607843137,
+      "r": 0.6784313725490196,
+      "g": 0.00392156862745098,
+      "b": 0.08627450980392157,
       "a": 1
     },
     "type": "COLOR",
-    "alpha": 1,
-    "isMix": true,
     "refId": "mode/button/danger/bgColor/active",
     "reference": "mode/bgColor/danger-emphasis",
     "collection": "mode",
@@ -7936,13 +7935,13 @@
     "name": "button/danger/iconColor/rest",
     "value": {
       "r": 1,
-      "g": 0.5803921568627451,
-      "b": 0.5725490196078431,
+      "g": 0.6588235294117647,
+      "b": 0.6509803921568628,
       "a": 1
     },
     "type": "COLOR",
     "refId": "mode/button/danger/iconColor/rest",
-    "reference": "mode/fgColor/danger",
+    "reference": "mode/button/danger/fgColor/rest",
     "collection": "mode",
     "mode": "dark high contrast",
     "group": "component (internal)",

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

@@ -3975,6 +3975,23 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "button/danger/fgColor/rest",
+    "value": {
+      "r": 0.9803921568627451,
+      "g": 0.3686274509803922,
+      "b": 0.3333333333333333,
+      "a": 1
+    },
+    "type": "COLOR",
+    "isMix": true,
+    "refId": "mode/button/danger/fgColor/rest",
+    "reference": "base/color/dark/base/color/red/4",
+    "collection": "mode",
+    "mode": "dark tritanopia",
+    "group": "component (internal)",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "button/outline/shadow/selected/offsetX",
     "value": 0,
@@ -7762,14 +7779,14 @@
   {
     "name": "button/danger/iconColor/rest",
     "value": {
-      "r": 0.9725490196078431,
-      "g": 0.3176470588235294,
-      "b": 0.28627450980392155,
+      "r": 0.9803921568627451,
+      "g": 0.3686274509803922,
+      "b": 0.3333333333333333,
       "a": 1
     },
     "type": "COLOR",
     "refId": "mode/button/danger/iconColor/rest",
-    "reference": "mode/fgColor/danger",
+    "reference": "mode/button/danger/fgColor/rest",
     "collection": "mode",
     "mode": "dark tritanopia",
     "group": "component (internal)",
@@ -7824,22 +7841,6 @@
     "group": "component (internal)",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
-  {
-    "name": "button/danger/fgColor/rest",
-    "value": {
-      "r": 0.9725490196078431,
-      "g": 0.3176470588235294,
-      "b": 0.28627450980392155,
-      "a": 1
-    },
-    "type": "COLOR",
-    "refId": "mode/button/danger/fgColor/rest",
-    "reference": "mode/fgColor/danger",
-    "collection": "mode",
-    "mode": "dark tritanopia",
-    "group": "component (internal)",
-    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
-  },
   {
     "name": "button/outline/bgColor/hover",
     "value": {

package/dist/figma/themes/dark.json

@@ -3878,6 +3878,23 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "button/danger/fgColor/rest",
+    "value": {
+      "r": 0.9803921568627451,
+      "g": 0.3686274509803922,
+      "b": 0.3333333333333333,
+      "a": 1
+    },
+    "type": "COLOR",
+    "isMix": true,
+    "refId": "mode/button/danger/fgColor/rest",
+    "reference": "base/color/dark/base/color/red/4",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "component (internal)",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "button/outline/shadow/selected/offsetX",
     "value": 0,
@@ -7762,14 +7779,14 @@
   {
     "name": "button/danger/iconColor/rest",
     "value": {
-      "r": 0.9725490196078431,
-      "g": 0.3176470588235294,
-      "b": 0.28627450980392155,
+      "r": 0.9803921568627451,
+      "g": 0.3686274509803922,
+      "b": 0.3333333333333333,
       "a": 1
     },
     "type": "COLOR",
     "refId": "mode/button/danger/iconColor/rest",
-    "reference": "mode/fgColor/danger",
+    "reference": "mode/button/danger/fgColor/rest",
     "collection": "mode",
     "mode": "dark",
     "group": "component (internal)",
@@ -7824,22 +7841,6 @@
     "group": "component (internal)",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
-  {
-    "name": "button/danger/fgColor/rest",
-    "value": {
-      "r": 0.9725490196078431,
-      "g": 0.3176470588235294,
-      "b": 0.28627450980392155,
-      "a": 1
-    },
-    "type": "COLOR",
-    "refId": "mode/button/danger/fgColor/rest",
-    "reference": "mode/fgColor/danger",
-    "collection": "mode",
-    "mode": "dark",
-    "group": "component (internal)",
-    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
-  },
   {
     "name": "button/outline/bgColor/hover",
     "value": {

package/dist/internalCss/dark-colorblind.css

@@ -554,11 +554,11 @@
   --button-outline-borderColor-hover: #3d444d;
   --button-outline-borderColor-selected: #3d444d;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-danger-fgColor-rest: #db6d28;
+  --button-danger-fgColor-rest: #fa5e55;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-disabled: #db6d2880;
-  --button-danger-iconColor-rest: #db6d28;
+  --button-danger-iconColor-rest: #fa5e55;
   --button-danger-iconColor-hover: #ffffff;
   --button-danger-bgColor-rest: #212830;
   --button-danger-bgColor-hover: #9b4215;
@@ -1413,11 +1413,11 @@
     --button-outline-borderColor-hover: #3d444d;
     --button-outline-borderColor-selected: #3d444d;
     --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-danger-fgColor-rest: #db6d28;
+    --button-danger-fgColor-rest: #fa5e55;
     --button-danger-fgColor-hover: #ffffff;
     --button-danger-fgColor-active: #ffffff;
     --button-danger-fgColor-disabled: #db6d2880;
-    --button-danger-iconColor-rest: #db6d28;
+    --button-danger-iconColor-rest: #fa5e55;
     --button-danger-iconColor-hover: #ffffff;
     --button-danger-bgColor-rest: #212830;
     --button-danger-bgColor-hover: #9b4215;

package/dist/internalCss/dark-dimmed.css

@@ -554,11 +554,11 @@
   --button-outline-borderColor-hover: #3d444d;
   --button-outline-borderColor-selected: #3d444d;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-danger-fgColor-rest: #e5534b;
+  --button-danger-fgColor-rest: #ea5c53;
   --button-danger-fgColor-hover: #cdd9e5;
   --button-danger-fgColor-active: #cdd9e5;
   --button-danger-fgColor-disabled: #e5534b80;
-  --button-danger-iconColor-rest: #e5534b;
+  --button-danger-iconColor-rest: #ea5c53;
   --button-danger-iconColor-hover: #cdd9e5;
   --button-danger-bgColor-rest: #2a313c;
   --button-danger-bgColor-hover: #ad2e2c;
@@ -1413,11 +1413,11 @@
     --button-outline-borderColor-hover: #3d444d;
     --button-outline-borderColor-selected: #3d444d;
     --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-danger-fgColor-rest: #e5534b;
+    --button-danger-fgColor-rest: #ea5c53;
     --button-danger-fgColor-hover: #cdd9e5;
     --button-danger-fgColor-active: #cdd9e5;
     --button-danger-fgColor-disabled: #e5534b80;
-    --button-danger-iconColor-rest: #e5534b;
+    --button-danger-iconColor-rest: #ea5c53;
     --button-danger-iconColor-hover: #cdd9e5;
     --button-danger-bgColor-rest: #2a313c;
     --button-danger-bgColor-hover: #ad2e2c;

package/dist/internalCss/dark-high-contrast.css

@@ -554,15 +554,15 @@
   --button-outline-borderColor-hover: #b7bdc8;
   --button-outline-borderColor-selected: #b7bdc8;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-danger-fgColor-rest: #ff9492;
+  --button-danger-fgColor-rest: #ffa8a6;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-disabled: #ff949280;
-  --button-danger-iconColor-rest: #ff9492;
+  --button-danger-iconColor-rest: #ffa8a6;
   --button-danger-iconColor-hover: #ffffff;
   --button-danger-bgColor-rest: #262c36;
   --button-danger-bgColor-hover: #ad0116;
-  --button-danger-bgColor-active: #c51120;
+  --button-danger-bgColor-active: #ad0116;
   --button-danger-bgColor-disabled: #262c36;
   --button-danger-borderColor-rest: #b7bdc8;
   --button-danger-borderColor-hover: #ffb1af;
@@ -1413,15 +1413,15 @@
     --button-outline-borderColor-hover: #b7bdc8;
     --button-outline-borderColor-selected: #b7bdc8;
     --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-danger-fgColor-rest: #ff9492;
+    --button-danger-fgColor-rest: #ffa8a6;
     --button-danger-fgColor-hover: #ffffff;
     --button-danger-fgColor-active: #ffffff;
     --button-danger-fgColor-disabled: #ff949280;
-    --button-danger-iconColor-rest: #ff9492;
+    --button-danger-iconColor-rest: #ffa8a6;
     --button-danger-iconColor-hover: #ffffff;
     --button-danger-bgColor-rest: #262c36;
     --button-danger-bgColor-hover: #ad0116;
-    --button-danger-bgColor-active: #c51120;
+    --button-danger-bgColor-active: #ad0116;
     --button-danger-bgColor-disabled: #262c36;
     --button-danger-borderColor-rest: #b7bdc8;
     --button-danger-borderColor-hover: #ffb1af;

package/dist/internalCss/dark-tritanopia.css

@@ -554,11 +554,11 @@
   --button-outline-borderColor-hover: #3d444d;
   --button-outline-borderColor-selected: #3d444d;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-danger-fgColor-rest: #f85149;
+  --button-danger-fgColor-rest: #fa5e55;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-disabled: #f8514980;
-  --button-danger-iconColor-rest: #f85149;
+  --button-danger-iconColor-rest: #fa5e55;
   --button-danger-iconColor-hover: #ffffff;
   --button-danger-bgColor-rest: #212830;
   --button-danger-bgColor-hover: #b62324;
@@ -1413,11 +1413,11 @@
     --button-outline-borderColor-hover: #3d444d;
     --button-outline-borderColor-selected: #3d444d;
     --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-danger-fgColor-rest: #f85149;
+    --button-danger-fgColor-rest: #fa5e55;
     --button-danger-fgColor-hover: #ffffff;
     --button-danger-fgColor-active: #ffffff;
     --button-danger-fgColor-disabled: #f8514980;
-    --button-danger-iconColor-rest: #f85149;
+    --button-danger-iconColor-rest: #fa5e55;
     --button-danger-iconColor-hover: #ffffff;
     --button-danger-bgColor-rest: #212830;
     --button-danger-bgColor-hover: #b62324;

package/dist/internalCss/dark.css

@@ -554,11 +554,11 @@
   --button-outline-borderColor-hover: #3d444d;
   --button-outline-borderColor-selected: #3d444d;
   --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-danger-fgColor-rest: #f85149;
+  --button-danger-fgColor-rest: #fa5e55;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-disabled: #f8514980;
-  --button-danger-iconColor-rest: #f85149;
+  --button-danger-iconColor-rest: #fa5e55;
   --button-danger-iconColor-hover: #ffffff;
   --button-danger-bgColor-rest: #212830;
   --button-danger-bgColor-hover: #b62324;
@@ -1413,11 +1413,11 @@
     --button-outline-borderColor-hover: #3d444d;
     --button-outline-borderColor-selected: #3d444d;
     --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-danger-fgColor-rest: #f85149;
+    --button-danger-fgColor-rest: #fa5e55;
     --button-danger-fgColor-hover: #ffffff;
     --button-danger-fgColor-active: #ffffff;
     --button-danger-fgColor-disabled: #f8514980;
-    --button-danger-iconColor-rest: #f85149;
+    --button-danger-iconColor-rest: #fa5e55;
     --button-danger-iconColor-hover: #ffffff;
     --button-danger-bgColor-rest: #212830;
     --button-danger-bgColor-hover: #b62324;

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

@@ -7701,7 +7701,7 @@
     "path": ["button", "outline", "shadow", "selected"]
   },
   "button-danger-fgColor-rest": {
-    "value": "#db6d28",
+    "value": "#fa5e55",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7711,10 +7711,14 @@
         "scopes": ["fgColor"]
       }
     },
+    "mix": {
+      "color": "#ff7b72",
+      "weight": 0.3
+    },
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.danger}",
+      "value": "{base.color.red.4}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -7723,6 +7727,10 @@
           "group": "component (internal)",
           "scopes": ["fgColor"]
         }
+      },
+      "mix": {
+        "color": "{base.color.red.3}",
+        "weight": 0.3
       }
     },
     "name": "button-danger-fgColor-rest",
@@ -7819,7 +7827,7 @@
     "path": ["button", "danger", "fgColor", "disabled"]
   },
   "button-danger-iconColor-rest": {
-    "value": "#db6d28",
+    "value": "#fa5e55",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7832,7 +7840,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.danger}",
+      "value": "{button.danger.fgColor.rest}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {

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

@@ -7707,7 +7707,7 @@
     "path": ["button", "outline", "shadow", "selected"]
   },
   "button-danger-fgColor-rest": {
-    "value": "#e5534b",
+    "value": "#ea5c53",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7717,10 +7717,14 @@
         "scopes": ["fgColor"]
       }
     },
+    "mix": {
+      "color": "#f47067",
+      "weight": 0.3
+    },
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.danger}",
+      "value": "{base.color.red.4}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -7729,6 +7733,10 @@
           "group": "component (internal)",
           "scopes": ["fgColor"]
         }
+      },
+      "mix": {
+        "color": "{base.color.red.3}",
+        "weight": 0.3
       }
     },
     "name": "button-danger-fgColor-rest",
@@ -7825,7 +7833,7 @@
     "path": ["button", "danger", "fgColor", "disabled"]
   },
   "button-danger-iconColor-rest": {
-    "value": "#e5534b",
+    "value": "#ea5c53",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7838,7 +7846,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.danger}",
+      "value": "{button.danger.fgColor.rest}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {

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

@@ -7739,7 +7739,7 @@
     "path": ["button", "outline", "shadow", "selected"]
   },
   "button-danger-fgColor-rest": {
-    "value": "#ff9492",
+    "value": "#ffa8a6",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7749,10 +7749,14 @@
         "scopes": ["fgColor"]
       }
     },
+    "mix": {
+      "color": "#ff9492",
+      "weight": 0.3
+    },
     "filePath": "src/tokens/functional/color/dark/overrides/dark.high-contrast.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.red.3}",
+      "value": "{base.color.red.2}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -7761,6 +7765,10 @@
           "group": "component (internal)",
           "scopes": ["fgColor"]
         }
+      },
+      "mix": {
+        "color": "{base.color.red.3}",
+        "weight": 0.3
       }
     },
     "name": "button-danger-fgColor-rest",
@@ -7857,7 +7865,7 @@
     "path": ["button", "danger", "fgColor", "disabled"]
   },
   "button-danger-iconColor-rest": {
-    "value": "#ff9492",
+    "value": "#ffa8a6",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7870,7 +7878,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.danger}",
+      "value": "{button.danger.fgColor.rest}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -7973,7 +7981,7 @@
     "path": ["button", "danger", "bgColor", "hover"]
   },
   "button-danger-bgColor-active": {
-    "value": "#c51120",
+    "value": "#ad0116",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7983,13 +7991,9 @@
         "scopes": ["bgColor"]
       }
     },
-    "mix": {
-      "color": "#e82a2f",
-      "weight": 0.4
-    },
+    "mix": null,
     "filePath": "src/tokens/functional/color/dark/overrides/dark.high-contrast.json5",
     "isSource": true,
-    "alpha": 1,
     "original": {
       "value": "{bgColor.danger.emphasis}",
       "$type": "color",
@@ -8001,11 +8005,7 @@
           "scopes": ["bgColor"]
         }
       },
-      "mix": {
-        "color": "{base.color.red.7}",
-        "weight": 0.4
-      },
-      "alpha": 1
+      "mix": null
     },
     "name": "button-danger-bgColor-active",
     "attributes": {},

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

@@ -7707,7 +7707,7 @@
     "path": ["button", "outline", "shadow", "selected"]
   },
   "button-danger-fgColor-rest": {
-    "value": "#f85149",
+    "value": "#fa5e55",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7717,10 +7717,14 @@
         "scopes": ["fgColor"]
       }
     },
+    "mix": {
+      "color": "#ff7b72",
+      "weight": 0.3
+    },
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.danger}",
+      "value": "{base.color.red.4}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -7729,6 +7733,10 @@
           "group": "component (internal)",
           "scopes": ["fgColor"]
         }
+      },
+      "mix": {
+        "color": "{base.color.red.3}",
+        "weight": 0.3
       }
     },
     "name": "button-danger-fgColor-rest",
@@ -7825,7 +7833,7 @@
     "path": ["button", "danger", "fgColor", "disabled"]
   },
   "button-danger-iconColor-rest": {
-    "value": "#f85149",
+    "value": "#fa5e55",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7838,7 +7846,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.danger}",
+      "value": "{button.danger.fgColor.rest}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {

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

@@ -7707,7 +7707,7 @@
     "path": ["button", "outline", "shadow", "selected"]
   },
   "button-danger-fgColor-rest": {
-    "value": "#f85149",
+    "value": "#fa5e55",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7717,10 +7717,14 @@
         "scopes": ["fgColor"]
       }
     },
+    "mix": {
+      "color": "#ff7b72",
+      "weight": 0.3
+    },
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.danger}",
+      "value": "{base.color.red.4}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -7729,6 +7733,10 @@
           "group": "component (internal)",
           "scopes": ["fgColor"]
         }
+      },
+      "mix": {
+        "color": "{base.color.red.3}",
+        "weight": 0.3
       }
     },
     "name": "button-danger-fgColor-rest",
@@ -7825,7 +7833,7 @@
     "path": ["button", "danger", "fgColor", "disabled"]
   },
   "button-danger-iconColor-rest": {
-    "value": "#f85149",
+    "value": "#fa5e55",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7838,7 +7846,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.danger}",
+      "value": "{button.danger.fgColor.rest}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "9.0.1",
+  "version": "9.0.2-rc.758febf5",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "engines": {
     "node": ">=18.18.0 <18.19.0"

package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5

@@ -436,7 +436,7 @@
     danger: {
       fgColor: {
         rest: {
-          $value: '{base.color.red.3}',
+          $value: '{base.color.red.2}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -468,11 +468,7 @@
         active: {
           $value: '{bgColor.danger.emphasis}',
           $type: 'color',
-          alpha: 1,
-          mix: {
-            color: '{base.color.red.7}',
-            weight: 0.4,
-          },
+          mix: null
         },
       },
     },

package/src/tokens/functional/color/dark/patterns-dark.json5

@@ -1359,7 +1359,7 @@
     danger: {
       fgColor: {
         rest: {
-          $value: '{fgColor.danger}',
+          $value: '{base.color.red.4}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1369,6 +1369,10 @@
               scopes: ['fgColor'],
             },
           },
+          mix: {
+            color: '{base.color.red.3}',
+            weight: 0.3,
+          },
         },
         hover: {
           $value: '{base.color.neutral.13}',
@@ -1410,7 +1414,7 @@
       },
       iconColor: {
         rest: {
-          $value: '{fgColor.danger}',
+          $value: '{button.danger.fgColor.rest}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {