/* * OxiCloud design tokens. * * Single source of truth for light + dark colours. Each token whose value * differs between modes uses `light-dark(LIGHT, DARK)`, which the browser * resolves against the page's `color-scheme`. * * Mode switching: * • `` in declares * both schemes are supported. * • `:root { color-scheme: light dark }` (default) lets the UA follow the * OS preference (`prefers-color-scheme`). * • `html[data-color-scheme="light"]` / `…="dark"` force a specific mode. * `theme-init.js` sets the attribute from localStorage. * * Fallback: browsers that don't support `light-dark()` (Chrome < 123 / * Safari < 17.5 / Firefox < 120) hit a `@supports not (...)` block in * `themes/dark.css` that still applies the old `[data-theme="dark"]` overrides. */ :root { /* Default: follow the OS preference. Overridden by html[data-color-scheme]. */ color-scheme: light dark; --sidebar-width: 250px; /* Backgrounds */ --color-bg-page: light-dark(#f5f7fa, #0f172a); --color-bg-surface: light-dark(#ffffff, #1e293b); --color-bg-input: light-dark(#f9fafb, #0f172a); --color-bg-hover: light-dark(#f8fafc, #334155); --color-bg-muted: light-dark(#f0f3f7, #1a2540); --color-bg-subtle: light-dark(#f8f9fa, #162032); --color-bg-alt: light-dark(#f7fafc, #0f172a); --color-bg-input-alt: light-dark(#edf2f7, #253045); --color-bg-empty: light-dark(#f0f0f0, #253045); /* Borders */ --color-border: light-dark(#e2e8f0, #334155); --color-border-light: light-dark(#f1f5f9, #334155); --color-border-medium: light-dark(#cbd5e0, #475569); --color-border-faint: light-dark(#e0e6ed, #2a3650); --color-border-subtle: light-dark(#e0e5e8, #2a3650); --color-border-xfaint: light-dark(#f0f0f0, #1e293b); --color-border-ddd: light-dark(#ddd, #334155); /* Text */ --color-text: light-dark(#2d3748, #e2e8f0); --color-text-heading: light-dark(#1e293b, #f1f5f9); --color-text-muted: light-dark(#718096, #94a3b8); --color-text-faint: light-dark(#94a3b8, #7a8a9f); --color-text-secondary: light-dark(#4a5568, #cbd5e1); --color-text-subtle: light-dark(#64748b, #94a3b8); --color-text-dark: light-dark(#334155, #cbd5e1); --color-text-placeholder: light-dark(#a0aec0, #64748b); --color-text-gray: light-dark(#6c757d, #94a3b8); --color-text-medium: light-dark(#666, #94a3b8); --color-text-faint2: light-dark(#888, #64748b); --color-text-light: light-dark(#999, #64748b); --color-text-black: light-dark(#333, #e2e8f0); --color-text-dim: light-dark(#555, #94a3b8); /* Accent (orange) — mostly mode-agnostic. */ --color-accent: #ff5e3a; --color-accent-hover: light-dark(#e04520, #ff7a5c); --color-accent-gradient: linear-gradient(135deg, #ff5e3a 0%, #ff2d55 100%); --color-accent-shadow: rgba(255, 94, 58, 0.3); --color-accent-ring: light-dark(rgba(255, 94, 58, 0.1), rgba(255, 94, 58, 0.15)); --color-accent-tint: light-dark(#fff5f3, #2a1a15); --color-accent-mid: #ff8a5c; --color-accent-shadow-lg: rgba(255, 94, 58, 0.4); --color-accent-bg: rgba(255, 94, 58, 0.06); --color-accent-bg-sm: rgba(255, 94, 58, 0.08); --color-accent-ring-dark: rgba(255, 94, 58, 0.15); --color-accent-ring-strong: rgba(255, 94, 58, 0.2); --color-accent-ring-xl: rgba(255, 94, 58, 0.4); --color-accent-ring-xs: rgba(255, 94, 58, 0.05); /* Feedback */ --color-error-bg: light-dark(#fee2e2, #3b1111); --color-error-text: light-dark(#b91c1c, #fca5a5); --color-success-bg: light-dark(#dcfce7, #052e16); --color-success-text: light-dark(#15803d, #86efac); --color-success-border: #48bb78; --color-success-alt: #34c759; --color-success-bg-alt: light-dark(#e6f4ea, #0a2015); --color-success-text-alt: #0d904f; --color-success-bg-green: light-dark(#e8f5e9, #0a2015); --color-success-text-green: #4eaa25; /* Dangerous actions */ --color-danger-bg: #f56565; --color-danger-text: white; --color-danger-bg-hover: #e53e3e; --color-danger-alt: #ef4444; --color-danger-ring: rgba(239, 68, 68, 0.3); --color-danger-ring-lg: rgba(239, 68, 68, 0.4); --color-danger-light-bg: light-dark(#fef2f2, #2a0c0c); --color-danger-lighter: light-dark(#fef2f2, #2a0c0c); --color-danger-text-alt: #e53e3e; --color-danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); /* Warning/feedback */ --color-warning-bg: light-dark(#ffeaa7, #3d2e00); --color-warning-bg-dark: light-dark(#fdcb6e, #5a4200); --color-warning-text: #ffc107; --color-warning-border: #ffc107; --color-warning-ring: rgba(255, 193, 7, 0.1); --color-warning-shadow: rgba(255, 193, 7, 0.5); --color-warning-orange-bg: light-dark(#fff3e0, #2a1c10); --color-warning-orange-border: #f57c00; --color-warning-orange-text: light-dark(#f57c00, #fb923c); --color-warning-bg-light: light-dark(#fef3c7, #2a2410); --color-warning-text-amber: light-dark(#f59e0b, #fbbf24); --color-warning-bg-orange: #fef3e2; --color-warning-text-orange: #d04423; /* Info */ --color-info-bg: light-dark(#ebf5fb, #0c1e35); --color-info-border: #2b6cb0; --color-info-text: #2b6cb0; --color-info-bg-alt: light-dark(#e0ecff, #0c1e35); --color-info-text-alt: #3171d8; --color-info-surface: light-dark(#e0e7ff, #0c1e35); --color-info-blue: #3b82f6; /* Shadows — slightly stronger in dark mode for parity. */ --color-shadow: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)); --color-shadow-lg: light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.3)); --color-shadow-xs: rgba(0, 0, 0, 0.05); --color-shadow-sm: rgba(0, 0, 0, 0.08); --color-shadow-md: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.3)); --color-shadow-xl: rgba(0, 0, 0, 0.2); --color-shadow-2xl: rgba(0, 0, 0, 0.25); --color-shadow-3xl: rgba(0, 0, 0, 0.3); --color-shadow-4xl: rgba(0, 0, 0, 0.4); --color-shadow-5xl: rgba(0, 0, 0, 0.5); /* Overlays — same in both modes; they sit on top of arbitrary content. */ --color-overlay: rgba(0, 0, 0, 0.5); --color-overlay-light: rgba(0, 0, 0, 0.45); --color-overlay-heavy: rgba(0, 0, 0, 0.85); --color-overlay-darkest: rgba(0, 0, 0, 0.92); --color-overlay-shadow: rgba(0, 0, 0, 0.6); /* Foreground / control surfaces on top of dark overlays */ --color-on-overlay: rgba(255, 255, 255, 0.95); --color-on-overlay-muted: rgba(255, 255, 255, 0.9); --color-overlay-button: rgba(255, 255, 255, 0.12); --color-overlay-button-hover: rgba(255, 255, 255, 0.22); /* Items */ --color-item: var(--color-bg-surface); --color-item-hover: var(--color-bg-hover); --color-item-active: light-dark(#f8d2ae, #5a5047); --color-item-selected: light-dark(#fff8f6, #39281a); --color-item-hover-accent: light-dark(#fff0ec, #3d342c); --color-item-hover-blue: #f0f8ff; --color-item-hover-sky: #e0f2fe; /* Sidebar — already dark-leaning in both modes; dark mode goes deeper. */ --color-sidebar-bg-from: light-dark(#2a3042, #0f172a); --color-sidebar-bg-to: light-dark(#232838, #0c1322); --color-sidebar-text: rgba(255, 255, 255, 0.65); --color-sidebar-text-hover: rgba(255, 255, 255, 0.9); --color-sidebar-text-active: #ffffff; --color-sidebar-active-bg: rgba(255, 94, 58, 0.12); --color-sidebar-hover-bg: rgba(255, 255, 255, 0.06); --color-sidebar-separator: rgba(255, 255, 255, 0.07); --color-sidebar-overlay: rgba(0, 0, 0, 0.5); --color-sidebar-storage-bg: rgba(255, 255, 255, 0.05); --color-sidebar-storage-border: rgba(255, 255, 255, 0.07); --color-sidebar-storage-text: rgba(255, 255, 255, 0.8); --color-sidebar-storage-bar: rgba(255, 255, 255, 0.1); --color-sidebar-storage-faint: rgba(255, 255, 255, 0.5); --color-sidebar-logo-gradient: linear-gradient(135deg, #ff5e3a 0%, #ff8a5c 100%); --color-sidebar-progress: linear-gradient(90deg, #ff5e3a 0%, #ff8a5c 100%); --color-sidebar-shadow: rgba(255, 94, 58, 0.35); --color-sidebar-shadow-lg: rgba(255, 94, 58, 0.45); /* Calendar dot colors */ --color-cal-1: #ffa94d; --color-cal-2: #74b9ff; --color-cal-3: #81ecec; --color-cal-4: #ffd43b; --color-cal-5: #ff6b9d; --color-cal-6: #ff7675; --color-cal-7: #0984e3; --color-cal-8: #00cec9; --color-cal-9: #f0c800; --color-cal-10: #e84393; --color-cal-11: #e74c3c; /* File type badge colors */ --color-ft-html: #e34c26; --color-ft-js: #2965f1; --color-ft-python: #3776ab; --color-ft-typescript: #3178c6; --color-ft-rust: #dea584; --color-ft-go: #00add8; --color-ft-java: #e76f00; --color-ft-shell: #555555; --color-ft-csharp: #68217a; --color-ft-php: #8892be; --color-ft-ruby: #cc342d; --color-ft-swift: #fa7343; --color-ft-kotlin: #7f52ff; --color-ft-scala: #e38c00; --color-ft-angular: #cb171e; --color-ft-cpp: #9c4221; --color-ft-docker: #083fa1; --color-ft-generic-blue: #556ee6; --color-ft-generic-green: #4eaa25; --color-ft-generic-gray: #a0aec0; --color-ft-orange-light: #ffb86c; --color-ft-yellow: #ffd43b; --color-ft-orange-alt: #e34c26; --color-ft-coffeescript: #9c4221; /* File type icon background/text pairs */ --color-ft-folder-bg: #ffeaa7; --color-ft-folder-tab: #fdcb6e; --color-ft-doc-bg: #e0ecff; --color-ft-doc-text: #3171d8; --color-ft-pdf-bg: #fee2e2; --color-ft-pdf-text: #e53e3e; --color-ft-image-bg: #e0f2fe; --color-ft-image-text: #3b82f6; --color-ft-video-bg-from: #ede9fe; --color-ft-video-bg-to: #fce7f3; --color-ft-video-text: #8b5cf6; --color-ft-audio-bg: #fef3c7; --color-ft-audio-text: #f59e0b; --color-ft-audio-alt-bg: #fff3e0; --color-ft-spreadsheet-bg: #e6f4ea; --color-ft-spreadsheet-text: #0d904f; --color-ft-presentation-bg: #fef3e2; --color-ft-presentation-text: #d04423; --color-ft-archive-bg: #f5f0eb; --color-ft-archive-text: #8d6e63; --color-ft-installer-bg: #f3e8ff; --color-ft-installer-text: #7c3aed; --color-ft-script-bg: #e8f5e9; --color-ft-script-text: #4eaa25; --color-ft-config-bg: #f1f3f5; --color-ft-config-text: #718096; /* Multiselect bar — always dark */ --color-multiselect-bg: #1e293b; --color-multiselect-border: #334155; --color-multiselect-text: #ffffff; --color-multiselect-text-faint: rgba(255, 255, 255, 0.7); --color-multiselect-hover-bg: rgba(255, 255, 255, 0.1); --color-multiselect-action-text: #ffffff; --color-multiselect-action-hover: rgba(255, 255, 255, 0.2); --color-multiselect-danger-bg: rgba(239, 68, 68, 0.25); --color-multiselect-danger-text: #fca5a5; --color-multiselect-danger-active: rgba(239, 68, 68, 0.4); --color-multiselect-danger-text-active: #ffffff; /* Notification */ --color-notification-bg: light-dark(#ffffff, #1e293b); --color-notification-badge: #ff3b30; --color-notification-success: #34c759; --color-notification-error: #ff3b30; /* Photos lightbox — always dark overlay */ --color-lightbox-overlay: rgba(0, 0, 0, 0.92); --color-lightbox-btn-bg: rgba(255, 255, 255, 0.12); --color-lightbox-btn-text: #ffffff; --color-lightbox-btn-hover: rgba(255, 255, 255, 0.25); --color-lightbox-gradient-top: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent); --color-lightbox-gradient-bottom: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); --color-lightbox-text-faint: rgba(255, 255, 255, 0.5); --color-lightbox-text-muted: rgba(255, 255, 255, 0.7); /* Purple/special */ --color-purple-bg: light-dark(#f3e8ff, #1a0a33); --color-purple-border: #7c3aed; --color-purple-text: #7c3aed; --color-purple-bg-gradient: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 50%, #fce7f3 100%); --color-purple-gradient: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%); --color-purple-shadow: rgba(139, 92, 246, 0.35); --color-purple-border-light: rgba(139, 92, 246, 0.15); /* OIDC / auth */ --color-oidc-bg: #4f46e5; --color-oidc-shadow: rgba(79, 70, 229, 0.3); --color-oidc-shadow-lg: rgba(79, 70, 229, 0.4); /* Device verify */ --color-device-verify-text: #ffc107; --color-device-verify-shadow: rgba(255, 193, 7, 0.5); --color-device-verify-drop-shadow: rgba(255, 193, 7, 0.4); --color-device-verify-border: #ffc107; --color-device-verify-muted: #6c757d; --color-device-verify-dim: #ccc; /* Content area */ --color-content-muted: #888; --color-content-bg-warn: light-dark(#ffeaa7, #3d2e00); --color-content-bg-warn-dark: light-dark(#fdcb6e, #5a4200); --color-content-debug-bg: red; --color-content-debug-text: white; /* User menu */ --color-user-menu-header-bg: light-dark(linear-gradient(135deg, #fef5f3 0%, #fdf2f8 100%), linear-gradient(135deg, #1a2332 0%, #1e2940 100%)); --color-user-menu-header-border: light-dark(#fce7e1, #3a2520); /* Share dialog */ --color-share-link-text: #1565c0; --color-share-link-hover: #1565c0; --color-share-remove-text: #b71c1c; --color-share-owner-text: #757575; /* Primary (style.css) */ --color-primary: light-dark(#2563eb, #60a5fa); --color-primary-hover: light-dark(#1d4ed8, #6fa8ee); /* Recent view */ --color-recent-muted: #6c757d; --color-recent-border: #6c757d; /* Star colors */ --color-star-text: #fbbf24; --color-star-text-hover: #f59e0b; --color-star-active: #d97706; /* Card drop target */ --color-card-drop-tint: rgba(230, 126, 34, 0.08); --color-card-drop-border: #e67e22; /* Neutral backgrounds */ --color-neutral-warm-bg: #f5f0eb; --color-neutral-warm-text: #8d6e63; --color-neutral-bg: #f1f3f5; /* Admin/profile blue accent */ --color-admin-blue: #60a5fa; --color-admin-blue-bg: rgba(59, 130, 246, 0.1); --color-admin-blue-bg-sm: rgba(59, 130, 246, 0.15); /* Danger hover bg (for logout etc.) */ --color-danger-hover-bg: rgba(239, 68, 68, 0.1); /* Additional success rings */ --color-success-ring: rgba(72, 187, 120, 0.1); --color-success-ring-dark: rgba(72, 187, 120, 0.15); --color-success-text-strong: #2f855a; --color-success-ring-vivid: rgba(74, 222, 128, 0.1); --color-success-text-vivid: #86efac; --color-success-ring-vivid-lg: rgba(74, 222, 128, 0.15); --color-success-icon-vivid: #4ade80; --color-secret-green: #059669; /* Additional overlays */ --color-overlay-mid: rgba(0, 0, 0, 0.6); --color-overlay-video: rgba(0, 0, 0, 0.55); /* Progress overlays */ --color-progress-overlay: rgba(255, 255, 255, 0.95); --color-progress-overlay-dark: rgba(30, 41, 59, 0.95); /* Misc */ --color-black: #000000; --color-info-border-light: #90cdf4; --color-notification-error-ring: rgba(255, 59, 48, 0.1); --color-accent-second: #ff2d55; --color-warning-ring-xs: rgba(255, 193, 7, 0.05); /* Avatar / profile */ --color-avatar-gradient: linear-gradient(135deg, #3b82f6, #6366f1); --color-text-navy: #1a1a2e; --color-role-admin-bg: #dbeafe; --color-role-admin-text: #1d4ed8; --color-dark-mid: #475569; --color-role-admin-dark-bg: #1e3a5f; /* Photo tile */ --color-photo-check-border: rgba(255, 255, 255, 0.8); /* Accent shadow (smaller) */ --color-accent-shadow-sm: rgba(255, 94, 58, 0.25); /* Warning faint background */ --color-warning-bg-faint: #fffbeb; /* Storage progress fill gradients */ --color-storage-fill-green: linear-gradient(90deg, #059669, #10b981); --color-storage-fill-orange: linear-gradient(90deg, #d97706, #f59e0b); --color-storage-fill-red: linear-gradient(90deg, #dc2626, #ef4444); /* Error text (dark shade) — light-mode is dark red, dark-mode is light red. */ --color-error-text-dark: light-dark(#991b1b, #f87171); /* Stat warning border */ --color-stat-warn-border: #fbbf24; /* Status badge — success/emerald */ --color-badge-success-bg: #ecfdf5; --color-badge-success-bg-medium: #d1fae5; --color-badge-success-text: #065f46; --color-badge-success-border: #a7f3d0; --color-badge-success-fill: #047857; --color-badge-success-fill-dark: #064e27; --color-badge-success-fill-faint: #f0fdf4; --color-badge-green-bg: #ecfdf5; --color-badge-green-text: #065f46; /* Status badge — orange/coral (used by role-chip & user-vignette) */ --color-badge-orange-bg: light-dark(#fff5f3, #2a1814); --color-badge-orange-text: light-dark(#ff5e3a, #ff8a65); /* Status badge — error/red */ --color-badge-error-border: #fecaca; /* Status badge — warning/amber */ --color-badge-warning-text: #92400e; --color-badge-warning-border: #fde68a; --color-badge-amber-bg: #fef3c7; --color-badge-amber-text: #f59e0b; /* Status badge — indigo/purple */ --color-badge-indigo-bg: #ede9fe; --color-badge-indigo-text: #6d28d9; /* Status badge — blue (used by role-chip & user-vignette) */ --color-badge-blue-bg: light-dark(#eff6ff, #0c2d48); --color-badge-blue-text: light-dark(#1e40af, #93c5fd); --color-badge-blue-border: #bfdbfe; /* Status badge — gray/disabled */ --color-badge-gray: #d1d5db; /* FIXME: legacy dark-mode badge tokens — kept for now; can be folded into * the main badges once their last consumers migrate. */ --color-badge-success-dark-bg: #052e16; --color-badge-success-dark-border: #065f46; --color-badge-error-dark-bg: #3b1111; --color-badge-error-dark-bg-hover: #4a1515; --color-badge-error-dark-text: #fca5a5; --color-badge-warning-dark-bg: #422006; --color-badge-warning-dark-border: #92400e; --color-badge-indigo-dark-bg: #2e1065; --color-badge-indigo-dark-text: #c4b5fd; --color-badge-blue-dark-bg: #0c2d48; --color-badge-blue-dark-text: #93c5fd; /* Dark structural */ --color-dark-footer: #162032; --color-scrollbar-dark: rgba(255, 255, 255, 0.15); --color-border-dark-faint: rgba(255, 255, 255, 0.03); /* Misc */ --color-bg-off-white: #fafbfd; --color-danger-shadow: rgba(220, 38, 38, 0.2); --color-danger-shadow-lg: rgba(220, 38, 38, 0.3); --color-music-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --color-music-background: var(--color-bg-surface); --color-music-public-bg: rgba(74, 144, 217, 0.12); --color-video-play: white; --color-video-play-shadow: black; } /* Explicit user choice overrides the OS preference. `theme-init.js` writes * the attribute from localStorage on render-blocking startup. */ html[data-color-scheme="light"] { color-scheme: light; } html[data-color-scheme="dark"] { color-scheme: dark; }