@primer/primitives 11.7.1 → 11.8.0-rc.036a9e18

package/dist/docs/functional/motion/motion.json

@@ -0,0 +1,427 @@
+{
+  "motion-duration-long": {
+    "key": "{motion.duration.long}",
+    "$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"],
+    "value": {
+      "value": 500,
+      "unit": "ms"
+    },
+    "type": "duration",
+    "description": "Longer duration for complex multi-step animations or large-scale layout shifts. Use sparingly."
+  },
+  "motion-duration-medium": {
+    "key": "{motion.duration.medium}",
+    "$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"],
+    "value": {
+      "value": 300,
+      "unit": "ms"
+    },
+    "type": "duration",
+    "description": "Standard duration for elements entering or exiting the viewport, such as modals and dropdowns."
+  },
+  "motion-duration-micro": {
+    "key": "{motion.duration.micro}",
+    "$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"],
+    "value": {
+      "value": 100,
+      "unit": "ms"
+    },
+    "type": "duration",
+    "description": "Fast micro-interactions like hover, focus ring, and color shifts."
+  },
+  "motion-duration-short": {
+    "key": "{motion.duration.short}",
+    "$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"],
+    "value": {
+      "value": 200,
+      "unit": "ms"
+    },
+    "type": "duration",
+    "description": "Quick transitions for state changes like expand/collapse, toggles, and visibility changes."
+  },
+  "motion-easing-enter": {
+    "key": "{motion.easing.enter}",
+    "$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"],
+    "value": [0.3, 0.8, 0.6, 1],
+    "type": "cubicBezier",
+    "description": "Decelerating easing for elements entering the viewport or appearing on screen."
+  },
+  "motion-easing-exit": {
+    "key": "{motion.easing.exit}",
+    "$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"],
+    "value": [0.7, 0.1, 0.75, 0.9],
+    "type": "cubicBezier",
+    "description": "Accelerating easing for elements exiting the viewport or leaving the screen."
+  },
+  "motion-easing-hover": {
+    "key": "{motion.easing.hover}",
+    "$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"],
+    "value": [0.25, 0.1, 0.25, 1],
+    "type": "cubicBezier",
+    "description": "Easing for hover state changes and micro-interactions."
+  },
+  "motion-easing-linear": {
+    "key": "{motion.easing.linear}",
+    "$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"],
+    "value": [0, 0, 1, 1],
+    "type": "cubicBezier",
+    "description": "Constant motion with no acceleration. Use for continuous animations like progress bars or loaders."
+  },
+  "motion-easing-move": {
+    "key": "{motion.easing.move}",
+    "$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"],
+    "value": [0.6, 0, 0.2, 1],
+    "type": "cubicBezier",
+    "description": "Smooth easing for elements moving or morphing within the viewport."
+  },
+  "motion-transition-enter": {
+    "key": "{motion.transition.enter}",
+    "$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"],
+    "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."
+  },
+  "motion-transition-exit": {
+    "key": "{motion.transition.exit}",
+    "$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"],
+    "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."
+  },
+  "motion-transition-hover": {
+    "key": "{motion.transition.hover}",
+    "$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"],
+    "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."
+  },
+  "motion-transition-stateChange": {
+    "key": "{motion.transition.stateChange}",
+    "$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"],
+    "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."
+  }
+}

package/dist/docs/functional/spacing/space.json

@@ -0,0 +1,224 @@
+{
+  "space-lg": {
+    "key": "{space.lg}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["gap", "padding", "margin", "section-gap", "container-margin"],
+        "rules": "Spacious (16px). Use for major layout divisions, visual separation between content blocks, and primary container margins."
+      },
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["gap"]
+      }
+    },
+    "filePath": "src/tokens/functional/spacing/space.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.size.16}",
+      "$type": "dimension",
+      "$description": "Spacious spacing for major layout divisions and visual separation between content blocks.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["gap", "padding", "margin", "section-gap", "container-margin"],
+          "rules": "Spacious (16px). Use for major layout divisions, visual separation between content blocks, and primary container margins."
+        },
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["gap"]
+        }
+      },
+      "key": "{space.lg}"
+    },
+    "name": "space-lg",
+    "attributes": {},
+    "path": ["space", "lg"],
+    "value": "1rem",
+    "type": "dimension",
+    "description": "Spacious spacing for major layout divisions and visual separation between content blocks."
+  },
+  "space-md": {
+    "key": "{space.md}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["gap", "padding", "margin", "panel-padding", "section-separation"],
+        "rules": "Relaxed (12px). Use for comfortable container padding, relaxed layouts, section separators, and breathing room in dense layouts."
+      },
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["gap"]
+      }
+    },
+    "filePath": "src/tokens/functional/spacing/space.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.size.12}",
+      "$type": "dimension",
+      "$description": "Relaxed spacing for breathing room and comfortable internal container space.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["gap", "padding", "margin", "panel-padding", "section-separation"],
+          "rules": "Relaxed (12px). Use for comfortable container padding, relaxed layouts, section separators, and breathing room in dense layouts."
+        },
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["gap"]
+        }
+      },
+      "key": "{space.md}"
+    },
+    "name": "space-md",
+    "attributes": {},
+    "path": ["space", "md"],
+    "value": "0.75rem",
+    "type": "dimension",
+    "description": "Relaxed spacing for breathing room and comfortable internal container space."
+  },
+  "space-sm": {
+    "key": "{space.sm}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["gap", "padding", "margin", "flex-gap", "grid-gap", "card-padding"],
+        "rules": "Default (8px). Use for standard component spacing, flex/grid item separation, container padding, and most element margins."
+      },
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["gap"]
+      }
+    },
+    "filePath": "src/tokens/functional/spacing/space.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.size.8}",
+      "$type": "dimension",
+      "$description": "Default spacing for most UI elements. Comfortable visual density for standard component layouts.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["gap", "padding", "margin", "flex-gap", "grid-gap", "card-padding"],
+          "rules": "Default (8px). Use for standard component spacing, flex/grid item separation, container padding, and most element margins."
+        },
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["gap"]
+        }
+      },
+      "key": "{space.sm}"
+    },
+    "name": "space-sm",
+    "attributes": {},
+    "path": ["space", "sm"],
+    "value": "0.5rem",
+    "type": "dimension",
+    "description": "Default spacing for most UI elements. Comfortable visual density for standard component layouts."
+  },
+  "space-xl": {
+    "key": "{space.xl}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["gap", "padding", "margin", "page-sections", "major-divisions"],
+        "rules": "Expansive (24px). Use for large section separation, top-level layout structure, major page divisions, and expansive breathing room."
+      },
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["gap"]
+      }
+    },
+    "filePath": "src/tokens/functional/spacing/space.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.size.24}",
+      "$type": "dimension",
+      "$description": "Expansive spacing for large sections and top-level structure separation.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["gap", "padding", "margin", "page-sections", "major-divisions"],
+          "rules": "Expansive (24px). Use for large section separation, top-level layout structure, major page divisions, and expansive breathing room."
+        },
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["gap"]
+        }
+      },
+      "key": "{space.xl}"
+    },
+    "name": "space-xl",
+    "attributes": {},
+    "path": ["space", "xl"],
+    "value": "1.5rem",
+    "type": "dimension",
+    "description": "Expansive spacing for large sections and top-level structure separation."
+  },
+  "space-xs": {
+    "key": "{space.xs}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["gap", "padding", "margin", "badge-spacing", "list-items"],
+        "rules": "Compact (4px). Use for small component spacing, tight list separations, badge padding, and minimal internal margins."
+      },
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["gap"]
+      }
+    },
+    "filePath": "src/tokens/functional/spacing/space.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.size.4}",
+      "$type": "dimension",
+      "$description": "Compact spacing for small badges, tight internal spacing, and minimal breathing room.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["gap", "padding", "margin", "badge-spacing", "list-items"],
+          "rules": "Compact (4px). Use for small component spacing, tight list separations, badge padding, and minimal internal margins."
+        },
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["gap"]
+        }
+      },
+      "key": "{space.xs}"
+    },
+    "name": "space-xs",
+    "attributes": {},
+    "path": ["space", "xs"],
+    "value": "0.25rem",
+    "type": "dimension",
+    "description": "Compact spacing for small badges, tight internal spacing, and minimal breathing room."
+  },
+  "space-xxs": {
+    "key": "{space.xxs}",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["gap", "padding", "margin", "form-separators"],
+        "rules": "Ultra-compact (2px). Use for form field separators, tight dividers, and minimal breathing room between small elements."
+      },
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["gap"]
+      }
+    },
+    "filePath": "src/tokens/functional/spacing/space.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.size.2}",
+      "$type": "dimension",
+      "$description": "Ultra-compact spacing for form field separators and tight visual divisions.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["gap", "padding", "margin", "form-separators"],
+          "rules": "Ultra-compact (2px). Use for form field separators, tight dividers, and minimal breathing room between small elements."
+        },
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["gap"]
+        }
+      },
+      "key": "{space.xxs}"
+    },
+    "name": "space-xxs",
+    "attributes": {},
+    "path": ["space", "xxs"],
+    "value": "0.125rem",
+    "type": "dimension",
+    "description": "Ultra-compact spacing for form field separators and tight visual divisions."
+  }
+}