Add global :focus-visible outline style and migrate form components
from :focus box-shadow to :focus-visible outline. Refactor accordion
chevron from CSS ::after pseudo-element to explicit span element.
The `bash -c 'cd dir && cmd1 & cmd2'` pattern splits into two
command lists — cmd2 runs in the original cwd, not after the cd.
Fix by repeating the cd after the `&` in the tmux pane command,
and using `exec` in the standalone dev-squint task.
`bb dev-all 4000` starts all servers offset from base port:
- Replicant: base+1 (4001)
- Squint: base+2 (4002)
- Hiccup: base+3 (4003)
Default base port remains 3000.
Individual tasks also accept PORT env var:
PORT=4003 bb dev-hiccup
For replicant, shadow-cljs.edn is rewritten with the target port
before launching since shadow-cljs has no CLI port override.
Shadow-cljs deprecated external paths (`../../src`). Add a root
`deps.edn` exposing `src/` and reference it via `:local/root` from
`dev/replicant/deps.edn` instead.
Add `ensure-npm` task that runs `npm install` in dev/replicant and
dev/squint when their node_modules directories are missing. Wire it
as a dependency for dev-replicant, dev-squint, and dev-all.
Children were appended to the outer <details> element instead of inside
the .accordion-content div, causing text to render outside the accordion
box. Also adds .accordion-group wrapper to eliminate parent gap between
stacked items, and styles content with smaller font and muted color.
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.
The triangle's `bottom` offset was too large, leaving a visible gap
(and 1px sub-pixel seam) between the arrow and the tooltip body.
Changed from `calc(100% - 5px)` to `calc(100% - 1px)` so the arrow
slightly overlaps the box, eliminating the gap.
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
Move font-family, background, color, margin, and transition from
duplicated inline <style> blocks in each dev target into the CSS
generator (base-css). Dev pages now only set page-specific padding.
Also fixes hiccup target rendering the wrong font due to hiccup2
HTML-escaping quotes inside <style> tags, and adds missing <!DOCTYPE>.
