Tailwind #53 — Toolchain + tokens + catalog

Field	Value
GitLab	sourcecontrollers/safecall#53
Parent	#52 — Bulma → Tailwind CSS platform
Roadmap	`tailwind-roadmap.md`
Depends on	— (first migration step)
Workflow	open

Goal

Add Tailwind CSS v4 to the web build alongside Bulma, map the current dark UI into CSS variables + @theme, and ship a small @layer components primitive catalog so later steps swap class names onto a stable agent API — not utility soup or CSS hacks.

Design principles

Prefer catalog primitives for repeated chrome; Tailwind utilities for one-off layout/spacing.
Soft/solid hues are explicit variants (e.g. .tag-info-soft) — never a fragile “light” modifier.
Keep data-theme on <html> (do not switch to class="dark"). Default data-theme="dark" to match today’s permanent dark UI.
No new Bulma markup after this step lands. Existing pages stay Bulma until later IIDs.
Omit Tailwind preflight until #62 so Bulma pages are not reset.

Acceptance criteria

[x] tailwindcss + @tailwindcss/cli added to web/package.json
[x] CSS source under web/src/css/: tokens.css, app.css, components.css (and optional layout/overrides port stub)
[x] Dark-first semantic tokens mapped into Tailwind @theme; light tokens defined for parity/future
[x] Component catalog present (btn, tag, notification, modal, field, …) — stubs OK if complete enough for #54–#55
[x] web/build.ts compiles Tailwind and serves CSS; Bulma still linked (coexistence; preflight off)
[x] Embeds / static asset expectations still pass for existing /css/* paths (update names carefully)
[x] Smoke: login + one admin page still work on Bulma

Implementation notes

Entry app.css: import theme + utilities only (no @import "tailwindcss/preflight" / full preflight until #62). Follow MetaPrism/Pythia concat order pattern: FA → Bulma → Tailwind → app overrides.
Move toward web/src/css/ as source of truth; stop treating web/build/css/styles.css as the only editable file for new work.
Map common hex from current dark shells (#0d1117, #161b22, …) into tokens (--sc-page, --sc-surface, --sc-border, --sc-text, semantic hues).
Custom dark variant keyed off [data-theme="dark"].
Switch <html class="theme-dark"> toward data-theme="dark" only if coexistence still works; if risky, defer the attribute swap to #55/#62 but define tokens for data-theme now.

Component catalog (minimum)

Primitive	Role
`.btn` + size/hue/emphasis	Action buttons
`.tag` + solid/soft semantics	Status chips
`.notification` + variants	Toasts / alerts
`.modal` / `.modal-card` / `.modal-backdrop`	Modals
`.field` / `.label` / `.control` / `.input` / `.select` / `.checkbox`	Forms
`.box` / `.card` / `.section` / `.container` / `.title`	Layout chrome
`.navbar` / `.navbar-item` / `.navbar-brand`	Shell nav
`.table` / `.table-container`	Tables
`.tabs` / `.tab` + `.is-active`	Tabs
`.hidden`	Visibility (alias `.is-hidden` until #62)

Out of scope

Work	Issue
Shared JS helpers / `BulmaNotification` rename	#54
Shell / login / settings markup	#55
Remove Bulma / enable preflight	#62

Key paths

web/package.json
web/build.ts
web/build/index.html
web/src/css/ (new)
web/build/css/
scripts/build/generators/embeds.ts

Verification

cd web && bun install && bun run build (or project-equivalent web build) succeeds.
Built CSS contains token variables, .btn (or catalog), and Tailwind utilities.
Smoke / login and one listing page (Bulma unchanged visually enough to use).
Typecheck web if touched: cd web && bun run typecheck.

Done when / handoff

Operator verifies → commit with Closes #53 → push gitlab.
Next: #54 shared helpers (activate only when asked).

Tailwind #53 — Toolchain + tokens + catalog ​

Goal ​

Design principles ​

Acceptance criteria ​

Implementation notes ​

Component catalog (minimum) ​

Out of scope ​

Key paths ​

Verification ​

Done when / handoff ​