Repository navigation
feat(web): design system foundations (lot 1) - #263
Merged
Merged
Conversation
Brand book, tokens, component specs, reference implementation, page mockups, logos and fonts, plus the implementation plan in five batches. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
scripts/build-tokens.mjs turns src/design/tokens.json into src/design/tokens.css: light colours under :root, dark under .dark, an -rgb channel variable for each opaque colour, then fonts, type styles, spacing, radii, sizes and the overlay shadow. It runs before dev and every build script; a test fails when the generated file or the copy of tokens.json drifts. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
index.css imports tokens.css and maps every colour token in an @theme inline block (bg-paper, text-ink, border-rule-strong, bg-signature, text-impact...), plus spacing and size aliases, shadow-overlay and the twelve type styles (text-metric, text-title, text-summary, text-data-sm...). Fonts and radii share Tailwind's theme names, so the tokens override its defaults directly. cn() now knows the type styles: tailwind-merge used to read text-title as a colour and drop it next to text-ink. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Load both variable fonts from Fontsource and drop the Google Fonts link (Plus Jakarta Sans, IBM Plex Mono). The body uses --font-sans. Inline 'Space Grotesk' declarations are removed so titles inherit Spline Sans; inline 'JetBrains Mono' ones now point to --font-mono. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
TEMPORARY, removed in lot 5. Every --hud-* variable now points to the RGB channels of a token (bg -> paper, primary -> ink, error -> failed, success and tertiary -> muted...), so all screens adopt the new palette in both themes without touching the files that use hud-*. The body uses paper and ink directly. primary is light in the dark theme, so text set in white on primary, error or muted fills now uses on-ink or on-status (ui/button, btn-primary, the New Event button and the pages that hardcoded it). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
toDsStatus() folds the fourteen API statuses into failed, warning, running, done and open (open by default, including the proto spelling recommandation). toTypeIcon() gives the custom icon of each event type, operation by default. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
/theme-test now shows every colour token, the twelve type styles, the radii, spacing, sizes and the overlay shadow in the light and the dark theme side by side, plus the temporary hud-* bridge. Later lots add each component here. To render a light panel inside a dark page, the light tokens and the bridge are also declared on .light, and the legacy @theme block is inline so hud-* utilities follow the subtree they are used in. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Add a Design system section (sources, token pipeline, showcase, the ten non-negotiable rules) and list npm test and npm run tokens among the frontend commands. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
First of the five lots of
docs/design-system/IMPLEMENTATION.md: the foundations of the "Surligneur" design system. Layout and components do not change yet; the whole app takes the new palette and fonts, in both themes.docs/design-system/(brand book, tokens, component specs, reference implementation, mockups, logos, fonts, implementation plan).web/scripts/build-tokens.mjsgeneratesweb/src/design/tokens.cssfromweb/src/design/tokens.json(light under:root, .light, dark under.dark, plus-rgbchannels). Runs beforedevand every build script; a test fails if the generated file or the copy oftokens.jsondrifts.bg-paper,text-ink,border-rule-strong,bg-signature,text-impact…), spacing and size aliases,shadow-overlay, and the twelve type styles (text-metric,text-title,text-summary,text-data-sm…).cn()knows the type styles, so tailwind-merge no longer dropstext-titlenext totext-ink.--hud-*bridge (removed in lot 5): the legacy variables point to the tokens, so every screen adopts the palette without touching the files that usehud-*. Success stays neutral. White text onprimary/errorfills now useson-ink/on-status, sinceprimary(ink) is light in the dark theme.lib/status.ts:toDsStatus()andtoTypeIcon(), with tests./theme-testshows every token and type style in light and dark side by side.Not in this lot, by design: the navy sidebar, coloured pills, blue links and gradient banners are hard-coded and change in lots 3 to 5.
Test plan
npm run lint,npm run build:check,npm test(64 tests) pass inweb/main: palette and fonts applied, no page errors/theme-testand a few pages in both themes🤖 Generated with Claude Code