/* ============================================================================ VoxCloud Color Tokens v2 Generated from tokens/colors.json. WCAG AA verified. Source of truth — do not override per-page. ============================================================================ */ :root { /* === Vox Blue (primary brand) ============================================ */ --vox-blue-50: #eff7fc; --vox-blue-100: #d6ebf7; --vox-blue-200: #a9d3ed; --vox-blue-300: #6fb4dd; --vox-blue-400: #3893cc; --vox-blue-500: #0a6fb8; --vox-blue-600: #085c99; --vox-blue-700: #064a7a; --vox-blue-800: #063a60; --vox-blue-900: #04293f; --vox-blue-950: #02161f; /* === Vox Purple (secondary brand, gradient endpoint) ===================== */ --vox-purple-50: #f7f2fa; --vox-purple-100: #ecdef3; --vox-purple-200: #d4b3e0; --vox-purple-300: #b985cc; --vox-purple-400: #a061bd; --vox-purple-500: #8e44ad; --vox-purple-600: #763795; --vox-purple-700: #5d2c75; --vox-purple-800: #451f57; --vox-purple-900: #2c1437; /* === Vox Gray (warm neutrals) ============================================ */ --vox-gray-0: #ffffff; --vox-gray-50: #fafaf9; --vox-gray-100: #f4f4f2; --vox-gray-200: #e7e6e3; --vox-gray-300: #d3d2cd; --vox-gray-400: #a8a7a1; --vox-gray-500: #78776f; --vox-gray-600: #56554f; --vox-gray-700: #3e3d39; --vox-gray-800: #2a2a26; --vox-gray-900: #1a1a17; --vox-gray-950: #0f0f0d; /* === Semantic ============================================================ */ --vox-color-success: #27ae60; --vox-color-warning: #e67e22; --vox-color-error: #e74c3c; --vox-color-info: #3498db; /* === App accents ========================================================= */ --vox-accent-intravox: #0082c9; --vox-accent-metavox: #8e44ad; --vox-accent-introvox: #27ae60; --vox-accent-formvox: #e67e22; --vox-accent-roomvox: #1abc9c; /* === Canonical brand gradient ============================================ */ --vox-gradient-brand: linear-gradient( 135deg, var(--vox-blue-500) 0%, var(--vox-purple-500) 100% ); /* === Aliases (use these in app code, not raw scale tokens) =============== */ --vox-color-primary: var(--vox-blue-600); --vox-color-primary-hover: var(--vox-blue-700); --vox-color-primary-bg: var(--vox-blue-50); --vox-color-text-primary: var(--vox-gray-700); --vox-color-text-body: var(--vox-gray-600); --vox-color-text-muted: var(--vox-gray-500); --vox-color-bg-page: var(--vox-gray-50); --vox-color-bg-card: var(--vox-gray-0); --vox-color-border: var(--vox-gray-200); --vox-color-divider: var(--vox-gray-300); } /* ============================================================================ Nextcloud app context override When VoxCloud apps run inside Nextcloud, defer to Nextcloud's primary so admin theming is honoured. Vox Blue serves as fallback if NC vars unset. Apply this class to the app root element (e.g.
). ============================================================================ */ .nc-app-context { --vox-color-primary: var(--color-primary-element, var(--vox-blue-600)); --vox-color-primary-hover: var(--color-primary-element-hover, var(--vox-blue-700)); --vox-color-text-primary: var(--color-main-text, var(--vox-gray-700)); --vox-color-text-body: var(--color-main-text, var(--vox-gray-600)); --vox-color-text-muted: var(--color-text-maxcontrast, var(--vox-gray-500)); --vox-color-bg-page: var(--color-main-background, var(--vox-gray-50)); --vox-color-bg-card: var(--color-main-background, var(--vox-gray-0)); --vox-color-border: var(--color-border, var(--vox-gray-200)); } /* ============================================================================ Dark theme Two activation paths: - Explicit: [data-theme="dark"] on (set by JS toggle) - System: prefers-color-scheme: dark — but only when the user hasn't made an explicit light-mode choice (data-theme attribute absent). Note: cannot combine an attribute selector and an @media query in one selector list — the @media must be its own block, otherwise the explicit toggle silently fails. ============================================================================ */ [data-theme="dark"] { --vox-color-primary: var(--vox-blue-400); --vox-color-primary-hover: var(--vox-blue-300); --vox-color-primary-bg: var(--vox-blue-900); --vox-color-text-primary: var(--vox-gray-100); --vox-color-text-body: var(--vox-gray-200); --vox-color-text-muted: var(--vox-gray-400); --vox-color-bg-page: var(--vox-gray-900); --vox-color-bg-card: var(--vox-gray-800); --vox-color-border: var(--vox-gray-700); --vox-color-divider: var(--vox-gray-700); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.no-dark-mode) { --vox-color-primary: var(--vox-blue-400); --vox-color-primary-hover: var(--vox-blue-300); --vox-color-primary-bg: var(--vox-blue-900); --vox-color-text-primary: var(--vox-gray-100); --vox-color-text-body: var(--vox-gray-200); --vox-color-text-muted: var(--vox-gray-400); --vox-color-bg-page: var(--vox-gray-900); --vox-color-bg-card: var(--vox-gray-800); --vox-color-border: var(--vox-gray-700); --vox-color-divider: var(--vox-gray-700); } }