@primer/primitives 7.12.0 → 7.13.0-rc.80d1e20

package/README.md

@@ -205,7 +205,7 @@ In this case you can create the follwing structure. The `@` will be removed from
   bgColor: {
     accent: {
       "@": {
-        // default values
+        // values for accent (default)
       },
       "muted": {
         // values for accent-muted

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "7.12.0",
+  "version": "7.13.0-rc.80d1e20",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",
@@ -91,7 +91,7 @@
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.1.6",
-    "zod": "^3.21.4",
-    "zod-validation-error": "^1.3.1"
+    "zod": "^3.22.2",
+    "zod-validation-error": "^1.5.0"
   }
 }

package/tokens-next-private/css/functional/size/size.css

@@ -52,4 +52,18 @@
   --stack-gap-condensed: 0.5rem;
   --stack-gap-normal: 1rem;
   --stack-gap-spacious: 1.5rem;
+  --overlay-width-xsmall: 12rem;
+  --overlay-width-small: 20rem;
+  --overlay-width-medium: 30rem;
+  --overlay-width-large: 40rem;
+  --overlay-width-xlarge: 60rem;
+  --overlay-height-small: 16rem;
+  --overlay-height-medium: 20rem;
+  --overlay-height-large: 27rem;
+  --overlay-height-xlarge: 37.5rem;
+  --overlay-padding-normal: 1rem;
+  --overlay-padding-condensed: 0.5rem;
+  --overlay-paddingBlock-condensed: 0.25rem;
+  --overlay-paddingBlock-normal: 0.75rem;
+  --overlay-borderRadius: 0.375rem;
 }

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

@@ -187,21 +187,35 @@
   --fgColor-default: #e6edf3;
   --fgColor-muted: #7d8590;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #0d1117;
   --fgColor-disabled: #8b949e;
   --fgColor-link: #2f81f7;
+  --fgColor-link-onInverse: #1f6feb;
+  --fgColor-neutral: #6e7681;
+  --fgColor-neutral-onInverse: #484f58;
   --fgColor-accent: #2f81f7;
+  --fgColor-accent-onInverse: #1f6feb;
   --fgColor-success: #58a6ff;
+  --fgColor-success-onInverse: #1f6feb;
   --fgColor-attention: #d29922;
+  --fgColor-attention-onInverse: #9e6a03;
   --fgColor-severe: #db6d28;
+  --fgColor-severe-onInverse: #bd561d;
   --fgColor-danger: #db6d28;
+  --fgColor-danger-onInverse: #db3734;
   --fgColor-open: #f0883e;
+  --fgColor-open-onInverse: #bd561d;
   --fgColor-closed: #8b949e;
+  --fgColor-closed-onInverse: #484f58;
   --fgColor-done: #a371f7;
+  --fgColor-done-onInverse: #8957e5;
   --fgColor-sponsors: #db61a2;
+  --fgColor-sponsors-onInverse: #bf4b8a;
   --bgColor-default: #0d1117;
   --bgColor-muted: #161b22;
   --bgColor-inset: #010409;
   --bgColor-emphasis: #6e7681;
+  --bgColor-inverse: #ffffff;
   --bgColor-disabled: #161b22;
   --bgColor-transparent: #00000000;
   --bgColor-neutral-muted: #6e768126;
@@ -389,15 +403,15 @@
   --color-scale-coral-7: #872012;
   --color-scale-coral-8: #640d04;
   --color-scale-coral-9: #460701;
-  --shadow-inset: 0px 0px 0px 0px #000000;
-  --shadow-highlight: 0px 0px 0px 0px #000000;
-  --shadow-resting-xsmall: 0px 1px 0px 0px #010409a3;
-  --shadow-resting-small: 0px 0px 0px 0px #000000;
-  --shadow-resting-medium: 0px 3px 6px 0px #010409;
-  --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 16px 32px 0px #010409d9;
-  --shadow-floating-medium: 0px 4px 32px -4px #6e768117, 0px 8px 16px -4px #6e768117, 0px 24px 48px -12px #6e768129, 0px 48px 96px -24px #6e76813d;
-  --shadow-floating-large: 0px 8px 24px 0px #010409;
-  --shadow-floating-xlarge: 0px 12px 48px 0px #010409;
+  --shadow-inset: inset 0px 1px 0px 0px #0104093d;
+  --shadow-highlight: inset 0px 1px 0px 0px #ffffff1f;
+  --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
+  --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+  --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
+  --shadow-floating-small: 0px 0px 0px 1px #161b22, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
+  --shadow-floating-medium: 0px 0px 0px 1px #161b22, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
+  --shadow-floating-large: 0px 0px 0px 1px #161b22, 0px 24px 48px 0px #010409;
+  --shadow-floating-xlarge: 0px 0px 0px 1px #161b22, 0px 32px 64px 0px #010409;
   --outline-focus: #1f6feb solid 2px;
 }
 @media (prefers-color-scheme: dark) {
@@ -589,21 +603,35 @@
     --fgColor-default: #e6edf3;
     --fgColor-muted: #7d8590;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #0d1117;
     --fgColor-disabled: #8b949e;
     --fgColor-link: #2f81f7;
+    --fgColor-link-onInverse: #1f6feb;
+    --fgColor-neutral: #6e7681;
+    --fgColor-neutral-onInverse: #484f58;
     --fgColor-accent: #2f81f7;
+    --fgColor-accent-onInverse: #1f6feb;
     --fgColor-success: #58a6ff;
+    --fgColor-success-onInverse: #1f6feb;
     --fgColor-attention: #d29922;
+    --fgColor-attention-onInverse: #9e6a03;
     --fgColor-severe: #db6d28;
+    --fgColor-severe-onInverse: #bd561d;
     --fgColor-danger: #db6d28;
+    --fgColor-danger-onInverse: #db3734;
     --fgColor-open: #f0883e;
+    --fgColor-open-onInverse: #bd561d;
     --fgColor-closed: #8b949e;
+    --fgColor-closed-onInverse: #484f58;
     --fgColor-done: #a371f7;
+    --fgColor-done-onInverse: #8957e5;
     --fgColor-sponsors: #db61a2;
+    --fgColor-sponsors-onInverse: #bf4b8a;
     --bgColor-default: #0d1117;
     --bgColor-muted: #161b22;
     --bgColor-inset: #010409;
     --bgColor-emphasis: #6e7681;
+    --bgColor-inverse: #ffffff;
     --bgColor-disabled: #161b22;
     --bgColor-transparent: #00000000;
     --bgColor-neutral-muted: #6e768126;
@@ -791,15 +819,15 @@
     --color-scale-coral-7: #872012;
     --color-scale-coral-8: #640d04;
     --color-scale-coral-9: #460701;
-    --shadow-inset: 0px 0px 0px 0px #000000;
-    --shadow-highlight: 0px 0px 0px 0px #000000;
-    --shadow-resting-xsmall: 0px 1px 0px 0px #010409a3;
-    --shadow-resting-small: 0px 0px 0px 0px #000000;
-    --shadow-resting-medium: 0px 3px 6px 0px #010409;
-    --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 16px 32px 0px #010409d9;
-    --shadow-floating-medium: 0px 4px 32px -4px #6e768117, 0px 8px 16px -4px #6e768117, 0px 24px 48px -12px #6e768129, 0px 48px 96px -24px #6e76813d;
-    --shadow-floating-large: 0px 8px 24px 0px #010409;
-    --shadow-floating-xlarge: 0px 12px 48px 0px #010409;
+    --shadow-inset: inset 0px 1px 0px 0px #0104093d;
+    --shadow-highlight: inset 0px 1px 0px 0px #ffffff1f;
+    --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
+    --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+    --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
+    --shadow-floating-small: 0px 0px 0px 1px #161b22, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
+    --shadow-floating-medium: 0px 0px 0px 1px #161b22, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
+    --shadow-floating-large: 0px 0px 0px 1px #161b22, 0px 24px 48px 0px #010409;
+    --shadow-floating-xlarge: 0px 0px 0px 1px #161b22, 0px 32px 64px 0px #010409;
     --outline-focus: #1f6feb solid 2px;
   }
 }

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

@@ -187,21 +187,35 @@
   --fgColor-default: #c5d1de;
   --fgColor-muted: #6d7986;
   --fgColor-onEmphasis: #cdd9e5;
+  --fgColor-onInverse: #22272e;
   --fgColor-disabled: #768390;
   --fgColor-link: #3b7cdb;
+  --fgColor-link-onInverse: #316dca;
+  --fgColor-neutral: #636e7b;
+  --fgColor-neutral-onInverse: #545d68;
   --fgColor-accent: #3b7cdb;
+  --fgColor-accent-onInverse: #316dca;
   --fgColor-success: #57ab5a;
+  --fgColor-success-onInverse: #347d39;
   --fgColor-attention: #c69026;
+  --fgColor-attention-onInverse: #966600;
   --fgColor-severe: #cc6b2c;
+  --fgColor-severe-onInverse: #ae5622;
   --fgColor-danger: #e5534b;
+  --fgColor-danger-onInverse: #ca3d38;
   --fgColor-open: #57ab5a;
+  --fgColor-open-onInverse: #347d39;
   --fgColor-closed: #e5534b;
+  --fgColor-closed-onInverse: #ca3d38;
   --fgColor-done: #986ee2;
+  --fgColor-done-onInverse: #8256d0;
   --fgColor-sponsors: #c96198;
+  --fgColor-sponsors-onInverse: #ae4c82;
   --bgColor-default: #22272e;
   --bgColor-muted: #2d333b;
   --bgColor-inset: #1c2128;
   --bgColor-emphasis: #636e7b;
+  --bgColor-inverse: #cdd9e5;
   --bgColor-disabled: #2d333b;
   --bgColor-transparent: #00000000;
   --bgColor-neutral-muted: #636e7b26;
@@ -389,15 +403,15 @@
   --color-scale-coral-7: #8d291b;
   --color-scale-coral-8: #771d13;
   --color-scale-coral-9: #5d1008;
-  --shadow-inset: 0px 0px 0px 0px #000000;
-  --shadow-highlight: 0px 0px 0px 0px #000000;
-  --shadow-resting-xsmall: 0px 1px 0px 0px #1c2128a3;
-  --shadow-resting-small: 0px 0px 0px 0px #000000;
-  --shadow-resting-medium: 0px 3px 6px 0px #1c2128;
-  --shadow-floating-small: 0px 0px 0px 1px #444c56, 0px 16px 32px 0px #1c2128d9;
-  --shadow-floating-medium: 0px 4px 32px -4px #636e7b17, 0px 8px 16px -4px #636e7b17, 0px 24px 48px -12px #636e7b29, 0px 48px 96px -24px #636e7b3d;
-  --shadow-floating-large: 0px 8px 24px 0px #1c2128;
-  --shadow-floating-xlarge: 0px 12px 48px 0px #1c2128;
+  --shadow-inset: inset 0px 1px 0px 0px #1c21283d;
+  --shadow-highlight: inset 0px 1px 0px 0px #cdd9e51f;
+  --shadow-resting-xsmall: 0px 1px 0px 0px #1c2128cc;
+  --shadow-resting-small: 0px 1px 0px 0px #1c212866, 0px 1px 3px 0px #1c212866;
+  --shadow-resting-medium: 0px 3px 6px 0px #1c2128cc;
+  --shadow-floating-small: 0px 0px 0px 1px #2d333b, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
+  --shadow-floating-medium: 0px 0px 0px 1px #2d333b, 0px 8px 16px -4px #1c212866, 0px 4px 32px -4px #1c212866, 0px 24px 48px -12px #1c212866, 0px 48px 96px -24px #1c212866;
+  --shadow-floating-large: 0px 0px 0px 1px #2d333b, 0px 24px 48px 0px #1c2128;
+  --shadow-floating-xlarge: 0px 0px 0px 1px #2d333b, 0px 32px 64px 0px #1c2128;
   --outline-focus: #316dca solid 2px;
 }
 @media (prefers-color-scheme: dark) {
@@ -589,21 +603,35 @@
     --fgColor-default: #c5d1de;
     --fgColor-muted: #6d7986;
     --fgColor-onEmphasis: #cdd9e5;
+    --fgColor-onInverse: #22272e;
     --fgColor-disabled: #768390;
     --fgColor-link: #3b7cdb;
+    --fgColor-link-onInverse: #316dca;
+    --fgColor-neutral: #636e7b;
+    --fgColor-neutral-onInverse: #545d68;
     --fgColor-accent: #3b7cdb;
+    --fgColor-accent-onInverse: #316dca;
     --fgColor-success: #57ab5a;
+    --fgColor-success-onInverse: #347d39;
     --fgColor-attention: #c69026;
+    --fgColor-attention-onInverse: #966600;
     --fgColor-severe: #cc6b2c;
+    --fgColor-severe-onInverse: #ae5622;
     --fgColor-danger: #e5534b;
+    --fgColor-danger-onInverse: #ca3d38;
     --fgColor-open: #57ab5a;
+    --fgColor-open-onInverse: #347d39;
     --fgColor-closed: #e5534b;
+    --fgColor-closed-onInverse: #ca3d38;
     --fgColor-done: #986ee2;
+    --fgColor-done-onInverse: #8256d0;
     --fgColor-sponsors: #c96198;
+    --fgColor-sponsors-onInverse: #ae4c82;
     --bgColor-default: #22272e;
     --bgColor-muted: #2d333b;
     --bgColor-inset: #1c2128;
     --bgColor-emphasis: #636e7b;
+    --bgColor-inverse: #cdd9e5;
     --bgColor-disabled: #2d333b;
     --bgColor-transparent: #00000000;
     --bgColor-neutral-muted: #636e7b26;
@@ -791,15 +819,15 @@
     --color-scale-coral-7: #8d291b;
     --color-scale-coral-8: #771d13;
     --color-scale-coral-9: #5d1008;
-    --shadow-inset: 0px 0px 0px 0px #000000;
-    --shadow-highlight: 0px 0px 0px 0px #000000;
-    --shadow-resting-xsmall: 0px 1px 0px 0px #1c2128a3;
-    --shadow-resting-small: 0px 0px 0px 0px #000000;
-    --shadow-resting-medium: 0px 3px 6px 0px #1c2128;
-    --shadow-floating-small: 0px 0px 0px 1px #444c56, 0px 16px 32px 0px #1c2128d9;
-    --shadow-floating-medium: 0px 4px 32px -4px #636e7b17, 0px 8px 16px -4px #636e7b17, 0px 24px 48px -12px #636e7b29, 0px 48px 96px -24px #636e7b3d;
-    --shadow-floating-large: 0px 8px 24px 0px #1c2128;
-    --shadow-floating-xlarge: 0px 12px 48px 0px #1c2128;
+    --shadow-inset: inset 0px 1px 0px 0px #1c21283d;
+    --shadow-highlight: inset 0px 1px 0px 0px #cdd9e51f;
+    --shadow-resting-xsmall: 0px 1px 0px 0px #1c2128cc;
+    --shadow-resting-small: 0px 1px 0px 0px #1c212866, 0px 1px 3px 0px #1c212866;
+    --shadow-resting-medium: 0px 3px 6px 0px #1c2128cc;
+    --shadow-floating-small: 0px 0px 0px 1px #2d333b, 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
+    --shadow-floating-medium: 0px 0px 0px 1px #2d333b, 0px 8px 16px -4px #1c212866, 0px 4px 32px -4px #1c212866, 0px 24px 48px -12px #1c212866, 0px 48px 96px -24px #1c212866;
+    --shadow-floating-large: 0px 0px 0px 1px #2d333b, 0px 24px 48px 0px #1c2128;
+    --shadow-floating-xlarge: 0px 0px 0px 1px #2d333b, 0px 32px 64px 0px #1c2128;
     --outline-focus: #316dca solid 2px;
   }
 }

package/tokens-next-private/css/functional/themes/dark-high-contrast.css

@@ -126,8 +126,8 @@
   --button-invisible-fgColor-hover: #71b7ff;
   --button-invisible-fgColor-disabled: #bdc4cc;
   --button-invisible-bgColor-rest: #00000000;
-  --button-invisible-bgColor-hover: #272b33;
-  --button-invisible-bgColor-active: #525964;
+  --button-invisible-bgColor-hover: #f0f3f6;
+  --button-invisible-bgColor-active: #d9dee3;
   --button-invisible-bgColor-disabled: #272b33;
   --button-invisible-borderColor-rest: #00000000;
   --button-invisible-borderColor-hover: #7a828e;
@@ -187,21 +187,35 @@
   --fgColor-default: #fbfcfd;
   --fgColor-muted: #f0f3f6;
   --fgColor-onEmphasis: #0a0c10;
+  --fgColor-onInverse: #0a0c10;
   --fgColor-disabled: #bdc4cc;
   --fgColor-link: #409eff;
+  --fgColor-link-onInverse: #1e60d5;
+  --fgColor-neutral: #9ea7b3;
+  --fgColor-neutral-onInverse: #272b33;
   --fgColor-accent: #409eff;
+  --fgColor-accent-onInverse: #1e60d5;
   --fgColor-success: #26cd4d;
+  --fgColor-success-onInverse: #007728;
   --fgColor-attention: #f0b72f;
+  --fgColor-attention-onInverse: #945d02;
   --fgColor-severe: #e7811d;
+  --fgColor-severe-onInverse: #a74c00;
   --fgColor-danger: #ff6a69;
+  --fgColor-danger-onInverse: #b1061a;
   --fgColor-open: #26cd4d;
+  --fgColor-open-onInverse: #007728;
   --fgColor-closed: #ff6a69;
+  --fgColor-closed-onInverse: #b1061a;
   --fgColor-done: #b780ff;
+  --fgColor-done-onInverse: #6921d7;
   --fgColor-sponsors: #ef6eb1;
+  --fgColor-sponsors-onInverse: #9c1d6a;
   --bgColor-default: #0a0c10;
   --bgColor-muted: #272b33;
   --bgColor-inset: #010409;
   --bgColor-emphasis: #ffffff;
+  --bgColor-inverse: #ffffff;
   --bgColor-disabled: #272b33;
   --bgColor-transparent: #00000000;
   --bgColor-neutral-muted: #9ea7b326;
@@ -389,15 +403,15 @@
   --color-scale-coral-7: #e03b21;
   --color-scale-coral-8: #c62612;
   --color-scale-coral-9: #a91500;
-  --shadow-inset: 0px 0px 0px 0px #000000;
-  --shadow-highlight: 0px 0px 0px 0px #000000;
-  --shadow-resting-xsmall: 0px 1px 0px 0px #010409a3;
-  --shadow-resting-small: 0px 0px 0px 0px #000000;
-  --shadow-resting-medium: 0px 3px 6px 0px #010409;
-  --shadow-floating-small: 0px 0px 0px 1px #525964, 0px 16px 32px 0px #010409d9;
-  --shadow-floating-medium: 0px 4px 32px -4px #9ea7b317, 0px 8px 16px -4px #9ea7b317, 0px 24px 48px -12px #9ea7b329, 0px 48px 96px -24px #9ea7b33d;
-  --shadow-floating-large: 0px 8px 24px 0px #010409;
-  --shadow-floating-xlarge: 0px 12px 48px 0px #010409;
+  --shadow-inset: inset 0px 1px 0px 0px #0104093d;
+  --shadow-highlight: inset 0px 1px 0px 0px #ffffff1f;
+  --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
+  --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+  --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
+  --shadow-floating-small: 0px 0px 0px 1px #272b33, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
+  --shadow-floating-medium: 0px 0px 0px 1px #272b33, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
+  --shadow-floating-large: 0px 0px 0px 1px #272b33, 0px 24px 48px 0px #010409;
+  --shadow-floating-xlarge: 0px 0px 0px 1px #272b33, 0px 32px 64px 0px #010409;
   --outline-focus: #409eff solid 2px;
 }
 @media (prefers-color-scheme: dark) {
@@ -528,8 +542,8 @@
     --button-invisible-fgColor-hover: #71b7ff;
     --button-invisible-fgColor-disabled: #bdc4cc;
     --button-invisible-bgColor-rest: #00000000;
-    --button-invisible-bgColor-hover: #272b33;
-    --button-invisible-bgColor-active: #525964;
+    --button-invisible-bgColor-hover: #f0f3f6;
+    --button-invisible-bgColor-active: #d9dee3;
     --button-invisible-bgColor-disabled: #272b33;
     --button-invisible-borderColor-rest: #00000000;
     --button-invisible-borderColor-hover: #7a828e;
@@ -589,21 +603,35 @@
     --fgColor-default: #fbfcfd;
     --fgColor-muted: #f0f3f6;
     --fgColor-onEmphasis: #0a0c10;
+    --fgColor-onInverse: #0a0c10;
     --fgColor-disabled: #bdc4cc;
     --fgColor-link: #409eff;
+    --fgColor-link-onInverse: #1e60d5;
+    --fgColor-neutral: #9ea7b3;
+    --fgColor-neutral-onInverse: #272b33;
     --fgColor-accent: #409eff;
+    --fgColor-accent-onInverse: #1e60d5;
     --fgColor-success: #26cd4d;
+    --fgColor-success-onInverse: #007728;
     --fgColor-attention: #f0b72f;
+    --fgColor-attention-onInverse: #945d02;
     --fgColor-severe: #e7811d;
+    --fgColor-severe-onInverse: #a74c00;
     --fgColor-danger: #ff6a69;
+    --fgColor-danger-onInverse: #b1061a;
     --fgColor-open: #26cd4d;
+    --fgColor-open-onInverse: #007728;
     --fgColor-closed: #ff6a69;
+    --fgColor-closed-onInverse: #b1061a;
     --fgColor-done: #b780ff;
+    --fgColor-done-onInverse: #6921d7;
     --fgColor-sponsors: #ef6eb1;
+    --fgColor-sponsors-onInverse: #9c1d6a;
     --bgColor-default: #0a0c10;
     --bgColor-muted: #272b33;
     --bgColor-inset: #010409;
     --bgColor-emphasis: #ffffff;
+    --bgColor-inverse: #ffffff;
     --bgColor-disabled: #272b33;
     --bgColor-transparent: #00000000;
     --bgColor-neutral-muted: #9ea7b326;
@@ -791,15 +819,15 @@
     --color-scale-coral-7: #e03b21;
     --color-scale-coral-8: #c62612;
     --color-scale-coral-9: #a91500;
-    --shadow-inset: 0px 0px 0px 0px #000000;
-    --shadow-highlight: 0px 0px 0px 0px #000000;
-    --shadow-resting-xsmall: 0px 1px 0px 0px #010409a3;
-    --shadow-resting-small: 0px 0px 0px 0px #000000;
-    --shadow-resting-medium: 0px 3px 6px 0px #010409;
-    --shadow-floating-small: 0px 0px 0px 1px #525964, 0px 16px 32px 0px #010409d9;
-    --shadow-floating-medium: 0px 4px 32px -4px #9ea7b317, 0px 8px 16px -4px #9ea7b317, 0px 24px 48px -12px #9ea7b329, 0px 48px 96px -24px #9ea7b33d;
-    --shadow-floating-large: 0px 8px 24px 0px #010409;
-    --shadow-floating-xlarge: 0px 12px 48px 0px #010409;
+    --shadow-inset: inset 0px 1px 0px 0px #0104093d;
+    --shadow-highlight: inset 0px 1px 0px 0px #ffffff1f;
+    --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
+    --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+    --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
+    --shadow-floating-small: 0px 0px 0px 1px #272b33, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
+    --shadow-floating-medium: 0px 0px 0px 1px #272b33, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
+    --shadow-floating-large: 0px 0px 0px 1px #272b33, 0px 24px 48px 0px #010409;
+    --shadow-floating-xlarge: 0px 0px 0px 1px #272b33, 0px 32px 64px 0px #010409;
     --outline-focus: #409eff solid 2px;
   }
 }

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

@@ -187,21 +187,35 @@
   --fgColor-default: #e6edf3;
   --fgColor-muted: #7d8590;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #0d1117;
   --fgColor-disabled: #8b949e;
   --fgColor-link: #2f81f7;
+  --fgColor-link-onInverse: #1f6feb;
+  --fgColor-neutral: #6e7681;
+  --fgColor-neutral-onInverse: #484f58;
   --fgColor-accent: #2f81f7;
+  --fgColor-accent-onInverse: #1f6feb;
   --fgColor-success: #58a6ff;
+  --fgColor-success-onInverse: #1f6feb;
   --fgColor-attention: #d29922;
+  --fgColor-attention-onInverse: #9e6a03;
   --fgColor-severe: #f85149;
+  --fgColor-severe-onInverse: #da3633;
   --fgColor-danger: #f85149;
+  --fgColor-danger-onInverse: #db3734;
   --fgColor-open: #f85149;
+  --fgColor-open-onInverse: #b62324;
   --fgColor-closed: #6e7681;
+  --fgColor-closed-onInverse: #484f58;
   --fgColor-done: #a371f7;
+  --fgColor-done-onInverse: #8957e5;
   --fgColor-sponsors: #db61a2;
+  --fgColor-sponsors-onInverse: #bf4b8a;
   --bgColor-default: #0d1117;
   --bgColor-muted: #161b22;
   --bgColor-inset: #010409;
   --bgColor-emphasis: #6e7681;
+  --bgColor-inverse: #ffffff;
   --bgColor-disabled: #161b22;
   --bgColor-transparent: #00000000;
   --bgColor-neutral-muted: #6e768126;
@@ -389,15 +403,15 @@
   --color-scale-coral-7: #872012;
   --color-scale-coral-8: #640d04;
   --color-scale-coral-9: #460701;
-  --shadow-inset: 0px 0px 0px 0px #000000;
-  --shadow-highlight: 0px 0px 0px 0px #000000;
-  --shadow-resting-xsmall: 0px 1px 0px 0px #010409a3;
-  --shadow-resting-small: 0px 0px 0px 0px #000000;
-  --shadow-resting-medium: 0px 3px 6px 0px #010409;
-  --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 16px 32px 0px #010409d9;
-  --shadow-floating-medium: 0px 4px 32px -4px #6e768117, 0px 8px 16px -4px #6e768117, 0px 24px 48px -12px #6e768129, 0px 48px 96px -24px #6e76813d;
-  --shadow-floating-large: 0px 8px 24px 0px #010409;
-  --shadow-floating-xlarge: 0px 12px 48px 0px #010409;
+  --shadow-inset: inset 0px 1px 0px 0px #0104093d;
+  --shadow-highlight: inset 0px 1px 0px 0px #ffffff1f;
+  --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
+  --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+  --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
+  --shadow-floating-small: 0px 0px 0px 1px #161b22, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
+  --shadow-floating-medium: 0px 0px 0px 1px #161b22, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
+  --shadow-floating-large: 0px 0px 0px 1px #161b22, 0px 24px 48px 0px #010409;
+  --shadow-floating-xlarge: 0px 0px 0px 1px #161b22, 0px 32px 64px 0px #010409;
   --outline-focus: #1f6feb solid 2px;
 }
 @media (prefers-color-scheme: dark) {
@@ -589,21 +603,35 @@
     --fgColor-default: #e6edf3;
     --fgColor-muted: #7d8590;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #0d1117;
     --fgColor-disabled: #8b949e;
     --fgColor-link: #2f81f7;
+    --fgColor-link-onInverse: #1f6feb;
+    --fgColor-neutral: #6e7681;
+    --fgColor-neutral-onInverse: #484f58;
     --fgColor-accent: #2f81f7;
+    --fgColor-accent-onInverse: #1f6feb;
     --fgColor-success: #58a6ff;
+    --fgColor-success-onInverse: #1f6feb;
     --fgColor-attention: #d29922;
+    --fgColor-attention-onInverse: #9e6a03;
     --fgColor-severe: #f85149;
+    --fgColor-severe-onInverse: #da3633;
     --fgColor-danger: #f85149;
+    --fgColor-danger-onInverse: #db3734;
     --fgColor-open: #f85149;
+    --fgColor-open-onInverse: #b62324;
     --fgColor-closed: #6e7681;
+    --fgColor-closed-onInverse: #484f58;
     --fgColor-done: #a371f7;
+    --fgColor-done-onInverse: #8957e5;
     --fgColor-sponsors: #db61a2;
+    --fgColor-sponsors-onInverse: #bf4b8a;
     --bgColor-default: #0d1117;
     --bgColor-muted: #161b22;
     --bgColor-inset: #010409;
     --bgColor-emphasis: #6e7681;
+    --bgColor-inverse: #ffffff;
     --bgColor-disabled: #161b22;
     --bgColor-transparent: #00000000;
     --bgColor-neutral-muted: #6e768126;
@@ -791,15 +819,15 @@
     --color-scale-coral-7: #872012;
     --color-scale-coral-8: #640d04;
     --color-scale-coral-9: #460701;
-    --shadow-inset: 0px 0px 0px 0px #000000;
-    --shadow-highlight: 0px 0px 0px 0px #000000;
-    --shadow-resting-xsmall: 0px 1px 0px 0px #010409a3;
-    --shadow-resting-small: 0px 0px 0px 0px #000000;
-    --shadow-resting-medium: 0px 3px 6px 0px #010409;
-    --shadow-floating-small: 0px 0px 0px 1px #30363d, 0px 16px 32px 0px #010409d9;
-    --shadow-floating-medium: 0px 4px 32px -4px #6e768117, 0px 8px 16px -4px #6e768117, 0px 24px 48px -12px #6e768129, 0px 48px 96px -24px #6e76813d;
-    --shadow-floating-large: 0px 8px 24px 0px #010409;
-    --shadow-floating-xlarge: 0px 12px 48px 0px #010409;
+    --shadow-inset: inset 0px 1px 0px 0px #0104093d;
+    --shadow-highlight: inset 0px 1px 0px 0px #ffffff1f;
+    --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
+    --shadow-resting-small: 0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966;
+    --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
+    --shadow-floating-small: 0px 0px 0px 1px #161b22, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
+    --shadow-floating-medium: 0px 0px 0px 1px #161b22, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
+    --shadow-floating-large: 0px 0px 0px 1px #161b22, 0px 24px 48px 0px #010409;
+    --shadow-floating-xlarge: 0px 0px 0px 1px #161b22, 0px 32px 64px 0px #010409;
     --outline-focus: #1f6feb solid 2px;
   }
 }