# Threads Drawer — Theming Contract

The threads-drawer is a BASE component. It is fully driven by CSS variables and
contains no hardcoded colors, shadows, or surface radii. To theme it for an
example, (re)define the tokens below on any ancestor (e.g. `:root`, `body`, or a
wrapper element) — **never edit the drawer files**.

The drawer first consumes the shared design-system tokens (`--card`,
`--border`, `--radius`, …) that `ui/card.tsx` and `ui/button.tsx` also consume.
For a handful of drawer-specific visuals (scrim, shadows, delete-hover tint) it
exposes dedicated `--threads-*` tokens, each with a fallback to a shared token or
the original literal — so defining nothing reproduces the default look exactly.

## Shared design-system tokens consumed

| Token                      | Controls                                                                                                                                                  |
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--background`             | Tooltip text color (`color: var(--background)` on the dark tooltip body)                                                                                  |
| `--foreground`             | Drawer/dialog title + body text, active segment text, tooltip surface bg                                                                                  |
| `--card`                   | Drawer surface bg (via `--threads-drawer-bg`), active segment bg, empty/dialog/load-more bg                                                               |
| `--border`                 | Drawer + header + filter + dialog borders, thread accent (idle), selected-row inset ring, secondary-button hover bg, tooltip border                       |
| `--radius`                 | Drawer/dialog/button/segment/thread/empty-card radii; tooltip radius derives from it                                                                      |
| `--primary`                | New-thread button bg, primary dialog button bg, selected thread accent                                                                                    |
| `--primary-foreground`     | New-thread button text, primary dialog button text                                                                                                        |
| `--secondary`              | Icon-button + thread-row + load-more hover bg, segment track, archived badge bg, secondary dialog button bg, loading skeleton bars, thread-enter start bg |
| `--secondary-foreground`   | (locked-state) inline code text                                                                                                                           |
| `--muted-foreground`       | Icon-button idle color, segment idle text, meta text, placeholder/archived titles, empty/dialog description, load-more text, collapsed-rail icon          |
| `--accent`                 | Selected thread-row bg                                                                                                                                    |
| `--ring`                   | Focus-visible outline on buttons, thread items, segments, dialog buttons                                                                                  |
| `--destructive`            | Delete-button icon color + delete-hover text                                                                                                              |
| `--destructive-foreground` | Destructive dialog button text                                                                                                                            |
| `--font-body`              | Header, segments, tooltip, empty card, and dialog typography                                                                                              |

(locked-state additionally uses `--secondary`, `--muted-foreground`, `--border`,
`--radius`, `--secondary-foreground`, and the `ui/card` + `ui/button` tokens via
those components.)

## Drawer-specific tokens (with fallbacks)

| Token                             | Controls                                  | Fallback                                                  |
| --------------------------------- | ----------------------------------------- | --------------------------------------------------------- |
| `--threads-drawer-bg`             | Drawer surface background                 | `var(--card)`                                             |
| `--threads-drawer-border`         | Drawer right border color                 | `var(--border)`                                           |
| `--threads-drawer-shadow`         | Open-drawer drop shadow                   | `4px 0 20px rgb(0 0 0 / 0.04)`                            |
| `--threads-segment-active-shadow` | Active filter-segment shadow              | `0 1px 2px rgb(0 0 0 / 0.06)`                             |
| `--threads-delete-hover-bg`       | Delete-button hover/focus background tint | `color-mix(in srgb, var(--destructive) 10%, transparent)` |
| `--threads-overlay-bg`            | Confirm-dialog overlay scrim              | `rgb(0 0 0 / 0.5)`                                        |
| `--threads-dialog-shadow`         | Confirm-dialog drop shadow                | `0 20px 50px rgb(0 0 0 / 0.25)`                           |
| `--threads-tooltip-radius`        | Action-button tooltip corner radius       | `calc(var(--radius) - 0.45rem)` (= `0.3rem` at default)   |

All fallbacks resolve to the original hardcoded values in the north-star, so an
example that defines none of the `--threads-*` tokens renders pixel-identical to
the pre-tokenization drawer.