@primer/primitives 7.12.0-rc.335fc83 → 7.12.0-rc.35535a1

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.335fc83",
+  "version": "7.12.0-rc.35535a1",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",

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

@@ -188,7 +188,7 @@
   --fgColor-muted: #7d8590;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-disabled: #8b949e;
-  --fgColor-link-rest: #2f81f7;
+  --fgColor-link: #2f81f7;
   --fgColor-accent: #2f81f7;
   --fgColor-success: #58a6ff;
   --fgColor-attention: #d29922;
@@ -200,6 +200,7 @@
   --fgColor-sponsors: #db61a2;
   --bgColor-default: #0d1117;
   --bgColor-muted: #161b22;
+  --bgColor-inset: #010409;
   --bgColor-emphasis: #6e7681;
   --bgColor-disabled: #161b22;
   --bgColor-transparent: #00000000;
@@ -589,7 +590,7 @@
     --fgColor-muted: #7d8590;
     --fgColor-onEmphasis: #ffffff;
     --fgColor-disabled: #8b949e;
-    --fgColor-link-rest: #2f81f7;
+    --fgColor-link: #2f81f7;
     --fgColor-accent: #2f81f7;
     --fgColor-success: #58a6ff;
     --fgColor-attention: #d29922;
@@ -601,6 +602,7 @@
     --fgColor-sponsors: #db61a2;
     --bgColor-default: #0d1117;
     --bgColor-muted: #161b22;
+    --bgColor-inset: #010409;
     --bgColor-emphasis: #6e7681;
     --bgColor-disabled: #161b22;
     --bgColor-transparent: #00000000;

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

@@ -188,7 +188,7 @@
   --fgColor-muted: #6d7986;
   --fgColor-onEmphasis: #cdd9e5;
   --fgColor-disabled: #768390;
-  --fgColor-link-rest: #3b7cdb;
+  --fgColor-link: #3b7cdb;
   --fgColor-accent: #3b7cdb;
   --fgColor-success: #57ab5a;
   --fgColor-attention: #c69026;
@@ -200,6 +200,7 @@
   --fgColor-sponsors: #c96198;
   --bgColor-default: #22272e;
   --bgColor-muted: #2d333b;
+  --bgColor-inset: #1c2128;
   --bgColor-emphasis: #636e7b;
   --bgColor-disabled: #2d333b;
   --bgColor-transparent: #00000000;
@@ -589,7 +590,7 @@
     --fgColor-muted: #6d7986;
     --fgColor-onEmphasis: #cdd9e5;
     --fgColor-disabled: #768390;
-    --fgColor-link-rest: #3b7cdb;
+    --fgColor-link: #3b7cdb;
     --fgColor-accent: #3b7cdb;
     --fgColor-success: #57ab5a;
     --fgColor-attention: #c69026;
@@ -601,6 +602,7 @@
     --fgColor-sponsors: #c96198;
     --bgColor-default: #22272e;
     --bgColor-muted: #2d333b;
+    --bgColor-inset: #1c2128;
     --bgColor-emphasis: #636e7b;
     --bgColor-disabled: #2d333b;
     --bgColor-transparent: #00000000;

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

@@ -188,7 +188,7 @@
   --fgColor-muted: #f0f3f6;
   --fgColor-onEmphasis: #0a0c10;
   --fgColor-disabled: #bdc4cc;
-  --fgColor-link-rest: #409eff;
+  --fgColor-link: #409eff;
   --fgColor-accent: #409eff;
   --fgColor-success: #26cd4d;
   --fgColor-attention: #f0b72f;
@@ -200,6 +200,7 @@
   --fgColor-sponsors: #ef6eb1;
   --bgColor-default: #0a0c10;
   --bgColor-muted: #272b33;
+  --bgColor-inset: #010409;
   --bgColor-emphasis: #ffffff;
   --bgColor-disabled: #272b33;
   --bgColor-transparent: #00000000;
@@ -589,7 +590,7 @@
     --fgColor-muted: #f0f3f6;
     --fgColor-onEmphasis: #0a0c10;
     --fgColor-disabled: #bdc4cc;
-    --fgColor-link-rest: #409eff;
+    --fgColor-link: #409eff;
     --fgColor-accent: #409eff;
     --fgColor-success: #26cd4d;
     --fgColor-attention: #f0b72f;
@@ -601,6 +602,7 @@
     --fgColor-sponsors: #ef6eb1;
     --bgColor-default: #0a0c10;
     --bgColor-muted: #272b33;
+    --bgColor-inset: #010409;
     --bgColor-emphasis: #ffffff;
     --bgColor-disabled: #272b33;
     --bgColor-transparent: #00000000;

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

@@ -188,7 +188,7 @@
   --fgColor-muted: #7d8590;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-disabled: #8b949e;
-  --fgColor-link-rest: #2f81f7;
+  --fgColor-link: #2f81f7;
   --fgColor-accent: #2f81f7;
   --fgColor-success: #58a6ff;
   --fgColor-attention: #d29922;
@@ -200,6 +200,7 @@
   --fgColor-sponsors: #db61a2;
   --bgColor-default: #0d1117;
   --bgColor-muted: #161b22;
+  --bgColor-inset: #010409;
   --bgColor-emphasis: #6e7681;
   --bgColor-disabled: #161b22;
   --bgColor-transparent: #00000000;
@@ -589,7 +590,7 @@
     --fgColor-muted: #7d8590;
     --fgColor-onEmphasis: #ffffff;
     --fgColor-disabled: #8b949e;
-    --fgColor-link-rest: #2f81f7;
+    --fgColor-link: #2f81f7;
     --fgColor-accent: #2f81f7;
     --fgColor-success: #58a6ff;
     --fgColor-attention: #d29922;
@@ -601,6 +602,7 @@
     --fgColor-sponsors: #db61a2;
     --bgColor-default: #0d1117;
     --bgColor-muted: #161b22;
+    --bgColor-inset: #010409;
     --bgColor-emphasis: #6e7681;
     --bgColor-disabled: #161b22;
     --bgColor-transparent: #00000000;

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

@@ -188,7 +188,7 @@
   --fgColor-muted: #7d8590;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-disabled: #8b949e;
-  --fgColor-link-rest: #2f81f7;
+  --fgColor-link: #2f81f7;
   --fgColor-accent: #2f81f7;
   --fgColor-success: #3fb950;
   --fgColor-attention: #d29922;
@@ -200,6 +200,7 @@
   --fgColor-sponsors: #db61a2;
   --bgColor-default: #0d1117;
   --bgColor-muted: #161b22;
+  --bgColor-inset: #010409;
   --bgColor-emphasis: #6e7681;
   --bgColor-disabled: #161b22;
   --bgColor-transparent: #00000000;
@@ -589,7 +590,7 @@
     --fgColor-muted: #7d8590;
     --fgColor-onEmphasis: #ffffff;
     --fgColor-disabled: #8b949e;
-    --fgColor-link-rest: #2f81f7;
+    --fgColor-link: #2f81f7;
     --fgColor-accent: #2f81f7;
     --fgColor-success: #3fb950;
     --fgColor-attention: #d29922;
@@ -601,6 +602,7 @@
     --fgColor-sponsors: #db61a2;
     --bgColor-default: #0d1117;
     --bgColor-muted: #161b22;
+    --bgColor-inset: #010409;
     --bgColor-emphasis: #6e7681;
     --bgColor-disabled: #161b22;
     --bgColor-transparent: #00000000;

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

@@ -189,7 +189,7 @@
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-disabled: #8c959f;
-  --fgColor-link-rest: #0969da;
+  --fgColor-link: #0969da;
   --fgColor-accent: #0969da;
   --fgColor-success: #0969da;
   --fgColor-attention: #9a6700;
@@ -201,6 +201,7 @@
   --fgColor-sponsors: #bf3989;
   --bgColor-default: #ffffff;
   --bgColor-muted: #f6f8fa;
+  --bgColor-inset: #f6f8fa;
   --bgColor-emphasis: #24292f;
   --bgColor-disabled: #f6f8fa;
   --bgColor-transparent: #ffffff00;
@@ -590,7 +591,7 @@
     --fgColor-muted: #636c76;
     --fgColor-onEmphasis: #ffffff;
     --fgColor-disabled: #8c959f;
-    --fgColor-link-rest: #0969da;
+    --fgColor-link: #0969da;
     --fgColor-accent: #0969da;
     --fgColor-success: #0969da;
     --fgColor-attention: #9a6700;
@@ -602,6 +603,7 @@
     --fgColor-sponsors: #bf3989;
     --bgColor-default: #ffffff;
     --bgColor-muted: #f6f8fa;
+    --bgColor-inset: #f6f8fa;
     --bgColor-emphasis: #24292f;
     --bgColor-disabled: #f6f8fa;
     --bgColor-transparent: #ffffff00;

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

@@ -189,7 +189,7 @@
   --fgColor-muted: #0e1116;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-disabled: #4b535d;
-  --fgColor-link-rest: #023b95;
+  --fgColor-link: #023b95;
   --fgColor-accent: #023b95;
   --fgColor-success: #055d20;
   --fgColor-attention: #744500;
@@ -201,6 +201,7 @@
   --fgColor-sponsors: #971368;
   --bgColor-default: #ffffff;
   --bgColor-muted: #e7ecf0;
+  --bgColor-inset: #ffffff;
   --bgColor-emphasis: #0e1116;
   --bgColor-disabled: #e7ecf0;
   --bgColor-transparent: #ffffff00;
@@ -590,7 +591,7 @@
     --fgColor-muted: #0e1116;
     --fgColor-onEmphasis: #ffffff;
     --fgColor-disabled: #4b535d;
-    --fgColor-link-rest: #023b95;
+    --fgColor-link: #023b95;
     --fgColor-accent: #023b95;
     --fgColor-success: #055d20;
     --fgColor-attention: #744500;
@@ -602,6 +603,7 @@
     --fgColor-sponsors: #971368;
     --bgColor-default: #ffffff;
     --bgColor-muted: #e7ecf0;
+    --bgColor-inset: #ffffff;
     --bgColor-emphasis: #0e1116;
     --bgColor-disabled: #e7ecf0;
     --bgColor-transparent: #ffffff00;

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

@@ -189,7 +189,7 @@
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-disabled: #8c959f;
-  --fgColor-link-rest: #0969da;
+  --fgColor-link: #0969da;
   --fgColor-accent: #0969da;
   --fgColor-success: #0969da;
   --fgColor-attention: #9a6700;
@@ -201,6 +201,7 @@
   --fgColor-sponsors: #bf3989;
   --bgColor-default: #ffffff;
   --bgColor-muted: #f6f8fa;
+  --bgColor-inset: #f6f8fa;
   --bgColor-emphasis: #24292f;
   --bgColor-disabled: #f6f8fa;
   --bgColor-transparent: #ffffff00;
@@ -590,7 +591,7 @@
     --fgColor-muted: #636c76;
     --fgColor-onEmphasis: #ffffff;
     --fgColor-disabled: #8c959f;
-    --fgColor-link-rest: #0969da;
+    --fgColor-link: #0969da;
     --fgColor-accent: #0969da;
     --fgColor-success: #0969da;
     --fgColor-attention: #9a6700;
@@ -602,6 +603,7 @@
     --fgColor-sponsors: #bf3989;
     --bgColor-default: #ffffff;
     --bgColor-muted: #f6f8fa;
+    --bgColor-inset: #f6f8fa;
     --bgColor-emphasis: #24292f;
     --bgColor-disabled: #f6f8fa;
     --bgColor-transparent: #ffffff00;

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

@@ -189,7 +189,7 @@
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-disabled: #8c959f;
-  --fgColor-link-rest: #0969da;
+  --fgColor-link: #0969da;
   --fgColor-accent: #0969da;
   --fgColor-success: #1a7f37;
   --fgColor-attention: #9a6700;
@@ -201,6 +201,7 @@
   --fgColor-sponsors: #bf3989;
   --bgColor-default: #ffffff;
   --bgColor-muted: #f6f8fa;
+  --bgColor-inset: #f6f8fa;
   --bgColor-emphasis: #24292f;
   --bgColor-disabled: #f6f8fa;
   --bgColor-transparent: #ffffff00;
@@ -590,7 +591,7 @@
     --fgColor-muted: #636c76;
     --fgColor-onEmphasis: #ffffff;
     --fgColor-disabled: #8c959f;
-    --fgColor-link-rest: #0969da;
+    --fgColor-link: #0969da;
     --fgColor-accent: #0969da;
     --fgColor-success: #1a7f37;
     --fgColor-attention: #9a6700;
@@ -602,6 +603,7 @@
     --fgColor-sponsors: #bf3989;
     --bgColor-default: #ffffff;
     --bgColor-muted: #f6f8fa;
+    --bgColor-inset: #f6f8fa;
     --bgColor-emphasis: #24292f;
     --bgColor-disabled: #f6f8fa;
     --bgColor-transparent: #ffffff00;