@usefragments/ui 1.5.4 → 1.7.0

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;
@@ -51,56 +50,6 @@
   }
 }
 
-// Enforce minimum pointer target dimensions for interactive controls.
-@mixin min-target-size($size: var(--fui-target-size-min, #{$fui-target-size-min})) {
-  min-width: $size;
-  min-height: $size;
-}
-
-// Centered interactive hit area with minimum dimensions.
-@mixin touch-target($size: var(--fui-target-size-min, #{$fui-target-size-min})) {
-  @include min-target-size($size);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-// Typography base
-@mixin text-base {
-  font-family: var(--fui-font-sans, #{$fui-font-sans});
-  font-size: var(--fui-font-size-sm, #{$fui-font-size-sm});
-  line-height: var(--fui-line-height-normal, #{$fui-line-height-normal});
-  color: var(--fui-text-primary, #{$fui-text-primary});
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-// Label text
-@mixin label-text {
-  font-family: var(--fui-font-sans, #{$fui-font-sans});
-  font-size: var(--fui-font-size-sm, #{$fui-font-size-sm});
-  font-weight: var(--fui-font-weight-medium, #{$fui-font-weight-medium});
-  color: var(--fui-text-primary, #{$fui-text-primary});
-}
-
-// Helper/caption text
-@mixin helper-text {
-  font-family: var(--fui-font-sans, #{$fui-font-sans});
-  font-size: var(--fui-font-size-xs, #{$fui-font-size-xs});
-  color: var(--fui-text-secondary, #{$fui-text-secondary});
-}
-
-// Section label text (e.g. sidebar headings, TOC label).
-// 11px uppercase reads cleanly where 10px starts to crush; semibold + 0.06em
-// tracking gives the label enough weight to register without shouting.
-@mixin section-label-text {
-  @include helper-text;
-  font-size: 0.786rem; // 11px at 14px root
-  font-weight: var(--fui-font-weight-semibold, #{$fui-font-weight-semibold});
-  text-transform: uppercase;
-  letter-spacing: var(--fui-letter-spacing-wide, #{$fui-letter-spacing-wide});
-}
-
 // Card surface
 @mixin surface-elevated {
   background-color: var(--fui-bg-elevated, #{$fui-bg-elevated});
@@ -108,149 +57,6 @@
   border-radius: var(--fui-radius-lg, #{$fui-radius-lg});
 }
 
-// Dropdown / popup container base styles.
-// Compose with @include surface-elevated for the full treatment.
-// Consumer sets min-width and optionally max-height/overflow.
-@mixin popup-container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--fui-popup-row-gap, #{$fui-popup-row-gap});
-  padding: var(--fui-popup-padding, #{$fui-popup-padding});
-  box-shadow: var(--fui-shadow-md, #{$fui-shadow-md});
-}
-
-// Scroll viewport for the popups that peek — Select, Listbox, Combobox. Sets
-// `--_popup-scroll-max-h`; the consumer applies it, because Base UI puts an
-// inline `max-height: 100%` on some of these popups that only `!important` beats.
-//
-// Row *pitch*, not row height: `popup-container` is a flex column, so N rows
-// occupy N pitches less the trailing gap. (A grouped popup nests its rows one
-// level down, where that gap does not reach, so the peek there runs a few
-// pixels shy of half a row — visible only as a slightly smaller sliver.)
-// Every term here reads the token that actually draws it — which is the point.
-// Written out longhand in three separate stylesheets, this calc billed
-// $fui-space-2 of vertical padding for a row `popup-item` pads with
-// $fui-space-1, deriving a 46px row against a real 32px one, so all three
-// popups outgrew their own content and never scrolled at all.
-@mixin popup-scroll-viewport {
-  --_popup-row-h: calc(
-    var(--fui-popup-item-font-size, #{$fui-popup-item-font-size}) *
-      var(--fui-line-height-normal, #{$fui-line-height-normal}) +
-      var(--fui-popup-item-padding-block, #{$fui-popup-item-padding-block}) * 2 +
-      var(--fui-popup-row-gap, #{$fui-popup-row-gap})
-  );
-
-  // The + 2px is the 1px border `surface-elevated` draws top and bottom: these
-  // popups are border-box, so max-height pays for the frame before the rows.
-  --_popup-scroll-max-h: calc(
-    var(--_popup-row-h) *
-      var(--fui-select-max-items, 4.5) - var(--fui-popup-row-gap, #{$fui-popup-row-gap}) +
-      var(--fui-popup-padding, #{$fui-popup-padding}) * 2 + 2px
-  );
-}
-
-// ============================================
-// Popup / menu item — canonical interaction model
-// ============================================
-// Shared by every list-popup surface (Combobox, Select, Menu, Listbox, Command,
-// NavigationMenu) so hover / keyboard-active / selected / disabled read identically
-// everywhere, in both light and dark mode.
-//
-//   rest        → transparent
-//   highlight   → @include popup-item-highlight  (pointer hover AND keyboard-active —
-//                 one neutral indicator; map [data-highlighted], :hover, .active to it)
-//   selected    → @include popup-item-selected   (accent-tinted + inset accent ring)
-//   disabled    → @include popup-item-disabled
-//
-// Base UI components set [data-highlighted] on both hover and keyboard nav, so a single
-// `&[data-highlighted] { @include popup-item-highlight; }` covers both. Custom popups
-// should map `&:hover, &.<active>, &[data-highlighted]` to the same mixin.
-
-// Dropdown/popup item base. Includes button-reset and text-base, then steps the
-// size down to the popup scale — see $fui-popup-item-font-size. Select, Listbox
-// and Combobox size their scroll viewport from the same token, so read it there
-// too rather than re-deriving an item height from the body size.
-@mixin popup-item {
-  @include button-reset;
-  @include text-base;
-
-  font-size: var(--fui-popup-item-font-size, #{$fui-popup-item-font-size});
-  display: flex;
-  align-items: center;
-  gap: var(--fui-space-1, #{$fui-space-1});
-  width: 100%;
-  padding: var(--fui-popup-item-padding-block, #{$fui-popup-item-padding-block})
-    var(--fui-popup-item-padding-inline, #{$fui-popup-item-padding-inline});
-  border-radius: var(--fui-radius-sm, #{$fui-radius-sm});
-  cursor: pointer;
-  outline: none;
-  transition:
-    background-color var(--fui-transition-fast, #{$fui-transition-fast}),
-    color var(--fui-transition-fast, #{$fui-transition-fast});
-}
-
-// Active item — pointer-hover and keyboard-active share this single neutral highlight.
-// Falls back to --fui-bg-active then the SCSS value where --fui-bg-highlight is unset.
-@mixin popup-item-highlight {
-  background-color: var(--fui-bg-highlight, var(--fui-bg-active, #{$fui-bg-active}));
-  color: var(--fui-text-primary, #{$fui-text-primary});
-}
-
-// Disabled item — uniform across every popup.
-@mixin popup-item-disabled {
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: default;
-}
-
-// Group label within a dropdown/popup.
-@mixin popup-group-label {
-  padding: var(--fui-space-1, #{$fui-space-1}) var(--fui-space-2, #{$fui-space-2});
-  font-size: var(--fui-font-size-xs, #{$fui-font-size-xs});
-  font-weight: var(--fui-font-weight-medium, #{$fui-font-weight-medium});
-  color: var(--fui-text-tertiary, #{$fui-text-tertiary});
-  text-transform: uppercase;
-  letter-spacing: var(--fui-letter-spacing-wide, #{$fui-letter-spacing-wide});
-}
-
-// Shared shell for field-like controls.
-@mixin field-shell {
-  background-color: var(--fui-field-bg, transparent);
-  border: 1px solid var(--fui-field-border, var(--fui-border-strong, #{$fui-border-strong}));
-  border-radius: var(--fui-radius-md, #{$fui-radius-md});
-  transition:
-    background-color var(--fui-transition-fast, #{$fui-transition-fast}),
-    border-color var(--fui-transition-fast, #{$fui-transition-fast}),
-    box-shadow var(--fui-transition-fast, #{$fui-transition-fast}),
-    color var(--fui-transition-fast, #{$fui-transition-fast});
-
-  &:hover:not(:disabled):not([data-disabled]):not(:focus-visible) {
-    border-color: var(--fui-field-border-hover, var(--fui-text-tertiary, #{$fui-text-tertiary}));
-  }
-
-  &:focus:not(:disabled):not([data-disabled]) {
-    border-color: var(--fui-field-border-focus, var(--fui-color-accent, #{$fui-color-accent}));
-  }
-
-  &:disabled,
-  &[data-disabled] {
-    background-color: var(--fui-field-bg-disabled, var(--fui-bg-tertiary, #{$fui-bg-tertiary}));
-    color: var(--fui-text-tertiary, #{$fui-text-tertiary});
-  }
-}
-
-@mixin field-shell-focus {
-  @include focus-ring;
-  border-color: var(--fui-field-border-focus, var(--fui-color-accent, #{$fui-color-accent}));
-}
-
-@mixin popup-item-selected {
-  background-color: var(--fui-field-selection-bg, var(--fui-bg-hover, #{$fui-bg-hover}));
-  color: var(--fui-field-selection-color, var(--fui-text-primary, #{$fui-text-primary}));
-  box-shadow: inset 0 0 0 1px
-    var(--fui-field-selection-border, var(--fui-color-accent, #{$fui-color-accent}));
-}
-
 @mixin form-group-surface {
   background-color: var(--fui-form-group-bg, var(--fui-bg-secondary, #{$fui-bg-secondary}));
   border: 1px solid var(--fui-form-group-border, var(--fui-border, #{$fui-border}));
@@ -421,86 +227,3 @@
     0 10px 24px -16px
       color-mix(in srgb, var(--fui-color-danger-text, #{$fui-color-danger-text}) 28%, transparent);
 }
-
-// ============================================
-// Size Variant Mixins
-// ============================================
-
-/// Control size mixin for standardized sizing across buttons, inputs, selects
-/// @param {String} $size - Size variant: 'sm', 'md', or 'lg'
-/// @param {String} $component - Component type: 'button', 'input', or 'select'
-@mixin control-size($size, $component: "button") {
-  // Global accessibility floor: component-specific height tokens may be customized,
-  // but controls should not shrink below the minimum target size.
-  min-height: var(--fui-target-size-min, #{$fui-target-size-min});
-
-  @if $size == "sm" {
-    @if $component == "input" {
-      height: var(--fui-input-height-sm, #{$fui-input-height-sm});
-      padding: 0 var(--fui-space-2, #{$fui-space-2});
-      font-size: var(--fui-font-size-xs, #{$fui-font-size-xs});
-    } @else {
-      height: var(--fui-button-height-sm, #{$fui-button-height-sm});
-      padding: 0 var(--fui-space-2, #{$fui-space-2});
-      font-size: var(--fui-font-size-xs, #{$fui-font-size-xs});
-    }
-  } @else if $size == "md" {
-    @if $component == "input" {
-      height: var(--fui-input-height, #{$fui-input-height});
-      padding: 0 var(--fui-space-3, #{$fui-space-3});
-      font-size: var(--fui-font-size-sm, #{$fui-font-size-sm});
-    } @else {
-      height: var(--fui-button-height-md, #{$fui-button-height-md});
-      padding: 0 var(--fui-space-4, #{$fui-space-4});
-      font-size: var(--fui-font-size-sm, #{$fui-font-size-sm});
-    }
-  } @else if $size == "lg" {
-    @if $component == "input" {
-      height: var(--fui-input-height-lg, #{$fui-input-height-lg});
-      padding: 0 var(--fui-space-4, #{$fui-space-4});
-      font-size: var(--fui-font-size-base, #{$fui-font-size-base});
-    } @else {
-      height: var(--fui-button-height-lg, #{$fui-button-height-lg});
-      padding: 0 var(--fui-space-5, #{$fui-space-5});
-      font-size: var(--fui-font-size-base, #{$fui-font-size-base});
-    }
-  }
-}
-
-// ============================================
-// Form Field Wrapper
-// Generates .wrapper, .label, .helper, .helperError, .errorMessage
-// for consistent form field layout across all form components.
-// ============================================
-
-@mixin form-field-wrapper {
-  .wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .label {
-    @include label-text;
-    margin-bottom: var(--fui-space-1, #{$fui-space-1});
-  }
-
-  .required {
-    color: var(--fui-color-danger-text, #{$fui-color-danger-text});
-    margin-left: 2px;
-  }
-
-  .helper {
-    @include helper-text;
-    margin-top: var(--fui-space-1, #{$fui-space-1});
-  }
-
-  .helperError {
-    color: var(--fui-color-danger-text, #{$fui-color-danger-text});
-  }
-
-  .errorMessage {
-    font-size: var(--fui-font-size-xs, #{$fui-font-size-xs});
-    color: var(--fui-color-danger-text, #{$fui-color-danger-text});
-    margin-top: var(--fui-space-1, #{$fui-space-1});
-  }
-}

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);
 }