/* * theme.css — THIS APP'S DESIGN-SYSTEM VALUES. Seeded once, then yours. * * Every token name the design layer reads, in BOTH modes, with a deliberately * neutral value. The values are placeholders: rewrite every one of them from * the design brief on the first build, and edit them freely afterwards. An * app that ships this file unchanged has no design. * * THE SHAPE IS CHECKED, THE VALUES ARE NOT (lib/themeShape.ts). Three blocks * at most and only these selectors: * :root the mode the page opens in (add * `color-scheme: dark` here if that is dark) * html[data-theme="dark"] the other mode, when the page opens light * html[data-theme="light"] the other mode, when the page opens dark * Inside them, only the token names below (and color-scheme). Every token * listed under PALETTE must be declared in :root — each one is a utility * (bg-canvas, text-ink, border-border, bg-accent-soft …) with no fallback, * so a missing token is a class that paints nothing. Text-on-ground pairs are * measured for contrast in both modes (ink on canvas 4.5:1, muted on surface * 4.4:1, accent-ink on accent 3:1, and so on) and a pair that fails names * itself in the build log. A token may reference another with var(), but a * token that references itself through any chain is a cycle, and CSS then * makes EVERY token in it invalid — the page goes transparent with white * text — so that is refused before it ships. * * Write colours as hex, rgb() or hsl(), or color-mix(in srgb, …) over those, * so the contrast can be measured. oklch and lab are not yet measurable * here and are refused on a token that is measured. * * PALETTE (32) — what each is legible on is in the name: * --canvas the page --surface a card --surface-2 an inset, a band * --border a hairline --border-strong a control's edge * --ink text on the page --muted secondary text * --accent the filled action --accent-hover its hover * --accent-ink text ON --accent --accent-text accent-coloured text on the page * --accent-soft a tinted wash --accent-strong text on --accent-soft * --accent-border a tinted edge * --success --success-ink --success-soft --success-strong (and warning, danger) * --chart-1 … --chart-6 six categorical colours, the brand first * TYPE — name the families you link in the layout's : * --font-display --font-body --font-mono --font-sans (= body) * --display-weight --display-tracking --eyebrow-tracking * SHAPE — optional; every primitive has a fallback, and one line here * retunes all of them: --radius-btn --radius-card --radius-input --border-w * --border-strong-w --shadow-card --shadow-raised --shadow-btn --card-pad * --caps --caps-tracking --btn-weight --measure * Gradients and shadow ramps are tokens too: --gradient-, --shadow-. */ /* Completed by the platform from the short form: both modes, every palette token, each text-on-ground pair at its floor. To restyle, write the short form again (the decisions in one :root) and it is completed again. */ :root { --canvas: #f6faf8; --surface: #ffffff; --surface-2: #e9f4ef; --border: #d8e9e2; --border-strong: #adb5b2; --ink: #163831; --muted: #566e66; --accent: #1f8f74; --accent-hover: #1a7a63; --accent-ink: #041410; --accent-text: #147a62; --accent-strong: #0f5c48; --accent-soft: #dcf1e9; --accent-border: #95cabd; --success: #1f8f74; --success-ink: #ffffff; --success-soft: #dcede8; --success-strong: #196f5a; --warning: #b8862f; --warning-ink: #163831; --warning-soft: #efece0; --warning-strong: #846022; --danger: #c0453a; --danger-ink: #ffffff; --danger-soft: #f0e4e1; --danger-strong: #b13f35; --chart-1: #1f8f74; --chart-2: #2396c6; --chart-3: #6753a7; --chart-4: #cb6c98; --chart-5: #944a0f; --chart-6: #909424; --x-on-photo: #f6faf8; --font-display: "Plus Jakarta Sans", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --radius-card: 20px; --radius-btn: 999px; --radius-input: 12px; --shadow-card: 0 24px 48px -28px rgba(15, 60, 48, 0.35); --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-sans: "Inter", system-ui, sans-serif; --display-weight: 700; --display-tracking: -0.02em; --eyebrow-tracking: 0.08em; } html[data-theme="dark"] { --canvas: #03110e; --surface: #1c2926; --surface-2: #101d1a; --border: #263230; --border-strong: #4f5856; --ink: #f6faf8; --muted: #959d9a; --accent: #1f8f74; --accent-hover: #41a089; --accent-ink: #041410; --accent-text: #41a089; --accent-strong: #41a089; --accent-soft: #092d24; --accent-border: #104a3c; --success: #1f8f74; --success-ink: #ffffff; --success-soft: #092d24; --success-strong: #41a089; --warning: #b8862f; --warning-ink: #ffffff; --warning-soft: #2b2b15; --warning-strong: #be9040; --danger: #c0453a; --danger-ink: #ffffff; --danger-soft: #2d1c18; --danger-strong: #ce6f65; --chart-1: #1f8f74; --chart-2: #20a3d8; --chart-3: #8370c7; --chart-4: #cb6c98; --chart-5: #bb672c; --chart-6: #969a2c; } /* * app.css — THIS APP'S OWN CSS, for what no primitive and no utility covers: * the one screen that makes this app itself — a timer's dial, a kanban * board's columns, a seating plan, a game grid. Write those here, named for * what they are, in tokens only (var(--accent), var(--radius-card), * var(--font-display)). It loads last, after design.css and theme.css, and * wins. Ships empty. * * Not for restyling a primitive: those live in tailwind/components.css and * are yours to edit there. Not for colours: those live in theme.css. */ .dental-band { background-image: radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 55%), radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 50%); }