@fragments-sdk/ui 0.14.0 → 0.15.1

package/src/components/Textarea/index.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
+import { mergeAriaIds } from '../../utils/aria';
 import styles from './Textarea.module.scss';
 
 export interface TextareaProps extends Omit<
   React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-  'onChange' | 'onBlur' | 'className' | 'style'
+  'onChange' | 'onBlur' | 'onFocus' | 'className' | 'style' | 'size'
 > {
   /** Controlled value */
   value?: string;
@@ -19,6 +20,9 @@ export interface TextareaProps extends Omit<
   maxRows?: number;
   /** Allow user to resize the textarea */
   resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+  /** Size variant.
+   * @default "md" */
+  size?: 'sm' | 'md' | 'lg';
   /** Disabled state */
   disabled?: boolean;
   /** Error state */
@@ -33,6 +37,8 @@ export interface TextareaProps extends Omit<
   onValueChange?: (value: string) => void;
   /** Called when textarea loses focus */
   onBlur?: () => void;
+  /** Called when textarea receives focus */
+  onFocus?: () => void;
   /** Form field name */
   name?: string;
   /** Maximum character length */
@@ -53,11 +59,6 @@ export interface TextareaProps extends Omit<
   style?: React.CSSProperties;
 }
 
-function mergeAriaIds(...ids: Array<string | undefined>): string | undefined {
-  const merged = ids.filter(Boolean).join(' ').trim();
-  return merged.length > 0 ? merged : undefined;
-}
-
 const TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   function Textarea(
     {
@@ -68,6 +69,7 @@ const TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       minRows,
       maxRows,
       resize = 'vertical',
+      size = 'md',
       disabled = false,
       error = false,
       label,
@@ -75,6 +77,7 @@ const TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       onChange,
       onValueChange,
       onBlur,
+      onFocus,
       rootProps,
       className,
       style: wrapperStyle,
@@ -99,6 +102,7 @@ const TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 
     const textareaClasses = [
       styles.textarea,
+      styles[size],
       error && styles.error,
       styles[`resize-${resize}`],
     ]
@@ -154,6 +158,7 @@ const TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             onValueChange?.(e.target.value);
           }}
           onBlur={() => onBlur?.()}
+          onFocus={() => onFocus?.()}
           className={textareaClasses}
           style={Object.keys(textareaInlineStyle).length > 0 ? textareaInlineStyle : undefined}
         />

package/src/components/Theme/index.tsx

@@ -368,21 +368,9 @@ export { ThemeProvider, ThemeToggle, useTheme };
 // configureTheme — JS-only seed configuration
 // ============================================
 
-/**
- * Neutral palette for surfaces, text, and borders.
- * - `stone`: Cool gray (balanced, professional) — default
- * - `ice`: Cool blue-tinted grays (crisp, technical)
- * - `earth`: Warm brown-tinted grays (natural, grounded)
- * - `sand`: Warm tan-tinted grays (organic, approachable)
- * - `fire`: Warm red-tinted grays (bold, energetic)
- *
- * Preview palettes at https://usefragments.com/themes
- */
-export type NeutralPalette = 'stone' | 'ice' | 'earth' | 'sand' | 'fire';
-/** Spacing density: `compact` (tight), `default` (balanced), `relaxed` (spacious) */
-export type DensityPreset = 'compact' | 'default' | 'relaxed';
-/** Border radius style: `sharp` (0), `subtle` (2px), `default` (4px), `rounded` (8px), `pill` (9999px) */
-export type RadiusStyle = 'sharp' | 'subtle' | 'default' | 'rounded' | 'pill';
+// Import + re-export seed derivation types — canonical definitions in utils/seed-derivation.ts
+import type { NeutralPalette, DensityPreset, RadiusStyle } from '../../utils/seed-derivation';
+export type { NeutralPalette, DensityPreset, RadiusStyle };
 
 export interface ConfigureThemeOptions {
   /** Brand/accent color as hex */
@@ -420,12 +408,14 @@ interface DensityConfig {
   baseFontSize: number;
   buttonHeights: [number, number, number]; // sm, md, lg
   inputHeights: [number, number, number]; // sm, default, lg
+  touchTargets: [number, number, number]; // sm, md, lg — WCAG 2.5.8: ≥24px
+  sidebarItemHeight: number;
 }
 
 const DENSITY_CONFIGS: Record<DensityPreset, DensityConfig> = {
-  compact:  { baseUnit: 6,  baseFontSize: 14, buttonHeights: [24, 30, 36], inputHeights: [24, 32, 36] },
-  default:  { baseUnit: 7,  baseFontSize: 14, buttonHeights: [28, 36, 44], inputHeights: [28, 40, 44] },
-  relaxed:  { baseUnit: 8,  baseFontSize: 14, buttonHeights: [32, 40, 48], inputHeights: [32, 44, 48] },
+  compact:  { baseUnit: 6,  baseFontSize: 14, buttonHeights: [24, 30, 36], inputHeights: [24, 32, 36], touchTargets: [24, 28, 38], sidebarItemHeight: 30 },
+  default:  { baseUnit: 7,  baseFontSize: 14, buttonHeights: [28, 36, 44], inputHeights: [28, 40, 44], touchTargets: [24, 32, 44], sidebarItemHeight: 35 },
+  relaxed:  { baseUnit: 8,  baseFontSize: 14, buttonHeights: [32, 40, 48], inputHeights: [32, 44, 48], touchTargets: [28, 36, 48], sidebarItemHeight: 38 },
 };
 
 function pxToRem(px: number, baseFontSize: number): string {
@@ -508,6 +498,10 @@ export function configureTheme(options: ConfigureThemeOptions): void {
     if (d) {
       const unitRem = d.baseUnit / d.baseFontSize;
 
+      // Micro spacing
+      setVar(root, '--fui-space-0-5', `${unitRem * 0.3}rem`);
+      setVar(root, '--fui-space-0-75', `${unitRem * 0.43}rem`);
+
       // Spacing scale
       setVar(root, '--fui-space-1', `${unitRem}rem`);
       setVar(root, '--fui-space-2', `${unitRem * 2}rem`);
@@ -527,6 +521,14 @@ export function configureTheme(options: ConfigureThemeOptions): void {
       setVar(root, '--fui-input-height', pxToRem(d.inputHeights[1], d.baseFontSize));
       setVar(root, '--fui-input-height-lg', pxToRem(d.inputHeights[2], d.baseFontSize));
 
+      // Touch targets (WCAG 2.5.8: all values ≥24px)
+      setVar(root, '--fui-touch-sm', pxToRem(d.touchTargets[0], d.baseFontSize));
+      setVar(root, '--fui-touch-md', pxToRem(d.touchTargets[1], d.baseFontSize));
+      setVar(root, '--fui-touch-lg', pxToRem(d.touchTargets[2], d.baseFontSize));
+
+      // Sidebar navigation
+      setVar(root, '--fui-sidebar-item-height', pxToRem(d.sidebarItemHeight, d.baseFontSize));
+
       // Base unit
       setVar(root, '--fui-base-unit', `${d.baseUnit}px`);
     }

package/src/components/Toggle/Toggle.module.scss

@@ -11,11 +11,11 @@
 
   &[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.38;
+    opacity: 0.5;
   }
 }
 
-.rootWithDescription {
+.rootWithHelper {
   align-items: flex-start;
 
   .track {
@@ -35,7 +35,7 @@
   // iOS unchecked: semi-transparent gray — visible in both light and dark
   background-color: var(--fui-bg-active, $fui-bg-active);
   overflow: hidden;
-  transition: background-color 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
+  transition: background-color var(--fui-transition-normal, $fui-transition-normal);
 
   // Checked: accent fill
   .root[data-checked] & {
@@ -52,11 +52,9 @@
     background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
   }
 
-  // Focus ring
+  // Focus ring (consistent box-shadow approach across all form controls)
   .root:focus-visible & {
-    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);
+    @include focus-ring;
   }
 }
 
@@ -73,6 +71,19 @@
   );
 }
 
+// Lg: 60×36
+.trackLg {
+  width: var(--fui-toggle-width-lg, $fui-toggle-width-lg);
+  height: var(--fui-toggle-height-lg, $fui-toggle-height-lg);
+  --_toggle-thumb-size: calc(var(--fui-toggle-height-lg, #{$fui-toggle-height-lg}) - 4px);
+  --_toggle-inset: 2px;
+  --_toggle-translate: calc(
+    var(--fui-toggle-width-lg, #{$fui-toggle-width-lg}) -
+    var(--_toggle-thumb-size) -
+    4px
+  );
+}
+
 // Md: 51×31 (iOS standard)
 .trackMd {
   width: var(--fui-toggle-width-md, $fui-toggle-width-md);
@@ -86,7 +97,10 @@
   );
 }
 
-// iOS-style thumb: always white, multi-layer shadow
+// iOS-style thumb: always white, multi-layer shadow.
+// The thumb is intentionally always white (#fff) to match iOS toggle UX — this is
+// a hardcoded design decision (like CodeBlock/Tooltip dark surfaces). Override via
+// --fui-toggle-thumb-bg and --fui-toggle-thumb-shadow CSS custom properties.
 .thumb {
   position: absolute;
   top: var(--_toggle-inset, $fui-toggle-thumb-offset);
@@ -96,15 +110,17 @@
   height: var(--_toggle-thumb-size, $fui-toggle-thumb-md);
   border-radius: 50%;
   pointer-events: none;
-  background-color: #fff;
-  box-shadow:
+  background-color: var(--fui-toggle-thumb-bg, #fff);
+  box-shadow: var(
+    --fui-toggle-thumb-shadow,
     0 3px 8px rgba(0, 0, 0, 0.15),
     0 1px 1px rgba(0, 0, 0, 0.06),
-    0 3px 1px rgba(0, 0, 0, 0.06);
+    0 3px 1px rgba(0, 0, 0, 0.06)
+  );
   transition:
-    transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1),
-    background-color 250ms cubic-bezier(0.4, 0.0, 0.2, 1),
-    width 120ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    transform var(--fui-transition-normal, $fui-transition-normal),
+    background-color var(--fui-transition-normal, $fui-transition-normal),
+    width var(--fui-transition-fast, $fui-transition-fast);
 
   // Slide right when checked — inverse color for contrast against accent
   .root[data-checked] & {
@@ -132,24 +148,43 @@
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-primary, $fui-text-primary);
   line-height: var(--fui-line-height-tight, $fui-line-height-tight);
+  user-select: none;
 }
 
 .labelSm {
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
 }
 
-.description {
+.labelLg {
+  font-size: var(--fui-font-size-base, $fui-font-size-base);
+}
+
+.helper {
   display: block;
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
   color: var(--fui-text-secondary, $fui-text-secondary);
-  margin-top: var(--fui-space-0-5, $fui-space-0-5);
-  line-height: var(--fui-line-height-tight, $fui-line-height-tight);
+  margin-top: var(--fui-space-1, $fui-space-1);
+  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
 }
 
-.descriptionSm {
+.helperSm {
   font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
 }
 
+// ============================================
+// Accessibility: High Contrast Mode
+// ============================================
+
+@media (prefers-contrast: more) {
+  .track {
+    border: 2px solid var(--fui-text-primary, $fui-text-primary);
+  }
+
+  .root[data-checked] .track {
+    border-color: var(--fui-color-accent, $fui-color-accent);
+  }
+}
+
 // ============================================
 // Accessibility: Reduced Motion
 // ============================================

package/src/components/Toggle/index.tsx

@@ -14,13 +14,16 @@ export interface SwitchProps {
   /** Default checked state (uncontrolled) */
   defaultChecked?: boolean;
   /** Called when the switch is toggled */
-  onChange?: (checked: boolean) => void;
-  /** Alias for onChange (Radix convention) */
   onCheckedChange?: (checked: boolean) => void;
+  /** Alias for onCheckedChange */
+  onChange?: (checked: boolean) => void;
   label?: string;
+  /** Helper text shown below the label */
+  helperText?: string;
+  /** @deprecated Use helperText instead. */
   description?: string;
   disabled?: boolean;
-  size?: 'sm' | 'md';
+  size?: 'sm' | 'md' | 'lg';
   className?: string;
   name?: string;
   id?: string;
@@ -39,6 +42,7 @@ const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(
       onChange,
       onCheckedChange,
       label,
+      helperText,
       description,
       disabled = false,
       size = 'md',
@@ -51,27 +55,32 @@ const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(
     },
     ref
   ) {
+    const resolvedHelperText = helperText ?? description;
     const trackClasses = [
       styles.track,
-      size === 'sm' ? styles.trackSm : styles.trackMd,
+      size === 'sm' ? styles.trackSm : size === 'lg' ? styles.trackLg : styles.trackMd,
     ].join(' ');
 
     const thumbClasses = styles.thumb;
 
-    const labelClasses = [styles.label, size === 'sm' && styles.labelSm]
+    const labelClasses = [
+      styles.label,
+      size === 'sm' && styles.labelSm,
+      size === 'lg' && styles.labelLg,
+    ]
       .filter(Boolean)
       .join(' ');
 
-    const descClasses = [
-      styles.description,
-      size === 'sm' && styles.descriptionSm,
+    const helperClasses = [
+      styles.helper,
+      size === 'sm' && styles.helperSm,
     ]
       .filter(Boolean)
       .join(' ');
 
     const rootClasses = [
       styles.root,
-      description && styles.rootWithDescription,
+      resolvedHelperText && styles.rootWithHelper,
       className,
     ]
       .filter(Boolean)
@@ -83,7 +92,7 @@ const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(
         id={id}
         checked={checked}
         defaultChecked={defaultChecked}
-        onCheckedChange={onChange ?? onCheckedChange}
+        onCheckedChange={onCheckedChange ?? onChange}
         disabled={disabled}
         name={name}
         className={rootClasses}
@@ -95,10 +104,10 @@ const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(
           <BaseSwitch.Thumb className={thumbClasses} />
         </span>
 
-        {(label || description) && (
+        {(label || resolvedHelperText) && (
           <div className={styles.content}>
             {label && <span className={labelClasses}>{label}</span>}
-            {description && <span className={descClasses}>{description}</span>}
+            {resolvedHelperText && <span className={helperClasses}>{resolvedHelperText}</span>}
           </div>
         )}
       </BaseSwitch.Root>

package/src/index.ts

@@ -664,5 +664,35 @@ export {
   type UseKeyboardShortcutOptions,
 } from './utils/keyboard-shortcuts';
 
+// Seed Derivation
+export {
+  type SeedConfig,
+  PALETTES,
+  RADIUS_STYLES,
+  PALETTE_SEMANTIC_COLORS,
+  DEFAULT_SEEDS,
+  getSemanticColors,
+  deriveText,
+  deriveSurfaces,
+  deriveBorders,
+  deriveShadows,
+  deriveAccentHover,
+  deriveAccentActive,
+  deriveDarkAccent,
+  deriveSemanticText,
+  deriveSemanticBg,
+  deriveSemanticHover,
+} from './utils/seed-derivation';
+
+// Theme Presets
+export {
+  PRESETS,
+  PRESET_DEFINITIONS,
+  generatePreset,
+  seedsToTheme,
+  type ThemeConfig,
+  type PresetDefinition,
+} from './utils/theme-presets';
+
 // Legacy aliases (deprecated)
 export { Switch as Toggle, type SwitchProps as ToggleProps } from './components/Switch';

package/src/styles/globals.scss

@@ -48,100 +48,107 @@ $fui-info: #3b82f6 !default;
 );
 
 @use '../tokens/variables' as *;
-
-// Output all CSS custom properties
-@include fui-css-variables;
+@use '../tokens/property-registrations' as prop-reg;
 
 // ============================================
-// Box-Sizing Reset
+// Cascade Layer Order Declaration
 // ============================================
+// Establishes the priority order for the cascade.
+// Consumer styles outside any @layer always win over layered styles.
+// Within layers: tokens < base < components (declared first = lowest priority).
+// Browser support: ~97% (Chrome 99+, Firefox 97+, Safari 15.4+)
+@layer fui.tokens, fui.base;
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
+// Output typed @property registrations (must be top-level, can't be in @layer)
+@include prop-reg.fui-property-registrations;
 
 // ============================================
-// Base Element Resets
+// Tokens Layer — CSS custom properties & theming
 // ============================================
 
-html {
-  scroll-behavior: smooth;
+@layer fui.tokens {
+  @include fui-css-variables;
 }
 
-body {
-  margin: 0;
-  font-family: var(--fui-font-sans, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
-  background-color: var(--fui-bg-primary, #ffffff);
-  color: var(--fui-text-primary, #171717);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-feature-settings: "rlig" 1, "calt" 1;
-}
+// ============================================
+// Base Layer — Resets & defaults
+// ============================================
+// Uses :where() for zero-specificity resets where possible.
+// Any consumer selector overrides these without specificity fighting.
 
-// Global link reset
-a {
-  text-decoration: none;
-}
+@layer fui.base {
+  // Box-Sizing Reset
+  :where(*, *::before, *::after) {
+    box-sizing: border-box;
+  }
 
-*::selection {
-  background-color: var(--fui-color-success-bg, rgba(16, 163, 127, 0.1));
-  color: var(--fui-text-primary, #171717);
-}
+  // Base Element Resets
+  :where(html) {
+    scroll-behavior: smooth;
+  }
 
-// ============================================
-// Scrollbar Styles
-// ============================================
+  :where(body) {
+    margin: 0;
+    font-family: var(--fui-font-sans, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+    background-color: var(--fui-bg-primary, #ffffff);
+    color: var(--fui-text-primary, #171717);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
 
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
+  // Global link reset
+  :where(a) {
+    text-decoration: none;
+  }
 
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
+  ::selection {
+    background-color: var(--fui-color-success-bg, rgba(16, 163, 127, 0.1));
+    color: var(--fui-text-primary, #171717);
+  }
 
-::-webkit-scrollbar-thumb {
-  background-color: var(--fui-text-tertiary, #8a8a8a);
-  border-radius: 9999px;
-}
+  // Scrollbar Styles
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
 
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--fui-text-secondary, #525252);
-}
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
 
-// Firefox scrollbar
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--fui-text-tertiary, #8a8a8a) transparent;
-}
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--fui-text-tertiary, #8a8a8a);
+    border-radius: 9999px;
+  }
 
-// ============================================
-// Accessibility: Reduced Motion
-// ============================================
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--fui-text-secondary, #525252);
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
+  // Firefox scrollbar
+  :where(*) {
+    scrollbar-width: thin;
+    scrollbar-color: var(--fui-text-tertiary, #8a8a8a) transparent;
   }
-}
 
-// ============================================
-// Accessibility: Focus Visible
-// ============================================
+  // Accessibility: Reduced Motion
+  @media (prefers-reduced-motion: reduce) {
+    :where(*, *::before, *::after) {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
 
-:focus:not(:focus-visible) {
-  outline: none;
-}
+  // Accessibility: Focus Visible
+  :where(:focus:not(:focus-visible)) {
+    outline: none;
+  }
 
-:focus-visible {
-  outline: var(--fui-focus-ring-width, 2px) solid var(--fui-focus-ring-color, #18181b);
-  outline-offset: var(--fui-focus-ring-offset, 2px);
+  :where(:focus-visible) {
+    outline: var(--fui-focus-ring-width, 2px) solid var(--fui-focus-ring-color, #18181b);
+    outline-offset: var(--fui-focus-ring-offset, 2px);
+  }
 }

package/src/tokens/_computed.scss

@@ -77,6 +77,9 @@ $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));
 
+// Sidebar navigation (from density)
+$computed-sidebar-item-height: density.px-to-rem($_density, map.get($_density, sidebar-item-height));
+
 // --------------------------------------------
 // Computed: Colors - Light Mode
 // --------------------------------------------
@@ -106,7 +109,7 @@ $computed-color-warning-text: derive.derive-semantic-text(seeds.$fui-warning, fa
 $computed-color-info-text: derive.derive-semantic-text(seeds.$fui-info, false);
 
 // Surfaces (from neutral palette)
-$_surfaces-light: derive.derive-surfaces($_palette, false);
+$_surfaces-light: derive.derive-surfaces($_palette, false, seeds.$fui-neutral);
 $computed-bg-primary: map.get($_surfaces-light, primary);
 $computed-bg-secondary: map.get($_surfaces-light, secondary);
 $computed-bg-tertiary: map.get($_surfaces-light, tertiary);
@@ -116,7 +119,7 @@ $computed-bg-hover: map.get($_surfaces-light, hover);
 $computed-bg-active: map.get($_surfaces-light, active);
 
 // Text (from neutral palette)
-$_text-light: derive.derive-text($_palette, false);
+$_text-light: derive.derive-text($_palette, false, seeds.$fui-neutral);
 $computed-text-primary: map.get($_text-light, primary);
 $computed-text-secondary: map.get($_text-light, secondary);
 $computed-text-tertiary: map.get($_text-light, tertiary);
@@ -168,7 +171,7 @@ $computed-dark-color-warning-text: derive.derive-semantic-text(seeds.$fui-warnin
 $computed-dark-color-info-text: derive.derive-semantic-text(seeds.$fui-info, true);
 
 // Surfaces (dark mode)
-$_surfaces-dark: derive.derive-surfaces($_palette, true);
+$_surfaces-dark: derive.derive-surfaces($_palette, true, seeds.$fui-neutral);
 $computed-dark-bg-primary: map.get($_surfaces-dark, primary);
 $computed-dark-bg-secondary: map.get($_surfaces-dark, secondary);
 $computed-dark-bg-tertiary: map.get($_surfaces-dark, tertiary);
@@ -178,7 +181,7 @@ $computed-dark-bg-hover: map.get($_surfaces-dark, hover);
 $computed-dark-bg-active: map.get($_surfaces-dark, active);
 
 // Text (dark mode)
-$_text-dark: derive.derive-text($_palette, true);
+$_text-dark: derive.derive-text($_palette, true, seeds.$fui-neutral);
 $computed-dark-text-primary: map.get($_text-dark, primary);
 $computed-dark-text-secondary: map.get($_text-dark, secondary);
 $computed-dark-text-tertiary: map.get($_text-dark, tertiary);