@karmo-co/drift-kit-reference 0.0.0-stage → 23.4.0

package/manifest/migrations/8.0.0.md

@@ -0,0 +1,16 @@
+## 8.0.0 - 2026-09-12
+
+- **drift-kit is importable from React.** New `@karmo-co/drift-kit/react` covering
+  Body, Heading, Hero, Eyebrow, Divider and Button, and `@karmo-co/drift-kit/icons/<set>`
+  covering all eight icon sets. Props are the data attributes with `data-` dropped,
+  so a prototype and an app use the same words in the same order.
+- Components are thin: class names and attributes, no styling runtime, no state.
+  All of them render on the server and none carries a `'use client'` directive.
+- Icons are per-icon named exports annotated `/*#__PURE__*/`, so an app ships only
+  what it imports rather than all 2,090 lucide glyphs.
+- One prop had to be renamed: `data-style` is `textStyle`, because React owns `style`.
+- Button's variant and status pairs are a union, so a combination the CSS does not
+  style fails to compile.
+- The repo gains its first dependencies, all of them dev only. The published package
+  still declares no runtime dependencies; react is a peer.
+

package/manifest/migrations/9.0.0.md

@@ -0,0 +1,107 @@
+## 9.0.0 - 2026-09-14
+
+Three changes to Alert, all of them breaking, all of them asked for together.
+
+- **The status tint on the words is now opt-in, via `data-text="tinted"`.**
+  8.3.0 made every status paint its own title and body on `subtle`, `outline`
+  and `plain`. By default they are back to the flat pair the base rule always
+  carried: default-coloured title, grey body. The **icon stays status-coloured
+  either way**, so turning the tint off never costs the reader the signal, it
+  just stops the message carrying it twice.
+- Mechanically the five status rules no longer write `--_alert-title` and
+  `--_alert-body` at all. They write one new private slot,
+  `--_alert-tint-text`, and only the `[data-text="tinted"]` rule spends it.
+  That rule and `[data-variant="solid"]` are the only two writers of the text
+  slots and they have identical specificity, so **source order alone** decides
+  which wins and solid has to stay last: tinted words on a solid status fill
+  would be that colour on itself. `test/order.test.js` now asserts both the
+  writer list and the order, and fails if a third rule appears or the two swap.
+- **`neutral` is a named status.** `data-status="neutral"` renders exactly what
+  omitting the attribute always did, so nothing changes visually; what changes
+  is that you can now say it. A sixth component token,
+  `--dk-component-alert-neutral-color`, completes the per-status text family,
+  so a tinted neutral alert has a colour of its own rather than falling back to
+  nothing. React's `AlertStatus` gains `'neutral'`.
+- **Width follows Button: content width by default, `data-full-width="true"`
+  to fill.** This reverses 8.1.0, which shipped `width: 100%`. Two width
+  vocabularies pointing opposite ways across one kit is worse than either
+  default on its own. `fit-content` is less narrow than it sounds: it resolves
+  to `min(max-content, max(min-content, available))`, so a long body still
+  fills the column and only a short one hugs. React gains `fullWidth`.
+- **Content width gained a trailing-padding rule**, found by looking at the new
+  default on the docs page. A leading icon with no trailing dismiss button is
+  the one configuration whose two insets do not match: measured at the default
+  size, the words start 48px in (padding, icon column, gap) and stop 18px from
+  the other edge. Its `padding-inline-end` becomes `padding + gap`, the same
+  step that separates the icon from the words, mirrored, so it tracks both the
+  size axis and the responsive spacing scale with no second number to keep in
+  sync. Content width only, since full width has slack there and widening it
+  would buy nothing but a narrower column. The other two configurations are
+  already even (48/48 with a dismiss button in the mirror column, 18/18 with no
+  icon) and are excluded, as is `plain`, whose whole job is to have no padding.
+- **The icon and the dismiss button now centre correctly when there is no
+  title.** Both align to `--_alert-title-line`, so with title omitted they were
+  centring on a line that is not there: the body is a size step smaller
+  (body-small 20px against body-medium 24px), which left both 2px low. With no
+  title the slot now resolves to the body's line height instead. Only visible at
+  the default size, since `data-size="small"` steps the title down to
+  body-small too and the two already coincided. Measured across all 26
+  icon-bearing alerts on the docs page: every one centres within 0.6px.
+- **The dismiss button now has hover and press states**, borrowed from Icon
+  button and recoloured by the status: a background that appears on hover, one
+  rung further on press, the glyph stepping `-hover` then `-focus` alongside it,
+  and a `scale(0.9)`. Two deliberate differences from `.dk-component-icon-btn`:
+  it is transparent at rest, since it already sits on a tinted panel and a
+  resting fill would read as a second panel inside the first, and its colours
+  come from the status rather than from neutral.
+- Its box is now the glyph plus a padding ring (`28px` around a `20px` glyph at
+  the default size, `24px` around `16px` at small), which is what gives the
+  hover background a body instead of a smudge hugging the X, and it sits
+  `--dk-component-alert-dismiss-offset` further from the words: the gap from the
+  text to the button goes from 12px to 20px, and to the glyph itself 24px.
+- **`solid` needed a scrim rather than a rung.** Measured before building it:
+  `--dk-surface-<status>-focus` is byte-identical to `--dk-surface-<status>-solid`
+  in light for all five statuses, and `--dk-surface-error-default` collides with
+  it the same way in dark, so no existing ladder gives two distinct steps above
+  a solid fill in both themes. Two new primitives,
+  `--dk-primitive-opacity-scrim-{hover,active}` (0.14 and 0.24), are laid over
+  the fill in the on-solid colour, which self-adapts: white over a status fill,
+  black over the neutral one. The glyph stays on-solid, since dimming the one
+  white thing on a saturated fill would cost contrast to signal a hover.
+- `kit/reduced-motion.css` gains the dismiss button in both its lists, so the
+  new press does not move the element for a reader who asked for less motion.
+  That file exists precisely to stop new motion shipping unguarded.
+- **Padding is even on all sides**, `--dk-component-alert-padding` (16px, 12px
+  at small), replacing the 12px-vertical against 16px-horizontal pair. That is
+  the shape a control has, not a panel, and Toast, the component Alert is the
+  persistent half of, already sets a flat `padding: var(--dk-spacing-4)`. ONE
+  token per size rather than two holding the same value, so the two edges
+  cannot drift apart again: `--dk-component-alert-padding-block` and
+  `-padding-inline` are gone, at both sizes.
+- **An alert with no dismiss button gets a bit more room on its trailing
+  edge**, 24px against 16px (16px against 12px at small). With the button
+  there the right side already holds something and the words stop well short
+  of the edge; take it away and they run up against the padding alone. The
+  extra is its own token, `--dk-component-alert-trailing-extra`. It was the
+  dismiss offset until that offset was raised: the two had been equal only
+  because they arrived at the same size, and reusing one for the other meant
+  widening the gap before the button silently widened the padding of every
+  alert that has no button. This replaces the narrower rule that only fired at
+  content width and only with a leading icon: with even padding it is the
+  missing control that makes the difference, not the icon, and it is missing
+  at any width. `plain` stays excluded.
+- **More room between the words and the dismiss button**, 28px rather than
+  20px at the default size and 20px rather than 12px at small.
+  `--dk-component-alert-dismiss-offset` is now the panel's own padding, so the
+  control stands as far from the words as the words stand from the edge, and
+  it tracks the size axis with them rather than being a number of its own.
+- **Migrating.** An alert that wants its 8.3.0 look adds `data-text="tinted"`;
+  one that wants its 8.1.0 width adds `data-full-width="true"`. Neither has a
+  silent failure mode: leave them off and you get the new defaults, which
+  render correctly, just differently.
+- Contrast moves the right way. Neutral words on the status tints clear AA in
+  29 of 30 theme and surface-level combinations, against 12 below-AA readings
+  of 288 for the tinted path. The single miss is error body text in dark at
+  ambient `data-surface="2"`, 3.95:1, and it only applies to an alert that has
+  opted out of the tint on a level-2 surface.
+

package/manifest/rules.md

@@ -0,0 +1,37 @@
+# The kit's own guard tests
+
+Every rule below is a test in drift-kit. A component the kit ships passes all of them.
+
+## motion-guard
+
+- components read motion patterns only
+- behaviours read motion through dk.motion, never their own parser
+
+## invariant
+
+- bundle canonical form matches the pre-restructure fixture
+- no component transition writes a literal duration
+- comment delimiters in the built bundle are balanced
+- no declaration in the built bundle has unbalanced parentheses
+- every component with a size axis sets those properties without one too
+
+## tone-boundary
+
+- the audit's self-surfaced components are boundaries
+- the element that paints is reset, not the component around it
+- a variant that paints nothing at rest is excluded
+- parts that paint only under the pointer, and disabled or control fills, are not boundaries
+- Box is never a boundary: it is a toned surface by design
+- Card is never a boundary either: rebuilt on the kit surface, 16 Oct
+- a fill that stays put (a selected row) is a boundary; one that comes and goes (hover) is not
+- status tints count as a component's own surface, followed through a private variable
+- a fill no tone remaps is the component's own surface (Choice card, by name)
+- a state set on an ancestor that repaints a part with a tone-following fill excludes it (an inset Input)
+- an ancestor tone treatment that repaints a part excludes it (Icon tile on a solid)
+- review: variants are also judged in pairs (a status solid Tag is a mark rule C inverts, not a surface)
+- the derivation follows --dk-interactive-* to the surface it reads
+
+## anatomy
+
+- every component stylesheet opens with an Anatomy block rooted at its own class
+- every component stylesheet says what the component is for, in a Purpose line

package/manifest/setup.md

@@ -0,0 +1,28 @@
+# The package
+
+Installed as `@karmo-co/drift-kit` from GitHub Packages.
+
+## Entry points
+
+| Import | File |
+|---|---|
+| `@karmo-co/drift-kit/drift-kit.css` | `./dist/drift-kit.css` |
+| `@karmo-co/drift-kit/drift-kit.min.css` | `./dist/drift-kit.min.css` |
+| `@karmo-co/drift-kit/components.js` | `./dist/components.js` |
+| `@karmo-co/drift-kit/fonts/*` | `./dist/fonts/*` |
+| `@karmo-co/drift-kit/vehicles/*` | `./dist/vehicles/*` |
+| `@karmo-co/drift-kit/manifest/*` | `./dist/manifest/*` |
+| `@karmo-co/drift-kit/package.json` | `./package.json` |
+| `@karmo-co/drift-kit/react` | `./dist/react/index.js` |
+| `@karmo-co/drift-kit/behaviours/*` | `./dist/react/behaviours/*.js` |
+| `@karmo-co/drift-kit/icons/*` | `./dist/icons/*.js` |
+
+## Root attributes the stylesheet reads
+
+| Attribute | Values |
+|---|---|
+| `data-brand` | `karmo`, `volvo` |
+| `data-theme` | `dark`, `light` |
+| `data-border-radius` | `bubbly`, `normal`, `sharp` |
+| `data-border-width` | `medium`, `thick`, `thin` |
+| `data-density` | `normal`, `spacious`, `tight` |

package/manifest/tokens/border-width.md

@@ -0,0 +1,12 @@
+# Border width tokens
+
+Declared values, light and dark. Reference a token by name; never copy its value.
+
+| Token | Light | Dark |
+|---|---|---|
+| `--dk-border-width-0` | `var(--dk-dynamic-border-width-0)` | `var(--dk-dynamic-border-width-0)` |
+| `--dk-border-width-25` | `var(--dk-dynamic-border-width-25)` | `var(--dk-dynamic-border-width-25)` |
+| `--dk-border-width-50` | `var(--dk-dynamic-border-width-50)` | `var(--dk-dynamic-border-width-50)` |
+| `--dk-border-width-100` | `var(--dk-dynamic-border-width-100)` | `var(--dk-dynamic-border-width-100)` |
+| `--dk-border-width-150` | `var(--dk-dynamic-border-width-150)` | `var(--dk-dynamic-border-width-150)` |
+| `--dk-border-width-200` | `var(--dk-dynamic-border-width-200)` | `var(--dk-dynamic-border-width-200)` |

package/manifest/tokens/border.md

@@ -0,0 +1,147 @@
+# Borders and edges tokens
+
+Declared values, light and dark. Reference a token by name; never copy its value.
+
+| Token | Light | Dark |
+|---|---|---|
+| `--dk-border-base-black` | `var(--dk-color-base-black)` | `var(--dk-color-base-black)` |
+| `--dk-border-base-white` | `var(--dk-color-base-white)` | `var(--dk-color-base-white)` |
+| `--dk-border-card-default` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-600)` |
+| `--dk-border-card-secondary` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-500)` |
+| `--dk-border-choice-card` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
+| `--dk-border-choice-card-active` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-600)` |
+| `--dk-border-choice-card-hover` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
+| `--dk-border-control-active` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-600)` |
+| `--dk-border-control-default` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-800)` |
+| `--dk-border-control-hover` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-700)` |
+| `--dk-border-dashed-dash` | `var(--dk-primitive-scale-2-5)` | `var(--dk-primitive-scale-2-5)` |
+| `--dk-border-dashed-gap` | `var(--dk-primitive-scale-2)` | `var(--dk-primitive-scale-2)` |
+| `--dk-border-dashed-primary` | `var(--dk-color-primary-400)` | `var(--dk-border-primary-default)` |
+| `--dk-border-dashed-width` | `var(--dk-border-width-50)` | `var(--dk-border-width-50)` |
+| `--dk-border-default-body` | `var(--dk-color-base-black)` | `var(--dk-color-base-white)` |
+| `--dk-border-default-body-reverse` | `var(--dk-color-base-white)` | `var(--dk-color-base-black)` |
+| `--dk-border-disabled-default` | `var(--dk-color-neutral-400)` | `var(--dk-color-neutral-400)` |
+| `--dk-border-disabled-elevation` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-300)` |
+| `--dk-border-disabled-subtle` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
+| `--dk-border-error-default` | `var(--dk-color-error-500)` | `var(--dk-color-error-400)` |
+| `--dk-border-error-elevation` | `var(--dk-color-error-800)` | `var(--dk-color-error-800)` |
+| `--dk-border-error-elevation-focus` | `var(--dk-color-error-700)` | `var(--dk-color-error-700)` |
+| `--dk-border-error-elevation-hover` | `var(--dk-color-error-700)` | `var(--dk-color-error-700)` |
+| `--dk-border-error-focus` | `var(--dk-color-error-700)` | `var(--dk-color-error-200)` |
+| `--dk-border-error-hairline` | `var(--dk-color-error-300)` | `var(--dk-color-error-800)` |
+| `--dk-border-error-hover` | `var(--dk-color-error-600)` | `var(--dk-color-error-300)` |
+| `--dk-border-error-subtle` | `var(--dk-color-error-50)` | `var(--dk-color-error-50)` |
+| `--dk-border-error-subtle-focus` | `var(--dk-color-error-200)` | `var(--dk-color-error-200)` |
+| `--dk-border-error-subtle-hover` | `var(--dk-color-error-100)` | `var(--dk-color-error-100)` |
+| `--dk-border-field-default` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-600)` |
+| `--dk-border-field-disabled` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-800)` |
+| `--dk-border-field-error` | `var(--dk-color-error-500)` | `var(--dk-color-error-400)` |
+| `--dk-border-field-error-focus` | `var(--dk-color-error-700)` | `var(--dk-color-error-200)` |
+| `--dk-border-field-error-ring` | `var(--dk-color-error-300)` | `var(--dk-color-error-600)` |
+| `--dk-border-field-focus` | `var(--dk-color-primary-600)` | `var(--dk-color-primary-400)` |
+| `--dk-border-field-focus-ring` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-600)` |
+| `--dk-border-field-hover` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-500)` |
+| `--dk-border-field-raised-default` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-800)` |
+| `--dk-border-field-raised-focus` | `var(--dk-color-primary-400)` | `var(--dk-color-primary-500)` |
+| `--dk-border-field-raised-hover` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-700)` |
+| `--dk-border-glass-default` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
+| `--dk-border-glider-plain` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
+| `--dk-border-gradient-ai-deep` | `var(--dk-gradient-primary-top-right-default-stop-3)` | `var(--dk-gradient-primary-top-right-default-stop-3)` |
+| `--dk-border-gradient-ai-light` | `var(--dk-gradient-primary-top-right-default-stop-1)` | `var(--dk-gradient-primary-top-right-default-stop-1)` |
+| `--dk-border-gradient-angle` | `225deg` | `225deg` |
+| `--dk-border-gradient-error-deep` | `var(--dk-gradient-error-top-right-default-stop-3)` | `var(--dk-gradient-error-top-right-default-stop-3)` |
+| `--dk-border-gradient-error-light` | `var(--dk-gradient-error-top-right-hover-stop-2)` | `var(--dk-gradient-error-top-right-hover-stop-2)` |
+| `--dk-border-gradient-information-deep` | `var(--dk-gradient-information-top-right-default-stop-3)` | `var(--dk-gradient-information-top-right-default-stop-3)` |
+| `--dk-border-gradient-information-light` | `var(--dk-gradient-information-top-right-hover-stop-2)` | `var(--dk-gradient-information-top-right-hover-stop-2)` |
+| `--dk-border-gradient-neutral-deep` | `var(--dk-gradient-neutral-top-right-default-stop-3)` | `var(--dk-gradient-neutral-top-right-default-stop-3)` |
+| `--dk-border-gradient-neutral-light` | `var(--dk-gradient-neutral-top-right-hover-stop-2)` | `var(--dk-gradient-neutral-top-right-hover-stop-2)` |
+| `--dk-border-gradient-primary-deep` | `var(--dk-gradient-primary-top-right-default-stop-3)` | `var(--dk-gradient-primary-top-right-default-stop-3)` |
+| `--dk-border-gradient-primary-light` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-200)` |
+| `--dk-border-gradient-primary-mid` | `var(--dk-gradient-primary-top-right-default-stop-2)` | `var(--dk-gradient-primary-top-right-default-stop-3)` |
+| `--dk-border-gradient-success-deep` | `var(--dk-gradient-success-top-right-default-stop-3)` | `var(--dk-gradient-success-top-right-default-stop-3)` |
+| `--dk-border-gradient-success-light` | `var(--dk-gradient-success-top-right-hover-stop-2)` | `var(--dk-gradient-success-top-right-hover-stop-2)` |
+| `--dk-border-gradient-warning-deep` | `var(--dk-gradient-warning-top-right-default-stop-3)` | `var(--dk-gradient-warning-top-right-default-stop-3)` |
+| `--dk-border-gradient-warning-light` | `var(--dk-gradient-warning-top-right-hover-stop-2)` | `var(--dk-gradient-warning-top-right-hover-stop-2)` |
+| `--dk-border-hairline-current` | `var(--dk-border-hairline-level-0)` | `var(--dk-border-hairline-level-0)` |
+| `--dk-border-hue-next1-hairline` | `var(--dk-primitive-color-primary-next1-300)` | `var(--dk-primitive-color-primary-next1-800)` |
+| `--dk-border-hue-next2-hairline` | `var(--dk-primitive-color-primary-next2-300)` | `var(--dk-primitive-color-primary-next2-800)` |
+| `--dk-border-hue-next3-hairline` | `var(--dk-primitive-color-primary-next3-300)` | `var(--dk-primitive-color-primary-next3-800)` |
+| `--dk-border-hue-next4-hairline` | `var(--dk-primitive-color-primary-next4-300)` | `var(--dk-primitive-color-primary-next4-800)` |
+| `--dk-border-hue-prev1-hairline` | `var(--dk-primitive-color-primary-prev1-300)` | `var(--dk-primitive-color-primary-prev1-800)` |
+| `--dk-border-hue-prev2-hairline` | `var(--dk-primitive-color-primary-prev2-300)` | `var(--dk-primitive-color-primary-prev2-800)` |
+| `--dk-border-hue-prev3-hairline` | `var(--dk-primitive-color-primary-prev3-300)` | `var(--dk-primitive-color-primary-prev3-800)` |
+| `--dk-border-hue-prev4-hairline` | `var(--dk-primitive-color-primary-prev4-300)` | `var(--dk-primitive-color-primary-prev4-800)` |
+| `--dk-border-hue-primary-hairline` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-800)` |
+| `--dk-border-information-default` | `var(--dk-color-information-500)` | `var(--dk-color-information-400)` |
+| `--dk-border-information-elevation` | `var(--dk-color-information-800)` | `var(--dk-color-information-800)` |
+| `--dk-border-information-elevation-focus` | `var(--dk-color-information-700)` | `var(--dk-color-information-700)` |
+| `--dk-border-information-elevation-hover` | `var(--dk-color-information-700)` | `var(--dk-color-information-700)` |
+| `--dk-border-information-focus` | `var(--dk-color-information-700)` | `var(--dk-color-information-200)` |
+| `--dk-border-information-hairline` | `var(--dk-color-information-300)` | `var(--dk-color-information-800)` |
+| `--dk-border-information-hover` | `var(--dk-color-information-600)` | `var(--dk-color-information-300)` |
+| `--dk-border-information-subtle` | `var(--dk-color-information-50)` | `var(--dk-color-information-50)` |
+| `--dk-border-information-subtle-focus` | `var(--dk-color-information-200)` | `var(--dk-color-information-200)` |
+| `--dk-border-information-subtle-hover` | `var(--dk-color-information-100)` | `var(--dk-color-information-100)` |
+| `--dk-border-inverse-hairline` | `var(--dk-color-neutral-800)` | `var(--dk-color-neutral-100)` |
+| `--dk-border-inverse-structural` | `var(--dk-color-neutral-900)` | `var(--dk-color-neutral-50)` |
+| `--dk-border-nested-active` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-500)` |
+| `--dk-border-nested-default` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
+| `--dk-border-nested-glass` | `rgb(from var(--dk-border-raised-default) r g b / var(--dk-primitive-opacity-glass))` | `rgb(from var(--dk-border-raised-default) r g b / var(--dk-primitive-opacity-glass))` |
+| `--dk-border-nested-hover` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-600)` |
+| `--dk-border-neutral-default` | `var(--dk-color-neutral-600)` | `var(--dk-color-neutral-300)` |
+| `--dk-border-neutral-elevation` | `var(--dk-color-neutral-800)` | `var(--dk-color-neutral-800)` |
+| `--dk-border-neutral-elevation-focus` | `var(--dk-color-neutral-700)` | `var(--dk-color-neutral-700)` |
+| `--dk-border-neutral-elevation-hover` | `var(--dk-color-neutral-700)` | `var(--dk-color-neutral-700)` |
+| `--dk-border-neutral-focus` | `var(--dk-color-neutral-800)` | `var(--dk-color-neutral-100)` |
+| `--dk-border-neutral-hairline` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-600)` |
+| `--dk-border-neutral-hover` | `var(--dk-color-neutral-700)` | `var(--dk-color-neutral-200)` |
+| `--dk-border-neutral-subtle` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-600)` |
+| `--dk-border-neutral-subtle-focus` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-400)` |
+| `--dk-border-neutral-subtle-hover` | `var(--dk-color-neutral-400)` | `var(--dk-color-neutral-500)` |
+| `--dk-border-page-default` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-700)` |
+| `--dk-border-page-secondary` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-800)` |
+| `--dk-border-primary-active` | `var(--dk-color-primary-800)` | `var(--dk-color-primary-200)` |
+| `--dk-border-primary-default` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-500)` |
+| `--dk-border-primary-disabled` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-700)` |
+| `--dk-border-primary-disabled-active` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-500)` |
+| `--dk-border-primary-disabled-hover` | `var(--dk-color-primary-400)` | `var(--dk-color-primary-600)` |
+| `--dk-border-primary-elevation` | `var(--dk-color-primary-800)` | `var(--dk-color-primary-800)` |
+| `--dk-border-primary-elevation-focus` | `var(--dk-color-primary-700)` | `var(--dk-color-primary-600)` |
+| `--dk-border-primary-elevation-hover` | `var(--dk-color-primary-700)` | `var(--dk-color-primary-700)` |
+| `--dk-border-primary-focus` | `var(--dk-color-primary-700)` | `var(--dk-color-primary-300)` |
+| `--dk-border-primary-guide` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-600)` |
+| `--dk-border-primary-hairline` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-800)` |
+| `--dk-border-primary-hover` | `var(--dk-color-primary-600)` | `var(--dk-color-primary-400)` |
+| `--dk-border-primary-oos` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-600)` |
+| `--dk-border-primary-subtle` | `var(--dk-color-primary-100)` | `var(--dk-color-primary-800)` |
+| `--dk-border-primary-subtle-active` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-600)` |
+| `--dk-border-primary-subtle-focus` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-600)` |
+| `--dk-border-primary-subtle-hover` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-700)` |
+| `--dk-border-progress` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-400)` |
+| `--dk-border-progress-start` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-700)` |
+| `--dk-border-raised-active` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-600)` |
+| `--dk-border-raised-default` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
+| `--dk-border-raised-hover` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
+| `--dk-border-raised-subtle` | `rgb(from var(--dk-color-base-black) r g b / var(--dk-primitive-opacity-hairline-subtle))` | `rgb(from var(--dk-color-base-white) r g b / var(--dk-primitive-opacity-hairline-subtle-inverse))` |
+| `--dk-border-sidebar-panel` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-1000)` |
+| `--dk-border-sidebar-panel-hover` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-900)` |
+| `--dk-border-success-default` | `var(--dk-color-success-500)` | `var(--dk-color-success-400)` |
+| `--dk-border-success-elevation` | `var(--dk-color-success-800)` | `var(--dk-color-success-800)` |
+| `--dk-border-success-elevation-focus` | `var(--dk-color-success-700)` | `var(--dk-color-success-700)` |
+| `--dk-border-success-elevation-hover` | `var(--dk-color-success-700)` | `var(--dk-color-success-700)` |
+| `--dk-border-success-focus` | `var(--dk-color-success-700)` | `var(--dk-color-success-200)` |
+| `--dk-border-success-hairline` | `var(--dk-border-primary-hairline)` | `var(--dk-border-primary-hairline)` |
+| `--dk-border-success-hover` | `var(--dk-color-success-600)` | `var(--dk-color-success-300)` |
+| `--dk-border-success-subtle` | `var(--dk-color-success-50)` | `var(--dk-color-success-50)` |
+| `--dk-border-success-subtle-focus` | `var(--dk-color-success-200)` | `var(--dk-color-success-200)` |
+| `--dk-border-success-subtle-hover` | `var(--dk-color-success-100)` | `var(--dk-color-success-100)` |
+| `--dk-border-warning-default` | `var(--dk-color-warning-500)` | `var(--dk-color-warning-400)` |
+| `--dk-border-warning-elevation` | `var(--dk-color-warning-800)` | `var(--dk-color-warning-800)` |
+| `--dk-border-warning-elevation-focus` | `var(--dk-color-warning-700)` | `var(--dk-color-warning-700)` |
+| `--dk-border-warning-elevation-hover` | `var(--dk-color-warning-700)` | `var(--dk-color-warning-700)` |
+| `--dk-border-warning-focus` | `var(--dk-color-warning-700)` | `var(--dk-color-warning-200)` |
+| `--dk-border-warning-hairline` | `var(--dk-color-warning-300)` | `var(--dk-color-warning-800)` |
+| `--dk-border-warning-hover` | `var(--dk-color-warning-600)` | `var(--dk-color-warning-300)` |
+| `--dk-border-warning-subtle` | `var(--dk-color-warning-50)` | `var(--dk-color-warning-50)` |
+| `--dk-border-warning-subtle-focus` | `var(--dk-color-warning-200)` | `var(--dk-color-warning-200)` |
+| `--dk-border-warning-subtle-hover` | `var(--dk-color-warning-100)` | `var(--dk-color-warning-100)` |

package/manifest/tokens/font.md

@@ -0,0 +1,90 @@
+# Type tokens
+
+Declared values, light and dark. Reference a token by name; never copy its value.
+
+| Token | Light | Dark |
+|---|---|---|
+| `--dk-font-body-lg-line-height` | `var(--dk-responsive-font-body-lg-line-height)` | `var(--dk-responsive-font-body-lg-line-height)` |
+| `--dk-font-body-lg-paragraph-spacing` | `var(--dk-responsive-font-body-lg-paragraph-spacing)` | `var(--dk-responsive-font-body-lg-paragraph-spacing)` |
+| `--dk-font-body-lg-text-size` | `var(--dk-responsive-font-body-lg-text-size)` | `var(--dk-responsive-font-body-lg-text-size)` |
+| `--dk-font-body-md-line-height` | `var(--dk-responsive-font-body-md-line-height)` | `var(--dk-responsive-font-body-md-line-height)` |
+| `--dk-font-body-md-paragraph-spacing` | `var(--dk-responsive-font-body-md-paragraph-spacing)` | `var(--dk-responsive-font-body-md-paragraph-spacing)` |
+| `--dk-font-body-md-text-size` | `var(--dk-responsive-font-body-md-text-size)` | `var(--dk-responsive-font-body-md-text-size)` |
+| `--dk-font-body-sm-line-height` | `var(--dk-responsive-font-body-sm-line-height)` | `var(--dk-responsive-font-body-sm-line-height)` |
+| `--dk-font-body-sm-paragraph-spacing` | `var(--dk-responsive-font-body-sm-paragraph-spacing)` | `var(--dk-responsive-font-body-sm-paragraph-spacing)` |
+| `--dk-font-body-sm-text-size` | `var(--dk-responsive-font-body-sm-text-size)` | `var(--dk-responsive-font-body-sm-text-size)` |
+| `--dk-font-body-xsm-line-height` | `var(--dk-responsive-font-body-xsm-line-height)` | `var(--dk-responsive-font-body-xsm-line-height)` |
+| `--dk-font-body-xsm-paragraph-spacing` | `var(--dk-responsive-font-body-xsm-paragraph-spacing)` | `var(--dk-responsive-font-body-xsm-paragraph-spacing)` |
+| `--dk-font-body-xsm-text-size` | `var(--dk-responsive-font-body-xsm-text-size)` | `var(--dk-responsive-font-body-xsm-text-size)` |
+| `--dk-font-family-primary` | `var(--dk-primitive-font-family-inter)` | `var(--dk-primitive-font-family-inter)` |
+| `--dk-font-family-secondary` | `var(--dk-primitive-font-family-syne)` | `var(--dk-primitive-font-family-syne)` |
+| `--dk-font-heading-h1-line-height` | `var(--dk-responsive-font-headings-h1-line-height)` | `var(--dk-responsive-font-headings-h1-line-height)` |
+| `--dk-font-heading-h1-paragraph-spacing` | `var(--dk-responsive-font-headings-h1-paragraph-spacing)` | `var(--dk-responsive-font-headings-h1-paragraph-spacing)` |
+| `--dk-font-heading-h1-text-size` | `var(--dk-responsive-font-headings-h1-text-size)` | `var(--dk-responsive-font-headings-h1-text-size)` |
+| `--dk-font-heading-h2-line-height` | `var(--dk-responsive-font-headings-h2-line-height)` | `var(--dk-responsive-font-headings-h2-line-height)` |
+| `--dk-font-heading-h2-paragraph-spacing` | `var(--dk-responsive-font-headings-h2-paragraph-spacing)` | `var(--dk-responsive-font-headings-h2-paragraph-spacing)` |
+| `--dk-font-heading-h2-text-size` | `var(--dk-responsive-font-headings-h2-text-size)` | `var(--dk-responsive-font-headings-h2-text-size)` |
+| `--dk-font-heading-h3-line-height` | `var(--dk-responsive-font-headings-h3-line-height)` | `var(--dk-responsive-font-headings-h3-line-height)` |
+| `--dk-font-heading-h3-paragraph-spacing` | `var(--dk-responsive-font-headings-h3-paragraph-spacing)` | `var(--dk-responsive-font-headings-h3-paragraph-spacing)` |
+| `--dk-font-heading-h3-text-size` | `var(--dk-responsive-font-headings-h3-text-size)` | `var(--dk-responsive-font-headings-h3-text-size)` |
+| `--dk-font-heading-h4-line-height` | `var(--dk-responsive-font-headings-h4-line-height)` | `var(--dk-responsive-font-headings-h4-line-height)` |
+| `--dk-font-heading-h4-paragraph-spacing` | `var(--dk-responsive-font-headings-h4-paragraph-spacing)` | `var(--dk-responsive-font-headings-h4-paragraph-spacing)` |
+| `--dk-font-heading-h4-text-size` | `var(--dk-responsive-font-headings-h4-text-size)` | `var(--dk-responsive-font-headings-h4-text-size)` |
+| `--dk-font-heading-h5-line-height` | `var(--dk-responsive-font-headings-h5-line-height)` | `var(--dk-responsive-font-headings-h5-line-height)` |
+| `--dk-font-heading-h5-paragraph-spacing` | `var(--dk-responsive-font-headings-h5-paragraph-spacing)` | `var(--dk-responsive-font-headings-h5-paragraph-spacing)` |
+| `--dk-font-heading-h5-text-size` | `var(--dk-responsive-font-headings-h5-text-size)` | `var(--dk-responsive-font-headings-h5-text-size)` |
+| `--dk-font-heading-h6-line-height` | `var(--dk-responsive-font-headings-h6-line-height)` | `var(--dk-responsive-font-headings-h6-line-height)` |
+| `--dk-font-heading-h6-paragraph-spacing` | `var(--dk-responsive-font-headings-h6-paragraph-spacing)` | `var(--dk-responsive-font-headings-h6-paragraph-spacing)` |
+| `--dk-font-heading-h6-text-size` | `var(--dk-responsive-font-headings-h6-text-size)` | `var(--dk-responsive-font-headings-h6-text-size)` |
+| `--dk-font-input-lg-line-height` | `var(--dk-responsive-font-input-lg-line-height)` | `var(--dk-responsive-font-input-lg-line-height)` |
+| `--dk-font-input-lg-paragraph-spacing` | `var(--dk-responsive-font-input-lg-paragraph-spacing)` | `var(--dk-responsive-font-input-lg-paragraph-spacing)` |
+| `--dk-font-input-lg-text-size` | `var(--dk-responsive-font-input-lg-text-size)` | `var(--dk-responsive-font-input-lg-text-size)` |
+| `--dk-font-input-md-line-height` | `var(--dk-responsive-font-input-md-line-height)` | `var(--dk-responsive-font-input-md-line-height)` |
+| `--dk-font-input-md-paragraph-spacing` | `var(--dk-responsive-font-input-md-paragraph-spacing)` | `var(--dk-responsive-font-input-md-paragraph-spacing)` |
+| `--dk-font-input-md-text-size` | `var(--dk-responsive-font-input-md-text-size)` | `var(--dk-responsive-font-input-md-text-size)` |
+| `--dk-font-input-sm-line-height` | `var(--dk-responsive-font-input-sm-line-height)` | `var(--dk-responsive-font-input-sm-line-height)` |
+| `--dk-font-input-sm-paragraph-spacing` | `var(--dk-responsive-font-input-sm-paragraph-spacing)` | `var(--dk-responsive-font-input-sm-paragraph-spacing)` |
+| `--dk-font-input-sm-text-size` | `var(--dk-responsive-font-input-sm-text-size)` | `var(--dk-responsive-font-input-sm-text-size)` |
+| `--dk-font-overline-lg-line-height` | `var(--dk-responsive-font-overline-lg-line-height)` | `var(--dk-responsive-font-overline-lg-line-height)` |
+| `--dk-font-overline-lg-paragraph-spacing` | `var(--dk-responsive-font-overline-lg-paragraph-spacing)` | `var(--dk-responsive-font-overline-lg-paragraph-spacing)` |
+| `--dk-font-overline-lg-text-size` | `var(--dk-responsive-font-overline-lg-text-size)` | `var(--dk-responsive-font-overline-lg-text-size)` |
+| `--dk-font-overline-md-line-height` | `var(--dk-responsive-font-overline-md-line-height)` | `var(--dk-responsive-font-overline-md-line-height)` |
+| `--dk-font-overline-md-paragraph-spacing` | `var(--dk-responsive-font-overline-md-paragraph-spacing)` | `var(--dk-responsive-font-overline-md-paragraph-spacing)` |
+| `--dk-font-overline-md-text-size` | `var(--dk-responsive-font-overline-md-text-size)` | `var(--dk-responsive-font-overline-md-text-size)` |
+| `--dk-font-overline-sm-line-height` | `var(--dk-responsive-font-overline-sm-line-height)` | `var(--dk-responsive-font-overline-sm-line-height)` |
+| `--dk-font-overline-sm-paragraph-spacing` | `var(--dk-responsive-font-overline-sm-paragraph-spacing)` | `var(--dk-responsive-font-overline-sm-paragraph-spacing)` |
+| `--dk-font-overline-sm-text-size` | `var(--dk-responsive-font-overline-sm-text-size)` | `var(--dk-responsive-font-overline-sm-text-size)` |
+| `--dk-font-scale-body-large-line-height` | `1.625rem` | `1.625rem` |
+| `--dk-font-scale-body-large-text-size` | `var(--dk-primitive-scale-4-5)` | `var(--dk-primitive-scale-4-5)` |
+| `--dk-font-scale-body-medium-line-height` | `var(--dk-primitive-scale-6)` | `var(--dk-primitive-scale-6)` |
+| `--dk-font-scale-body-medium-text-size` | `var(--dk-primitive-scale-4)` | `var(--dk-primitive-scale-4)` |
+| `--dk-font-scale-body-small-line-height` | `var(--dk-primitive-scale-5)` | `var(--dk-primitive-scale-5)` |
+| `--dk-font-scale-body-small-text-size` | `var(--dk-primitive-scale-3-5)` | `var(--dk-primitive-scale-3-5)` |
+| `--dk-font-scale-body-xlarge-line-height` | `var(--dk-primitive-scale-7)` | `var(--dk-primitive-scale-7)` |
+| `--dk-font-scale-body-xlarge-text-size` | `var(--dk-primitive-scale-5)` | `var(--dk-primitive-scale-5)` |
+| `--dk-font-scale-body-xsmall-line-height` | `var(--dk-primitive-scale-4-5)` | `var(--dk-primitive-scale-4-5)` |
+| `--dk-font-scale-body-xsmall-text-size` | `var(--dk-primitive-scale-3)` | `var(--dk-primitive-scale-3)` |
+| `--dk-font-scale-display-large-line-height` | `var(--dk-primitive-scale-12)` | `var(--dk-primitive-scale-12)` |
+| `--dk-font-scale-display-large-text-size` | `var(--dk-primitive-scale-10)` | `var(--dk-primitive-scale-10)` |
+| `--dk-font-scale-display-medium-line-height` | `var(--dk-primitive-scale-11)` | `var(--dk-primitive-scale-11)` |
+| `--dk-font-scale-display-medium-text-size` | `var(--dk-primitive-scale-9)` | `var(--dk-primitive-scale-9)` |
+| `--dk-font-scale-display-small-line-height` | `var(--dk-primitive-scale-10)` | `var(--dk-primitive-scale-10)` |
+| `--dk-font-scale-display-small-text-size` | `var(--dk-primitive-scale-8)` | `var(--dk-primitive-scale-8)` |
+| `--dk-font-scale-display-xlarge-line-height` | `var(--dk-primitive-scale-13)` | `var(--dk-primitive-scale-13)` |
+| `--dk-font-scale-display-xlarge-text-size` | `var(--dk-primitive-scale-11)` | `var(--dk-primitive-scale-11)` |
+| `--dk-font-scale-display-xxlarge-line-height` | `var(--dk-primitive-scale-14)` | `var(--dk-primitive-scale-14)` |
+| `--dk-font-scale-display-xxlarge-text-size` | `var(--dk-primitive-scale-12)` | `var(--dk-primitive-scale-12)` |
+| `--dk-font-scale-heading-large-line-height` | `var(--dk-primitive-scale-9)` | `var(--dk-primitive-scale-9)` |
+| `--dk-font-scale-heading-large-text-size` | `var(--dk-primitive-scale-7)` | `var(--dk-primitive-scale-7)` |
+| `--dk-font-scale-heading-medium-line-height` | `var(--dk-primitive-scale-8)` | `var(--dk-primitive-scale-8)` |
+| `--dk-font-scale-heading-medium-text-size` | `var(--dk-primitive-scale-6)` | `var(--dk-primitive-scale-6)` |
+| `--dk-font-scale-heading-small-line-height` | `var(--dk-primitive-scale-7)` | `var(--dk-primitive-scale-7)` |
+| `--dk-font-scale-heading-small-text-size` | `var(--dk-primitive-scale-5-5)` | `var(--dk-primitive-scale-5-5)` |
+| `--dk-font-scale-heading-xlarge-line-height` | `var(--dk-primitive-scale-10)` | `var(--dk-primitive-scale-10)` |
+| `--dk-font-scale-heading-xlarge-text-size` | `var(--dk-primitive-scale-8)` | `var(--dk-primitive-scale-8)` |
+| `--dk-font-scale-heading-xsmall-line-height` | `var(--dk-primitive-scale-7)` | `var(--dk-primitive-scale-7)` |
+| `--dk-font-scale-heading-xsmall-text-size` | `var(--dk-primitive-scale-5)` | `var(--dk-primitive-scale-5)` |
+| `--dk-font-scale-heading-xxlarge-line-height` | `var(--dk-primitive-scale-12)` | `var(--dk-primitive-scale-12)` |
+| `--dk-font-scale-heading-xxlarge-text-size` | `var(--dk-primitive-scale-10)` | `var(--dk-primitive-scale-10)` |
+| `--dk-font-scale-heading-xxsmall-line-height` | `var(--dk-primitive-scale-6)` | `var(--dk-primitive-scale-6)` |
+| `--dk-font-scale-heading-xxsmall-text-size` | `var(--dk-primitive-scale-4-5)` | `var(--dk-primitive-scale-4-5)` |

package/manifest/tokens/icon.md

@@ -0,0 +1,84 @@
+# Icon colours tokens
+
+Declared values, light and dark. Reference a token by name; never copy its value.
+
+| Token | Light | Dark |
+|---|---|---|
+| `--dk-icon-base-black` | `var(--dk-color-base-black)` | `var(--dk-color-base-black)` |
+| `--dk-icon-base-white` | `var(--dk-color-base-white)` | `var(--dk-color-base-white)` |
+| `--dk-icon-choice-disabled` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-500)` |
+| `--dk-icon-choice-selected` | `var(--dk-color-base-white)` | `var(--dk-color-base-white)` |
+| `--dk-icon-choice-track` | `var(--dk-color-base-white)` | `var(--dk-color-base-white)` |
+| `--dk-icon-control-active` | `var(--dk-color-neutral-700)` | `var(--dk-color-neutral-50)` |
+| `--dk-icon-control-default` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-200)` |
+| `--dk-icon-control-disabled` | `var(--dk-icon-disabled-subtle)` | `var(--dk-icon-disabled-subtle)` |
+| `--dk-icon-control-hover` | `var(--dk-color-neutral-600)` | `var(--dk-color-neutral-100)` |
+| `--dk-icon-default-body` | `var(--dk-color-base-black)` | `var(--dk-color-base-white)` |
+| `--dk-icon-default-body-reverse` | `var(--dk-color-base-white)` | `var(--dk-color-base-black)` |
+| `--dk-icon-disabled-default` | `var(--dk-color-neutral-400)` | `var(--dk-color-neutral-400)` |
+| `--dk-icon-disabled-subtle` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-800)` |
+| `--dk-icon-disabled-subtle-active` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-600)` |
+| `--dk-icon-disabled-subtle-hover` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-700)` |
+| `--dk-icon-error-active` | `var(--dk-color-error-700)` | `var(--dk-color-error-200)` |
+| `--dk-icon-error-default` | `var(--dk-color-error-500)` | `var(--dk-color-error-400)` |
+| `--dk-icon-error-focus` | `var(--dk-color-error-700)` | `var(--dk-color-error-200)` |
+| `--dk-icon-error-hover` | `var(--dk-color-error-600)` | `var(--dk-color-error-300)` |
+| `--dk-icon-error-subtle` | `var(--dk-color-error-50)` | `var(--dk-color-error-900)` |
+| `--dk-icon-error-subtle-focus` | `var(--dk-color-error-200)` | `var(--dk-color-error-700)` |
+| `--dk-icon-error-subtle-hover` | `var(--dk-color-error-100)` | `var(--dk-color-error-800)` |
+| `--dk-icon-field-default` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-200)` |
+| `--dk-icon-field-disabled` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-800)` |
+| `--dk-icon-field-hover` | `var(--dk-color-neutral-700)` | `var(--dk-color-neutral-50)` |
+| `--dk-icon-field-subtle` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-500)` |
+| `--dk-icon-field-subtle-hover` | `var(--dk-color-neutral-600)` | `var(--dk-color-neutral-400)` |
+| `--dk-icon-hue-next1-default` | `var(--dk-primitive-color-primary-next1-500)` | `var(--dk-primitive-color-primary-next1-400)` |
+| `--dk-icon-hue-next2-default` | `var(--dk-primitive-color-primary-next2-500)` | `var(--dk-primitive-color-primary-next2-400)` |
+| `--dk-icon-hue-next3-default` | `var(--dk-primitive-color-primary-next3-500)` | `var(--dk-primitive-color-primary-next3-400)` |
+| `--dk-icon-hue-next4-default` | `var(--dk-primitive-color-primary-next4-500)` | `var(--dk-primitive-color-primary-next4-400)` |
+| `--dk-icon-hue-prev1-default` | `var(--dk-primitive-color-primary-prev1-500)` | `var(--dk-primitive-color-primary-prev1-400)` |
+| `--dk-icon-hue-prev2-default` | `var(--dk-primitive-color-primary-prev2-500)` | `var(--dk-primitive-color-primary-prev2-400)` |
+| `--dk-icon-hue-prev3-default` | `var(--dk-primitive-color-primary-prev3-500)` | `var(--dk-primitive-color-primary-prev3-400)` |
+| `--dk-icon-hue-prev4-default` | `var(--dk-primitive-color-primary-prev4-500)` | `var(--dk-primitive-color-primary-prev4-400)` |
+| `--dk-icon-hue-primary-default` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-400)` |
+| `--dk-icon-information-active` | `var(--dk-color-information-700)` | `var(--dk-color-information-200)` |
+| `--dk-icon-information-default` | `var(--dk-color-information-500)` | `var(--dk-color-information-400)` |
+| `--dk-icon-information-focus` | `var(--dk-color-information-700)` | `var(--dk-color-information-200)` |
+| `--dk-icon-information-hover` | `var(--dk-color-information-600)` | `var(--dk-color-information-300)` |
+| `--dk-icon-information-subtle` | `var(--dk-color-information-50)` | `var(--dk-color-information-900)` |
+| `--dk-icon-information-subtle-focus` | `var(--dk-color-information-200)` | `var(--dk-color-information-700)` |
+| `--dk-icon-information-subtle-hover` | `var(--dk-color-information-100)` | `var(--dk-color-information-800)` |
+| `--dk-icon-inverse-default` | `var(--dk-color-base-white)` | `var(--dk-color-neutral-1000)` |
+| `--dk-icon-inverse-neutral` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-600)` |
+| `--dk-icon-neutral-active` | `var(--dk-color-neutral-700)` | `var(--dk-color-neutral-100)` |
+| `--dk-icon-neutral-default` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-200)` |
+| `--dk-icon-neutral-focus` | `var(--dk-color-neutral-700)` | `var(--dk-color-neutral-50)` |
+| `--dk-icon-neutral-hover` | `var(--dk-color-neutral-600)` | `var(--dk-color-neutral-100)` |
+| `--dk-icon-neutral-subtle` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-600)` |
+| `--dk-icon-neutral-subtle-focus` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-400)` |
+| `--dk-icon-neutral-subtle-hover` | `var(--dk-color-neutral-400)` | `var(--dk-color-neutral-500)` |
+| `--dk-icon-primary-active` | `var(--dk-color-primary-700)` | `var(--dk-color-primary-200)` |
+| `--dk-icon-primary-default` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-500)` |
+| `--dk-icon-primary-disabled` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-700)` |
+| `--dk-icon-primary-disabled-active` | `var(--dk-color-primary-400)` | `var(--dk-color-primary-500)` |
+| `--dk-icon-primary-disabled-hover` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-600)` |
+| `--dk-icon-primary-focus` | `var(--dk-color-primary-700)` | `var(--dk-color-primary-300)` |
+| `--dk-icon-primary-highlight` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-400)` |
+| `--dk-icon-primary-hover` | `var(--dk-color-primary-600)` | `var(--dk-color-primary-400)` |
+| `--dk-icon-primary-oos` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-600)` |
+| `--dk-icon-primary-subtle` | `var(--dk-color-primary-50)` | `var(--dk-color-primary-800)` |
+| `--dk-icon-primary-subtle-focus` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-600)` |
+| `--dk-icon-primary-subtle-hover` | `var(--dk-color-primary-100)` | `var(--dk-color-primary-700)` |
+| `--dk-icon-success-active` | `var(--dk-icon-primary-active)` | `var(--dk-icon-primary-active)` |
+| `--dk-icon-success-default` | `var(--dk-color-success-500)` | `var(--dk-color-success-400)` |
+| `--dk-icon-success-focus` | `var(--dk-color-success-700)` | `var(--dk-color-success-200)` |
+| `--dk-icon-success-hover` | `var(--dk-color-success-600)` | `var(--dk-color-success-300)` |
+| `--dk-icon-success-subtle` | `var(--dk-color-success-50)` | `var(--dk-color-success-900)` |
+| `--dk-icon-success-subtle-focus` | `var(--dk-color-success-200)` | `var(--dk-color-success-700)` |
+| `--dk-icon-success-subtle-hover` | `var(--dk-color-success-100)` | `var(--dk-color-success-800)` |
+| `--dk-icon-warning-active` | `var(--dk-color-warning-700)` | `var(--dk-color-warning-200)` |
+| `--dk-icon-warning-default` | `var(--dk-color-warning-500)` | `var(--dk-color-warning-400)` |
+| `--dk-icon-warning-focus` | `var(--dk-color-warning-700)` | `var(--dk-color-warning-200)` |
+| `--dk-icon-warning-hover` | `var(--dk-color-warning-600)` | `var(--dk-color-warning-300)` |
+| `--dk-icon-warning-subtle` | `var(--dk-color-warning-50)` | `var(--dk-color-warning-900)` |
+| `--dk-icon-warning-subtle-focus` | `var(--dk-color-warning-200)` | `var(--dk-color-warning-700)` |
+| `--dk-icon-warning-subtle-hover` | `var(--dk-color-warning-100)` | `var(--dk-color-warning-800)` |

package/manifest/tokens/interactive.md

@@ -0,0 +1,37 @@
+# Interaction tokens
+
+Declared values, light and dark. Reference a token by name; never copy its value.
+
+| Token | Light | Dark |
+|---|---|---|
+| `--dk-interactive-control-padding-block` | `var(--dk-primitive-scale-1)` | `var(--dk-primitive-scale-1)` |
+| `--dk-interactive-control-padding-inline` | `var(--dk-primitive-scale-1-5)` | `var(--dk-primitive-scale-1-5)` |
+| `--dk-interactive-control-radius` | `var(--dk-border-radius-150)` | `var(--dk-border-radius-150)` |
+| `--dk-interactive-grow-panel` | `var(--dk-motion-grow-scale-panel)` | `var(--dk-motion-grow-scale-panel)` |
+| `--dk-interactive-grow-surface` | `var(--dk-motion-grow-scale-surface)` | `var(--dk-motion-grow-scale-surface)` |
+| `--dk-interactive-item-padding-block` | `var(--dk-primitive-scale-2)` | `var(--dk-primitive-scale-2)` |
+| `--dk-interactive-item-padding-inline` | `var(--dk-primitive-scale-2-5)` | `var(--dk-primitive-scale-2-5)` |
+| `--dk-interactive-item-radius` | `var(--dk-border-radius-150)` | `var(--dk-border-radius-150)` |
+| `--dk-interactive-mark-reach` | `1` | `0.6` |
+| `--dk-interactive-mark-shade` | `var(--dk-color-base-black)` | `var(--dk-color-base-white)` |
+| `--dk-interactive-panel-padding-block` | `var(--dk-primitive-scale-5)` | `var(--dk-primitive-scale-5)` |
+| `--dk-interactive-panel-padding-inline` | `var(--dk-primitive-scale-5)` | `var(--dk-primitive-scale-5)` |
+| `--dk-interactive-panel-radius` | `var(--dk-border-radius-300)` | `var(--dk-border-radius-300)` |
+| `--dk-interactive-press-compact` | `var(--dk-motion-press-scale-compact)` | `var(--dk-motion-press-scale-compact)` |
+| `--dk-interactive-press-control` | `var(--dk-motion-press-scale-control)` | `var(--dk-motion-press-scale-control)` |
+| `--dk-interactive-press-item` | `var(--dk-motion-press-scale-item)` | `var(--dk-motion-press-scale-item)` |
+| `--dk-interactive-press-panel` | `var(--dk-motion-press-scale-panel)` | `var(--dk-motion-press-scale-panel)` |
+| `--dk-interactive-press-surface` | `var(--dk-motion-press-scale-surface)` | `var(--dk-motion-press-scale-surface)` |
+| `--dk-interactive-ring-width` | `var(--dk-primitive-scale-0-5)` | `var(--dk-primitive-scale-0-5)` |
+| `--dk-interactive-surface-padding-block` | `var(--dk-primitive-scale-4)` | `var(--dk-primitive-scale-4)` |
+| `--dk-interactive-surface-padding-inline` | `var(--dk-primitive-scale-4)` | `var(--dk-primitive-scale-4)` |
+| `--dk-interactive-surface-radius` | `var(--dk-border-radius-200)` | `var(--dk-border-radius-200)` |
+| `--dk-interactive-target-min` | `var(--dk-primitive-scale-6)` | `var(--dk-primitive-scale-6)` |
+| `--dk-interactive-target-min-touch` | `var(--dk-primitive-scale-11)` | `var(--dk-primitive-scale-11)` |
+| `--dk-interactive-tone-fill-active` | `initial` | `initial` |
+| `--dk-interactive-tone-fill-hover` | `initial` | `initial` |
+| `--dk-interactive-tone-mark` | `initial` | `initial` |
+| `--dk-interactive-tone-mark-active` | `initial` | `initial` |
+| `--dk-interactive-tone-mark-hover` | `initial` | `initial` |
+| `--dk-interactive-tone-text` | `initial` | `initial` |
+| `--dk-interactive-tone-text-subtle` | `initial` | `initial` |