@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* tokens/base.css */ /* ============================================================================ JSTOV design system — tokens/base.css The neutral baseline. Implements the whole contract (tokens/CONTRACT.md) so that ANY module renders correctly with no theme file loaded. Load order (mandatory): tokens/base.css → tokens/themes/.css (optional) → components/_base.css → components//.css Layers in this file 1. Skin tokens, light defaults :root, [data-mode="light"] (0,1,0) 2. Structure knobs + constants :root (0,1,0) 3. Derived tokens (calc / var chains) the RE-DERIVE HOSTS rule (0,1,0) 4. Dark remap :root[data-mode="dark"], :not(:root)[data-mode="dark"] (0,2,0) + guarded prefers-color-scheme 5. Policy attributes :root[data-x="v"], :not(:root)[data-x="v"] (0,2,0) + band islands (data-band) [data-band="v"][data-band] (0,2,0) 6. Reduced motion, grid-snapping (@supports round()) Specificity ladder — why the selectors look the way they do • Theme LIGHT blocks are [data-theme="x"] (0,1,0) and load after this file, so they beat the defaults in 1–3 by source order. • Dark blocks (4) and policy attributes (5) are written at (0,2,0) so that (a) a theme's light block can never leak a colour into dark mode, and (b) an EXPLICIT attribute on the page beats a theme's CSS-only fallback for that policy (a theme's fallback is (0,1,0)). • Theme DARK blocks are [data-theme="x"][data-mode="dark"] (0,2,0) and load later, so they beat the neutral dark remap. • The guarded media form for a theme is :root[data-theme="x"]:not([data-mode="light"]) (0,3,0) so it beats the neutral guarded form (0,2,0). Re-derive hosts Custom properties that contain var()/calc() are substituted on the element that DECLARES them, and descendants inherit the finished value. If a theme scoped to
sets --ds-space-unit:8px, a --ds-space-4 declared only on :root would still be 16px inside the section. So every derived token is declared on the HOST LIST — :root plus every element that can carry a theme/policy attribute, and every data-band island — and recomputes wherever a knob can change. Keep that list in sync with CONTRACT.md §3. Islands (batch 12, 2026-09-20) data-mode="dark|light" and data-band="tint|dark|accent" are section-level islands. Base defines all three bands theme-agnostically (§5 below); a theme's dark block also lists [data-theme="x"] [data-mode="dark"] and [data-theme="x"] [data-band="dark"] so an island inside a themed page gets THE THEME's dark, not this file's neutral one. The accent band reads the page's accent through the --ds-band-* snapshots (declared on every host except the accent band itself, because a custom property cannot reference its own redefinition on the same element). Put data-band on a
, never on the root and never on the same element as data-theme/data-mode — the root is where the snapshot is taken from. ========================================================================== */ /* --------------------------------------------------------------------------- 1. LIGHT SKIN DEFAULTS — everything that changes between light and dark (colours, shadows, glass, texture). [data-mode="light"] is in the list so a light island inside a dark page works without resetting structure. ------------------------------------------------------------------------- */ :root, [data-mode="light"] { color-scheme: light; /* ---- Surfaces (§7.1) — pure-neutral ramp, surfaces lighter than ground --- */ --ds-ground: #fafafa; /* page / chrome background */ --ds-ground-2: #f4f4f4; /* second chrome plane: sidebar, rail, canvas */ --ds-surface: #ffffff; /* cards, inputs, popovers */ --ds-surface-2: #f3f3f3; /* inset: nested fields, chips, wells */ --ds-surface-3: #ececec; /* deeper inset / disabled fill */ --ds-skeleton: #e2e2e2; /* loading placeholder fill — visible on ground AND surface (batch-1 finding) */ --ds-surface-raised: #ffffff; /* overlay fill (popover, modal) — NEUTRAL even in themed planes */ --ds-surface-hover: #f0f0f0; /* one tint step for hover */ --ds-surface-pressed: #ebebeb; /* pressed fill — hover < pressed < selected in distance from surface (batch-12) */ --ds-surface-selected: #e6e6e6; /* selected nav / row / tab (neutral) */ --ds-surface-inverse: #111111; /* dark chrome, inverse cards */ --ds-surface-inverse-hover: #262626; /* hover step for inverse fills (batch-2 finding) */ --ds-surface-polarity: 1; /* 1 = surface lighter than ground, -1 = darker (informational) */ --ds-scrim: rgba(0, 0, 0, .40); --ds-scrim-filter: none; /* none | blur(6px) | grayscale(.5) */ /* ---- Ink (§7.2) ---------------------------------------------------------- */ --ds-ink: #111111; /* primary text */ --ds-ink-2: #3d3d3d; /* secondary text, body inside cards, nav */ --ds-ink-muted: #6b6b6b; /* labels, placeholders, meta — READABLE, ≥ 4.5:1 on ground/surface/surface-2 */ --ds-ink-faint: #a3a3a3; /* DECORATIVE only: disabled, indices, hints */ --ds-ink-inverse: #fafafa; /* text on --ds-surface-inverse */ --ds-ink-on-primary: #ffffff; /* text on --ds-primary-fill */ --ds-ink-on-accent: #ffffff; /* text on --ds-accent fill */ /* --ds-ink-link and --ds-ink-code are derived (see hosts rule) */ /* ---- Lines (§7.3) — three hairline grades + control borders --------------- */ --ds-rule-soft: #ededed; /* in-content / row dividers (1.17:1) */ --ds-rule-faint: #f4f4f4; /* table COLUMN rules, fainter than rows (batch-2 finding) */ --ds-rule: #e5e5e5; /* structural hairline: dividers, card edges (≥ 1.15:1 — 1.26 here) */ --ds-rule-strong: #d4d4d4; /* column / section rules, the control lip */ --ds-border: #d9d9d9; /* control borders: inputs, buttons, chips */ --ds-border-strong: #bdbdbd; /* darker fields when a brand wants them; hover border */ /* --ds-ring, --ds-border-selected are derived */ /* ---- Action & accent (§7.4) ---------------------------------------------- */ --ds-primary-fill: #111111; /* THE one filled button; ink-black here */ --ds-primary-fill-hover: #2a2a2a; --ds-primary-border: transparent; /* optional 1px darker edge */ --ds-primary-highlight: transparent; /* optional 1px inner top highlight */ --ds-accent: #2563eb; /* links, active state, badges, dots, CTA if hue */ --ds-accent-hover: #1d4fd8; --ds-accent-ink: #1e40af; /* accent darkened for text on tint */ --ds-accent-tint: #e9effd; /* accent at ~10% for chips / selected rows */ --ds-accent-soft: #93b4f5; /* ~45% — open triggers, soft borders */ --ds-accent-2: #7c5ee4; /* second accent: selection | data | sub-brand | AI */ --ds-accent-2-ink: #5b3fc4; --ds-accent-2-tint: #eee9fb; /* --ds-accent-line derived */ /* ---- Semantic (§7.5) — fill / tint / ink triplets ------------------------- */ --ds-success: #15803d; --ds-success-tint: #e3f0e8; --ds-success-ink: #14703a; --ds-danger: #dc2626; --ds-danger-tint: #fbe5e5; --ds-danger-ink: #b91c1c; --ds-warning: #d97706; --ds-warning-tint: #faefe1; --ds-warning-ink: #9a4f00; --ds-info: #0369a1; --ds-info-tint: #e1edf4; --ds-info-ink: #075985; /* same-hue hairlines for tinted callouts / validation outlines (batch-5 finding); themes may tune */ --ds-success-line: color-mix(in srgb, var(--ds-success) 35%, transparent); --ds-danger-line: color-mix(in srgb, var(--ds-danger) 35%, transparent); --ds-warning-line: color-mix(in srgb, var(--ds-warning) 35%, transparent); --ds-info-line: color-mix(in srgb, var(--ds-info) 35%, transparent); --ds-ink-on-semantic: #ffffff; /* text on a semantic FILL (warning fill needs ink — see CONTRACT) */ --ds-ink-on-warning: #1a1200; /* text on a warning FILL — dark in BOTH modes (batch-2 finding) */ /* --ds-live, --ds-presence, --ds-selection-graph derived */ /* ---- Data (§7.6) — 8-hue categorical set, distinguishable in both modes --- Hue order: blue · violet · green · orange · pink · amber · teal · umber. Adjacent hues are ≥ 40° apart; every light mark is ≥ 3:1 on #ffffff AND on --ds-ground, so a 1 px chart line passes on either plane (amber was 2.98 / 2.85 — darkened to #ad861b = 3.39 / 3.24, batch-12; its ink #7d6218 stays darker than the fill and 5.2:1 on the tint). Dark amber #e2c04e is 10:1 on the dark surface — untouched. Amber is still a fill/badge hue: text uses its ink. */ --ds-data-1: #2f6fed; --ds-data-1-tint: #e2ebfc; --ds-data-1-ink: #2455bd; --ds-data-2: #7c5ee4; --ds-data-2-tint: #ede8fb; --ds-data-2-ink: #6248b8; --ds-data-3: #0f9d6b; --ds-data-3-tint: #ddf1ea; --ds-data-3-ink: #0b7751; --ds-data-4: #da6c36; --ds-data-4-tint: #fbebe4; --ds-data-4-ink: #a6542c; /* orange 2.87 → 3.06 on surface-2 (the tint band's ground), batch-12 */ --ds-data-5: #d23f7a; --ds-data-5-tint: #f9e4ec; --ds-data-5-ink: #b53669; --ds-data-6: #ad861b; --ds-data-6-tint: #f7f2e1; --ds-data-6-ink: #7d6218; --ds-data-7: #0e9aa7; --ds-data-7-tint: #ddf1f3; --ds-data-7-ink: #0b757f; --ds-data-8: #8a6a4b; --ds-data-8-tint: #efeae6; --ds-data-8-ink: #7f6245; --ds-chart-ramp-1: #1e40af; --ds-chart-ramp-2: #2f6fed; --ds-chart-ramp-3: #93b4f5; /* one hue, dark→light */ /* --ds-chart-grid, --ds-chart-comparison derived */ /* ---- Elevation (§7.7) — shadow recipes; card-* derived from data-depth ---- */ --ds-shadow-lift: 0 1px 2px rgba(0, 0, 0, .05); /* pressable controls */ --ds-shadow-card: 0 1px 3px rgba(0, 0, 0, .08); /* inert unless data-depth="shadow" */ --ds-shadow-float: 0 8px 24px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .04); /* popover / toast */ --ds-shadow-modal: 0 24px 80px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .04); --ds-shadow-object: 0 4px 12px rgba(0, 0, 0, .12); /* physical objects: covers, task cards */ /* --ds-shadow-lip derived */ /* ---- Imagery & ornament (§7.12) ------------------------------------------ */ --ds-overlay-fill: rgba(0, 0, 0, .60); /* chrome on images */ --ds-ink-on-overlay: #ffffff; /* ink on --ds-overlay-fill / over media — light in BOTH modes (batch-2 finding) */ --ds-glass-fill: rgba(255, 255, 255, .35); --ds-glass-border: rgba(255, 255, 255, .55); --ds-texture-color: rgba(0, 0, 0, .06); --ds-illustration-ground: #eef2f7; /* shared tint behind illustrations */ /* --ds-line-art, --ds-media-radius derived */ } /* --------------------------------------------------------------------------- 2. STRUCTURE DEFAULTS — system-owned knobs and constants. Declared on :root ONLY (a light/dark island must not reset them). Themes SCALE these (--ds-radius-scale, --ds-density-scale, --ds-space-unit, --ds-text-base) or point lane families at their own stacks; they do not redefine the steps. ------------------------------------------------------------------------- */ :root { /* ---- Lines: widths ------------------------------------------------------- */ --ds-border-width: 1px; --ds-ring-width: 2px; --ds-ring-offset: 2px; --ds-ring-outset: 0px; /* 0 | 3px — highlight ring drawn outside the box (Jasper) */ /* ---- Elevation: the control lip ------------------------------------------- */ --ds-control-lip: 0px; /* 0 | 1px — darker bottom edge on pressables */ /* ---- Shape (§7.8) — steps derive from --ds-radius-scale ------------------ */ --ds-radius-scale: 1; /* 0 drafting · 1 tool · 2 soft (any number works) */ --ds-radius-pill: 9999px; /* xs/sm/md/lg/xl + --ds-radius-button derived */ /* ---- Typography (§7.9) --------------------------------------------------- */ --ds-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ds-font-serif: ui-serif, Georgia, "Times New Roman", serif; --ds-font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* lane families — a theme points a lane at one of the families above: */ --ds-font-display: var(--ds-font-sans); /* display / hero lane */ --ds-font-label: var(--ds-font-sans); /* label / metadata lane */ --ds-font-body-alt: var(--ds-font-sans); /* explanatory / "writing" lane */ --ds-font-sign: var(--ds-font-display); /* signage lane: place names, wayfinding, posters (2026-10-11) */ --ds-text-base: 14px; /* 14 app · 16 forms/marketing/consumer */ /* scale ratios (flat by default; a theme may re-shape them) */ --ds-scale-xs: .786; --ds-scale-sm: .857; --ds-scale-lg: 1.143; --ds-scale-xl: 1.429; --ds-scale-2xl: 1.714; --ds-scale-3xl: 2.286; --ds-scale-display: 3.429; --ds-weight-regular: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 700; --ds-display-weight: 600; /* 400–500 editorial · 600–800 punch */ --ds-heading-weight: 600; --ds-display-tracking: -0.02em; --ds-heading-tracking: -0.01em; --ds-label-tracking: 0; /* sentence-case tracking (set by data-labels) */ --ds-label-tracking-upper: .08em; /* the tracking uppercase labels take; a theme sets ITS value here and data-labels="upper" reads it (batch-12: the attribute no longer pins .08em) */ --ds-label-case: none; /* none | uppercase (set by data-labels) */ --ds-control-case: none; /* none | capitalize (set by data-controls) */ --ds-lh-tight: 1.05; --ds-lh-heading: 1.2; --ds-lh-body: 1.45; --ds-lh-prose: 1.6; --ds-lh-list: 1.25; --ds-numeric: tabular-nums; /* font-variant-numeric for numbers */ --ds-measure: 65ch; /* reading measure for prose */ /* ---- Space & density (§7.10) -------------------------------------------- */ --ds-space-unit: 4px; /* 4 apps · 8 marketing */ --ds-density-scale: 1; /* .85 compact · 1 default · 1.2 comfortable */ --ds-control-h-base: 36px; /* system-owned; themes scale via density */ --ds-field-gap: 8px; /* label → control */ --ds-gutter-page: clamp(16px, 4vw, 72px); --ds-container-max: 1152px; --ds-container-narrow: 640px; --ds-container-prose: 720px; --ds-container-content: 1088px; /* app content column (.ds-content, C-03) — theme-tunable (batch-12) */ --ds-section-gap-units: 12; /* marketing region gap in space units (C-01 house = 12–16) */ --ds-rail-inset: 24px; /* C-03 drawn rails: inset from the page edge, NOT a space step (48 px at unit 8 was wrong) — theme-tunable (batch-12) */ --ds-rail-w: 64px; /* labelled icon rail */ --ds-sidebar-w: 256px; --ds-inspector-w: 320px; --ds-topbar-h: 56px; --ds-sheet-inset: 12px; /* inset sheet gap from the chrome edge (house shell) */ --ds-icon-size: 16px; /* inline */ --ds-icon-size-row: 20px; /* list / nav rows */ --ds-icon-size-rail: 24px; /* rails */ --ds-icon-stroke: 1.5px; --ds-tap-target-min: 40px; /* ---- Motion (§7.11) ------------------------------------------------------ */ --ds-motion-scale: 1; /* 0 under prefers-reduced-motion */ --ds-ease-standard: cubic-bezier(.2, 0, 0, 1); --ds-ease-out: cubic-bezier(0, 0, .2, 1); --ds-ease-in: cubic-bezier(.4, 0, 1, 1); --ds-ambient-play: running; /* animation-play-state for marketing blobs / marquee / parallax: running | paused — paused under data-ambient="off" and reduced motion. Consume as `animation-play-state: var(--ds-ambient-play)` (batch-12) */ --ds-ambient-motion: 1; /* DEPRECATED alias of --ds-ambient-play (1 | 0) — nothing should read it; kept so old references resolve until they are re-pointed */ /* --ds-dur-* derived */ /* ---- Imagery: geometry --------------------------------------------------- */ --ds-glass-blur: 12px; --ds-media-aspect: 16 / 9; --ds-mock-fade: 96px; /* fade-mask length on product frames */ /* ---- Z-index ladder ------------------------------------------------------ Transient layers sit ABOVE the scrim + modal pair (DESK-326, CONTRACT §15): a popover or dropdown opened over a scrimmed page, or portalled out of a modal, must be on top. Page-level popovers are light-dismissed when a modal opens, so a page popover never ends up over a modal. */ --ds-z-sticky: 100; --ds-z-scrim: 200; --ds-z-modal: 210; --ds-z-dropdown: 300; --ds-z-popover: 310; --ds-z-toast: 500; --ds-z-tooltip: 600; } /* --------------------------------------------------------------------------- 3. DERIVED TOKENS — declared on every RE-DERIVE HOST (see header). A theme sets the knobs (unit, scales, seed, families); these follow. [data-band] is a host too (batch-12), so a band block sets planes and accent roles only — card-*, selected-*, hover-*, link / ring / lines re-derive from them on the band element itself. ------------------------------------------------------------------------- */ :root, [data-theme], [data-mode], [data-density], [data-depth], [data-selection], [data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover], [data-band] { /* ink chains */ --ds-ink-link: var(--ds-accent); --ds-ink-code: var(--ds-ink-2); --ds-ring: var(--ds-accent); --ds-border-selected: var(--ds-accent); --ds-accent-line: var(--ds-accent); --ds-live: var(--ds-danger); --ds-presence: var(--ds-success); --ds-selection-graph: var(--ds-accent); --ds-data-primary: var(--ds-data-1); /* a chart's default / single series; themes whose data-1 IS the accent re-point it (CONTRACT §15.2) */ --ds-chart-grid: var(--ds-rule-soft); --ds-chart-comparison: var(--ds-ink-faint); --ds-line-art: var(--ds-rule-strong); /* elevation: card-* follow data-depth (defaults = tint-hairline) */ --ds-card-bg: var(--ds-surface); --ds-card-border: var(--ds-rule); --ds-card-shadow: 0 0 0 0 transparent; /* composable 'none' — `none` would invalidate a comma-joined box-shadow */ --ds-shadow-lip: inset 0 calc(-1 * var(--ds-control-lip)) 0 0 var(--ds-border-strong); --ds-hover-bg: var(--ds-surface-hover); /* data-hover="tint" */ --ds-hover-shadow: 0 0 0 0 transparent; /* selection primitives (defaults = data-selection="tint") */ --ds-selected-bg: var(--ds-surface-selected); --ds-selected-ink: var(--ds-ink); --ds-selected-line: transparent; --ds-selected-weight: var(--ds-weight-medium); /* shape */ --ds-radius-xs: calc(4px * var(--ds-radius-scale)); --ds-radius-sm: calc(6px * var(--ds-radius-scale)); --ds-radius-md: calc(8px * var(--ds-radius-scale)); --ds-radius-lg: calc(12px * var(--ds-radius-scale)); --ds-radius-xl: calc(20px * var(--ds-radius-scale)); --ds-radius-button: var(--ds-radius-sm); /* data-buttons="pill" → pill */ --ds-media-radius: var(--ds-radius-lg); /* type scale */ --ds-text-xs: calc(var(--ds-text-base) * var(--ds-scale-xs)); --ds-text-sm: calc(var(--ds-text-base) * var(--ds-scale-sm)); --ds-text-md: var(--ds-text-base); --ds-text-lg: calc(var(--ds-text-base) * var(--ds-scale-lg)); --ds-text-xl: calc(var(--ds-text-base) * var(--ds-scale-xl)); --ds-text-2xl: calc(var(--ds-text-base) * var(--ds-scale-2xl)); --ds-text-3xl: calc(var(--ds-text-base) * var(--ds-scale-3xl)); --ds-text-display: calc(var(--ds-text-base) * var(--ds-scale-display)); /* the house hero formula — one fluid display size instead of a clamp() per recipe (batch-12): never below 3xl, grows with the viewport, never past 1.4 × display */ --ds-text-display-fluid: clamp(var(--ds-text-3xl), calc(var(--ds-text-xl) + 3vw), calc(var(--ds-text-display) * 1.4)); /* title sizes by ROLE — components read these, never pick a step themselves (batch-12). Values = the built house: page-header 2xl · section-header (in-page shelf title) lg · card md · chapter-header (marketing) 3xl. A theme may move a role one step. */ --ds-text-title-page: var(--ds-text-2xl); --ds-text-title-section: var(--ds-text-lg); --ds-text-title-card: var(--ds-text-md); --ds-text-title-chapter: var(--ds-text-3xl); /* space steps (unit × n) — unit-based, NOT density-scaled */ --ds-space-0-5: calc(var(--ds-space-unit) * .5); --ds-space-1: calc(var(--ds-space-unit) * 1); --ds-space-1-5: calc(var(--ds-space-unit) * 1.5); /* 6px half-step: kbd chips, 42px rows (batch-1 finding) */ --ds-space-2: calc(var(--ds-space-unit) * 2); --ds-space-2-5: calc(var(--ds-space-unit) * 2.5); /* 10px: favicon rows, board wells (batch-2 finding) */ --ds-space-3: calc(var(--ds-space-unit) * 3); --ds-space-4: calc(var(--ds-space-unit) * 4); --ds-space-5: calc(var(--ds-space-unit) * 5); --ds-space-6: calc(var(--ds-space-unit) * 6); --ds-space-7: calc(var(--ds-space-unit) * 7); /* 28px: 72px card rows, board gutters (batch-2 finding) */ --ds-space-8: calc(var(--ds-space-unit) * 8); --ds-space-10: calc(var(--ds-space-unit) * 10); --ds-space-12: calc(var(--ds-space-unit) * 12); --ds-space-16: calc(var(--ds-space-unit) * 16); --ds-space-20: calc(var(--ds-space-unit) * 20); --ds-space-24: calc(var(--ds-space-unit) * 24); --ds-section-gap: calc(var(--ds-space-unit) * var(--ds-section-gap-units)); /* density-scaled sizes — snapped to the 4px grid by the @supports block below */ --ds-control-h: calc(var(--ds-control-h-base) * var(--ds-density-scale)); --ds-control-h-sm: calc((var(--ds-control-h-base) - 4px) * var(--ds-density-scale)); --ds-control-h-lg: calc((var(--ds-control-h-base) + 8px) * var(--ds-density-scale)); --ds-row-h: calc(var(--ds-control-h) + 4px); --ds-card-pad: calc(16px * var(--ds-density-scale)); --ds-card-gap: calc(16px * var(--ds-density-scale)); --ds-field-pitch: calc(16px * var(--ds-density-scale)); /* control → next label */ --ds-control-pad-x: calc(12px * var(--ds-density-scale)); /* current-element size hooks (components/_base.css remaps them under data-size) */ --ds-size-h: var(--ds-control-h); --ds-size-text: var(--ds-text-md); --ds-size-pad-x: var(--ds-control-pad-x); /* motion */ --ds-dur-fast: calc(120ms * var(--ds-motion-scale)); --ds-dur-base: calc(180ms * var(--ds-motion-scale)); --ds-dur-slow: calc(280ms * var(--ds-motion-scale)); } /* Band snapshots — the page's accent pair as seen from OUTSIDE an accent band (batch-12). [data-band="accent"] redefines --ds-accent to the ink; a custom property cannot reference the value it is replacing on the same element (inherit() is not shipped), so the band reads these instead. Declared on every host EXCEPT the accent band, so the band inherits them from its nearest host ancestor — the page root, a themed wrapper, a dark island. --ds-band-ink-away is the ink's sRGB inverse: the direction a plane steps to GAIN contrast. Plumbing — components never read --ds-band-*. */ :is(:root, [data-theme], [data-mode], [data-density], [data-depth], [data-selection], [data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover], [data-band]):not([data-band="accent"]) { --ds-band-accent: var(--ds-accent); --ds-band-ink: var(--ds-ink-on-accent); --ds-band-ink-away: rgb(from var(--ds-ink-on-accent) calc(255 - r) calc(255 - g) calc(255 - b)); } /* Snap density-scaled sizes to the 4px grid where round() exists (Chromium 125+, Firefox 118+, Safari 15.4+). Fallback above is unsnapped. */ @supports (width: round(1px, 1px)) { :root, [data-theme], [data-mode], [data-density], [data-depth], [data-selection], [data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover], [data-band] { --ds-control-h: round(calc(var(--ds-control-h-base) * var(--ds-density-scale)), 4px); --ds-control-h-sm: round(calc((var(--ds-control-h-base) - 4px) * var(--ds-density-scale)), 4px); --ds-control-h-lg: round(calc((var(--ds-control-h-base) + 8px) * var(--ds-density-scale)), 4px); --ds-card-pad: round(calc(16px * var(--ds-density-scale)), 4px); --ds-card-gap: round(calc(16px * var(--ds-density-scale)), 4px); --ds-field-pitch: round(calc(16px * var(--ds-density-scale)), 4px); --ds-control-pad-x: round(calc(12px * var(--ds-density-scale)), 2px); } } /* --------------------------------------------------------------------------- 4. DARK REMAP — §7.1–7.3 + primary + accent + semantic + data + shadows. Neutral ramp inversion with P5's in-hue surface step (surfaces step UP from ground). Explicit data-mode wins; the guarded media form applies only when no data-mode is set on :root. ------------------------------------------------------------------------- */ :root[data-mode="dark"], :not(:root)[data-mode="dark"], :not(:root)[data-band="dark"] { /* data-band="dark" IS the dark island (batch-12) — one source of truth, no alias copies */ color-scheme: dark; --ds-ground: #0f0f10; --ds-ground-2: #141416; --ds-surface: #18181a; --ds-surface-2: #1f1f22; --ds-surface-3: #26262a; --ds-skeleton: #2e2e33; --ds-surface-raised: #1f1f22; /* popovers step up, not down, in dark */ --ds-surface-hover: #222226; --ds-surface-pressed: #26262a; --ds-surface-selected: #2a2a2e; --ds-surface-inverse: #fafafa; --ds-surface-inverse-hover: #e6e6e8; --ds-scrim: rgba(0, 0, 0, .60); --ds-ink: #f4f4f5; --ds-ink-2: #c9c9cc; --ds-ink-muted: #9d9da3; /* 6.6:1 on surface */ --ds-ink-faint: #5e5e64; --ds-ink-inverse: #111111; --ds-ink-on-primary: #111111; --ds-ink-on-accent: #0b0b0c; --ds-rule-soft: #222226; --ds-rule-faint: #1c1c1f; --ds-rule: #2a2a2e; /* 1.24:1 on surface */ --ds-rule-strong: #38383d; --ds-border: #303035; --ds-border-strong: #45454b; --ds-primary-fill: #f4f4f5; --ds-primary-fill-hover: #e2e2e4; --ds-accent: #6b9cff; --ds-accent-hover: #86adff; --ds-accent-ink: #b9ccff; --ds-accent-tint: #273043; --ds-accent-soft: #3b5fb8; --ds-accent-2: #a48cf5; --ds-accent-2-ink: #c7b8fa; --ds-accent-2-tint: #342f46; --ds-success: #34c57f; --ds-success-tint: #1e3b2e; --ds-success-ink: #5fd79b; --ds-danger: #f26a6a; --ds-danger-tint: #44282a; --ds-danger-ink: #f58d8d; --ds-warning: #f2b04a; --ds-warning-tint: #443624; --ds-warning-ink: #f6c473; --ds-info: #4fb3f0; --ds-info-tint: #233745; --ds-info-ink: #7ec8f5; --ds-ink-on-semantic: #0b0b0c; --ds-data-1: #6b9cff; --ds-data-1-tint: #293248; --ds-data-1-ink: #9dbcff; --ds-data-2: #a48cf5; --ds-data-2-tint: #342f46; --ds-data-2-ink: #c1b1f8; --ds-data-3: #3ecf95; --ds-data-3-tint: #203d33; --ds-data-3-ink: #6fdcb2; --ds-data-4: #f5915b; --ds-data-4-tint: #443027; --ds-data-4-ink: #f8ac84; --ds-data-5: #f06fa4; --ds-data-5-tint: #432936; --ds-data-5-ink: #f596bd; --ds-data-6: #e2c04e; --ds-data-6-tint: #403a24; --ds-data-6-ink: #ebd07e; --ds-data-7: #3fc7d4; --ds-data-7-tint: #203b3f; --ds-data-7-ink: #7cdae3; --ds-data-8: #c3a184; --ds-data-8-tint: #3a332f; --ds-data-8-ink: #d6bda8; --ds-chart-ramp-1: #b9ccff; --ds-chart-ramp-2: #6b9cff; --ds-chart-ramp-3: #3b5fb8; --ds-shadow-lift: 0 1px 2px rgba(0, 0, 0, .40); --ds-shadow-card: 0 1px 3px rgba(0, 0, 0, .50); --ds-shadow-float: 0 8px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); --ds-shadow-modal: 0 24px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06); --ds-shadow-object: 0 4px 12px rgba(0, 0, 0, .50); --ds-overlay-fill: rgba(0, 0, 0, .65); --ds-glass-fill: rgba(24, 24, 26, .55); --ds-glass-border: rgba(255, 255, 255, .14); --ds-texture-color: rgba(255, 255, 255, .06); --ds-illustration-ground: #1c2129; } @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) { color-scheme: dark; --ds-ground: #0f0f10; --ds-ground-2: #141416; --ds-surface: #18181a; --ds-surface-2: #1f1f22; --ds-surface-3: #26262a; --ds-skeleton: #2e2e33; --ds-surface-raised: #1f1f22; --ds-surface-hover: #222226; --ds-surface-pressed: #26262a; --ds-surface-selected: #2a2a2e; --ds-surface-inverse: #fafafa; --ds-surface-inverse-hover: #e6e6e8; --ds-scrim: rgba(0, 0, 0, .60); --ds-ink: #f4f4f5; --ds-ink-2: #c9c9cc; --ds-ink-muted: #9d9da3; --ds-ink-faint: #5e5e64; --ds-ink-inverse: #111111; --ds-ink-on-primary: #111111; --ds-ink-on-accent: #0b0b0c; --ds-rule-soft: #222226; --ds-rule-faint: #1c1c1f; --ds-rule: #2a2a2e; --ds-rule-strong: #38383d; --ds-border: #303035; --ds-border-strong: #45454b; --ds-primary-fill: #f4f4f5; --ds-primary-fill-hover: #e2e2e4; --ds-accent: #6b9cff; --ds-accent-hover: #86adff; --ds-accent-ink: #b9ccff; --ds-accent-tint: #273043; --ds-accent-soft: #3b5fb8; --ds-accent-2: #a48cf5; --ds-accent-2-ink: #c7b8fa; --ds-accent-2-tint: #342f46; --ds-success: #34c57f; --ds-success-tint: #1e3b2e; --ds-success-ink: #5fd79b; --ds-danger: #f26a6a; --ds-danger-tint: #44282a; --ds-danger-ink: #f58d8d; --ds-warning: #f2b04a; --ds-warning-tint: #443624; --ds-warning-ink: #f6c473; --ds-info: #4fb3f0; --ds-info-tint: #233745; --ds-info-ink: #7ec8f5; --ds-ink-on-semantic: #0b0b0c; --ds-data-1: #6b9cff; --ds-data-1-tint: #293248; --ds-data-1-ink: #9dbcff; --ds-data-2: #a48cf5; --ds-data-2-tint: #342f46; --ds-data-2-ink: #c1b1f8; --ds-data-3: #3ecf95; --ds-data-3-tint: #203d33; --ds-data-3-ink: #6fdcb2; --ds-data-4: #f5915b; --ds-data-4-tint: #443027; --ds-data-4-ink: #f8ac84; --ds-data-5: #f06fa4; --ds-data-5-tint: #432936; --ds-data-5-ink: #f596bd; --ds-data-6: #e2c04e; --ds-data-6-tint: #403a24; --ds-data-6-ink: #ebd07e; --ds-data-7: #3fc7d4; --ds-data-7-tint: #203b3f; --ds-data-7-ink: #7cdae3; --ds-data-8: #c3a184; --ds-data-8-tint: #3a332f; --ds-data-8-ink: #d6bda8; --ds-chart-ramp-1: #b9ccff; --ds-chart-ramp-2: #6b9cff; --ds-chart-ramp-3: #3b5fb8; --ds-shadow-lift: 0 1px 2px rgba(0, 0, 0, .40); --ds-shadow-card: 0 1px 3px rgba(0, 0, 0, .50); --ds-shadow-float: 0 8px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); --ds-shadow-modal: 0 24px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06); --ds-shadow-object: 0 4px 12px rgba(0, 0, 0, .50); --ds-overlay-fill: rgba(0, 0, 0, .65); --ds-glass-fill: rgba(24, 24, 26, .55); --ds-glass-border: rgba(255, 255, 255, .14); --ds-texture-color: rgba(255, 255, 255, .06); --ds-illustration-ground: #1c2129; } } /* --------------------------------------------------------------------------- 5. POLICY ATTRIBUTES — root (or any ancestor) data-* switches. Each sets the derived tokens components consume; components ALSO select on the attribute where geometry changes (tabs underline vs pill, etc.). Written at (0,2,0) so an explicit attribute beats a theme's CSS-only fallback. ------------------------------------------------------------------------- */ /* data-density — compact | default | comfortable (D1 / D2 / D3) */ :root[data-density="compact"], :not(:root)[data-density="compact"] { --ds-density-scale: .85; } :root[data-density="default"], :not(:root)[data-density="default"] { --ds-density-scale: 1; } :root[data-density="comfortable"], :not(:root)[data-density="comfortable"] { --ds-density-scale: 1.2; } /* data-depth — tint | hairline | shadow | tint-hairline | shadow-hairline (§3.2.1; shadow-hairline = quicktunnels, batch-12) */ :root[data-depth="tint"], :not(:root)[data-depth="tint"] { --ds-card-bg: var(--ds-surface); --ds-card-border: transparent; --ds-card-shadow: 0 0 0 0 transparent; } :root[data-depth="hairline"], :not(:root)[data-depth="hairline"] { --ds-card-bg: var(--ds-ground); --ds-card-border: var(--ds-rule); --ds-card-shadow: 0 0 0 0 transparent; } :root[data-depth="shadow"], :not(:root)[data-depth="shadow"] { --ds-card-bg: var(--ds-surface); --ds-card-border: transparent; --ds-card-shadow: var(--ds-shadow-card); } :root[data-depth="tint-hairline"], :not(:root)[data-depth="tint-hairline"] { --ds-card-bg: var(--ds-surface); --ds-card-border: var(--ds-rule); --ds-card-shadow: 0 0 0 0 transparent; } :root[data-depth="shadow-hairline"], :not(:root)[data-depth="shadow-hairline"] { --ds-card-bg: var(--ds-surface); --ds-card-border: var(--ds-rule); --ds-card-shadow: var(--ds-shadow-card); } /* data-selection — tint | accent | accent-fill | underline | bar | invert (§2.2.6; accent-fill = a brand theme's solid chip, batch-12) */ :root[data-selection="tint"], :not(:root)[data-selection="tint"] { --ds-selected-bg: var(--ds-surface-selected); --ds-selected-ink: var(--ds-ink); --ds-selected-line: transparent; --ds-selected-weight: var(--ds-weight-medium); } :root[data-selection="accent"], :not(:root)[data-selection="accent"] { --ds-selected-bg: var(--ds-accent-tint); --ds-selected-ink: var(--ds-accent-ink); --ds-selected-line: transparent; --ds-selected-weight: var(--ds-weight-medium); } :root[data-selection="accent-fill"], :not(:root)[data-selection="accent-fill"] { --ds-selected-bg: var(--ds-accent); --ds-selected-ink: var(--ds-ink-on-accent); --ds-selected-line: transparent; --ds-selected-weight: var(--ds-weight-medium); } :root[data-selection="underline"], :not(:root)[data-selection="underline"] { --ds-selected-bg: transparent; --ds-selected-ink: var(--ds-ink); --ds-selected-line: var(--ds-accent-line); --ds-selected-weight: var(--ds-weight-medium); } :root[data-selection="bar"], :not(:root)[data-selection="bar"] { --ds-selected-bg: transparent; --ds-selected-ink: var(--ds-ink); --ds-selected-line: var(--ds-accent-line); --ds-selected-weight: var(--ds-weight-medium); } :root[data-selection="invert"], :not(:root)[data-selection="invert"] { --ds-selected-bg: var(--ds-surface-inverse); --ds-selected-ink: var(--ds-ink-inverse); --ds-selected-line: transparent; --ds-selected-weight: var(--ds-weight-medium); } /* data-buttons — sm | pill (§7.8 radius-button) */ :root[data-buttons="sm"], :not(:root)[data-buttons="sm"] { --ds-radius-button: var(--ds-radius-sm); } :root[data-buttons="pill"], :not(:root)[data-buttons="pill"] { --ds-radius-button: var(--ds-radius-pill); } /* data-labels — sentence | upper (§7.9 label-case; upper implies tracking — the THEME's own value via --ds-label-tracking-upper, .08em in base; batch-12: the attribute no longer pins .08em over paper's .1em) */ :root[data-labels="sentence"], :not(:root)[data-labels="sentence"] { --ds-label-case: none; --ds-label-tracking: 0; } :root[data-labels="upper"], :not(:root)[data-labels="upper"] { --ds-label-case: uppercase; --ds-label-tracking: var(--ds-label-tracking-upper); } /* data-controls — sentence | title (§7.9 control-case) */ :root[data-controls="sentence"], :not(:root)[data-controls="sentence"] { --ds-control-case: none; } :root[data-controls="title"], :not(:root)[data-controls="title"] { --ds-control-case: capitalize; } /* data-accent-scope — state | action | all | none (§7.4 policy). Only "none" changes CSS: links, rings and selection lines fall back to ink. state/action/all are enforced by review + the "one filled button" rule. With no attribute this file BEHAVES as "state": the primary above is ink-black and the accent is information only (links, rings, dots). A theme whose filled button is the hue declares "action" (workbench) or "all" (seeded, quicktunnels) in its header and sets --ds-primary-fill to the accent. */ :root[data-accent-scope="none"], :not(:root)[data-accent-scope="none"] { --ds-ink-link: var(--ds-ink); --ds-ring: var(--ds-ink); --ds-accent-line: var(--ds-ink); --ds-border-selected: var(--ds-ink); --ds-selection-graph: var(--ds-ink); } /* data-hover — tint | lift (§7.11 hover-mode) */ :root[data-hover="tint"], :not(:root)[data-hover="tint"] { --ds-hover-bg: var(--ds-surface-hover); --ds-hover-shadow: 0 0 0 0 transparent; } :root[data-hover="lift"], :not(:root)[data-hover="lift"] { --ds-hover-bg: var(--ds-surface); --ds-hover-shadow: var(--ds-shadow-lift); } /* data-ambient — off (§7.11 ambient motion: marquee, blobs, parallax). One value: the page (or a region) parks its ambient animations. Reduced motion (§6) parks them too. The deprecated --ds-ambient-motion follows for anything that still reads it. (batch-12) */ :root[data-ambient="off"], :not(:root)[data-ambient="off"] { --ds-ambient-play: paused; --ds-ambient-motion: 0; } /* ---- data-band — tint | dark | accent (§7.1 islands; batch-12) -------------------------- Section-level islands, defined here for EVERY theme; a theme may hand-tune its own at the same (0,2,0) — it loads later and wins (quicktunnels' accent band). Written as [data-band="v"][data-band] rather than :root[…], :not(:root)[…] on purpose: same (0,2,0), but a band never sits on the root (the root is where the accent band's snapshot is read from), so the :root form would be a lie. A band is a re-derive host (§3), so only planes and accent roles are set here; card-*, selected-*, hover-*, link / ring / lines follow. A theme's CSS-only fallbacks reach inside a band through the theme's own host rule (see any theme file, "restated for every host ISLAND"). Put data-band on a
of its own — never on the root, never beside data-theme / data-mode on one element (a theme's island selector at the same specificity would win). data-band="dark" is NOT here: it is a selector on the dark remap (§4) and on every theme's dark block — one source of truth. */ /* tint — one plane step: the section sits on surface-2, its second plane on surface-3; cards (surface) and everything else keep the page's values. Available under any theme. */ [data-band="tint"][data-band] { --ds-ground: var(--ds-surface-2); --ds-ground-2: var(--ds-surface-3); --ds-rule: var(--ds-rule-strong); /* one grade up: the structural hairline is 1.14:1 on surface-2 (R2 wants 1.15); card edges re-derive from it */ } /* accent — the accent IS the ground. Generic recipe over the --ds-band-* snapshots (§3): holds for any hue and either ink polarity (white ink on a blue, dark ink on an orange / terracotta / white). Every plane steps AWAY from the ink (contrast can only rise — the theme's own ink-on-accent : accent pair, ≈ 5:1 on most brands, is the whole budget), so cards read as a deeper plane on a dark accent and a lighter one on a light accent; insets step further. Ink tiers collapse toward the ink (96 / 94 / 60 %) for the same reason — on a band, hierarchy is weight and size. Rules are the ink at 12 / 18 / 26 % over the accent. The ONE filled control inverts (ink fill, accent text); every accent role becomes the ink; semantic tints become a deeper accent step and semantic inks the ink, so a callout still reads; shadows soften to the ink at low alpha. Overlays (surface-raised, scrim) stay the page's — R6. */ [data-band="accent"][data-band] { /* planes */ --ds-ground: var(--ds-band-accent); --ds-ground-2: color-mix(in srgb, var(--ds-band-accent) 96%, var(--ds-band-ink-away)); --ds-surface: color-mix(in srgb, var(--ds-band-accent) 90%, var(--ds-band-ink-away)); --ds-surface-2: color-mix(in srgb, var(--ds-band-accent) 84%, var(--ds-band-ink-away)); --ds-surface-3: color-mix(in srgb, var(--ds-band-accent) 76%, var(--ds-band-ink-away)); --ds-surface-hover: color-mix(in srgb, var(--ds-band-accent) 86%, var(--ds-band-ink-away)); --ds-surface-pressed: color-mix(in srgb, var(--ds-band-accent) 82%, var(--ds-band-ink-away)); --ds-surface-selected: color-mix(in srgb, var(--ds-band-accent) 76%, var(--ds-band-ink-away)); --ds-skeleton: color-mix(in srgb, var(--ds-band-accent) 86%, var(--ds-band-ink-away)); --ds-surface-inverse: var(--ds-band-ink); --ds-surface-inverse-hover: color-mix(in srgb, var(--ds-band-ink) 90%, var(--ds-band-accent)); /* ink */ --ds-ink: var(--ds-band-ink); --ds-ink-2: color-mix(in srgb, var(--ds-band-ink) 96%, var(--ds-band-accent)); --ds-ink-muted: color-mix(in srgb, var(--ds-band-ink) 94%, var(--ds-band-accent)); --ds-ink-faint: color-mix(in srgb, var(--ds-band-ink) 60%, var(--ds-band-accent)); --ds-ink-inverse: var(--ds-band-accent); --ds-ink-on-primary: var(--ds-band-accent); --ds-ink-on-accent: var(--ds-band-accent); /* lines: the ink over the accent at 8 / 12 / 18 / 26 %; borders 22 / 34 % */ --ds-rule-faint: color-mix(in srgb, var(--ds-band-ink) 8%, var(--ds-band-accent)); --ds-rule-soft: color-mix(in srgb, var(--ds-band-ink) 12%, var(--ds-band-accent)); --ds-rule: color-mix(in srgb, var(--ds-band-ink) 18%, var(--ds-band-accent)); --ds-rule-strong: color-mix(in srgb, var(--ds-band-ink) 26%, var(--ds-band-accent)); --ds-border: color-mix(in srgb, var(--ds-band-ink) 22%, var(--ds-band-accent)); --ds-border-strong: color-mix(in srgb, var(--ds-band-ink) 34%, var(--ds-band-accent)); /* action: the one filled control inverts; every accent role is the ink */ --ds-primary-fill: var(--ds-band-ink); --ds-primary-fill-hover: color-mix(in srgb, var(--ds-band-ink) 88%, var(--ds-band-accent)); --ds-primary-border: transparent; --ds-primary-highlight: transparent; --ds-accent: var(--ds-band-ink); --ds-accent-hover: color-mix(in srgb, var(--ds-band-ink) 88%, var(--ds-band-accent)); --ds-accent-ink: var(--ds-band-ink); --ds-accent-tint: color-mix(in srgb, var(--ds-band-accent) 84%, var(--ds-band-ink-away)); /* chips: a deeper accent step, ink text */ --ds-accent-soft: color-mix(in srgb, var(--ds-band-ink) 45%, var(--ds-band-accent)); --ds-ink-link: var(--ds-band-ink); --ds-ring: var(--ds-band-ink); --ds-border-selected: var(--ds-band-ink); --ds-accent-line: var(--ds-band-ink); --ds-selection-graph: var(--ds-band-ink); /* semantic on the band: tint = a deeper accent step, ink = the ink, line = the ink at 35 % (fills keep their hue for dots / badges) */ --ds-success-tint: var(--ds-accent-tint); --ds-success-ink: var(--ds-band-ink); --ds-success-line: color-mix(in srgb, var(--ds-band-ink) 35%, transparent); --ds-danger-tint: var(--ds-accent-tint); --ds-danger-ink: var(--ds-band-ink); --ds-danger-line: color-mix(in srgb, var(--ds-band-ink) 35%, transparent); --ds-warning-tint: var(--ds-accent-tint); --ds-warning-ink: var(--ds-band-ink); --ds-warning-line: color-mix(in srgb, var(--ds-band-ink) 35%, transparent); --ds-info-tint: var(--ds-accent-tint); --ds-info-ink: var(--ds-band-ink); --ds-info-line: color-mix(in srgb, var(--ds-band-ink) 35%, transparent); /* depth + imagery: the ink at low alpha */ --ds-shadow-lift: 0 1px 2px color-mix(in srgb, var(--ds-band-ink) 10%, transparent); --ds-shadow-card: 0 1px 3px color-mix(in srgb, var(--ds-band-ink) 12%, transparent); --ds-shadow-float: 0 8px 24px color-mix(in srgb, var(--ds-band-ink) 25%, transparent), 0 0 0 1px color-mix(in srgb, var(--ds-band-ink) 12%, transparent); --ds-shadow-modal: 0 24px 80px color-mix(in srgb, var(--ds-band-ink) 35%, transparent), 0 0 0 1px color-mix(in srgb, var(--ds-band-ink) 12%, transparent); --ds-shadow-object: 0 4px 12px color-mix(in srgb, var(--ds-band-ink) 25%, transparent); --ds-illustration-ground: var(--ds-accent-tint); --ds-texture-color: color-mix(in srgb, var(--ds-band-ink) 10%, transparent); --ds-glass-fill: color-mix(in srgb, var(--ds-band-ink) 10%, transparent); --ds-glass-border: color-mix(in srgb, var(--ds-band-ink) 20%, transparent); } /* data-texture / data-ornament / data-illustration / data-emoji / data-avatar are DESCRIPTIVE — no tokens change; patterns select on them (e.g. [data-texture="dot"] .ds-hero::before). See CONTRACT.md §3. */ /* --------------------------------------------------------------------------- 6. REDUCED MOTION — durations collapse to 0 through --ds-motion-scale. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root, [data-theme], [data-mode], [data-density], [data-depth], [data-selection], [data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover], [data-band] { --ds-motion-scale: 0; --ds-ambient-play: paused; --ds-ambient-motion: 0; /* deprecated alias — see §2 */ } } /* tokens/themes/noir.css */ /* ============================================================================ Theme: noir — P5 committed dark (Klarna / Rox / Legend class). A theme whose LIGHT MODE IS ITSELF DARK: tinted near-black ground with a violet-warm cast, in-hue surface step (+4–8% L), white ink tiers at 100/93/66/40%, hairlines at ~12% white, NO accent (accent-scope none — links, rings and selection lines are ink), radius 0 (pills survive), mono uppercase label lane, drawn-rail ornament. Evidence: [klarna-section] (#1d192a → #373544, white 100/93%) [rox-section] (#0f0f0f, rule #1f1f1f, rails with drawn joins, muted #686868 — raised here to 4.5:1) [legend-section] (#151414, dashed 12–15% rules, mono caps). MODES: [data-mode="dark"] and the OS-dark media form set the SAME values as the light block (ground one step deeper), so a page that toggles modes does not flicker; [data-mode="light"] on a noir page is ALSO dark — this theme has no light rendering by design. color-scheme is forced to dark so native controls and scrollbars match. ISLANDS (batch-12): a descendant [data-mode="light"] island points at the light block's OWN values (there is no light noir — the island is the same near-black, so base's neutral light cannot show through); a descendant [data-mode="dark"] / [data-band="dark"] gets the deeper-ground dark block. data-band="tint|accent" come from base: the accent band reads the white "accent" + near-black ink through the --ds-band-* snapshots and renders as a white band with black ink — noir's one inversion. PAGE ATTRIBUTES this theme expects: data-theme="noir" data-depth="hairline" data-selection="tint" data-buttons="sm" data-labels="upper" data-controls="sentence" data-accent-scope="none" data-hover="tint" data-density="comfortable" data-illustration="render" data-texture="none" data-ornament="rails" Differences from base: depth=hairline, labels=upper, accent-scope=none, density=comfortable — all with CSS-only fallbacks below. Sets ONLY what differs from base.css. ========================================================================== */ [data-theme="noir"], [data-theme="noir"] [data-mode="light"] { color-scheme: dark; /* -- surfaces: violet-warm near-black, in-hue step UP */ --ds-ground: #131217; --ds-ground-2: #17161c; --ds-surface: #1c1a22; --ds-surface-2: #242129; --ds-surface-3: #2c2933; --ds-surface-raised: #242129; --ds-surface-hover: #221f28; --ds-surface-pressed: #282430; /* hover < pressed < selected, in hue */ --ds-surface-selected: #2e2a37; --ds-surface-inverse: #f4f2f7; --ds-surface-inverse-hover: #e4e1ea; /* committed-dark: restated so base's light #262626 cannot leak (foundations pass) */ --ds-skeleton: #2a2731; /* loading fill, in-hue — restated for the same reason */ --ds-scrim: rgba(0, 0, 0, .60); /* -- ink: white tiers */ --ds-ink: #ffffff; --ds-ink-2: #ededf0; /* 93% */ --ds-ink-muted: #a9a6b3; /* 66% — 6.6:1 on surface-2 (Rox's #686868 would fail) */ --ds-ink-faint: #605c6b; /* 40% */ --ds-ink-inverse: #131217; --ds-ink-on-primary: #131217; --ds-ink-on-accent: #131217; --ds-ink-code: #ededf0; /* -- lines: ~12% white on ground; dashed rules are a pattern choice, not a token */ --ds-rule-faint: #1f1d25; /* column rules, fainter than rows — restated (foundations pass) */ --ds-rule-soft: #232129; --ds-rule: #2e2c35; /* 1.25:1 on surface */ --ds-rule-strong: #3a3743; --ds-border: #353240; --ds-border-strong: #4a4657; /* -- action: white primary; NO accent — every accent token resolves to ink */ --ds-primary-fill: #ffffff; --ds-primary-fill-hover: #e6e4ea; --ds-accent: #ffffff; --ds-accent-hover: #e6e4ea; --ds-accent-ink: #ffffff; --ds-accent-tint: rgba(255, 255, 255, .08); --ds-accent-soft: rgba(255, 255, 255, .40); --ds-accent-2: #ededf0; --ds-accent-2-ink: #ffffff; --ds-accent-2-tint: rgba(255, 255, 255, .08); /* -- semantic + data: base dark set (restated so light-mode noir is complete) */ --ds-success: #34c57f; --ds-success-tint: #1e3b2e; --ds-success-ink: #5fd79b; --ds-danger: #f26a6a; --ds-danger-tint: #44282a; --ds-danger-ink: #f58d8d; --ds-warning: #f2b04a; --ds-warning-tint: #443624; --ds-warning-ink: #f6c473; --ds-info: #4fb3f0; --ds-info-tint: #233745; --ds-info-ink: #7ec8f5; --ds-ink-on-semantic: #0b0b0c; --ds-data-1: #6b9cff; --ds-data-1-tint: #293248; --ds-data-1-ink: #9dbcff; --ds-data-2: #a48cf5; --ds-data-2-tint: #342f46; --ds-data-2-ink: #c1b1f8; --ds-data-3: #3ecf95; --ds-data-3-tint: #203d33; --ds-data-3-ink: #6fdcb2; --ds-data-4: #f5915b; --ds-data-4-tint: #443027; --ds-data-4-ink: #f8ac84; --ds-data-5: #f06fa4; --ds-data-5-tint: #432936; --ds-data-5-ink: #f596bd; --ds-data-6: #e2c04e; --ds-data-6-tint: #403a24; --ds-data-6-ink: #ebd07e; --ds-data-7: #3fc7d4; --ds-data-7-tint: #203b3f; --ds-data-7-ink: #7cdae3; --ds-data-8: #c3a184; --ds-data-8-tint: #3a332f; --ds-data-8-ink: #d6bda8; --ds-chart-ramp-1: #ffffff; --ds-chart-ramp-2: #a9a6b3; --ds-chart-ramp-3: #605c6b; /* -- depth: zero resting shadows; floats separate by a 1px light edge + deep drop */ --ds-shadow-lift: 0 0 0 0 transparent; --ds-shadow-card: 0 0 0 0 transparent; --ds-shadow-float: 0 16px 40px rgba(0, 0, 0, .60), 0 0 0 1px rgba(255, 255, 255, .10); --ds-shadow-modal: 0 32px 96px rgba(0, 0, 0, .70), 0 0 0 1px rgba(255, 255, 255, .10); --ds-shadow-object: 0 8px 24px rgba(0, 0, 0, .60); --ds-overlay-fill: rgba(0, 0, 0, .65); --ds-glass-fill: rgba(28, 26, 34, .55); --ds-glass-border: rgba(255, 255, 255, .14); --ds-texture-color: rgba(255, 255, 255, .06); --ds-illustration-ground: #1c1a22; /* -- shape: drafting — 0 everywhere, pills untouched */ --ds-radius-scale: 0; /* -- type: grotesk display at regular weight, mono caps label lane */ --ds-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ds-font-mono: "IBM Plex Mono", "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace; --ds-font-label: var(--ds-font-mono); --ds-text-base: 16px; --ds-display-weight: 500; --ds-display-tracking: -0.03em; --ds-heading-weight: 500; --ds-label-case: uppercase; /* fallback for data-labels="upper" */ --ds-label-tracking-upper: .06em; /* the theme's uppercase tracking; data-labels="upper" reads it (batch-12) */ --ds-label-tracking: var(--ds-label-tracking-upper); /* -- space: 8px unit, comfortable, generous sections */ --ds-space-unit: 8px; --ds-density-scale: 1.2; --ds-section-gap-units: 16; --ds-container-max: 1464px; /* Rox container at 1920 */ /* -- CSS-only fallbacks */ --ds-card-bg: var(--ds-ground); /* data-depth="hairline" */ --ds-card-border: var(--ds-rule); --ds-card-shadow: 0 0 0 0 transparent; /* composable none (CONTRACT §11) */ --ds-ink-link: var(--ds-ink); /* data-accent-scope="none" */ --ds-ring: var(--ds-ink); --ds-accent-line: var(--ds-ink); --ds-border-selected: var(--ds-ink); --ds-selection-graph: var(--ds-ink); --ds-selected-bg: var(--ds-surface-selected); --ds-selected-ink: var(--ds-ink); --ds-selected-line: transparent; } /* -- CSS-only fallbacks restated for every host ISLAND under the theme root (batch-12) --------- A host (a data-mode / data-density / data-band … section) re-derives base's DEFAULTS for the derived tokens, so the fallbacks the light block sets on the theme root never reached a dark chapter, a tint band or a compact toolbar (cards took the surface step). (0,1,0) through :where() — later than base's host rule, so it wins; below every explicit (0,2,0) attribute, so a page's own data-depth / data-buttons / data-selection still wins on the element that carries it. */ :where([data-theme="noir"]) :is([data-mode], [data-density], [data-depth], [data-selection], [data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover], [data-band="tint"], [data-band="dark"], [data-band="accent"]) { --ds-card-bg: var(--ds-ground); /* data-depth="hairline"; the accent-scope="none" roles re-derive to the accent, which IS the ink here */ } /* ---- dark. Restates EVERY colour the light block sets (contract rule D-3); the guarded media form below is byte-identical (generated from one source). Also written for a descendant data-mode="dark" island and data-band="dark" (batch-12). */ [data-theme="noir"][data-mode="dark"], [data-theme="noir"] [data-mode="dark"], [data-theme="noir"] [data-band="dark"] { color-scheme: dark; --ds-ground: #0f0e12; --ds-ground-2: #131217; --ds-surface: #1c1a22; --ds-surface-2: #242129; --ds-surface-3: #2c2933; --ds-surface-raised: #242129; --ds-surface-hover: #221f28; --ds-surface-pressed: #282430; --ds-surface-selected: #2e2a37; --ds-surface-inverse: #f4f2f7; --ds-scrim: rgba(0, 0, 0, .60); --ds-surface-inverse-hover: #e4e1ea; --ds-skeleton: #2a2731; --ds-rule-faint: #1f1d25; --ds-ink: #ffffff; --ds-ink-2: #ededf0; --ds-ink-muted: #a9a6b3; --ds-ink-faint: #605c6b; --ds-ink-inverse: #131217; --ds-ink-on-primary: #131217; --ds-ink-on-accent: #131217; --ds-ink-code: #ededf0; --ds-rule-soft: #232129; --ds-rule: #2e2c35; --ds-rule-strong: #3a3743; --ds-border: #353240; --ds-border-strong: #4a4657; --ds-primary-fill: #ffffff; --ds-primary-fill-hover: #e6e4ea; --ds-accent: #ffffff; --ds-accent-hover: #e6e4ea; --ds-accent-ink: #ffffff; --ds-accent-tint: rgba(255, 255, 255, .08); --ds-accent-soft: rgba(255, 255, 255, .40); --ds-accent-2: #ededf0; --ds-accent-2-ink: #ffffff; --ds-accent-2-tint: rgba(255, 255, 255, .08); --ds-success: #34c57f; --ds-success-tint: #1e3b2e; --ds-success-ink: #5fd79b; --ds-danger: #f26a6a; --ds-danger-tint: #44282a; --ds-danger-ink: #f58d8d; --ds-warning: #f2b04a; --ds-warning-tint: #443624; --ds-warning-ink: #f6c473; --ds-info: #4fb3f0; --ds-info-tint: #233745; --ds-info-ink: #7ec8f5; --ds-ink-on-semantic: #0b0b0c; --ds-data-1: #6b9cff; --ds-data-1-tint: #293248; --ds-data-1-ink: #9dbcff; --ds-data-2: #a48cf5; --ds-data-2-tint: #342f46; --ds-data-2-ink: #c1b1f8; --ds-data-3: #3ecf95; --ds-data-3-tint: #203d33; --ds-data-3-ink: #6fdcb2; --ds-data-4: #f5915b; --ds-data-4-tint: #443027; --ds-data-4-ink: #f8ac84; --ds-data-5: #f06fa4; --ds-data-5-tint: #432936; --ds-data-5-ink: #f596bd; --ds-data-6: #e2c04e; --ds-data-6-tint: #403a24; --ds-data-6-ink: #ebd07e; --ds-data-7: #3fc7d4; --ds-data-7-tint: #203b3f; --ds-data-7-ink: #7cdae3; --ds-data-8: #c3a184; --ds-data-8-tint: #3a332f; --ds-data-8-ink: #d6bda8; --ds-chart-ramp-1: #ffffff; --ds-chart-ramp-2: #a9a6b3; --ds-chart-ramp-3: #605c6b; --ds-shadow-lift: 0 0 0 0 transparent; --ds-shadow-card: 0 0 0 0 transparent; --ds-shadow-float: 0 16px 40px rgba(0, 0, 0, .60), 0 0 0 1px rgba(255, 255, 255, .10); --ds-shadow-modal: 0 32px 96px rgba(0, 0, 0, .70), 0 0 0 1px rgba(255, 255, 255, .10); --ds-shadow-object: 0 8px 24px rgba(0, 0, 0, .60); --ds-overlay-fill: rgba(0, 0, 0, .65); --ds-glass-fill: rgba(28, 26, 34, .55); --ds-glass-border: rgba(255, 255, 255, .14); --ds-texture-color: rgba(255, 255, 255, .06); --ds-illustration-ground: #1c1a22; } @media (prefers-color-scheme: dark) { :root[data-theme="noir"]:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="noir"]:not([data-mode="light"]) { color-scheme: dark; --ds-ground: #0f0e12; --ds-ground-2: #131217; --ds-surface: #1c1a22; --ds-surface-2: #242129; --ds-surface-3: #2c2933; --ds-surface-raised: #242129; --ds-surface-hover: #221f28; --ds-surface-pressed: #282430; --ds-surface-selected: #2e2a37; --ds-surface-inverse: #f4f2f7; --ds-scrim: rgba(0, 0, 0, .60); --ds-surface-inverse-hover: #e4e1ea; --ds-skeleton: #2a2731; --ds-rule-faint: #1f1d25; --ds-ink: #ffffff; --ds-ink-2: #ededf0; --ds-ink-muted: #a9a6b3; --ds-ink-faint: #605c6b; --ds-ink-inverse: #131217; --ds-ink-on-primary: #131217; --ds-ink-on-accent: #131217; --ds-ink-code: #ededf0; --ds-rule-soft: #232129; --ds-rule: #2e2c35; --ds-rule-strong: #3a3743; --ds-border: #353240; --ds-border-strong: #4a4657; --ds-primary-fill: #ffffff; --ds-primary-fill-hover: #e6e4ea; --ds-accent: #ffffff; --ds-accent-hover: #e6e4ea; --ds-accent-ink: #ffffff; --ds-accent-tint: rgba(255, 255, 255, .08); --ds-accent-soft: rgba(255, 255, 255, .40); --ds-accent-2: #ededf0; --ds-accent-2-ink: #ffffff; --ds-accent-2-tint: rgba(255, 255, 255, .08); --ds-success: #34c57f; --ds-success-tint: #1e3b2e; --ds-success-ink: #5fd79b; --ds-danger: #f26a6a; --ds-danger-tint: #44282a; --ds-danger-ink: #f58d8d; --ds-warning: #f2b04a; --ds-warning-tint: #443624; --ds-warning-ink: #f6c473; --ds-info: #4fb3f0; --ds-info-tint: #233745; --ds-info-ink: #7ec8f5; --ds-ink-on-semantic: #0b0b0c; --ds-data-1: #6b9cff; --ds-data-1-tint: #293248; --ds-data-1-ink: #9dbcff; --ds-data-2: #a48cf5; --ds-data-2-tint: #342f46; --ds-data-2-ink: #c1b1f8; --ds-data-3: #3ecf95; --ds-data-3-tint: #203d33; --ds-data-3-ink: #6fdcb2; --ds-data-4: #f5915b; --ds-data-4-tint: #443027; --ds-data-4-ink: #f8ac84; --ds-data-5: #f06fa4; --ds-data-5-tint: #432936; --ds-data-5-ink: #f596bd; --ds-data-6: #e2c04e; --ds-data-6-tint: #403a24; --ds-data-6-ink: #ebd07e; --ds-data-7: #3fc7d4; --ds-data-7-tint: #203b3f; --ds-data-7-ink: #7cdae3; --ds-data-8: #c3a184; --ds-data-8-tint: #3a332f; --ds-data-8-ink: #d6bda8; --ds-chart-ramp-1: #ffffff; --ds-chart-ramp-2: #a9a6b3; --ds-chart-ramp-3: #605c6b; --ds-shadow-lift: 0 0 0 0 transparent; --ds-shadow-card: 0 0 0 0 transparent; --ds-shadow-float: 0 16px 40px rgba(0, 0, 0, .60), 0 0 0 1px rgba(255, 255, 255, .10); --ds-shadow-modal: 0 32px 96px rgba(0, 0, 0, .70), 0 0 0 1px rgba(255, 255, 255, .10); --ds-shadow-object: 0 8px 24px rgba(0, 0, 0, .60); --ds-overlay-fill: rgba(0, 0, 0, .65); --ds-glass-fill: rgba(28, 26, 34, .55); --ds-glass-border: rgba(255, 255, 255, .14); --ds-texture-color: rgba(255, 255, 255, .06); --ds-illustration-ground: #1c1a22; } } /* components/_base.css */ /* ============================================================================ JSTOV design system — components/_base.css The shared layer every component file assumes. Loads AFTER tokens/base.css (+ an optional theme) and BEFORE any components//.css. Contents 1. Reset (minimal) 5. Universal focus ring 2. Body ground / ink / font 6. Hairline grades 3. Type lanes (.ds-display … .ds-mono) 7. Layout helpers (.ds-stack/.ds-row/.ds-grid/.ds-container) 4. Control-height + data-size hooks 8. .ds-demo wrapper, .ds-sr-only, reduced motion Only --ds-* tokens for colour, radius, shadow, family, control height and spacing (tools/lint-tokens.mjs enforces it). This file is the ONE component file allowed to (re)declare --ds-size-* hooks. ========================================================================== */ /* --------------------------------------------------------------------------- 1. RESET — the minimum that makes components predictable ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, pre, fieldset, legend { margin: 0; } ul, ol { padding: 0; } ul[class], ol[class] { list-style: none; } fieldset { padding: 0; border: 0; min-width: 0; } legend { padding: 0; } img, svg, video, canvas, picture { display: block; max-width: 100%; height: auto; } svg { fill: currentColor; } button, input, select, textarea, optgroup { font: inherit; /* controls inherit family, size, weight, lh */ color: inherit; letter-spacing: inherit; margin: 0; } button, [role="button"], summary { cursor: pointer; } button:disabled, [aria-disabled="true"] { cursor: not-allowed; } textarea { resize: vertical; } a { color: var(--ds-ink-link); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .15em; } a:hover { text-decoration-color: currentColor; } hr { border: 0; height: 0; } table { border-collapse: collapse; border-spacing: 0; } :where(th) { text-align: inherit; font-weight: inherit; } code, kbd, samp, pre { font-family: var(--ds-font-mono); font-size: .93em; } ::placeholder { color: var(--ds-ink-muted); opacity: 1; } ::selection { background: var(--ds-accent-tint); color: var(--ds-ink); } [hidden] { display: none !important; } /* --------------------------------------------------------------------------- 2. BODY — ground, ink, family, line-height, numerals ------------------------------------------------------------------------- */ body { background: var(--ds-ground); color: var(--ds-ink); font-family: var(--ds-font-sans); font-size: var(--ds-text-md); line-height: var(--ds-lh-body); font-weight: var(--ds-weight-regular); font-variant-numeric: var(--ds-numeric); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100dvh; overflow-x: clip; /* the mobile rule: a page never scrolls sideways */ } /* a themed island paints its own ground so the theme boundary is visible */ [data-theme]:not(:root), [data-mode]:not(:root) { background: var(--ds-ground); color: var(--ds-ink); } /* --------------------------------------------------------------------------- 3. TYPE LANES — hierarchy by weight + ink at one or two sizes (T1); display and metadata are the only lanes that change family. ------------------------------------------------------------------------- */ .ds-display { font-family: var(--ds-font-display); font-size: var(--ds-text-display); font-weight: var(--ds-display-weight); letter-spacing: var(--ds-display-tracking); line-height: var(--ds-lh-tight); text-wrap: balance; } .ds-h1, .ds-h2, .ds-h3, .ds-h4 { font-weight: var(--ds-heading-weight); letter-spacing: var(--ds-heading-tracking); line-height: var(--ds-lh-heading); color: var(--ds-ink); text-wrap: balance; } .ds-h1 { font-size: var(--ds-text-2xl); } /* 24 @14 · 27 @16 — the "title" jump */ .ds-h2 { font-size: var(--ds-text-xl); } /* 20 · 23 */ .ds-h3 { font-size: var(--ds-text-lg); } /* 16 · 18 */ .ds-h4 { font-size: var(--ds-text-md); } /* body size, semibold — a group title */ .ds-h1 { letter-spacing: var(--ds-display-tracking); } .ds-body { font-size: var(--ds-text-md); line-height: var(--ds-lh-body); font-weight: var(--ds-weight-regular); } .ds-body-sm { font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); } .ds-body-lg { font-size: var(--ds-text-lg); line-height: var(--ds-lh-prose); } /* label lane: family + case + tracking are theme knobs */ .ds-label { font-family: var(--ds-font-label); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); color: var(--ds-ink-muted); } /* marketing eyebrow: ALWAYS uppercase mono-ish, regardless of data-labels (house rule) */ .ds-eyebrow { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); line-height: var(--ds-lh-list); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ink-muted); } /* mono lane: metadata, IDs, timestamps, code, tabular numbers */ .ds-mono { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); color: var(--ds-ink-code); font-variant-numeric: tabular-nums; letter-spacing: 0; } .ds-numeric { font-variant-numeric: tabular-nums; } /* prose: the reading measure; body-alt family (serif in paper) */ .ds-prose { font-family: var(--ds-font-body-alt); font-size: var(--ds-text-lg); line-height: var(--ds-lh-prose); max-width: var(--ds-measure); color: var(--ds-ink-2); } .ds-prose > * + * { margin-block-start: 1em; } .ds-prose :is(h1, h2, h3, h4) { font-family: var(--ds-font-sans); color: var(--ds-ink); line-height: var(--ds-lh-heading); } .ds-prose a { color: var(--ds-ink-link); } .ds-prose :is(ul, ol) { padding-inline-start: 1.4em; } .ds-prose ul { list-style: disc; } .ds-prose ol { list-style: decimal; } .ds-quote { font-family: var(--ds-font-body-alt); font-style: italic; font-size: var(--ds-text-lg); line-height: var(--ds-lh-prose); } /* two-tone heading / lead: first clause ink, tail muted — inside ONE element.

Ship the plan. Then measure it.

*/ .ds-two-tone { color: var(--ds-ink); } .ds-two-tone .ds-muted { color: var(--ds-ink-muted); font-weight: inherit; } /* ink utilities */ .ds-ink { color: var(--ds-ink); } .ds-ink-2 { color: var(--ds-ink-2); } .ds-muted { color: var(--ds-ink-muted); } /* readable secondary */ .ds-faint { color: var(--ds-ink-faint); } /* decorative only — never content */ .ds-strong { font-weight: var(--ds-weight-semibold); } .ds-medium { font-weight: var(--ds-weight-medium); } .ds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-tnum { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------------- 4. CONTROL HEIGHT + data-size HOOKS Components read --ds-size-h / --ds-size-text / --ds-size-pad-x instead of --ds-control-h so data-size on the element (or an ancestor toolbar) steps the whole family together: sm = h−4 · md = h · lg = h+8. ------------------------------------------------------------------------- */ [data-size="sm"] { --ds-size-h: var(--ds-control-h-sm); --ds-size-text: var(--ds-text-sm); --ds-size-pad-x: calc(var(--ds-control-pad-x) - 2px); } [data-size="md"] { --ds-size-h: var(--ds-control-h); --ds-size-text: var(--ds-text-md); --ds-size-pad-x: var(--ds-control-pad-x); } [data-size="lg"] { --ds-size-h: var(--ds-control-h-lg); --ds-size-text: var(--ds-text-lg); --ds-size-pad-x: calc(var(--ds-control-pad-x) + 4px); } /* the generic control box every input / button / select / chip starts from */ .ds-control { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-size-h); padding-inline: var(--ds-size-pad-x); font-size: var(--ds-size-text); line-height: var(--ds-lh-list); border-radius: var(--ds-radius-sm); border: var(--ds-border-width) solid var(--ds-border); background: var(--ds-surface); color: var(--ds-ink); text-transform: var(--ds-control-case); transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard), box-shadow var(--ds-dur-fast) var(--ds-ease-standard); } .ds-control:hover { border-color: var(--ds-border-strong); } .ds-control:disabled, .ds-control[aria-disabled="true"] { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); } /* --------------------------------------------------------------------------- 5. UNIVERSAL FOCUS RING — --ds-ring at --ds-ring-width, offset, everywhere. No reference showed one (0 of 51); the contract defines it. ------------------------------------------------------------------------- */ :focus-visible { outline: var(--ds-ring-width) solid var(--ds-ring); outline-offset: var(--ds-ring-offset); border-radius: inherit; } :focus:not(:focus-visible) { outline: none; } /* inputs draw the ring INSIDE their box (offset 0) so toolbars stay aligned */ :is(input, textarea, select, .ds-control):focus-visible { outline-offset: calc(-1 * var(--ds-border-width)); } /* ring-outset: draw the highlight OUTSIDE the box when the theme asks (Jasper) */ [data-ring="outset"]:focus-visible { outline-offset: var(--ds-ring-outset); } /* --------------------------------------------------------------------------- 6. HAIRLINES — three grades.
or as a block edge. ------------------------------------------------------------------------- */ .ds-hairline { border-block-start: var(--ds-border-width) solid var(--ds-rule); } .ds-hairline--soft { border-block-start-color: var(--ds-rule-soft); } .ds-hairline--strong { border-block-start-color: var(--ds-rule-strong); } .ds-hairline--dashed { border-block-start-style: dashed; } /* empty slot / optional */ .ds-hairline--dotted { border-block-start-style: dotted; } /* editable inline setting */ hr.ds-hairline { width: 100%; } .ds-hairline-v { border-inline-start: var(--ds-border-width) solid var(--ds-rule); align-self: stretch; } /* --------------------------------------------------------------------------- 7. LAYOUT HELPERS — gaps from the space scale; override per instance with style="--_gap: var(--ds-space-8)" (private --_ props are allowed inline). ------------------------------------------------------------------------- */ .ds-stack { display: flex; flex-direction: column; gap: var(--_gap, var(--ds-space-4)); } .ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_gap, var(--ds-space-2)); } .ds-row--between { justify-content: space-between; } .ds-row--end { justify-content: flex-end; } .ds-row--nowrap { flex-wrap: nowrap; } .ds-grid { display: grid; gap: var(--_gap, var(--ds-card-gap)); grid-template-columns: repeat(auto-fit, minmax(min(var(--_min, 240px), 100%), 1fr)); } .ds-grid[data-cols="2"] { --_min: 320px; } .ds-grid[data-cols="3"] { --_min: 240px; } .ds-grid[data-cols="4"] { --_min: 200px; } .ds-spacer { flex: 1 1 auto; } .ds-container { width: 100%; max-width: var(--ds-container-max); margin-inline: auto; padding-inline: var(--ds-gutter-page); } .ds-container--narrow { max-width: var(--ds-container-narrow); } .ds-container--prose { max-width: var(--ds-container-prose); } /* app content column (C-03): centred, max-width ALWAYS set (--ds-container-content, theme-tunable), page gutters */ .ds-content { width: 100%; max-width: var(--ds-container-content); margin-inline: auto; padding-inline: var(--ds-gutter-page); } /* card surface derived from data-depth (tint / hairline / shadow / tint-hairline) */ .ds-surface { background: var(--ds-card-bg); border: var(--ds-border-width) solid var(--ds-card-border); box-shadow: var(--ds-card-shadow); border-radius: var(--ds-radius-md); } .ds-well { background: var(--ds-surface-2); border-radius: var(--ds-radius-md); } /* inset tint */ /* --------------------------------------------------------------------------- 8. DEMO WRAPPER, SR-ONLY, REDUCED MOTION ------------------------------------------------------------------------- */ /*
The showcase generator concatenates these; the title is drawn from data-title. */ .ds-demo { padding: var(--ds-space-6) var(--ds-gutter-page); border-block-end: var(--ds-border-width) solid var(--ds-rule); display: flex; flex-direction: column; gap: var(--ds-space-4); min-width: 0; } .ds-demo::before { content: attr(data-component) " · " attr(data-variant) " — " attr(data-title); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); letter-spacing: 0; text-transform: none; } .ds-demo[data-title=""]::before, .ds-demo:not([data-title])::before { content: attr(data-component) " · " attr(data-variant); } .ds-demo > * { min-width: 0; } .ds-demo__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); } .ds-demo__note { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); max-width: var(--ds-measure); } .ds-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ---- section rhythm (2026-09-20, from the Cloudflare recreation) ---------------------------------- Every recipe pads --ds-section-gap on both sides, so two adjacent PLAIN sections would stack two gaps (the recreation ran 13 % taller than the page). Plain-after-plain drops its top padding: the gap between two sections is one --ds-section-gap. Bands (a data-mode or data-band island paints its own ground) keep both paddings, and a plain section after a band keeps its top padding, so content never touches a band edge. */ .ds-sec:not([data-mode]):not([data-band]) + .ds-sec:not([data-mode]):not([data-band]) { padding-block-start: 0; } /* ---- .ds-accent-word — the last word (or a term) in the accent, inside a heading or a paragraph. Five recipes defined this scoped; promoted to a base utility (2026-09-20). Rationed like any accent. */ .ds-accent-word { color: var(--ds-accent); } /* components/button-primary/button-primary.css */ /* ============================================================================ components/button-primary/button-primary.css — Primary button (core · S1) Root `.ds-button-primary` is the