@fragments-sdk/ui 0.18.0 → 0.19.0

package/src/components/Tooltip/index.tsx

@@ -36,6 +36,9 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   defaultOpen?: boolean;
   /** Callback when open state changes */
   onOpenChange?: (open: boolean) => void;
+  /** Whether clicking the trigger closes the tooltip.
+   * @default false */
+  closeOnClick?: boolean;
   /** Explicit props for the tooltip popup element (preferred over top-level HTMLAttributes for clarity) */
   contentProps?: React.HTMLAttributes<HTMLDivElement>;
 }
@@ -83,6 +86,7 @@ function TooltipRoot({
   open,
   defaultOpen,
   onOpenChange,
+  closeOnClick = false,
   contentProps,
   className,
   style,
@@ -113,8 +117,8 @@ function TooltipRoot({
     [children],
   );
 
-  if (disabled) {
-    return children;
+  if (disabled || !children) {
+    return children ?? null;
   }
 
   const {
@@ -129,7 +133,7 @@ function TooltipRoot({
       defaultOpen={defaultOpen}
       onOpenChange={onOpenChange}
     >
-      <BaseTooltip.Trigger render={renderTrigger} />
+      <BaseTooltip.Trigger closeOnClick={closeOnClick} render={renderTrigger} />
       <BaseTooltip.Portal>
         <BaseTooltip.Positioner
           side={side}

package/src/index.ts

@@ -1,6 +1,8 @@
-// Import CSS variables and base styles
-// This ensures --fui-* variables are available when using any component
-import './styles/globals.scss';
+// CSS variables and base styles are NOT auto-imported here.
+// Consumers must import styles separately with seed configuration:
+//   @use '@fragments-sdk/ui/styles' with ($fui-brand: ..., $fui-neutral: ...);
+// Bundling globals.scss here would compile with default seeds and
+// override any consumer-configured palette.
 
 // Runtime CSS detection — warns if component styles aren't loaded
 import { checkCssLoaded } from './utils/css-warning';
@@ -404,6 +406,8 @@ export {
   type PromptVariant,
   type PromptTextareaProps,
   type PromptToolbarProps,
+  type PromptTabsProps,
+  type PromptTabProps,
   type PromptActionsProps,
   type PromptInfoProps,
   type PromptActionButtonProps,
@@ -591,6 +595,7 @@ export {
   type DrawerBodyProps,
   type DrawerFooterProps,
   type DrawerCloseProps,
+  type DrawerSwipeAreaProps,
 } from './components/Drawer';
 
 // Pagination

package/src/styles/globals.scss

@@ -83,13 +83,18 @@ $fui-info: #3b82f6 !default;
   }
 
   // Base Element Resets
-  :where(html) {
+  // Use real specificity (not :where()) for font-size so it overrides
+  // the browser default 16px. This makes 1rem = 14px throughout.
+  html {
+    font-size: #{$fui-base-font-size};
     scroll-behavior: smooth;
   }
 
   :where(body) {
     margin: 0;
+    font-size: inherit;
     font-family: var(--fui-font-sans, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+    line-height: var(--fui-line-height-normal, $fui-line-height-normal);
     background-color: var(--fui-bg-primary, #ffffff);
     color: var(--fui-text-primary, #171717);
     -webkit-font-smoothing: antialiased;

package/src/tokens/_computed.scss

@@ -86,6 +86,7 @@ $computed-sidebar-item-height: density.px-to-rem($_density, map.get($_density, s
 
 // Accent colors (from brand seed)
 $computed-color-accent: seeds.$fui-brand;
+$computed-color-on-accent: derive.contrast-color(seeds.$fui-brand);
 $computed-color-accent-hover: derive.derive-accent-hover(seeds.$fui-brand, false);
 $computed-color-accent-active: derive.derive-accent-active(seeds.$fui-brand, false);
 
@@ -153,8 +154,9 @@ $computed-backdrop: derive.derive-backdrop(false);
 // Computed: Colors - Dark Mode
 // --------------------------------------------
 
-// Accent colors (derive light version for dark mode)
+// Accent colors — dark brands lightened for visibility; on-accent handles text contrast
 $computed-dark-color-accent: derive.derive-dark-accent(seeds.$fui-brand);
+$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);
 

package/src/tokens/_density.scss

@@ -59,8 +59,8 @@ $density-default: (
   // Input height
   input-height: 40px,
   // ~6 units
-  input-height-sm: 28px,
-  // 4 units
+  input-height-sm: 32px,
+  // ~4.5 units
   input-height-lg: 44px,
   // ~6 units
   // Touch targets (baseline)
@@ -70,8 +70,8 @@ $density-default: (
   touch-lg: 44px,
   // WCAG AAA recommended
   // Sidebar navigation
-  sidebar-item-height: 35px,
-  // 5 units
+  sidebar-item-height: 36px,
+  // ~5 units
 );
 
 $density-relaxed: (

package/src/tokens/_derive.scss

@@ -20,14 +20,8 @@
 /// @param {Color} $color - Color to check
 /// @return {Boolean} True if dark
 @function is-dark-color($color) {
-  $r: math.div(color.channel($color, 'red', $space: rgb), 255);
-  $g: math.div(color.channel($color, 'green', $space: rgb), 255);
-  $b: math.div(color.channel($color, 'blue', $space: rgb), 255);
-
-  // Relative luminance formula (simplified)
-  $luminance: 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
-
-  @return $luminance < 0.5;
+  // oklch lightness is perceptually uniform (0-1 range)
+  @return color.channel($color, 'lightness', $space: oklch) < 0.5;
 }
 
 /// Get appropriate contrast color (black or white)
@@ -52,22 +46,22 @@
 /// @param {Boolean} $is-dark - Whether in dark mode
 /// @return {Color} Hover state color
 @function derive-accent-hover($base, $is-dark: false) {
-  $l: color.channel($base, 'lightness', $space: hsl);
+  $l: color.channel($base, 'lightness', $space: oklch);
 
   @if $is-dark {
-    @if $l > 85% {
+    @if $l > 0.85 {
       // Very light accent on dark bg: darken for visible hover
-      @return color.scale($base, $lightness: -10%);
+      @return color.adjust($base, $lightness: -0.05, $space: oklch);
     }
     // Standard dark mode: lighten for hover
-    @return color.scale($base, $lightness: 8%);
+    @return color.adjust($base, $lightness: 0.04, $space: oklch);
   } @else {
-    @if $l < 15% {
+    @if $l < 0.15 {
       // Very dark accent on light bg: lighten for visible hover
-      @return color.scale($base, $lightness: 18%);
+      @return color.adjust($base, $lightness: 0.09, $space: oklch);
     }
     // Standard light mode: darken for hover
-    @return color.scale($base, $lightness: -10%);
+    @return color.adjust($base, $lightness: -0.05, $space: oklch);
   }
 }
 
@@ -78,38 +72,36 @@
 /// @param {Boolean} $is-dark - Whether in dark mode
 /// @return {Color} Active state color
 @function derive-accent-active($base, $is-dark: false) {
-  $l: color.channel($base, 'lightness', $space: hsl);
+  $l: color.channel($base, 'lightness', $space: oklch);
 
   @if $is-dark {
-    @if $l > 85% {
+    @if $l > 0.85 {
       // Very light accent on dark bg: darken more for active
-      @return color.scale($base, $lightness: -16%);
+      @return color.adjust($base, $lightness: -0.08, $space: oklch);
     }
     // Standard dark mode: lighten more for active
-    @return color.scale($base, $lightness: 14%);
+    @return color.adjust($base, $lightness: 0.07, $space: oklch);
   } @else {
-    @if $l < 15% {
+    @if $l < 0.15 {
       // Very dark accent on light bg: lighten more for active
-      @return color.scale($base, $lightness: 28%);
+      @return color.adjust($base, $lightness: 0.14, $space: oklch);
     }
     // Standard light mode: darken more for active
-    @return color.scale($base, $lightness: -18%);
+    @return color.adjust($base, $lightness: -0.09, $space: oklch);
   }
 }
 
 /// Derive a light variant of accent for dark mode
-/// Auto-lightens dark brand colors so they're visible on dark backgrounds
+/// Lightens dark brand colors so the accent stands out on dark backgrounds.
+/// Clamps lightness to 0.45–0.85 and chroma to 0.12 to keep it muted.
 /// @param {Color} $brand - Brand color
 /// @return {Color} Lightened accent for dark mode
 @function derive-dark-accent($brand) {
-  @if is-dark-color($brand) {
-    // If brand is dark, invert to light for dark mode
-    // Use a light gray as the dark mode accent
-    @return #f2f2f2;
-  } @else {
-    // If brand is already light, use it as-is or slightly adjust
-    @return color.scale($brand, $lightness: 10%);
-  }
+  $l: color.channel($brand, 'lightness', $space: oklch);
+  $c: color.channel($brand, 'chroma', $space: oklch);
+  $clamped-l: math.max(0.45, math.min($l, 0.85));
+  $clamped-c: math.min($c, 0.12);
+  @return oklch($clamped-l $clamped-c color.channel($brand, 'hue', $space: oklch));
 }
 
 // --------------------------------------------
@@ -129,9 +121,9 @@
   @for $i from 1 through 40 {
     @if wcag-contrast($adjusted, $bg) < $target {
       @if $is-dark {
-        $adjusted: color.adjust($adjusted, $lightness: 2%);
+        $adjusted: color.adjust($adjusted, $lightness: 2%, $space: oklch);
       } @else {
-        $adjusted: color.adjust($adjusted, $lightness: -2%);
+        $adjusted: color.adjust($adjusted, $lightness: -2%, $space: oklch);
       }
     }
   }
@@ -202,13 +194,14 @@
 /// @return {Map} Text token values
 @function derive-text($palette, $is-dark: false, $palette-name: 'stone') {
   @if $is-dark {
-    // Dark mode: light text on dark backgrounds
+    // Dark mode: neutral white text on all palettes.
+    // Palette-tinted text (e.g. green-on-green-dark) looks muddy and reduces
+    // readability. Every major dark theme (Linear, Vercel, Stripe, GitHub)
+    // uses neutral white text regardless of background tint.
     @return (
-      primary: get-shade($palette, 100),           // Main text (light on dark)
-      secondary: get-shade($palette, 400),         // Secondary text
-      // 90/10 mix of palette[400]/palette[500] for WCAG AAA 7:1
-      // against palette[950] backgrounds (pure palette[500] gives ~4.1:1)
-      tertiary: color.mix(get-shade($palette, 500), get-shade($palette, 400), 10%),
+      primary: #ffffff,
+      secondary: rgba(255, 255, 255, 0.6),
+      tertiary: rgba(255, 255, 255, 0.4),
       inverse: get-shade($palette, 900)            // Text on light accents
     );
   }
@@ -239,16 +232,16 @@
 /// @return {Map} Border token values
 @function derive-borders($palette, $is-dark: false) {
   @if $is-dark {
-    // Dark mode: semi-transparent borders that adapt to any surface
+    // Dark mode: subtle white-alpha borders
     @return (
       default: rgba(255, 255, 255, 0.08),
-      strong: rgba(255, 255, 255, 0.14)
+      strong: rgba(255, 255, 255, 0.15)
     );
   } @else {
-    // Light mode: semi-transparent borders that adapt to any surface
+    // Light mode: reduced opacity (ChatGPT --border-light ~5%)
     @return (
-      default: rgba(0, 0, 0, 0.08),
-      strong: rgba(0, 0, 0, 0.14)
+      default: rgba(0, 0, 0, 0.05),
+      strong: rgba(0, 0, 0, 0.10)
     );
   }
 }
@@ -262,18 +255,18 @@
 /// @return {Map} Shadow token values
 @function derive-shadows($is-dark: false) {
   @if $is-dark {
-    // Dark mode: reduced shadows for AI-era aesthetic
+    // Dark mode: near-zero shadows (Linear uses borders, not shadows)
     @return (
-      sm: (0 1px 2px 0 rgba(0, 0, 0, 0.2)),
-      md: (0 2px 4px -1px rgba(0, 0, 0, 0.25), 0 1px 3px -2px rgba(0, 0, 0, 0.2)),
-      lg: (0 8px 12px -3px rgba(0, 0, 0, 0.35), 0 3px 5px -4px rgba(0, 0, 0, 0.25))
+      sm: (0 1px 2px 0 rgba(0, 0, 0, 0.15)),
+      md: (0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 1px 3px -2px rgba(0, 0, 0, 0.15)),
+      lg: (0 8px 12px -3px rgba(0, 0, 0, 0.25), 0 3px 5px -4px rgba(0, 0, 0, 0.18))
     );
   } @else {
-    // Light mode: minimal shadows ("felt but not noticed")
+    // Light mode: flatter aesthetic (Linear/ChatGPT near-zero shadows)
     @return (
-      sm: (0 1px 2px 0 rgba(0, 0, 0, 0.03)),
-      md: (0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 1px 3px -2px rgba(0, 0, 0, 0.04)),
-      lg: (0 8px 12px -3px rgba(0, 0, 0, 0.08), 0 3px 5px -4px rgba(0, 0, 0, 0.05))
+      sm: (0 1px 2px 0 rgba(0, 0, 0, 0.02)),
+      md: (0 2px 4px -1px rgba(0, 0, 0, 0.04), 0 1px 3px -2px rgba(0, 0, 0, 0.03)),
+      lg: (0 8px 12px -3px rgba(0, 0, 0, 0.06), 0 3px 5px -4px rgba(0, 0, 0, 0.04))
     );
   }
 }
@@ -324,7 +317,7 @@
 /// @param {Color} $color - The semantic color
 /// @return {Color} Hover state color
 @function derive-semantic-hover($color) {
-  @return color.scale($color, $lightness: -10%);
+  @return color.adjust($color, $lightness: -0.05, $space: oklch);
 }
 
 // --------------------------------------------
@@ -424,9 +417,9 @@
   @for $i from 1 through 40 {
     @if wcag-contrast($adjusted, $bg) < $target {
       @if $is-dark {
-        $adjusted: color.adjust($adjusted, $lightness: 2%);
+        $adjusted: color.adjust($adjusted, $lightness: 2%, $space: oklch);
       } @else {
-        $adjusted: color.adjust($adjusted, $lightness: -2%);
+        $adjusted: color.adjust($adjusted, $lightness: -2%, $space: oklch);
       }
     }
   }

package/src/tokens/_palettes.scss

@@ -83,6 +83,24 @@ $palette-earth: (
   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
+);
+
 // --------------------------------------------
 // Fire - Warm red/orange tones
 // Energy, passion feel
@@ -110,6 +128,7 @@ $palettes: (
   "sand": $palette-sand,
   "earth": $palette-earth,
   "fire": $palette-fire,
+  "fragments": $palette-fragments,
   "wind": $palette-stone  // Legacy alias — "wind" was renamed to "stone"
 );
 
@@ -118,7 +137,7 @@ $palettes: (
 // --------------------------------------------
 
 /// Get a palette map by name
-/// @param {String} $name - Palette name (stone, ice, sand, earth, fire)
+/// @param {String} $name - Palette name (stone, ice, sand, earth, fire, fragments)
 /// @return {Map} The palette map with shades 50-950
 @function get-palette($name) {
   @if not map.has-key($palettes, $name) {

package/src/tokens/_seeds.scss

@@ -26,7 +26,7 @@
 $fui-brand: #18181b !default;
 
 /// Neutral palette name for surfaces, text, and borders
-/// Options: "stone" | "ice" | "earth" | "sand" | "fire"
+/// Options: "stone" | "ice" | "earth" | "sand" | "fire" | "fragments"
 /// @type String
 $fui-neutral: "stone" !default;
 
@@ -45,7 +45,7 @@ $fui-radius-style: "default" !default;
 // --------------------------------------------
 // Fail fast at compile time if invalid seed values are provided.
 
-$_valid-neutrals: "stone", "ice", "earth", "sand", "fire";
+$_valid-neutrals: "stone", "ice", "earth", "sand", "fire", "fragments";
 @if not list.index($_valid-neutrals, $fui-neutral) {
   @error "Invalid $fui-neutral: '#{$fui-neutral}'. Must be one of: #{$_valid-neutrals}";
 }

package/src/tokens/_variables.scss

@@ -57,13 +57,15 @@ $fui-font-mono:
   "Geist Mono", "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", Menlo, monospace !default;
 
 // Font sizes (rem based on 14px root)
+// Compressed scale: base/md = 14px (1rem). No 16px step.
+// Hierarchy driven by weight, not size jumps.
 $fui-font-size-2xs: 0.714rem !default; // 10px
 $fui-font-size-xs: 0.857rem !default; // 12px
 $fui-font-size-sm: 1rem !default; // 14px (base)
-$fui-font-size-base: 1.143rem !default; // 16px
+$fui-font-size-base: 1rem !default; // 14px (= sm, body base)
 $fui-font-size-lg: 1.286rem !default; // 18px
-$fui-font-size-xl: 1.714rem !default; // 24px
-$fui-font-size-2xl: 2.143rem !default; // 30px
+$fui-font-size-xl: 1.429rem !default; // 20px
+$fui-font-size-2xl: 1.714rem !default; // 24px
 
 $fui-font-weight-normal: 400 !default;
 $fui-font-weight-medium: 500 !default;
@@ -74,6 +76,10 @@ $fui-line-height-tight: 1.25 !default;
 $fui-line-height-normal: 1.5 !default;
 $fui-line-height-relaxed: 1.625 !default;
 
+// Letter spacing (Linear-inspired tight tracking for headings)
+$fui-letter-spacing-tight: -0.02em !default; // for xl+ headings
+$fui-letter-spacing-normal: normal !default;
+
 // --------------------------------------------
 // Spacing (derived from density seed)
 // --------------------------------------------
@@ -105,14 +111,15 @@ $fui-radius-full: computed.$computed-radius-full !default;
 // --------------------------------------------
 // Transitions
 // --------------------------------------------
-$fui-transition-fast: 150ms ease !default;
-$fui-transition-normal: 200ms ease !default;
+$fui-transition-fast: 160ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !default; // Linear's easing
+$fui-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1) !default; // ChatGPT's easing
 
 // --------------------------------------------
 // Colors - Light Mode (derived from brand/neutral seeds)
 // --------------------------------------------
 // Accent colors (derived from $fui-brand seed)
 $fui-color-accent: computed.$computed-color-accent !default;
+$fui-color-on-accent: computed.$computed-color-on-accent !default;
 $fui-color-accent-hover: computed.$computed-color-accent-hover !default;
 $fui-color-accent-active: computed.$computed-color-accent-active !default;
 
@@ -174,8 +181,9 @@ $fui-scrollbar-thumb-hover: computed.$computed-scrollbar-thumb-hover !default;
 // --------------------------------------------
 // Colors - Dark Mode (derived from seeds)
 // --------------------------------------------
-// Accent colors (light on dark background)
+// Accent colors (brand used directly in dark mode; on-accent handles text contrast)
 $fui-dark-color-accent: computed.$computed-dark-color-accent !default;
+$fui-dark-color-on-accent: computed.$computed-dark-color-on-accent !default;
 $fui-dark-color-accent-hover: computed.$computed-dark-color-accent-hover !default;
 $fui-dark-color-accent-active: computed.$computed-dark-color-accent-active !default;
 
@@ -265,15 +273,15 @@ $fui-touch-lg: computed.$computed-touch-lg !default;
 $fui-target-size-min: 1.714rem !default; // 24px
 $fui-target-size-comfortable: $fui-touch-md !default;
 
-// Toggle/Switch (iOS-proportioned: ~1.65:1 width:height ratio)
-$fui-toggle-width-sm: 2.857rem !default; // 40px
-$fui-toggle-width-md: 3.643rem !default; // 51px (iOS standard)
-$fui-toggle-width-lg: 4.286rem !default; // 60px
-$fui-toggle-height-sm: $fui-target-size-min !default; // 24px
-$fui-toggle-height-md: 2.214rem !default; // 31px (iOS standard)
-$fui-toggle-height-lg: 2.571rem !default; // 36px
-$fui-toggle-thumb-sm: 1.286rem !default; // 18px
-$fui-toggle-thumb-md: 1.929rem !default; // 27px (iOS standard)
+// Toggle/Switch (web-proportioned: ~1.8:1 width:height ratio)
+$fui-toggle-width-sm: 1.857rem !default; // 26px
+$fui-toggle-width-md: 2.571rem !default; // 36px
+$fui-toggle-width-lg: 3.286rem !default; // 46px
+$fui-toggle-height-sm: 1.143rem !default; // 16px
+$fui-toggle-height-md: 1.429rem !default; // 20px
+$fui-toggle-height-lg: 1.857rem !default; // 26px
+$fui-toggle-thumb-sm: 0.857rem !default; // 12px
+$fui-toggle-thumb-md: 1.143rem !default; // 16px
 $fui-toggle-thumb-offset: 2px !default; // Thumb inset from track edge
 
 // Badge
@@ -430,6 +438,8 @@ $fui-dark-tooltip-shadow:
     --fui-line-height-tight: #{$fui-line-height-tight};
     --fui-line-height-normal: #{$fui-line-height-normal};
     --fui-line-height-relaxed: #{$fui-line-height-relaxed};
+    --fui-letter-spacing-tight: #{$fui-letter-spacing-tight};
+    --fui-letter-spacing-normal: #{$fui-letter-spacing-normal};
 
     // Spacing (micro)
     --fui-space-px: #{$fui-space-px};
@@ -460,6 +470,7 @@ $fui-dark-tooltip-shadow:
 
     // Colors — Accent (light-dark for automatic dark mode)
     --fui-color-accent: light-dark(#{$fui-color-accent}, #{$fui-dark-color-accent});
+    --fui-color-on-accent: light-dark(#{$fui-color-on-accent}, #{$fui-dark-color-on-accent});
     --fui-color-accent-hover: light-dark(#{$fui-color-accent-hover}, #{$fui-dark-color-accent-hover});
     --fui-color-accent-active: light-dark(#{$fui-color-accent-active}, #{$fui-dark-color-accent-active});
 
@@ -506,7 +517,7 @@ $fui-dark-tooltip-shadow:
     --fui-border-strong: light-dark(#{$fui-border-strong}, #{$fui-dark-border-strong});
 
     // Form chrome (derived from theme surfaces + seed-driven accent)
-    --fui-field-bg: color-mix(in srgb, var(--fui-bg-elevated) 92%, var(--fui-bg-primary));
+    --fui-field-bg: var(--fui-bg-tertiary);
     --fui-field-bg-disabled: color-mix(in srgb, var(--fui-bg-tertiary) 88%, var(--fui-bg-primary));
     --fui-field-border: color-mix(in srgb, var(--fui-border-strong) 78%, var(--fui-bg-primary));
     --fui-field-border-hover: color-mix(in srgb, var(--fui-text-tertiary) 58%, var(--fui-border-strong));
@@ -590,18 +601,22 @@ $fui-dark-tooltip-shadow:
   @supports (color: oklch(from red l c h)) {
     :root {
       // Accent derived from seed-brand
-      // Light mode: brand as-is; dark mode: inverted lightness, reduced chroma
+      // Light mode: brand as-is. Dark mode: lightened for visibility on dark surfaces.
       --fui-color-accent: light-dark(
         var(--fui-seed-brand),
-        oklch(from var(--fui-seed-brand) clamp(0.88, calc(1 - l + 0.1), 0.96) min(c, 0.05) h)
+        oklch(from var(--fui-seed-brand) clamp(0.45, l, 0.85) min(c, 0.12) h)
       );
+
+      // Auto-contrast text for elements on accent backgrounds (buttons, chips, etc.)
+      // Lightness > 0.6 → dark text; otherwise → white. Users can override this token.
+      --fui-color-on-accent: oklch(from var(--fui-color-accent) calc(0 + (1 - clamp(0, calc((l - 0.6) * 999), 1))) 0 0);
       --fui-color-accent-hover: light-dark(
         oklch(from var(--fui-seed-brand) max(0.05, calc(l - 0.06)) c h),
-        oklch(from var(--fui-seed-brand) clamp(0.80, calc(1 - l + 0.02), 0.90) min(c, 0.05) h)
+        oklch(from var(--fui-seed-brand) clamp(0.52, calc(l + 0.07), 0.90) min(c, 0.12) h)
       );
       --fui-color-accent-active: light-dark(
         oklch(from var(--fui-seed-brand) max(0.05, calc(l - 0.12)) c h),
-        oklch(from var(--fui-seed-brand) clamp(0.73, calc(1 - l - 0.05), 0.85) min(c, 0.05) h)
+        oklch(from var(--fui-seed-brand) clamp(0.40, calc(l - 0.05), 0.80) min(c, 0.12) h)
       );
 
       // Semantic hover derived from seed
@@ -626,23 +641,23 @@ $fui-dark-tooltip-shadow:
       );
 
       // Focus ring derived from seed-brand
-      --fui-focus-ring-color: light-dark(
-        var(--fui-seed-brand),
-        oklch(from var(--fui-seed-brand) clamp(0.88, calc(1 - l + 0.1), 0.96) min(c, 0.05) h)
-      );
+      --fui-focus-ring-color: var(--fui-seed-brand);
     }
 
     // Runtime-derived dark mode overrides (replaces SCSS-computed when supported)
+    // Dark brands are lightened so the button stands out against dark backgrounds.
+    // Hover goes slightly lighter, active slightly darker. on-accent handles text.
     :root[data-theme="dark"],
     :root.dark {
-      --fui-color-accent: oklch(from var(--fui-seed-brand) clamp(0.88, calc(1 - l + 0.1), 0.96) min(c, 0.05) h);
-      --fui-color-accent-hover: oklch(from var(--fui-seed-brand) clamp(0.80, calc(1 - l + 0.02), 0.90) min(c, 0.05) h);
-      --fui-color-accent-active: oklch(from var(--fui-seed-brand) clamp(0.73, calc(1 - l - 0.05), 0.85) min(c, 0.05) h);
+      --fui-color-accent: oklch(from var(--fui-seed-brand) clamp(0.45, l, 0.85) min(c, 0.12) h);
+      --fui-color-on-accent: oklch(from var(--fui-color-accent) calc(0 + (1 - clamp(0, calc((l - 0.6) * 999), 1))) 0 0);
+      --fui-color-accent-hover: oklch(from var(--fui-seed-brand) clamp(0.52, calc(l + 0.07), 0.90) min(c, 0.12) h);
+      --fui-color-accent-active: oklch(from var(--fui-seed-brand) clamp(0.40, calc(l - 0.05), 0.80) min(c, 0.12) h);
       --fui-color-danger-bg: color-mix(in oklch, var(--fui-seed-danger) 15%, transparent);
       --fui-color-success-bg: color-mix(in oklch, var(--fui-seed-success) 15%, transparent);
       --fui-color-warning-bg: color-mix(in oklch, var(--fui-seed-warning) 15%, transparent);
       --fui-color-info-bg: color-mix(in oklch, var(--fui-seed-info) 15%, transparent);
-      --fui-focus-ring-color: oklch(from var(--fui-seed-brand) clamp(0.88, calc(1 - l + 0.1), 0.96) min(c, 0.05) h);
+      --fui-focus-ring-color: var(--fui-seed-brand);
     }
   }
 
@@ -717,8 +732,9 @@ $fui-dark-tooltip-shadow:
 
 // Private mixin for dark mode token values
 @mixin _fui-dark-tokens {
-  // Accent colors invert for dark mode (light on dark)
+  // Accent colors — brand used directly; on-accent handles text contrast
   --fui-color-accent: #{$fui-dark-color-accent};
+  --fui-color-on-accent: #{$fui-dark-color-on-accent};
   --fui-color-accent-hover: #{$fui-dark-color-accent-hover};
   --fui-color-accent-active: #{$fui-dark-color-accent-active};
 

package/src/utils/seed-derivation.ts

@@ -13,7 +13,7 @@
 // Types
 // ============================================
 
-export type NeutralPalette = 'stone' | 'ice' | 'sand' | 'earth' | 'fire';
+export type NeutralPalette = 'stone' | 'ice' | 'sand' | 'earth' | 'fire' | 'fragments';
 export type DensityPreset = 'compact' | 'default' | 'relaxed';
 export type RadiusStyle = 'sharp' | 'subtle' | 'default' | 'rounded' | 'pill';
 
@@ -128,6 +128,21 @@ export const PALETTES: Record<NeutralPalette, PaletteShades> = {
     900: '#1c100a',  // Darkened and desaturated for dark mode
     950: '#120a06',  // Very dark warm gray for dark mode bg
   },
+  // Fragments - Rich saturated green tones (the Fragments brand palette)
+  // Dark shades anchor to the Fragments marketing aesthetic
+  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
+  },
 };
 
 // ============================================
@@ -181,6 +196,13 @@ export const PALETTE_SEMANTIC_COLORS: Record<NeutralPalette, SemanticColors> = {
     danger: '#dc2626',  // Red 600 (complements orange)
     info: '#2563eb',    // Blue 600
   },
+  // Fragments - Brand-complementary semantic colors
+  fragments: {
+    success: '#39d98a', // Vibrant green (brand signature)
+    warning: '#f59e0b', // Amber 500
+    danger: '#ef4444',  // Red 500
+    info: '#3b82f6',    // Blue 500
+  },
 };
 
 /**