@primer/primitives 7.15.13 → 7.15.14-rc.ed4ead94

package/dist/internalCss/light.css

@@ -418,7 +418,7 @@
   --display-indigo-borderColor-muted: #d2d7fe;
   --display-indigo-borderColor-emphasis: #5a61e7;
   --avatar-bgColor: #ffffff;
-  --avatar-borderColor: #d0d7de;
+  --avatar-borderColor: #1f232826;
   --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
   --avatarStack-fade-bgColor-default: #afb8c1;
   --avatarStack-fade-bgColor-muted: #d0d7de;
@@ -574,6 +574,7 @@
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-white: #ffffff;
+  --fgColor-black: #1f2328;
   --fgColor-disabled: #8c959f;
   --fgColor-link: #0969da;
   --fgColor-neutral: #6e7781;
@@ -591,6 +592,8 @@
   --bgColor-inset: #f6f8fa;
   --bgColor-emphasis: #24292f;
   --bgColor-inverse: #24292f;
+  --bgColor-white: #ffffff;
+  --bgColor-black: #1f2328;
   --bgColor-disabled: #eaeef2b3;
   --bgColor-transparent: #ffffff00;
   --bgColor-neutral-muted: #afb8c133;
@@ -780,7 +783,7 @@
   --color-scale-coral-9: #510901;
   --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
   --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
-  --shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
+  --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
   --shadow-resting-medium: 0px 3px 6px 0px #424a531f;
   --shadow-floating-small: 0px 0px 0px 1px #d0d7de80, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
   --shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
@@ -1207,7 +1210,7 @@
     --display-indigo-borderColor-muted: #d2d7fe;
     --display-indigo-borderColor-emphasis: #5a61e7;
     --avatar-bgColor: #ffffff;
-    --avatar-borderColor: #d0d7de;
+    --avatar-borderColor: #1f232826;
     --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
     --avatarStack-fade-bgColor-default: #afb8c1;
     --avatarStack-fade-bgColor-muted: #d0d7de;
@@ -1363,6 +1366,7 @@
     --fgColor-muted: #636c76;
     --fgColor-onEmphasis: #ffffff;
     --fgColor-white: #ffffff;
+    --fgColor-black: #1f2328;
     --fgColor-disabled: #8c959f;
     --fgColor-link: #0969da;
     --fgColor-neutral: #6e7781;
@@ -1380,6 +1384,8 @@
     --bgColor-inset: #f6f8fa;
     --bgColor-emphasis: #24292f;
     --bgColor-inverse: #24292f;
+    --bgColor-white: #ffffff;
+    --bgColor-black: #1f2328;
     --bgColor-disabled: #eaeef2b3;
     --bgColor-transparent: #ffffff00;
     --bgColor-neutral-muted: #afb8c133;
@@ -1569,7 +1575,7 @@
     --color-scale-coral-9: #510901;
     --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
     --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
-    --shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
+    --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
     --shadow-resting-medium: 0px 3px 6px 0px #424a531f;
     --shadow-floating-small: 0px 0px 0px 1px #d0d7de80, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
     --shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;

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

@@ -129,7 +129,7 @@ $display-indigo-fgColor: #9899ec;
 $display-indigo-borderColor-muted: #25215f;
 $display-indigo-borderColor-emphasis: #7070e1;
 $avatar-bgColor: #ffffff1a;
-$avatar-borderColor: #30363db3;
+$avatar-borderColor: #ffffff26;
 $avatar-shadow: 0px 0px 0px 2px #0d1117;
 $avatarStack-fade-bgColor-default: #30363d;
 $avatarStack-fade-bgColor-muted: #21262d;
@@ -198,7 +198,7 @@ $button-default-borderColor-active: #30363d;
 $button-default-borderColor-disabled: #21262db3;
 $button-default-shadow-resting: 0px 0px 0px 0px #000000;
 $button-primary-fgColor-rest: #ffffff;
-$button-primary-fgColor-disabled: #ffffffcc;
+$button-primary-fgColor-disabled: #ffffff66;
 $button-primary-iconColor-rest: #ffffff;
 $button-primary-bgColor-rest: #1f6feb;
 $button-primary-bgColor-hover: #2a7aef;
@@ -284,6 +284,7 @@ $fgColor-default: #e6edf3;
 $fgColor-muted: #848d97;
 $fgColor-onEmphasis: #ffffff;
 $fgColor-white: #ffffff;
+$fgColor-black: #010409;
 $fgColor-disabled: #6e7681;
 $fgColor-link: #4493f8;
 $fgColor-neutral: #6e7681;
@@ -301,6 +302,8 @@ $bgColor-muted: #161b22;
 $bgColor-inset: #010409;
 $bgColor-emphasis: #6e7681;
 $bgColor-inverse: #ffffff;
+$bgColor-white: #ffffff;
+$bgColor-black: #010409;
 $bgColor-disabled: #21262db3;
 $bgColor-transparent: #00000000;
 $bgColor-neutral-muted: #6e768166;
@@ -490,7 +493,7 @@ $color-scale-coral-8: #640d04; // Avoid using scales, use other functional token
 $color-scale-coral-9: #460701; // Avoid using scales, use other functional tokens instead
 $shadow-inset: inset 0px 1px 0px 0px #0104093d;
 $shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
-$shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+$shadow-resting-small: 0px 1px 0px 0px #01040966;
 $shadow-resting-medium: 0px 3px 6px 0px #010409cc;
 $shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
 $shadow-floating-medium: 0px 0px 0px 1px #30363d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;

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

@@ -129,7 +129,7 @@ $display-indigo-fgColor: #9899ec;
 $display-indigo-borderColor-muted: #25215f;
 $display-indigo-borderColor-emphasis: #7070e1;
 $avatar-bgColor: #cdd9e51a;
-$avatar-borderColor: #444c56b3;
+$avatar-borderColor: #cdd9e526;
 $avatar-shadow: 0px 0px 0px 2px #22272e;
 $avatarStack-fade-bgColor-default: #444c56;
 $avatarStack-fade-bgColor-muted: #373e47;
@@ -198,7 +198,7 @@ $button-default-borderColor-active: #444c56;
 $button-default-borderColor-disabled: #373e47b3;
 $button-default-shadow-resting: 0px 0px 0px 0px #000000;
 $button-primary-fgColor-rest: #ffffff;
-$button-primary-fgColor-disabled: #cdd9e5cc;
+$button-primary-fgColor-disabled: #cdd9e566;
 $button-primary-iconColor-rest: #ffffff;
 $button-primary-bgColor-rest: #347d39;
 $button-primary-bgColor-hover: #3b8640;
@@ -283,7 +283,8 @@ $selection-bgColor: #316dcab3;
 $fgColor-default: #c5d1de;
 $fgColor-muted: #717e8b;
 $fgColor-onEmphasis: #cdd9e5;
-$fgColor-white: #ffffff;
+$fgColor-white: #cdd9e5;
+$fgColor-black: #1c2128;
 $fgColor-disabled: #636e7b;
 $fgColor-link: #478be6;
 $fgColor-neutral: #636e7b;
@@ -301,6 +302,8 @@ $bgColor-muted: #2d333b;
 $bgColor-inset: #1c2128;
 $bgColor-emphasis: #636e7b;
 $bgColor-inverse: #cdd9e5;
+$bgColor-white: #cdd9e5;
+$bgColor-black: #1c2128;
 $bgColor-disabled: #373e47b3;
 $bgColor-transparent: #00000000;
 $bgColor-neutral-muted: #636e7b66;
@@ -490,7 +493,7 @@ $color-scale-coral-8: #771d13; // Avoid using scales, use other functional token
 $color-scale-coral-9: #5d1008; // Avoid using scales, use other functional tokens instead
 $shadow-inset: inset 0px 1px 0px 0px #1c21283d;
 $shadow-resting-xsmall: 0px 1px 0px 0px #1c2128cc;
-$shadow-resting-small: 0px 1px 0px 0px #1c212866, 0px 1px 3px 0px #1c212866;
+$shadow-resting-small: 0px 1px 0px 0px #1c212866;
 $shadow-resting-medium: 0px 3px 6px 0px #1c2128cc;
 $shadow-floating-small: 0px 0px 0px 1px #444c56, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
 $shadow-floating-medium: 0px 0px 0px 1px #444c56, 0px 8px 16px -4px #1c212866, 0px 4px 32px -4px #1c212866, 0px 24px 48px -12px #1c212866, 0px 48px 96px -24px #1c212866;

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

@@ -203,7 +203,7 @@ $button-primary-iconColor-rest: #0a0c10;
 $button-primary-bgColor-rest: #09b43a;
 $button-primary-bgColor-hover: #0fbb3f;
 $button-primary-bgColor-active: #15c243;
-$button-primary-bgColor-disabled: #6bdc84;
+$button-primary-bgColor-disabled: #048f2f;
 $button-primary-borderColor-rest: #4ae168;
 $button-primary-borderColor-hover: #4ae168;
 $button-primary-borderColor-active: #4ae168;
@@ -284,6 +284,7 @@ $fgColor-default: #fbfcfd;
 $fgColor-muted: #f0f3f6;
 $fgColor-onEmphasis: #0a0c10;
 $fgColor-white: #ffffff;
+$fgColor-black: #010409;
 $fgColor-disabled: #9ea7b3;
 $fgColor-link: #60aeff;
 $fgColor-neutral: #9ea7b3;
@@ -301,6 +302,8 @@ $bgColor-muted: #272b33;
 $bgColor-inset: #010409;
 $bgColor-emphasis: #ffffff;
 $bgColor-inverse: #ffffff;
+$bgColor-white: #ffffff;
+$bgColor-black: #010409;
 $bgColor-disabled: #3d424db3;
 $bgColor-transparent: #00000000;
 $bgColor-neutral-muted: #9ea7b366;
@@ -490,7 +493,7 @@ $color-scale-coral-8: #c62612; // Avoid using scales, use other functional token
 $color-scale-coral-9: #a91500; // Avoid using scales, use other functional tokens instead
 $shadow-inset: inset 0px 1px 0px 0px #0104093d;
 $shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
-$shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+$shadow-resting-small: 0px 1px 0px 0px #01040966;
 $shadow-resting-medium: 0px 3px 6px 0px #010409cc;
 $shadow-floating-small: 0px 0px 0px 1px #7a828e, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
 $shadow-floating-medium: 0px 0px 0px 1px #7a828e, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;

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

@@ -129,7 +129,7 @@ $display-indigo-fgColor: #9899ec;
 $display-indigo-borderColor-muted: #25215f;
 $display-indigo-borderColor-emphasis: #7070e1;
 $avatar-bgColor: #ffffff1a;
-$avatar-borderColor: #30363db3;
+$avatar-borderColor: #ffffff26;
 $avatar-shadow: 0px 0px 0px 2px #0d1117;
 $avatarStack-fade-bgColor-default: #30363d;
 $avatarStack-fade-bgColor-muted: #21262d;
@@ -198,7 +198,7 @@ $button-default-borderColor-active: #30363d;
 $button-default-borderColor-disabled: #21262db3;
 $button-default-shadow-resting: 0px 0px 0px 0px #000000;
 $button-primary-fgColor-rest: #ffffff;
-$button-primary-fgColor-disabled: #ffffffcc;
+$button-primary-fgColor-disabled: #ffffff66;
 $button-primary-iconColor-rest: #ffffff;
 $button-primary-bgColor-rest: #1f6feb;
 $button-primary-bgColor-hover: #2a7aef;
@@ -284,6 +284,7 @@ $fgColor-default: #e6edf3;
 $fgColor-muted: #848d97;
 $fgColor-onEmphasis: #ffffff;
 $fgColor-white: #ffffff;
+$fgColor-black: #010409;
 $fgColor-disabled: #6e7681;
 $fgColor-link: #4493f8;
 $fgColor-neutral: #6e7681;
@@ -301,6 +302,8 @@ $bgColor-muted: #161b22;
 $bgColor-inset: #010409;
 $bgColor-emphasis: #6e7681;
 $bgColor-inverse: #ffffff;
+$bgColor-white: #ffffff;
+$bgColor-black: #010409;
 $bgColor-disabled: #21262db3;
 $bgColor-transparent: #00000000;
 $bgColor-neutral-muted: #6e768166;
@@ -490,7 +493,7 @@ $color-scale-coral-8: #640d04; // Avoid using scales, use other functional token
 $color-scale-coral-9: #460701; // Avoid using scales, use other functional tokens instead
 $shadow-inset: inset 0px 1px 0px 0px #0104093d;
 $shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
-$shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+$shadow-resting-small: 0px 1px 0px 0px #01040966;
 $shadow-resting-medium: 0px 3px 6px 0px #010409cc;
 $shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
 $shadow-floating-medium: 0px 0px 0px 1px #30363d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;

package/dist/scss/functional/themes/dark.scss

@@ -129,7 +129,7 @@ $display-indigo-fgColor: #9899ec;
 $display-indigo-borderColor-muted: #25215f;
 $display-indigo-borderColor-emphasis: #7070e1;
 $avatar-bgColor: #ffffff1a;
-$avatar-borderColor: #30363db3;
+$avatar-borderColor: #ffffff26;
 $avatar-shadow: 0px 0px 0px 2px #0d1117;
 $avatarStack-fade-bgColor-default: #30363d;
 $avatarStack-fade-bgColor-muted: #21262d;
@@ -198,16 +198,16 @@ $button-default-borderColor-active: #30363d;
 $button-default-borderColor-disabled: #21262db3;
 $button-default-shadow-resting: 0px 0px 0px 0px #000000;
 $button-primary-fgColor-rest: #ffffff;
-$button-primary-fgColor-disabled: #ffffffcc;
+$button-primary-fgColor-disabled: #ffffff66;
 $button-primary-iconColor-rest: #ffffff;
 $button-primary-bgColor-rest: #238636;
 $button-primary-bgColor-hover: #29903b;
 $button-primary-bgColor-active: #2e9a40;
-$button-primary-bgColor-disabled: #77c982;
+$button-primary-bgColor-disabled: #105823;
 $button-primary-borderColor-rest: #f0f6fc1a;
 $button-primary-borderColor-hover: #f0f6fc1a;
 $button-primary-borderColor-active: #f0f6fc1a;
-$button-primary-borderColor-disabled: #77c982;
+$button-primary-borderColor-disabled: #105823;
 $button-primary-shadow-selected: 0px 0px 0px 0px #000000;
 $button-invisible-fgColor-rest: #4493f8;
 $button-invisible-fgColor-hover: #58a6ff;
@@ -284,6 +284,7 @@ $fgColor-default: #e6edf3;
 $fgColor-muted: #848d97;
 $fgColor-onEmphasis: #ffffff;
 $fgColor-white: #ffffff;
+$fgColor-black: #010409;
 $fgColor-disabled: #6e7681;
 $fgColor-link: #4493f8;
 $fgColor-neutral: #6e7681;
@@ -301,6 +302,8 @@ $bgColor-muted: #161b22;
 $bgColor-inset: #010409;
 $bgColor-emphasis: #6e7681;
 $bgColor-inverse: #ffffff;
+$bgColor-white: #ffffff;
+$bgColor-black: #010409;
 $bgColor-disabled: #21262db3;
 $bgColor-transparent: #00000000;
 $bgColor-neutral-muted: #6e768166;
@@ -490,7 +493,7 @@ $color-scale-coral-8: #640d04; // Avoid using scales, use other functional token
 $color-scale-coral-9: #460701; // Avoid using scales, use other functional tokens instead
 $shadow-inset: inset 0px 1px 0px 0px #0104093d;
 $shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
-$shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+$shadow-resting-small: 0px 1px 0px 0px #01040966;
 $shadow-resting-medium: 0px 3px 6px 0px #010409cc;
 $shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
 $shadow-floating-medium: 0px 0px 0px 1px #30363d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;

package/dist/scss/functional/themes/light-colorblind.scss

@@ -129,7 +129,7 @@ $display-indigo-fgColor: #494edf;
 $display-indigo-borderColor-muted: #d2d7fe;
 $display-indigo-borderColor-emphasis: #5a61e7;
 $avatar-bgColor: #ffffff;
-$avatar-borderColor: #d0d7de;
+$avatar-borderColor: #1f232826;
 $avatar-shadow: 0px 0px 0px 2px #ffffffcc;
 $avatarStack-fade-bgColor-default: #afb8c1;
 $avatarStack-fade-bgColor-muted: #d0d7de;
@@ -285,6 +285,7 @@ $fgColor-default: #1f2328;
 $fgColor-muted: #636c76;
 $fgColor-onEmphasis: #ffffff;
 $fgColor-white: #ffffff;
+$fgColor-black: #1f2328;
 $fgColor-disabled: #8c959f;
 $fgColor-link: #0969da;
 $fgColor-neutral: #6e7781;
@@ -302,6 +303,8 @@ $bgColor-muted: #f6f8fa;
 $bgColor-inset: #f6f8fa;
 $bgColor-emphasis: #24292f;
 $bgColor-inverse: #24292f;
+$bgColor-white: #ffffff;
+$bgColor-black: #1f2328;
 $bgColor-disabled: #eaeef2b3;
 $bgColor-transparent: #ffffff00;
 $bgColor-neutral-muted: #afb8c133;
@@ -491,7 +494,7 @@ $color-scale-coral-8: #691105; // Avoid using scales, use other functional token
 $color-scale-coral-9: #510901; // Avoid using scales, use other functional tokens instead
 $shadow-inset: inset 0px 1px 0px 0px #1f23280a;
 $shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
-$shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
+$shadow-resting-small: 0px 1px 0px 0px #1f23280a;
 $shadow-resting-medium: 0px 3px 6px 0px #424a531f;
 $shadow-floating-small: 0px 0px 0px 1px #d0d7de80, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
 $shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;

package/dist/scss/functional/themes/light-high-contrast.scss

@@ -129,7 +129,7 @@ $display-indigo-fgColor: #494edf;
 $display-indigo-borderColor-muted: #d2d7fe;
 $display-indigo-borderColor-emphasis: #5a61e7;
 $avatar-bgColor: #ffffff;
-$avatar-borderColor: #20252c;
+$avatar-borderColor: #010409e6;
 $avatar-shadow: 0px 0px 0px 2px #ffffffcc;
 $avatarStack-fade-bgColor-default: #acb6c0;
 $avatarStack-fade-bgColor-muted: #ced5dc;
@@ -285,6 +285,7 @@ $fgColor-default: #010409;
 $fgColor-muted: #0e1116;
 $fgColor-onEmphasis: #ffffff;
 $fgColor-white: #ffffff;
+$fgColor-black: #010409;
 $fgColor-disabled: #66707b;
 $fgColor-link: #023b95;
 $fgColor-neutral: #66707b;
@@ -302,6 +303,8 @@ $bgColor-muted: #e7ecf0;
 $bgColor-inset: #ffffff;
 $bgColor-emphasis: #0e1116;
 $bgColor-inverse: #0e1116;
+$bgColor-white: #ffffff;
+$bgColor-black: #010409;
 $bgColor-disabled: #ced5dcb3;
 $bgColor-transparent: #ffffff00;
 $bgColor-neutral-muted: #e7ecf0;
@@ -491,7 +494,7 @@ $color-scale-coral-8: #5b0002; // Avoid using scales, use other functional token
 $color-scale-coral-9: #430200; // Avoid using scales, use other functional tokens instead
 $shadow-inset: inset 0px 1px 0px 0px #0104090a;
 $shadow-resting-xsmall: 0px 1px 0px 0px #0104091a;
-$shadow-resting-small: 0px 1px 0px 0px #0104090f, 0px 1px 3px 0px #01040914;
+$shadow-resting-small: 0px 1px 0px 0px #0104090a;
 $shadow-resting-medium: 0px 3px 6px 0px #343b431f;
 $shadow-floating-small: 0px 0px 0px 1px #88929d80, 0px 6px 12px -3px #343b430a, 0px 6px 18px 0px #343b431f;
 $shadow-floating-medium: 0px 0px 0px 1px #88929d, 0px 8px 16px -4px #343b4314, 0px 4px 32px -4px #343b4314, 0px 24px 48px -12px #343b4314, 0px 48px 96px -24px #343b4314;

package/dist/scss/functional/themes/light-tritanopia.scss

@@ -129,7 +129,7 @@ $display-indigo-fgColor: #494edf;
 $display-indigo-borderColor-muted: #d2d7fe;
 $display-indigo-borderColor-emphasis: #5a61e7;
 $avatar-bgColor: #ffffff;
-$avatar-borderColor: #d0d7de;
+$avatar-borderColor: #1f232826;
 $avatar-shadow: 0px 0px 0px 2px #ffffffcc;
 $avatarStack-fade-bgColor-default: #afb8c1;
 $avatarStack-fade-bgColor-muted: #d0d7de;
@@ -285,6 +285,7 @@ $fgColor-default: #1f2328;
 $fgColor-muted: #636c76;
 $fgColor-onEmphasis: #ffffff;
 $fgColor-white: #ffffff;
+$fgColor-black: #1f2328;
 $fgColor-disabled: #8c959f;
 $fgColor-link: #0969da;
 $fgColor-neutral: #6e7781;
@@ -302,6 +303,8 @@ $bgColor-muted: #f6f8fa;
 $bgColor-inset: #f6f8fa;
 $bgColor-emphasis: #24292f;
 $bgColor-inverse: #24292f;
+$bgColor-white: #ffffff;
+$bgColor-black: #1f2328;
 $bgColor-disabled: #eaeef2b3;
 $bgColor-transparent: #ffffff00;
 $bgColor-neutral-muted: #afb8c133;
@@ -491,7 +494,7 @@ $color-scale-coral-8: #691105; // Avoid using scales, use other functional token
 $color-scale-coral-9: #510901; // Avoid using scales, use other functional tokens instead
 $shadow-inset: inset 0px 1px 0px 0px #1f23280a;
 $shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
-$shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
+$shadow-resting-small: 0px 1px 0px 0px #1f23280a;
 $shadow-resting-medium: 0px 3px 6px 0px #424a531f;
 $shadow-floating-small: 0px 0px 0px 1px #d0d7de80, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
 $shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;

package/dist/scss/functional/themes/light.scss

@@ -129,7 +129,7 @@ $display-indigo-fgColor: #494edf;
 $display-indigo-borderColor-muted: #d2d7fe;
 $display-indigo-borderColor-emphasis: #5a61e7;
 $avatar-bgColor: #ffffff;
-$avatar-borderColor: #d0d7de;
+$avatar-borderColor: #1f232826;
 $avatar-shadow: 0px 0px 0px 2px #ffffffcc;
 $avatarStack-fade-bgColor-default: #afb8c1;
 $avatarStack-fade-bgColor-muted: #d0d7de;
@@ -285,6 +285,7 @@ $fgColor-default: #1f2328;
 $fgColor-muted: #636c76;
 $fgColor-onEmphasis: #ffffff;
 $fgColor-white: #ffffff;
+$fgColor-black: #1f2328;
 $fgColor-disabled: #8c959f;
 $fgColor-link: #0969da;
 $fgColor-neutral: #6e7781;
@@ -302,6 +303,8 @@ $bgColor-muted: #f6f8fa;
 $bgColor-inset: #f6f8fa;
 $bgColor-emphasis: #24292f;
 $bgColor-inverse: #24292f;
+$bgColor-white: #ffffff;
+$bgColor-black: #1f2328;
 $bgColor-disabled: #eaeef2b3;
 $bgColor-transparent: #ffffff00;
 $bgColor-neutral-muted: #afb8c133;
@@ -491,7 +494,7 @@ $color-scale-coral-8: #691105; // Avoid using scales, use other functional token
 $color-scale-coral-9: #510901; // Avoid using scales, use other functional tokens instead
 $shadow-inset: inset 0px 1px 0px 0px #1f23280a;
 $shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
-$shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
+$shadow-resting-small: 0px 1px 0px 0px #1f23280a;
 $shadow-resting-medium: 0px 3px 6px 0px #424a531f;
 $shadow-floating-small: 0px 0px 0px 1px #d0d7de80, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
 $shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "7.15.13",
+  "version": "7.15.14-rc.ed4ead94",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",

package/tokens-next-private/css/functional/themes/dark-colorblind.css

@@ -133,7 +133,7 @@
   --display-indigo-borderColor-muted: #25215f;
   --display-indigo-borderColor-emphasis: #7070e1;
   --avatar-bgColor: #ffffff1a;
-  --avatar-borderColor: #30363db3;
+  --avatar-borderColor: #ffffff26;
   --avatar-shadow: 0px 0px 0px 2px #0d1117;
   --avatarStack-fade-bgColor-default: #30363d;
   --avatarStack-fade-bgColor-muted: #21262d;
@@ -202,7 +202,7 @@
   --button-default-borderColor-disabled: #21262db3;
   --button-default-shadow-resting: 0px 0px 0px 0px #000000;
   --button-primary-fgColor-rest: #ffffff;
-  --button-primary-fgColor-disabled: #ffffffcc;
+  --button-primary-fgColor-disabled: #ffffff66;
   --button-primary-iconColor-rest: #ffffff;
   --button-primary-bgColor-rest: #1f6feb;
   --button-primary-bgColor-hover: #2a7aef;
@@ -288,6 +288,7 @@
   --fgColor-muted: #848d97;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-white: #ffffff;
+  --fgColor-black: #010409;
   --fgColor-disabled: #6e7681;
   --fgColor-link: #4493f8;
   --fgColor-neutral: #6e7681;
@@ -305,6 +306,8 @@
   --bgColor-inset: #010409;
   --bgColor-emphasis: #6e7681;
   --bgColor-inverse: #ffffff;
+  --bgColor-white: #ffffff;
+  --bgColor-black: #010409;
   --bgColor-disabled: #21262db3;
   --bgColor-transparent: #00000000;
   --bgColor-neutral-muted: #6e768166;
@@ -494,7 +497,7 @@
   --color-scale-coral-9: #460701;
   --shadow-inset: inset 0px 1px 0px 0px #0104093d;
   --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
-  --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+  --shadow-resting-small: 0px 1px 0px 0px #01040966;
   --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
   --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
   --shadow-floating-medium: 0px 0px 0px 1px #30363d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
@@ -637,7 +640,7 @@
     --display-indigo-borderColor-muted: #25215f;
     --display-indigo-borderColor-emphasis: #7070e1;
     --avatar-bgColor: #ffffff1a;
-    --avatar-borderColor: #30363db3;
+    --avatar-borderColor: #ffffff26;
     --avatar-shadow: 0px 0px 0px 2px #0d1117;
     --avatarStack-fade-bgColor-default: #30363d;
     --avatarStack-fade-bgColor-muted: #21262d;
@@ -706,7 +709,7 @@
     --button-default-borderColor-disabled: #21262db3;
     --button-default-shadow-resting: 0px 0px 0px 0px #000000;
     --button-primary-fgColor-rest: #ffffff;
-    --button-primary-fgColor-disabled: #ffffffcc;
+    --button-primary-fgColor-disabled: #ffffff66;
     --button-primary-iconColor-rest: #ffffff;
     --button-primary-bgColor-rest: #1f6feb;
     --button-primary-bgColor-hover: #2a7aef;
@@ -792,6 +795,7 @@
     --fgColor-muted: #848d97;
     --fgColor-onEmphasis: #ffffff;
     --fgColor-white: #ffffff;
+    --fgColor-black: #010409;
     --fgColor-disabled: #6e7681;
     --fgColor-link: #4493f8;
     --fgColor-neutral: #6e7681;
@@ -809,6 +813,8 @@
     --bgColor-inset: #010409;
     --bgColor-emphasis: #6e7681;
     --bgColor-inverse: #ffffff;
+    --bgColor-white: #ffffff;
+    --bgColor-black: #010409;
     --bgColor-disabled: #21262db3;
     --bgColor-transparent: #00000000;
     --bgColor-neutral-muted: #6e768166;
@@ -998,7 +1004,7 @@
     --color-scale-coral-9: #460701;
     --shadow-inset: inset 0px 1px 0px 0px #0104093d;
     --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
-    --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+    --shadow-resting-small: 0px 1px 0px 0px #01040966;
     --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
     --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
     --shadow-floating-medium: 0px 0px 0px 1px #30363d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;

package/tokens-next-private/css/functional/themes/dark-dimmed.css

@@ -133,7 +133,7 @@
   --display-indigo-borderColor-muted: #25215f;
   --display-indigo-borderColor-emphasis: #7070e1;
   --avatar-bgColor: #cdd9e51a;
-  --avatar-borderColor: #444c56b3;
+  --avatar-borderColor: #cdd9e526;
   --avatar-shadow: 0px 0px 0px 2px #22272e;
   --avatarStack-fade-bgColor-default: #444c56;
   --avatarStack-fade-bgColor-muted: #373e47;
@@ -202,7 +202,7 @@
   --button-default-borderColor-disabled: #373e47b3;
   --button-default-shadow-resting: 0px 0px 0px 0px #000000;
   --button-primary-fgColor-rest: #ffffff;
-  --button-primary-fgColor-disabled: #cdd9e5cc;
+  --button-primary-fgColor-disabled: #cdd9e566;
   --button-primary-iconColor-rest: #ffffff;
   --button-primary-bgColor-rest: #347d39;
   --button-primary-bgColor-hover: #3b8640;
@@ -287,7 +287,8 @@
   --fgColor-default: #c5d1de;
   --fgColor-muted: #717e8b;
   --fgColor-onEmphasis: #cdd9e5;
-  --fgColor-white: #ffffff;
+  --fgColor-white: #cdd9e5;
+  --fgColor-black: #1c2128;
   --fgColor-disabled: #636e7b;
   --fgColor-link: #478be6;
   --fgColor-neutral: #636e7b;
@@ -305,6 +306,8 @@
   --bgColor-inset: #1c2128;
   --bgColor-emphasis: #636e7b;
   --bgColor-inverse: #cdd9e5;
+  --bgColor-white: #cdd9e5;
+  --bgColor-black: #1c2128;
   --bgColor-disabled: #373e47b3;
   --bgColor-transparent: #00000000;
   --bgColor-neutral-muted: #636e7b66;
@@ -494,7 +497,7 @@
   --color-scale-coral-9: #5d1008;
   --shadow-inset: inset 0px 1px 0px 0px #1c21283d;
   --shadow-resting-xsmall: 0px 1px 0px 0px #1c2128cc;
-  --shadow-resting-small: 0px 1px 0px 0px #1c212866, 0px 1px 3px 0px #1c212866;
+  --shadow-resting-small: 0px 1px 0px 0px #1c212866;
   --shadow-resting-medium: 0px 3px 6px 0px #1c2128cc;
   --shadow-floating-small: 0px 0px 0px 1px #444c56, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
   --shadow-floating-medium: 0px 0px 0px 1px #444c56, 0px 8px 16px -4px #1c212866, 0px 4px 32px -4px #1c212866, 0px 24px 48px -12px #1c212866, 0px 48px 96px -24px #1c212866;
@@ -637,7 +640,7 @@
     --display-indigo-borderColor-muted: #25215f;
     --display-indigo-borderColor-emphasis: #7070e1;
     --avatar-bgColor: #cdd9e51a;
-    --avatar-borderColor: #444c56b3;
+    --avatar-borderColor: #cdd9e526;
     --avatar-shadow: 0px 0px 0px 2px #22272e;
     --avatarStack-fade-bgColor-default: #444c56;
     --avatarStack-fade-bgColor-muted: #373e47;
@@ -706,7 +709,7 @@
     --button-default-borderColor-disabled: #373e47b3;
     --button-default-shadow-resting: 0px 0px 0px 0px #000000;
     --button-primary-fgColor-rest: #ffffff;
-    --button-primary-fgColor-disabled: #cdd9e5cc;
+    --button-primary-fgColor-disabled: #cdd9e566;
     --button-primary-iconColor-rest: #ffffff;
     --button-primary-bgColor-rest: #347d39;
     --button-primary-bgColor-hover: #3b8640;
@@ -791,7 +794,8 @@
     --fgColor-default: #c5d1de;
     --fgColor-muted: #717e8b;
     --fgColor-onEmphasis: #cdd9e5;
-    --fgColor-white: #ffffff;
+    --fgColor-white: #cdd9e5;
+    --fgColor-black: #1c2128;
     --fgColor-disabled: #636e7b;
     --fgColor-link: #478be6;
     --fgColor-neutral: #636e7b;
@@ -809,6 +813,8 @@
     --bgColor-inset: #1c2128;
     --bgColor-emphasis: #636e7b;
     --bgColor-inverse: #cdd9e5;
+    --bgColor-white: #cdd9e5;
+    --bgColor-black: #1c2128;
     --bgColor-disabled: #373e47b3;
     --bgColor-transparent: #00000000;
     --bgColor-neutral-muted: #636e7b66;
@@ -998,7 +1004,7 @@
     --color-scale-coral-9: #5d1008;
     --shadow-inset: inset 0px 1px 0px 0px #1c21283d;
     --shadow-resting-xsmall: 0px 1px 0px 0px #1c2128cc;
-    --shadow-resting-small: 0px 1px 0px 0px #1c212866, 0px 1px 3px 0px #1c212866;
+    --shadow-resting-small: 0px 1px 0px 0px #1c212866;
     --shadow-resting-medium: 0px 3px 6px 0px #1c2128cc;
     --shadow-floating-small: 0px 0px 0px 1px #444c56, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
     --shadow-floating-medium: 0px 0px 0px 1px #444c56, 0px 8px 16px -4px #1c212866, 0px 4px 32px -4px #1c212866, 0px 24px 48px -12px #1c212866, 0px 48px 96px -24px #1c212866;