/* ═══════════════════════════════════════════════════════════════════════════ THEME COLOUR PRESETS — Override colours.css defaults per user preference ═══════════════════════════════════════════════════════════════════════════ Applied via [data-theme-colour] attribute on . "orange" = default (no overrides needed, colours.css values apply). Custom hex colours are handled dynamically in JS. Each preset sets only --theme-base. The tint scale (--scale-50 … --scale-900) and derived tokens (--bs-primary, --bs-primary-active, --bs-primary-light) are generated automatically in colours.css via color-mix(). --bs-primary-inverse (button text) is set by JS based on luminance. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Blue ── */ [data-theme-colour="blue"] { --theme-base: #3b82f6; } [data-theme-colour="blue"][data-bs-theme="dark"] { --theme-base: #60a5fa; } /* ── Purple ── */ [data-theme-colour="purple"] { --theme-base: #8b5cf6; } [data-theme-colour="purple"][data-bs-theme="dark"] { --theme-base: #a78bfa; } /* ── Teal ── */ [data-theme-colour="teal"] { --theme-base: #14b8a6; } [data-theme-colour="teal"][data-bs-theme="dark"] { --theme-base: #2dd4bf; } /* ── Rose ── */ [data-theme-colour="rose"] { --theme-base: #f43f5e; } [data-theme-colour="rose"][data-bs-theme="dark"] { --theme-base: #fb7185; } /* ── Lavender ── */ [data-theme-colour="lavender"] { --theme-base: #8EA1F1; } [data-theme-colour="lavender"][data-bs-theme="dark"] { --theme-base: #B0BEF5; } /* ── Apricot ── */ [data-theme-colour="apricot"] { --theme-base: #E6A57E; } [data-theme-colour="apricot"][data-bs-theme="dark"] { --theme-base: #EDB796; } /* ── Grayscale ── Special case: overrides primary AND desaturates success/info/warning. Danger is intentionally NOT desaturated — destructive actions stay red. */ [data-theme-colour="grayscale"] { --theme-base: #71717a; } [data-theme-colour="grayscale"][data-bs-theme="dark"] { --theme-base: #a1a1aa; } [data-theme-colour="grayscale"], [data-theme-colour="grayscale"][data-bs-theme="light"] { --bs-success: #6b7280; --bs-success-rgb: 107, 114, 128; --bs-success-active: #4b5563; --bs-success-light: #f3f4f6; --bs-info: #9ca3af; --bs-info-rgb: 156, 163, 175; --bs-info-active: #6b7280; --bs-info-light: #f9fafb; --bs-warning: #a8a29e; --bs-warning-rgb: 168, 162, 158; --bs-warning-active: #78716c; --bs-warning-light: #fafaf9; } [data-theme-colour="grayscale"][data-bs-theme="dark"] { --bs-success: #71717a; --bs-success-rgb: 113, 113, 122; --bs-success-active: #52525b; --bs-success-light: #27272a; --bs-info: #a1a1aa; --bs-info-rgb: 161, 161, 170; --bs-info-active: #71717a; --bs-info-light: #27272a; --bs-warning: #a8a29e; --bs-warning-rgb: 168, 162, 158; --bs-warning-active: #78716c; --bs-warning-light: #27272a; }