@cueplusplus/ui 0.16.0 → 0.18.0

package/dist/overlays/_surface.d.ts

@@ -18,12 +18,64 @@
  * @example
  * <Popover.Popup className={cn(overlaySurfaceClasses, className)} />
  */
-declare const overlaySurfaceClasses = "rounded-(--radius-overlay) border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-surface-2),var(--cue-surface-2)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border-overlay)),var(--cue-paint-stroke-to,var(--cue-border-overlay)))] bg-origin-border [background-clip:padding-box,border-box] shadow-[0_0_0_var(--cue-paint-rim-width)_var(--cue-paint-shade-hairline,transparent),0_calc(2px*var(--cue-paint-shadow-scale))_calc(6px*var(--cue-paint-shadow-scale))_var(--cue-paint-shadow-spread)_var(--cue-paint-shade-near,transparent),0_calc(8px*var(--cue-paint-shadow-scale))_calc(24px*var(--cue-paint-shadow-scale))_var(--cue-paint-shadow-spread)_var(--cue-paint-shade-far,rgba(0,0,0,0.4)),inset_0_1px_0_0_var(--cue-paint-sheen-ink,transparent)]";
+declare const overlaySurfaceClasses = "rounded-overlay border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-style-overlay-ground,var(--cue-surface-2)),var(--cue-style-overlay-ground,var(--cue-surface-2))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-overlay-from,var(--cue-border-overlay)),var(--cue-paint-stroke-overlay-to,var(--cue-border-overlay)))] bg-origin-border [background-clip:padding-box,border-box] shadow-[0_0_0_var(--cue-paint-rim-width)_var(--cue-paint-shade-hairline,transparent),0_calc(2px*var(--cue-paint-shadow-scale))_calc(6px*var(--cue-paint-shadow-scale))_var(--cue-paint-shadow-spread)_var(--cue-paint-shade-near,transparent),0_calc(8px*var(--cue-paint-shadow-scale))_calc(24px*var(--cue-paint-shadow-scale))_var(--cue-paint-shadow-spread)_var(--cue-paint-shade-far,rgba(0,0,0,0.4)),inset_0_1px_0_0_var(--cue-paint-sheen-ink,transparent)]";
 /**
  * The full-viewport dim behind a modal surface. `--cue-scrim` is theme-owned —
  * dusk and hivehub tune their own — so the value is never hard-coded here.
+ *
+ * **The scrim's own filter (spec §3.10, P0.6) lives on a `::before`
+ * pseudo-element, never on `backdrop-filter` of the scrim itself.** Every
+ * element here is public through `backdropClassName` (dialog, sheet, drawer,
+ * alert-dialog and command-palette all feed it into
+ * `cn(scrimClasses, backdropClassName)`), which exists precisely so a consumer
+ * can put their own `backdrop-blur-*` on this element — so the scrim's own
+ * `backdrop-filter` is a slot this recipe must never write to at all, not a
+ * slot to compose into.
+ *
+ * **Why not fill one of Tailwind's own composition slots instead (the
+ * `_paint-glass.ts` technique).** Measured, and it does not survive
+ * `paint-scrim-filter: none`, which is every shipped pack's value but
+ * glaze's (`blur(8px)`, the Porcelain Look's dialog backdrop).
+ * Tailwind's composed `backdrop-filter: var(--tw-backdrop-blur,)
+ * var(--tw-backdrop-brightness,) … var(--tw-backdrop-grayscale,) …` accepts
+ * only `<filter-function>`s in that list; `none` is not one, so a slot filled
+ * with the literal text `none` sitting beside a consumer's `blur(8px)` is an
+ * **invalid** `backdrop-filter` value as a whole — not "no extra blur" but a
+ * parse failure that drops the entire declaration, computing `none` even for
+ * the consumer's own choice. `_paint-glass.ts` never meets this: its slot's
+ * default is a real filter function (`blur(8px)`), never the keyword `none`.
+ *
+ * **The pseudo-element has no such slot to collide over.** Its own
+ * `backdrop-filter: var(--cue-paint-scrim-filter, none)` is the only
+ * declaration for that property on that box, so `none` is simply valid and
+ * inert there, exactly as intended, whatever the scrim element's own
+ * `backdrop-filter` (via `backdropClassName`) computes. `content-['']` gives
+ * it a box; `absolute inset-0` sizes it to the scrim, whose own `fixed`
+ * positioning is a containing block for it; `pointer-events-none` keeps it out
+ * of the scrim's own click handling. The pseudo paints after the scrim's own
+ * `bg-(--cue-scrim)`, so a real filter blurs that tint together with the page
+ * — a flat tint, so the blur of it is the same tint.
+ *
+ * **The scrim never fades by its own opacity, because that would isolate the
+ * pseudo's backdrop.** An ancestor with opacity under 1 is a backdrop root: a
+ * descendant's `backdrop-filter` sees only what is painted inside it. When the
+ * scrim faded in by `opacity`, glaze's blur on the pseudo therefore had
+ * nothing to blur for the whole fade — the page stayed sharp while it dimmed,
+ * snapped to 8px the frame opacity reached 1, and lost the blur on the first
+ * frame of the exit (measured in Chromium; `paint-noop.spec.ts`'s P43 case
+ * reads the pixels halfway through). So the scrim holds opacity 1 and fades
+ * its parts: its background from `transparent`, the pseudo by its *own*
+ * opacity (an element's own opacity does not isolate its own backdrop), and
+ * its own `backdrop-filter` from `none` — the last only so a consumer's
+ * `backdrop-blur-*`, which faded with the scrim's opacity before, still fades
+ * rather than snapping in. That one is written for the starting and ending
+ * frames alone, where a whole-property `none` outranks the consumer's
+ * composed declaration without entering it; at rest the property is theirs.
+ * The pseudo's `transition` and timing are its own classes: Tailwind
+ * registers `--tw-duration` and `--tw-ease` with `inherits: false`, so the
+ * scrim's `duration-150 ease-out` never reach it.
  */
-declare const scrimClasses = "fixed inset-0 z-50 bg-(--cue-scrim) transition-opacity duration-150 ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[ending-style]:opacity-0";
+declare const scrimClasses = "fixed inset-0 z-50 bg-(--cue-scrim) before:absolute before:inset-0 before:content-[''] before:pointer-events-none before:[backdrop-filter:var(--cue-paint-scrim-filter,none)] transition-[background-color,backdrop-filter] duration-150 ease-out before:transition-opacity before:duration-150 before:ease-out motion-reduce:transition-none motion-reduce:before:transition-none data-[starting-style]:bg-transparent data-[ending-style]:bg-transparent data-[starting-style]:[backdrop-filter:none] data-[ending-style]:[backdrop-filter:none] data-[starting-style]:before:opacity-0 data-[ending-style]:before:opacity-0";
 /**
  * What a Base UI `Positioner` needs and nothing more: it is a layout box, not a
  * painted one. The stacking context lives here so the popup itself can stay
@@ -44,26 +96,34 @@ declare const overlayPopupTransitionClasses = "origin-(--transform-origin) trans
  * transition property list to name both.
  */
 declare const overlayModalTransitionClasses = "transition-[opacity,scale] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
-/** Body copy inside an overlay: mono, one rung under the panel's own text. */
-declare const overlayTextClasses = "font-mono text-(length:--cue-text-ui) text-fg";
-/** The heading line of a dialog, an alert dialog or a popover. */
-declare const overlayTitleClasses = "font-mono text-(length:--cue-text-emphasis) font-medium text-fg";
-/** The supporting line under an overlay title. */
-declare const overlayDescriptionClasses = "font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg-muted";
+/**
+ * Body copy inside an overlay: the body voice (mono unless a style set names
+ * another face — `_style-body.ts`), one rung under the panel's own text.
+ */
+declare const overlayTextClasses = "font-[family-name:var(--cue-style-body-face,var(--cue-font-mono))] font-[number:var(--cue-style-body-weight,inherit)] text-(length:--cue-text-ui) text-fg";
+/**
+ * The heading line of a dialog, an alert dialog or a popover: the title voice's
+ * face, weight and ink at the overlay title's own size (`_style-overlay-title.ts`).
+ */
+declare const overlayTitleClasses = "font-[family-name:var(--cue-style-title-face,var(--cue-font-mono))] text-[length:var(--cue-style-overlay-title-size,var(--cue-text-emphasis))] leading-[var(--cue-style-overlay-title-leading,inherit)] font-[number:var(--cue-style-title-weight,500)] [font-variation-settings:var(--cue-style-display-variation,normal)] text-[color:var(--cue-style-heading-ink,var(--cue-fg))]";
+/** The supporting line under an overlay title, in the body voice. */
+declare const overlayDescriptionClasses = "font-[family-name:var(--cue-style-body-face,var(--cue-font-mono))] font-[number:var(--cue-style-body-weight,inherit)] text-[length:var(--cue-style-body-size,var(--cue-text-ui))] leading-[var(--cue-style-body-leading,var(--cue-leading-ui))] text-fg-muted";
 /** The action strip at the foot of a modal surface. */
 declare const overlayFooterClasses = "flex items-center justify-end gap-(--cue-space-3) pt-(--cue-space-2)";
 /**
  * One row of a menu: the short rung of the density control ladder, highlighted
  * with `accent-soft` rather than a solid fill (the luma defect ruling — a solid
- * accent bar on a hovered row is too loud at console density).
+ * accent bar on a hovered row is too loud at console density). The row's ink
+ * and the highlight are the style set's, with those as their defaults
+ * (`_style-menu.ts`).
  */
-declare const menuItemClasses = "flex h-control-sm cursor-default items-center gap-(--cue-space-2) rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none select-none data-[highlighted]:bg-accent-soft data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
-/** The uppercase mono caption over a group of menu rows. */
-declare const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase select-none";
+declare const menuItemClasses = "flex h-control-sm cursor-default items-center gap-(--cue-space-2) rounded-[var(--cue-style-menu-item-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))] px-(--cue-space-3) font-[family-name:var(--cue-style-control-face,var(--cue-font-mono))] text-(length:--cue-text-ui) text-[color:var(--cue-style-quiet-ink,var(--cue-fg-muted))] data-[highlighted]:bg-[color:var(--cue-style-menu-highlight,var(--cue-accent-soft))] outline-none select-none data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-[var(--cue-style-row-disabled-opacity,0.4)]";
+/** The uppercase mono caption over a group of menu rows — by default. */
+declare const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) py-[var(--cue-style-group-label-pad,0px)] font-[family-name:var(--cue-style-label-face,var(--cue-font-mono))] text-[length:var(--cue-style-group-label-size,var(--cue-style-label-size,var(--cue-text-label)))] tracking-[var(--cue-style-label-tracking,var(--cue-tracking-caps))] text-[color:var(--cue-style-group-label-ink,var(--cue-style-label-ink,var(--cue-fg-subtle)))] font-[number:var(--cue-style-label-weight,inherit)] [text-transform:var(--cue-style-label-case,uppercase)] select-none";
 /** The hairline between menu groups. */
-declare const menuSeparatorClasses = "my-(--cue-space-1) h-px bg-border";
+declare const menuSeparatorClasses = "my-(--cue-space-1) mx-[var(--cue-style-menu-separator-inset,0px)] h-px bg-border";
 /** Padding of a menu popup — a single space unit so rows reach the rim. */
-declare const menuPopupClasses = "min-w-[10rem] p-(--cue-space-1)";
+declare const menuPopupClasses = "min-w-[var(--cue-style-menu-min-width,10rem)] p-(--cue-space-1)";
 /** Default gap in px between an anchored popup and its trigger. */
 declare const OVERLAY_SIDE_OFFSET = 4;
 //#endregion

package/dist/overlays/_surface.js

@@ -1,5 +1,18 @@
+import { CONTROL_FACE } from "../system/_style-control-face.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_WEIGHT } from "../system/_style-label-weight.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
 import { ELEVATION_2 } from "../system/_paint-elevation.js";
 import { STROKE_SURFACE_2 } from "../system/_paint-stroke-surface-2.js";
+import { BODY_VOICE } from "../system/_style-body.js";
+import { GROUP_LABEL_INK, GROUP_LABEL_SIZE } from "../system/_style-group-label.js";
+import { GROUP_LABEL_PAD } from "../system/_style-group-label-pad.js";
+import { MENU_ITEM_INK, MENU_ITEM_RADIUS, MENU_MIN_WIDTH, MENU_SEPARATOR_INSET } from "../system/_style-menu.js";
+import { ROW_DISABLED_OPACITY } from "../system/_style-row-disabled.js";
+import { OVERLAY_TITLE_VOICE } from "../system/_style-overlay-title.js";
+import { BODY_LEADING } from "../system/_style-body-leading.js";
+import { BODY_SIZE } from "../system/_style-body-size.js";
 //#region src/overlays/_surface.ts
 /**
 * The conventions every floating surface in this system shares.
@@ -20,12 +33,64 @@ import { STROKE_SURFACE_2 } from "../system/_paint-stroke-surface-2.js";
 * @example
 * <Popover.Popup className={cn(overlaySurfaceClasses, className)} />
 */
-const overlaySurfaceClasses = `rounded-(--radius-overlay) ${STROKE_SURFACE_2} ${ELEVATION_2}`;
+const overlaySurfaceClasses = `rounded-overlay ${STROKE_SURFACE_2} ${ELEVATION_2}`;
 /**
 * The full-viewport dim behind a modal surface. `--cue-scrim` is theme-owned —
 * dusk and hivehub tune their own — so the value is never hard-coded here.
+*
+* **The scrim's own filter (spec §3.10, P0.6) lives on a `::before`
+* pseudo-element, never on `backdrop-filter` of the scrim itself.** Every
+* element here is public through `backdropClassName` (dialog, sheet, drawer,
+* alert-dialog and command-palette all feed it into
+* `cn(scrimClasses, backdropClassName)`), which exists precisely so a consumer
+* can put their own `backdrop-blur-*` on this element — so the scrim's own
+* `backdrop-filter` is a slot this recipe must never write to at all, not a
+* slot to compose into.
+*
+* **Why not fill one of Tailwind's own composition slots instead (the
+* `_paint-glass.ts` technique).** Measured, and it does not survive
+* `paint-scrim-filter: none`, which is every shipped pack's value but
+* glaze's (`blur(8px)`, the Porcelain Look's dialog backdrop).
+* Tailwind's composed `backdrop-filter: var(--tw-backdrop-blur,)
+* var(--tw-backdrop-brightness,) … var(--tw-backdrop-grayscale,) …` accepts
+* only `<filter-function>`s in that list; `none` is not one, so a slot filled
+* with the literal text `none` sitting beside a consumer's `blur(8px)` is an
+* **invalid** `backdrop-filter` value as a whole — not "no extra blur" but a
+* parse failure that drops the entire declaration, computing `none` even for
+* the consumer's own choice. `_paint-glass.ts` never meets this: its slot's
+* default is a real filter function (`blur(8px)`), never the keyword `none`.
+*
+* **The pseudo-element has no such slot to collide over.** Its own
+* `backdrop-filter: var(--cue-paint-scrim-filter, none)` is the only
+* declaration for that property on that box, so `none` is simply valid and
+* inert there, exactly as intended, whatever the scrim element's own
+* `backdrop-filter` (via `backdropClassName`) computes. `content-['']` gives
+* it a box; `absolute inset-0` sizes it to the scrim, whose own `fixed`
+* positioning is a containing block for it; `pointer-events-none` keeps it out
+* of the scrim's own click handling. The pseudo paints after the scrim's own
+* `bg-(--cue-scrim)`, so a real filter blurs that tint together with the page
+* — a flat tint, so the blur of it is the same tint.
+*
+* **The scrim never fades by its own opacity, because that would isolate the
+* pseudo's backdrop.** An ancestor with opacity under 1 is a backdrop root: a
+* descendant's `backdrop-filter` sees only what is painted inside it. When the
+* scrim faded in by `opacity`, glaze's blur on the pseudo therefore had
+* nothing to blur for the whole fade — the page stayed sharp while it dimmed,
+* snapped to 8px the frame opacity reached 1, and lost the blur on the first
+* frame of the exit (measured in Chromium; `paint-noop.spec.ts`'s P43 case
+* reads the pixels halfway through). So the scrim holds opacity 1 and fades
+* its parts: its background from `transparent`, the pseudo by its *own*
+* opacity (an element's own opacity does not isolate its own backdrop), and
+* its own `backdrop-filter` from `none` — the last only so a consumer's
+* `backdrop-blur-*`, which faded with the scrim's opacity before, still fades
+* rather than snapping in. That one is written for the starting and ending
+* frames alone, where a whole-property `none` outranks the consumer's
+* composed declaration without entering it; at rest the property is theirs.
+* The pseudo's `transition` and timing are its own classes: Tailwind
+* registers `--tw-duration` and `--tw-ease` with `inherits: false`, so the
+* scrim's `duration-150 ease-out` never reach it.
 */
-const scrimClasses = "fixed inset-0 z-50 bg-(--cue-scrim) transition-opacity duration-150 ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[ending-style]:opacity-0";
+const scrimClasses = "fixed inset-0 z-50 bg-(--cue-scrim) before:absolute before:inset-0 before:content-[''] before:pointer-events-none before:[backdrop-filter:var(--cue-paint-scrim-filter,none)] transition-[background-color,backdrop-filter] duration-150 ease-out before:transition-opacity before:duration-150 before:ease-out motion-reduce:transition-none motion-reduce:before:transition-none data-[starting-style]:bg-transparent data-[ending-style]:bg-transparent data-[starting-style]:[backdrop-filter:none] data-[ending-style]:[backdrop-filter:none] data-[starting-style]:before:opacity-0 data-[ending-style]:before:opacity-0";
 /**
 * What a Base UI `Positioner` needs and nothing more: it is a layout box, not a
 * painted one. The stacking context lives here so the popup itself can stay
@@ -46,26 +111,34 @@ const overlayPopupTransitionClasses = "origin-(--transform-origin) transition-[o
 * transition property list to name both.
 */
 const overlayModalTransitionClasses = "transition-[opacity,scale] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
-/** Body copy inside an overlay: mono, one rung under the panel's own text. */
-const overlayTextClasses = "font-mono text-(length:--cue-text-ui) text-fg";
-/** The heading line of a dialog, an alert dialog or a popover. */
-const overlayTitleClasses = "font-mono text-(length:--cue-text-emphasis) font-medium text-fg";
-/** The supporting line under an overlay title. */
-const overlayDescriptionClasses = "font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg-muted";
+/**
+* Body copy inside an overlay: the body voice (mono unless a style set names
+* another face — `_style-body.ts`), one rung under the panel's own text.
+*/
+const overlayTextClasses = `${BODY_VOICE} text-(length:--cue-text-ui) text-fg`;
+/**
+* The heading line of a dialog, an alert dialog or a popover: the title voice's
+* face, weight and ink at the overlay title's own size (`_style-overlay-title.ts`).
+*/
+const overlayTitleClasses = OVERLAY_TITLE_VOICE;
+/** The supporting line under an overlay title, in the body voice. */
+const overlayDescriptionClasses = `${BODY_VOICE} ${BODY_SIZE} ${BODY_LEADING} text-fg-muted`;
 /** The action strip at the foot of a modal surface. */
 const overlayFooterClasses = "flex items-center justify-end gap-(--cue-space-3) pt-(--cue-space-2)";
 /**
 * One row of a menu: the short rung of the density control ladder, highlighted
 * with `accent-soft` rather than a solid fill (the luma defect ruling — a solid
-* accent bar on a hovered row is too loud at console density).
+* accent bar on a hovered row is too loud at console density). The row's ink
+* and the highlight are the style set's, with those as their defaults
+* (`_style-menu.ts`).
 */
-const menuItemClasses = "flex h-control-sm cursor-default items-center gap-(--cue-space-2) rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none select-none data-[highlighted]:bg-accent-soft data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
-/** The uppercase mono caption over a group of menu rows. */
-const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase select-none";
+const menuItemClasses = `flex h-control-sm cursor-default items-center gap-(--cue-space-2) ${MENU_ITEM_RADIUS} px-(--cue-space-3) ${CONTROL_FACE} text-(length:--cue-text-ui) ${MENU_ITEM_INK} outline-none select-none data-[highlighted]:text-fg data-[disabled]:pointer-events-none ${ROW_DISABLED_OPACITY}`;
+/** The uppercase mono caption over a group of menu rows — by default. */
+const menuLabelClasses = `flex h-control-sm items-center px-(--cue-space-3) ${GROUP_LABEL_PAD} ${LABEL_FACE} ${GROUP_LABEL_SIZE} ${LABEL_TRACKING} ${GROUP_LABEL_INK} ${LABEL_WEIGHT} ${LABEL_CASE} select-none`;
 /** The hairline between menu groups. */
-const menuSeparatorClasses = "my-(--cue-space-1) h-px bg-border";
+const menuSeparatorClasses = `my-(--cue-space-1) ${MENU_SEPARATOR_INSET} h-px bg-border`;
 /** Padding of a menu popup — a single space unit so rows reach the rim. */
-const menuPopupClasses = "min-w-[10rem] p-(--cue-space-1)";
+const menuPopupClasses = `${MENU_MIN_WIDTH} p-(--cue-space-1)`;
 /** Default gap in px between an anchored popup and its trigger. */
 const OVERLAY_SIDE_OFFSET = 4;
 //#endregion

package/dist/overlays/alert-dialog.js

@@ -9,7 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 //#region src/overlays/alert-dialog.tsx
 /** Same geometry as a dialog; an alert is simply a narrower default. */
-const alertDialogPopupVariants = cva(`${overlaySurfaceClasses} ${overlayModalTransitionClasses} fixed top-1/2 left-1/2 z-50 flex max-h-[85vh] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-(--cue-space-4) overflow-y-auto p-(--cue-space-6) outline-none`, {
+const alertDialogPopupVariants = cva(`${overlaySurfaceClasses} rounded-[calc(var(--cue-style-dialog-radius,var(--cue-radius-overlay))*var(--cue-radius-scale))] ${overlayModalTransitionClasses} fixed top-1/2 left-1/2 z-50 flex max-h-[85vh] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-(--cue-space-4) overflow-y-auto p-(--cue-space-6) outline-none`, {
 	variants: { width: {
 		sm: "max-w-[20rem]",
 		md: "max-w-[26rem]",

package/dist/overlays/command-palette.js

@@ -1,8 +1,17 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
+import { CONTROL_STEP_SIZE_BODY } from "../system/_style-control-step.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
 import { SearchGlyph } from "./_glyphs.js";
 import { useCuePortalProps } from "../system/portal.js";
+import { GROUP_LABEL_INK_SUBTLE, GROUP_LABEL_SIZE_MICRO } from "../system/_style-group-label.js";
+import { MENU_ITEM_INK, MENU_ITEM_RADIUS } from "../system/_style-menu.js";
+import { ROW_DISABLED_OPACITY } from "../system/_style-row-disabled.js";
 import { overlayModalTransitionClasses, overlaySurfaceClasses, scrimClasses } from "./_surface.js";
+import { PALETTE_FOOTER_PAD, PALETTE_RULE } from "../system/_style-palette.js";
 import { useDebouncedValue } from "./_debounce.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -47,8 +56,18 @@ function groupCommands(items) {
 	}
 	return groups;
 }
-/** The row: same rhythm as a menu row, with a reserved gutter for the icon. */
-const commandItemClasses = "flex h-control-md cursor-default items-center gap-(--cue-space-3) rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none select-none data-[highlighted]:bg-accent-soft data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
+/**
+* The palette's corner is a dialog's (round 6, spec §11, P152): coss's command
+* palette is a dialog, rounded at its 16px surface rung. The same class as
+* `dialog.tsx`'s `DIALOG_RADIUS`, kept in this file for that file's reason.
+*/
+const PALETTE_RADIUS = "rounded-[calc(var(--cue-style-dialog-radius,var(--cue-radius-overlay))*var(--cue-radius-scale))]";
+/**
+* The row: same rhythm as a menu row, with a reserved gutter for the icon. Its
+* ink, highlight and corner are a menu row's (round 6, spec §11, P152): coss's
+* command rows draw like its menu rows, in `fg` on 0.6 of the control corner.
+*/
+const commandItemClasses = `flex h-control-md cursor-default items-center gap-(--cue-space-3) ${MENU_ITEM_RADIUS} px-(--cue-space-3) ${CONTROL_FACE} text-(length:--cue-text-ui) ${MENU_ITEM_INK} outline-none select-none data-[highlighted]:text-fg data-[disabled]:pointer-events-none ${ROW_DISABLED_OPACITY}`;
 /**
 * The ⌘K surface: type a few letters, run a command.
 *
@@ -114,7 +133,7 @@ function CommandPalette({ items, onSelect, open: openProp, defaultOpen = false,
 			}), /* @__PURE__ */ jsxs(Dialog.Popup, {
 				"aria-label": label,
 				"data-slot": "command-palette-popup",
-				className: cn(overlaySurfaceClasses, overlayModalTransitionClasses, "fixed top-[14vh] left-1/2 z-50 flex max-h-[72vh] w-[min(35rem,92vw)] -translate-x-1/2 flex-col overflow-hidden outline-none", className),
+				className: cn(overlaySurfaceClasses, PALETTE_RADIUS, overlayModalTransitionClasses, "fixed top-[14vh] left-1/2 z-50 flex max-h-[72vh] w-[min(35rem,92vw)] -translate-x-1/2 flex-col overflow-hidden outline-none", className),
 				children: [/* @__PURE__ */ jsxs(Combobox.Root, {
 					items: groups,
 					filteredItems: filteredGroups,
@@ -132,7 +151,7 @@ function CommandPalette({ items, onSelect, open: openProp, defaultOpen = false,
 					children: [
 						/* @__PURE__ */ jsxs("div", {
 							"data-slot": "command-palette-field",
-							className: "flex h-control-lg shrink-0 items-center gap-(--cue-space-3) border-b border-border bg-sunken px-(--cue-space-4)",
+							className: `flex h-control-lg shrink-0 items-center gap-(--cue-space-3) border-b ${PALETTE_RULE} bg-sunken px-(--cue-space-4)`,
 							children: [/* @__PURE__ */ jsx(SearchGlyph, {
 								"aria-hidden": "true",
 								className: "size-icon-md shrink-0 text-fg-subtle"
@@ -140,22 +159,22 @@ function CommandPalette({ items, onSelect, open: openProp, defaultOpen = false,
 								"aria-label": label,
 								placeholder,
 								"data-slot": "command-palette-input",
-								className: "h-full w-full min-w-0 border-0 bg-transparent p-0 font-mono text-(length:--cue-text-body) text-fg outline-none placeholder:text-fg-subtle"
+								className: cn(`h-full w-full min-w-0 border-0 bg-transparent p-0 ${CONTROL_STEP_SIZE_BODY} text-fg outline-none placeholder:text-fg-subtle`, CONTROL_FACE)
 							})]
 						}),
 						/* @__PURE__ */ jsx(Combobox.Empty, {
 							"data-slot": "command-palette-empty",
-							className: "flex h-control-lg items-center px-(--cue-space-4) font-mono text-(length:--cue-text-ui) text-fg-subtle select-none",
+							className: cn("flex h-control-lg items-center px-(--cue-space-4) text-(length:--cue-text-ui) text-fg-subtle select-none", CONTROL_FACE),
 							children: emptyMessage
 						}),
 						/* @__PURE__ */ jsx(Combobox.List, {
 							"data-slot": "command-palette-list",
-							className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-(--cue-space-1) outline-none",
+							className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-[var(--cue-style-listbox-pad,var(--cue-space-1))] outline-none",
 							children: (group) => /* @__PURE__ */ jsxs(Combobox.Group, {
 								items: group.items,
 								className: "block",
 								children: [group.value === "" ? null : /* @__PURE__ */ jsx(Combobox.GroupLabel, {
-									className: "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) text-fg-subtle uppercase select-none",
+									className: cn(`flex h-control-sm items-center px-(--cue-space-3) ${GROUP_LABEL_SIZE_MICRO} ${GROUP_LABEL_INK_SUBTLE} select-none`, LABEL_FACE, LABEL_TRACKING, LABEL_CASE),
 									children: group.value
 								}), /* @__PURE__ */ jsx(Combobox.Collection, { children: (item) => /* @__PURE__ */ jsxs(Combobox.Item, {
 									value: item,
@@ -182,7 +201,7 @@ function CommandPalette({ items, onSelect, open: openProp, defaultOpen = false,
 					]
 				}), footer === null ? null : /* @__PURE__ */ jsx("div", {
 					"data-slot": "command-palette-footer",
-					className: "flex shrink-0 items-center gap-(--cue-space-4) border-t border-border bg-surface-1 px-(--cue-space-4) py-(--cue-space-2) font-mono text-(length:--cue-text-micro) text-fg-subtle select-none",
+					className: cn(`flex shrink-0 items-center gap-(--cue-space-4) border-t border-border bg-surface-1 px-(--cue-space-4) ${PALETTE_FOOTER_PAD} text-(length:--cue-text-micro) text-fg-subtle select-none`, CONTROL_FACE),
 					children: footer
 				})]
 			})]

package/dist/overlays/dialog.d.ts

@@ -8,6 +8,11 @@ import { Dialog } from "@base-ui/react/dialog";
  * Centring is `top/left 50%` plus a translate rather than a flex-centred
  * wrapper: the popup owns its own position, so nothing else has to cover the
  * viewport and steal pointer events from the scrim.
+ *
+ * Its corner is `DIALOG_RADIUS`, the style set's `--cue-style-dialog-radius`
+ * over the overlay rung, spent after `overlaySurfaceClasses` so the popup's
+ * own `cn` drops the shared `rounded-overlay`: only the dialog reads the name,
+ * and every other overlay keeps the rung.
  */
 declare const dialogPopupVariants: (props?: ({
   width?: "sm" | "md" | "lg" | null | undefined;

package/dist/overlays/dialog.js

@@ -15,8 +15,13 @@ import { Dialog } from "@base-ui/react/dialog";
 * Centring is `top/left 50%` plus a translate rather than a flex-centred
 * wrapper: the popup owns its own position, so nothing else has to cover the
 * viewport and steal pointer events from the scrim.
+*
+* Its corner is `DIALOG_RADIUS`, the style set's `--cue-style-dialog-radius`
+* over the overlay rung, spent after `overlaySurfaceClasses` so the popup's
+* own `cn` drops the shared `rounded-overlay`: only the dialog reads the name,
+* and every other overlay keeps the rung.
 */
-const dialogPopupVariants = cva(`${overlaySurfaceClasses} ${overlayModalTransitionClasses} fixed top-1/2 left-1/2 z-50 flex max-h-[85vh] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-(--cue-space-4) overflow-y-auto p-(--cue-space-6) outline-none`, {
+const dialogPopupVariants = cva(`${overlaySurfaceClasses} rounded-[calc(var(--cue-style-dialog-radius,var(--cue-radius-overlay))*var(--cue-radius-scale))] ${overlayModalTransitionClasses} fixed top-1/2 left-1/2 z-50 flex max-h-[85vh] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-(--cue-space-4) overflow-y-auto p-[calc(var(--cue-space-6)*var(--cue-style-dialog-pad,1))] outline-none`, {
 	variants: { width: {
 		sm: "max-w-[20rem]",
 		md: "max-w-[28rem]",

package/dist/overlays/drawer.js

@@ -27,6 +27,13 @@ const VIEWPORT_ALIGNMENT = {
 * sheet track the finger and then settle, rather than snapping when the gesture
 * ends.
 */
+/**
+* A drawer's corners are a dialog's (round 6, spec §11, P155.radius): coss.com/ui
+* rounds its drawer's open edge at its 16px surface rung, as it rounds a dialog.
+* The same class as `dialog.tsx`'s `DIALOG_RADIUS`, kept in this file for that
+* file's reason; the attached edge's `rounded-*-none` still squares that side.
+*/
+const DRAWER_RADIUS = "rounded-[calc(var(--cue-style-dialog-radius,var(--cue-radius-overlay))*var(--cue-radius-scale))]";
 const POPUP_GEOMETRY = {
 	down: "max-h-[85vh] w-full max-w-[42rem] translate-y-(--drawer-swipe-movement-y) rounded-b-none border-x-0 border-b-0 data-[starting-style]:translate-y-full data-[ending-style]:translate-y-full",
 	up: "max-h-[85vh] w-full max-w-[42rem] translate-y-(--drawer-swipe-movement-y) rounded-t-none border-x-0 border-t-0 data-[starting-style]:-translate-y-full data-[ending-style]:-translate-y-full",
@@ -99,7 +106,7 @@ const Drawer$1 = {
 				children: /* @__PURE__ */ jsxs(Drawer.Popup, {
 					ref,
 					"data-slot": "drawer-popup",
-					className: cn(overlaySurfaceClasses, "flex flex-col overflow-y-auto overscroll-contain outline-none transition-transform duration-200 ease-out data-[swiping]:duration-0 motion-reduce:transition-none", POPUP_GEOMETRY[direction], className),
+					className: cn(overlaySurfaceClasses, DRAWER_RADIUS, "flex flex-col overflow-y-auto overscroll-contain outline-none transition-transform duration-200 ease-out data-[swiping]:duration-0 motion-reduce:transition-none", POPUP_GEOMETRY[direction], className),
 					...popupProps,
 					children: [grabHandle ? /* @__PURE__ */ jsx("div", {
 						"data-slot": "drawer-grab-handle",

package/dist/overlays/hover-card.js

@@ -4,6 +4,8 @@ import { useComposedRefs } from "../lib/compose.js";
 import { useCuePortalProps } from "../system/portal.js";
 import { overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses } from "./_surface.js";
 import { useCloseOnWheel } from "./_wheel.js";
+import { HOVER_CARD_WIDTH } from "../system/_style-hover-card-width.js";
+import { POPOVER_PAD } from "../system/_style-popover-pad.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";
@@ -79,7 +81,7 @@ const HoverCard = {
 				children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
 					ref: composedRef,
 					"data-slot": "hover-card-popup",
-					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, "flex w-[min(20rem,calc(100vw-2rem))] flex-col gap-(--cue-space-2) p-(--cue-space-4) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none", className),
+					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, `flex ${HOVER_CARD_WIDTH} flex-col gap-(--cue-space-2) ${POPOVER_PAD} font-mono text-(length:--cue-text-ui) text-fg-muted outline-none`, className),
 					...popupProps,
 					children
 				})

package/dist/overlays/info-tip.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { Tooltip } from "./tooltip.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -27,7 +28,7 @@ function InfoTip({ text, width = 224, label = "More information", side = "top",
 		delay,
 		"aria-label": label,
 		"data-slot": "info-tip-trigger",
-		className: cn("inline-flex size-[0.8125rem] shrink-0 cursor-help items-center justify-center rounded-full border border-border-strong bg-transparent font-mono text-(length:--cue-text-micro) leading-none font-bold text-fg-muted italic outline-none select-none hover:border-accent hover:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent", className),
+		className: cn(`inline-flex size-[0.8125rem] shrink-0 cursor-help items-center justify-center rounded-full border border-border-strong bg-transparent font-mono text-(length:--cue-text-micro) leading-none font-bold text-fg-muted italic outline-none select-none hover:border-accent hover:text-accent ${FOCUS_RING}`, className),
 		children: "i"
 	}), /* @__PURE__ */ jsx(Tooltip.Content, {
 		side,

package/dist/overlays/menubar.js

@@ -1,5 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET } from "../system/_focus-ring.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
 import { useCuePortalProps } from "../system/portal.js";
 import { menuPopupClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses } from "./_surface.js";
 import { DropdownMenu } from "./dropdown-menu.js";
@@ -66,7 +68,7 @@ const Menubar$1 = {
 		return /* @__PURE__ */ jsx(Menu.Trigger, {
 			ref,
 			"data-slot": "menubar-trigger",
-			className: cn("inline-flex h-control-sm shrink-0 cursor-default items-center rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) whitespace-nowrap text-fg-muted transition-colors duration-150 outline-none select-none hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent data-[popup-open]:bg-accent-soft data-[popup-open]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40", className),
+			className: cn(`inline-flex h-control-sm shrink-0 cursor-default items-center rounded-control px-(--cue-space-3) text-(length:--cue-text-ui) whitespace-nowrap text-fg-muted transition-colors duration-150 outline-none select-none hover:text-fg ${FOCUS_RING_INSET} data-[popup-open]:bg-accent-soft data-[popup-open]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40`, CONTROL_FACE, className),
 			...elementProps
 		});
 	}),

package/dist/overlays/popover.js

@@ -4,6 +4,8 @@ import { useComposedRefs } from "../lib/compose.js";
 import { useCuePortalProps } from "../system/portal.js";
 import { overlayDescriptionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTitleClasses } from "./_surface.js";
 import { useCloseOnWheel } from "./_wheel.js";
+import { POPOVER_PAD } from "../system/_style-popover-pad.js";
+import { POPOVER_WIDTH } from "../system/_style-popover-width.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
@@ -78,7 +80,7 @@ const Popover$1 = {
 				children: /* @__PURE__ */ jsx(Popover.Popup, {
 					ref: composedRef,
 					"data-slot": "popover-popup",
-					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, "flex max-w-[calc(100vw-2rem)] flex-col gap-(--cue-space-3) p-(--cue-space-4) outline-none", className),
+					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, `flex ${POPOVER_WIDTH} max-w-[calc(100vw-2rem)] flex-col gap-(--cue-space-3) ${POPOVER_PAD} outline-none`, className),
 					...popupProps,
 					children
 				})

package/dist/overlays/toast.js

@@ -1,8 +1,16 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING_TIGHT } from "../system/_style-label-tracking.js";
 import { CrossGlyph } from "./_glyphs.js";
 import { useCuePortalProps } from "../system/portal.js";
+import { BODY_FACE, BODY_VOICE } from "../system/_style-body.js";
+import { BODY_LEADING } from "../system/_style-body-leading.js";
+import { BODY_SIZE, BODY_SIZE_LABEL } from "../system/_style-body-size.js";
 import { overlaySurfaceClasses } from "./_surface.js";
+import { TOAST_PAD_X, TOAST_PAD_Y, TOAST_WIDTH } from "../system/_style-toast.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toast } from "@base-ui/react/toast";
@@ -75,24 +83,24 @@ function ToastItem({ toast, className, closeLabel }) {
 	return /* @__PURE__ */ jsxs(Toast.Root, {
 		toast,
 		"data-slot": "toast-root",
-		className: cn(overlaySurfaceClasses, "relative flex flex-col gap-(--cue-space-1) border-l-2 py-(--cue-space-3) pr-(--cue-space-6) pl-(--cue-space-4) outline-none", "transition-[opacity,translate] duration-150 ease-out motion-reduce:transition-none", "data-[starting-style]:translate-x-2 data-[starting-style]:opacity-0", "data-[ending-style]:translate-x-2 data-[ending-style]:opacity-0", "data-[limited]:hidden", TOAST_TONE_RAIL[toToastTone(toast.type)], className),
+		className: cn(overlaySurfaceClasses, `relative flex flex-col gap-(--cue-space-1) border-l-2 ${TOAST_PAD_Y} pr-(--cue-space-6) ${TOAST_PAD_X} outline-none`, "transition-[opacity,translate] duration-150 ease-out motion-reduce:transition-none", "data-[starting-style]:translate-x-2 data-[starting-style]:opacity-0", "data-[ending-style]:translate-x-2 data-[ending-style]:opacity-0", "data-[limited]:hidden", TOAST_TONE_RAIL[toToastTone(toast.type)], className),
 		children: [
 			/* @__PURE__ */ jsx(Toast.Title, {
 				"data-slot": "toast-title",
-				className: "font-mono text-(length:--cue-text-ui) font-medium text-fg"
+				className: `${BODY_FACE} ${BODY_SIZE} font-medium text-fg`
 			}),
 			/* @__PURE__ */ jsx(Toast.Description, {
 				"data-slot": "toast-description",
-				className: "font-mono text-(length:--cue-text-label) leading-(--cue-leading-ui) text-fg-muted"
+				className: `${BODY_VOICE} ${BODY_SIZE_LABEL} ${BODY_LEADING} text-fg-muted`
 			}),
 			/* @__PURE__ */ jsx(Toast.Action, {
 				"data-slot": "toast-action",
-				className: "mt-(--cue-space-1) inline-flex h-control-sm w-fit cursor-pointer items-center justify-center rounded-(--radius-control) border border-border px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps-tight) text-fg-muted uppercase transition-colors outline-none hover:border-border-strong hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent"
+				className: cn(`mt-(--cue-space-1) inline-flex h-control-sm w-fit cursor-pointer items-center justify-center rounded-control border border-border px-(--cue-space-3) text-(length:--cue-text-label) text-fg-muted transition-colors outline-none hover:border-border-strong hover:text-fg ${FOCUS_RING}`, LABEL_FACE, LABEL_TRACKING_TIGHT, LABEL_CASE)
 			}),
 			/* @__PURE__ */ jsx(Toast.Close, {
 				"aria-label": closeLabel,
 				"data-slot": "toast-close",
-				className: "absolute top-(--cue-space-2) right-(--cue-space-2) flex size-icon-md cursor-pointer items-center justify-center rounded-(--radius-control) text-fg-subtle outline-none transition-colors hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent",
+				className: `absolute top-(--cue-space-2) right-(--cue-space-2) flex size-icon-md cursor-pointer items-center justify-center rounded-control text-fg-subtle outline-none transition-colors hover:text-fg ${FOCUS_RING}`,
 				children: /* @__PURE__ */ jsx(CrossGlyph, { className: "size-icon-sm" })
 			})
 		]
@@ -115,7 +123,7 @@ function ToastViewport({ className, toastClassName, closeLabel = "Dismiss" }) {
 		...portalProps,
 		children: /* @__PURE__ */ jsx(Toast.Viewport, {
 			"data-slot": "toast-viewport",
-			className: cn("fixed right-(--cue-space-6) bottom-(--cue-space-6) z-50 flex w-[20rem] max-w-[calc(100vw-2rem)] flex-col-reverse gap-(--cue-space-3) outline-none", className),
+			className: cn(`fixed right-(--cue-space-6) bottom-(--cue-space-6) z-50 flex ${TOAST_WIDTH} max-w-[calc(100vw-2rem)] flex-col-reverse gap-(--cue-space-3) outline-none`, className),
 			children: toasts.map((toast) => /* @__PURE__ */ jsx(ToastItem, {
 				toast,
 				className: toastClassName,

package/dist/overlays/tooltip.js

@@ -1,7 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { BODY_WEIGHT } from "../system/_style-body-weight.js";
 import { useCuePortalProps } from "../system/portal.js";
 import { overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses } from "./_surface.js";
+import { TOOLTIP_FACE, TOOLTIP_INK, TOOLTIP_LEADING, TOOLTIP_PAD, TOOLTIP_RADIUS, TOOLTIP_SIZE, TOOLTIP_TRACKING } from "../system/_style-tooltip.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react/tooltip";
@@ -83,7 +85,7 @@ const Tooltip$1 = {
 					id,
 					role: "tooltip",
 					"data-slot": "tooltip-popup",
-					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, "max-w-[16rem] px-(--cue-space-3) py-(--cue-space-2) font-mono text-(length:--cue-text-label) leading-(--cue-leading-ui) text-fg", className),
+					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, `max-w-[16rem] ${TOOLTIP_RADIUS} ${TOOLTIP_PAD} ${TOOLTIP_SIZE} ${TOOLTIP_LEADING} ${BODY_WEIGHT} ${TOOLTIP_TRACKING} ${TOOLTIP_INK}`, TOOLTIP_FACE, className),
 					...popupProps,
 					children
 				})

package/dist/primitives/avatar.js

@@ -1,14 +1,18 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { cva } from "../lib/cva.js";
+import { CAPTION_SIZE_LABEL } from "../system/_style-caption-size.js";
+import { CAPTION_INK_MUTED } from "../system/_style-caption-ink.js";
+import { CAPTION_WEIGHT } from "../system/_style-caption-weight.js";
+import { AVATAR_EDGE, AVATAR_RADIUS } from "../system/_style-avatar.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar } from "@base-ui/react/avatar";
 //#region src/primitives/avatar.tsx
-const avatarVariants = cva("relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full border border-border bg-surface-2 font-mono leading-none tracking-normal text-fg-muted uppercase", {
+const avatarVariants = cva(`relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden ${AVATAR_RADIUS} border ${AVATAR_EDGE} bg-surface-2 font-mono leading-none tracking-normal ${CAPTION_INK_MUTED} ${CAPTION_WEIGHT} uppercase`, {
 	variants: { size: {
 		sm: "size-control-sm text-(length:--cue-text-micro)",
-		md: "size-control-md text-(length:--cue-text-label)",
+		md: `size-control-md ${CAPTION_SIZE_LABEL}`,
 		lg: "size-control-lg text-(length:--cue-text-ui)"
 	} },
 	defaultVariants: { size: "md" }