3dtours
cc88471256
The theme menu now carries a fourth choice beside light/dark and the accent: the font pairing. All three pairings are free for commercial use (SIL OFL), have a Vietnamese subset, and are self-hosted — the landing still makes no CDN request. - styles/fonts.css: 22 @font-face blocks for Plus Jakarta Sans, Inter, JetBrains Mono, Fraunces, Be Vietnam Pro, Courier Prime and Space Mono, vietnamese/latin-ext/latin subsets only, under public/assets/fonts. - styles/tokens.css: [data-fonts="studio|editorial|native"] sets --font, --font-heading and --mono. Studio (Plus Jakarta Sans + Inter + JetBrains Mono) is the default. - theme/: FontSetId + FONT_SETS, persisted as rc.fonts, applied as <html data-fonts> next to data-theme and data-accent. - TopBar and the landing nav both get the picker; on the landing the theme tool now opens a small popover (light/dark + font group) instead of toggling on click. - landing.css: --lp-display/--lp-mono now resolve to the chosen group, so the picker retypes the whole page. Syne.woff2 goes with its @font-face.
128 lines
4.3 KiB
CSS
128 lines
4.3 KiB
CSS
/* Theme tokens. Switching = two attributes on <html>, set by ThemeProvider —
|
|
no React re-render, no per-component colour code. Adding an accent group is
|
|
one 3-line block below; see src/theme/themes.ts for the picker's list. */
|
|
|
|
:root {
|
|
--radius: 10px;
|
|
--radius-sm: 7px;
|
|
--rail-w: 84px;
|
|
--chip-w: 300px;
|
|
--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--font-heading: var(--font);
|
|
--mono: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
|
|
/* --- font groups -------------------------------------------------------- */
|
|
/* The three pairings offered in Themes; the faces themselves are self-hosted
|
|
by styles/fonts.css, and the picker's list lives in theme/themes.ts. */
|
|
[data-fonts="studio"] {
|
|
--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--font-heading: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
|
|
[data-fonts="editorial"] {
|
|
--font: "Be Vietnam Pro", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--font-heading: "Fraunces", "Be Vietnam Pro", Georgia, serif;
|
|
--mono: "Courier Prime", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
|
|
[data-fonts="native"] {
|
|
--font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--font-heading: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;
|
|
--mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
|
|
/* --- base themes --------------------------------------------------------- */
|
|
[data-theme="light"] {
|
|
--bg: #ffffff;
|
|
--bg-sunken: #f6f7f9;
|
|
--bg-elev: #ffffff;
|
|
--border: #dcdfe4;
|
|
--border-soft: #eceef1;
|
|
--text: #14181d;
|
|
--text-dim: #5c6773;
|
|
--danger: #c2402f;
|
|
--accent-l: 42%;
|
|
--accent-fg: #ffffff;
|
|
--shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg: #000000;
|
|
--bg-sunken: #0b0b0c;
|
|
--bg-elev: #131315;
|
|
--border: #2a2a2e;
|
|
--border-soft: #1d1d20;
|
|
--text: #f2f3f5;
|
|
--text-dim: #9aa2ad;
|
|
--danger: #ff6b57;
|
|
--accent-l: 60%;
|
|
--accent-fg: #0a0a0a;
|
|
--shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
/* --- accent groups ------------------------------------------------------ */
|
|
[data-accent="amber"] { --accent-h: 33; --accent-s: 92%; }
|
|
[data-accent="blue"] { --accent-h: 214; --accent-s: 88%; }
|
|
[data-accent="emerald"] { --accent-h: 158; --accent-s: 68%; }
|
|
[data-accent="rose"] { --accent-h: 343; --accent-s: 82%; }
|
|
[data-accent="violet"] { --accent-h: 265; --accent-s: 78%; }
|
|
|
|
:root {
|
|
--accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
|
|
--accent-hover: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 7%));
|
|
--accent-soft: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.14);
|
|
--accent-line: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.45);
|
|
}
|
|
|
|
/* --- base elements ------------------------------------------------------ */
|
|
* { box-sizing: border-box; }
|
|
html, body, #root { height: 100%; margin: 0; }
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--font);
|
|
font-size: 14px;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
button { font: inherit; color: inherit; }
|
|
a { color: var(--accent); }
|
|
|
|
.btn {
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-elev);
|
|
color: var(--text);
|
|
padding: 7px 12px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
.btn:hover { border-color: var(--accent-line); }
|
|
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
|
|
.btn.primary:hover { background: var(--accent-hover); }
|
|
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
|
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
|
|
.btn.ghost:hover { color: var(--text); background: var(--bg-sunken); }
|
|
|
|
.field {
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--border);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
.popover {
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(100% + 6px);
|
|
z-index: 40;
|
|
min-width: 220px;
|
|
background: var(--bg-elev);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
padding: 10px;
|
|
}
|