/** * Statulator — Design Tokens * =========================== * Single source of truth for colour, typography, and spacing tokens. * * Namespace: --stat-* (distinct from Bootstrap's --bs-*). * Bootstrap tokens (--bs-primary, --bs-link-color, --bs-code-color) are also * remapped here so Statulator's brand identity flows through the framework. * * Load order: tokens.css MUST load before base.css / components.css so * variable lookups resolve. Dark-mode overrides for tokens live at the * bottom of this file under `[data-bs-theme="dark"]`. * * BRAND / LINKS * --stat-brand Primary accent (blue). Buttons, links, * left borders of callouts, focus rings. * --stat-brand-hover Hover / active variant. * --stat-brand-on-muted Brand blue for link text on tinted surfaces * (footer, example boxes, success banner) * darkened to clear WCAG AA Normal (4.5:1). * * SURFACES * --stat-surface Page-level surface (card bg, input bg). * --stat-surface-muted Panel / table header / soft-box bg. * --stat-callout-bg Blockquote / notes-box bg. * --stat-formula-bg Maths formula block bg (help pages). * --stat-example-bg Worked-example box bg (help pages). * --stat-footer-bg Site footer bg. * --stat-hero-bg Home-page hero section bg. * --stat-dropzone-bg Dataset drop-zone bg. * * BORDERS * --stat-border Neutral border (tables, cards, dividers). * --stat-hero-border Hero section bottom border. * --stat-example-border Worked-example box border. * --stat-dropzone-border Drop-zone border (dashed/solid). * * TEXT * --bs-body-color Primary body text (Bootstrap-managed). * --bs-secondary-color Subtle/meta text (Bootstrap-managed). * --stat-subtle-text Dimmer label text used by custom components. * * SPECIALS * --stat-sidepanel-* Sliding side-panel (intentional dark chrome * in BOTH modes — do not override in dark block). * --stat-response-* Response-column highlight in analysis preview. * --help-cat-* Help-sidebar category-group palette (tuned * for contrast per theme). * * When adding a new component, prefer existing tokens; only add a new * --stat-* if the colour has a distinct semantic role. Every new token * MUST have a paired value in the dark-mode block. */ /* ========================================================================== LIGHT MODE (DEFAULT) — Brand palette + Bootstrap token remap ========================================================================== */ :root { --bs-primary: #337ab7; --bs-primary-rgb: 51, 122, 183; --bs-link-color: #337ab7; --bs-link-hover-color: #286090; --bs-link-color-rgb: 51, 122, 183; /* Statulator palette tokens used by hand-rolled components. Dark-mode overrides live in the [data-bs-theme="dark"] block below. */ --stat-brand: #337ab7; --stat-brand-hover: #286090; --stat-brand-rgb: 51, 122, 183; --stat-surface: #fff; --stat-surface-muted: #f8f9fa; --stat-border: #dee2e6; --stat-formula-bg: #f8f9fa; --stat-example-bg: #f0f7ff; --stat-example-border: #b6d4fe; --stat-footer-bg: #f5f5f5; --stat-dropzone-bg: #fafbfc; --stat-dropzone-border: #c5ccd3; --stat-dropzone-hover: #9aa4ad; --stat-subtle-text: #495057; /* Hero section (home page) */ --stat-hero-bg: #f8fbff; --stat-hero-border: #dee2e6; /* Slide-in side panel — intentional dark chrome in BOTH modes. Tokenised so colour tweaks flow from one place. */ --stat-sidepanel-bg: #444444; --stat-sidepanel-text: #ffffff; --stat-sidepanel-btn-bg: #000000; /* Blog / notes callout background */ --stat-callout-bg: #f8f9fa; --stat-callout-accent: var(--stat-brand); /* Brand blue on muted surfaces — clears WCAG AA Normal (4.5:1) on #f5f5f5 (footer), #f8f9fa (muted sections / example boxes), and #e8f5e9 (loaded-CSV success banner). In dark mode we alias this to --stat-brand since dark surfaces already use light text. */ --stat-brand-on-muted: #2f6fa8; /* Help-sidebar category palette (light-mode tuning). Darker shades chosen to clear 4.5:1 on white; dark-mode block below restores the original vivid shades for dark backgrounds. */ --help-cat-proportions: #b05400; /* 5.10:1 on white */ --help-cat-means: #0a58ca; /* 6.44:1 on white */ --help-cat-tests: #146c43; /* 6.45:1 on white */ --help-cat-dataset: #087990; /* 5.06:1 on white (matches badge fix) */ /* Inline colour — darken Bootstrap's --bs-code-color default (#d63384 ≈ 4.17:1 on white, AA Normal fail) for light mode. Dark mode keeps BS 5.3's lighter pink since contrast is ample on dark. */ --bs-code-color: #a42465; /* 6.96:1 on white */ } /* ========================================================================== DARK MODE — Token overrides Bootstrap 5.3 flips core tokens under [data-bs-theme="dark"] automatically. The overrides below tune Statulator-specific tokens so hand-rolled components that don't read Bootstrap variables still theme correctly. ========================================================================== */ [data-bs-theme="dark"] { /* Brand stays in the same hue family but lightens for AA contrast on dark. */ --bs-primary: #6ea8d4; --bs-primary-rgb: 110, 168, 212; --bs-link-color: #9dc3e6; --bs-link-hover-color: #c2dbef; --bs-link-color-rgb: 157, 195, 230; --stat-brand: #6ea8d4; --stat-brand-hover: #9dc3e6; --stat-brand-rgb: 110, 168, 212; --stat-surface: #1e232a; --stat-surface-muted: #242a33; --stat-border: #3a424d; --stat-formula-bg: #242a33; --stat-example-bg: #1c2a3a; --stat-example-border: #35506e; --stat-footer-bg: #1b1f25; --stat-dropzone-bg: #242a33; --stat-dropzone-border: #3a424d; --stat-dropzone-hover: #6ea8d4; --stat-subtle-text: #c7ced6; /* Preview table response-column highlight — dark surface with light-blue text so "selected response" still reads as highlighted. */ --stat-response-header-bg: #14314d; --stat-response-cell-bg: #102a42; --stat-response-border: #6ea8d4; --stat-response-text: #e6f1fb; /* Hero / callout overrides */ --stat-hero-bg: #141a22; --stat-hero-border: #2a313a; --stat-callout-bg: #1c2a3a; /* Dark-mode --stat-brand already clears AA Normal on dark surfaces; alias the muted-surface token so rules reading it don't need a branch. */ --stat-brand-on-muted: var(--stat-brand); /* Help-sidebar category palette for dark backgrounds. Orange and cyan are fine at BS default values; blue and green get lifted to clear AA Normal on the near-black sidebar bg (#1e232a). */ --help-cat-proportions: #fd7e14; /* 6.00:1 on #1e232a */ --help-cat-means: #6ea8fe; /* 6.54:1 */ --help-cat-tests: #3fb179; /* 5.85:1 */ --help-cat-dataset: #0dcaf0; /* 7.88:1 */ /* Re-set --bs-code-color to Bootstrap 5.3's dark-mode default so inline reads at 6.31:1 on dark. (Our light-mode :root override is source-order-wins over BS's own dark-theme value.) */ --bs-code-color: #e685b5; /* --stat-sidepanel-* intentionally unchanged (stays dark in both modes) */ }