mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-05-08 02:28:25 -05:00
5213a16eda
shared/styles/_brand.scss is the single source of truth for raw brand hex values (Harvard Crimson, ETH Blue, callout palette). Theme files consume these tokens to derive semantic variables ($accent, $accent-dark, $callout-*) used by the rest of the SCSS layer. Why: previously the same hex codes were duplicated across both theme files (and would have been duplicated again if a third volume were added). A rebrand currently requires touching the listed non-SCSS uses in shared/styles/BRAND.md (HTML meta theme-color, plain CSS, inline QMD styles, SVG fills, JS/Python/TSX constants). Centralizing the SCSS side at least removes duplication within the SCSS layer. book/quarto/assets/styles/_brand.scss is a tracked mirror of the canonical (kept in sync via shared/scripts/sync-mirrors.sh). Required because Sass resolves @import relative to the importing file's physical location, so the book's theme files need _brand.scss reachable as ../brand. shared/styles/README.md adds a file map, a Mermaid diagram of the import graph (consumer entrypoint -> theme -> brand -> base partials), per-subsite entrypoint table, and conventions for adding a new theme.
25 lines
1.2 KiB
SCSS
25 lines
1.2 KiB
SCSS
// =============================================================================
|
|
// MLSysBook BRAND TOKENS — single source of truth for raw brand colors
|
|
// =============================================================================
|
|
// Pure colour values, theme-agnostic. Theme files (_theme-harvard.scss,
|
|
// _theme-eth.scss, ...) consume these and expose semantic variables like
|
|
// $accent / $accent-dark used by the rest of the SCSS layer.
|
|
//
|
|
// If you ever rebrand: change the value here and verify the non-SCSS uses
|
|
// listed in shared/styles/BRAND.md.
|
|
// =============================================================================
|
|
|
|
// Volume I — Harvard Crimson (institutional brand)
|
|
$brand-crimson: #A51C30;
|
|
$brand-crimson-dark: #E85D75; // accent for dark backgrounds
|
|
|
|
// Volume II — ETH Blue
|
|
$brand-eth-blue: #1F407A;
|
|
$brand-eth-blue-dark: #6B9FD4; // accent for dark backgrounds
|
|
|
|
// Neutral callout palette (shared across themes)
|
|
$brand-callout-info: #4f7396; // muted steel blue
|
|
$brand-callout-success: #4a7c59; // muted forest green
|
|
$brand-callout-caution: #b8860b; // muted golden amber
|
|
$brand-callout-secondary: #64748b; // professional slate
|