@oddkin/components 0.0.0-stage → 1.0.0-beta.0

package/agent/references/stylesheets/layout.md

@@ -0,0 +1,17 @@
+# Stylesheet layout
+
+Id `stylesheet:layout`. Import `@oddkin/components/css/layout.css` once per document; its rules are in the `odd.layout` layer.
+
+Page-author layout classes generated from the same helpers as recipes, with an override property per option (`--odd-stack-gap`, `--odd-split-side-width`, …) defaulting to the theme's layout roles: `.odd-stack` (`-tight`, `-loose`), `.odd-row` (`-between`), `.odd-cluster`, `.odd-grid`, `.odd-auto-grid` (`-fit`), `.odd-split` (`-end`), `.odd-box` (`-none`, `-roomy`), `.odd-center`, and `.odd-aspect-ratio`.
+
+## Classes
+
+`.odd-aspect-ratio`, `.odd-auto-grid`, `.odd-auto-grid-fit`, `.odd-box`, `.odd-box-none`, `.odd-box-roomy`, `.odd-center`, `.odd-cluster`, `.odd-grid`, `.odd-row`, `.odd-row-between`, `.odd-split`, `.odd-split-end`, `.odd-stack`, `.odd-stack-loose`, `.odd-stack-tight`
+
+## Variables an author may set
+
+`--odd-aspect-ratio`, `--odd-auto-grid-gap`, `--odd-auto-grid-min`, `--odd-box-inset`, `--odd-cluster-gap`, `--odd-grid-columns`, `--odd-grid-gap`, `--odd-row-gap`, `--odd-split-gap`, `--odd-split-main-min`, `--odd-split-side-width`, `--odd-stack-gap`
+
+## Tokens read
+
+`layout.gap`, `layout.inset`, `layout.item-min`, `layout.main-min`, `layout.sidebar-width`, `space.lg`, `space.none`, `space.xl`, `space.xs`

package/agent/references/stylesheets/link.md

@@ -0,0 +1,13 @@
+# Stylesheet link
+
+Id `stylesheet:link`. Import `@oddkin/components/css/link.css` once per document; its rules are in the `odd.components` layer.
+
+`a.odd-link`: link colour, an underline on hover, and the shared keyboard focus ring.
+
+## Classes
+
+`.odd-link`
+
+## Tokens read
+
+`color.focus.ring`, `color.link`, `focus.offset`, `focus.width`, `radius.sm`, `type.ui.family`, `type.ui.line-height`, `type.ui.size`, `type.ui.weight`

package/agent/references/stylesheets/list.md

@@ -0,0 +1,13 @@
+# Stylesheet list
+
+Id `stylesheet:list`. Import `@oddkin/components/css/list.css` once per document; its rules are in the `odd.components` layer.
+
+`ul.odd-list` / `ol.odd-list`: rows on a bordered surface, divided by rules; `.odd-list-meta` for secondary text; the item with `aria-current` takes the selection colours.
+
+## Classes
+
+`.odd-list`, `.odd-list-meta`
+
+## Tokens read
+
+`border.width.default`, `border.width.strong`, `card.radius`, `color.border.default`, `color.selection.background`, `color.selection.foreground`, `color.surface.default`, `color.text.primary`, `color.text.secondary`, `space.md`, `space.sm`, `target.min`, `type.ui.family`, `type.ui.line-height`, `type.ui.size`, `type.ui.weight`

package/agent/references/stylesheets/reset.md

@@ -0,0 +1,5 @@
+# Stylesheet reset
+
+Id `stylesheet:reset`. Import `@oddkin/components/css/reset.css` once per document; its rules are in the `odd.reset` layer.
+
+A focused reset that keeps inherited typography, direction, and user preferences.

package/agent/references/stylesheets/stepper.md

@@ -0,0 +1,13 @@
+# Stylesheet stepper
+
+Id `stylesheet:stepper`. Import `@oddkin/components/css/stepper.css` once per document; its rules are in the `odd.components` layer.
+
+`ol.odd-stepper`: the steps of a task, each an `li` holding an `odd-status-marker` (a number, or complete or failed) and its words (`<div><a href>Name</a><span>Complete</span></div>`). The current step has `aria-current="step"` (on the `li` or its link) and the action colours; a failed step's words take the danger colour. Step links keep the text colour and their underline. Steps sit in a row and stack at 36rem of the list.
+
+## Classes
+
+`.odd-stepper`
+
+## Tokens read
+
+`color.action.default`, `color.danger.foreground`, `color.text.on-action`, `color.text.primary`, `color.text.secondary`, `space.2xs`, `space.sm`, `space.xs`, `type.small.family`, `type.small.line-height`, `type.small.size`, `type.small.weight`, `type.ui.family`, `type.ui.line-height`, `type.ui.size`, `type.ui.weight`

package/agent/references/stylesheets/table.md

@@ -0,0 +1,13 @@
+# Stylesheet table
+
+Id `stylesheet:table`. Import `@oddkin/components/css/table.css` once per document; its rules are in the `odd.components` layer.
+
+`table.odd-table`: a native table on a bordered surface; header cells on the sunken surface, rows divided by rules, `aria-sort` headers in the primary colour, and a row holding a checked checkbox in the selection colours.
+
+## Classes
+
+`.odd-table`
+
+## Tokens read
+
+`border.width.default`, `card.radius`, `color.border.default`, `color.selection.background`, `color.selection.foreground`, `color.surface.default`, `color.surface.sunken`, `color.text.primary`, `color.text.secondary`, `font.weight.medium`, `space.md`, `space.sm`, `space.xs`, `type.ui.family`, `type.ui.line-height`, `type.ui.size`, `type.ui.weight`

package/agent/references/stylesheets/timeline.md

@@ -0,0 +1,13 @@
+# Stylesheet timeline
+
+Id `stylesheet:timeline`. Import `@oddkin/components/css/timeline.css` once per document; its rules are in the `odd.components` layer.
+
+`ol.odd-timeline`: events newest first, each an `li` holding an `odd-status-marker` and its content (`<li><odd-status-marker status="complete"></odd-status-marker><div>title, time, detail</div></li>`). Markers sit on a rail joined by a connector; the title takes the UI role (the danger colour when the event failed), the time and detail the small secondary role.
+
+## Classes
+
+`.odd-timeline`
+
+## Tokens read
+
+`border.width.default`, `color.border.default`, `color.danger.foreground`, `color.danger.surface`, `color.selection.foreground`, `color.selection.surface`, `color.surface.sunken`, `color.text.primary`, `color.text.secondary`, `icon.size.lg`, `space.2xs`, `space.md`, `space.sm`, `type.small.family`, `type.small.line-height`, `type.small.size`, `type.small.weight`, `type.ui.family`, `type.ui.line-height`, `type.ui.size`, `type.ui.weight`

package/agent/references/stylesheets/typography.md

@@ -0,0 +1,13 @@
+# Stylesheet typography
+
+Id `stylesheet:typography`. Import `@oddkin/components/css/typography.css` once per document; its rules are in the `odd.components` layer.
+
+`.odd-type-<role>`: the eight type roles (`display`, `title`, `section`, `body`, `ui`, `small`, `eyebrow`, `code`) on any element; native `h1`–`h6` and `p` keep their semantics.
+
+## Classes
+
+`.odd-type-body`, `.odd-type-code`, `.odd-type-display`, `.odd-type-eyebrow`, `.odd-type-section`, `.odd-type-small`, `.odd-type-title`, `.odd-type-ui`
+
+## Tokens read
+
+`color.text.secondary`, `type.body.family`, `type.body.letter-spacing`, `type.body.line-height`, `type.body.size`, `type.body.weight`, `type.code.family`, `type.code.letter-spacing`, `type.code.line-height`, `type.code.size`, `type.code.weight`, `type.display.family`, `type.display.letter-spacing`, `type.display.line-height`, `type.display.size`, `type.display.weight`, `type.eyebrow.family`, `type.eyebrow.letter-spacing`, `type.eyebrow.line-height`, `type.eyebrow.size`, `type.eyebrow.weight`, `type.section.family`, `type.section.letter-spacing`, `type.section.line-height`, `type.section.size`, `type.section.weight`, `type.small.family`, `type.small.letter-spacing`, `type.small.line-height`, `type.small.size`, `type.small.weight`, `type.title.family`, `type.title.letter-spacing`, `type.title.line-height`, `type.title.size`, `type.title.weight`, `type.ui.family`, `type.ui.letter-spacing`, `type.ui.line-height`, `type.ui.size`, `type.ui.weight`

package/agent/references/stylesheets/utilities.md

@@ -0,0 +1,13 @@
+# Stylesheet utilities
+
+Id `stylesheet:utilities`. Import `@oddkin/components/css/utilities.css` once per document; its rules are in the `odd.utilities` layer.
+
+Page-level utilities with the same rules as the shadow-root primitives.
+
+## Classes
+
+`.odd-focus-ring`, `.odd-visually-hidden`
+
+## Tokens read
+
+`color.focus.ring`, `focus.offset`, `focus.width`

package/agent/references/tokens/component.md

@@ -0,0 +1,13 @@
+# Tokens: component
+
+Theme `default`, modes light, dark. From the theme's token inspection.
+
+| Token | CSS variable | Type | Value | Defined as | Origin |
+| --- | --- | --- | --- | --- | --- |
+| `card.padding` | `--odd-card-padding` | dimension | 1.5rem | alias of `layout.inset` | preset |
+| `card.radius` | `--odd-card-radius` | dimension | 0.75rem | alias of `radius.lg` | preset |
+| `navigation.indent` | `--odd-navigation-indent` | dimension | 1rem | alias of `space.md` | preset |
+| `navigation.item.gap` | `--odd-navigation-item-gap` | dimension | 0.5rem | alias of `space.xs` | preset |
+| `navigation.item.min-height` | `--odd-navigation-item-min-height` | dimension | 2.5rem | alias of `control.height.md` | preset |
+| `navigation.item.padding.block` | `--odd-navigation-item-padding-block` | dimension | 0.5rem | alias of `space.xs` | preset |
+| `navigation.item.padding.inline` | `--odd-navigation-item-padding-inline` | dimension | 0.75rem | alias of `space.sm` | preset |

package/agent/references/tokens/foundation.md

@@ -0,0 +1,73 @@
+# Tokens: foundation
+
+Theme `default`, modes light, dark. From the theme's token inspection.
+
+| Token | CSS variable | Type | Value | Defined as | Origin |
+| --- | --- | --- | --- | --- | --- |
+| `border.width.default` | `--odd-border-width-default` | dimension | 1px | 1px | preset |
+| `border.width.strong` | `--odd-border-width-strong` | dimension | 2px | 2px | preset |
+| `elevation.lg` | `--odd-elevation-lg` | shadow | light: 0 4px 8px rgb(0 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.14); dark: 0 4px 8px rgb(0 0 0 / 0.32), 0 12px 32px rgb(0 0 0 / 0.48) | light: 0 4px 8px rgb(0 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.14); dark: 0 4px 8px rgb(0 0 0 / 0.32), 0 12px 32px rgb(0 0 0 / 0.48) | preset |
+| `elevation.md` | `--odd-elevation-md` | shadow | light: 0 1px 2px rgb(0 0 0 / 0.12), 0 4px 12px rgb(0 0 0 / 0.08); dark: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.32) | light: 0 1px 2px rgb(0 0 0 / 0.12), 0 4px 12px rgb(0 0 0 / 0.08); dark: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.32) | preset |
+| `elevation.none` | `--odd-elevation-none` | shadow | none | none | preset |
+| `elevation.sm` | `--odd-elevation-sm` | shadow | light: 0 1px 2px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.08); dark: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.3) | light: 0 1px 2px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.08); dark: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.3) | preset |
+| `elevation.xl` | `--odd-elevation-xl` | shadow | light: 0 8px 16px rgb(0 0 0 / 0.1), 0 24px 64px rgb(0 0 0 / 0.2); dark: 0 8px 16px rgb(0 0 0 / 0.4), 0 24px 64px rgb(0 0 0 / 0.6) | light: 0 8px 16px rgb(0 0 0 / 0.1), 0 24px 64px rgb(0 0 0 / 0.2); dark: 0 8px 16px rgb(0 0 0 / 0.4), 0 24px 64px rgb(0 0 0 / 0.6) | preset |
+| `focus.offset` | `--odd-focus-offset` | dimension | 2px | 2px | preset |
+| `focus.width` | `--odd-focus-width` | dimension | 2px | 2px | preset |
+| `font.family.display` | `--odd-font-family-display` | fontFamily | system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | alias of `font.family.sans` | preset |
+| `font.family.mono` | `--odd-font-family-mono` | fontFamily | ui-monospace, SFMono-Regular, Menlo, Consolas, monospace | ui-monospace, SFMono-Regular, Menlo, Consolas, monospace | preset |
+| `font.family.sans` | `--odd-font-family-sans` | fontFamily | system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | preset |
+| `font.size.2xl` | `--odd-font-size-2xl` | dimension | 1.5rem | 1.5rem | preset |
+| `font.size.3xl` | `--odd-font-size-3xl` | dimension | 1.875rem | 1.875rem | preset |
+| `font.size.4xl` | `--odd-font-size-4xl` | dimension | 2.25rem | 2.25rem | preset |
+| `font.size.lg` | `--odd-font-size-lg` | dimension | 1.125rem | 1.125rem | preset |
+| `font.size.md` | `--odd-font-size-md` | dimension | 1rem | 1rem | preset |
+| `font.size.sm` | `--odd-font-size-sm` | dimension | 0.875rem | 0.875rem | preset |
+| `font.size.xl` | `--odd-font-size-xl` | dimension | 1.25rem | 1.25rem | preset |
+| `font.size.xs` | `--odd-font-size-xs` | dimension | 0.75rem | 0.75rem | preset |
+| `font.weight.bold` | `--odd-font-weight-bold` | fontWeight | 700 | 700 | preset |
+| `font.weight.medium` | `--odd-font-weight-medium` | fontWeight | 500 | 500 | preset |
+| `font.weight.regular` | `--odd-font-weight-regular` | fontWeight | 400 | 400 | preset |
+| `font.weight.semibold` | `--odd-font-weight-semibold` | fontWeight | 600 | 600 | preset |
+| `icon.size.lg` | `--odd-icon-size-lg` | dimension | 1.5rem | 1.5rem | preset |
+| `icon.size.md` | `--odd-icon-size-md` | dimension | 1.25rem | 1.25rem | preset |
+| `icon.size.sm` | `--odd-icon-size-sm` | dimension | 1rem | 1rem | preset |
+| `letter-spacing.normal` | `--odd-letter-spacing-normal` | dimension | 0 | 0 | preset |
+| `letter-spacing.tight` | `--odd-letter-spacing-tight` | dimension | -0.025em | -0.025em | preset |
+| `letter-spacing.wide` | `--odd-letter-spacing-wide` | dimension | 0.05em | 0.05em | preset |
+| `line-height.none` | `--odd-line-height-none` | number | 1 | 1 | preset |
+| `line-height.normal` | `--odd-line-height-normal` | number | 1.5 | 1.5 | preset |
+| `line-height.relaxed` | `--odd-line-height-relaxed` | number | 1.625 | 1.625 | preset |
+| `line-height.snug` | `--odd-line-height-snug` | number | 1.375 | 1.375 | preset |
+| `line-height.tight` | `--odd-line-height-tight` | number | 1.25 | 1.25 | preset |
+| `motion.duration.fast` | `--odd-motion-duration-fast` | duration | 100ms | 100ms | preset |
+| `motion.duration.normal` | `--odd-motion-duration-normal` | duration | 200ms | 200ms | preset |
+| `motion.duration.slow` | `--odd-motion-duration-slow` | duration | 300ms | 300ms | preset |
+| `motion.duration.slower` | `--odd-motion-duration-slower` | duration | 500ms | 500ms | preset |
+| `motion.easing.enter` | `--odd-motion-easing-enter` | cubicBezier | cubic-bezier(0, 0, 0.2, 1) | cubic-bezier(0, 0, 0.2, 1) | preset |
+| `motion.easing.exit` | `--odd-motion-easing-exit` | cubicBezier | cubic-bezier(0.4, 0, 1, 1) | cubic-bezier(0.4, 0, 1, 1) | preset |
+| `motion.easing.linear` | `--odd-motion-easing-linear` | cubicBezier | cubic-bezier(0, 0, 1, 1) | cubic-bezier(0, 0, 1, 1) | preset |
+| `motion.easing.standard` | `--odd-motion-easing-standard` | cubicBezier | cubic-bezier(0.4, 0, 0.2, 1) | cubic-bezier(0.4, 0, 0.2, 1) | preset |
+| `radius.2xl` | `--odd-radius-2xl` | dimension | 1.5rem | 1.5rem | preset |
+| `radius.full` | `--odd-radius-full` | dimension | 9999px | 9999px | preset |
+| `radius.lg` | `--odd-radius-lg` | dimension | 0.75rem | 0.75rem | preset |
+| `radius.md` | `--odd-radius-md` | dimension | 0.5rem | 0.5rem | preset |
+| `radius.none` | `--odd-radius-none` | dimension | 0 | 0 | preset |
+| `radius.sm` | `--odd-radius-sm` | dimension | 0.25rem | 0.25rem | preset |
+| `radius.xl` | `--odd-radius-xl` | dimension | 1rem | 1rem | preset |
+| `radius.xs` | `--odd-radius-xs` | dimension | 0.125rem | 0.125rem | preset |
+| `space.2xl` | `--odd-space-2xl` | dimension | 3rem | 3rem | preset |
+| `space.2xs` | `--odd-space-2xs` | dimension | 0.25rem | 0.25rem | preset |
+| `space.3xl` | `--odd-space-3xl` | dimension | 4rem | 4rem | preset |
+| `space.3xs` | `--odd-space-3xs` | dimension | 0.125rem | 0.125rem | preset |
+| `space.4xl` | `--odd-space-4xl` | dimension | 6rem | 6rem | preset |
+| `space.lg` | `--odd-space-lg` | dimension | 1.5rem | 1.5rem | preset |
+| `space.md` | `--odd-space-md` | dimension | 1rem | 1rem | preset |
+| `space.none` | `--odd-space-none` | dimension | 0 | 0 | preset |
+| `space.sm` | `--odd-space-sm` | dimension | 0.75rem | 0.75rem | preset |
+| `space.xl` | `--odd-space-xl` | dimension | 2rem | 2rem | preset |
+| `space.xs` | `--odd-space-xs` | dimension | 0.5rem | 0.5rem | preset |
+| `target.min` | `--odd-target-min` | dimension | 1.5rem | 1.5rem | preset |
+| `z-index.base` | `--odd-z-index-base` | number | 0 | 0 | preset |
+| `z-index.overlay` | `--odd-z-index-overlay` | number | 200 | 200 | preset |
+| `z-index.raised` | `--odd-z-index-raised` | number | 1 | 1 | preset |
+| `z-index.sticky` | `--odd-z-index-sticky` | number | 100 | 100 | preset |

package/agent/references/tokens/layout.md

@@ -0,0 +1,12 @@
+# Tokens: layout
+
+Theme `default`, modes light, dark. From the theme's token inspection.
+
+| Token | CSS variable | Type | Value | Defined as | Origin |
+| --- | --- | --- | --- | --- | --- |
+| `layout.gap` | `--odd-layout-gap` | dimension | 1rem | alias of `space.md` | preset |
+| `layout.inset` | `--odd-layout-inset` | dimension | 1.5rem | alias of `space.lg` | preset |
+| `layout.item-min` | `--odd-layout-item-min` | dimension | 16rem | 16rem | preset |
+| `layout.main-min` | `--odd-layout-main-min` | dimension | 20rem | 20rem | preset |
+| `layout.measure` | `--odd-layout-measure` | dimension | 40rem | 40rem | preset |
+| `layout.sidebar-width` | `--odd-layout-sidebar-width` | dimension | 16rem | 16rem | preset |

package/agent/references/tokens/reference.md

@@ -0,0 +1,74 @@
+# Tokens: reference
+
+Theme `default`, modes light, dark. From the theme's token inspection.
+
+| Token | CSS variable | Type | Value | Defined as | Origin |
+| --- | --- | --- | --- | --- | --- |
+| `ref.brand.50` | `--odd-ref-brand-50` | color | #f3f4ff | #f3f4ff | generated |
+| `ref.brand.100` | `--odd-ref-brand-100` | color | #e7e9ff | #e7e9ff | generated |
+| `ref.brand.200` | `--odd-ref-brand-200` | color | #d0d4ff | #d0d4ff | generated |
+| `ref.brand.300` | `--odd-ref-brand-300` | color | #b2b6ff | #b2b6ff | generated |
+| `ref.brand.400` | `--odd-ref-brand-400` | color | #9393ff | #9393ff | generated |
+| `ref.brand.500` | `--odd-ref-brand-500` | color | #776cff | #776cff | generated |
+| `ref.brand.600` | `--odd-ref-brand-600` | color | #624fe7 | #624fe7 | generated |
+| `ref.brand.700` | `--odd-ref-brand-700` | color | #4d3bc0 | #4d3bc0 | generated |
+| `ref.brand.800` | `--odd-ref-brand-800` | color | #3a2b95 | #3a2b95 | generated |
+| `ref.brand.900` | `--odd-ref-brand-900` | color | #281c6c | #281c6c | generated |
+| `ref.brand.950` | `--odd-ref-brand-950` | color | #160e46 | #160e46 | generated |
+| `ref.danger.50` | `--odd-ref-danger-50` | color | #fff2f0 | #fff2f0 | generated |
+| `ref.danger.100` | `--odd-ref-danger-100` | color | #ffe4e0 | #ffe4e0 | generated |
+| `ref.danger.200` | `--odd-ref-danger-200` | color | #ffc8c1 | #ffc8c1 | generated |
+| `ref.danger.300` | `--odd-ref-danger-300` | color | #ffa196 | #ffa196 | generated |
+| `ref.danger.400` | `--odd-ref-danger-400` | color | #f97165 | #f97165 | generated |
+| `ref.danger.500` | `--odd-ref-danger-500` | color | #e6443d | #e6443d | generated |
+| `ref.danger.600` | `--odd-ref-danger-600` | color | #c92324 | #c92324 | generated |
+| `ref.danger.700` | `--odd-ref-danger-700` | color | #a50e15 | #a50e15 | generated |
+| `ref.danger.800` | `--odd-ref-danger-800` | color | #80070d | #80070d | generated |
+| `ref.danger.900` | `--odd-ref-danger-900` | color | #5c0206 | #5c0206 | generated |
+| `ref.danger.950` | `--odd-ref-danger-950` | color | #3a0002 | #3a0002 | generated |
+| `ref.info.50` | `--odd-ref-info-50` | color | #ecf7ff | #ecf7ff | generated |
+| `ref.info.100` | `--odd-ref-info-100` | color | #daeffe | #daeffe | generated |
+| `ref.info.200` | `--odd-ref-info-200` | color | #b7ddf9 | #b7ddf9 | generated |
+| `ref.info.300` | `--odd-ref-info-300` | color | #86c6f3 | #86c6f3 | generated |
+| `ref.info.400` | `--odd-ref-info-400` | color | #53abe4 | #53abe4 | generated |
+| `ref.info.500` | `--odd-ref-info-500` | color | #0a8fd1 | #0a8fd1 | generated |
+| `ref.info.600` | `--odd-ref-info-600` | color | #0076af | #0076af | generated |
+| `ref.info.700` | `--odd-ref-info-700` | color | #005e8c | #005e8c | generated |
+| `ref.info.800` | `--odd-ref-info-800` | color | #00476c | #00476c | generated |
+| `ref.info.900` | `--odd-ref-info-900` | color | #00314c | #00314c | generated |
+| `ref.info.950` | `--odd-ref-info-950` | color | #001d2f | #001d2f | generated |
+| `ref.neutral.0` | `--odd-ref-neutral-0` | color | #ffffff | #ffffff | preset |
+| `ref.neutral.50` | `--odd-ref-neutral-50` | color | #f5f5f6 | #f5f5f6 | generated |
+| `ref.neutral.100` | `--odd-ref-neutral-100` | color | #ebebed | #ebebed | generated |
+| `ref.neutral.200` | `--odd-ref-neutral-200` | color | #d7d7db | #d7d7db | generated |
+| `ref.neutral.300` | `--odd-ref-neutral-300` | color | #bcbdc4 | #bcbdc4 | generated |
+| `ref.neutral.400` | `--odd-ref-neutral-400` | color | #a0a1a9 | #a0a1a9 | generated |
+| `ref.neutral.500` | `--odd-ref-neutral-500` | color | #84858f | #84858f | generated |
+| `ref.neutral.600` | `--odd-ref-neutral-600` | color | #6d6e77 | #6d6e77 | generated |
+| `ref.neutral.700` | `--odd-ref-neutral-700` | color | #565760 | #565760 | generated |
+| `ref.neutral.800` | `--odd-ref-neutral-800` | color | #414248 | #414248 | generated |
+| `ref.neutral.900` | `--odd-ref-neutral-900` | color | #2d2d32 | #2d2d32 | generated |
+| `ref.neutral.950` | `--odd-ref-neutral-950` | color | #1a1a1e | #1a1a1e | generated |
+| `ref.neutral.1000` | `--odd-ref-neutral-1000` | color | #000000 | #000000 | preset |
+| `ref.success.50` | `--odd-ref-success-50` | color | #edf9ef | #edf9ef | generated |
+| `ref.success.100` | `--odd-ref-success-100` | color | #dcf2e0 | #dcf2e0 | generated |
+| `ref.success.200` | `--odd-ref-success-200` | color | #bce3c3 | #bce3c3 | generated |
+| `ref.success.300` | `--odd-ref-success-300` | color | #90d09d | #90d09d | generated |
+| `ref.success.400` | `--odd-ref-success-400` | color | #61b876 | #61b876 | generated |
+| `ref.success.500` | `--odd-ref-success-500` | color | #2e9e52 | #2e9e52 | generated |
+| `ref.success.600` | `--odd-ref-success-600` | color | #00853c | #00853c | generated |
+| `ref.success.700` | `--odd-ref-success-700` | color | #006b2e | #006b2e | generated |
+| `ref.success.800` | `--odd-ref-success-800` | color | #005121 | #005121 | generated |
+| `ref.success.900` | `--odd-ref-success-900` | color | #003915 | #003915 | generated |
+| `ref.success.950` | `--odd-ref-success-950` | color | #00220a | #00220a | generated |
+| `ref.warning.50` | `--odd-ref-warning-50` | color | #fcf4e8 | #fcf4e8 | generated |
+| `ref.warning.100` | `--odd-ref-warning-100` | color | #f9e9d3 | #f9e9d3 | generated |
+| `ref.warning.200` | `--odd-ref-warning-200` | color | #efd3ac | #efd3ac | generated |
+| `ref.warning.300` | `--odd-ref-warning-300` | color | #e3b575 | #e3b575 | generated |
+| `ref.warning.400` | `--odd-ref-warning-400` | color | #d09538 | #d09538 | generated |
+| `ref.warning.500` | `--odd-ref-warning-500` | color | #b37900 | #b37900 | generated |
+| `ref.warning.600` | `--odd-ref-warning-600` | color | #956300 | #956300 | generated |
+| `ref.warning.700` | `--odd-ref-warning-700` | color | #774f00 | #774f00 | generated |
+| `ref.warning.800` | `--odd-ref-warning-800` | color | #5b3b00 | #5b3b00 | generated |
+| `ref.warning.900` | `--odd-ref-warning-900` | color | #402800 | #402800 | generated |
+| `ref.warning.950` | `--odd-ref-warning-950` | color | #271700 | #271700 | generated |

package/agent/references/tokens/semantic.md

@@ -0,0 +1,91 @@
+# Tokens: semantic
+
+Theme `default`, modes light, dark. From the theme's token inspection.
+
+| Token | CSS variable | Type | Value | Defined as | Origin |
+| --- | --- | --- | --- | --- | --- |
+| `color.accent.decorative` | `--odd-color-accent-decorative` | color | #dfedaa | #dfedaa | preset |
+| `color.action.default` | `--odd-color-action-default` | color | light: #6250e8; dark: #b4a8ff | light: #6250e8; dark: #b4a8ff | overridden |
+| `color.action.hover` | `--odd-color-action-hover` | color | light: #5140cc; dark: #c5bcff | light: #5140cc; dark: #c5bcff | overridden |
+| `color.action.pressed` | `--odd-color-action-pressed` | color | light: #4333ad; dark: #9b8cf0 | light: #4333ad; dark: #9b8cf0 | overridden |
+| `color.border.default` | `--odd-color-border-default` | color | light: #d9d8e1; dark: #555368 | light: #d9d8e1; dark: #555368 | overridden |
+| `color.border.strong` | `--odd-color-border-strong` | color | light: #868997; dark: #858395 | light: #868997; dark: #858395 | overridden |
+| `color.canvas` | `--odd-color-canvas` | color | light: #f6f5f1; dark: #171821 | light: #f6f5f1; dark: #171821 | overridden |
+| `color.danger.border` | `--odd-color-danger-border` | color | light: #ffc8c1; dark: #80070d | light: {ref.danger.200}; dark: {ref.danger.800} | preset |
+| `color.danger.foreground` | `--odd-color-danger-foreground` | color | light: #b4233a; dark: #ff9bab | light: #b4233a; dark: #ff9bab | overridden |
+| `color.danger.surface` | `--odd-color-danger-surface` | color | light: #fff0f2; dark: #3d202a | light: #fff0f2; dark: #3d202a | overridden |
+| `color.focus.ring` | `--odd-color-focus-ring` | color | light: #6250e8; dark: #b4a8ff | alias of `color.action.default` | overridden |
+| `color.info.border` | `--odd-color-info-border` | color | light: #b7ddf9; dark: #00476c | light: {ref.info.200}; dark: {ref.info.800} | preset |
+| `color.info.foreground` | `--odd-color-info-foreground` | color | light: #0076af; dark: #53abe4 | light: {ref.info.600}; dark: {ref.info.400} | generated |
+| `color.info.surface` | `--odd-color-info-surface` | color | light: #ecf7ff; dark: #001d2f | light: {ref.info.50}; dark: {ref.info.950} | preset |
+| `color.link` | `--odd-color-link` | color | light: #6250e8; dark: #b4a8ff | alias of `color.action.default` | overridden |
+| `color.neutral.border` | `--odd-color-neutral-border` | color | light: #d9d8e1; dark: #555368 | alias of `color.border.default` | preset |
+| `color.neutral.foreground` | `--odd-color-neutral-foreground` | color | light: #5f626f; dark: #bdbbcd | alias of `color.text.secondary` | preset |
+| `color.neutral.surface` | `--odd-color-neutral-surface` | color | light: #f0eff3; dark: #111219 | alias of `color.surface.sunken` | preset |
+| `color.scrim` | `--odd-color-scrim` | color | light: rgb(0 0 0 / 0.4); dark: rgb(0 0 0 / 0.6) | light: rgb(0 0 0 / 0.4); dark: rgb(0 0 0 / 0.6) | preset |
+| `color.selection.background` | `--odd-color-selection-background` | color | light: #6250e8; dark: #b4a8ff | alias of `color.action.default` | preset |
+| `color.selection.foreground` | `--odd-color-selection-foreground` | color | light: #ffffff; dark: #23252b | alias of `color.text.on-action` | preset |
+| `color.selection.surface` | `--odd-color-selection-surface` | color | light: #e7e9ff; dark: #281c6c | light: {ref.brand.100}; dark: {ref.brand.900} | preset |
+| `color.success.border` | `--odd-color-success-border` | color | light: #bce3c3; dark: #005121 | light: {ref.success.200}; dark: {ref.success.800} | preset |
+| `color.success.foreground` | `--odd-color-success-foreground` | color | light: #267653; dark: #8fd6b3 | light: #267653; dark: #8fd6b3 | overridden |
+| `color.success.surface` | `--odd-color-success-surface` | color | light: #eaf6ef; dark: #1c352b | light: #eaf6ef; dark: #1c352b | overridden |
+| `color.surface.default` | `--odd-color-surface-default` | color | light: #ffffff; dark: #242631 | light: {ref.neutral.0}; dark: #242631 | overridden |
+| `color.surface.hover` | `--odd-color-surface-hover` | color | light: #f0eff5; dark: #30323f | light: #f0eff5; dark: #30323f | overridden |
+| `color.surface.raised` | `--odd-color-surface-raised` | color | light: #ffffff; dark: #2d2f3b | light: {ref.neutral.0}; dark: #2d2f3b | overridden |
+| `color.surface.specimen` | `--odd-color-surface-specimen` | color | light: #efedfc; dark: #29263d | light: #efedfc; dark: #29263d | overridden |
+| `color.surface.sunken` | `--odd-color-surface-sunken` | color | light: #f0eff3; dark: #111219 | light: #f0eff3; dark: #111219 | overridden |
+| `color.text.disabled` | `--odd-color-text-disabled` | color | light: #767985; dark: #858393 | light: #767985; dark: #858393 | overridden |
+| `color.text.on-action` | `--odd-color-text-on-action` | color | light: #ffffff; dark: #23252b | light: {ref.neutral.0}; dark: #23252b | overridden |
+| `color.text.primary` | `--odd-color-text-primary` | color | light: #23252b; dark: #f5f3fd | light: #23252b; dark: #f5f3fd | overridden |
+| `color.text.secondary` | `--odd-color-text-secondary` | color | light: #5f626f; dark: #bdbbcd | light: #5f626f; dark: #bdbbcd | overridden |
+| `color.warning.border` | `--odd-color-warning-border` | color | light: #efd3ac; dark: #5b3b00 | light: {ref.warning.200}; dark: {ref.warning.800} | preset |
+| `color.warning.foreground` | `--odd-color-warning-foreground` | color | light: #8a5900; dark: #e9c478 | light: #8a5900; dark: #e9c478 | overridden |
+| `color.warning.surface` | `--odd-color-warning-surface` | color | light: #fff5de; dark: #3a2e18 | light: #fff5de; dark: #3a2e18 | overridden |
+| `control.gap` | `--odd-control-gap` | dimension | 0.5rem | alias of `space.xs` | preset |
+| `control.height.lg` | `--odd-control-height-lg` | dimension | 3rem | 3rem | preset |
+| `control.height.md` | `--odd-control-height-md` | dimension | 2.5rem | 2.5rem | preset |
+| `control.height.sm` | `--odd-control-height-sm` | dimension | 2rem | 2rem | preset |
+| `control.padding.inline.lg` | `--odd-control-padding-inline-lg` | dimension | 1rem | alias of `space.md` | preset |
+| `control.padding.inline.md` | `--odd-control-padding-inline-md` | dimension | 0.75rem | alias of `space.sm` | preset |
+| `control.padding.inline.sm` | `--odd-control-padding-inline-sm` | dimension | 0.5rem | alias of `space.xs` | preset |
+| `control.radius` | `--odd-control-radius` | dimension | 0.5rem | alias of `radius.md` | preset |
+| `type.body.family` | `--odd-type-body-family` | fontFamily | system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | alias of `font.family.sans` | preset |
+| `type.body.letter-spacing` | `--odd-type-body-letter-spacing` | dimension | 0 | alias of `letter-spacing.normal` | preset |
+| `type.body.line-height` | `--odd-type-body-line-height` | number | 1.5 | alias of `line-height.normal` | preset |
+| `type.body.size` | `--odd-type-body-size` | dimension | 1rem | alias of `font.size.md` | preset |
+| `type.body.weight` | `--odd-type-body-weight` | fontWeight | 400 | alias of `font.weight.regular` | preset |
+| `type.code.family` | `--odd-type-code-family` | fontFamily | ui-monospace, SFMono-Regular, Menlo, Consolas, monospace | alias of `font.family.mono` | preset |
+| `type.code.letter-spacing` | `--odd-type-code-letter-spacing` | dimension | 0 | alias of `letter-spacing.normal` | preset |
+| `type.code.line-height` | `--odd-type-code-line-height` | number | 1.5 | alias of `line-height.normal` | preset |
+| `type.code.size` | `--odd-type-code-size` | dimension | 0.875rem | alias of `font.size.sm` | preset |
+| `type.code.weight` | `--odd-type-code-weight` | fontWeight | 400 | alias of `font.weight.regular` | preset |
+| `type.display.family` | `--odd-type-display-family` | fontFamily | system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | alias of `font.family.display` | preset |
+| `type.display.letter-spacing` | `--odd-type-display-letter-spacing` | dimension | -0.025em | alias of `letter-spacing.tight` | preset |
+| `type.display.line-height` | `--odd-type-display-line-height` | number | 1.25 | alias of `line-height.tight` | preset |
+| `type.display.size` | `--odd-type-display-size` | dimension | 2.25rem | alias of `font.size.4xl` | preset |
+| `type.display.weight` | `--odd-type-display-weight` | fontWeight | 600 | alias of `font.weight.semibold` | preset |
+| `type.eyebrow.family` | `--odd-type-eyebrow-family` | fontFamily | system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | alias of `font.family.sans` | preset |
+| `type.eyebrow.letter-spacing` | `--odd-type-eyebrow-letter-spacing` | dimension | 0.05em | alias of `letter-spacing.wide` | preset |
+| `type.eyebrow.line-height` | `--odd-type-eyebrow-line-height` | number | 1.5 | alias of `line-height.normal` | preset |
+| `type.eyebrow.size` | `--odd-type-eyebrow-size` | dimension | 0.75rem | alias of `font.size.xs` | preset |
+| `type.eyebrow.weight` | `--odd-type-eyebrow-weight` | fontWeight | 600 | alias of `font.weight.semibold` | preset |
+| `type.section.family` | `--odd-type-section-family` | fontFamily | system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | alias of `font.family.display` | preset |
+| `type.section.letter-spacing` | `--odd-type-section-letter-spacing` | dimension | 0 | alias of `letter-spacing.normal` | preset |
+| `type.section.line-height` | `--odd-type-section-line-height` | number | 1.25 | alias of `line-height.tight` | preset |
+| `type.section.size` | `--odd-type-section-size` | dimension | 1.5rem | alias of `font.size.2xl` | preset |
+| `type.section.weight` | `--odd-type-section-weight` | fontWeight | 600 | alias of `font.weight.semibold` | preset |
+| `type.small.family` | `--odd-type-small-family` | fontFamily | system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | alias of `font.family.sans` | preset |
+| `type.small.letter-spacing` | `--odd-type-small-letter-spacing` | dimension | 0 | alias of `letter-spacing.normal` | preset |
+| `type.small.line-height` | `--odd-type-small-line-height` | number | 1.5 | alias of `line-height.normal` | preset |
+| `type.small.size` | `--odd-type-small-size` | dimension | 0.75rem | alias of `font.size.xs` | preset |
+| `type.small.weight` | `--odd-type-small-weight` | fontWeight | 400 | alias of `font.weight.regular` | preset |
+| `type.title.family` | `--odd-type-title-family` | fontFamily | system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | alias of `font.family.display` | preset |
+| `type.title.letter-spacing` | `--odd-type-title-letter-spacing` | dimension | 0 | alias of `letter-spacing.normal` | preset |
+| `type.title.line-height` | `--odd-type-title-line-height` | number | 1.375 | alias of `line-height.snug` | preset |
+| `type.title.size` | `--odd-type-title-size` | dimension | 1.25rem | alias of `font.size.xl` | preset |
+| `type.title.weight` | `--odd-type-title-weight` | fontWeight | 600 | alias of `font.weight.semibold` | preset |
+| `type.ui.family` | `--odd-type-ui-family` | fontFamily | system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | alias of `font.family.sans` | preset |
+| `type.ui.letter-spacing` | `--odd-type-ui-letter-spacing` | dimension | 0 | alias of `letter-spacing.normal` | preset |
+| `type.ui.line-height` | `--odd-type-ui-line-height` | number | 1.375 | alias of `line-height.snug` | preset |
+| `type.ui.size` | `--odd-type-ui-size` | dimension | 0.875rem | alias of `font.size.sm` | preset |
+| `type.ui.weight` | `--odd-type-ui-weight` | fontWeight | 500 | alias of `font.weight.medium` | preset |