@usefragments/ui 1.6.0 → 1.7.0

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

@@ -1,5 +1,5 @@
 /* This file is generated by scripts/generate-measurements.mjs. Do not edit. */
-/* Source SHA-256: 1e8a256c12eaf2f8f4a2a5c4ed25477bf303b56dc2184ac3e29dec71207853bd */
+/* Source SHA-256: deb4b375de296c627460bd2d99618182ae0fa21768c26b2037d549cd84a7a0c8 */
 
 :root {
   --fui-raw-space-0: 0;
@@ -42,6 +42,7 @@
   --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;
@@ -65,6 +66,10 @@
   --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;

package/src/tokens/_measurements.generated.scss

@@ -1,5 +1,5 @@
 // This file is generated by scripts/generate-measurements.mjs. Do not edit.
-// Source SHA-256: 1e8a256c12eaf2f8f4a2a5c4ed25477bf303b56dc2184ac3e29dec71207853bd
+// Source SHA-256: deb4b375de296c627460bd2d99618182ae0fa21768c26b2037d549cd84a7a0c8
 
 @use "sass:map";
 @use "sass:math";
@@ -15,6 +15,7 @@ $typography-role-names: (
   "title-sm",
   "title-md",
   "title-lg",
+  "display",
   "code"
 );
 
@@ -201,6 +202,7 @@ $targets: (
     "field-minimum": 140px,
     "inline-floor": 56px,
     "compact-content": 168px,
+    "menu-min": 192px,
     "grid-cell": 224px,
     "composer-item": 210px,
     "page-narrow": 800px,
@@ -238,6 +240,12 @@ $typography: (
     "weight": 400,
     "tracking": 0,
   ),
+  "display": (
+    "size": 32px,
+    "line": 40px,
+    "weight": 600,
+    "tracking": -0.02em,
+  ),
   "title-sm": (
     "size": 16px,
     "line": 24px,
@@ -517,6 +525,7 @@ $legacy: (
   --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;
@@ -540,6 +549,10 @@ $legacy: (
   --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;

package/src/tokens/_mixins.scss

@@ -6,14 +6,9 @@
 
 // Focus ring for keyboard accessibility
 @mixin focus-ring {
-  outline: none;
-  box-shadow:
-    0 0 0 1px
-      color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 28%, transparent),
-    0 0 0 calc(var(--fui-focus-ring-width, #{$fui-focus-ring-width}) + 1px)
-      color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 12%, transparent),
-    0 10px 24px -16px
-      color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 32%, transparent);
+  outline: var(--fui-focus-ring-width, #{$fui-focus-ring-width}) solid
+    var(--fui-focus-ring-color, #{$fui-focus-ring-color});
+  outline-offset: var(--fui-focus-ring-offset, #{$fui-focus-ring-offset});
 }
 
 // Reset button styles
@@ -26,6 +21,10 @@
   font: inherit;
   color: inherit;
   cursor: pointer;
+  // Pressables are controls, not prose: no text selection on repeated or
+  // shift-clicks, no mobile tap flash.
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
 
   &:disabled {
     cursor: not-allowed;

package/src/tokens/_palettes.scss

@@ -1,179 +1,51 @@
 // ============================================
-// @usefragments/ui Elemental Palettes
+// @usefragments/ui Neutral Palette
 // ============================================
 //
-// Defines 5 elemental palettes with 11 shades (50-950).
-// Each palette has a distinct tonal character.
+// One neutral ramp with 11 shades (50-950) powering one light theme and one
+// dark theme. Theme variation comes from the seeds ($fui-brand, $fui-density,
+// $fui-radius-style) — not from alternative neutral ramps.
 //
 // ============================================
 
-@use 'sass:color';
-@use 'sass:map';
-@use 'sass:math';
-
-// --------------------------------------------
-// Stone - Muted cool neutrals (Default)
-// Subtle, balanced feel - matches current zinc-like palette
-// --------------------------------------------
-$palette-stone: (
-  50:  #fafafa,
-  100: #f4f4f5,
-  200: #e4e4e7,
-  300: #d4d4d8,
-  400: #a1a1aa,
-  500: #71717a,
-  600: #52525b,
-  700: #3f3f46,
-  800: #27272a,
-  900: #18181b,
-  950: #09090b
-);
-
-// --------------------------------------------
-// Mono - Restraint-first neutral palette
-// Dark mode is intentionally close to true black so product surfaces feel
-// unified, not like separate panels pasted onto a grey shell.
-// --------------------------------------------
-$palette-mono: (
-  50:  #fafafa,
-  100: #f5f5f5,
-  200: #e5e5e5,
-  300: #d4d4d4,
-  400: #a3a3a3,
-  500: #737373,
-  600: #525252,
-  700: #404040,
-  800: #171717,
-  900: #0a0a0a,
-  950: #000000
-);
-
-// --------------------------------------------
-// Ice - Cool blue tones
-// Professional, tech feel
-// --------------------------------------------
-$palette-ice: (
-  50:  #f0f9ff,
-  100: #e0f2fe,
-  200: #bae6fd,
-  300: #7dd3fc,
-  400: #38bdf8,
-  500: #0ea5e9,
-  600: #0284c7,
-  700: #0369a1,
-  800: #0f2d3d,  // Darkened and desaturated for dark mode
-  900: #0a1f2c,  // Darkened and desaturated for dark mode
-  950: #06141c   // Very dark blue-gray for dark mode bg
-);
-
-// --------------------------------------------
-// Sand - Warm brown/terracotta tones
-// Organic, earthy feel
-// --------------------------------------------
-$palette-sand: (
-  50:  #fdf8f3,
-  100: #f5ebe0,
-  200: #e8d5c4,
-  300: #d4b89c,
-  400: #c19a6b,
-  500: #a67c52,
-  600: #8b5e34,
-  700: #6f4518,
-  800: #231a12,  // Darkened and desaturated for dark mode
-  900: #181210,  // Darkened and desaturated for dark mode
-  950: #0f0c09   // Very dark warm gray for dark mode bg
-);
-
-// --------------------------------------------
-// Earth - Green/olive tones
-// Natural, growth feel
-// --------------------------------------------
-$palette-earth: (
-  50:  #f5f7f2,
-  100: #e8ede3,
-  200: #d1dbc6,
-  300: #b3c4a0,
-  400: #8fa872,
-  500: #6b8c4e,
-  600: #517035,
-  700: #3d5527,
-  800: #1a2316,  // Darkened and desaturated for dark mode
-  900: #121810,  // Darkened and desaturated for dark mode
-  950: #0a0f08   // Very dark green-gray for dark mode bg
-);
-
-// --------------------------------------------
-// Fragments - Rich saturated green tones
-// The Fragments brand palette — deep forest greens
-// --------------------------------------------
-$palette-fragments: (
-  50:  #f0f7f3,
-  100: #dceee3,
-  200: #b8ddc6,
-  300: #88c5a0,
-  400: #5aaa7a,
-  500: #3d8f60,
-  600: #2d7049,
-  700: #235536,
-  800: #1a3025,  // Dark card surface
-  900: #142318,  // Dark surface
-  950: #0d1f17   // Darkest bg
-);
-
-// --------------------------------------------
-// Carbon - Fragments brand neutral (DEFAULT)
-// The hybrid-skin charcoal ramp. Distinct from `mono` (true black) — carbon's
-// dark surfaces sit at #212121 (page) with #171717 recessed panels and #2f2f2f
-// raised/elevated so panels read as material, not voids. Dark surface/text/
-// border values are emitted explicitly by the derive-* branches; light mode
-// behaves like a neutral white palette. Key stops: 900 = page bg,
-// 950 = recessed surface, 800 = hairline, 700 = strong border, 500 = faint text.
-// --------------------------------------------
-$palette-carbon: (
-  50:  #fafafa,
-  100: #f4f4f4,
-  200: #e4e4e4,
-  300: #d1d1d1,
-  400: #b0b0b0,
-  500: #8f8f8f,  // faint / placeholder text
-  600: #5a5a5a,
-  700: #4b4b4b,  // strong border
-  800: #323232,  // hairline / default border
-  900: #212121,  // page / body background
-  950: #171717   // recessed surface (cards, panels, code wells)
-);
-
-// --------------------------------------------
-// Fire - Warm red/orange tones
-// Energy, passion feel
-// --------------------------------------------
-$palette-fire: (
-  50:  #fff7ed,
-  100: #ffedd5,
-  200: #fed7aa,
-  300: #fdba74,
-  400: #fb923c,
-  500: #f97316,
-  600: #ea580c,
-  700: #c2410c,
-  800: #2d1810,  // Darkened and desaturated for dark mode
-  900: #1c100a,  // Darkened and desaturated for dark mode
-  950: #120a06   // Very dark warm gray for dark mode bg
+@use "sass:color";
+@use "sass:map";
+@use "sass:math";
+
+// --------------------------------------------
+// Paper - Warm cream neutral (the only ramp)
+// Gallery-paper ramp: a warm cream canvas with warm-grey ink. Light surfaces
+// sit on the #faf8f5 canvas with white cards floating above; dark mode moves
+// the same warmth onto a charcoal plane. Key stops:
+// 100 = light page canvas, 200 = tinted section band, 300 = warm chip/hover,
+// 900 = ink / primary action fill, 950 = dark page bg.
+// --------------------------------------------
+$palette-paper: (
+  50: #fdfcfa,
+  100: #faf8f5,
+  // light page canvas
+  200: #f2ede7,
+  // tinted section band
+  300: #e9e2da,
+  // warm chip / secondary action
+  400: #b3aca3,
+  500: #8d8780,
+  // faint / placeholder text
+  600: #6a6560,
+  700: #4a4641,
+  // strong border (dark)
+  800: #343029,
+  // hairline (dark)
+  900: #1d1c1a,
+  // ink / primary action fill / dark elevated
+  950: #171614, // dark page background
 );
 
 // --------------------------------------------
 // Palette Map for Dynamic Access
 // --------------------------------------------
 $palettes: (
-  "stone": $palette-stone,
-  "mono": $palette-mono,
-  "ice": $palette-ice,
-  "sand": $palette-sand,
-  "earth": $palette-earth,
-  "fire": $palette-fire,
-  "fragments": $palette-fragments,
-  "carbon": $palette-carbon,
-  "wind": $palette-stone  // Legacy alias — "wind" was renamed to "stone"
+  "paper": $palette-paper,
 );
 
 // --------------------------------------------
@@ -181,12 +53,12 @@ $palettes: (
 // --------------------------------------------
 
 /// Get a palette map by name
-/// @param {String} $name - Palette name (stone, ice, sand, earth, fire, fragments)
+/// @param {String} $name - Palette name ("paper")
 /// @return {Map} The palette map with shades 50-950
 @function get-palette($name) {
   @if not map.has-key($palettes, $name) {
-    @warn "Unknown palette '#{$name}'. Using 'stone' as fallback.";
-    @return $palette-stone;
+    @warn "Unknown palette '#{$name}'. Using 'paper' as fallback.";
+    @return $palette-paper;
   }
   @return map.get($palettes, $name);
 }

package/src/tokens/_seeds.scss

@@ -11,7 +11,6 @@
 // Example:
 //   @use '@usefragments/ui/styles' with (
 //     $fui-brand: #0066ff,
-//     $fui-neutral: "ice",
 //     $fui-density: "compact",
 //     $fui-radius-style: "rounded"
 //   );
@@ -23,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"
@@ -49,7 +49,7 @@ $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}";
 }
@@ -70,23 +70,23 @@ $_valid-radii: measurements.$radius-profile-names;
 // 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`): muted and mineral rather than neon.
-// Danger is the deep clay 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 — deep muted clay, sage's warm complement.
+/// Danger/error color — red-orange rust.
 /// @type Color
-$fui-danger: #a54f46 !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;