@primer/primitives 7.11.15-rc.ff1db9b → 7.12.0-rc.0169e30

package/README.md

@@ -168,6 +168,53 @@ A `mix` proprty must always have a `color` and a `weight` child. `color` can be
 }
 ```
 
+#### Extensions property
+
+According to the [w3c design token specs](https://design-tokens.github.io/community-group/format/#design-token), the [`$extensions`](https://design-tokens.github.io/community-group/format/#extensions) property is used for additional meta data.
+
+For our Figma export we use the following meta data:
+
+- `collection` the collection that the token is added to within Figma
+- `mode` the mode that the token is added to within the collection in Figma
+- `scopes` the scopes that are assigned to the token in Figma, the actual Figma compatible `scopes` are retreive from an object in the [figmaAttributes transformer](./src/transformers/figmaAttributes.ts)
+
+Code example
+
+```js
+  bgColor: {
+    $value: '{borderColor.accent.muted}',
+    $type: 'color',
+    $extensions: {
+      'org.primer.figma': {
+        collection: 'pattern/mode',
+        mode: 'light',
+        scopes: ['bgColor'],
+      },
+    },
+  }
+```
+
+#### 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.11.15-rc.ff1db9b",
+  "version": "7.12.0-rc.0169e30",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",
@@ -30,7 +30,8 @@
     "build": "ts-node ./scripts/build.ts && tsc --project tsconfig.build.json",
     "build:next": "ts-node -r tsconfig-paths/register ./scripts/buildTokens.ts && ts-node ./scripts/buildFallbacks.ts",
     "build:tokens": "node -e \"require('./build')._init()\"",
-    "build:new-tokens": "npm run build:tokens && npm run build:next",
+    "build:figma": "ts-node scripts/buildPlatforms/buildFigma.ts",
+    "build:new-tokens": "npm run build:tokens && npm run build:next && npm run build:figma",
     "tokenJson:check": "ts-node scripts/diffThemes.ts && ts-node scripts/diffTokenProps.ts",
     "contrast:check": "ts-node -e \"require('./scripts/color-contrast').check()\"",
     "format": "prettier --write  '**/*.{js,jsx,ts,tsx,md,mdx,css}'",

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

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