194 lines
6.1 KiB
CSS
194 lines
6.1 KiB
CSS
/* ── rSpace Theme System ──
|
|
* CSS custom properties for dark/light theming.
|
|
* Dark is default on :root; light overrides on [data-theme="light"].
|
|
* prefers-color-scheme fallback applies when no data-theme is set yet. */
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
|
|
/* Surface */
|
|
--rs-bg-page: #0f172a;
|
|
--rs-bg-surface: #1e293b;
|
|
--rs-bg-surface-raised: #334155;
|
|
--rs-bg-surface-sunken: #0f172a;
|
|
--rs-bg-overlay: rgba(15, 23, 42, 0.85);
|
|
--rs-bg-hover: rgba(255, 255, 255, 0.05);
|
|
--rs-bg-active: rgba(6, 182, 212, 0.1);
|
|
|
|
/* Text */
|
|
--rs-text-primary: #e2e8f0;
|
|
--rs-text-secondary: #94a3b8;
|
|
--rs-text-muted: #64748b;
|
|
--rs-text-inverse: #0f172a;
|
|
|
|
/* Borders */
|
|
--rs-border: rgba(255, 255, 255, 0.1);
|
|
--rs-border-subtle: rgba(255, 255, 255, 0.06);
|
|
--rs-border-strong: rgba(255, 255, 255, 0.2);
|
|
|
|
/* Glass */
|
|
--rs-glass-bg: rgba(15, 23, 42, 0.85);
|
|
--rs-glass-border: rgba(255, 255, 255, 0.08);
|
|
|
|
/* Shadows */
|
|
--rs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
--rs-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
|
|
--rs-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
|
|
|
|
/* Spinner */
|
|
--rs-spinner-track: rgba(255, 255, 255, 0.1);
|
|
--rs-spinner-head: #14b8a6;
|
|
|
|
/* Accent (same both themes) */
|
|
--rs-accent: #14b8a6;
|
|
--rs-accent-hover: #0d9488;
|
|
|
|
/* Primary (same both themes) */
|
|
--rs-primary: #4f46e5;
|
|
--rs-primary-hover: #6366f1;
|
|
|
|
/* Semantic (same both themes) */
|
|
--rs-error: #ef4444;
|
|
--rs-success: #22c55e;
|
|
--rs-warning: #fbbf24;
|
|
|
|
/* Gradients (same both themes) */
|
|
--rs-gradient-brand: linear-gradient(135deg, #14b8a6, #22d3ee);
|
|
--rs-gradient-primary: linear-gradient(135deg, #6366f1, #4f46e5);
|
|
--rs-gradient-cta: linear-gradient(135deg, #14b8a6, #0d9488);
|
|
|
|
/* Component-specific tokens */
|
|
--rs-input-bg: #0f172a;
|
|
--rs-input-border: #334155;
|
|
--rs-input-text: #e2e8f0;
|
|
--rs-btn-secondary-bg: rgba(255, 255, 255, 0.08);
|
|
--rs-btn-secondary-text: #94a3b8;
|
|
--rs-card-bg: rgba(255, 255, 255, 0.03);
|
|
--rs-card-border: rgba(255, 255, 255, 0.06);
|
|
|
|
/* Canvas */
|
|
--rs-canvas-bg: #0f172a;
|
|
--rs-canvas-grid: rgba(255, 255, 255, 0.04);
|
|
|
|
/* Toolbar */
|
|
--rs-toolbar-bg: #1e293b;
|
|
--rs-toolbar-btn-bg: #334155;
|
|
--rs-toolbar-btn-hover: #475569;
|
|
--rs-toolbar-btn-text: #e2e8f0;
|
|
--rs-toolbar-sep: #334155;
|
|
--rs-toolbar-panel-bg: #1e293b;
|
|
--rs-toolbar-panel-border: #334155;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
color-scheme: light;
|
|
|
|
/* Surface */
|
|
--rs-bg-page: #f8fafc;
|
|
--rs-bg-surface: #ffffff;
|
|
--rs-bg-surface-raised: #f1f5f9;
|
|
--rs-bg-surface-sunken: #f8fafc;
|
|
--rs-bg-overlay: rgba(255, 255, 255, 0.9);
|
|
--rs-bg-hover: rgba(0, 0, 0, 0.04);
|
|
--rs-bg-active: #e0f2fe;
|
|
|
|
/* Text */
|
|
--rs-text-primary: #0f172a;
|
|
--rs-text-secondary: #374151;
|
|
--rs-text-muted: #64748b;
|
|
--rs-text-inverse: #e2e8f0;
|
|
|
|
/* Borders */
|
|
--rs-border: rgba(0, 0, 0, 0.1);
|
|
--rs-border-subtle: rgba(0, 0, 0, 0.06);
|
|
--rs-border-strong: rgba(0, 0, 0, 0.2);
|
|
|
|
/* Glass */
|
|
--rs-glass-bg: rgba(255, 255, 255, 0.9);
|
|
--rs-glass-border: rgba(0, 0, 0, 0.08);
|
|
|
|
/* Shadows */
|
|
--rs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
--rs-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
--rs-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.18);
|
|
|
|
/* Spinner */
|
|
--rs-spinner-track: rgba(0, 0, 0, 0.08);
|
|
--rs-spinner-head: #14b8a6;
|
|
|
|
/* Component-specific tokens */
|
|
--rs-input-bg: #f8fafc;
|
|
--rs-input-border: #e2e8f0;
|
|
--rs-input-text: #334155;
|
|
--rs-btn-secondary-bg: rgba(0, 0, 0, 0.05);
|
|
--rs-btn-secondary-text: #374151;
|
|
--rs-card-bg: rgba(0, 0, 0, 0.02);
|
|
--rs-card-border: rgba(0, 0, 0, 0.06);
|
|
|
|
/* Canvas */
|
|
--rs-canvas-bg: #ffffff;
|
|
--rs-canvas-grid: #f1f5f9;
|
|
|
|
/* Toolbar */
|
|
--rs-toolbar-bg: #ffffff;
|
|
--rs-toolbar-btn-bg: #f1f5f9;
|
|
--rs-toolbar-btn-hover: #e2e8f0;
|
|
--rs-toolbar-btn-text: #0f172a;
|
|
--rs-toolbar-sep: #e2e8f0;
|
|
--rs-toolbar-panel-bg: #ffffff;
|
|
--rs-toolbar-panel-border: #e2e8f0;
|
|
}
|
|
|
|
/* prefers-color-scheme fallback: if JS hasn't set data-theme yet */
|
|
@media (prefers-color-scheme: light) {
|
|
:root:not([data-theme]) {
|
|
color-scheme: light;
|
|
|
|
--rs-bg-page: #f8fafc;
|
|
--rs-bg-surface: #ffffff;
|
|
--rs-bg-surface-raised: #f1f5f9;
|
|
--rs-bg-surface-sunken: #f8fafc;
|
|
--rs-bg-overlay: rgba(255, 255, 255, 0.9);
|
|
--rs-bg-hover: rgba(0, 0, 0, 0.04);
|
|
--rs-bg-active: #e0f2fe;
|
|
|
|
--rs-text-primary: #0f172a;
|
|
--rs-text-secondary: #374151;
|
|
--rs-text-muted: #64748b;
|
|
--rs-text-inverse: #e2e8f0;
|
|
|
|
--rs-border: rgba(0, 0, 0, 0.1);
|
|
--rs-border-subtle: rgba(0, 0, 0, 0.06);
|
|
--rs-border-strong: rgba(0, 0, 0, 0.2);
|
|
|
|
--rs-glass-bg: rgba(255, 255, 255, 0.9);
|
|
--rs-glass-border: rgba(0, 0, 0, 0.08);
|
|
|
|
--rs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
--rs-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
--rs-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.18);
|
|
|
|
--rs-spinner-track: rgba(0, 0, 0, 0.08);
|
|
--rs-spinner-head: #14b8a6;
|
|
|
|
--rs-input-bg: #f8fafc;
|
|
--rs-input-border: #e2e8f0;
|
|
--rs-input-text: #334155;
|
|
--rs-btn-secondary-bg: rgba(0, 0, 0, 0.05);
|
|
--rs-btn-secondary-text: #374151;
|
|
--rs-card-bg: rgba(0, 0, 0, 0.02);
|
|
--rs-card-border: rgba(0, 0, 0, 0.06);
|
|
|
|
--rs-canvas-bg: #ffffff;
|
|
--rs-canvas-grid: #f1f5f9;
|
|
|
|
--rs-toolbar-bg: #ffffff;
|
|
--rs-toolbar-btn-bg: #f1f5f9;
|
|
--rs-toolbar-btn-hover: #e2e8f0;
|
|
--rs-toolbar-btn-text: #0f172a;
|
|
--rs-toolbar-sep: #e2e8f0;
|
|
--rs-toolbar-panel-bg: #ffffff;
|
|
--rs-toolbar-panel-border: #e2e8f0;
|
|
}
|
|
}
|