calcazar/frontend-helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0k0zutujo: Add the design system section to the README and the redesign handoff

Browse Source
This commit is contained in:
calcazar
2026-10-20 09:47:56 -06:00
parent 260c419faa
commit b0685c212b
2 changed files with 80 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+30
View File
@@ -37,6 +37,36 @@ The browser only ever talks to this app. This app talks to Minnect server-side.
That keeps your Minnect tokens off the browser entirely and avoids cross-origin
restrictions. See `CLAUDE.md` and `docs/` (if present) for the design notes.
## Design system
The redesign (obsidian, crimson, no gold) is specified in
[`docs/minnect-feed-redesign.spec.md`](docs/minnect-feed-redesign.spec.md). The
styling decisions are in
[`docs/adr/0001-redesign-styling-approach.md`](docs/adr/0001-redesign-styling-approach.md).
The handoff for the redesign is [`docs/handoff-redesign.md`](docs/handoff-redesign.md).
- **Themes.** Dark is the default; light is a toggle. The choice is stored in
`localStorage` and applied by a small script in `src/app/layout.tsx` before
first paint (`src/lib/theme.ts`), so there is no flash. `src/lib/use-theme.ts`
is the hook the toggles use.
- **Tokens.** All colors are CSS custom properties in `src/app/globals.css`, one
set for dark and one for light. `--accent-text` is the readable crimson for
small text (4.5:1). Components use tokens only, never raw colors.
- **Stylesheets.** One file per component area in `src/styles/` (`buttons.css`,
`feed.css`, `post.css`, `mobile.css` and so on), loaded from `globals.css`.
- **Buttons.** Five styles plus a small icon button, all in
`src/components/Buttons.tsx`: Flip (the composer Post button), Grow (the
"new posts" pill), Sweep (outline actions: Try again, Cancel, expert search
chips), Depth (the Discover sheet rows), Sparkle (Sign in and the mobile dock
new-post button) and IconButton (refresh, comment send, delete confirm). Disabled buttons stay at full opacity.
- **Avatars.** `HexAvatar` (`src/components/HexAvatar.tsx`) is used for every
avatar: photo, or initials on a gradient, in a hexagon.
- **Breakpoints.** Container queries on the app root: 1181 and up (three
columns), 1001 to 1180 (narrower columns), 761 to 1000 (tablet), 760 and below
(full-screen snap feed with a bottom dock).
- **Dev previews.** `/dev/feed` (fixture feed, no login) and `/dev/buttons` (every
button style in both themes). Both return 404 in production builds.
## Requirements
- Node.js 20 or newer (built and tested on Node 22).