/* * Warepeak design tokens — Direction A ("refined brand"). * * Single source of truth for color tokens across the app. Templates and * component CSS should consume `var(--wp-*)` (and the Bootstrap `--bs-*` * mapping below) rather than hardcoding colors. * * Dark mode is toggled by setting `data-theme="dark"` on (see * theme.js / the no-flash init script in base.html). */ :root { /* Surfaces */ --wp-bg: #eef3f9; --wp-surface: #ffffff; --wp-surface-2: #f4f8fc; /* Sidebar */ --wp-sidebar: #064789; --wp-sidebar-fg: #dbe7f3; --wp-sidebar-muted: #9db8d4; --wp-sidebar-active: #0a5aa8; --wp-sidebar-border: rgba(255, 255, 255, .08); --wp-sidebar-danger: #ff9b9b; /* Topbar / text / borders */ --wp-topbar: #ffffff; --wp-text: #12293f; --wp-muted: #5b7185; --wp-border: #e3ebf3; /* Accent */ --wp-accent: #0a5aa8; --wp-accent-fg: #ffffff; /* Radii */ --wp-radius: 10px; --wp-radius-lg: 14px; /* Status colors (bg/fg pairs) */ --wp-ok-bg: #e1f5ee; --wp-ok-fg: #0f6e56; --wp-warn-bg: #faeeda; --wp-warn-fg: #854f0b; --wp-danger-bg: #fcebeb; --wp-danger-fg: #a32d2d; --wp-info-bg: #e6f1fb; --wp-info-fg: #185fa5; } [data-theme="dark"] { --wp-bg: #0b1622; --wp-surface: #12202f; --wp-surface-2: #182a3c; --wp-sidebar: #08243f; --wp-sidebar-fg: #cfe0f0; --wp-sidebar-muted: #7d99b5; --wp-sidebar-active: #0a5aa8; --wp-sidebar-border: rgba(255, 255, 255, .08); --wp-sidebar-danger: #ff9b9b; --wp-topbar: #12202f; --wp-text: #e6eef6; --wp-muted: #93a7bc; --wp-border: #24384d; --wp-accent: #4f93cf; --wp-accent-fg: #06263f; --wp-ok-bg: #0f3d31; --wp-ok-fg: #7fd8bd; --wp-warn-bg: #4a3410; --wp-warn-fg: #f0c37a; --wp-danger-bg: #4a1c1c; --wp-danger-fg: #f0a3a3; --wp-info-bg: #0e2f4d; --wp-info-fg: #8fc0ec; } body { background: var(--wp-bg); color: var(--wp-text); } a { color: var(--wp-accent); } :focus-visible { outline: 2px solid var(--wp-accent); outline-offset: 2px; } /* Map Bootstrap to our tokens so native components inherit the theme */ :root { --bs-body-bg: var(--wp-bg); --bs-body-color: var(--wp-text); --bs-border-color: var(--wp-border); --bs-primary: var(--wp-accent); --bs-link-color: var(--wp-accent); --bs-secondary-color: var(--wp-muted); } .card { background: var(--wp-surface); border-color: var(--wp-border); border-radius: var(--wp-radius-lg); } .btn-primary { background: var(--wp-accent); border-color: var(--wp-accent); color: var(--wp-accent-fg); } .form-control, .form-select { background: var(--wp-surface); color: var(--wp-text); border-color: var(--wp-border); } /* ---------------------------------------------------------------------- */ /* Dark-mode cohesion for pages not yet migrated to the wp-* patterns. */ /* Scoped to [data-theme="dark"] only, so light mode is never affected. */ /* Themes the common Bootstrap/legacy surfaces that otherwise render as */ /* light "islands" in dark mode (card headers, native selects, dropdown */ /* menus, tables, utility bg/text classes). */ /* ---------------------------------------------------------------------- */ [data-theme="dark"] { --bs-body-bg: var(--wp-bg); --bs-body-color: var(--wp-text); --bs-card-bg: var(--wp-surface); --bs-card-border-color: var(--wp-border); --bs-card-cap-bg: var(--wp-surface-2); --bs-secondary-bg: var(--wp-surface-2); --bs-tertiary-bg: var(--wp-surface-2); --bs-border-color: var(--wp-border); --bs-emphasis-color: var(--wp-text); --bs-secondary-color: var(--wp-muted); } [data-theme="dark"] .content-card, [data-theme="dark"] .list-group-item, [data-theme="dark"] .modal-content { background: var(--wp-surface); color: var(--wp-text); border-color: var(--wp-border); } /* dropdowns.css hardcodes #fff !important on these, so match with !important. */ [data-theme="dark"] .dropdown-menu { background-color: var(--wp-surface) !important; color: var(--wp-text); border-color: var(--wp-border); } [data-theme="dark"] .card-header { background: var(--wp-surface-2); color: var(--wp-text); border-color: var(--wp-border); } [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light { background-color: var(--wp-surface) !important; } [data-theme="dark"] .text-dark { color: var(--wp-text) !important; } [data-theme="dark"] .text-muted, [data-theme="dark"] .text-secondary { color: var(--wp-muted) !important; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] input, [data-theme="dark"] .input-group-text { background-color: var(--wp-surface) !important; color: var(--wp-text) !important; border-color: var(--wp-border) !important; } /* Native