@primer/primitives 9.1.2 → 10.0.0-rc.2963a70e

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@primer/primitives",
-  "version": "9.1.2",
+  "version": "10.0.0-rc.2963a70e",
   "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}'",
@@ -44,40 +46,38 @@
     "test:integration": "vitest run -r integration"
   },
   "prettier": "@github/prettier-config",
-  "dependencies": {
-    "prettier": "3.3",
-    "@prettier/sync": "^0.5.2"
-  },
   "devDependencies": {
     "@actions/github": "^6.0.0",
     "@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",
-    "@typescript-eslint/eslint-plugin": "^7.15.0",
-    "@typescript-eslint/parser": "^7.15.0",
-    "@vitest/coverage-v8": "^2.0.1",
+    "@playwright/test": "^1.47.1",
+    "@types/node": "22.9",
+    "@typescript-eslint/eslint-plugin": "8.15",
+    "@typescript-eslint/parser": "8.15",
+    "@vitest/coverage-v8": "^2.0.3",
     "color-blend": "^4.0.0",
     "color2k": "^2.0.3",
     "console-table-printer": "^2.12.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "3.6",
-    "eslint-plugin-github": "^5.0.1",
-    "eslint-plugin-jsx-a11y": "6.9",
+    "eslint-plugin-github": "5.1",
+    "eslint-plugin-jsx-a11y": "6.10",
     "eslint-plugin-mdx": "^3.1.5",
-    "eslint-plugin-primer-react": "^5.3.0",
-    "eslint-plugin-react": "7.34",
+    "eslint-plugin-react": "7.37",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "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",
-    "typescript": "5.5",
-    "vitest": "^2.0.1",
+    "prettier": "^3.3.3",
+    "style-dictionary": "^4.1.3",
+    "tsx": "^4.19.0",
+    "typescript": "5.6",
+    "vitest": "^2.0.3",
     "zod": "3.23",
-    "zod-validation-error": "3.3"
+    "zod-validation-error": "3.4"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "^4.22.0"
   }
 }

package/src/tokens/base/motion/easing.json5

@@ -0,0 +1,26 @@
+{
+  base: {
+    easing: {
+      linear: {
+        $value: [0, 0, 1, 1],
+        $type: 'cubicBezier',
+        $description: 'Ideal for non-movement properties, like opacity or background color.',
+      },
+      easeIn: {
+        $value: [0.7, 0.1, 0.75, 0.9],
+        $type: 'cubicBezier',
+        $description: 'Ideal for movement that starts on the page and ends off the page.',
+      },
+      easeOut: {
+        $value: [0.16, 1, 0.3, 1],
+        $type: 'cubicBezier',
+        $description: 'Ideal for movement that starts off the page and ends on the page.',
+      },
+      easeInOut: {
+        $value: [0.6, 0, 0.2, 1],
+        $type: 'cubicBezier',
+        $description: 'Ideal for movement that starts and ends on the page.',
+      },
+    },
+  },
+}

package/src/tokens/base/motion/timing.json5

@@ -0,0 +1,50 @@
+{
+  base: {
+    duration: {
+      '0': {
+        $value: '0ms',
+        $type: 'duration',
+      },
+      '75': {
+        $value: '75ms',
+        $type: 'duration',
+      },
+      '200': {
+        $value: '200ms',
+        $type: 'duration',
+      },
+      '300': {
+        $value: '300ms',
+        $type: 'duration',
+      },
+      '400': {
+        $value: '400ms',
+        $type: 'duration',
+      },
+      '500': {
+        $value: '500ms',
+        $type: 'duration',
+      },
+      '600': {
+        $value: '600ms',
+        $type: 'duration',
+      },
+      '700': {
+        $value: '700ms',
+        $type: 'duration',
+      },
+      '800': {
+        $value: '800ms',
+        $type: 'duration',
+      },
+      '900': {
+        $value: '900ms',
+        $type: 'duration',
+      },
+      '1000': {
+        $value: '1000ms',
+        $type: 'duration',
+      },
+    },
+  },
+}

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

@@ -47,79 +47,198 @@
     },
   },
   diffBlob: {
-    addition: {
+    additionLine: {
       fgColor: {
-        text: {
-          $value: '{fgColor.default}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              mode: 'dark',
-              group: 'component',
-              scopes: ['fgColor'],
-            },
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['fgColor'],
           },
         },
-        num: {
-          $value: '{fgColor.default}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              mode: 'dark',
-              group: 'component',
-              scopes: ['fgColor'],
-            },
+      },
+      bgColor: {
+        $value: '{bgColor.success.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+        alpha: 0.15,
+        mix: null,
+      },
+    },
+    additionWord: {
+      fgColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['fgColor'],
           },
         },
       },
       bgColor: {
-        num: {
-          $value: '{base.color.green.3}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              mode: 'dark',
-              group: 'component',
-              scopes: ['bgColor'],
-            },
+        $value: '{base.color.green.4}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['bgColor'],
           },
-          alpha: 0.3,
         },
-        line: {
-          $value: '{base.color.green.4}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              mode: 'dark',
-              group: 'component',
-              scopes: ['bgColor'],
-            },
+        alpha: 0.4,
+      },
+    },
+    additionNum: {
+      fgColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['fgColor'],
           },
-          alpha: 0.15,
-          mix: null,
         },
-        word: {
-          $value: '{base.color.green.4}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              mode: 'dark',
-              group: 'component',
-              scopes: ['bgColor'],
-            },
+      },
+      bgColor: {
+        $value: '{base.color.green.3}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['bgColor'],
           },
-          alpha: 0.4,
         },
+        alpha: 0.3,
       },
     },
-    deletion: {
+    deletionLine: {
       fgColor: {
-        text: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+      bgColor: {
+        $value: '{bgColor.danger.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+        mix: null,
+      },
+    },
+    deletionWord: {
+      fgColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+      bgColor: {
+        $value: '{base.color.red.4}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+        alpha: 0.4,
+      },
+    },
+    deletionNum: {
+      fgColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+      bgColor: {
+        $value: '{base.color.red.4}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+        alpha: 0.3,
+      },
+    },
+    hunkLine: {
+      fgColor: {
+        $value: '{fgColor.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+      bgColor: {
+        $value: '{bgColor.accent.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+    },
+    hunkNum: {
+      fgColor: {
+        rest: {
           $value: '{fgColor.default}',
           $type: 'color',
           $extensions: {
@@ -131,8 +250,8 @@
             },
           },
         },
-        num: {
-          $value: '{fgColor.default}',
+        hover: {
+          $value: '{fgColor.onEmphasis}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -145,8 +264,8 @@
         },
       },
       bgColor: {
-        num: {
-          $value: '{base.color.red.4}',
+        rest: {
+          $value: '{base.color.blue.8}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -156,10 +275,9 @@
               scopes: ['bgColor'],
             },
           },
-          alpha: 0.3,
         },
-        line: {
-          $value: '{base.color.red.4}',
+        hover: {
+          $value: '{bgColor.accent.emphasis}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -169,36 +287,33 @@
               scopes: ['bgColor'],
             },
           },
-          alpha: 0.15,
-          mix: null,
         },
-        word: {
-          $value: '{base.color.red.4}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              mode: 'dark',
-              group: 'component',
-              scopes: ['bgColor'],
-            },
+      },
+    },
+    emptyNum: {
+      bgColor: {
+        $value: '{bgColor.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['bgColor'],
           },
-          alpha: 0.4,
         },
       },
     },
-    hunk: {
+    emptyLine: {
       bgColor: {
-        num: {
-          $value: '{borderColor.accent.muted}',
-          $type: 'color',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              mode: 'dark',
-              group: 'component',
-              scopes: ['bgColor'],
-            },
+        $value: '{bgColor.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['bgColor'],
           },
         },
       },

package/src/tokens/functional/color/dark/data-vis-dark.json5

@@ -2,7 +2,7 @@
   data: {
     blue: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.blue.5}',
           $type: 'color',
           $extensions: {
@@ -10,7 +10,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },
@@ -30,7 +30,7 @@
     },
     auburn: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.auburn.5}',
           $type: 'color',
           $extensions: {
@@ -38,7 +38,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },
@@ -58,7 +58,7 @@
     },
     orange: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.orange.4}',
           $type: 'color',
           $extensions: {
@@ -66,7 +66,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },
@@ -86,7 +86,7 @@
     },
     yellow: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.yellow.4}',
           $type: 'color',
           $extensions: {
@@ -94,7 +94,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },
@@ -114,7 +114,7 @@
     },
     green: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.green.4}',
           $type: 'color',
           $extensions: {
@@ -122,7 +122,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },
@@ -142,7 +142,7 @@
     },
     teal: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.teal.4}',
           $type: 'color',
           $extensions: {
@@ -150,7 +150,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },
@@ -170,7 +170,7 @@
     },
     purple: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.purple.5}',
           $type: 'color',
           $extensions: {
@@ -178,7 +178,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },
@@ -198,7 +198,7 @@
     },
     pink: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.pink.5}',
           $type: 'color',
           $extensions: {
@@ -206,7 +206,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },
@@ -226,7 +226,7 @@
     },
     red: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.red.5}',
           $type: 'color',
           $extensions: {
@@ -234,7 +234,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },
@@ -254,7 +254,7 @@
     },
     gray: {
       color: {
-        'emphasis': {
+        emphasis: {
           $value: '{base.display.color.gray.4}',
           $type: 'color',
           $extensions: {
@@ -262,7 +262,7 @@
               collection: 'mode',
               mode: 'dark',
               group: 'component',
-              scopes: ['bgColor'],
+              scopes: ['bgColor', 'borderColor'],
             },
           },
         },