@primer/primitives 7.11.15-rc.ff1db9b → 7.12.0-rc.16225d5

package/README.md

@@ -168,6 +168,32 @@ 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'],
+      },
+    },
+  }
+```
+
 ## 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.16225d5",
   "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/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;
@@ -589,7 +589,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;

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;
@@ -589,7 +589,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;

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;
@@ -589,7 +589,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;

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;
@@ -589,7 +589,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;

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;
@@ -589,7 +589,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;

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;
@@ -590,7 +590,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;

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;
@@ -590,7 +590,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;

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;
@@ -590,7 +590,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;

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;
@@ -590,7 +590,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;

package/tokens-next-private/docs/base/size/size.json

@@ -2,11 +2,23 @@
   "base-size-4": {
     "value": "0.25rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
       "value": "4px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
     },
     "name": "base-size-4",
     "attributes": {},
@@ -15,11 +27,23 @@
   "base-size-8": {
     "value": "0.5rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
       "value": "8px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
     },
     "name": "base-size-8",
     "attributes": {},
@@ -28,11 +52,23 @@
   "base-size-12": {
     "value": "0.75rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
       "value": "12px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
     },
     "name": "base-size-12",
     "attributes": {},
@@ -41,11 +77,23 @@
   "base-size-16": {
     "value": "1rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
       "value": "16px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
     },
     "name": "base-size-16",
     "attributes": {},
@@ -54,11 +102,23 @@
   "base-size-20": {
     "value": "1.25rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
       "value": "20px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
     },
     "name": "base-size-20",
     "attributes": {},
@@ -67,11 +127,23 @@
   "base-size-24": {
     "value": "1.5rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
       "value": "24px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
     },
     "name": "base-size-24",
     "attributes": {},
@@ -80,11 +152,23 @@
   "base-size-28": {
     "value": "1.75rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
       "value": "28px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
     },
     "name": "base-size-28",
     "attributes": {},
@@ -93,11 +177,23 @@
   "base-size-32": {
     "value": "2rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
       "value": "32px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
     },
     "name": "base-size-32",
     "attributes": {},
@@ -106,11 +202,23 @@
   "base-size-36": {
     "value": "2.25rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
       "value": "36px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
     },
     "name": "base-size-36",
     "attributes": {},
@@ -119,11 +227,23 @@
   "base-size-40": {
     "value": "2.5rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
       "value": "40px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
     },
     "name": "base-size-40",
     "attributes": {},
@@ -132,11 +252,23 @@
   "base-size-44": {
     "value": "2.75rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
       "value": "44px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
     },
     "name": "base-size-44",
     "attributes": {},
@@ -145,11 +277,23 @@
   "base-size-48": {
     "value": "3rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
       "value": "48px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
     },
     "name": "base-size-48",
     "attributes": {},
@@ -158,11 +302,23 @@
   "base-size-64": {
     "value": "4rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
       "value": "64px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
     },
     "name": "base-size-64",
     "attributes": {},
@@ -171,11 +327,23 @@
   "base-size-80": {
     "value": "5rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
       "value": "80px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
     },
     "name": "base-size-80",
     "attributes": {},
@@ -184,11 +352,23 @@
   "base-size-96": {
     "value": "6rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
       "value": "96px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
     },
     "name": "base-size-96",
     "attributes": {},
@@ -197,11 +377,23 @@
   "base-size-112": {
     "value": "7rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
       "value": "112px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
     },
     "name": "base-size-112",
     "attributes": {},
@@ -210,11 +402,23 @@
   "base-size-128": {
     "value": "8rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
       "value": "128px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
     },
     "name": "base-size-128",
     "attributes": {},