/* @bydefaultstudio/design-system v4.8.0 */ /* ───────────────────────────── DESIGN SYSTEM FRAMEWORK ───────────────────────────── */ /* ------ 1. BRAND TOKENS ------ */ /* * Neutral engine defaults. A brand expresses itself by overriding these * primitives in its theme.css (cms/brands//assets/theme.css); * the §2 semantic layer resolves through them, so a theme never restates * semantics it can reach through a primitive. Instance 0 (By Default) * loads cms/brands/bydefault/assets/theme.css like any other brand. * Neutralize values here, never delete token names: core components and * docs-site.css consume them by name. */ :root { /* -- Typography (neutral system stacks) -- */ --font-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-secondary: Georgia, "Times New Roman", serif; --font-tertiary: system-ui, sans-serif; --font-quaternary: ui-monospace, "SF Mono", Menlo, monospace; /* Accent + semantic aliases. Editorial + code alias the existing slots so call sites can stay role-named even if the underlying face is swapped later. */ --font-display: system-ui, sans-serif; --font-playful: system-ui, sans-serif; --font-script: cursive; --font-editorial: var(--font-secondary); --font-code: var(--font-quaternary); /* -- Palette -- */ --off-white: var(--neutral-50); --off-black: var(--neutral-900); /* Brown is the warm palette ramp. It defaults through the neutral scale so a brand that re-points only the neutrals still carries the toast, tooltip and mark surfaces with it; a brand wanting a true brown sets these directly. */ --brown-lighter: var(--neutral-100); --brown-light: var(--neutral-300); --brown: var(--neutral-500); --brown-dark: var(--neutral-950); /* -- Accent colours (generic) -- */ --red-lighter: #FEE2E2; --red-light: #FECACA; --red: #DC2626; --red-dark: #7F1D1D; --blue-lighter: #DBEAFE; --blue-light: #BFDBFE; --blue: #2563EB; --blue-dark: #1E3A8A; --yellow-lighter: #FEF3C7; --yellow-light: #FDE68A; --yellow: #D97706; --yellow-dark: #78350F; --green-lighter: #DCFCE7; --green-light: #BBF7D0; --green: #16A34A; --green-dark: #14532D; --purple-lighter: #F3E8FF; --purple-light: #E9D5FF; --purple: #9333EA; --purple-dark: #581C87; /* Aqua, pink and peach are the bright accents: their base step sits a shade lighter than the five signal hues above, so they read as a highlight on a light surface rather than as a status colour. */ --aqua-lighter: #CCFBF1; --aqua-light: #99F6E4; --aqua: #5EEAD4; --aqua-dark: #134E4A; --pink-lighter: #FCE7F3; --pink-light: #FBCFE8; --pink: #F9A8D4; --pink-dark: #831843; --peach-lighter: #FFEDD5; --peach-light: #FED7AA; --peach: #FDBA74; --peach-dark: #7C2D12; /* -- Base font sizes (rem-based, progressive step scale: +2px body, +4px heading, +8px display) -- */ --font-3xs: 0.625rem; /* 10px */ --font-2xs: 0.75rem; /* 12px */ --font-xs: 0.875rem; /* 14px */ --font-s: 1rem; /* 16px */ --font-m: 1.125rem; /* 18px */ --font-l: 1.25rem; /* 20px */ --font-xl: 1.375rem; /* 22px */ --font-2xl: 1.5rem; /* 24px */ --font-3xl: 1.75rem; /* 28px */ --font-4xl: 2rem; /* 32px */ --font-5xl: 2.25rem; /* 36px */ --font-6xl: 2.5rem; /* 40px */ --font-7xl: 3rem; /* 48px */ --font-8xl: 3.5rem; /* 56px */ --font-9xl: 4rem; /* 64px */ --font-10xl: 4.5rem; /* 72px */ /* -- UI font sizes -- */ /* -- Line height tokens -- */ --line-height-xs: 0.7; --line-height-s: 1; --line-height-m: 1.2; --line-height-l: 1.4; --line-height-xl: 1.6; --line-height-2xl: 1.8; /* -- Font weight tokens -- */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-book: 450; --font-weight-medium: 500; --font-weight-semi-bold: 600; --font-weight-bold: 700; --font-weight-extra-bold: 800; --font-weight-black: 900; /* -- Font width tokens (wdth axis, applied via font-stretch) -- */ --font-condensed: 75%; --font-narrow: 87.5%; --font-normal: 100%; --font-wide: 112.5%; --font-expanded: 125%; /* -- Letter spacing tokens (em-based for proportional scaling) -- */ --letter-spacing-xs: -0.03em; --letter-spacing-s: 0.03em; --letter-spacing-m: 0.06em; --letter-spacing-l: 0.12em; --letter-spacing-xl: 0.24em; /* -- Type roles — semantic tokens composing the primitives into four role-based building blocks (headline, title, label, body). Each role covers four dimensions: size, weight, leading (line-height), and tracking (letter-spacing). Sizes are stepped rem, never clamp() with a vw term: a vw component in font-size doesn't track browser zoom or user font-size preferences (WCAG 1.4.4 Resize Text). Each role steps down through the width tiers below this block. -- */ /* Headline — the biggest thing on a page; one per page (h1). */ --headline-size: var(--font-8xl); /* 56px · 48px ≤1439 · 28px ≤959 */ --headline-weight: 400; --headline-leading: var(--line-height-s); --headline-tracking: -0.04em; --headline-width: var(--font-condensed); /* Subline — sub-heading scale, sits between title and body. Independent of --text-size-l so it can be tuned without dragging modifier text. */ --subline-size: var(--font-2xl); /* 24px · 20px ≤1439 */ --subline-weight: 300; /* Title — section heads and recurring labels within a page (h2). */ --title-size: var(--font-6xl); /* 40px · 36px ≤1439 · 24px ≤959 */ --title-weight: 400; --title-leading: var(--line-height-m); --title-tracking: -0.04em; --title-family: var(--font-primary); /* Label — meta rows, eyebrows, captions */ --label-size: var(--font-2xs); --label-weight: 500; --label-leading: var(--line-height-s); --label-tracking: var(--letter-spacing-m); /* Body — running text. One size at every width: the old fluid ceiling (18px) only engaged beyond ~1900px viewports, so 16px is the honest static value. */ --body-size: var(--font-s); --body-weight: var(--font-weight-regular); --body-leading: var(--line-height-xl); --body-tracking: 0; /* Text size utility scale — stepped tokens consumed by .text-size-* utilities. Use these on any selector when you want a utility-style size without the class. */ --text-size-xl: var(--font-3xl); /* 28px · 24px ≤959 */ --text-size-l: var(--font-l); /* 20px */ --text-size-m: var(--body-size); --text-size-s: var(--font-xs); /* 14px — the old fluid ceiling (16px) only engaged beyond ~1400px */ --text-size-xs: var(--font-xs); /* Icon Size */ --icon-size: 1.3rem; } /* Laptop typography tier — the top-of-scale sizes are reserved for wide screens; below 1440 the three heading roles step down one rung. */ @media (max-width: 1439px) { :root { --headline-size: var(--font-7xl); /* 48px */ --title-size: var(--font-5xl); /* 36px */ --subline-size: var(--font-l); /* 20px */ } } /* Mobile typography tier — static rem values for the single-column range. Tablet uses mobile typography because the layout is also single-column at that width (see [data-grid] collapse at the same breakpoint). --label-size is bumped from --font-2xs (12px) to --font-xs (14px) on mobile — 12px is below the practitioner floor for body-adjacent text and tap-target-adjacent labels. */ @media (max-width: 959px) { :root { --headline-size: var(--font-3xl); /* 28px */ --title-size: var(--font-2xl); /* 24px */ --subline-size: var(--font-l); /* 20px */ --label-size: var(--font-xs); /* 14px (a11y floor) */ --text-size-xl: var(--font-2xl); /* 24px */ --text-size-l: var(--font-l); /* 20px */ /* --body-size/--text-size-m (16px) and --text-size-s/-xs (14px) hold their size at every width */ } } /* ------ 2. SYSTEM TOKENS - COLORS ------ */ :root { /* -- Neutrals -- */ --neutral-50: #fafafa; --neutral-100: #e5e5e5; --neutral-150: #d4d4d4; --neutral-200: #c4c4c4; --neutral-300: #a3a3a3; --neutral-400: #8a8a8a; --neutral-500: #737373; --neutral-600: #5c5c5c; --neutral-700: #474747; --neutral-800: #333333; --neutral-900: #1f1f1f; --neutral-950: #141414; --neutral-990: #0a0a0a; /* -- Black & White Alpha Tokens -- */ --black: #000000; --black-alpha-3: #00000008; --black-alpha-5: #0000000d; --black-alpha-7: #00000012; --black-alpha-10: #0000001a; --black-alpha-15: #00000026; --black-alpha-20: #00000033; --black-alpha-30: #0000004d; --black-alpha-40: #00000066; --black-alpha-50: #00000080; --black-alpha-60: #00000099; --black-alpha-70: #000000b3; --black-alpha-80: #000000cc; --black-alpha-90: #000000e6; --black-alpha-95: #000000f2; --white: #ffffff; --white-alpha-3: #ffffff08; --white-alpha-5: #ffffff0d; --white-alpha-7: #ffffff12; --white-alpha-10: #ffffff1a; --white-alpha-15: #ffffff26; --white-alpha-20: #ffffff33; --white-alpha-30: #ffffff4d; --white-alpha-40: #ffffff66; --white-alpha-50: #ffffff80; --white-alpha-60: #ffffff99; --white-alpha-70: #ffffffb3; --white-alpha-80: #ffffffcc; --white-alpha-90: #ffffffe6; --white-alpha-95: #fffffff2; --transparent: transparent; /* -- Color-Mix Alpha Scale -- */ --alpha-5: transparent 95%; --alpha-10: transparent 90%; --alpha-15: transparent 85%; --alpha-20: transparent 80%; --alpha-25: transparent 75%; --alpha-30: transparent 70%; --alpha-35: transparent 65%; --alpha-40: transparent 60%; --alpha-45: transparent 55%; --alpha-50: transparent 50%; --alpha-55: transparent 45%; --alpha-60: transparent 40%; --alpha-65: transparent 35%; --alpha-70: transparent 30%; --alpha-75: transparent 25%; --alpha-80: transparent 20%; --alpha-85: transparent 15%; --alpha-90: transparent 10%; --alpha-95: transparent 5%; /* -- Semantic colours -- */ --text-primary: var(--off-black); --text-secondary: var(--neutral-700); --text-plain: var(--black); /* a11y: alpha-60 → 5.7:1 on white; alpha-50 computed to 3.9:1, below the 4.5:1 WCAG AA minimum for the body copy this token is used on */ --text-faded: var(--black-alpha-60); --text-accent: var(--blue); --text-link: var(--text-accent); --text-inverted: var(--off-white); --text-sidebar: var(--text-primary); --text-top-nav: var(--text-primary); /* -- Text with Opacity -- */ --text-alpha-5: color-mix(in srgb, var(--text-primary), var(--alpha-5)); --text-alpha-10: color-mix(in srgb, var(--text-primary), var(--alpha-10)); --text-alpha-15: color-mix(in srgb, var(--text-primary), var(--alpha-15)); --text-alpha-20: color-mix(in srgb, var(--text-primary), var(--alpha-20)); --text-alpha-30: color-mix(in srgb, var(--text-primary), var(--alpha-30)); --text-alpha-40: color-mix(in srgb, var(--text-primary), var(--alpha-40)); --text-alpha-50: color-mix(in srgb, var(--text-primary), var(--alpha-50)); --background-primary: var(--white); --background-secondary: var(--neutral-100); --background-plain: var(--white); --background-faded: var(--black-alpha-5); --background-darker: var(--black-alpha-10); --background-lighter: var(--white-alpha-10); --bg-faded-3: var(--black-alpha-3); --bg-faded-5: var(--black-alpha-5); --bg-faded-7: var(--black-alpha-7); --bg-faded-10: var(--black-alpha-10); --bg-faded-15: var(--black-alpha-15); --background-modal: rgba(0, 0, 0, 0.75); --background-sidebar: var(--background-primary); --background-top-nav: var(--background-primary); /* -- Solid colour backgrounds — for hero blocks, callouts, ad units, etc. -- */ --background-accent: var(--text-accent); --background-black: var(--black); --background-white: var(--white); --background-blue: var(--blue); --background-red: var(--red); --background-green: var(--green); --border-primary: var(--text-primary); --border-secondary: var(--neutral-300); --border-faded: var(--black-alpha-15); /* The boundary of an interactive control whose surface is transparent — the border is then the only thing saying "this is pressable", so it carries the 3:1 that 1.4.11 asks of a control boundary. --border-faded is decorative (1.4:1) and must not be used for one. 4.74:1 on --background-primary. */ --border-control: var(--neutral-500); /* -- Status colours (from brand book or defaults) -- Text and surface are a pair: -dark text on a -lighter surface. The mid primitives only reach 3.0-4.2:1 on their own pastels — under AA for small text — so every hue's text takes the -dark step, as warning always has. Buttons consume the text half alone and follow it deliberately. */ --status-info: var(--blue-dark); --status-info-bg: var(--blue-lighter); --status-success: var(--green-dark); --status-success-bg: var(--green-lighter); --status-warning: var(--yellow-dark); --status-warning-bg: var(--yellow-lighter); --status-danger: var(--red-dark); --status-danger-bg: var(--red-lighter); /* -- Form semantic tokens -- */ --input-border: var(--border-secondary); --input-background: var(--black-alpha-5); --input-text: var(--text-plain); --input-placeholder: var(--text-faded); --input-focus: var(--text-accent); --input-disabled-bg: var(--background-faded); --input-disabled-text: var(--text-faded); --checkbox-background: var(--neutral-100); --checkbox-selected: var(--text-primary); --checkbox-border: var(--border-faded); --checkbox-checkmark: var(--off-white); /* -- Toggle color tokens removed — uses values directly on component -- */ /* -- Selection -- */ /* Two neighbours one letter apart, doing different jobs. --selection-* is the browser's text highlight (::selection). --selected-* is the state a chosen control wears: a checked chip, a segmented control's active option. They happen to resolve to the same inverted neutral today; they are separate names because a brand can move one without the other. */ --selection-text: var(--background-primary); --selection-background: var(--text-primary); /* The system's selected pair. A wash cannot carry state — the --bg-faded-* scale tops out near 1.4:1 where WCAG wants 3:1 of a state indicator — so selection is an inverted surface, never a tint. Shared by both segmented forms, the chip group and the docs A-Z rail. */ --selected-background: var(--text-primary); --selected-text: var(--background-primary); /* -- Card tokens removed — uses semantic tokens directly -- */ /* -- Tooltip tokens removed — uses values directly on component -- */ /* -- Toast tokens removed — uses values directly on component -- */ /* -- Tab tokens removed — uses semantic tokens directly -- */ /* -- Progress tokens removed — uses semantic tokens directly -- */ /* -- Divider tokens -- */ --divider-color: var(--border-faded); --divider-thickness: var(--border-s); --divider-spacing: var(--space-xl); /* -- Dropdown tokens -- */ --dropdown-background: var(--background-primary); --dropdown-border: var(--border-faded); --dropdown-item-hover: var(--background-faded); /* A floor, not a width — menus grow past it on their content. It is a knob because it is the one thing that overflows a 375px screen, so a narrow context needs to drop it rather than override the rule. */ --dropdown-menu-min-width: 250px; /* -- Select picker tokens -- */ /* The customizable-select popup reuses the dropdown surface tokens above so a native select and a .dropdown read as the same object. Only the scroll ceiling is its own, because an option list has no item count limit. */ --select-picker-max-height: 18rem; /* -- Tag tokens removed — uses semantic tokens directly -- */ /* -- Dialog tokens -- */ --dialog-max-width: 560px; /* -- Slider tokens removed — uses semantic tokens directly -- */ /* -- Rating tokens -- */ --rating-size: 1.5rem; /* -- Rating color tokens removed — uses values directly on component -- */ /* -- Mark tokens removed — uses values directly on component -- */ color-scheme: light; } /* ------ 2b. THEME TOKENS - DARK MODE ------ */ /* Set data-theme="dark" on for page-level, or on any element for scoped theming */ [data-theme="dark"] { /* -- Text -- */ --text-primary: #e8e6e3; --text-secondary: #a8a5a2; --text-plain: #f0eeeb; /* a11y: 0.5 → ~5.0:1 on --neutral-900; 0.45 was 4.4:1, marginal for AA */ --text-faded: rgba(255, 255, 255, 0.5); --text-accent: var(--yellow); --text-link: var(--text-accent); --text-inverted: #1a1a1a; --text-sidebar: var(--text-primary); --text-top-nav: var(--text-primary); /* -- Background -- */ --background-primary: var(--neutral-900); --background-secondary: #222222; --background-plain: #2a2a2a; --background-faded: rgba(255, 255, 255, 0.06); --background-darker: rgba(255, 255, 255, 0.12); --background-modal: var(--black-alpha-50); --background-sidebar: var(--background-primary); --background-top-nav: var(--background-primary); --bg-faded-3: var(--white-alpha-3); --bg-faded-5: var(--white-alpha-5); --bg-faded-7: var(--white-alpha-7); --bg-faded-10: var(--white-alpha-10); --bg-faded-15: var(--white-alpha-15); /* -- Border -- */ --border-primary: #e8e6e3; --border-secondary: #3a3a3a; --border-faded: var(--white-alpha-20); /* Lighter than the light-theme value, not darker — contrast runs the other way against a dark ground. 4.77:1 on --background-primary. */ --border-control: var(--neutral-400); /* -- Status -- */ --status-info: var(--blue-light); --status-success: var(--green-light); --status-warning: var(--yellow-light); --status-danger: var(--red-light); /* The pair flips as a pair: light text over the page ground pulled 15% toward the hue. Anchored to --background-primary rather than --brown-dark (a toast-local colour), so a rethemed dark ground carries these surfaces with it. Holds every variant above 6.6:1 (danger is the floor, since --red-light carries more chroma than the other three). */ --status-info-bg: color-mix(in srgb, var(--status-info), var(--background-primary) 85%); --status-success-bg: color-mix(in srgb, var(--status-success), var(--background-primary) 85%); --status-warning-bg: color-mix(in srgb, var(--status-warning), var(--background-primary) 85%); --status-danger-bg: color-mix(in srgb, var(--status-danger), var(--background-primary) 85%); /* -- Form -- */ --input-border: #3a3a3a; --input-background: rgba(255, 255, 255, 0.08); --input-text: #f0eeeb; --input-placeholder: rgba(255, 255, 255, 0.45); --input-focus: var(--text-accent); --input-disabled-bg: rgba(255, 255, 255, 0.06); --input-disabled-text: rgba(255, 255, 255, 0.3); --checkbox-background: #3a3a3a; --checkbox-selected: #e8e6e3; --checkbox-border: #555; --checkbox-checkmark: #1a1a1a; /* -- Toggle/Card/Tooltip/Toast/Dialog/Mark color tokens removed — dark mode handled on components -- */ /* -- Dropdown -- */ --dropdown-background: var(--background-plain); color-scheme: dark; } /* ------ 2c. SYSTEM PREFERENCE FALLBACK (no-JS) ------ */ /* Applies dark tokens when the user's OS prefers dark and no data-theme is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --text-primary: #e8e6e3; --text-secondary: #a8a5a2; --text-plain: #f0eeeb; --text-faded: rgba(255, 255, 255, 0.5); /* AA — see [data-theme="dark"] above */ --text-accent: var(--yellow); --text-link: var(--text-accent); --text-inverted: #1a1a1a; --text-sidebar: var(--text-primary); --text-top-nav: var(--text-primary); --background-primary: var(--neutral-900); --background-secondary: #222222; --background-plain: #2a2a2a; --background-faded: rgba(255, 255, 255, 0.06); --background-darker: rgba(255, 255, 255, 0.12); --background-modal: var(--black-alpha-50); --background-sidebar: var(--background-primary); --background-top-nav: var(--background-primary); --bg-faded-3: var(--white-alpha-3); --bg-faded-5: var(--white-alpha-5); --bg-faded-7: var(--white-alpha-7); --bg-faded-10: var(--white-alpha-10); --bg-faded-15: var(--white-alpha-15); --border-primary: #e8e6e3; --border-secondary: #3a3a3a; --border-faded: var(--white-alpha-20); --border-control: var(--neutral-400); --status-info: var(--blue-light); --status-success: var(--green-light); --status-warning: var(--yellow-light); --status-danger: var(--red-light); /* Mirror of the [data-theme="dark"] status surfaces above */ --status-info-bg: color-mix(in srgb, var(--status-info), var(--background-primary) 85%); --status-success-bg: color-mix(in srgb, var(--status-success), var(--background-primary) 85%); --status-warning-bg: color-mix(in srgb, var(--status-warning), var(--background-primary) 85%); --status-danger-bg: color-mix(in srgb, var(--status-danger), var(--background-primary) 85%); --input-border: #3a3a3a; --input-background: rgba(255, 255, 255, 0.08); --input-text: #f0eeeb; --input-placeholder: rgba(255, 255, 255, 0.45); --input-focus: var(--text-accent); --input-disabled-bg: rgba(255, 255, 255, 0.06); --input-disabled-text: rgba(255, 255, 255, 0.3); --checkbox-background: #3a3a3a; --checkbox-selected: #e8e6e3; --checkbox-border: #555; --checkbox-checkmark: #1a1a1a; /* -- Toggle/Card/Tooltip/Toast/Dialog/Mark color tokens removed — dark mode handled on components -- */ /* -- Dropdown -- */ --dropdown-background: var(--background-plain); color-scheme: dark; } } /* -- Selection highlight -- */ ::selection { color: var(--selection-text); background-color: var(--selection-background); } /* ------ 2d. COLOUR STEPS (data-color + data-step) ------ */ /* * One attribute picks a colour family, a second picks which of its three * stages becomes the ground. data-color="purple" data-step="shade". * * tint the pale stage — the default, written or omitted * base the pure hue — the only stage that does NOT follow the theme * shade the deep stage * * tint and shade swap under [data-theme="dark"], so a tint band stays quiet * against the page and a shade band stays loud, in either theme. base holds * its colour in both, which is what it is for. * * NOTHING HERE PAINTS. These four layers only declare custom properties, so * a stray data-color on a div changes no pixels. Painting happens in the * per-component assignment rules, each next to its own component below. * That is deliberate: .badge[data-color="danger"] and .button[data-color="red"] * keep their status colours, because no rule here selects them and --status-* * is never redefined. */ /* -- 1. Steps. Three stages, named for what they are: tint, base, shade. --- These are ROLE names, not claims about mixing. The house ramps are ---lighter / -- / ---dark, and this layer translates them, so the attribute value, the step token and the step all read the same word: data-step="shade" selects --color-shade. Naming the middle --color-base rather than --color-hue matters, because "hue" is already this project's word for the colour family — the thing data-color selects — and one word cannot carry two axes on the same element. The house ramp's fourth step, ---light, has no stage in a three-stage map and nothing ever read it, so it is gone rather than carried unnamed. --color-on-base is not a step. It is which of black or white sits ON the base colour. It is never a free choice: take the better of the two and the answer is forced by the hue. Today that is white on blue, purple, green and red, and black on yellow, aqua, pink and peach — every one of them the higher figure, with no compromise anywhere. Section 1 prints the measurement next to each base step rather than asserting it here, so this comment cannot go stale. Purple is worth remembering. It was the one exception: on the old --purple (#AA4FE3) white measured 4.25:1 against black's 4.94:1, and white was chosen anyway, knowingly below AA for body copy. The ramp has since moved to #881BDC, where white is 6.49:1 and black only 3.24:1 — so white is now both the chosen ink and the correct one, and the exception is gone. Nothing in the mode changed to achieve that. --color-off-base is simply the other one, and it is what gives the base step a raised surface — see section 4. */ [data-color="blue"] { --color-tint: var(--blue-lighter); --color-base: var(--blue); --color-shade: var(--blue-dark); --color-on-base: var(--white); --color-off-base: var(--black); } [data-color="purple"] { --color-tint: var(--purple-lighter); --color-base: var(--purple); --color-shade: var(--purple-dark); --color-on-base: var(--white); --color-off-base: var(--black); } [data-color="green"] { --color-tint: var(--green-lighter); --color-base: var(--green); --color-shade: var(--green-dark); --color-on-base: var(--white); --color-off-base: var(--black); } [data-color="yellow"] { --color-tint: var(--yellow-lighter); --color-base: var(--yellow); --color-shade: var(--yellow-dark); --color-on-base: var(--black); --color-off-base: var(--white); } [data-color="red"] { --color-tint: var(--red-lighter); --color-base: var(--red); --color-shade: var(--red-dark); --color-on-base: var(--white); --color-off-base: var(--black); } [data-color="aqua"] { --color-tint: var(--aqua-lighter); --color-base: var(--aqua); --color-shade: var(--aqua-dark); --color-on-base: var(--black); --color-off-base: var(--white); } [data-color="pink"] { --color-tint: var(--pink-lighter); --color-base: var(--pink); --color-shade: var(--pink-dark); --color-on-base: var(--black); --color-off-base: var(--white); } [data-color="peach"] { --color-tint: var(--peach-lighter); --color-base: var(--peach); --color-shade: var(--peach-dark); --color-on-base: var(--black); --color-off-base: var(--white); } /* -- 2. Roles. Step picks which end of the ramp is the ground. --------- */ [data-color] { --color-background: var(--color-tint); --color-text: var(--color-shade); } [data-color][data-step="shade"] { --color-background: var(--color-shade); --color-text: var(--color-tint); } /* The pure hue, fixed in both themes. */ [data-color][data-step="base"] { --color-background: var(--color-base); --color-text: var(--color-on-base); } /* -- 3. Dark swaps the two ends. base does not move. ------------------ :where() zeroes the theme part of each selector so all three land at the same specificity and source order decides, nearest-written-last. Without it the media form is (0,4,0) and the light form (0,3,0), so on an OS-dark machine with no attribute on a scoped light region would still get the dark mapping. Order is deliberate: media, then light, then dark last — which is the only order that keeps dark-inside-light working, the one direction the system itself supports (there is no [data-theme="light"] block in design-system.css, so light-inside-dark is unsupported there too). The tint arm is written as "not shade and not base" rather than by listing :not([data-step]) and ="tint". Enumerating the known values means a typo — data-step="Tint", or an empty value — matches no theme arm at all and silently pins that region to the light mapping in both themes. */ @media (prefers-color-scheme: dark) { :where(:root:not([data-theme])) [data-color]:where(:not([data-step="shade"]):not([data-step="base"])) { --color-background: var(--color-shade); --color-text: var(--color-tint); } :where(:root:not([data-theme])) [data-color][data-step="shade"] { --color-background: var(--color-tint); --color-text: var(--color-shade); } } :where([data-theme="light"]) [data-color]:where(:not([data-step="shade"]):not([data-step="base"])) { --color-background: var(--color-tint); --color-text: var(--color-shade); } :where([data-theme="light"]) [data-color][data-step="shade"] { --color-background: var(--color-shade); --color-text: var(--color-tint); } :where([data-theme="dark"]) [data-color]:where(:not([data-step="shade"]):not([data-step="base"])) { --color-background: var(--color-shade); --color-text: var(--color-tint); } :where([data-theme="dark"]) [data-color][data-step="shade"] { --color-background: var(--color-tint); --color-text: var(--color-shade); } /* -- 4. Two derived roles. ------------------------------------------------ raised — a nested surface sitting on the ground. A step will not do the job: in tint the next step along works, but in shade nothing sits between shade and base, and in base nothing sits beside base at all. One mix adapts to all three and to both themes. muted — a second, quieter text colour, for a subtitle or a caption. On the base step the raise changes DIRECTION, and that is the whole trick. The base step is the tightest ground in the set — white on --red is 4.87:1, the lowest of the eight — so moving the surface toward the text costs contrast it cannot spare, measured 4.33:1 on red at a 10% raise toward the ink. Moving it AWAY instead spends nothing: it widens the gap. Because the ink on the base step is always literally black or white, "away" has an exact name, which is --color-off-base, and mixing 15% of it lands text at 5.9-12.7:1 — better than the header ground manages on its own — with a surface shift of 1.09-1.30 against the 1.18-1.31 that tint and shade get. So the rule is: raised moves toward the ink where there is room, and away from it where there is not. Two directions, one reason. muted has no such escape. It IS the text, so moving it away from the ground is not an option — there is nowhere for it to go that is not the text itself. On base it stays at full strength. muted is 90%, not the 80% this started at. 80% was calibrated against five ramps whose text-on-ground sits at 9.5-13.5:1, and it had 4.65:1 of headroom at its tightest. aqua and pink are shallower — 7.03:1 and 7.90:1 — because their dark steps (#15605A, #7F2B56) are lighter than the other five (#001F64, #3A005F, #003E37, #583800, #4E0100). At 80% that put muted at 4.37:1 on aqua and muted-on-raised at 3.76:1, both under AA. 90% clears every hue in both themes and costs the deep ramps nothing they need: blue's muted moves 7.59 -> 10.22 against a 13.11 ground, still visibly quieter than the text. The alternative fix is deeper dark steps on the two new ramps, which is a change to theme.css rather than to the mode. border-faded — a decorative boundary, not a control boundary. The system's own --border-faded is an alpha wash of black (--black-alpha-15) or, in dark, of white. That polarity is chosen for the page, and a moded region is light inside dark or dark inside light, so the root's choice is wrong for it: black at 15% is invisible on a shade ground. Mixing toward --color-text instead keeps the wash but takes its polarity from the mode. 25% was picked to sit on the system's own band — the root token measures 1.41:1 in light and 1.89:1 in dark, and 25% spans 1.40-2.02 across all thirty hue x step x theme combinations. It is deliberately below the 3:1 of WCAG 1.4.11: this is the decorative border, and 1.4.11 governs control boundaries, which take --border-control. */ [data-color] { --color-raised: color-mix(in srgb, var(--color-text) 10%, var(--color-background)); --color-text-muted: color-mix(in srgb, var(--color-text) 90%, var(--color-background)); --color-border-faded: color-mix(in srgb, var(--color-text) 25%, var(--color-background)); --color-hover-mix: 75%; } [data-color][data-step="base"] { --color-raised: color-mix(in srgb, var(--color-off-base) 15%, var(--color-background)); --color-text-muted: var(--color-text); --color-hover-mix: 95%; } /* ------ 3. SYSTEM TOKENS - SPACING & TYPOGRAPHY ------ */ :root { /* -- Unit tokens -- */ --none: 0; --2xs: 0.125rem; /* 2px */ --xs: 0.25rem; /* 4px */ --s: 0.5rem; /* 8px */ --m: 0.75rem; /* 12px */ --l: 1rem; /* 16px */ --xl: 1.5rem; /* 24px */ --2xl: 2rem; /* 32px */ --3xl: 2.5rem; /* 40px */ --4xl: 3rem; /* 48px */ --5xl: 3.5rem; /* 56px */ --6xl: 4rem; /* 64px */ --7xl: 4.5rem; /* 72px */ --8xl: 5rem; /* 80px */ --9xl: 5.5rem; /* 88px */ --10xl: 6rem; /* 96px */ --11xl: 6.5rem; /* 104px */ --12xl: 7rem; /* 112px */ --13xl: 7.5rem; /* 120px */ --14xl: 10rem; /* 160px */ /* -- Spacing scale -- */ --space-none: var(--none); /* 0 */ --space-2xs: var(--2xs); /* 2px */ --space-xs: var(--xs); /* 4px */ --space-s: var(--s); /* 8px */ --space-m: var(--m); /* 12px */ --space-l: var(--l); /* 16px */ --space-xl: var(--xl); /* 24px */ --space-2xl: var(--2xl); /* 32px */ --space-3xl: var(--3xl); /* 40px */ --space-4xl: var(--4xl); /* 48px */ --space-5xl: var(--5xl); /* 56px */ --space-6xl: var(--6xl); /* 64px */ --space-7xl: var(--7xl); /* 72px */ --space-8xl: var(--8xl); /* 80px */ --space-9xl: var(--9xl); /* 88px */ --space-10xl: var(--10xl); /* 96px */ --space-11xl: var(--11xl); /* 104px */ --space-12xl: var(--12xl); /* 112px */ --space-13xl: var(--13xl); /* 120px */ --space-14xl: var(--14xl); /* 160px */ /* -- Container widths -- */ --container-xs: 480px; --container-s: 640px; --container-m: 960px; --container-l: 1200px; --container-xl: 1440px; /* -- Max-widths -- */ --max-width-xs: 480px; --max-width-s: 640px; --max-width-m: 960px; --max-width-l: 1200px; --max-width-xl: 1440px; /* -- Line length (typographic readability, 45–75ch range) -- */ --line-length-headline: 22ch; --line-length-body: 55ch; --line-length-xsmall: 35ch; --line-length-small: 45ch; --line-length-medium: 65ch; --line-length-wide: 75ch; /* -- Section spacing variables -- */ --section-xs: var(--space-xl); --section-s: var(--space-2xl); --section-m: var(--space-6xl); --section-l: var(--space-10xl); --section-xl: var(--space-14xl); /* -- Accordion spacing variables -- */ --accordion-padding-x: var(--space-l); --accordion-padding-y: var(--space-l); /* -- Border width tokens -- */ --border-s: 0.0625rem; /* 1px */ --border-m: 0.09375rem; /* 1.5px */ --border-l: 0.1875rem; /* 3px */ /* -- Border composition variables -- */ --border-width: var(--border-s); --border-style: solid; --border-color: var(--border-primary); /* -- Border radius tokens -- */ --radius-2xs: 2px; --radius-xs: 4px; --radius-s: 6px; --radius-m: 10px; --radius-l: 16px; --radius-xl: 24px; --radius-pill: 999px; /* -- Interaction sizing -- */ /* Minimum hit area for standalone pointer targets: WCAG 2.5.5 Target Size (Enhanced, Level AAA) and the Apple HIG target. The AA floor is 2.5.8's 24px (WCAG 2.2). Applied as a min size on small controls — the visual size stays, the hit area pads out. Not for dense chrome: bar controls hold their own --bar-control-height and answer 2.5.8 instead. Not a per-theme override surface. */ --target-min: 44px; /* -- Safe-area insets -- */ /* Device cutouts (notch, home indicator) in installed-PWA / standalone contexts. 0px in a normal browser tab, so composing them is always safe: padding-bottom: calc(var(--space-m) + var(--safe-area-bottom)). Non-zero only when the page's viewport meta carries viewport-fit=cover. */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-right: env(safe-area-inset-right, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); } /* ------ 4. SYSTEM TOKENS - MOTION ------ */ /* * Motion design tokens. Two layers, same model as color and spacing: * * 1. Primitives (--ease-*, --duration-*) — raw building blocks. Same * t-shirt scale as the rest of the design system. Easing names match * the standard CSS keywords (in / out / in-out) so anyone with web * experience already knows what shape they have; the cubic-bezier * values are our refined replacements for the defaults. * * 2. Semantic tokens (--motion-*) — named by intent ("page-open", * "page-close"). These compose primitives. Consumers (CSS components, * JS code) only ever read the semantic layer. * * Naming convention for new semantic tokens: * --motion-{scope}-{event}-{property} * scope = page | surface | element | feedback * event = open | close | swap | enter | exit | fade | hover | press * property = duration | easing * * See cms/motion.md for the full reference and demos. */ :root { /* -- Easing primitives -- */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* fast start, slow end. for exits. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* slow start, slow end with long tail. for entrances. */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* symmetric. for swaps and continuous motion. */ --ease-emphasized: cubic-bezier(0.86, 0, 0.07, 1); /* steeper symmetric curve — near-still start and end, fast middle. for large layout shifts that should feel decisive (panel collapse, sidebar toggle, stage transforms). */ /* -- Duration primitives -- */ --duration-2xs: 100ms; --duration-xs: 200ms; --duration-s: 400ms; --duration-m: 600ms; --duration-l: 800ms; --duration-xl: 1200ms; --duration-2xl: 1500ms; --duration-3xl: 1800ms; --duration-4xl: 2000ms; --duration-5xl: 2500ms; --duration-6xl: 3000ms; --duration-7xl: 4000ms; --duration-8xl: 6000ms; /* -- Stagger offset — per-item delay step for sequenced groups (list items, grid cards). A delay increment, not an animation duration. -- */ --duration-stagger: 30ms; /* -- Page-level semantic motion -- */ --motion-page-open-duration: var(--duration-xl); /* 1200ms */ --motion-page-open-easing: var(--ease-in-out); --motion-page-close-duration: var(--duration-xl); /* 1200ms */ --motion-page-close-easing: var(--ease-in-out); --motion-page-swap-duration: var(--duration-xl); /* 1200ms */ --motion-page-swap-easing: var(--ease-in-out); --motion-page-fade-duration: var(--duration-m); /* 600ms */ --motion-page-fade-easing: var(--ease-in-out); } /* ------ 5. LAYOUT PRIMITIVES ------ */ /* -- Global horizontal padding -- */ .padding-global { padding-left: var(--space-xl); padding-right: var(--space-xl); } /* -- Padding utilities -- */ .padding-s { padding: var(--space-s); } .padding-m { padding: var(--space-m); } .padding-l { padding: var(--space-l); } .padding-xl { padding: var(--space-xl); } .padding-2xl { padding: var(--space-2xl); } .padding-3xl { padding: var(--space-3xl); } /* -- Containers -- */ .container-xs { display: block; max-width: var(--container-xs); width: 100%; margin-left: auto; margin-right: auto; } .container-s { display: block; max-width: var(--container-s); width: 100%; margin-left: auto; margin-right: auto; } .container-m { display: block; max-width: var(--container-m); width: 100%; margin-left: auto; margin-right: auto; } .container-l { display: block; max-width: var(--container-l); width: 100%; margin-left: auto; margin-right: auto; } .container-xl { display: block; max-width: var(--container-xl); width: 100%; margin-left: auto; margin-right: auto; } /* -- Max-width utilities -- */ .max-width-xs { max-width: var(--max-width-xs); } .max-width-s { max-width: var(--max-width-s); } .max-width-m { max-width: var(--max-width-m); } .max-width-l { max-width: var(--max-width-l); } .max-width-xl { max-width: var(--max-width-xl); } .max-width-full { max-width: 100%; } /* -- Section spacing -- */ section { display: block; } .padding-section { display: block; } /* -- Top spacing combo classes -- */ .top-small { padding-top: var(--section-s); } .top-medium { padding-top: var(--section-m); } .top-large { padding-top: var(--section-l); } .top-xl { padding-top: var(--section-xl); } /* -- Bottom spacing combo classes -- */ .bottom-small { padding-bottom: var(--section-s); } .bottom-medium { padding-bottom: var(--section-m); } .bottom-large { padding-bottom: var(--section-l); } .bottom-xl { padding-bottom: var(--section-xl); } /* ------ 6. BLOCKS ------ */ .block { display: flex; flex-direction: column; gap: var(--space-m); } /* -- Child margin reset -- gap-* is the sole source of vertical spacing inside a block: element defaults (headings, p, lists, figure…) are zeroed so gap and margin never compound — flex gap does not collapse with margins, it adds to them. margin-block only: margin-inline auto must survive for data-align="center". Component classes that set their own root margins (e.g. .callout) are declared later in the cascade and keep them inside blocks. */ .block > * { margin-block: 0; } /* -- Gap modifiers -- */ .gap-none { gap: var(--space-none); } .gap-xs { gap: var(--space-xs) !important; } .gap-s { gap: var(--space-s) !important; } .gap-m { gap: var(--space-m) !important; } .gap-l { gap: var(--space-l) !important; } .gap-xl { gap: var(--space-xl) !important; } .gap-2xl { gap: var(--space-2xl) !important; } .gap-3xl { gap: var(--space-3xl) !important; } /* -- Layout modifiers -- */ .row { flex-direction: row; } .row-reverse { flex-direction: row-reverse; } .align-start { align-items: flex-start; } .align-center { align-items: center; } .align-end { align-items: flex-end; } .align-stretch { align-items: stretch; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .overflow-hidden { overflow: hidden; } /* -- Self alignment -- */ [data-align="center"] { margin-inline: auto; justify-self: center; } /* ------ 7. GRID ------ */ /* -- Grid -- */ .grid { display: grid; gap: var(--space-m); grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; } /* -- Grid column modifiers -- */ .cols-2 { grid-template-columns: 1fr 1fr; } .cols-3 { grid-template-columns: 1fr 1fr 1fr; } .cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; } /* -- Responsive collapse -- */ @media (max-width: 768px) { .grid { grid-template-columns: 1fr; } } .token-col { grid-template-columns: 1fr auto; padding: var(--space-m); } /* -- Grid item width modifiers -- */ .fit-content { width: fit-content; } /* ------ 8. BORDER UTILITIES ------ */ /* -- Structural classes -- */ .border { border: var(--border-width) var(--border-style) var(--border-color); } .border-top { border-top: var(--border-width) var(--border-style) var(--border-color); } .border-bottom { border-bottom: var(--border-width) var(--border-style) var(--border-color); } .border-left { border-left: var(--border-width) var(--border-style) var(--border-color); } .border-right { border-right: var(--border-width) var(--border-style) var(--border-color); } /* -- Width combo classes -- */ .border-s { --border-width: var(--border-s); } .border-m { --border-width: var(--border-m); } .border-l { --border-width: var(--border-l); } /* -- Style combo classes -- */ .border-solid { --border-style: solid; } .border-dashed { --border-style: dashed; } .border-dotted { --border-style: dotted; } /* -- Color combo classes -- */ .border-primary { --border-color: var(--border-primary); } .border-secondary { --border-color: var(--border-secondary); } .border-faded { --border-color: var(--border-faded); } /* ------ 9. TYPOGRAPHY UTILITIES ------ */ /* -- Font size utilities -- */ .font-primary { font-family: var(--font-primary); } .font-secondary { font-family: var(--font-secondary); } /* -- Accent font treatments -- Apply on spans inside prose, or to retreat a heading into a different voice. Each sets family + sensible companion properties (weight, tracking, leading where the face needs it). Size stays whatever the host element controls. */ .accent-display { font-family: var(--font-display); letter-spacing: 0; text-transform: uppercase; } .accent-playful { font-family: var(--font-playful); font-weight: 700; font-style: normal; } .accent-script { font-family: var(--font-script); font-weight: 400; line-height: 1.1; } .accent-editorial { font-family: var(--font-editorial); font-weight: 400; font-style: italic; } .accent-code { font-family: var(--font-code); font-weight: 400; } .font-2xs { font-size: var(--font-2xs); } .font-xs { font-size: var(--font-xs); } .font-s { font-size: var(--font-s); } .font-m { font-size: var(--font-m); } .font-l { font-size: var(--font-l); } .font-xl { font-size: var(--font-xl); } .font-2xl { font-size: var(--font-2xl); } .font-3xl { font-size: var(--font-3xl); } .font-4xl { font-size: var(--font-4xl); } .font-5xl { font-size: var(--font-5xl); } .font-6xl { font-size: var(--font-6xl); } .font-7xl { font-size: var(--font-7xl); } .font-8xl { font-size: var(--font-8xl); } .font-9xl { font-size: var(--font-9xl); } .font-10xl { font-size: var(--font-10xl); } /* -- Text size utilities -- */ /* Each class consumes its matching --text-size-* token (defined in :root). */ /* xs stays fixed at the a11y floor; m reuses --body-size for clean reset. */ /* Two spellings, one scale. The long forms were the published API in `classes.md` and were never defined here, so every one of them — 80 across the repo, including generated pages and the docs' own demos — silently did nothing. Aliasing them onto the short forms is what makes the documented names true without minting a second scale that would differ from this one at three of its five steps. The short forms stay: they have 129 working consumers and are what the CSS has always meant. */ .text-size-xl, .text-size-xlarge { font-size: var(--text-size-xl); line-height: var(--line-height-m); } .text-size-l, .text-size-large { font-size: var(--text-size-l); line-height: var(--line-height-l); } .text-size-m, .text-size-medium { font-size: var(--text-size-m); line-height: var(--line-height-l); } .text-size-s, .text-size-small { font-size: var(--text-size-s); line-height: var(--line-height-xl); } .text-size-xs, .text-size-xsmall { font-size: var(--text-size-xs); line-height: var(--line-height-xl); } /* -- Text wrap utilities -- */ [data-text-wrap="balance"] { text-wrap: balance; } [data-text-wrap="pretty"] { text-wrap: pretty; } /* -- Font width utilities -- */ [data-font-width="condensed"] { font-stretch: var(--font-condensed); } [data-font-width="narrow"] { font-stretch: var(--font-narrow); } [data-font-width="normal"] { font-stretch: var(--font-normal); } [data-font-width="wide"] { font-stretch: var(--font-wide); } [data-font-width="expanded"] { font-stretch: var(--font-expanded); } /* -- Text alignment utilities -- */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* -- Eyebrow text -- */ .eyebrow { font-size: var(--font-xs); line-height: var(--line-height-m); font-weight: var(--font-weight-regular); letter-spacing: var(--letter-spacing-l); text-transform: uppercase; } /* -- Label text -- * The form label's look as a class, for the places something should read as * a label but is not a