94933cac5c
Documents the shift planning and closure/payroll modules (new tables, routes, stores), the dark redesign, and the docker-compose-broken-host workaround. Adds CLAUDE.md pointing agents at docs/. Translates README to English and keeps host-specific infrastructure details out of the repo.
98 lines
4.9 KiB
Markdown
98 lines
4.9 KiB
Markdown
---
|
|
type: Design Language
|
|
title: Dark modern design system
|
|
description: How EatMe's dark, sharp-edged, amber-accent design system is implemented in frontend/src/styles/theme.css.
|
|
resource: frontend/src/styles/theme.css
|
|
tags: [frontend, design, css]
|
|
timestamp: 2026-08-16T00:00:00Z
|
|
---
|
|
|
|
# Dark modern design system
|
|
|
|
Replaced the original light monochrome TUI style (mono font,
|
|
`~/doc/concepts/ui/light-mono-tui.md`) on 2026-08-16, on explicit request
|
|
— the TUI look read as dated to the app's actual end users. All tokens and
|
|
component classes live in `frontend/src/styles/theme.css` (was
|
|
`tui.css` — renamed since "TUI" stopped being an accurate description).
|
|
|
|
# Rules this design follows
|
|
|
|
- **Dark background, sharp corners.** `--radius-lg`/`--radius`/`--radius-sm`
|
|
are all `0` — deliberately, per explicit user preference against rounded
|
|
corners even in an otherwise "modern SaaS" direction.
|
|
- **One accent color, used sparingly.** `--accent` (warm amber, `#f2a93b`)
|
|
marks state, not decoration: the active tab, "this shift is mine",
|
|
today's calendar cell, focus rings. It is *not* used as a per-card or
|
|
per-row accent border.
|
|
- **No colored border-left/border-right accent stripes.** Explicitly
|
|
rejected during design — a common AI-generated-UI tic. Emphasis instead
|
|
comes from filled backgrounds (`.badge-solid`, `.tab.active`,
|
|
`.calendar-slot.is-mine`) or a full inset ring around the whole element
|
|
(`.month-calendar-cell.is-today`, `.month-calendar-day-btn.is-selected`),
|
|
never a single colored edge.
|
|
- **System sans-serif for body text**, `--font-mono` reserved for numbers/
|
|
timestamps that benefit from tabular alignment (`.stat-value`,
|
|
calendar time chips, the bar chart's axis labels) — a common dashboard
|
|
convention (Linear, Vercel), not an all-monospace TUI throwback.
|
|
- **Neutral hairline dividers**, not colored ones. `.list`/`.row`,
|
|
`.stat-grid`, and the calendar grid all use a 1px `--border`-colored
|
|
gap/border for internal separators.
|
|
- **`color-scheme: dark`** is set globally so native form controls (date/
|
|
time pickers, number spinners) render dark by default — otherwise bare
|
|
`<input type="date">` etc. render as light-mode browser chrome floating
|
|
in an otherwise-dark page, which is what a generic `input, select` base
|
|
rule plus this fixes.
|
|
|
|
# Tokens
|
|
|
|
`--bg`, `--surface` (panels), `--surface-hover`, `--surface-2` (nested/
|
|
input backgrounds), `--border`, `--border-strong`, `--fg`, `--muted`,
|
|
`--muted-2`, `--accent`, `--accent-strong`, `--accent-fg` (text color for
|
|
content sitting *on* the accent), `--radius-lg`/`--radius`/`--radius-sm`
|
|
(all `0`), `--shadow-sm`/`--shadow-md`, `--font`, `--font-mono`.
|
|
|
|
# Component classes
|
|
|
|
Same class names as the previous TUI stylesheet — this was a pure CSS
|
|
rewrite, no component file needed to change: `.tabs`/`.tab`,
|
|
`.btn`/`.btn-block`/`.btn-ghost`, `.panel`, `.field-row`, `.list`/`.row`,
|
|
`.badge` (`-solid`, `-dashed` — both restyled as pills, no more literal
|
|
dashed border), `.stat-grid`/`.stat-tile`, `.login-card`,
|
|
`.month-calendar-*`, `.calendar-slot`/`.calendar-chip`. `.badge-double`
|
|
(from the old TUI system) was dropped — it had no remaining usages.
|
|
|
|
There's intentionally only one `.btn` visual style (no `.btn-primary`) —
|
|
introducing a primary/secondary distinction would have meant touching
|
|
every component that renders a button to classify its actions, which was
|
|
out of scope for a CSS-only redesign pass.
|
|
|
|
# App-specific additions
|
|
|
|
- **`.bar-chart-*`** (`frontend/src/components/BarChart.tsx`) — bars are
|
|
`--accent`-filled with a rounded top edge only, y-axis and day labels in
|
|
`--font-mono`; day-of-month labels render in a *separate* flex row below
|
|
the fixed-height bar track (not nested inside each bar's percentage-
|
|
height column) specifically to avoid the bars visually overlapping the
|
|
labels.
|
|
- **`.month-nav`** (`frontend/src/components/MonthNav.tsx`) — `[<] label [>]`
|
|
segmented-control strip. Placed *inside* the panel it controls (employee
|
|
detail chart, shift calendar, closure card), not as a page-level control
|
|
— an earlier version put it at the top of the whole admin stats page,
|
|
which tested as confusing since it was visually disconnected from what
|
|
it affected.
|
|
- **`.month-calendar-*`** (`frontend/src/components/MonthCalendar.tsx`) —
|
|
shared 7-column Monday-first grid used by both
|
|
[`ShiftPlanning`](/docs/frontend/index.md) (employee) and
|
|
[`ShiftPlanManager`](/docs/frontend/index.md) (admin), via a
|
|
`renderDay(dateStr, dayNumber)` render-prop rather than two separate
|
|
calendar implementations. The employee view renders interactive slot
|
|
buttons directly in each cell; the admin view renders compact read-only
|
|
chips and a day-select button, since full slot editing (capacity, notes,
|
|
assign dropdown) doesn't fit in a calendar cell — clicking a day opens a
|
|
detail panel below the grid instead.
|
|
|
|
# Related
|
|
|
|
- [Zustand stores](./stores.md)
|
|
- [System overview](/docs/architecture/overview.md)
|