/* ============================================================================= UIKit — tokens ----------------------------------------------------------------------------- The single file where the look of the whole site is declared. Two layers, and the order matters: 1. PRIMITIVES --ui-- raw values. Never used by components. 2. SEMANTICS --ui-color- roles. This is what components use. A repaint (dark theme, seasonal skin, white-label) redefines layer 2 only. Layer 1 is the paint box and stays put. Scales are finite on purpose: 7 font sizes, 8 spacing steps, 4 radii, 3 shadows. Values were collapsed from what custom.css / components.css / questions.css / tags.css already used — this is a consolidation of the existing vocabulary, not a new one. The last block bridges these tokens into Bootstrap's own --bs-* variables so that framework components repaint themselves. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. PRIMITIVES -------------------------------------------------------------------------- */ :root { /* --- Brand: teal. #0ABAB5 and #0097A7 are the historical project colors. */ --ui-teal-50: #E6F7F7; --ui-teal-100: #C2ECEB; --ui-teal-500: #0ABAB5; --ui-teal-600: #0097A7; --ui-teal-700: #007681; --ui-teal-800: #005F66; --ui-teal-500-rgb: 10, 186, 181; /* --- Brand: coral. Secondary accent, historical --accent-color. */ --ui-coral-500: #FF6F61; --ui-coral-600: #E5634F; /* --- Neutrals. The grays the project already speaks. */ --ui-white: #FFFFFF; --ui-gray-50: #F8F9FA; --ui-gray-100: #F1F3F5; --ui-gray-200: #E9ECEF; --ui-gray-300: #DEE2E6; --ui-gray-400: #CED4DA; --ui-gray-500: #ADB5BD; --ui-gray-600: #6C757D; --ui-gray-650: #5C636A; /* darkened gray-600: muted text that clears 4.5:1 */ --ui-gray-700: #495057; --ui-gray-800: #343A40; --ui-gray-900: #212529; --ui-white-rgb: 255, 255, 255; --ui-gray-800-rgb: 52, 58, 64; /* --- Status hues. Difficulty colors are brand-critical: do not drift. Each hue carries three values: the identity color, a 10% surface tint (the project's existing rgba(...,0.1) badges), and a dark text color readable on that tint. All three text colors below are values the project already used. */ --ui-green-500: #28A745; --ui-green-soft: rgba(40, 167, 69, 0.1); --ui-green-800: #155724; --ui-amber-500: #FFC107; --ui-amber-soft: rgba(255, 193, 7, 0.1); --ui-amber-800: #664D03; --ui-red-500: #DC3545; --ui-red-soft: rgba(220, 53, 69, 0.1); --ui-red-800: #842029; --ui-cyan-500: #0DCAF0; --ui-cyan-soft: rgba(13, 202, 240, 0.1); --ui-cyan-800: #055160; /* --- Typography primitives */ --ui-font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --ui-font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ----------------------------------------------------------------------------- 2. SCALES Finite and named. Adding a ninth spacing step or an eighth font size is a constitution violation, not a judgement call — pick the nearest step instead. -------------------------------------------------------------------------- */ :root { /* --- Type scale. 7 steps, ratio ~1.15 in the body range and ~1.3 in the heading range: dense where labels live, open where headings live. */ --ui-font-size-xs: 0.75rem; /* 12px — counters, meta, captions */ --ui-font-size-sm: 0.875rem; /* 14px — secondary text, badges, table body */ --ui-font-size-md: 1rem; /* 16px — body text. The default. */ --ui-font-size-lg: 1.25rem; /* 20px — lead paragraphs, card titles */ --ui-font-size-xl: 1.5rem; /* 24px — section headings */ --ui-font-size-2xl: 2rem; /* 32px — page subheadings */ --ui-font-size-3xl: 2.5rem; /* 40px — page title. Nothing goes above. */ --ui-font-weight-normal: 400; --ui-font-weight-medium: 500; --ui-font-weight-semibold: 600; --ui-font-weight-bold: 700; --ui-line-height-tight: 1.25; /* headings */ --ui-line-height-snug: 1.4; /* compact UI text, badges */ --ui-line-height-base: 1.6; /* body copy */ --ui-measure: 70ch; /* max comfortable line length for prose */ /* --- Spacing scale. 8 steps on a 4px grid. */ --ui-space-3xs: 0.25rem; /* 4px */ --ui-space-2xs: 0.5rem; /* 8px */ --ui-space-xs: 0.75rem; /* 12px */ --ui-space-sm: 1rem; /* 16px */ --ui-space-md: 1.5rem; /* 24px */ --ui-space-lg: 2rem; /* 32px */ --ui-space-xl: 3rem; /* 48px */ --ui-space-2xl: 4rem; /* 64px */ /* --- Radii. 4 steps. `50%` for circular avatars/icon buttons is a shape, not a scale step, and stays a literal in the component. */ --ui-radius-sm: 0.5rem; /* controls: buttons, inputs, small tiles */ --ui-radius-md: 1rem; /* cards, panels */ --ui-radius-lg: 2rem; /* hero blocks, large surfaces */ --ui-radius-pill: 50rem; /* badges, chips, pill buttons */ /* --- Shadows. 3 steps, kept byte-for-byte from custom.css. */ --ui-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05); /* resting card, navbar */ --ui-shadow-md: 0 5px 15px rgba(0, 0, 0, 0.05); /* raised card */ --ui-shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.1); /* hovered card, dropdown */ /* --- Motion. Product UI: users are in a task, not watching a show. */ --ui-duration-fast: 150ms; /* hover, focus, color changes */ --ui-duration-base: 250ms; /* reveals, collapses */ --ui-easing-standard: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */ --ui-transition-color: color var(--ui-duration-fast) var(--ui-easing-standard), background-color var(--ui-duration-fast) var(--ui-easing-standard), border-color var(--ui-duration-fast) var(--ui-easing-standard); } /* ----------------------------------------------------------------------------- 3. SEMANTICS Roles, not colors. Components use only these. A second theme is one redefinition of this block and nothing else — see the dark block below. -------------------------------------------------------------------------- */ :root { /* --- Surfaces: what things sit on */ --ui-color-surface: var(--ui-white); /* cards, modals, page */ --ui-color-surface-sunken: var(--ui-gray-50); /* wells, striped rows */ --ui-color-surface-raised: var(--ui-gray-100); /* hovered rows, chips */ --ui-color-surface-inverse: var(--ui-gray-800); /* footer, dark panels */ --ui-color-backdrop: rgba(var(--ui-gray-800-rgb), 0.6); /* overlays */ --ui-color-surface-rgb: var(--ui-white-rgb); /* for rgba() composition */ /* --- Text */ --ui-color-text: var(--ui-gray-800); /* body and headings */ --ui-color-text-muted: var(--ui-gray-650); /* meta, captions, hints */ --ui-color-text-inverse: var(--ui-white); /* text on inverse surfaces */ --ui-color-text-on-accent: var(--ui-white); /* text on accent fills */ --ui-color-text-rgb: var(--ui-gray-800-rgb); /* --- Borders */ --ui-color-border: var(--ui-gray-300); /* default hairline */ --ui-color-border-strong: var(--ui-gray-400); /* form controls, dividers */ --ui-color-border-subtle: var(--ui-gray-200); /* inside quiet containers */ --ui-color-border-translucent: rgba(0, 0, 0, 0.1); /* hairline over any bg */ /* --- Accent: the brand. Primary actions, current selection, active state. */ --ui-color-accent: var(--ui-teal-500); --ui-color-accent-hover: var(--ui-teal-600); --ui-color-accent-active: var(--ui-teal-700); --ui-color-accent-soft: var(--ui-teal-50); /* tinted accent background */ --ui-color-accent-border: var(--ui-teal-100); /* border of a tinted block */ --ui-color-accent-text: var(--ui-teal-700); /* accent-colored text */ --ui-color-accent-rgb: var(--ui-teal-500-rgb); /* Акцент как ЗАЛИВКА ПОД ТЕКСТОМ — отдельная роль, и вот почему: белый на фирменном #0ABAB5 даёт ≈2.4:1, а подписи кнопок и чипов (14–16px) не считаются крупным текстом, порог для них 4.5:1. Под текстом идёт затемнённая бирюза (4.9:1 и 7.4:1 с белым), сам бренд не меняется: рамки, иконки, подложки и полосы прогресса по-прежнему --ui-color-accent. */ --ui-color-accent-solid: var(--ui-teal-700); --ui-color-accent-solid-hover: var(--ui-teal-800); /* --- Secondary accent. Sparingly: never for primary actions. */ --ui-color-highlight: var(--ui-coral-500); --ui-color-highlight-hover: var(--ui-coral-600); /* --- Links. teal-600 on white is 3.5:1 — under the 4.5:1 body-text floor, and this is the colour of every link on the site plus the caption of the secondary and ghost buttons. It moves down a step, as accent-text already did; the hover follows so the two states stay distinguishable. */ --ui-color-link: var(--ui-teal-700); --ui-color-link-hover: var(--ui-teal-800); --ui-color-link-rgb: 0, 118, 129; --ui-color-link-hover-rgb: 0, 95, 102; /* --- Focus. Never removed, only restyled. */ --ui-color-focus: var(--ui-teal-600); --ui-focus-ring: 0 0 0 0.25rem rgba(var(--ui-teal-500-rgb), 0.25); /* --- Status. Each role: fill / tint surface / text readable on the tint. */ --ui-color-success: var(--ui-green-500); --ui-color-success-surface: var(--ui-green-soft); --ui-color-success-text: var(--ui-green-800); --ui-color-success-rgb: 40, 167, 69; --ui-color-warning: var(--ui-amber-500); --ui-color-warning-surface: var(--ui-amber-soft); --ui-color-warning-text: var(--ui-amber-800); --ui-color-warning-rgb: 255, 193, 7; --ui-color-danger: var(--ui-red-500); --ui-color-danger-surface: var(--ui-red-soft); --ui-color-danger-text: var(--ui-red-800); --ui-color-danger-rgb: 220, 53, 69; --ui-color-info: var(--ui-cyan-500); --ui-color-info-surface: var(--ui-cyan-soft); --ui-color-info-text: var(--ui-cyan-800); --ui-color-info-rgb: 13, 202, 240; /* --- Difficulty. Brand-critical: these three hues are how the site reads at a glance. Identity color = the hue itself; -surface = badge fill; -text = the label color that stays legible on that fill. */ --ui-color-difficulty-easy: var(--ui-green-500); --ui-color-difficulty-easy-surface: var(--ui-green-soft); --ui-color-difficulty-easy-text: var(--ui-green-800); --ui-color-difficulty-medium: var(--ui-amber-500); --ui-color-difficulty-medium-surface: var(--ui-amber-soft); --ui-color-difficulty-medium-text: var(--ui-amber-800); --ui-color-difficulty-hard: var(--ui-red-500); --ui-color-difficulty-hard-surface: var(--ui-red-soft); --ui-color-difficulty-hard-text: var(--ui-red-800); /* --- Disabled */ --ui-color-disabled-surface: var(--ui-gray-200); --ui-color-disabled-text: var(--ui-gray-600); } /* ----------------------------------------------------------------------------- 4. DARK THEME — declared, deliberately not activated. There is no switcher anywhere in the project and this ticket does not add one. The block exists to prove the semantic layer is complete: every color the site can render is reachable from here. Bootstrap 5.3 reads the same [data-bs-theme] attribute natively, so the day a switcher lands, this is the whole of the work. -------------------------------------------------------------------------- */ [data-bs-theme="dark"] { --ui-color-surface: var(--ui-gray-900); --ui-color-surface-sunken: #1A1D20; --ui-color-surface-raised: #2B3035; --ui-color-surface-inverse: var(--ui-gray-100); --ui-color-backdrop: rgba(0, 0, 0, 0.7); --ui-color-surface-rgb: 33, 37, 41; --ui-color-text: #E9ECEF; --ui-color-text-muted: #ADB5BD; --ui-color-text-inverse: var(--ui-gray-900); --ui-color-text-on-accent: var(--ui-gray-900); --ui-color-text-rgb: 233, 236, 239; --ui-color-border: #3A4046; --ui-color-border-strong: #4A5157; --ui-color-border-subtle: #2B3035; --ui-color-border-translucent: rgba(255, 255, 255, 0.15); --ui-color-accent: #2FD4CF; --ui-color-accent-hover: #5FE0DC; --ui-color-accent-active: #8AEAE7; --ui-color-accent-soft: rgba(var(--ui-teal-500-rgb), 0.18); --ui-color-accent-border: #2F6B6A; --ui-color-accent-text: #8AEAE7; --ui-color-accent-rgb: 47, 212, 207; /* В тёмной теме заливка светлая, а текст на ней тёмный (--ui-color-text-on-accent здесь = gray-900), поэтому затемнять нечего: роль совпадает с самим акцентом. */ --ui-color-accent-solid: var(--ui-color-accent); --ui-color-accent-solid-hover: var(--ui-color-accent-hover); --ui-color-highlight: #FF8A7E; --ui-color-highlight-hover: #FFA79E; --ui-color-link: #4FDBD6; --ui-color-link-hover: #8AEAE7; --ui-color-link-rgb: 79, 219, 214; --ui-color-link-hover-rgb: 138, 234, 231; --ui-color-focus: #4FDBD6; --ui-focus-ring: 0 0 0 0.25rem rgba(79, 219, 214, 0.35); --ui-color-success-surface: rgba(40, 167, 69, 0.2); --ui-color-success-text: #75D68A; --ui-color-warning-surface: rgba(255, 193, 7, 0.2); --ui-color-warning-text: #FFDA6A; --ui-color-danger-surface: rgba(220, 53, 69, 0.2); --ui-color-danger-text: #EA868F; --ui-color-info-surface: rgba(13, 202, 240, 0.2); --ui-color-info-text: #6EDFF6; --ui-color-difficulty-easy-surface: rgba(40, 167, 69, 0.2); --ui-color-difficulty-easy-text: #75D68A; --ui-color-difficulty-medium-surface: rgba(255, 193, 7, 0.2); --ui-color-difficulty-medium-text: #FFDA6A; --ui-color-difficulty-hard-surface: rgba(220, 53, 69, 0.2); --ui-color-difficulty-hard-text: #EA868F; --ui-color-disabled-surface: #2B3035; --ui-color-disabled-text: var(--ui-gray-600); --ui-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.4); --ui-shadow-md: 0 5px 15px rgba(0, 0, 0, 0.45); --ui-shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.55); } /* ============================================================================= 5. BRIDGE INTO BOOTSTRAP Bootstrap 5.3 exposes two levels of CSS variables. Global ones live on :root and drive utilities (.text-primary, .bg-primary, borders, radii). Component ones (--bs-btn-*, --bs-pagination-*, ...) are read by the component's own rules; the compiled .btn-primary does NOT read --bs-primary, so its colors are handed over per component below. This is Bootstrap's documented theming API, not an override war: every declaration here sets a variable the framework asks for. No !important appears in this file, and none should ever need to. ============================================================================= */ :root { /* --- Global */ --bs-primary: var(--ui-color-accent); --bs-primary-rgb: var(--ui-color-accent-rgb); --bs-primary-text-emphasis: var(--ui-color-accent-text); --bs-primary-bg-subtle: var(--ui-color-accent-soft); --bs-primary-border-subtle: var(--ui-color-accent-border); --bs-success: var(--ui-color-success); --bs-success-rgb: var(--ui-color-success-rgb); --bs-warning: var(--ui-color-warning); --bs-warning-rgb: var(--ui-color-warning-rgb); --bs-danger: var(--ui-color-danger); --bs-danger-rgb: var(--ui-color-danger-rgb); --bs-info: var(--ui-color-info); --bs-info-rgb: var(--ui-color-info-rgb); --bs-body-font-family: var(--ui-font-sans); --bs-body-font-size: var(--ui-font-size-md); --bs-body-line-height: var(--ui-line-height-base); --bs-body-color: var(--ui-color-text); --bs-body-color-rgb: var(--ui-color-text-rgb); --bs-body-bg: var(--ui-color-surface); --bs-body-bg-rgb: var(--ui-color-surface-rgb); --bs-emphasis-color: var(--ui-color-text); --bs-secondary-color: var(--ui-color-text-muted); /* --bs-heading-color намеренно НЕ переопределяется: его значение по умолчанию `inherit` — именно оно позволяет заголовку внутри цветного hero-блока наследовать цвет блока, а не перебивать его. */ --bs-secondary-bg: var(--ui-color-surface-sunken); --bs-tertiary-bg: var(--ui-color-surface-raised); --bs-border-color: var(--ui-color-border); --bs-border-color-translucent: var(--ui-color-border-translucent); --bs-link-color: var(--ui-color-link); --bs-link-hover-color: var(--ui-color-link-hover); --bs-link-color-rgb: var(--ui-color-link-rgb); --bs-link-hover-color-rgb: var(--ui-color-link-hover-rgb); --bs-border-radius: var(--ui-radius-sm); --bs-border-radius-sm: var(--ui-radius-sm); --bs-border-radius-lg: var(--ui-radius-md); --bs-border-radius-xl: var(--ui-radius-md); --bs-border-radius-xxl: var(--ui-radius-lg); --bs-border-radius-pill: var(--ui-radius-pill); --bs-box-shadow: var(--ui-shadow-md); --bs-box-shadow-sm: var(--ui-shadow-sm); --bs-box-shadow-lg: var(--ui-shadow-lg); --bs-focus-ring-color: rgba(var(--ui-color-accent-rgb), 0.25); --bs-focus-ring-width: 0.25rem; } /* --- Buttons. Filled primary. */ .btn-primary { --bs-btn-bg: var(--ui-color-accent-solid); --bs-btn-border-color: var(--ui-color-accent-solid); --bs-btn-color: var(--ui-color-text-on-accent); --bs-btn-hover-bg: var(--ui-color-accent-solid-hover); --bs-btn-hover-border-color: var(--ui-color-accent-solid-hover); --bs-btn-hover-color: var(--ui-color-text-on-accent); --bs-btn-active-bg: var(--ui-color-accent-solid-hover); --bs-btn-active-border-color: var(--ui-color-accent-solid-hover); --bs-btn-active-color: var(--ui-color-text-on-accent); --bs-btn-disabled-bg: var(--ui-color-accent-solid); --bs-btn-disabled-border-color: var(--ui-color-accent-solid); --bs-btn-disabled-color: var(--ui-color-text-on-accent); --bs-btn-focus-shadow-rgb: var(--ui-color-accent-rgb); } /* --- Buttons. Outline primary. */ .btn-outline-primary { --bs-btn-color: var(--ui-color-link); --bs-btn-border-color: var(--ui-color-accent); --bs-btn-hover-bg: var(--ui-color-accent-solid); --bs-btn-hover-border-color: var(--ui-color-accent-solid); --bs-btn-hover-color: var(--ui-color-text-on-accent); --bs-btn-active-bg: var(--ui-color-accent-solid-hover); --bs-btn-active-border-color: var(--ui-color-accent-solid-hover); --bs-btn-active-color: var(--ui-color-text-on-accent); --bs-btn-disabled-color: var(--ui-color-disabled-text); --bs-btn-disabled-border-color: var(--ui-color-border); --bs-btn-focus-shadow-rgb: var(--ui-color-accent-rgb); } /* --- Links styled as buttons */ .btn-link { --bs-btn-color: var(--ui-color-link); --bs-btn-hover-color: var(--ui-color-link-hover); --bs-btn-active-color: var(--ui-color-link-hover); --bs-btn-focus-shadow-rgb: var(--ui-color-accent-rgb); } /* --- Forms. Bootstrap 5.3 compiles the focus, checked and thumb colors of its controls literally, so they cannot be handed over through a variable. Those declarations live in components.css: this file declares variables and only variables. */ /* --- Pagination */ .pagination { --bs-pagination-color: var(--ui-color-text); --bs-pagination-bg: transparent; --bs-pagination-border-color: transparent; --bs-pagination-border-radius: var(--ui-radius-sm); --bs-pagination-hover-color: var(--ui-color-link); --bs-pagination-hover-bg: var(--ui-color-surface-sunken); --bs-pagination-hover-border-color: transparent; --bs-pagination-focus-color: var(--ui-color-link); --bs-pagination-focus-bg: var(--ui-color-surface-sunken); --bs-pagination-focus-box-shadow: var(--ui-focus-ring); --bs-pagination-active-color: var(--ui-color-text-on-accent); --bs-pagination-active-bg: var(--ui-color-accent-solid); --bs-pagination-active-border-color: var(--ui-color-accent-solid); --bs-pagination-disabled-color: var(--ui-color-disabled-text); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-border-color: transparent; } /* --- Nav / tabs */ .nav { --bs-nav-link-color: var(--ui-color-text); --bs-nav-link-hover-color: var(--ui-color-link); --bs-nav-link-disabled-color: var(--ui-color-disabled-text); } .nav-tabs { --bs-nav-tabs-border-color: var(--ui-color-border); --bs-nav-tabs-link-active-color: var(--ui-color-link); --bs-nav-tabs-link-active-bg: var(--ui-color-surface); --bs-nav-tabs-link-active-border-color: var(--ui-color-border) var(--ui-color-border) var(--ui-color-surface); } .nav-pills { --bs-nav-pills-border-radius: var(--ui-radius-pill); --bs-nav-pills-link-active-color: var(--ui-color-text-on-accent); --bs-nav-pills-link-active-bg: var(--ui-color-accent-solid); } /* --- Dropdowns */ .dropdown-menu { --bs-dropdown-bg: var(--ui-color-surface); --bs-dropdown-color: var(--ui-color-text); --bs-dropdown-border-color: var(--ui-color-border-subtle); --bs-dropdown-border-radius: var(--ui-radius-md); --bs-dropdown-box-shadow: var(--ui-shadow-md); --bs-dropdown-link-color: var(--ui-color-text); --bs-dropdown-link-hover-color: var(--ui-color-link); --bs-dropdown-link-hover-bg: var(--ui-color-surface-sunken); --bs-dropdown-link-active-color: var(--ui-color-text-on-accent); --bs-dropdown-link-active-bg: var(--ui-color-accent-solid); --bs-dropdown-divider-bg: var(--ui-color-border-subtle); } /* --- Modals */ .modal { --bs-modal-bg: var(--ui-color-surface); --bs-modal-color: var(--ui-color-text); --bs-modal-border-color: var(--ui-color-border-subtle); --bs-modal-border-radius: var(--ui-radius-md); --bs-modal-box-shadow: var(--ui-shadow-lg); --bs-modal-header-border-color: var(--ui-color-border-subtle); --bs-modal-footer-border-color: var(--ui-color-border-subtle); } /* Прозрачность уже внутри --ui-color-backdrop, поэтому opacity = 1: иначе тёмная тема получила бы светлую подложку под модалкой. */ .modal-backdrop, .offcanvas-backdrop { --bs-backdrop-bg: var(--ui-color-backdrop); --bs-backdrop-opacity: 1; } /* --- Offcanvas */ .offcanvas, .offcanvas-start, .offcanvas-end, .offcanvas-top, .offcanvas-bottom { --bs-offcanvas-bg: var(--ui-color-surface); --bs-offcanvas-color: var(--ui-color-text); --bs-offcanvas-border-color: var(--ui-color-border-subtle); } /* --- Toasts */ .toast { --bs-toast-bg: var(--ui-color-surface); --bs-toast-color: var(--ui-color-text); --bs-toast-border-color: var(--ui-color-border-subtle); --bs-toast-border-radius: var(--ui-radius-sm); --bs-toast-box-shadow: var(--ui-shadow-md); --bs-toast-header-color: var(--ui-color-text-muted); --bs-toast-header-bg: var(--ui-color-surface-sunken); --bs-toast-header-border-color: var(--ui-color-border-subtle); } /* --- Cards */ .card { --bs-card-bg: var(--ui-color-surface); --bs-card-color: var(--ui-color-text); --bs-card-border-color: var(--ui-color-border-subtle); --bs-card-border-radius: var(--ui-radius-md); --bs-card-cap-bg: var(--ui-color-surface-sunken); } /* --- Alerts */ .alert-primary { --bs-alert-color: var(--ui-color-accent-text); --bs-alert-bg: var(--ui-color-accent-soft); --bs-alert-border-color: var(--ui-color-accent-border); } .alert-success { --bs-alert-color: var(--ui-color-success-text); --bs-alert-bg: var(--ui-color-success-surface); --bs-alert-border-color: var(--ui-color-success); } .alert-warning { --bs-alert-color: var(--ui-color-warning-text); --bs-alert-bg: var(--ui-color-warning-surface); --bs-alert-border-color: var(--ui-color-warning); } .alert-danger { --bs-alert-color: var(--ui-color-danger-text); --bs-alert-bg: var(--ui-color-danger-surface); --bs-alert-border-color: var(--ui-color-danger); } .alert-info { --bs-alert-color: var(--ui-color-info-text); --bs-alert-bg: var(--ui-color-info-surface); --bs-alert-border-color: var(--ui-color-info); } /* --- Progress */ .progress, .progress-stacked { --bs-progress-bg: var(--ui-color-surface-raised); --bs-progress-bar-bg: var(--ui-color-accent); --bs-progress-border-radius: var(--ui-radius-pill); } /* --- List groups */ .list-group { --bs-list-group-bg: var(--ui-color-surface); --bs-list-group-color: var(--ui-color-text); --bs-list-group-border-color: var(--ui-color-border-subtle); --bs-list-group-border-radius: var(--ui-radius-sm); --bs-list-group-action-hover-bg: var(--ui-color-surface-sunken); --bs-list-group-action-hover-color: var(--ui-color-text); --bs-list-group-active-bg: var(--ui-color-accent-solid); --bs-list-group-active-border-color: var(--ui-color-accent-solid); --bs-list-group-active-color: var(--ui-color-text-on-accent); --bs-list-group-disabled-color: var(--ui-color-disabled-text); } /* --- Tables */ .table { --bs-table-color: var(--ui-color-text); --bs-table-bg: transparent; --bs-table-border-color: var(--ui-color-border-subtle); --bs-table-striped-bg: var(--ui-color-surface-sunken); --bs-table-hover-bg: var(--ui-color-surface-raised); } /* --- Badges. Bootstrap sizes badges relatively; only the shape is ours. */ .badge { --bs-badge-border-radius: var(--ui-radius-pill); } /* --- Accordion */ .accordion { --bs-accordion-bg: var(--ui-color-surface); --bs-accordion-color: var(--ui-color-text); --bs-accordion-border-color: var(--ui-color-border-subtle); --bs-accordion-border-radius: var(--ui-radius-md); --bs-accordion-btn-color: var(--ui-color-text); --bs-accordion-btn-focus-box-shadow: var(--ui-focus-ring); --bs-accordion-active-color: var(--ui-color-link); --bs-accordion-active-bg: var(--ui-color-accent-soft); }