@fragments-sdk/ui 0.11.1 → 0.13.0

package/src/components/Stack/index.tsx

@@ -2,7 +2,9 @@ import * as React from 'react';
 import styles from './Stack.module.scss';
 
 type Direction = 'row' | 'column';
-type Gap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type GapToken = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Gap accepts string tokens or numbers (1-8) mapping to the spacing scale */
+type Gap = GapToken | number;
 
 /** Responsive value — either a single value or per-breakpoint overrides */
 export interface ResponsiveDirection {
@@ -21,17 +23,21 @@ export interface ResponsiveDirection {
 /** Responsive gap value */
 export interface ResponsiveGap {
   /** Default (mobile-first) */
-  base?: Gap;
+  base?: GapToken;
   /** ≥640px */
-  sm?: Gap;
+  sm?: GapToken;
   /** ≥768px */
-  md?: Gap;
+  md?: GapToken;
   /** ≥1024px */
-  lg?: Gap;
+  lg?: GapToken;
   /** ≥1280px */
-  xl?: Gap;
+  xl?: GapToken;
 }
 
+/**
+ * Flexbox layout component for vertical or horizontal stacking with consistent spacing.
+ * @see https://usefragments.com/components/stack
+ */
 export interface StackProps {
   children: React.ReactNode;
   /**
@@ -70,6 +76,10 @@ function isResponsiveGap(gap: StackProps['gap']): gap is ResponsiveGap {
   return typeof gap === 'object' && gap !== null;
 }
 
+function isNumericGap(gap: StackProps['gap']): gap is number {
+  return typeof gap === 'number';
+}
+
 const StackRoot = React.forwardRef<HTMLElement, StackProps>(
   function Stack(
     {
@@ -114,6 +124,10 @@ const StackRoot = React.forwardRef<HTMLElement, StackProps>(
       if (gap.lg && gap.lg !== 'none') gapVars['--fui-stack-gap-lg'] = `var(--fui-space-${gapToSpace(gap.lg)})`;
       if (gap.xl && gap.xl !== 'none') gapVars['--fui-stack-gap-xl'] = `var(--fui-space-${gapToSpace(gap.xl)})`;
       inlineStyle = { ...inlineStyle, ...gapVars } as React.CSSProperties;
+    } else if (isNumericGap(gap)) {
+      // Numeric gap: maps to space scale tokens (e.g. gap={2} → var(--fui-space-2))
+      gapClass = false;
+      inlineStyle = { ...inlineStyle, gap: `var(--fui-space-${gap})` } as React.CSSProperties;
     } else {
       gapClass = gap !== 'none' && styles[`gap-${gap}`];
     }

package/src/components/Tabs/index.tsx

@@ -8,18 +8,30 @@ import styles from './Tabs.module.scss';
 // Types
 // ============================================
 
-export type TabValue = string | number;
+export type TabValue = string;
 
+/**
+ * Tabbed navigation for switching between content panels.
+ * @see https://usefragments.com/components/tabs
+ */
 export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
   children: React.ReactNode;
+  /** Default active tab value (uncontrolled) */
   defaultValue?: TabValue;
+  /** Controlled active tab value */
   value?: TabValue;
+  /** Called when the active tab changes */
   onValueChange?: (value: TabValue) => void;
+  /** Tab layout direction.
+   * @default "horizontal" */
   orientation?: 'horizontal' | 'vertical';
 }
 
 export interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
+  /** Tab list visual style.
+   * @default "underline"
+   * @see https://usefragments.com/components/tabs#variants */
   variant?: 'underline' | 'pills';
 }
 

package/src/components/Text/Text.fragment.tsx

@@ -53,18 +53,18 @@ export default defineFragment({
     },
     size: {
       type: 'enum',
-      description: 'Font size',
-      values: ['2xs', 'xs', 'sm', 'base', 'lg', 'xl', '2xl'],
+      description: 'Font size (md is an alias for base)',
+      values: ['2xs', 'xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl'],
     },
     weight: {
       type: 'enum',
       description: 'Font weight',
-      values: ['normal', 'medium', 'semibold'],
+      values: ['normal', 'medium', 'semibold', 'bold'],
     },
     color: {
       type: 'enum',
-      description: 'Text color',
-      values: ['primary', 'secondary', 'tertiary'],
+      description: 'Text color (muted is an alias for tertiary)',
+      values: ['primary', 'secondary', 'tertiary', 'muted'],
     },
     font: {
       type: 'enum',
@@ -91,9 +91,9 @@ export default defineFragment({
   contract: {
     propsSummary: [
       'as: string - HTML element',
-      'size: 2xs|xs|sm|base|lg|xl|2xl - font size',
-      'weight: normal|medium|semibold - font weight',
-      'color: primary|secondary|tertiary - text color',
+      'size: 2xs|xs|sm|base|md|lg|xl|2xl - font size (md = base)',
+      'weight: normal|medium|semibold|bold - font weight',
+      'color: primary|secondary|tertiary|muted - text color (muted = tertiary)',
       'font: sans|mono - font family',
       'truncate: boolean - enable truncation',
       'lineClamp: number - max lines',
@@ -130,6 +130,7 @@ export default defineFragment({
           <Text weight="normal">Normal weight</Text>
           <Text weight="medium">Medium weight</Text>
           <Text weight="semibold">Semibold weight</Text>
+          <Text weight="bold">Bold weight</Text>
         </div>
       ),
     },
@@ -141,6 +142,7 @@ export default defineFragment({
           <Text color="primary">Primary color (default)</Text>
           <Text color="secondary">Secondary color</Text>
           <Text color="tertiary">Tertiary color</Text>
+          <Text color="muted">Muted color (alias for tertiary)</Text>
         </div>
       ),
     },

package/src/components/Text/Text.module.scss

@@ -25,7 +25,8 @@
   font-size: var(--fui-font-size-sm, $fui-font-size-sm);
 }
 
-.size-base {
+.size-base,
+.size-md {
   font-size: var(--fui-font-size-base, $fui-font-size-base);
 }
 
@@ -54,6 +55,10 @@
   font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
 }
 
+.weight-bold {
+  font-weight: var(--fui-font-weight-bold, $fui-font-weight-bold);
+}
+
 // Text colors
 .color-primary {
   color: var(--fui-text-primary, $fui-text-primary);
@@ -63,7 +68,8 @@
   color: var(--fui-text-secondary, $fui-text-secondary);
 }
 
-.color-tertiary {
+.color-tertiary,
+.color-muted {
   color: var(--fui-text-tertiary, $fui-text-tertiary);
 }
 

package/src/components/Text/Text.test.tsx

@@ -22,6 +22,21 @@ describe('Text', () => {
     expect(el).toHaveClass('color-secondary');
   });
 
+  it('applies bold weight class', () => {
+    render(<Text weight="bold">Bold text</Text>);
+    expect(screen.getByText('Bold text')).toHaveClass('weight-bold');
+  });
+
+  it('applies muted color class (alias for tertiary)', () => {
+    render(<Text color="muted">Muted text</Text>);
+    expect(screen.getByText('Muted text')).toHaveClass('color-muted');
+  });
+
+  it('applies md size class (alias for base)', () => {
+    render(<Text size="md">Medium text</Text>);
+    expect(screen.getByText('Medium text')).toHaveClass('size-md');
+  });
+
   it('applies section-label variant class', () => {
     render(<Text variant="section-label">Label</Text>);
     expect(screen.getByText('Label')).toHaveClass('variant-section-label');

package/src/components/Text/index.tsx

@@ -1,13 +1,28 @@
 import * as React from 'react';
 import styles from './Text.module.scss';
 
+/**
+ * Typography component for rendering text with consistent styling.
+ * @see https://usefragments.com/components/text
+ */
 export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'> {
   children: React.ReactNode;
+  /** HTML element to render.
+   * @default "span" */
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'div' | 'strong' | 'em' | 'small' | 'mark' | 'del' | 'ins' | 'sub' | 'sup' | 'time' | 'address' | 'blockquote' | 'cite' | 'code' | 'abbr';
+  /** Preset text variant */
   variant?: 'section-label';
-  size?: '2xs' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl';
-  weight?: 'normal' | 'medium' | 'semibold';
-  color?: 'primary' | 'secondary' | 'tertiary';
+  /** Font size. `"md"` is an alias for `"base"`.
+   * @see https://usefragments.com/components/text#sizes */
+  size?: '2xs' | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
+  /** Font weight.
+   * @default "normal" */
+  weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+  /** Text color. `"muted"` is an alias for `"tertiary"`.
+   * @default "primary" */
+  color?: 'primary' | 'secondary' | 'tertiary' | 'muted';
+  /** Font family.
+   * @default "sans" */
   font?: 'sans' | 'mono';
   /** Truncate text with ellipsis when it overflows */
   truncate?: boolean;

package/src/components/Theme/index.tsx

@@ -368,8 +368,20 @@ 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';
 
 export interface ConfigureThemeOptions {

package/src/components/Toggle/Toggle.fragment.tsx

@@ -58,6 +58,10 @@ export default defineFragment({
       type: 'function',
       description: 'Callback with new checked state: (checked: boolean) => void',
     },
+    onCheckedChange: {
+      type: 'function',
+      description: 'Alias for onChange (Radix convention): (checked: boolean) => void',
+    },
     label: {
       type: 'string',
       description: 'Visible label text',
@@ -87,7 +91,7 @@ export default defineFragment({
   contract: {
     propsSummary: [
       'checked: boolean - on/off state',
-      'onChange: (checked) => void - state change handler',
+      'onChange: (checked) => void - state change handler (or onCheckedChange)',
       'label: string - visible label text',
       'description: string - helper text below label',
       'disabled: boolean - non-interactive state',

package/src/components/Toggle/Toggle.test.tsx

@@ -42,6 +42,25 @@ describe('Switch', () => {
     expect(handleChange.mock.calls[0][0]).toBe(true);
   });
 
+  it('calls onCheckedChange alias when toggled', async () => {
+    const handleChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Switch aria-label="Dark mode" onCheckedChange={handleChange} />);
+    await user.click(screen.getByRole('switch'));
+    expect(handleChange).toHaveBeenCalled();
+    expect(handleChange.mock.calls[0][0]).toBe(true);
+  });
+
+  it('prefers onChange over onCheckedChange when both provided', async () => {
+    const onChange = vi.fn();
+    const onCheckedChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Switch aria-label="Test" onChange={onChange} onCheckedChange={onCheckedChange} />);
+    await user.click(screen.getByRole('switch'));
+    expect(onChange).toHaveBeenCalled();
+    expect(onCheckedChange).not.toHaveBeenCalled();
+  });
+
   it('has no accessibility violations', async () => {
     const { container } = render(<Switch aria-label="Accessible switch" />);
     await expectNoA11yViolations(container);

package/src/components/Toggle/index.tsx

@@ -4,10 +4,19 @@ import * as React from 'react';
 import { Switch as BaseSwitch } from '@base-ui/react/switch';
 import styles from './Toggle.module.scss';
 
+/**
+ * Binary on/off switch for settings and preferences.
+ * @see https://usefragments.com/components/switch
+ */
 export interface SwitchProps {
+  /** Whether the switch is on */
   checked?: boolean;
+  /** 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;
   label?: string;
   description?: string;
   disabled?: boolean;
@@ -28,6 +37,7 @@ const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(
       checked,
       defaultChecked,
       onChange,
+      onCheckedChange,
       label,
       description,
       disabled = false,
@@ -73,7 +83,7 @@ const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(
         id={id}
         checked={checked}
         defaultChecked={defaultChecked}
-        onCheckedChange={onChange}
+        onCheckedChange={onChange ?? onCheckedChange}
         disabled={disabled}
         name={name}
         className={rootClasses}

package/src/components/ToggleGroup/ToggleGroup.fragment.tsx

@@ -157,7 +157,10 @@ export default defineFragment({
     onChange: {
       type: "function",
       description: "Called with new value when selection changes",
-      required: true,
+    },
+    onValueChange: {
+      type: "function",
+      description: "Alias for onChange (Radix convention): (value: string) => void",
     },
     children: {
       type: "node",
@@ -197,7 +200,7 @@ export default defineFragment({
   contract: {
     propsSummary: [
       "value: string - selected value (required)",
-      "onChange: (value: string) => void - change handler (required)",
+      "onChange: (value: string) => void - change handler (or onValueChange)",
       "children: ToggleGroup.Item[] - toggle items",
       "variant: default|pills|outline - visual style",
       "size: sm|md - size variant",

package/src/components/ToggleGroup/ToggleGroup.test.tsx

@@ -83,6 +83,26 @@ describe('ToggleGroup', () => {
     expect(optionB).toHaveAttribute('tabindex', '-1');
   });
 
+  it('calls onValueChange alias when an item is clicked', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    renderToggleGroup({ onChange: undefined, onValueChange });
+
+    await user.click(screen.getByRole('radio', { name: /option b/i }));
+    expect(onValueChange).toHaveBeenCalledWith('b');
+  });
+
+  it('prefers onChange over onValueChange when both provided', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    const onValueChange = vi.fn();
+    renderToggleGroup({ onChange, onValueChange });
+
+    await user.click(screen.getByRole('radio', { name: /option b/i }));
+    expect(onChange).toHaveBeenCalledWith('b');
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
   it('has no accessibility violations', async () => {
     const { container } = renderToggleGroup();
     await expectNoA11yViolations(container);

package/src/components/ToggleGroup/index.tsx

@@ -7,16 +7,25 @@ import styles from './ToggleGroup.module.scss';
 // Types
 // ============================================
 
+/**
+ * A group of toggle buttons where only one can be selected at a time.
+ * @see https://usefragments.com/components/togglegroup
+ */
 export interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   /** Current selected value */
   value: string;
   /** Callback when selection changes */
-  onChange: (value: string) => void;
+  onChange?: (value: string) => void;
+  /** Alias for onChange (Radix convention) */
+  onValueChange?: (value: string) => void;
   /** Toggle items */
   children: React.ReactNode;
-  /** Visual variant */
+  /** Visual variant.
+   * @default "default"
+   * @see https://usefragments.com/components/togglegroup#variants */
   variant?: 'default' | 'pills' | 'outline';
-  /** Size */
+  /** Size.
+   * @default "md" */
   size?: 'sm' | 'md' | 'lg';
   /** Gap between items (for pills/outline variants) */
   gap?: 'none' | 'xs' | 'sm';
@@ -63,6 +72,7 @@ function useToggleGroupContext() {
 function ToggleGroupRoot({
   value,
   onChange,
+  onValueChange,
   children,
   variant = 'default',
   size = 'md',
@@ -70,6 +80,7 @@ function ToggleGroupRoot({
   className,
   ...htmlProps
 }: ToggleGroupProps) {
+  const resolvedOnChange = onChange ?? onValueChange ?? (() => {});
   const classes = [
     styles.group,
     styles[variant],
@@ -91,7 +102,7 @@ function ToggleGroupRoot({
 
   const contextValue: ToggleGroupContextValue = {
     value,
-    onChange,
+    onChange: resolvedOnChange,
     variant,
     size,
     hasFocusableSelection,

package/src/components/Tooltip/Tooltip.test.tsx

@@ -91,6 +91,23 @@ describe('Tooltip', () => {
     });
   });
 
+  it('respects shared Tooltip.Provider delay settings', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    render(
+      <Tooltip.Provider delay={0}>
+        <Tooltip content="Provider tooltip">
+          <button>Provider Trigger</button>
+        </Tooltip>
+      </Tooltip.Provider>
+    );
+
+    await user.hover(screen.getByRole('button', { name: /provider trigger/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText('Provider tooltip')).toBeInTheDocument();
+    });
+  });
+
   it('has no accessibility violations when open', async () => {
     const { container } = render(
       <Tooltip content="Accessible tooltip" open={true} delay={0}>

package/src/components/Tooltip/index.tsx

@@ -46,12 +46,18 @@ export interface TooltipProviderProps {
   closeDelay?: number;
   /** Timeout for instant open when moving between tooltips (ms) */
   timeout?: number;
+  /** Alias for `delay` (Radix convention) */
+  delayDuration?: number;
+  /** Alias for `timeout` (Radix convention) */
+  skipDelayDuration?: number;
 }
 
 // ============================================
 // Components
 // ============================================
 
+const TooltipProviderContext = React.createContext(false);
+
 /**
  * Tooltip - Shows contextual information on hover/focus
  *
@@ -68,8 +74,8 @@ function TooltipRoot({
   side = 'top',
   align = 'center',
   sideOffset = 6,
-  delay = 400,
-  closeDelay = 0,
+  delay,
+  closeDelay,
   disabled = false,
   arrow = true,
   open,
@@ -78,6 +84,7 @@ function TooltipRoot({
   className,
   ...htmlProps
 }: TooltipProps) {
+  const hasExternalProvider = React.useContext(TooltipProviderContext);
   const renderTrigger = React.useCallback(
     (triggerProps: React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }) => {
       const childProps = children.props as Record<string, unknown>;
@@ -106,30 +113,39 @@ function TooltipRoot({
     return children;
   }
 
-  return (
-    <BaseTooltip.Provider delay={delay} closeDelay={closeDelay}>
-      <BaseTooltip.Root
-        open={open}
-        defaultOpen={defaultOpen}
-        onOpenChange={onOpenChange}
-      >
-        <BaseTooltip.Trigger render={renderTrigger} />
-        <BaseTooltip.Portal>
-          <BaseTooltip.Positioner
-            side={side}
-            align={align}
-            sideOffset={sideOffset}
-            className={styles.positioner}
-          >
-            <BaseTooltip.Popup {...htmlProps} className={[styles.popup, className].filter(Boolean).join(' ')}>
-              {content}
-              {arrow && <BaseTooltip.Arrow className={styles.arrow} />}
-            </BaseTooltip.Popup>
-          </BaseTooltip.Positioner>
-        </BaseTooltip.Portal>
-      </BaseTooltip.Root>
-    </BaseTooltip.Provider>
+  const tooltipNode = (
+    <BaseTooltip.Root
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      <BaseTooltip.Trigger render={renderTrigger} />
+      <BaseTooltip.Portal>
+        <BaseTooltip.Positioner
+          side={side}
+          align={align}
+          sideOffset={sideOffset}
+          className={styles.positioner}
+        >
+          <BaseTooltip.Popup {...htmlProps} className={[styles.popup, className].filter(Boolean).join(' ')}>
+            {content}
+            {arrow && <BaseTooltip.Arrow className={styles.arrow} />}
+          </BaseTooltip.Popup>
+        </BaseTooltip.Positioner>
+      </BaseTooltip.Portal>
+    </BaseTooltip.Root>
   );
+
+  // Only create a local provider when no shared provider exists, or when a local delay override is requested.
+  if (!hasExternalProvider || delay !== undefined || closeDelay !== undefined) {
+    return (
+      <BaseTooltip.Provider delay={delay ?? 400} closeDelay={closeDelay ?? 0}>
+        {tooltipNode}
+      </BaseTooltip.Provider>
+    );
+  }
+
+  return tooltipNode;
 }
 
 /**
@@ -145,18 +161,26 @@ function TooltipRoot({
  */
 export function TooltipProvider({
   children,
-  delay = 400,
+  delay,
   closeDelay = 0,
-  timeout = 400,
+  timeout,
+  delayDuration,
+  skipDelayDuration,
 }: TooltipProviderProps) {
+  // Resolve Radix-compatible aliases
+  const resolvedDelay = delay ?? delayDuration ?? 400;
+  const resolvedTimeout = timeout ?? skipDelayDuration ?? 400;
+
   return (
-    <BaseTooltip.Provider
-      delay={delay}
-      closeDelay={closeDelay}
-      timeout={timeout}
-    >
-      {children}
-    </BaseTooltip.Provider>
+    <TooltipProviderContext.Provider value={true}>
+      <BaseTooltip.Provider
+        delay={resolvedDelay}
+        closeDelay={closeDelay}
+        timeout={resolvedTimeout}
+      >
+        {children}
+      </BaseTooltip.Provider>
+    </TooltipProviderContext.Provider>
   );
 }
 

package/src/index.ts

@@ -2,6 +2,12 @@
 // This ensures --fui-* variables are available when using any component
 import './styles/globals.scss';
 
+// Runtime CSS detection — warns if component styles aren't loaded
+import { checkCssLoaded } from './utils/css-warning';
+if (typeof window !== 'undefined') {
+  checkCssLoaded();
+}
+
 // Core Components
 export { Button, type ButtonProps } from './components/Button';
 export { Input, type InputProps } from './components/Input';

package/src/tokens/_seeds.scss

@@ -1,3 +1,5 @@
+@use 'sass:list';
+
 // ============================================
 // @fragments-sdk/ui Design Token Seeds
 // ============================================
@@ -44,17 +46,17 @@ $fui-radius-style: "default" !default;
 // Fail fast at compile time if invalid seed values are provided.
 
 $_valid-neutrals: "stone", "ice", "earth", "sand", "fire";
-@if not index($_valid-neutrals, $fui-neutral) {
+@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";
-@if not index($_valid-densities, $fui-density) {
+@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";
-@if not index($_valid-radii, $fui-radius-style) {
+@if not list.index($_valid-radii, $fui-radius-style) {
   @error "Invalid $fui-radius-style: '#{$fui-radius-style}'. Must be one of: #{$_valid-radii}";
 }
 

package/src/tokens/_variables.scss

@@ -68,6 +68,7 @@ $fui-font-size-2xl: 2.143rem !default; // 30px
 $fui-font-weight-normal: 400 !default;
 $fui-font-weight-medium: 500 !default;
 $fui-font-weight-semibold: 600 !default;
+$fui-font-weight-bold: 700 !default;
 
 $fui-line-height-tight: 1.25 !default;
 $fui-line-height-normal: 1.5 !default;
@@ -436,6 +437,7 @@ $fui-dark-hero-gradient-color: rgba(120, 119, 198, 0.25) !default;
     --fui-font-weight-normal: #{$fui-font-weight-normal};
     --fui-font-weight-medium: #{$fui-font-weight-medium};
     --fui-font-weight-semibold: #{$fui-font-weight-semibold};
+    --fui-font-weight-bold: #{$fui-font-weight-bold};
     --fui-line-height-tight: #{$fui-line-height-tight};
     --fui-line-height-normal: #{$fui-line-height-normal};
     --fui-line-height-relaxed: #{$fui-line-height-relaxed};