206 lines
No EOL
5.4 KiB
CSS
206 lines
No EOL
5.4 KiB
CSS
/* ============================================
|
|
DESIGN TOKENS - VIBRANT NEBULA & FROZEN GLASS
|
|
============================================ */
|
|
|
|
/*
|
|
Global Theme Config using Tailwind v4 @theme directive
|
|
Static values (spacing, fonts, radius) remain constant across themes.
|
|
Colors are mapped to CSS variables handled by the [data-theme] attribute.
|
|
*/
|
|
@theme {
|
|
--spacing-0: 0;
|
|
--spacing-1: 0.25rem;
|
|
--spacing-2: 0.5rem;
|
|
--spacing-3: 0.75rem;
|
|
--spacing-4: 1rem;
|
|
--spacing-5: 1.25rem;
|
|
--spacing-6: 1.5rem;
|
|
--spacing-8: 2rem;
|
|
--spacing-10: 2.5rem;
|
|
--spacing-12: 3rem;
|
|
--spacing-16: 4rem;
|
|
--spacing-20: 5rem;
|
|
--spacing-24: 6rem;
|
|
--spacing-28: 7rem;
|
|
--spacing-32: 8rem;
|
|
--spacing-36: 9rem;
|
|
--spacing-40: 10rem;
|
|
--spacing-44: 11rem;
|
|
--spacing-48: 12rem;
|
|
--spacing-52: 13rem;
|
|
--spacing-56: 14rem;
|
|
--spacing-60: 15rem;
|
|
--spacing-64: 16rem;
|
|
--spacing-72: 18rem;
|
|
--spacing-80: 20rem;
|
|
--spacing-96: 24rem;
|
|
|
|
--width-xs: 20rem;
|
|
--width-sm: 24rem;
|
|
--width-md: 28rem;
|
|
--width-lg: 32rem;
|
|
--width-xl: 36rem;
|
|
--width-2xl: 42rem;
|
|
--width-3xl: 48rem;
|
|
--width-4xl: 56rem;
|
|
--width-5xl: 64rem;
|
|
--width-6xl: 72rem;
|
|
--width-7xl: 80rem;
|
|
|
|
--breakpoint-sm: 640px;
|
|
--breakpoint-md: 768px;
|
|
--breakpoint-lg: 1024px;
|
|
--breakpoint-xl: 1280px;
|
|
--breakpoint-2xl: 1536px;
|
|
|
|
--font-sans: 'Inter', -apple-system, sans-serif;
|
|
--font-display: 'Space Grotesk', sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
|
|
--radius-sm: 0.375rem;
|
|
--radius-md: 0.5rem;
|
|
--radius-lg: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
--radius-full: 9999px;
|
|
|
|
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
/* ============================================
|
|
THEME DEFINITIONS
|
|
============================================ */
|
|
|
|
/* 1. DEFAULT DARK THEME: "TWILIGHT DEEP NEBULA" */
|
|
@layer base {
|
|
|
|
:root,
|
|
[data-theme="dark"] {
|
|
/* === CORE PALETTE === */
|
|
--kodo-void: 15 23 42;
|
|
/* Slate 900 - Twilight Base */
|
|
--kodo-ink: 2 6 23;
|
|
/* Slate 950 - Deepest Depth */
|
|
--kodo-graphite: 30 41 59;
|
|
/* Slate 800 - Surfaces */
|
|
--kodo-slate: 51 65 85;
|
|
/* Slate 700 - Borders/Separators */
|
|
|
|
/* === TEXT === */
|
|
--kodo-text-main: 255 255 255;
|
|
/* Pure White */
|
|
--kodo-text-dim: 148 163 184;
|
|
/* Slate 400 */
|
|
|
|
/* === ACCENTS (ELECTRIC) === */
|
|
--kodo-cyan: 34 211 238;
|
|
/* Cyan 400 - Neon */
|
|
--kodo-cyan-dim: 6 182 212;
|
|
/* Cyan 500 */
|
|
--kodo-magenta: 232 121 249;
|
|
/* Fuchsia 400 */
|
|
--kodo-violet: 167 139 250;
|
|
/* Violet 400 */
|
|
--kodo-lime: 163 230 53;
|
|
/* Lime 400 */
|
|
--kodo-gold: 250 204 21;
|
|
/* Yellow 400 */
|
|
--kodo-red: 248 113 113;
|
|
/* Red 400 */
|
|
|
|
/* === SEMANTIC GLASS VARIABLES === */
|
|
/* HUD */
|
|
--glass-hud-bg: rgba(15, 23, 42, 0.6);
|
|
--glass-hud-border: 255 255 255;
|
|
/* Used with opacity */
|
|
--glass-hud-border-opacity: 0.15;
|
|
|
|
/* CARDS */
|
|
--glass-card-bg-base: 30 41 59;
|
|
/* RGB of Graphite */
|
|
--glass-card-bg-opacity: 0.4;
|
|
--glass-card-border: 255 255 255;
|
|
--glass-card-border-opacity: 0.2;
|
|
|
|
/* GLOBAL GRADIENTS */
|
|
--gradient-glow-cyan: rgba(34, 211, 238, 0.45);
|
|
--gradient-glow-magenta: rgba(232, 121, 249, 0.45);
|
|
--gradient-glow-violet: rgba(167, 139, 250, 0.25);
|
|
--gradient-glow-highlight: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* 2. LIGHT THEME: "FROZEN GLASS" */
|
|
[data-theme="light"] {
|
|
/* === CORE PALETTE === */
|
|
--kodo-void: 248 250 252;
|
|
/* Slate 50 - Snow Base */
|
|
--kodo-ink: 255 255 255;
|
|
/* White - Purest */
|
|
--kodo-graphite: 226 232 240;
|
|
/* Slate 200 - Surface */
|
|
--kodo-slate: 203 213 225;
|
|
/* Slate 300 - Borders */
|
|
|
|
/* === TEXT === */
|
|
--kodo-text-main: 15 23 42;
|
|
/* Slate 900 - Dark Text */
|
|
--kodo-text-dim: 100 116 139;
|
|
/* Slate 500 */
|
|
|
|
/* === ACCENTS (FROSTED) === */
|
|
--kodo-cyan: 2 132 199;
|
|
/* Sky 600 - Deep Blue */
|
|
--kodo-cyan-dim: 14 165 233;
|
|
/* Sky 500 */
|
|
--kodo-magenta: 192 38 211;
|
|
/* Fuchsia 600 */
|
|
--kodo-violet: 124 58 237;
|
|
/* Violet 600 */
|
|
--kodo-lime: 101 163 13;
|
|
/* Lime 600 */
|
|
--kodo-gold: 234 179 8;
|
|
/* Yellow 600 */
|
|
--kodo-red: 220 38 38;
|
|
/* Red 600 */
|
|
|
|
/* === SEMANTIC GLASS VARIABLES === */
|
|
/* HUD */
|
|
--glass-hud-bg: rgba(255, 255, 255, 0.85);
|
|
/* Frosty white */
|
|
--glass-hud-border: 203 213 225;
|
|
/* Slate 300 */
|
|
--glass-hud-border-opacity: 0.6;
|
|
|
|
/* CARDS */
|
|
--glass-card-bg-base: 255 255 255;
|
|
--glass-card-bg-opacity: 0.7;
|
|
--glass-card-border: 255 255 255;
|
|
/* White borders on frost looks clean */
|
|
--glass-card-border-opacity: 0.8;
|
|
|
|
/* GLOBAL GRADIENTS (Pastel/Soft) */
|
|
--gradient-glow-cyan: rgba(14, 165, 233, 0.25);
|
|
--gradient-glow-magenta: rgba(192, 38, 211, 0.25);
|
|
--gradient-glow-violet: rgba(139, 92, 246, 0.15);
|
|
--gradient-glow-highlight: rgba(255, 255, 255, 0.8);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
UTILITIES
|
|
============================================ */
|
|
|
|
/* Glass Panel Standard */
|
|
.glass-panel {
|
|
background: rgba(var(--glass-card-bg-base), var(--glass-card-bg-opacity));
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(var(--glass-card-border), var(--glass-card-border-opacity));
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Neon Text Helper */
|
|
.text-glow {
|
|
text-shadow: 0 0 15px currentColor;
|
|
} |