@primer/primitives 10.0.0 → 10.1.0-rc.3e576ad9

package/dist/internalCss/dark-dimmed.css

@@ -2,6 +2,20 @@
 [data-color-mode="dark"][data-dark-theme="dark_dimmed"] ::backdrop,
 [data-color-mode="auto"][data-light-theme="dark_dimmed"],
 [data-color-mode="auto"][data-light-theme="dark_dimmed"] ::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: #1c2128;
   --base-color-inset: #1c2128;
   --base-color-white: #cdd9e5;
@@ -601,6 +615,7 @@
   --reactionButton-selected-fgColor-rest: #478be6;
   --reactionButton-selected-fgColor-hover: #6cb6ff;
   --focus-outlineColor: #316dca;
+  --focus-outline: 2px solid #316dca;
   --menu-bgColor-active: #151b23;
   --overlay-bgColor: #2a313c;
   --overlay-borderColor: #3d444db3;
@@ -866,11 +881,51 @@
   --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #1c2128;
   --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #1c2128;
   --shadow-floating-legacy: 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
-  --outline-focus: #316dca 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 #316dca;
+  --border-accent-muted: 0.0625rem solid #4184e466;
+  --border-success-emphasis: 0.0625rem solid #347d39;
+  --border-success-muted: 0.0625rem solid #46954a66;
+  --border-open-emphasis: 0.0625rem solid #347d39;
+  --border-open-muted: 0.0625rem solid #46954a66;
+  --border-danger-emphasis: 0.0625rem solid #c93c37;
+  --border-danger-muted: 0.0625rem solid #e5534b66;
+  --border-closed-emphasis: 0.0625rem solid #c93c37;
+  --border-closed-muted: 0.0625rem solid #e5534b66;
+  --border-attention-emphasis: 0.0625rem solid #966600;
+  --border-attention-muted: 0.0625rem solid #ae7c1466;
+  --border-severe-emphasis: 0.0625rem solid #ae5622;
+  --border-severe-muted: 0.0625rem solid #cc6b2c66;
+  --border-done-emphasis: 0.0625rem solid #8256d0;
+  --border-done-muted: 0.0625rem solid #986ee266;
+  --border-upsell-emphasis: 0.0625rem solid #8256d0;
+  --border-upsell-muted: 0.0625rem solid #986ee266;
+  --border-sponsors-emphasis: 0.0625rem solid #ae4c82;
+  --border-sponsors-muted: 0.0625rem solid #c9619866;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark_dimmed"],
   [data-color-mode="auto"][data-dark-theme="dark_dimmed"] ::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: #1c2128;
     --base-color-inset: #1c2128;
     --base-color-white: #cdd9e5;
@@ -1470,6 +1525,7 @@
     --reactionButton-selected-fgColor-rest: #478be6;
     --reactionButton-selected-fgColor-hover: #6cb6ff;
     --focus-outlineColor: #316dca;
+    --focus-outline: 2px solid #316dca;
     --menu-bgColor-active: #151b23;
     --overlay-bgColor: #2a313c;
     --overlay-borderColor: #3d444db3;
@@ -1735,6 +1791,32 @@
     --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #1c2128;
     --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #1c2128;
     --shadow-floating-legacy: 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
-    --outline-focus: #316dca 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 #316dca;
+    --border-accent-muted: 0.0625rem solid #4184e466;
+    --border-success-emphasis: 0.0625rem solid #347d39;
+    --border-success-muted: 0.0625rem solid #46954a66;
+    --border-open-emphasis: 0.0625rem solid #347d39;
+    --border-open-muted: 0.0625rem solid #46954a66;
+    --border-danger-emphasis: 0.0625rem solid #c93c37;
+    --border-danger-muted: 0.0625rem solid #e5534b66;
+    --border-closed-emphasis: 0.0625rem solid #c93c37;
+    --border-closed-muted: 0.0625rem solid #e5534b66;
+    --border-attention-emphasis: 0.0625rem solid #966600;
+    --border-attention-muted: 0.0625rem solid #ae7c1466;
+    --border-severe-emphasis: 0.0625rem solid #ae5622;
+    --border-severe-muted: 0.0625rem solid #cc6b2c66;
+    --border-done-emphasis: 0.0625rem solid #8256d0;
+    --border-done-muted: 0.0625rem solid #986ee266;
+    --border-upsell-emphasis: 0.0625rem solid #8256d0;
+    --border-upsell-muted: 0.0625rem solid #986ee266;
+    --border-sponsors-emphasis: 0.0625rem solid #ae4c82;
+    --border-sponsors-muted: 0.0625rem solid #c9619866;
   }
 }

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

@@ -2,6 +2,20 @@
 [data-color-mode="dark"][data-dark-theme="dark_high_contrast"] ::backdrop,
 [data-color-mode="auto"][data-light-theme="dark_high_contrast"],
 [data-color-mode="auto"][data-light-theme="dark_high_contrast"] ::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;
@@ -601,6 +615,7 @@
   --reactionButton-selected-fgColor-rest: #74b9ff;
   --reactionButton-selected-fgColor-hover: #91cbff;
   --focus-outlineColor: #409eff;
+  --focus-outline: 2px solid #409eff;
   --menu-bgColor-active: #151b23;
   --overlay-bgColor: #151b23;
   --overlay-borderColor: #b7bdc8;
@@ -866,11 +881,51 @@
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
   --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
   --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-  --outline-focus: #409eff solid 2px;
+  --border-default: 0.0625rem solid #b7bdc8;
+  --border-muted: 0.0625rem solid #b7bdc8;
+  --border-emphasis: 0.0625rem solid #b7bdc8;
+  --border-disabled: 0.0625rem solid #9198a11f;
+  --border-transparent: 0.0625rem solid #00000000;
+  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
+  --border-neutral-muted: 0.0625rem solid #b7bdc8;
+  --border-accent-emphasis: 0.0625rem solid #409eff;
+  --border-accent-muted: 0.0625rem solid #5cacff;
+  --border-success-emphasis: 0.0625rem solid #09b43a;
+  --border-success-muted: 0.0625rem solid #0ac740;
+  --border-open-emphasis: 0.0625rem solid #09b43a;
+  --border-open-muted: 0.0625rem solid #0ac740;
+  --border-danger-emphasis: 0.0625rem solid #ff6a69;
+  --border-danger-muted: 0.0625rem solid #ff8080;
+  --border-closed-emphasis: 0.0625rem solid #ff6a69;
+  --border-closed-muted: 0.0625rem solid #ff8080;
+  --border-attention-emphasis: 0.0625rem solid #e09b13;
+  --border-attention-muted: 0.0625rem solid #edaa27;
+  --border-severe-emphasis: 0.0625rem solid #e7811d;
+  --border-severe-muted: 0.0625rem solid #f48b25;
+  --border-done-emphasis: 0.0625rem solid #b87fff;
+  --border-done-muted: 0.0625rem solid #bf8fff;
+  --border-upsell-emphasis: 0.0625rem solid #b87fff;
+  --border-upsell-muted: 0.0625rem solid #bf8fff;
+  --border-sponsors-emphasis: 0.0625rem solid #ef6eb1;
+  --border-sponsors-muted: 0.0625rem solid #f87cbd;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark_high_contrast"],
   [data-color-mode="auto"][data-dark-theme="dark_high_contrast"] ::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;
@@ -1470,6 +1525,7 @@
     --reactionButton-selected-fgColor-rest: #74b9ff;
     --reactionButton-selected-fgColor-hover: #91cbff;
     --focus-outlineColor: #409eff;
+    --focus-outline: 2px solid #409eff;
     --menu-bgColor-active: #151b23;
     --overlay-bgColor: #151b23;
     --overlay-borderColor: #b7bdc8;
@@ -1735,6 +1791,32 @@
     --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
     --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
     --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-    --outline-focus: #409eff solid 2px;
+    --border-default: 0.0625rem solid #b7bdc8;
+    --border-muted: 0.0625rem solid #b7bdc8;
+    --border-emphasis: 0.0625rem solid #b7bdc8;
+    --border-disabled: 0.0625rem solid #9198a11f;
+    --border-transparent: 0.0625rem solid #00000000;
+    --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
+    --border-neutral-muted: 0.0625rem solid #b7bdc8;
+    --border-accent-emphasis: 0.0625rem solid #409eff;
+    --border-accent-muted: 0.0625rem solid #5cacff;
+    --border-success-emphasis: 0.0625rem solid #09b43a;
+    --border-success-muted: 0.0625rem solid #0ac740;
+    --border-open-emphasis: 0.0625rem solid #09b43a;
+    --border-open-muted: 0.0625rem solid #0ac740;
+    --border-danger-emphasis: 0.0625rem solid #ff6a69;
+    --border-danger-muted: 0.0625rem solid #ff8080;
+    --border-closed-emphasis: 0.0625rem solid #ff6a69;
+    --border-closed-muted: 0.0625rem solid #ff8080;
+    --border-attention-emphasis: 0.0625rem solid #e09b13;
+    --border-attention-muted: 0.0625rem solid #edaa27;
+    --border-severe-emphasis: 0.0625rem solid #e7811d;
+    --border-severe-muted: 0.0625rem solid #f48b25;
+    --border-done-emphasis: 0.0625rem solid #b87fff;
+    --border-done-muted: 0.0625rem solid #bf8fff;
+    --border-upsell-emphasis: 0.0625rem solid #b87fff;
+    --border-upsell-muted: 0.0625rem solid #bf8fff;
+    --border-sponsors-emphasis: 0.0625rem solid #ef6eb1;
+    --border-sponsors-muted: 0.0625rem solid #f87cbd;
   }
 }

package/dist/internalCss/dark-tritanopia.css

@@ -2,6 +2,20 @@
 [data-color-mode="dark"][data-dark-theme="dark_tritanopia"] ::backdrop,
 [data-color-mode="auto"][data-light-theme="dark_tritanopia"],
 [data-color-mode="auto"][data-light-theme="dark_tritanopia"] ::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;
@@ -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 #da3633;
+  --border-danger-muted: 0.0625rem solid #f8514966;
+  --border-closed-emphasis: 0.0625rem solid #da3633;
+  --border-closed-muted: 0.0625rem solid #f8514966;
+  --border-attention-emphasis: 0.0625rem solid #9e6a03;
+  --border-attention-muted: 0.0625rem solid #bb800966;
+  --border-severe-emphasis: 0.0625rem solid #da3633;
+  --border-severe-muted: 0.0625rem solid #f8514966;
+  --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_tritanopia"],
   [data-color-mode="auto"][data-dark-theme="dark_tritanopia"] ::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;
@@ -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 #da3633;
+    --border-danger-muted: 0.0625rem solid #f8514966;
+    --border-closed-emphasis: 0.0625rem solid #da3633;
+    --border-closed-muted: 0.0625rem solid #f8514966;
+    --border-attention-emphasis: 0.0625rem solid #9e6a03;
+    --border-attention-muted: 0.0625rem solid #bb800966;
+    --border-severe-emphasis: 0.0625rem solid #da3633;
+    --border-severe-muted: 0.0625rem solid #f8514966;
+    --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;
   }
 }

package/dist/internalCss/dark.css

@@ -2,6 +2,20 @@
 [data-color-mode="dark"][data-dark-theme="dark"] ::backdrop,
 [data-color-mode="auto"][data-light-theme="dark"],
 [data-color-mode="auto"][data-light-theme="dark"] ::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;
@@ -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 #238636;
+  --border-success-muted: 0.0625rem solid #2ea04366;
+  --border-open-emphasis: 0.0625rem solid #238636;
+  --border-open-muted: 0.0625rem solid #2ea04366;
+  --border-danger-emphasis: 0.0625rem solid #da3633;
+  --border-danger-muted: 0.0625rem solid #f8514966;
+  --border-closed-emphasis: 0.0625rem solid #da3633;
+  --border-closed-muted: 0.0625rem solid #f8514966;
+  --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"],
   [data-color-mode="auto"][data-dark-theme="dark"] ::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;
@@ -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 #238636;
+    --border-success-muted: 0.0625rem solid #2ea04366;
+    --border-open-emphasis: 0.0625rem solid #238636;
+    --border-open-muted: 0.0625rem solid #2ea04366;
+    --border-danger-emphasis: 0.0625rem solid #da3633;
+    --border-danger-muted: 0.0625rem solid #f8514966;
+    --border-closed-emphasis: 0.0625rem solid #da3633;
+    --border-closed-muted: 0.0625rem solid #f8514966;
+    --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;
   }
 }

package/dist/internalCss/light-colorblind.css

@@ -2,6 +2,20 @@
 [data-color-mode="light"][data-light-theme="light_colorblind"] ::backdrop,
 [data-color-mode="auto"][data-light-theme="light_colorblind"],
 [data-color-mode="auto"][data-light-theme="light_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: #1f2328;
   --base-color-inset: #ffffff;
   --base-color-transparent: #ffffff00;
@@ -601,7 +615,7 @@
   --reactionButton-selected-fgColor-rest: #0969da;
   --reactionButton-selected-fgColor-hover: #0550ae;
   --focus-outlineColor: #0969da;
-  --focus-outline: #0969da solid 2px;
+  --focus-outline: 2px solid #0969da;
   --menu-bgColor-active: #ffffff00;
   --overlay-bgColor: #ffffff;
   --overlay-borderColor: #d1d9e080;
@@ -867,10 +881,51 @@
   --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
   --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
   --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
+  --border-default: 0.0625rem solid #d1d9e0;
+  --border-muted: 0.0625rem solid #d1d9e0b3;
+  --border-emphasis: 0.0625rem solid #818b98;
+  --border-disabled: 0.0625rem solid #818b981a;
+  --border-transparent: 0.0625rem solid #ffffff00;
+  --border-neutral-emphasis: 0.0625rem solid #59636e;
+  --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
+  --border-accent-emphasis: 0.0625rem solid #0969da;
+  --border-accent-muted: 0.0625rem solid #54aeff66;
+  --border-success-emphasis: 0.0625rem solid #0969da;
+  --border-success-muted: 0.0625rem solid #54aeff66;
+  --border-open-emphasis: 0.0625rem solid #0969da;
+  --border-open-muted: 0.0625rem solid #54aeff66;
+  --border-danger-emphasis: 0.0625rem solid #bc4c00;
+  --border-danger-muted: 0.0625rem solid #fb8f4466;
+  --border-closed-emphasis: 0.0625rem solid #bc4c00;
+  --border-closed-muted: 0.0625rem solid #fb8f4466;
+  --border-attention-emphasis: 0.0625rem solid #9a6700;
+  --border-attention-muted: 0.0625rem solid #d4a72c66;
+  --border-severe-emphasis: 0.0625rem solid #bc4c00;
+  --border-severe-muted: 0.0625rem solid #fb8f4466;
+  --border-done-emphasis: 0.0625rem solid #8250df;
+  --border-done-muted: 0.0625rem solid #c297ff66;
+  --border-upsell-emphasis: 0.0625rem solid #8250df;
+  --border-upsell-muted: 0.0625rem solid #c297ff66;
+  --border-sponsors-emphasis: 0.0625rem solid #bf3989;
+  --border-sponsors-muted: 0.0625rem solid #ff80c866;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="light_colorblind"],
   [data-color-mode="auto"][data-dark-theme="light_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: #1f2328;
     --base-color-inset: #ffffff;
     --base-color-transparent: #ffffff00;
@@ -1470,7 +1525,7 @@
     --reactionButton-selected-fgColor-rest: #0969da;
     --reactionButton-selected-fgColor-hover: #0550ae;
     --focus-outlineColor: #0969da;
-    --focus-outline: #0969da solid 2px;
+    --focus-outline: 2px solid #0969da;
     --menu-bgColor-active: #ffffff00;
     --overlay-bgColor: #ffffff;
     --overlay-borderColor: #d1d9e080;
@@ -1736,5 +1791,32 @@
     --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
     --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
     --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
+    --border-default: 0.0625rem solid #d1d9e0;
+    --border-muted: 0.0625rem solid #d1d9e0b3;
+    --border-emphasis: 0.0625rem solid #818b98;
+    --border-disabled: 0.0625rem solid #818b981a;
+    --border-transparent: 0.0625rem solid #ffffff00;
+    --border-neutral-emphasis: 0.0625rem solid #59636e;
+    --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
+    --border-accent-emphasis: 0.0625rem solid #0969da;
+    --border-accent-muted: 0.0625rem solid #54aeff66;
+    --border-success-emphasis: 0.0625rem solid #0969da;
+    --border-success-muted: 0.0625rem solid #54aeff66;
+    --border-open-emphasis: 0.0625rem solid #0969da;
+    --border-open-muted: 0.0625rem solid #54aeff66;
+    --border-danger-emphasis: 0.0625rem solid #bc4c00;
+    --border-danger-muted: 0.0625rem solid #fb8f4466;
+    --border-closed-emphasis: 0.0625rem solid #bc4c00;
+    --border-closed-muted: 0.0625rem solid #fb8f4466;
+    --border-attention-emphasis: 0.0625rem solid #9a6700;
+    --border-attention-muted: 0.0625rem solid #d4a72c66;
+    --border-severe-emphasis: 0.0625rem solid #bc4c00;
+    --border-severe-muted: 0.0625rem solid #fb8f4466;
+    --border-done-emphasis: 0.0625rem solid #8250df;
+    --border-done-muted: 0.0625rem solid #c297ff66;
+    --border-upsell-emphasis: 0.0625rem solid #8250df;
+    --border-upsell-muted: 0.0625rem solid #c297ff66;
+    --border-sponsors-emphasis: 0.0625rem solid #bf3989;
+    --border-sponsors-muted: 0.0625rem solid #ff80c866;
   }
 }