/* ============================================================================ OBaseThemes — Bootstrap 5 variable overrides + a 6-way accent system. Reusable across every OBase Framework app (Radzen-style: one token layer, many apps). Accent is chosen by `data-obase-accent` on (set by obase-theme.js from localStorage; the ObaseAccentPicker calls obase.setAccent), independent of the light/dark `data-bs-theme` switch. Each accent defines TWO things: 1. the accent colour family (--obase-primary*, --obase-link*, --obase-grad-*) 2. a SUBTLE surface ramp (--obase-body/surface/border-{dark,light}) — a quiet hue cast on the page/cards/borders so the whole UI feels on-theme, not just the buttons. Text stays near-white / near-black for contrast; only the surface hue shifts. Graphite is the neutral baseline (plain slate). Generic default = blue. A consuming app picks its own default by setting (etc.) in its host page. Components (OBaseWebComponent's table/dropdown/etc.) need NO awareness of this file — they already consume --bs-* tokens; this maps the accent + surface ramp onto those, so they track the theme automatically. ============================================================================ */ /* ── Accent token families + surface ramps (generic default = blue) ────────── *-dark = dark-mode body / raised surface / border (border doubles as the dark tertiary surface, matching Bootstrap's slate convention). *-light = light-mode body / card surface / tertiary fill / border. */ :root, [data-obase-accent="blue"] { --obase-primary: #2563eb; --obase-primary-rgb: 37, 99, 235; --obase-primary-hover: #1d4ed8; --obase-primary-active: #1e40af; --obase-primary-contrast: #ffffff; --obase-link: #60a5fa; --obase-link-hover: #93c5fd; --obase-grad-a: #2563eb; --obase-grad-b: #1d4ed8; --obase-grad-c: #1e3a8a; --obase-body-dark: #0b1220; --obase-surface-dark: #1a2336; --obase-border-dark: #2c3a52; --obase-body-light: #f4f7fe; --obase-surface-light: #ffffff; --obase-tertiary-light: #eef3fb; --obase-border-light: #dbe5f5; } [data-obase-accent="violet"] { --obase-primary: #7c3aed; --obase-primary-rgb: 124, 58, 237; --obase-primary-hover: #6d28d9; --obase-primary-active: #5b21b6; --obase-primary-contrast: #ffffff; --obase-link: #a78bfa; --obase-link-hover: #c4b5fd; --obase-grad-a: #7c3aed; --obase-grad-b: #6d28d9; --obase-grad-c: #4c1d95; --obase-body-dark: #110c1f; --obase-surface-dark: #221a36; --obase-border-dark: #352a52; --obase-body-light: #f7f5fe; --obase-surface-light: #ffffff; --obase-tertiary-light: #f0ebfb; --obase-border-light: #ddd4f3; } [data-obase-accent="emerald"] { --obase-primary: #059669; --obase-primary-rgb: 5, 150, 105; --obase-primary-hover: #047857; --obase-primary-active: #065f46; --obase-primary-contrast: #ffffff; --obase-link: #6ee7b7; --obase-link-hover: #a7f3d0; --obase-grad-a: #059669; --obase-grad-b: #047857; --obase-grad-c: #064e3b; --obase-body-dark: #08130f; --obase-surface-dark: #15241d; --obase-border-dark: #243f33; --obase-body-light: #f1faf5; --obase-surface-light: #ffffff; --obase-tertiary-light: #e6f4ec; --obase-border-light: #cfe9da; } [data-obase-accent="sunset"] { --obase-primary: #ea580c; --obase-primary-rgb: 234, 88, 12; --obase-primary-hover: #c2410c; --obase-primary-active: #9a3412; --obase-primary-contrast: #ffffff; --obase-link: #fdba74; --obase-link-hover: #fed7aa; --obase-grad-a: #ea580c; --obase-grad-b: #c2410c; --obase-grad-c: #7c2d12; --obase-body-dark: #160d07; --obase-surface-dark: #261812; --obase-border-dark: #422c1e; --obase-body-light: #fef6f0; --obase-surface-light: #ffffff; --obase-tertiary-light: #fceade; --obase-border-light: #f5d9c6; } /* Gold — warm brass/bronze. DARK contrast: white text fails contrast on this gold, so buttons paint #1f2937 text (same exception .btn-warning makes). */ [data-obase-accent="gold"] { --obase-primary: #b8924a; --obase-primary-rgb: 184, 146, 74; --obase-primary-hover: #9a7a3c; --obase-primary-active: #7d6230; --obase-primary-contrast: #1f2937; --obase-link: #d8b878; --obase-link-hover: #e6cd97; --obase-grad-a: #c9a25a; --obase-grad-b: #a8823f; --obase-grad-c: #5c431f; --obase-body-dark: #14110a; --obase-surface-dark: #221c12; --obase-border-dark: #3a311e; --obase-body-light: #faf7ef; --obase-surface-light: #ffffff; --obase-tertiary-light: #f4ecdb; --obase-border-light: #e9ddc4; } /* Graphite — the neutral baseline: plain slate, no hue cast. */ [data-obase-accent="graphite"] { --obase-primary: #6b7280; --obase-primary-rgb: 107, 114, 128; --obase-primary-hover: #4b5563; --obase-primary-active: #374151; --obase-primary-contrast: #ffffff; --obase-link: #d1d5db; --obase-link-hover: #e5e7eb; --obase-grad-a: #6b7280; --obase-grad-b: #4b5563; --obase-grad-c: #1f2937; --obase-body-dark: #0f172a; --obase-surface-dark: #1e293b; --obase-border-dark: #334155; --obase-body-light: #f8fafc; --obase-surface-light: #ffffff; --obase-tertiary-light: #f1f5f9; --obase-border-light: #e2e8f0; } /* ── Base Bootstrap wiring ───────────────────────────────────────────────── */ :root, [data-bs-theme="light"] { --bs-primary: var(--obase-primary); --bs-primary-rgb: var(--obase-primary-rgb); --bs-secondary: #64748b; --bs-success: #22c55e; --bs-warning: #f59e0b; --bs-danger: #ef4444; --bs-info: #0ea5e9; --bs-border-radius: 8px; --bs-border-radius-sm: 6px; --bs-border-radius-lg: 12px; --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --bs-font-monospace: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace; --bs-body-font-size: 14px; --bs-body-line-height: 1.5; } /* Light surfaces read the active accent's light ramp (text stays dark slate). */ [data-bs-theme="light"] { --bs-body-bg: var(--obase-body-light); --bs-body-color: #0f172a; --bs-emphasis-color: #0f172a; --bs-secondary-bg: var(--obase-surface-light); --bs-tertiary-bg: var(--obase-tertiary-light); --bs-border-color: var(--obase-border-light); --bs-border-color-translucent: rgba(15, 23, 42, 0.08); --bs-link-color: var(--obase-primary); --bs-link-hover-color: var(--obase-primary-hover); --bs-heading-color: #0f172a; } /* Dark surfaces read the active accent's dark ramp (text stays near-white). */ [data-bs-theme="dark"] { --bs-body-bg: var(--obase-body-dark); --bs-body-color: #e2e8f0; --bs-body-color-rgb: 226, 232, 240; --bs-emphasis-color: #f1f5f9; --bs-secondary-bg: var(--obase-surface-dark); --bs-tertiary-bg: var(--obase-border-dark); --bs-border-color: var(--obase-border-dark); --bs-border-color-translucent: rgba(255, 255, 255, 0.08); --bs-link-color: var(--obase-link); --bs-link-hover-color: var(--obase-link-hover); --bs-heading-color: #f1f5f9; } /* ── Buttons — read the accent token family ──────────────────────────────── */ .btn-primary { --bs-btn-bg: var(--obase-primary); --bs-btn-border-color: var(--obase-primary); --bs-btn-color: var(--obase-primary-contrast); --bs-btn-hover-bg: var(--obase-primary-hover); --bs-btn-hover-border-color: var(--obase-primary-hover); --bs-btn-hover-color: var(--obase-primary-contrast); --bs-btn-active-bg: var(--obase-primary-active); --bs-btn-active-border-color: var(--obase-primary-active); --bs-btn-active-color: var(--obase-primary-contrast); --bs-btn-disabled-bg: var(--obase-primary); --bs-btn-disabled-border-color: var(--obase-primary); --bs-btn-disabled-color: var(--obase-primary-contrast); } .btn-outline-primary { --bs-btn-color: var(--obase-primary); --bs-btn-border-color: var(--obase-primary); --bs-btn-hover-bg: var(--obase-primary); --bs-btn-hover-border-color: var(--obase-primary); --bs-btn-hover-color: var(--obase-primary-contrast); --bs-btn-active-bg: var(--obase-primary); --bs-btn-active-border-color: var(--obase-primary); --bs-btn-active-color: var(--obase-primary-contrast); } .btn-danger { --bs-btn-bg: #ef4444; --bs-btn-border-color: #ef4444; --bs-btn-hover-bg: #dc2626; --bs-btn-hover-border-color: #dc2626; --bs-btn-active-bg: #b91c1c; --bs-btn-active-border-color: #b91c1c; } .btn-success { --bs-btn-bg: #22c55e; --bs-btn-border-color: #22c55e; --bs-btn-hover-bg: #16a34a; --bs-btn-hover-border-color: #16a34a; } .btn-warning { --bs-btn-bg: #f59e0b; --bs-btn-border-color: #f59e0b; --bs-btn-hover-bg: #d97706; --bs-btn-hover-border-color: #d97706; color: #0f172a; } /* ── Dark-mode component surfaces (Bootstrap sets these tokens per element, so they must be re-set here; values read the active accent's dark ramp). ──── */ [data-bs-theme="dark"] .card { --bs-card-bg: var(--obase-surface-dark); --bs-card-border-color: var(--obase-border-dark); --bs-card-color: #e2e8f0; --bs-card-cap-bg: var(--obase-surface-dark); } [data-bs-theme="dark"] .modal { --bs-modal-bg: var(--obase-surface-dark); --bs-modal-color: #e2e8f0; --bs-modal-border-color: var(--obase-border-dark); --bs-modal-header-border-color: var(--obase-border-dark); --bs-modal-footer-border-color: var(--obase-border-dark); } [data-bs-theme="dark"] .offcanvas, [data-bs-theme="dark"] .offcanvas-lg{ --bs-offcanvas-bg: var(--obase-body-dark); --bs-offcanvas-color: #e2e8f0; --bs-offcanvas-border-color: var(--obase-border-dark); } [data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: var(--obase-surface-dark); --bs-dropdown-color: #e2e8f0; --bs-dropdown-border-color: var(--obase-border-dark); --bs-dropdown-link-color: #e2e8f0; --bs-dropdown-link-hover-bg: var(--obase-border-dark); --bs-dropdown-link-hover-color: #f1f5f9; --bs-dropdown-link-active-bg: rgba(var(--obase-primary-rgb), 0.18); --bs-dropdown-link-active-color: #f1f5f9; } [data-bs-theme="dark"] .list-group { --bs-list-group-bg: var(--obase-surface-dark); --bs-list-group-color: #e2e8f0; --bs-list-group-border-color: var(--obase-border-dark); } [data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: #e2e8f0; --bs-table-border-color: var(--obase-border-dark); --bs-table-hover-bg: var(--obase-border-dark); --bs-table-hover-color: #f1f5f9; } /* form-control / form-select / input-group-text are already token-driven by Bootstrap (var(--bs-body-bg) / --bs-body-color / --bs-border-color / --bs-tertiary-bg), so they follow the NEAREST data-bs-theme automatically. No hardcoded dark override here — that leaked dark styling into nested LIGHT surfaces (e.g. a light login card on a dark page → black-on-black inputs). The accent focus ring lives in the component baseline below. */ /* ── Portal light overrides (nested theming; higher specificity than the body-level dark block so .obase-portal flips to the light accent ramp) ─── */ .obase-portal[data-bs-theme="light"] .card { --bs-card-bg: var(--obase-surface-light); --bs-card-border-color: var(--obase-border-light); --bs-card-color: #0f172a; --bs-card-cap-bg: var(--obase-body-light); } .obase-portal[data-bs-theme="light"] .modal { --bs-modal-bg: var(--obase-surface-light); --bs-modal-color: #0f172a; --bs-modal-border-color: var(--obase-border-light); --bs-modal-header-border-color: var(--obase-border-light); --bs-modal-footer-border-color: var(--obase-border-light); } .obase-portal[data-bs-theme="light"] .offcanvas, .obase-portal[data-bs-theme="light"] .offcanvas-lg{ --bs-offcanvas-bg: var(--obase-surface-light); --bs-offcanvas-color: #0f172a; --bs-offcanvas-border-color: var(--obase-border-light); } .obase-portal[data-bs-theme="light"] .dropdown-menu { --bs-dropdown-bg: var(--obase-surface-light); --bs-dropdown-color: #0f172a; --bs-dropdown-border-color: var(--obase-border-light); --bs-dropdown-link-color: #0f172a; --bs-dropdown-link-hover-bg: var(--obase-tertiary-light); --bs-dropdown-link-hover-color: #0f172a; --bs-dropdown-link-active-bg: rgba(var(--obase-primary-rgb), 0.16); --bs-dropdown-link-active-color: #0f172a; } .obase-portal[data-bs-theme="light"] .list-group { --bs-list-group-bg: var(--obase-surface-light); --bs-list-group-color: #0f172a; --bs-list-group-border-color: var(--obase-border-light); } .obase-portal[data-bs-theme="light"] .table { --bs-table-bg: transparent; --bs-table-color: #0f172a; --bs-table-border-color: var(--obase-border-light); --bs-table-hover-bg: var(--obase-tertiary-light); --bs-table-hover-color: #0f172a; } .obase-portal[data-bs-theme="light"] .form-control, .obase-portal[data-bs-theme="light"] .form-select { background-color: var(--obase-surface-light); border-color: var(--obase-border-light); color: #0f172a; } .obase-portal[data-bs-theme="light"] .form-control:focus, .obase-portal[data-bs-theme="light"] .form-select:focus { background-color: var(--obase-surface-light); border-color: var(--obase-primary); color: #0f172a; box-shadow: 0 0 0 3px rgba(var(--obase-primary-rgb), 0.25); } .obase-portal[data-bs-theme="light"] .form-control::placeholder { color: #94a3b8; } /* ── Theme controls (ObaseAccentPicker + ObaseThemeToggle) ───────────────── */ .obase-accent-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); } /* Neutral topbar look for both controls; the accent shows through on hover. */ .obase-theme-pick > .dropdown-toggle, .obase-theme-toggle { border: 1px solid var(--bs-border-color); background: transparent; color: var(--bs-body-color); display: inline-flex; align-items: center; justify-content: center; } .obase-theme-pick > .dropdown-toggle:hover, .obase-theme-toggle:hover { border-color: var(--obase-primary); color: var(--obase-primary); } /* ============================================================================ Component baseline — a neutral, reusable polish layer so an app gets a finished look from just this file (buttons, cards, forms, tables, tabs). It is all token-driven, so everything tracks the accent + light/dark automatically. App-specific chrome (sidebars, dashboards, etc.) stays in the app's own CSS. ============================================================================ */ .btn { border-radius: var(--bs-border-radius-sm); font-weight: 500; } /* Cards — radius + a hairline + the faintest lift. */ .card { border-radius: var(--bs-border-radius-lg); border-color: var(--bs-border-color); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); } .card-header { background-color: transparent; border-bottom-color: var(--bs-border-color); font-weight: 600; } .card-footer { background-color: transparent; border-top-color: var(--bs-border-color); } /* Inputs — radius + an accent focus ring (works in both modes via tokens). */ .form-control, .form-select { border-radius: var(--bs-border-radius-sm); } .form-control:focus, .form-select:focus { border-color: var(--obase-primary); box-shadow: 0 0 0 0.2rem rgba(var(--obase-primary-rgb), 0.2); } .form-label { font-weight: 500; margin-bottom: 0.3rem; } .form-check-input:checked { background-color: var(--obase-primary); border-color: var(--obase-primary); } .modified.invalid, input.invalid, select.invalid, textarea.invalid { border-color: var(--bs-danger) !important; box-shadow: 0 0 0 0.18rem rgba(var(--bs-danger-rgb, 239, 68, 68), 0.18); } /* Tables — readable + accent hover. Neutral (no uppercase: that's an app choice). */ .table { --bs-table-hover-bg: rgba(var(--obase-primary-rgb), 0.06); --bs-table-border-color: var(--bs-border-color); } .table > thead > tr > th, .table > thead th { background-color: var(--bs-tertiary-bg); border-bottom: 2px solid var(--bs-border-color); font-weight: 600; } /* Tabs — underline-active. */ .nav-tabs { border-bottom: 1px solid var(--bs-border-color); } .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--bs-body-color); background: transparent; cursor: pointer; } .nav-tabs .nav-link:hover { color: var(--obase-primary); border-color: transparent; } .nav-tabs .nav-link.active { color: var(--obase-primary); background: transparent; border-bottom-color: var(--obase-primary); } /* Dark-mode contrast for bare elements Bootstrap/OBase leave under-styled. */ [data-bs-theme="dark"] .input-group-text { background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-bs-theme="dark"] select option { background-color: var(--bs-secondary-bg); color: var(--bs-body-color); } [data-bs-theme="dark"] hr { border-color: var(--bs-border-color); opacity: 0.5; } [data-bs-theme="dark"] .text-secondary { color: #94a3b8 !important; } [data-bs-theme="dark"] .btn-light, [data-bs-theme="dark"] .btn-outline-secondary { color: var(--bs-body-color); background-color: transparent; border-color: var(--bs-border-color); } [data-bs-theme="dark"] .btn-light:hover, [data-bs-theme="dark"] .btn-outline-secondary:hover { background-color: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); } [data-bs-theme="dark"] .alert-danger { background-color: rgba(239, 68, 68, 0.15); color: #fca5a5; border-color: rgba(239, 68, 68, 0.3); }