@primer/primitives 10.0.0-rc.eb6fe33a → 10.0.0-rc.f7aad39e

package/dist/styleLint/base/motion/motion.json

@@ -0,0 +1,205 @@
+{
+  "base-easing-linear": {
+    "$value": [0, 0, 1, 1],
+    "$type": "cubicBezier",
+    "$description": "Ideal for non-movement properties, like opacity or background color.",
+    "filePath": "src/tokens/base/motion/easing.json5",
+    "isSource": true,
+    "original": {
+      "$value": [0, 0, 1, 1],
+      "$type": "cubicBezier",
+      "$description": "Ideal for non-movement properties, like opacity or background color."
+    },
+    "name": "base-easing-linear",
+    "attributes": {},
+    "path": ["base", "easing", "linear"]
+  },
+  "base-easing-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.",
+    "filePath": "src/tokens/base/motion/easing.json5",
+    "isSource": true,
+    "original": {
+      "$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."
+    },
+    "name": "base-easing-easeIn",
+    "attributes": {},
+    "path": ["base", "easing", "easeIn"]
+  },
+  "base-easing-easeOut": {
+    "$value": [0.16, 1, 0.3, 1],
+    "$type": "cubicBezier",
+    "$description": "Ideal for movement that starts off the page and ends on the page.",
+    "filePath": "src/tokens/base/motion/easing.json5",
+    "isSource": true,
+    "original": {
+      "$value": [0.16, 1, 0.3, 1],
+      "$type": "cubicBezier",
+      "$description": "Ideal for movement that starts off the page and ends on the page."
+    },
+    "name": "base-easing-easeOut",
+    "attributes": {},
+    "path": ["base", "easing", "easeOut"]
+  },
+  "base-easing-easeInOut": {
+    "$value": [0.6, 0, 0.2, 1],
+    "$type": "cubicBezier",
+    "$description": "Ideal for movement that starts and ends on the page.",
+    "filePath": "src/tokens/base/motion/easing.json5",
+    "isSource": true,
+    "original": {
+      "$value": [0.6, 0, 0.2, 1],
+      "$type": "cubicBezier",
+      "$description": "Ideal for movement that starts and ends on the page."
+    },
+    "name": "base-easing-easeInOut",
+    "attributes": {},
+    "path": ["base", "easing", "easeInOut"]
+  },
+  "base-duration-0": {
+    "$value": "0ms",
+    "$type": "duration",
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "0ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-0",
+    "attributes": {},
+    "path": ["base", "duration", "0"]
+  },
+  "base-duration-75": {
+    "$value": "75ms",
+    "$type": "duration",
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "75ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-75",
+    "attributes": {},
+    "path": ["base", "duration", "75"]
+  },
+  "base-duration-200": {
+    "$value": "200ms",
+    "$type": "duration",
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "200ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-200",
+    "attributes": {},
+    "path": ["base", "duration", "200"]
+  },
+  "base-duration-300": {
+    "$value": "300ms",
+    "$type": "duration",
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "300ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-300",
+    "attributes": {},
+    "path": ["base", "duration", "300"]
+  },
+  "base-duration-400": {
+    "$value": "400ms",
+    "$type": "duration",
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "400ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-400",
+    "attributes": {},
+    "path": ["base", "duration", "400"]
+  },
+  "base-duration-500": {
+    "$value": "500ms",
+    "$type": "duration",
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "500ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-500",
+    "attributes": {},
+    "path": ["base", "duration", "500"]
+  },
+  "base-duration-600": {
+    "$value": "600ms",
+    "$type": "duration",
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "600ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-600",
+    "attributes": {},
+    "path": ["base", "duration", "600"]
+  },
+  "base-duration-700": {
+    "$value": "700ms",
+    "$type": "duration",
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "700ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-700",
+    "attributes": {},
+    "path": ["base", "duration", "700"]
+  },
+  "base-duration-800": {
+    "$value": "800ms",
+    "$type": "duration",
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "800ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-800",
+    "attributes": {},
+    "path": ["base", "duration", "800"]
+  },
+  "base-duration-900": {
+    "$value": "900ms",
+    "$type": "duration",
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "900ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-900",
+    "attributes": {},
+    "path": ["base", "duration", "900"]
+  },
+  "base-duration-1000": {
+    "$value": "1000ms",
+    "$type": "duration",
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "1000ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-1000",
+    "attributes": {},
+    "path": ["base", "duration", "1000"]
+  }
+}

package/dist/styleLint/functional/motion/motion.json

@@ -6,7 +6,7 @@
     "filePath": "src/tokens/functional/motion/loading.json5",
     "isSource": true,
     "original": {
-      "$value": "1000ms",
+      "$value": "{base.duration.1000}",
       "$type": "duration",
       "$description": "The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies."
     },
@@ -21,7 +21,7 @@
     "filePath": "src/tokens/functional/motion/patterns.json5",
     "isSource": true,
     "original": {
-      "$value": "1000ms",
+      "$value": "{base.duration.1000}",
       "$type": "duration",
       "$description": "The amount of time it takes the \"Spinner\" loading indicator to make a full 360deg rotation"
     },
@@ -29,6 +29,21 @@
     "attributes": {},
     "path": ["motion", "spinner", "duration", "rotation"]
   },
+  "motion-spinner-easing-rotation": {
+    "$value": [0, 0, 1, 1],
+    "$type": "cubicBezier",
+    "$description": "The easing curve for the \"Spinner\" loading indicator rotation",
+    "filePath": "src/tokens/functional/motion/patterns.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.easing.linear}",
+      "$type": "cubicBezier",
+      "$description": "The easing curve for the \"Spinner\" loading indicator rotation"
+    },
+    "name": "motion-spinner-easing-rotation",
+    "attributes": {},
+    "path": ["motion", "spinner", "easing", "rotation"]
+  },
   "motion-skeletonLoader-shimmer-duration-scale": {
     "$value": "1000ms",
     "$type": "duration",
@@ -36,7 +51,7 @@
     "filePath": "src/tokens/functional/motion/patterns.json5",
     "isSource": true,
     "original": {
-      "$value": "1000ms",
+      "$value": "{base.duration.1000}",
       "$type": "duration",
       "$description": "The amount of times it takes the \"shimmer\" effect to go from the start (left) of the skeleton loader to the end (right)"
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "10.0.0-rc.eb6fe33a",
+  "version": "10.0.0-rc.f7aad39e",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "type": "module",
   "files": [
@@ -29,21 +29,21 @@
     "build:figma": "tsx scripts/buildFigma.ts",
     "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}'",
-    "format:check": "prettier --check '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
-    "install:storybook": "cd docs/storybook && npm ci --legacy-peer-deps --no-audit --no-fund",
+    "validate:tokenJson": "tsx scripts/diffThemes.ts && tsx scripts/diffTokenProps.ts",
+    "validate:contrast": "tsx scripts/color-contrast.ts",
+    "format": "prettier --check '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
+    "format:fix": "prettier --write  '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
     "lint": "ESLINT_USE_FLAT_CONFIG=false eslint '**/*.{js,ts,tsx,md,mdx}' --config .eslintrc.cjs && npm run lint:tokens",
     "lint:fix": "eslint '**/*.{js,ts,tsx,md,mdx}' --fix --max-warnings=0 --config .eslintrc.cjs",
     "lint:tokens": "tsx ./scripts/validateTokenJson.ts",
+    "test": "npm run test:unit && npm run test:integration",
+    "test:unit": "vitest run --coverage",
+    "test:integration": "vitest run -r integration",
     "prebuild": "rm -rf dist",
     "prepack": "npm run build",
     "release": "changeset publish",
-    "start:storybook": "npm run build && cd docs/storybook && npm run storybook",
-    "test": "npm run test:unit && npm run test:integration",
-    "test:unit": "vitest run --coverage",
-    "test:integration": "vitest run -r integration"
+    "install:storybook": "cd docs/storybook && npm ci --legacy-peer-deps --no-audit --no-fund",
+    "start:storybook": "npm run build && cd docs/storybook && npm run storybook"
   },
   "prettier": "@github/prettier-config",
   "devDependencies": {
@@ -52,33 +52,30 @@
     "@changesets/cli": "^2.27.7",
     "@github/prettier-config": "^0.0.6",
     "@playwright/test": "^1.47.1",
-    "@types/node": "^20.14.11",
-    "@typescript-eslint/eslint-plugin": "^7.15.0",
-    "@typescript-eslint/parser": "^7.15.0",
+    "@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",
-    "esbuild": "^0.23.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",
     "prettier": "^3.3.3",
     "style-dictionary": "^4.1.3",
     "tsx": "^4.19.0",
-    "typescript": "5.5",
+    "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/motion/loading.json5

@@ -7,7 +7,7 @@
     loading: {
       delay: {
         default: {
-          $value: '1000ms',
+          $value: '{base.duration.1000}',
           $type: 'duration',
           $description: 'The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies.',
         },

package/src/tokens/functional/motion/patterns.json5

@@ -7,17 +7,24 @@
     spinner: {
       duration: {
         rotation: {
-          $value: '1000ms',
+          $value: '{base.duration.1000}',
           $type: 'duration',
           $description: 'The amount of time it takes the "Spinner" loading indicator to make a full 360deg rotation',
         },
       },
+      easing: {
+        rotation: {
+          $value: '{base.easing.linear}',
+          $type: 'cubicBezier',
+          $description: 'The easing curve for the "Spinner" loading indicator rotation',
+        },
+      },
     },
     skeletonLoader: {
       shimmer: {
         duration: {
           scale: {
-            $value: '1000ms',
+            $value: '{base.duration.1000}',
             $type: 'duration',
             $description: 'The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right)',
           },