326 lines
11 KiB
CSS
326 lines
11 KiB
CSS
/* ============================================================
|
|
vibn-ai-templates · tokens.css
|
|
------------------------------------------------------------
|
|
The whole library is themed through CSS custom properties.
|
|
The :root block holds the DEFAULT theme (minimal). Each
|
|
.theme-* class below overrides a subset to flip aesthetics.
|
|
------------------------------------------------------------
|
|
To use:
|
|
<html class="theme-glass"> → glass theme app-wide
|
|
<div class="theme-editorial">…</div> → scope to one block
|
|
============================================================ */
|
|
|
|
:root {
|
|
/* ── Typography ─────────────────────────────────────────── */
|
|
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
--font-display: var(--font-sans); /* themes may override */
|
|
--font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
|
|
|
|
--text-xs: 11px;
|
|
--text-sm: 12px;
|
|
--text-md: 13px;
|
|
--text-lg: 16px;
|
|
--text-xl: 20px;
|
|
--text-2xl: 28px;
|
|
--text-3xl: 38px;
|
|
|
|
--weight-regular: 400;
|
|
--weight-medium: 500;
|
|
--weight-semibold: 600;
|
|
--weight-bold: 700;
|
|
|
|
/* ── Spacing (4 px 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;
|
|
|
|
/* ── Radii ──────────────────────────────────────────────── */
|
|
--radius-xs: 3px;
|
|
--radius-sm: 5px;
|
|
--radius: 8px;
|
|
--radius-lg: 14px;
|
|
--radius-xl: 22px;
|
|
--radius-pill: 999px;
|
|
--button-radius: var(--radius);
|
|
--field-radius: 7px;
|
|
--card-radius: 12px;
|
|
--modal-radius: 16px;
|
|
|
|
/* ── Colors · MINIMAL (default light theme) ────────────── */
|
|
--bg: #f5f5f2;
|
|
--surface: #ffffff;
|
|
--surface-2: #fafaf8;
|
|
--surface-alt: #f1f0eb; /* sidebar / muted regions */
|
|
--border: #e8e8e3;
|
|
--border-strong:#d8d8d2;
|
|
--divider: #ededea;
|
|
|
|
--text: #111111;
|
|
--text-2: #5a5a5e;
|
|
--text-3: #8a8a90;
|
|
--text-on-accent: #ffffff;
|
|
|
|
--accent: #5e5cff;
|
|
--accent-2: #b15bff;
|
|
--accent-soft: #eeedff;
|
|
--accent-ring: rgba(94,92,255,0.22);
|
|
|
|
--success: #16a34a;
|
|
--success-soft: #dcfce7;
|
|
--warn: #d97706;
|
|
--warn-soft: #fef3c7;
|
|
--danger: #dc2626;
|
|
--danger-soft: #fee2e2;
|
|
|
|
/* ── Surfaces & effects ────────────────────────────────── */
|
|
--surface-blur: 0px; /* glass theme overrides */
|
|
--backdrop: transparent; /* glass theme overrides */
|
|
--grain: none; /* maximalist themes can use */
|
|
|
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
|
|
--shadow: 0 4px 12px -4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
|
|
--shadow-lg: 0 24px 48px -20px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.05);
|
|
--shadow-modal: 0 40px 80px -20px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.08);
|
|
--shadow-focus: 0 0 0 3px var(--accent-ring);
|
|
|
|
/* ── Buttons ───────────────────────────────────────────── */
|
|
--button-bg: #111111;
|
|
--button-fg: #ffffff;
|
|
--button-border: #111111;
|
|
--button-hover: #2a2a2a;
|
|
--button-press: #000000;
|
|
|
|
--button-secondary-bg: #ffffff;
|
|
--button-secondary-fg: #111111;
|
|
--button-secondary-border: var(--border);
|
|
--button-secondary-hover: #f6f5f0;
|
|
|
|
--button-ghost-fg: var(--text);
|
|
--button-ghost-hover: #00000008;
|
|
|
|
/* ── Inputs ────────────────────────────────────────────── */
|
|
--field-bg: #ffffff;
|
|
--field-border: var(--border);
|
|
--field-text: var(--text);
|
|
--field-placeholder: var(--text-3);
|
|
--field-focus-ring: var(--shadow-focus);
|
|
|
|
/* ── Animation ─────────────────────────────────────────── */
|
|
--duration-fast: 120ms;
|
|
--duration: 180ms;
|
|
--duration-slow: 260ms;
|
|
--ease: cubic-bezier(0.2, 0.7, 0.3, 1);
|
|
}
|
|
|
|
/* ============================================================
|
|
THEME: minimal (default, same as :root)
|
|
The class exists so consumers can name-toggle.
|
|
============================================================ */
|
|
.theme-minimal {}
|
|
|
|
|
|
/* ============================================================
|
|
THEME: dark — Vercel / Stripe / Linear web school
|
|
============================================================ */
|
|
.theme-dark {
|
|
--bg: #0a0a0a;
|
|
--surface: #101015;
|
|
--surface-2: #16161d;
|
|
--surface-alt: #0a0a0d;
|
|
--border: #1f1f25;
|
|
--border-strong:#2a2a32;
|
|
--divider: #1a1a20;
|
|
|
|
--text: #fafafa;
|
|
--text-2: #a8a8b0;
|
|
--text-3: #6a6a72;
|
|
--text-on-accent: #0a0a0a;
|
|
|
|
--accent: #ffffff;
|
|
--accent-2: #b15bff;
|
|
--accent-soft: rgba(255,255,255,0.08);
|
|
--accent-ring: rgba(255,255,255,0.24);
|
|
|
|
--success: #4ade80;
|
|
--success-soft: rgba(74,222,128,0.14);
|
|
--warn: #f59e0b;
|
|
--warn-soft: rgba(245,158,11,0.14);
|
|
--danger: #ff4d5e;
|
|
--danger-soft: rgba(255,77,94,0.16);
|
|
|
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
|
|
--shadow: 0 4px 12px rgba(0,0,0,0.4);
|
|
--shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
|
|
--shadow-modal: 0 40px 100px -20px rgba(0,0,0,0.8);
|
|
|
|
--button-bg: #ffffff;
|
|
--button-fg: #0a0a0a;
|
|
--button-border: #ffffff;
|
|
--button-hover: #e8e8e8;
|
|
--button-press: #d4d4d4;
|
|
|
|
--button-secondary-bg: #16161d;
|
|
--button-secondary-fg: #fafafa;
|
|
--button-secondary-border: var(--border);
|
|
--button-secondary-hover: #1f1f28;
|
|
|
|
--button-ghost-fg: var(--text);
|
|
--button-ghost-hover: rgba(255,255,255,0.05);
|
|
|
|
--field-bg: #16161d;
|
|
--field-border: var(--border);
|
|
--field-placeholder: var(--text-3);
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
THEME: glass — vibrant aurora bg + frosted surfaces
|
|
============================================================ */
|
|
.theme-glass {
|
|
--bg: #08081a;
|
|
--surface: rgba(255,255,255,0.06);
|
|
--surface-2: rgba(255,255,255,0.10);
|
|
--surface-alt: rgba(255,255,255,0.04);
|
|
--border: rgba(255,255,255,0.14);
|
|
--border-strong:rgba(255,255,255,0.22);
|
|
--divider: rgba(255,255,255,0.08);
|
|
|
|
--text: #ffffff;
|
|
--text-2: rgba(255,255,255,0.70);
|
|
--text-3: rgba(255,255,255,0.50);
|
|
--text-on-accent: #08081a;
|
|
|
|
--accent: #ffffff;
|
|
--accent-2: #b15bff;
|
|
--accent-soft: rgba(255,255,255,0.12);
|
|
--accent-ring: rgba(122,120,255,0.40);
|
|
|
|
--success: #7aff66;
|
|
--success-soft: rgba(122,255,102,0.14);
|
|
--warn: #ffce5b;
|
|
--warn-soft: rgba(255,206,91,0.14);
|
|
--danger: #ff5b6b;
|
|
--danger-soft: rgba(255,91,107,0.14);
|
|
|
|
--button-radius: var(--radius-pill);
|
|
--field-radius: 10px;
|
|
--card-radius: 22px;
|
|
--modal-radius: 22px;
|
|
|
|
--surface-blur: 20px;
|
|
--backdrop: radial-gradient(60% 50% at 20% 20%, rgba(122,120,255,0.55), transparent 60%),
|
|
radial-gradient(50% 50% at 80% 30%, rgba(177,91,255,0.50), transparent 60%),
|
|
radial-gradient(70% 60% at 50% 100%, rgba(0,229,179,0.35), transparent 60%),
|
|
#08081a;
|
|
|
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
|
|
--shadow: 0 10px 40px -10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.10);
|
|
--shadow-lg: 0 30px 80px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12);
|
|
--shadow-modal: 0 40px 100px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.14);
|
|
|
|
--button-bg: #ffffff;
|
|
--button-fg: #08081a;
|
|
--button-border: transparent;
|
|
--button-hover: rgba(255,255,255,0.92);
|
|
--button-press: rgba(255,255,255,0.84);
|
|
|
|
--button-secondary-bg: rgba(255,255,255,0.08);
|
|
--button-secondary-fg: #ffffff;
|
|
--button-secondary-border: var(--border);
|
|
--button-secondary-hover: rgba(255,255,255,0.14);
|
|
|
|
--button-ghost-fg: #ffffff;
|
|
--button-ghost-hover: rgba(255,255,255,0.06);
|
|
|
|
--field-bg: rgba(255,255,255,0.06);
|
|
--field-border: var(--border);
|
|
--field-placeholder: var(--text-3);
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
THEME: editorial — warm paper, serif display, hairline rules
|
|
============================================================ */
|
|
.theme-editorial {
|
|
--font-display: 'DM Serif Display', 'Times New Roman', Times, serif;
|
|
|
|
--bg: #f3eee2;
|
|
--surface: #fbf8f0;
|
|
--surface-2: #f7f2e6;
|
|
--surface-alt: #ece6d6;
|
|
--border: #d8d0bc;
|
|
--border-strong:#b8a988;
|
|
--divider: #e2d9c4;
|
|
|
|
--text: #1c1a14;
|
|
--text-2: #5a5044;
|
|
--text-3: #8a7d6a;
|
|
--text-on-accent: #fbf8f0;
|
|
|
|
--accent: #1c1a14;
|
|
--accent-2: #b85c28; /* terracotta */
|
|
--accent-soft: #e8e1cd;
|
|
--accent-ring: rgba(28,26,20,0.18);
|
|
|
|
--success: #3f7a3a;
|
|
--success-soft: #dde9d4;
|
|
--warn: #a86b14;
|
|
--warn-soft: #f3e7c4;
|
|
--danger: #a32a1e;
|
|
--danger-soft: #f1d6cf;
|
|
|
|
--button-radius: 3px;
|
|
--field-radius: 3px;
|
|
--card-radius: 4px;
|
|
--modal-radius: 4px;
|
|
|
|
--shadow-sm: 0 1px 0 rgba(28,26,20,0.06);
|
|
--shadow: 0 1px 0 rgba(28,26,20,0.06), 0 6px 24px -12px rgba(28,26,20,0.12);
|
|
--shadow-lg: 0 14px 36px -16px rgba(28,26,20,0.18), 0 1px 0 rgba(28,26,20,0.06);
|
|
--shadow-modal: 0 30px 60px -20px rgba(28,26,20,0.28);
|
|
|
|
--button-bg: #1c1a14;
|
|
--button-fg: #fbf8f0;
|
|
--button-border: #1c1a14;
|
|
--button-hover: #2f2a20;
|
|
--button-press: #000000;
|
|
|
|
--button-secondary-bg: transparent;
|
|
--button-secondary-fg: #1c1a14;
|
|
--button-secondary-border: #1c1a14; /* thick rule */
|
|
--button-secondary-hover: rgba(28,26,20,0.06);
|
|
|
|
--button-ghost-fg: var(--text);
|
|
--button-ghost-hover: rgba(28,26,20,0.06);
|
|
|
|
--field-bg: #fbf8f0;
|
|
--field-border: #1c1a14; /* hairline rule */
|
|
--field-placeholder: var(--text-3);
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
Body backdrop helper — paint --backdrop on the page root.
|
|
Glass theme uses this to show the aurora wash.
|
|
============================================================ */
|
|
.vibn-app {
|
|
font-family: var(--font-sans);
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
min-height: 100%;
|
|
position: relative;
|
|
}
|
|
.vibn-app::before {
|
|
content: "";
|
|
position: absolute; inset: 0;
|
|
background: var(--backdrop);
|
|
z-index: 0; pointer-events: none;
|
|
}
|
|
.vibn-app > * { position: relative; z-index: 1; }
|