peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(design): batch B recorded, batch C in the design lab (E28 S2c)

Browse Source 
DESIGN.md: B1-B9 decided (compact density, the four-scheme set with the
accent-vs-status rule, state layers, the sticky band, surface per role, the
watch page, the slim NavRail with optional labels, loading by shape, the
fade edges) with their decision-log rows. The lab keeps the chosen A and B
renderings as reference on shared tokens (labTokens.ts) and adds batch C:
the action-placement classification for review, side panels on touch and
below 768, the Plex player on touch, and the dialog conventions.
This commit is contained in:
peter
2026-09-24 03:10:00 +02:00
parent 477271907e
commit 7055548260
8 changed files with 1403 additions and 1445 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/design-lab/labTokens.ts
+36
View File
@@ -0,0 +1,36 @@
// The decided values the lab's reference renderings share (batches A and B, 2026-09-24). They are
// the lab's stand-ins until S3 moves each into index.css / the ui/ primitives; then these go.
/** B1 compact ladder: explicit heights, so one toolbar row lines up at 28. */
export const H = {
md: "h-8 px-3 text-sm gap-1.5",
sm: "h-7 px-2.5 text-sm gap-1.5",
xs: "h-6 px-2 text-xs gap-1",
iconSm: "w-7 h-7",
icon: "w-8 h-8",
field: "h-8",
bar: "h-7",
} as const;
/** A4: the input edge, ≥ 3:1 against the page in every scheme and mode. */
export const STRONG = "color-mix(in srgb, var(--fg) 55%, var(--bg))";
/** B3 state layers: the text colour at 10% (hover) / 16% (pressed) over whatever is underneath;
* a filled control mixes its own text colour into the fill at 14% / 24%. */
export const LAYER =
"hover:bg-[color-mix(in_srgb,var(--fg)_10%,transparent)] active:bg-[color-mix(in_srgb,var(--fg)_16%,transparent)]";
export const FILLED =
"bg-accent text-accent-fg hover:bg-[color-mix(in_srgb,var(--accent-fg)_14%,var(--accent))] active:bg-[color-mix(in_srgb,var(--accent-fg)_24%,var(--accent))]";
export const DANGER =
"bg-danger text-danger-fg hover:bg-[color-mix(in_srgb,var(--danger-fg)_14%,var(--danger))] active:bg-[color-mix(in_srgb,var(--danger-fg)_24%,var(--danger))]";
/** B9: the header + fade edge — a crisp band and a 1rem gradient of the colour it sits on. Literal
* strings per colour: Tailwind only generates classes it can read whole. */
export const FADE_BELOW =
"after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-4 after:bg-[linear-gradient(to_bottom,var(--bg),transparent)] after:content-['']";
export const FADE_BELOW_PANEL =
"after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-4 after:bg-[linear-gradient(to_bottom,var(--surface),transparent)] after:content-['']";
export const FADE_ABOVE_PANEL =
"before:pointer-events-none before:absolute before:inset-x-0 before:bottom-full before:h-4 before:bg-[linear-gradient(to_top,var(--surface),transparent)] before:content-['']";
export const FADE_EDGES_X =
"linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent)";