@primer/primitives 7.12.0-rc.fd97c40 → 7.13.0-rc.129a477

package/README.md

@@ -194,6 +194,27 @@ Code example
   }
 ```
 
+#### Token names and @-hack
+
+Token names have to be in camelCase or kebab-case and may only include letters, numbers and `-`. This is enforced by the token validation (`npm run lint:tokens`).
+The only acception is the `@`-hack. This is used when you want to have a default value and sub-values, e.g. `bgColor.accent` and `bgColor.accent.muted`.
+In this case you can create the follwing structure. The `@` will be removed from the name and act as the default value.
+
+```js
+{
+  bgColor: {
+    accent: {
+      "@": {
+        // default values
+      },
+      "muted": {
+        // values for accent-muted
+      }
+    }
+  }
+}
+```
+
 ## License
 
 [MIT](./LICENSE) © [GitHub](https://github.com/)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "7.12.0-rc.fd97c40",
+  "version": "7.13.0-rc.129a477",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",

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

@@ -40,10 +40,30 @@
   --controlStack-large-gap-auto: 0.5rem;
   --controlStack-large-gap-condensed: 0.5rem;
   --controlStack-large-gap-spacious: 0.75rem;
+  --space-xxsmall: 0.125rem;
+  --space-xsmall: 0.25rem;
+  --space-small: 0.375rem;
+  --space-medium: 0.5rem;
+  --space-large: 0.75rem;
+  --space-xlarge: 1rem;
   --stack-padding-condensed: 0.5rem;
   --stack-padding-normal: 1rem;
   --stack-padding-spacious: 1.5rem;
   --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,20 +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;
@@ -588,20 +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;

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

@@ -187,20 +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;
@@ -588,20 +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;

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,20 +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;
@@ -527,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;
@@ -588,20 +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;

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

@@ -187,20 +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;
@@ -588,20 +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;

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

@@ -187,20 +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: #3fb950;
+  --fgColor-success-onInverse: #238636;
   --fgColor-attention: #d29922;
+  --fgColor-attention-onInverse: #9e6a03;
   --fgColor-severe: #db6d28;
+  --fgColor-severe-onInverse: #bd561d;
   --fgColor-danger: #f85149;
+  --fgColor-danger-onInverse: #db3734;
   --fgColor-open: #3fb950;
+  --fgColor-open-onInverse: #238636;
   --fgColor-closed: #f85149;
+  --fgColor-closed-onInverse: #db3734;
   --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;
@@ -588,20 +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: #3fb950;
+    --fgColor-success-onInverse: #238636;
     --fgColor-attention: #d29922;
+    --fgColor-attention-onInverse: #9e6a03;
     --fgColor-severe: #db6d28;
+    --fgColor-severe-onInverse: #bd561d;
     --fgColor-danger: #f85149;
+    --fgColor-danger-onInverse: #db3734;
     --fgColor-open: #3fb950;
+    --fgColor-open-onInverse: #238636;
     --fgColor-closed: #f85149;
+    --fgColor-closed-onInverse: #db3734;
     --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;

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

@@ -188,20 +188,35 @@
   --fgColor-default: #1f2328;
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #f6f8fa;
   --fgColor-disabled: #8c959f;
   --fgColor-link: #0969da;
+  --fgColor-link-onInverse: #54aeff;
+  --fgColor-neutral: #6e7781;
+  --fgColor-neutral-onInverse: #8c959f;
   --fgColor-accent: #0969da;
+  --fgColor-accent-onInverse: #54aeff;
   --fgColor-success: #0969da;
+  --fgColor-success-onInverse: #54aeff;
   --fgColor-attention: #9a6700;
+  --fgColor-attention-onInverse: #d4a72c;
   --fgColor-severe: #bc4c00;
+  --fgColor-severe-onInverse: #fb8f44;
   --fgColor-danger: #be4e02;
+  --fgColor-danger-onInverse: #fa4549;
   --fgColor-open: #bc4c00;
+  --fgColor-open-onInverse: #fb8f44;
   --fgColor-closed: #6e7781;
+  --fgColor-closed-onInverse: #afb8c1;
   --fgColor-done: #8250df;
+  --fgColor-done-onInverse: #a475f9;
   --fgColor-sponsors: #bf3989;
+  --fgColor-sponsors-onInverse: #e85aad;
   --bgColor-default: #ffffff;
   --bgColor-muted: #f6f8fa;
+  --bgColor-inset: #f6f8fa;
   --bgColor-emphasis: #24292f;
+  --bgColor-inverse: #24292f;
   --bgColor-disabled: #f6f8fa;
   --bgColor-transparent: #ffffff00;
   --bgColor-neutral-muted: #eaeef280;
@@ -589,20 +604,35 @@
     --fgColor-default: #1f2328;
     --fgColor-muted: #636c76;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #f6f8fa;
     --fgColor-disabled: #8c959f;
     --fgColor-link: #0969da;
+    --fgColor-link-onInverse: #54aeff;
+    --fgColor-neutral: #6e7781;
+    --fgColor-neutral-onInverse: #8c959f;
     --fgColor-accent: #0969da;
+    --fgColor-accent-onInverse: #54aeff;
     --fgColor-success: #0969da;
+    --fgColor-success-onInverse: #54aeff;
     --fgColor-attention: #9a6700;
+    --fgColor-attention-onInverse: #d4a72c;
     --fgColor-severe: #bc4c00;
+    --fgColor-severe-onInverse: #fb8f44;
     --fgColor-danger: #be4e02;
+    --fgColor-danger-onInverse: #fa4549;
     --fgColor-open: #bc4c00;
+    --fgColor-open-onInverse: #fb8f44;
     --fgColor-closed: #6e7781;
+    --fgColor-closed-onInverse: #afb8c1;
     --fgColor-done: #8250df;
+    --fgColor-done-onInverse: #a475f9;
     --fgColor-sponsors: #bf3989;
+    --fgColor-sponsors-onInverse: #e85aad;
     --bgColor-default: #ffffff;
     --bgColor-muted: #f6f8fa;
+    --bgColor-inset: #f6f8fa;
     --bgColor-emphasis: #24292f;
+    --bgColor-inverse: #24292f;
     --bgColor-disabled: #f6f8fa;
     --bgColor-transparent: #ffffff00;
     --bgColor-neutral-muted: #eaeef280;

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

@@ -126,8 +126,8 @@
   --button-invisible-fgColor-hover: #023b95;
   --button-invisible-fgColor-disabled: #4b535d;
   --button-invisible-bgColor-rest: #ffffff00;
-  --button-invisible-bgColor-hover: #e7ecf0;
-  --button-invisible-bgColor-active: #ced5dc;
+  --button-invisible-bgColor-hover: #20252c;
+  --button-invisible-bgColor-active: #4b535d;
   --button-invisible-bgColor-disabled: #e7ecf0;
   --button-invisible-borderColor-rest: #ffffff00;
   --button-invisible-borderColor-hover: #20252c;
@@ -188,20 +188,35 @@
   --fgColor-default: #010409;
   --fgColor-muted: #0e1116;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #ffffff;
   --fgColor-disabled: #4b535d;
   --fgColor-link: #023b95;
+  --fgColor-link-onInverse: #67b3fd;
+  --fgColor-neutral: #66707b;
+  --fgColor-neutral-onInverse: #ced5dc;
   --fgColor-accent: #023b95;
+  --fgColor-accent-onInverse: #67b3fd;
   --fgColor-success: #055d20;
+  --fgColor-success-onInverse: #43c663;
   --fgColor-attention: #744500;
+  --fgColor-attention-onInverse: #d5a824;
   --fgColor-severe: #873800;
+  --fgColor-severe-onInverse: #f99636;
   --fgColor-danger: #8a071e;
+  --fgColor-danger-onInverse: #ff8e8a;
   --fgColor-open: #055d20;
+  --fgColor-open-onInverse: #43c663;
   --fgColor-closed: #8a071e;
+  --fgColor-closed-onInverse: #ff8e8a;
   --fgColor-done: #622cbc;
+  --fgColor-done-onInverse: #c49bff;
   --fgColor-sponsors: #971368;
+  --fgColor-sponsors-onInverse: #fc87ca;
   --bgColor-default: #ffffff;
   --bgColor-muted: #e7ecf0;
+  --bgColor-inset: #ffffff;
   --bgColor-emphasis: #0e1116;
+  --bgColor-inverse: #0e1116;
   --bgColor-disabled: #e7ecf0;
   --bgColor-transparent: #ffffff00;
   --bgColor-neutral-muted: #e7ecf0;
@@ -527,8 +542,8 @@
     --button-invisible-fgColor-hover: #023b95;
     --button-invisible-fgColor-disabled: #4b535d;
     --button-invisible-bgColor-rest: #ffffff00;
-    --button-invisible-bgColor-hover: #e7ecf0;
-    --button-invisible-bgColor-active: #ced5dc;
+    --button-invisible-bgColor-hover: #20252c;
+    --button-invisible-bgColor-active: #4b535d;
     --button-invisible-bgColor-disabled: #e7ecf0;
     --button-invisible-borderColor-rest: #ffffff00;
     --button-invisible-borderColor-hover: #20252c;
@@ -589,20 +604,35 @@
     --fgColor-default: #010409;
     --fgColor-muted: #0e1116;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #ffffff;
     --fgColor-disabled: #4b535d;
     --fgColor-link: #023b95;
+    --fgColor-link-onInverse: #67b3fd;
+    --fgColor-neutral: #66707b;
+    --fgColor-neutral-onInverse: #ced5dc;
     --fgColor-accent: #023b95;
+    --fgColor-accent-onInverse: #67b3fd;
     --fgColor-success: #055d20;
+    --fgColor-success-onInverse: #43c663;
     --fgColor-attention: #744500;
+    --fgColor-attention-onInverse: #d5a824;
     --fgColor-severe: #873800;
+    --fgColor-severe-onInverse: #f99636;
     --fgColor-danger: #8a071e;
+    --fgColor-danger-onInverse: #ff8e8a;
     --fgColor-open: #055d20;
+    --fgColor-open-onInverse: #43c663;
     --fgColor-closed: #8a071e;
+    --fgColor-closed-onInverse: #ff8e8a;
     --fgColor-done: #622cbc;
+    --fgColor-done-onInverse: #c49bff;
     --fgColor-sponsors: #971368;
+    --fgColor-sponsors-onInverse: #fc87ca;
     --bgColor-default: #ffffff;
     --bgColor-muted: #e7ecf0;
+    --bgColor-inset: #ffffff;
     --bgColor-emphasis: #0e1116;
+    --bgColor-inverse: #0e1116;
     --bgColor-disabled: #e7ecf0;
     --bgColor-transparent: #ffffff00;
     --bgColor-neutral-muted: #e7ecf0;

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

@@ -188,20 +188,35 @@
   --fgColor-default: #1f2328;
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #f6f8fa;
   --fgColor-disabled: #8c959f;
   --fgColor-link: #0969da;
+  --fgColor-link-onInverse: #54aeff;
+  --fgColor-neutral: #6e7781;
+  --fgColor-neutral-onInverse: #8c959f;
   --fgColor-accent: #0969da;
+  --fgColor-accent-onInverse: #54aeff;
   --fgColor-success: #0969da;
+  --fgColor-success-onInverse: #54aeff;
   --fgColor-attention: #9a6700;
+  --fgColor-attention-onInverse: #d4a72c;
   --fgColor-severe: #cf222e;
+  --fgColor-severe-onInverse: #ff8182;
   --fgColor-danger: #d1242f;
+  --fgColor-danger-onInverse: #fa4549;
   --fgColor-open: #cf222e;
+  --fgColor-open-onInverse: #fa4549;
   --fgColor-closed: #6e7781;
+  --fgColor-closed-onInverse: #afb8c1;
   --fgColor-done: #8250df;
+  --fgColor-done-onInverse: #a475f9;
   --fgColor-sponsors: #bf3989;
+  --fgColor-sponsors-onInverse: #e85aad;
   --bgColor-default: #ffffff;
   --bgColor-muted: #f6f8fa;
+  --bgColor-inset: #f6f8fa;
   --bgColor-emphasis: #24292f;
+  --bgColor-inverse: #24292f;
   --bgColor-disabled: #f6f8fa;
   --bgColor-transparent: #ffffff00;
   --bgColor-neutral-muted: #eaeef280;
@@ -589,20 +604,35 @@
     --fgColor-default: #1f2328;
     --fgColor-muted: #636c76;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #f6f8fa;
     --fgColor-disabled: #8c959f;
     --fgColor-link: #0969da;
+    --fgColor-link-onInverse: #54aeff;
+    --fgColor-neutral: #6e7781;
+    --fgColor-neutral-onInverse: #8c959f;
     --fgColor-accent: #0969da;
+    --fgColor-accent-onInverse: #54aeff;
     --fgColor-success: #0969da;
+    --fgColor-success-onInverse: #54aeff;
     --fgColor-attention: #9a6700;
+    --fgColor-attention-onInverse: #d4a72c;
     --fgColor-severe: #cf222e;
+    --fgColor-severe-onInverse: #ff8182;
     --fgColor-danger: #d1242f;
+    --fgColor-danger-onInverse: #fa4549;
     --fgColor-open: #cf222e;
+    --fgColor-open-onInverse: #fa4549;
     --fgColor-closed: #6e7781;
+    --fgColor-closed-onInverse: #afb8c1;
     --fgColor-done: #8250df;
+    --fgColor-done-onInverse: #a475f9;
     --fgColor-sponsors: #bf3989;
+    --fgColor-sponsors-onInverse: #e85aad;
     --bgColor-default: #ffffff;
     --bgColor-muted: #f6f8fa;
+    --bgColor-inset: #f6f8fa;
     --bgColor-emphasis: #24292f;
+    --bgColor-inverse: #24292f;
     --bgColor-disabled: #f6f8fa;
     --bgColor-transparent: #ffffff00;
     --bgColor-neutral-muted: #eaeef280;