Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add composite border token #1118

Merged
merged 6 commits into from
Dec 11, 2024
Merged

add composite border token #1118

merged 6 commits into from
Dec 11, 2024

Conversation

lukasoppermann
Copy link
Contributor

@lukasoppermann lukasoppermann commented Dec 11, 2024 •
edited by langermank
Loading

Closes https://github.com/github/primer/issues/4503

Summary

Add composite border tokens

@lukasoppermann lukasoppermann self-assigned this Dec 11, 2024
@lukasoppermann lukasoppermann requested review from a team as code owners December 11, 2024 15:06
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Dec 11, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: 88eabfb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/primitives Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Dec 11, 2024 •
edited
Loading

Design Token Diff (CSS)

/css/functional/size/border.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/size/border.css	2024-12-11 17:45:11.016526636 +0000
@@ -1,11 +1,11 @@
:root {
-  --boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem); /* Thin shadow for borders */
-  --boxShadow-thick: inset 0 0 0 max(2px, 0.125rem);
-  --boxShadow-thicker: inset 0 0 0 max(4px, 0.25rem);
-  --borderWidth-default: max(1px, 0.0625rem);
-  --borderWidth-thin: max(1px, 0.0625rem);
-  --borderWidth-thick: max(2px, 0.125rem);
-  --borderWidth-thicker: max(4px, 0.25rem);
+  --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;

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

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind.css	2024-12-11 17:45:10.024507391 +0000
@@ -311,7 +311,7 @@
 --reactionButton-selected-fgColor-rest: #4493f8;
 --reactionButton-selected-fgColor-hover: #79c0ff;
 --focus-outlineColor: #1f6feb;
-  --focus-outline: #1f6feb solid 2px;
+  --focus-outline: 2px solid #1f6feb;
 --menu-bgColor-active: #151b23;
 --overlay-bgColor: #151b23;
 --overlay-borderColor: #3d444db3;
@@ -577,6 +577,33 @@
 --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;
+  --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"],
@@ -890,7 +917,7 @@
   --reactionButton-selected-fgColor-rest: #4493f8;
   --reactionButton-selected-fgColor-hover: #79c0ff;
   --focus-outlineColor: #1f6feb;
-    --focus-outline: #1f6feb solid 2px;
+    --focus-outline: 2px solid #1f6feb;
   --menu-bgColor-active: #151b23;
   --overlay-bgColor: #151b23;
   --overlay-borderColor: #3d444db3;
@@ -1156,5 +1183,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;
+    --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;
 }
}

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

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-dimmed.css	2024-12-11 17:45:08.121470510 +0000
@@ -311,7 +311,7 @@
 --reactionButton-selected-fgColor-rest: #478be6;
 --reactionButton-selected-fgColor-hover: #6cb6ff;
 --focus-outlineColor: #316dca;
-  --focus-outline: #316dca solid 2px;
+  --focus-outline: 2px solid #316dca;
 --menu-bgColor-active: #151b23;
 --overlay-bgColor: #2a313c;
 --overlay-borderColor: #3d444db3;
@@ -577,6 +577,33 @@
 --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;
+  --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"],
@@ -890,7 +917,7 @@
   --reactionButton-selected-fgColor-rest: #478be6;
   --reactionButton-selected-fgColor-hover: #6cb6ff;
   --focus-outlineColor: #316dca;
-    --focus-outline: #316dca solid 2px;
+    --focus-outline: 2px solid #316dca;
   --menu-bgColor-active: #151b23;
   --overlay-bgColor: #2a313c;
   --overlay-borderColor: #3d444db3;
@@ -1156,5 +1183,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;
+    --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;
 }
}

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

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-high-contrast.css	2024-12-11 17:45:10.919524754 +0000
@@ -311,7 +311,7 @@
 --reactionButton-selected-fgColor-rest: #74b9ff;
 --reactionButton-selected-fgColor-hover: #91cbff;
 --focus-outlineColor: #409eff;
-  --focus-outline: #409eff solid 2px;
+  --focus-outline: 2px solid #409eff;
 --menu-bgColor-active: #151b23;
 --overlay-bgColor: #151b23;
 --overlay-borderColor: #b7bdc8;
@@ -577,6 +577,33 @@
 --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;
+  --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"],
@@ -890,7 +917,7 @@
   --reactionButton-selected-fgColor-rest: #74b9ff;
   --reactionButton-selected-fgColor-hover: #91cbff;
   --focus-outlineColor: #409eff;
-    --focus-outline: #409eff solid 2px;
+    --focus-outline: 2px solid #409eff;
   --menu-bgColor-active: #151b23;
   --overlay-bgColor: #151b23;
   --overlay-borderColor: #b7bdc8;
@@ -1156,5 +1183,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;
+    --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;
 }
}

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

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-tritanopia.css	2024-12-11 17:45:09.082489116 +0000
@@ -311,7 +311,7 @@
 --reactionButton-selected-fgColor-rest: #4493f8;
 --reactionButton-selected-fgColor-hover: #79c0ff;
 --focus-outlineColor: #1f6feb;
-  --focus-outline: #1f6feb solid 2px;
+  --focus-outline: 2px solid #1f6feb;
 --menu-bgColor-active: #151b23;
 --overlay-bgColor: #151b23;
 --overlay-borderColor: #3d444db3;
@@ -577,6 +577,33 @@
 --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;
+  --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"],
@@ -890,7 +917,7 @@
   --reactionButton-selected-fgColor-rest: #4493f8;
   --reactionButton-selected-fgColor-hover: #79c0ff;
   --focus-outlineColor: #1f6feb;
-    --focus-outline: #1f6feb solid 2px;
+    --focus-outline: 2px solid #1f6feb;
   --menu-bgColor-active: #151b23;
   --overlay-bgColor: #151b23;
   --overlay-borderColor: #3d444db3;
@@ -1156,5 +1183,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;
+    --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;
 }
}

/css/functional/themes/dark.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark.css	2024-12-11 17:45:07.141451692 +0000
@@ -311,7 +311,7 @@
 --reactionButton-selected-fgColor-rest: #4493f8;
 --reactionButton-selected-fgColor-hover: #79c0ff;
 --focus-outlineColor: #1f6feb;
-  --focus-outline: #1f6feb solid 2px;
+  --focus-outline: 2px solid #1f6feb;
 --menu-bgColor-active: #151b23;
 --overlay-bgColor: #151b23;
 --overlay-borderColor: #3d444db3;
@@ -577,6 +577,33 @@
 --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;
+  --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"],
@@ -890,7 +917,7 @@
   --reactionButton-selected-fgColor-rest: #4493f8;
   --reactionButton-selected-fgColor-hover: #79c0ff;
   --focus-outlineColor: #1f6feb;
-    --focus-outline: #1f6feb solid 2px;
+    --focus-outline: 2px solid #1f6feb;
   --menu-bgColor-active: #151b23;
   --overlay-bgColor: #151b23;
   --overlay-borderColor: #3d444db3;
@@ -1156,5 +1183,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;
+    --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;
 }
}

/css/functional/themes/light-colorblind.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-colorblind.css	2024-12-11 17:45:05.308415486 +0000
@@ -311,7 +311,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;
@@ -577,6 +577,33 @@
 --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"],
@@ -890,7 +917,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;
@@ -1156,5 +1183,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;
 }
}

/css/functional/themes/light-high-contrast.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-high-contrast.css	2024-12-11 17:45:06.166432971 +0000
@@ -311,7 +311,7 @@
 --reactionButton-selected-fgColor-rest: #023b95;
 --reactionButton-selected-fgColor-hover: #023b95;
 --focus-outlineColor: #0349b4;
-  --focus-outline: #0349b4 solid 2px;
+  --focus-outline: 2px solid #0349b4;
 --menu-bgColor-active: #ffffff00;
 --overlay-bgColor: #ffffff;
 --overlay-borderColor: #454c54;
@@ -577,6 +577,33 @@
 --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d;
 --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52;
 --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
+  --border-default: 0.0625rem solid #454c54;
+  --border-muted: 0.0625rem solid #454c54;
+  --border-emphasis: 0.0625rem solid #454c54;
+  --border-disabled: 0.0625rem solid #59636e1f;
+  --border-transparent: 0.0625rem solid #ffffff00;
+  --border-neutral-emphasis: 0.0625rem solid #59636e;
+  --border-neutral-muted: 0.0625rem solid #454c54;
+  --border-accent-emphasis: 0.0625rem solid #0349b4;
+  --border-accent-muted: 0.0625rem solid #368cf9;
+  --border-success-emphasis: 0.0625rem solid #055d20;
+  --border-success-muted: 0.0625rem solid #26a148;
+  --border-open-emphasis: 0.0625rem solid #055d20;
+  --border-open-muted: 0.0625rem solid #26a148;
+  --border-danger-emphasis: 0.0625rem solid #a0111f;
+  --border-danger-muted: 0.0625rem solid #ee5a5d;
+  --border-closed-emphasis: 0.0625rem solid #a0111f;
+  --border-closed-muted: 0.0625rem solid #ee5a5d;
+  --border-attention-emphasis: 0.0625rem solid #744500;
+  --border-attention-muted: 0.0625rem solid #b58407;
+  --border-severe-emphasis: 0.0625rem solid #873800;
+  --border-severe-muted: 0.0625rem solid #dc6d1a;
+  --border-done-emphasis: 0.0625rem solid #622cbc;
+  --border-done-muted: 0.0625rem solid #a371f7;
+  --border-upsell-emphasis: 0.0625rem solid #622cbc;
+  --border-upsell-muted: 0.0625rem solid #a371f7;
+  --border-sponsors-emphasis: 0.0625rem solid #971368;
+  --border-sponsors-muted: 0.0625rem solid #ed4baf;
}
@media (prefers-color-scheme: dark) {
 [data-color-mode="auto"][data-dark-theme="light_high_contrast"],
@@ -890,7 +917,7 @@
   --reactionButton-selected-fgColor-rest: #023b95;
   --reactionButton-selected-fgColor-hover: #023b95;
   --focus-outlineColor: #0349b4;
-    --focus-outline: #0349b4 solid 2px;
+    --focus-outline: 2px solid #0349b4;
   --menu-bgColor-active: #ffffff00;
   --overlay-bgColor: #ffffff;
   --overlay-borderColor: #454c54;
@@ -1156,5 +1183,32 @@
   --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d;
   --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52;
   --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
+    --border-default: 0.0625rem solid #454c54;
+    --border-muted: 0.0625rem solid #454c54;
+    --border-emphasis: 0.0625rem solid #454c54;
+    --border-disabled: 0.0625rem solid #59636e1f;
+    --border-transparent: 0.0625rem solid #ffffff00;
+    --border-neutral-emphasis: 0.0625rem solid #59636e;
+    --border-neutral-muted: 0.0625rem solid #454c54;
+    --border-accent-emphasis: 0.0625rem solid #0349b4;
+    --border-accent-muted: 0.0625rem solid #368cf9;
+    --border-success-emphasis: 0.0625rem solid #055d20;
+    --border-success-muted: 0.0625rem solid #26a148;
+    --border-open-emphasis: 0.0625rem solid #055d20;
+    --border-open-muted: 0.0625rem solid #26a148;
+    --border-danger-emphasis: 0.0625rem solid #a0111f;
+    --border-danger-muted: 0.0625rem solid #ee5a5d;
+    --border-closed-emphasis: 0.0625rem solid #a0111f;
+    --border-closed-muted: 0.0625rem solid #ee5a5d;
+    --border-attention-emphasis: 0.0625rem solid #744500;
+    --border-attention-muted: 0.0625rem solid #b58407;
+    --border-severe-emphasis: 0.0625rem solid #873800;
+    --border-severe-muted: 0.0625rem solid #dc6d1a;
+    --border-done-emphasis: 0.0625rem solid #622cbc;
+    --border-done-muted: 0.0625rem solid #a371f7;
+    --border-upsell-emphasis: 0.0625rem solid #622cbc;
+    --border-upsell-muted: 0.0625rem solid #a371f7;
+    --border-sponsors-emphasis: 0.0625rem solid #971368;
+    --border-sponsors-muted: 0.0625rem solid #ed4baf;
 }
}

/css/functional/themes/light-tritanopia.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-tritanopia.css	2024-12-11 17:45:04.370396168 +0000
@@ -311,7 +311,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;
@@ -577,6 +577,33 @@
 --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 #cf222e;
+  --border-danger-muted: 0.0625rem solid #ff818266;
+  --border-closed-emphasis: 0.0625rem solid #cf222e;
+  --border-closed-muted: 0.0625rem solid #ff818266;
+  --border-attention-emphasis: 0.0625rem solid #9a6700;
+  --border-attention-muted: 0.0625rem solid #d4a72c66;
+  --border-severe-emphasis: 0.0625rem solid #cf222e;
+  --border-severe-muted: 0.0625rem solid #ff818266;
+  --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_tritanopia"],
@@ -890,7 +917,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;
@@ -1156,5 +1183,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 #cf222e;
+    --border-danger-muted: 0.0625rem solid #ff818266;
+    --border-closed-emphasis: 0.0625rem solid #cf222e;
+    --border-closed-muted: 0.0625rem solid #ff818266;
+    --border-attention-emphasis: 0.0625rem solid #9a6700;
+    --border-attention-muted: 0.0625rem solid #d4a72c66;
+    --border-severe-emphasis: 0.0625rem solid #cf222e;
+    --border-severe-muted: 0.0625rem solid #ff818266;
+    --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;
 }
}

/css/functional/themes/light.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light.css	2024-12-11 17:45:03.416376520 +0000
@@ -311,7 +311,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;
@@ -577,6 +577,33 @@
 --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 #1a7f37;
+  --border-success-muted: 0.0625rem solid #4ac26b66;
+  --border-open-emphasis: 0.0625rem solid #1a7f37;
+  --border-open-muted: 0.0625rem solid #4ac26b66;
+  --border-danger-emphasis: 0.0625rem solid #cf222e;
+  --border-danger-muted: 0.0625rem solid #ff818266;
+  --border-closed-emphasis: 0.0625rem solid #cf222e;
+  --border-closed-muted: 0.0625rem solid #ff818266;
+  --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"],
@@ -890,7 +917,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;
@@ -1156,5 +1183,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 #1a7f37;
+    --border-success-muted: 0.0625rem solid #4ac26b66;
+    --border-open-emphasis: 0.0625rem solid #1a7f37;
+    --border-open-muted: 0.0625rem solid #4ac26b66;
+    --border-danger-emphasis: 0.0625rem solid #cf222e;
+    --border-danger-muted: 0.0625rem solid #ff818266;
+    --border-closed-emphasis: 0.0625rem solid #cf222e;
+    --border-closed-muted: 0.0625rem solid #ff818266;
+    --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;
 }
}

/css/primitives.css

 
+++ /home/runner/work/primitives/primitives/dist/css/primitives.css	2024-12-11 17:45:12.104547743 +0000
@@ -49,13 +49,13 @@
 --motion-skeletonLoader-shimmer-duration-scale: var(--base-duration-1000); /* The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right) */
}
:root {
-  --boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem); /* Thin shadow for borders */
-  --boxShadow-thick: inset 0 0 0 max(2px, 0.125rem);
-  --boxShadow-thicker: inset 0 0 0 max(4px, 0.25rem);
-  --borderWidth-default: max(1px, 0.0625rem);
-  --borderWidth-thin: max(1px, 0.0625rem);
-  --borderWidth-thick: max(2px, 0.125rem);
-  --borderWidth-thicker: max(4px, 0.25rem);
+  --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;

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Dec 11, 2024 •
edited
Loading

Design Token Diff (StyleLint)

The message is too long to be displayed here. For more details, please check the job summary.

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Dec 11, 2024 •
edited
Loading

Design Token Diff (Fallbacks)

/fallbacks/functional/size/border.json

 
+++ /home/runner/work/primitives/primitives/dist/fallbacks/functional/size/border.json	2024-12-11 17:45:11.018526674 +0000
@@ -1,11 +1,11 @@
{
-  "--boxShadow-thin": "inset 0 0 0 max(1px, 0.0625rem)",
-  "--boxShadow-thick": "inset 0 0 0 max(2px, 0.125rem)",
-  "--boxShadow-thicker": "inset 0 0 0 max(4px, 0.25rem)",
-  "--borderWidth-default": "max(1px, 0.0625rem)",
-  "--borderWidth-thin": "max(1px, 0.0625rem)",
-  "--borderWidth-thick": "max(2px, 0.125rem)",
-  "--borderWidth-thicker": "max(4px, 0.25rem)",
+  "--boxShadow-thin": "inset 0 0 0 0.0625rem",
+  "--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",

@github-actions github-actions bot temporarily deployed to Preview (Storybook) December 11, 2024 15:08 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) December 11, 2024 15:10 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) December 11, 2024 15:42 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) December 11, 2024 16:30 Inactive
@lukasoppermann lukasoppermann added the update snapshots Update visual regression test snapshots label Dec 11, 2024
@github-actions github-actions bot removed the update snapshots Update visual regression test snapshots label Dec 11, 2024
@primer primer bot temporarily deployed to github-pages December 11, 2024 17:20 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) December 11, 2024 17:20 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) December 11, 2024 17:46 Inactive
@lukasoppermann lukasoppermann merged commit 1d7def1 into main Dec 11, 2024
27 checks passed
@lukasoppermann lukasoppermann deleted the @lukasoppermann/composite-border-token branch December 11, 2024 17:57
@primer primer bot mentioned this pull request Dec 11, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@langermank langermank Awaiting requested review from langermank langermank is a code owner automatically assigned from primer/css-reviewers

Assignees

@lukasoppermann lukasoppermann

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@lukasoppermann