@usefragments/ui 1.6.0 → 2.0.0

package/src/tokens/_derive.scss

@@ -8,9 +8,9 @@
 //
 // ============================================
 
-@use 'sass:color';
-@use 'sass:math';
-@use 'palettes' as *;
+@use "sass:color";
+@use "sass:math";
+@use "palettes" as *;
 
 // --------------------------------------------
 // Color Utility Functions
@@ -21,7 +21,7 @@
 /// @return {Boolean} True if dark
 @function is-dark-color($color) {
   // oklch lightness is perceptually uniform (0-1 range)
-  @return color.channel($color, 'lightness', $space: oklch) < 0.5;
+  @return color.channel($color, "lightness", $space: oklch) < 0.5;
 }
 
 /// Get appropriate contrast color (black or white)
@@ -46,7 +46,7 @@
 /// @param {Boolean} $is-dark - Whether in dark mode
 /// @return {Color} Hover state color
 @function derive-accent-hover($base, $is-dark: false) {
-  $l: color.channel($base, 'lightness', $space: oklch);
+  $l: color.channel($base, "lightness", $space: oklch);
 
   @if $is-dark {
     @if $l > 0.85 {
@@ -72,7 +72,7 @@
 /// @param {Boolean} $is-dark - Whether in dark mode
 /// @return {Color} Active state color
 @function derive-accent-active($base, $is-dark: false) {
-  $l: color.channel($base, 'lightness', $space: oklch);
+  $l: color.channel($base, "lightness", $space: oklch);
 
   @if $is-dark {
     @if $l > 0.85 {
@@ -102,8 +102,8 @@
 /// @param {Color} $brand - Brand color
 /// @return {Color} Dark-mode accent
 @function derive-dark-accent($brand) {
-  $l: color.channel($brand, 'lightness', $space: oklch);
-  $c: color.channel($brand, 'chroma', $space: oklch);
+  $l: color.channel($brand, "lightness", $space: oklch);
+  $c: color.channel($brand, "chroma", $space: oklch);
   // color.channel returns lightness as a percentage; normalize to a unitless 0–1
   // ratio so the comparisons below share a scale with the 0.55/0.85 bounds.
   $l-num: $l;
@@ -113,7 +113,7 @@
   // grey-lift only kicks in for low-chroma brands; vibrant brands keep their own L.
   $target-l: math.max($l-num, 0.95 - 2 * $c);
   $clamped-l: math.max(0.55, math.min($target-l, 0.85));
-  @return oklch($clamped-l $c color.channel($brand, 'hue', $space: oklch));
+  @return oklch($clamped-l $c color.channel($brand, "hue", $space: oklch));
 }
 
 // --------------------------------------------
@@ -146,185 +146,103 @@
 // Surface/Background Derivation
 // --------------------------------------------
 
-/// Derive surface/background tokens from a neutral palette
+/// Derive surface/background tokens for the paper ramp.
 /// Maps shade levels to semantic surface tokens for visual depth layering.
-/// For colorful palettes (ice, earth, sand, fire), light mode uses tinted backgrounds.
 /// @param {Map} $palette - Neutral palette map
 /// @param {Boolean} $is-dark - Whether in dark mode
-/// @param {String} $palette-name - Palette name for colorful detection (default: 'stone')
 /// @return {Map} Surface token values
-@function derive-surfaces($palette, $is-dark: false, $palette-name: 'stone') {
+@function derive-surfaces($palette, $is-dark: false, $palette-name: "paper") {
   @if $is-dark {
-    // Carbon (Fragments default) — charcoal material surfaces, not voids.
-    @if $palette-name == 'carbon' {
-      @return (
-        primary: #212121,   // page / body background
-        secondary: #171717, // sidebar, recessed panels, surface
-        tertiary: #2f2f2f,  // raised / hover / active row (surface-2)
-        elevated: #2f2f2f,  // cards float above the page tone
-        subtle: #171717,    // recessed (code wells, insets)
-        hover: rgba(255, 255, 255, 0.055),
-        active: rgba(255, 255, 255, 0.085)
-      );
-    }
-
-    @if $palette-name == 'stone' or $palette-name == 'mono' {
-      @return (
-        primary: #000000,
-        secondary: #050505,
-        tertiary: #111111,
-        elevated: #151515,
-        subtle: #080808,
-        hover: rgba(255, 255, 255, 0.055),
-        active: rgba(255, 255, 255, 0.085)
-      );
-    }
-
-    // Dark mode: darker = more recessed, lighter = elevated
-    // Hover/active opacities tuned for subdued dense-UI aesthetic: hairlines and
-    // alpha overlays do most of the depth work rather than heavy color shifts.
+    // The cream canvas moved onto a warm charcoal plane with a real elevation
+    // ladder: bands step up from the page, cards step up from bands — the
+    // dark mirror of canvas / tinted band / white card in light mode.
     @return (
-      primary: get-shade($palette, 950),           // Page background (darkest)
-      secondary: get-shade($palette, 900),         // Sidebar, panels
-      tertiary: get-shade($palette, 800),          // Content areas (lighter)
-      elevated: interpolate-shade($palette, 875),  // Cards (distinct from secondary)
-      subtle: interpolate-shade($palette, 925),    // Between primary and secondary
-      hover: rgba(255, 255, 255, 0.035),           // Interactive hover
-      active: rgba(255, 255, 255, 0.06)            // Interactive active
+      primary: #171614,
+      // page background
+      secondary: #171614,
+      // shell/sidebar on the same plane
+      tertiary: #1e1c19,
+      // tinted section band, raised chrome
+      elevated: #262421,
+      // cards and overlays float clearly above bands
+      subtle: #1b1a17,
+      // barely-raised wells
+      hover: #2a2723,
+      // transient interaction
+      active: #322e29 // transient pressed interaction
     );
   }
 
-  // Light mode: colorful palettes get tinted backgrounds. Carbon is a neutral
-  // (like stone) — white surfaces in light mode.
-  $is-colorful: $palette-name != 'stone' and $palette-name != 'carbon';
-  @if $is-colorful {
-    @return (
-      primary: get-shade($palette, 50),            // Tinted page background
-      secondary: get-shade($palette, 100),         // Tinted secondary panels
-      tertiary: get-shade($palette, 200),          // Deeper tint for nested sections
-      elevated: #ffffff,                           // Cards, modals (floats above)
-      subtle: get-shade($palette, 50),             // Very subtle tinted background
-      hover: rgba(0, 0, 0, 0.04),                  // Interactive hover
-      active: rgba(0, 0, 0, 0.06)                  // Interactive active
-    );
-  }
-
-  // Stone palette: neutral white backgrounds
+  // Light mode — the warm gallery scheme: a cream page canvas, white cards
+  // floating above it, and a deeper cream band for nested sections.
+  // Hover/active are warm alpha tints so interaction chrome never goes cold
+  // grey on the warm canvas.
   @return (
-    primary: #ffffff,                            // Page background (white)
-    secondary: get-shade($palette, 100),         // Sidebar, secondary panels
-    tertiary: get-shade($palette, 100),          // Nested sections
-    elevated: #ffffff,                           // Cards, modals (floats above)
-    subtle: get-shade($palette, 50),             // Very subtle backgrounds
-    hover: rgba(0, 0, 0, 0.04),                  // Interactive hover
-    active: rgba(0, 0, 0, 0.06)                  // Interactive active
+    primary: #faf8f5,
+    // page canvas (cream)
+    secondary: #faf8f5,
+    // shell/sidebar on the same plane
+    tertiary: #f2ede7,
+    // tinted section band, hover-on-paper
+    elevated: #ffffff,
+    // cards and overlays float white
+    subtle: #fdfcfa,
+    // barely-raised wells
+    hover: rgba(96, 48, 16, 0.06),
+    // warm transient interaction
+    active: rgba(96, 48, 16, 0.1) // warm pressed interaction
   );
 }
 
 /// Derive document/application canvas tokens used by base body styles and
-/// large layout containers. The defaults intentionally separate the page
-/// canvas from the primary main surface so app shells can expose chrome around
-/// the focused content region.
+/// large layout containers. Body and main share the paper canvas so app
+/// shells sit on one plane; raised component roles provide the contrast.
 /// @param {Map} $palette - Neutral palette map
 /// @param {Boolean} $is-dark - Whether in dark mode
-/// @param {String} $palette-name - Palette name for colorful detection
 /// @return {Map} Body and main background values
-@function derive-app-surfaces($palette, $is-dark: false, $palette-name: 'stone') {
+@function derive-app-surfaces($palette, $is-dark: false, $palette-name: "paper") {
   @if $is-dark {
-    // Carbon (Fragments default) — flat page canvas at #212121.
-    @if $palette-name == 'carbon' {
-      @return (
-        body: #212121,
-        main: #212121
-      );
-    }
-
-    @if $palette-name == 'stone' or $palette-name == 'mono' or $palette-name == 'wind' {
-      @return (
-        body: #000000,
-        main: #050505
-      );
-    }
-
-    @return (
-      body: get-shade($palette, 800),
-      main: get-shade($palette, 900)
-    );
+    @return (body: #171614, main: #171614);
   }
-
-  @if $palette-name == 'stone' or $palette-name == 'carbon' or $palette-name == 'wind' {
-    @return (
-      body: get-shade($palette, 100),
-      main: #ffffff
-    );
-  }
-
-  @return (
-    body: get-shade($palette, 100),
-    main: get-shade($palette, 50)
-  );
+  @return (body: #faf8f5, main: #faf8f5);
 }
 
 // --------------------------------------------
 // Text Color Derivation
 // --------------------------------------------
 
-/// Derive text tokens from a neutral palette.
-/// For colorful palettes in light mode, applies ensure-contrast() to meet
-/// WCAG AAA (7:1) against tinted backgrounds (palette[50]).
+/// Derive text tokens for the paper ramp.
+/// Light mode applies ensure-contrast() to meet WCAG AAA (7:1) against the
+/// cream canvas; dark mode uses warm ink tiers so text keeps the scheme's
+/// warmth instead of snapping to pure white.
 /// @param {Map} $palette - Neutral palette map
 /// @param {Boolean} $is-dark - Whether in dark mode
-/// @param {String} $palette-name - Palette name for background detection (default: 'stone')
 /// @return {Map} Text token values
-@function derive-text($palette, $is-dark: false, $palette-name: 'stone') {
+@function derive-text($palette, $is-dark: false, $palette-name: "paper") {
   @if $is-dark {
-    // Carbon (Fragments default) — ink / muted / faint text tiers.
-    @if $palette-name == 'carbon' {
-      @return (
-        primary: #ececec,   // ink
-        secondary: #b4b4b4, // muted
-        tertiary: #8f8f8f,  // faint / placeholder
-        inverse: #212121    // text on light (sage) accents
-      );
-    }
-
-    @if $palette-name == 'stone' or $palette-name == 'mono' {
-      @return (
-        primary: #ededed,
-        secondary: #a1a1a1,
-        tertiary: #7a7a7a,
-        inverse: #000000
-      );
-    }
-
-    // Dark mode: neutral white text on all palettes.
-    // Palette-tinted text (e.g. green-on-green-dark) looks muddy and reduces
-    // readability. Major polished dark themes use neutral white text regardless
-    // of background tint.
-    // Opacity ladder tuned for a subdued, product-chrome aesthetic — secondary
-    // and tertiary are lifted closer to primary so dense UI reads cleanly
-    // without needing to bump to primary for every chrome label.
     @return (
-      primary: #ffffff,
-      secondary: rgba(255, 255, 255, 0.72),
-      tertiary: rgba(255, 255, 255, 0.5),
-      inverse: get-shade($palette, 900)            // Text on light accents
+      primary: #f0ede9,
+      // warm ink
+      secondary: #b6b0a8,
+      // muted
+      tertiary: #8d8780,
+      // faint / placeholder
+      inverse: #171614 // text on light (cream) accents
     );
   }
 
-  // Light mode background — stone/carbon use white, colorful palettes use palette[50]
-  $bg: #ffffff;
-  @if $palette-name != 'stone' and $palette-name != 'carbon' {
-    $bg: get-shade($palette, 50);
-  }
+  $bg: get-shade($palette, 50);
 
   @return (
-    primary: get-shade($palette, 900),           // Main text (high contrast)
+    primary: get-shade($palette, 900),
+    // Main text (high contrast)
     secondary: ensure-contrast(get-shade($palette, 600), $bg, 7),
     tertiary: ensure-contrast(
-      color.mix(get-shade($palette, 600), get-shade($palette, 500), 20%), $bg, 7
-    ),
-    inverse: get-shade($palette, 100)            // Text on dark accents
+        color.mix(get-shade($palette, 600), get-shade($palette, 500), 20%),
+        $bg,
+        7
+      ),
+    inverse: get-shade($palette, 100) // Text on dark accents
   );
 }
 
@@ -332,41 +250,22 @@
 // Border Color Derivation
 // --------------------------------------------
 
-/// Derive border tokens from a neutral palette
+/// Derive border tokens for the paper ramp
 /// @param {Map} $palette - Neutral palette map
 /// @param {Boolean} $is-dark - Whether in dark mode
 /// @return {Map} Border token values
-@function derive-borders($palette, $is-dark: false, $palette-name: 'stone') {
+@function derive-borders($palette, $is-dark: false, $palette-name: "paper") {
   @if $is-dark {
-    // Carbon (Fragments default) — solid hairline + strong border.
-    @if $palette-name == 'carbon' {
-      @return (
-        default: #323232, // hairline
-        strong: #4b4b4b   // strong border
-      );
-    }
-
-    @if $palette-name == 'stone' or $palette-name == 'mono' {
-      @return (
-        default: rgba(255, 255, 255, 0.075),
-        strong: rgba(255, 255, 255, 0.14)
-      );
-    }
-
-    // Dark mode: subtle white-alpha hairlines. Tight opacities keep panel
-    // edges barely-there so borders define structure without adding visual
-    // weight — matches the dense dashboard aesthetic.
+    // Solid warm hairline + strong border on the charcoal plane.
     @return (
-      default: rgba(255, 255, 255, 0.055),
-      strong: rgba(255, 255, 255, 0.085)
-    );
-  } @else {
-    // Light mode: reduced opacity (ChatGPT --border-light ~5%)
-    @return (
-      default: rgba(0, 0, 0, 0.05),
-      strong: rgba(0, 0, 0, 0.10)
+      default: #343029,
+      // hairline
+      strong: #4a4641 // strong border
     );
   }
+  // Warm-tinted hairlines so edges on the cream canvas never read as cold
+  // grey lines cutting through a warm scheme.
+  @return (default: rgba(60, 45, 30, 0.1), strong: rgba(60, 45, 30, 0.18));
 }
 
 // --------------------------------------------
@@ -381,17 +280,33 @@
     // Dark mode: near-zero shadows — hairlines and alpha overlays carry
     // elevation instead, matching dense product-chrome aesthetics.
     @return (
-      sm: (0 1px 2px 0 rgba(0, 0, 0, 0.15)),
-      md: (0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 1px 3px -2px rgba(0, 0, 0, 0.15)),
-      lg: (0 8px 12px -3px rgba(0, 0, 0, 0.25), 0 3px 5px -4px rgba(0, 0, 0, 0.18))
+      sm: (
+        0 1px 2px 0 rgba(0, 0, 0, 0.15),
+      ),
+      md: (
+        0 2px 4px -1px rgba(0, 0, 0, 0.2),
+        0 1px 3px -2px rgba(0, 0, 0, 0.15),
+      ),
+      lg: (
+        0 8px 12px -3px rgba(0, 0, 0, 0.25),
+        0 3px 5px -4px rgba(0, 0, 0, 0.18),
+      )
     );
   } @else {
     // Light mode: flatter aesthetic — near-zero shadows so layout reads
     // as structure rather than floating chrome.
     @return (
-      sm: (0 1px 2px 0 rgba(0, 0, 0, 0.02)),
-      md: (0 2px 4px -1px rgba(0, 0, 0, 0.04), 0 1px 3px -2px rgba(0, 0, 0, 0.03)),
-      lg: (0 8px 12px -3px rgba(0, 0, 0, 0.06), 0 3px 5px -4px rgba(0, 0, 0, 0.04))
+      sm: (
+        0 1px 2px 0 rgba(0, 0, 0, 0.02),
+      ),
+      md: (
+        0 2px 4px -1px rgba(0, 0, 0, 0.04),
+        0 1px 3px -2px rgba(0, 0, 0, 0.03),
+      ),
+      lg: (
+        0 8px 12px -3px rgba(0, 0, 0, 0.06),
+        0 3px 5px -4px rgba(0, 0, 0, 0.04),
+      )
     );
   }
 }
@@ -400,33 +315,20 @@
 // Scrollbar Derivation
 // --------------------------------------------
 
-/// Derive scrollbar tokens from a neutral palette
+/// Derive scrollbar tokens for the paper ramp
 /// @param {Map} $palette - Neutral palette map
 /// @param {Boolean} $is-dark - Whether in dark mode
 /// @return {Map} Scrollbar token values
-@function derive-scrollbar($palette, $is-dark: false, $palette-name: 'stone') {
+@function derive-scrollbar($palette, $is-dark: false, $palette-name: "paper") {
   @if $is-dark {
-    // Carbon (Fragments default) — transparent track, strong-border thumb.
-    @if $palette-name == 'carbon' {
-      @return (
-        track: transparent,
-        thumb: #4b4b4b,
-        thumb-hover: #b4b4b4
-      );
-    }
-
-    @return (
-      track: get-shade($palette, 800),
-      thumb: get-shade($palette, 600),
-      thumb-hover: get-shade($palette, 500)
-    );
-  } @else {
-    @return (
-      track: get-shade($palette, 100),
-      thumb: get-shade($palette, 300),
-      thumb-hover: get-shade($palette, 400)
-    );
+    // Transparent track, strong-border thumb on the warm charcoal plane.
+    @return (track: transparent, thumb: #4a4641, thumb-hover: #b6b0a8);
   }
+  @return (
+    track: get-shade($palette, 100),
+    thumb: get-shade($palette, 300),
+    thumb-hover: get-shade($palette, 400)
+  );
 }
 
 // --------------------------------------------
@@ -510,9 +412,9 @@
 /// @param {Color} $color - Color to measure
 /// @return {Number} Relative luminance 0-1
 @function _wcag-luminance($color) {
-  $r: _srgb-linearize(color.channel($color, 'red', $space: rgb));
-  $g: _srgb-linearize(color.channel($color, 'green', $space: rgb));
-  $b: _srgb-linearize(color.channel($color, 'blue', $space: rgb));
+  $r: _srgb-linearize(color.channel($color, "red", $space: rgb));
+  $g: _srgb-linearize(color.channel($color, "green", $space: rgb));
+  $b: _srgb-linearize(color.channel($color, "blue", $space: rgb));
   @return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
 }
 

package/src/tokens/_measurements.catalog.generated.css

@@ -1,50 +1,64 @@
 /* This file is generated by scripts/generate-measurements.mjs. Do not edit. */
-/* Source SHA-256: 1e8a256c12eaf2f8f4a2a5c4ed25477bf303b56dc2184ac3e29dec71207853bd */
+/* Source SHA-256: 2783cbbef495c746894385914699542d96008deb952c3f3ab6adf84bf3fac80d */
 
 :root {
   --fui-raw-space-0: 0;
   --fui-raw-space-2: 2px;
-  --fui-raw-space-4: 4px;
-  --fui-raw-space-6: 6px;
-  --fui-raw-space-8: 8px;
-  --fui-raw-space-10: 10px;
-  --fui-raw-space-12: 12px;
-  --fui-raw-space-16: 16px;
-  --fui-raw-space-20: 20px;
-  --fui-raw-space-24: 24px;
-  --fui-raw-space-32: 32px;
-  --fui-raw-space-40: 40px;
-  --fui-raw-space-48: 48px;
-  --fui-raw-space-64: 64px;
-  --fui-control-track-micro: 24px;
-  --fui-control-track-sm: 28px;
-  --fui-control-track-md: 32px;
-  --fui-control-track-lg: 40px;
-  --fui-field-track-sm: 28px;
-  --fui-field-track-md: 32px;
-  --fui-field-track-lg: 40px;
-  --fui-field-inline-inset-sm: 10px;
-  --fui-field-inline-inset-md: 12px;
-  --fui-field-inline-inset-lg: 16px;
+  --fui-raw-space-4: calc(var(--fui-scale, 1) * 4px);
+  --fui-raw-space-6: calc(var(--fui-scale, 1) * 6px);
+  --fui-raw-space-8: calc(var(--fui-scale, 1) * 8px);
+  --fui-raw-space-10: calc(var(--fui-scale, 1) * 10px);
+  --fui-raw-space-12: calc(var(--fui-scale, 1) * 12px);
+  --fui-raw-space-16: calc(var(--fui-scale, 1) * 16px);
+  --fui-raw-space-20: calc(var(--fui-scale, 1) * 20px);
+  --fui-raw-space-24: calc(var(--fui-scale, 1) * 24px);
+  --fui-raw-space-32: calc(var(--fui-scale, 1) * 32px);
+  --fui-raw-space-40: calc(var(--fui-scale, 1) * 40px);
+  --fui-raw-space-48: calc(var(--fui-scale, 1) * 48px);
+  --fui-raw-space-64: calc(var(--fui-scale, 1) * 64px);
+  --fui-control-track-micro: calc(var(--fui-scale, 1) * 24px);
+  --fui-control-track-sm: calc(var(--fui-scale, 1) * 28px);
+  --fui-control-track-md: calc(var(--fui-scale, 1) * 32px);
+  --fui-control-track-lg: calc(var(--fui-scale, 1) * 40px);
+  --fui-field-track-sm: calc(var(--fui-scale, 1) * 28px);
+  --fui-field-track-md: calc(var(--fui-scale, 1) * 32px);
+  --fui-field-track-lg: calc(var(--fui-scale, 1) * 40px);
+  --fui-field-inline-inset-sm: calc(var(--fui-scale, 1) * 10px);
+  --fui-field-inline-inset-md: calc(var(--fui-scale, 1) * 12px);
+  --fui-field-inline-inset-lg: calc(var(--fui-scale, 1) * 16px);
   --fui-surface-inset-panel: 0;
-  --fui-surface-inset-compact: 12px;
-  --fui-surface-inset-default: 16px;
-  --fui-surface-inset-roomy: 24px;
-  --fui-icon-xs: 12px;
-  --fui-icon-sm: 14px;
-  --fui-icon-md: 16px;
-  --fui-icon-lg: 20px;
-  --fui-icon-xl: 24px;
-  --fui-icon-2xl: 32px;
+  --fui-surface-inset-compact: calc(var(--fui-scale, 1) * 12px);
+  --fui-surface-inset-default: calc(var(--fui-scale, 1) * 16px);
+  --fui-surface-inset-roomy: calc(var(--fui-scale, 1) * 24px);
+  --fui-icon-xs: calc(var(--fui-scale, 1) * 12px);
+  --fui-icon-sm: calc(var(--fui-scale, 1) * 14px);
+  --fui-icon-md: calc(var(--fui-scale, 1) * 16px);
+  --fui-icon-lg: calc(var(--fui-scale, 1) * 20px);
+  --fui-icon-xl: calc(var(--fui-scale, 1) * 24px);
+  --fui-icon-2xl: calc(var(--fui-scale, 1) * 32px);
   --fui-stroke-hairline: 1px;
   --fui-stroke-default: 2px;
-  --fui-stroke-strong: 3px;
-  --fui-layout-measure-field-minimum: 140px;
-  --fui-layout-measure-inline-floor: 56px;
-  --fui-layout-measure-compact-content: 168px;
-  --fui-layout-measure-grid-cell: 224px;
-  --fui-layout-measure-composer-item: 210px;
-  --fui-layout-measure-page-narrow: 800px;
+  --fui-stroke-strong: calc(var(--fui-scale, 1) * 3px);
+  --fui-layout-measure-field-minimum: calc(var(--fui-scale, 1) * 140px);
+  --fui-layout-measure-inline-floor: calc(var(--fui-scale, 1) * 56px);
+  --fui-layout-measure-compact-content: calc(var(--fui-scale, 1) * 168px);
+  --fui-layout-measure-menu-min: calc(var(--fui-scale, 1) * 192px);
+  --fui-layout-measure-grid-cell: calc(var(--fui-scale, 1) * 224px);
+  --fui-layout-measure-composer-item: calc(var(--fui-scale, 1) * 210px);
+  --fui-layout-measure-page-narrow: calc(var(--fui-scale, 1) * 800px);
+  --fui-overlay-popover-min: calc(var(--fui-scale, 1) * 192px);
+  --fui-overlay-popover-sm: calc(var(--fui-scale, 1) * 256px);
+  --fui-overlay-popover-md: calc(var(--fui-scale, 1) * 384px);
+  --fui-overlay-popover-lg: calc(var(--fui-scale, 1) * 512px);
+  --fui-overlay-tooltip-max: calc(var(--fui-scale, 1) * 320px);
+  --fui-overlay-dialog-sm: calc(var(--fui-scale, 1) * 384px);
+  --fui-overlay-dialog-md: calc(var(--fui-scale, 1) * 448px);
+  --fui-overlay-dialog-lg: calc(var(--fui-scale, 1) * 576px);
+  --fui-overlay-dialog-xl: calc(var(--fui-scale, 1) * 768px);
+  --fui-overlay-drawer-sm: calc(var(--fui-scale, 1) * 320px);
+  --fui-overlay-drawer-md: calc(var(--fui-scale, 1) * 384px);
+  --fui-overlay-drawer-lg: calc(var(--fui-scale, 1) * 512px);
+  --fui-overlay-drawer-xl: calc(var(--fui-scale, 1) * 768px);
   --fui-type-caption-size: 12px;
   --fui-type-caption-line: 16px;
   --fui-type-caption-weight: 400;
@@ -65,6 +79,10 @@
   --fui-type-body-relaxed-line: 24px;
   --fui-type-body-relaxed-weight: 400;
   --fui-type-body-relaxed-tracking: 0;
+  --fui-type-display-size: 32px;
+  --fui-type-display-line: 40px;
+  --fui-type-display-weight: 600;
+  --fui-type-display-tracking: -0.02em;
   --fui-type-title-sm-size: 16px;
   --fui-type-title-sm-line: 24px;
   --fui-type-title-sm-weight: 600;
@@ -81,11 +99,11 @@
   --fui-type-code-line: 20px;
   --fui-type-code-weight: 400;
   --fui-type-code-tracking: 0;
-  --fui-navigation-app-shell-header-height: 56px;
-  --fui-navigation-sidebar-gutter: 8px;
-  --fui-navigation-sidebar-leading-box: 16px;
-  --fui-navigation-sidebar-dot: 6px;
+  --fui-navigation-app-shell-header-height: calc(var(--fui-scale, 1) * 56px);
+  --fui-navigation-sidebar-gutter: calc(var(--fui-scale, 1) * 8px);
+  --fui-navigation-sidebar-leading-box: calc(var(--fui-scale, 1) * 16px);
+  --fui-navigation-sidebar-dot: calc(var(--fui-scale, 1) * 6px);
   --fui-navigation-sidebar-rail: 2px;
   --fui-navigation-sidebar-label-offset: 1px;
-  --fui-navigation-sidebar-collapsed-width: 56px;
+  --fui-navigation-sidebar-collapsed-width: calc(var(--fui-scale, 1) * 56px);
 }