@usefragments/ui 1.5.3 → 1.6.0

package/src/recipes/table-chrome.ts

@@ -0,0 +1,30 @@
+import { MEASUREMENT_PROFILES, measurementPx } from "../measurements";
+
+export type TableDensity = "compact" | "regular" | "relaxed";
+export type TableDensityInput = TableDensity | "condensed";
+export type LegacyTableSize = "sm" | "md" | "compact";
+
+export const TABLE_ROW_TRACKS: Readonly<Record<TableDensity, number>> = Object.freeze({
+  compact: measurementPx(MEASUREMENT_PROFILES.rawSpace[32], "rawSpace.32"),
+  regular: measurementPx(MEASUREMENT_PROFILES.rawSpace[40], "rawSpace.40"),
+  relaxed: measurementPx(MEASUREMENT_PROFILES.rawSpace[48], "rawSpace.48"),
+});
+
+export function resolveTableDensity(input: {
+  density?: TableDensityInput;
+  size?: LegacyTableSize;
+}): TableDensity {
+  if (input.density !== undefined) {
+    return input.density === "condensed" ? "compact" : input.density;
+  }
+
+  if (input.size === "sm" || input.size === "compact") {
+    return "compact";
+  }
+
+  return "regular";
+}
+
+export function resolveTableRowTrack(density: TableDensity): number {
+  return TABLE_ROW_TRACKS[density];
+}

package/src/styles/globals.scss

@@ -31,7 +31,7 @@ $fui-radius-style: "default" !default;
 // Status seeds tuned to sit in one family with the sage brand (see
 // tokens/_seeds.scss): danger is sage's warm complement, warning its
 // split-complement, info a cool teal-adjacent slate — all muted to match.
-$fui-danger: #d97066 !default;
+$fui-danger: #a54f46 !default;
 $fui-success: #7fc9b3 !default;
 $fui-warning: #e0aa5c !default;
 $fui-info: #7fa6c4 !default;
@@ -60,7 +60,7 @@ $fui-info: #7fa6c4 !default;
 // Consumer styles outside any @layer always win over layered styles.
 // Within layers: tokens < base < components (declared first = lowest priority).
 // Browser support: ~97% (Chrome 99+, Firefox 97+, Safari 15.4+)
-@layer fui.tokens, fui.base;
+@layer fui.tokens, fui.base, fui.components;
 
 // Output typed @property registrations (must be top-level, can't be in @layer)
 @include prop-reg.fui-property-registrations;

package/src/tokens/_component-properties.scss

@@ -5,8 +5,8 @@
 // doing so would override each component's fallback/inheritance behavior.
 // Governance reads this file as the explicit vocabulary for dynamic values.
 @mixin fui-component-property-contract {
-  --fui-checkbox-radius: 0.25rem;
-  --fui-grid-min-child-width: 16rem;
+  --fui-checkbox-radius: var(--fui-radius-sm);
+  --fui-grid-min-child-width: var(--fui-layout-measure-grid-cell);
   --fui-line-clamp: 2;
   --fui-navmenu-viewport-height: 0px;
   --fui-navmenu-viewport-left: 0px;

package/src/tokens/_computed.scss

@@ -70,21 +70,21 @@ $computed-radius-full: radius.radius-full();
 // Computed: Component Heights (from density)
 // --------------------------------------------
 
-$computed-button-height-xs: density.px-to-rem($_density, map.get($_density, button-height-xs));
-$computed-button-height-sm: density.px-to-rem($_density, map.get($_density, button-height-sm));
-$computed-button-height-md: density.px-to-rem($_density, map.get($_density, button-height-md));
-$computed-button-height-lg: density.px-to-rem($_density, map.get($_density, button-height-lg));
-
-$computed-input-height: density.px-to-rem($_density, map.get($_density, input-height));
-$computed-input-height-sm: density.px-to-rem($_density, map.get($_density, input-height-sm));
-$computed-input-height-lg: density.px-to-rem($_density, map.get($_density, input-height-lg));
+// Canonical interactive control ladder
+$computed-control-height-xs: density.px-to-rem($_density, map.get($_density, control-height-xs));
+$computed-control-height-sm: density.px-to-rem($_density, map.get($_density, control-height-sm));
+$computed-control-height-md: density.px-to-rem($_density, map.get($_density, control-height-md));
+$computed-control-height-lg: density.px-to-rem($_density, map.get($_density, control-height-lg));
 
 $computed-touch-sm: density.px-to-rem($_density, map.get($_density, touch-sm));
 $computed-touch-md: density.px-to-rem($_density, map.get($_density, touch-md));
 $computed-touch-lg: density.px-to-rem($_density, map.get($_density, touch-lg));
 
 // Sidebar navigation (from density)
-$computed-sidebar-item-height: density.px-to-rem($_density, map.get($_density, sidebar-item-height));
+$computed-sidebar-item-height: density.px-to-rem(
+  $_density,
+  map.get($_density, sidebar-item-height)
+);
 
 // --------------------------------------------
 // Computed: Colors - Light Mode

package/src/tokens/_density.scss

@@ -2,109 +2,43 @@
 // @usefragments/ui Density Scales
 // ============================================
 //
-// Defines 3 density presets that control spacing and sizing.
-// Each preset uses a different base unit to scale all spacing.
+// Compatibility adapter over the generated Measurement Module. Existing Sass
+// callers keep their flat map/function API, while measurements.json remains the
+// only editable numeric owner.
 //
 // ============================================
 
-@use "sass:math";
 @use "sass:map";
+@use "sass:math";
+@use "measurements.generated" as measurements;
 
-// --------------------------------------------
-// Density Definitions
-// --------------------------------------------
-// Each density includes:
-// - base-unit: The fundamental spacing unit
-// - multipliers: Scale factors for spacing tokens
-
-$density-compact: (
-  base-unit: 6px,
-  base-font-size: 14px,
-  // Button heights (compact, with a 32px interactive floor)
-  button-height-xs: 32px,
-  button-height-sm: 32px,
-  button-height-md: 32px,
-  button-height-lg: 36px,
-  // 6 units
-  // Input height
-  input-height: 32px,
-  input-height-sm: 32px,
-  input-height-lg: 36px,
-  // 6 units
-  // Touch targets
-  touch-sm: 32px,
-  touch-md: 32px,
-  touch-lg: 40px,
-  // Sidebar navigation
-  sidebar-item-height: 32px,
-);
-
-$density-default: (
-  base-unit: 7px,
-  base-font-size: 14px,
-  // Button heights align with field heights at each size
-  button-height-xs: 32px,
-  button-height-sm: 32px,
-  button-height-md: 40px,
-  button-height-lg: 44px,
-  // ~6 units
-  // Input height
-  input-height: 40px,
-  // ~6 units
-  input-height-sm: 32px,
-  // ~4.5 units
-  input-height-lg: 44px,
-  // ~6 units
-  // Touch targets (baseline)
-  touch-sm: 32px,
-  touch-md: 32px,
-  touch-lg: 44px,
-  // WCAG AAA recommended
-  // Sidebar navigation
-  sidebar-item-height: 32px,
-);
+@function _adapt-density($name) {
+  @return (
+    base-unit: measurements.density-value($name, "baseUnit"),
+    base-font-size: measurements.density-value($name, "baseFontSize"),
+    spacing-multipliers: measurements.density-value($name, "spacingMultipliers"),
+    control-height-xs: measurements.density-nested-value($name, "controlHeight", "xs"),
+    control-height-sm: measurements.density-nested-value($name, "controlHeight", "sm"),
+    control-height-md: measurements.density-nested-value($name, "controlHeight", "md"),
+    control-height-lg: measurements.density-nested-value($name, "controlHeight", "lg"),
+    touch-sm: measurements.density-nested-value($name, "touch", "sm"),
+    touch-md: measurements.density-nested-value($name, "touch", "md"),
+    touch-lg: measurements.density-nested-value($name, "touch", "lg"),
+    sidebar-item-height: measurements.density-value($name, "sidebarItemHeight")
+  );
+}
 
-$density-relaxed: (
-  base-unit: 8px,
-  base-font-size: 14px,
-  // Button heights align with field heights at each size
-  button-height-xs: 32px,
-  button-height-sm: 32px,
-  button-height-md: 44px,
-  button-height-lg: 48px,
-  // 6 units
-  // Input height
-  input-height: 44px,
-  // ~5.5 units
-  input-height-sm: 32px,
-  // 4 units
-  input-height-lg: 48px,
-  // 6 units
-  // Touch targets (proportional from default, not blown out)
-  touch-sm: 32px,
-  touch-md: 40px,
-  touch-lg: 48px,
-  // +9% from default (unchanged)
-  // Sidebar navigation
-  sidebar-item-height: 36px,
-);
+$density-compact: _adapt-density("compact");
+$density-default: _adapt-density("default");
+$density-relaxed: _adapt-density("relaxed");
 
-// --------------------------------------------
-// Density Map for Dynamic Access
-// --------------------------------------------
 $densities: (
   "compact": $density-compact,
   "default": $density-default,
   "relaxed": $density-relaxed,
 );
 
-// --------------------------------------------
-// Helper Functions
-// --------------------------------------------
-
-/// Get a density configuration by name
-/// @param {String} $name - Density name (compact, default, relaxed)
-/// @return {Map} The density configuration map
+/// Get a density configuration by name.
 @function get-density($name) {
   @if not map.has-key($densities, $name) {
     @warn "Unknown density '#{$name}'. Using 'default' as fallback.";
@@ -113,10 +47,7 @@ $densities: (
   @return map.get($densities, $name);
 }
 
-/// Get a specific value from a density configuration
-/// @param {Map} $density - A density configuration map
-/// @param {String} $key - The key to retrieve
-/// @return {*} The value
+/// Get a specific value from a density configuration.
 @function density-value($density, $key) {
   @if not map.has-key($density, $key) {
     @warn "Unknown density key '#{$key}'.";
@@ -125,52 +56,30 @@ $densities: (
   @return map.get($density, $key);
 }
 
-/// Derive spacing scale from base unit
-/// Returns a map with spacing tokens
-/// @param {Map} $density - A density configuration map
-/// @return {Map} Spacing tokens
+/// Derive the legacy density-responsive spacing map from generated values.
 @function derive-spacing($density) {
   $base: map.get($density, base-unit);
   $font-size: map.get($density, base-font-size);
-
-  // Convert to rem based on font size
-  // 1 unit = base-unit / font-size * 1rem
   $unit-rem: math.div($base, $font-size) * 1rem;
+  $multipliers: map.get($density, spacing-multipliers);
 
   @return (
-    // Micro spacing (pixel-precise for tiny alignments)
-    px: 1px,
-    0-5: $unit-rem * 0.3,
-    // ~2px for 7px base
-    0-75: $unit-rem * 0.43,
-
-    // ~3px for 7px base
-    // Standard spacing scale
-    1: $unit-rem,
-    // 1 unit
-    2: $unit-rem * 2,
-    // 2 units
-    3: $unit-rem * 3,
-    // 3 units
-    4: $unit-rem * 4,
-    // 4 units
-    5: $unit-rem * 5,
-    // 5 units
-    6: $unit-rem * 6,
-    // 6 units
-    8: $unit-rem * 8,
-    // 8 units
-    10: $unit-rem * 10,
-    // 10 units
-    12: $unit-rem * 12 // 12 units
+    px: map.get($multipliers, "px"),
+    0-5: $unit-rem * map.get($multipliers, "0-5"),
+    0-75: $unit-rem * map.get($multipliers, "0-75"),
+    1: $unit-rem * map.get($multipliers, "1"),
+    2: $unit-rem * map.get($multipliers, "2"),
+    3: $unit-rem * map.get($multipliers, "3"),
+    4: $unit-rem * map.get($multipliers, "4"),
+    5: $unit-rem * map.get($multipliers, "5"),
+    6: $unit-rem * map.get($multipliers, "6"),
+    8: $unit-rem * map.get($multipliers, "8"),
+    10: $unit-rem * map.get($multipliers, "10"),
+    12: $unit-rem * map.get($multipliers, "12")
   );
 }
 
-/// Convert pixel value to rem based on density
-/// @param {Map} $density - A density configuration map
-/// @param {Number} $px - Pixel value to convert
-/// @return {Number} Value in rem
+/// Convert a pixel value to rem based on a density profile.
 @function px-to-rem($density, $px) {
-  $font-size: map.get($density, base-font-size);
-  @return math.div($px, $font-size) * 1rem;
+  @return math.div($px, map.get($density, base-font-size)) * 1rem;
 }

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

@@ -0,0 +1,91 @@
+/* This file is generated by scripts/generate-measurements.mjs. Do not edit. */
+/* Source SHA-256: 1e8a256c12eaf2f8f4a2a5c4ed25477bf303b56dc2184ac3e29dec71207853bd */
+
+: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-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-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-type-caption-size: 12px;
+  --fui-type-caption-line: 16px;
+  --fui-type-caption-weight: 400;
+  --fui-type-caption-tracking: 0;
+  --fui-type-ui-compact-size: 12px;
+  --fui-type-ui-compact-line: 16px;
+  --fui-type-ui-compact-weight: 500;
+  --fui-type-ui-compact-tracking: -0.01em;
+  --fui-type-ui-standard-size: 14px;
+  --fui-type-ui-standard-line: 20px;
+  --fui-type-ui-standard-weight: 500;
+  --fui-type-ui-standard-tracking: -0.01em;
+  --fui-type-body-compact-size: 14px;
+  --fui-type-body-compact-line: 20px;
+  --fui-type-body-compact-weight: 400;
+  --fui-type-body-compact-tracking: 0;
+  --fui-type-body-relaxed-size: 16px;
+  --fui-type-body-relaxed-line: 24px;
+  --fui-type-body-relaxed-weight: 400;
+  --fui-type-body-relaxed-tracking: 0;
+  --fui-type-title-sm-size: 16px;
+  --fui-type-title-sm-line: 24px;
+  --fui-type-title-sm-weight: 600;
+  --fui-type-title-sm-tracking: -0.01em;
+  --fui-type-title-md-size: 20px;
+  --fui-type-title-md-line: 28px;
+  --fui-type-title-md-weight: 600;
+  --fui-type-title-md-tracking: -0.02em;
+  --fui-type-title-lg-size: 24px;
+  --fui-type-title-lg-line: 32px;
+  --fui-type-title-lg-weight: 600;
+  --fui-type-title-lg-tracking: -0.02em;
+  --fui-type-code-size: 14px;
+  --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-sidebar-rail: 2px;
+  --fui-navigation-sidebar-label-offset: 1px;
+  --fui-navigation-sidebar-collapsed-width: 56px;
+}