@primer/primitives 10.1.0-rc.f1589f93 → 10.1.0

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

@@ -1954,40 +1954,6 @@
     "group": "component",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
-  {
-    "name": "control/checked/bgColor/hover",
-    "value": {
-      "r": 0.011764705882352941,
-      "g": 0.26666666666666666,
-      "b": 0.6588235294117647,
-      "a": 1
-    },
-    "type": "COLOR",
-    "isMix": true,
-    "refId": "mode/control/checked/bgColor/hover",
-    "reference": "mode/bgColor/accent-emphasis",
-    "collection": "mode",
-    "mode": "light high contrast",
-    "group": "component",
-    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
-  },
-  {
-    "name": "control/checked/bgColor/active",
-    "value": {
-      "r": 0.011764705882352941,
-      "g": 0.24705882352941178,
-      "b": 0.615686274509804,
-      "a": 1
-    },
-    "type": "COLOR",
-    "isMix": true,
-    "refId": "mode/control/checked/bgColor/active",
-    "reference": "mode/bgColor/accent-emphasis",
-    "collection": "mode",
-    "mode": "light high contrast",
-    "group": "component",
-    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
-  },
   {
     "name": "control/checked/bgColor/disabled",
     "value": {
@@ -2052,38 +2018,6 @@
     "group": "component",
     "scopes": ["STROKE_COLOR"]
   },
-  {
-    "name": "control/checked/borderColor/hover",
-    "value": {
-      "r": 0.011764705882352941,
-      "g": 0.26666666666666666,
-      "b": 0.6588235294117647,
-      "a": 1
-    },
-    "type": "COLOR",
-    "refId": "mode/control/checked/borderColor/hover",
-    "reference": "mode/control/checked/bgColor/hover",
-    "collection": "mode",
-    "mode": "light high contrast",
-    "group": "component",
-    "scopes": ["STROKE_COLOR"]
-  },
-  {
-    "name": "control/checked/borderColor/active",
-    "value": {
-      "r": 0.011764705882352941,
-      "g": 0.24705882352941178,
-      "b": 0.615686274509804,
-      "a": 1
-    },
-    "type": "COLOR",
-    "refId": "mode/control/checked/borderColor/active",
-    "reference": "mode/control/checked/bgColor/active",
-    "collection": "mode",
-    "mode": "light high contrast",
-    "group": "component",
-    "scopes": ["STROKE_COLOR"]
-  },
   {
     "name": "control/checked/borderColor/disabled",
     "value": {
@@ -2537,39 +2471,6 @@
     "group": "component (internal)",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
-  {
-    "name": "button/primary/bgColor/disabled",
-    "value": {
-      "r": 0.5215686274509804,
-      "g": 0.796078431372549,
-      "b": 0.592156862745098,
-      "a": 1
-    },
-    "type": "COLOR",
-    "isMix": true,
-    "refId": "mode/button/primary/bgColor/disabled",
-    "reference": "base/color/light-high-contrast/base/color/green/4",
-    "collection": "mode",
-    "mode": "light high contrast",
-    "group": "component (internal)",
-    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
-  },
-  {
-    "name": "button/primary/borderColor/disabled",
-    "value": {
-      "r": 0.5215686274509804,
-      "g": 0.796078431372549,
-      "b": 0.592156862745098,
-      "a": 1
-    },
-    "type": "COLOR",
-    "refId": "mode/button/primary/borderColor/disabled",
-    "reference": "mode/button/primary/bgColor/disabled",
-    "collection": "mode",
-    "mode": "light high contrast",
-    "group": "component (internal)",
-    "scopes": ["STROKE_COLOR"]
-  },
   {
     "name": "button/primary/shadow/selected/offsetX",
     "value": 0,
@@ -2751,14 +2652,14 @@
   {
     "name": "button/invisible/bgColor/disabled",
     "value": {
-      "r": 0.8784313725490196,
-      "g": 0.9019607843137255,
-      "b": 0.9215686274509803,
-      "a": 1
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
     },
     "type": "COLOR",
     "refId": "mode/button/invisible/bgColor/disabled",
-    "reference": "mode/control/transparent/bgColor/disabled",
+    "reference": "base/color/light/base/color/transparent",
     "collection": "mode",
     "mode": "light high contrast",
     "group": "component (internal)",
@@ -2799,14 +2700,14 @@
   {
     "name": "button/invisible/borderColor/disabled",
     "value": {
-      "r": 0.34901960784313724,
-      "g": 0.38823529411764707,
-      "b": 0.43137254901960786,
-      "a": 0.12
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
     },
     "type": "COLOR",
     "refId": "mode/button/invisible/borderColor/disabled",
-    "reference": "mode/control/borderColor/disabled",
+    "reference": "base/color/light/base/color/transparent",
     "collection": "mode",
     "mode": "light high contrast",
     "group": "component (internal)",
@@ -2909,23 +2810,6 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
-  {
-    "name": "button/outline/bgColor/active",
-    "value": {
-      "r": 0.011764705882352941,
-      "g": 0.24705882352941178,
-      "b": 0.615686274509804,
-      "a": 1
-    },
-    "type": "COLOR",
-    "isMix": true,
-    "refId": "mode/button/outline/bgColor/active",
-    "reference": "mode/bgColor/accent-emphasis",
-    "collection": "mode",
-    "mode": "light high contrast",
-    "group": "component (internal)",
-    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
-  },
   {
     "name": "button/outline/bgColor/disabled",
     "value": {
@@ -3153,23 +3037,6 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
-  {
-    "name": "button/danger/bgColor/active",
-    "value": {
-      "r": 0.4549019607843137,
-      "g": 0.01568627450980392,
-      "b": 0.10196078431372549,
-      "a": 1
-    },
-    "type": "COLOR",
-    "isMix": true,
-    "refId": "mode/button/danger/bgColor/active",
-    "reference": "base/color/light-high-contrast/base/color/red/6",
-    "collection": "mode",
-    "mode": "light high contrast",
-    "group": "component (internal)",
-    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
-  },
   {
     "name": "button/danger/bgColor/disabled",
     "value": {
@@ -3500,23 +3367,6 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
-  {
-    "name": "buttonCounter/danger/fgColor/rest",
-    "value": {
-      "r": 0.596078431372549,
-      "g": 0.054901960784313725,
-      "b": 0.11764705882352941,
-      "a": 1
-    },
-    "type": "COLOR",
-    "isMix": true,
-    "refId": "mode/buttonCounter/danger/fgColor/rest",
-    "reference": "base/color/light-high-contrast/base/color/red/5",
-    "collection": "mode",
-    "mode": "light high contrast",
-    "group": "component (internal)",
-    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
-  },
   {
     "name": "buttonCounter/danger/fgColor/hover",
     "value": {
@@ -3566,23 +3416,6 @@
     "group": "component (internal)",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
-  {
-    "name": "reactionButton/selected/bgColor/hover",
-    "value": {
-      "r": 0.7803921568627451,
-      "g": 0.9137254901960784,
-      "b": 1,
-      "a": 1
-    },
-    "type": "COLOR",
-    "isMix": true,
-    "refId": "mode/reactionButton/selected/bgColor/hover",
-    "reference": "mode/reactionButton/selected/bgColor/rest",
-    "collection": "mode",
-    "mode": "light high contrast",
-    "group": "component (internal)",
-    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
-  },
   {
     "name": "reactionButton/selected/fgColor/rest",
     "value": {

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

@@ -3119,9 +3119,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "isMix": true,
     "refId": "mode/control/checked/bgColor/hover",
-    "reference": "mode/bgColor/accent-emphasis",
     "collection": "mode",
     "mode": "light tritanopia",
     "group": "component",
@@ -3136,9 +3134,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "isMix": true,
     "refId": "mode/control/checked/bgColor/active",
-    "reference": "mode/bgColor/accent-emphasis",
     "collection": "mode",
     "mode": "light tritanopia",
     "group": "component",
@@ -4066,14 +4062,14 @@
   {
     "name": "button/invisible/bgColor/disabled",
     "value": {
-      "r": 0.9372549019607843,
-      "g": 0.9490196078431372,
-      "b": 0.9607843137254902,
-      "a": 1
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
     },
     "type": "COLOR",
     "refId": "mode/button/invisible/bgColor/disabled",
-    "reference": "mode/control/transparent/bgColor/disabled",
+    "reference": "base/color/light/base/color/transparent",
     "collection": "mode",
     "mode": "light tritanopia",
     "group": "component (internal)",
@@ -4114,14 +4110,14 @@
   {
     "name": "button/invisible/borderColor/disabled",
     "value": {
-      "r": 0.5058823529411764,
-      "g": 0.5450980392156862,
-      "b": 0.596078431372549,
-      "a": 0.1
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
     },
     "type": "COLOR",
     "refId": "mode/button/invisible/borderColor/disabled",
-    "reference": "mode/control/borderColor/disabled",
+    "reference": "base/color/light/base/color/transparent",
     "collection": "mode",
     "mode": "light tritanopia",
     "group": "component (internal)",
@@ -4233,9 +4229,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "isMix": true,
     "refId": "mode/button/outline/bgColor/active",
-    "reference": "mode/bgColor/accent-emphasis",
     "collection": "mode",
     "mode": "light tritanopia",
     "group": "component (internal)",
@@ -4477,9 +4471,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "isMix": true,
     "refId": "mode/button/danger/bgColor/active",
-    "reference": "base/color/light/base/color/red/6",
     "collection": "mode",
     "mode": "light tritanopia",
     "group": "component (internal)",
@@ -4856,9 +4848,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "isMix": true,
     "refId": "mode/buttonCounter/danger/fgColor/rest",
-    "reference": "base/color/light/base/color/red/5",
     "collection": "mode",
     "mode": "light tritanopia",
     "group": "component (internal)",
@@ -4922,9 +4912,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "isMix": true,
     "refId": "mode/reactionButton/selected/bgColor/hover",
-    "reference": "mode/reactionButton/selected/bgColor/rest",
     "collection": "mode",
     "mode": "light tritanopia",
     "group": "component (internal)",
@@ -7281,9 +7269,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "isMix": true,
     "refId": "mode/fgColor/danger",
-    "reference": "base/color/light/base/color/red/5",
     "collection": "mode",
     "mode": "light tritanopia",
     "group": "semantic",

package/dist/figma/themes/light.json

@@ -3215,9 +3215,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "isMix": true,
     "refId": "mode/control/checked/bgColor/hover",
-    "reference": "mode/bgColor/accent-emphasis",
     "collection": "mode",
     "mode": "light",
     "group": "component",
@@ -3232,9 +3230,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "isMix": true,
     "refId": "mode/control/checked/bgColor/active",
-    "reference": "mode/bgColor/accent-emphasis",
     "collection": "mode",
     "mode": "light",
     "group": "component",
@@ -3893,9 +3889,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "isMix": true,
     "refId": "mode/button/primary/bgColor/hover",
-    "reference": "mode/bgColor/success-emphasis",
     "collection": "mode",
     "mode": "light",
     "group": "component (internal)",
@@ -3910,9 +3904,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "isMix": true,
     "refId": "mode/button/primary/bgColor/active",
-    "reference": "mode/bgColor/success-emphasis",
     "collection": "mode",
     "mode": "light",
     "group": "component (internal)",
@@ -3927,9 +3919,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "isMix": true,
     "refId": "mode/button/primary/bgColor/disabled",
-    "reference": "base/color/light/base/color/green/4",
     "collection": "mode",
     "mode": "light",
     "group": "component (internal)",
@@ -4213,14 +4203,14 @@
   {
     "name": "button/invisible/bgColor/disabled",
     "value": {
-      "r": 0.9372549019607843,
-      "g": 0.9490196078431372,
-      "b": 0.9607843137254902,
-      "a": 1
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
     },
     "type": "COLOR",
     "refId": "mode/button/invisible/bgColor/disabled",
-    "reference": "mode/control/transparent/bgColor/disabled",
+    "reference": "base/color/light/base/color/transparent",
     "collection": "mode",
     "mode": "light",
     "group": "component (internal)",
@@ -4261,14 +4251,14 @@
   {
     "name": "button/invisible/borderColor/disabled",
     "value": {
-      "r": 0.5058823529411764,
-      "g": 0.5450980392156862,
-      "b": 0.596078431372549,
-      "a": 0.1
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
     },
     "type": "COLOR",
     "refId": "mode/button/invisible/borderColor/disabled",
-    "reference": "mode/control/borderColor/disabled",
+    "reference": "base/color/light/base/color/transparent",
     "collection": "mode",
     "mode": "light",
     "group": "component (internal)",
@@ -4380,9 +4370,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "isMix": true,
     "refId": "mode/button/outline/bgColor/active",
-    "reference": "mode/bgColor/accent-emphasis",
     "collection": "mode",
     "mode": "light",
     "group": "component (internal)",
@@ -4624,9 +4612,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "isMix": true,
     "refId": "mode/button/danger/bgColor/active",
-    "reference": "base/color/light/base/color/red/6",
     "collection": "mode",
     "mode": "light",
     "group": "component (internal)",
@@ -5003,9 +4989,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "isMix": true,
     "refId": "mode/buttonCounter/danger/fgColor/rest",
-    "reference": "base/color/light/base/color/red/5",
     "collection": "mode",
     "mode": "light",
     "group": "component (internal)",
@@ -5069,9 +5053,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "isMix": true,
     "refId": "mode/reactionButton/selected/bgColor/hover",
-    "reference": "mode/reactionButton/selected/bgColor/rest",
     "collection": "mode",
     "mode": "light",
     "group": "component (internal)",
@@ -7485,9 +7467,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "isMix": true,
     "refId": "mode/fgColor/danger",
-    "reference": "base/color/light/base/color/red/5",
     "collection": "mode",
     "mode": "light",
     "group": "semantic",
@@ -7830,9 +7810,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "isMix": true,
     "refId": "mode/bgColor/success-emphasis",
-    "reference": "base/color/light/base/color/green/4",
     "collection": "mode",
     "mode": "light",
     "group": "semantic",

package/dist/internalCss/dark-colorblind.css

@@ -2,6 +2,20 @@
 [data-color-mode="dark"][data-dark-theme="dark_colorblind"] ::backdrop,
 [data-color-mode="auto"][data-light-theme="dark_colorblind"],
 [data-color-mode="auto"][data-light-theme="dark_colorblind"] ::backdrop {
+  --boxShadow-thin: inset 0 0 0 0.0625rem; /* Thin shadow for borders */
+  --boxShadow-thick: inset 0 0 0 0.125rem;
+  --boxShadow-thicker: inset 0 0 0 0.25rem;
+  --borderWidth-default: 0.0625rem;
+  --borderWidth-thin: 0.0625rem;
+  --borderWidth-thick: 0.125rem;
+  --borderWidth-thicker: 0.25rem;
+  --borderRadius-small: 0.1875rem;
+  --borderRadius-medium: 0.375rem;
+  --borderRadius-large: 0.75rem;
+  --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
+  --borderRadius-default: 0.375rem;
+  --outline-focus-offset: -0.125rem;
+  --outline-focus-width: 0.125rem;
   --base-color-black: #010409;
   --base-color-inset: #010409;
   --base-color-white: #ffffff;
@@ -549,10 +563,10 @@
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #656c7633;
   --button-invisible-bgColor-active: #656c7640;
-  --button-invisible-bgColor-disabled: #212830;
+  --button-invisible-bgColor-disabled: #00000000;
   --button-invisible-borderColor-rest: #00000000;
   --button-invisible-borderColor-hover: #00000000;
-  --button-invisible-borderColor-disabled: #656c761a;
+  --button-invisible-borderColor-disabled: #00000000;
   --button-outline-fgColor-rest: #388bfd;
   --button-outline-fgColor-hover: #58a6ff;
   --button-outline-fgColor-active: #ffffff;
@@ -601,6 +615,7 @@
   --reactionButton-selected-fgColor-rest: #4493f8;
   --reactionButton-selected-fgColor-hover: #79c0ff;
   --focus-outlineColor: #1f6feb;
+  --focus-outline: 2px solid #1f6feb;
   --menu-bgColor-active: #151b23;
   --overlay-bgColor: #151b23;
   --overlay-borderColor: #3d444db3;
@@ -866,11 +881,51 @@
   --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
   --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
   --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-  --outline-focus: #1f6feb solid 2px;
+  --border-default: 0.0625rem solid #3d444d;
+  --border-muted: 0.0625rem solid #3d444db3;
+  --border-emphasis: 0.0625rem solid #656c76;
+  --border-disabled: 0.0625rem solid #656c761a;
+  --border-transparent: 0.0625rem solid #00000000;
+  --border-neutral-emphasis: 0.0625rem solid #656c76;
+  --border-neutral-muted: 0.0625rem solid #3d444db3;
+  --border-accent-emphasis: 0.0625rem solid #1f6feb;
+  --border-accent-muted: 0.0625rem solid #388bfd66;
+  --border-success-emphasis: 0.0625rem solid #1f6feb;
+  --border-success-muted: 0.0625rem solid #388bfd66;
+  --border-open-emphasis: 0.0625rem solid #1f6feb;
+  --border-open-muted: 0.0625rem solid #388bfd66;
+  --border-danger-emphasis: 0.0625rem solid #bd561d;
+  --border-danger-muted: 0.0625rem solid #db6d2866;
+  --border-closed-emphasis: 0.0625rem solid #bd561d;
+  --border-closed-muted: 0.0625rem solid #db6d2866;
+  --border-attention-emphasis: 0.0625rem solid #9e6a03;
+  --border-attention-muted: 0.0625rem solid #bb800966;
+  --border-severe-emphasis: 0.0625rem solid #bd561d;
+  --border-severe-muted: 0.0625rem solid #db6d2866;
+  --border-done-emphasis: 0.0625rem solid #8957e5;
+  --border-done-muted: 0.0625rem solid #ab7df866;
+  --border-upsell-emphasis: 0.0625rem solid #8957e5;
+  --border-upsell-muted: 0.0625rem solid #ab7df866;
+  --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
+  --border-sponsors-muted: 0.0625rem solid #db61a266;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark_colorblind"],
   [data-color-mode="auto"][data-dark-theme="dark_colorblind"] ::backdrop {
+    --boxShadow-thin: inset 0 0 0 0.0625rem; /* Thin shadow for borders */
+    --boxShadow-thick: inset 0 0 0 0.125rem;
+    --boxShadow-thicker: inset 0 0 0 0.25rem;
+    --borderWidth-default: 0.0625rem;
+    --borderWidth-thin: 0.0625rem;
+    --borderWidth-thick: 0.125rem;
+    --borderWidth-thicker: 0.25rem;
+    --borderRadius-small: 0.1875rem;
+    --borderRadius-medium: 0.375rem;
+    --borderRadius-large: 0.75rem;
+    --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
+    --borderRadius-default: 0.375rem;
+    --outline-focus-offset: -0.125rem;
+    --outline-focus-width: 0.125rem;
     --base-color-black: #010409;
     --base-color-inset: #010409;
     --base-color-white: #ffffff;
@@ -1418,10 +1473,10 @@
     --button-invisible-bgColor-rest: #00000000;
     --button-invisible-bgColor-hover: #656c7633;
     --button-invisible-bgColor-active: #656c7640;
-    --button-invisible-bgColor-disabled: #212830;
+    --button-invisible-bgColor-disabled: #00000000;
     --button-invisible-borderColor-rest: #00000000;
     --button-invisible-borderColor-hover: #00000000;
-    --button-invisible-borderColor-disabled: #656c761a;
+    --button-invisible-borderColor-disabled: #00000000;
     --button-outline-fgColor-rest: #388bfd;
     --button-outline-fgColor-hover: #58a6ff;
     --button-outline-fgColor-active: #ffffff;
@@ -1470,6 +1525,7 @@
     --reactionButton-selected-fgColor-rest: #4493f8;
     --reactionButton-selected-fgColor-hover: #79c0ff;
     --focus-outlineColor: #1f6feb;
+    --focus-outline: 2px solid #1f6feb;
     --menu-bgColor-active: #151b23;
     --overlay-bgColor: #151b23;
     --overlay-borderColor: #3d444db3;
@@ -1735,6 +1791,32 @@
     --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
     --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
     --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-    --outline-focus: #1f6feb solid 2px;
+    --border-default: 0.0625rem solid #3d444d;
+    --border-muted: 0.0625rem solid #3d444db3;
+    --border-emphasis: 0.0625rem solid #656c76;
+    --border-disabled: 0.0625rem solid #656c761a;
+    --border-transparent: 0.0625rem solid #00000000;
+    --border-neutral-emphasis: 0.0625rem solid #656c76;
+    --border-neutral-muted: 0.0625rem solid #3d444db3;
+    --border-accent-emphasis: 0.0625rem solid #1f6feb;
+    --border-accent-muted: 0.0625rem solid #388bfd66;
+    --border-success-emphasis: 0.0625rem solid #1f6feb;
+    --border-success-muted: 0.0625rem solid #388bfd66;
+    --border-open-emphasis: 0.0625rem solid #1f6feb;
+    --border-open-muted: 0.0625rem solid #388bfd66;
+    --border-danger-emphasis: 0.0625rem solid #bd561d;
+    --border-danger-muted: 0.0625rem solid #db6d2866;
+    --border-closed-emphasis: 0.0625rem solid #bd561d;
+    --border-closed-muted: 0.0625rem solid #db6d2866;
+    --border-attention-emphasis: 0.0625rem solid #9e6a03;
+    --border-attention-muted: 0.0625rem solid #bb800966;
+    --border-severe-emphasis: 0.0625rem solid #bd561d;
+    --border-severe-muted: 0.0625rem solid #db6d2866;
+    --border-done-emphasis: 0.0625rem solid #8957e5;
+    --border-done-muted: 0.0625rem solid #ab7df866;
+    --border-upsell-emphasis: 0.0625rem solid #8957e5;
+    --border-upsell-muted: 0.0625rem solid #ab7df866;
+    --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
+    --border-sponsors-muted: 0.0625rem solid #db61a266;
   }
 }