/* ============================================================================
Drift Extensions — custom design tokens for the product-prototypes repo
----------------------------------------------------------------------------
Repo-wide additions that follow Drift's conventions and theming model.
These are candidates for promotion into the core Drift design system
(both the code and the Figma file) once validated in prototypes.
USAGE:
Load this stylesheet AFTER drift-ui.css in any prototype:
CONVENTIONS:
- Mapped tokens are scoped per theme via [data-theme=Light] / [data-theme=Dark]
(matching how Drift defines its Mapped collection).
- Mapped tokens reference Primitive tokens (e.g. --color-base-white),
never raw hex values.
========================================================================== */
/* ───────────────────────────────────────────────────────────
COLLECTION: Mapped
GROUP: Surface
─────────────────────────────────────────────────────────── */
/* --surface-raised-default
A surface that sits *on top of* the page background — used for floating /
elevated UI such as the top navigation bar, floating pills, and overlay
boxes (e.g. a legend). Distinct from --surface-card-default so elevated
chrome can read as the topmost layer.
Light → color-base-white
Dark → color-neutral-1000 */
[data-theme=Light] {
--surface-raised-default: var(--color-base-white);
}
[data-theme=Dark] {
--surface-raised-default: var(--color-neutral-1000);
}
/* --surface-raised-active
The pressed/active variant of --surface-raised-default. One step beyond
--surface-raised-hover in the same direction (slightly darker in light,
slightly lighter in dark) so the "rest → hover → active" progression
reads as a single coherent emphasis ramp.
Light → color-neutral-50 (one step darker than the neutral-25 hover)
Dark → color-neutral-800 (one tone lighter than neutral-900) */
[data-theme=Light] {
--surface-raised-active: var(--color-neutral-50);
}
[data-theme=Dark] {
--surface-raised-active: var(--color-neutral-800);
}
/* --surface-raised-hover
The hover variant of --surface-raised-default.
- LIGHT: one step darker than --surface-raised-default (neutral-25), so the
hover surface itself carries the affordance alongside the darker border.
- DARK: one tone lighter than --surface-raised-default (neutral-900),
so dark-mode hover gets the contrast bump it needs.
Light → color-neutral-25 (one step darker than base-white)
Dark → color-neutral-900 (one step lighter than neutral-1000) */
[data-theme=Light] {
--surface-raised-hover: var(--color-neutral-25);
}
[data-theme=Dark] {
--surface-raised-hover: var(--color-neutral-900);
}
/* --surface-raised-glass
A translucent variant of --surface-raised-default for "frosted glass"
floating surfaces (e.g. the IA Explorer detail panel). Pair it with
backdrop-filter: blur(...) so the canvas behind shows through, softly
blurred — the modern translucent-chrome look.
Raw rgba is required: translucency has no matching Drift primitive (all
primitives are opaque hex), so the rgb channels mirror the opaque token
(base-white / neutral-1000) at ~72% alpha. When promoting to core, add an
alpha-aware primitive first.
Light → rgba(255, 255, 255, 0.72) (== color-base-white @ 72%)
Dark → rgba(31, 43, 45, 0.72) (== color-neutral-1000 @ 72%) */
[data-theme=Light] {
--surface-raised-glass: rgba(255, 255, 255, 0.72);
}
[data-theme=Dark] {
--surface-raised-glass: rgba(31, 43, 45, 0.72);
}
/* --surface-canvas-default
The "back layer" surface used for canvas-like workspaces (e.g. the IA
Explorer flow area, future map / diagram views). Pairs with
--surface-raised-default to form a clear two-layer system:
raised chrome (topbar, breadcrumb, legend, hint chips) floats *above*
the canvas surface.
In LIGHT mode the canvas is a hair softer than pure white so floating
chrome (which is pure white) reads as elevated against it.
In DARK mode the canvas sits at the deepest neutral, matching the page
default, so the raised chrome (one step lighter, on neutral-1000) lifts
visibly off it.
Light → color-neutral-25
Dark → color-neutral-1100
NOTE: Drift core has page-default (white / 1100), page-secondary
(neutral-25 / 1000) and page-tertiary (same as secondary), but none
of those combine "neutral-25 light + neutral-1100 dark" — which is the
specific contrast pair needed for the canvas/raised pairing here. */
[data-theme=Light] {
--surface-canvas-default: var(--color-neutral-25);
}
[data-theme=Dark] {
--surface-canvas-default: var(--color-neutral-1100);
}
/* --surface-inverse-default
A high-contrast "inverted" surface — dark in light mode, light in dark mode —
for elements that should read as the opposite of the UI regardless of theme
(e.g. tooltips, toasts, key callouts). Pair with an inverse text/icon colour.
Light → color-neutral-1000
Dark → color-neutral-50 */
[data-theme=Light] {
--surface-inverse-default: var(--color-neutral-1000);
}
[data-theme=Dark] {
--surface-inverse-default: var(--color-neutral-50);
}
/* --surface-nested-default
A surface for boxes nested INSIDE a raised card (e.g. section items) that must
read as distinct from their container. One step toward contrast from
--surface-raised-default: slightly darker in light, slightly lighter in dark.
Light → color-neutral-25 (just off-white — kept subtle)
Dark → color-neutral-900 */
[data-theme=Light] {
--surface-nested-default: var(--color-neutral-25);
}
[data-theme=Dark] {
--surface-nested-default: var(--color-neutral-900);
}
/* --surface-primary-default / -hover / -focus (OVERRIDE)
The primary-teal interactive surface used for "active / selected" emphasis
(focal node fill, active sidebar destination, active phase tab). Core Drift
shifts these darker in dark mode, but primary teal is a mid-range brand value
that reads well on both light and dark backgrounds (same rationale as
--shadow-card-on-color). We therefore pin them to a single theme-independent
"rest → hover → focus" emphasis ramp. Rest is the same mid-teal (500) in both
themes, but the hover/focus steps go in OPPOSITE directions per theme so the
interaction always reads as emphasis against its background:
Light: default 500 → hover 600 → focus 700 (darken on a light canvas)
Dark: default 500 → hover 400 → focus 300 (lighten on a dark canvas) */
[data-theme=Light] {
--surface-primary-default: var(--color-primary-500);
--surface-primary-hover: var(--color-primary-600);
--surface-primary-focus: var(--color-primary-700);
}
[data-theme=Dark] {
--surface-primary-default: var(--color-primary-500);
--surface-primary-hover: var(--color-primary-400);
--surface-primary-focus: var(--color-primary-300);
}
/* ───────────────────────────────────────────────────────────
COLLECTION: Mapped
GROUP: Border
─────────────────────────────────────────────────────────── */
/* --border-raised-default
The companion border to --surface-raised-default. Renamed from the
earlier --border-neutral-soft so the surface/border pairing is obvious
at the call site (raised surface + raised border = consistent floating-
chrome treatment).
Light → #EBEBEB
Dark → #35484B
NOTE: Raw hex is used here because matching brand primitives don't yet
exist — these values sit between existing neutral steps and carry a slight
tint in dark mode. When promoting this token into the core design system,
add the corresponding primitives first and update these references. */
[data-theme=Light] {
--border-raised-default: #EBEBEB;
}
[data-theme=Dark] {
--border-raised-default: #35484B;
}
/* --border-raised-hover
The hover variant of --border-raised-default, mirroring the surface-side
--surface-raised-hover. One tone darker in light, one tone lighter in
dark, so the border subtly strengthens on hover in both themes.
Light → #DDDDDD (~7% darker than #EBEBEB)
Dark → #46595C (~8% lighter than #35484B)
Raw hex for the same reason the base token does: no matching Drift
primitives at these exact steps. */
[data-theme=Light] {
--border-raised-hover: #DDDDDD;
}
[data-theme=Dark] {
--border-raised-hover: #46595C;
}
/* --border-raised-active
The pressed/active variant — one tone beyond --border-raised-hover in
the same direction. Combined with --surface-raised-active they form
the third step in a "rest → hover → active" progression.
Light → #CFCFCF (slightly darker than the #DDDDDD hover border)
Dark → #586D71 (slightly lighter than the #46595C hover border) */
[data-theme=Light] {
--border-raised-active: #CFCFCF;
}
[data-theme=Dark] {
--border-raised-active: #586D71;
}
/* --border-nested-default
Companion border for --surface-nested-default. One tone past
--border-raised-default (darker in light, lighter in dark) so a nested box
reads cleanly against both its own surface and the card behind it.
Light → #DDDDDD
Dark → #46595C */
[data-theme=Light] {
--border-nested-default: #DDDDDD;
}
[data-theme=Dark] {
--border-nested-default: #46595C;
}
/* --border-primary-default / -hover / -focus (OVERRIDE)
The primary-teal border that pairs with the --surface-primary-* fills (focal
node, active sidebar destination, active phase tab). Steps in OPPOSITE
directions per theme so the border always deepens the rim against its canvas:
Light: default 600 → hover 700 → focus 800 (darker than the fill)
Dark: default 400 → hover 300 → focus 200 (lighter than the fill) */
[data-theme=Light] {
--border-primary-default: var(--color-primary-600);
--border-primary-hover: var(--color-primary-700);
--border-primary-focus: var(--color-primary-800);
}
[data-theme=Dark] {
--border-primary-default: var(--color-primary-400);
--border-primary-hover: var(--color-primary-300);
--border-primary-focus: var(--color-primary-200);
}
/* --border-primary-guide (NEW)
A soft primary guide line — used for the loop-nesting indicator that runs down
the side of nested section items (inspector + node). Recedes against its
surface in BOTH themes (decorative, not a structural rim): pale teal in light,
a mid teal in dark that reads equivalently quiet against the dark canvas.
(Deliberately NOT --border-primary-subtle, which the action-node border ramp
already references via fallback — a shared name would perturb those borders.)
Light: primary 200 Dark: primary 600 */
[data-theme=Light] {
--border-primary-guide: var(--color-primary-200);
}
[data-theme=Dark] {
--border-primary-guide: var(--color-primary-600);
}
/* ───────────────────────────────────────────────────────────
COLLECTION: Mapped
GROUP: Outline
─────────────────────────────────────────────────────────── */
/* --outline-selected-default
The ring drawn around an element when it is the "active" (selected) item —
e.g. the IA Explorer node currently driving the side panel. Rendered as a
CSS `outline` (drawn OUTSIDE the box, so no layout shift) rather than a
border, so the element keeps its own resting border treatment underneath.
Used by elements sitting on neutral / white surfaces (other pages, content
sections, out-of-scope nodes).
Light → color-primary-500 (a clear teal ring against white-ish surfaces)
Dark → color-primary-200 (a light teal ring that reads against dark) */
[data-theme=Light] {
--outline-selected-default: var(--color-primary-500);
}
[data-theme=Dark] {
--outline-selected-default: var(--color-primary-200);
}
/* --outline-selected-on-color
The selected-ring variant for an element sitting on a COLOURED (primary /
teal) surface — e.g. the focal "you-are-here" node, whose background is
--surface-primary-default. The default teal ring has too little contrast
against a teal fill, so in light mode this steps down to the deepest
primary; dark mode keeps the same light-teal ring as the default, which
already contrasts well against the dark teal fill.
Light → color-primary-700 (deep teal ring on the teal focal fill)
Dark → color-primary-200 (== default; light ring reads against dark) */
[data-theme=Light] {
--outline-selected-on-color: var(--color-primary-700);
}
[data-theme=Dark] {
--outline-selected-on-color: var(--color-primary-200);
}
/* ───────────────────────────────────────────────────────────
COLLECTION: Mapped
GROUP: Text
─────────────────────────────────────────────────────────── */
/* --text-primary-highlight
A brighter, more saturated primary text colour used to mark a transient
"highlighted" state — e.g. the interaction-hint chips on a canvas while
the user is actively performing the matching action (scrolling to zoom,
dragging to pan). Sits one step lighter than --text-primary-default so
the shift reads as feedback rather than as an emphasis-permanence change.
Light → color-primary-500
Dark → color-primary-400 */
[data-theme=Light] {
--text-primary-highlight: var(--color-primary-500);
}
[data-theme=Dark] {
--text-primary-highlight: var(--color-primary-400);
}
/* --text-primary-disabled (LIGHT OVERRIDE)
Disabled primary text (e.g. the label of an out-of-scope action node). Core
Drift uses color-primary-300 in light mode, which reads too strong against
the --surface-primary-subtle fill; we soften it one step to color-primary-200.
Dark mode keeps the core value. */
[data-theme=Light] {
--text-primary-disabled: var(--color-primary-200);
}
/* --text-nested-default
Text inside nested item boxes (on --surface-nested-default). One tone stronger
than --text-neutral-default (neutral-600/300) — darker in light, lighter in
dark — so it reads clearly on the slightly-contrasted nested surface.
Light → color-neutral-700
Dark → color-neutral-200 */
[data-theme=Light] {
--text-nested-default: var(--color-neutral-700);
}
[data-theme=Dark] {
--text-nested-default: var(--color-neutral-200);
}
/* --text-disabled-subtle-hover
Hover variant of Drift core's --text-disabled-subtle — for dimmed text on
an element that is still interactive (e.g. out-of-scope IA Explorer nodes,
which rest at --text-disabled-subtle but remain clickable). Steps one tone
toward higher contrast than rest: darker in light, lighter in dark.
Core rests at neutral-200 (light) / neutral-700 (dark).
Light → color-neutral-300
Dark → color-neutral-600 */
[data-theme=Light] {
--text-disabled-subtle-hover: var(--color-neutral-300);
}
[data-theme=Dark] {
--text-disabled-subtle-hover: var(--color-neutral-600);
}
/* --text-disabled-subtle-active
Pressed variant — one tone beyond -hover in the same direction, the third
step in the disabled-subtle "rest → hover → active" emphasis ramp.
Light → color-neutral-400
Dark → color-neutral-500 */
[data-theme=Light] {
--text-disabled-subtle-active: var(--color-neutral-400);
}
[data-theme=Dark] {
--text-disabled-subtle-active: var(--color-neutral-500);
}
/* ───────────────────────────────────────────────────────────
COLLECTION: Mapped
GROUP: Icon
─────────────────────────────────────────────────────────── */
/* --icon-primary-highlight
The icon-side counterpart to --text-primary-highlight. Kept as a
separate token (rather than aliasing the text one) so that icon and
text highlight colours can diverge in the future without breaking
either semantic.
Light → color-primary-500
Dark → color-primary-400 */
[data-theme=Light] {
--icon-primary-highlight: var(--color-primary-500);
}
[data-theme=Dark] {
--icon-primary-highlight: var(--color-primary-400);
}
/* --icon-primary-disabled (LIGHT OVERRIDE)
Icon-side counterpart to the --text-primary-disabled light override above —
softened from core's color-primary-300 to color-primary-200 so the disabled
icon of an out-of-scope action node sits gently on --surface-primary-subtle.
Dark mode keeps the core value. */
[data-theme=Light] {
--icon-primary-disabled: var(--color-primary-200);
}
/* --icon-disabled-subtle-hover
Icon-side counterpart to --text-disabled-subtle-hover, for the dimmed icon
inside an interactive disabled-looking element. Core rests at neutral-100
(light) / neutral-800 (dark); hover steps one tone toward contrast.
Light → color-neutral-200
Dark → color-neutral-700 */
[data-theme=Light] {
--icon-disabled-subtle-hover: var(--color-neutral-200);
}
[data-theme=Dark] {
--icon-disabled-subtle-hover: var(--color-neutral-700);
}
/* --icon-disabled-subtle-active
Pressed variant — one tone beyond -hover, the third step in the icon
disabled-subtle "rest → hover → active" ramp.
Light → color-neutral-300
Dark → color-neutral-600 */
[data-theme=Light] {
--icon-disabled-subtle-active: var(--color-neutral-300);
}
[data-theme=Dark] {
--icon-disabled-subtle-active: var(--color-neutral-600);
}
/* ───────────────────────────────────────────────────────────
COLLECTION: Mapped
GROUP: Shadow
A carefully crafted shadow scale intended to replace the existing
Drift shadow tokens (which are unrefined at the moment). All four
shadows share the same Y-offset (4px) for a consistent light
direction; they differ in blur, opacity, and theme behaviour.
─────────────────────────────────────────────────────────── */
/* --shadow-card-default
The primary card / elevated-element shadow. Use it when an element
needs to stand out and call the user's attention (e.g. hero cards,
modal surfaces, popovers).
Light → 0 4px 20px 0 rgba(0, 0, 0, 0.08)
Dark → 0 4px 20px 0 rgba(0, 0, 0, 0.20) */
[data-theme=Light] {
--shadow-card-default: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
}
[data-theme=Dark] {
--shadow-card-default: 0 4px 20px 0 rgba(0, 0, 0, 0.20);
}
/* --shadow-card-on-color
Same prominence as --shadow-card-default but designed for elements
sitting on coloured backgrounds whose value barely shifts between
themes (mid-range primary, secondary, information, success, etc).
The shadow is therefore identical in both themes.
Light → 0 4px 20px 0 rgba(0, 0, 0, 0.16)
Dark → 0 4px 20px 0 rgba(0, 0, 0, 0.16) */
[data-theme=Light] {
--shadow-card-on-color: 0 4px 20px 0 rgba(0, 0, 0, 0.16);
}
[data-theme=Dark] {
--shadow-card-on-color: 0 4px 20px 0 rgba(0, 0, 0, 0.16);
}
/* --shadow-card-subtle
A gentler variant of --shadow-card-default. Use on UI-dense screens
with many shadowed elements (e.g. a grid of cards) so the shadows
don't visually overwhelm the user.
Light → 0 4px 10px 0 rgba(0, 0, 0, 0.08)
Dark → 0 4px 10px 0 rgba(0, 0, 0, 0.20) */
[data-theme=Light] {
--shadow-card-subtle: 0 4px 10px 0 rgba(0, 0, 0, 0.08);
}
[data-theme=Dark] {
--shadow-card-subtle: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
}
/* --shadow-card-faint
The faintest card shadow in the scale. Use on very dense UIs
(e.g. a grid of filter boxes) where any heavier elevation would
compete with content.
Light → 0 4px 8px 0 rgba(0, 0, 0, 0.04)
Dark → 0 4px 8px 0 rgba(0, 0, 0, 0.16) */
[data-theme=Light] {
--shadow-card-faint: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
}
[data-theme=Dark] {
--shadow-card-faint: 0 4px 8px 0 rgba(0, 0, 0, 0.16);
}
/* --text-primary-* / --icon-primary-* (DARK ramp lift + ACTIVE tokens)
Primary text AND icons on dark backgrounds. Core Drift's dark ramp
(default 500 → hover 400 → focus 300) reads a touch dim on the deep dark
canvas, so we lift the whole ramp one step lighter for legibility — keeping
text and icons in lockstep (they share the same core ramp). We also add the
missing --text-primary-active / --icon-primary-active tokens (core Drift has
no 'active' primary state); each is pinned to that theme's focus value. Light
mode keeps the core ramp and just gains the two active tokens.
Light : default 500 → hover 600 → focus 700 ; active = 700
Dark : default 400 → hover 300 → focus 200 ; active = 200 (lifted) */
[data-theme=Light] {
--text-primary-active: var(--color-primary-700);
--icon-primary-active: var(--color-primary-700);
}
[data-theme=Dark] {
--text-primary-default: var(--color-primary-400);
--text-primary-hover: var(--color-primary-300);
--text-primary-focus: var(--color-primary-200);
--text-primary-active: var(--color-primary-200);
--icon-primary-default: var(--color-primary-400);
--icon-primary-hover: var(--color-primary-300);
--icon-primary-focus: var(--color-primary-200);
--icon-primary-active: var(--color-primary-200);
}
/* --surface-primary-disabled-* / --border-primary-disabled-* (NEW hover/active)
Core Drift has primary-disabled REST values (surface L200/D800, border L300/D700)
but no hover/active steps. The out-of-scope page eyebrow needs them (an OOS page
is still interactive — you can drill it). We anchor on the disabled rest value
and step in the same direction as the surface-primary ramp — darken in light,
lighten in dark — one primitive step per state.
surface Light: 200 → 300 → 400 ; Dark: 800 → 700 → 600
border Light: 300 → 400 → 500 ; Dark: 700 → 600 → 500 */
[data-theme=Light] {
--surface-primary-disabled-hover: var(--color-primary-300);
--surface-primary-disabled-active: var(--color-primary-400);
--border-primary-disabled-hover: var(--color-primary-400);
--border-primary-disabled-active: var(--color-primary-500);
}
[data-theme=Dark] {
--surface-primary-disabled-hover: var(--color-primary-700);
--surface-primary-disabled-active: var(--color-primary-600);
--border-primary-disabled-hover: var(--color-primary-600);
--border-primary-disabled-active: var(--color-primary-500);
}
/* --text-primary-disabled-on-color / --icon-primary-disabled-on-color (NEW)
Foreground (text + icon) placed ON the --surface-primary-disabled fill — i.e.
the out-of-scope page eyebrow. The non-disabled on-color foreground is plain
white (--color-base-white); this muted variant keeps it legible on the pale
(light) / deep (dark) disabled-teal surface. Named with the established
-on-color suffix (cf. --shadow-card-on-color).
Light → color-primary-50
Dark → color-primary-600 */
[data-theme=Light] {
--text-primary-disabled-on-color: var(--color-primary-50);
--icon-primary-disabled-on-color: var(--color-primary-50);
}
[data-theme=Dark] {
--text-primary-disabled-on-color: var(--color-primary-600);
--icon-primary-disabled-on-color: var(--color-primary-600);
}
/* --text/icon-primary-disabled-on-color -hover / -active
Interaction steps for the on-color disabled foreground (the OOS page eyebrow).
Each step brightens the foreground by ONE tone of the primary ramp relative to
its rest value, tracking the surface as it lightens on hover/press — never
jumping straight to white. LIGHT rests at the pale end (50) and steps DOWN the
ramp (50 → 100 → 200); DARK rests mid-ramp (600) and steps UP toward lighter
tones (600 → 500 → 400).
Light : rest 50 ; hover → primary-100 ; active → primary-200
Dark : rest 600 ; hover → primary-500 ; active → primary-400 */
[data-theme=Light] {
--text-primary-disabled-on-color-hover: var(--color-primary-100);
--text-primary-disabled-on-color-active: var(--color-primary-200);
--icon-primary-disabled-on-color-hover: var(--color-primary-100);
--icon-primary-disabled-on-color-active: var(--color-primary-200);
}
[data-theme=Dark] {
--text-primary-disabled-on-color-hover: var(--color-primary-500);
--text-primary-disabled-on-color-active: var(--color-primary-400);
--icon-primary-disabled-on-color-hover: var(--color-primary-500);
--icon-primary-disabled-on-color-active: var(--color-primary-400);
}
/* --border-primary-subtle-active (NEW)
Core Drift's subtle primary border family stops at -hover/-focus with no
-active step (rest 100 → hover 200 → focus 300 in light; 800 → 700 → 600 in
dark). Pressed states (e.g. the action node) need an active step; pinned to
the focus value per theme, matching how our other -active tokens were added. */
[data-theme=Light] {
--border-primary-subtle-active: var(--color-primary-300);
}
[data-theme=Dark] {
--border-primary-subtle-active: var(--color-primary-600);
}
/* --text/icon-primary-disabled -hover / -active (NEW)
Interaction steps for the disabled-primary foreground (OOS action label/icon,
OOS section eyebrow icon). One primary tone per step from the rest value
(light rest is our 200 override; dark rest is core 700), darkening in light /
lightening in dark — same direction as the disabled surface ramp.
Light: 200 → 300 → 400 Dark: 700 → 600 → 500 */
[data-theme=Light] {
--text-primary-disabled-hover: var(--color-primary-300);
--text-primary-disabled-active: var(--color-primary-400);
--icon-primary-disabled-hover: var(--color-primary-300);
--icon-primary-disabled-active: var(--color-primary-400);
}
[data-theme=Dark] {
--text-primary-disabled-hover: var(--color-primary-600);
--text-primary-disabled-active: var(--color-primary-500);
--icon-primary-disabled-hover: var(--color-primary-600);
--icon-primary-disabled-active: var(--color-primary-500);
}
/* --text-neutral-active (NEW)
Core Drift's neutral text family has -hover/-focus but no -active; pressed
states (section nodes) need one. Pinned to the focus value per theme. */
[data-theme=Light] {
--text-neutral-active: var(--color-neutral-800);
}
[data-theme=Dark] {
--text-neutral-active: var(--color-neutral-100);
}
/* --surface-nested-hover / -active (NEW)
Interaction steps for the nested item-box surface, one neutral tone per step
in each family's direction (darken in light, lighten in dark) — same stride
as the raised surface ramp.
Light: 25 → 50 → 100 Dark: 900 → 800 → 700 */
[data-theme=Light] {
--surface-nested-hover: var(--color-neutral-50);
--surface-nested-active: var(--color-neutral-100);
}
[data-theme=Dark] {
--surface-nested-hover: var(--color-neutral-800);
--surface-nested-active: var(--color-neutral-700);
}
/* --surface-inset-default / -hover / -active (NEW)
The RECESSED control fill — continues the elevation ladder downward
(canvas → raised → nested → inset): toggle tracks, and later slider rails /
progress troughs, that sit ON a raised or nested surface and must read as
sunk into it. Strong enough to contrast the nested card it sits on; steps
one neutral tone per state, darkening in light / lightening in dark.
Light: neutral 100 → 200 → 300 Dark: neutral 700 → 600 → 500 */
[data-theme=Light] {
--surface-inset-default: var(--color-neutral-100);
--surface-inset-hover: var(--color-neutral-200);
--surface-inset-active: var(--color-neutral-300);
}
[data-theme=Dark] {
--surface-inset-default: var(--color-neutral-700);
--surface-inset-hover: var(--color-neutral-600);
--surface-inset-active: var(--color-neutral-500);
}
/* --border-nested-hover / -active (NEW)
Companion borders for the nested surface steps. Raw hex (no matching neutral
primitive), continuing the raised border ladder's visual stride from the
nested default (#DDDDDD light / #46595C dark). */
[data-theme=Light] {
--border-nested-hover: #CFCFCF;
--border-nested-active: #C1C1C1;
}
[data-theme=Dark] {
--border-nested-hover: #586D71;
--border-nested-active: #6A8186;
}
/* --text-nested-hover / -active (NEW)
Text steps inside nested item boxes — one neutral tone per step from the
nested default (700 light / 200 dark), same stride as the neutral text ramp.
Light: 700 → 800 → 900 Dark: 200 → 100 → 50 */
[data-theme=Light] {
--text-nested-hover: var(--color-neutral-800);
--text-nested-active: var(--color-neutral-900);
}
[data-theme=Dark] {
--text-nested-hover: var(--color-neutral-100);
--text-nested-active: var(--color-neutral-50);
}
/* --surface-primary-oos / --border-primary-oos / --text-primary-oos /
--icon-primary-oos (NEW)
The OUT-OF-SCOPE treatment of the focal "you-are-here" node — an active page
that has been set out of scope. The in-scope focal is a solid primary-500 fill
with white text; this variant keeps the primary identity but MUTES it, going in
OPPOSITE directions per theme so it always reads as a dimmed teal against its
canvas:
Light: a LIGHTER fill (primary-400) with a light primary-200 text/icon AND
border (incl. the eyebrow's bottom rule) — close enough to the fill
that the label reads disabled.
Dark: a DARKER fill (primary-700) with text/icon one step lighter
(primary-600) — equally close to the fill, equally disabled-looking.
The dashed border in dark steps one tone toward contrast from the fill so the
rim stays visible (primary-600). */
[data-theme=Light] {
--surface-primary-oos: var(--color-primary-400);
--border-primary-oos: var(--color-primary-200);
--text-primary-oos: var(--color-primary-200);
--icon-primary-oos: var(--color-primary-200);
}
[data-theme=Dark] {
--surface-primary-oos: var(--color-primary-700);
--border-primary-oos: var(--color-primary-600);
--text-primary-oos: var(--color-primary-600);
--icon-primary-oos: var(--color-primary-600);
}