/* AUTO-GENERATED by scripts/generate-pigment-css.ts. Do not hand-edit — edit client/packages/tokens/src/values.ts (and its `pigmentDocs` strings), then run `pnpm --filter @officialunofficial/tokens run generate`. The new design system's foundation tokens — DESIGN.md §2, verbatim. This file is the ONLY place in the new system where a raw hex or pixel value is allowed to appear (DESIGN.md §0, "Enforcement"). Everything downstream names a token. WHY THIS IS SCOPED TO `.ds`, NOT `:root` ---------------------------------------- `packages/ui/src/styles/tokens.css` is the OLD system and is imported globally by `src/pages/_layout.tsx`. It already owns `--font-sans`, `--font-mono`, and a dozen other names in this file. Declaring these on `:root` would silently repaint every shipped screen. So the new system is scoped to the `.ds` element that the design-system route puts around itself: inside that subtree the new values win, outside it nothing changes. When a screen is rebuilt on the new system, it opts in the same way; when the last old screen is gone, this block moves to `:root` and the old token file is deleted. THEME RESOLUTION (§2.3) ----------------------- Four states, in the order the spec requires: 1. the light values are the base, 2. the dark values apply under a dark system preference, 3. an explicit theme choice on the root element outranks both, 4. `prefers-contrast: more` lifts the sub-AA text ramp over all three. The host app writes that explicit choice as `data-theme="light" | "dark"` on `` (or any ancestor of the `.ds` root). */ .ds { /* --------------------------------------------------------------- §2.1A Faces --------------------------------------------------------------- */ --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif; --font-mono: "DM Mono", ui-monospace, monospace; /* Inter's default figure set. A host may set its own `font-sans` and `font-sans-figures` together (§2.1A). Numeric columns align by being set in DM Mono (§3.2 rule 2), not by a sans figure feature. */ --font-sans-figures: normal; /* --------------------------------------------------------------- §2.1B Size and leading The spec names ONE token per step and gives it two values ("20px / 26px"). A custom property holds one value, so each step resolves to a size/leading pair here. See the page's "Notes on the spec" panel. */ --text-xl: 28px; --text-xl-leading: 36px; --text-lg: 20px; --text-lg-leading: 26px; /* §2.1B: the solid leading — 100% line height, equal to the step's size. For text vertically centred inside a fixed-height control, where the normal leading pushes the label optically off-centre. */ --text-xl-solid: 28px; --text-lg-solid: 20px; --text-md: 16px; --text-md-leading: 22px; --text-md-solid: 16px; --text-base: 14px; --text-base-leading: 20px; --text-base-solid: 14px; --text-sm: 12px; --text-sm-leading: 16px; --text-sm-solid: 12px; --text-xs: 11px; --text-xs-leading: 15px; --text-xs-solid: 11px; /* §2.1C Weight */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; /* §2.1D rules 1–2: header tracking, and the inline-link underline. Neither is given a token name in §2; both are numbers the system forbids outside this file, so they are named here. */ --header-tracking: -0.02em; --link-underline-offset: 3px; --link-underline-thickness: 1.5px; /* The link underline is a background image, not `text-decoration`. The UA draws a dotted `text-decoration` with its own dot pitch, clips a half dot at the end of the run, and lets a glyph such as ↗ overlap the line. The image is one round dot per `--ds-dotted-period` tile, `link-underline-thickness` across, and repeats with `round`, so a whole number of dots always fits. `currentColor` resolves on the link. */ --link-underline-image: radial-gradient( circle closest-side, currentColor 80%, transparent 100% ); --link-underline-image-solid: linear-gradient(currentColor, currentColor); /* --------------------------------------------------------------- §2.2A Border weights --------------------------------------------------------------- */ --border-width-heavy: 3px; --border-width-medium: 2px; --border-width-light: 1px; --border-width-hairline: 0.5px; /* §2.2B Line style. CSS `border-style: dashed` does not let you state a dash length, so each style is carried as its dash/gap pair and drawn with a repeating gradient (see design-system-page.css). */ --border-style-dotted-dash: 1px; --border-style-dotted-gap: 3px; --border-style-dashed-dash: 3px; --border-style-dashed-gap: 3px; /* The drawn period of each style — the dash plus its gap. Named so the four edges of a box repeat on exactly the figure the specimen does. */ --ds-dotted-period: calc( var(--border-style-dotted-dash) + var(--border-style-dotted-gap) ); --ds-dashed-period: calc( var(--border-style-dashed-dash) + var(--border-style-dashed-gap) ); /* --------------------------------------------------------------- §2.3A Surface --------------------------------------------------------------- */ --surface-page: #ffffff; --surface-raised: #ffffff; --surface-sunken: #f5f5f5; --surface-overlay: #ffffff; --surface-hover: #f5f5f5; --surface-active: #ebebeb; --surface-selected: #f0f0f0; --surface-sticky: #fafafa; /* §2.3A: the fill an applied column filter puts on its own column's body cells (§4.43 rule 9). Same value as `surface-sunken` today, a separate token on purpose — the two carry different meanings and may diverge, the same split `delta-*` keeps from `status-*` (§2.3 rule 8). */ --surface-filtered: #f5f5f5; --surface-code: #fafafa; --surface-disabled: #f5f5f5; --surface-scrim: rgb(0 0 0 / 40%); --surface-skeleton: #ededed; --surface-loading: #e0e0e0; --surface-track: #e0e0e0; --surface-reaction-selected: #d4d4d4; --surface-message-sent: #171717; --surface-message-quote-sent: rgba(255, 255, 255, 0.08); --surface-message-quote-sent-hover: rgba(255, 255, 255, 0.12); --surface-message-quote-received: rgba(0, 0, 0, 0.04); --surface-message-quote-received-hover: rgba(0, 0, 0, 0.08); --shadow-color: rgb(0 0 0 / 8%); --shadow-color-strong: rgb(0 0 0 / 13%); /* §2.3B Text */ --text-primary: #0a0a0a; --text-secondary: #666666; --text-placeholder: #666666; --text-disabled: #9e9e9e; --text-inverse: #ffffff; --text-on-message-sent: #ffffff; --text-on-message-sent-secondary: #a3a3a3; --text-link: #0a0a0a; /* §2.3C Border */ --border-color-subtle: #e5e5e5; --border-color-default: #d4d4d4; --border-color-strong: #171717; --border-color-selected: #0a0a0a; --border-color-focus: #0a0a0a; --border-color-disabled: #ebebeb; /* §2.3D Action */ --action-primary-bg: #171717; --action-primary-bg-hover: #3d3d3d; --action-primary-bg-active: #000000; --action-primary-fg: #ffffff; --action-secondary-bg: #ffffff; --action-secondary-bg-hover: #ebebeb; --action-secondary-bg-active: #dedede; --action-secondary-fg: #171717; --action-secondary-border: #d4d4d4; --action-ghost-bg: transparent; --action-ghost-bg-hover: #ebebeb; --action-ghost-bg-active: #dedede; --action-ghost-fg: #171717; /* §2.3E Status */ --status-success-fg: #1a7f4b; --status-success-bg: #ecf6f0; --status-success-border: #b8dec8; --status-warning-fg: #9a6700; --status-warning-bg: #fdf6e7; --status-warning-border: #e8d5a3; --status-error-fg: #b42318; --status-error-bg: #fdf0ef; --status-error-border: #efc5c1; --status-neutral-fg: #8a8a8a; --status-neutral-bg: #f5f5f5; --status-neutral-border: #e5e5e5; /* §2.3F Delta */ --delta-increase-fg: #1a7f4b; --delta-increase-bg: #ecf6f0; --delta-decrease-fg: #b42318; --delta-decrease-bg: #fdf0ef; --delta-unchanged-fg: #8a8a8a; /* §2.3G Diff */ --diff-added-bg: #f2f9f5; --diff-added-marker: #1a7f4b; --diff-removed-bg: #fdf6f5; --diff-removed-marker: #b42318; --diff-conflict-bg: #fdf6e7; --diff-conflict-marker: #9a6700; --diff-context-fg: #8a8a8a; /* §2.3H Focus and selection */ --focus-ring: #0a0a0a; --focus-ring-offset: #ffffff; --selection-bg: #e5e5e5; --selection-fg: #0a0a0a; /* §2.3I Value */ --value-padding: #c7c7c7; /* --------------------------------------------------------------- §2.4 Spacing — seven ratios of one base, --space-base. The base is a property of the surface, never of a component (rule 1); a debugging surface stays at base 16, a product surface opts into base 24 via `data-base="24"` (rule 13). --------------------------------------------------------------- */ --space-base: 16px; --space-2xs: calc(var(--space-base) / 8); --space-xs: calc(var(--space-base) / 4); --space-sm: calc(var(--space-base) / 2); --space-md: calc(var(--space-base) * 3 / 4); --space-lg: var(--space-base); --space-xl: calc(var(--space-base) * 3 / 2); --space-2xl: calc(var(--space-base) * 2); /* One depth step in a disclosure tree (DESIGN_COMPONENTS.md's inventory: "Tree ... needs an indent step, and §2.4 has no token for depth"). Multiplying `space-md` by depth is exactly the off-grid improvisation §2.4 rule 2 forbids, so this is its own token. Set equal to `space-lg` on purpose, so the tree still lands on a whole multiple of the `space-xs` grid unit (§2.4 rule 1) rather than inventing a new figure. A length, not a colour, so it takes no dark-theme counterpart. */ /* The narrowest a table column may be squeezed to before the table stops shrinking and `.ds-table__scroll` takes over (§3.8: a header label never truncates — the table scrolls). Applied to the TABLE, as the column count times this figure: `table-layout: fixed` reads widths off the colgroup and ignores min/max on cells, so a per-column floor is not expressible, but a floor on the table gives every percentage one proportionally. */ --table-column-min: 120px; /* §2.5 Radii */ /* The smallest step, for a mark too small to carry `rounded-sm`: a 12px checkbox and a skeleton block. 4px on a 12px box is a third of the edge and reads as a lozenge rather than a square. */ --rounded-xs: 2px; --rounded-sm: 4px; --rounded-md: 6px; --rounded-lg: 12px; --rounded-xl: 16px; --rounded-full: 9999px; /* A component names a role, not a radius — the tier resolves it. Base 16 (this block) is the debugging column; `.ds[data-base="24"]` further down switches to the product column. Rule 7: `radius-container` minus `radius-control` equals the padding between them, or the inner corner is squared. Rule 8: a base-16 role value on a base-24 surface is a finding, and the reverse is too. */ --radius-mark: var(--rounded-xs); --radius-control: var(--rounded-sm); --radius-container: var(--rounded-md); --radius-pill: var(--rounded-full); /* --------------------------------------------------------------- §2.13 Materials — glass, the product tier's one material. Every token below resolves to its base-16 opaque counterpart until `.ds[data-base="24"]` opts in, further down this file; a reader asking for `prefers-reduced-transparency` gets that counterpart back even at base 24 (rule 5). `material-blur` and `material-hairline-subtle` are measured from the one `backdrop-filter` glass implementation in the repo, `ui-primitives/MenuPopover.tsx`; `material-fill`/ `material-fill-subtle` are confirmed against that same measurement and the inventory's fill cluster — desktop's own `GlassView` tints are a tint over a system material, not a measurement of this fill (rule 4). See `values.ts`'s `material`/`materialBlur` doc comment for the file:line evidence. --------------------------------------------------------------- */ --material-fill: var(--surface-overlay); --material-fill-subtle: var(--surface-sunken); --material-hairline: var(--border-color-default); --material-hairline-subtle: var(--border-color-subtle); --text-on-material: var(--text-secondary); --text-on-material-strong: var(--text-primary); --material-blur: 0; /* §2.6 Elevation. `--shd-diffuse` is the documented token and carries the same value in both themes. §2.6 rule 2 / §2.3 rule 13 then say a data-bearing component is built differently in dark — hairline instead of shadow — which is two property changes, not one value change. The two derived tokens below carry that construction so no downstream rule has to write a theme selector of its own. */ --shd-diffuse: 0 1px 3px var(--shadow-color); --shd-overlay: 0 4px 14px var(--shadow-color-strong); --elevation-shadow: var(--shd-diffuse); --elevation-hairline: transparent; --overlay-shadow: var(--shd-overlay); --overlay-hairline: var(--border-color-default); /* --------------------------------------------------------------- §2.7 Layout --------------------------------------------------------------- */ --grid-columns: 6; /* §2.7 rule 2. `space-md`, not `space-lg` — one step tighter, matching the card's own padding so a grid of cards has one figure running through it. */ --grid-gutter: var(--space-md); /* §2.7: the coarse-pointer hit minimum. A hit area, never a visual size. */ /* §2 Size — the dimensions of a mark or a frame, as distinct from the space around one. Five components had been borrowing `space-*` or a text leading for a box dimension because no scale existed. */ --size-xs: 12px; --size-sm: 16px; --size-md: 20px; --size-lg: 24px; --touch-target-min: 44px; /* §2.7 Measure — the widths content is allowed to run to. Not a column span: a top-layer panel is outside the grid, so it needs a measure of its own. */ --measure-sm: 20rem; --measure-md: 34rem; /* §2.7 Page width — native column limits in points. A limit bounds a route's content column, never a text size. */ --page-width-form: 560px; --page-width-reading: 760px; --page-width-data: 960px; /* --------------------------------------------------------------- §2.12 Size — fixed dimensions, named by what they size rather than a generic t-shirt step. Size and spacing are separate axes; borrowing a `space-*` token for a dimension is a bug §2.12 exists to stop. --------------------------------------------------------------- */ --size-row-text: 24px; --size-row-control: 30px; --size-frame-cell: 16px; --size-frame-header: 24px; --size-box: 16px; --size-box-small: 12px; /* Declared for reference. A custom property cannot be used in a media query condition, so the two breakpoints below are also written as literals in design-system-page.css — the one place the "no pixel value outside this file" rule cannot be kept. */ --breakpoint-wide: 1024px; --breakpoint-narrow: 640px; /* §2.8 Icons */ --icon-default: 16px; --icon-small: 12px; --icon-weight: regular; --icon-fill: fill; /* §2.9 Motion */ --duration-fast: 200ms; --duration-base: 180ms; /* §2.9: one rotation of a spinner. Looping, so it needs its own figure. */ --duration-spin: 900ms; /* §2.9: one breath of a skeleton. A pulse and a rotation are both loops but read at different speeds — at the spinner's 900ms a pulse flickers, since the eye tracks a fade far more readily than a rotation. */ --duration-pulse: 1800ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* §2.10 Layering */ --layer-base: 0; --layer-raised: 1; --layer-sticky: 2; /* §2.11 Focus and keyboard */ --focus-ring-width: 2px; --focus-ring-gap: 2px; } /* §2.4 rule 13 / §2.5's role table / §2.13: the product tier. A surface opts in at its root; the spacing ratios are unchanged, only the base moves — the radius roles and the material tokens switch to this column instead. */ .ds[data-base="24"] { --space-base: 24px; --radius-mark: var(--rounded-sm); --radius-control: var(--rounded-lg); --radius-container: var(--rounded-xl); --radius-pill: var(--rounded-full); --material-fill: rgb(255 255 255 / 65%); --material-fill-subtle: rgb(255 255 255 / 12%); --material-hairline: rgb(10 10 10 / 18%); --material-hairline-subtle: rgb(10 10 10 / 10%); --text-on-material: rgb(10 10 10 / 65%); --text-on-material-strong: rgb(10 10 10 / 85%); --material-blur: 50px; } /* State 2: dark under a dark system preference — unless the root element has explicitly chosen light. The second selector covers a host that puts `.ds` on the root element itself instead of a descendant — the two selectors declare the same block once each, so they must stay identical. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ds, :root:not([data-theme="light"]).ds { --surface-page: #0a0a0a; --surface-raised: #0a0a0a; --surface-sunken: #141414; --surface-overlay: #0a0a0a; --surface-hover: #1a1a1a; --surface-active: #242424; --surface-selected: #1f1f1f; --surface-sticky: #121212; --surface-filtered: #141414; --surface-code: #101010; --surface-disabled: #141414; --surface-scrim: rgb(0 0 0 / 60%); --surface-skeleton: #1c1c1c; --surface-loading: #262626; --surface-track: #262626; --surface-reaction-selected: #484848; --surface-message-sent: #242424; --surface-message-quote-sent: rgba(255, 255, 255, 0.08); --surface-message-quote-sent-hover: rgba(255, 255, 255, 0.12); --surface-message-quote-received: rgba(255, 255, 255, 0.06); --surface-message-quote-received-hover: rgba(255, 255, 255, 0.1); --shadow-color: rgb(0 0 0 / 40%); --shadow-color-strong: rgb(0 0 0 / 48%); --text-primary: #ededed; --text-secondary: #a3a3a3; --text-placeholder: #a3a3a3; --text-disabled: #565656; --text-inverse: #0a0a0a; --text-on-message-sent: #ededed; --text-on-message-sent-secondary: #a3a3a3; --text-link: #ededed; --border-color-subtle: #1f1f1f; --border-color-default: #333333; --border-color-strong: #ededed; --border-color-selected: #f5f5f5; --border-color-focus: #f5f5f5; --border-color-disabled: #242424; --action-primary-bg: #ededed; --action-primary-bg-hover: #d4d4d4; --action-primary-bg-active: #ffffff; --action-primary-fg: #0a0a0a; --action-secondary-bg: #0a0a0a; --action-secondary-bg-hover: #242424; --action-secondary-bg-active: #333333; --action-secondary-fg: #ededed; --action-secondary-border: #333333; --action-ghost-bg: transparent; --action-ghost-bg-hover: #242424; --action-ghost-bg-active: #333333; --action-ghost-fg: #ededed; --status-success-fg: #4fa97a; --status-success-bg: #0e1a14; --status-success-border: #1f3a2c; --status-warning-fg: #d6a93b; --status-warning-bg: #1c1608; --status-warning-border: #3d3418; --status-error-fg: #e5675c; --status-error-bg: #1e100f; --status-error-border: #4a2320; --status-neutral-fg: #676767; --status-neutral-bg: #141414; --status-neutral-border: #1f1f1f; --delta-increase-fg: #4fa97a; --delta-increase-bg: #0e1a14; --delta-decrease-fg: #e5675c; --delta-decrease-bg: #1e100f; --delta-unchanged-fg: #676767; --diff-added-bg: #0b1410; --diff-added-marker: #4fa97a; --diff-removed-bg: #17100f; --diff-removed-marker: #e5675c; --diff-conflict-bg: #171208; --diff-conflict-marker: #d6a93b; --diff-context-fg: #676767; --focus-ring: #f5f5f5; --focus-ring-offset: #0a0a0a; --selection-bg: #333333; --selection-fg: #ededed; --value-padding: #3a3a3a; /* §2.6 rule 2 — dark elevates with a hairline, not a shadow. */ --elevation-shadow: none; --elevation-hairline: var(--border-color-subtle); /* §2.6 rule 5: an overlay keeps its shadow in dark AND takes a hairline — one hairline alone does not read as a different plane there. */ --overlay-shadow: var(--shd-overlay); --overlay-hairline: var(--border-color-default); } /* §2.13: the product tier's material tokens, dark counterpart. */ :root:not([data-theme="light"]) .ds[data-base="24"], :root:not([data-theme="light"]).ds[data-base="24"] { --material-fill: rgb(10 10 10 / 65%); --material-fill-subtle: rgb(10 10 10 / 12%); --material-hairline: rgb(255 255 255 / 18%); --material-hairline-subtle: rgb(255 255 255 / 10%); --text-on-material: rgb(255 255 255 / 65%); --text-on-material-strong: rgb(255 255 255 / 85%); } } /* State 3: an explicit dark choice on the root element outranks the system preference in both directions. The light base already covers `[data-theme="light"]`, so only dark needs restating. The second selector covers a host that puts `.ds` on the root element itself instead of a descendant — keep both selectors' declarations identical. */ :root[data-theme="dark"] .ds, :root[data-theme="dark"].ds { --surface-page: #0a0a0a; --surface-raised: #0a0a0a; --surface-sunken: #141414; --surface-code: #101010; --surface-overlay: #0a0a0a; --surface-hover: #1a1a1a; --surface-active: #242424; --surface-selected: #1f1f1f; --surface-sticky: #121212; --surface-filtered: #141414; --surface-disabled: #141414; --surface-scrim: rgb(0 0 0 / 60%); --surface-skeleton: #1c1c1c; --surface-loading: #262626; --surface-track: #262626; --surface-reaction-selected: #484848; --surface-message-sent: #242424; --surface-message-quote-sent: rgba(255, 255, 255, 0.08); --surface-message-quote-sent-hover: rgba(255, 255, 255, 0.12); --surface-message-quote-received: rgba(255, 255, 255, 0.06); --surface-message-quote-received-hover: rgba(255, 255, 255, 0.1); --shadow-color: rgb(0 0 0 / 40%); --shadow-color-strong: rgb(0 0 0 / 48%); --text-primary: #ededed; --text-secondary: #a3a3a3; --text-placeholder: #a3a3a3; --text-disabled: #565656; --text-inverse: #0a0a0a; --text-on-message-sent: #ededed; --text-on-message-sent-secondary: #a3a3a3; --text-link: #ededed; --border-color-subtle: #1f1f1f; --border-color-default: #333333; --border-color-strong: #ededed; --border-color-selected: #f5f5f5; --border-color-focus: #f5f5f5; --border-color-disabled: #242424; --action-primary-bg: #ededed; --action-primary-bg-hover: #d4d4d4; --action-primary-bg-active: #ffffff; --action-primary-fg: #0a0a0a; --action-secondary-bg: #0a0a0a; --action-secondary-bg-hover: #242424; --action-secondary-bg-active: #333333; --action-secondary-fg: #ededed; --action-secondary-border: #333333; --action-ghost-bg: transparent; --action-ghost-bg-hover: #242424; --action-ghost-bg-active: #333333; --action-ghost-fg: #ededed; --status-success-fg: #4fa97a; --status-success-bg: #0e1a14; --status-success-border: #1f3a2c; --status-warning-fg: #d6a93b; --status-warning-bg: #1c1608; --status-warning-border: #3d3418; --status-error-fg: #e5675c; --status-error-bg: #1e100f; --status-error-border: #4a2320; --status-neutral-fg: #676767; --status-neutral-bg: #141414; --status-neutral-border: #1f1f1f; --delta-increase-fg: #4fa97a; --delta-increase-bg: #0e1a14; --delta-decrease-fg: #e5675c; --delta-decrease-bg: #1e100f; --delta-unchanged-fg: #676767; --diff-added-bg: #0b1410; --diff-added-marker: #4fa97a; --diff-removed-bg: #17100f; --diff-removed-marker: #e5675c; --diff-conflict-bg: #171208; --diff-conflict-marker: #d6a93b; --diff-context-fg: #676767; --focus-ring: #f5f5f5; --focus-ring-offset: #0a0a0a; --selection-bg: #333333; --selection-fg: #ededed; --value-padding: #3a3a3a; /* §2.6 rule 2 — dark elevates with a hairline, not a shadow. */ --elevation-shadow: none; --elevation-hairline: var(--border-color-subtle); --overlay-shadow: var(--shd-overlay); --overlay-hairline: var(--border-color-default); } /* §2.13: the product tier's material tokens, dark counterpart — the explicit-theme mirror of the `@media (prefers-color-scheme: dark)` block above. */ :root[data-theme="dark"] .ds[data-base="24"], :root[data-theme="dark"].ds[data-base="24"] { --material-fill: rgb(10 10 10 / 65%); --material-fill-subtle: rgb(10 10 10 / 12%); --material-hairline: rgb(255 255 255 / 18%); --material-hairline-subtle: rgb(255 255 255 / 10%); --text-on-material: rgb(255 255 255 / 65%); --text-on-material-strong: rgb(255 255 255 / 85%); } /* §2.13 rule 5: `prefers-reduced-transparency` replaces every material token with its base-16 counterpart, at either tier. The var() references resolve per theme through the surface/text/border tokens they alias, but specificity does not follow from that alone: the two dark base-24 blocks above (State 2's counterpart and State 3's) match `:root(:not(…)) .ds[data-base="24"]`, one more simple selector than this rule's own `.ds[data-base="24"]`, so a lone rule at that lower specificity loses to them in dark regardless of source order. Three rules below, mirroring State 2/3/4's own pattern: the first covers light (and any surface with no explicit or system dark theme, where nothing outranks it); the second and third repeat the two dark blocks' selectors, under this same media feature, so the restore wins there too. */ @media (prefers-reduced-transparency: reduce) { .ds[data-base="24"] { --material-fill: var(--surface-overlay); --material-fill-subtle: var(--surface-sunken); --material-hairline: var(--border-color-default); --material-hairline-subtle: var(--border-color-subtle); --text-on-material: var(--text-secondary); --text-on-material-strong: var(--text-primary); --material-blur: 0; } } /* `--material-blur` is not restated in either dark block below: it never had a theme-specific value (24px at either tier's own theme), so the light rule above already restores it for both themes, the same way `--border-color-strong` never needed a `prefers-contrast: more` dark restatement for a value that does not change by theme. */ @media (prefers-reduced-transparency: reduce) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ds[data-base="24"], :root:not([data-theme="light"]).ds[data-base="24"] { --material-fill: var(--surface-overlay); --material-fill-subtle: var(--surface-sunken); --material-hairline: var(--border-color-default); --material-hairline-subtle: var(--border-color-subtle); --text-on-material: var(--text-secondary); --text-on-material-strong: var(--text-primary); } } @media (prefers-reduced-transparency: reduce) { :root[data-theme="dark"] .ds[data-base="24"], :root[data-theme="dark"].ds[data-base="24"] { --material-fill: var(--surface-overlay); --material-fill-subtle: var(--surface-sunken); --material-hairline: var(--border-color-default); --material-hairline-subtle: var(--border-color-subtle); --text-on-material: var(--text-secondary); --text-on-material-strong: var(--text-primary); } } /* State 4: `prefers-contrast: more` outranks all three states above. Normal text clears WCAG AA on the supported surfaces by default. Increased contrast raises secondary and placeholder text to AAA. Borders strengthen without changing disabled control styling. `text-disabled` and `border-color-disabled` do NOT rise. WCAG 1.4.3 and 1.4.11 both exempt inactive controls, and the dimness is the affordance that says the control is off. `border-color-strong`, `-focus`, and `-selected` already clear 3:1 and are left alone. The light block is `.ds` (0,1,0), so the two dark blocks below still outrank it on specificity. The dark blocks repeat State 2's and State 3's selectors and must stay in sync with them. */ @media (prefers-contrast: more) { .ds { --text-secondary: #444444; /* 6.7:1 */ --text-placeholder: #444444; /* 4.5:1 */ --border-color-subtle: #b8b8b8; /* 2.0:1 */ --border-color-default: #8f8f8f; /* 3.2:1 */ } } @media (prefers-contrast: more) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ds, :root:not([data-theme="light"]).ds { --text-secondary: #c7c7c7; /* 6.7:1 */ --text-placeholder: #c7c7c7; /* 4.5:1 */ --border-color-subtle: #454545; /* 2.1:1 */ --border-color-default: #626262; /* 3.3:1 */ } } @media (prefers-contrast: more) { :root[data-theme="dark"] .ds, :root[data-theme="dark"].ds { --text-secondary: #c7c7c7; /* 6.7:1 */ --text-placeholder: #c7c7c7; /* 4.5:1 */ --border-color-subtle: #454545; /* 2.1:1 */ --border-color-default: #626262; /* 3.3:1 */ } } /* Opt-in Uno brand. This selector also works on the document's .ds root. Semantic roles stay unchanged; only this brand's values are substituted. */ :is(.ds[data-brand="uno"], .ds [data-brand="uno"]) { --action-primary-bg: #0067ed; --action-primary-bg-hover: #005bd2; --action-primary-bg-active: #004fb8; --action-primary-fg: #ffffff; --text-link: #0067ed; --focus-ring: #0067ed; --border-color-focus: #0067ed; --border-color-separator: #ededed; --border-color-hover: var(--border-color-focus); --radius-control: 8px; --radius-field: 12px; --control-corner-shape: superellipse(2); --button-padding-inline: 15px; --button-gap: 6px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.ds[data-brand="uno"], .ds [data-brand="uno"]), :root:not([data-theme="light"]).ds[data-brand="uno"] { --action-primary-bg: #0067ed; --action-primary-bg-hover: #005bd2; --action-primary-bg-active: #004fb8; --action-primary-fg: #ffffff; --text-link: #73b0ff; --focus-ring: #73b0ff; --border-color-focus: #73b0ff; --border-color-separator: #2b2b2b; } } :root[data-theme="dark"] :is(.ds[data-brand="uno"], .ds [data-brand="uno"]), :root[data-theme="dark"].ds[data-brand="uno"] { --action-primary-bg: #0067ed; --action-primary-bg-hover: #005bd2; --action-primary-bg-active: #004fb8; --action-primary-fg: #ffffff; --text-link: #73b0ff; --focus-ring: #73b0ff; --border-color-focus: #73b0ff; --border-color-separator: #2b2b2b; }