@usefragments/ui 1.7.0 → 2.0.0

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

@@ -1,51 +1,64 @@
 /* This file is generated by scripts/generate-measurements.mjs. Do not edit. */
-/* Source SHA-256: deb4b375de296c627460bd2d99618182ae0fa21768c26b2037d549cd84a7a0c8 */
+/* 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-menu-min: 192px;
-  --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;
@@ -86,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);
 }

package/src/tokens/_measurements.generated.scss

@@ -1,10 +1,9 @@
 // This file is generated by scripts/generate-measurements.mjs. Do not edit.
-// Source SHA-256: deb4b375de296c627460bd2d99618182ae0fa21768c26b2037d549cd84a7a0c8
+// Source SHA-256: 2783cbbef495c746894385914699542d96008deb952c3f3ab6adf84bf3fac80d
 
 @use "sass:map";
 @use "sass:math";
 
-$density-profile-names: ("compact", "default", "relaxed");
 $radius-profile-names: ("sharp", "subtle", "default", "rounded", "pill");
 $typography-role-names: (
   "caption",
@@ -19,97 +18,29 @@ $typography-role-names: (
   "code"
 );
 
-$density-profiles: (
-  "compact": (
-    "baseUnit": 6px,
-    "baseFontSize": 14px,
-    "spacingMultipliers": (
-      "1": 1,
-      "2": 2,
-      "3": 3,
-      "4": 4,
-      "5": 5,
-      "6": 6,
-      "8": 8,
-      "10": 10,
-      "12": 12,
-      "px": 1px,
-      "0-5": 0.3,
-      "0-75": 0.43,
-    ),
-    "controlHeight": (
-      "xs": 32px,
-      "sm": 32px,
-      "md": 32px,
-      "lg": 36px,
-    ),
-    "touch": (
-      "sm": 32px,
-      "md": 32px,
-      "lg": 40px,
-    ),
-    "sidebarItemHeight": 32px,
-  ),
-  "default": (
-    "baseUnit": 7px,
-    "baseFontSize": 14px,
-    "spacingMultipliers": (
-      "1": 1,
-      "2": 2,
-      "3": 3,
-      "4": 4,
-      "5": 5,
-      "6": 6,
-      "8": 8,
-      "10": 10,
-      "12": 12,
-      "px": 1px,
-      "0-5": 0.3,
-      "0-75": 0.43,
-    ),
-    "controlHeight": (
-      "xs": 32px,
-      "sm": 32px,
-      "md": 40px,
-      "lg": 44px,
-    ),
-    "touch": (
-      "sm": 32px,
-      "md": 32px,
-      "lg": 44px,
-    ),
-    "sidebarItemHeight": 32px,
+$spacing: (
+  "baseUnit": 7px,
+  "baseFontSize": 14px,
+  "multipliers": (
+    "1": 1,
+    "2": 2,
+    "3": 3,
+    "4": 4,
+    "5": 5,
+    "6": 6,
+    "8": 8,
+    "10": 10,
+    "12": 12,
+    "px": 1px,
+    "0-5": 0.3,
+    "0-75": 0.43,
   ),
-  "relaxed": (
-    "baseUnit": 8px,
-    "baseFontSize": 14px,
-    "spacingMultipliers": (
-      "1": 1,
-      "2": 2,
-      "3": 3,
-      "4": 4,
-      "5": 5,
-      "6": 6,
-      "8": 8,
-      "10": 10,
-      "12": 12,
-      "px": 1px,
-      "0-5": 0.3,
-      "0-75": 0.43,
-    ),
-    "controlHeight": (
-      "xs": 32px,
-      "sm": 32px,
-      "md": 44px,
-      "lg": 48px,
-    ),
-    "touch": (
-      "sm": 32px,
-      "md": 40px,
-      "lg": 48px,
-    ),
-    "sidebarItemHeight": 36px,
+  "touch": (
+    "sm": 32px,
+    "md": 32px,
+    "lg": 44px,
   ),
+  "sidebarItemHeight": 32px,
 );
 
 $radius-profiles: (
@@ -207,6 +138,21 @@ $targets: (
     "composer-item": 210px,
     "page-narrow": 800px,
   ),
+  "overlay": (
+    "popover-min": 192px,
+    "popover-sm": 256px,
+    "popover-md": 384px,
+    "popover-lg": 512px,
+    "tooltip-max": 320px,
+    "dialog-sm": 384px,
+    "dialog-md": 448px,
+    "dialog-lg": 576px,
+    "dialog-xl": 768px,
+    "drawer-sm": 320px,
+    "drawer-md": 384px,
+    "drawer-lg": 512px,
+    "drawer-xl": 768px,
+  ),
 );
 
 $typography: (
@@ -326,109 +272,38 @@ $legacy: (
     "sidebarLabelOffset": 1px,
     "sidebarCollapsedWidth": 56px,
   ),
-  "docsDensity": (
-    "compact": (
-      "baseUnit": 6,
-      "baseFontSize": 14,
-      "buttonHeights": (
-        24,
-        30,
-        36,
-      ),
-      "inputHeights": (
-        24,
-        32,
-        36,
-      ),
-      "touchTargets": (
-        24,
-        28,
-        38,
-      ),
-      "sidebarItemHeight": 30,
-    ),
-    "default": (
-      "baseUnit": 7,
-      "baseFontSize": 14,
-      "buttonHeights": (
-        28,
-        36,
-        44,
-      ),
-      "inputHeights": (
-        28,
-        40,
-        44,
-      ),
-      "touchTargets": (
-        24,
-        32,
-        44,
-      ),
-      "sidebarItemHeight": 35,
-    ),
-    "relaxed": (
-      "baseUnit": 8,
-      "baseFontSize": 14,
-      "buttonHeights": (
-        32,
-        40,
-        48,
-      ),
-      "inputHeights": (
-        32,
-        44,
-        48,
-      ),
-      "touchTargets": (
-        28,
-        36,
-        48,
-      ),
-      "sidebarItemHeight": 38,
-    ),
-  ),
 );
 
-@function density-profile($name) {
-  @if not map.has-key($density-profiles, $name) {
-    @error "Unknown measurement density '#{$name}'. Expected one of: #{$density-profile-names}.";
+@function spacing-value($key) {
+  @if not map.has-key($spacing, $key) {
+    @error "Unknown spacing measurement '#{$key}'.";
   }
-  @return map.get($density-profiles, $name);
+  @return map.get($spacing, $key);
 }
 
-@function density-value($name, $key) {
-  $profile: density-profile($name);
-  @if not map.has-key($profile, $key) {
-    @error "Unknown density measurement '#{$key}' for '#{$name}'.";
-  }
-  @return map.get($profile, $key);
-}
-
-@function density-nested-value($name, $group, $key) {
-  $values: density-value($name, $group);
+@function spacing-nested-value($group, $key) {
+  $values: spacing-value($group);
   @if not map.has-key($values, $key) {
-    @error "Unknown density measurement '#{$group}.#{$key}' for '#{$name}'.";
+    @error "Unknown spacing measurement '#{$group}.#{$key}'.";
   }
   @return map.get($values, $key);
 }
 
-@function density-px-to-rem($name, $value) {
-  @return math.div($value, density-value($name, "baseFontSize")) * 1rem;
+@function spacing-px-to-rem($value) {
+  @return math.div($value, spacing-value("baseFontSize")) * 1rem;
 }
 
-@function density-spacing($name, $step) {
-  $multipliers: density-value($name, "spacingMultipliers");
+@function spacing-step($step) {
+  $multipliers: spacing-value("multipliers");
   $key: "#{$step}";
   @if not map.has-key($multipliers, $key) {
-    @error "Unknown density spacing step '#{$step}'.";
+    @error "Unknown spacing step '#{$step}'.";
   }
   $multiplier: map.get($multipliers, $key);
   @if $key == "px" {
     @return $multiplier;
   }
-  @return math.div(density-value($name, "baseUnit"), density-value($name, "baseFontSize")) *
-    $multiplier * 1rem;
+  @return math.div(spacing-value("baseUnit"), spacing-value("baseFontSize")) * $multiplier * 1rem;
 }
 
 @function radius-profile($name) {
@@ -487,48 +362,61 @@ $legacy: (
 @mixin emit-fixed-custom-properties {
   --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-menu-min: 192px;
-  --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;
@@ -569,44 +457,13 @@ $legacy: (
   --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;
-}
-
-@mixin emit-density-profile($name) {
-  --fui-base-unit: #{density-value($name, "baseUnit")};
-  --fui-space-0-5: #{density-spacing($name, "0-5")};
-  --fui-space-0-75: #{density-spacing($name, "0-75")};
-  --fui-space-1: #{density-spacing($name, "1")};
-  --fui-space-2: #{density-spacing($name, "2")};
-  --fui-space-3: #{density-spacing($name, "3")};
-  --fui-space-4: #{density-spacing($name, "4")};
-  --fui-space-5: #{density-spacing($name, "5")};
-  --fui-space-6: #{density-spacing($name, "6")};
-  --fui-space-8: #{density-spacing($name, "8")};
-  --fui-space-10: #{density-spacing($name, "10")};
-  --fui-space-12: #{density-spacing($name, "12")};
-  --fui-control-height-xs: var(--fui-control-track-micro, #{target-value("controlTrack", "micro")});
-  --fui-control-height-sm: var(--fui-control-track-sm, #{target-value("controlTrack", "sm")});
-  --fui-control-height-md: var(--fui-control-track-md, #{target-value("controlTrack", "md")});
-  --fui-control-height-lg: var(--fui-control-track-lg, #{target-value("controlTrack", "lg")});
-  --fui-button-height-xs: var(--fui-control-height-xs);
-  --fui-button-height-sm: var(--fui-control-height-sm);
-  --fui-button-height-md: var(--fui-control-height-md);
-  --fui-button-height-lg: var(--fui-control-height-lg);
-  --fui-input-height-sm: var(--fui-field-track-sm, #{target-value("fieldTrack", "sm")});
-  --fui-input-height: var(--fui-field-track-md, #{target-value("fieldTrack", "md")});
-  --fui-input-height-lg: var(--fui-field-track-lg, #{target-value("fieldTrack", "lg")});
-  --fui-touch-sm: #{density-px-to-rem($name, density-nested-value($name, "touch", "sm"))};
-  --fui-touch-md: #{density-px-to-rem($name, density-nested-value($name, "touch", "md"))};
-  --fui-touch-lg: #{density-px-to-rem($name, density-nested-value($name, "touch", "lg"))};
-  --fui-target-size-min: var(--fui-touch-sm);
-  --fui-sidebar-item-height: #{density-px-to-rem($name, density-value($name, "sidebarItemHeight"))};
+  --fui-navigation-sidebar-collapsed-width: calc(var(--fui-scale, 1) * 56px);
 }
 
 @mixin emit-radius-profile($name) {