/** * THEME: Light / Dark semantic tokens * * Single source of truth for app theming. * 1. :root — light theme (canonical values; MUST match the * historical hard-coded palette exactly) * 2. [data-theme="dark"] — dark theme overrides (Todoist-style warm charcoal) * 3. Tailwind dark overrides — utility remaps for template-authored classes * * The `data-theme` attribute lives on and only ever holds a RESOLVED * value: "light" or "dark" (never "system"). It is set pre-paint by the inline * script in app/templates/_base/head.html / head-minimal.html and managed at * runtime by app/static/js/managers/theme-manager.js. * * Loading: * - App pages: first @import in app/static/css/styles.css * - Auth pages: direct in _base/head-minimal.html (they load only * tailwind.css otherwise) * * MAINTENANCE RULES * - Never hard-code a color in component CSS; consume these tokens. * - New Tailwind color utility used in a template? Add a matching dark * override in section 3 (or use a tokened class instead). * - Light values here are contractual: changing one changes the light UI. * - The date-state palette is mirrored in JS (core/utils/color-utils.js). * Keep values in sync. */ /* ============================================================ 1. LIGHT THEME (canonical) ============================================================ */ :root { color-scheme: light; /* --- Surfaces --- */ --bg-primary: #ffffff; /* main content background */ --bg-secondary: #f9fafb; /* sidebar, section headers, panels */ --bg-tertiary: #f3f4f6; /* input wells, chips, code */ --bg-elevated: #ffffff; /* dropdowns, modals, popovers */ --bg-hover: #f3f4f6; /* row/item hover */ --bg-active: #e5e7eb; /* pressed/active */ --bg-selected: #eff6ff; /* selected rows (blue-tinted) */ --bg-inverse: #1f2937; /* dark chips/toasts shown in light UI */ /* --- Text --- */ --text-primary: #1f2937; --text-secondary: #4b5563; --text-tertiary: #6b7280; --text-muted: #9ca3af; /* placeholders, subtle icons */ --text-disabled: #d1d5db; --text-inverse: #ffffff; /* text on --bg-inverse */ --text-on-accent: #ffffff; /* text on solid accent/brand buttons */ /* --- Borders --- */ --border-light: #e5e7eb; --border-default: #d1d5db; --border-strong: #9ca3af; --border-focus: #3b82f6; /* aliases (legacy names already consumed in component CSS) */ --border-primary: var(--border-light); --border-secondary: var(--border-default); --border-hover: var(--border-strong); /* --- Accent (interactive blue) + Brand (Todoist red) --- */ --accent-primary: #3b82f6; --accent-hover: #2563eb; --accent-light: #dbeafe; --accent-primary-hover: var(--accent-hover); /* alias */ --accent-bg: var(--bg-selected); /* alias */ --brand: #dc4c3e; /* --- Semantic --- */ --danger: #dc2626; --danger-bg: #fef2f2; --color-error: #ef4444; /* brighter red family (red-500) */ --text-error: var(--danger); /* alias */ --text-danger: var(--color-error); /* alias */ --bg-error-subtle: var(--danger-bg); /* alias */ --warning: #b45309; --warning-bg: #fffbeb; --success: #16a34a; --success-bg: #f0fdf4; --accent-success: #22c55e; --accent-success-hover: #16a34a; /* --- Date states (mirrored in core/utils/color-utils.js) --- */ --date-overdue: #dc2626; --date-today: #058527; --date-tomorrow: #ad6200; --date-week: #9333ea; --date-future: #6b7280; /* --- Priority --- Two historical families with DIFFERENT values; both kept verbatim. Numeric family (calendar CSS): p2 is orange-500. Named family (core/constants.js): medium is amber-500. */ --priority-1: #ef4444; --priority-2: #f97316; --priority-3: #3b82f6; --priority-4: #9ca3af; --priority-high: #ef4444; --priority-medium: #f59e0b; --priority-low: #3b82f6; --priority-none: #6b7280; /* --- Elevation / overlay / focus (values = the observed light ladder) --- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15); --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --overlay-scrim: rgba(0, 0, 0, 0.5); --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.1); --focus-ring-sm: 0 0 0 2px rgba(59, 130, 246, 0.1); --focus-ring-md: 0 0 0 2px rgba(59, 130, 246, 0.15); --focus-ring-strong: 0 0 0 2px rgba(59, 130, 246, 0.2); --danger-glow: 0 0 4px rgba(239, 68, 68, 0.4); --accent-glow: 0 2px 8px rgba(59, 130, 246, 0.2); --selection-inset: inset 0 0 0 1px rgba(47, 126, 247, 0.14); --accent-tint-5: rgba(59, 130, 246, 0.05); --accent-tint-8: rgba(59, 130, 246, 0.08); --accent-tint-10: rgba(59, 130, 246, 0.1); --accent-tint-15: rgba(59, 130, 246, 0.15); --brand-tint: rgba(220, 76, 62, 0.2); --hover-veil: rgba(0, 0, 0, 0.04); --hover-veil-strong: rgba(0, 0, 0, 0.06); --header-glass: rgba(255, 255, 255, 0.98); --border-glass: rgba(229, 231, 235, 0.8); /* --- Extended text scale (exact historical values) --- */ --text-strong: #111827; /* gray-900 headings */ --text-body: #374151; /* gray-700 body copy */ --text-heading: #202020; /* custom near-black headings */ --text-max: #000000; /* --- Extended surface scale (exact historical values) --- */ --bg-faint: #fafafa; --bg-faint-alt: #f9f9f9; --bg-muted: #f5f5f5; --bg-wash: #f8f9fa; --bg-slate: #f8fafc; --bg-slate-alt: #fafbfc; --bg-slate-100: #f1f5f9; --bg-ghost: #f7f7f8; --bg-gray-hard: #f0f0f0; --bg-slate-50: #f7fafc; --bg-slate-300: #cbd5e1; --bg-strong: #d1d5db; /* gray-300 surfaces (toggles, thumbs) */ --bg-handle: #9ca3af; /* gray-400 handles/scrollbars */ --bg-badge-gray: #6b7280; /* gray-500 badges */ /* --- Extended border scale (exact historical values) --- */ --border-faint: #f3f4f6; --border-hairline: #f0f0f0; --border-soft: #e0e0e0; --border-slate: #e2e8f0; --border-mist: #e9ecef; --border-e8: #e8e8e8; --accent-border: #93c5fd; /* blue-300 */ --accent-border-soft: #bfdbfe; /* blue-200 */ /* --- Extended semantic tints (exact historical values) --- */ --danger-bg-strong: #fee2e2; /* red-100 */ --danger-bg-soft: #fff5f5; --danger-tint: #ffe5e5; --danger-border-soft: #fca5a5; /* red-300 */ --danger-border-softer: #fecaca; /* red-200 */ --danger-deep: #991b1b; /* red-800 */ --warning-bg-strong: #fef3c7; /* amber-100 */ --success-bg-strong: #dcfce7; /* green-100 */ --success-bright: #10b981; /* emerald-500 */ --success-alt: #059669; /* emerald-600 */ --amber: #d97706; /* amber-600 */ --amber-deep: #92400e; /* amber-800 */ --orange: #ea580c; /* orange-600 */ --orange-alt: #eb8909; --orange-bg: #ffedd5; /* orange-100 */ --accent-deep: #1e40af; /* blue-800 */ --accent-purple: #7c3aed; /* violet-600 */ --purple-bg: #faf5ff; /* purple-50 */ --violet-bg: #f5f3ff; /* violet-50 */ --indigo: #4f46e5; /* indigo-600 */ --brand-soft: #ff6b6b; /* --- Legacy shorthand grays (exact; candidates for later cleanup) --- */ --legacy-333: #333; --legacy-555: #555; --legacy-666: #666; --legacy-888: #888; --legacy-ccc: #ccc; --legacy-ddd: #ddd; --legacy-999: #999; --legacy-808080: #808080; --bg-cream: #fcfaf8; /* --- Legacy slate text scale (exact historical values) --- */ --slate-400: #a0aec0; --slate-500: #64748b; --slate-550: #718096; --slate-700: #2d3748; --slate-800: #1e293b; /* --- Misc legacy aliases --- */ --color-bg-primary: var(--bg-primary); } /* ============================================================ 2. DARK THEME (Todoist-style warm charcoal) All text tokens hit WCAG AA on #1e1e1e. :root[data-theme="dark"] (0,2,0) so these definitions beat the plain :root component-token blocks in foundation/_variables.css, which load AFTER this file in the styles.css import order. ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; /* --- Surfaces --- */ --bg-primary: #1e1e1e; --bg-secondary: #282828; --bg-tertiary: #2e2e2e; --bg-elevated: #2a2a2a; --bg-hover: #2c2c2c; --bg-active: #353535; --bg-selected: #26334d; --bg-inverse: #333333; /* --- Text --- */ --text-primary: #e8e8e8; /* 13.6:1 */ --text-secondary: #b0b0b0; /* ~7.5:1 */ --text-tertiary: #a3a3a3; /* 6.6:1 */ --text-muted: #8a8a8a; /* 4.8:1 */ --text-disabled: #5a5a5a; --text-inverse: #e8e8e8; --text-on-accent: #ffffff; /* --- Borders --- */ --border-light: #333333; --border-default: #3d3d3d; --border-strong: #4d4d4d; --border-focus: #60a5fa; /* --- Accent + Brand --- */ --accent-primary: #60a5fa; /* 6.6:1 */ --accent-hover: #3b82f6; --accent-light: #243a5e; --brand: #ff7066; /* 6.2:1 */ /* --- Semantic --- */ --danger: #f87171; /* 6.0:1 */ --danger-bg: #3a2626; --color-error: #f87171; --warning: #fbbf24; --warning-bg: #3a3220; --success: #4ade80; --success-bg: #1f3328; --accent-success: #4ade80; --accent-success-hover: #22c55e; /* --- Date states --- */ --date-overdue: #f87171; /* 6.0:1 */ --date-today: #5bbf74; /* ~7.5:1 */ --date-tomorrow: #e09b3d; /* 7.1:1 */ --date-week: #c084fc; /* 6.3:1 */ --date-future: #a3a3a3; /* 6.6:1 */ /* --- Priority --- */ --priority-1: #f87171; --priority-2: #fb923c; --priority-3: #60a5fa; --priority-4: #8a8a8a; --priority-high: #f87171; --priority-medium: #fbbf24; --priority-low: #60a5fa; --priority-none: #a3a3a3; /* --- Elevation / overlay / focus --- Shadows read poorly on dark; the hairline white ring does the real elevation work (precedent: _calendar-view.css dark popup blocks). */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.07); --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08); --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.1); --overlay-scrim: rgba(0, 0, 0, 0.65); --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.25); --focus-ring-sm: 0 0 0 2px rgba(96, 165, 250, 0.25); --focus-ring-md: 0 0 0 2px rgba(96, 165, 250, 0.3); --focus-ring-strong: 0 0 0 2px rgba(96, 165, 250, 0.35); --danger-glow: 0 0 4px rgba(248, 113, 113, 0.5); --accent-glow: 0 2px 8px rgba(96, 165, 250, 0.3); --selection-inset: inset 0 0 0 1px rgba(96, 165, 250, 0.3); --accent-tint-5: rgba(96, 165, 250, 0.08); --accent-tint-8: rgba(96, 165, 250, 0.12); --accent-tint-10: rgba(96, 165, 250, 0.15); --accent-tint-15: rgba(96, 165, 250, 0.18); --brand-tint: rgba(255, 112, 102, 0.25); --hover-veil: rgba(255, 255, 255, 0.05); --hover-veil-strong: rgba(255, 255, 255, 0.07); --header-glass: rgba(30, 30, 30, 0.98); --border-glass: rgba(61, 61, 61, 0.8); /* --- Extended text scale --- */ --text-strong: #f2f2f2; --text-body: #cfcfcf; --text-heading: #f0f0f0; --text-max: #ffffff; /* --- Extended surface scale --- */ --bg-faint: #262626; --bg-faint-alt: #262626; --bg-muted: #292929; --bg-wash: #272727; --bg-slate: #252525; --bg-slate-alt: #252525; --bg-slate-100: #2d2d2d; --bg-ghost: #272727; --bg-gray-hard: #2f2f2f; --bg-slate-50: #252525; --bg-slate-300: #454545; --bg-strong: #4d4d4d; --bg-handle: #5a5a5a; --bg-badge-gray: #4a4a4a; /* --- Extended border scale --- */ --border-faint: #2e2e2e; --border-hairline: #303030; --border-soft: #383838; --border-slate: #363636; --border-mist: #343434; --border-e8: #3a3a3a; --accent-border: #3b5a80; --accent-border-soft: #2f4a6e; /* --- Extended semantic tints --- */ --danger-bg-strong: #4a2b2b; --danger-bg-soft: #382424; --danger-tint: #3f2828; --danger-border-soft: #7f3535; --danger-border-softer: #5c3030; --danger-deep: #fca5a5; --warning-bg-strong: #453a1e; --success-bg-strong: #234534; --success-bright: #34d399; --success-alt: #34d399; --amber: #fbbf24; --amber-deep: #fcd34d; --orange: #fb923c; --orange-alt: #ffa94d; --orange-bg: #3a2f20; --accent-deep: #93c5fd; --accent-purple: #a78bfa; --purple-bg: #322640; --violet-bg: #2e2a40; --indigo: #818cf8; --brand-soft: #ff8a80; /* --- Legacy shorthand grays --- */ --legacy-333: #d4d4d4; --legacy-555: #b8b8b8; --legacy-666: #a8a8a8; --legacy-888: #8f8f8f; --legacy-ccc: #444444; --legacy-ddd: #3f3f3f; --legacy-999: #8f8f8f; --legacy-808080: #909090; --bg-cream: #252321; /* --- Legacy slate text scale --- */ --slate-400: #8f97a3; --slate-500: #a3aab8; --slate-550: #9aa3b2; --slate-700: #d5dbe3; --slate-800: #e2e8f0; /* --- Dropdown component tokens (light values live in foundation/_variables.css and stay untouched) --- */ --dropdown-border-color: var(--border-default); --dropdown-bg: var(--bg-elevated); --dropdown-shadow: var(--shadow-md); --dropdown-accent-color: var(--brand); --dropdown-item-color: var(--text-primary); --dropdown-item-hover-bg: var(--bg-hover); --dropdown-item-focus-bg: var(--bg-selected); --dropdown-item-focus-border: var(--border-focus); --dropdown-item-selected-bg: var(--bg-selected); --dropdown-search-bg: var(--bg-tertiary); --dropdown-search-border: var(--border-light); --dropdown-search-focus-border: var(--border-focus); --dropdown-section-border: var(--border-light); --dropdown-header-bg: var(--bg-secondary); } /* ============================================================ 3. TAILWIND DARK OVERRIDES Templates author light-mode Tailwind utilities directly (bg-white, text-gray-900, ...). Rather than adding dark: twins across ~1,000 call sites (and rebuilding the committed tailwind.css), we remap the utilities actually in use. [data-theme="dark"] .util = specificity (0,2,0), which beats tailwind's single-class (0,1,0) regardless of load order. MAINTENANCE: new gray/white/blue/red utility used in a template needs a matching line here (or use a tokened class). ============================================================ */ /* --- Surfaces --- */ [data-theme="dark"] .bg-white { background-color: var(--bg-primary); } [data-theme="dark"] .bg-gray-50 { background-color: var(--bg-secondary); } [data-theme="dark"] .bg-gray-100 { background-color: var(--bg-tertiary); } [data-theme="dark"] .bg-gray-200 { background-color: var(--bg-active); } [data-theme="dark"] .bg-blue-50 { background-color: var(--bg-selected); } [data-theme="dark"] .bg-blue-100 { background-color: var(--accent-light); } [data-theme="dark"] .bg-red-50 { background-color: var(--danger-bg); } [data-theme="dark"] .bg-yellow-50 { background-color: var(--warning-bg); } [data-theme="dark"] .bg-amber-50 { background-color: var(--warning-bg); } [data-theme="dark"] .border-amber-200 { border-color: var(--warning-bg); } [data-theme="dark"] .text-amber-600 { color: var(--warning); } [data-theme="dark"] .text-amber-800 { color: var(--warning); } [data-theme="dark"] .bg-blue-200 { background-color: var(--accent-light); } [data-theme="dark"] .bg-green-50 { background-color: var(--success-bg); } /* --- Text --- */ [data-theme="dark"] .text-gray-900 { color: var(--text-primary); } [data-theme="dark"] .text-gray-800 { color: var(--text-primary); } [data-theme="dark"] .text-gray-700 { color: var(--text-secondary); } [data-theme="dark"] .text-gray-600 { color: var(--text-secondary); } [data-theme="dark"] .text-gray-500 { color: var(--text-tertiary); } [data-theme="dark"] .text-gray-400 { color: var(--text-muted); } [data-theme="dark"] .text-gray-300 { color: #6e6e6e; } [data-theme="dark"] .text-blue-500 { color: var(--accent-primary); } [data-theme="dark"] .text-blue-600 { color: var(--accent-primary); } [data-theme="dark"] .text-blue-700 { color: var(--accent-primary); } [data-theme="dark"] .text-blue-800 { color: var(--accent-primary); } [data-theme="dark"] .text-red-500 { color: var(--color-error); } [data-theme="dark"] .text-red-600 { color: var(--danger); } [data-theme="dark"] .text-red-700 { color: var(--danger); } [data-theme="dark"] .text-green-600 { color: var(--success); } [data-theme="dark"] .text-yellow-600 { color: var(--warning); } /* .text-white deliberately NOT overridden (text on solid accent buttons) */ /* --- Borders --- */ [data-theme="dark"] .border-gray-100 { border-color: var(--border-light); } [data-theme="dark"] .border-gray-200 { border-color: var(--border-light); } [data-theme="dark"] .border-gray-300 { border-color: var(--border-default); } [data-theme="dark"] .border-blue-200 { border-color: var(--accent-light); } [data-theme="dark"] .border-red-200 { border-color: var(--danger-bg); } [data-theme="dark"] .border-yellow-200 { border-color: var(--warning-bg); } [data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-light); } /* --- Hover variants --- */ [data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--bg-hover); } [data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--bg-hover); } [data-theme="dark"] .hover\:bg-gray-200:hover { background-color: var(--bg-active); } [data-theme="dark"] .hover\:bg-gray-300:hover { background-color: var(--bg-active); } [data-theme="dark"] .hover\:bg-blue-50:hover { background-color: var(--bg-selected); } [data-theme="dark"] .hover\:bg-red-50:hover { background-color: var(--danger-bg); } [data-theme="dark"] .hover\:text-gray-600:hover { color: var(--text-secondary); } [data-theme="dark"] .hover\:text-gray-700:hover { color: var(--text-secondary); } [data-theme="dark"] .hover\:text-gray-800:hover { color: var(--text-primary); } [data-theme="dark"] .hover\:text-gray-900:hover { color: var(--text-primary); } [data-theme="dark"] .hover\:text-blue-600:hover { color: var(--accent-hover); } [data-theme="dark"] .hover\:text-blue-700:hover { color: var(--accent-hover); } [data-theme="dark"] .hover\:text-red-600:hover { color: var(--danger); } [data-theme="dark"] .hover\:text-red-700:hover { color: var(--danger); } [data-theme="dark"] .hover\:border-gray-300:hover { border-color: var(--border-default); } [data-theme="dark"] .hover\:border-gray-400:hover { border-color: var(--border-strong); } /* solid button utilities (.bg-blue-600 + hover:bg-blue-700, .bg-red-500...) deliberately NOT overridden — solid accent buttons read fine on dark */ /* --- Focus variants --- */ [data-theme="dark"] .focus\:ring-blue-500:focus { --tw-ring-color: var(--border-focus); } [data-theme="dark"] .focus\:border-blue-500:focus { border-color: var(--border-focus); } /* --- Overlay scrims (all bg-black+bg-opacity-50 uses are modal scrims) --- */ [data-theme="dark"] .bg-opacity-50 { --tw-bg-opacity: 0.65; } /* --- Placeholder --- */ [data-theme="dark"] .placeholder-gray-400::placeholder { color: var(--text-muted); } [data-theme="dark"] .placeholder-gray-500::placeholder { color: var(--text-muted); } /* --- Badge tints (bg-*-100 + text-*-800 pairs) --- */ [data-theme="dark"] .bg-gray-300 { background-color: var(--bg-active); } [data-theme="dark"] .bg-purple-50 { background-color: #322640; } [data-theme="dark"] .bg-purple-100 { background-color: #3a2a4d; } [data-theme="dark"] .bg-green-100 { background-color: var(--success-bg); } [data-theme="dark"] .bg-yellow-100 { background-color: var(--warning-bg); } [data-theme="dark"] .bg-yellow-200 { background-color: var(--warning-bg); } [data-theme="dark"] .bg-orange-50 { background-color: #3a2f20; } [data-theme="dark"] .bg-orange-100 { background-color: #3a2f20; } [data-theme="dark"] .text-purple-600 { color: var(--date-week); } [data-theme="dark"] .text-purple-800 { color: #c084fc; } [data-theme="dark"] .text-green-700 { color: var(--success); } [data-theme="dark"] .text-green-800 { color: var(--success); } [data-theme="dark"] .text-green-900 { color: var(--success); } [data-theme="dark"] .text-green-500 { color: var(--success); } [data-theme="dark"] .text-blue-900 { color: var(--accent-primary); } [data-theme="dark"] .text-yellow-700 { color: var(--warning); } [data-theme="dark"] .text-orange-800 { color: #fdba74; } /* --- Remaining borders --- */ [data-theme="dark"] .border-blue-400 { border-color: var(--border-focus); } [data-theme="dark"] .border-blue-500 { border-color: var(--border-focus); } [data-theme="dark"] .border-blue-600 { border-color: var(--accent-primary); } [data-theme="dark"] .border-red-500 { border-color: var(--color-error); } [data-theme="dark"] .border-green-200 { border-color: var(--success-bg); } [data-theme="dark"] .border-orange-200 { border-color: #3a2f20; } [data-theme="dark"] .border-purple-100 { border-color: #3a2a4d; } [data-theme="dark"] .border-purple-200 { border-color: #3a2a4d; } [data-theme="dark"] .border-white { border-color: var(--bg-primary); } [data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-light); } [data-theme="dark"] .divide-yellow-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--warning-bg); } /* --- Remaining hover/focus variants --- */ [data-theme="dark"] .hover\:bg-white:hover { background-color: var(--bg-hover); } [data-theme="dark"] .hover\:bg-yellow-50:hover { background-color: var(--warning-bg); } [data-theme="dark"] .hover\:bg-green-50:hover { background-color: var(--success-bg); } [data-theme="dark"] .hover\:text-blue-500:hover { color: var(--accent-hover); } [data-theme="dark"] .hover\:text-blue-800:hover { color: var(--accent-primary); } [data-theme="dark"] .hover\:text-red-500:hover { color: var(--color-error); } [data-theme="dark"] .hover\:text-green-600:hover { color: var(--success); } [data-theme="dark"] .hover\:border-gray-300:hover { border-color: var(--border-default); } [data-theme="dark"] .hover\:border-blue-300:hover { border-color: var(--accent-light); } [data-theme="dark"] .focus\:ring-blue-300:focus { --tw-ring-color: var(--border-focus); } [data-theme="dark"] .focus\:ring-red-500:focus { --tw-ring-color: var(--color-error); } /* --- Selected color-swatch ring (label/project modals) --- */ [data-theme="dark"] .peer:checked ~ .peer-checked\:border-gray-900 { border-color: var(--text-primary); } [data-theme="dark"] .peer:checked + .peer-checked\:border-gray-900 { border-color: var(--text-primary); } /* --- Dark-chip components (already dark in light mode) --- The multi-select toolbar and toasts are gray-800 chips with light text in BOTH themes. Carve their text out of the utility remaps above, and lift their surface off the dark page background. */ [data-theme="dark"] .multi-select-toolbar, [data-theme="dark"] .toast-notification { background-color: var(--bg-inverse); } [data-theme="dark"] .multi-select-toolbar .text-gray-300, [data-theme="dark"] .toast-notification .text-gray-300 { color: #d1d5db; } [data-theme="dark"] .multi-select-toolbar .text-gray-400, [data-theme="dark"] .toast-notification .text-gray-400 { color: #9ca3af; } /* ============================================================ 5. THEME CONTROL UI (structural helpers) ============================================================ */ /* Quick-toggle item in the sidebar settings dropdown: the sun/moon variants wrap icon + label and must lay out like a dropdown item */ .settings-dropdown-theme-option { display: flex; align-items: center; gap: inherit; } /* ============================================================ 4. AUTH PAGE DARK OVERRIDES Auth templates (login/register) carry embedded light styles; their dark variants live here so light markup stays verbatim. The coral brand panel is identical in both themes. ============================================================ */ [data-theme="dark"] .auth-form-panel { background: linear-gradient(180deg, #232323 0%, #1e1e1e 100%); } [data-theme="dark"] .auth-form-card { background: var(--bg-elevated); box-shadow: var(--shadow-lg); } [data-theme="dark"] .auth-form-title { color: var(--text-primary); } [data-theme="dark"] .auth-form-subtitle { color: var(--text-tertiary); } [data-theme="dark"] .auth-label { color: var(--text-secondary); } [data-theme="dark"] .auth-footer-text { color: var(--text-tertiary); } [data-theme="dark"] .auth-checkbox-label { color: var(--text-secondary); } [data-theme="dark"] .auth-input { background: var(--bg-tertiary); border-color: var(--border-default); color: var(--text-primary); } [data-theme="dark"] .auth-input:hover { border-color: var(--border-strong); } [data-theme="dark"] .auth-input:focus { background: var(--bg-primary); /* brand coral focus border kept from the light styles */ } [data-theme="dark"] .auth-checkbox { border-color: var(--border-strong); }