feat(ui): shared component vocabulary (LC-195) #241

Merged

nrupard merged 1 commit from feat/lc-195-components into main

2026-05-28 15:17:33 +02:00

nrupard commented

2026-05-27 22:14:36 +02:00

Owner

Establish a small, token-based component vocabulary defined once (instead of per-template class soup) and adopt it in a representative slice. Broad rollout across every remaining control continues incrementally.

Vocabulary (`assets/tailwind.css` `@layer components`, all `@apply` on LC-190 tokens)

Buttons: .btn base + .btn-primary / .btn-secondary / .btn-ghost / .btn-danger color modifiers + .btn-sm; disabled state baked in. Used composed: class="btn btn-primary".
Form controls: .input (input/select/textarea) + .input-error.
Surfaces: .card.
Overlays: .modal-backdrop / .modal-panel dialog shell.
Notifications: .toast.

Because they're built on the tokens, the components recolor with light/dark/high-contrast automatically.

Adopted (the demonstrated slice)

auth/{login,register,forgot,reset}: form -> card, text inputs -> input, submit -> btn btn-primary.
Modal shells: poll / scheduled / reminder -> modal-backdrop + modal-panel.

Remaining LC-195 (continuing)

Adopt btn/input across the rest (room composer, settings, admin, enclave, sidebar menus), and wire .toast into the outbox banner / flash messages / notify bus. These are incremental per-element swaps on the now-defined vocabulary.

Verification

build-css confirms @apply resolves every token utility (a missing one errors at build); emitted component classes verified. just test + just test-saas green (the routes_uploads concurrent-load failure is the documented flake; passes isolated). cargo fmt --all clean. No test asserts on the changed auth/modal classes.

Establish a small, token-based **component vocabulary** defined once (instead of per-template class soup) and adopt it in a representative slice. Broad rollout across every remaining control continues incrementally. ## Vocabulary (`assets/tailwind.css` `@layer components`, all `@apply` on LC-190 tokens) - **Buttons**: `.btn` base + `.btn-primary` / `.btn-secondary` / `.btn-ghost` / `.btn-danger` color modifiers + `.btn-sm`; disabled state baked in. Used composed: `class="btn btn-primary"`. - **Form controls**: `.input` (input/select/textarea) + `.input-error`. - **Surfaces**: `.card`. - **Overlays**: `.modal-backdrop` / `.modal-panel` dialog shell. - **Notifications**: `.toast`. Because they're built on the tokens, the components recolor with light/dark/high-contrast automatically. ## Adopted (the demonstrated slice) - `auth/{login,register,forgot,reset}`: form -> `card`, text inputs -> `input`, submit -> `btn btn-primary`. - Modal shells: poll / scheduled / reminder -> `modal-backdrop` + `modal-panel`. ## Remaining LC-195 (continuing) Adopt `btn`/`input` across the rest (room composer, settings, admin, enclave, sidebar menus), and wire `.toast` into the outbox banner / flash messages / notify bus. These are incremental per-element swaps on the now-defined vocabulary. ## Verification `build-css` confirms `@apply` resolves every token utility (a missing one errors at build); emitted component classes verified. `just test` + `just test-saas` green (the `routes_uploads` concurrent-load failure is the documented flake; passes isolated). `cargo fmt --all` clean. No test asserts on the changed auth/modal classes.

nrupard added 1 commit

2026-05-27 22:14:36 +02:00

feat(ui): shared component vocabulary (buttons/inputs/cards/modals) (LC-195)

check-secrets / Nosey parker (push) Successful in 4s

Details

check-secrets / TruffleHog (push) Successful in 7s

Details

check-secrets / Kingfisher (push) Successful in 7s

Details

check-secrets / Nosey parker (pull_request) Successful in 4s

Details

check-secrets / Kingfisher (pull_request) Successful in 4s

Details

check-secrets / TruffleHog (pull_request) Successful in 5s

Details

Check / clippy + fmt + tests (pull_request) Successful in 2m1s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

876d281491

Define a small, token-based component layer once instead of per-template class soup, and adopt it in a representative slice (auth forms + the standalone modals). Broad rollout across every remaining button/input/toast continues incrementally.

- assets/tailwind.css @layer components: `.btn` (base) + `.btn-primary/secondary/ghost/danger` color modifiers + `.btn-sm` + disabled state; `.input` (+ `.input-error`) for input/select/textarea; `.card`; `.modal-backdrop` / `.modal-panel` dialog shell; `.toast`. All built with @apply on the LC-190 tokens, so components recolor with the theme. Used composed in markup, e.g. `class="btn btn-primary"`.
- Adopted: auth/{login,register,forgot,reset} (form -> card, inputs -> input, submit -> btn btn-primary), and the poll / scheduled / reminder modal shells -> modal-backdrop + modal-panel.

Remaining LC-195 (continuing): adopt btn/input/toast across the rest of the templates (room composer, settings, admin, enclave, sidebar menus), and wire .toast into the outbox banner / flash / notify bus.

build-css verified the @apply resolves every token utility; emitted classes confirmed. just test + just test-saas green (routes_uploads concurrent-load flake excluded); cargo fmt --all clean; i18n_catalog gate unaffected.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>