UI redesign: replace Bulma with Tailwind CSS v4 #2

Merged

crueber merged 4 commits from redesign/tailwind-v4 into main 2026-08-29 18:44:53 +00:00

Conversation 0 Commits 4 Files changed 37 +1906 -1876

crueber commented 2026-08-29 18:04:49 +00:00

Owner

Copy link

Closes #1

Summary

Replaces the Bulma 1.0.2 UI with a locally-compiled Tailwind CSS v4 stylesheet.

CSS payload: 687 KB → 44.8 KB (−93%) · No CDNs · No Node — standalone tailwindcss CLI, compiled output committed.

Changes

• Delete internal/web/static/bulma.min.css; ship one internal/web/static/passage.css (compiled + minified Tailwind output)
• internal/web/ui/input.css is the style source of truth: @theme design tokens (deep-forest-green brand scale, semantic surface/ink/line colours, radii, shadows) + @layer components (.btn, .card, .input, .table, .badge, .sidebar-link, …)
• Rebuild with make css (tools/build-css.sh; binary at tools/tailwindcss, gitignored)
• All 24 templates reclassed: icon sidebar with section labels, unified page-header pattern, card-wrapped tables with badge pills, centered auth pages, friendly empty states
• JS-free mobile drawer (#admin-nav-toggle checkbox pattern); admin.js removed
• Dark mode via one prefers-color-scheme token-override block; system font stack; inline-SVG icon sprite (templates/icons.html)
• Docs updated: AGENTS.md, README

Verification

• CGO_ENABLED=0 go build ./... ✓
• go vet ./... ✓
• go test -race ./... all 14 packages ✓
• Screenshotted desktop 1280×800 / mobile 375×812 / dark mode across login, register, user dashboard, passkeys, and all admin pages

Notes for reviewers

• Navigation, routes, template data, CSRF/htmx/passkey.js hooks unchanged — markup and CSS only
• Fresh make css build reproduces the committed stylesheet byte-for-byte (CI enforces this in the test job)
• Alternate prototypes kept for reference: redesign/bulma-refined (695 KB), redesign/pico (99 KB)

Closes #1 ## Summary Replaces the Bulma 1.0.2 UI with a locally-compiled Tailwind CSS v4 stylesheet. **CSS payload: 687 KB → 44.8 KB (−93%)** · No CDNs · No Node — standalone tailwindcss CLI, compiled output committed. ## Changes - Delete `internal/web/static/bulma.min.css`; ship one `internal/web/static/passage.css` (compiled + minified Tailwind output) - `internal/web/ui/input.css` is the style source of truth: `@theme` design tokens (deep-forest-green brand scale, semantic surface/ink/line colours, radii, shadows) + `@layer components` (`.btn`, `.card`, `.input`, `.table`, `.badge`, `.sidebar-link`, …) - Rebuild with `make css` (`tools/build-css.sh`; binary at `tools/tailwindcss`, gitignored) - All 24 templates reclassed: icon sidebar with section labels, unified page-header pattern, card-wrapped tables with badge pills, centered auth pages, friendly empty states - JS-free mobile drawer (`#admin-nav-toggle` checkbox pattern); `admin.js` removed - Dark mode via one `prefers-color-scheme` token-override block; system font stack; inline-SVG icon sprite (`templates/icons.html`) - Docs updated: AGENTS.md, README ## Verification - `CGO_ENABLED=0 go build ./...` ✓ - `go vet ./...` ✓ - `go test -race ./...` all 14 packages ✓ - Screenshotted desktop 1280×800 / mobile 375×812 / dark mode across login, register, user dashboard, passkeys, and all admin pages ## Notes for reviewers - Navigation, routes, template data, CSRF/htmx/passkey.js hooks unchanged — markup and CSS only - Fresh `make css` build reproduces the committed stylesheet byte-for-byte (CI enforces this in the test job) - Alternate prototypes kept for reference: `redesign/bulma-refined` (695 KB), `redesign/pico` (99 KB)

crueber added 1 commit 2026-08-29 18:04:49 +00:00

Replace Bulma with Tailwind CSS v4 (standalone CLI build) ... a92f3f3f32

- Add internal/web/ui/input.css: @theme design tokens (deep forest green
  palette, semantic light/dark surfaces, consistent radii/shadows) plus an
  @layer components library (.btn variants, .card, .input, .table, .badge,
  .note, .stat, .empty, .sidebar-link, tabs, auth shell).
- Compile with the tailwindcss standalone CLI (tools/build-css.sh, make css);
  the binary stays out of git via tools/ ignore. passage.css is committed.
- Delete bulma.min.css (677KB) and admin.js (navbar burger replaced by a
  JS-free checkbox drawer); every template now loads only /static/passage.css.
- Reclass all 24 templates: centered auth layout with wordmark + card;
  admin shell with sticky sidebar, inline-SVG nav icons, section labels and
  strong active state; consistent page-header pattern; refined tables with
  monospace metadata; friendly empty states; card-grid user dashboard.
- New partials: icons.html (inline SVG sprite), partials.html (flash,
  footer, user topnav). Preserves all CSRF fields, htmx attributes and
  passkey.js element IDs; dark mode via prefers-color-scheme; responsive
  verified at 375x812.

crueber added 2 commits 2026-08-29 18:12:41 +00:00

docs: update AGENTS.md and README for Tailwind v4 UI 6e3b582be6

ci: verify compiled CSS is up to date; commit build-css.sh ... 3d4f66cf3b

- test job now fetches the tailwindcss standalone CLI (v4.3.3), rebuilds
  internal/web/static/passage.css from internal/web/ui/input.css, and fails
  on any diff so input.css edits require a 'make css' rebuild
- tools/build-css.sh was accidentally gitignored with tools/; ignore only
  tools/tailwindcss* so the script is tracked and 'make css' works on a
  fresh clone

crueber referenced this pull request from a commit 2026-08-29 18:32:08 +00:00

fix: address review findings on PR #2

crueber added 1 commit 2026-08-29 18:32:09 +00:00

fix: address review findings on PR #2 ... ca55da5c87

- Re-add the CSRF token to the app-access revoke form (lost in the
  redesign; every Revoke submit returned 403, JS and no-JS)
- Drop role=button/tabindex/aria-label from the drawer burger label —
  labels are keyboard-inert, so it was a broken focus stop (WCAG 2.1.1);
  the sr-only checkbox remains the operable control
- Name the sidebar nav landmark (aria-label="Admin sections")
- Give .sidebar-nav a rule (flex-1 overflow-y-auto) so the sidebar
  scrolls on short viewports; rebuild passage.css
- Drop style-src 'unsafe-inline' from CSP — no served template ships
  inline style attributes or <style> blocks; fix the stale Bulma comment
- Pin the tailwindcss CLI sha256 in CI (verified against the official
  v4.3.3 release checksums)

Reviewed-by findings from PR review: 1 blocking, 2 should-fix, 2 nits
addressed; app_assignments tabs pattern left as-is (design call).

crueber merged commit 934853ad84 into main 2026-08-29 18:44:53 +00:00

crueber referenced this pull request from a commit 2026-08-29 18:44:54 +00:00

Merge pull request 'UI redesign: replace Bulma with Tailwind CSS v4' (#2) from redesign/tailwind-v4 into main

crueber referenced this pull request from a commit 2026-08-29 20:17:55 +00:00

fix(ui): dashboard 500, checkbox grids, manage-access cards

crueber referenced this pull request 2026-08-29 20:35:14 +00:00

Fix deployed-UI feedback: dashboard 500, checkbox grids, manage-access cards #3

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

crueber/passage!2

No description provided.