make borders same as fill, like it is in normal modes

[lukasoppermann]

Summary

List of notable changes:

What should reviewers focus on?

Steps to test:

[changeset-bot]

🦋 Changeset detected

Latest commit: 9c08926

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	Patch

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]

Design Token Diff (CSS)

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind.css	2024-12-20 21:19:09.423714167 +0000
@@ -30,14 +30,12 @@
 --bgColor-muted: #151b23;
 --bgColor-neutral-emphasis: #656c76;
 --bgColor-neutral-muted: #656c7633;
-  --bgColor-open-emphasis: #1f6feb;
-  --bgColor-open-muted: #388bfd33;
 --bgColor-severe-emphasis: #bd561d;
 --bgColor-severe-muted: #db6d281a;
 --bgColor-sponsors-emphasis: #bf4b8a;
 --bgColor-sponsors-muted: #db61a21a;
 --bgColor-success-emphasis: #1f6feb;
-  --bgColor-success-muted: #388bfd26;
+  --bgColor-success-muted: #388bfd33;
 --bgColor-transparent: #00000000;
 --borderColor-accent-emphasis: #1f6feb;
 --borderColor-accent-muted: #388bfd66;
@@ -50,8 +48,6 @@
 --borderColor-done-emphasis: #8957e5;
 --borderColor-done-muted: #ab7df866;
 --borderColor-emphasis: #656c76;
-  --borderColor-open-emphasis: #388bfd;
-  --borderColor-open-muted: #388bfd66;
 --borderColor-severe-emphasis: #bd561d;
 --borderColor-severe-muted: #db6d2866;
 --borderColor-sponsors-emphasis: #bf4b8a;
@@ -424,6 +420,8 @@
 --bgColor-closed-muted: #656c761a;
 --bgColor-inset: #010409;
 --bgColor-inverse: #ffffff;
+  --bgColor-open-emphasis: var(--bgColor-success-emphasis);
+  --bgColor-open-muted: var(--bgColor-success-muted);
 --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
 --bgColor-upsell-muted: var(--bgColor-done-muted);
 --bgColor-white: #ffffff;
@@ -446,8 +444,11 @@
 --border-success-muted: 0.0625rem solid #388bfd66;
 --border-transparent: 0.0625rem solid #00000000;
 --borderColor-closed-emphasis: var(--borderColor-emphasis);
+  --borderColor-closed-muted: var(--borderColor-danger-muted);
 --borderColor-muted: #3d444db3;
 --borderColor-neutral-emphasis: var(--borderColor-emphasis);
+  --borderColor-open-emphasis: var(--borderColor-success-emphasis);
+  --borderColor-open-muted: var(--borderColor-success-muted);
 --borderColor-translucent: #ffffff26;
 --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
 --borderColor-upsell-muted: var(--borderColor-done-muted);
@@ -519,7 +520,7 @@
 --controlTrack-fgColor-rest: var(--fgColor-muted);
 --counter-bgColor-emphasis: var(--bgColor-neutral-emphasis);
 --counter-bgColor-muted: var(--bgColor-neutral-muted);
-  --diffBlob-additionLine-bgColor: var(--bgColor-success-muted);
+  --diffBlob-additionLine-bgColor: #388bfd26;
 --diffBlob-additionLine-fgColor: var(--fgColor-default);
 --diffBlob-additionNum-fgColor: var(--fgColor-default);
 --diffBlob-additionWord-fgColor: var(--fgColor-default);
@@ -561,7 +562,6 @@
 --border-open-muted: var(--border-success-muted);
 --border-upsell-emphasis: 0.0625rem solid #8957e5;
 --border-upsell-muted: 0.0625rem solid #ab7df866;
-  --borderColor-closed-muted: #3d444d66;
 --borderColor-neutral-muted: var(--borderColor-muted);
 --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
 --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
@@ -636,14 +636,12 @@
   --bgColor-muted: #151b23;
   --bgColor-neutral-emphasis: #656c76;
   --bgColor-neutral-muted: #656c7633;
-    --bgColor-open-emphasis: #1f6feb;
-    --bgColor-open-muted: #388bfd33;
   --bgColor-severe-emphasis: #bd561d;
   --bgColor-severe-muted: #db6d281a;
   --bgColor-sponsors-emphasis: #bf4b8a;
   --bgColor-sponsors-muted: #db61a21a;
   --bgColor-success-emphasis: #1f6feb;
-    --bgColor-success-muted: #388bfd26;
+    --bgColor-success-muted: #388bfd33;
   --bgColor-transparent: #00000000;
   --borderColor-accent-emphasis: #1f6feb;
   --borderColor-accent-muted: #388bfd66;
@@ -656,8 +654,6 @@
   --borderColor-done-emphasis: #8957e5;
   --borderColor-done-muted: #ab7df866;
   --borderColor-emphasis: #656c76;
-    --borderColor-open-emphasis: #388bfd;
-    --borderColor-open-muted: #388bfd66;
   --borderColor-severe-emphasis: #bd561d;
   --borderColor-severe-muted: #db6d2866;
   --borderColor-sponsors-emphasis: #bf4b8a;
@@ -1030,6 +1026,8 @@
   --bgColor-closed-muted: #656c761a;
   --bgColor-inset: #010409;
   --bgColor-inverse: #ffffff;
+    --bgColor-open-emphasis: var(--bgColor-success-emphasis);
+    --bgColor-open-muted: var(--bgColor-success-muted);
   --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
   --bgColor-upsell-muted: var(--bgColor-done-muted);
   --bgColor-white: #ffffff;
@@ -1052,8 +1050,11 @@
   --border-success-muted: 0.0625rem solid #388bfd66;
   --border-transparent: 0.0625rem solid #00000000;
   --borderColor-closed-emphasis: var(--borderColor-emphasis);
+    --borderColor-closed-muted: var(--borderColor-danger-muted);
   --borderColor-muted: #3d444db3;
   --borderColor-neutral-emphasis: var(--borderColor-emphasis);
+    --borderColor-open-emphasis: var(--borderColor-success-emphasis);
+    --borderColor-open-muted: var(--borderColor-success-muted);
   --borderColor-translucent: #ffffff26;
   --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
   --borderColor-upsell-muted: var(--borderColor-done-muted);
@@ -1125,7 +1126,7 @@
   --controlTrack-fgColor-rest: var(--fgColor-muted);
   --counter-bgColor-emphasis: var(--bgColor-neutral-emphasis);
   --counter-bgColor-muted: var(--bgColor-neutral-muted);
-    --diffBlob-additionLine-bgColor: var(--bgColor-success-muted);
+    --diffBlob-additionLine-bgColor: #388bfd26;
   --diffBlob-additionLine-fgColor: var(--fgColor-default);
   --diffBlob-additionNum-fgColor: var(--fgColor-default);
   --diffBlob-additionWord-fgColor: var(--fgColor-default);
@@ -1167,7 +1168,6 @@
   --border-open-muted: var(--border-success-muted);
   --border-upsell-emphasis: 0.0625rem solid #8957e5;
   --border-upsell-muted: 0.0625rem solid #ab7df866;
-    --borderColor-closed-muted: #3d444d66;
   --borderColor-neutral-muted: var(--borderColor-muted);
   --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
   --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-high-contrast.css	2024-12-20 21:19:10.457708371 +0000
@@ -46,7 +46,7 @@
 --borderColor-danger-emphasis: #ff6a69;
 --borderColor-danger-muted: #ff8080;
 --borderColor-default: #b7bdc8;
-  --borderColor-disabled: #9198a11f;
+  --borderColor-disabled: #656c761a;
 --borderColor-done-emphasis: #b87fff;
 --borderColor-done-muted: #bf8fff;
 --borderColor-severe-emphasis: #e7811d;
@@ -433,7 +433,7 @@
 --border-danger-emphasis: 0.0625rem solid #ff6a69;
 --border-danger-muted: 0.0625rem solid #ff8080;
 --border-default: 0.0625rem solid #b7bdc8;
-  --border-disabled: 0.0625rem solid #9198a11f;
+  --border-disabled: 0.0625rem solid #656c761a;
 --border-done-emphasis: 0.0625rem solid #b87fff;
 --border-done-muted: 0.0625rem solid #bf8fff;
 --border-severe-emphasis: 0.0625rem solid #e7811d;
@@ -652,7 +652,7 @@
   --borderColor-danger-emphasis: #ff6a69;
   --borderColor-danger-muted: #ff8080;
   --borderColor-default: #b7bdc8;
-    --borderColor-disabled: #9198a11f;
+    --borderColor-disabled: #656c761a;
   --borderColor-done-emphasis: #b87fff;
   --borderColor-done-muted: #bf8fff;
   --borderColor-severe-emphasis: #e7811d;
@@ -1039,7 +1039,7 @@
   --border-danger-emphasis: 0.0625rem solid #ff6a69;
   --border-danger-muted: 0.0625rem solid #ff8080;
   --border-default: 0.0625rem solid #b7bdc8;
-    --border-disabled: 0.0625rem solid #9198a11f;
+    --border-disabled: 0.0625rem solid #656c761a;
   --border-done-emphasis: 0.0625rem solid #b87fff;
   --border-done-muted: 0.0625rem solid #bf8fff;
   --border-severe-emphasis: 0.0625rem solid #e7811d;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-colorblind.css	2024-12-20 21:19:04.045717752 +0000
@@ -29,8 +29,6 @@
 --bgColor-muted: #f6f8fa;
 --bgColor-neutral-emphasis: #59636e;
 --bgColor-neutral-muted: #818b981f;
-  --bgColor-open-emphasis: #0969da;
-  --bgColor-open-muted: #ddf4ff;
 --bgColor-severe-emphasis: #bc4c00;
 --bgColor-severe-muted: #fff1e5;
 --bgColor-sponsors-emphasis: #bf3989;
@@ -43,21 +41,19 @@
 --borderColor-attention-emphasis: #9a6700;
 --borderColor-attention-muted: #d4a72c66;
 --borderColor-danger-emphasis: #bc4c00;
-  --borderColor-danger-muted: #fb8f4466;
+  --borderColor-danger-muted: #fff1e5;
 --borderColor-default: #d1d9e0;
 --borderColor-disabled: #818b981a;
 --borderColor-done-emphasis: #8250df;
 --borderColor-done-muted: #c297ff66;
 --borderColor-emphasis: #818b98;
 --borderColor-neutral-emphasis: #59636e;
-  --borderColor-open-emphasis: #218bff;
-  --borderColor-open-muted: #54aeff66;
 --borderColor-severe-emphasis: #bc4c00;
 --borderColor-severe-muted: #fb8f4466;
 --borderColor-sponsors-emphasis: #bf3989;
 --borderColor-sponsors-muted: #ff80c866;
 --borderColor-success-emphasis: #0969da;
-  --borderColor-success-muted: #54aeff66;
+  --borderColor-success-muted: #ddf4ff;
 --borderColor-transparent: #ffffff00;
 --button-danger-bgColor-hover: #953800;
 --button-danger-shadow-selected: inset 0px 1px 0px 0px #47170033;
@@ -408,6 +404,8 @@
 --bgColor-closed-muted: var(--bgColor-neutral-muted);
 --bgColor-default: #ffffff;
 --bgColor-inset: var(--bgColor-muted);
+  --bgColor-open-emphasis: var(--bgColor-success-emphasis);
+  --bgColor-open-muted: var(--bgColor-success-muted);
 --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
 --bgColor-upsell-muted: var(--bgColor-done-muted);
 --bgColor-white: #ffffff;
@@ -416,7 +414,7 @@
 --border-attention-emphasis: 0.0625rem solid #9a6700;
 --border-attention-muted: 0.0625rem solid #d4a72c66;
 --border-danger-emphasis: 0.0625rem solid #bc4c00;
-  --border-danger-muted: 0.0625rem solid #fb8f4466;
+  --border-danger-muted: 0.0625rem solid #fff1e5;
 --border-default: 0.0625rem solid #d1d9e0;
 --border-disabled: 0.0625rem solid #818b981a;
 --border-done-emphasis: 0.0625rem solid #8250df;
@@ -428,11 +426,13 @@
 --border-sponsors-emphasis: 0.0625rem solid #bf3989;
 --border-sponsors-muted: 0.0625rem solid #ff80c866;
 --border-success-emphasis: 0.0625rem solid #0969da;
-  --border-success-muted: 0.0625rem solid #54aeff66;
+  --border-success-muted: 0.0625rem solid #ddf4ff;
 --border-transparent: 0.0625rem solid #ffffff00;
 --borderColor-closed-emphasis: var(--borderColor-emphasis);
 --borderColor-closed-muted: #d1d9e066;
 --borderColor-muted: #d1d9e0b3;
+  --borderColor-open-emphasis: var(--borderColor-success-emphasis);
+  --borderColor-open-muted: var(--borderColor-success-muted);
 --borderColor-translucent: #1f232826;
 --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
 --borderColor-upsell-muted: var(--borderColor-done-muted);
@@ -635,8 +635,6 @@
   --bgColor-muted: #f6f8fa;
   --bgColor-neutral-emphasis: #59636e;
   --bgColor-neutral-muted: #818b981f;
-    --bgColor-open-emphasis: #0969da;
-    --bgColor-open-muted: #ddf4ff;
   --bgColor-severe-emphasis: #bc4c00;
   --bgColor-severe-muted: #fff1e5;
   --bgColor-sponsors-emphasis: #bf3989;
@@ -649,21 +647,19 @@
   --borderColor-attention-emphasis: #9a6700;
   --borderColor-attention-muted: #d4a72c66;
   --borderColor-danger-emphasis: #bc4c00;
-    --borderColor-danger-muted: #fb8f4466;
+    --borderColor-danger-muted: #fff1e5;
   --borderColor-default: #d1d9e0;
   --borderColor-disabled: #818b981a;
   --borderColor-done-emphasis: #8250df;
   --borderColor-done-muted: #c297ff66;
   --borderColor-emphasis: #818b98;
   --borderColor-neutral-emphasis: #59636e;
-    --borderColor-open-emphasis: #218bff;
-    --borderColor-open-muted: #54aeff66;
   --borderColor-severe-emphasis: #bc4c00;
   --borderColor-severe-muted: #fb8f4466;
   --borderColor-sponsors-emphasis: #bf3989;
   --borderColor-sponsors-muted: #ff80c866;
   --borderColor-success-emphasis: #0969da;
-    --borderColor-success-muted: #54aeff66;
+    --borderColor-success-muted: #ddf4ff;
   --borderColor-transparent: #ffffff00;
   --button-danger-bgColor-hover: #953800;
   --button-danger-shadow-selected: inset 0px 1px 0px 0px #47170033;
@@ -1014,6 +1010,8 @@
   --bgColor-closed-muted: var(--bgColor-neutral-muted);
   --bgColor-default: #ffffff;
   --bgColor-inset: var(--bgColor-muted);
+    --bgColor-open-emphasis: var(--bgColor-success-emphasis);
+    --bgColor-open-muted: var(--bgColor-success-muted);
   --bgColor-upsell-emphasis: var(--bgColor-done-emphasis);
   --bgColor-upsell-muted: var(--bgColor-done-muted);
   --bgColor-white: #ffffff;
@@ -1022,7 +1020,7 @@
   --border-attention-emphasis: 0.0625rem solid #9a6700;
   --border-attention-muted: 0.0625rem solid #d4a72c66;
   --border-danger-emphasis: 0.0625rem solid #bc4c00;
-    --border-danger-muted: 0.0625rem solid #fb8f4466;
+    --border-danger-muted: 0.0625rem solid #fff1e5;
   --border-default: 0.0625rem solid #d1d9e0;
   --border-disabled: 0.0625rem solid #818b981a;
   --border-done-emphasis: 0.0625rem solid #8250df;
@@ -1034,11 +1032,13 @@
   --border-sponsors-emphasis: 0.0625rem solid #bf3989;
   --border-sponsors-muted: 0.0625rem solid #ff80c866;
   --border-success-emphasis: 0.0625rem solid #0969da;
-    --border-success-muted: 0.0625rem solid #54aeff66;
+    --border-success-muted: 0.0625rem solid #ddf4ff;
   --border-transparent: 0.0625rem solid #ffffff00;
   --borderColor-closed-emphasis: var(--borderColor-emphasis);
   --borderColor-closed-muted: #d1d9e066;
   --borderColor-muted: #d1d9e0b3;
+    --borderColor-open-emphasis: var(--borderColor-success-emphasis);
+    --borderColor-open-muted: var(--borderColor-success-muted);
   --borderColor-translucent: #1f232826;
   --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
   --borderColor-upsell-muted: var(--borderColor-done-muted);

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-high-contrast.css	2024-12-20 21:19:05.049719031 +0000
@@ -45,7 +45,6 @@
 --borderColor-accent-muted: #368cf9;
 --borderColor-attention-emphasis: #744500;
 --borderColor-attention-muted: #b58407;
-  --borderColor-closed-emphasis: #a0111f;
 --borderColor-danger-emphasis: #a0111f;
 --borderColor-danger-muted: #ee5a5d;
 --borderColor-default: #454c54;
@@ -430,6 +429,7 @@
 --border-success-emphasis: 0.0625rem solid #055d20;
 --border-success-muted: 0.0625rem solid #26a148;
 --border-transparent: 0.0625rem solid #ffffff00;
+  --borderColor-closed-emphasis: var(--borderColor-danger-emphasis);
 --borderColor-closed-muted: var(--borderColor-danger-muted);
 --borderColor-emphasis: var(--borderColor-default);
 --borderColor-muted: var(--borderColor-default);
@@ -651,7 +651,6 @@
   --borderColor-accent-muted: #368cf9;
   --borderColor-attention-emphasis: #744500;
   --borderColor-attention-muted: #b58407;
-    --borderColor-closed-emphasis: #a0111f;
   --borderColor-danger-emphasis: #a0111f;
   --borderColor-danger-muted: #ee5a5d;
   --borderColor-default: #454c54;
@@ -1036,6 +1035,7 @@
   --border-success-emphasis: 0.0625rem solid #055d20;
   --border-success-muted: 0.0625rem solid #26a148;
   --border-transparent: 0.0625rem solid #ffffff00;
+    --borderColor-closed-emphasis: var(--borderColor-danger-emphasis);
   --borderColor-closed-muted: var(--borderColor-danger-muted);
   --borderColor-emphasis: var(--borderColor-default);
   --borderColor-muted: var(--borderColor-default);

/css/functional/themes/light.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light.css	2024-12-20 21:19:01.838732806 +0000
@@ -42,8 +42,6 @@
 --borderColor-accent-muted: #54aeff66;
 --borderColor-attention-emphasis: #9a6700;
 --borderColor-attention-muted: #d4a72c66;
-  --borderColor-closed-emphasis: #cf222e;
-  --borderColor-closed-muted: #ff818266;
 --borderColor-danger-emphasis: #cf222e;
 --borderColor-danger-muted: #ff818266;
 --borderColor-default: #d1d9e0;
@@ -435,6 +433,8 @@
 --border-success-emphasis: 0.0625rem solid #1a7f37;
 --border-success-muted: 0.0625rem solid #4ac26b66;
 --border-transparent: 0.0625rem solid #ffffff00;
+  --borderColor-closed-emphasis: var(--borderColor-danger-emphasis);
+  --borderColor-closed-muted: var(--borderColor-danger-muted);
 --borderColor-muted: #d1d9e0b3;
 --borderColor-open-emphasis: var(--borderColor-success-emphasis);
 --borderColor-open-muted: var(--borderColor-success-muted);
@@ -648,8 +648,6 @@
   --borderColor-accent-muted: #54aeff66;
   --borderColor-attention-emphasis: #9a6700;
   --borderColor-attention-muted: #d4a72c66;
-    --borderColor-closed-emphasis: #cf222e;
-    --borderColor-closed-muted: #ff818266;
   --borderColor-danger-emphasis: #cf222e;
   --borderColor-danger-muted: #ff818266;
   --borderColor-default: #d1d9e0;
@@ -1041,6 +1039,8 @@
   --border-success-emphasis: 0.0625rem solid #1a7f37;
   --border-success-muted: 0.0625rem solid #4ac26b66;
   --border-transparent: 0.0625rem solid #ffffff00;
+    --borderColor-closed-emphasis: var(--borderColor-danger-emphasis);
+    --borderColor-closed-muted: var(--borderColor-danger-muted);
   --borderColor-muted: #d1d9e0b3;
   --borderColor-open-emphasis: var(--borderColor-success-emphasis);
   --borderColor-open-muted: var(--borderColor-success-muted);

[github-actions]

Design Token Diff (StyleLint)

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

[github-actions]

Design Token Diff (Figma)

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