Refactor card to use flex column with gap-based spacing instead of
per-section padding, tightening the space between header, body, and
footer from size-6 to size-3. Add .card-footer .btn override to
render buttons at font-base size.
When :href is provided, the button renders as <a> instead of <button>,
enabling navigation links with full button styling.
New :link variant renders as a minimal text link (underlined, accent
color, no background/padding) — works as both <button> and <a>.
CSS includes reset styles for a.btn (removes default link decoration)
and preserves underline for a.btn-link.
Add click handlers to the dialog component for all three targets that
close the dialog when clicking the backdrop area (outside the dialog box).
Uses event.target === event.currentTarget to distinguish backdrop clicks
from content clicks.
- :clj — inline onclick attribute
- :cljs — Replicant :on {:click handler}
- :squint — :on-click handler
- CSS: cursor: pointer on ::backdrop for affordance
Components (.cljc + .css + tests):
- Alert (success/warning/danger/info variants)
- Badge (primary/secondary/outline/success/warning/danger)
- Card (card/card-header/card-body/card-footer)
- Accordion (collapsible with open/closed state)
- Table (headers/rows, striped/bordered variants)
- Dialog (modal with header/body/footer sections)
- Breadcrumb (nav with active item)
- Pagination (current/total with prev/next)
- Progress (value bar with color variants)
- Spinner (sm/md/lg sizes)
- Skeleton (line/box/circle/heading placeholders)
- Switch (toggle with checked/disabled states)
- Tooltip (hover text via data-tooltip attr)
CSS-only additions:
- Form elements (inputs, selects, checkboxes, radios, range, groups)
- Grid (12-column system with offsets, responsive)
- Utilities (flex, spacing, alignment, sr-only)
Also adds warning/fg-on-warning tokens to light and dark themes.
All 3 dev targets updated with full component showcase.
40 tests, 213 assertions, all passing.
Add :scales config to tokens.edn with two generated scales:
- Size (linear): --size-1 through --size-16, base 0.25rem × N
- Font (geometric): --font-xs through --font-3xl, ratio 1.25
gen.clj computes values and emits them into :root only (not dark
theme blocks). button.css now uses scale vars instead of raw rem.
Change base or ratio in tokens.edn to recompute the entire scale.
- Rename CSS classes from BEM double-dash (btn--primary) to flat
utility-style single-dash (btn-primary)
- Move button CSS from inline Clojure string in gen.clj to
src/ui/button.css next to button.cljc
- gen.clj now auto-collects all src/ui/*.css files via babashka.fs glob
- Replace clojure.java.io with babashka.fs throughout gen.clj
- Update AGENTS.md to reflect new conventions
