310 lines
10 KiB
CSS
310 lines
10 KiB
CSS
/* ============================================================
|
||
ModernSK — Colors & Type Tokens (ported from Claude Design)
|
||
Tactile, dark-first design system.
|
||
Old-iOS skeuomorphism × macOS Sequoia neatness × Ubuntu warmth.
|
||
------------------------------------------------------------
|
||
Single source of truth. Every component reads from here.
|
||
------------------------------------------------------------
|
||
Fonts are NOT loaded here. The branded faces (Anta / Onest /
|
||
Geist Mono) live in the optional `modern-sk/fonts.css`. The
|
||
--font-* chains below degrade to system-ui when that file is
|
||
not imported, and an app can override the tokens to remap any
|
||
typeface without touching this file.
|
||
============================================================ */
|
||
|
||
:root {
|
||
/* ---------- BRAND ---------- */
|
||
--lime: #bef264;
|
||
--lime-bright: #d4ff7a;
|
||
--lime-deep: #a8e04a;
|
||
--lime-ink: #1c2a08;
|
||
|
||
--ember: #e9572b;
|
||
--ember-bright: #ff7a52;
|
||
--ember-deep: #c4421d;
|
||
|
||
/* ---------- NEUTRALS (warm-tinted) ---------- */
|
||
--ink: #0f100d;
|
||
--ink-deep: #090a07;
|
||
--ink-raised: #16170f;
|
||
--steel-900: #1c1d16;
|
||
--steel-800: #22241b;
|
||
--steel-700: #2a2c22;
|
||
--steel-600: #33342b;
|
||
--steel-500: #44463a;
|
||
--steel-400: #5a5c4d;
|
||
|
||
/* ---------- TEXT (on dark) ---------- */
|
||
--fg-1: #f3f4ee;
|
||
--fg-2: #a7a99c;
|
||
--fg-3: #6f7164;
|
||
--fg-on-lime: #1c2a08;
|
||
--fg-on-ember: #ffffff;
|
||
|
||
/* ---------- HAIRLINES & STROKES ---------- */
|
||
--hair: rgba(255,255,255,0.08);
|
||
--hair-strong: rgba(255,255,255,0.14);
|
||
--edge-top: rgba(255,255,255,0.10);
|
||
--edge-inset: rgba(0,0,0,0.5);
|
||
|
||
/* ---------- SEMANTIC ---------- */
|
||
--success: #bef264;
|
||
--warning: #e6a93c;
|
||
--danger: #e9572b;
|
||
--info: #6db3f2;
|
||
|
||
--success-bg: rgba(190,242,100,0.12);
|
||
--warning-bg: rgba(230,169,60,0.12);
|
||
--danger-bg: rgba(233,87,43,0.14);
|
||
--info-bg: rgba(109,179,242,0.12);
|
||
|
||
/* ---------- TYPE ----------
|
||
Anta is the GLOBAL typeface. Onest / Geist Mono are fallbacks. */
|
||
--font-display: 'Anta', 'Onest', system-ui, sans-serif;
|
||
--font-sans: 'Anta', 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||
--font-mono: 'Anta', 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
|
||
|
||
--text-xs: 12px;
|
||
--text-sm: 13px;
|
||
--text-base: 15px;
|
||
--text-md: 16px;
|
||
--text-lg: 18px;
|
||
--text-xl: 22px;
|
||
--text-2xl: 28px;
|
||
--text-3xl: 36px;
|
||
--text-4xl: 48px;
|
||
--text-5xl: 64px;
|
||
|
||
--w-light: 300;
|
||
--w-regular: 400;
|
||
--w-medium: 500;
|
||
--w-semibold:600;
|
||
--w-bold: 700;
|
||
--w-black: 800;
|
||
|
||
--lh-tight: 1.05;
|
||
--lh-snug: 1.25;
|
||
--lh-normal: 1.5;
|
||
--lh-relaxed: 1.65;
|
||
--track-tight: -0.03em;
|
||
--track-snug: -0.01em;
|
||
--track-wide: 0.02em;
|
||
--track-caps: 0.24em;
|
||
|
||
/* ---------- RADII ---------- */
|
||
--r-xs: 3px;
|
||
--r-sm: 4px;
|
||
--r-md: 6px;
|
||
--r-lg: 8px;
|
||
--r-xl: 11px;
|
||
--r-pill: 999px;
|
||
|
||
/* ---------- SPACING (4px base) ---------- */
|
||
--space-1: 4px;
|
||
--space-2: 8px;
|
||
--space-3: 12px;
|
||
--space-4: 16px;
|
||
--space-5: 20px;
|
||
--space-6: 24px;
|
||
--space-8: 32px;
|
||
--space-10: 40px;
|
||
--space-12: 48px;
|
||
--space-16: 64px;
|
||
|
||
/* ---------- CONTROL SIZING (compact, global) ---------- */
|
||
--ctl-pad-y: 6px;
|
||
--ctl-pad-x: 18px;
|
||
--ctl-font: 14px;
|
||
--field-pad-y: 7px;
|
||
--field-pad-x: 13px;
|
||
--switch-w: 42px;
|
||
--switch-h: 22px;
|
||
--switch-knob: 16px;
|
||
--switch-gap: 3px;
|
||
--seg-pad-y: 4px;
|
||
--stepper-h: 30px;
|
||
|
||
/* ---------- ELEVATION / TACTILE SHADOWS ---------- */
|
||
--shadow-raised:
|
||
0 1px 0 rgba(255,255,255,0.06) inset,
|
||
0 2px 3px rgba(0,0,0,0.5),
|
||
0 6px 16px rgba(0,0,0,0.35);
|
||
--shadow-raised-hover:
|
||
0 1px 0 rgba(255,255,255,0.08) inset,
|
||
0 3px 5px rgba(0,0,0,0.5),
|
||
0 10px 24px rgba(0,0,0,0.4);
|
||
--shadow-pressed:
|
||
0 2px 5px rgba(0,0,0,0.6) inset,
|
||
0 1px 0 rgba(255,255,255,0.04);
|
||
--shadow-inset-well:
|
||
0 2px 4px rgba(0,0,0,0.45) inset,
|
||
0 1px 0 rgba(255,255,255,0.05);
|
||
--shadow-card:
|
||
0 1px 0 rgba(255,255,255,0.05) inset,
|
||
0 12px 32px rgba(0,0,0,0.45),
|
||
0 2px 6px rgba(0,0,0,0.35);
|
||
--shadow-window:
|
||
0 1px 0 rgba(255,255,255,0.07) inset,
|
||
0 30px 80px rgba(0,0,0,0.55),
|
||
0 2px 8px rgba(0,0,0,0.4);
|
||
--focus-ring: 0 0 0 3px rgba(190,242,100,0.35);
|
||
--focus-ring-ember: 0 0 0 3px rgba(233,87,43,0.32);
|
||
--glow-lime: 0 6px 22px rgba(190,242,100,0.28);
|
||
|
||
/* ---------- GRADIENTS (gloss recipes) ---------- */
|
||
--grad-key: linear-gradient(180deg, #2f3027, #24251e);
|
||
--grad-key-hover:linear-gradient(180deg, #36372e, #2b2c23);
|
||
--grad-key-down: linear-gradient(180deg, #1d1e17, #232419);
|
||
--grad-primary: linear-gradient(180deg, #cdf972, var(--lime) 55%, #b1e655);
|
||
--grad-primary-down: linear-gradient(180deg, var(--lime-deep), var(--lime));
|
||
--grad-ember: linear-gradient(180deg, #f86f49, var(--ember) 55%, #d34c22);
|
||
--grad-ember-down: linear-gradient(180deg, var(--ember-deep), var(--ember));
|
||
--grad-titlebar:linear-gradient(180deg, #26271f, #1c1d16);
|
||
|
||
/* ---------- MOTION ---------- */
|
||
--ease-out: cubic-bezier(.22,.61,.36,1);
|
||
--ease-snap: cubic-bezier(.2,.9,.3,1.2);
|
||
--dur-press: 60ms;
|
||
--dur-quick: 120ms;
|
||
--dur-base: 200ms;
|
||
|
||
/* ---------- THE FELT (background) ---------- */
|
||
--bg-glow:
|
||
radial-gradient(120% 80% at 50% -10%, rgba(190,242,100,0.10), transparent 55%),
|
||
radial-gradient(90% 70% at 85% 110%, rgba(233,87,43,0.06), transparent 60%),
|
||
radial-gradient(100% 100% at 50% 50%, #16170f 0%, #0f100d 60%, #090a07 100%);
|
||
--grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1' exponent='2.8' offset='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
|
||
--grain-size: 200px;
|
||
--grain-opacity: 0.45;
|
||
|
||
/* ---------- SPINNER GROOVE ----------
|
||
Solid carved channel — flat base felt, sunk by an SVG inner shadow,
|
||
exactly like the switch well (no gradient). */
|
||
--spin-track: #23241c;
|
||
}
|
||
|
||
/* ============================================================
|
||
THE FELT — the one global background.
|
||
============================================================ */
|
||
.modern-sk-felt {
|
||
position: relative;
|
||
background-color: var(--ink);
|
||
background-image: var(--bg-glow);
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
background-attachment: fixed;
|
||
color: var(--fg-1);
|
||
}
|
||
.modern-sk-felt::before {
|
||
content: "";
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
background-image: var(--grain-url);
|
||
background-size: var(--grain-size) var(--grain-size);
|
||
background-repeat: repeat;
|
||
opacity: var(--grain-opacity);
|
||
mix-blend-mode: screen;
|
||
}
|
||
|
||
/* ============================================================
|
||
LIGHT MODE — warm off-white "paper", Sierra-style gloss.
|
||
============================================================ */
|
||
[data-theme="light"] {
|
||
--ink: #ecece3;
|
||
--ink-deep: #deded2;
|
||
--ink-raised: #f6f6ef;
|
||
--steel-900: #ffffff;
|
||
--steel-800: #f4f4ec;
|
||
--steel-700: #e9e9df;
|
||
--steel-600: #deded2;
|
||
--steel-500: #c8c9bc;
|
||
--steel-400: #aeb0a2;
|
||
|
||
--fg-1: #1d1e16;
|
||
--fg-2: #5b5d50;
|
||
--fg-3: #8a8c7d;
|
||
|
||
--hair: rgba(0,0,0,0.10);
|
||
--hair-strong: rgba(0,0,0,0.16);
|
||
--edge-top: rgba(255,255,255,0.9);
|
||
--edge-inset: rgba(0,0,0,0.18);
|
||
|
||
--shadow-raised:
|
||
0 1px 0 rgba(255,255,255,0.9) inset,
|
||
0 1px 2px rgba(0,0,0,0.12),
|
||
0 4px 10px rgba(0,0,0,0.10);
|
||
--shadow-raised-hover:
|
||
0 1px 0 rgba(255,255,255,0.95) inset,
|
||
0 2px 4px rgba(0,0,0,0.14),
|
||
0 8px 18px rgba(0,0,0,0.12);
|
||
--shadow-pressed:
|
||
0 2px 4px rgba(0,0,0,0.18) inset;
|
||
--shadow-inset-well:
|
||
0 2px 3px rgba(0,0,0,0.10) inset,
|
||
0 1px 0 rgba(255,255,255,0.8);
|
||
--shadow-card:
|
||
0 1px 0 rgba(255,255,255,0.8) inset,
|
||
0 10px 28px rgba(0,0,0,0.12),
|
||
0 2px 6px rgba(0,0,0,0.08);
|
||
--shadow-window:
|
||
0 1px 0 rgba(255,255,255,0.9) inset,
|
||
0 24px 64px rgba(0,0,0,0.22),
|
||
0 2px 8px rgba(0,0,0,0.12);
|
||
|
||
--grad-key: linear-gradient(180deg, #ffffff, #ecece2);
|
||
--grad-key-hover:linear-gradient(180deg, #ffffff, #f3f3ea);
|
||
--grad-key-down: linear-gradient(180deg, #e4e4d8, #ededdf);
|
||
--grad-titlebar: linear-gradient(180deg, #f4f4ec, #e7e7dd);
|
||
|
||
--bg-glow:
|
||
radial-gradient(120% 80% at 50% -10%, rgba(190,242,100,0.18), transparent 55%),
|
||
radial-gradient(90% 70% at 85% 110%, rgba(233,87,43,0.08), transparent 60%),
|
||
radial-gradient(100% 100% at 50% 50%, #f2f2ea 0%, #ecece3 60%, #e2e2d6 100%);
|
||
|
||
/* carved groove on warm paper — flat base, sunk by inner shadow */
|
||
--spin-track: #dcdcd2;
|
||
}
|
||
|
||
/* ============================================================
|
||
SEMANTIC TYPE CLASSES
|
||
============================================================ */
|
||
.modern-sk-display {
|
||
font-family: var(--font-display); font-weight: 400;
|
||
font-size: var(--text-5xl); line-height: var(--lh-tight);
|
||
letter-spacing: -0.01em; color: var(--fg-1);
|
||
}
|
||
.modern-sk-h1 {
|
||
font-family: var(--font-sans); font-weight: var(--w-bold);
|
||
font-size: var(--text-3xl); line-height: var(--lh-snug);
|
||
letter-spacing: var(--track-snug); color: var(--fg-1);
|
||
}
|
||
.modern-sk-h2 {
|
||
font-family: var(--font-sans); font-weight: var(--w-semibold);
|
||
font-size: var(--text-2xl); line-height: var(--lh-snug);
|
||
letter-spacing: var(--track-snug); color: var(--fg-1);
|
||
}
|
||
.modern-sk-h3 {
|
||
font-family: var(--font-sans); font-weight: var(--w-semibold);
|
||
font-size: var(--text-xl); line-height: var(--lh-snug); color: var(--fg-1);
|
||
}
|
||
.modern-sk-body {
|
||
font-family: var(--font-sans); font-weight: var(--w-regular);
|
||
font-size: var(--text-base); line-height: var(--lh-normal); color: var(--fg-2);
|
||
}
|
||
.modern-sk-body-strong { font-weight: var(--w-medium); color: var(--fg-1); }
|
||
.modern-sk-caption {
|
||
font-family: var(--font-sans); font-weight: var(--w-medium);
|
||
font-size: var(--text-sm); color: var(--fg-3);
|
||
}
|
||
.modern-sk-label {
|
||
font-family: var(--font-sans); font-weight: var(--w-semibold);
|
||
font-size: 11px; text-transform: uppercase;
|
||
letter-spacing: var(--track-caps); color: var(--fg-3);
|
||
}
|
||
.modern-sk-mono {
|
||
font-family: var(--font-mono); font-weight: var(--w-regular);
|
||
font-size: var(--text-sm); color: var(--fg-2);
|
||
}
|