@primer/primitives 9.1.2 → 10.0.0-rc.29e661a3

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@primer/primitives",
-  "version": "9.1.2",
+  "version": "10.0.0-rc.29e661a3",
   "description": "Typography, spacing, and color primitives for Primer design system",
+  "type": "module",
   "files": [
     "dist",
     "src/tokens"
@@ -22,11 +23,12 @@
   },
   "homepage": "https://github.com/primer/primitives#readme",
   "scripts": {
-    "build": "npm run build:tokens && npm run build:fallbacks && npm run build:figma && npm run build:config",
+    "build": "npm run clean && npm run build:tokens && npm run build:fallbacks && npm run build:figma && npm run build:config",
     "build:tokens": "tsx ./scripts/buildTokens.ts",
     "build:fallbacks": "tsx ./scripts/buildFallbacks.ts",
     "build:figma": "tsx scripts/buildFigma.ts",
-    "build:config": "tsc -p buildConfig.tsconfig.jsonc",
+    "build:config": "tsc -p build.tsconfig.jsonc && tsx ./scripts/copyDir.ts src/types dist/build/types",
+    "clean": "rm -rf dist",
     "tokenJson:check": "tsx scripts/diffThemes.ts && tsx scripts/diffTokenProps.ts",
     "contrast:check": "tsx scripts/color-contrast.ts",
     "format": "prettier --write  '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
@@ -45,7 +47,6 @@
   },
   "prettier": "@github/prettier-config",
   "dependencies": {
-    "prettier": "3.3",
     "@prettier/sync": "^0.5.2"
   },
   "devDependencies": {
@@ -53,14 +54,15 @@
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.7",
     "@github/prettier-config": "^0.0.6",
-    "@playwright/test": "^1.45.1",
-    "@types/node": "^20.14.9",
+    "@playwright/test": "^1.47.1",
+    "@types/node": "^20.14.11",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
-    "@vitest/coverage-v8": "^2.0.1",
+    "@vitest/coverage-v8": "^2.0.3",
     "color-blend": "^4.0.0",
     "color2k": "^2.0.3",
     "console-table-printer": "^2.12.1",
+    "esbuild": "^0.23.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "3.6",
@@ -73,11 +75,18 @@
     "eslint-plugin-storybook": "^0.8.0",
     "json5": "^2.2.1",
     "markdown-table-ts": "^1.0.3",
-    "style-dictionary": "^3.9.2",
-    "tsx": "^4.16.2",
+    "prettier": "^3.3.3",
+    "style-dictionary": "^4.0.1",
+    "tsx": "^4.19.0",
     "typescript": "5.5",
-    "vitest": "^2.0.1",
+    "vitest": "^2.0.3",
     "zod": "3.23",
     "zod-validation-error": "3.3"
+  },
+  "peerDependencies": {
+    "style-dictionary": "^4.0.1"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "^4.22.0"
   }
 }

package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5

@@ -14,7 +14,7 @@
       $type: 'color',
     },
     disabled: {
-      $value: '{base.color.neutral.9}',
+      $value: '{base.color.neutral.8}',
       $type: 'color',
     },
     neutral: {
@@ -194,7 +194,7 @@
     },
     upsell: {
       muted: {
-          $value: '{borderColor.done.muted}',
+        $value: '{borderColor.done.muted}',
         $type: 'color',
         alpha: 1,
       },
@@ -468,7 +468,7 @@
         active: {
           $value: '{bgColor.danger.emphasis}',
           $type: 'color',
-          mix: null
+          mix: null,
         },
       },
     },
@@ -938,5 +938,5 @@
       $type: 'color',
       alpha: 1,
     },
-  }
+  },
 }

package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5

@@ -60,6 +60,9 @@
       muted: {
         $value: '{bgColor.neutral.muted}',
         $type: 'color',
+        $extensions: {
+          alpha: 0.1,
+        },
       },
       emphasis: {
         $value: '{bgColor.neutral.emphasis}',
@@ -83,6 +86,9 @@
       muted: {
         $value: '{borderColor.muted}',
         $type: 'color',
+        $extensions: {
+          alpha: 0.4,
+        },
       },
       emphasis: {
         $value: '{borderColor.emphasis}',

package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5

@@ -73,7 +73,9 @@
       muted: {
         $value: '{base.color.blue.4}',
         $type: 'color',
-        alpha: 0.4,
+        $extensions: {
+          alpha: 0.4,
+        },
       },
       emphasis: {
         $value: '{base.color.blue.5}',
@@ -84,7 +86,9 @@
       muted: {
         $value: '{base.color.red.4}',
         $type: 'color',
-        alpha: 0.4,
+        $extensions: {
+          alpha: 0.4,
+        },
       },
       emphasis: {
         $value: '{base.color.red.5}',
@@ -95,7 +99,9 @@
       muted: {
         $value: '{base.color.red.4}',
         $type: 'color',
-        alpha: 0.4,
+        $extensions: {
+          alpha: 0.4,
+        },
       },
       emphasis: {
         $value: '{base.color.red.5}',
@@ -106,6 +112,9 @@
       muted: {
         $value: '{borderColor.default}',
         $type: 'color',
+        $extensions: {
+          alpha: 0.4,
+        },
       },
       emphasis: {
         $value: '{borderColor.emphasis}',
@@ -119,14 +128,23 @@
         num: {
           $value: '{base.color.blue.3}',
           $type: 'color',
+          $extensions: {
+            alpha: 0.3,
+          },
         },
         line: {
           $value: '{base.color.blue.4}',
           $type: 'color',
+          $extensions: {
+            alpha: 0.15,
+          },
         },
         word: {
           $value: '{base.color.blue.4}',
           $type: 'color',
+          $extensions: {
+            alpha: 0.4,
+          },
         },
       },
     },

package/src/tokens/functional/color/dark/primitives-dark.json5

@@ -85,6 +85,7 @@
       $value: '{base.color.neutral.8}',
       $type: 'color',
       $extensions: {
+        alpha: 0.6,
         'org.primer.figma': {
           collection: 'mode',
           mode: 'dark',
@@ -92,7 +93,6 @@
           scopes: ['fgColor'],
         },
       },
-      alpha: 0.6,
     },
     link: {
       $value: '{fgColor.accent}',
@@ -597,6 +597,7 @@
         $value: '{base.color.red.4}',
         $type: 'color',
         $extensions: {
+          alpha: 0.1,
           'org.primer.figma': {
             collection: 'mode',
             mode: 'dark',
@@ -607,7 +608,6 @@
             },
           },
         },
-        alpha: 0.1,
       },
       emphasis: {
         $value: '{base.color.red.5}',
@@ -630,6 +630,7 @@
         $value: '{bgColor.danger.muted}',
         $type: 'color',
         $extensions: {
+          alpha: 0.1,
           'org.primer.figma': {
             collection: 'mode',
             mode: 'dark',
@@ -640,7 +641,6 @@
             },
           },
         },
-        alpha: 0.1,
       },
       emphasis: {
         $value: '{bgColor.danger.emphasis}',

package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5

@@ -35,7 +35,7 @@
       emphasis: {
         $value: '{base.color.blue.5}',
         $type: 'color',
-        mix: null
+        mix: null,
       },
     },
     open: {
@@ -86,6 +86,9 @@
       muted: {
         $value: '{borderColor.default}',
         $type: 'color',
+        $extensions: {
+          alpha: 0.4,
+        },
       },
       emphasis: {
         $value: '{borderColor.emphasis}',

package/src/tokens/functional/color/light/overrides/light.tritanopia.json5

@@ -31,7 +31,7 @@
       emphasis: {
         $value: '{base.color.blue.5}',
         $type: 'color',
-        mix: null
+        mix: null,
       },
     },
     open: {
@@ -103,6 +103,9 @@
       muted: {
         $value: '{borderColor.default}',
         $type: 'color',
+        $extensions: {
+          alpha: 0.4,
+        },
       },
       emphasis: {
         $value: '{borderColor.emphasis}',

package/src/tokens/functional/color/light/primitives-light.json5

@@ -118,7 +118,7 @@
           group: 'semantic',
           scopes: ['fgColor'],
         },
-      }
+      },
     },
     accent: {
       $value: '{base.color.blue.5}',
@@ -806,7 +806,7 @@
           scopes: ['borderColor'],
         },
       },
-      alpha: 0.1
+      alpha: 0.1,
     },
     transparent: {
       $value: '{base.color.transparent}',