/* ======================================== DYNAMIC THEME SYSTEM Color palettes: Blue, Emerald, Purple, Rose, Amber, Indigo Modes: Light, Dark ======================================== */ /* Theme color definitions - Primary colors from design */ :root, [data-primary="blue"] { --theme-primary: #3b82f6; --theme-primary-hover: #2563eb; --theme-primary-rgb: 59, 130, 246; --theme-primary-light: rgba(59, 130, 246, 0.1); --theme-primary-50: #eff6ff; --theme-primary-100: #dbeafe; } [data-primary="emerald"] { --theme-primary: #10b981; --theme-primary-hover: #059669; --theme-primary-rgb: 16, 185, 129; --theme-primary-light: rgba(16, 185, 129, 0.1); --theme-primary-50: #ecfdf5; --theme-primary-100: #d1fae5; } [data-primary="purple"] { --theme-primary: #8b5cf6; --theme-primary-hover: #7c3aed; --theme-primary-rgb: 139, 92, 246; --theme-primary-light: rgba(139, 92, 246, 0.1); --theme-primary-50: #f5f3ff; --theme-primary-100: #ede9fe; } [data-primary="rose"] { --theme-primary: #f43f5e; --theme-primary-hover: #e11d48; --theme-primary-rgb: 244, 63, 94; --theme-primary-light: rgba(244, 63, 94, 0.1); --theme-primary-50: #fff1f2; --theme-primary-100: #ffe4e6; } [data-primary="amber"] { --theme-primary: #f59e0b; --theme-primary-hover: #d97706; --theme-primary-rgb: 245, 158, 11; --theme-primary-light: rgba(245, 158, 11, 0.1); --theme-primary-50: #fffbeb; --theme-primary-100: #fef3c7; } [data-primary="indigo"] { --theme-primary: #6366f1; --theme-primary-hover: #4f46e5; --theme-primary-rgb: 99, 102, 241; --theme-primary-light: rgba(99, 102, 241, 0.1); --theme-primary-50: #eef2ff; --theme-primary-100: #e0e7ff; } /* Map app design tokens to the active palette (set on ) */ html[data-primary] { --ff-primary: var(--theme-primary); --ff-primary-dark: var(--theme-primary-hover); --ff-primary-light: var(--theme-primary-100); --ff-primary-rgb: var(--theme-primary-rgb); } /* * Palette semantics (matches theme picker: 1° primary, 2° tint/hover, 3° canvas in app.css): * — Hover surfaces use the light tint in light mode; translucent primary on dark canvas in dark mode. */ html[data-theme='light'][data-primary] { --ff-hover-surface: var(--theme-primary-100); } html[data-theme='dark'][data-primary] { --ff-hover-surface: rgb(var(--theme-primary-rgb) / 0.18); } /* Apply primary to sidebar active state */ [data-primary="blue"] .sidebar .nav-link.active, [data-primary="blue"] .sidebar .nav-link:hover { background: var(--theme-primary-light); color: var(--theme-primary); } [data-primary="emerald"] .sidebar .nav-link.active, [data-primary="emerald"] .sidebar .nav-link:hover { background: var(--theme-primary-light); color: var(--theme-primary); } [data-primary="purple"] .sidebar .nav-link.active, [data-primary="purple"] .sidebar .nav-link:hover { background: var(--theme-primary-light); color: var(--theme-primary); } [data-primary="rose"] .sidebar .nav-link.active, [data-primary="rose"] .sidebar .nav-link:hover { background: var(--theme-primary-light); color: var(--theme-primary); } [data-primary="amber"] .sidebar .nav-link.active, [data-primary="amber"] .sidebar .nav-link:hover { background: var(--theme-primary-light); color: var(--theme-primary); } [data-primary="indigo"] .sidebar .nav-link.active, [data-primary="indigo"] .sidebar .nav-link:hover { background: var(--theme-primary-light); color: var(--theme-primary); } /* Primary buttons and links use theme color */ .btn-primary { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; } .btn-primary:hover { background-color: var(--theme-primary-hover) !important; border-color: var(--theme-primary-hover) !important; } .btn-outline-primary { color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; } .btn-outline-primary:hover { background-color: var(--theme-primary-light) !important; color: var(--theme-primary-hover) !important; border-color: var(--theme-primary-hover) !important; } .text-primary { color: var(--theme-primary) !important; } .bg-primary { background-color: var(--theme-primary) !important; } .badge.bg-primary { background-color: var(--theme-primary) !important; } .progress-bar { background-color: var(--theme-primary) !important; } .page-item.active .page-link { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; } /* View toggle active state - use theme primary */ .view-toggle-btn.active, .btn-group .view-toggle-btn.active { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; color: #fff !important; } /* Theme mode buttons active state */ .theme-selector-dropdown .btn-group .btn.active { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; color: #fff !important; } /* Theme selector card styles */ .theme-card { cursor: pointer; transition: all 0.2s ease; border: 2px solid transparent; } .theme-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .theme-card.active { border-color: var(--theme-primary); box-shadow: 0 0 0 1px var(--theme-primary); } /* Smooth view transitions */ [data-view-container] { transition: opacity 0.2s ease; } .theme-swatch { height: 24px; border-radius: 6px; flex: 1; } .theme-swatch-primary { background: var(--theme-primary); } .theme-swatch-muted { background: #64748b; } .theme-swatch-dark { background: #1e293b; } /* Third chip: light mode = white / warm off-white; dark mode = dark surface */ .theme-swatch-third { background: linear-gradient(135deg, #ffffff 50%, #fafaf8 50%); border: 1px solid #e5e7eb; } [data-theme='dark'] .theme-swatch-third { background: #1e293b; border-color: #334155; } /* Rich palette cards (dropdown + admin Appearance) */ .theme-palette-card { position: relative; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; border: 2px solid var(--ff-border, #e5e7eb); background: var(--ff-bg-card, #fff); border-radius: var(--ff-border-radius-lg, 0.75rem); outline: none; } .theme-palette-card:hover { border-color: color-mix(in srgb, var(--theme-primary) 35%, var(--ff-border, #e5e7eb)); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } .theme-palette-card:focus-visible { border-color: var(--theme-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 35%, transparent); } .theme-palette-card.active { border-color: var(--theme-primary); box-shadow: 0 0 0 1px var(--theme-primary); } .theme-palette-card__swatches { display: flex; gap: 4px; margin-bottom: 0.5rem; } .theme-palette-card__radio { position: absolute; top: 0.5rem; right: 0.5rem; width: 1.125rem; height: 1.125rem; border: 2px solid var(--ff-border, #cbd5e1); border-radius: 50%; background: var(--ff-bg-card, #fff); pointer-events: none; } .theme-palette-card.active .theme-palette-card__radio { border-color: var(--theme-primary); background: radial-gradient(circle at center, var(--theme-primary) 45%, transparent 46%); } .theme-palette-card__meta { font-size: 0.7rem; color: var(--ff-text-secondary, #6b7280); } .theme-palette-card__hex-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; display: inline-block; vertical-align: middle; } .theme-palette-card__mode-badge { font-size: 0.65rem; font-weight: 600; } [data-theme='dark'] .theme-palette-card { background: var(--ff-bg-card, #1e293b); border-color: var(--ff-border, #334155); } [data-theme='dark'] .theme-palette-card__meta { color: var(--ff-text-secondary, #94a3b8); } /* Admin settings: highlight selected palette radio */ .theme-palette-admin-label:has(.theme-palette-radio:checked) .theme-palette-card-admin { border-color: #0d6efd; box-shadow: 0 0 0 1px #0d6efd; }