@primer/primitives 11.7.1 → 11.8.0-rc.1daa71c4

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

@@ -0,0 +1,427 @@
+{
+  "motion-duration-long": {
+    "key": "{motion.duration.long}",
+    "$value": {
+      "value": 500,
+      "unit": "ms"
+    },
+    "$type": "duration",
+    "$description": "Longer duration for complex multi-step animations or large-scale layout shifts. Use sparingly.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["complex-animation", "multi-step", "layout-shift", "page-transition"],
+        "rules": "Use sparingly for complex animations. NEVER use for simple UI interactions."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.duration.500}",
+      "$type": "duration",
+      "$description": "Longer duration for complex multi-step animations or large-scale layout shifts. Use sparingly.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["complex-animation", "multi-step", "layout-shift", "page-transition"],
+          "rules": "Use sparingly for complex animations. NEVER use for simple UI interactions."
+        }
+      },
+      "key": "{motion.duration.long}"
+    },
+    "name": "motion-duration-long",
+    "attributes": {},
+    "path": ["motion", "duration", "long"]
+  },
+  "motion-duration-medium": {
+    "key": "{motion.duration.medium}",
+    "$value": {
+      "value": 300,
+      "unit": "ms"
+    },
+    "$type": "duration",
+    "$description": "Standard duration for elements entering or exiting the viewport, such as modals and dropdowns.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["modal-open", "dropdown-appear", "tooltip-show", "enter-exit-viewport"],
+        "rules": "Use for elements entering or leaving the viewport. Maximum recommended duration for UI interactions."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.duration.300}",
+      "$type": "duration",
+      "$description": "Standard duration for elements entering or exiting the viewport, such as modals and dropdowns.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["modal-open", "dropdown-appear", "tooltip-show", "enter-exit-viewport"],
+          "rules": "Use for elements entering or leaving the viewport. Maximum recommended duration for UI interactions."
+        }
+      },
+      "key": "{motion.duration.medium}"
+    },
+    "name": "motion-duration-medium",
+    "attributes": {},
+    "path": ["motion", "duration", "medium"]
+  },
+  "motion-duration-micro": {
+    "key": "{motion.duration.micro}",
+    "$value": {
+      "value": 100,
+      "unit": "ms"
+    },
+    "$type": "duration",
+    "$description": "Fast micro-interactions like hover, focus ring, and color shifts.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["hover-transition", "focus-ring", "color-shift", "opacity-change"],
+        "rules": "Use for instantaneous feedback on hover and focus states."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.duration.100}",
+      "$type": "duration",
+      "$description": "Fast micro-interactions like hover, focus ring, and color shifts.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["hover-transition", "focus-ring", "color-shift", "opacity-change"],
+          "rules": "Use for instantaneous feedback on hover and focus states."
+        }
+      },
+      "key": "{motion.duration.micro}"
+    },
+    "name": "motion-duration-micro",
+    "attributes": {},
+    "path": ["motion", "duration", "micro"]
+  },
+  "motion-duration-short": {
+    "key": "{motion.duration.short}",
+    "$value": {
+      "value": 200,
+      "unit": "ms"
+    },
+    "$type": "duration",
+    "$description": "Quick transitions for state changes like expand/collapse, toggles, and visibility changes.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["expand-collapse", "toggle", "visibility-change", "state-transition"],
+        "rules": "Use for interactive state changes that need to feel responsive."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.duration.200}",
+      "$type": "duration",
+      "$description": "Quick transitions for state changes like expand/collapse, toggles, and visibility changes.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["expand-collapse", "toggle", "visibility-change", "state-transition"],
+          "rules": "Use for interactive state changes that need to feel responsive."
+        }
+      },
+      "key": "{motion.duration.short}"
+    },
+    "name": "motion-duration-short",
+    "attributes": {},
+    "path": ["motion", "duration", "short"]
+  },
+  "motion-easing-enter": {
+    "key": "{motion.easing.enter}",
+    "$value": [0.3, 0.8, 0.6, 1],
+    "$type": "cubicBezier",
+    "$description": "Decelerating easing for elements entering the viewport or appearing on screen.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["enter-animation", "element-appearing", "modal-open", "dropdown-open", "tooltip-appear"],
+        "rules": "RECOMMENDED default for enter animations. Element decelerates into its final position."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.easing.easeOut}",
+      "$type": "cubicBezier",
+      "$description": "Decelerating easing for elements entering the viewport or appearing on screen.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["enter-animation", "element-appearing", "modal-open", "dropdown-open", "tooltip-appear"],
+          "rules": "RECOMMENDED default for enter animations. Element decelerates into its final position."
+        }
+      },
+      "key": "{motion.easing.enter}"
+    },
+    "name": "motion-easing-enter",
+    "attributes": {},
+    "path": ["motion", "easing", "enter"]
+  },
+  "motion-easing-exit": {
+    "key": "{motion.easing.exit}",
+    "$value": [0.7, 0.1, 0.75, 0.9],
+    "$type": "cubicBezier",
+    "$description": "Accelerating easing for elements exiting the viewport or leaving the screen.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["exit-animation", "element-leaving", "modal-close", "dismiss"],
+        "rules": "Use for elements leaving the viewport. Element accelerates away."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.easing.easeIn}",
+      "$type": "cubicBezier",
+      "$description": "Accelerating easing for elements exiting the viewport or leaving the screen.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["exit-animation", "element-leaving", "modal-close", "dismiss"],
+          "rules": "Use for elements leaving the viewport. Element accelerates away."
+        }
+      },
+      "key": "{motion.easing.exit}"
+    },
+    "name": "motion-easing-exit",
+    "attributes": {},
+    "path": ["motion", "easing", "exit"]
+  },
+  "motion-easing-hover": {
+    "key": "{motion.easing.hover}",
+    "$value": [0.25, 0.1, 0.25, 1],
+    "$type": "cubicBezier",
+    "$description": "Easing for hover state changes and micro-interactions.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["hover-state", "micro-interaction", "button-hover", "link-hover"],
+        "rules": "Use for hover state changes."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.easing.ease}",
+      "$type": "cubicBezier",
+      "$description": "Easing for hover state changes and micro-interactions.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["hover-state", "micro-interaction", "button-hover", "link-hover"],
+          "rules": "Use for hover state changes."
+        }
+      },
+      "key": "{motion.easing.hover}"
+    },
+    "name": "motion-easing-hover",
+    "attributes": {},
+    "path": ["motion", "easing", "hover"]
+  },
+  "motion-easing-linear": {
+    "key": "{motion.easing.linear}",
+    "$value": [0, 0, 1, 1],
+    "$type": "cubicBezier",
+    "$description": "Constant motion with no acceleration. Use for continuous animations like progress bars or loaders.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["progress-bar", "loader", "continuous-animation", "scrolling"],
+        "rules": "Use only for constant, uninterrupted motion."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.easing.linear}",
+      "$type": "cubicBezier",
+      "$description": "Constant motion with no acceleration. Use for continuous animations like progress bars or loaders.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["progress-bar", "loader", "continuous-animation", "scrolling"],
+          "rules": "Use only for constant, uninterrupted motion."
+        }
+      },
+      "key": "{motion.easing.linear}"
+    },
+    "name": "motion-easing-linear",
+    "attributes": {},
+    "path": ["motion", "easing", "linear"]
+  },
+  "motion-easing-move": {
+    "key": "{motion.easing.move}",
+    "$value": [0.6, 0, 0.2, 1],
+    "$type": "cubicBezier",
+    "$description": "Smooth easing for elements moving or morphing within the viewport.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["position-change", "size-change", "morph-animation", "expand-collapse", "slide-transition"],
+        "rules": "Use for elements that move or change shape on screen."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.easing.easeInOut}",
+      "$type": "cubicBezier",
+      "$description": "Smooth easing for elements moving or morphing within the viewport.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["position-change", "size-change", "morph-animation", "expand-collapse", "slide-transition"],
+          "rules": "Use for elements that move or change shape on screen."
+        }
+      },
+      "key": "{motion.easing.move}"
+    },
+    "name": "motion-easing-move",
+    "attributes": {},
+    "path": ["motion", "easing", "move"]
+  },
+  "motion-transition-enter": {
+    "key": "{motion.transition.enter}",
+    "$value": {
+      "duration": {
+        "value": 300,
+        "unit": "ms"
+      },
+      "timingFunction": [0.3, 0.8, 0.6, 1]
+    },
+    "$type": "transition",
+    "$description": "Transition for elements entering the viewport, such as modals, dropdowns, and tooltips.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["modal-open", "dropdown-appear", "tooltip-show", "popover-enter", "overlay-appear"],
+        "rules": "Use for elements appearing on screen. Element decelerates into final position."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "duration": "{motion.duration.medium}",
+        "timingFunction": "{motion.easing.enter}"
+      },
+      "$type": "transition",
+      "$description": "Transition for elements entering the viewport, such as modals, dropdowns, and tooltips.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["modal-open", "dropdown-appear", "tooltip-show", "popover-enter", "overlay-appear"],
+          "rules": "Use for elements appearing on screen. Element decelerates into final position."
+        }
+      },
+      "key": "{motion.transition.enter}"
+    },
+    "name": "motion-transition-enter",
+    "attributes": {},
+    "path": ["motion", "transition", "enter"]
+  },
+  "motion-transition-exit": {
+    "key": "{motion.transition.exit}",
+    "$value": {
+      "duration": {
+        "value": 200,
+        "unit": "ms"
+      },
+      "timingFunction": [0.7, 0.1, 0.75, 0.9]
+    },
+    "$type": "transition",
+    "$description": "Transition for elements exiting the viewport, such as closing modals and dismissing dropdowns.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["modal-close", "dropdown-dismiss", "tooltip-hide", "popover-exit", "overlay-dismiss"],
+        "rules": "Use for elements leaving the screen. Shorter than enter to feel snappy."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "duration": "{motion.duration.short}",
+        "timingFunction": "{motion.easing.exit}"
+      },
+      "$type": "transition",
+      "$description": "Transition for elements exiting the viewport, such as closing modals and dismissing dropdowns.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["modal-close", "dropdown-dismiss", "tooltip-hide", "popover-exit", "overlay-dismiss"],
+          "rules": "Use for elements leaving the screen. Shorter than enter to feel snappy."
+        }
+      },
+      "key": "{motion.transition.exit}"
+    },
+    "name": "motion-transition-exit",
+    "attributes": {},
+    "path": ["motion", "transition", "exit"]
+  },
+  "motion-transition-hover": {
+    "key": "{motion.transition.hover}",
+    "$value": {
+      "duration": {
+        "value": 100,
+        "unit": "ms"
+      },
+      "timingFunction": [0.25, 0.1, 0.25, 1]
+    },
+    "$type": "transition",
+    "$description": "Transition for hover state changes on interactive elements like buttons and links.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["button-hover", "link-hover", "interactive-hover", "color-transition"],
+        "rules": "Use for all hover state transitions. Keeps interactions feeling instantaneous."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "duration": "{motion.duration.micro}",
+        "timingFunction": "{motion.easing.hover}"
+      },
+      "$type": "transition",
+      "$description": "Transition for hover state changes on interactive elements like buttons and links.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["button-hover", "link-hover", "interactive-hover", "color-transition"],
+          "rules": "Use for all hover state transitions. Keeps interactions feeling instantaneous."
+        }
+      },
+      "key": "{motion.transition.hover}"
+    },
+    "name": "motion-transition-hover",
+    "attributes": {},
+    "path": ["motion", "transition", "hover"]
+  },
+  "motion-transition-stateChange": {
+    "key": "{motion.transition.stateChange}",
+    "$value": {
+      "duration": {
+        "value": 200,
+        "unit": "ms"
+      },
+      "timingFunction": [0.6, 0, 0.2, 1]
+    },
+    "$type": "transition",
+    "$description": "Transition for state changes like toggles, expand/collapse, and visibility changes.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["toggle", "expand-collapse", "accordion", "tab-switch", "visibility-change"],
+        "rules": "Use for interactive elements that change between states."
+      }
+    },
+    "filePath": "src/tokens/functional/motion/motion.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "duration": "{motion.duration.short}",
+        "timingFunction": "{motion.easing.move}"
+      },
+      "$type": "transition",
+      "$description": "Transition for state changes like toggles, expand/collapse, and visibility changes.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["toggle", "expand-collapse", "accordion", "tab-switch", "visibility-change"],
+          "rules": "Use for interactive elements that change between states."
+        }
+      },
+      "key": "{motion.transition.stateChange}"
+    },
+    "name": "motion-transition-stateChange",
+    "attributes": {},
+    "path": ["motion", "transition", "stateChange"]
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "11.7.1",
+  "version": "11.8.0-rc.1daa71c4",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "type": "module",
   "files": [
@@ -39,6 +39,7 @@
     "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0 --config eslint.config.mjs && npm run lint:tokens",
     "lint:fix": "eslint '**/*.{js,ts,tsx,md,mdx}' --fix --max-warnings=0 --config eslint.config.mjs",
     "lint:tokens": "tsx scripts/validateTokenJson.ts",
+    "check:removed-tokens": "tsx scripts/checkRemovedTokens.ts",
     "test": "npm run test:unit && npm run test:integration",
     "test:unit": "vitest run --coverage",
     "test:integration": "vitest run -r integration",
@@ -82,4 +83,4 @@
     "zod-validation-error": "^4.0.1",
     "colorjs.io": "^0.6.1"
   }
-}
+}

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

@@ -0,0 +1,190 @@
+{
+  motion: {
+    duration: {
+      $description: 'Semantic duration tokens for UI motion. Maps interaction types to appropriate timing values.',
+      $extensions: {
+        'org.primer.llm': {
+          usage: ['transition-duration', 'animation-duration', 'motion-timing'],
+          rules:
+            'MUST keep UI interactions ≤300ms. Use micro for hover/focus, short for state changes, medium for enter/exit. NEVER exceed 500ms for UI interactions.',
+        },
+      },
+      micro: {
+        $value: '{base.duration.100}',
+        $type: 'duration',
+        $description: 'Fast micro-interactions like hover, focus ring, and color shifts.',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['hover-transition', 'focus-ring', 'color-shift', 'opacity-change'],
+            rules: 'Use for instantaneous feedback on hover and focus states.',
+          },
+        },
+      },
+      short: {
+        $value: '{base.duration.200}',
+        $type: 'duration',
+        $description: 'Quick transitions for state changes like expand/collapse, toggles, and visibility changes.',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['expand-collapse', 'toggle', 'visibility-change', 'state-transition'],
+            rules: 'Use for interactive state changes that need to feel responsive.',
+          },
+        },
+      },
+      medium: {
+        $value: '{base.duration.300}',
+        $type: 'duration',
+        $description: 'Standard duration for elements entering or exiting the viewport, such as modals and dropdowns.',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['modal-open', 'dropdown-appear', 'tooltip-show', 'enter-exit-viewport'],
+            rules: 'Use for elements entering or leaving the viewport. Maximum recommended duration for UI interactions.',
+          },
+        },
+      },
+      long: {
+        $value: '{base.duration.500}',
+        $type: 'duration',
+        $description: 'Longer duration for complex multi-step animations or large-scale layout shifts. Use sparingly.',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['complex-animation', 'multi-step', 'layout-shift', 'page-transition'],
+            rules: 'Use sparingly for complex animations. NEVER use for simple UI interactions.',
+          },
+        },
+      },
+    },
+    easing: {
+      $description: 'Semantic easing tokens for UI motion. Maps interaction types to appropriate cubic-bezier curves.',
+      $extensions: {
+        'org.primer.llm': {
+          usage: ['transition-timing-function', 'animation-timing-function', 'easing-curve'],
+          rules:
+            'Follow the easing decision tree: entering/exiting → enter, moving/morphing → move, hover → hover, constant → linear.',
+        },
+      },
+      hover: {
+        $value: '{base.easing.ease}',
+        $type: 'cubicBezier',
+        $description: 'Easing for hover state changes and micro-interactions.',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['hover-state', 'micro-interaction', 'button-hover', 'link-hover'],
+            rules: 'Use for hover state changes.',
+          },
+        },
+      },
+      enter: {
+        $value: '{base.easing.easeOut}',
+        $type: 'cubicBezier',
+        $description: 'Decelerating easing for elements entering the viewport or appearing on screen.',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['enter-animation', 'element-appearing', 'modal-open', 'dropdown-open', 'tooltip-appear'],
+            rules: 'RECOMMENDED default for enter animations. Element decelerates into its final position.',
+          },
+        },
+      },
+      exit: {
+        $value: '{base.easing.easeIn}',
+        $type: 'cubicBezier',
+        $description: 'Accelerating easing for elements exiting the viewport or leaving the screen.',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['exit-animation', 'element-leaving', 'modal-close', 'dismiss'],
+            rules: 'Use for elements leaving the viewport. Element accelerates away.',
+          },
+        },
+      },
+      move: {
+        $value: '{base.easing.easeInOut}',
+        $type: 'cubicBezier',
+        $description: 'Smooth easing for elements moving or morphing within the viewport.',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['position-change', 'size-change', 'morph-animation', 'expand-collapse', 'slide-transition'],
+            rules: 'Use for elements that move or change shape on screen.',
+          },
+        },
+      },
+      linear: {
+        $value: '{base.easing.linear}',
+        $type: 'cubicBezier',
+        $description: 'Constant motion with no acceleration. Use for continuous animations like progress bars or loaders.',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['progress-bar', 'loader', 'continuous-animation', 'scrolling'],
+            rules: 'Use only for constant, uninterrupted motion.',
+          },
+        },
+      },
+    },
+    transition: {
+      $description:
+        'Composite transition tokens bundling duration and easing for common UI interaction patterns. Use these for the CSS transition property.',
+      $extensions: {
+        'org.primer.llm': {
+          usage: ['css-transition', 'transition-shorthand'],
+          rules:
+            'Use transition tokens instead of raw duration + easing values. Pair with CSS transition-property to specify which properties to animate. MUST respect prefers-reduced-motion.',
+        },
+      },
+      hover: {
+        $value: {
+          duration: '{motion.duration.micro}',
+          timingFunction: '{motion.easing.hover}',
+        },
+        $type: 'transition',
+        $description: 'Transition for hover state changes on interactive elements like buttons and links.',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['button-hover', 'link-hover', 'interactive-hover', 'color-transition'],
+            rules: 'Use for all hover state transitions. Keeps interactions feeling instantaneous.',
+          },
+        },
+      },
+      stateChange: {
+        $value: {
+          duration: '{motion.duration.short}',
+          timingFunction: '{motion.easing.move}',
+        },
+        $type: 'transition',
+        $description: 'Transition for state changes like toggles, expand/collapse, and visibility changes.',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['toggle', 'expand-collapse', 'accordion', 'tab-switch', 'visibility-change'],
+            rules: 'Use for interactive elements that change between states.',
+          },
+        },
+      },
+      enter: {
+        $value: {
+          duration: '{motion.duration.medium}',
+          timingFunction: '{motion.easing.enter}',
+        },
+        $type: 'transition',
+        $description: 'Transition for elements entering the viewport, such as modals, dropdowns, and tooltips.',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['modal-open', 'dropdown-appear', 'tooltip-show', 'popover-enter', 'overlay-appear'],
+            rules: 'Use for elements appearing on screen. Element decelerates into final position.',
+          },
+        },
+      },
+      exit: {
+        $value: {
+          duration: '{motion.duration.short}',
+          timingFunction: '{motion.easing.exit}',
+        },
+        $type: 'transition',
+        $description: 'Transition for elements exiting the viewport, such as closing modals and dismissing dropdowns.',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['modal-close', 'dropdown-dismiss', 'tooltip-hide', 'popover-exit', 'overlay-dismiss'],
+            rules: 'Use for elements leaving the screen. Shorter than enter to feel snappy.',
+          },
+        },
+      },
+    },
+  },
+}