stroblme
0b5ce4fcbb
A dashboard is a wall panel somebody hangs in their own hallway, so it now wears what they choose: a look, and a palette of their own colours. Two complete component sets live under `Dashboard/ui/` — `glass` (translucent panes over a slowly moving ground) and `material` (Material 3 tonal cards) — behind one prop contract. Every control's state, keyboard and `aria-` live in `ui/core` and are shared, so the two sets are the same dashboard drawn twice rather than two products: a set only decides what a control looks like while doing it. Four settings join the channel, each drivable by a flow like any other: `look`, `palette`, `background` and `touch`. A palette is an ordered list of hex colours — background, surface, primary, accent, text, then more chart colours — pasted from a coolors.co link or typed, written onto the canvas as the token variables everything already reads. Trailing roles are derived, so three colours are a whole dashboard, and derived text is held to AA rather than trusted (`theme.check.ts` measures it). A palette also decides light or dark, since its first colour is the ground. Widgets are measured against their own tile with container queries rather than against the viewport, animate through `motion`, and can be drawn without their title. The three reworks: - a bar draws a row per reading, up to eight, each in the dashboard's own data colours and each able to carry its own scale — replacing readings nested in one fill, which could only ever share one colour and stop at three. Documents written the old way are read as rows. - a chart's range picker moved to a column down its right-hand edge, which gives the plot back a whole row of a short tile. - the colour wheel became a disc: hue is the angle and saturation the distance from the middle, so a colour is one gesture rather than three, with brightness on a slider beside it. `index.css` and `lib/motion.ts` are untouched — the dashboard overrides token *values* on its canvas, never the blocks the two repos share.
2.0 KiB
Design system (Fluksio)
app (dashboard SPA + API) and index (marketing site) are separate
repos that share one visual design. The full, canonical spec — palette,
radius, elevation, motion, component map, and shell patterns — lives in the
parent repo's DESIGN-GUIDELINES.md. Read it before
any UI work.
Sync rule (read before touching tokens)
The @theme inline, :root, and .dark blocks in app/frontend/src/index.css
and index/src/index.css must be kept byte-identical, and
frontend/src/lib/motion.ts is duplicated verbatim. Any palette / radius /
elevation / motion-token change is made in both repos in the same change.
There is intentionally no shared npm package — the duplicated blocks are the
sync point. Components (src/components/ui/*) are copied per repo (the shadcn
model) and may diverge; only the tokens and motion presets must match.
Both repos share components.json: style new-york, cssVariables: true,
icon library lucide.
Verify with make design-check from the workspace root.
Shell
The authenticated area is a bg-card region (SidebarProvider) with a floating
translucent AppSidebar (variant="floating", bg-card/80 backdrop-blur-md).
The flow editor floats its chrome over a full-bleed node canvas using the same
frosted-surface model. See DESIGN-GUIDELINES.md → Shells and → Overlay surfaces
& content chips.
Mobile
One breakpoint, md (768px), and a phone inspects rather than arranges: no
dragging, no placing, no resizing. The rules that keep it that way — and the
"nothing scrolls horizontally" check that enforces them — are in
DESIGN-GUIDELINES.md → Responsive.
Dashboards
A user-defined dashboard deliberately steps outside the shared design system:
it has two complete component sets of its own (glass and material) and
takes its colours from the document rather than from the tokens. See
DESIGN-GUIDELINES.md → The dashboard is exempt. The shells, the flow editor and
every admin screen are unaffected.