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>
46 lines
2.0 KiB
Markdown
46 lines
2.0 KiB
Markdown
---
|
|
type: Design Language
|
|
title: TUI monochrome design system
|
|
description: How the light-mono-tui design language is implemented in this app's CSS.
|
|
resource: frontend/src/styles/tui.css
|
|
tags: [frontend, design, css]
|
|
timestamp: 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.ceil` to the next whole hour); bars are solid
|
|
`--fg`, `--muted` on 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.
|
|
|
|
# Related
|
|
|
|
- [Zustand stores](./stores.md)
|