/* Lesson 26: every colour the app uses, by name, in ONE file. twenty7.css only ever says var(--name). A theme is a second set of values for the same names: :root, [data-theme="light"] the light values (also what prints: the dark ones are screen-only) [data-theme="dark"] the dark values, when you chose Dark :root:not([data-theme="light"]) inside @media (prefers-color-scheme: dark) the SAME dark values, for System when the device itself is dark base.html writes data-theme="light" or "dark" on for those choices, and nothing for System. The dark block is written twice because plain CSS can't say "dark, OR no choice and the device is dark"; tests/test_theme.py fails if the two copies differ. scripts/check_contrast.py measures every pair against WCAG AA. The selectors work on ANY element, not just : the Appearance previews are
. NOT themed on purpose: the flyer email HTML (flyers.render_email) and the weekly digest (digest.py) carry their own inline colours, because they're read in mail apps. --paper keeps the in-app email preview white to match. */ :root, [data-theme="light"] { color-scheme: light dark; /* Brand (the Brand Identity Portfolio). Fixed: the navy header and the cyan accent are the same in both themes. */ --navy: #0A1440; --accent-2: #24BBE6; --on-navy: #FFFFFF; --on-navy-soft: rgba(255, 255, 255, 0.12); --on-navy-line: rgba(255, 255, 255, 0.25); --on-navy-line-strong: rgba(255, 255, 255, 0.4); --on-navy-muted: rgba(255, 255, 255, 0.7); /* The email preview and the logo's backing: paper is white whatever the theme. */ --paper: #FFFFFF; --paper-text: #181818; /* Filled badges keep white text on a strong colour in both themes. */ --on-status: #FFFFFF; --danger-fill: #B42318; --success-fill: #2E844A; /* SLDS's own success-base-50, behind "OK" and "Connected" */ --on-accent: #FFFFFF; /* Surfaces */ --bg: #F4F6FA; /* the ground */ --surface: #FFFFFF; /* cards, popovers, rows */ --surface-2: #F3F3F3; /* table headers, stripes */ --surface-3: #E5E5E5; --board-col: #E9EDF5; /* a router board column, behind its cards */ /* Text */ --text: #181818; --text-strong: #0A1440; /* headings and numbers: navy in light */ --text-muted: #4B5563; --text-subtle: #6B7280; /* was #8A94A6 on the E·L·P·S letters: 3.06:1, under AA. Now 4.83:1. */ /* Lines */ --border: #DDE2EC; /* decorative dividers */ --border-strong: #C9CED9; --border-input: #7E8797; /* a form field's edge: SLDS's #c9c9c9 was 1.66:1; WCAG asks 3:1 */ /* Accent (the brand blue) */ --accent: #0211EA; --accent-hover: #0A1440; --accent-fill: #0211EA; --accent-fill-hover: #0A1440; --accent-soft: #F2F4FE; /* Links and outline buttons. SLDS writes these colours straight into its CSS (a{color:#0b5cab}, buttons #0176d3) rather than through a hook, so until Lesson 26 they were SLDS's blues, not ours. Light keeps them exactly. */ --link: #0B5CAB; --link-hover: #014486; --button-text: #0176D3; --button-text-hover: #014486; /* Status */ --success: #14532D; --success-soft: #DCFCE7; --warning: #B54708; --danger: #B42318; --error-text: #BA0517; /* SLDS's own red for .slds-text-color_error, kept in light */ --focus: #0176D3; /* SLDS's own focus colour; light mode leaves SLDS's ring alone */ --info-soft: #F2FBFE; /* Pills and chips */ --chip-bg: #E6E8FD; --chip-text: #0A1440; --chip-2-bg: #E0F6FC; --tier-engaged-bg: #DCFCE7; --tier-engaged-text: #14532D; --tier-warm-bg: #FEF3C7; --tier-warm-text: #78350F; --tier-nurture-bg: #E6E8FD; --tier-nurture-text: #0A1440; --tier-new-bg: #E5E7EB; --tier-new-text: #1F2937; --tier-cold-bg: #DBEAFE; --tier-cold-text: #1E3A8A; --tier-excluded-bg: #FEE2E2; --tier-excluded-text: #7F1D1D; --shadow: rgba(10, 20, 64, 0.15); --shadow-strong: rgba(10, 20, 64, 0.25); /* SLDS hooks set in BOTH themes: the brand buttons, links, and the form fields' borders. */ --slds-c-button-brand-color-background: var(--accent-fill); --slds-c-button-brand-color-border: var(--accent-fill); --slds-c-button-brand-color-background-hover: var(--accent-fill-hover); --slds-c-button-brand-color-border-hover: var(--accent-fill-hover); --slds-c-button-brand-text-color: var(--on-accent); --slds-c-button-brand-text-color-hover: var(--on-accent); --slds-c-button-text-color: var(--button-text); --slds-c-button-text-color-hover: var(--button-text-hover); --slds-c-input-color-border: var(--border-input); --slds-c-textarea-color-border: var(--border-input); --slds-c-select-color-border: var(--border-input); --slds-c-checkbox-color-border: var(--border-input); --slds-c-radio-color-border: var(--border-input); /* The brand scale in light (unchanged from before Lesson 26). */ --slds-g-color-brand-base-10: #060B2E; --slds-g-color-brand-base-20: #0A1440; --slds-g-color-brand-base-30: #0810A8; --slds-g-color-brand-base-40: #0211EA; --slds-g-color-brand-base-50: #0211EA; --slds-g-color-brand-base-60: #3E4CF0; --slds-g-color-brand-base-70: #8A93F6; --slds-g-color-brand-base-80: #C3C8FB; --slds-g-color-brand-base-90: #E6E8FD; --slds-g-color-brand-base-95: #F4F6FA; } [data-theme="light"] { color-scheme: light; } /* Dark is for screens only, so printing always uses the light values above (Lesson 26: pages print on white). */ @media screen { [data-theme="dark"] { color-scheme: dark; --bg: #0B1022; --surface: #151C36; --surface-2: #1C2544; --surface-3: #232D52; --board-col: #0F1530; --text: #E7EAF3; --text-strong: #DDE2FF; --text-muted: #A9B1C8; --text-subtle: #8E97B0; --border: #2A3459; --border-strong: #3A4570; --border-input: #6E7AA0; --accent: #8C96FF; --accent-hover: #B8BEFF; --accent-fill: #3340F0; --accent-fill-hover: #4F5BF4; --accent-soft: #1D2656; --link: var(--accent); --link-hover: var(--accent-hover); --button-text: var(--accent); --button-text-hover: var(--accent-hover); --success: #6EE7A0; --success-soft: #123524; --warning: #FBBF5A; --danger: #FF8A7A; --error-text: var(--danger); --focus: #9BA3FF; --info-soft: #0F2A3A; --chip-bg: #252E63; --chip-text: #D8DCFF; --chip-2-bg: #10384A; --tier-engaged-bg: #123524; --tier-engaged-text: #A7F3C1; --tier-warm-bg: #3B2A0A; --tier-warm-text: #FCD98A; --tier-nurture-bg: #252E63; --tier-nurture-text: #D8DCFF; --tier-new-bg: #2A303D; --tier-new-text: #E5E7EB; --tier-cold-bg: #13295A; --tier-cold-text: #BFD6FF; --tier-excluded-bg: #401616; --tier-excluded-text: #FECACA; --shadow: rgba(0, 0, 0, 0.45); --shadow-strong: rgba(0, 0, 0, 0.6); /* SLDS 2.264's own palette, pointed at ours. Its components read these, so cards, tables, inputs, modals and popovers follow without a rule each. The neutral scale runs 100 (its white) to 10 (its near-black text). */ --slds-g-color-neutral-base-100: var(--surface); --slds-g-color-neutral-base-95: var(--surface-2); --slds-g-color-neutral-base-90: var(--surface-3); --slds-g-color-neutral-base-80: var(--border-strong); --slds-g-color-neutral-base-70: var(--text-subtle); --slds-g-color-neutral-base-65: var(--text-subtle); --slds-g-color-neutral-base-60: var(--text-subtle); --slds-g-color-neutral-base-50: var(--text-muted); --slds-g-color-neutral-base-40: var(--text-muted); --slds-g-color-neutral-base-30: var(--text-muted); --slds-g-color-neutral-base-20: var(--text); --slds-g-color-neutral-base-15: var(--text); --slds-g-color-neutral-base-10: var(--text); --slds-g-color-border-base-1: var(--border); --slds-g-color-border-base-2: var(--border); --slds-g-color-border-base-3: var(--border); --slds-g-color-border-base-4: var(--border-strong); --slds-g-color-border-1: var(--border); --slds-g-color-border-2: var(--border); --slds-g-color-surface-container-1: var(--surface); --slds-g-color-surface-container-2: var(--surface-2); --slds-g-color-on-surface-1: var(--text-muted); --slds-g-color-on-surface-2: var(--text); --slds-g-color-on-surface-3: var(--text); --slds-g-color-brand-base-10: var(--accent-hover); --slds-g-color-brand-base-20: var(--accent-hover); --slds-g-color-brand-base-30: var(--accent); --slds-g-color-brand-base-40: var(--accent); --slds-g-color-brand-base-50: var(--accent); --slds-g-color-brand-base-60: var(--accent); --slds-g-color-brand-base-70: var(--accent-soft); --slds-g-color-brand-base-80: var(--accent-soft); --slds-g-color-brand-base-90: var(--accent-soft); --slds-g-color-brand-base-95: var(--accent-soft); --slds-g-shadow-outline-focus-1: 0 0 0 2px var(--focus); --slds-c-backdrop-color-background: rgba(0, 0, 0, 0.6); /* The red "Delete" links. Not the error-base hooks themselves: those are also the fills behind white text. */ --slds-c-button-text-destructive-text-color: var(--danger); --sds-c-button-text-destructive-text-color-hover: var(--danger); } /* System, on a device that's in dark mode: the same block, copied. Keep the two identical (a test checks). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0B1022; --surface: #151C36; --surface-2: #1C2544; --surface-3: #232D52; --board-col: #0F1530; --text: #E7EAF3; --text-strong: #DDE2FF; --text-muted: #A9B1C8; --text-subtle: #8E97B0; --border: #2A3459; --border-strong: #3A4570; --border-input: #6E7AA0; --accent: #8C96FF; --accent-hover: #B8BEFF; --accent-fill: #3340F0; --accent-fill-hover: #4F5BF4; --accent-soft: #1D2656; --link: var(--accent); --link-hover: var(--accent-hover); --button-text: var(--accent); --button-text-hover: var(--accent-hover); --success: #6EE7A0; --success-soft: #123524; --warning: #FBBF5A; --danger: #FF8A7A; --error-text: var(--danger); --focus: #9BA3FF; --info-soft: #0F2A3A; --chip-bg: #252E63; --chip-text: #D8DCFF; --chip-2-bg: #10384A; --tier-engaged-bg: #123524; --tier-engaged-text: #A7F3C1; --tier-warm-bg: #3B2A0A; --tier-warm-text: #FCD98A; --tier-nurture-bg: #252E63; --tier-nurture-text: #D8DCFF; --tier-new-bg: #2A303D; --tier-new-text: #E5E7EB; --tier-cold-bg: #13295A; --tier-cold-text: #BFD6FF; --tier-excluded-bg: #401616; --tier-excluded-text: #FECACA; --shadow: rgba(0, 0, 0, 0.45); --shadow-strong: rgba(0, 0, 0, 0.6); /* SLDS 2.264's own palette, pointed at ours. Its components read these, so cards, tables, inputs, modals and popovers follow without a rule each. The neutral scale runs 100 (its white) to 10 (its near-black text). */ --slds-g-color-neutral-base-100: var(--surface); --slds-g-color-neutral-base-95: var(--surface-2); --slds-g-color-neutral-base-90: var(--surface-3); --slds-g-color-neutral-base-80: var(--border-strong); --slds-g-color-neutral-base-70: var(--text-subtle); --slds-g-color-neutral-base-65: var(--text-subtle); --slds-g-color-neutral-base-60: var(--text-subtle); --slds-g-color-neutral-base-50: var(--text-muted); --slds-g-color-neutral-base-40: var(--text-muted); --slds-g-color-neutral-base-30: var(--text-muted); --slds-g-color-neutral-base-20: var(--text); --slds-g-color-neutral-base-15: var(--text); --slds-g-color-neutral-base-10: var(--text); --slds-g-color-border-base-1: var(--border); --slds-g-color-border-base-2: var(--border); --slds-g-color-border-base-3: var(--border); --slds-g-color-border-base-4: var(--border-strong); --slds-g-color-border-1: var(--border); --slds-g-color-border-2: var(--border); --slds-g-color-surface-container-1: var(--surface); --slds-g-color-surface-container-2: var(--surface-2); --slds-g-color-on-surface-1: var(--text-muted); --slds-g-color-on-surface-2: var(--text); --slds-g-color-on-surface-3: var(--text); --slds-g-color-brand-base-10: var(--accent-hover); --slds-g-color-brand-base-20: var(--accent-hover); --slds-g-color-brand-base-30: var(--accent); --slds-g-color-brand-base-40: var(--accent); --slds-g-color-brand-base-50: var(--accent); --slds-g-color-brand-base-60: var(--accent); --slds-g-color-brand-base-70: var(--accent-soft); --slds-g-color-brand-base-80: var(--accent-soft); --slds-g-color-brand-base-90: var(--accent-soft); --slds-g-color-brand-base-95: var(--accent-soft); --slds-g-shadow-outline-focus-1: 0 0 0 2px var(--focus); --slds-c-backdrop-color-background: rgba(0, 0, 0, 0.6); /* The red "Delete" links. Not the error-base hooks themselves: those are also the fills behind white text. */ --slds-c-button-text-destructive-text-color: var(--danger); --sds-c-button-text-destructive-text-color-hover: var(--danger); } } }