feat(css): add .alert* + layout-helper component classes (LC-555) #524

Merged

longjacksonle merged 4 commits from feat/LC-555-alert-classes into main 2026-07-08 21:25:31 +02:00

Conversation 0 Commits 4 Files changed 1 +39

longjacksonle commented 2026-07-08 21:03:03 +02:00

Owner

Copy link

LC-UI-02: shared .alert* + layout-helper component classes

Phase 1 foundation ticket LC-555 (epic LC-553). Adds the missing shared component vocabulary so utility/admin pages can stop hand-rolling bg-*-50 alert boxes and ad-hoc flex clusters. Pure @layer components additions in assets/tailwind.css.

What changed

• Alerts: base .alert (bordered soft-surface callout, icon-friendly flex layout) + .alert-success, .alert-warning, .alert-danger, .alert-info. All colors are tokens, so they recolor per theme.
  • success/warning use their dedicated -surface-content foregrounds.
  • danger uses text-danger - there is deliberately no --danger-surface-content token (LC-215).
  • info is the neutral variant (no --accent-border token exists; a neutral note reads cleanly in all four themes).
• Layout helpers: .lc-toolbar (quiet inset control strip for filter/action bars), .lc-action-row (wrapping right-aligned button cluster for card/form footers), .lc-empty-wrap (centers an empty state within a card/section).

Why it is safe

• just build-css passes, which validates every @apply resolves to a real utility (an invalid one would error the build).
• tailwind-built.css is unchanged: Tailwind purges these component classes until a template references them, so this is a source-only vocabulary addition (same posture as the phase-1b tokens). The first consuming template (LC-UI-03/04/06/08) rebuilds and emits them, per the repo's existing .btn/.card/.input convention.
• No Rust, no template, no built-CSS change.

Scope

• This is the vocabulary only. Applying .alert* to existing pages (replacing the raw boxes) happens in the migration tickets. .lc-page-* width utilities are the sibling foundation ticket LC-562.

🤖 Generated with Claude Code

https://claude.ai/code/session_011jXpZXXwpB36MvTr6JrGXN

## LC-UI-02: shared `.alert*` + layout-helper component classes Phase 1 foundation ticket LC-555 (epic LC-553). Adds the missing shared component vocabulary so utility/admin pages can stop hand-rolling `bg-*-50` alert boxes and ad-hoc flex clusters. Pure `@layer components` additions in `assets/tailwind.css`. ### What changed - **Alerts**: base `.alert` (bordered soft-surface callout, icon-friendly flex layout) + `.alert-success`, `.alert-warning`, `.alert-danger`, `.alert-info`. All colors are tokens, so they recolor per theme. - success/warning use their dedicated `-surface-content` foregrounds. - danger uses `text-danger` - there is deliberately no `--danger-surface-content` token (LC-215). - info is the neutral variant (no `--accent-border` token exists; a neutral note reads cleanly in all four themes). - **Layout helpers**: `.lc-toolbar` (quiet inset control strip for filter/action bars), `.lc-action-row` (wrapping right-aligned button cluster for card/form footers), `.lc-empty-wrap` (centers an empty state within a card/section). ### Why it is safe - `just build-css` passes, which **validates every `@apply` resolves to a real utility** (an invalid one would error the build). - `tailwind-built.css` is **unchanged**: Tailwind purges these component classes until a template references them, so this is a source-only vocabulary addition (same posture as the phase-1b tokens). The first consuming template (LC-UI-03/04/06/08) rebuilds and emits them, per the repo's existing `.btn`/`.card`/`.input` convention. - No Rust, no template, no built-CSS change. ### Scope - This is the vocabulary only. Applying `.alert*` to existing pages (replacing the raw boxes) happens in the migration tickets. `.lc-page-*` width utilities are the sibling foundation ticket **LC-562**. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_011jXpZXXwpB36MvTr6JrGXN

longjacksonle added 1 commit 2026-07-08 21:03:03 +02:00

feat(css): add .alert* + layout-helper component classes (LC-555 / LC-UI-02) ... 4c65e96173

- Adds the tokenized inline-alert vocabulary to the @layer components block: base `.alert` (bordered soft-surface callout, icon-friendly flex layout) plus `.alert-success`, `.alert-warning`, `.alert-danger`, `.alert-info` modifiers. success/warning use their dedicated `-surface-content` foregrounds; danger uses `text-danger` (there is no `--danger-surface-content` token by LC-215 design); info is the neutral variant (no accent-border token exists and a neutral note reads cleanly in all four themes).
- Adds three layout helpers the utility/admin pages need: `.lc-toolbar` (quiet inset control strip), `.lc-action-row` (wrapping right-aligned button cluster for card/form footers), `.lc-empty-wrap` (centers an empty state in a card/section).
- `just build-css` passes, which validates every `@apply` references a real utility. The built `tailwind-built.css` is unchanged: Tailwind purges these component classes until a template uses them, so this is a source-only vocabulary addition (same posture as the phase-1b tokens). The first consuming template (LC-UI-03/04/06/08) rebuilds and emits them, per the repo's existing component convention.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011jXpZXXwpB36MvTr6JrGXN

longjacksonle added 1 commit 2026-07-08 21:03:47 +02:00

Merge branch 'main' into feat/LC-555-alert-classes 1ee70a70b1

longjacksonle scheduled this pull request to auto merge when all checks succeed 2026-07-08 21:04:58 +02:00

longjacksonle added 2 commits 2026-07-08 21:22:24 +02:00

Merge remote-tracking branch 'origin/main' into feat/LC-555-alert-classes ... a5ff2636a9

# Conflicts:
#	server/assets/tailwind.css

Merge remote-tracking branch 'origin/feat/LC-555-alert-classes' into feat/LC-555-alert-classes 08b3718b93

longjacksonle scheduled this pull request to auto merge when all checks succeed 2026-07-08 21:23:14 +02:00

longjacksonle merged commit 9811b61494 into main 2026-07-08 21:25:31 +02:00

longjacksonle deleted branch feat/LC-555-alert-classes 2026-07-08 21:25:31 +02:00

longjacksonle referenced this pull request from a commit 2026-07-08 21:25:33 +02:00

Merge pull request 'feat(css): add .alert* + layout-helper component classes (LC-555)' (#524) from feat/LC-555-alert-classes into main

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

psa-systems/lets-chat!524

No description provided.