@primer/primitives 7.12.0-rc.fd97c40 → 7.12.0

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.12.0",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",

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

@@ -40,6 +40,12 @@
   --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;

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

@@ -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;
@@ -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

@@ -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;
@@ -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

@@ -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;
@@ -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

@@ -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;
@@ -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

@@ -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;
@@ -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

@@ -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;
@@ -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

@@ -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;
@@ -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

@@ -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;
@@ -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

@@ -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;
@@ -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;