@plastic-js/tsumiki 0.1.52 → 0.1.53

package/docs/api.md

@@ -48,6 +48,44 @@ The shared `size` prop accepts: `xs | sm | md | lg | xl | xxl` (default `md`).
 
 ---
 
+## Semantic tokens
+
+The design system exposes a **semantic color layer** (`src/styles/semantic.css`) between the raw Radix palette steps and the components. Components reference *semantics*, never raw steps, so a style stays consistent across light/dark mode and across containers (page vs. sheet/popover).
+
+**Background hierarchy** — container-aware:
+
+| Token | Value | Use |
+|---|---|---|
+| `--tsu-bg-page` | `neutral-1` | App page background |
+| `--tsu-bg-panel` | `neutral-2` | Cards, sheets, popovers, dialogs |
+| `--tsu-bg-control` | `neutral-3` | Form controls (inputs, buttons) |
+| `--tsu-bg-control-hover` | `neutral-4` | Hover of raised controls |
+| `--tsu-bg-overlay` | `rgba(0,0,0,0.5)` | Modal scrim |
+| `--tsu-bg-overlay-soft` | `rgba(0,0,0,0.35)` | Sheet / bottom scrim |
+
+**Text hierarchy:** `--tsu-text-primary` (`neutral-12`), `--tsu-text-secondary` (`neutral-11`), `--tsu-text-subtle` (`neutral-9`).
+
+**Palette variants** — every palette (`neutral`, `accent`, `danger`, `success`, `warning`) exposes the same five variants. Each variant provides `-bg`, `-bg-hover`, `-bg-active`, `-border`, `-border-hover`, `-fg` as applicable:
+
+| Variant | Pattern | Example |
+|---|---|---|
+| `solid` | Filled control, high contrast | `--tsu-accent-solid-bg` = `accent-9`, `--tsu-accent-solid-fg` = white |
+| `surface` | Panel-tinted control with border | `--tsu-accent-surface-bg` = `accent-alpha-2`, `--tsu-accent-surface-border` = `accent-alpha-6` |
+| `subtle` | Tinted control, no border | `--tsu-accent-subtle-bg` = `accent-alpha-3` |
+| `outline` | Transparent control with border | `--tsu-accent-outline-border` = `accent-alpha-7` |
+| `plain` | Text-like control | `--tsu-accent-plain-fg` = `accent-11` |
+
+**Hover/active tints use ALPHA tokens** (e.g. `--tsu-accent-alpha-3`), so they read identically over the page background and over panel/sheet backgrounds.
+
+**States:**
+
+- **Pressed/active** — unified via `--tsu-pressed` / `--tsu-pressed-hover` (neutral alpha) and `--tsu-pressed-accent` / `--tsu-pressed-accent-hover` (accent alpha).
+- **Disabled** — a uniform state applied on top of any variant: `--tsu-disabled-opacity` (`0.5`) fades the whole component (no grayscale), keeping the `neutral` intent (gray) visually distinct from the accent intent even when disabled.
+
+**Elevation** — `--tsu-shadow-sm / md / lg` (downward) and `--tsu-shadow-up` (upward, for bottom sheets), all composed from neutral alpha tokens.
+
+---
+
 ## Inputs & Forms
 
 ### Field
@@ -136,143 +174,16 @@ Currency-formatted numeric input.
 **Exports:** `NumberInput` · Escape hatch: `NumberInput.origin.{Root, DecrementTrigger, Input, IncrementTrigger}`
 
 | Prop | Type | Default | Description |
-|---|---|---|---|
-| `size` | `string` | `md` | See size values. |
-| `solid` | `boolean` | `false` | Filled background instead of outlined. |
-| `disabled` | `boolean` | `false` | Disabled. |
-| `children` | `node` | — | Custom triggers, if any. |
-
-Passthrough: Ark `Root` props (`value`, `onValueChange`, `min`, `max`, `step`, `formatOptions`, …).
-
-### SearchInput
-
-**Exports:** `SearchInput`
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `placeholder` | `string` | — | Placeholder text. |
-| `onInput` | `(value) => void` | — | Called with the current query. |
-
-### TagsInput
-
-**Exports:** `TagsInput` · Escape hatch: `TagsInput.origin.{Root, Label, Control, Input, Item, ItemPreview, ItemText, ItemDeleteTrigger, ItemInput, ClearTrigger, HiddenInput}`
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `className` | `string` | — | Root class. |
-| `label` | `string` | — | Optional label text. |
-| `placeholder` | `string` | — | Input placeholder. |
-| `children` | `node` | — | Custom item rendering. |
-
-Passthrough: Ark `Root` props (`value`, `onValueChange`, `allowOverflow`, `validate`, …).
-
-### DateInput
-
-Mobile date picker built on the `DateWheel` utility.
-
-**Exports:** `DateInput`
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `value` | `string \| (() => string)` | — | ISO date string. |
-| `onValueChange` | `(value) => void` | — | Called with the new ISO date. |
-| `placeholder` | `string` | — | Placeholder text. |
-| `disabled` | `boolean` | `false` | Disabled. |
-| `size` | `string` | `md` | See size values. |
-| `className` | `string` | — | Root class. |
-
-### ColorPicker
-
-**Exports:** `ColorPicker` · Escape hatch: `ColorPicker.origin.*` (full Ark surface: `Root`, `Label`, `Control`, `Trigger`, `Positioner`, `Content`, `ValueSwatch`, `ValueText`, `Area`, `ChannelSlider`, `ChannelInput`, `TransparencyGrid`, `EyeDropperTrigger`, …)
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `label` | `string` | — | Optional label text. |
-| `showAlpha` | `boolean` | — | Show the alpha channel. |
-| `eyedropper` | `boolean` | — | Show the eyedropper trigger. |
-| `hiddenInput` | `boolean` | — | Render a hidden input. |
-| `onChange` | `(value) => void` | — | Called on color change. |
-| `size` | `string` | `md` | See size values. |
-| `className` | `string` | — | Root class. |
-| `children` | `node` | — | Custom content. |
-
-Passthrough: Ark `Root` props (`value`, `onValueChange`, `format`, …).
-
-### Clipboard
-
-**Exports:** `Clipboard`
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `size` | `string` | `md` | See size values. |
-| `copiedDuration` | `number` | `2000` | ms to keep the "copied" state after copying. |
-
-Passthrough: Ark `Root` props (`value`, `onValueChange`, …).
-
----
-
-## Buttons & Toggles
-
-### Button
-
-**Exports:** `Button` · Escape hatch: `Button.origin.Root`
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `solid` | `boolean` | `false` | Filled (solid) variant instead of outline. |
-| `intent` | `string` | `'default'` | `'default'`, `'neutral'`, or `'danger'`. `neutral` applies only to the outline variant (ignored when `solid`). |
-| `size` | `string` | `md` | See size values. |
-| `disabled` | `boolean` | `false` | Disabled. |
-| `loading` | `boolean` | `false` | Shows a spinner and blocks interaction. |
-| `children` | `node` | — | Button content. |
-
-### Checkbox
-
-**Exports:** `Checkbox` · Escape hatch: `Checkbox.origin.{Root, Label, Control, Indicator, HiddenInput, Group}`
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `size` | `string` | `md` | See size values. |
-| `rounded` | `boolean` | `true` | Rounded (pill) control shape. |
-| `invalid` | `boolean` | `false` | Error state. |
-| `children` | `node` | — | Label content. |
-
-Passthrough: Ark `Root` props (`checked`, `onCheckedChange`, `disabled`, `indeterminate`, …).
-
-### Switch
-
-**Exports:** `Switch` · Escape hatch: `Switch.origin.{Root, Control, Thumb, Label, HiddenInput}`
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `size` | `string` | `md` | See size values. |
-| `children` | `node` | — | Label content. |
-
-Passthrough: Ark `Root` props (`checked`, `onCheckedChange`, `disabled`, …).
-
-### Toggle
-
-**Exports:** `Toggle` · Escape hatch: `Toggle.origin.Root`
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `className` | `string` | — | Root class. |
-| `children` | `node` | — | Content. |
-
-Passthrough: Ark `Root` props (`pressed`, `onPressedChange`, …).
-
-### ToggleGroup
-
-**Exports:** `ToggleGroup`, `ToggleGroupItem` · Escape hatch: `ToggleGroup.origin.{Root, Item}`
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
+|---|---|---|---|---|
 | `size` | `string` | `md` | See size values. |
+| `intent` | `'default' \| 'neutral'` | `'default'` | Border color of the group. `neutral` uses the neutral outline border (matching Input's neutral); the checked segment keeps the accent background. |
 | `children` | `node` | — | `ToggleGroupItem` elements. |
 
 ### FilterGroup
 
-Multi-select filter bar built on `ToggleGroup`. Renders an "All" toggle; selecting any item clears it, and an empty selection maps back to "All".
+Multi-select filter bar built on the `Button` component. Renders an "All" pill (outline when idle, solid accent when active); item pills are neutral when idle and accent-outline when selected. Selecting any item clears "All", and an empty selection maps back to "All".
+
+> **Design note:** `FilterGroup` renders its pills with `Button` (not `ToggleGroup`) to reuse Button's variant/intent styling and the neutral/outline/solid state language. Trade-off: the multi-select toggle logic is reimplemented here instead of delegating to `ToggleGroup`'s selection machinery. `ToggleGroup` remains available as a standalone segmented control.
 
 **Exports:** `FilterGroup`
 
@@ -284,7 +195,7 @@ Multi-select filter bar built on `ToggleGroup`. Renders an "All" toggle; selecti
 | `allLabel` | `string` | `'All'` | Label for the clear/All toggle. |
 | `size` | `string` | `md` | See size values. |
 | `buttonClass` | `string` | — | Class applied to every button. |
-| `groupClass` | `string` | — | Class applied to the inner `ToggleGroup`. |
+| `groupClass` | `string` | — | Class applied to the inner scroll container. |
 | `sticky` | `boolean \| number` | — | Sticky to the top of the scroll container; pass a number for a `top` offset in px. |
 | `className` | `string` | — | Root class. |
 
@@ -325,13 +236,14 @@ Mobile-optimized bottom-sheet select (draggable sheet overlay).
 |---|---|---|---|
 | `value` | `string \| (() => string)` | — | Selected value. |
 | `onValueChange` | `(value) => void` | — | Called when an item is selected. |
-| `items` | `array \| (() => array)` | `[]` | Data array. |
+| `items` | `array \| (() => array)` | `[]` | Data array. Items may include `disabled: true` to render a non-selectable row. |
 | `itemToValue` | `(item) => string` | `item.value` | Extract value from an item. |
 | `itemToLabel` | `(item) => node` | `item.label` | Extract label from an item. |
 | `open` | `(() => boolean)` | — | **Required** controlled open state. |
 | `onOpenChange` | `(open) => void` | — | Open/close callback. |
 | `disabled` | `boolean` | `false` | Disabled. |
 | `solid` | `boolean` | `false` | Filled trigger variant instead of outline. |
+| `intent` | `'default' \| 'neutral' \| 'danger'` | `'default'` | Border color for trigger and the search input. `neutral` applies only to the outline variant (ignored when `solid`). |
 | `filter` | `(item, query, itemToLabel) => boolean` | — | Custom filter for the search box. |
 | `placeholder` | `string` | — | Trigger placeholder. |
 | `backdropClassName` | `string` | — | Backdrop class. |
@@ -685,7 +597,7 @@ Passthrough: Ark `Root` props (`value`, `min`, `max`, …).
 > **General rule: always use the highest-level callback you need.** Reach for `onCancel` (and `onConfirm`) first — they express intent. Only fall back to `onClose` when you need close cleanup for every path, and to `onOpenChange` only when you need raw open/close control. Passing a lower-level callback just because a higher-level one exists usually means you are bypassing the intent layer.
 
 **Known issues:**
-- Pressing <kbd>Escape</kbd> closes both the Dialog and any nested overlay (e.g. `DateInput`, `Select`) that is open inside it. There is currently no event coordination between the two — both react to the same key press.
+- Pressing <kbd>Escape</kbd> closes both the Dialog and any nested overlay (e.g. `DatePicker`, `Select`) that is open inside it. There is currently no event coordination between the two — both react to the same key press.
 
 ### ConfirmDialog
 

package/docs/component-api-pattern.md

@@ -74,7 +74,7 @@ Whether the component is built on top of a same-named Ark primitive, or implemen
 | Clipboard | Web Clipboard API |
 | CloseButton | `@emotion/css` |
 | ConfirmDialog | Composes `Dialog` |
-| DateInput | `DateWheel` utility |
+| DatePicker | `DateWheel` utility |
 | Icon | `@emotion/css` |
 | MoneyInput | Composes `Input` |
 | SearchInput | Composes `Input` |

package/docs/scroll-lock-issue.md

@@ -1,7 +1,7 @@
 # Scroll-lock is not stacked
 
 **Status:** Known issue
-**Affects:** `Select.jsx:193`, `DateInput.jsx:293/303`
+**Affects:** `Select.jsx:193`, `DatePicker.jsx:293/303`
 
 ## Problem
 
@@ -11,7 +11,7 @@ Overlay components set `document.body.style.overflow` directly:
 // Select
 document.body.style.overflow = v ? 'hidden' : ''
 
-// DateInput
+// DatePicker
 document.body.style.overflow = 'hidden'   // on open
 document.body.style.overflow = ''         // on close
 ```
@@ -31,5 +31,5 @@ const lock = () => { count += 1; document.body.style.overflow = 'hidden' }
 const unlock = () => { count = Math.max(0, count - 1); if (count === 0) document.body.style.overflow = '' }
 ```
 
-Use it in every overlay (`Select`, `DateInput`, …) instead of writing
+Use it in every overlay (`Select`, `DatePicker`, …) instead of writing
 `document.body.style.overflow` directly.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plastic-js/tsumiki",
-  "version": "0.1.52",
+  "version": "0.1.53",
   "description": "A UI component library for Plastic JS.",
   "license": "MIT",
   "author": "tigre",

package/src/styles/color.css

@@ -62,6 +62,20 @@
   --tsu-danger-11: var(--red-11);
   --tsu-danger-12: var(--red-12);
 
+  /* Danger alpha (red) */
+  --tsu-danger-alpha-1: var(--red-a1);
+  --tsu-danger-alpha-2: var(--red-a2);
+  --tsu-danger-alpha-3: var(--red-a3);
+  --tsu-danger-alpha-4: var(--red-a4);
+  --tsu-danger-alpha-5: var(--red-a5);
+  --tsu-danger-alpha-6: var(--red-a6);
+  --tsu-danger-alpha-7: var(--red-a7);
+  --tsu-danger-alpha-8: var(--red-a8);
+  --tsu-danger-alpha-9: var(--red-a9);
+  --tsu-danger-alpha-10: var(--red-a10);
+  --tsu-danger-alpha-11: var(--red-a11);
+  --tsu-danger-alpha-12: var(--red-a12);
+
   /* Success (green) */
   --tsu-success-1: var(--green-1);
   --tsu-success-2: var(--green-2);
@@ -76,6 +90,20 @@
   --tsu-success-11: var(--green-11);
   --tsu-success-12: var(--green-12);
 
+  /* Success alpha (green) */
+  --tsu-success-alpha-1: var(--green-a1);
+  --tsu-success-alpha-2: var(--green-a2);
+  --tsu-success-alpha-3: var(--green-a3);
+  --tsu-success-alpha-4: var(--green-a4);
+  --tsu-success-alpha-5: var(--green-a5);
+  --tsu-success-alpha-6: var(--green-a6);
+  --tsu-success-alpha-7: var(--green-a7);
+  --tsu-success-alpha-8: var(--green-a8);
+  --tsu-success-alpha-9: var(--green-a9);
+  --tsu-success-alpha-10: var(--green-a10);
+  --tsu-success-alpha-11: var(--green-a11);
+  --tsu-success-alpha-12: var(--green-a12);
+
   /* Warning (amber) */
   --tsu-warning-1: var(--amber-1);
   --tsu-warning-2: var(--amber-2);
@@ -90,6 +118,20 @@
   --tsu-warning-11: var(--amber-11);
   --tsu-warning-12: var(--amber-12);
 
+  /* Warning alpha (amber) */
+  --tsu-warning-alpha-1: var(--amber-a1);
+  --tsu-warning-alpha-2: var(--amber-a2);
+  --tsu-warning-alpha-3: var(--amber-a3);
+  --tsu-warning-alpha-4: var(--amber-a4);
+  --tsu-warning-alpha-5: var(--amber-a5);
+  --tsu-warning-alpha-6: var(--amber-a6);
+  --tsu-warning-alpha-7: var(--amber-a7);
+  --tsu-warning-alpha-8: var(--amber-a8);
+  --tsu-warning-alpha-9: var(--amber-a9);
+  --tsu-warning-alpha-10: var(--amber-a10);
+  --tsu-warning-alpha-11: var(--amber-a11);
+  --tsu-warning-alpha-12: var(--amber-a12);
+
   /* Neutral Alpha Overlay (used for shadows/elevation) */
   --tsu-neutral-alpha-1: var(--olive-a1);
   --tsu-neutral-alpha-2: var(--olive-a2);

package/src/styles/semantic.css

@@ -0,0 +1,212 @@
+/*
+ * Semantic token layer.
+ *
+ * Sits between the raw palette steps (theme.css / color.css) and the
+ * components. Components reference *semantics* (`--tsu-accent-solid-bg`,
+ * `--tsu-neutral-outline-border`, …), never raw steps — so a style survives
+ * wherever it is mounted and dark mode flips everything consistently.
+ *
+ * Modeled on Park UI / Radix Themes:
+ *   - every palette has the same 5 variants: solid · surface · subtle ·
+ *     outline · plain, each with bg / bg-hover / bg-active / border / fg
+ *   - hover/active tints are ALPHA tokens, so they read identically over the
+ *     page background and over panel/sheet backgrounds
+ *   - `disabled` is a uniform 50% opacity state applied on top of any variant
+ *     — never a separate near-identical gray color
+ */
+
+:root {
+  /* === Background hierarchy (container-aware) === */
+  --tsu-bg-page: var(--tsu-neutral-1);       /* app page background */
+  --tsu-bg-panel: var(--tsu-neutral-2);      /* cards, sheets, popovers, dialogs */
+  --tsu-bg-control: var(--tsu-neutral-3);    /* form controls (inputs, buttons) */
+  --tsu-bg-control-hover: var(--tsu-neutral-4);
+  --tsu-bg-overlay: rgba(0, 0, 0, 0.5);      /* modal scrim */
+  --tsu-bg-overlay-soft: rgba(0, 0, 0, 0.35); /* sheet / bottom-scrim */
+
+  /* Back-compat aliases (existing components) */
+  --tsu-bg: var(--tsu-bg-page);
+  --tsu-surface: var(--tsu-bg-panel);
+  --tsu-surface-raised: var(--tsu-bg-control);
+  --tsu-surface-raised-hover: var(--tsu-bg-control-hover);
+
+  /* === Text hierarchy === */
+  --tsu-fg: var(--tsu-neutral-12);
+  --tsu-text-primary: var(--tsu-neutral-12);
+  --tsu-text-secondary: var(--tsu-neutral-11);
+  --tsu-text-subtle: var(--tsu-neutral-9);
+
+  /* === Border hierarchy === */
+  --tsu-border: var(--tsu-neutral-6);
+  --tsu-border-strong: var(--tsu-neutral-7);
+
+  /* === Focus state === */
+  --tsu-focus-bg: var(--tsu-bg-control-hover);
+  --tsu-focus-border: var(--tsu-accent-8);
+  --tsu-focus-ring: var(--tsu-accent-alpha-8);
+
+  /* === Pressed / active state (touch) — unified === */
+  --tsu-pressed: var(--tsu-neutral-alpha-3);
+  --tsu-pressed-hover: var(--tsu-neutral-alpha-4);
+  --tsu-pressed-accent: var(--tsu-accent-alpha-3);
+  --tsu-pressed-accent-hover: var(--tsu-accent-alpha-4);
+  /* back-compat alias */
+  --tsu-color-pressed: var(--tsu-pressed);
+  --tsu-color-pressed-accent: var(--tsu-pressed-accent);
+
+  /* === Disabled state — uniform 50% opacity, no grayscale ===
+     Applied on top of any variant. The whole component fades uniformly so
+     the neutral intent (gray border) and the accent intent stay visually
+     distinct even when disabled. */
+  --tsu-disabled-opacity: 0.5;
+  /* fallback colors for surfaces that cannot use opacity */
+  --tsu-disabled-bg: var(--tsu-bg-control);
+  --tsu-disabled-fg: var(--tsu-neutral-9);
+  --tsu-disabled-border: var(--tsu-neutral-7);
+}
+
+/* ==========================================================================
+   Palette variants
+   solid  → filled control (button primary, checked toggle, switch track)
+   surface → bordered panel-tinted control (surface buttons, surface inputs)
+   subtle → tinted control, no border (segmented, chips, selected rows)
+   outline → transparent control with a border (outline buttons, inputs)
+   plain  → text-like control (link buttons, menu items)
+   ========================================================================== */
+
+:root {
+  /* ---- Neutral (olive) ---- */
+  --tsu-neutral-solid-bg: var(--tsu-neutral-9);
+  --tsu-neutral-solid-bg-hover: var(--tsu-neutral-10);
+  --tsu-neutral-solid-fg: var(--tsu-bg-page);
+
+  --tsu-neutral-surface-bg: var(--tsu-bg-panel);
+  --tsu-neutral-surface-bg-hover: var(--tsu-bg-control);
+  --tsu-neutral-surface-bg-active: var(--tsu-bg-control-hover);
+  --tsu-neutral-surface-border: var(--tsu-neutral-6);
+  --tsu-neutral-surface-border-hover: var(--tsu-neutral-7);
+  --tsu-neutral-surface-fg: var(--tsu-text-primary);
+
+  --tsu-neutral-subtle-bg: var(--tsu-neutral-alpha-3);
+  --tsu-neutral-subtle-bg-hover: var(--tsu-neutral-alpha-4);
+  --tsu-neutral-subtle-bg-active: var(--tsu-neutral-alpha-5);
+  --tsu-neutral-subtle-fg: var(--tsu-text-primary);
+
+  --tsu-neutral-outline-border: var(--tsu-neutral-6);
+  --tsu-neutral-outline-border-hover: var(--tsu-neutral-7);
+  --tsu-neutral-outline-bg-hover: var(--tsu-neutral-alpha-2);
+  --tsu-neutral-outline-bg-active: var(--tsu-neutral-alpha-3);
+  --tsu-neutral-outline-fg: var(--tsu-text-primary);
+
+  --tsu-neutral-plain-fg: var(--tsu-text-primary);
+  --tsu-neutral-plain-bg-hover: var(--tsu-neutral-alpha-3);
+  --tsu-neutral-plain-bg-active: var(--tsu-neutral-alpha-4);
+
+  /* ---- Accent (indigo) ---- */
+  --tsu-accent-solid-bg: var(--tsu-accent-9);
+  --tsu-accent-solid-bg-hover: var(--tsu-accent-10);
+  --tsu-accent-solid-fg: #ffffff;
+
+  --tsu-accent-surface-bg: var(--tsu-accent-alpha-2);
+  --tsu-accent-surface-bg-hover: var(--tsu-accent-alpha-3);
+  --tsu-accent-surface-bg-active: var(--tsu-accent-alpha-4);
+  --tsu-accent-surface-border: var(--tsu-accent-alpha-6);
+  --tsu-accent-surface-border-hover: var(--tsu-accent-alpha-7);
+  --tsu-accent-surface-fg: var(--tsu-accent-11);
+
+  --tsu-accent-subtle-bg: var(--tsu-accent-alpha-3);
+  --tsu-accent-subtle-bg-hover: var(--tsu-accent-alpha-4);
+  --tsu-accent-subtle-bg-active: var(--tsu-accent-alpha-5);
+  --tsu-accent-subtle-fg: var(--tsu-accent-11);
+
+  --tsu-accent-outline-border: var(--tsu-accent-alpha-7);
+  --tsu-accent-outline-border-hover: var(--tsu-accent-alpha-8);
+  --tsu-accent-outline-bg-hover: var(--tsu-accent-alpha-2);
+  --tsu-accent-outline-bg-active: var(--tsu-accent-alpha-3);
+  --tsu-accent-outline-fg: var(--tsu-accent-11);
+
+  --tsu-accent-plain-fg: var(--tsu-accent-11);
+  --tsu-accent-plain-bg-hover: var(--tsu-accent-alpha-3);
+  --tsu-accent-plain-bg-active: var(--tsu-accent-alpha-4);
+
+  /* ---- Danger (red) ---- */
+  --tsu-danger-solid-bg: var(--tsu-danger-9);
+  --tsu-danger-solid-bg-hover: var(--tsu-danger-10);
+  --tsu-danger-solid-fg: #ffffff;
+
+  --tsu-danger-surface-bg: var(--tsu-danger-alpha-2);
+  --tsu-danger-surface-bg-hover: var(--tsu-danger-alpha-3);
+  --tsu-danger-surface-bg-active: var(--tsu-danger-alpha-4);
+  --tsu-danger-surface-border: var(--tsu-danger-alpha-6);
+  --tsu-danger-surface-border-hover: var(--tsu-danger-alpha-7);
+  --tsu-danger-surface-fg: var(--tsu-danger-11);
+
+  --tsu-danger-subtle-bg: var(--tsu-danger-alpha-3);
+  --tsu-danger-subtle-bg-hover: var(--tsu-danger-alpha-4);
+  --tsu-danger-subtle-bg-active: var(--tsu-danger-alpha-5);
+  --tsu-danger-subtle-fg: var(--tsu-danger-11);
+
+  --tsu-danger-outline-border: var(--tsu-danger-alpha-7);
+  --tsu-danger-outline-border-hover: var(--tsu-danger-alpha-8);
+  --tsu-danger-outline-bg-hover: var(--tsu-danger-alpha-2);
+  --tsu-danger-outline-bg-active: var(--tsu-danger-alpha-3);
+  --tsu-danger-outline-fg: var(--tsu-danger-11);
+
+  --tsu-danger-plain-fg: var(--tsu-danger-11);
+  --tsu-danger-plain-bg-hover: var(--tsu-danger-alpha-3);
+  --tsu-danger-plain-bg-active: var(--tsu-danger-alpha-4);
+
+  /* ---- Success (green) ---- */
+  --tsu-success-solid-bg: var(--tsu-success-9);
+  --tsu-success-solid-bg-hover: var(--tsu-success-10);
+  --tsu-success-solid-fg: #ffffff;
+
+  --tsu-success-surface-bg: var(--tsu-success-alpha-2);
+  --tsu-success-surface-bg-hover: var(--tsu-success-alpha-3);
+  --tsu-success-surface-bg-active: var(--tsu-success-alpha-4);
+  --tsu-success-surface-border: var(--tsu-success-alpha-6);
+  --tsu-success-surface-border-hover: var(--tsu-success-alpha-7);
+  --tsu-success-surface-fg: var(--tsu-success-11);
+
+  --tsu-success-subtle-bg: var(--tsu-success-alpha-3);
+  --tsu-success-subtle-bg-hover: var(--tsu-success-alpha-4);
+  --tsu-success-subtle-bg-active: var(--tsu-success-alpha-5);
+  --tsu-success-subtle-fg: var(--tsu-success-11);
+
+  --tsu-success-outline-border: var(--tsu-success-alpha-7);
+  --tsu-success-outline-border-hover: var(--tsu-success-alpha-8);
+  --tsu-success-outline-bg-hover: var(--tsu-success-alpha-2);
+  --tsu-success-outline-bg-active: var(--tsu-success-alpha-3);
+  --tsu-success-outline-fg: var(--tsu-success-11);
+
+  --tsu-success-plain-fg: var(--tsu-success-11);
+  --tsu-success-plain-bg-hover: var(--tsu-success-alpha-3);
+  --tsu-success-plain-bg-active: var(--tsu-success-alpha-4);
+
+  /* ---- Warning (amber) ---- */
+  --tsu-warning-solid-bg: var(--tsu-warning-9);
+  --tsu-warning-solid-bg-hover: var(--tsu-warning-10);
+  --tsu-warning-solid-fg: #ffffff;
+
+  --tsu-warning-surface-bg: var(--tsu-warning-alpha-2);
+  --tsu-warning-surface-bg-hover: var(--tsu-warning-alpha-3);
+  --tsu-warning-surface-bg-active: var(--tsu-warning-alpha-4);
+  --tsu-warning-surface-border: var(--tsu-warning-alpha-6);
+  --tsu-warning-surface-border-hover: var(--tsu-warning-alpha-7);
+  --tsu-warning-surface-fg: var(--tsu-warning-11);
+
+  --tsu-warning-subtle-bg: var(--tsu-warning-alpha-3);
+  --tsu-warning-subtle-bg-hover: var(--tsu-warning-alpha-4);
+  --tsu-warning-subtle-bg-active: var(--tsu-warning-alpha-5);
+  --tsu-warning-subtle-fg: var(--tsu-warning-11);
+
+  --tsu-warning-outline-border: var(--tsu-warning-alpha-7);
+  --tsu-warning-outline-border-hover: var(--tsu-warning-alpha-8);
+  --tsu-warning-outline-bg-hover: var(--tsu-warning-alpha-2);
+  --tsu-warning-outline-bg-active: var(--tsu-warning-alpha-3);
+  --tsu-warning-outline-fg: var(--tsu-warning-11);
+
+  --tsu-warning-plain-fg: var(--tsu-warning-11);
+  --tsu-warning-plain-bg-hover: var(--tsu-warning-alpha-3);
+  --tsu-warning-plain-bg-active: var(--tsu-warning-alpha-4);
+}

package/src/styles/shadow.css

@@ -5,4 +5,5 @@
     0 4px 16px var(--tsu-neutral-alpha-8);
   --tsu-shadow-lg: 0 2px 6px var(--tsu-neutral-alpha-6),
     0 12px 32px var(--tsu-neutral-alpha-10);
+  --tsu-shadow-up: 0 -8px 32px var(--tsu-neutral-alpha-10);
 }

package/src/styles/theme.css

@@ -22,6 +22,20 @@
   --tsu-accent-11: var(--indigo-11);
   --tsu-accent-12: var(--indigo-12);
 
+  /* Accent alpha (indigo) — transparent tints for hover/active/overlays */
+  --tsu-accent-alpha-1: var(--indigo-a1);
+  --tsu-accent-alpha-2: var(--indigo-a2);
+  --tsu-accent-alpha-3: var(--indigo-a3);
+  --tsu-accent-alpha-4: var(--indigo-a4);
+  --tsu-accent-alpha-5: var(--indigo-a5);
+  --tsu-accent-alpha-6: var(--indigo-a6);
+  --tsu-accent-alpha-7: var(--indigo-a7);
+  --tsu-accent-alpha-8: var(--indigo-a8);
+  --tsu-accent-alpha-9: var(--indigo-a9);
+  --tsu-accent-alpha-10: var(--indigo-a10);
+  --tsu-accent-alpha-11: var(--indigo-a11);
+  --tsu-accent-alpha-12: var(--indigo-a12);
+
   /* Neutral (olive) */
   --tsu-neutral-1: var(--olive-1);
   --tsu-neutral-2: var(--olive-2);

package/src/styles/tokens.css

@@ -1,4 +1,5 @@
 @import './color.css';
+@import './semantic.css';
 @import './radius.css';
 @import './sizing.css';
 @import './typography.css';