@usefragments/ui 1.5.4 → 1.7.0

package/src/tokens/_property-registrations.scss

@@ -11,7 +11,7 @@
 // Usage: @include fui-property-registrations; (before fui-css-variables)
 // ============================================
 
-@use 'variables' as *;
+@use "variables" as *;
 
 // ============================================
 // Color Tokens
@@ -19,7 +19,7 @@
 
 @mixin register-color($name, $initial) {
   @property --fui-#{$name} {
-    syntax: '<color>';
+    syntax: "<color>";
     initial-value: #{$initial};
     inherits: true;
   }
@@ -31,7 +31,7 @@
 
 @mixin register-length($name, $initial) {
   @property --fui-#{$name} {
-    syntax: '<length>';
+    syntax: "<length>";
     initial-value: #{$initial};
     inherits: true;
   }
@@ -43,7 +43,7 @@
 
 @mixin register-number($name, $initial) {
   @property --fui-#{$name} {
-    syntax: '<number>';
+    syntax: "<number>";
     initial-value: #{$initial};
     inherits: true;
   }
@@ -58,154 +58,158 @@
   // Seed Colors — configurable brand/semantic seeds
   // Runtime derivation via relative color syntax operates in OKLCH space.
   // ------------------------------------------
-  @include register-color('seed-brand', $fui-color-accent);
-  @include register-color('seed-danger', $fui-color-danger);
-  @include register-color('seed-success', $fui-color-success);
-  @include register-color('seed-warning', $fui-color-warning);
-  @include register-color('seed-info', $fui-color-info);
+  @include register-color("seed-brand", $fui-color-accent);
+  @include register-color("seed-danger", $fui-color-danger);
+  @include register-color("seed-success", $fui-color-success);
+  @include register-color("seed-warning", $fui-color-warning);
+  @include register-color("seed-info", $fui-color-info);
 
   // ------------------------------------------
   // Colors — Accent (animatable for theme transitions)
   // ------------------------------------------
-  @include register-color('color-accent', $fui-color-accent);
-  @include register-color('color-accent-hover', $fui-color-accent-hover);
-  @include register-color('color-accent-active', $fui-color-accent-active);
+  @include register-color("color-accent", $fui-color-accent);
+  @include register-color("color-accent-hover", $fui-color-accent-hover);
+  @include register-color("color-accent-active", $fui-color-accent-active);
 
   // ------------------------------------------
   // Colors — Semantic
   // ------------------------------------------
-  @include register-color('color-danger', $fui-color-danger);
-  @include register-color('color-danger-hover', $fui-color-danger-hover);
-  @include register-color('color-success', $fui-color-success);
-  @include register-color('color-warning', $fui-color-warning);
-  @include register-color('color-info', $fui-color-info);
+  @include register-color("color-danger", $fui-color-danger);
+  @include register-color("color-danger-hover", $fui-color-danger-hover);
+  @include register-color("color-success", $fui-color-success);
+  @include register-color("color-warning", $fui-color-warning);
+  @include register-color("color-info", $fui-color-info);
 
   // ------------------------------------------
   // Colors — Semantic Backgrounds
   // ------------------------------------------
-  @include register-color('color-danger-bg', $fui-color-danger-bg);
-  @include register-color('color-success-bg', $fui-color-success-bg);
-  @include register-color('color-warning-bg', $fui-color-warning-bg);
-  @include register-color('color-info-bg', $fui-color-info-bg);
+  @include register-color("color-danger-bg", $fui-color-danger-bg);
+  @include register-color("color-success-bg", $fui-color-success-bg);
+  @include register-color("color-warning-bg", $fui-color-warning-bg);
+  @include register-color("color-info-bg", $fui-color-info-bg);
 
   // ------------------------------------------
   // Colors — Semantic Text
   // ------------------------------------------
-  @include register-color('color-danger-text', $fui-color-danger-text);
-  @include register-color('color-success-text', $fui-color-success-text);
-  @include register-color('color-warning-text', $fui-color-warning-text);
-  @include register-color('color-info-text', $fui-color-info-text);
+  @include register-color("color-danger-text", $fui-color-danger-text);
+  @include register-color("color-success-text", $fui-color-success-text);
+  @include register-color("color-warning-text", $fui-color-warning-text);
+  @include register-color("color-info-text", $fui-color-info-text);
 
   // ------------------------------------------
   // Colors — Surfaces
   // ------------------------------------------
-  @include register-color('bg-primary', $fui-bg-primary);
-  @include register-color('bg-secondary', $fui-bg-secondary);
-  @include register-color('bg-tertiary', $fui-bg-tertiary);
-  @include register-color('bg-elevated', $fui-bg-elevated);
-  @include register-color('bg-subtle', $fui-bg-subtle);
-  @include register-color('bg-hover', $fui-bg-hover);
-  @include register-color('bg-active', $fui-bg-active);
-  @include register-color('body-bg', $fui-body-bg);
-  @include register-color('main-bg', $fui-main-bg);
+  @include register-color("bg-primary", $fui-bg-primary);
+  @include register-color("bg-secondary", $fui-bg-secondary);
+  @include register-color("bg-tertiary", $fui-bg-tertiary);
+  @include register-color("bg-elevated", $fui-bg-elevated);
+  @include register-color("bg-subtle", $fui-bg-subtle);
+  @include register-color("bg-hover", $fui-bg-hover);
+  @include register-color("bg-active", $fui-bg-active);
+  @include register-color("body-bg", $fui-body-bg);
+  @include register-color("main-bg", $fui-main-bg);
 
   // ------------------------------------------
   // Colors — Text
   // ------------------------------------------
-  @include register-color('text-primary', $fui-text-primary);
-  @include register-color('text-secondary', $fui-text-secondary);
-  @include register-color('text-tertiary', $fui-text-tertiary);
-  @include register-color('text-inverse', $fui-text-inverse);
+  @include register-color("text-primary", $fui-text-primary);
+  @include register-color("text-secondary", $fui-text-secondary);
+  @include register-color("text-tertiary", $fui-text-tertiary);
+  @include register-color("text-inverse", $fui-text-inverse);
 
   // ------------------------------------------
   // Colors — Borders
   // ------------------------------------------
-  @include register-color('border', $fui-border);
-  @include register-color('border-default', $fui-border-default);
-  @include register-color('border-strong', $fui-border-strong);
+  @include register-color("border", $fui-border);
+  @include register-color("border-default", $fui-border-default);
+  @include register-color("border-strong", $fui-border-strong);
 
   // ------------------------------------------
   // Colors — Focus
   // ------------------------------------------
-  @include register-color('focus-ring-color', $fui-focus-ring-color);
+  @include register-color("focus-ring-color", $fui-focus-ring-color);
 
   // ------------------------------------------
   // Colors — Scrollbar
   // ------------------------------------------
-  @include register-color('scrollbar-track', $fui-scrollbar-track);
-  @include register-color('scrollbar-thumb', $fui-scrollbar-thumb);
-  @include register-color('scrollbar-thumb-hover', $fui-scrollbar-thumb-hover);
+  @include register-color("scrollbar-track", $fui-scrollbar-track);
+  @include register-color("scrollbar-thumb", $fui-scrollbar-thumb);
+  @include register-color("scrollbar-thumb-hover", $fui-scrollbar-thumb-hover);
 
   // ------------------------------------------
   // Spacing — Lengths
   // ------------------------------------------
-  @include register-length('space-px', $fui-space-px);
-  @include register-length('space-0-5', $fui-space-0-5);
-  @include register-length('space-0-75', $fui-space-0-75);
-  @include register-length('space-1', $fui-space-1);
-  @include register-length('space-2', $fui-space-2);
-  @include register-length('space-3', $fui-space-3);
-  @include register-length('space-4', $fui-space-4);
-  @include register-length('space-5', $fui-space-5);
-  @include register-length('space-6', $fui-space-6);
-  @include register-length('space-8', $fui-space-8);
-  @include register-length('space-10', $fui-space-10);
-  @include register-length('space-12', $fui-space-12);
+  @include register-length("space-px", $fui-space-px);
+  @include register-length("space-0-5", $fui-space-0-5);
+  @include register-length("space-0-75", $fui-space-0-75);
+  @include register-length("space-1", $fui-space-1);
+  @include register-length("space-2", $fui-space-2);
+  @include register-length("space-3", $fui-space-3);
+  @include register-length("space-4", $fui-space-4);
+  @include register-length("space-5", $fui-space-5);
+  @include register-length("space-6", $fui-space-6);
+  @include register-length("space-8", $fui-space-8);
+  @include register-length("space-10", $fui-space-10);
+  @include register-length("space-12", $fui-space-12);
 
   // ------------------------------------------
   // Border Radius — Lengths
   // ------------------------------------------
-  @include register-length('radius-sm', $fui-radius-sm);
-  @include register-length('radius-md', $fui-radius-md);
-  @include register-length('radius-lg', $fui-radius-lg);
-  @include register-length('radius-xl', $fui-radius-xl);
-  @include register-length('radius-full', $fui-radius-full);
+  @include register-length("radius-sm", $fui-radius-sm);
+  @include register-length("radius-md", $fui-radius-md);
+  @include register-length("radius-lg", $fui-radius-lg);
+  @include register-length("radius-xl", $fui-radius-xl);
+  @include register-length("radius-full", $fui-radius-full);
 
   // ------------------------------------------
   // Component Heights — Lengths
   // ------------------------------------------
-  @include register-length('button-height-xs', $fui-button-height-xs);
-  @include register-length('button-height-sm', $fui-button-height-sm);
-  @include register-length('button-height-md', $fui-button-height-md);
-  @include register-length('button-height-lg', $fui-button-height-lg);
-  @include register-length('input-height', $fui-input-height);
-  @include register-length('input-height-sm', $fui-input-height-sm);
-  @include register-length('input-height-lg', $fui-input-height-lg);
-  @include register-length('target-size-min', $fui-target-size-min);
+  @include register-length("control-height-xs", $fui-control-height-xs);
+  @include register-length("control-height-sm", $fui-control-height-sm);
+  @include register-length("control-height-md", $fui-control-height-md);
+  @include register-length("control-height-lg", $fui-control-height-lg);
+  @include register-length("button-height-xs", $fui-button-height-xs);
+  @include register-length("button-height-sm", $fui-button-height-sm);
+  @include register-length("button-height-md", $fui-button-height-md);
+  @include register-length("button-height-lg", $fui-button-height-lg);
+  @include register-length("input-height", $fui-input-height);
+  @include register-length("input-height-sm", $fui-input-height-sm);
+  @include register-length("input-height-lg", $fui-input-height-lg);
+  @include register-length("target-size-min", $fui-target-size-min);
 
   // ------------------------------------------
   // Focus Ring — Lengths
   // ------------------------------------------
-  @include register-length('focus-ring-offset', $fui-focus-ring-offset);
-  @include register-length('focus-ring-width', $fui-focus-ring-width);
-  @include register-length('scrollbar-width', $fui-scrollbar-width);
+  @include register-length("focus-ring-offset", $fui-focus-ring-offset);
+  @include register-length("focus-ring-width", $fui-focus-ring-width);
+  @include register-length("scrollbar-width", $fui-scrollbar-width);
 
   // ------------------------------------------
   // Typography — Numbers (unitless, animatable)
   // ------------------------------------------
-  @include register-number('font-weight-normal', $fui-font-weight-normal);
-  @include register-number('font-weight-medium', $fui-font-weight-medium);
-  @include register-number('font-weight-semibold', $fui-font-weight-semibold);
-  @include register-number('font-weight-bold', $fui-font-weight-bold);
-  @include register-number('line-height-tight', $fui-line-height-tight);
-  @include register-number('line-height-normal', $fui-line-height-normal);
-  @include register-number('line-height-relaxed', $fui-line-height-relaxed);
-  @include register-number('line-height-display', $fui-line-height-display);
-  @include register-number('line-height-prose', $fui-line-height-prose);
+  @include register-number("font-weight-normal", $fui-font-weight-normal);
+  @include register-number("font-weight-medium", $fui-font-weight-medium);
+  @include register-number("font-weight-semibold", $fui-font-weight-semibold);
+  @include register-number("font-weight-bold", $fui-font-weight-bold);
+  @include register-number("line-height-tight", $fui-line-height-tight);
+  @include register-number("line-height-normal", $fui-line-height-normal);
+  @include register-number("line-height-relaxed", $fui-line-height-relaxed);
+  @include register-number("line-height-display", $fui-line-height-display);
+  @include register-number("line-height-prose", $fui-line-height-prose);
 
   // ------------------------------------------
   // Typography — Font Sizes (lengths)
   // ------------------------------------------
-  @include register-length('font-size-2xs', $fui-font-size-2xs);
-  @include register-length('font-size-xs', $fui-font-size-xs);
-  @include register-length('font-size-sm', $fui-font-size-sm);
-  @include register-length('font-size-base', $fui-font-size-base);
-  @include register-length('font-size-md', $fui-font-size-md);
-  @include register-length('font-size-lg', $fui-font-size-lg);
-  @include register-length('font-size-xl', $fui-font-size-xl);
-  @include register-length('font-size-2xl', $fui-font-size-2xl);
-  @include register-length('font-size-3xl', $fui-font-size-3xl);
-  @include register-length('font-size-4xl', $fui-font-size-4xl);
+  @include register-length("font-size-2xs", $fui-font-size-2xs);
+  @include register-length("font-size-xs", $fui-font-size-xs);
+  @include register-length("font-size-sm", $fui-font-size-sm);
+  @include register-length("font-size-base", $fui-font-size-base);
+  @include register-length("font-size-md", $fui-font-size-md);
+  @include register-length("font-size-lg", $fui-font-size-lg);
+  @include register-length("font-size-xl", $fui-font-size-xl);
+  @include register-length("font-size-2xl", $fui-font-size-2xl);
+  @include register-length("font-size-3xl", $fui-font-size-3xl);
+  @include register-length("font-size-4xl", $fui-font-size-4xl);
 
   // ------------------------------------------
   // Note: The following tokens are NOT registered because @property

package/src/tokens/_radius.scss

@@ -2,75 +2,29 @@
 // @usefragments/ui Radius Styles
 // ============================================
 //
-// Defines 5 radius style presets that control corner rounding.
-// Each style maps to sm, md, lg, xl values.
+// Compatibility adapter over the generated Measurement Module. Existing Sass
+// callers retain their public maps and helpers without owning numeric copies.
 //
 // ============================================
 
-@use 'sass:map';
+@use "sass:map";
+@use "measurements.generated" as measurements;
 
-// --------------------------------------------
-// Radius Style Definitions
-// --------------------------------------------
+$radius-sharp: measurements.radius-profile("sharp");
+$radius-subtle: measurements.radius-profile("subtle");
+$radius-default: measurements.radius-profile("default");
+$radius-rounded: measurements.radius-profile("rounded");
+$radius-pill: measurements.radius-profile("pill");
 
-// Sharp - No visible rounding (technical, precise)
-$radius-sharp: (
-  sm: 0,
-  md: 0,
-  lg: 0,
-  xl: 0
-);
-
-// Subtle - Minimal rounding (modern minimal)
-$radius-subtle: (
-  sm: 0.125rem,   // 2px
-  md: 0.25rem,    // 4px
-  lg: 0.375rem,   // 6px
-  xl: 0.5rem      // 8px
-);
-
-// Default - Balanced rounding (current values)
-$radius-default: (
-  sm: 0.25rem,    // 3.5px -> 4px
-  md: 0.429rem,   // 6px
-  lg: 0.571rem,   // 8px
-  xl: 0.857rem    // 12px
-);
-
-// Rounded - More prominent rounding (friendly)
-$radius-rounded: (
-  sm: 0.375rem,   // 6px
-  md: 0.5rem,     // 8px
-  lg: 0.75rem,    // 12px
-  xl: 1rem        // 16px
-);
-
-// Pill - Maximum rounding (playful, soft)
-$radius-pill: (
-  sm: 0.5rem,     // 8px
-  md: 0.75rem,    // 12px
-  lg: 1rem,       // 16px
-  xl: 1.5rem      // 24px
-);
-
-// --------------------------------------------
-// Radius Map for Dynamic Access
-// --------------------------------------------
 $radius-styles: (
   "sharp": $radius-sharp,
   "subtle": $radius-subtle,
   "default": $radius-default,
   "rounded": $radius-rounded,
-  "pill": $radius-pill
+  "pill": $radius-pill,
 );
 
-// --------------------------------------------
-// Helper Functions
-// --------------------------------------------
-
-/// Get a radius style configuration by name
-/// @param {String} $name - Radius style name (sharp, subtle, default, rounded, pill)
-/// @return {Map} The radius configuration map
+/// Get a radius style configuration by name.
 @function get-radius-style($name) {
   @if not map.has-key($radius-styles, $name) {
     @warn "Unknown radius style '#{$name}'. Using 'default' as fallback.";
@@ -79,29 +33,21 @@ $radius-styles: (
   @return map.get($radius-styles, $name);
 }
 
-/// Get a specific radius value from a style
-/// @param {Map} $style - A radius style map
-/// @param {String} $size - Size key (sm, md, lg, xl)
-/// @return {Number} The radius value
+/// Get a specific radius value from a style map.
 @function radius-value($style, $size) {
   @if not map.has-key($style, $size) {
     @warn "Unknown radius size '#{$size}'.";
-    @return map.get($style, md);
+    @return map.get($style, "md");
   }
   @return map.get($style, $size);
 }
 
-/// Get radius by style name and size
-/// @param {String} $style-name - Radius style name
-/// @param {String} $size - Size key (sm, md, lg, xl)
-/// @return {Number} The radius value
+/// Get a radius by style name and size.
 @function radius($style-name, $size) {
-  $style: get-radius-style($style-name);
-  @return radius-value($style, $size);
+  @return radius-value(get-radius-style($style-name), $size);
 }
 
-/// Full/circular radius (always the same)
-/// @return {Number} The full radius value
+/// Full/circular radius remains an intentional non-profile sentinel.
 @function radius-full() {
   @return 9999px;
 }

package/src/tokens/_seeds.scss

@@ -1,4 +1,5 @@
-@use 'sass:list';
+@use "sass:list";
+@use "measurements.generated" as measurements;
 
 // ============================================
 // @usefragments/ui Design Token Seeds
@@ -10,7 +11,6 @@
 // Example:
 //   @use '@usefragments/ui/styles' with (
 //     $fui-brand: #0066ff,
-//     $fui-neutral: "ice",
 //     $fui-density: "compact",
 //     $fui-radius-style: "rounded"
 //   );
@@ -22,16 +22,17 @@
 // --------------------------------------------
 
 /// Primary brand color - derives accent colors, focus rings, etc.
-/// Default = Fragments "pine" (the fill/foreground accent). The out-of-box
-/// theme derives a sage foreground accent in dark mode from this seed.
+/// Default = Fragments "coral" — the vivid warm accent of the paper scheme.
+/// Dark mode preserves its chroma via the OKLCH derivation, so the accent
+/// stays coral on the warm charcoal plane.
 /// @type Color
-$fui-brand: #006b57 !default;
+$fui-brand: #f56138 !default;
 
 /// Neutral palette name for surfaces, text, and borders
-/// Options: "carbon" | "stone" | "mono" | "ice" | "earth" | "sand" | "fire" | "fragments"
-/// Default = "carbon" (the Fragments "Flight Recorder" near-black ramp).
+/// One neutral ramp ships: "paper" (warm cream canvas, white cards, warm
+/// charcoal dark mode) — one light theme, one dark theme.
 /// @type String
-$fui-neutral: "carbon" !default;
+$fui-neutral: "paper" !default;
 
 /// Density preset controlling spacing scale
 /// Options: "compact" | "default" | "relaxed"
@@ -48,17 +49,17 @@ $fui-radius-style: "default" !default;
 // --------------------------------------------
 // Fail fast at compile time if invalid seed values are provided.
 
-$_valid-neutrals: "carbon", "stone", "mono", "ice", "earth", "sand", "fire", "fragments";
+$_valid-neutrals: ("paper",);
 @if not list.index($_valid-neutrals, $fui-neutral) {
   @error "Invalid $fui-neutral: '#{$fui-neutral}'. Must be one of: #{$_valid-neutrals}";
 }
 
-$_valid-densities: "compact", "default", "relaxed";
+$_valid-densities: measurements.$density-profile-names;
 @if not list.index($_valid-densities, $fui-density) {
   @error "Invalid $fui-density: '#{$fui-density}'. Must be one of: #{$_valid-densities}";
 }
 
-$_valid-radii: "sharp", "subtle", "default", "rounded", "pill";
+$_valid-radii: measurements.$radius-profile-names;
 @if not list.index($_valid-radii, $fui-radius-style) {
   @error "Invalid $fui-radius-style: '#{$fui-radius-style}'. Must be one of: #{$_valid-radii}";
 }
@@ -69,23 +70,23 @@ $_valid-radii: "sharp", "subtle", "default", "rounded", "pill";
 // Override these to customize semantic colors.
 // If not overridden, they use sensible defaults.
 
-// The status seeds below are tuned to sit in one family with the sage brand
-// (`$fui-brand` / success `#7fc9b3`): soft, muted, ~60% lightness rather than
-// neon. Danger is the warm complement of sage, warning its split-complement,
-// info a cool teal-adjacent slate — so they read as one palette, not bolted-on.
+// Status seeds match the Cloud Surfaces artifact: danger a red-orange rust
+// (held counts, error badges), success a forest green (Enforcing), warning
+// a honey amber (stopped), info a slate-blue. Washes and text stops derive
+// from these; do not invent a second badge palette.
 
-/// Danger/error color — muted coral-terracotta, sage's warm complement.
+/// Danger/error color — red-orange rust.
 /// @type Color
-$fui-danger: #d97066 !default;
+$fui-danger: #c44732 !default;
 
-/// Success color (Fragments brand default — sage; green means "contract passing")
+/// Success color — forest green; green means "contract passing".
 /// @type Color
-$fui-success: #7fc9b3 !default;
+$fui-success: #2c8c5f !default;
 
-/// Warning color — honey amber, muted to match the sage family.
+/// Warning color — honey amber.
 /// @type Color
-$fui-warning: #e0aa5c !default;
+$fui-warning: #c4922a !default;
 
-/// Info color — dusty slate-blue, a cool teal-adjacent tone (was flat grey).
+/// Info color — slate-blue.
 /// @type Color
-$fui-info: #7fa6c4 !default;
+$fui-info: #3d7aa8 !default;