@usefragments/ui 1.7.0 → 2.0.0

package/src/components/Drawer/Drawer.module.scss

@@ -1,13 +1,12 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action" as action;
 @use "../../recipes/overlay" as overlay;
 
 .backdrop {
-  position: fixed;
-  z-index: var(--fui-overlay-layer-backdrop, 50);
-  inset: 0;
-  background-color: var(--fui-backdrop, $fui-backdrop);
+  @include overlay.backdrop;
+
   opacity: 0;
   transition: opacity var(--fui-transition-normal, $fui-transition-normal);
 
@@ -25,7 +24,7 @@
   @include overlay.safe-viewport;
 
   position: fixed;
-  z-index: var(--fui-overlay-layer-modal, 51);
+  z-index: var(--fui-overlay-layer-modal, #{$fui-overlay-layer-modal});
   inset: 0;
   pointer-events: none;
 
@@ -38,7 +37,7 @@
   @include overlay.modal-shell;
 
   position: fixed;
-  z-index: var(--fui-overlay-layer-modal, 51);
+  z-index: var(--fui-overlay-layer-modal, #{$fui-overlay-layer-modal});
   display: flex;
   flex-direction: column;
   pointer-events: auto;
@@ -61,9 +60,11 @@
 }
 
 .side-right {
-  inset-block: var(--_fui-overlay-safe-top) var(--_fui-overlay-safe-bottom);
-  inset-inline-end: var(--_fui-overlay-safe-right);
-  transform: translateX(calc(100% + var(--drawer-swipe-movement-x, 0px)));
+  @include overlay.side-panel-geometry("end");
+
+  transform: translateX(
+    calc(#{overlay.side-panel-offscreen("end")} + var(--drawer-swipe-movement-x, 0px))
+  );
 
   &[data-open] {
     transform: translateX(var(--drawer-swipe-movement-x, 0px));
@@ -71,14 +72,16 @@
 
   &[data-starting-style],
   &[data-ending-style] {
-    transform: translateX(100%);
+    transform: translateX(overlay.side-panel-offscreen("end"));
   }
 }
 
 .side-left {
-  inset-block: var(--_fui-overlay-safe-top) var(--_fui-overlay-safe-bottom);
-  inset-inline-start: var(--_fui-overlay-safe-left);
-  transform: translateX(calc(-100% + var(--drawer-swipe-movement-x, 0px)));
+  @include overlay.side-panel-geometry("start");
+
+  transform: translateX(
+    calc(#{overlay.side-panel-offscreen("start")} + var(--drawer-swipe-movement-x, 0px))
+  );
 
   &[data-open] {
     transform: translateX(var(--drawer-swipe-movement-x, 0px));
@@ -86,14 +89,23 @@
 
   &[data-starting-style],
   &[data-ending-style] {
-    transform: translateX(-100%);
+    transform: translateX(overlay.side-panel-offscreen("start"));
   }
 }
 
 .side-top {
-  inset-block-start: var(--_fui-overlay-safe-top);
-  inset-inline: var(--_fui-overlay-safe-left) var(--_fui-overlay-safe-right);
-  transform: translateY(calc(-100% + var(--drawer-swipe-movement-y, 0px)));
+  inset-block-start: var(
+    --_fui-overlay-safe-top,
+    var(--fui-raw-space-16, #{measurements.raw-space(16)})
+  );
+  inset-inline: var(
+      --_fui-overlay-safe-left,
+      var(--fui-raw-space-16, #{measurements.raw-space(16)})
+    )
+    var(--_fui-overlay-safe-right, var(--fui-raw-space-16, #{measurements.raw-space(16)}));
+  transform: translateY(
+    calc(#{overlay.side-panel-offscreen("top")} + var(--drawer-swipe-movement-y, 0px))
+  );
 
   &[data-open] {
     transform: translateY(var(--drawer-swipe-movement-y, 0px));
@@ -101,14 +113,23 @@
 
   &[data-starting-style],
   &[data-ending-style] {
-    transform: translateY(-100%);
+    transform: translateY(overlay.side-panel-offscreen("top"));
   }
 }
 
 .side-bottom {
-  inset-block-end: var(--_fui-overlay-safe-bottom);
-  inset-inline: var(--_fui-overlay-safe-left) var(--_fui-overlay-safe-right);
-  transform: translateY(calc(100% + var(--drawer-swipe-movement-y, 0px)));
+  inset-block-end: var(
+    --_fui-overlay-safe-bottom,
+    var(--fui-raw-space-16, #{measurements.raw-space(16)})
+  );
+  inset-inline: var(
+      --_fui-overlay-safe-left,
+      var(--fui-raw-space-16, #{measurements.raw-space(16)})
+    )
+    var(--_fui-overlay-safe-right, var(--fui-raw-space-16, #{measurements.raw-space(16)}));
+  transform: translateY(
+    calc(#{overlay.side-panel-offscreen("bottom")} + var(--drawer-swipe-movement-y, 0px))
+  );
 
   &[data-open] {
     transform: translateY(var(--drawer-swipe-movement-y, 0px));
@@ -116,7 +137,7 @@
 
   &[data-starting-style],
   &[data-ending-style] {
-    transform: translateY(100%);
+    transform: translateY(overlay.side-panel-offscreen("bottom"));
   }
 }
 
@@ -126,47 +147,101 @@
 
 .side-left,
 .side-right {
-  &.size-sm {
-    inline-size: min(#{overlay.drawer-inline("sm")}, var(--_fui-overlay-safe-inline));
+  &.width-sm {
+    inline-size: min(
+      #{overlay.drawer-inline("sm")},
+      var(
+        --_fui-overlay-safe-inline,
+        calc(100dvw - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+      )
+    );
   }
 
-  &.size-md {
-    inline-size: min(#{overlay.drawer-inline("md")}, var(--_fui-overlay-safe-inline));
+  &.width-md {
+    inline-size: min(
+      #{overlay.drawer-inline("md")},
+      var(
+        --_fui-overlay-safe-inline,
+        calc(100dvw - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+      )
+    );
   }
 
-  &.size-lg {
-    inline-size: min(#{overlay.drawer-inline("lg")}, var(--_fui-overlay-safe-inline));
+  &.width-lg {
+    inline-size: min(
+      #{overlay.drawer-inline("lg")},
+      var(
+        --_fui-overlay-safe-inline,
+        calc(100dvw - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+      )
+    );
   }
 
-  &.size-xl {
-    inline-size: min(#{overlay.drawer-inline("xl")}, var(--_fui-overlay-safe-inline));
+  &.width-xl {
+    inline-size: min(
+      #{overlay.drawer-inline("xl")},
+      var(
+        --_fui-overlay-safe-inline,
+        calc(100dvw - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+      )
+    );
   }
 
-  &.size-full {
-    inline-size: var(--_fui-overlay-safe-inline);
+  &.width-full {
+    inline-size: var(
+      --_fui-overlay-safe-inline,
+      calc(100dvw - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+    );
   }
 }
 
 .side-top,
 .side-bottom {
-  &.size-sm {
-    block-size: min(#{overlay.drawer-block("sm")}, var(--_fui-overlay-safe-block));
+  &.width-sm {
+    block-size: min(
+      #{overlay.drawer-block("sm")},
+      var(
+        --_fui-overlay-safe-block,
+        calc(100dvh - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+      )
+    );
   }
 
-  &.size-md {
-    block-size: min(#{overlay.drawer-block("md")}, var(--_fui-overlay-safe-block));
+  &.width-md {
+    block-size: min(
+      #{overlay.drawer-block("md")},
+      var(
+        --_fui-overlay-safe-block,
+        calc(100dvh - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+      )
+    );
   }
 
-  &.size-lg {
-    block-size: min(#{overlay.drawer-block("lg")}, var(--_fui-overlay-safe-block));
+  &.width-lg {
+    block-size: min(
+      #{overlay.drawer-block("lg")},
+      var(
+        --_fui-overlay-safe-block,
+        calc(100dvh - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+      )
+    );
   }
 
-  &.size-xl {
-    block-size: min(#{overlay.drawer-block("xl")}, var(--_fui-overlay-safe-block));
+  &.width-xl {
+    block-size: min(
+      #{overlay.drawer-block("xl")},
+      var(
+        --_fui-overlay-safe-block,
+        calc(100dvh - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+      )
+    );
   }
 
-  &.size-full {
-    block-size: var(--_fui-overlay-safe-block);
+  &.width-full {
+    block-size: var(
+      --_fui-overlay-safe-block,
+      calc(100dvh - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+    );
   }
 }
 
@@ -177,14 +252,14 @@
 .title {
   @include overlay.modal-title;
 
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-primary, $fui-text-primary);
 }
 
 .description {
   @include overlay.description;
 
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-secondary, $fui-text-secondary);
 }
 
@@ -198,41 +273,25 @@
 
 .footer {
   @include overlay.footer;
-
-  border-top: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
-  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
 }
 
 .close {
   @include button-reset;
   @include interactive-base;
   @include overlay.close;
-
-  z-index: 1;
-  border-radius: var(--fui-radius-md, $fui-radius-md);
-  color: var(--fui-text-secondary, $fui-text-secondary);
-
-  &:hover {
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
-    color: var(--fui-text-primary, $fui-text-primary);
-  }
-
-  svg {
-    inline-size: action.icon-size("sm");
-    block-size: action.icon-size("sm");
-  }
 }
 
 .popup:has(.close) .header {
   padding-inline-end: calc(
-    var(--fui-overlay-close-inset, var(--fui-raw-space-12, 12px)) + #{action.track("sm")} +
-      var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px))
+    var(--fui-overlay-close-inset, var(--fui-raw-space-12, #{measurements.raw-space(12)})) +
+      #{action.track("sm")} +
+      var(--fui-overlay-section-gap, var(--fui-raw-space-8, #{measurements.raw-space(8)}))
   );
 }
 
 .swipeArea {
   position: fixed;
-  z-index: var(--fui-overlay-layer-swipe, 49);
+  z-index: var(--fui-overlay-layer-swipe, #{$fui-overlay-layer-swipe});
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/components/Drawer/index.tsx

@@ -13,6 +13,8 @@ import styles from "./Drawer.module.scss";
  * Now backed by Base UI's stable Drawer (v1.3.0) with native swipe gestures.
  * @see https://usefragments.com/components/drawer
  */
+export type DrawerWidth = "sm" | "md" | "lg" | "xl" | "full";
+
 export interface DrawerProps {
   children: React.ReactNode;
   /** Controlled open state */
@@ -40,10 +42,10 @@ export interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement>
   /** Which edge the drawer slides from.
    * @default "right" */
   side?: "left" | "right" | "top" | "bottom";
-  /** Drawer width (for left/right) or height (for top/bottom).
+  /** Drawer width (for left/right) or height (for top/bottom). `full` spans the safe viewport.
    * @default "md"
-   * @see https://usefragments.com/components/drawer#sizes */
-  size?: "sm" | "md" | "lg" | "xl" | "full";
+   * @see https://usefragments.com/components/drawer#widths */
+  width?: DrawerWidth;
   /** Whether to show the backdrop overlay (default: true). Set to false for non-modal bottom panels. */
   backdrop?: boolean;
   /** Whether to autofocus an element on open (default: true) */
@@ -191,7 +193,7 @@ function DrawerTrigger({ children, asChild, className, ...htmlProps }: DrawerTri
 function DrawerContent({
   children,
   side = "right",
-  size = "md",
+  width = "md",
   backdrop = true,
   initialFocus = true,
   viewportProps,
@@ -200,7 +202,7 @@ function DrawerContent({
 }: DrawerContentProps) {
   const registerContentSide = React.useContext(DrawerContentSideContext);
   const { className: viewportClassName, ...viewportHtmlProps } = viewportProps ?? {};
-  const popupClasses = [styles.popup, styles[`side-${side}`], styles[`size-${size}`], className]
+  const popupClasses = [styles.popup, styles[`side-${side}`], styles[`width-${width}`], className]
     .filter(Boolean)
     .join(" ");
 

package/src/components/Editor/Editor.contract.json

@@ -170,7 +170,7 @@
     {
       "name": "With Auto-Save and Publish",
       "description": "Save state sits next to the primary action in the toolbar.",
-      "code": "<Editor\n  placeholder=\"Start typing your masterpiece here...\"\n  onValueChange={(v) => console.log(v)}\n>\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"Text formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n      <Editor.ToolbarButton format=\"strikethrough\" />\n      <Editor.ToolbarButton format=\"link\" />\n      <Editor.ToolbarButton format=\"code\" />\n      <Editor.ToolbarButton format=\"bulletList\" />\n    </Editor.ToolbarGroup>\n    <Editor.ToolbarGroup aria-label=\"Actions\">\n      <Editor.StatusIndicator status=\"saved\" />\n      <Button variant=\"accent\" size=\"sm\">\n        Publish\n      </Button>\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>"
+      "code": "<Editor\n  placeholder=\"Start typing your masterpiece here...\"\n  onValueChange={(v) => console.log(v)}\n>\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"Text formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n      <Editor.ToolbarButton format=\"strikethrough\" />\n      <Editor.ToolbarButton format=\"link\" />\n      <Editor.ToolbarButton format=\"code\" />\n      <Editor.ToolbarButton format=\"bulletList\" />\n    </Editor.ToolbarGroup>\n    <Editor.ToolbarGroup aria-label=\"Actions\">\n      <Editor.StatusIndicator status=\"saved\" />\n      <Button variant=\"solid\" tone=\"accent\" size=\"sm\">\n        Publish\n      </Button>\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>"
     },
     {
       "name": "Save Failed",

package/src/components/Editor/Editor.module.scss

@@ -1,20 +1,32 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action" as action;
+@use "../../recipes/field" as field;
 @use "../../recipes/layout" as layout;
 @use "../../recipes/prose" as prose;
 @use "../../recipes/target" as target;
 @use "../../recipes/typography" as typography;
 
+// Editing-area floor per size preset, in whole row tracks: three, five and ten
+// times the regular table row track (120, 200 and 400 at the shipped scale).
+@function _min-block($size) {
+  $rows: 5;
+
+  @if $size == "sm" {
+    $rows: 3;
+  } @else if $size == "lg" {
+    $rows: 10;
+  } @else if $size != "md" {
+    @error "Unknown editor size '#{$size}'. Expected sm, md, or lg.";
+  }
+
+  @return calc(#{$rows} * var(--fui-raw-space-40, #{measurements.raw-space(40)}));
+}
+
 .editor {
   @include form-group-surface;
 
-  // Component-scoped registered vocabulary: these are declared here as the
-  // token source for the editor's size presets, not ad-hoc custom properties.
-  --fui-editor-min-block-sm: 120px;
-  --fui-editor-min-block-md: 200px;
-  --fui-editor-min-block-lg: 400px;
-
   display: flex;
   flex-direction: column;
   inline-size: 100%;
@@ -22,11 +34,12 @@
   overflow: hidden;
 
   &:focus-within:not([data-disabled]) {
-    @include focus-ring;
+    @include field.focus-state;
   }
 
   &[data-disabled] {
-    opacity: 0.5;
+    @include disabled-state;
+
     pointer-events: none;
   }
 
@@ -39,7 +52,7 @@
       .content,
       .contentTextarea,
       :global(.tiptap) {
-        min-block-size: var(--fui-editor-min-block-#{$size});
+        min-block-size: _min-block($size);
       }
     }
   }
@@ -87,7 +100,7 @@
 
   &:hover:not(:disabled) {
     border-color: var(--fui-form-group-border, $fui-border);
-    background-color: var(--fui-field-bg, $fui-bg-elevated);
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
     color: var(--fui-text-primary, $fui-text-primary);
   }
 
@@ -148,14 +161,14 @@
 
 .content {
   flex: 1;
-  min-block-size: var(--fui-editor-min-block-md);
+  min-block-size: _min-block("md");
   overflow-y: auto;
 }
 
 .contentRich :global(.tiptap) {
   @include prose.root;
 
-  min-block-size: var(--fui-editor-min-block-md);
+  min-block-size: _min-block("md");
   padding: layout.gap("lg");
   outline: none;
 
@@ -234,7 +247,7 @@
   display: block;
   inline-size: 100%;
   block-size: 100%;
-  min-block-size: var(--fui-editor-min-block-md);
+  min-block-size: _min-block("md");
   padding: layout.gap("lg");
   border: 0;
   background: transparent;

package/src/components/EmptyState/EmptyState.contract.json

@@ -10,7 +10,7 @@
   "propsSummary": [
     "children: node (required)",
     "size: sm|md|lg (default: md)",
-    "variant: plain|outlined (default: plain)"
+    "variant: ghost|outline (default: ghost)"
   ],
   "props": {
     "children": {
@@ -27,10 +27,10 @@
     },
     "variant": {
       "type": "enum",
-      "description": "Frame style. `outlined` draws a dashed hairline around the reserved region; `plain` leaves framing to the surrounding surface.",
-      "default": "plain",
+      "description": "Chrome. `outline` draws a dashed hairline around the reserved region; `ghost` leaves framing to the surrounding surface.",
+      "default": "ghost",
       "required": false,
-      "values": ["plain", "outlined"]
+      "values": ["ghost", "outline"]
     }
   },
   "usage": {
@@ -65,12 +65,12 @@
     {
       "name": "No Results",
       "description": "A filter or query matched nothing \u2014 offer a way back.",
-      "code": "<EmptyState>\n  <EmptyState.Icon><SearchIcon /></EmptyState.Icon>\n  <EmptyState.Title>No results found</EmptyState.Title>\n  <EmptyState.Description>Try adjusting your search terms or filters.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button variant=\"secondary\">Clear Filters</Button>\n  </EmptyState.Actions>\n</EmptyState>"
+      "code": "<EmptyState>\n  <EmptyState.Icon><SearchIcon /></EmptyState.Icon>\n  <EmptyState.Title>No results found</EmptyState.Title>\n  <EmptyState.Description>Try adjusting your search terms or filters.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button variant=\"soft\">Clear Filters</Button>\n  </EmptyState.Actions>\n</EmptyState>"
     },
     {
       "name": "With Secondary Action",
       "description": "One primary action plus a quieter alternative.",
-      "code": "<EmptyState>\n  <EmptyState.Icon><InboxIcon /></EmptyState.Icon>\n  <EmptyState.Title>Inbox is empty</EmptyState.Title>\n  <EmptyState.Description>You have no new messages.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button>Compose Message</Button>\n    <Button variant=\"secondary\">View Archive</Button>\n  </EmptyState.Actions>\n</EmptyState>"
+      "code": "<EmptyState>\n  <EmptyState.Icon><InboxIcon /></EmptyState.Icon>\n  <EmptyState.Title>Inbox is empty</EmptyState.Title>\n  <EmptyState.Description>You have no new messages.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button>Compose Message</Button>\n    <Button variant=\"soft\">View Archive</Button>\n  </EmptyState.Actions>\n</EmptyState>"
     },
     {
       "name": "Small",

package/src/components/EmptyState/EmptyState.module.scss

@@ -1,30 +1,32 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/feedback" as feedback;
+@use "../../recipes/typography" as typography;
 
 .emptyState {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--fui-feedback-text-gap, var(--fui-raw-space-4, 4px));
+  gap: var(--fui-feedback-text-gap, var(--fui-raw-space-4, #{measurements.raw-space(4)}));
   text-align: center;
   font-family: var(--fui-font-sans, $fui-font-sans);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 
+  // Icon and actions sit a section step (16) away from the copy, netted
+  // against the flex gap so the copy block keeps its own text rhythm.
   > .icon {
     margin-block-end: calc(
-      var(--fui-feedback-section-gap, var(--fui-raw-space-16, 16px)) - var(
+      var(--fui-raw-space-16, #{measurements.raw-space(16)}) - var(
           --fui-feedback-text-gap,
-          var(--fui-raw-space-4, 4px)
+          var(--fui-raw-space-4, #{measurements.raw-space(4)})
         )
     );
   }
 
   > .actions {
     margin-block-start: calc(
-      var(--fui-feedback-section-gap, var(--fui-raw-space-16, 16px)) - var(
+      var(--fui-raw-space-16, #{measurements.raw-space(16)}) - var(
           --fui-feedback-text-gap,
-          var(--fui-raw-space-4, 4px)
+          var(--fui-raw-space-4, #{measurements.raw-space(4)})
         )
     );
   }
@@ -44,9 +46,10 @@
 
 // Reserved-but-empty region: a dashed hairline says the space belongs to
 // content that has not arrived, without claiming the weight of a real card.
-.outlined {
+.outline {
   justify-content: center;
-  border: var(--fui-stroke-hairline, 1px) dashed var(--fui-border-default, $fui-border-default);
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) dashed
+    var(--fui-border-default, $fui-border-default);
   border-radius: var(--fui-card-radius, var(--fui-radius-lg, $fui-radius-lg));
 }
 
@@ -57,30 +60,35 @@
   color: var(--fui-text-tertiary, $fui-text-tertiary);
 
   svg {
-    inline-size: var(--_fui-feedback-empty-icon-size);
-    block-size: var(--_fui-feedback-empty-icon-size);
+    inline-size: var(--_fui-feedback-empty-icon-size, var(--fui-icon-2xl, #{$fui-icon-2xl}));
+    block-size: var(--_fui-feedback-empty-icon-size, var(--fui-icon-2xl, #{$fui-icon-2xl}));
   }
 }
 
+// The size recipe (feedback.empty-state) authors the type channels per size;
+// the md role is the fallback when a size class is missing.
 .title {
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-primary, $fui-text-primary);
   font-family: var(--fui-font-sans, $fui-font-sans);
-  font-size: var(--_fui-feedback-empty-title-size);
-  font-weight: var(--_fui-feedback-empty-title-weight);
-  line-height: var(--_fui-feedback-empty-title-line);
-  letter-spacing: var(--_fui-feedback-empty-title-tracking);
+  font-size: var(--_fui-feedback-empty-title-size, #{typography.font-size("ui-standard")});
+  font-weight: var(--_fui-feedback-empty-title-weight, #{typography.weight("ui-standard")});
+  line-height: var(--_fui-feedback-empty-title-line, #{typography.line-height("ui-standard")});
+  letter-spacing: var(--_fui-feedback-empty-title-tracking, #{typography.tracking("ui-standard")});
 }
 
 .description {
-  max-inline-size: var(--_fui-feedback-empty-max-inline);
-  margin: 0;
+  max-inline-size: var(
+    --_fui-feedback-empty-max-inline,
+    var(--fui-overlay-tooltip-max, #{measurements.target-value("overlay", "tooltip-max")})
+  );
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-secondary, $fui-text-secondary);
   font-family: var(--fui-font-sans, $fui-font-sans);
-  font-size: var(--_fui-feedback-empty-copy-size);
-  font-weight: var(--_fui-feedback-empty-copy-weight);
-  line-height: var(--_fui-feedback-empty-copy-line);
-  letter-spacing: var(--_fui-feedback-empty-copy-tracking);
+  font-size: var(--_fui-feedback-empty-copy-size, #{typography.font-size("body-compact")});
+  font-weight: var(--_fui-feedback-empty-copy-weight, #{typography.weight("body-compact")});
+  line-height: var(--_fui-feedback-empty-copy-line, #{typography.line-height("body-compact")});
+  letter-spacing: var(--_fui-feedback-empty-copy-tracking, #{typography.tracking("body-compact")});
 }
 
 .actions {
@@ -88,5 +96,5 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  gap: var(--fui-feedback-transient-gap, var(--fui-raw-space-8, 8px));
+  gap: var(--fui-feedback-transient-gap, var(--fui-raw-space-8, #{measurements.raw-space(8)}));
 }

package/src/components/EmptyState/index.tsx

@@ -10,11 +10,11 @@ import styles from "./EmptyState.module.scss";
 export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   size?: "sm" | "md" | "lg";
-  /** `outlined` draws the dashed hairline that marks a reserved-but-empty
-   * region. Default `plain` keeps the state inside whatever already frames it
+  /** Chrome. `outline` draws the dashed hairline that marks a reserved-but-empty
+   * region. Default `ghost` keeps the state inside whatever already frames it
    * (a Card, a table body) so the frame is never doubled.
-   * @default "plain" */
-  variant?: "plain" | "outlined";
+   * @default "ghost" */
+  variant?: "ghost" | "outline";
 }
 
 export interface EmptyStateIconProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -23,6 +23,9 @@ export interface EmptyStateIconProps extends React.HTMLAttributes<HTMLDivElement
 
 export interface EmptyStateTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
   children: React.ReactNode;
+  /** Heading level follows the surrounding outline: `h2` for a page-level
+   * state, `h3` under a section heading. Defaults to `h3`. */
+  as?: "h2" | "h3" | "h4" | "p";
 }
 
 export interface EmptyStateDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
@@ -58,14 +61,14 @@ function useEmptyStateContext() {
 function EmptyStateRoot({
   children,
   size = "md",
-  variant = "plain",
+  variant = "ghost",
   className,
   ...htmlProps
 }: EmptyStateProps) {
   const classes = [
     styles.emptyState,
     styles[size],
-    variant === "outlined" ? styles.outlined : null,
+    variant === "outline" ? styles.outline : null,
     className,
   ]
     .filter(Boolean)
@@ -91,12 +94,17 @@ function EmptyStateIcon({ children, className, ...htmlProps }: EmptyStateIconPro
   );
 }
 
-function EmptyStateTitle({ children, className, ...htmlProps }: EmptyStateTitleProps) {
+function EmptyStateTitle({
+  children,
+  className,
+  as: Component = "h3",
+  ...htmlProps
+}: EmptyStateTitleProps) {
   const classes = [styles.title, className].filter(Boolean).join(" ");
   return (
-    <h3 {...htmlProps} className={classes}>
+    <Component {...htmlProps} className={classes}>
       {children}
-    </h3>
+    </Component>
   );
 }