@primer/primitives

{ "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"] } }