Commit Graph

10 Commits

Author SHA1 Message Date
Florian Schroedl
a7a57f6f5f docs: add git submodule installation and usage instructions
README gets a full Installation section with per-target setup
(Babashka, shadow-cljs, Squint) plus CSS linking and updating.
AGENTS.md gets a compact summary for agent context.
2026-03-11 16:57:37 +01:00
Florian Schroedl
59d46700bc refactor(theme): switch color generation from HSL to OKLCH
OKLCH is a perceptually uniform color space — equal lightness values
produce equal perceived brightness across all hues, unlike HSL where
blue at 50% looks much darker than yellow at 50%.

Color scales now output oklch() CSS values directly:
  --gray-500: oklch(0.530 0.035 285);
  --accent-500: oklch(0.595 0.230 286);

The browser handles gamut mapping natively. Scale definitions in
tokens.edn use [label lightness chroma] tuples where L is 0-1
perceptual lightness, C is chroma (colorfulness), H is hue degrees.

Theme adapter updated: sliders now control OKLCH hue/chroma,
swatches render with oklch() CSS, Copy EDN outputs OKLCH config.

gen.clj includes oklch->srgb and oklch->hex for validation/tools.
2026-03-11 12:04:33 +01:00
Florian Schroedl
fa38d9f9c3 feat(theme): add HSL-based color scale generation with jon/color-tools
Replace hardcoded hex color tokens with algorithmic color scales generated
from HSL parameters. Each scale is defined by hue, saturation, and
lightness steps in tokens.edn, then converted to hex via jon/color-tools.

Color scales (gray, accent, danger, success, warning) generate 11 stops
each (50–950) into :root. Semantic tokens (bg-0, fg-0, accent, etc.)
reference scale variables with var(--gray-50), var(--accent-500), etc.
Dark theme switches which stop each semantic token points to.

Gray scale uses hue 240 with tapered saturation for a purplish tint
matching the activity-tracker aesthetic. Accent is vivid purple (hue 252).
Border radii bumped to 6/10/16px for a rounder feel.

To shift the entire palette (e.g. warm gray), change hue/saturation in
tokens.edn and run `bb build-theme`.
2026-03-11 11:31:47 +01:00
Florian Schroedl
828d467226 chore: add bb check-dev script for pre-commit server verification
Babashka script that checks all ui-dev tmux panes for compile errors,
verifies hiccup serves content, ensures squint .mjs files aren't
truncated, and confirms replicant JS is compiled. Replaces the manual
tmux capture-pane + curl checks documented in AGENTS.md.
2026-03-05 19:20:27 +01:00
Florian Schroedl
e003e1c4a8 docs: add agent rules for dev server management and browser verification
- Section 6: Never start dev servers from the agent (prevents orphan
  processes and broken tmux panes)
- Section 7: Check tmux panes for compile errors (renumbered)
- Section 8: Verify compiled output in browser before committing
  (catches squint's silent empty-file failures)
2026-03-05 14:30:01 +01:00
Florian Schroedl
2500cc4b1a docs: document squint watcher blank page pitfall and recovery
The squint watcher can produce truncated .mjs files when it detects
file changes mid-save, causing Vite to serve a broken module and the
browser page to go blank with no terminal errors. Document how to
detect this (check .mjs line count) and recover (touch source file +
hard refresh, or restart the tmux pane).
2026-03-05 14:12:36 +01:00
Florian Schroedl
b52361ebf1 refactor(form): replace inline error text with tooltip icon
Instead of rendering error messages as `<small class="form-error">`
below inputs, errors now display as a circle-x icon inside the input
area. Hovering the icon shows the error text in a danger-styled tooltip.

- Wrap children in `.form-field-control` when error is present
- Use existing tooltip + icon components for the error indicator
- Add CSS for positioning, padding-right offset, and danger color overrides
- Update tests to match new structure
- Add pre-commit tmux server check instructions to AGENTS.md
2026-03-05 14:01:26 +01:00
Florian Schroedl
609613f4fb feat: add algorithmic size and font scales
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.
2026-03-03 11:16:23 +01:00
Florian Schroedl
988617617c refactor: replace BEM with utility classes, move component CSS to files
- 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
2026-03-03 11:11:47 +01:00
Florian Schroedl
42ddb56d65 Init 2026-03-03 11:02:08 +01:00