:root { /* ---------- Base layout / surfaces ---------- */ /* Page background and main surface */ --body-bg: var(--color-01-83); /* light bluish background */ --panel-bg: var(--color-01-89); /* “white” on the blue scale */ --panel-default-bg: var(--color-01-89); --table-bg: var(--color-01-89); --table-bg-accent: var(--color-01-87); /* slightly tinted row background */ --code-bg: var(--color-01-87); --well-bg: var(--color-01-89); /* Former “white” variants now on the 01 scale */ --white-color: var(--color-01-89); --white-color-3: var(--color-01-86); --white-color-5: var(--color-01-83); /* Main gray scale now on primary 01 */ --main-gray: var(--color-01-85); --main-gray-5: var(--color-01-80); --main-gray-7: var(--color-01-79); --main-gray-10: var(--color-01-78); --main-gray-12: var(--color-01-77); --main-gray-17: var(--color-01-70); --main-gray-25: var(--color-01-62); --main-gray-40: var(--color-01-49); /* ---------- Text ---------- */ --text-color: var(--color-01-20); /* main text (dark) */ --text-white-color: var(--color-01-89); --text-muted-color: var(--color-01-60); /* secondary / muted */ --text-gray-color: var(--color-01-45); --code-border-color: var(--color-01-85); --blockquote-border-color: var(--color-01-80); /* ---------- Links ---------- */ /* Link blue = core brand color (01) */ --link-color: var(--color-01-60); /* primary link blue */ --link-hover-color: var(--color-01-45); /* darker on hover */ /* ---------- Navbar / header ---------- */ --navbar-bg: var(--color-01-83); --navbar-link-color: var(--color-01-60); --navbar-link-icon-color: var(--color-01-45); --navbar-link-hover-color: var(--color-01-40); --navbar-link-hover-bg: var(--color-01-83); --navbar-link-active-bg: var(--color-01-88); --navbar-inverse-color: var(--color-01-60); --navbar-inverse-bg: var(--color-01-83); --navbar-inverse-link-color: var(--color-01-20); --navbar-inverse-link-active-bg: var(--color-01-87); --navbar-inverse-border: var(--color-01-85); --navbar-inverse-toggle-hover-bg: var(--color-01-86); --navbar-inverse-bg-7: var(--color-01-86); --navbar-inverse-link-hover-color: var(--color-01-20); --navbar-inverse-link-hover-bg: var(--color-01-84); --navbar-inverse-link-disabled-color:var(--color-01-28); --navbar-inverse-link-disabled-bg: transparent; --navbar-inverse-link-icon-color: var(--color-01-39); --navbar-inverse-link-icon-hover-color: var(--color-01-39); /* ---------- Footer ---------- */ --site-footer-bg: transparent; --site-footer-color: var(--color-01-40); /* ---------- Inputs / form elements ---------- */ --input-color: var(--color-01-40); --input-bg: var(--color-01-89); --input-border: var(--color-01-82); --input-border-focus: var(--color-01-60); /* blue focus ring */ --input-box-shadow: inset 0 var(--1px) var(--1px) rgba(var(--color-rgb-01-00), 0.04); --input-bg-disabled: var(--color-01-80); --input-color-disabled: var(--color-01-60); --input-border-width: var(--1px); /* ---------- Tooltips ---------- */ --tooltip-bg: var(--color-01-05); /* almost black on 01 scale */ --tooltip-color: var(--color-01-89); /* ---------- Neutral button (non-primary) ---------- */ --btn-default-bg: var(--color-01-88); --btn-default-border: var(--color-01-82); --btn-default-color: var(--color-01-40); --btn-default-hover-bg: var(--color-01-85); --btn-default-hover-border: var(--color-01-80); --btn-default-active-bg: var(--color-01-82); --btn-default-active-border:var(--color-01-78); /* Primary button = same scale as links */ --btn-primary-bg: var(--color-01-60); --btn-primary-border: var(--color-01-60); --btn-primary-color: var(--color-01-89); --btn-primary-hover-bg: var(--color-01-45); --btn-primary-hover-border: var(--color-01-45); --btn-primary-active-bg: var(--color-01-40); --btn-primary-active-border:var(--color-01-38); /* Keep success / danger / warning as they are for now */ /* (you said: do not re-declare them here) */ --btn-text-color: var(--color-01-39); --btn-active-box-shadow: inset 0 3px 5px rgba(var(--color-rgb-01-00), 0.125); /* ---------- Dropdown / popover / modal ---------- */ --dropdown-bg: var(--color-01-89); --dropdown-link-color: var(--color-01-20); --dropdown-link-hover-color:var(--color-01-12); --dropdown-link-hover-bg: var(--color-01-85); --dropdown-border: var(--color-01-85); --dropdown-divider-bg: var(--color-01-87); --dropdown-box-shadow: 0 4px 6px rgba(var(--color-rgb-01-00), 0.11); --popover-bg: var(--color-01-89); --modal-backdrop-bg: rgba(var(--color-rgb-01-85), 0.5); --modal-backdrop-filter: blur(1px); --modal-header-bg: var(--color-01-83); --modal-footer-bg: var(--color-01-83); --modal-content-bg: var(--color-01-83); --modal-box-shadow: 0 5px 15px rgba(var(--color-rgb-01-00), 0.5); --modal-border-color: var(--color-01-87); --modal-border-width: 0; /* ---------- Scrollbars ---------- */ --scroll-bg: var(--color-01-80); --scroll-thumb-bg: var(--color-01-75); --scroll-width: 11px; --scroll-border-width: 0; /* ---------- Misc ---------- */ --default-heading-bg-color: var(--color-01-83); --default-border-color: var(--color-01-85); --label-color: var(--color-01-89); --label-default-bg: var(--color-01-60); --default-box-shadow: 1px 2px 2px rgba(var(--color-rgb-01-00), 0.05); --top-bar-box-shadow: 2px 2px 2px rgba(var(--color-rgb-01-00), 0.09); }