@cdevhub/ngx-tw 0.2.0

package/theme/_high-contrast.css

@@ -0,0 +1,290 @@
+[data-theme="high-contrast"] {
+  /* ===== Surface ===== */
+  --color-surface: var(--color-white);
+  --color-surface-raised: var(--color-white);
+  --color-surface-overlay: var(--color-white);
+  --color-surface-sunken: var(--color-gray-100);
+  --color-surface-muted: var(--color-gray-50);
+
+  /* ===== Foreground ===== */
+  --color-fg: var(--color-black);
+  --color-fg-muted: var(--color-gray-800);
+  --color-fg-subtle: var(--color-gray-700);
+
+  /* ===== Border ===== */
+  --color-border: var(--color-gray-700);
+  --color-border-muted: var(--color-gray-500);
+  --color-border-strong: var(--color-black);
+
+  /* ===== Primary ===== */
+  --color-primary-50: var(--color-blue-100);
+  --color-primary-100: var(--color-blue-200);
+  --color-primary-200: var(--color-blue-300);
+  --color-primary-300: var(--color-blue-400);
+  --color-primary-400: var(--color-blue-500);
+  --color-primary-500: var(--color-blue-600);
+  --color-primary-600: var(--color-blue-700);
+  --color-primary-700: var(--color-blue-800);
+  --color-primary-800: var(--color-blue-900);
+  --color-primary-900: var(--color-blue-950);
+  --color-primary-950: var(--color-blue-950);
+
+  /* ===== Secondary ===== */
+  --color-secondary-50: var(--color-slate-100);
+  --color-secondary-100: var(--color-slate-200);
+  --color-secondary-200: var(--color-slate-300);
+  --color-secondary-300: var(--color-slate-400);
+  --color-secondary-400: var(--color-slate-500);
+  --color-secondary-500: var(--color-slate-600);
+  --color-secondary-600: var(--color-slate-700);
+  --color-secondary-700: var(--color-slate-800);
+  --color-secondary-800: var(--color-slate-900);
+  --color-secondary-900: var(--color-slate-950);
+  --color-secondary-950: var(--color-slate-950);
+
+  /* ===== Accent ===== */
+  --color-accent-50: var(--color-violet-100);
+  --color-accent-100: var(--color-violet-200);
+  --color-accent-200: var(--color-violet-300);
+  --color-accent-300: var(--color-violet-400);
+  --color-accent-400: var(--color-violet-500);
+  --color-accent-500: var(--color-violet-600);
+  --color-accent-600: var(--color-violet-700);
+  --color-accent-700: var(--color-violet-800);
+  --color-accent-800: var(--color-violet-900);
+  --color-accent-900: var(--color-violet-950);
+  --color-accent-950: var(--color-violet-950);
+
+  /* ===== Neutral ===== */
+  --color-neutral-50: var(--color-gray-100);
+  --color-neutral-100: var(--color-gray-200);
+  --color-neutral-200: var(--color-gray-300);
+  --color-neutral-300: var(--color-gray-400);
+  --color-neutral-400: var(--color-gray-500);
+  --color-neutral-500: var(--color-gray-600);
+  --color-neutral-600: var(--color-gray-700);
+  --color-neutral-700: var(--color-gray-800);
+  --color-neutral-800: var(--color-gray-900);
+  --color-neutral-900: var(--color-gray-950);
+  --color-neutral-950: var(--color-gray-950);
+
+  /* ===== Info ===== */
+  --color-info-50: var(--color-sky-100);
+  --color-info-100: var(--color-sky-200);
+  --color-info-200: var(--color-sky-300);
+  --color-info-300: var(--color-sky-400);
+  --color-info-400: var(--color-sky-500);
+  --color-info-500: var(--color-sky-600);
+  --color-info-600: var(--color-sky-700);
+  --color-info-700: var(--color-sky-800);
+  --color-info-800: var(--color-sky-900);
+  --color-info-900: var(--color-sky-950);
+  --color-info-950: var(--color-sky-950);
+
+  /* ===== Success ===== */
+  --color-success-50: var(--color-green-100);
+  --color-success-100: var(--color-green-200);
+  --color-success-200: var(--color-green-300);
+  --color-success-300: var(--color-green-400);
+  --color-success-400: var(--color-green-500);
+  --color-success-500: var(--color-green-600);
+  --color-success-600: var(--color-green-700);
+  --color-success-700: var(--color-green-800);
+  --color-success-800: var(--color-green-900);
+  --color-success-900: var(--color-green-950);
+  --color-success-950: var(--color-green-950);
+
+  /* ===== Warning ===== */
+  --color-warning-50: var(--color-amber-100);
+  --color-warning-100: var(--color-amber-200);
+  --color-warning-200: var(--color-amber-300);
+  --color-warning-300: var(--color-amber-400);
+  --color-warning-400: var(--color-amber-500);
+  --color-warning-500: var(--color-amber-600);
+  --color-warning-600: var(--color-amber-700);
+  --color-warning-700: var(--color-amber-800);
+  --color-warning-800: var(--color-amber-900);
+  --color-warning-900: var(--color-amber-950);
+  --color-warning-950: var(--color-amber-950);
+
+  /* ===== Error ===== */
+  --color-error-50: var(--color-red-100);
+  --color-error-100: var(--color-red-200);
+  --color-error-200: var(--color-red-300);
+  --color-error-300: var(--color-red-400);
+  --color-error-400: var(--color-red-500);
+  --color-error-500: var(--color-red-600);
+  --color-error-600: var(--color-red-700);
+  --color-error-700: var(--color-red-800);
+  --color-error-800: var(--color-red-900);
+  --color-error-900: var(--color-red-950);
+  --color-error-950: var(--color-red-950);
+
+  /* ===== Role slot tokens (high-contrast) =====
+     Every slot is redefined explicitly. -soft pairings target ≥ 7:1 (AAA),
+     -solid pairings target ≥ 7:1 with black-or-white foregrounds, and
+     -border-strong sticks to -700/-800 shades so 1px outlines remain visible
+     against -soft backgrounds. */
+
+  /* Primary */
+  --color-primary-soft: var(--color-blue-100);
+  --color-primary-soft-hover: var(--color-blue-200);
+  --color-primary-soft-fg: var(--color-blue-950);
+  --color-primary-soft-fg-muted: var(--color-blue-900);
+  --color-primary-solid: var(--color-blue-800);
+  --color-primary-solid-hover: var(--color-blue-900);
+  --color-primary-solid-fg: var(--color-white);
+  --color-primary-border: var(--color-blue-700);
+  --color-primary-border-strong: var(--color-blue-900);
+  --color-primary-fg: var(--color-blue-900);
+  --color-primary-icon: var(--color-blue-800);
+
+  /* Secondary */
+  --color-secondary-soft: var(--color-slate-100);
+  --color-secondary-soft-hover: var(--color-slate-200);
+  --color-secondary-soft-fg: var(--color-slate-950);
+  --color-secondary-soft-fg-muted: var(--color-slate-900);
+  --color-secondary-solid: var(--color-slate-900);
+  --color-secondary-solid-hover: var(--color-black);
+  --color-secondary-solid-fg: var(--color-white);
+  --color-secondary-border: var(--color-slate-700);
+  --color-secondary-border-strong: var(--color-slate-900);
+  --color-secondary-fg: var(--color-slate-900);
+  --color-secondary-icon: var(--color-slate-800);
+
+  /* Accent */
+  --color-accent-soft: var(--color-violet-100);
+  --color-accent-soft-hover: var(--color-violet-200);
+  --color-accent-soft-fg: var(--color-violet-950);
+  --color-accent-soft-fg-muted: var(--color-violet-900);
+  --color-accent-solid: var(--color-violet-800);
+  --color-accent-solid-hover: var(--color-violet-900);
+  --color-accent-solid-fg: var(--color-white);
+  --color-accent-border: var(--color-violet-700);
+  --color-accent-border-strong: var(--color-violet-900);
+  --color-accent-fg: var(--color-violet-900);
+  --color-accent-icon: var(--color-violet-800);
+
+  /* Neutral */
+  --color-neutral-soft: var(--color-surface-muted);
+  --color-neutral-soft-hover: var(--color-surface-sunken);
+  --color-neutral-soft-fg: var(--color-black);
+  --color-neutral-soft-fg-muted: var(--color-gray-800);
+  --color-neutral-solid: var(--color-black);
+  --color-neutral-solid-hover: var(--color-gray-800);
+  --color-neutral-solid-fg: var(--color-white);
+  --color-neutral-border: var(--color-gray-700);
+  --color-neutral-border-strong: var(--color-black);
+  --color-neutral-fg: var(--color-black);
+  --color-neutral-icon: var(--color-gray-800);
+
+  /* Info — high-contrast pushes sky toward black text on a deeper bg */
+  --color-info-soft: var(--color-sky-100);
+  --color-info-soft-hover: var(--color-sky-200);
+  --color-info-soft-fg: var(--color-sky-950);
+  --color-info-soft-fg-muted: var(--color-sky-900);
+  --color-info-solid: var(--color-sky-800);
+  --color-info-solid-hover: var(--color-sky-900);
+  --color-info-solid-fg: var(--color-white);
+  --color-info-border: var(--color-sky-700);
+  --color-info-border-strong: var(--color-sky-900);
+  --color-info-fg: var(--color-sky-900);
+  --color-info-icon: var(--color-sky-800);
+
+  /* Success */
+  --color-success-soft: var(--color-green-100);
+  --color-success-soft-hover: var(--color-green-200);
+  --color-success-soft-fg: var(--color-green-950);
+  --color-success-soft-fg-muted: var(--color-green-900);
+  --color-success-solid: var(--color-green-800);
+  --color-success-solid-hover: var(--color-green-900);
+  --color-success-solid-fg: var(--color-white);
+  --color-success-border: var(--color-green-700);
+  --color-success-border-strong: var(--color-green-900);
+  --color-success-fg: var(--color-green-900);
+  --color-success-icon: var(--color-green-800);
+
+  /* Warning — amber stays dark-text-on-yellow */
+  --color-warning-soft: var(--color-amber-100);
+  --color-warning-soft-hover: var(--color-amber-200);
+  --color-warning-soft-fg: var(--color-amber-950);
+  --color-warning-soft-fg-muted: var(--color-amber-900);
+  --color-warning-solid: var(--color-amber-400);
+  --color-warning-solid-hover: var(--color-amber-500);
+  --color-warning-solid-fg: var(--color-amber-950);
+  --color-warning-border: var(--color-amber-700);
+  --color-warning-border-strong: var(--color-amber-900);
+  --color-warning-fg: var(--color-amber-900);
+  --color-warning-icon: var(--color-amber-800);
+
+  /* Error */
+  --color-error-soft: var(--color-red-100);
+  --color-error-soft-hover: var(--color-red-200);
+  --color-error-soft-fg: var(--color-red-950);
+  --color-error-soft-fg-muted: var(--color-red-900);
+  --color-error-solid: var(--color-red-800);
+  --color-error-solid-hover: var(--color-red-900);
+  --color-error-solid-fg: var(--color-white);
+  --color-error-border: var(--color-red-700);
+  --color-error-border-strong: var(--color-red-900);
+  --color-error-fg: var(--color-red-900);
+  --color-error-icon: var(--color-red-800);
+
+  /* ===== Legacy on-role aliases (high-contrast) ===== */
+  --color-on-info: var(--color-info-solid-fg);
+  --color-on-success: var(--color-success-solid-fg);
+  --color-on-warning: var(--color-warning-solid-fg);
+  --color-on-error: var(--color-error-solid-fg);
+  --color-on-primary: var(--color-primary-solid-fg);
+  --color-on-secondary: var(--color-secondary-solid-fg);
+  --color-on-accent: var(--color-accent-solid-fg);
+  --color-on-neutral: var(--color-neutral-solid-fg);
+}
+
+/* ===== Windows / forced-colors mode =====
+   When the OS enables forced-colors (Windows High Contrast, some Linux a11y
+   profiles), the user agent replaces all author colors with system keywords
+   (`Canvas`, `CanvasText`, `Highlight`, `GrayText`, etc.). We remap the
+   library's structural tokens to the matching system colors so components
+   keep their semantic shape, and disable `forced-color-adjust` on interactive
+   affordances so the browser applies system colors uniformly. */
+@media (forced-colors: active) {
+  :root,
+  [data-theme="light"],
+  [data-theme="dark"],
+  [data-theme="high-contrast"] {
+    /* Surfaces collapse to the system canvas. */
+    --color-surface: Canvas;
+    --color-surface-raised: Canvas;
+    --color-surface-overlay: Canvas;
+    --color-surface-sunken: Canvas;
+    --color-surface-muted: Canvas;
+
+    /* Foregrounds and borders take system text colors. */
+    --color-fg: CanvasText;
+    --color-fg-muted: CanvasText;
+    --color-fg-subtle: GrayText;
+    --color-border: CanvasText;
+    --color-border-muted: GrayText;
+    --color-border-strong: CanvasText;
+
+    /* Focus / selection accents take the system Highlight color so focus
+       rings remain visible in Windows High Contrast. */
+    --color-primary-500: Highlight;
+  }
+
+  /* Interactive affordances opt out of the forced palette so the system
+     colors apply uniformly across roles, borders, and backgrounds. */
+  button,
+  [role="button"],
+  input,
+  select,
+  textarea,
+  [role="menuitem"],
+  [role="menuitemcheckbox"],
+  [role="menuitemradio"],
+  [role="option"],
+  [role="tab"] {
+    forced-color-adjust: none;
+  }
+}

package/theme/_semantic.css

@@ -0,0 +1,317 @@
+@theme {
+  /* ===== Surface (backgrounds) ===== */
+  --color-surface: var(--color-white);
+  --color-surface-raised: var(--color-white);
+  --color-surface-overlay: var(--color-white);
+  --color-surface-sunken: var(--color-gray-50);
+  --color-surface-muted: var(--color-gray-100);
+
+  /* ===== Overlay controls =====
+     Translucent dark backgrounds for floating chrome that sits over arbitrary
+     consumer content (carousel pause control, indicator capsule). The token
+     ships as a fixed `oklch(0 0 0 / 0.4)` rather than a `var(--color-gray-*)`
+     because the contrast contract is against the *content underneath*, not
+     against `--color-surface` — flipping to white on dark would defeat the
+     purpose. Tailwind v4 auto-generates the matching `bg-overlay-control{,-hover}`
+     utilities from these `--color-{name}` pairs. */
+  --color-overlay-control: oklch(0 0 0 / 0.4);
+  --color-overlay-control-hover: oklch(0 0 0 / 0.6);
+
+  /* ===== Foreground (text/icons) ===== */
+  --color-fg: var(--color-gray-900);
+  --color-fg-muted: var(--color-gray-600);
+  --color-fg-subtle: var(--color-gray-500);
+
+  /* ===== Border ===== */
+  --color-border: var(--color-gray-300);
+  --color-border-muted: var(--color-gray-200);
+  --color-border-strong: var(--color-gray-400);
+
+  /* ===== Table sticky shadows =====
+     Hairline 1px shadows used to separate sticky table chrome from scrolled
+     content. Each value resolves through `--color-border` so the same token
+     auto-adapts to dark mode. Tailwind v4 auto-generates the matching
+     `shadow-table-sticky*` utilities from these `--shadow-{name}` pairs. */
+  --shadow-table-sticky: 0 1px 0 0 var(--color-border);
+  --shadow-table-sticky-cell-start: 1px 0 0 0 var(--color-border);
+  --shadow-table-sticky-cell-end: -1px 0 0 0 var(--color-border);
+
+  /* ===== Calendar widths =====
+     Pinned per size so month / year / multi-year views share the same footprint
+     across view transitions. Each value is roughly `cell-size × 7 + gutters`. */
+  --width-calendar-xs: 210px;
+  --width-calendar-sm: 240px;
+  --width-calendar-md: 292px;
+  --width-calendar-lg: 320px;
+  --width-calendar-xl: 376px;
+
+  /* ===== Extra-small typography =====
+     Used for xs-density secondary text (xs descriptions, calendar cell labels,
+     keyboard hints). Sits one step below Tailwind's `text-xs` (0.75rem).
+     Tailwind v4 auto-generates the `text-2xs` utility from this `--text-{name}`
+     pair (font-size + line-height) per its theme-token convention. */
+  --text-2xs: 0.6875rem;
+  --text-2xs--line-height: 1rem;
+
+  /* ===== Primary ===== */
+  --color-primary-50: var(--color-blue-50);
+  --color-primary-100: var(--color-blue-100);
+  --color-primary-200: var(--color-blue-200);
+  --color-primary-300: var(--color-blue-300);
+  --color-primary-400: var(--color-blue-400);
+  --color-primary-500: var(--color-blue-500);
+  --color-primary-600: var(--color-blue-600);
+  --color-primary-700: var(--color-blue-700);
+  --color-primary-800: var(--color-blue-800);
+  --color-primary-900: var(--color-blue-900);
+  --color-primary-950: var(--color-blue-950);
+
+  /* ===== Secondary ===== */
+  --color-secondary-50: var(--color-slate-50);
+  --color-secondary-100: var(--color-slate-100);
+  --color-secondary-200: var(--color-slate-200);
+  --color-secondary-300: var(--color-slate-300);
+  --color-secondary-400: var(--color-slate-400);
+  --color-secondary-500: var(--color-slate-500);
+  --color-secondary-600: var(--color-slate-600);
+  --color-secondary-700: var(--color-slate-700);
+  --color-secondary-800: var(--color-slate-800);
+  --color-secondary-900: var(--color-slate-900);
+  --color-secondary-950: var(--color-slate-950);
+
+  /* ===== Accent ===== */
+  --color-accent-50: var(--color-violet-50);
+  --color-accent-100: var(--color-violet-100);
+  --color-accent-200: var(--color-violet-200);
+  --color-accent-300: var(--color-violet-300);
+  --color-accent-400: var(--color-violet-400);
+  --color-accent-500: var(--color-violet-500);
+  --color-accent-600: var(--color-violet-600);
+  --color-accent-700: var(--color-violet-700);
+  --color-accent-800: var(--color-violet-800);
+  --color-accent-900: var(--color-violet-900);
+  --color-accent-950: var(--color-violet-950);
+
+  /* ===== Neutral ===== */
+  --color-neutral-50: var(--color-gray-50);
+  --color-neutral-100: var(--color-gray-100);
+  --color-neutral-200: var(--color-gray-200);
+  --color-neutral-300: var(--color-gray-300);
+  --color-neutral-400: var(--color-gray-400);
+  --color-neutral-500: var(--color-gray-500);
+  --color-neutral-600: var(--color-gray-600);
+  --color-neutral-700: var(--color-gray-700);
+  --color-neutral-800: var(--color-gray-800);
+  --color-neutral-900: var(--color-gray-900);
+  --color-neutral-950: var(--color-gray-950);
+
+  /* ===== Info ===== */
+  --color-info-50: var(--color-sky-50);
+  --color-info-100: var(--color-sky-100);
+  --color-info-200: var(--color-sky-200);
+  --color-info-300: var(--color-sky-300);
+  --color-info-400: var(--color-sky-400);
+  --color-info-500: var(--color-sky-500);
+  --color-info-600: var(--color-sky-600);
+  --color-info-700: var(--color-sky-700);
+  --color-info-800: var(--color-sky-800);
+  --color-info-900: var(--color-sky-900);
+  --color-info-950: var(--color-sky-950);
+
+  /* ===== Success ===== */
+  --color-success-50: var(--color-green-50);
+  --color-success-100: var(--color-green-100);
+  --color-success-200: var(--color-green-200);
+  --color-success-300: var(--color-green-300);
+  --color-success-400: var(--color-green-400);
+  --color-success-500: var(--color-green-500);
+  --color-success-600: var(--color-green-600);
+  --color-success-700: var(--color-green-700);
+  --color-success-800: var(--color-green-800);
+  --color-success-900: var(--color-green-900);
+  --color-success-950: var(--color-green-950);
+
+  /* ===== Warning ===== */
+  --color-warning-50: var(--color-amber-50);
+  --color-warning-100: var(--color-amber-100);
+  --color-warning-200: var(--color-amber-200);
+  --color-warning-300: var(--color-amber-300);
+  --color-warning-400: var(--color-amber-400);
+  --color-warning-500: var(--color-amber-500);
+  --color-warning-600: var(--color-amber-600);
+  --color-warning-700: var(--color-amber-700);
+  --color-warning-800: var(--color-amber-800);
+  --color-warning-900: var(--color-amber-900);
+  --color-warning-950: var(--color-amber-950);
+
+  /* ===== Error ===== */
+  --color-error-50: var(--color-red-50);
+  --color-error-100: var(--color-red-100);
+  --color-error-200: var(--color-red-200);
+  --color-error-300: var(--color-red-300);
+  --color-error-400: var(--color-red-400);
+  --color-error-500: var(--color-red-500);
+  --color-error-600: var(--color-red-600);
+  --color-error-700: var(--color-red-700);
+  --color-error-800: var(--color-red-800);
+  --color-error-900: var(--color-red-900);
+  --color-error-950: var(--color-red-950);
+
+  /* ===== Role slot tokens =====
+     Per-role semantic slots picked to meet WCAG AA at each pairing. Components
+     consume these slots directly (`bg-info-soft text-info-soft-fg`) and never
+     pick `{role}-{shade}` values themselves — that keeps contrast deliberate
+     and removes the need for `dark:` overrides on a per-component basis. Dark
+     and high-contrast themes redefine the same slots in their respective
+     files; the `{role}-{shade}` scale below is preserved for consumer escape
+     hatches but is no longer the recommended surface.
+
+     Slot semantics:
+       -soft           soft variant background (low chroma)
+       -soft-hover     soft variant background on hover/focus
+       -soft-fg        title-strength text on -soft
+       -soft-fg-muted  body text on -soft (AA body)
+       -solid          solid variant background (high chroma)
+       -solid-hover    solid variant background on hover/focus
+       -solid-fg       text on -solid (AA body)
+       -border         subtle border (outline variant, dividers)
+       -border-strong  accent border (indicators, rings)
+       -fg             colored text on neutral surface (tab labels, links)
+       -icon           icon tint on -soft / surface contexts
+
+     Light-mode contrast notes (sRGB, against the slot it pairs with):
+       sky-50 ↔ sky-900     ≈ 13.7:1   ✓ AA
+       sky-50 ↔ sky-800     ≈  9.4:1   ✓ AA
+       sky-600 ↔ white      ≈  4.7:1   ✓ AA body
+       sky-700 ↔ white      ≈  5.9:1   ✓ AA body  (info-fg on surface)
+       green-700 ↔ white    ≈  4.7:1   ✓ AA body  (success-solid; -600 fails at 3.3:1)
+       amber-500 ↔ amber-950 ≈ 8.5:1   ✓ AA       (warning keeps dark-on-yellow signage)
+       amber-800 ↔ white    ≈  6.5:1   ✓ AA body  (warning-fg; -700 fails at 3.4:1)
+       red-600 ↔ white      ≈  5.0:1   ✓ AA body
+       blue-600 ↔ white     ≈  6.0:1   ✓ AA body
+       violet-600 ↔ white   ≈  6.7:1   ✓ AA body
+       slate-700 ↔ white    ≈  9.1:1   ✓ AA body
+  */
+
+  /* ----- Primary (blue) ----- */
+  --color-primary-soft: var(--color-primary-50);
+  --color-primary-soft-hover: var(--color-primary-100);
+  --color-primary-soft-fg: var(--color-primary-900);
+  --color-primary-soft-fg-muted: var(--color-primary-800);
+  --color-primary-solid: var(--color-primary-600);
+  --color-primary-solid-hover: var(--color-primary-700);
+  --color-primary-solid-fg: var(--color-white);
+  --color-primary-border: var(--color-primary-300);
+  --color-primary-border-strong: var(--color-primary-500);
+  --color-primary-fg: var(--color-primary-700);
+  --color-primary-icon: var(--color-primary-600);
+
+  /* ----- Secondary (slate) ----- */
+  --color-secondary-soft: var(--color-secondary-50);
+  --color-secondary-soft-hover: var(--color-secondary-100);
+  --color-secondary-soft-fg: var(--color-secondary-900);
+  --color-secondary-soft-fg-muted: var(--color-secondary-800);
+  --color-secondary-solid: var(--color-secondary-700);
+  --color-secondary-solid-hover: var(--color-secondary-800);
+  --color-secondary-solid-fg: var(--color-white);
+  --color-secondary-border: var(--color-secondary-300);
+  --color-secondary-border-strong: var(--color-secondary-500);
+  --color-secondary-fg: var(--color-secondary-700);
+  --color-secondary-icon: var(--color-secondary-600);
+
+  /* ----- Accent (violet) ----- */
+  --color-accent-soft: var(--color-accent-50);
+  --color-accent-soft-hover: var(--color-accent-100);
+  --color-accent-soft-fg: var(--color-accent-900);
+  --color-accent-soft-fg-muted: var(--color-accent-800);
+  --color-accent-solid: var(--color-accent-600);
+  --color-accent-solid-hover: var(--color-accent-700);
+  --color-accent-solid-fg: var(--color-white);
+  --color-accent-border: var(--color-accent-300);
+  --color-accent-border-strong: var(--color-accent-500);
+  --color-accent-fg: var(--color-accent-700);
+  --color-accent-icon: var(--color-accent-600);
+
+  /* ----- Neutral ----- (uses surface/fg tokens so dark mode is automatic) */
+  --color-neutral-soft: var(--color-surface-muted);
+  --color-neutral-soft-hover: var(--color-surface-sunken);
+  --color-neutral-soft-fg: var(--color-fg);
+  --color-neutral-soft-fg-muted: var(--color-fg-muted);
+  --color-neutral-solid: var(--color-fg);
+  --color-neutral-solid-hover: var(--color-gray-700);
+  --color-neutral-solid-fg: var(--color-surface);
+  --color-neutral-border: var(--color-border);
+  --color-neutral-border-strong: var(--color-border-strong);
+  --color-neutral-fg: var(--color-fg);
+  --color-neutral-icon: var(--color-fg-muted);
+
+  /* ----- Info (sky) ----- */
+  --color-info-soft: var(--color-info-50);
+  --color-info-soft-hover: var(--color-info-100);
+  --color-info-soft-fg: var(--color-info-900);
+  --color-info-soft-fg-muted: var(--color-info-800);
+  --color-info-solid: var(--color-info-600);
+  --color-info-solid-hover: var(--color-info-700);
+  --color-info-solid-fg: var(--color-white);
+  --color-info-border: var(--color-info-300);
+  --color-info-border-strong: var(--color-info-500);
+  --color-info-fg: var(--color-info-700);
+  --color-info-icon: var(--color-info-600);
+
+  /* ----- Success (green) ----- */
+  --color-success-soft: var(--color-success-50);
+  --color-success-soft-hover: var(--color-success-100);
+  --color-success-soft-fg: var(--color-success-900);
+  --color-success-soft-fg-muted: var(--color-success-800);
+  /* Solid uses -700 not -600: green-600/white is 3.3:1 (AA fail). -700/white is 4.7:1. */
+  --color-success-solid: var(--color-success-700);
+  --color-success-solid-hover: var(--color-success-800);
+  --color-success-solid-fg: var(--color-white);
+  --color-success-border: var(--color-success-300);
+  --color-success-border-strong: var(--color-success-500);
+  --color-success-fg: var(--color-success-700);
+  --color-success-icon: var(--color-success-600);
+
+  /* ----- Warning (amber) ----- */
+  /* Warning is the only role that keeps dark text on a saturated yellow fill —
+     yellow signage convention. amber-500 + amber-950 = 8.5:1 ✓. */
+  --color-warning-soft: var(--color-warning-50);
+  --color-warning-soft-hover: var(--color-warning-100);
+  --color-warning-soft-fg: var(--color-warning-900);
+  --color-warning-soft-fg-muted: var(--color-warning-800);
+  --color-warning-solid: var(--color-warning-500);
+  --color-warning-solid-hover: var(--color-warning-600);
+  --color-warning-solid-fg: var(--color-warning-950);
+  --color-warning-border: var(--color-warning-300);
+  --color-warning-border-strong: var(--color-warning-500);
+  /* -fg uses -800: amber-700/white is 3.4:1 (AA fail). amber-800/white is 6.5:1. */
+  --color-warning-fg: var(--color-warning-800);
+  --color-warning-icon: var(--color-warning-600);
+
+  /* ----- Error (red) ----- */
+  --color-error-soft: var(--color-error-50);
+  --color-error-soft-hover: var(--color-error-100);
+  --color-error-soft-fg: var(--color-error-900);
+  --color-error-soft-fg-muted: var(--color-error-800);
+  --color-error-solid: var(--color-error-600);
+  --color-error-solid-hover: var(--color-error-700);
+  --color-error-solid-fg: var(--color-white);
+  --color-error-border: var(--color-error-300);
+  --color-error-border-strong: var(--color-error-500);
+  --color-error-fg: var(--color-error-700);
+  --color-error-icon: var(--color-error-600);
+
+  /* ===== Legacy on-role aliases =====
+     `--color-on-{role}` is preserved as an alias of `--color-{role}-solid-fg`
+     for components still on the pre-slot API (calendar-cell, stepper, etc.).
+     New code MUST use the slot tokens. Remove this block once every consumer
+     in the library has migrated. */
+  --color-on-info: var(--color-info-solid-fg);
+  --color-on-success: var(--color-success-solid-fg);
+  --color-on-warning: var(--color-warning-solid-fg);
+  --color-on-error: var(--color-error-solid-fg);
+  --color-on-primary: var(--color-primary-solid-fg);
+  --color-on-secondary: var(--color-secondary-solid-fg);
+  --color-on-accent: var(--color-accent-solid-fg);
+  --color-on-neutral: var(--color-neutral-solid-fg);
+}

package/theme/_typography.css

@@ -0,0 +1,9 @@
+@theme {
+  /* ===== Typography ===== */
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
+
+  /* ===== Animation durations ===== */
+  --duration-fast: 150ms;
+  --duration-normal: 200ms;
+}

package/theme/index.css

@@ -0,0 +1,54 @@
+@import "tailwindcss";
+
+/* ===== Dark variant binding =====
+   Re-binds Tailwind's `dark:` variant so it activates on the same condition
+   that flips the semantic tokens in `_dark.css`:
+     1. an explicit `[data-theme="dark"]` ancestor, OR
+     2. `prefers-color-scheme: dark` AND no explicit `data-theme` opt-out.
+
+   Without this binding `dark:` defaults to `@media (prefers-color-scheme: dark)`,
+   which drifts from the `[data-theme="dark"]` selector — producing inverted
+   token state but un-inverted dark utilities (or vice versa) whenever OS
+   preference disagrees with the consumer's chosen theme. Keep this rule in
+   lock-step with the activation predicates in `_dark.css`. */
+@custom-variant dark {
+  &:where([data-theme="dark"], [data-theme="dark"] *) {
+    @slot;
+  }
+  @media (prefers-color-scheme: dark) {
+    &:where(
+      :root:not([data-theme="light"]):not([data-theme="high-contrast"]),
+      :root:not([data-theme="light"]):not([data-theme="high-contrast"]) *
+    ) {
+      @slot;
+    }
+  }
+}
+
+/* Scan library source for Tailwind class usage */
+@source "../src/**/*.ts";
+
+/* ===== Slot-token utility safelist =====
+   Components consume role slot utilities (`bg-info-soft`, `text-info-fg`, …)
+   that are often assembled from template literals (`bg-${role}-soft`).
+   Tailwind v4's heuristic scanner only picks up literal class names, so we
+   enumerate every role × slot combination here. Touch this list when a new
+   role is introduced or a new slot is added to `_semantic.css`. */
+@source inline("{,hover:}bg-{primary,secondary,accent,neutral,info,success,warning,error}-{soft,soft-hover,solid,solid-hover}");
+@source inline("text-{primary,secondary,accent,neutral,info,success,warning,error}-{soft-fg,soft-fg-muted,solid-fg,fg,icon}");
+@source inline("text-{primary,secondary,accent,neutral,info,success,warning,error}-solid-fg/80");
+@source inline("border-{primary,secondary,accent,neutral,info,success,warning,error}-{border,border-strong}");
+@source inline("ring-{primary,secondary,accent,neutral,info,success,warning,error}-{border,border-strong}");
+
+/* Font stacks + animation duration tokens (Tailwind v4 `@theme` extensions) */
+@import "./_typography.css";
+
+/* Semantic token definitions */
+@import "./_semantic.css";
+
+/* Theme overrides */
+@import "./_dark.css";
+@import "./_high-contrast.css";
+
+/* Base/reset */
+@import "./_base.css";