@primer/primitives 7.11.15-rc.ff1db9b → 7.12.0-rc.64c6fa0

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.64c6fa0",
   "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/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": {},

package/tokens-next-private/docs/functional/size/border.json

@@ -82,11 +82,23 @@
   "borderRadius-small": {
     "value": "0.1875rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["radius"]
+      }
+    },
     "filePath": "src/tokens/functional/size/border.json",
     "isSource": true,
     "original": {
       "value": "3px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["radius"]
+        }
+      }
     },
     "name": "borderRadius-small",
     "attributes": {},
@@ -95,11 +107,23 @@
   "borderRadius-medium": {
     "value": "0.375rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["radius"]
+      }
+    },
     "filePath": "src/tokens/functional/size/border.json",
     "isSource": true,
     "original": {
       "value": "6px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["radius"]
+        }
+      }
     },
     "name": "borderRadius-medium",
     "attributes": {},
@@ -108,11 +132,23 @@
   "borderRadius-large": {
     "value": "0.75rem",
     "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["radius"]
+      }
+    },
     "filePath": "src/tokens/functional/size/border.json",
     "isSource": true,
     "original": {
       "value": "12px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["radius"]
+        }
+      }
     },
     "name": "borderRadius-large",
     "attributes": {},
@@ -121,11 +157,25 @@
   "borderRadius-full": {
     "value": "624.9375rem",
     "$type": "dimension",
+    "comment": "Use this border radius for pill shaped elements",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["radius"]
+      }
+    },
     "filePath": "src/tokens/functional/size/border.json",
     "isSource": true,
     "original": {
       "value": "9999px",
-      "$type": "dimension"
+      "$type": "dimension",
+      "comment": "Use this border radius for pill shaped elements",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["radius"]
+        }
+      }
     },
     "name": "borderRadius-full",
     "attributes": {},