themelia-ui 3.0.0 → 3.2.0

package/dist/styles/fields.css

@@ -1,29 +1,31 @@
 /*
- * The shared field surface: height, border, radius, focus, invalid and disabled states for
- * every text control. A control opts in with `data-field-control` and styles only what is
+ * The shared field surface: height, frame, radius, type, focus, invalid and disabled states
+ * for every text control. A control opts in with `data-field-control` and styles only what is
  * its own (a textarea's resize, a select's chevron). Layered as `components` so consumer
  * unlayered CSS wins, as with a module.
+ *
+ * Focus is the shared outline (styles/focus.css), drawn over the frame rather than outside
+ * it, so a field in a row keeps its footprint.
  */
 @layer components {
 	[data-field-control] {
 		width: 100%;
 		min-width: 0;
-		height: var(--control-h);
-		padding-inline: var(--control-px-sm);
-		padding-block: var(--space-xs);
-		border: var(--border-width) solid var(--control-border);
+		height: var(--control-height);
+		padding-inline: var(--padding-sm);
+		padding-block: calc(var(--padding-sm) / 2);
+		border: var(--border-width) solid var(--input);
 		border-radius: var(--radius-sm);
-		background-color: var(--field-bg);
+		background-color: transparent;
 		color: var(--foreground);
+		/* The field's type: Text's `sm` step, set here once for every control. */
 		font: inherit;
-		font-size: var(--text-sm);
-		line-height: var(--text-sm--line-height);
+		font-size: calc(var(--text-sm) * var(--text-scale));
+		line-height: calc(1.25 / 0.875);
 		box-shadow: none;
-		outline: none;
 		transition:
-			color var(--duration-fast) var(--ease-in-out),
-			border-color var(--duration-fast) var(--ease-in-out),
-			box-shadow var(--duration-fast) var(--ease-in-out);
+			color var(--duration-fast) var(--ease),
+			border-color var(--duration-fast) var(--ease);
 	}
 
 	/*
@@ -31,14 +33,14 @@
 	 * each scope so a nested opt-out wins. A fixed 16px: it must not scale with density.
 	 */
 	[data-iphone-input-zoom="true"] {
-		--field-min-font-size: 16px;
+		--_field-min-font-size: 16px;
 	}
 	[data-iphone-input-zoom="false"] {
-		--field-min-font-size: 0px;
+		--_field-min-font-size: 0px;
 	}
 	:is(input, textarea, select)[data-field-control] {
-		font-size: max(var(--text-sm), var(--field-min-font-size, 0px));
-		line-height: max(var(--text-sm--line-height), calc(var(--field-min-font-size, 0px) * 1.25));
+		font-size: max(calc(var(--text-sm) * var(--text-scale)), var(--_field-min-font-size, 0px));
+		line-height: max(calc(1.25 / 0.875), calc(var(--_field-min-font-size, 0px) * 1.25));
 	}
 
 	[data-field-control]::placeholder {
@@ -48,34 +50,29 @@
 	[data-field-control]:hover:not(:disabled):not([data-disabled]):not(:focus-visible):not(
 			[aria-invalid="true"]
 		):not(:is(input, textarea):read-only) {
-		border-color: var(--control-border-hover);
+		border-color: color-mix(in oklab, var(--input), var(--foreground) 35%);
 	}
 
 	/*
-	 * Read-only: full ink and focus ring (the value can still be read and copied), a quiet
-	 * plate, no hover. Scoped to text controls because a <button> trigger matches `:read-only`.
+	 * Read-only: full ink and focus (the value can still be read and copied), a quiet plate,
+	 * no hover. Scoped to text controls because a <button> trigger matches `:read-only`.
 	 */
 	:is(input, textarea)[data-field-control]:read-only:not(:disabled) {
-		background-color: var(--foreground-8);
+		background-color: color-mix(in oklab, var(--foreground) var(--tint), transparent);
 	}
 
 	[data-field-control]:focus-visible {
-		border-color: var(--focus-ring-color);
-		box-shadow: var(--field-focus-ring);
+		border-color: var(--ring);
+		outline-offset: calc(var(--border-width) * -1);
 	}
 
 	/* Keyed on `aria-invalid` so the styling and the announcement cannot disagree. */
 	[data-field-control][aria-invalid="true"] {
-		border-color: var(--invalid-ring-border);
-		box-shadow: var(--invalid-ring);
+		border-color: var(--destructive);
 	}
 
-	/*
-	 * Focus wins the ring; invalid keeps the border. Needed because the invalid rule above
-	 * would otherwise take the box-shadow and hide focus (tests/interaction.spec.ts).
-	 */
 	[data-field-control][aria-invalid="true"]:focus-visible {
-		box-shadow: var(--field-focus-ring);
+		outline-color: var(--destructive);
 	}
 
 	[data-field-control]:disabled {
@@ -85,18 +82,14 @@
 
 	/*
 	 * Chrome repaints autofilled backgrounds; an opaque --card inset (forms sit on cards)
-	 * covers it. Focused, the ring is restated beside the inset, which would replace it.
-	 * `:is()` forgives whichever spelling a browser lacks; a plain list would drop the rule.
+	 * covers it. `:is()` forgives whichever spelling a browser lacks; a plain list would drop
+	 * the rule.
 	 */
 	[data-field-control]:is(:autofill, :-webkit-autofill) {
 		-webkit-text-fill-color: var(--foreground);
 		box-shadow: inset 0 0 0 100px var(--card);
 	}
 
-	[data-field-control]:is(:autofill, :-webkit-autofill):focus-visible {
-		box-shadow: inset 0 0 0 100px var(--card), var(--field-focus-ring);
-	}
-
 	/*
 	 * ── The shell ───────────────────────────────────────────────────────────────
 	 * Wears the field surface for the control inside it, so icons and actions read as part
@@ -107,23 +100,21 @@
 	[data-field-shell] {
 		display: flex;
 		align-items: center;
-		/* Inline affordances — a leading icon, a trailing action, a unit suffix. */
-		gap: var(--space-sm);
-		min-height: var(--control-h);
-		padding-inline: var(--control-px-sm);
-		border: var(--border-width) solid var(--control-border);
+		/* Inline affordances: a leading icon, a trailing action, a unit suffix. */
+		gap: var(--gap-sm);
+		min-height: var(--control-height);
+		padding-inline: var(--padding-sm);
+		border: var(--border-width) solid var(--input);
 		border-radius: var(--radius-sm);
-		background-color: var(--field-bg);
-		box-shadow: none;
-		transition:
-			border-color var(--duration-fast) var(--ease-in-out),
-			box-shadow var(--duration-fast) var(--ease-in-out);
+		background-color: transparent;
+		transition: border-color var(--duration-fast) var(--ease);
 	}
 
 	/* `:has()` on the control, not `:focus-within`: a focused trailing button must not light the field. */
 	[data-field-shell]:has([data-field-control]:focus-visible) {
-		border-color: var(--focus-ring-color);
-		box-shadow: var(--field-focus-ring);
+		border-color: var(--ring);
+		outline: calc(var(--border-width) * 2) solid var(--ring);
+		outline-offset: calc(var(--border-width) * -1);
 	}
 
 	[data-field-shell]:hover:not(:has([data-field-control]:disabled)):not(
@@ -131,25 +122,17 @@
 		):not(:has([data-field-control]:focus-visible)):not(
 			:has([data-field-control][aria-invalid="true"])
 		):not([aria-invalid="true"]):not(:has(:is(input, textarea)[data-field-control]:read-only)) {
-		border-color: var(--control-border-hover);
+		border-color: color-mix(in oklab, var(--input), var(--foreground) 35%);
 	}
 
 	[data-field-shell]:has(:is(input, textarea)[data-field-control]:read-only:not(:disabled)) {
-		background-color: var(--foreground-8);
+		background-color: color-mix(in oklab, var(--foreground) var(--tint), transparent);
 	}
 
 	[data-field-shell]:has([data-field-control][aria-invalid="true"]),
 	[data-field-shell][aria-invalid="true"] {
-		border-color: var(--invalid-ring-border);
-		box-shadow: var(--invalid-ring);
-	}
-
-	/* The same rule for a shell, which wears the ring on its control's behalf. */
-	[data-field-shell]:has([data-field-control][aria-invalid="true"]):has(
-			[data-field-control]:focus-visible
-		),
-	[data-field-shell][aria-invalid="true"]:has([data-field-control]:focus-visible) {
-		box-shadow: var(--field-focus-ring);
+		border-color: var(--destructive);
+		outline-color: var(--destructive);
 	}
 
 	[data-field-shell]:has([data-field-control]:disabled) {
@@ -167,9 +150,8 @@
 		padding-inline: 0;
 	}
 
-	[data-field-shell] [data-field-control]:focus-visible,
-	[data-field-shell] [data-field-control][aria-invalid="true"] {
-		box-shadow: none;
+	[data-field-shell] [data-field-control]:focus-visible {
+		outline: none;
 	}
 
 	/* The shell takes the autofill surface and the bare inner input matches it. */

package/dist/styles/focus.css

@@ -0,0 +1,12 @@
+/*
+ * The focus rule: one outline for every focusable element, drawn by the browser, so it follows
+ * the element's corners, survives forced-colours mode, and never shifts layout. Zero
+ * specificity in `base`, so a component that must draw it inside its box (under a clipping
+ * ancestor) sets a negative `outline-offset` on its own rule.
+ */
+@layer base {
+	:where(:focus-visible) {
+		outline: calc(var(--border-width) * 2) solid var(--ring);
+		outline-offset: calc(var(--border-width) * 2);
+	}
+}

package/dist/styles/forced-colors.css

@@ -1,21 +1,22 @@
 /*
- * Forced colors — restores the focus ring. Components pair `box-shadow: var(--focus-ring)`
- * with `outline: none`, and forced-colors mode drops box-shadow, leaving no focus at all.
- * In `utilities` because it must outrank those `outline: none` rules in `components`.
- * System colours only: the user's palette is the only palette in this mode.
+ * Forced colors — restores the focus outline. A component that shows focus another way (a
+ * menu's highlight fill, a field's frame) removes the outline, and forced-colors mode drops
+ * fills and shadows, leaving no focus at all. In `utilities` because it must outrank those
+ * `outline: none` rules in `components`. System colours only: the user's palette is the only
+ * palette in this mode.
  */
 @layer utilities {
 	@media (forced-colors: active) {
-		/* `:focus-visible`, not `:focus`, so a pointer click draws no ring. */
+		/* `:focus-visible`, not `:focus`, so a pointer click draws no outline. */
 		*:focus-visible {
-			outline: var(--focus-ring-width) solid Highlight;
-			outline-offset: 2px;
+			outline: calc(var(--border-width) * 2) solid Highlight;
+			outline-offset: calc(var(--border-width) * 2);
 		}
 
-		/* A shelled field shows focus on the shell, as the normal ring does. */
+		/* A shelled field shows focus on the shell, as the normal outline does. */
 		[data-field-shell]:has([data-field-control]:focus-visible) {
-			outline: var(--focus-ring-width) solid Highlight;
-			outline-offset: 2px;
+			outline: calc(var(--border-width) * 2) solid Highlight;
+			outline-offset: calc(var(--border-width) * 2);
 		}
 	}
 }

package/dist/styles/index.css

@@ -1,52 +1,45 @@
 /*
- * Themelia UI — stylesheet entry point. Import once at the application root.
+ * Themelia UI — source of the shared stylesheet and complete catalogue.
  *
  * Layer order is the override story; later layers win regardless of specificity:
  *
- *   tokens     primitives (palette) and the raw tunable contract
- *   theming    wiring derived from tokens (never raw values)
- *   base       element reset
+ *   tokens     the theme: raw values, declared once at :root
+ *   base       element reset, and the tone and focus rules components read and outrank
  *   components CSS-Module rules (see vite.config.ts)
  *   utilities  the escape-hatch helpers the kit ships
  *
  * Consumer unlayered CSS outranks every layer. `@import` cannot sit inside `@layer {}`,
  * hence the `layer(...)` form on each import.
  */
-@layer tokens, theming, base, components, utilities;
+@layer tokens, base, components, utilities;
 
 /* The default typefaces. Unlayered: a layer cannot hold @font-face. */
 @import "./fonts.css";
 
-/* ── tokens: the raw contract ─────────────────────────────────────────────────── */
-/* Primitives first: the theme resolves its semantics against these. */
-@import "./tokens/palette.css" layer(tokens);
-@import "./themes/default.css" layer(tokens);
-@import "./tokens/foundation.css" layer(tokens);
-@import "./tokens/primitives.css" layer(tokens);
-@import "./tokens/states.css" layer(tokens);
-@import "./tokens/layout.css" layer(tokens);
-@import "./tokens/components.css" layer(tokens);
+/* ── tokens: the theme, one file per responsibility ───────────────────────────── */
+@import "./theme/colour.css" layer(tokens);
+@import "./theme/shape.css" layer(tokens);
+@import "./theme/spacing.css" layer(tokens);
+@import "./theme/size.css" layer(tokens);
+@import "./theme/typography.css" layer(tokens);
+@import "./theme/elevation.css" layer(tokens);
+@import "./theme/motion.css" layer(tokens);
+@import "./theme/layout.css" layer(tokens);
+@import "./theme/density.css" layer(tokens);
 
-/* ── theming: computed wiring ─────────────────────────────────────────────────── */
-@import "./theming/breakpoints.css";
-@import "./theming/colors.css" layer(theming);
-@import "./theming/sizing.css" layer(theming);
-@import "./theming/typography.css" layer(theming);
-@import "./theming/focus.css" layer(theming);
-@import "./theming/motion.css" layer(theming);
-@import "./theming/layers.css" layer(theming);
-@import "./theming/animation.css" layer(theming);
-
-/* Per-family contracts. A module whose contract is missing here renders unstyled. */
-@import "./theming/overlay.css" layer(theming);
-@import "./theming/layout.css" layer(theming);
-@import "./theming/field.css" layer(theming);
-@import "./theming/feedback.css" layer(theming);
-@import "./theming/text.css" layer(theming);
+/* Media conditions, resolved at build time (vite.shared.ts). */
+@import "./breakpoints.css";
 
 /* ── base: element reset (declares its own @layer base) ───────────────────────── */
 @import "./base.css";
 
+/* Keyframes, named through --keyframes-* so CSS Modules do not rename them. */
+@import "./animation.css";
+
+/* The tone rule and the focus rule, which components read and outrank. */
+@import "./tone.css";
+@import "./focus.css";
+
 /* The shared field surface. */
 @import "./fields.css";
 

package/dist/styles/map.css

@@ -1,21 +1,23 @@
 /*
  * Leaflet's chrome, retuned. Unlayered because leaflet.css is: its unlayered rules would
  * beat anything in `@layer components`. Every rule is qualified by a kit class for
- * specificity, so none needs `!important`. Only what Leaflet paints lives here.
+ * specificity, so none needs `!important`. Only what Leaflet paints lives here, which is also
+ * why the type below is set directly rather than through Text: Text's classes are layered.
  */
 
+/* The page's face, not Leaflet's Helvetica; Leaflet's own size stays for its chrome. */
 .map--component.leaflet-container {
 	background-color: var(--muted);
-	font-family: var(--font-sans);
+	font-family: inherit;
 }
 
 /*
- * The map takes keyboard focus (the arrow keys pan it), so it draws the kit's ring, inset over
- * the tiles. The browser's default ring sits outside, where the frame around a map clips it.
+ * The map takes keyboard focus (the arrow keys pan it), so it draws the shared outline
+ * (styles/focus.css), inset over the tiles: Leaflet's own offset puts it outside, where the
+ * frame around a map clips it.
  */
 .map--component.leaflet-container:focus-visible {
-	outline: var(--focus-ring-width) solid var(--focus-ring-color);
-	outline-offset: calc(-1 * var(--focus-ring-width));
+	outline-offset: calc(var(--border-width) * -2);
 }
 
 /*
@@ -28,18 +30,24 @@
 
 /* ── The panes Leaflet paints itself ──────────────────────────────────────────── */
 
+/* An anchored popup, as the kit draws one: the popover ground, a hairline and the floating shadow. */
 .map--component .leaflet-popup-content-wrapper {
 	border-radius: var(--radius);
 	background-color: var(--popover);
 	color: var(--popover-foreground);
-	box-shadow: var(--popover-shadow);
+	box-shadow: 0 0 0 var(--border-width) var(--border), var(--shadow-lg);
 }
 
+/* Text's `sm` step on an open line box, for whatever the popup holds that Text does not. */
 .map--component .leaflet-popup-content {
-	margin: var(--surface-py) var(--surface-px);
-	font-family: var(--font-sans);
-	font-size: var(--text-sm);
-	line-height: var(--leading-normal);
+	margin: var(--padding);
+	font-size: calc(var(--text-sm) * var(--text-scale));
+	line-height: 1.5;
+}
+
+/* Leaflet spaces popup paragraphs apart; the kit's own reset (and Text) leaves that to the content. */
+.map--component .leaflet-popup-content p {
+	margin: 0;
 }
 
 /* The tip is a rotated square; it matches the wrapper it points from. */
@@ -56,12 +64,17 @@
 	color: var(--foreground);
 }
 
-/* Chrome removed: the component draws its own tooltip and arrow on the side it chooses. */
+/*
+ * Leaflet's tooltip, redrawn as the kit's inverse annotation; MapTooltip adds its arrow on the
+ * side it chooses (Leaflet's single tip cannot) and takes its type from Text's classes.
+ */
 .map--component .leaflet-tooltip {
-	padding: 0;
+	padding: calc(var(--padding-sm) / 2) var(--padding-sm);
 	border: 0;
-	background: none;
-	box-shadow: none;
+	border-radius: var(--radius-sm);
+	background-color: var(--foreground);
+	color: var(--background);
+	box-shadow: var(--shadow);
 }
 
 .map--component .leaflet-tooltip::before {
@@ -72,15 +85,14 @@
 
 .map--component.leaflet-container .leaflet-control-attribution {
 	border-radius: var(--radius-sm) 0 0 0;
-	background-color: var(--background-80);
+	background-color: color-mix(in oklab, var(--background) 80%, transparent);
 	color: var(--muted-foreground);
-	font-family: var(--font-sans);
-	font-size: var(--text-xs);
-	line-height: var(--text-xs--line-height);
+	font-size: calc(var(--text-xs) * var(--text-scale));
+	line-height: calc(1 / 0.75);
 }
 
 .map--component .leaflet-control-attribution a {
-	color: var(--link-color);
+	color: var(--link);
 }
 
 /* ── leaflet-draw's toolbar ───────────────────────────────────────────────────── */
@@ -91,17 +103,17 @@
 	display: none;
 }
 
-/* The on-map instruction tooltip stays, drawn as the kit's inverse Tooltip. */
+/* The on-map instruction tooltip stays, drawn as the kit's inverse annotation. */
 .map--component .leaflet-draw-tooltip {
 	border: var(--border-width) solid var(--foreground);
 	border-radius: var(--radius-sm);
-	padding-block: var(--space-sm);
-	padding-inline: var(--control-px);
+	padding-block: calc(var(--padding-sm) / 2);
+	padding-inline: var(--padding-sm);
 	background-color: var(--foreground);
 	color: var(--background);
-	font-family: var(--font-sans);
-	font-size: var(--text-xs);
-	line-height: var(--text-xs--line-height);
+	font-family: inherit;
+	font-size: calc(var(--text-xs) * var(--text-scale));
+	line-height: calc(1 / 0.75);
 }
 
 /* Physical on purpose: Leaflet positions this arrow in physical terms. */
@@ -111,7 +123,7 @@
 
 /* leaflet-draw's second line: the tooltip's ink, receded. */
 .map--component .leaflet-draw-tooltip-subtext {
-	color: var(--background-70);
+	color: color-mix(in oklab, var(--background) 70%, transparent);
 }
 
 /* ── Marker clusters ──────────────────────────────────────────────────────────── */
@@ -122,12 +134,11 @@
 	align-items: center;
 	justify-content: center;
 	border-radius: var(--radius-pill);
-	background-color: var(--primary-20);
-	color: var(--primary-accent);
-	font-family: var(--font-sans);
-	font-size: var(--text-xs);
-	line-height: var(--text-xs--line-height);
-	font-weight: var(--weight-semibold);
+	background-color: color-mix(in oklab, var(--primary) var(--tint), transparent);
+	color: var(--primary);
+	font-size: calc(var(--text-xs) * var(--text-scale));
+	line-height: calc(1 / 0.75);
+	font-weight: 600;
 }
 
 .map--component .marker-cluster div {
@@ -138,5 +149,5 @@
 	height: 100%;
 	margin: 0;
 	border-radius: var(--radius-pill);
-	background-color: var(--primary-10);
+	background-color: color-mix(in oklab, var(--primary) var(--tint), transparent);
 }

package/dist/styles/mentions.css

@@ -1,8 +1,8 @@
 /*
- * Mention chips — the one global component look. The same chip is rendered by a React
+ * Mention chips: the one global component look. The same chip is rendered by a React
  * component and by serialised HTML in a contenteditable, and the two must match. Keyed on
- * `data-ref-id` because `sanitizeHtml` strips `class`. Layered `components` so consumer
- * unlayered CSS wins.
+ * `data-ref-id` because `sanitizeHtml` strips `class`; toned through `data-ref-tone`, which
+ * the shared tone rule reads. Layered `components` so consumer unlayered CSS wins.
  */
 @layer components {
 	:is(span, a)[data-ref-id] {
@@ -14,24 +14,24 @@
 		border-radius: var(--radius-sm);
 		/* The line's own size: a name in a sentence is a word of it. */
 		font-size: 1em;
-		font-weight: var(--weight-medium);
+		font-weight: 500;
 		line-height: 1.35;
 		white-space: nowrap;
 		vertical-align: baseline;
 		text-decoration: none;
 		/* Untoned: a chip that is a reference and nothing more. */
-		background-color: var(--foreground-8);
+		background-color: color-mix(in oklab, var(--foreground) var(--tint), transparent);
 		color: var(--foreground);
-		box-shadow: inset 0 0 0 var(--border-width) var(--foreground-10);
-		transition: background-color var(--duration-fast) var(--ease-out);
+		box-shadow: inset 0 0 0 var(--border-width) color-mix(in oklab, var(--foreground) var(--tint), transparent);
+		transition: background-color var(--duration-fast) var(--ease);
 		/* A click selects the whole chip; with `contenteditable="false"` this makes it atomic in an editor. */
 		user-select: all;
 		-webkit-user-select: all;
 	}
 
-	/* Only a chip with a destination answers the pointer, as a linked soft Badge: its hue at 20%. */
+	/* Only a chip with a destination answers the pointer. */
 	a[data-ref-id]:hover {
-		background-color: color-mix(in oklab, var(--foreground) 20%, transparent);
+		background-color: color-mix(in oklab, var(--foreground) var(--tint-strong), transparent);
 	}
 
 	/* A chip with no destination is a label, so it does not pretend to be clickable. */
@@ -43,58 +43,20 @@
 		cursor: pointer;
 	}
 
-	/*
-	 * Each hued tone re-points one hue and one ink; the recipe below is Badge soft's
-	 * arithmetic on it: a 10% wash, a 30% edge, a 20% hover. An unknown tone matches none of
-	 * these and keeps the untoned chip.
-	 */
-	:is(span, a)[data-ref-id][data-ref-tone="primary"] {
-		--ref-hue: var(--primary);
-		--ref-ink: var(--primary-accent);
-	}
-
-	:is(span, a)[data-ref-id][data-ref-tone="info"] {
-		--ref-hue: var(--info);
-		--ref-ink: var(--info);
-	}
-
-	:is(span, a)[data-ref-id][data-ref-tone="success"] {
-		--ref-hue: var(--success);
-		--ref-ink: var(--success);
-	}
-
-	/* Warning ink is the accent step, and its edge the warning line step (40%), as on Badge. */
-	:is(span, a)[data-ref-id][data-ref-tone="warning"] {
-		--ref-hue: var(--warning);
-		--ref-ink: var(--warning-accent);
-		--ref-line: 40%;
-	}
-
-	:is(span, a)[data-ref-id][data-ref-tone="destructive"] {
-		--ref-hue: var(--destructive);
-		--ref-ink: var(--destructive-accent);
-	}
-
+	/* A hued tone is Badge soft on the chip: a tint, a strong-tint edge, the tone's ink. */
 	:is(span, a)[data-ref-id]:is([data-ref-tone="primary"], [data-ref-tone="info"], [data-ref-tone="success"], [data-ref-tone="warning"], [data-ref-tone="destructive"]) {
-		background-color: color-mix(in oklab, var(--ref-hue) 10%, transparent);
-		color: var(--ref-ink);
-		box-shadow: inset 0 0 0 var(--border-width) color-mix(in oklab, var(--ref-hue) var(--ref-line, 30%), transparent);
+		background-color: color-mix(in oklab, var(--tone) var(--tint), transparent);
+		color: var(--tone-ink);
+		box-shadow: inset 0 0 0 var(--border-width) color-mix(in oklab, var(--tone) var(--tint-strong), transparent);
 	}
 
 	a[data-ref-id]:is([data-ref-tone="primary"], [data-ref-tone="info"], [data-ref-tone="success"], [data-ref-tone="warning"], [data-ref-tone="destructive"]):hover {
-		background-color: color-mix(in oklab, var(--ref-hue) 20%, transparent);
+		background-color: color-mix(in oklab, var(--tone) var(--tint-strong), transparent);
 	}
 
 	/* Secondary is neutral: the untoned fill with supporting ink. */
 	:is(span, a)[data-ref-id][data-ref-tone="secondary"] {
-		background-color: var(--foreground-8);
 		color: var(--muted-foreground);
-		box-shadow: inset 0 0 0 var(--border-width) var(--foreground-10);
-	}
-
-	/* Badge secondary's hover: its supporting ink at 20%. */
-	a[data-ref-id][data-ref-tone="secondary"]:hover {
-		background-color: color-mix(in oklab, var(--muted-foreground) 20%, transparent);
 	}
 
 	/*

package/dist/styles/overlays.css

@@ -17,11 +17,11 @@ dialog::backdrop {
 	/* Top layer: transitioning `overlay`/`display` with allow-discrete keeps it there to animate out. */
 	opacity: 0;
 
-	/* The surface's exit timing (overlay.module.css). */
+	/* The surface's exit timing (overlay.module.css): quicker than its entrance. */
 	transition:
-		opacity var(--overlay-duration-exit) var(--ease-out),
-		overlay var(--overlay-duration-exit) allow-discrete,
-		display var(--overlay-duration-exit) allow-discrete;
+		opacity var(--duration-fast) var(--ease),
+		overlay var(--duration-fast) allow-discrete,
+		display var(--duration-fast) allow-discrete;
 }
 
 dialog[open]::backdrop {
@@ -29,9 +29,9 @@ dialog[open]::backdrop {
 
 	/* Enters on the surface's own timing so the two read as one gesture. */
 	transition:
-		opacity var(--duration-normal) var(--ease-out),
-		overlay var(--duration-normal) allow-discrete,
-		display var(--duration-normal) allow-discrete;
+		opacity var(--duration) var(--ease),
+		overlay var(--duration) allow-discrete,
+		display var(--duration) allow-discrete;
 }
 
 @starting-style {