vincent/gerbeur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v3: design tokens — shared radius, type, elevation, motion and layer scales; single light-dark() palette for smooth

Browse Source 
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
khannurien
2026-09-19 19:15:33 +00:00
parent 1adf7b04d7
commit 21fb0c6e16
5 changed files with 563 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/themes/smooth.css
View File

@@ -1,14 +1,17 @@
/* ══════════════════════════════════════════════════════════════════════
Smooth theme — clean, modern, Saira typeface
Palette: Prussian Blue · Deep Teal · Jasmine · Brick Ember · Blood Red
Applied when data-style is absent or "smooth".
Dark: Prussian Blue · Deep Teal · Jasmine · Brick Ember · Blood Red
Light: Cream · Deep Teal · Terracotta
Applied when data-style is absent or "smooth". Also the base every other
theme builds on: anything a theme leaves unset falls back to these.
Every colour is `light-dark(<light>, <dark>)`, resolved against the
root `color-scheme` (see tokens.css), so auto / light / dark share this
one block.
══════════════════════════════════════════════════════════════════════ */
/* ── Dark variant (default) ───────────────────────────────────────── */
:root,
:root[data-style="smooth"] {
/* Global font defaults — other themes override --font-body; App.css styles
consume these variables rather than hard-coding font names. */
--font-body: "Saira", sans-serif;
--font-mono: monospace;
@@ -18,48 +21,55 @@
font-style: normal;
line-height: 1.5;
color-scheme: light dark;
/* Text */
--color-text: #eef0f3;
--color-text-secondary: #8aaabb;
--color-text-muted: #506878;
--color-on-accent: #001427; /* Prussian Blue on Jasmine */
--color-text: light-dark(#0e3a42, #eef0f3);
--color-text-secondary: light-dark(#2c6671, #8aaabb);
--color-text-muted: light-dark(#5c8a91, #506878);
--color-on-accent: light-dark(#fef8e6, #001427);
/* Surfaces */
--color-bg: #001427; /* Prussian Blue */
--color-surface: #0a1f35;
--color-bg: light-dark(#fef8e6, #001427);
--color-surface: light-dark(#fffdf6, #0a1f35);
/* Borders */
--color-border: transparent;
--color-border-subtle: rgba(112, 141, 129, 0.2); /* Deep Teal tint */
--color-border-subtle: light-dark(
rgba(48, 144, 161, 0.18),
rgba(112, 141, 129, 0.2)
);
/* Accent */
--color-accent: #f4d58d; /* Jasmine */
--color-accent-hover: #d4aa5a;
--color-accent: light-dark(#bc5148, #f4d58d);
--color-accent-hover: light-dark(#97392f, #d4aa5a);
/* Links */
--color-link: #f4d58d;
--color-link-hover: #d4aa5a;
--color-link: light-dark(#bc5148, #f4d58d);
--color-link-hover: light-dark(#97392f, #d4aa5a);
/* Danger */
--color-danger: #bf0603; /* Brick Ember */
--color-danger-bg: #220404;
--color-danger-hover: #8d0801; /* Blood Red */
--color-danger: light-dark(#bc5148, #bf0603);
--color-danger-bg: light-dark(#f8e3e0, #220404);
--color-danger-hover: light-dark(#97392f, #8d0801);
/* Success */
--color-success: #708d81; /* Deep Teal */
--color-success-bg: #0d2820;
--color-success-hover: #8aaa9a;
--color-success: light-dark(#2e8a86, #708d81);
--color-success-bg: light-dark(#ddf2f1, #0d2820);
--color-success-hover: light-dark(#1f6b67, #8aaa9a);
/* Overlays */
--color-overlay: rgba(0, 10, 20, 0.55);
--color-header-user-bg: rgba(244, 213, 141, 0.06);
--color-header-user-bg-hover: rgba(244, 213, 141, 0.12);
--color-overlay: light-dark(rgba(14, 58, 66, 0.35), rgba(0, 10, 20, 0.55));
--color-header-user-bg: light-dark(
rgba(188, 81, 72, 0.08),
rgba(244, 213, 141, 0.06)
);
--color-header-user-bg-hover: light-dark(
rgba(188, 81, 72, 0.15),
rgba(244, 213, 141, 0.12)
);
/* Misc */
--color-option-bg: #0d2340;
--color-option-border: #001427;
--color-option-bg: light-dark(#fff9ec, #0d2340);
--color-option-border: light-dark(#ece4cc, #001427);
/* Service brand colors (fixed, not theme-dependent). `on-brand` is the
foreground for text sitting on any of these — also fixed, so the contrast
@@ -73,102 +83,6 @@
--color-on-brand: #fff;
}
/* ── Light via system preference (auto color-scheme) ──────────────── */
@media (prefers-color-scheme: light) {
:root:not([data-style]),
:root[data-style="smooth"]:not([data-color-scheme]) {
--color-text: #0e3a42; /* darkened deep teal */
--color-text-secondary: #2c6671;
--color-text-muted: #5c8a91;
--color-on-accent: #fef8e6; /* cream on teal */
--color-bg: #fef8e6; /* cream */
--color-surface: #fffdf6;
--color-border: transparent;
--color-border-subtle: rgba(48, 144, 161, 0.18);
--color-accent: #bc5148; /* terracotta — pops on cream bg */
--color-accent-hover: #97392f;
--color-link: #bc5148;
--color-link-hover: #97392f;
--color-danger: #bc5148; /* terracotta */
--color-danger-bg: #f8e3e0;
--color-danger-hover: #97392f;
--color-success: #2e8a86; /* darkened light teal */
--color-success-bg: #ddf2f1;
--color-success-hover: #1f6b67;
--color-overlay: rgba(14, 58, 66, 0.35);
--color-header-user-bg: rgba(188, 81, 72, 0.08);
--color-header-user-bg-hover: rgba(188, 81, 72, 0.15);
--color-option-bg: #fff9ec;
--color-option-border: #ece4cc;
}
}
/* ── Manual dark override ─────────────────────────────────────────── */
:root:not([data-style])[data-color-scheme="dark"],
:root[data-style="smooth"][data-color-scheme="dark"] {
color-scheme: dark;
--color-text: #eef0f3;
--color-text-secondary: #8aaabb;
--color-text-muted: #506878;
--color-on-accent: #001427;
--color-bg: #001427;
--color-surface: #0a1f35;
--color-border: transparent;
--color-border-subtle: rgba(112, 141, 129, 0.2);
--color-accent: #f4d58d;
--color-accent-hover: #d4aa5a;
--color-link: #f4d58d;
--color-link-hover: #d4aa5a;
--color-danger: #bf0603;
--color-danger-bg: #220404;
--color-danger-hover: #8d0801;
--color-success: #708d81;
--color-success-bg: #0d2820;
--color-success-hover: #8aaa9a;
--color-overlay: rgba(0, 10, 20, 0.55);
--color-header-user-bg: rgba(244, 213, 141, 0.06);
--color-header-user-bg-hover: rgba(244, 213, 141, 0.12);
--color-option-bg: #0d2340;
--color-option-border: #001427;
}
/* ── Manual light override ────────────────────────────────────────── */
:root:not([data-style])[data-color-scheme="light"],
:root[data-style="smooth"][data-color-scheme="light"] {
color-scheme: light;
--color-text: #0e3a42;
--color-text-secondary: #2c6671;
--color-text-muted: #5c8a91;
--color-on-accent: #fef8e6;
--color-bg: #fef8e6;
--color-surface: #fffdf6;
--color-border: transparent;
--color-border-subtle: rgba(48, 144, 161, 0.18);
--color-accent: #bc5148;
--color-accent-hover: #97392f;
--color-link: #bc5148;
--color-link-hover: #97392f;
--color-danger: #bc5148;
--color-danger-bg: #f8e3e0;
--color-danger-hover: #97392f;
--color-success: #2e8a86;
--color-success-bg: #ddf2f1;
--color-success-hover: #1f6b67;
--color-overlay: rgba(14, 58, 66, 0.35);
--color-header-user-bg: rgba(188, 81, 72, 0.08);
--color-header-user-bg-hover: rgba(188, 81, 72, 0.15);
--color-option-bg: #fff9ec;
--color-option-border: #ece4cc;
}
/* ══════════════════════════════════════════════════════════════════════
Structural overrides
══════════════════════════════════════════════════════════════════════ */