/* ============================================================================= cd-theme.css ยท layer 3: corporate design -> Bootstrap 5.3 ----------------------------------------------------------------------------- Maps the --cd-* role tokens onto the CSS variables of Bootstrap and overrides the few components that Bootstrap still compiles with fixed colour values (buttons, form focus, checkboxes). Order in : bootstrap.min.css -> cd-tokens.css -> cd-theme.css -> cd-app.css The selectors deliberately use :root[data-bs-theme=...] so that they beat the equally named Bootstrap rules regardless of the load order. ============================================================================= */ :root, :root[data-bs-theme="light"], :root[data-bs-theme="dark"] { /* --- Typography & shape ---------------------------------------------------- */ --bs-font-sans-serif: var(--cd-font-sans); --bs-font-monospace: var(--cd-font-mono); --bs-body-font-family: var(--cd-font-sans); --bs-body-font-size: 0.9375rem; --bs-body-line-height: 1.6; --bs-border-radius: var(--cd-radius); --bs-border-radius-sm: var(--cd-radius-sm); --bs-border-radius-lg: var(--cd-radius-lg); --bs-border-radius-xl: 1.25rem; --bs-border-radius-pill: var(--cd-radius-pill); --bs-box-shadow-sm: var(--cd-shadow-sm); --bs-box-shadow: var(--cd-shadow-md); --bs-box-shadow-lg: var(--cd-shadow-lg); /* --- Surfaces & text -------------------------------------------------------- */ --bs-body-bg: var(--cd-body-bg); --bs-body-color: var(--cd-body-color); --bs-emphasis-color: var(--cd-heading-color); --bs-heading-color: var(--cd-heading-color); --bs-secondary-color: var(--cd-muted-color); --bs-secondary-bg: var(--cd-surface-2); --bs-tertiary-color: var(--cd-muted-color); --bs-tertiary-bg: var(--cd-surface-3); --bs-border-color: var(--cd-border); --bs-border-color-translucent: var(--cd-border); --bs-code-color: var(--cd-accent-text); --bs-highlight-bg: var(--cd-accent-subtle-bg); --bs-highlight-color: var(--cd-accent-subtle-text); /* --- Links ---------------------------------------------------------------- */ --bs-link-color: var(--cd-brand-text); --bs-link-color-rgb: var(--cd-brand-rgb); --bs-link-hover-color: var(--cd-brand-text-hover); --bs-link-hover-color-rgb: var(--cd-brand-rgb); /* --- Focus (keyboard operation) ----------------------------------------- */ --bs-focus-ring-width: var(--cd-focus-width); --bs-focus-ring-opacity: 1; --bs-focus-ring-color: rgba(var(--cd-brand-rgb), .38); /* --- Theme colours --------------------------------------------------------- */ --bs-primary: var(--cd-brand); --bs-primary-rgb: var(--cd-brand-rgb); --bs-primary-text-emphasis: var(--cd-brand-subtle-text); --bs-primary-bg-subtle: var(--cd-brand-subtle-bg); --bs-primary-border-subtle: var(--cd-brand-subtle-border); --bs-secondary: var(--cd-muted-color); --bs-secondary-text-emphasis: var(--cd-body-color); --bs-secondary-bg-subtle: var(--cd-surface-2); --bs-secondary-border-subtle: var(--cd-border); --bs-success: var(--cd-success); --bs-success-rgb: var(--cd-success-rgb); --bs-success-text-emphasis: var(--cd-success-subtle-text); --bs-success-bg-subtle: var(--cd-success-subtle-bg); --bs-success-border-subtle: var(--cd-success-subtle-border); --bs-warning: var(--cd-warning); --bs-warning-rgb: var(--cd-warning-rgb); --bs-warning-text-emphasis: var(--cd-warning-subtle-text); --bs-warning-bg-subtle: var(--cd-warning-subtle-bg); --bs-warning-border-subtle: var(--cd-warning-subtle-border); --bs-danger: var(--cd-danger); --bs-danger-rgb: var(--cd-danger-rgb); --bs-danger-text-emphasis: var(--cd-danger-subtle-text); --bs-danger-bg-subtle: var(--cd-danger-subtle-bg); --bs-danger-border-subtle: var(--cd-danger-subtle-border); --bs-info: var(--cd-info); --bs-info-rgb: var(--cd-info-rgb); --bs-info-text-emphasis: var(--cd-info-subtle-text); --bs-info-bg-subtle: var(--cd-info-subtle-bg); --bs-info-border-subtle: var(--cd-info-subtle-border); /* Form validation */ --bs-form-valid-color: var(--cd-success-text); --bs-form-valid-border-color: var(--cd-success); --bs-form-invalid-color: var(--cd-danger-text); --bs-form-invalid-border-color: var(--cd-danger); } /* ============================================================================= Brand band - the unifying CD element of the corporate group. Applied as a 4px line across topbar, login cards and footer. ============================================================================= */ :root, [data-cd-brand="group"] { --cd-band: linear-gradient(90deg, var(--cd-blue-500) 0 25%, var(--cd-orange-500) 25% 50%, var(--cd-green-500) 50% 75%, var(--cd-red-500) 75% 100%); } [data-cd-brand="c01"] { --cd-band: linear-gradient(90deg, var(--cd-blue-500) 0 40%, var(--cd-orange-500) 40% 72%, var(--cd-green-500) 72% 100%); } [data-cd-brand="c02"] { --cd-band: linear-gradient(90deg, var(--cd-red-500) 0 70%, var(--cd-slate-500) 70% 100%); } [data-bs-theme="dark"][data-cd-brand="c02"] { --cd-band: linear-gradient(90deg, var(--cd-red-400) 0 70%, var(--cd-slate-300) 70% 100%); } .cd-band { height: 4px; background: var(--cd-band); border: 0; opacity: 1; margin: 0; } .cd-band-top { border-radius: var(--cd-radius) var(--cd-radius) 0 0; } /* ============================================================================= Buttons - Bootstrap compiles these with fixed colour values, hence the overrides. ============================================================================= */ .btn { --bs-btn-font-weight: 500; transition: background-color var(--cd-transition), border-color var(--cd-transition), color var(--cd-transition), box-shadow var(--cd-transition); } .btn-primary { --bs-btn-color: var(--cd-brand-on-solid); --bs-btn-bg: var(--cd-brand-solid); --bs-btn-border-color: var(--cd-brand-solid); --bs-btn-hover-color: var(--cd-brand-on-solid); --bs-btn-hover-bg: var(--cd-brand-solid-hover); --bs-btn-hover-border-color: var(--cd-brand-solid-hover); --bs-btn-focus-shadow-rgb: var(--cd-brand-rgb); --bs-btn-active-color: var(--cd-brand-on-solid); --bs-btn-active-bg: var(--cd-brand-solid-active); --bs-btn-active-border-color: var(--cd-brand-solid-active); --bs-btn-disabled-color: var(--cd-brand-on-solid); --bs-btn-disabled-bg: var(--cd-brand-solid); --bs-btn-disabled-border-color: var(--cd-brand-solid); } .btn-outline-primary { --bs-btn-color: var(--cd-brand-text); --bs-btn-border-color: var(--cd-brand); --bs-btn-hover-color: var(--cd-brand-on-solid); --bs-btn-hover-bg: var(--cd-brand-solid); --bs-btn-hover-border-color: var(--cd-brand-solid); --bs-btn-focus-shadow-rgb: var(--cd-brand-rgb); --bs-btn-active-color: var(--cd-brand-on-solid); --bs-btn-active-bg: var(--cd-brand-solid-active); --bs-btn-active-border-color: var(--cd-brand-solid-active); --bs-btn-disabled-color: var(--cd-brand-text); --bs-btn-disabled-border-color: var(--cd-brand); } /* Additional buttons for the accent colours (not part of Bootstrap) */ .btn-accent { --bs-btn-color: var(--cd-accent-on-solid); --bs-btn-bg: var(--cd-accent-solid); --bs-btn-border-color: var(--cd-accent-solid); --bs-btn-hover-color: var(--cd-accent-on-solid); --bs-btn-hover-bg: var(--cd-accent-solid-hover); --bs-btn-hover-border-color: var(--cd-accent-solid-hover); --bs-btn-focus-shadow-rgb: var(--cd-accent-rgb); --bs-btn-active-color: var(--cd-accent-on-solid); --bs-btn-active-bg: var(--cd-accent-solid-active); --bs-btn-active-border-color: var(--cd-accent-solid-active); --bs-btn-disabled-color: var(--cd-accent-on-solid); --bs-btn-disabled-bg: var(--cd-accent-solid); --bs-btn-disabled-border-color: var(--cd-accent-solid); } .btn-outline-accent { --bs-btn-color: var(--cd-accent-text); --bs-btn-border-color: var(--cd-accent); --bs-btn-hover-color: var(--cd-accent-on-solid); --bs-btn-hover-bg: var(--cd-accent-solid); --bs-btn-hover-border-color: var(--cd-accent-solid); --bs-btn-focus-shadow-rgb: var(--cd-accent-rgb); --bs-btn-active-color: var(--cd-accent-on-solid); --bs-btn-active-bg: var(--cd-accent-solid-active); --bs-btn-active-border-color: var(--cd-accent-solid-active); --bs-btn-disabled-color: var(--cd-accent-text); --bs-btn-disabled-border-color: var(--cd-accent); } .btn-accent-2 { --bs-btn-color: var(--cd-accent-2-on-solid); --bs-btn-bg: var(--cd-accent-2-solid); --bs-btn-border-color: var(--cd-accent-2-solid); --bs-btn-hover-color: var(--cd-accent-2-on-solid); --bs-btn-hover-bg: var(--cd-accent-2-solid-hover); --bs-btn-hover-border-color: var(--cd-accent-2-solid-hover); --bs-btn-focus-shadow-rgb: var(--cd-accent-2-rgb); --bs-btn-active-color: var(--cd-accent-2-on-solid); --bs-btn-active-bg: var(--cd-accent-2-solid-active); --bs-btn-active-border-color: var(--cd-accent-2-solid-active); --bs-btn-disabled-color: var(--cd-accent-2-on-solid); --bs-btn-disabled-bg: var(--cd-accent-2-solid); --bs-btn-disabled-border-color: var(--cd-accent-2-solid); } .btn-success { --bs-btn-color: var(--cd-success-on-solid); --bs-btn-bg: var(--cd-success-solid); --bs-btn-border-color: var(--cd-success-solid); --bs-btn-hover-color: var(--cd-success-on-solid); --bs-btn-hover-bg: var(--cd-success-solid-hover); --bs-btn-hover-border-color: var(--cd-success-solid-hover); --bs-btn-focus-shadow-rgb: var(--cd-success-rgb); --bs-btn-active-color: var(--cd-success-on-solid); --bs-btn-active-bg: var(--cd-success-solid-active); --bs-btn-active-border-color: var(--cd-success-solid-active); --bs-btn-disabled-color: var(--cd-success-on-solid); --bs-btn-disabled-bg: var(--cd-success-solid); --bs-btn-disabled-border-color: var(--cd-success-solid); } .btn-danger { --bs-btn-color: var(--cd-danger-on-solid); --bs-btn-bg: var(--cd-danger-solid); --bs-btn-border-color: var(--cd-danger-solid); --bs-btn-hover-color: var(--cd-danger-on-solid); --bs-btn-hover-bg: var(--cd-danger-solid-hover); --bs-btn-hover-border-color: var(--cd-danger-solid-hover); --bs-btn-focus-shadow-rgb: var(--cd-danger-rgb); --bs-btn-active-color: var(--cd-danger-on-solid); --bs-btn-active-bg: var(--cd-danger-solid-active); --bs-btn-active-border-color: var(--cd-danger-solid-active); --bs-btn-disabled-color: var(--cd-danger-on-solid); --bs-btn-disabled-bg: var(--cd-danger-solid); --bs-btn-disabled-border-color: var(--cd-danger-solid); } .btn-warning { --bs-btn-color: var(--cd-warning-on-solid); --bs-btn-bg: var(--cd-warning-solid); --bs-btn-border-color: var(--cd-warning-solid); --bs-btn-hover-color: var(--cd-warning-on-solid); --bs-btn-hover-bg: var(--cd-warning-solid-hover); --bs-btn-hover-border-color: var(--cd-warning-solid-hover); --bs-btn-focus-shadow-rgb: var(--cd-warning-rgb); --bs-btn-active-color: var(--cd-warning-on-solid); --bs-btn-active-bg: var(--cd-warning-solid-active); --bs-btn-active-border-color: var(--cd-warning-solid-active); --bs-btn-disabled-color: var(--cd-warning-on-solid); --bs-btn-disabled-bg: var(--cd-warning-solid); --bs-btn-disabled-border-color: var(--cd-warning-solid); } .btn-info { --bs-btn-color: var(--cd-info-on-solid); --bs-btn-bg: var(--cd-info-solid); --bs-btn-border-color: var(--cd-info-solid); --bs-btn-hover-color: var(--cd-info-on-solid); --bs-btn-hover-bg: var(--cd-info-solid-hover); --bs-btn-hover-border-color: var(--cd-info-solid-hover); --bs-btn-focus-shadow-rgb: var(--cd-info-rgb); --bs-btn-active-color: var(--cd-info-on-solid); --bs-btn-active-bg: var(--cd-info-solid-active); --bs-btn-active-border-color: var(--cd-info-solid-active); --bs-btn-disabled-color: var(--cd-info-on-solid); --bs-btn-disabled-bg: var(--cd-info-solid); --bs-btn-disabled-border-color: var(--cd-info-solid); } .btn-secondary { --bs-btn-color: var(--cd-body-color); --bs-btn-bg: var(--cd-surface-2); --bs-btn-border-color: var(--cd-border); --bs-btn-hover-color: var(--cd-heading-color); --bs-btn-hover-bg: var(--cd-surface-3); --bs-btn-hover-border-color: var(--cd-border-strong); --bs-btn-focus-shadow-rgb: var(--cd-brand-rgb); --bs-btn-active-color: var(--cd-heading-color); --bs-btn-active-bg: var(--cd-surface-3); --bs-btn-active-border-color: var(--cd-border-strong); --bs-btn-disabled-color: var(--cd-muted-color); --bs-btn-disabled-bg: var(--cd-surface-2); --bs-btn-disabled-border-color: var(--cd-border); } .btn-light, .btn-outline-light { --bs-btn-color: var(--cd-body-color); --bs-btn-bg: var(--cd-surface); --bs-btn-border-color: var(--cd-border); --bs-btn-hover-color: var(--cd-heading-color); --bs-btn-hover-bg: var(--cd-surface-2); --bs-btn-hover-border-color: var(--cd-border-strong); --bs-btn-active-color: var(--cd-heading-color); --bs-btn-active-bg: var(--cd-surface-3); --bs-btn-active-border-color: var(--cd-border-strong); } .btn-link { --bs-btn-color: var(--cd-brand-text); --bs-btn-hover-color: var(--cd-brand-text-hover); } /* ============================================================================= Forms ============================================================================= */ .form-control, .form-select { --bs-body-bg: var(--cd-surface); border-color: var(--cd-border-strong); color: var(--cd-body-color); transition: border-color var(--cd-transition), box-shadow var(--cd-transition); } .form-control:focus, .form-select:focus { border-color: var(--cd-brand); box-shadow: 0 0 0 var(--cd-focus-width) rgba(var(--cd-brand-rgb), .28); } .form-control::placeholder { color: var(--cd-muted-color); opacity: 1; } .form-control:disabled, .form-select:disabled { background-color: var(--cd-surface-2); } .input-group-text { background-color: var(--cd-surface-2); border-color: var(--cd-border-strong); color: var(--cd-muted-color); } .form-label { font-weight: 500; color: var(--cd-heading-color); } .form-text { color: var(--cd-muted-color); } .form-check-input { background-color: var(--cd-surface); border-color: var(--cd-border-strong); } .form-check-input:focus { border-color: var(--cd-brand); box-shadow: 0 0 0 var(--cd-focus-width) rgba(var(--cd-brand-rgb), .28); } .form-check-input:checked { background-color: var(--cd-brand-solid); border-color: var(--cd-brand-solid); } .form-check-input[type="checkbox"]:indeterminate { background-color: var(--cd-brand-solid); border-color: var(--cd-brand-solid); } /* Align the check mark/dot with the text colour of the solid tone (light in light mode, dark in dark mode) - Bootstrap 5.3 does this via these variables. */ :root[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2310141A' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } :root[data-bs-theme="dark"] .form-check-input:checked[type="radio"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2310141A'/%3e%3c/svg%3e"); } :root[data-bs-theme="dark"] .form-switch .form-check-input:checked { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2310141A'/%3e%3c/svg%3e"); } .form-range::-webkit-slider-thumb { background-color: var(--cd-brand-solid); } .form-range::-moz-range-thumb { background-color: var(--cd-brand-solid); } /* ============================================================================= Cards, lists, tables, navigation ============================================================================= */ .card { --bs-card-bg: var(--cd-surface); --bs-card-border-color: var(--cd-border); --bs-card-cap-bg: transparent; --bs-card-border-radius: var(--cd-radius); --bs-card-inner-border-radius: calc(var(--cd-radius) - 1px); box-shadow: var(--cd-shadow-sm); } .card-header { border-bottom-color: var(--cd-border); font-weight: 600; color: var(--cd-heading-color); } .card-footer { border-top-color: var(--cd-border); background: transparent; } .list-group { --bs-list-group-bg: var(--cd-surface); --bs-list-group-border-color: var(--cd-border); --bs-list-group-color: var(--cd-body-color); --bs-list-group-action-hover-bg: var(--cd-surface-2); --bs-list-group-action-hover-color: var(--cd-heading-color); --bs-list-group-active-bg: var(--cd-brand-solid); --bs-list-group-active-border-color: var(--cd-brand-solid); --bs-list-group-active-color: var(--cd-brand-on-solid); } .table { --bs-table-bg: transparent; --bs-table-color: var(--cd-body-color); --bs-table-border-color: var(--cd-border); --bs-table-striped-bg: var(--cd-surface-2); --bs-table-striped-color: var(--cd-body-color); --bs-table-hover-bg: var(--cd-brand-subtle-bg); --bs-table-hover-color: var(--cd-heading-color); } .table > thead th { color: var(--cd-muted-color); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-bottom-color: var(--cd-border-strong); white-space: nowrap; } .nav-pills { --bs-nav-pills-border-radius: var(--cd-radius-pill); --bs-nav-link-color: var(--cd-body-color); --bs-nav-link-hover-color: var(--cd-brand-text); --bs-nav-pills-link-active-bg: var(--cd-brand-solid); --bs-nav-pills-link-active-color: var(--cd-brand-on-solid); } .nav-tabs { --bs-nav-tabs-border-color: var(--cd-border); --bs-nav-link-color: var(--cd-muted-color); --bs-nav-link-hover-color: var(--cd-brand-text); --bs-nav-tabs-link-active-color: var(--cd-brand-text); --bs-nav-tabs-link-active-bg: var(--cd-surface); --bs-nav-tabs-link-active-border-color: var(--cd-border) var(--cd-border) var(--cd-surface); } .dropdown-menu { --bs-dropdown-bg: var(--cd-surface); --bs-dropdown-border-color: var(--cd-border); --bs-dropdown-color: var(--cd-body-color); --bs-dropdown-link-color: var(--cd-body-color); --bs-dropdown-link-hover-bg: var(--cd-surface-2); --bs-dropdown-link-hover-color: var(--cd-heading-color); --bs-dropdown-link-active-bg: var(--cd-brand-solid); --bs-dropdown-link-active-color: var(--cd-brand-on-solid); --bs-dropdown-border-radius: var(--cd-radius); box-shadow: var(--cd-shadow-md); } .dropdown-divider { border-top-color: var(--cd-border); } .pagination { --bs-pagination-bg: var(--cd-surface); --bs-pagination-color: var(--cd-body-color); --bs-pagination-border-color: var(--cd-border); --bs-pagination-hover-bg: var(--cd-surface-2); --bs-pagination-hover-color: var(--cd-brand-text); --bs-pagination-hover-border-color: var(--cd-border); --bs-pagination-focus-bg: var(--cd-surface-2); --bs-pagination-focus-box-shadow: 0 0 0 var(--cd-focus-width) rgba(var(--cd-brand-rgb), .28); --bs-pagination-active-bg: var(--cd-brand-solid); --bs-pagination-active-border-color: var(--cd-brand-solid); --bs-pagination-active-color: var(--cd-brand-on-solid); --bs-pagination-disabled-bg: var(--cd-surface-2); --bs-pagination-disabled-color: var(--cd-muted-color); --bs-pagination-disabled-border-color: var(--cd-border); } .breadcrumb { --bs-breadcrumb-divider-color: var(--cd-muted-color); --bs-breadcrumb-item-active-color: var(--cd-muted-color); } .accordion { --bs-accordion-bg: var(--cd-surface); --bs-accordion-border-color: var(--cd-border); --bs-accordion-color: var(--cd-body-color); --bs-accordion-btn-color: var(--cd-heading-color); --bs-accordion-btn-bg: var(--cd-surface); --bs-accordion-active-color: var(--cd-brand-text); --bs-accordion-active-bg: var(--cd-brand-subtle-bg); --bs-accordion-btn-focus-box-shadow: 0 0 0 var(--cd-focus-width) rgba(var(--cd-brand-rgb), .28); --bs-accordion-border-radius: var(--cd-radius); } .modal, .offcanvas { --bs-modal-bg: var(--cd-surface); --bs-modal-border-color: var(--cd-border); --bs-modal-header-border-color: var(--cd-border); --bs-modal-footer-border-color: var(--cd-border); --bs-modal-border-radius: var(--cd-radius-lg); --bs-offcanvas-bg: var(--cd-surface); --bs-offcanvas-border-color: var(--cd-border); --bs-offcanvas-color: var(--cd-body-color); } .progress { --bs-progress-bg: var(--cd-surface-3); --bs-progress-bar-bg: var(--cd-brand-solid); --bs-progress-border-radius: var(--cd-radius-pill); } .tooltip { --bs-tooltip-bg: var(--cd-neutral-800); --bs-tooltip-color: var(--cd-neutral-0); } .popover { --bs-popover-bg: var(--cd-surface); --bs-popover-border-color: var(--cd-border); --bs-popover-header-bg: var(--cd-surface-2); } .alert { --bs-alert-border-color: transparent; border-left-width: 4px; } .badge { font-weight: 600; letter-spacing: .01em; } .spinner-border, .spinner-grow { color: var(--cd-brand); } hr { border-top-color: var(--cd-border); opacity: 1; } ::selection { background: rgba(var(--cd-brand-rgb), .28); } /* Keep focus visible in general (keyboard & screen reader) */ :focus-visible { outline: var(--cd-focus-width) solid rgba(var(--cd-brand-rgb), .55); outline-offset: 2px; } /* ============================================================================= Coloured surfaces with text (.text-bg-*) Bootstrap fixes white respectively black text here. In dark mode our solid tones are light - therefore take BOTH surface and text colour from the role tokens. ============================================================================= */ .text-bg-primary { background-color: var(--cd-brand-solid) !important; color: var(--cd-brand-on-solid) !important; } .text-bg-success { background-color: var(--cd-success-solid) !important; color: var(--cd-success-on-solid) !important; } .text-bg-danger { background-color: var(--cd-danger-solid) !important; color: var(--cd-danger-on-solid) !important; } .text-bg-warning { background-color: var(--cd-warning-solid) !important; color: var(--cd-warning-on-solid) !important; } .text-bg-info { background-color: var(--cd-info-solid) !important; color: var(--cd-info-on-solid) !important; } .text-bg-secondary { background-color: var(--cd-surface-3) !important; color: var(--cd-heading-color) !important; } .text-bg-accent { background-color: var(--cd-accent-solid) !important; color: var(--cd-accent-on-solid) !important; } .text-bg-accent-2 { background-color: var(--cd-accent-2-solid) !important; color: var(--cd-accent-2-on-solid) !important; } .bg-primary { background-color: var(--cd-brand-solid) !important; } .bg-accent { background-color: var(--cd-accent-solid) !important; } .bg-accent-2 { background-color: var(--cd-accent-2-solid) !important; } .bg-body-tertiary { background-color: var(--cd-surface-2) !important; } .bg-body-secondary { background-color: var(--cd-surface-2) !important; } .bg-body { background-color: var(--cd-surface) !important; } .text-primary { color: var(--cd-brand-text) !important; } .text-accent { color: var(--cd-accent-text) !important; } .text-accent-2 { color: var(--cd-accent-2-text) !important; } .text-success { color: var(--cd-success-text) !important; } .text-danger { color: var(--cd-danger-text) !important; } .text-warning { color: var(--cd-warning-text) !important; } .text-info { color: var(--cd-info-text) !important; } .text-body-secondary { color: var(--cd-muted-color) !important; } .border-primary { border-color: var(--cd-brand) !important; } .link-primary { color: var(--cd-brand-text) !important; } .link-primary:hover, .link-primary:focus { color: var(--cd-brand-text-hover) !important; }