@usefragments/ui 1.5.4 → 1.7.0

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

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

package/src/tokens/_measurements.generated.scss

@@ -0,0 +1,617 @@
+// This file is generated by scripts/generate-measurements.mjs. Do not edit.
+// Source SHA-256: deb4b375de296c627460bd2d99618182ae0fa21768c26b2037d549cd84a7a0c8
+
+@use "sass:map";
+@use "sass:math";
+
+$density-profile-names: ("compact", "default", "relaxed");
+$radius-profile-names: ("sharp", "subtle", "default", "rounded", "pill");
+$typography-role-names: (
+  "caption",
+  "ui-compact",
+  "ui-standard",
+  "body-compact",
+  "body-relaxed",
+  "title-sm",
+  "title-md",
+  "title-lg",
+  "display",
+  "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,
+  ),
+  "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,
+  ),
+);
+
+$radius-profiles: (
+  "sharp": (
+    "sm": 0,
+    "md": 0,
+    "lg": 0,
+    "xl": 0,
+  ),
+  "subtle": (
+    "sm": 0.125rem,
+    "md": 0.25rem,
+    "lg": 0.375rem,
+    "xl": 0.5rem,
+  ),
+  "default": (
+    "sm": 0.25rem,
+    "md": 0.429rem,
+    "lg": 0.571rem,
+    "xl": 0.857rem,
+  ),
+  "rounded": (
+    "sm": 0.375rem,
+    "md": 0.5rem,
+    "lg": 0.75rem,
+    "xl": 1rem,
+  ),
+  "pill": (
+    "sm": 0.5rem,
+    "md": 0.75rem,
+    "lg": 1rem,
+    "xl": 1.5rem,
+  ),
+);
+
+$raw-space: (
+  "0": 0,
+  "2": 2px,
+  "4": 4px,
+  "6": 6px,
+  "8": 8px,
+  "10": 10px,
+  "12": 12px,
+  "16": 16px,
+  "20": 20px,
+  "24": 24px,
+  "32": 32px,
+  "40": 40px,
+  "48": 48px,
+  "64": 64px,
+);
+
+$targets: (
+  "controlTrack": (
+    "micro": 24px,
+    "sm": 28px,
+    "md": 32px,
+    "lg": 40px,
+  ),
+  "fieldTrack": (
+    "sm": 28px,
+    "md": 32px,
+    "lg": 40px,
+  ),
+  "fieldInlineInset": (
+    "sm": 10px,
+    "md": 12px,
+    "lg": 16px,
+  ),
+  "surfaceInset": (
+    "panel": 0,
+    "compact": 12px,
+    "default": 16px,
+    "roomy": 24px,
+  ),
+  "icon": (
+    "xs": 12px,
+    "sm": 14px,
+    "md": 16px,
+    "lg": 20px,
+    "xl": 24px,
+    "2xl": 32px,
+  ),
+  "stroke": (
+    "hairline": 1px,
+    "default": 2px,
+    "strong": 3px,
+  ),
+  "layoutMeasure": (
+    "field-minimum": 140px,
+    "inline-floor": 56px,
+    "compact-content": 168px,
+    "menu-min": 192px,
+    "grid-cell": 224px,
+    "composer-item": 210px,
+    "page-narrow": 800px,
+  ),
+);
+
+$typography: (
+  "caption": (
+    "size": 12px,
+    "line": 16px,
+    "weight": 400,
+    "tracking": 0,
+  ),
+  "ui-compact": (
+    "size": 12px,
+    "line": 16px,
+    "weight": 500,
+    "tracking": -0.01em,
+  ),
+  "ui-standard": (
+    "size": 14px,
+    "line": 20px,
+    "weight": 500,
+    "tracking": -0.01em,
+  ),
+  "body-compact": (
+    "size": 14px,
+    "line": 20px,
+    "weight": 400,
+    "tracking": 0,
+  ),
+  "body-relaxed": (
+    "size": 16px,
+    "line": 24px,
+    "weight": 400,
+    "tracking": 0,
+  ),
+  "display": (
+    "size": 32px,
+    "line": 40px,
+    "weight": 600,
+    "tracking": -0.02em,
+  ),
+  "title-sm": (
+    "size": 16px,
+    "line": 24px,
+    "weight": 600,
+    "tracking": -0.01em,
+  ),
+  "title-md": (
+    "size": 20px,
+    "line": 28px,
+    "weight": 600,
+    "tracking": -0.02em,
+  ),
+  "title-lg": (
+    "size": 24px,
+    "line": 32px,
+    "weight": 600,
+    "tracking": -0.02em,
+  ),
+  "code": (
+    "size": 14px,
+    "line": 20px,
+    "weight": 400,
+    "tracking": 0,
+  ),
+);
+
+$legacy: (
+  "typography": (
+    "fontSize": (
+      "2xs": 0.714rem,
+      "xs": 0.857rem,
+      "sm": 1rem,
+      "base": 1rem,
+      "md": 1.071rem,
+      "lg": 1.429rem,
+      "xl": 1.714rem,
+      "2xl": 2.143rem,
+      "3xl": 2.571rem,
+      "4xl": 3.429rem,
+    ),
+    "fontWeight": (
+      "normal": 400,
+      "medium": 500,
+      "semibold": 600,
+      "bold": 700,
+    ),
+    "lineHeight": (
+      "tight": 1.25,
+      "normal": 1.5,
+      "relaxed": 1.625,
+      "display": 1.1,
+      "prose": 1.7,
+    ),
+    "letterSpacing": (
+      "tight": 0,
+      "normal": normal,
+      "display": 0,
+      "wide": 0.05em,
+    ),
+  ),
+  "icon": (
+    "xs": 0.857rem,
+    "sm": 1rem,
+    "md": 1.143rem,
+    "lg": 1.429rem,
+    "xl": 1.714rem,
+    "2xl": 2.286rem,
+  ),
+  "touch": (
+    "minimum": 2.286rem,
+  ),
+  "navigation": (
+    "appShellHeaderHeight": 56px,
+    "sidebarGutter": 8px,
+    "sidebarLeadingBox": 16px,
+    "sidebarDot": 6px,
+    "sidebarRail": 2px,
+    "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}.";
+  }
+  @return map.get($density-profiles, $name);
+}
+
+@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);
+  @if not map.has-key($values, $key) {
+    @error "Unknown density measurement '#{$group}.#{$key}' for '#{$name}'.";
+  }
+  @return map.get($values, $key);
+}
+
+@function density-px-to-rem($name, $value) {
+  @return math.div($value, density-value($name, "baseFontSize")) * 1rem;
+}
+
+@function density-spacing($name, $step) {
+  $multipliers: density-value($name, "spacingMultipliers");
+  $key: "#{$step}";
+  @if not map.has-key($multipliers, $key) {
+    @error "Unknown density 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;
+}
+
+@function radius-profile($name) {
+  @if not map.has-key($radius-profiles, $name) {
+    @error "Unknown measurement radius '#{$name}'. Expected one of: #{$radius-profile-names}.";
+  }
+  @return map.get($radius-profiles, $name);
+}
+
+@function radius-value($name, $size) {
+  $profile: radius-profile($name);
+  @if not map.has-key($profile, $size) {
+    @error "Unknown radius measurement '#{$size}' for '#{$name}'.";
+  }
+  @return map.get($profile, $size);
+}
+
+@function raw-space($step) {
+  $key: "#{$step}";
+  @if not map.has-key($raw-space, $key) {
+    @error "Unknown fixed raw-space step '#{$step}'.";
+  }
+  @return map.get($raw-space, $key);
+}
+
+@function target-value($group, $size) {
+  @if not map.has-key($targets, $group) {
+    @error "Unknown target measurement group '#{$group}'.";
+  }
+  $values: map.get($targets, $group);
+  @if not map.has-key($values, $size) {
+    @error "Unknown target measurement '#{$group}.#{$size}'.";
+  }
+  @return map.get($values, $size);
+}
+
+@function typography-value($role, $property) {
+  @if not map.has-key($typography, $role) {
+    @error "Unknown typography role '#{$role}'. Expected one of: #{$typography-role-names}.";
+  }
+  $record: map.get($typography, $role);
+  @if not map.has-key($record, $property) {
+    @error "Unknown typography property '#{$property}' for '#{$role}'.";
+  }
+  @return map.get($record, $property);
+}
+
+@function navigation-value($role) {
+  $navigation: map.get($legacy, "navigation");
+  @if not map.has-key($navigation, $role) {
+    @error "Unknown navigation measurement '#{$role}'.";
+  }
+  @return map.get($navigation, $role);
+}
+
+@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-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-menu-min: 192px;
+  --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-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;
+  --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;
+}
+
+@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"))};
+}
+
+@mixin emit-radius-profile($name) {
+  --fui-radius-sm: #{radius-value($name, "sm")};
+  --fui-radius-md: #{radius-value($name, "md")};
+  --fui-radius-lg: #{radius-value($name, "lg")};
+  --fui-radius-xl: #{radius-value($name, "xl")};
+}