@usefragments/ui 1.6.0 → 2.0.0

package/src/recipes/_overlay.scss

@@ -1,3 +1,4 @@
+@use "../tokens/measurements.generated" as measurements;
 @use "../tokens/variables" as tokens;
 @use "action" as action;
 @use "feedback" as feedback;
@@ -5,19 +6,19 @@
 @use "target" as target;
 @use "typography" as typography;
 
-@function _raw($step, $fallback) {
-  @return var(--fui-raw-space-#{$step}, $fallback);
+@function _raw($step) {
+  @return var(--fui-raw-space-#{$step}, #{measurements.raw-space($step)});
 }
 
 @function dialog-max($size) {
   @if $size == "sm" {
-    @return var(--fui-overlay-dialog-max-inline-sm, 384px);
+    @return var(--fui-overlay-dialog-sm, #{measurements.target-value("overlay", "dialog-sm")});
   } @else if $size == "md" {
-    @return var(--fui-overlay-dialog-max-inline-md, 448px);
+    @return var(--fui-overlay-dialog-md, #{measurements.target-value("overlay", "dialog-md")});
   } @else if $size == "lg" {
-    @return var(--fui-overlay-dialog-max-inline-lg, 576px);
+    @return var(--fui-overlay-dialog-lg, #{measurements.target-value("overlay", "dialog-lg")});
   } @else if $size == "xl" {
-    @return var(--fui-overlay-dialog-max-inline-xl, 768px);
+    @return var(--fui-overlay-dialog-xl, #{measurements.target-value("overlay", "dialog-xl")});
   }
 
   @error "Unknown dialog overlay size '#{$size}'. Expected sm, md, lg, or xl.";
@@ -25,13 +26,13 @@
 
 @function drawer-inline($size) {
   @if $size == "sm" {
-    @return var(--fui-overlay-drawer-inline-sm, 320px);
+    @return var(--fui-overlay-drawer-sm, #{measurements.target-value("overlay", "drawer-sm")});
   } @else if $size == "md" {
-    @return var(--fui-overlay-drawer-inline-md, 384px);
+    @return var(--fui-overlay-drawer-md, #{measurements.target-value("overlay", "drawer-md")});
   } @else if $size == "lg" {
-    @return var(--fui-overlay-drawer-inline-lg, 512px);
+    @return var(--fui-overlay-drawer-lg, #{measurements.target-value("overlay", "drawer-lg")});
   } @else if $size == "xl" {
-    @return var(--fui-overlay-drawer-inline-xl, 768px);
+    @return var(--fui-overlay-drawer-xl, #{measurements.target-value("overlay", "drawer-xl")});
   }
 
   @error "Unknown side-drawer size '#{$size}'. Expected sm, md, lg, or xl.";
@@ -51,22 +52,43 @@
   @error "Unknown block-drawer size '#{$size}'. Expected sm, md, lg, or xl.";
 }
 
+/// The translate distance that parks a side panel fully off-screen.
+/// A side panel is inset from the viewport edge by the safe-area frame, so
+/// translating it by its own width alone stops with that inset still on
+/// screen — a sliver of elevated surface, edge and shadow painted at the
+/// border for the whole entrance. The offset has to clear the frame too.
+/// Returned as a distance, not a `transform`, so callers can compose it
+/// (Drawer adds its swipe offset on the same axis).
+@function side-panel-offscreen($side) {
+  @if $side == "start" {
+    @return calc(-100% - var(--_fui-overlay-safe-left, #{_raw(16)}));
+  } @else if $side == "end" {
+    @return calc(100% + var(--_fui-overlay-safe-right, #{_raw(16)}));
+  } @else if $side == "top" {
+    @return calc(-100% - var(--_fui-overlay-safe-top, #{_raw(16)}));
+  } @else if $side == "bottom" {
+    @return calc(100% + var(--_fui-overlay-safe-bottom, #{_raw(16)}));
+  }
+
+  @error "Unknown side panel side '#{$side}'. Expected start, end, top, or bottom.";
+}
+
 @mixin safe-viewport {
   --_fui-overlay-safe-top: var(
     --fui-feedback-viewport-inset-top,
-    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-top))
+    max(var(--fui-raw-space-16, #{measurements.raw-space(16)}), env(safe-area-inset-top))
   );
   --_fui-overlay-safe-bottom: var(
     --fui-feedback-viewport-inset-bottom,
-    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-bottom))
+    max(var(--fui-raw-space-16, #{measurements.raw-space(16)}), env(safe-area-inset-bottom))
   );
   --_fui-overlay-safe-left: var(
     --fui-feedback-viewport-inset-left,
-    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-left))
+    max(var(--fui-raw-space-16, #{measurements.raw-space(16)}), env(safe-area-inset-left))
   );
   --_fui-overlay-safe-right: var(
     --fui-feedback-viewport-inset-right,
-    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-right))
+    max(var(--fui-raw-space-16, #{measurements.raw-space(16)}), env(safe-area-inset-right))
   );
   --_fui-overlay-safe-inline: calc(
     100dvw - var(--_fui-overlay-safe-left) - var(--_fui-overlay-safe-right)
@@ -76,24 +98,73 @@
   );
 }
 
-@mixin modal-shell {
+/// Scrim behind any modal surface. Open/close transitions stay with the caller.
+@mixin backdrop {
+  position: fixed;
+  z-index: var(--fui-overlay-layer-backdrop, #{tokens.$fui-overlay-layer-backdrop});
+  inset: 0;
+  background-color: var(--fui-backdrop, #{tokens.$fui-backdrop});
+}
+
+/// The Drawer geometry for an edge-anchored modal panel: fixed on the modal
+/// layer, inset by the safe-area frame, one drawer width. Callers must also
+/// include `safe-viewport` somewhere on or above the panel. $side: start | end.
+@mixin side-panel-geometry($side) {
+  position: fixed;
+  z-index: var(--fui-overlay-layer-modal, #{tokens.$fui-overlay-layer-modal});
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  inset-block: var(--_fui-overlay-safe-top, #{_raw(16)})
+    var(--_fui-overlay-safe-bottom, #{_raw(16)});
+  inline-size: min(
+    #{drawer-inline("sm")},
+    var(--_fui-overlay-safe-inline, calc(100dvw - #{_raw(32)}))
+  );
+
+  @if $side == "start" {
+    inset-inline-start: var(--_fui-overlay-safe-left, #{_raw(16)});
+  } @else if $side == "end" {
+    inset-inline-end: var(--_fui-overlay-safe-right, #{_raw(16)});
+  } @else {
+    @error "Unknown side panel side '#{$side}'. Expected start or end.";
+  }
+}
+
+/// A complete side panel for hosts that are not the Drawer component
+/// (mobile navigation): the floating surface on the Drawer geometry.
+@mixin side-panel($side) {
+  @include surface;
+  @include safe-viewport;
   @include typography.role("body-compact");
+  @include side-panel-geometry($side);
+}
 
+/// Every floating panel (modal, drawer, popover, popup list, toast) is the
+/// same object: elevated fill, hairline edge, the outer radius level, one shadow.
+@mixin surface {
   box-sizing: border-box;
-  max-block-size: var(--_fui-overlay-safe-block, calc(100dvh - #{_raw(32, 32px)}));
-  overflow: auto;
   color: var(--fui-text-primary, #{tokens.$fui-text-primary});
   background-color: var(--fui-bg-elevated, #{tokens.$fui-bg-elevated});
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, #{tokens.$fui-border});
-  border-radius: var(--fui-radius-lg, #{tokens.$fui-radius-lg});
+  border: var(--fui-stroke-hairline, #{tokens.$fui-stroke-hairline}) solid
+    var(--fui-border, #{tokens.$fui-border});
+  border-radius: var(--fui-radius-l1, #{tokens.$fui-radius-l1});
   box-shadow: var(--fui-shadow-md, #{tokens.$fui-shadow-md});
 }
 
+@mixin modal-shell {
+  @include surface;
+  @include typography.role("body-compact");
+
+  max-block-size: var(--_fui-overlay-safe-block, calc(100dvh - #{_raw(32)}));
+  overflow: auto;
+}
+
 @mixin _section-inline-inset {
-  padding-inline: var(--fui-overlay-inline-inset, #{surface.inset("roomy")});
+  padding-inline: #{surface.inset("roomy")};
 
   @media (max-width: 479px) {
-    padding-inline: var(--fui-overlay-inline-inset-narrow, #{surface.inset("default")});
+    padding-inline: #{surface.inset("default")};
   }
 }
 
@@ -101,15 +172,15 @@
   @include _section-inline-inset;
 
   display: grid;
-  gap: var(--fui-overlay-section-gap, #{_raw(8, 8px)});
-  padding-block: var(--fui-overlay-header-block-inset, #{_raw(12, 12px)});
+  gap: var(--fui-overlay-section-gap, #{_raw(8)});
+  padding-block: #{_raw(12)};
 }
 
 @mixin body {
   @include _section-inline-inset;
   @include typography.role("body-compact");
 
-  padding-block: 0 var(--fui-overlay-body-block-end-inset, #{_raw(12, 12px)});
+  padding-block: 0 #{_raw(12)};
 }
 
 @mixin footer {
@@ -118,8 +189,11 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: var(--fui-overlay-section-gap, #{_raw(8, 8px)});
-  padding-block: var(--fui-overlay-footer-block-inset, #{_raw(8, 8px)});
+  gap: var(--fui-overlay-section-gap, #{_raw(8)});
+  padding-block: #{_raw(8)};
+  border-top: var(--fui-stroke-hairline, #{tokens.$fui-stroke-hairline}) solid
+    var(--fui-border, #{tokens.$fui-border});
+  background-color: var(--fui-bg-secondary, #{tokens.$fui-bg-secondary});
 }
 
 @mixin modal-title {
@@ -140,52 +214,78 @@
   @include target.hit-area("compact");
 
   position: absolute;
-  inset-block-start: var(--fui-overlay-close-inset, #{_raw(12, 12px)});
-  inset-inline-end: var(--fui-overlay-close-inset, #{_raw(12, 12px)});
+  inset-block-start: var(--fui-overlay-close-inset, #{_raw(12)});
+  inset-inline-end: var(--fui-overlay-close-inset, #{_raw(12)});
+  border-radius: var(--fui-radius-l2, #{tokens.$fui-radius-l2});
+  color: var(--fui-text-secondary, #{tokens.$fui-text-secondary});
+
+  &:hover {
+    background-color: var(--fui-bg-hover, #{tokens.$fui-bg-hover});
+    color: var(--fui-text-primary, #{tokens.$fui-text-primary});
+  }
+
+  svg {
+    @include action.glyph("sm");
+  }
 }
 
 @mixin anchored-size($size) {
   @if $size == "sm" {
     @include surface.apply-inset("compact");
 
-    max-inline-size: var(--fui-overlay-popover-max-inline-sm, 256px);
+    max-inline-size: var(
+      --fui-overlay-popover-sm,
+      #{measurements.target-value("overlay", "popover-sm")}
+    );
   } @else if $size == "md" {
     @include surface.apply-inset("compact");
 
-    max-inline-size: var(--fui-overlay-popover-max-inline-md, 384px);
+    max-inline-size: var(
+      --fui-overlay-popover-md,
+      #{measurements.target-value("overlay", "popover-md")}
+    );
   } @else if $size == "lg" {
     @include surface.apply-inset("default");
 
-    max-inline-size: var(--fui-overlay-popover-max-inline-lg, 512px);
+    max-inline-size: var(
+      --fui-overlay-popover-lg,
+      #{measurements.target-value("overlay", "popover-lg")}
+    );
   } @else {
     @error "Unknown anchored overlay size '#{$size}'. Expected sm, md, or lg.";
   }
 }
 
 @mixin anchored-surface($size) {
+  @include surface;
   @include typography.role("body-compact");
   @include anchored-size($size);
 
-  box-sizing: border-box;
-  min-inline-size: var(--fui-overlay-popover-min-inline, 192px);
-  color: var(--fui-text-primary, #{tokens.$fui-text-primary});
-  background-color: var(--fui-bg-elevated, #{tokens.$fui-bg-elevated});
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, #{tokens.$fui-border});
-  border-radius: var(--fui-radius-lg, #{tokens.$fui-radius-lg});
-  box-shadow: var(--fui-shadow-md, #{tokens.$fui-shadow-md});
+  min-inline-size: var(
+    --fui-overlay-popover-min,
+    #{measurements.target-value("overlay", "popover-min")}
+  );
 }
 
 @mixin arrow-box {
-  inline-size: var(--fui-overlay-arrow-size, #{_raw(10, 10px)});
-  block-size: var(--fui-overlay-arrow-size, #{_raw(10, 10px)});
+  inline-size: var(--fui-overlay-arrow-size, #{_raw(10)});
+  block-size: var(--fui-overlay-arrow-size, #{_raw(10)});
   transform: rotate(45deg);
 }
 
+/// The one inverse floating surface: compact, no edge, nested radius level.
 @mixin tooltip {
   @include typography.role("ui-compact");
 
   box-sizing: border-box;
-  max-inline-size: var(--fui-overlay-tooltip-max-inline, 320px);
-  padding-block: _raw(4, 4px);
-  padding-inline: _raw(8, 8px);
+  max-inline-size: var(
+    --fui-overlay-tooltip-max,
+    #{measurements.target-value("overlay", "tooltip-max")}
+  );
+  padding-block: _raw(4);
+  padding-inline: _raw(8);
+  color: var(--fui-text-inverse, #{tokens.$fui-text-inverse});
+  background-color: var(--fui-bg-inverse, #{tokens.$fui-bg-inverse});
+  border-radius: var(--fui-radius-l2, #{tokens.$fui-radius-l2});
+  box-shadow: var(--fui-shadow-md, #{tokens.$fui-shadow-md});
 }

package/src/recipes/_popup.scss

@@ -1,49 +1,60 @@
 @use "../tokens/measurements.generated" as measurements;
 @use "../tokens/variables" as tokens;
+@use "../tokens/mixins" as mixins;
+@use "overlay";
 @use "typography";
 
+$_container-inset: measurements.raw-space(4);
+$_row-pitch: measurements.raw-space(32);
+$_row-inset: measurements.raw-space(8);
+$_separator-size: measurements.target-value("stroke", "hairline");
+$_separator-gap: measurements.raw-space(4);
+/// Rows visible before the viewport scrolls (the half row signals overflow).
+$_viewport-rows: 4.5;
+
 @mixin properties {
-  --fui-popup-container-inset: var(--fui-raw-space-4, #{measurements.raw-space(4)});
-  --fui-popup-row-pitch: var(--fui-raw-space-32, #{measurements.raw-space(32)});
-  --fui-popup-row-block-inset: var(--fui-raw-space-8, #{measurements.raw-space(8)});
-  --fui-popup-row-inline-inset: var(--fui-raw-space-8, #{measurements.raw-space(8)});
-  --fui-popup-row-content-gap: var(--fui-raw-space-8, #{measurements.raw-space(8)});
-  --fui-popup-row-gap: var(--fui-stroke-hairline, #{measurements.target-value("stroke", "hairline")});
+  --fui-popup-container-inset: var(--fui-raw-space-4, #{$_container-inset});
+  --fui-popup-row-pitch: var(--fui-raw-space-32, #{$_row-pitch});
+  --fui-popup-row-block-inset: var(--fui-raw-space-8, #{$_row-inset});
+  --fui-popup-row-inline-inset: var(--fui-raw-space-8, #{$_row-inset});
+  --fui-popup-row-content-gap: var(--fui-raw-space-8, #{$_row-inset});
   --fui-popup-indicator-box: var(--fui-raw-space-16, #{measurements.raw-space(16)});
-  --fui-popup-separator-size: var(
-    --fui-stroke-hairline,
-    #{measurements.target-value("stroke", "hairline")}
-  );
-  --fui-popup-separator-gap: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+  --fui-popup-separator-size: var(--fui-stroke-hairline, #{$_separator-size});
+  --fui-popup-separator-gap: var(--fui-raw-space-4, #{$_separator-gap});
   --fui-popup-offset: var(--fui-raw-space-4, #{measurements.raw-space(4)});
-  --fui-popup-viewport-rows: 4.5;
-  --_fui-popup-effective-row-pitch: var(--fui-popup-row-pitch);
+  --fui-popup-viewport-rows: #{$_viewport-rows};
+  --_fui-popup-effective-row-pitch: var(--fui-popup-row-pitch, #{$_row-pitch});
 
   @media (pointer: coarse) {
     --_fui-popup-effective-row-pitch: var(--fui-raw-space-48, #{measurements.raw-space(48)});
   }
 }
 
-@mixin container {
+/// A pick list drawn in the page flow: the popup box without elevation.
+@mixin inline-container {
   @include properties;
+  @include overlay.surface;
+
+  padding: var(--fui-popup-container-inset, #{$_container-inset});
+  box-shadow: none;
+}
+
+/// The floating pick list (Menu, Select, Combobox, Command, DatePicker).
+@mixin container {
+  @include inline-container;
 
-  box-sizing: border-box;
-  padding: var(--fui-popup-container-inset);
-  border: var(--fui-stroke-hairline, #{measurements.target-value("stroke", "hairline")}) solid
-    var(--fui-border, #{tokens.$fui-border});
-  border-radius: var(--fui-radius-md, #{tokens.$fui-radius-md});
-  background: var(--fui-bg-elevated, #{tokens.$fui-bg-elevated});
-  color: var(--fui-text-primary, #{tokens.$fui-text-primary});
   box-shadow: var(--fui-shadow-md, #{tokens.$fui-shadow-md});
 }
 
 @mixin viewport {
   box-sizing: border-box;
   max-block-size: calc(
-    2 * var(--fui-popup-container-inset) + 2 *
+    2 * var(--fui-popup-container-inset, #{$_container-inset}) + 2 *
       var(--fui-stroke-hairline, #{measurements.target-value("stroke", "hairline")}) +
-      var(--fui-popup-viewport-rows) * var(--_fui-popup-effective-row-pitch) +
-      (var(--fui-popup-viewport-rows) - 0.5) * var(--fui-popup-row-gap)
+      var(--fui-popup-viewport-rows, #{$_viewport-rows}) *
+      var(--_fui-popup-effective-row-pitch, #{$_row-pitch}) +
+      (var(--fui-popup-viewport-rows, #{$_viewport-rows}) - 0.5) *
+      var(--fui-popup-row-gap, #{tokens.$fui-popup-row-gap})
   );
   overflow-y: auto;
 }
@@ -52,12 +63,17 @@
   @include typography.role("ui-compact");
 
   box-sizing: border-box;
+  // Rows are pick targets: rapid pointer travel must never start a text
+  // selection, and touch taps get no highlight flash.
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
   display: flex;
   align-items: center;
-  min-block-size: var(--_fui-popup-effective-row-pitch);
-  padding-block: var(--fui-popup-row-block-inset);
-  padding-inline: var(--fui-popup-row-inline-inset);
-  gap: var(--fui-popup-row-content-gap);
+  min-block-size: var(--_fui-popup-effective-row-pitch, #{$_row-pitch});
+  padding-block: var(--fui-popup-row-block-inset, #{$_row-inset});
+  padding-inline: var(--fui-popup-row-inline-inset, #{$_row-inset});
+  gap: var(--fui-popup-row-content-gap, #{$_row-inset});
+  border-radius: var(--fui-radius-l2, #{tokens.$fui-radius-l2});
 }
 
 @mixin highlight-state {
@@ -65,12 +81,16 @@
 }
 
 @mixin selected-state {
-  background: var(--fui-bg-active, #{tokens.$fui-bg-active});
+  background: var(
+    --fui-field-selection-bg,
+    var(--fui-control-selected-bg, #{tokens.$fui-bg-active})
+  );
   color: var(--fui-text-primary, #{tokens.$fui-text-primary});
 }
 
 @mixin disabled-state {
-  opacity: 0.5;
+  @include mixins.disabled-state;
+
   pointer-events: none;
 }
 
@@ -80,13 +100,13 @@
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  min-block-size: var(--_fui-popup-effective-row-pitch);
-  padding-inline: var(--fui-popup-row-inline-inset);
+  min-block-size: var(--_fui-popup-effective-row-pitch, #{$_row-pitch});
+  padding-inline: var(--fui-popup-row-inline-inset, #{$_row-inset});
   color: var(--fui-text-tertiary, #{tokens.$fui-text-tertiary});
 }
 
 @mixin group-separator {
-  block-size: var(--fui-popup-separator-size);
-  margin-block: var(--fui-popup-separator-gap);
+  block-size: var(--fui-popup-separator-size, #{$_separator-size});
+  margin-block: var(--fui-popup-separator-gap, #{$_separator-gap});
   background: var(--fui-border, #{tokens.$fui-border});
 }

package/src/recipes/_prose.scss

@@ -1,25 +1,35 @@
+@use "../tokens/measurements.generated" as measurements;
+@use "../tokens/mixins" as mixins;
+@use "../tokens/variables" as tokens;
 @use "typography" as typography;
 
+// Block rhythm is owned by the container (owl selectors below). The element
+// mixins reset inline margins only, so a `.x p { @include paragraph }` rule
+// (specificity 0,1,1) cannot out-rank the owl (0,1,0) and glue the flow.
 @mixin root {
   @include typography.role("body-relaxed");
 
+  // Long-form text: no balancing or orphan control (see recipes/typography).
+  text-wrap: auto;
+
   > * {
     margin-block: 0;
   }
 
   > * + * {
-    margin-block-start: var(--fui-raw-space-12);
+    margin-block-start: var(--fui-raw-space-12, #{measurements.raw-space(12)});
   }
 
   > * + :is(h1, h2, h3, h4, h5, h6) {
-    margin-block-start: var(--fui-raw-space-24);
+    margin-block-start: var(--fui-raw-space-24, #{measurements.raw-space(24)});
   }
 }
 
 @mixin paragraph {
   @include typography.role("body-relaxed");
 
-  margin: 0;
+  text-wrap: auto;
+  margin-inline: 0;
 }
 
 @mixin heading($level) {
@@ -35,22 +45,25 @@
     @error "Unknown prose heading '#{$level}'. Expected 1 through 6.";
   }
 
-  margin: 0;
+  margin-inline: 0;
 }
 
 @mixin list($kind) {
   @include typography.role("body-relaxed");
 
-  margin: 0;
-  padding: 0;
+  text-wrap: auto;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
 
   @if $kind == "none" {
     display: grid;
     list-style: none;
   } @else if $kind == "disc" or $kind == "decimal" or $kind == "icon" {
     display: grid;
-    grid-template-columns: minmax(var(--fui-raw-space-12), max-content) minmax(0, 1fr);
-    column-gap: var(--fui-raw-space-8);
+    grid-template-columns:
+      minmax(var(--fui-raw-space-12, #{measurements.raw-space(12)}), max-content)
+      minmax(0, 1fr);
+    column-gap: var(--fui-raw-space-8, #{measurements.raw-space(8)});
     list-style: none;
 
     > li {
@@ -75,7 +88,7 @@
 
     > li > :is(ul, ol) {
       grid-column: 1 / -1;
-      margin-block-start: var(--fui-raw-space-8);
+      margin-block-start: var(--fui-raw-space-8, #{measurements.raw-space(8)});
     }
 
     @if $kind == "disc" {
@@ -102,10 +115,10 @@
 @mixin inline-code {
   @include typography.role("code");
 
-  padding-block: var(--fui-raw-space-2);
-  padding-inline: var(--fui-raw-space-4);
-  border-radius: var(--fui-radius-sm);
-  background: var(--fui-bg-tertiary);
+  padding-block: var(--fui-raw-space-2, #{measurements.raw-space(2)});
+  padding-inline: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+  border-radius: var(--fui-radius-sm, #{tokens.$fui-radius-sm});
+  background: var(--fui-bg-tertiary, #{tokens.$fui-bg-tertiary});
   overflow-wrap: anywhere;
 }
 
@@ -113,11 +126,11 @@
   @include typography.role("code");
 
   @if $density == "compact" {
-    padding-block: var(--fui-raw-space-8);
-    padding-inline: var(--fui-raw-space-12);
+    padding-block: var(--fui-raw-space-8, #{measurements.raw-space(8)});
+    padding-inline: var(--fui-raw-space-12, #{measurements.raw-space(12)});
   } @else if $density == "default" {
-    padding-block: var(--fui-raw-space-12);
-    padding-inline: var(--fui-raw-space-16);
+    padding-block: var(--fui-raw-space-12, #{measurements.raw-space(12)});
+    padding-inline: var(--fui-raw-space-16, #{measurements.raw-space(16)});
   } @else {
     @error "Unknown code-block density '#{$density}'. Expected compact or default.";
   }
@@ -131,41 +144,48 @@
 @mixin blockquote {
   @include typography.role("body-relaxed");
 
-  margin: 0;
-  padding-inline-start: var(--fui-raw-space-16);
-  border-inline-start: var(--fui-raw-space-2) solid var(--fui-border-strong);
+  text-wrap: auto;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  padding-inline-start: var(--fui-raw-space-16, #{measurements.raw-space(16)});
+  border-inline-start: var(--fui-raw-space-2, #{measurements.raw-space(2)}) solid
+    var(--fui-border-strong, #{tokens.$fui-border-strong});
 }
 
 @mixin table {
   @include typography.role("body-compact");
 
+  text-wrap: auto;
   display: block;
   max-inline-size: 100%;
   overflow-x: auto;
 
   :is(th, td) {
-    padding-block: var(--fui-raw-space-8);
-    padding-inline: var(--fui-raw-space-12);
+    padding-block: var(--fui-raw-space-8, #{measurements.raw-space(8)});
+    padding-inline: var(--fui-raw-space-12, #{measurements.raw-space(12)});
   }
 }
 
 @mixin link {
   color: inherit;
   text-decoration: underline;
-  text-underline-offset: var(--fui-raw-space-2);
+  // Em offset scales with the inherited font size (prose links render at
+  // several sizes); matches the Link component's hover/dotted variants.
+  text-underline-offset: 0.2em;
   overflow-wrap: anywhere;
 
   &:focus-visible {
-    outline: var(--fui-stroke-default) solid var(--fui-focus-ring);
-    outline-offset: var(--fui-stroke-default);
+    // The previous hand-rolled outline referenced --fui-focus-ring, which is
+    // never defined — the whole declaration was invalid and prose links had
+    // no visible ring at all.
+    @include mixins.focus-ring;
   }
 }
 
 @mixin rule {
-  block-size: var(--fui-stroke-hairline);
-  margin-block: var(--fui-raw-space-24);
+  block-size: var(--fui-stroke-hairline, #{tokens.$fui-stroke-hairline});
+  margin-block: var(--fui-raw-space-24, #{measurements.raw-space(24)});
   border: 0;
-  background: var(--fui-border);
+  background: var(--fui-border, #{tokens.$fui-border});
 }
 
 @mixin media {

package/src/recipes/_representation.scss

@@ -1,4 +1,5 @@
 @use "../tokens/measurements.generated" as measurements;
+@use "../tokens/variables" as tokens;
 @use "action" as action;
 @use "typography" as typography;
 
@@ -106,13 +107,13 @@
   inline-size: avatar-size($size);
   block-size: avatar-size($size);
   overflow: hidden;
-  border-radius: var(--fui-radius-full);
+  border-radius: var(--fui-radius-full, #{tokens.$fui-radius-full});
 }
 
 @mixin avatar-group-item($size) {
   margin-inline-start: calc(-1 * #{avatar-overlap($size)});
   border: var(--fui-stroke-default, #{measurements.target-value("stroke", "default")}) solid
-    var(--fui-bg-primary);
+    var(--fui-bg-primary, #{tokens.$fui-bg-primary});
 }
 
 @mixin glyph($size) {
@@ -124,8 +125,8 @@
 @mixin activity($size) {
   --_fui-activity-size: #{activity-size($size)};
 
-  inline-size: var(--_fui-activity-size);
-  block-size: var(--_fui-activity-size);
+  inline-size: var(--_fui-activity-size, #{activity-size($size)});
+  block-size: var(--_fui-activity-size, #{activity-size($size)});
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -171,11 +172,11 @@
 
 @mixin chart-marker($kind) {
   @if $kind == "dot" {
-    inline-size: var(--fui-chart-marker-dot, #{_raw(8)});
-    block-size: var(--fui-chart-marker-dot, #{_raw(8)});
-    border-radius: var(--fui-radius-full);
+    inline-size: #{_raw(8)};
+    block-size: #{_raw(8)};
+    border-radius: var(--fui-radius-full, #{tokens.$fui-radius-full});
   } @else if $kind == "line" or $kind == "dashed" {
-    inline-size: var(--fui-chart-marker-inline, #{_raw(12)});
+    inline-size: #{_raw(12)};
     block-size: var(--fui-chart-marker-stroke, #{_raw(2)});
   } @else {
     @error "Unknown chart marker '#{$kind}'. Expected dot, line, or dashed.";
@@ -187,7 +188,7 @@
 
   --_fui-chart-tooltip-item-gap: #{_raw(8)};
 
-  min-inline-size: var(--fui-chart-tooltip-min-inline, 100px);
+  min-inline-size: var(--fui-layout-measure-inline-floor, #{measurements.target-value("layoutMeasure", "inline-floor")});
   padding-block: _raw(8);
   padding-inline: _raw(12);
 }