@usefragments/ui 1.6.0 → 2.0.0

package/src/recipes/_segmented.scss

@@ -13,7 +13,7 @@
   box-sizing: border-box;
   display: inline-flex;
   align-items: stretch;
-  min-block-size: var(--_fui-segmented-track);
+  min-block-size: var(--_fui-segmented-track, #{action.track($size)});
 }
 
 @mixin item($size) {

package/src/recipes/_table-chrome.scss

@@ -1,4 +1,5 @@
 @use "../tokens/measurements.generated" as measurements;
+@use "../tokens/variables" as tokens;
 @use "typography" as typography;
 
 @mixin properties {
@@ -9,15 +10,18 @@
   --fui-table-cell-inline-inset-regular: var(--fui-raw-space-12, #{measurements.raw-space(12)});
   --fui-table-cell-inline-inset-relaxed: var(--fui-raw-space-16, #{measurements.raw-space(16)});
   --fui-table-cell-block-inset-compact: var(--fui-raw-space-4, #{measurements.raw-space(4)});
-  --fui-table-cell-block-inset-regular: var(--fui-raw-space-8, #{measurements.raw-space(8)});
+  --fui-table-cell-block-inset-regular: var(--fui-raw-space-10, #{measurements.raw-space(10)});
   --fui-table-cell-block-inset-relaxed: var(--fui-raw-space-12, #{measurements.raw-space(12)});
-  --fui-table-tree-indent-step: var(--fui-raw-space-24, #{measurements.raw-space(24)});
-  --fui-table-divider-size: var(
-    --fui-stroke-hairline,
-    #{measurements.target-value("stroke", "hairline")}
-  );
+  // The header sits tighter than the rows it labels: a column head is chrome,
+  // not a record, so it keeps the pre-ledger inset while cells breathe.
+  --fui-table-header-block-inset-compact: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+  --fui-table-header-block-inset-regular: var(--fui-raw-space-8, #{measurements.raw-space(8)});
+  --fui-table-header-block-inset-relaxed: var(--fui-raw-space-12, #{measurements.raw-space(12)});
+  --fui-table-tree-indent-step: var(--fui-raw-space-24, #{$_tree-indent-step});
+  --fui-table-divider-size: var(--fui-stroke-hairline, #{$_divider-size});
 }
 
+
 @function row-track($density) {
   @if $density == "compact" or $density == "regular" or $density == "relaxed" {
     @return var(--fui-table-row-track-#{$density});
@@ -42,6 +46,14 @@
   @error "Unknown table density '#{$density}'. Expected compact, regular, or relaxed.";
 }
 
+@function header-block-inset($density) {
+  @if $density == "compact" or $density == "regular" or $density == "relaxed" {
+    @return var(--fui-table-header-block-inset-#{$density});
+  }
+
+  @error "Unknown table density '#{$density}'. Expected compact, regular, or relaxed.";
+}
+
 @mixin density($density) {
   @if $density != "compact" and $density != "regular" and $density != "relaxed" {
     @error "Unknown table density '#{$density}'. Expected compact, regular, or relaxed.";
@@ -50,6 +62,7 @@
   --_fui-table-row-track: #{row-track($density)};
   --_fui-table-cell-inline-inset: #{cell-inline-inset($density)};
   --_fui-table-cell-block-inset: #{cell-block-inset($density)};
+  --_fui-table-header-block-inset: #{header-block-inset($density)};
 
   @if $density == "compact" {
     @include typography.role("ui-compact");
@@ -58,6 +71,14 @@
   }
 }
 
+// Fallbacks are the regular-density defaults; `properties` sets the channels
+// per density on the table root.
+$_tree-indent-step: measurements.raw-space(24);
+$_divider-size: measurements.target-value("stroke", "hairline");
+$_cell-inline-inset: cell-inline-inset("regular");
+$_cell-block-inset: cell-block-inset("regular");
+$_row-track: row-track("regular");
+
 @mixin root {
   @include properties;
 
@@ -70,7 +91,7 @@
 
   padding-block: var(--fui-raw-space-12, #{measurements.raw-space(12)});
   padding-inline: 0;
-  color: var(--fui-text-secondary);
+  color: var(--fui-text-secondary, #{tokens.$fui-text-secondary});
   text-align: start;
   caption-side: top;
 }
@@ -78,28 +99,32 @@
 @mixin header-cell {
   @include typography.role("ui-compact");
 
-  padding-block: var(--_fui-table-cell-block-inset);
-  padding-inline: var(--_fui-table-cell-inline-inset);
-  color: var(--fui-text-secondary);
+  padding-block: var(
+    --_fui-table-header-block-inset,
+    var(--_fui-table-cell-block-inset, #{$_cell-block-inset})
+  );
+  padding-inline: var(--_fui-table-cell-inline-inset, #{$_cell-inline-inset});
+  color: var(--fui-text-secondary, #{tokens.$fui-text-secondary});
   text-align: start;
   vertical-align: middle;
 }
 
 @mixin body-cell {
-  padding-block: var(--_fui-table-cell-block-inset);
-  padding-inline: var(--_fui-table-cell-inline-inset);
-  color: var(--fui-text-primary);
+  padding-block: var(--_fui-table-cell-block-inset, #{$_cell-block-inset});
+  padding-inline: var(--_fui-table-cell-inline-inset, #{$_cell-inline-inset});
+  color: var(--fui-text-primary, #{tokens.$fui-text-primary});
   vertical-align: middle;
 }
 
 @mixin row {
-  height: var(--_fui-table-row-track);
-  border-block-end: var(--fui-table-divider-size) solid var(--fui-table-border, var(--fui-border));
+  height: var(--_fui-table-row-track, #{$_row-track});
+  border-block-end: var(--fui-table-divider-size, #{$_divider-size}) solid
+    var(--fui-table-border, var(--fui-border, #{tokens.$fui-border}));
 }
 
 @mixin tree-cell {
   padding-inline-start: calc(
-    var(--_fui-table-cell-inline-inset) + var(--_fui-table-tree-depth, 0) *
-      var(--fui-table-tree-indent-step)
+    var(--_fui-table-cell-inline-inset, #{$_cell-inline-inset}) + var(--fui-table-tree-depth, 0) *
+      var(--fui-table-tree-indent-step, #{$_tree-indent-step})
   );
 }

package/src/recipes/_target.scss

@@ -13,8 +13,6 @@
 }
 
 @mixin hit-area($role) {
-  --_fui-target-hit-size: #{hit-size($role)};
-
   position: relative;
 
   &::after {
@@ -22,8 +20,8 @@
     position: absolute;
     inset-block-start: 50%;
     inset-inline-start: 50%;
-    inline-size: max(100%, var(--_fui-target-hit-size));
-    block-size: max(100%, var(--_fui-target-hit-size));
+    inline-size: max(100%, #{hit-size($role)});
+    block-size: max(100%, #{hit-size($role)});
     box-sizing: border-box;
     transform: translate(-50%, -50%);
     pointer-events: auto;

package/src/recipes/_typography.scss

@@ -35,4 +35,14 @@
   font-weight: weight($role);
   letter-spacing: tracking($role);
   font-family: font-family($role);
+
+  // Wrapping is part of the role: titles balance across their lines,
+  // descriptions never strand a single word on the last line. Long-form
+  // prose opts back out in recipes/prose, where evening out a paragraph
+  // only wastes space.
+  @if $role == "title-sm" or $role == "title-md" or $role == "title-lg" {
+    text-wrap: balance;
+  } @else if $role == "body-compact" or $role == "body-relaxed" {
+    text-wrap: pretty;
+  }
 }

package/src/scss.d.ts

@@ -1,4 +1,4 @@
-declare module '*.module.scss' {
+declare module "*.module.scss" {
   const classes: { [key: string]: string };
   export default classes;
 }

package/src/styles/globals.scss

@@ -7,7 +7,6 @@
 // Usage in SCSS (recommended):
 //   @use '@usefragments/ui/styles' with (
 //     $fui-brand: #6366f1,
-//     $fui-neutral: "earth",
 //     $fui-radius-style: "rounded"
 //   );
 //
@@ -24,17 +23,15 @@
 // Consumers set these via @use ... with().
 // Values are forwarded to the seed/token chain below.
 
-$fui-brand: #006b57 !default;
-$fui-neutral: "carbon" !default;
-$fui-density: "default" !default;
+$fui-brand: #f56138 !default;
+$fui-neutral: "paper" !default;
 $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: #a54f46 !default;
-$fui-success: #7fc9b3 !default;
-$fui-warning: #e0aa5c !default;
-$fui-info: #7fa6c4 !default;
+// Status seeds (see tokens/_seeds.scss): Cloud Surfaces rust / forest /
+// amber / slate-blue. Washes derive from these.
+$fui-danger: #c44732 !default;
+$fui-success: #2c8c5f !default;
+$fui-warning: #c4922a !default;
+$fui-info: #3d7aa8 !default;
 
 // Configure seeds BEFORE loading variables.
 // Sass module singleton: once configured here, every subsequent
@@ -42,7 +39,6 @@ $fui-info: #7fa6c4 !default;
 @use "../tokens/seeds" with (
   $fui-brand: $fui-brand,
   $fui-neutral: $fui-neutral,
-  $fui-density: $fui-density,
   $fui-radius-style: $fui-radius-style,
   $fui-danger: $fui-danger,
   $fui-success: $fui-success,
@@ -50,6 +46,7 @@ $fui-info: #7fa6c4 !default;
   $fui-info: $fui-info
 );
 
+@use "../tokens/measurements.generated" as measurements;
 @use "../tokens/variables" as *;
 @use "../tokens/property-registrations" as prop-reg;
 
@@ -94,11 +91,11 @@ $fui-info: #7fa6c4 !default;
   }
 
   :where(body) {
-    margin: 0;
+    margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
     font-size: inherit;
     font-family: var(
       --fui-font-sans,
-      Inter,
+      "Onest",
       system-ui,
       -apple-system,
       BlinkMacSystemFont,
@@ -126,21 +123,24 @@ $fui-info: #7fa6c4 !default;
     color: inherit;
   }
 
+  // Classless prose anchors take the link ink (≥ 4.5:1 on every surface in
+  // both themes); the accent stays for actions. Hover strengthens the rule.
   :where(a:not([class]):not([style])) {
-    color: var(--fui-color-accent, #{$fui-color-accent});
+    color: var(--fui-link-ink, #{$fui-link-ink});
     text-decoration: underline;
-    text-underline-offset: 2px;
-    transition: color 0.15s ease;
+    text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
+    text-underline-offset: 0.2em;
+    transition: text-decoration-color 0.15s ease;
 
     &:hover {
-      color: var(--fui-color-accent-hover, #{$fui-color-accent-hover});
+      text-decoration-color: currentColor;
     }
   }
 
   ::selection {
     background-color: var(
       --fui-selection-bg,
-      color-mix(in srgb, var(--fui-color-accent, #7fc9b3) 18%, transparent)
+      color-mix(in srgb, var(--fui-color-accent, #f56138) 18%, transparent)
     );
     color: var(--fui-selection-color, var(--fui-text-primary, #171717));
   }
@@ -159,7 +159,7 @@ $fui-info: #7fa6c4 !default;
 
   ::-webkit-scrollbar-thumb {
     background-color: transparent;
-    border-radius: 9999px;
+    border-radius: var(--fui-radius-full, #{$fui-radius-full});
     transition: background-color var(--fui-transition-fast, $fui-transition-fast);
   }
 
@@ -200,11 +200,17 @@ $fui-info: #7fa6c4 !default;
   }
 
   :where(:focus-visible) {
-    outline: 1px solid color-mix(in srgb, var(--fui-focus-ring-color, #006b57) 24%, transparent);
-    outline-offset: var(--fui-focus-ring-offset, 2px);
+    outline: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+      color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 24%, transparent);
+    outline-offset: var(--fui-focus-ring-offset, #{$fui-focus-ring-offset});
     box-shadow:
-      0 0 0 calc(var(--fui-focus-ring-width, 2px) + 1px)
-        color-mix(in srgb, var(--fui-focus-ring-color, #006b57) 10%, transparent),
-      0 10px 24px -16px color-mix(in srgb, var(--fui-focus-ring-color, #006b57) 18%, transparent);
+      0 0 0
+        calc(
+          var(--fui-focus-ring-width, #{$fui-focus-ring-width}) +
+            var(--fui-stroke-hairline, #{$fui-stroke-hairline})
+        )
+        color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 10%, transparent),
+      0 10px 24px -16px
+        color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 18%, transparent);
   }
 }

package/src/tokens/_component-properties.scss

@@ -5,12 +5,22 @@
 // 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: var(--fui-radius-sm);
+  --fui-chart-marker-stroke: var(--fui-raw-space-2);
+  --fui-checkbox-radius: var(--fui-radius-l3);
+  --fui-feedback-text-gap: var(--fui-raw-space-4);
+  --fui-feedback-transient-gap: var(--fui-raw-space-8);
+  --fui-feedback-viewport-inset-top: max(var(--fui-raw-space-16), env(safe-area-inset-top));
+  --fui-feedback-viewport-inset-right: max(var(--fui-raw-space-16), env(safe-area-inset-right));
+  --fui-feedback-viewport-inset-bottom: max(var(--fui-raw-space-16), env(safe-area-inset-bottom));
+  --fui-feedback-viewport-inset-left: max(var(--fui-raw-space-16), env(safe-area-inset-left));
   --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;
   --fui-navmenu-viewport-width: 0px;
+  --fui-overlay-arrow-size: var(--fui-raw-space-10);
+  --fui-overlay-close-inset: var(--fui-raw-space-12);
+  --fui-overlay-section-gap: var(--fui-raw-space-8);
   --fui-prompt-inset-left: 0px;
   --fui-select-max-items: 4.5;
   --fui-stack-direction: column;
@@ -23,4 +33,12 @@
   --fui-stack-gap-md: var(--fui-stack-gap-sm);
   --fui-stack-gap-lg: var(--fui-stack-gap-md);
   --fui-stack-gap-xl: var(--fui-stack-gap-lg);
+  --fui-table-tree-depth: 0;
+  // G1: Textarea row bounds, authored inline from the minRows/maxRows props.
+  --fui-textarea-min-rows: 1;
+  --fui-textarea-max-rows: 9999;
+  // G2: Progress ring geometry, authored inline from geometry.ts (see Progress/index.tsx).
+  --fui-progress-diameter: var(--fui-raw-space-48);
+  --fui-progress-dash-full: 0;
+  --fui-progress-dash-quarter: 0;
 }

package/src/tokens/_computed.scss

@@ -11,7 +11,7 @@
 @use "sass:map";
 @use "seeds" as seeds;
 @use "palettes" as palettes;
-@use "density" as density;
+@use "measurements.generated" as measurements;
 @use "radius" as radius;
 @use "derive" as derive;
 
@@ -21,40 +21,36 @@
 
 // Get the selected configurations
 $_palette: palettes.get-palette(seeds.$fui-neutral);
-$_density: density.get-density(seeds.$fui-density);
 $_radius: radius.get-radius-style(seeds.$fui-radius-style);
 
-// Derive spacing from density
-$_spacing: density.derive-spacing($_density);
-
-// True when the brand seed is the Fragments default (pine). Lets the default
-// theme emit exact Flight Recorder accents (sage dark / pine light) while any
-// consumer-supplied $fui-brand keeps the full seed→accent derivation.
-$brand-is-fragments-default: seeds.$fui-brand == #006b57;
+// True when the brand seed is the Fragments default (coral). The default
+// theme uses the exact SCSS-computed accents; any consumer-supplied
+// $fui-brand keeps the full seed→accent derivation reactive at runtime.
+$brand-is-fragments-default: seeds.$fui-brand == #f56138;
 
 // --------------------------------------------
 // Computed: Base Configuration
 // --------------------------------------------
 
-$computed-base-font-size: map.get($_density, base-font-size);
-$computed-base-unit: map.get($_density, base-unit);
+$computed-base-font-size: measurements.spacing-value("baseFontSize");
+$computed-base-unit: measurements.spacing-value("baseUnit");
 
 // --------------------------------------------
 // Computed: Spacing
 // --------------------------------------------
 
-$computed-space-px: map.get($_spacing, px);
-$computed-space-0-5: map.get($_spacing, 0-5);
-$computed-space-0-75: map.get($_spacing, 0-75);
-$computed-space-1: map.get($_spacing, 1);
-$computed-space-2: map.get($_spacing, 2);
-$computed-space-3: map.get($_spacing, 3);
-$computed-space-4: map.get($_spacing, 4);
-$computed-space-5: map.get($_spacing, 5);
-$computed-space-6: map.get($_spacing, 6);
-$computed-space-8: map.get($_spacing, 8);
-$computed-space-10: map.get($_spacing, 10);
-$computed-space-12: map.get($_spacing, 12);
+$computed-space-px: measurements.spacing-step("px");
+$computed-space-0-5: measurements.spacing-step("0-5");
+$computed-space-0-75: measurements.spacing-step("0-75");
+$computed-space-1: measurements.spacing-step("1");
+$computed-space-2: measurements.spacing-step("2");
+$computed-space-3: measurements.spacing-step("3");
+$computed-space-4: measurements.spacing-step("4");
+$computed-space-5: measurements.spacing-step("5");
+$computed-space-6: measurements.spacing-step("6");
+$computed-space-8: measurements.spacing-step("8");
+$computed-space-10: measurements.spacing-step("10");
+$computed-space-12: measurements.spacing-step("12");
 
 // --------------------------------------------
 // Computed: Border Radius
@@ -67,23 +63,21 @@ $computed-radius-xl: radius.radius-value($_radius, xl);
 $computed-radius-full: radius.radius-full();
 
 // --------------------------------------------
-// Computed: Component Heights (from density)
+// Computed: Touch targets and navigation (from the spacing record)
 // --------------------------------------------
 
-// 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));
+$computed-touch-sm: measurements.spacing-px-to-rem(
+  measurements.spacing-nested-value("touch", "sm")
+);
+$computed-touch-md: measurements.spacing-px-to-rem(
+  measurements.spacing-nested-value("touch", "md")
+);
+$computed-touch-lg: measurements.spacing-px-to-rem(
+  measurements.spacing-nested-value("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: measurements.spacing-px-to-rem(
+  measurements.spacing-value("sidebarItemHeight")
 );
 
 // --------------------------------------------
@@ -95,9 +89,6 @@ $computed-color-accent: seeds.$fui-brand;
 // Default (pine) fill needs white text; contrast-color mis-scores mid-dark
 // brands, so pin on-accent to white for the Fragments default.
 $computed-color-on-accent: derive.contrast-color(seeds.$fui-brand);
-@if $brand-is-fragments-default {
-  $computed-color-on-accent: #ffffff;
-}
 $computed-color-accent-hover: derive.derive-accent-hover(seeds.$fui-brand, false);
 $computed-color-accent-active: derive.derive-accent-active(seeds.$fui-brand, false);
 
@@ -171,11 +162,7 @@ $computed-backdrop: derive.derive-backdrop(false);
 // --------------------------------------------
 
 // Accent colors — dark brands lightened for visibility; on-accent handles text contrast.
-// The Fragments default resolves to exact sage; overrides keep the chroma-aware lift.
 $computed-dark-color-accent: derive.derive-dark-accent(seeds.$fui-brand);
-@if $brand-is-fragments-default {
-  $computed-dark-color-accent: #7fc9b3;
-}
 $computed-dark-color-on-accent: derive.contrast-color($computed-dark-color-accent);
 $computed-dark-color-accent-hover: derive.derive-accent-hover($computed-dark-color-accent, true);
 $computed-dark-color-accent-active: derive.derive-accent-active($computed-dark-color-accent, true);
@@ -226,12 +213,8 @@ $computed-dark-shadow-sm: map.get($_shadows-dark, sm);
 $computed-dark-shadow-md: map.get($_shadows-dark, md);
 $computed-dark-shadow-lg: map.get($_shadows-dark, lg);
 
-// Focus ring (dark mode) — follows the dark accent. Pinned to sage for the
-// Fragments default (derive-focus-ring mis-scores the mid-dark pine brand).
+// Focus ring (dark mode) — follows the dark accent.
 $computed-dark-focus-ring-color: derive.derive-focus-ring(seeds.$fui-brand, true);
-@if $brand-is-fragments-default {
-  $computed-dark-focus-ring-color: #7fc9b3;
-}
 
 // Scrollbar (dark mode)
 $_scrollbar-dark: derive.derive-scrollbar($_palette, true, seeds.$fui-neutral);