v3: modernized smooth theme — surface ladder, hairline borders, soft tabs, calmer accents, focus ring, AA contrast
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
khannurien
@@ -2,95 +2,101 @@
|
||||
Smooth theme — clean, modern, Saira typeface
|
||||
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.
|
||||
Applied when data-style is absent or "smooth".
|
||||
|
||||
Every colour is `light-dark(<light>, <dark>)`, resolved against the
|
||||
root `color-scheme` (see tokens.css), so auto / light / dark share this
|
||||
one block.
|
||||
══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
:root,
|
||||
:root:not([data-style]),
|
||||
:root[data-style="smooth"] {
|
||||
--font-body: "Saira", sans-serif;
|
||||
--font-mono: monospace;
|
||||
|
||||
font-family: var(--font-body);
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
/* Text */
|
||||
--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);
|
||||
--color-text: light-dark(#0e3a42, #e9eef2);
|
||||
--color-text-secondary: light-dark(#35626b, #a3b9c7);
|
||||
--color-text-muted: light-dark(#4d7178, #7b93a6);
|
||||
--color-on-accent: light-dark(#fffaf0, #001427);
|
||||
|
||||
/* Surfaces */
|
||||
--color-bg: light-dark(#fef8e6, #001427);
|
||||
--color-surface: light-dark(#fffdf6, #0a1f35);
|
||||
/* Surfaces — sunken (inputs, wells) < bg < surface (cards) < raised
|
||||
(menus, modals, hovered chips). Dark tiers step up in Prussian Blue;
|
||||
light tiers step from cream to white. */
|
||||
--color-bg: light-dark(#faf5e9, #01152a);
|
||||
--color-surface: light-dark(#fffdf8, #0a2139);
|
||||
--color-surface-raised: light-dark(#ffffff, #112a46);
|
||||
--color-surface-sunken: light-dark(#f3ecdd, #000f20);
|
||||
|
||||
/* Borders */
|
||||
--color-border: transparent;
|
||||
/* Borders — hairlines tinted from the text colour */
|
||||
--color-border: light-dark(rgb(14 58 66 / 0.13), rgb(163 185 199 / 0.14));
|
||||
--color-border-subtle: light-dark(
|
||||
rgba(48, 144, 161, 0.18),
|
||||
rgba(112, 141, 129, 0.2)
|
||||
rgb(14 58 66 / 0.08),
|
||||
rgb(163 185 199 / 0.09)
|
||||
);
|
||||
|
||||
/* Accent */
|
||||
--color-accent: light-dark(#bc5148, #f4d58d);
|
||||
--color-accent-hover: light-dark(#97392f, #d4aa5a);
|
||||
/* Accent — Jasmine (dark) / Terracotta (light) */
|
||||
--color-accent: light-dark(#b54a41, #f4d58d);
|
||||
--color-accent-hover: light-dark(#a3423a, #f8e2ae);
|
||||
--color-accent-soft: light-dark(
|
||||
rgb(181 74 65 / 0.1),
|
||||
rgb(244 213 141 / 0.12)
|
||||
);
|
||||
--color-focus-ring: light-dark(
|
||||
rgb(181 74 65 / 0.35),
|
||||
rgb(244 213 141 / 0.4)
|
||||
);
|
||||
|
||||
/* Links */
|
||||
--color-link: light-dark(#bc5148, #f4d58d);
|
||||
--color-link-hover: light-dark(#97392f, #d4aa5a);
|
||||
--color-link: light-dark(#b54a41, #f4d58d);
|
||||
--color-link-hover: light-dark(#a3423a, #f8e2ae);
|
||||
|
||||
/* Danger */
|
||||
--color-danger: light-dark(#bc5148, #bf0603);
|
||||
--color-danger-bg: light-dark(#f8e3e0, #220404);
|
||||
--color-danger-hover: light-dark(#97392f, #8d0801);
|
||||
/* Danger — Brick Ember, lifted for legibility on Prussian Blue */
|
||||
--color-danger: light-dark(#b3392f, #f0706a);
|
||||
--color-danger-bg: light-dark(#f9e3df, rgb(191 6 3 / 0.18));
|
||||
--color-danger-hover: light-dark(#b3392f, #bf0603);
|
||||
|
||||
/* Success */
|
||||
--color-success: light-dark(#2e8a86, #708d81);
|
||||
--color-success-bg: light-dark(#ddf2f1, #0d2820);
|
||||
--color-success-hover: light-dark(#1f6b67, #8aaa9a);
|
||||
/* Success — Deep Teal */
|
||||
--color-success: light-dark(#25746f, #8fb3a3);
|
||||
--color-success-bg: light-dark(#dff1ef, rgb(112 141 129 / 0.18));
|
||||
--color-success-hover: light-dark(#1f6b67, #a6c6b8);
|
||||
|
||||
--color-warning: light-dark(#a86a00, #e8b44f);
|
||||
|
||||
/* Overlays */
|
||||
--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-overlay: light-dark(rgb(24 30 34 / 0.32), rgb(0 6 14 / 0.6));
|
||||
--color-header-user-bg: transparent;
|
||||
--color-header-user-bg-hover: light-dark(
|
||||
rgba(188, 81, 72, 0.15),
|
||||
rgba(244, 213, 141, 0.12)
|
||||
rgb(14 58 66 / 0.07),
|
||||
rgb(233 238 242 / 0.08)
|
||||
);
|
||||
|
||||
/* Misc */
|
||||
--color-option-bg: light-dark(#fff9ec, #0d2340);
|
||||
--color-option-border: light-dark(#ece4cc, #001427);
|
||||
--color-option-bg: light-dark(#fffdf8, #112a46);
|
||||
--color-option-border: light-dark(rgb(14 58 66 / 0.08), rgb(163 185 199 / 0.09));
|
||||
|
||||
/* Service brand colors (fixed, not theme-dependent). `on-brand` is the
|
||||
foreground for text sitting on any of these — also fixed, so the contrast
|
||||
never flips with the theme's text colour. */
|
||||
--color-youtube: #c00;
|
||||
--color-youtube-hover: #f00;
|
||||
--color-bandcamp: #1da0c3;
|
||||
--color-bandcamp-hover: #25c8f0;
|
||||
--color-soundcloud: #f50;
|
||||
--color-soundcloud-hover: #f73;
|
||||
--color-on-brand: #fff;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════
|
||||
Structural overrides
|
||||
══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* On hover the danger button fills with the solid dark danger colour. The
|
||||
resting text colour is --color-text, which is dark in the light variant,
|
||||
so force white on hover to keep it legible. */
|
||||
:root:not([data-style]) .btn-danger:hover,
|
||||
:root[data-style="smooth"] .btn-danger:hover {
|
||||
color: #fff;
|
||||
/* Shape & depth */
|
||||
--border-width: 1px;
|
||||
--shadow-color: light-dark(rgb(14 58 66 / 0.16), rgb(0 0 0 / 0.5));
|
||||
--shadow-color-soft: light-dark(rgb(14 58 66 / 0.07), rgb(0 0 0 / 0.3));
|
||||
--shadow-color-strong: light-dark(rgb(14 58 66 / 0.26), rgb(0 0 0 / 0.7));
|
||||
--shadow-1: 0 1px 2px var(--shadow-color-soft);
|
||||
--shadow-2: 0 8px 24px -6px var(--shadow-color), 0 1px 2px var(--shadow-color-soft);
|
||||
--shadow-3: 0 24px 56px -12px var(--shadow-color-strong), 0 2px 6px var(--shadow-color-soft);
|
||||
|
||||
/* Component skins */
|
||||
--header-bg: var(--color-bg);
|
||||
--card-shadow: var(--shadow-1);
|
||||
--panel-ring: inset 0 0 0 1px var(--color-border);
|
||||
--card-hover-border: color-mix(in srgb, var(--color-text) 24%, transparent);
|
||||
--input-focus-bg: var(--color-surface);
|
||||
--overlay-filter: blur(3px);
|
||||
--modal-border: var(--color-border);
|
||||
--tab-border: transparent;
|
||||
--tab-active-bg: var(--color-accent-soft);
|
||||
--tab-active-fg: var(--color-accent);
|
||||
--tab-active-border: transparent;
|
||||
--tab-text-transform: none;
|
||||
--tab-tracking: 0;
|
||||
--btn-primary-shadow: var(--shadow-1);
|
||||
--btn-primary-shadow-hover: var(--shadow-1);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user