@ -660,6 +660,72 @@ export const THEME_BASE_RECIPE_TOKENS = defineRecipes({
]
}
} ,
'chat-message' : {
// ── Row layout ────────────────────────────────────────────────────
gap : 'var(--space-2)' ,
'row-gap-run' : 'var(--space-0-5)' ,
'row-gap-group' : 'var(--space-3)' ,
// Avatar column reserve — follows the composed Avatar's md diameter.
'gutter-inline-size' : 'var(--avatar-size-md, var(--space-8))' ,
// ── Bubble ────────────────────────────────────────────────────────
'bubble-padding-inline-sm' : 'var(--space-2-5)' ,
'bubble-padding-inline-md' : 'var(--space-3)' ,
'bubble-padding-inline-lg' : 'var(--space-4)' ,
'bubble-padding-block-sm' : 'var(--space-1-5)' ,
'bubble-padding-block-md' : 'var(--space-2)' ,
'bubble-padding-block-lg' : 'var(--space-2-5)' ,
'bubble-radius' : 'var(--radius-lg)' ,
// Flattened corners between messages of one run.
'bubble-radius-run' : 'var(--radius-sm)' ,
'bubble-max-inline-size' : 'min(var(--measure-narrow), 78%)' ,
'bubble-font-size-sm' : 'var(--size-sm-font-size)' ,
'bubble-font-size-md' : 'var(--size-md-font-size)' ,
'bubble-font-size-lg' : 'var(--size-lg-font-size)' ,
'bubble-line-height' : 'var(--leading-prose)' ,
'bubble-bg-in' : 'var(--color-neutral-element)' ,
'bubble-fg-in' : 'var(--color-content-primary)' ,
'bubble-bg-out' : 'var(--color-primary-solid)' ,
'bubble-fg-out' : 'var(--color-primary-contrast)' ,
// ── Header (author + time, first of a run) ───────────────────────
'header-gap' : 'var(--space-2)' ,
'header-font-size' : 'var(--size-sm-font-size)' ,
'header-font-weight' : 'var(--font-weight-medium)' ,
'header-color' : 'var(--color-content-secondary)' ,
// ── Meta (time + status) ─────────────────────────────────────────
'meta-gap' : 'var(--space-1)' ,
'meta-font-size' : 'var(--size-xs-font-size)' ,
'meta-color' : 'var(--color-content-muted)' ,
// ── Delivery status indicator ────────────────────────────────────
'status-size' : '1em' ,
'status-color' : 'var(--color-content-muted)' ,
'status-color-read' : 'var(--color-primary-solid)' ,
'status-color-failed' : 'var(--color-threat-solid)' ,
// ── Reply (quoted preview) ───────────────────────────────────────
'reply-padding-inline' : 'var(--space-2)' ,
'reply-padding-block' : 'var(--space-1)' ,
'reply-accent-size' : 'var(--space-0-5)' ,
'reply-radius' : 'var(--radius-sm)' ,
'reply-bg' : 'var(--color-neutral-track)' ,
'reply-accent' : 'var(--color-primary-solid)' ,
'reply-font-size' : 'var(--size-xs-font-size)' ,
// ── Reaction chips ───────────────────────────────────────────────
'reaction-gap' : 'var(--space-1)' ,
'reaction-height' : 'var(--size-xs-control-height)' ,
'reaction-padding-inline' : 'var(--space-2)' ,
'reaction-radius' : 'var(--radius-full)' ,
'reaction-font-size' : 'var(--size-xs-font-size)' ,
'reaction-bg' : 'var(--color-neutral-track)' ,
'reaction-border' : 'var(--color-neutral-separator)' ,
'reaction-pressed-bg' : 'var(--color-primary-surface)' ,
'reaction-pressed-border' : 'var(--color-primary-border)' ,
'reaction-pressed-fg' : 'var(--color-primary-text)' ,
// ── Mention highlight ────────────────────────────────────────────
'mentioned-bg' : 'var(--color-primary-surface)' ,
'mentioned-accent' : 'var(--color-primary-solid)' ,
// ── Actions cluster ──────────────────────────────────────────────
'actions-gap' : 'var(--space-0-5)' ,
'actions-offset' : 'var(--space-1)'
} ,
checkbox : {
'size-xs-box-size' : '14px' ,
'size-xs-indicator-size' : '8px' ,
@ -1588,6 +1654,46 @@ export const THEME_BASE_RECIPE_TOKENS = defineRecipes({
'_palette-border' : { value : 'var(--color-primary-border)' , scope : 'host' } ,
'_palette-text' : { value : 'var(--color-primary-text)' , scope : 'host' }
} ,
// ── List / data-grid family — the shared 2-slot selection palette ──────────
// Uniform pattern: `--_{c}-palette-solid` (accent: sort/active indicator) +
// `--_{c}-palette-element` (soft: selected-row tint). Host default = primary;
// the shared layer routes roles + 33 scales + custom. Was a per-role cascade
// in each component's CSS (`--_{c}-accent` / `--_{c}-accent-soft`). The `-root`
// components stamp `data-color` on `[data-{c}-root]` (not the bare provider),
// so their forward targets that part via `parts: ['root']`. drag-drop / combobox
// / timeline already own a recipe → their palette slots live in those entries.
table : {
'_palette-solid' : { parts : [ 'root' ] , declarations : [ { value : 'var(--color-primary-solid)' , scope : 'host' } ] } ,
'_palette-element' : { parts : [ 'root' ] , declarations : [ { value : 'var(--color-primary-element)' , scope : 'host' } ] }
} ,
// tree-grid / tree-view only tint the SELECTED row (element); their `accent`
// (solid) token had no consumer, so they declare only `_palette-element`.
'tree-grid' : {
'_palette-element' : { parts : [ 'root' ] , declarations : [ { value : 'var(--color-primary-element)' , scope : 'host' } ] }
} ,
'tree-view' : {
'_palette-element' : { parts : [ 'root' ] , declarations : [ { value : 'var(--color-primary-element)' , scope : 'host' } ] }
} ,
// virtual-list / virtual-grid: their accent cascade was declaration-only (no CSS
// consumer) — pure virtualized containers with no colour-driven visual. The type
// stays open (guard/uniformity) + the wrapper stamps a harmless `data-color`, but
// there is nothing to forward, so NO recipe here (avoids an orphan palette token).
feed : {
'_palette-solid' : { parts : [ 'root' ] , declarations : [ { value : 'var(--color-primary-solid)' , scope : 'host' } ] } ,
'_palette-element' : { parts : [ 'root' ] , declarations : [ { value : 'var(--color-primary-element)' , scope : 'host' } ] }
} ,
'grid-list' : {
'_palette-solid' : { value : 'var(--color-primary-solid)' , scope : 'host' } ,
'_palette-element' : { value : 'var(--color-primary-element)' , scope : 'host' }
} ,
clipboard : {
'_palette-solid' : { value : 'var(--color-primary-solid)' , scope : 'host' } ,
'_palette-element' : { value : 'var(--color-primary-element)' , scope : 'host' }
} ,
carousel : {
'_palette-solid' : { value : 'var(--color-primary-solid)' , scope : 'host' } ,
'_palette-element' : { value : 'var(--color-primary-element)' , scope : 'host' }
} ,
calendar : {
gap : 'var(--space-3)' ,
'padding-xs' : 'var(--space-2)' ,
@ -4127,7 +4233,10 @@ export const THEME_BASE_RECIPE_TOKENS = defineRecipes({
// DragDrop — the drag preview/ghost that tracks the cursor. Floats above
// local content during an active drag.
'drag-drop' : {
'preview-z' : 'var(--z-index-overlay-detached)'
'preview-z' : 'var(--z-index-overlay-detached)' ,
// Selection palette (THM-2) — `data-color` sits on `[data-drag-drop-root]`.
'_palette-solid' : { parts : [ 'root' ] , declarations : [ { value : 'var(--color-primary-solid)' , scope : 'host' } ] } ,
'_palette-element' : { parts : [ 'root' ] , declarations : [ { value : 'var(--color-primary-element)' , scope : 'host' } ] }
} ,
'navigation-menu' : {
