/* ============================================================================= * Theme Overrides — Color Palettes & Typography * Applied via data-color-palette attribute on * The "blue" palette matches the compiled defaults — included for completeness. * * NOTE: We do NOT override .text-primary / .bg-primary / .border-primary here. * Bootstrap's utilities already use rgba(var(--primary-rgb), var(--bg-opacity)) * so updating --primary and --primary-rgb on the root element is enough. * Adding !important hex overrides would break bg-opacity-10 tints (making icon * containers fully opaque) and cause icons to disappear. * ============================================================================= */ /* ── Palette: slate (secondary #247297) ─────────────────────────────────────── */ [data-color-palette="slate"] { --primary: #247297; --primary-rgb: 36, 114, 151; --component-active-bg: #247297; --component-active-bg-rgb: 36, 114, 151; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(36, 114, 151, 0.25); --link-color: #247297; --link-hover-color: #1b5672; --link-rgb-color: 36, 114, 151; } [data-color-palette="slate"] .btn-primary { --btn-bg: #247297; --btn-border-color: #247297; --btn-hover-bg: #206788; --btn-hover-border-color:#206788; --btn-active-bg: #1f6180; --btn-active-border-color:#1f6180; --btn-disabled-bg: #247297; --btn-disabled-border-color:#247297; --btn-focus-shadow-rgb: 69, 135, 167; } [data-color-palette="slate"] .btn-outline-primary { --btn-color: #247297; --btn-border-color: #247297; --btn-hover-bg: #247297; --btn-hover-border-color:#247297; --btn-active-bg: #1f6180; --btn-active-border-color:#247297; --btn-focus-shadow-rgb: 36, 114, 151; --btn-disabled-color: #247297; } /* ── Palette: indigo (#5C6BC0) ──────────────────────────────────────────────── */ [data-color-palette="indigo"] { --primary: #5C6BC0; --primary-rgb: 92, 107, 192; --component-active-bg: #5C6BC0; --component-active-bg-rgb: 92, 107, 192; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(92, 107, 192, 0.25); --link-color: #5C6BC0; --link-hover-color: #4a5ab9; --link-rgb-color: 92, 107, 192; } [data-color-palette="indigo"] .btn-primary { --btn-bg: #5C6BC0; --btn-border-color: #5C6BC0; --btn-hover-bg: #5360ad; --btn-hover-border-color:#5360ad; --btn-active-bg: #4e5ba3; --btn-active-border-color:#4e5ba3; --btn-disabled-bg: #5C6BC0; --btn-disabled-border-color:#5C6BC0; --btn-focus-shadow-rgb: 116, 129, 201; } [data-color-palette="indigo"] .btn-outline-primary { --btn-color: #5C6BC0; --btn-border-color: #5C6BC0; --btn-hover-bg: #5C6BC0; --btn-hover-border-color:#5C6BC0; --btn-active-bg: #4a5ab9; --btn-active-border-color:#5C6BC0; --btn-focus-shadow-rgb: 92, 107, 192; --btn-disabled-color: #5C6BC0; } /* ── Palette: purple (#8e70c1) ──────────────────────────────────────────────── */ [data-color-palette="purple"] { --primary: #8e70c1; --primary-rgb: 142, 112, 193; --component-active-bg: #8e70c1; --component-active-bg-rgb: 142, 112, 193; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(142, 112, 193, 0.25); --link-color: #8e70c1; --link-hover-color: #805eb9; --link-rgb-color: 142, 112, 193; } [data-color-palette="purple"] .btn-primary { --btn-bg: #8e70c1; --btn-border-color: #8e70c1; --btn-hover-bg: #8065ae; --btn-hover-border-color:#8065ae; --btn-active-bg: #795fa4; --btn-active-border-color:#795fa4; --btn-disabled-bg: #8e70c1; --btn-disabled-border-color:#8e70c1; --btn-focus-shadow-rgb: 159, 133, 202; } [data-color-palette="purple"] .btn-outline-primary { --btn-color: #8e70c1; --btn-border-color: #8e70c1; --btn-hover-bg: #8e70c1; --btn-hover-border-color:#8e70c1; --btn-active-bg: #805eb9; --btn-active-border-color:#8e70c1; --btn-focus-shadow-rgb: 142, 112, 193; --btn-disabled-color: #8e70c1; } /* ── Palette: pink (#f35c86) ────────────────────────────────────────────────── */ [data-color-palette="pink"] { --primary: #f35c86; --primary-rgb: 243, 92, 134; --component-active-bg: #f35c86; --component-active-bg-rgb: 243, 92, 134; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(243, 92, 134, 0.25); --link-color: #f35c86; --link-hover-color: #f14474; --link-rgb-color: 243, 92, 134; } [data-color-palette="pink"] .btn-primary { --btn-bg: #f35c86; --btn-border-color: #f35c86; --btn-hover-bg: #db5379; --btn-hover-border-color:#db5379; --btn-active-bg: #cf4e72; --btn-active-border-color:#cf4e72; --btn-disabled-bg: #f35c86; --btn-disabled-border-color:#f35c86; --btn-focus-shadow-rgb: 245, 116, 152; } [data-color-palette="pink"] .btn-outline-primary { --btn-color: #f35c86; --btn-border-color: #f35c86; --btn-hover-bg: #f35c86; --btn-hover-border-color:#f35c86; --btn-active-bg: #f14474; --btn-active-border-color:#f35c86; --btn-focus-shadow-rgb: 243, 92, 134; --btn-disabled-color: #f35c86; } /* ── Palette: red (#EF4444) ─────────────────────────────────────────────────── */ [data-color-palette="red"] { --primary: #EF4444; --primary-rgb: 239, 68, 68; --component-active-bg: #EF4444; --component-active-bg-rgb: 239, 68, 68; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(239, 68, 68, 0.25); --link-color: #EF4444; --link-hover-color: #d73d3d; --link-rgb-color: 239, 68, 68; } [data-color-palette="red"] .btn-primary { --btn-bg: #EF4444; --btn-border-color: #EF4444; --btn-hover-bg: #d73d3d; --btn-hover-border-color:#d73d3d; --btn-active-bg: #cb3a3a; --btn-active-border-color:#cb3a3a; --btn-disabled-bg: #EF4444; --btn-disabled-border-color:#EF4444; --btn-focus-shadow-rgb: 241, 96, 96; } [data-color-palette="red"] .btn-outline-primary { --btn-color: #EF4444; --btn-border-color: #EF4444; --btn-hover-bg: #EF4444; --btn-hover-border-color:#EF4444; --btn-active-bg: #d73d3d; --btn-active-border-color:#EF4444; --btn-focus-shadow-rgb: 239, 68, 68; --btn-disabled-color: #EF4444; } /* ── Palette: orange (#f58646) ──────────────────────────────────────────────── */ [data-color-palette="orange"] { --primary: #f58646; --primary-rgb: 245, 134, 70; --component-active-bg: #f58646; --component-active-bg-rgb: 245, 134, 70; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(245, 134, 70, 0.25); --link-color: #f58646; --link-hover-color: #dd793f; --link-rgb-color: 245, 134, 70; } [data-color-palette="orange"] .btn-primary { --btn-bg: #f58646; --btn-border-color: #f58646; --btn-hover-bg: #dd793f; --btn-hover-border-color:#dd793f; --btn-active-bg: #d0723c; --btn-active-border-color:#d0723c; --btn-disabled-bg: #f58646; --btn-disabled-border-color:#f58646; --btn-focus-shadow-rgb: 247, 152, 98; } [data-color-palette="orange"] .btn-outline-primary { --btn-color: #f58646; --btn-border-color: #f58646; --btn-hover-bg: #f58646; --btn-hover-border-color:#f58646; --btn-active-bg: #dd793f; --btn-active-border-color:#f58646; --btn-focus-shadow-rgb: 245, 134, 70; --btn-disabled-color: #f58646; } /* ── Palette: yellow (#ffd648) ──────────────────────────────────────────────── */ [data-color-palette="yellow"] { --primary: #ffd648; --primary-rgb: 255, 214, 72; --component-active-bg: #ffd648; --component-active-bg-rgb: 255, 214, 72; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(255, 214, 72, 0.25); --link-color: #d4a800; --link-hover-color: #b08d00; --link-rgb-color: 255, 214, 72; } [data-color-palette="yellow"] .btn-primary { --btn-color: #000; --btn-bg: #ffd648; --btn-border-color: #ffd648; --btn-hover-color: #000; --btn-hover-bg: #f9d146; --btn-hover-border-color:#f9d146; --btn-active-color: #000; --btn-active-bg: #f2cb44; --btn-active-border-color:#f9d146; --btn-disabled-color: #000; --btn-disabled-bg: #ffd648; --btn-disabled-border-color:#ffd648; --btn-focus-shadow-rgb: 217, 182, 61; } [data-color-palette="yellow"] .btn-outline-primary { --btn-color: #b08d00; --btn-border-color: #ffd648; --btn-hover-color: #000; --btn-hover-bg: #ffd648; --btn-hover-border-color:#ffd648; --btn-active-bg: #f2cb44; --btn-active-border-color:#ffd648; --btn-focus-shadow-rgb: 255, 214, 72; --btn-disabled-color: #b08d00; } /* ── Palette: green (#059669) ───────────────────────────────────────────────── */ [data-color-palette="green"] { --primary: #059669; --primary-rgb: 5, 150, 105; --component-active-bg: #059669; --component-active-bg-rgb: 5, 150, 105; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(5, 150, 105, 0.25); --link-color: #059669; --link-hover-color: #04785a; --link-rgb-color: 5, 150, 105; } [data-color-palette="green"] .btn-primary { --btn-bg: #059669; --btn-border-color: #059669; --btn-hover-bg: #05875f; --btn-hover-border-color:#05875f; --btn-active-bg: #048059; --btn-active-border-color:#048059; --btn-disabled-bg: #059669; --btn-disabled-border-color:#059669; --btn-focus-shadow-rgb: 43, 166, 128; } [data-color-palette="green"] .btn-outline-primary { --btn-color: #059669; --btn-border-color: #059669; --btn-hover-bg: #059669; --btn-hover-border-color:#059669; --btn-active-bg: #048059; --btn-active-border-color:#059669; --btn-focus-shadow-rgb: 5, 150, 105; --btn-disabled-color: #059669; } /* ── Palette: teal (#26A69A) ────────────────────────────────────────────────── */ [data-color-palette="teal"] { --primary: #26A69A; --primary-rgb: 38, 166, 154; --component-active-bg: #26A69A; --component-active-bg-rgb: 38, 166, 154; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(38, 166, 154, 0.25); --link-color: #26A69A; --link-hover-color: #208d83; --link-rgb-color: 38, 166, 154; } [data-color-palette="teal"] .btn-primary { --btn-bg: #26A69A; --btn-border-color: #26A69A; --btn-hover-bg: #22958b; --btn-hover-border-color:#22958b; --btn-active-bg: #208d83; --btn-active-border-color:#208d83; --btn-disabled-bg: #26A69A; --btn-disabled-border-color:#26A69A; --btn-focus-shadow-rgb: 71, 179, 169; } [data-color-palette="teal"] .btn-outline-primary { --btn-color: #26A69A; --btn-border-color: #26A69A; --btn-hover-bg: #26A69A; --btn-hover-border-color:#26A69A; --btn-active-bg: #208d83; --btn-active-border-color:#26A69A; --btn-focus-shadow-rgb: 38, 166, 154; --btn-disabled-color: #26A69A; } /* ── Palette: violet (#7C3AED) ──────────────────────────────────────────────── */ [data-color-palette="violet"] { --primary: #7C3AED; --primary-rgb: 124, 58, 237; --component-active-bg: #7C3AED; --component-active-bg-rgb: 124, 58, 237; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(124, 58, 237, 0.25); --link-color: #7C3AED; --link-hover-color: #6d28d9; --link-rgb-color: 124, 58, 237; } [data-color-palette="violet"] .btn-primary { --btn-bg: #7C3AED; --btn-border-color: #7C3AED; --btn-hover-bg: #6d28d9; --btn-hover-border-color:#6d28d9; --btn-active-bg: #5b21b6; --btn-active-border-color:#5b21b6; --btn-disabled-bg: #7C3AED; --btn-disabled-border-color:#7C3AED; --btn-focus-shadow-rgb: 142, 97, 241; } [data-color-palette="violet"] .btn-outline-primary { --btn-color: #7C3AED; --btn-border-color: #7C3AED; --btn-hover-bg: #7C3AED; --btn-hover-border-color:#7C3AED; --btn-active-bg: #6d28d9; --btn-active-border-color:#7C3AED; --btn-focus-shadow-rgb: 124, 58, 237; --btn-disabled-color: #7C3AED; } /* ── Palette: rose (#F43F5E) ────────────────────────────────────────────────── */ [data-color-palette="rose"] { --primary: #F43F5E; --primary-rgb: 244, 63, 94; --component-active-bg: #F43F5E; --component-active-bg-rgb: 244, 63, 94; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(244, 63, 94, 0.25); --link-color: #F43F5E; --link-hover-color: #e11d48; --link-rgb-color: 244, 63, 94; } [data-color-palette="rose"] .btn-primary { --btn-bg: #F43F5E; --btn-border-color: #F43F5E; --btn-hover-bg: #e11d48; --btn-hover-border-color:#e11d48; --btn-active-bg: #be123c; --btn-active-border-color:#be123c; --btn-disabled-bg: #F43F5E; --btn-disabled-border-color:#F43F5E; --btn-focus-shadow-rgb: 246, 92, 118; } [data-color-palette="rose"] .btn-outline-primary { --btn-color: #F43F5E; --btn-border-color: #F43F5E; --btn-hover-bg: #F43F5E; --btn-hover-border-color:#F43F5E; --btn-active-bg: #e11d48; --btn-active-border-color:#F43F5E; --btn-focus-shadow-rgb: 244, 63, 94; --btn-disabled-color: #F43F5E; } /* ── Palette: amber (#F59E0B) ───────────────────────────────────────────────── */ [data-color-palette="amber"] { --primary: #F59E0B; --primary-rgb: 245, 158, 11; --component-active-bg: #F59E0B; --component-active-bg-rgb: 245, 158, 11; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(245, 158, 11, 0.25); --link-color: #F59E0B; --link-hover-color: #d97706; --link-rgb-color: 245, 158, 11; } [data-color-palette="amber"] .btn-primary { --btn-bg: #F59E0B; --btn-border-color: #F59E0B; --btn-hover-bg: #d97706; --btn-hover-border-color:#d97706; --btn-active-bg: #b45309; --btn-active-border-color:#b45309; --btn-disabled-bg: #F59E0B; --btn-disabled-border-color:#F59E0B; --btn-focus-shadow-rgb: 247, 177, 60; } [data-color-palette="amber"] .btn-outline-primary { --btn-color: #F59E0B; --btn-border-color: #F59E0B; --btn-hover-bg: #F59E0B; --btn-hover-border-color:#F59E0B; --btn-active-bg: #d97706; --btn-active-border-color:#F59E0B; --btn-focus-shadow-rgb: 245, 158, 11; --btn-disabled-color: #F59E0B; } /* ── Palette: emerald (#10B981) ─────────────────────────────────────────────── */ [data-color-palette="emerald"] { --primary: #10B981; --primary-rgb: 16, 185, 129; --component-active-bg: #10B981; --component-active-bg-rgb: 16, 185, 129; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(16, 185, 129, 0.25); --link-color: #10B981; --link-hover-color: #059669; --link-rgb-color: 16, 185, 129; } [data-color-palette="emerald"] .btn-primary { --btn-bg: #10B981; --btn-border-color: #10B981; --btn-hover-bg: #059669; --btn-hover-border-color:#059669; --btn-active-bg: #047857; --btn-active-border-color:#047857; --btn-disabled-bg: #10B981; --btn-disabled-border-color:#10B981; --btn-focus-shadow-rgb: 63, 198, 154; } [data-color-palette="emerald"] .btn-outline-primary { --btn-color: #10B981; --btn-border-color: #10B981; --btn-hover-bg: #10B981; --btn-hover-border-color:#10B981; --btn-active-bg: #059669; --btn-active-border-color:#10B981; --btn-focus-shadow-rgb: 16, 185, 129; --btn-disabled-color: #10B981; } /* ── Palette: sky (#0EA5E9) ─────────────────────────────────────────────────── */ [data-color-palette="sky"] { --primary: #0EA5E9; --primary-rgb: 14, 165, 233; --component-active-bg: #0EA5E9; --component-active-bg-rgb: 14, 165, 233; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(14, 165, 233, 0.25); --link-color: #0EA5E9; --link-hover-color: #0284c7; --link-rgb-color: 14, 165, 233; } [data-color-palette="sky"] .btn-primary { --btn-bg: #0EA5E9; --btn-border-color: #0EA5E9; --btn-hover-bg: #0284c7; --btn-hover-border-color:#0284c7; --btn-active-bg: #0369a1; --btn-active-border-color:#0369a1; --btn-disabled-bg: #0EA5E9; --btn-disabled-border-color:#0EA5E9; --btn-focus-shadow-rgb: 61, 182, 237; } [data-color-palette="sky"] .btn-outline-primary { --btn-color: #0EA5E9; --btn-border-color: #0EA5E9; --btn-hover-bg: #0EA5E9; --btn-hover-border-color:#0EA5E9; --btn-active-bg: #0284c7; --btn-active-border-color:#0EA5E9; --btn-focus-shadow-rgb: 14, 165, 233; --btn-disabled-color: #0EA5E9; } /* ── Palette: graphite (#374151) ────────────────────────────────────────────── */ [data-color-palette="graphite"] { --primary: #374151; --primary-rgb: 55, 65, 81; --component-active-bg: #374151; --component-active-bg-rgb: 55, 65, 81; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(55, 65, 81, 0.25); --link-color: #374151; --link-hover-color: #1f2937; --link-rgb-color: 55, 65, 81; } [data-color-palette="graphite"] .btn-primary { --btn-bg: #374151; --btn-border-color: #374151; --btn-hover-bg: #1f2937; --btn-hover-border-color:#1f2937; --btn-active-bg: #111827; --btn-active-border-color:#111827; --btn-disabled-bg: #374151; --btn-disabled-border-color:#374151; --btn-focus-shadow-rgb: 96, 103, 117; } [data-color-palette="graphite"] .btn-outline-primary { --btn-color: #374151; --btn-border-color: #374151; --btn-hover-bg: #374151; --btn-hover-border-color:#374151; --btn-active-bg: #1f2937; --btn-active-border-color:#374151; --btn-focus-shadow-rgb: 55, 65, 81; --btn-disabled-color: #374151; } /* ── Palette: zinc (#52525B) ────────────────────────────────────────────────── */ [data-color-palette="zinc"] { --primary: #52525B; --primary-rgb: 82, 82, 91; --component-active-bg: #52525B; --component-active-bg-rgb: 82, 82, 91; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(82, 82, 91, 0.25); --link-color: #52525B; --link-hover-color: #3f3f46; --link-rgb-color: 82, 82, 91; } [data-color-palette="zinc"] .btn-primary { --btn-bg: #52525B; --btn-border-color: #52525B; --btn-hover-bg: #3f3f46; --btn-hover-border-color:#3f3f46; --btn-active-bg: #27272a; --btn-active-border-color:#27272a; --btn-disabled-bg: #52525B; --btn-disabled-border-color:#52525B; --btn-focus-shadow-rgb: 106, 106, 114; } [data-color-palette="zinc"] .btn-outline-primary { --btn-color: #52525B; --btn-border-color: #52525B; --btn-hover-bg: #52525B; --btn-hover-border-color:#52525B; --btn-active-bg: #3f3f46; --btn-active-border-color:#52525B; --btn-focus-shadow-rgb: 82, 82, 91; --btn-disabled-color: #52525B; } /* ── Palette: stone (#78716C) ───────────────────────────────────────────────── */ [data-color-palette="stone"] { --primary: #78716C; --primary-rgb: 120, 113, 108; --component-active-bg: #78716C; --component-active-bg-rgb: 120, 113, 108; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(120, 113, 108, 0.25); --link-color: #78716C; --link-hover-color: #57534e; --link-rgb-color: 120, 113, 108; } [data-color-palette="stone"] .btn-primary { --btn-bg: #78716C; --btn-border-color: #78716C; --btn-hover-bg: #57534e; --btn-hover-border-color:#57534e; --btn-active-bg: #44403c; --btn-active-border-color:#44403c; --btn-disabled-bg: #78716C; --btn-disabled-border-color:#78716C; --btn-focus-shadow-rgb: 147, 141, 136; } [data-color-palette="stone"] .btn-outline-primary { --btn-color: #78716C; --btn-border-color: #78716C; --btn-hover-bg: #78716C; --btn-hover-border-color:#78716C; --btn-active-bg: #57534e; --btn-active-border-color:#78716C; --btn-focus-shadow-rgb: 120, 113, 108; --btn-disabled-color: #78716C; } /* ── Palette: lavender (#A78BFA) ────────────────────────────────────────────── */ [data-color-palette="lavender"] { --primary: #A78BFA; --primary-rgb: 167, 139, 250; --component-active-bg: #A78BFA; --component-active-bg-rgb: 167, 139, 250; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(167, 139, 250, 0.25); --link-color: #A78BFA; --link-hover-color: #8B5CF6; --link-rgb-color: 167, 139, 250; } [data-color-palette="lavender"] .btn-primary { --btn-bg: #A78BFA; --btn-border-color: #A78BFA; --btn-hover-bg: #8B5CF6; --btn-hover-border-color:#8B5CF6; --btn-active-bg: #7C3AED; --btn-active-border-color:#7C3AED; --btn-disabled-bg: #A78BFA; --btn-disabled-border-color:#A78BFA; --btn-focus-shadow-rgb: 182, 161, 251; } [data-color-palette="lavender"] .btn-outline-primary { --btn-color: #A78BFA; --btn-border-color: #A78BFA; --btn-hover-bg: #A78BFA; --btn-hover-border-color:#A78BFA; --btn-active-bg: #8B5CF6; --btn-active-border-color:#A78BFA; --btn-focus-shadow-rgb: 167, 139, 250; --btn-disabled-color: #A78BFA; } /* ── Palette: periwinkle (#8B9CF7) ──────────────────────────────────────────── */ [data-color-palette="periwinkle"] { --primary: #8B9CF7; --primary-rgb: 139, 156, 247; --component-active-bg: #8B9CF7; --component-active-bg-rgb: 139, 156, 247; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(139, 156, 247, 0.25); --link-color: #8B9CF7; --link-hover-color: #6D83F2; --link-rgb-color: 139, 156, 247; } [data-color-palette="periwinkle"] .btn-primary { --btn-bg: #8B9CF7; --btn-border-color: #8B9CF7; --btn-hover-bg: #6D83F2; --btn-hover-border-color:#6D83F2; --btn-active-bg: #5C6BC0; --btn-active-border-color:#5C6BC0; --btn-disabled-bg: #8B9CF7; --btn-disabled-border-color:#8B9CF7; --btn-focus-shadow-rgb: 162, 175, 249; } [data-color-palette="periwinkle"] .btn-outline-primary { --btn-color: #8B9CF7; --btn-border-color: #8B9CF7; --btn-hover-bg: #8B9CF7; --btn-hover-border-color:#8B9CF7; --btn-active-bg: #6D83F2; --btn-active-border-color:#8B9CF7; --btn-focus-shadow-rgb: 139, 156, 247; --btn-disabled-color: #8B9CF7; } /* ── Palette: fuchsia (#D946EF) ─────────────────────────────────────────────── */ [data-color-palette="fuchsia"] { --primary: #D946EF; --primary-rgb: 217, 70, 239; --component-active-bg: #D946EF; --component-active-bg-rgb: 217, 70, 239; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(217, 70, 239, 0.25); --link-color: #D946EF; --link-hover-color: #C026D3; --link-rgb-color: 217, 70, 239; } [data-color-palette="fuchsia"] .btn-primary { --btn-bg: #D946EF; --btn-border-color: #D946EF; --btn-hover-bg: #C026D3; --btn-hover-border-color:#C026D3; --btn-active-bg: #A21CAF; --btn-active-border-color:#A21CAF; --btn-disabled-bg: #D946EF; --btn-disabled-border-color:#D946EF; --btn-focus-shadow-rgb: 225, 101, 242; } [data-color-palette="fuchsia"] .btn-outline-primary { --btn-color: #D946EF; --btn-border-color: #D946EF; --btn-hover-bg: #D946EF; --btn-hover-border-color:#D946EF; --btn-active-bg: #C026D3; --btn-active-border-color:#D946EF; --btn-focus-shadow-rgb: 217, 70, 239; --btn-disabled-color: #D946EF; } /* ── Palette: magenta (#C026D3) ─────────────────────────────────────────────── */ [data-color-palette="magenta"] { --primary: #C026D3; --primary-rgb: 192, 38, 211; --component-active-bg: #C026D3; --component-active-bg-rgb: 192, 38, 211; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(192, 38, 211, 0.25); --link-color: #C026D3; --link-hover-color: #A21CAF; --link-rgb-color: 192, 38, 211; } [data-color-palette="magenta"] .btn-primary { --btn-bg: #C026D3; --btn-border-color: #C026D3; --btn-hover-bg: #A21CAF; --btn-hover-border-color:#A21CAF; --btn-active-bg: #86198F; --btn-active-border-color:#86198F; --btn-disabled-bg: #C026D3; --btn-disabled-border-color:#C026D3; --btn-focus-shadow-rgb: 205, 81, 220; } [data-color-palette="magenta"] .btn-outline-primary { --btn-color: #C026D3; --btn-border-color: #C026D3; --btn-hover-bg: #C026D3; --btn-hover-border-color:#C026D3; --btn-active-bg: #A21CAF; --btn-active-border-color:#C026D3; --btn-focus-shadow-rgb: 192, 38, 211; --btn-disabled-color: #C026D3; } /* ── Palette: crimson (#DC2626) ─────────────────────────────────────────────── */ [data-color-palette="crimson"] { --primary: #DC2626; --primary-rgb: 220, 38, 38; --component-active-bg: #DC2626; --component-active-bg-rgb: 220, 38, 38; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(220, 38, 38, 0.25); --link-color: #DC2626; --link-hover-color: #B91C1C; --link-rgb-color: 220, 38, 38; } [data-color-palette="crimson"] .btn-primary { --btn-bg: #DC2626; --btn-border-color: #DC2626; --btn-hover-bg: #B91C1C; --btn-hover-border-color:#B91C1C; --btn-active-bg: #991B1B; --btn-active-border-color:#991B1B; --btn-disabled-bg: #DC2626; --btn-disabled-border-color:#DC2626; --btn-focus-shadow-rgb: 227, 82, 82; } [data-color-palette="crimson"] .btn-outline-primary { --btn-color: #DC2626; --btn-border-color: #DC2626; --btn-hover-bg: #DC2626; --btn-hover-border-color:#DC2626; --btn-active-bg: #B91C1C; --btn-active-border-color:#DC2626; --btn-focus-shadow-rgb: 220, 38, 38; --btn-disabled-color: #DC2626; } /* ── Palette: scarlet (#FF2400) ─────────────────────────────────────────────── */ [data-color-palette="scarlet"] { --primary: #FF2400; --primary-rgb: 255, 36, 0; --component-active-bg: #FF2400; --component-active-bg-rgb: 255, 36, 0; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(255, 36, 0, 0.25); --link-color: #FF2400; --link-hover-color: #DC2200; --link-rgb-color: 255, 36, 0; } [data-color-palette="scarlet"] .btn-primary { --btn-bg: #FF2400; --btn-border-color: #FF2400; --btn-hover-bg: #DC2200; --btn-hover-border-color:#DC2200; --btn-active-bg: #B91C00; --btn-active-border-color:#B91C00; --btn-disabled-bg: #FF2400; --btn-disabled-border-color:#FF2400; --btn-focus-shadow-rgb: 255, 80, 51; } [data-color-palette="scarlet"] .btn-outline-primary { --btn-color: #FF2400; --btn-border-color: #FF2400; --btn-hover-bg: #FF2400; --btn-hover-border-color:#FF2400; --btn-active-bg: #DC2200; --btn-active-border-color:#FF2400; --btn-focus-shadow-rgb: 255, 36, 0; --btn-disabled-color: #FF2400; } /* ── Palette: coral (#FF7F50) ───────────────────────────────────────────────── */ [data-color-palette="coral"] { --primary: #FF7F50; --primary-rgb: 255, 127, 80; --component-active-bg: #FF7F50; --component-active-bg-rgb: 255, 127, 80; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(255, 127, 80, 0.25); --link-color: #FF7F50; --link-hover-color: #FB6A3D; --link-rgb-color: 255, 127, 80; } [data-color-palette="coral"] .btn-primary { --btn-bg: #FF7F50; --btn-border-color: #FF7F50; --btn-hover-bg: #FB6A3D; --btn-hover-border-color:#FB6A3D; --btn-active-bg: #F97316; --btn-active-border-color:#F97316; --btn-disabled-bg: #FF7F50; --btn-disabled-border-color:#FF7F50; --btn-focus-shadow-rgb: 255, 152, 115; } [data-color-palette="coral"] .btn-outline-primary { --btn-color: #FF7F50; --btn-border-color: #FF7F50; --btn-hover-bg: #FF7F50; --btn-hover-border-color:#FF7F50; --btn-active-bg: #FB6A3D; --btn-active-border-color:#FF7F50; --btn-focus-shadow-rgb: 255, 127, 80; --btn-disabled-color: #FF7F50; } /* ── Palette: salmon (#FA8072) ──────────────────────────────────────────────── */ [data-color-palette="salmon"] { --primary: #FA8072; --primary-rgb: 250, 128, 114; --component-active-bg: #FA8072; --component-active-bg-rgb: 250, 128, 114; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(250, 128, 114, 0.25); --link-color: #FA8072; --link-hover-color: #F87171; --link-rgb-color: 250, 128, 114; } [data-color-palette="salmon"] .btn-primary { --btn-bg: #FA8072; --btn-border-color: #FA8072; --btn-hover-bg: #F87171; --btn-hover-border-color:#F87171; --btn-active-bg: #EF4444; --btn-active-border-color:#EF4444; --btn-disabled-bg: #FA8072; --btn-disabled-border-color:#FA8072; --btn-focus-shadow-rgb: 251, 153, 142; } [data-color-palette="salmon"] .btn-outline-primary { --btn-color: #FA8072; --btn-border-color: #FA8072; --btn-hover-bg: #FA8072; --btn-hover-border-color:#FA8072; --btn-active-bg: #F87171; --btn-active-border-color:#FA8072; --btn-focus-shadow-rgb: 250, 128, 114; --btn-disabled-color: #FA8072; } /* ── Palette: peach (#FDBA74) ───────────────────────────────────────────────── */ [data-color-palette="peach"] { --primary: #FDBA74; --primary-rgb: 253, 186, 116; --component-active-bg: #FDBA74; --component-active-bg-rgb: 253, 186, 116; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(253, 186, 116, 0.25); --link-color: #FDBA74; --link-hover-color: #FB923C; --link-rgb-color: 253, 186, 116; } [data-color-palette="peach"] .btn-primary { --btn-color: #1F2937; --btn-bg: #FDBA74; --btn-border-color: #FDBA74; --btn-hover-color: #1F2937; --btn-hover-bg: #FB923C; --btn-hover-border-color:#FB923C; --btn-active-color: #1F2937; --btn-active-bg: #F97316; --btn-active-border-color:#F97316; --btn-disabled-color: #1F2937; --btn-disabled-bg: #FDBA74; --btn-disabled-border-color:#FDBA74; --btn-focus-shadow-rgb: 253, 200, 144; } [data-color-palette="peach"] .btn-outline-primary { --btn-color: #FDBA74; --btn-border-color: #FDBA74; --btn-hover-color: #1F2937; --btn-hover-bg: #FDBA74; --btn-hover-border-color:#FDBA74; --btn-active-bg: #FB923C; --btn-active-border-color:#FDBA74; --btn-focus-shadow-rgb: 253, 186, 116; --btn-disabled-color: #FDBA74; } /* ── Palette: apricot (#FB923C) ─────────────────────────────────────────────── */ [data-color-palette="apricot"] { --primary: #FB923C; --primary-rgb: 251, 146, 60; --component-active-bg: #FB923C; --component-active-bg-rgb: 251, 146, 60; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(251, 146, 60, 0.25); --link-color: #FB923C; --link-hover-color: #F97316; --link-rgb-color: 251, 146, 60; } [data-color-palette="apricot"] .btn-primary { --btn-bg: #FB923C; --btn-border-color: #FB923C; --btn-hover-bg: #F97316; --btn-hover-border-color:#F97316; --btn-active-bg: #EA580C; --btn-active-border-color:#EA580C; --btn-disabled-bg: #FB923C; --btn-disabled-border-color:#FB923C; --btn-focus-shadow-rgb: 252, 168, 102; } [data-color-palette="apricot"] .btn-outline-primary { --btn-color: #FB923C; --btn-border-color: #FB923C; --btn-hover-bg: #FB923C; --btn-hover-border-color:#FB923C; --btn-active-bg: #F97316; --btn-active-border-color:#FB923C; --btn-focus-shadow-rgb: 251, 146, 60; --btn-disabled-color: #FB923C; } /* ── Palette: gold (#FACC15) ────────────────────────────────────────────────── */ [data-color-palette="gold"] { --primary: #FACC15; --primary-rgb: 250, 204, 21; --component-active-bg: #FACC15; --component-active-bg-rgb: 250, 204, 21; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(250, 204, 21, 0.25); --link-color: #FACC15; --link-hover-color: #EAB308; --link-rgb-color: 250, 204, 21; } [data-color-palette="gold"] .btn-primary { --btn-color: #1F2937; --btn-bg: #FACC15; --btn-border-color: #FACC15; --btn-hover-color: #1F2937; --btn-hover-bg: #EAB308; --btn-hover-border-color:#EAB308; --btn-active-color: #1F2937; --btn-active-bg: #CA8A04; --btn-active-border-color:#CA8A04; --btn-disabled-color: #1F2937; --btn-disabled-bg: #FACC15; --btn-disabled-border-color:#FACC15; --btn-focus-shadow-rgb: 251, 214, 68; } [data-color-palette="gold"] .btn-outline-primary { --btn-color: #FACC15; --btn-border-color: #FACC15; --btn-hover-color: #1F2937; --btn-hover-bg: #FACC15; --btn-hover-border-color:#FACC15; --btn-active-bg: #EAB308; --btn-active-border-color:#FACC15; --btn-focus-shadow-rgb: 250, 204, 21; --btn-disabled-color: #FACC15; } /* ── Palette: lime (#84CC16) ────────────────────────────────────────────────── */ [data-color-palette="lime"] { --primary: #84CC16; --primary-rgb: 132, 204, 22; --component-active-bg: #84CC16; --component-active-bg-rgb: 132, 204, 22; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(132, 204, 22, 0.25); --link-color: #84CC16; --link-hover-color: #65A30D; --link-rgb-color: 132, 204, 22; } [data-color-palette="lime"] .btn-primary { --btn-bg: #84CC16; --btn-border-color: #84CC16; --btn-hover-bg: #65A30D; --btn-hover-border-color:#65A30D; --btn-active-bg: #4D7C0F; --btn-active-border-color:#4D7C0F; --btn-disabled-bg: #84CC16; --btn-disabled-border-color:#84CC16; --btn-focus-shadow-rgb: 157, 215, 69; } [data-color-palette="lime"] .btn-outline-primary { --btn-color: #84CC16; --btn-border-color: #84CC16; --btn-hover-bg: #84CC16; --btn-hover-border-color:#84CC16; --btn-active-bg: #65A30D; --btn-active-border-color:#84CC16; --btn-focus-shadow-rgb: 132, 204, 22; --btn-disabled-color: #84CC16; } /* ── Palette: mint (#6EE7B7) ────────────────────────────────────────────────── */ [data-color-palette="mint"] { --primary: #6EE7B7; --primary-rgb: 110, 231, 183; --component-active-bg: #6EE7B7; --component-active-bg-rgb: 110, 231, 183; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(110, 231, 183, 0.25); --link-color: #6EE7B7; --link-hover-color: #34D399; --link-rgb-color: 110, 231, 183; } [data-color-palette="mint"] .btn-primary { --btn-color: #1F2937; --btn-bg: #6EE7B7; --btn-border-color: #6EE7B7; --btn-hover-color: #1F2937; --btn-hover-bg: #34D399; --btn-hover-border-color:#34D399; --btn-active-color: #1F2937; --btn-active-bg: #10B981; --btn-active-border-color:#10B981; --btn-disabled-color: #1F2937; --btn-disabled-bg: #6EE7B7; --btn-disabled-border-color:#6EE7B7; --btn-focus-shadow-rgb: 139, 236, 198; } [data-color-palette="mint"] .btn-outline-primary { --btn-color: #6EE7B7; --btn-border-color: #6EE7B7; --btn-hover-color: #1F2937; --btn-hover-bg: #6EE7B7; --btn-hover-border-color:#6EE7B7; --btn-active-bg: #34D399; --btn-active-border-color:#6EE7B7; --btn-focus-shadow-rgb: 110, 231, 183; --btn-disabled-color: #6EE7B7; } /* ── Palette: seafoam (#34D399) ─────────────────────────────────────────────── */ [data-color-palette="seafoam"] { --primary: #34D399; --primary-rgb: 52, 211, 153; --component-active-bg: #34D399; --component-active-bg-rgb: 52, 211, 153; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(52, 211, 153, 0.25); --link-color: #34D399; --link-hover-color: #10B981; --link-rgb-color: 52, 211, 153; } [data-color-palette="seafoam"] .btn-primary { --btn-bg: #34D399; --btn-border-color: #34D399; --btn-hover-bg: #10B981; --btn-hover-border-color:#10B981; --btn-active-bg: #059669; --btn-active-border-color:#059669; --btn-disabled-bg: #34D399; --btn-disabled-border-color:#34D399; --btn-focus-shadow-rgb: 93, 220, 174; } [data-color-palette="seafoam"] .btn-outline-primary { --btn-color: #34D399; --btn-border-color: #34D399; --btn-hover-bg: #34D399; --btn-hover-border-color:#34D399; --btn-active-bg: #10B981; --btn-active-border-color:#34D399; --btn-focus-shadow-rgb: 52, 211, 153; --btn-disabled-color: #34D399; } /* ── Palette: turquoise (#2DD4BF) ───────────────────────────────────────────── */ [data-color-palette="turquoise"] { --primary: #2DD4BF; --primary-rgb: 45, 212, 191; --component-active-bg: #2DD4BF; --component-active-bg-rgb: 45, 212, 191; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(45, 212, 191, 0.25); --link-color: #2DD4BF; --link-hover-color: #14B8A6; --link-rgb-color: 45, 212, 191; } [data-color-palette="turquoise"] .btn-primary { --btn-bg: #2DD4BF; --btn-border-color: #2DD4BF; --btn-hover-bg: #14B8A6; --btn-hover-border-color:#14B8A6; --btn-active-bg: #0F766E; --btn-active-border-color:#0F766E; --btn-disabled-bg: #2DD4BF; --btn-disabled-border-color:#2DD4BF; --btn-focus-shadow-rgb: 87, 220, 204; } [data-color-palette="turquoise"] .btn-outline-primary { --btn-color: #2DD4BF; --btn-border-color: #2DD4BF; --btn-hover-bg: #2DD4BF; --btn-hover-border-color:#2DD4BF; --btn-active-bg: #14B8A6; --btn-active-border-color:#2DD4BF; --btn-focus-shadow-rgb: 45, 212, 191; --btn-disabled-color: #2DD4BF; } /* ── Palette: aqua (#22D3EE) ────────────────────────────────────────────────── */ [data-color-palette="aqua"] { --primary: #22D3EE; --primary-rgb: 34, 211, 238; --component-active-bg: #22D3EE; --component-active-bg-rgb: 34, 211, 238; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(34, 211, 238, 0.25); --link-color: #22D3EE; --link-hover-color: #06B6D4; --link-rgb-color: 34, 211, 238; } [data-color-palette="aqua"] .btn-primary { --btn-bg: #22D3EE; --btn-border-color: #22D3EE; --btn-hover-bg: #06B6D4; --btn-hover-border-color:#06B6D4; --btn-active-bg: #0891B2; --btn-active-border-color:#0891B2; --btn-disabled-bg: #22D3EE; --btn-disabled-border-color:#22D3EE; --btn-focus-shadow-rgb: 78, 220, 241; } [data-color-palette="aqua"] .btn-outline-primary { --btn-color: #22D3EE; --btn-border-color: #22D3EE; --btn-hover-bg: #22D3EE; --btn-hover-border-color:#22D3EE; --btn-active-bg: #06B6D4; --btn-active-border-color:#22D3EE; --btn-focus-shadow-rgb: 34, 211, 238; --btn-disabled-color: #22D3EE; } /* ── Palette: babyblue (#93C5FD) ────────────────────────────────────────────── */ [data-color-palette="babyblue"] { --primary: #93C5FD; --primary-rgb: 147, 197, 253; --component-active-bg: #93C5FD; --component-active-bg-rgb: 147, 197, 253; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(147, 197, 253, 0.25); --link-color: #93C5FD; --link-hover-color: #60A5FA; --link-rgb-color: 147, 197, 253; } [data-color-palette="babyblue"] .btn-primary { --btn-color: #1F2937; --btn-bg: #93C5FD; --btn-border-color: #93C5FD; --btn-hover-color: #1F2937; --btn-hover-bg: #60A5FA; --btn-hover-border-color:#60A5FA; --btn-active-color: #1F2937; --btn-active-bg: #3B82F6; --btn-active-border-color:#3B82F6; --btn-disabled-color: #1F2937; --btn-disabled-bg: #93C5FD; --btn-disabled-border-color:#93C5FD; --btn-focus-shadow-rgb: 169, 209, 253; } [data-color-palette="babyblue"] .btn-outline-primary { --btn-color: #93C5FD; --btn-border-color: #93C5FD; --btn-hover-color: #1F2937; --btn-hover-bg: #93C5FD; --btn-hover-border-color:#93C5FD; --btn-active-bg: #60A5FA; --btn-active-border-color:#93C5FD; --btn-focus-shadow-rgb: 147, 197, 253; --btn-disabled-color: #93C5FD; } /* ── Palette: steel (#64748B) ───────────────────────────────────────────────── */ [data-color-palette="steel"] { --primary: #64748B; --primary-rgb: 100, 116, 139; --component-active-bg: #64748B; --component-active-bg-rgb: 100, 116, 139; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(100, 116, 139, 0.25); --link-color: #64748B; --link-hover-color: #475569; --link-rgb-color: 100, 116, 139; } [data-color-palette="steel"] .btn-primary { --btn-bg: #64748B; --btn-border-color: #64748B; --btn-hover-bg: #475569; --btn-hover-border-color:#475569; --btn-active-bg: #334155; --btn-active-border-color:#334155; --btn-disabled-bg: #64748B; --btn-disabled-border-color:#64748B; --btn-focus-shadow-rgb: 131, 144, 163; } [data-color-palette="steel"] .btn-outline-primary { --btn-color: #64748B; --btn-border-color: #64748B; --btn-hover-bg: #64748B; --btn-hover-border-color:#64748B; --btn-active-bg: #475569; --btn-active-border-color:#64748B; --btn-focus-shadow-rgb: 100, 116, 139; --btn-disabled-color: #64748B; } /* ── Palette: charcoal (#1F2937) ────────────────────────────────────────────── */ [data-color-palette="charcoal"] { --primary: #1F2937; --primary-rgb: 31, 41, 55; --component-active-bg: #1F2937; --component-active-bg-rgb: 31, 41, 55; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(31, 41, 55, 0.25); --link-color: #1F2937; --link-hover-color: #111827; --link-rgb-color: 31, 41, 55; } [data-color-palette="charcoal"] .btn-primary { --btn-bg: #1F2937; --btn-border-color: #1F2937; --btn-hover-bg: #111827; --btn-hover-border-color:#111827; --btn-active-bg: #030712; --btn-active-border-color:#030712; --btn-disabled-bg: #1F2937; --btn-disabled-border-color:#1F2937; --btn-focus-shadow-rgb: 68, 78, 91; } [data-color-palette="charcoal"] .btn-outline-primary { --btn-color: #1F2937; --btn-border-color: #1F2937; --btn-hover-bg: #1F2937; --btn-hover-border-color:#1F2937; --btn-active-bg: #111827; --btn-active-border-color:#1F2937; --btn-focus-shadow-rgb: 31, 41, 55; --btn-disabled-color: #1F2937; } /* ── Palette: midnight (#0F172A) ────────────────────────────────────────────── */ [data-color-palette="midnight"] { --primary: #0F172A; --primary-rgb: 15, 23, 42; --component-active-bg: #0F172A; --component-active-bg-rgb: 15, 23, 42; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(15, 23, 42, 0.25); --link-color: #0F172A; --link-hover-color: #020617; --link-rgb-color: 15, 23, 42; } [data-color-palette="midnight"] .btn-primary { --btn-bg: #0F172A; --btn-border-color: #0F172A; --btn-hover-bg: #020617; --btn-hover-border-color:#020617; --btn-active-bg: #000000; --btn-active-border-color:#000000; --btn-disabled-bg: #0F172A; --btn-disabled-border-color:#0F172A; --btn-focus-shadow-rgb: 63, 69, 85; } [data-color-palette="midnight"] .btn-outline-primary { --btn-color: #0F172A; --btn-border-color: #0F172A; --btn-hover-bg: #0F172A; --btn-hover-border-color:#0F172A; --btn-active-bg: #020617; --btn-active-border-color:#0F172A; --btn-focus-shadow-rgb: 15, 23, 42; --btn-disabled-color: #0F172A; } /* ── Palette: navy (#1E3A8A) ────────────────────────────────────────────────── */ [data-color-palette="navy"] { --primary: #1E3A8A; --primary-rgb: 30, 58, 138; --component-active-bg: #1E3A8A; --component-active-bg-rgb: 30, 58, 138; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(30, 58, 138, 0.25); --link-color: #1E3A8A; --link-hover-color: #1E40AF; --link-rgb-color: 30, 58, 138; } [data-color-palette="navy"] .btn-primary { --btn-bg: #1E3A8A; --btn-border-color: #1E3A8A; --btn-hover-bg: #1E40AF; --btn-hover-border-color:#1E40AF; --btn-active-bg: #1D4ED8; --btn-active-border-color:#1D4ED8; --btn-disabled-bg: #1E3A8A; --btn-disabled-border-color:#1E3A8A; --btn-focus-shadow-rgb: 75, 98, 161; } [data-color-palette="navy"] .btn-outline-primary { --btn-color: #1E3A8A; --btn-border-color: #1E3A8A; --btn-hover-bg: #1E3A8A; --btn-hover-border-color:#1E3A8A; --btn-active-bg: #1E40AF; --btn-active-border-color:#1E3A8A; --btn-focus-shadow-rgb: 30, 58, 138; --btn-disabled-color: #1E3A8A; } /* ── Palette: sand (#EED9C4) ────────────────────────────────────────────────── */ [data-color-palette="sand"] { --primary: #EED9C4; --primary-rgb: 238, 217, 196; --component-active-bg: #EED9C4; --component-active-bg-rgb: 238, 217, 196; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(238, 217, 196, 0.25); --link-color: #EED9C4; --link-hover-color: #D6C1A9; --link-rgb-color: 238, 217, 196; } [data-color-palette="sand"] .btn-primary { --btn-color: #1F2937; --btn-bg: #EED9C4; --btn-border-color: #EED9C4; --btn-hover-color: #1F2937; --btn-hover-bg: #D6C1A9; --btn-hover-border-color:#D6C1A9; --btn-active-color: #1F2937; --btn-active-bg: #BFA58A; --btn-active-border-color:#BFA58A; --btn-disabled-color: #1F2937; --btn-disabled-bg: #EED9C4; --btn-disabled-border-color:#EED9C4; --btn-focus-shadow-rgb: 242, 225, 208; } [data-color-palette="sand"] .btn-outline-primary { --btn-color: #EED9C4; --btn-border-color: #EED9C4; --btn-hover-color: #1F2937; --btn-hover-bg: #EED9C4; --btn-hover-border-color:#EED9C4; --btn-active-bg: #D6C1A9; --btn-active-border-color:#EED9C4; --btn-focus-shadow-rgb: 238, 217, 196; --btn-disabled-color: #EED9C4; } /* ── Palette: beige (#F5F5DC) ───────────────────────────────────────────────── */ [data-color-palette="beige"] { --primary: #F5F5DC; --primary-rgb: 245, 245, 220; --component-active-bg: #F5F5DC; --component-active-bg-rgb: 245, 245, 220; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(245, 245, 220, 0.25); --link-color: #F5F5DC; --link-hover-color: #E7E5D0; --link-rgb-color: 245, 245, 220; } [data-color-palette="beige"] .btn-primary { --btn-color: #1F2937; --btn-bg: #F5F5DC; --btn-border-color: #F5F5DC; --btn-hover-color: #1F2937; --btn-hover-bg: #E7E5D0; --btn-hover-border-color:#E7E5D0; --btn-active-color: #1F2937; --btn-active-bg: #D6D3BF; --btn-active-border-color:#D6D3BF; --btn-disabled-color: #1F2937; --btn-disabled-bg: #F5F5DC; --btn-disabled-border-color:#F5F5DC; --btn-focus-shadow-rgb: 247, 247, 227; } [data-color-palette="beige"] .btn-outline-primary { --btn-color: #F5F5DC; --btn-border-color: #F5F5DC; --btn-hover-color: #1F2937; --btn-hover-bg: #F5F5DC; --btn-hover-border-color:#F5F5DC; --btn-active-bg: #E7E5D0; --btn-active-border-color:#F5F5DC; --btn-focus-shadow-rgb: 245, 245, 220; --btn-disabled-color: #F5F5DC; } /* ── Palette: ivory (#FFFFF0) ───────────────────────────────────────────────── */ [data-color-palette="ivory"] { --primary: #FFFFF0; --primary-rgb: 255, 255, 240; --component-active-bg: #FFFFF0; --component-active-bg-rgb: 255, 255, 240; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(255, 255, 240, 0.25); --link-color: #FFFFF0; --link-hover-color: #F5F5E6; --link-rgb-color: 255, 255, 240; } [data-color-palette="ivory"] .btn-primary { --btn-color: #1F2937; --btn-bg: #FFFFF0; --btn-border-color: #FFFFF0; --btn-hover-color: #1F2937; --btn-hover-bg: #F5F5E6; --btn-hover-border-color:#F5F5E6; --btn-active-color: #1F2937; --btn-active-bg: #E7E5D8; --btn-active-border-color:#E7E5D8; --btn-disabled-color: #1F2937; --btn-disabled-bg: #FFFFF0; --btn-disabled-border-color:#FFFFF0; --btn-focus-shadow-rgb: 255, 255, 244; } [data-color-palette="ivory"] .btn-outline-primary { --btn-color: #FFFFF0; --btn-border-color: #FFFFF0; --btn-hover-color: #1F2937; --btn-hover-bg: #FFFFF0; --btn-hover-border-color:#FFFFF0; --btn-active-bg: #F5F5E6; --btn-active-border-color:#FFFFF0; --btn-focus-shadow-rgb: 255, 255, 240; --btn-disabled-color: #FFFFF0; } /* ── Navbar: primary-color background (tracks the active palette) ───────────── */ .navbar-primary { --navbar-bg: var(--primary); --navbar-color: #fff; --navbar-hover-color: rgba(255, 255, 255, 0.85); --navbar-disabled-color: rgba(255, 255, 255, 0.5); --navbar-active-color: #fff; --navbar-brand-color: #fff; --navbar-brand-hover-color: #fff; --navbar-hover-bg: rgba(0, 0, 0, 0.12); --navbar-hover-active-bg: rgba(0, 0, 0, 0.18); --navbar-hover-active-color: #fff; --navbar-active-bg: rgba(0, 0, 0, 0.18); color-scheme: dark; } /* Search input inside primary navbar */ .navbar-primary .form-control { --input-bg: rgba(0, 0, 0, 0.15); --input-border-color: rgba(255, 255, 255, 0.2); --input-color: #fff; --input-placeholder-color: rgba(255, 255, 255, 0.6); } .navbar-primary .form-control:focus { --input-bg: rgba(0, 0, 0, 0.2); } /* Icons / nav-link text inside primary navbar */ .navbar-primary .navbar-nav-link, .navbar-primary .navbar-nav-link i, .navbar-primary .navbar-toggler { color: #fff !important; } .navbar-primary .navbar-nav-link:hover, .navbar-primary .navbar-nav-link:focus { color: rgba(255, 255, 255, 0.85) !important; } /* ── Navbar: light scheme — ensure icons & search text are visible ───────────── */ .navbar-light { --navbar-color: var(--body-color); --navbar-hover-color: var(--body-color); --navbar-active-color: var(--link-color); --navbar-brand-color: var(--link-color); --navbar-brand-hover-color: var(--link-color); --navbar-hover-bg: var(--gray-100); --navbar-hover-active-bg: var(--gray-200); --navbar-hover-active-color: var(--body-color); --navbar-active-bg: rgba(var(--primary-rgb), 0.1); } /* Nav-link icons & text */ .navbar-light .navbar-nav-link, .navbar-light .navbar-nav-link i, .navbar-light .navbar-toggler { color: var(--body-color) !important; } .navbar-light .navbar-nav-link:hover, .navbar-light .navbar-nav-link:focus { color: var(--body-color) !important; background-color: var(--gray-100); } /* Search input */ .navbar-light .form-control { --input-bg: var(--gray-100); --input-border-color: var(--border-color); --input-color: var(--body-color); --input-placeholder-color: var(--text-muted); } .navbar-light .form-control:focus { --input-bg: var(--white); } /* Search icon inside the input */ .navbar-light .form-control-feedback-icon { color: var(--text-muted); } /* User name text */ .navbar-light .navbar-nav-link span { color: var(--body-color); } /* ── Sidebar: custom background color ──────────────────────────────────────── */ .sidebar-custom { --sidebar-bg: var(--custom-sidebar-bg, #252b36); --sidebar-border-color: transparent; color-scheme: dark; } .sidebar-custom .nav-sidebar { --nav-sidebar-divider-color: rgba(255, 255, 255, 0.125); --nav-link-color: rgba(255, 255, 255, 0.85); --nav-link-hover-color: #fff; --nav-link-hover-bg: rgba(255, 255, 255, 0.1); --nav-link-hover-active-bg: rgba(255, 255, 255, 0.15); --nav-link-active-color: #fff; --nav-link-active-bg: rgba(255, 255, 255, 0.15); --nav-link-disabled-color: rgba(255, 255, 255, 0.5); } .sidebar-custom .btn-sidebar-expand { --btn-bg: var(--custom-sidebar-bg, #252b36); --btn-hover-bg: rgba(255, 255, 255, 0.08); --btn-active-bg: rgba(255, 255, 255, 0.12); } /* ── Sidebar: primary-color background (tracks the active palette) ──────────── */ .sidebar-primary { --sidebar-bg: var(--primary); --sidebar-border-color: transparent; color-scheme: dark; } .sidebar-primary .nav-sidebar { --nav-sidebar-divider-color: rgba(255, 255, 255, 0.2); --nav-link-color: rgba(255, 255, 255, 0.85); --nav-link-hover-color: #fff; --nav-link-hover-bg: rgba(0, 0, 0, 0.12); --nav-link-hover-active-bg: rgba(0, 0, 0, 0.18); --nav-link-active-color: #fff; --nav-link-active-bg: rgba(0, 0, 0, 0.18); --nav-link-disabled-color: rgba(255, 255, 255, 0.5); } .sidebar-primary .btn-sidebar-expand { --btn-bg: var(--primary); --btn-hover-bg: rgba(0, 0, 0, 0.1); --btn-active-bg: rgba(0, 0, 0, 0.15); } /* ── Palette: custom (user-defined via --custom-primary) ───────────────────── */ [data-color-palette="custom"] { --primary: var(--custom-primary, #0c83ff); --primary-rgb: var(--custom-primary-rgb, 12, 131, 255); --component-active-bg: var(--custom-primary, #0c83ff); --component-active-bg-rgb: var(--custom-primary-rgb, 12, 131, 255); --focus-ring-box-shadow: 0 0 0 0.125rem rgba(var(--custom-primary-rgb, 12, 131, 255), 0.25); --link-color: var(--custom-primary, #0c83ff); --link-hover-color: var(--custom-primary-dark, #096fd9); --link-rgb-color: var(--custom-primary-rgb, 12, 131, 255); } [data-color-palette="custom"] .btn-primary { --btn-bg: var(--custom-primary, #0c83ff); --btn-border-color: var(--custom-primary, #0c83ff); --btn-hover-bg: var(--custom-primary-dark, #096fd9); --btn-hover-border-color:var(--custom-primary-dark, #096fd9); --btn-active-bg: var(--custom-primary-dark, #096fd9); --btn-active-border-color:var(--custom-primary-dark, #096fd9); --btn-disabled-bg: var(--custom-primary, #0c83ff); --btn-disabled-border-color:var(--custom-primary, #0c83ff); --btn-focus-shadow-rgb: var(--custom-primary-rgb, 12, 131, 255); } [data-color-palette="custom"] .btn-outline-primary { --btn-color: var(--custom-primary, #0c83ff); --btn-border-color: var(--custom-primary, #0c83ff); --btn-hover-bg: var(--custom-primary, #0c83ff); --btn-hover-border-color:var(--custom-primary, #0c83ff); --btn-active-bg: var(--custom-primary-dark, #096fd9); --btn-active-border-color:var(--custom-primary, #0c83ff); --btn-focus-shadow-rgb: var(--custom-primary-rgb, 12, 131, 255); --btn-disabled-color: var(--custom-primary, #0c83ff); } /* ── Palette: cyan (#049aad) ────────────────────────────────────────────────── */ [data-color-palette="cyan"] { --primary: #049aad; --primary-rgb: 4, 154, 173; --component-active-bg: #049aad; --component-active-bg-rgb: 4, 154, 173; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(4, 154, 173, 0.25); --link-color: #049aad; --link-hover-color: #038393; --link-rgb-color: 4, 154, 173; } [data-color-palette="cyan"] .btn-primary { --btn-bg: #049aad; --btn-border-color: #049aad; --btn-hover-bg: #048b9c; --btn-hover-border-color:#048b9c; --btn-active-bg: #038393; --btn-active-border-color:#038393; --btn-disabled-bg: #049aad; --btn-disabled-border-color:#049aad; --btn-focus-shadow-rgb: 42, 169, 185; } [data-color-palette="cyan"] .btn-outline-primary { --btn-color: #049aad; --btn-border-color: #049aad; --btn-hover-bg: #049aad; --btn-hover-border-color:#049aad; --btn-active-bg: #038393; --btn-active-border-color:#049aad; --btn-focus-shadow-rgb: 4, 154, 173; --btn-disabled-color: #049aad; }