fffcb73ea4
Google-SSO PWA for bistro employee clock-in/out, admin employee management, and stats with CSV export. Express + SQLite backend, React + Zustand frontend in the light-mono-tui design language. Multi-stage Dockerfile, compose.yaml for image-based deploys, nginx reverse-proxy template, and an OKF documentation bundle in docs/. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2.0 KiB
2.0 KiB
type, title, description, resource, tags, timestamp
| type | title | description | resource | tags | timestamp | |||
|---|---|---|---|---|---|---|---|---|
| Design Language | TUI monochrome design system | How the light-mono-tui design language is implemented in this app's CSS. | frontend/src/styles/tui.css |
|
2026-08-12T00:00:00Z |
TUI monochrome design system
The full design language spec lives outside this bundle at
~/doc/concepts/ui/light-mono-tui.md (grey background, black type/borders,
mono font, inverted active/hover states, no accent color, no radius, no
shadow). This doc covers how EatMe implements it.
frontend/src/styles/tui.css defines the tokens (--bg, --fg, --muted,
--hover, --empty, --panel, --font) and the component classes built on
them: .tabs/.tab, .btn/.btn-block/.btn-ghost, .panel,
.field-row, .list/.row, .badge (-solid, -dashed, -double),
.stat-grid/.stat-tile, .login-card.
App-specific additions
Built for this app, following the same rules (square edges, monochrome, 1px borders) rather than introducing new visual language:
.bar-chart-*(frontend/src/components/BarChart.tsx) — the per-employee daily-hours chart. Y-axis labels + a repeating 1px--empty-colored gridline background at 25% steps computed from a "nice" rounded max (Math.ceilto the next whole hour); bars are solid--fg,--mutedon hover; 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 [>]bordered strip, styled like the design language's tab strip. Deliberately placed inside the employee-detail panel next to the chart it controls, not as a page-level control — an earlier version put it at the top of the whole admin stats page, which tested as confusing ("can't browse history on the chart") since it was visually disconnected from what it affected.