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

package/manifest/tokens/motion.md

@@ -0,0 +1,69 @@
+# Motion tokens
+
+Declared values, light and dark. Reference a token by name; never copy its value.
+
+| Token | Light | Dark |
+|---|---|---|
+| `--dk-motion-cascade-beat` | `60ms` | `60ms` |
+| `--dk-motion-cascade-duration` | `var(--dk-motion-duration-slow)` | `var(--dk-motion-duration-slow)` |
+| `--dk-motion-cascade-easing` | `var(--dk-motion-easing-emphasized)` | `var(--dk-motion-easing-emphasized)` |
+| `--dk-motion-cascade-max-beats` | `8` | `8` |
+| `--dk-motion-cascade-rise` | `12px` | `12px` |
+| `--dk-motion-curtain-content-delay` | `var(--dk-primitive-motion-duration-480)` | `var(--dk-primitive-motion-duration-480)` |
+| `--dk-motion-curtain-recede-duration` | `var(--dk-primitive-motion-duration-850)` | `var(--dk-primitive-motion-duration-850)` |
+| `--dk-motion-curtain-recede-easing` | `var(--dk-motion-easing-gentle)` | `var(--dk-motion-easing-gentle)` |
+| `--dk-motion-curtain-recede-opacity` | `0.6` | `0.6` |
+| `--dk-motion-curtain-recede-scale` | `0.95` | `0.95` |
+| `--dk-motion-curtain-reveal-duration` | `var(--dk-primitive-motion-duration-120)` | `var(--dk-primitive-motion-duration-120)` |
+| `--dk-motion-curtain-reveal-easing` | `var(--dk-motion-easing-gentle)` | `var(--dk-motion-easing-gentle)` |
+| `--dk-motion-curtain-rise-delay` | `var(--dk-primitive-motion-duration-650)` | `var(--dk-primitive-motion-duration-650)` |
+| `--dk-motion-curtain-rise-duration` | `var(--dk-primitive-motion-duration-900)` | `var(--dk-primitive-motion-duration-900)` |
+| `--dk-motion-curtain-rise-easing` | `var(--dk-primitive-motion-easing-sweep)` | `var(--dk-primitive-motion-easing-sweep)` |
+| `--dk-motion-duration-brisk` | `var(--dk-primitive-motion-duration-200)` | `var(--dk-primitive-motion-duration-200)` |
+| `--dk-motion-duration-moderate` | `var(--dk-primitive-motion-duration-320)` | `var(--dk-primitive-motion-duration-320)` |
+| `--dk-motion-duration-quick` | `var(--dk-primitive-motion-duration-120)` | `var(--dk-primitive-motion-duration-120)` |
+| `--dk-motion-duration-slow` | `var(--dk-primitive-motion-duration-480)` | `var(--dk-primitive-motion-duration-480)` |
+| `--dk-motion-easing-emphasized` | `var(--dk-primitive-motion-easing-emphasized)` | `var(--dk-primitive-motion-easing-emphasized)` |
+| `--dk-motion-easing-exit` | `var(--dk-primitive-motion-easing-exit)` | `var(--dk-primitive-motion-easing-exit)` |
+| `--dk-motion-easing-gentle` | `var(--dk-primitive-motion-easing-gentle)` | `var(--dk-primitive-motion-easing-gentle)` |
+| `--dk-motion-easing-spring` | `var(--dk-primitive-motion-easing-spring)` | `var(--dk-primitive-motion-easing-spring)` |
+| `--dk-motion-easing-standard` | `var(--dk-primitive-motion-easing-standard)` | `var(--dk-primitive-motion-easing-standard)` |
+| `--dk-motion-enter-duration` | `var(--dk-motion-duration-moderate)` | `var(--dk-motion-duration-moderate)` |
+| `--dk-motion-enter-easing` | `var(--dk-motion-easing-emphasized)` | `var(--dk-motion-easing-emphasized)` |
+| `--dk-motion-enter-large-duration` | `var(--dk-motion-duration-slow)` | `var(--dk-motion-duration-slow)` |
+| `--dk-motion-enter-large-easing` | `var(--dk-motion-easing-emphasized)` | `var(--dk-motion-easing-emphasized)` |
+| `--dk-motion-exit-duration` | `var(--dk-motion-duration-brisk)` | `var(--dk-motion-duration-brisk)` |
+| `--dk-motion-exit-easing` | `var(--dk-motion-easing-exit)` | `var(--dk-motion-easing-exit)` |
+| `--dk-motion-exit-large-duration` | `var(--dk-motion-duration-moderate)` | `var(--dk-motion-duration-moderate)` |
+| `--dk-motion-exit-large-easing` | `var(--dk-motion-easing-exit)` | `var(--dk-motion-easing-exit)` |
+| `--dk-motion-expand-duration` | `var(--dk-motion-duration-moderate)` | `var(--dk-motion-duration-moderate)` |
+| `--dk-motion-expand-easing` | `var(--dk-motion-easing-emphasized)` | `var(--dk-motion-easing-emphasized)` |
+| `--dk-motion-feedback-duration` | `var(--dk-motion-duration-brisk)` | `var(--dk-motion-duration-brisk)` |
+| `--dk-motion-feedback-easing` | `var(--dk-motion-easing-spring)` | `var(--dk-motion-easing-spring)` |
+| `--dk-motion-grow-scale-panel` | `var(--dk-primitive-transform-scale-hover-panel)` | `var(--dk-primitive-transform-scale-hover-panel)` |
+| `--dk-motion-grow-scale-surface` | `var(--dk-primitive-transform-scale-hover-surface)` | `var(--dk-primitive-transform-scale-hover-surface)` |
+| `--dk-motion-loop-easing` | `linear` | `linear` |
+| `--dk-motion-page-fade-duration` | `var(--dk-primitive-motion-duration-240)` | `var(--dk-primitive-motion-duration-240)` |
+| `--dk-motion-page-fade-easing` | `var(--dk-motion-easing-standard)` | `var(--dk-motion-easing-standard)` |
+| `--dk-motion-page-fade-exit-duration` | `var(--dk-motion-duration-brisk)` | `var(--dk-motion-duration-brisk)` |
+| `--dk-motion-page-fade-exit-easing` | `var(--dk-motion-easing-gentle)` | `var(--dk-motion-easing-gentle)` |
+| `--dk-motion-page-rise` | `16px` | `16px` |
+| `--dk-motion-page-slide-duration` | `var(--dk-motion-duration-moderate)` | `var(--dk-motion-duration-moderate)` |
+| `--dk-motion-page-slide-easing` | `var(--dk-motion-easing-standard)` | `var(--dk-motion-easing-standard)` |
+| `--dk-motion-page-slide-max` | `600px` | `600px` |
+| `--dk-motion-press-duration` | `var(--dk-motion-duration-brisk)` | `var(--dk-motion-duration-brisk)` |
+| `--dk-motion-press-easing` | `var(--dk-motion-easing-standard)` | `var(--dk-motion-easing-standard)` |
+| `--dk-motion-press-scale-compact` | `var(--dk-primitive-transform-scale-active-compact)` | `var(--dk-primitive-transform-scale-active-compact)` |
+| `--dk-motion-press-scale-control` | `var(--dk-primitive-transform-scale-active-control)` | `var(--dk-primitive-transform-scale-active-control)` |
+| `--dk-motion-press-scale-item` | `var(--dk-primitive-transform-scale-active-item)` | `var(--dk-primitive-transform-scale-active-item)` |
+| `--dk-motion-press-scale-panel` | `var(--dk-primitive-transform-scale-active-panel)` | `var(--dk-primitive-transform-scale-active-panel)` |
+| `--dk-motion-press-scale-surface` | `var(--dk-primitive-transform-scale-active-surface)` | `var(--dk-primitive-transform-scale-active-surface)` |
+| `--dk-motion-rise-char-beat` | `15ms` | `15ms` |
+| `--dk-motion-rise-row-beat` | `20ms` | `20ms` |
+| `--dk-motion-state-duration` | `var(--dk-motion-state-exit-duration)` | `var(--dk-motion-state-exit-duration)` |
+| `--dk-motion-state-easing` | `var(--dk-motion-easing-gentle)` | `var(--dk-motion-easing-gentle)` |
+| `--dk-motion-state-enter-duration` | `var(--dk-primitive-motion-duration-160)` | `var(--dk-primitive-motion-duration-160)` |
+| `--dk-motion-state-exit-duration` | `var(--dk-primitive-motion-duration-240)` | `var(--dk-primitive-motion-duration-240)` |
+| `--dk-motion-travel-duration` | `var(--dk-motion-duration-moderate)` | `var(--dk-motion-duration-moderate)` |
+| `--dk-motion-travel-easing` | `var(--dk-motion-easing-emphasized)` | `var(--dk-motion-easing-emphasized)` |
+| `--dk-motion-travel-lag` | `0.2` | `0.2` |

package/manifest/tokens/radius.md

@@ -0,0 +1,20 @@
+# Radius tokens
+
+Declared values, light and dark. Reference a token by name; never copy its value.
+
+| Token | Light | Dark |
+|---|---|---|
+| `--dk-border-radius-0` | `var(--dk-dynamic-border-radius-0)` | `var(--dk-dynamic-border-radius-0)` |
+| `--dk-border-radius-25` | `var(--dk-dynamic-border-radius-25)` | `var(--dk-dynamic-border-radius-25)` |
+| `--dk-border-radius-50` | `var(--dk-dynamic-border-radius-50)` | `var(--dk-dynamic-border-radius-50)` |
+| `--dk-border-radius-75` | `var(--dk-dynamic-border-radius-75)` | `var(--dk-dynamic-border-radius-75)` |
+| `--dk-border-radius-100` | `var(--dk-dynamic-border-radius-100)` | `var(--dk-dynamic-border-radius-100)` |
+| `--dk-border-radius-125` | `var(--dk-dynamic-border-radius-125)` | `var(--dk-dynamic-border-radius-125)` |
+| `--dk-border-radius-150` | `var(--dk-dynamic-border-radius-150)` | `var(--dk-dynamic-border-radius-150)` |
+| `--dk-border-radius-200` | `var(--dk-dynamic-border-radius-200)` | `var(--dk-dynamic-border-radius-200)` |
+| `--dk-border-radius-300` | `var(--dk-dynamic-border-radius-300)` | `var(--dk-dynamic-border-radius-300)` |
+| `--dk-border-radius-400` | `var(--dk-dynamic-border-radius-400)` | `var(--dk-dynamic-border-radius-400)` |
+| `--dk-border-radius-500` | `var(--dk-dynamic-border-radius-500)` | `var(--dk-dynamic-border-radius-500)` |
+| `--dk-border-radius-600` | `var(--dk-dynamic-border-radius-600)` | `var(--dk-dynamic-border-radius-600)` |
+| `--dk-border-radius-round` | `var(--dk-dynamic-border-radius-round)` | `var(--dk-dynamic-border-radius-round)` |
+| `--dk-border-radius-round-fixed` | `624.9375rem` | `624.9375rem` |

package/manifest/tokens/shadow.md

@@ -0,0 +1,28 @@
+# Shadows tokens
+
+Declared values, light and dark. Reference a token by name; never copy its value.
+
+| Token | Light | Dark |
+|---|---|---|
+| `--dk-shadow-card` | `0 4px 8px -2px var(--dk-shadow-drop-md-1), 0 2px 4px -2px var(--dk-shadow-drop-md-2)` | `inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.56), 0 8px 20px 0 rgba(0, 0, 0, 0.64)` |
+| `--dk-shadow-card-hover` | `0 12px 16px -4px var(--dk-shadow-drop-lg-1), 0 4px 6px -2px var(--dk-shadow-drop-lg-2)` | `inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 16px 32px 0 rgba(0, 0, 0, 0.72)` |
+| `--dk-shadow-drop-2xl` | `color-mix(in srgb, var(--dk-color-base-black) 18%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 36%, transparent)` |
+| `--dk-shadow-drop-3xl` | `color-mix(in srgb, var(--dk-color-base-black) 14%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 28%, transparent)` |
+| `--dk-shadow-drop-lg-1` | `color-mix(in srgb, var(--dk-color-base-black) 8%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 16%, transparent)` |
+| `--dk-shadow-drop-lg-2` | `color-mix(in srgb, var(--dk-color-base-black) 3%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 6%, transparent)` |
+| `--dk-shadow-drop-md-1` | `color-mix(in srgb, var(--dk-color-base-black) 10%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 20%, transparent)` |
+| `--dk-shadow-drop-md-2` | `color-mix(in srgb, var(--dk-color-base-black) 6%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 12%, transparent)` |
+| `--dk-shadow-drop-sm-1` | `color-mix(in srgb, var(--dk-color-base-black) 10%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 20%, transparent)` |
+| `--dk-shadow-drop-sm-2` | `color-mix(in srgb, var(--dk-color-base-black) 6%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 12%, transparent)` |
+| `--dk-shadow-drop-xl-1` | `color-mix(in srgb, var(--dk-color-base-black) 8%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 16%, transparent)` |
+| `--dk-shadow-drop-xl-2` | `color-mix(in srgb, var(--dk-color-base-black) 3%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 6%, transparent)` |
+| `--dk-shadow-drop-xs` | `color-mix(in srgb, var(--dk-color-base-black) 5%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 10%, transparent)` |
+| `--dk-shadow-floating` | `0 4px 20px 0 rgba(0, 0, 0, 0.08)` | `inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 6px 24px 0 rgba(0, 0, 0, 0.48)` |
+| `--dk-shadow-focus-ring` | `0 0 0 4px var(--dk-color-primary-300)` | `0 0 0 4px var(--dk-color-primary-300)` |
+| `--dk-shadow-inner-lg` | `color-mix(in srgb, var(--dk-color-base-black) 10%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 60%, transparent)` |
+| `--dk-shadow-inner-md` | `color-mix(in srgb, var(--dk-color-base-black) 10%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 60%, transparent)` |
+| `--dk-shadow-inner-sm` | `color-mix(in srgb, var(--dk-color-base-black) 10%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 60%, transparent)` |
+| `--dk-shadow-lifted` | `0 4px 10px 0 rgba(0, 0, 0, 0.08)` | `0 4px 12px 0 rgba(0, 0, 0, 0.44)` |
+| `--dk-shadow-overlay` | `0 2px 6px 0 rgba(0, 0, 0, 0.10), 0 12px 32px 0 rgba(0, 0, 0, 0.22)` | `inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 2px 6px 0 rgba(0, 0, 0, 0.40), 0 16px 40px 0 rgba(0, 0, 0, 0.64)` |
+| `--dk-shadow-panel` | `0 0 24px 4px rgba(0, 0, 0, 0.20), 0 0 120px 32px rgba(0, 0, 0, 0.45)` | `0 0 16px 0 rgba(0, 0, 0, 0.20), 0 0 96px 8px rgba(0, 0, 0, 0.30)` |
+| `--dk-shadow-raised` | `0 4px 8px 0 rgba(0, 0, 0, 0.04)` | `0 4px 8px 0 rgba(0, 0, 0, 0.36)` |

package/manifest/tokens/spacing.md

@@ -0,0 +1,35 @@
+# Spacing tokens
+
+Declared values, light and dark. Reference a token by name; never copy its value.
+
+| Token | Light | Dark |
+|---|---|---|
+| `--dk-spacing-0-5` | `var(--dk-dynamic-spacing-0-5)` | `var(--dk-dynamic-spacing-0-5)` |
+| `--dk-spacing-0-25` | `var(--dk-dynamic-spacing-0-25)` | `var(--dk-dynamic-spacing-0-25)` |
+| `--dk-spacing-1` | `var(--dk-dynamic-spacing-1)` | `var(--dk-dynamic-spacing-1)` |
+| `--dk-spacing-1-5` | `var(--dk-dynamic-spacing-1-5)` | `var(--dk-dynamic-spacing-1-5)` |
+| `--dk-spacing-2` | `var(--dk-dynamic-spacing-2)` | `var(--dk-dynamic-spacing-2)` |
+| `--dk-spacing-2-5` | `var(--dk-dynamic-spacing-2-5)` | `var(--dk-dynamic-spacing-2-5)` |
+| `--dk-spacing-3` | `var(--dk-dynamic-spacing-3)` | `var(--dk-dynamic-spacing-3)` |
+| `--dk-spacing-3-5` | `var(--dk-dynamic-spacing-3-5)` | `var(--dk-dynamic-spacing-3-5)` |
+| `--dk-spacing-4` | `var(--dk-dynamic-spacing-4)` | `var(--dk-dynamic-spacing-4)` |
+| `--dk-spacing-4-5` | `var(--dk-dynamic-spacing-4-5)` | `var(--dk-dynamic-spacing-4-5)` |
+| `--dk-spacing-5` | `var(--dk-dynamic-spacing-5)` | `var(--dk-dynamic-spacing-5)` |
+| `--dk-spacing-5-5` | `var(--dk-dynamic-spacing-5-5)` | `var(--dk-dynamic-spacing-5-5)` |
+| `--dk-spacing-6` | `var(--dk-dynamic-spacing-6)` | `var(--dk-dynamic-spacing-6)` |
+| `--dk-spacing-7` | `var(--dk-dynamic-spacing-7)` | `var(--dk-dynamic-spacing-7)` |
+| `--dk-spacing-8` | `var(--dk-dynamic-spacing-8)` | `var(--dk-dynamic-spacing-8)` |
+| `--dk-spacing-9` | `var(--dk-dynamic-spacing-9)` | `var(--dk-dynamic-spacing-9)` |
+| `--dk-spacing-10` | `var(--dk-dynamic-spacing-10)` | `var(--dk-dynamic-spacing-10)` |
+| `--dk-spacing-11` | `var(--dk-dynamic-spacing-11)` | `var(--dk-dynamic-spacing-11)` |
+| `--dk-spacing-12` | `var(--dk-dynamic-spacing-12)` | `var(--dk-dynamic-spacing-12)` |
+| `--dk-spacing-14` | `var(--dk-dynamic-spacing-14)` | `var(--dk-dynamic-spacing-14)` |
+| `--dk-spacing-16` | `var(--dk-dynamic-spacing-16)` | `var(--dk-dynamic-spacing-16)` |
+| `--dk-spacing-20` | `var(--dk-dynamic-spacing-20)` | `var(--dk-dynamic-spacing-20)` |
+| `--dk-spacing-24` | `var(--dk-dynamic-spacing-24)` | `var(--dk-dynamic-spacing-24)` |
+| `--dk-spacing-28` | `var(--dk-dynamic-spacing-28)` | `var(--dk-dynamic-spacing-28)` |
+| `--dk-spacing-32` | `var(--dk-dynamic-spacing-32)` | `var(--dk-dynamic-spacing-32)` |
+| `--dk-spacing-40` | `var(--dk-dynamic-spacing-40)` | `var(--dk-dynamic-spacing-40)` |
+| `--dk-spacing-48` | `var(--dk-dynamic-spacing-48)` | `var(--dk-dynamic-spacing-48)` |
+| `--dk-spacing-56` | `var(--dk-dynamic-spacing-56)` | `var(--dk-dynamic-spacing-56)` |
+| `--dk-spacing-64` | `var(--dk-dynamic-spacing-64)` | `var(--dk-dynamic-spacing-64)` |

package/manifest/tokens/surface.md

@@ -0,0 +1,138 @@
+# Surfaces tokens
+
+Declared values, light and dark. Reference a token by name; never copy its value.
+
+| Token | Light | Dark |
+|---|---|---|
+| `--dk-surface-backdrop-black` | `#000000cc` | `#000000cc` |
+| `--dk-surface-backdrop-soft` | `#00000066` | `#00000066` |
+| `--dk-surface-backdrop-transparent` | `#ffffff00` | `#26262600` |
+| `--dk-surface-base-black` | `var(--dk-color-base-black)` | `var(--dk-color-base-black)` |
+| `--dk-surface-base-white` | `var(--dk-color-base-white)` | `var(--dk-color-base-white)` |
+| `--dk-surface-canvas-default` | `var(--dk-color-neutral-25)` | `var(--dk-color-neutral-1100)` |
+| `--dk-surface-card-active` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
+| `--dk-surface-card-default` | `var(--dk-color-base-white)` | `var(--dk-color-neutral-1100)` |
+| `--dk-surface-card-focus` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
+| `--dk-surface-card-hover` | `var(--dk-color-neutral-25)` | `var(--dk-color-neutral-900)` |
+| `--dk-surface-card-secondary` | `var(--dk-color-neutral-25)` | `var(--dk-color-neutral-900)` |
+| `--dk-surface-card-tertiary` | `var(--dk-color-neutral-1000)` | `var(--dk-color-neutral-50)` |
+| `--dk-surface-choice-card` | `var(--dk-color-base-white)` | `var(--dk-color-neutral-1100)` |
+| `--dk-surface-choice-card-active` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-900)` |
+| `--dk-surface-choice-card-hover` | `var(--dk-color-neutral-25)` | `var(--dk-color-neutral-1000)` |
+| `--dk-surface-choice-disabled` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-800)` |
+| `--dk-surface-choice-selected` | `var(--dk-color-primary-600)` | `var(--dk-color-primary-500)` |
+| `--dk-surface-choice-selected-active` | `var(--dk-color-primary-800)` | `var(--dk-color-primary-700)` |
+| `--dk-surface-choice-selected-hover` | `var(--dk-color-primary-700)` | `var(--dk-color-primary-600)` |
+| `--dk-surface-choice-track` | `var(--dk-color-neutral-400)` | `var(--dk-color-neutral-600)` |
+| `--dk-surface-choice-track-active` | `var(--dk-color-neutral-600)` | `var(--dk-color-neutral-400)` |
+| `--dk-surface-choice-track-hover` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-500)` |
+| `--dk-surface-control-active` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-800)` |
+| `--dk-surface-control-default` | `var(--dk-color-neutral-25)` | `var(--dk-color-neutral-1000)` |
+| `--dk-surface-control-disabled` | `var(--dk-surface-disabled-subtle)` | `var(--dk-surface-disabled-subtle)` |
+| `--dk-surface-control-hover` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-900)` |
+| `--dk-surface-current` | `var(--dk-surface-level-0)` | `var(--dk-surface-level-0)` |
+| `--dk-surface-curtain-backdrop` | `var(--dk-color-neutral-1000)` | `var(--dk-color-base-black)` |
+| `--dk-surface-default-body` | `var(--dk-color-base-white)` | `var(--dk-color-neutral-1100)` |
+| `--dk-surface-default-body-reverse` | `var(--dk-color-neutral-1100)` | `var(--dk-color-base-white)` |
+| `--dk-surface-disabled-default` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-300)` |
+| `--dk-surface-disabled-subtle` | `var(--dk-color-neutral-25)` | `var(--dk-color-neutral-1000)` |
+| `--dk-surface-error-default` | `var(--dk-color-error-500)` | `var(--dk-color-error-700)` |
+| `--dk-surface-error-focus` | `var(--dk-color-error-700)` | `var(--dk-color-error-500)` |
+| `--dk-surface-error-hover` | `var(--dk-color-error-600)` | `var(--dk-color-error-600)` |
+| `--dk-surface-error-mark` | `var(--dk-color-error-600)` | `var(--dk-color-error-600)` |
+| `--dk-surface-error-solid` | `var(--dk-color-error-700)` | `var(--dk-color-error-700)` |
+| `--dk-surface-error-subtle` | `var(--dk-color-error-50)` | `var(--dk-color-error-900)` |
+| `--dk-surface-error-subtle-focus` | `var(--dk-color-error-200)` | `var(--dk-color-error-700)` |
+| `--dk-surface-error-subtle-hover` | `var(--dk-color-error-100)` | `var(--dk-color-error-800)` |
+| `--dk-surface-field-action-active` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
+| `--dk-surface-field-action-hover` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
+| `--dk-surface-field-default` | `var(--dk-color-base-white)` | `var(--dk-color-neutral-1100)` |
+| `--dk-surface-field-hover` | `var(--dk-color-neutral-25)` | `var(--dk-color-neutral-900)` |
+| `--dk-surface-glass-default` | `var(--dk-color-base-white-60)` | `var(--dk-color-base-black-60)` |
+| `--dk-surface-hue-next1-solid` | `var(--dk-primitive-color-primary-next1-600)` | `var(--dk-primitive-color-primary-next1-600)` |
+| `--dk-surface-hue-next1-subtle` | `var(--dk-primitive-color-primary-next1-50)` | `var(--dk-primitive-color-primary-next1-850)` |
+| `--dk-surface-hue-next2-solid` | `var(--dk-primitive-color-primary-next2-600)` | `var(--dk-primitive-color-primary-next2-600)` |
+| `--dk-surface-hue-next2-subtle` | `var(--dk-primitive-color-primary-next2-50)` | `var(--dk-primitive-color-primary-next2-850)` |
+| `--dk-surface-hue-next3-solid` | `var(--dk-primitive-color-primary-next3-600)` | `var(--dk-primitive-color-primary-next3-600)` |
+| `--dk-surface-hue-next3-subtle` | `var(--dk-primitive-color-primary-next3-50)` | `var(--dk-primitive-color-primary-next3-850)` |
+| `--dk-surface-hue-next4-solid` | `var(--dk-primitive-color-primary-next4-600)` | `var(--dk-primitive-color-primary-next4-600)` |
+| `--dk-surface-hue-next4-subtle` | `var(--dk-primitive-color-primary-next4-50)` | `var(--dk-primitive-color-primary-next4-850)` |
+| `--dk-surface-hue-prev1-solid` | `var(--dk-primitive-color-primary-prev1-600)` | `var(--dk-primitive-color-primary-prev1-600)` |
+| `--dk-surface-hue-prev1-subtle` | `var(--dk-primitive-color-primary-prev1-50)` | `var(--dk-primitive-color-primary-prev1-850)` |
+| `--dk-surface-hue-prev2-solid` | `var(--dk-primitive-color-primary-prev2-600)` | `var(--dk-primitive-color-primary-prev2-600)` |
+| `--dk-surface-hue-prev2-subtle` | `var(--dk-primitive-color-primary-prev2-50)` | `var(--dk-primitive-color-primary-prev2-850)` |
+| `--dk-surface-hue-prev3-solid` | `var(--dk-primitive-color-primary-prev3-600)` | `var(--dk-primitive-color-primary-prev3-600)` |
+| `--dk-surface-hue-prev3-subtle` | `var(--dk-primitive-color-primary-prev3-50)` | `var(--dk-primitive-color-primary-prev3-850)` |
+| `--dk-surface-hue-prev4-solid` | `var(--dk-primitive-color-primary-prev4-600)` | `var(--dk-primitive-color-primary-prev4-600)` |
+| `--dk-surface-hue-prev4-subtle` | `var(--dk-primitive-color-primary-prev4-50)` | `var(--dk-primitive-color-primary-prev4-850)` |
+| `--dk-surface-hue-primary-solid` | `var(--dk-color-primary-600)` | `var(--dk-color-primary-600)` |
+| `--dk-surface-hue-primary-subtle` | `var(--dk-color-primary-50)` | `var(--dk-color-primary-850)` |
+| `--dk-surface-information-default` | `var(--dk-color-information-500)` | `var(--dk-color-information-600)` |
+| `--dk-surface-information-focus` | `var(--dk-color-information-700)` | `var(--dk-color-information-400)` |
+| `--dk-surface-information-hover` | `var(--dk-color-information-600)` | `var(--dk-color-information-500)` |
+| `--dk-surface-information-mark` | `var(--dk-color-information-600)` | `var(--dk-color-information-600)` |
+| `--dk-surface-information-solid` | `var(--dk-color-information-700)` | `var(--dk-color-information-700)` |
+| `--dk-surface-information-subtle` | `var(--dk-color-information-50)` | `var(--dk-color-information-900)` |
+| `--dk-surface-information-subtle-focus` | `var(--dk-color-information-200)` | `var(--dk-color-information-700)` |
+| `--dk-surface-information-subtle-hover` | `var(--dk-color-information-100)` | `var(--dk-color-information-800)` |
+| `--dk-surface-inset-active` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-500)` |
+| `--dk-surface-inset-default` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
+| `--dk-surface-inset-hover` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-600)` |
+| `--dk-surface-inverse-active` | `var(--dk-color-neutral-800)` | `var(--dk-color-neutral-100)` |
+| `--dk-surface-inverse-default` | `var(--dk-color-neutral-1100)` | `var(--dk-color-base-white)` |
+| `--dk-surface-inverse-hover` | `var(--dk-color-neutral-900)` | `var(--dk-color-neutral-50)` |
+| `--dk-surface-lifted-active` | `var(--dk-surface-nested-active)` | `var(--dk-surface-raised-active)` |
+| `--dk-surface-lifted-default` | `var(--dk-surface-nested-default)` | `var(--dk-surface-raised-default)` |
+| `--dk-surface-lifted-hover` | `var(--dk-surface-nested-hover)` | `var(--dk-surface-raised-hover)` |
+| `--dk-surface-nested-active` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
+| `--dk-surface-nested-default` | `var(--dk-color-neutral-25)` | `var(--dk-color-neutral-900)` |
+| `--dk-surface-nested-glass` | `rgb(from var(--dk-surface-nested-default) r g b / var(--dk-primitive-opacity-glass))` | `rgb(from var(--dk-surface-nested-default) r g b / var(--dk-primitive-opacity-glass))` |
+| `--dk-surface-nested-hover` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
+| `--dk-surface-neutral-default` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-700)` |
+| `--dk-surface-neutral-focus` | `var(--dk-color-neutral-600)` | `var(--dk-color-neutral-500)` |
+| `--dk-surface-neutral-hover` | `var(--dk-color-neutral-600)` | `var(--dk-color-neutral-600)` |
+| `--dk-surface-neutral-subtle` | `var(--dk-color-neutral-25)` | `var(--dk-color-neutral-900)` |
+| `--dk-surface-neutral-subtle-active` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
+| `--dk-surface-neutral-subtle-focus` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
+| `--dk-surface-neutral-subtle-hover` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
+| `--dk-surface-page-default` | `var(--dk-color-base-white)` | `var(--dk-color-neutral-1100)` |
+| `--dk-surface-page-glass` | `rgb(from var(--dk-surface-default-body) r g b / var(--dk-primitive-opacity-glass))` | `rgb(from var(--dk-surface-default-body) r g b / var(--dk-primitive-opacity-glass))` |
+| `--dk-surface-page-secondary` | `var(--dk-color-neutral-25)` | `var(--dk-color-neutral-1000)` |
+| `--dk-surface-page-tertiary` | `var(--dk-color-neutral-1000)` | `var(--dk-color-neutral-25)` |
+| `--dk-surface-primary-active` | `var(--dk-color-primary-700)` | `var(--dk-color-primary-300)` |
+| `--dk-surface-primary-brand` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-400)` |
+| `--dk-surface-primary-default` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-600)` |
+| `--dk-surface-primary-disabled` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-800)` |
+| `--dk-surface-primary-disabled-active` | `var(--dk-color-primary-400)` | `var(--dk-color-primary-600)` |
+| `--dk-surface-primary-disabled-hover` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-700)` |
+| `--dk-surface-primary-focus` | `var(--dk-color-primary-700)` | `var(--dk-color-primary-400)` |
+| `--dk-surface-primary-hover` | `var(--dk-color-primary-600)` | `var(--dk-color-primary-500)` |
+| `--dk-surface-primary-mark` | `var(--dk-color-primary-600)` | `var(--dk-color-primary-600)` |
+| `--dk-surface-primary-marker` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-400)` |
+| `--dk-surface-primary-oos` | `var(--dk-color-primary-400)` | `var(--dk-color-primary-700)` |
+| `--dk-surface-primary-solid` | `var(--dk-color-primary-700)` | `var(--dk-color-primary-700)` |
+| `--dk-surface-primary-subtle` | `var(--dk-color-primary-50)` | `var(--dk-color-primary-850)` |
+| `--dk-surface-primary-subtle-focus` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-700)` |
+| `--dk-surface-primary-subtle-hover` | `var(--dk-color-primary-100)` | `var(--dk-color-primary-800)` |
+| `--dk-surface-raised-active` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
+| `--dk-surface-raised-default` | `var(--dk-color-base-white)` | `var(--dk-color-neutral-1000)` |
+| `--dk-surface-raised-glass` | `rgb(from var(--dk-surface-raised-default) r g b / var(--dk-primitive-opacity-glass))` | `rgb(from var(--dk-surface-raised-default) r g b / var(--dk-primitive-opacity-glass))` |
+| `--dk-surface-raised-hover` | `var(--dk-color-neutral-25)` | `var(--dk-color-neutral-900)` |
+| `--dk-surface-sidebar-panel` | `var(--dk-color-neutral-25)` | `var(--dk-color-neutral-1100)` |
+| `--dk-surface-sidebar-panel-hover` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-1000)` |
+| `--dk-surface-success-default` | `var(--dk-color-success-500)` | `var(--dk-color-success-700)` |
+| `--dk-surface-success-focus` | `var(--dk-color-success-700)` | `var(--dk-color-success-500)` |
+| `--dk-surface-success-hover` | `var(--dk-color-success-600)` | `var(--dk-color-success-600)` |
+| `--dk-surface-success-mark` | `var(--dk-color-primary-600)` | `var(--dk-color-primary-600)` |
+| `--dk-surface-success-solid` | `var(--dk-surface-primary-solid)` | `var(--dk-surface-primary-solid)` |
+| `--dk-surface-success-subtle` | `var(--dk-color-success-50)` | `var(--dk-color-success-900)` |
+| `--dk-surface-success-subtle-focus` | `var(--dk-color-success-200)` | `var(--dk-color-success-700)` |
+| `--dk-surface-success-subtle-hover` | `var(--dk-color-success-100)` | `var(--dk-color-success-800)` |
+| `--dk-surface-warning-default` | `var(--dk-color-warning-500)` | `var(--dk-color-warning-600)` |
+| `--dk-surface-warning-focus` | `var(--dk-color-warning-700)` | `var(--dk-color-warning-400)` |
+| `--dk-surface-warning-hover` | `var(--dk-color-warning-600)` | `var(--dk-color-warning-500)` |
+| `--dk-surface-warning-mark` | `var(--dk-color-warning-600)` | `var(--dk-color-warning-600)` |
+| `--dk-surface-warning-solid` | `var(--dk-color-warning-700)` | `var(--dk-color-warning-700)` |
+| `--dk-surface-warning-subtle` | `var(--dk-color-warning-50)` | `var(--dk-color-warning-900)` |
+| `--dk-surface-warning-subtle-focus` | `var(--dk-color-warning-200)` | `var(--dk-color-warning-700)` |
+| `--dk-surface-warning-subtle-hover` | `var(--dk-color-warning-100)` | `var(--dk-color-warning-800)` |

package/manifest/tokens/text.md

@@ -0,0 +1,92 @@
+# Text colours tokens
+
+Declared values, light and dark. Reference a token by name; never copy its value.
+
+| Token | Light | Dark |
+|---|---|---|
+| `--dk-text-base-black` | `var(--dk-color-base-black)` | `var(--dk-color-base-black)` |
+| `--dk-text-base-white` | `var(--dk-color-base-white)` | `var(--dk-color-base-white)` |
+| `--dk-text-code-attr` | `var(--dk-text-neutral-default)` | `var(--dk-text-neutral-default)` |
+| `--dk-text-code-comment` | `var(--dk-color-neutral-400)` | `var(--dk-color-neutral-500)` |
+| `--dk-text-code-keyword` | `var(--dk-primitive-color-primary-next1-600)` | `var(--dk-primitive-color-primary-next1-300)` |
+| `--dk-text-code-string` | `var(--dk-primitive-color-primary-next2-600)` | `var(--dk-primitive-color-primary-next2-300)` |
+| `--dk-text-code-tag` | `var(--dk-color-primary-600)` | `var(--dk-color-primary-300)` |
+| `--dk-text-control-active` | `var(--dk-color-neutral-800)` | `var(--dk-color-neutral-50)` |
+| `--dk-text-control-default` | `var(--dk-color-neutral-600)` | `var(--dk-color-neutral-200)` |
+| `--dk-text-control-disabled` | `var(--dk-text-disabled-subtle)` | `var(--dk-text-disabled-subtle)` |
+| `--dk-text-control-hover` | `var(--dk-color-neutral-700)` | `var(--dk-color-neutral-100)` |
+| `--dk-text-default` | `var(--dk-color-base-black)` | `var(--dk-color-base-white)` |
+| `--dk-text-default-reverse` | `var(--dk-color-base-white)` | `var(--dk-color-base-black)` |
+| `--dk-text-disabled-default` | `var(--dk-color-neutral-400)` | `var(--dk-color-neutral-400)` |
+| `--dk-text-disabled-subtle` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-700)` |
+| `--dk-text-disabled-subtle-active` | `var(--dk-color-neutral-400)` | `var(--dk-color-neutral-500)` |
+| `--dk-text-disabled-subtle-hover` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-600)` |
+| `--dk-text-error-active` | `var(--dk-color-error-700)` | `var(--dk-color-error-200)` |
+| `--dk-text-error-default` | `var(--dk-color-error-500)` | `var(--dk-color-error-400)` |
+| `--dk-text-error-focus` | `var(--dk-color-error-700)` | `var(--dk-color-error-200)` |
+| `--dk-text-error-hover` | `var(--dk-color-error-600)` | `var(--dk-color-error-300)` |
+| `--dk-text-error-outline` | `var(--dk-text-error-on-subtle)` | `var(--dk-text-error-on-subtle)` |
+| `--dk-text-error-subtle` | `var(--dk-color-error-50)` | `var(--dk-color-error-900)` |
+| `--dk-text-error-subtle-focus` | `var(--dk-color-error-200)` | `var(--dk-color-error-700)` |
+| `--dk-text-error-subtle-hover` | `var(--dk-color-error-100)` | `var(--dk-color-error-800)` |
+| `--dk-text-eyebrow-default` | `var(--dk-color-neutral-600)` | `var(--dk-color-neutral-300)` |
+| `--dk-text-field-affix` | `var(--dk-color-neutral-600)` | `var(--dk-color-neutral-200)` |
+| `--dk-text-field-default` | `var(--dk-color-base-black)` | `var(--dk-color-base-white)` |
+| `--dk-text-field-disabled` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-700)` |
+| `--dk-text-field-placeholder` | `var(--dk-color-neutral-400)` | `var(--dk-color-neutral-600)` |
+| `--dk-text-information-active` | `var(--dk-color-information-700)` | `var(--dk-color-information-200)` |
+| `--dk-text-information-default` | `var(--dk-color-information-500)` | `var(--dk-color-information-400)` |
+| `--dk-text-information-focus` | `var(--dk-color-information-700)` | `var(--dk-color-information-200)` |
+| `--dk-text-information-hover` | `var(--dk-color-information-600)` | `var(--dk-color-information-300)` |
+| `--dk-text-information-outline` | `var(--dk-text-information-on-subtle)` | `var(--dk-text-information-on-subtle)` |
+| `--dk-text-information-subtle` | `var(--dk-color-information-50)` | `var(--dk-color-information-900)` |
+| `--dk-text-information-subtle-focus` | `var(--dk-color-information-200)` | `var(--dk-color-information-700)` |
+| `--dk-text-information-subtle-hover` | `var(--dk-color-information-100)` | `var(--dk-color-information-800)` |
+| `--dk-text-inverse-default` | `var(--dk-color-base-white)` | `var(--dk-color-neutral-1000)` |
+| `--dk-text-inverse-neutral` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-600)` |
+| `--dk-text-link-active` | `var(--dk-color-primary-800)` | `var(--dk-color-primary-300)` |
+| `--dk-text-link-default` | `var(--dk-color-primary-600)` | `var(--dk-color-primary-500)` |
+| `--dk-text-link-hover` | `var(--dk-color-primary-700)` | `var(--dk-color-primary-400)` |
+| `--dk-text-link-underline` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-700)` |
+| `--dk-text-nested-active` | `var(--dk-color-neutral-900)` | `var(--dk-color-neutral-50)` |
+| `--dk-text-nested-default` | `var(--dk-color-neutral-700)` | `var(--dk-color-neutral-200)` |
+| `--dk-text-nested-hover` | `var(--dk-color-neutral-800)` | `var(--dk-color-neutral-100)` |
+| `--dk-text-neutral-active` | `var(--dk-color-neutral-800)` | `var(--dk-color-neutral-100)` |
+| `--dk-text-neutral-default` | `var(--dk-color-neutral-600)` | `var(--dk-color-neutral-200)` |
+| `--dk-text-neutral-focus` | `var(--dk-color-neutral-800)` | `var(--dk-color-neutral-50)` |
+| `--dk-text-neutral-hover` | `var(--dk-color-neutral-700)` | `var(--dk-color-neutral-100)` |
+| `--dk-text-neutral-subtle` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-600)` |
+| `--dk-text-neutral-subtle-focus` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-400)` |
+| `--dk-text-neutral-subtle-hover` | `var(--dk-color-neutral-400)` | `var(--dk-color-neutral-500)` |
+| `--dk-text-primary-active` | `var(--dk-color-primary-700)` | `var(--dk-color-primary-200)` |
+| `--dk-text-primary-brand` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-400)` |
+| `--dk-text-primary-default` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-500)` |
+| `--dk-text-primary-disabled` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-700)` |
+| `--dk-text-primary-disabled-active` | `var(--dk-color-primary-400)` | `var(--dk-color-primary-500)` |
+| `--dk-text-primary-disabled-hover` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-600)` |
+| `--dk-text-primary-focus` | `var(--dk-color-primary-700)` | `var(--dk-color-primary-300)` |
+| `--dk-text-primary-highlight` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-400)` |
+| `--dk-text-primary-hover` | `var(--dk-color-primary-600)` | `var(--dk-color-primary-400)` |
+| `--dk-text-primary-oos` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-600)` |
+| `--dk-text-primary-outline` | `var(--dk-text-primary-on-subtle)` | `var(--dk-text-primary-on-subtle)` |
+| `--dk-text-primary-subtle` | `var(--dk-color-primary-50)` | `var(--dk-color-primary-900)` |
+| `--dk-text-primary-subtle-focus` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-700)` |
+| `--dk-text-primary-subtle-hover` | `var(--dk-color-primary-100)` | `var(--dk-color-primary-800)` |
+| `--dk-text-success-active` | `var(--dk-text-primary-active)` | `var(--dk-text-primary-active)` |
+| `--dk-text-success-body` | `var(--dk-text-primary-default)` | `var(--dk-text-primary-default)` |
+| `--dk-text-success-default` | `var(--dk-color-success-500)` | `var(--dk-color-success-400)` |
+| `--dk-text-success-focus` | `var(--dk-color-success-700)` | `var(--dk-color-success-200)` |
+| `--dk-text-success-hover` | `var(--dk-color-success-600)` | `var(--dk-color-success-300)` |
+| `--dk-text-success-outline` | `var(--dk-text-success-on-subtle)` | `var(--dk-text-success-on-subtle)` |
+| `--dk-text-success-subtle` | `var(--dk-color-success-50)` | `var(--dk-color-success-900)` |
+| `--dk-text-success-subtle-focus` | `var(--dk-color-success-200)` | `var(--dk-color-success-700)` |
+| `--dk-text-success-subtle-hover` | `var(--dk-color-success-100)` | `var(--dk-color-success-800)` |
+| `--dk-text-tabs-selected` | `var(--dk-text-primary-brand)` | `var(--dk-text-primary-brand)` |
+| `--dk-text-warning-active` | `var(--dk-color-warning-700)` | `var(--dk-color-warning-200)` |
+| `--dk-text-warning-default` | `var(--dk-color-warning-500)` | `var(--dk-color-warning-400)` |
+| `--dk-text-warning-focus` | `var(--dk-color-warning-700)` | `var(--dk-color-warning-200)` |
+| `--dk-text-warning-hover` | `var(--dk-color-warning-600)` | `var(--dk-color-warning-300)` |
+| `--dk-text-warning-outline` | `var(--dk-text-warning-on-subtle)` | `var(--dk-text-warning-on-subtle)` |
+| `--dk-text-warning-subtle` | `var(--dk-color-warning-50)` | `var(--dk-color-warning-900)` |
+| `--dk-text-warning-subtle-focus` | `var(--dk-color-warning-200)` | `var(--dk-color-warning-700)` |
+| `--dk-text-warning-subtle-hover` | `var(--dk-color-warning-100)` | `var(--dk-color-warning-800)` |

package/package.json

@@ -1,6 +1,22 @@
 {
   "name": "@karmo-co/drift-kit-reference",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "23.4.0",
+  "description": "Reference documentation of Karmo's private Drift design system, for Karmo's Claude skills. Documentation only.",
+  "bin": {
+    "drift-kit-ref": "bin/drift-kit-ref.js"
+  },
+  "files": [
+    "bin",
+    "manifest",
+    "README.md",
+    "LICENSE"
+  ],
+  "license": "SEE LICENSE IN LICENSE",
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  }
+}