@usefragments/ui 1.6.0 → 2.0.0

package/src/measurements/measurements.json

@@ -1,97 +1,29 @@
 {
   "$schema": "https://usefragments.com/schemas/ui-measurements.v1.json",
   "schemaVersion": 1,
-  "density": {
-    "compact": {
-      "baseUnit": "6px",
-      "baseFontSize": "14px",
-      "spacingMultipliers": {
-        "px": "1px",
-        "0-5": 0.3,
-        "0-75": 0.43,
-        "1": 1,
-        "2": 2,
-        "3": 3,
-        "4": 4,
-        "5": 5,
-        "6": 6,
-        "8": 8,
-        "10": 10,
-        "12": 12
-      },
-      "controlHeight": {
-        "xs": "32px",
-        "sm": "32px",
-        "md": "32px",
-        "lg": "36px"
-      },
-      "touch": {
-        "sm": "32px",
-        "md": "32px",
-        "lg": "40px"
-      },
-      "sidebarItemHeight": "32px"
+  "spacing": {
+    "baseUnit": "7px",
+    "baseFontSize": "14px",
+    "multipliers": {
+      "px": "1px",
+      "0-5": 0.3,
+      "0-75": 0.43,
+      "1": 1,
+      "2": 2,
+      "3": 3,
+      "4": 4,
+      "5": 5,
+      "6": 6,
+      "8": 8,
+      "10": 10,
+      "12": 12
     },
-    "default": {
-      "baseUnit": "7px",
-      "baseFontSize": "14px",
-      "spacingMultipliers": {
-        "px": "1px",
-        "0-5": 0.3,
-        "0-75": 0.43,
-        "1": 1,
-        "2": 2,
-        "3": 3,
-        "4": 4,
-        "5": 5,
-        "6": 6,
-        "8": 8,
-        "10": 10,
-        "12": 12
-      },
-      "controlHeight": {
-        "xs": "32px",
-        "sm": "32px",
-        "md": "40px",
-        "lg": "44px"
-      },
-      "touch": {
-        "sm": "32px",
-        "md": "32px",
-        "lg": "44px"
-      },
-      "sidebarItemHeight": "32px"
+    "touch": {
+      "sm": "32px",
+      "md": "32px",
+      "lg": "44px"
     },
-    "relaxed": {
-      "baseUnit": "8px",
-      "baseFontSize": "14px",
-      "spacingMultipliers": {
-        "px": "1px",
-        "0-5": 0.3,
-        "0-75": 0.43,
-        "1": 1,
-        "2": 2,
-        "3": 3,
-        "4": 4,
-        "5": 5,
-        "6": 6,
-        "8": 8,
-        "10": 10,
-        "12": 12
-      },
-      "controlHeight": {
-        "xs": "32px",
-        "sm": "32px",
-        "md": "44px",
-        "lg": "48px"
-      },
-      "touch": {
-        "sm": "32px",
-        "md": "40px",
-        "lg": "48px"
-      },
-      "sidebarItemHeight": "36px"
-    }
+    "sidebarItemHeight": "32px"
   },
   "radius": {
     "sharp": {
@@ -181,9 +113,25 @@
       "field-minimum": "140px",
       "inline-floor": "56px",
       "compact-content": "168px",
+      "menu-min": "192px",
       "grid-cell": "224px",
       "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": {
@@ -217,6 +165,12 @@
       "weight": 400,
       "tracking": "0"
     },
+    "display": {
+      "size": "32px",
+      "line": "40px",
+      "weight": 600,
+      "tracking": "-0.02em"
+    },
     "title-sm": {
       "size": "16px",
       "line": "24px",
@@ -295,32 +249,6 @@
       "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
-      }
     }
   },
   "compatibility": {
@@ -331,7 +259,7 @@
         "finalOwner": "22"
       },
       {
-        "id": "legacy-density-spacing",
+        "id": "legacy-spacing",
         "patterns": ["--fui-space-*"],
         "finalOwner": "22"
       },

package/src/recipes/_action.scss

@@ -118,9 +118,9 @@
 @mixin icon-only($role) {
   @include size($role);
 
-  inline-size: var(--_fui-action-track);
-  block-size: var(--_fui-action-track);
-  min-block-size: var(--_fui-action-track);
+  inline-size: var(--_fui-action-track, #{track($role)});
+  block-size: var(--_fui-action-track, #{track($role)});
+  min-block-size: var(--_fui-action-track, #{track($role)});
   padding-inline: 0;
 }
 
@@ -132,7 +132,7 @@
 
 @mixin inline {
   min-block-size: auto;
-  padding: 0;
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   font: inherit;
   letter-spacing: inherit;
 }

package/src/recipes/_boolean-range.scss

@@ -32,10 +32,7 @@
 
 @function switch-inline-size($size) {
   @if $size == "sm" or $size == "md" or $size == "lg" {
-    @return var(
-      --fui-control-track-#{$size},
-      #{measurements.target-value("controlTrack", $size)}
-    );
+    @return var(--fui-control-track-#{$size}, #{measurements.target-value("controlTrack", $size)});
   }
 
   @error "Unknown boolean size '#{$size}'. Expected sm, md, or lg.";
@@ -81,8 +78,8 @@
   );
 
   display: grid;
-  grid-template-columns: var(--_fui-boolean-mark-size) minmax(0, 1fr);
-  column-gap: var(--_fui-boolean-label-gap);
+  grid-template-columns: var(--_fui-boolean-mark-size, #{mark-size($size)}) minmax(0, 1fr);
+  column-gap: var(--_fui-boolean-label-gap, #{label-gap($size)});
   align-items: start;
   @include typography.role($type-role);
 }
@@ -92,9 +89,13 @@
   block-size: mark-size($size);
 }
 
+// A bordered surface reads as a card, not a field row: the same inset on
+// every side, so a two-line item (label + helper) breathes as much above and
+// below as it does at its edges. The field track still sets the floor so a
+// one-line card sits level with an input beside it.
 @mixin card($size) {
   min-block-size: card-track($size);
-  padding-inline: field.inline-inset($size);
+  padding: field.inline-inset($size);
   box-sizing: border-box;
 }
 
@@ -102,16 +103,11 @@
   --_fui-switch-inline-size: #{switch-inline-size($size)};
   --_fui-switch-block-size: #{switch-block-size($size)};
   --_fui-switch-thumb-size: #{switch-thumb-size($size)};
-  --_fui-switch-inset: var(
-    --fui-stroke-default,
-    #{measurements.target-value("stroke", "default")}
-  );
-  --_fui-switch-travel: calc(
-    var(--_fui-switch-inline-size) - var(--_fui-switch-block-size)
-  );
+  --_fui-switch-inset: var(--fui-stroke-default, #{measurements.target-value("stroke", "default")});
+  --_fui-switch-travel: calc(var(--_fui-switch-inline-size) - var(--_fui-switch-block-size));
 
-  inline-size: var(--_fui-switch-inline-size);
-  block-size: var(--_fui-switch-block-size);
+  inline-size: var(--_fui-switch-inline-size, #{switch-inline-size($size)});
+  block-size: var(--_fui-switch-block-size, #{switch-block-size($size)});
 }
 
 @mixin slider-track {

package/src/recipes/_feedback.scss

@@ -1,15 +1,16 @@
+@use "../tokens/measurements.generated" as measurements;
 @use "action" as action;
 @use "surface" as surface;
 @use "target" as target;
 @use "typography" as typography;
 
-@function _raw($step, $fallback) {
-  @return var(--fui-raw-space-#{$step}, $fallback);
+@function _raw($step) {
+  @return var(--fui-raw-space-#{$step}, #{measurements.raw-space($step)});
 }
 
 @mixin icon {
-  inline-size: var(--fui-icon-lg, 20px);
-  block-size: var(--fui-icon-lg, 20px);
+  inline-size: var(--fui-icon-lg, #{measurements.target-value("icon", "lg")});
+  block-size: var(--fui-icon-lg, #{measurements.target-value("icon", "lg")});
   flex: 0 0 auto;
 }
 
@@ -27,7 +28,7 @@
 
   display: flex;
   align-items: center;
-  gap: var(--fui-feedback-content-gap, #{_raw(12, 12px)});
+  gap: #{_raw(12)};
 }
 
 @mixin transient {
@@ -36,7 +37,7 @@
 
   display: flex;
   align-items: center;
-  gap: var(--fui-feedback-transient-gap, #{_raw(8, 8px)});
+  gap: var(--fui-feedback-transient-gap, #{_raw(8)});
 }
 
 @mixin disclosure-row {
@@ -45,10 +46,10 @@
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  gap: _raw(8, 8px);
+  gap: _raw(8);
   min-block-size: action.track("md");
   padding-block: 0;
-  padding-inline: _raw(8, 8px);
+  padding-inline: _raw(8);
 }
 
 @mixin disclosure-glyph {
@@ -60,8 +61,8 @@
 @mixin disclosure-panel {
   @include body;
 
-  padding-block-end: _raw(12, 12px);
-  padding-inline: _raw(8, 8px);
+  padding-block-end: _raw(12);
+  padding-inline: _raw(8);
 }
 
 @mixin close {
@@ -89,8 +90,8 @@
     --_fui-feedback-empty-copy-weight: #{typography.weight("caption")};
     --_fui-feedback-empty-copy-tracking: #{typography.tracking("caption")};
 
-    padding-block: _raw(24, 24px);
-    padding-inline: _raw(16, 16px);
+    padding-block: _raw(24);
+    padding-inline: _raw(16);
   } @else if $size == "md" {
     --_fui-feedback-empty-icon-size: var(--fui-icon-2xl, 32px);
     --_fui-feedback-empty-max-inline: var(--fui-feedback-empty-max-inline-md, 320px);
@@ -103,8 +104,8 @@
     --_fui-feedback-empty-copy-weight: #{typography.weight("body-compact")};
     --_fui-feedback-empty-copy-tracking: #{typography.tracking("body-compact")};
 
-    padding-block: _raw(32, 32px);
-    padding-inline: _raw(24, 24px);
+    padding-block: _raw(32);
+    padding-inline: _raw(24);
   } @else if $size == "lg" {
     --_fui-feedback-empty-icon-size: var(--fui-feedback-empty-icon-lg, 40px);
     --_fui-feedback-empty-max-inline: var(--fui-feedback-empty-max-inline-lg, 400px);
@@ -117,8 +118,8 @@
     --_fui-feedback-empty-copy-weight: #{typography.weight("body-compact")};
     --_fui-feedback-empty-copy-tracking: #{typography.tracking("body-compact")};
 
-    padding-block: _raw(48, 48px);
-    padding-inline: _raw(32, 32px);
+    padding-block: _raw(48);
+    padding-inline: _raw(32);
   } @else {
     @error "Unknown empty-state size '#{$size}'. Expected sm, md, or lg.";
   }

package/src/recipes/_field.scss

@@ -1,5 +1,6 @@
 @use "../tokens/measurements.generated" as measurements;
 @use "../tokens/variables" as tokens;
+@use "../tokens/mixins" as mixins;
 @use "typography";
 
 @function track($size) {
@@ -39,9 +40,12 @@
   }
 }
 
+$_label-gap: measurements.raw-space(6);
+$_message-gap: measurements.raw-space(4);
+
 @mixin wrapper {
-  --fui-field-label-gap: var(--fui-raw-space-6, #{measurements.raw-space(6)});
-  --fui-field-message-gap: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+  --fui-field-label-gap: var(--fui-raw-space-6, #{$_label-gap});
+  --fui-field-message-gap: var(--fui-raw-space-4, #{$_message-gap});
 
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -50,49 +54,57 @@
 @mixin label {
   @include typography.role("ui-standard");
 
-  margin-block-end: var(--fui-field-label-gap);
+  margin-block-end: var(--fui-field-label-gap, #{$_label-gap});
 }
 
 @mixin helper {
   @include typography.role("caption");
 
-  margin-block-start: var(--fui-field-message-gap);
+  margin-block-start: var(--fui-field-message-gap, #{$_message-gap});
   color: var(--fui-text-secondary, #{tokens.$fui-text-secondary});
 }
 
 @mixin error {
   @include typography.role("caption");
 
-  margin-block-start: var(--fui-field-message-gap);
+  margin-block-start: var(--fui-field-message-gap, #{$_message-gap});
   color: var(--fui-color-danger-text, #{tokens.$fui-color-danger-text});
 }
 
 @mixin shell {
   box-sizing: border-box;
-  min-block-size: var(--_fui-field-track);
-  padding-inline: var(--_fui-field-inline-inset);
-  border: var(--_fui-field-stroke) solid var(--fui-border, #{tokens.$fui-border});
+  // Fallbacks are the md defaults; `size()` sets the channels per field size.
+  min-block-size: var(--_fui-field-track, #{track("md")});
+  padding-inline: var(--_fui-field-inline-inset, #{inline-inset("md")});
+  border: var(--_fui-field-stroke, #{stroke()}) solid var(--fui-border, #{tokens.$fui-border});
   border-radius: var(--fui-radius-md, #{tokens.$fui-radius-md});
   background: var(--fui-bg-primary, #{tokens.$fui-bg-primary});
   color: var(--fui-text-primary, #{tokens.$fui-text-primary});
 }
 
-@mixin focus-state {
-  border-color: var(--fui-color-accent, #{tokens.$fui-color-accent});
+// One ring for every field state: the edge takes the state colour, the ring
+// is that colour at 34%. Focus, open popup, and focus-within all use it.
+@mixin _ring($color) {
   outline: var(--fui-focus-ring-width, #{tokens.$fui-focus-ring-width}) solid
-    color-mix(in srgb, var(--fui-focus-ring-color, #{tokens.$fui-focus-ring-color}) 34%, transparent);
+    color-mix(in srgb, #{$color} 34%, transparent);
   outline-offset: var(--fui-focus-ring-offset, #{tokens.$fui-focus-ring-offset});
 }
 
+@mixin focus-state {
+  border-color: var(--fui-color-accent, #{tokens.$fui-color-accent});
+  @include _ring(var(--fui-focus-ring-color, #{tokens.$fui-focus-ring-color}));
+}
+
 @mixin invalid-state {
   border-color: var(--fui-color-danger, #{tokens.$fui-color-danger});
 }
 
-@mixin disabled-state {
-  opacity: 0.5;
-  cursor: not-allowed;
+// Invalid and focused: the danger edge stays, the ring takes the danger hue.
+@mixin invalid-focus-state {
+  border-color: var(--fui-color-danger, #{tokens.$fui-color-danger});
+  @include _ring(var(--fui-color-danger, #{tokens.$fui-color-danger}));
 }
 
-@mixin readonly-state {
-  background: var(--fui-bg-secondary, #{tokens.$fui-bg-secondary});
+@mixin disabled-state {
+  @include mixins.disabled-state;
 }

package/src/recipes/_layout.scss

@@ -49,13 +49,20 @@
 }
 
 @function measure($role) {
-  @if
-    $role == "field-minimum" or
-    $role == "inline-floor" or
-    $role == "compact-content" or
-    $role == "grid-cell" or
-    $role == "composer-item" or
-    $role == "page-narrow"
+  @if $role ==
+    "field-minimum" or
+    $role ==
+    "inline-floor" or
+    $role ==
+    "compact-content" or
+    $role ==
+    "menu-min" or
+    $role ==
+    "grid-cell" or
+    $role ==
+    "composer-item" or
+    $role ==
+    "page-narrow"
   {
     @return var(
       --fui-layout-measure-#{$role},

package/src/recipes/_navigation.scss

@@ -1,4 +1,5 @@
 @use "../tokens/measurements.generated" as measurements;
+@use "../tokens/variables" as tokens;
 @use "typography";
 
 @function _navigation($role) {
@@ -21,21 +22,49 @@
   @error "Unknown navigation measurement '#{$role}'.";
 }
 
+$_row-track: measurements.target-value("controlTrack", "md");
+$_section-track: measurements.target-value("controlTrack", "micro");
+$_gutter: _navigation("sidebarGutter");
+$_leading-box: _navigation("sidebarLeadingBox");
+$_active-rail: _navigation("sidebarRail");
+$_active-dot: _navigation("sidebarDot");
+
+// Build-time twins for the `--fui-navigation-*` hooks `properties` authors, so
+// consumers can write `var(--fui-navigation-gutter, #{navigation.gutter()})`.
+@function row-track() {
+  @return $_row-track;
+}
+@function section-track() {
+  @return $_section-track;
+}
+@function gutter() {
+  @return $_gutter;
+}
+@function leading-box() {
+  @return $_leading-box;
+}
+@function active-rail() {
+  @return $_active-rail;
+}
+@function active-dot() {
+  @return $_active-dot;
+}
+@function label-optical-y() {
+  @return _navigation("sidebarLabelOffset");
+}
+@function collapsed-width() {
+  @return _navigation("sidebarCollapsedWidth");
+}
+
 @mixin properties {
-  --fui-navigation-row-track: var(
-    --fui-control-track-md,
-    #{measurements.target-value("controlTrack", "md")}
-  );
-  --fui-navigation-section-track: var(
-    --fui-control-track-micro,
-    #{measurements.target-value("controlTrack", "micro")}
-  );
-  --fui-navigation-gutter: #{_navigation("sidebarGutter")};
-  --fui-navigation-inline-inset: #{_navigation("sidebarGutter")};
-  --fui-navigation-content-gap: #{_navigation("sidebarGutter")};
-  --fui-navigation-leading-box: #{_navigation("sidebarLeadingBox")};
-  --fui-navigation-active-rail: #{_navigation("sidebarRail")};
-  --fui-navigation-active-dot: #{_navigation("sidebarDot")};
+  --fui-navigation-row-track: var(--fui-control-track-md, #{$_row-track});
+  --fui-navigation-section-track: var(--fui-control-track-micro, #{$_section-track});
+  --fui-navigation-gutter: #{$_gutter};
+  --fui-navigation-inline-inset: #{$_gutter};
+  --fui-navigation-content-gap: #{$_gutter};
+  --fui-navigation-leading-box: #{$_leading-box};
+  --fui-navigation-active-rail: #{$_active-rail};
+  --fui-navigation-active-dot: #{$_active-dot};
   --fui-navigation-label-optical-y: #{_navigation("sidebarLabelOffset")};
 }
 
@@ -44,9 +73,9 @@
   @include typography.role("ui-compact");
 
   box-sizing: border-box;
-  min-block-size: var(--fui-navigation-row-track);
-  padding-inline: var(--fui-navigation-inline-inset);
-  gap: var(--fui-navigation-content-gap);
+  min-block-size: var(--fui-navigation-row-track, #{$_row-track});
+  padding-inline: var(--fui-navigation-inline-inset, #{$_gutter});
+  gap: var(--fui-navigation-content-gap, #{$_gutter});
 }
 
 @mixin section-row {
@@ -54,17 +83,17 @@
   @include typography.role("caption");
 
   box-sizing: border-box;
-  min-block-size: var(--fui-navigation-section-track);
-  padding-inline: var(--fui-navigation-inline-inset);
-  gap: var(--fui-navigation-content-gap);
+  min-block-size: var(--fui-navigation-section-track, #{$_section-track});
+  padding-inline: var(--fui-navigation-inline-inset, #{$_gutter});
+  gap: var(--fui-navigation-content-gap, #{$_gutter});
 }
 
 @mixin leading {
   @include properties;
 
-  inline-size: var(--fui-navigation-leading-box);
-  block-size: var(--fui-navigation-leading-box);
-  flex: 0 0 var(--fui-navigation-leading-box);
+  inline-size: var(--fui-navigation-leading-box, #{$_leading-box});
+  block-size: var(--fui-navigation-leading-box, #{$_leading-box});
+  flex: 0 0 var(--fui-navigation-leading-box, #{$_leading-box});
 
   > svg,
   > img {
@@ -83,18 +112,18 @@
       content: "";
       position: absolute;
       inset-block: var(--fui-raw-space-4, #{measurements.raw-space(4)});
-      inset-inline-start: calc(-1 * var(--fui-navigation-gutter));
-      inline-size: var(--fui-navigation-active-rail);
+      inset-inline-start: calc(-1 * var(--fui-navigation-gutter, #{$_gutter}));
+      inline-size: var(--fui-navigation-active-rail, #{$_active-rail});
     }
   } @else if $placement == "end" {
     &::after {
       content: "";
       position: absolute;
       inset-block-start: 50%;
-      inset-inline-end: var(--fui-navigation-inline-inset);
-      inline-size: var(--fui-navigation-active-dot);
-      block-size: var(--fui-navigation-active-dot);
-      border-radius: 999px;
+      inset-inline-end: var(--fui-navigation-inline-inset, #{$_gutter});
+      inline-size: var(--fui-navigation-active-dot, #{$_active-dot});
+      block-size: var(--fui-navigation-active-dot, #{$_active-dot});
+      border-radius: var(--fui-radius-full, #{tokens.$fui-radius-full});
       transform: translateY(-50%);
     }
   } @else {
@@ -108,3 +137,29 @@
   inline-size: #{_navigation("sidebarCollapsedWidth")};
   justify-items: center;
 }
+
+/// Mobile navigation links (NavigationMenu drawer, Header mobile nav) are popup
+/// rows: secondary ink at rest, hover wash, nested radius. Sidebar keeps its own
+/// rail-indicator grammar and does not use these.
+@mixin link-states {
+  color: var(--fui-text-secondary, #{tokens.$fui-text-secondary});
+  border-radius: var(--fui-radius-l2, #{tokens.$fui-radius-l2});
+  text-decoration: none;
+  transition: background-color var(--fui-transition-fast, #{tokens.$fui-transition-fast});
+
+  &:hover {
+    background-color: var(--fui-bg-hover, #{tokens.$fui-bg-hover});
+    color: var(--fui-text-primary, #{tokens.$fui-text-primary});
+  }
+}
+
+@mixin link-active {
+  color: var(--fui-text-primary, #{tokens.$fui-text-primary});
+  font-weight: var(--fui-font-weight-medium, #{tokens.$fui-font-weight-medium});
+  background-color: var(--fui-control-selected-bg, #{tokens.$fui-bg-active});
+
+  &:hover {
+    background-color: var(--fui-control-selected-bg, #{tokens.$fui-bg-active});
+    color: var(--fui-text-primary, #{tokens.$fui-text-primary});
+  }
+}