@12-apps/ui 1.22.0 → 2.0.0

package/src/components/data-display/DataViews/data-views-overflow.ts

@@ -1,8 +1,17 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 
-import { estimateWidth, GAP, isRangeSet, pillText, RESERVED } from "./data-views-overflow-costs";
+import { splitToFit, useMeasuredWidth } from "../../utility/Overflow";
+import {
+  estimateWidth,
+  furnitureCost,
+  GAP,
+  isRangeSet,
+  pillText,
+  RESERVED,
+  rightClusterCost,
+} from "./data-views-overflow-costs";
 import type { FilterFieldConfig, RangeFieldConfig, RangeValue } from "./data-views-types";
 
 /**
@@ -98,26 +107,6 @@ export function toOverflowFields<T extends Record<string, unknown>>(
 }
 
 
-/** Observe the bar's width. Returns 0 until the first measurement lands. */
-function useBarWidth(): { barRef: React.RefObject<HTMLDivElement | null>; width: number } {
-  const barRef = useRef<HTMLDivElement | null>(null);
-  const [width, setWidth] = useState(0);
-  useEffect(() => {
-    const element = barRef.current;
-    // jsdom has no ResizeObserver, and neither does an SSR pass — with no
-    // measurement the hook keeps every control inline, which is the honest
-    // fallback: nothing is hidden behind a menu nobody can see.
-    if (!element || typeof ResizeObserver === "undefined") return undefined;
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry) setWidth(entry.contentRect.width);
-    });
-    observer.observe(element);
-    return () => observer.disconnect();
-  }, []);
-  return { barRef, width };
-}
-
 /** Is this control carrying a value the operator set? */
 function isActiveField<T extends Record<string, unknown>>(
   field: OverflowField<T>,
@@ -154,24 +143,16 @@ function splitFilters<T extends Record<string, unknown>>(
   pills: Record<string, string[]>,
   ranges: Record<string, RangeValue>,
   width: number,
+  /** Search + counter + right cluster + chrome, at the rung being considered. */
+  furniture: number,
+  /** Is the bar already down to icons? "Mais" shrinks with everything else. */
+  compact: boolean,
 ): Split<T> {
-  const none: OverflowField<T>[] = [];
-  const widthOf = (field: OverflowField<T>): number => fieldWidth(field, pills, ranges);
-  const cost = (fields: OverflowField<T>[]): number =>
-    fields.reduce((sum, field) => sum + widthOf(field) + GAP, 0);
   const active = all.filter((field) => isActiveField(field, pills, ranges));
   const idle = all.filter((field) => !isActiveField(field, pills, ranges));
 
   // "Limpar" rides the end of the cluster whenever anything is applied.
   const clearCost = active.length > 0 ? RESERVED.clearAll + GAP : 0;
-  let available =
-    width - RESERVED.search - RESERVED.counter - RESERVED.right - RESERVED.chrome - clearCost;
-  if (cost(all) <= available) {
-    return { inline: all, overflow: none, used: cost(all) + clearCost };
-  }
-
-  // There IS an overflow, so its button now costs room too.
-  available -= RESERVED.overflowButton;
   // APPLIED FIRST, BUT NOT EXEMPT.
   //
   // Applied controls take the visible slots ahead of idle ones — that part was
@@ -184,22 +165,21 @@ function splitFilters<T extends Record<string, unknown>>(
   // vanished silently: the trigger goes to the applied tone and says how many
   // are in there (see `MoreTrigger`), which is the same signal the pill itself
   // was carrying. A control you scroll off-screen carries no signal at all.
-  const keep = new Set<string>();
-  for (const field of [...active, ...idle]) {
-    const next = widthOf(field) + GAP;
-    if (next > available) continue;
-    available -= next;
-    keep.add(field.id);
-  }
-  // Rendered in the DECLARED order, not the applied-first one: which controls
-  // are visible may change with the width, but the ones that stay must not
-  // reshuffle under the operator's cursor.
-  const inline = all.filter((field) => keep.has(field.id));
-  return {
-    inline,
-    overflow: all.filter((field) => !keep.has(field.id)),
-    used: cost(inline) + RESERVED.overflowButton + clearCost,
-  };
+  //
+  // The keep-what-fits loop itself is `splitToFit` (`utility/Overflow`) — the
+  // one part of this that is not filter-shaped, and the part a second cluster
+  // in the design system would otherwise have had to reimplement.
+  const split = splitToFit(all, {
+    widthOf: (field) => fieldWidth(field, pills, ranges),
+    keyOf: (field) => field.id,
+    gap: GAP,
+    available: width - furniture - clearCost,
+    // The overflow button at the width it will actually have, which on a phone
+    // is the icon-and-badge one.
+    overflowCost: compact ? RESERVED.overflowButtonCompact : RESERVED.overflowButton,
+    priority: [...active, ...idle],
+  });
+  return { ...split, used: split.used + clearCost };
 }
 
 /**
@@ -224,6 +204,8 @@ function computeSplit<T extends Record<string, unknown>>(
   pills: Record<string, string[]>,
   ranges: Record<string, RangeValue>,
   width: number,
+  /** Does the host render "Exportar" beside "Exibir"? Half the cluster if not. */
+  hasExport: boolean,
 ): Omit<OverflowSplit<T>, "barRef"> {
   // Unmeasured (SSR, or jsdom without a ResizeObserver) ⇒ degrade nothing.
   if (width === 0) {
@@ -237,12 +219,47 @@ function computeSplit<T extends Record<string, unknown>>(
       searchTakeover: false,
     };
   }
-  const { inline, overflow, used } = splitFilters(all, pills, ranges, width);
+  // Pass 1 prices the furniture at its widest — no rung has been taken yet.
+  let split = splitFilters(all, pills, ranges, width, furnitureCost(UNCOLLAPSED, hasExport), false);
+  let flags = ladderFlags(split, width, hasExport);
+  // RE-SPEND WHAT THE LATER RUNGS FREED.
+  //
+  // Rungs 2/4/5 turn 200 + 96 + 216 of furniture into 44 + 0 + 140, and until
+  // this loop existed nobody handed those ~330px back to the filters: the
+  // split was decided once, against the uncollapsed row, so a phone shed every
+  // control and then sat with a band of empty bar beside "Mais 5".
+  //
+  // Settles rather than oscillates, and cannot overfill: a cheaper furniture
+  // can only give the filters MORE room, more filter width can only push the
+  // ladder FURTHER down, and a further rung can only make the furniture
+  // cheaper again — so the budget decreases monotonically and the loop exits
+  // the moment it stops moving. The bound is a backstop, not the exit.
+  let budget = furnitureCost(UNCOLLAPSED, hasExport);
+  for (let pass = 0; pass < 3; pass += 1) {
+    const freed = furnitureCost(flags, hasExport);
+    if (freed >= budget) break;
+    budget = freed;
+    split = splitFilters(all, pills, ranges, width, budget, flags.compactControls);
+    flags = ladderFlags(split, width, hasExport);
+  }
+  return { inline: split.inline, overflow: split.overflow, ...flags };
+}
+
+/** The widest the furniture ever is — every rung still untaken. */
+const UNCOLLAPSED = { searchCollapsed: false, counterHidden: false, compactControls: false };
+
+/** Rungs 2 and 4-6, priced against what the filters actually took. */
+function ladderFlags<T extends Record<string, unknown>>(
+  split: Split<T>,
+  width: number,
+  hasExport: boolean,
+): Omit<OverflowSplit<T>, "barRef" | "inline" | "overflow"> {
+  const { overflow, used } = split;
   const base = width - used - RESERVED.chrome;
 
   // Would the search still make its minimum with the labels on?
-  const compactControls = base - RESERVED.counter - RESERVED.right < RESERVED.search;
-  const rightCost = compactControls ? RESERVED.rightCompact : RESERVED.right;
+  const compactControls = base - RESERVED.counter - rightClusterCost(hasExport, false) < RESERVED.search;
+  const rightCost = rightClusterCost(hasExport, compactControls);
   // …and with them off?
   const searchCollapsed = base - RESERVED.counter - rightCost < RESERVED.search;
   // Everything has collapsed and the row STILL overflows. The controls cannot
@@ -258,26 +275,29 @@ function computeSplit<T extends Record<string, unknown>>(
   // on there BEING an overflow, because with no panel the footer does not
   // exist and dropping this would strand the operator.
   const clearAllHidden = counterHidden && overflow.length > 0;
-  // What the keyword box would get if the operator expanded the magnifier and
-  // everything else stayed put. `searchCollapsed` is a different question — it
-  // asks whether the box fits at its PREFERRED 200px, and is deliberately
-  // pessimistic — so reusing it to decide the takeover evicted the filters on
-  // screens where the box had plenty of room to simply shrink.
-  const searchBoxRoom = base - (counterHidden ? 0 : RESERVED.counter) - rightCost;
+  // What the keyword box would get if the operator expanded the magnifier.
+  // `searchCollapsed` is a different question — it asks whether the box fits at
+  // its PREFERRED 200px, and is deliberately pessimistic — so reusing it to
+  // decide the takeover evicted the filters on screens where the box had plenty
+  // of room to simply shrink.
+  //
+  // Asked with the inline filters SHED, because shedding them is exactly what
+  // expanding the box does: the row re-splits and they go behind "Mais".
+  // Measuring against the resting row instead made a filter argue for its own
+  // eviction — now that a large phone keeps one, its width came out of `base`,
+  // pushed the box under `usableSearch`, and tipped a row that had ample space
+  // to share into a full takeover.
+  const overflowButton = compactControls
+    ? RESERVED.overflowButtonCompact
+    : RESERVED.overflowButton;
+  const shedRoom = width - RESERVED.chrome - (overflow.length > 0 ? overflowButton : 0);
+  const searchBoxRoom = shedRoom - (counterHidden ? 0 : RESERVED.counter) - rightCost;
   // Below this a box is too narrow to read what you typed into it, and shrinking
   // further buys nothing; that is the only point at which taking the whole
   // cluster is worth losing the filters.
   const searchTakeover = searchCollapsed && searchBoxRoom < RESERVED.usableSearch;
 
-  return {
-    inline,
-    overflow,
-    compactControls,
-    counterHidden,
-    searchCollapsed,
-    clearAllHidden,
-    searchTakeover,
-  };
+  return { compactControls, counterHidden, searchCollapsed, clearAllHidden, searchTakeover };
 }
 
 /**
@@ -307,12 +327,25 @@ export function useFilterOverflow<T extends Record<string, unknown>>(
    * that is mid-edit.
    */
   frozen = false,
+  /** Whether "Exportar" is on the bar — see `rightClusterCost`. */
+  hasExport = true,
 ): OverflowSplit<T> {
-  const { barRef, width } = useBarWidth();
-  const signature = JSON.stringify({ ids: all.map((field) => field.id), pills, ranges, width });
+  // The measurement is `useMeasuredWidth` (`utility/Overflow`): the same
+  // ResizeObserver every collapsing cluster in the design system reads, so
+  // there is one loop to get right rather than one per bar. `0` until the
+  // first measurement lands (and forever under SSR or jsdom), which
+  // `computeSplit` reads as "degrade nothing".
+  const { ref: barRef, width } = useMeasuredWidth<HTMLDivElement>();
+  const signature = JSON.stringify({
+    ids: all.map((field) => field.id),
+    pills,
+    ranges,
+    width,
+    hasExport,
+  });
   const cache = useRef<{ signature: string; split: ReturnType<typeof computeSplit<T>> } | null>(null);
   if (cache.current === null || (!frozen && cache.current.signature !== signature)) {
-    cache.current = { signature, split: computeSplit(all, pills, ranges, width) };
+    cache.current = { signature, split: computeSplit(all, pills, ranges, width, hasExport) };
   }
   return { ...cache.current.split, barRef };
 }

package/src/components/data-display/DataViews/index.ts

@@ -22,6 +22,10 @@ export {
   type ListCardCellConfig,
   DEFAULT_CELL_WIDTH,
 } from "./list-card-cells";
+// The list's columns declared at the TABLE, not per card — which is what makes
+// a Lista line up by construction. Without it a consumer can still hand a cell
+// config to each row, and they agree until one row carries a wider value.
+export type { ListGroupConfig } from "./list-card-rails";
 // Published by a drag container so a row can draw the marker; a consumer wiring
 // its own DnD needs the type to build the value.
 export { DropIndicator } from "./data-views-drag";

package/src/components/data-display/DataViews/list-card-rails.tsx

@@ -223,6 +223,35 @@ export function cellRailCount(cells: number): number {
   return CELL_FIXED_RAILS + cells + 1;
 }
 
+/**
+ * A {@link ListCardGroup}'s configuration, as a value a caller can pass around.
+ *
+ * The same fields the group takes as props, named once so a table can accept
+ * "the list's columns" as a single prop and hand them straight over. It is what
+ * makes a list line up BY CONSTRUCTION rather than by convention: without it
+ * every row resolves its own tracks from its own copy of the config, which
+ * agrees with its neighbours right until one row carries an unusually wide value.
+ */
+export interface ListGroupConfig<T extends Record<string, unknown>> {
+  /**
+   * The cells every row renders. Supplying these replaces the named-slot layout
+   * (title/subtitle/meta/value/status) for the rows inside.
+   */
+  cells?: readonly ListCardCellConfig<T>[];
+  /**
+   * How many labelled pairs the rows carry, in the named-slot layout. The group
+   * renders its children opaquely and cannot count them.
+   */
+  metaColumns?: number;
+  /** Override individual rails; anything omitted keeps its default. */
+  rails?: Partial<ListRails>;
+  /**
+   * Hold the drag and select gutters open even when nothing uses them. On by
+   * default, so a selectable list and a read-only one still line up.
+   */
+  reserveGutters?: boolean;
+}
+
 /**
  * A list of {@link BaseListCard}s that share one set of columns.
  *

package/src/components/data-display/DateTimeDisplay/DateTimeDisplay.tsx

@@ -3,17 +3,20 @@ import { forwardRef } from 'react';
 
 import { useDateTimeParts } from './DateTimeDisplay.hooks';
 import type { DateTimeDisplayProps } from './DateTimeDisplay.types';
+import type { SizeValue } from '../../../tokens/scales';
 
 /**
  * Get font sizes based on size prop
  */
-function getFontSizes(size: 'small' | 'medium' | 'large') {
+function getFontSizes(size: SizeValue) {
   switch (size) {
-    case 'small':
+    case 'xs':
+    case 'sm':
       return { date: '0.75rem', time: '0.65rem' };
-    case 'large':
+    case 'lg':
+    case 'xl':
       return { date: '1rem', time: '0.875rem' };
-    case 'medium':
+    case 'md':
     default:
       return { date: '0.875rem', time: '0.75rem' };
   }
@@ -81,7 +84,7 @@ export const DateTimeDisplay = forwardRef<HTMLSpanElement, DateTimeDisplayProps>
       dateFormat = 'short',
       timeFormat = '12h',
       showTimezone = false,
-      size = 'medium',
+      size = 'md',
       showTooltip = true,
       tooltipContent,
       sx,

package/src/components/data-display/DateTimeDisplay/DateTimeDisplay.types.ts

@@ -1,3 +1,4 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type { SxProps, Theme } from '@mui/material';
 
 export interface DateTimeDisplayProps {
@@ -25,7 +26,7 @@ export interface DateTimeDisplayProps {
    * Size variant
    * @default 'medium'
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
   /**
    * Whether to show a tooltip with full date/time
    * @default true

package/src/components/data-display/InteractiveTooltip/InteractiveTooltip.types.ts

@@ -1,3 +1,4 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type { TooltipProps as MuiTooltipProps } from '@mui/material';
 
 export interface InteractiveTooltipProps extends Omit<MuiTooltipProps, 'variant' | 'title'> {
@@ -19,7 +20,7 @@ export interface InteractiveTooltipProps extends Omit<MuiTooltipProps, 'variant'
   /**
    * Size of the tooltip
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
 
   /**
    * Maximum width of the tooltip

package/src/components/data-display/LoadingState/LoadingState.types.ts

@@ -1,5 +1,6 @@
+import type { SizeValue } from '../../../tokens/scales';
 export type LoadingStateVariant = 'spinner' | 'skeleton';
-export type LoadingStateSize = 'sm' | 'md' | 'lg';
+export type LoadingStateSize = Extract<SizeValue, 'sm' | 'md' | 'lg'>;
 
 export interface LoadingStateProps {
   /**

package/src/components/data-display/Progress/Progress.types.ts

@@ -1,7 +1,8 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { LinearProgressProps } from '@mui/material';
 
 export type ProgressVariant = 'linear' | 'circular' | 'segmented' | 'gradient' | 'glass';
-export type ProgressSize = 'sm' | 'md' | 'lg';
+export type ProgressSize = Extract<SizeValue, 'sm' | 'md' | 'lg'>;
 
 export interface ProgressProps extends Omit<LinearProgressProps, 'variant' | 'color'> {
   /**
@@ -17,7 +18,7 @@ export interface ProgressProps extends Omit<LinearProgressProps, 'variant' | 'co
   /**
    * The color of the progress
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral';
+  color?: Exclude<ColorValue, 'info'>;
 
   /**
    * Whether the progress should have a glow effect

package/src/components/data-display/Sheet/Sheet.body.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { SheetContent, SheetFooter, SheetHeader } from './Sheet.parts';
 import type { SheetProps } from './Sheet.types';
+import { muiColor } from '../../../tokens/scales';
 
 export interface SheetBodyProps extends Pick<
   SheetProps,
@@ -50,7 +51,7 @@ const SheetLoading: React.FC<Pick<SheetBodyProps, 'color'>> = ({ color }) => (
       minHeight: 200,
     }}
   >
-    <CircularProgress color={color} />
+    <CircularProgress color={color === undefined ? undefined : muiColor(color, 'inherit')} />
   </Box>
 );
 

package/src/components/data-display/Sheet/Sheet.styles.ts

@@ -4,6 +4,7 @@ import type React from 'react';
 
 import { glowAnimation, pulseAnimation, shimmerAnimation } from './Sheet.animations';
 import type { SheetProps } from './Sheet.types';
+import { accentFor } from '../../../tokens/scales';
 
 type Position = NonNullable<SheetProps['position']>;
 type Variant = NonNullable<SheetProps['variant']>;
@@ -140,7 +141,7 @@ const SURFACES: Record<Variant, (input: SurfaceInput) => Record<string, unknown>
                 135deg,
                 ${theme.palette.background.paper} 0%,
                 ${alpha(accent, 0.08)} 50%,
-                ${alpha(theme.palette[color]?.dark || accent, 0.12)} 100%
+                ${alpha(accentFor(theme, color)?.dark || accent, 0.12)} 100%
               )`
       : theme.palette.background.paper,
     position: 'relative' as const,
@@ -211,7 +212,7 @@ const baseSurface = (input: VariantStyleInput, accent: string) => {
 
 const variantStyles = (input: VariantStyleInput) => {
   const { theme, variant, color, position, glow, pulse, rounded } = input;
-  const accent = theme.palette[color]?.main || theme.palette.primary.main;
+  const accent = accentFor(theme, color)?.main || theme.palette.primary.main;
 
   return {
     ...baseSurface(input, accent),

package/src/components/data-display/Sheet/Sheet.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { CSSProperties,ReactNode } from 'react';
 
 export interface SheetProps {
@@ -8,8 +9,12 @@ export interface SheetProps {
   description?: string;
   position?: 'top' | 'bottom' | 'left' | 'right';
   variant?: 'default' | 'glass' | 'gradient' | 'elevated' | 'minimal' | 'draggable';
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+  /**
+   * The house scale, plus `full`. `full` is not a size on the scale — it is
+   * "the whole viewport", so it extends rather than replaces.
+   */
+  size?: SizeValue | 'full';
+  color?: Exclude<ColorValue, 'neutral'>;
   glow?: boolean;
   pulse?: boolean;
   glass?: boolean;

package/src/components/data-display/Stepper/Stepper.types.ts

@@ -1,3 +1,4 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type { ReactNode } from 'react';
 
 export interface Step {
@@ -40,7 +41,7 @@ export interface StepperProps {
    * takes far less vertical space — useful above the fold on mobile checkouts.
    * @default 'md'
    */
-  size?: 'sm' | 'md';
+  size?: Extract<SizeValue, 'sm' | 'md'>;
   
   /**
    * Navigation variant controlling step access

package/src/components/data-display/Table/Table.styles.ts

@@ -46,7 +46,7 @@ const getStripeColorFromTheme = (theme: { palette: { primary: { main: string };
     info: theme.palette.info.main,
     success: theme.palette.success.main,
     warning: theme.palette.warning.main,
-    error: theme.palette.error.main,
+    danger: theme.palette.error.main,
     neutral: theme.palette.action.hover };
   return colorMap[stripeColor];
 };

package/src/components/data-display/Table/Table.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue } from '../../../tokens/scales';
 import type { TableProps as MuiTableProps } from '@mui/material';
 import type React from 'react';
 
@@ -57,7 +58,8 @@ export interface SelectionConfig {
   rowKeyExtractor?: (rowData: Record<string, unknown>, index: number) => string | number;
 }
 
-export type TableStripeColor = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' | 'neutral';
+/** The full house vocabulary — a stripe can take any accent, or none. */
+export type TableStripeColor = ColorValue;
 
 export interface TableProps extends Omit<MuiTableProps, 'variant'> {
   /**

package/src/components/data-display/Tooltip/Tooltip.types.ts

@@ -1,3 +1,4 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type { TooltipProps as MuiTooltipProps } from '@mui/material';
 
 export interface TooltipProps extends Omit<MuiTooltipProps, 'variant'> {
@@ -19,7 +20,7 @@ export interface TooltipProps extends Omit<MuiTooltipProps, 'variant'> {
   /**
    * Size of the tooltip
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
 
   /**
    * Maximum width of the tooltip

package/src/components/feedback/Dialog/Dialog.types.ts

@@ -1,8 +1,9 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type { DialogProps as MuiDialogProps } from '@mui/material';
 import type { ReactNode } from 'react';
 
 export type DialogVariant = 'default' | 'glass' | 'fullscreen' | 'drawer';
-export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type DialogSize = SizeValue;
 
 export interface DialogProps extends Omit<MuiDialogProps, 'variant' | 'title'> {
   children: ReactNode;

package/src/components/feedback/Modal/Modal.types.ts

@@ -1,8 +1,9 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type { ModalProps as MuiModalProps } from '@mui/material';
 import type { ReactNode } from 'react';
 
 export type ModalVariant = 'center' | 'top' | 'bottom' | 'glass';
-export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ModalSize = SizeValue;
 
 export interface ModalProps extends Omit<MuiModalProps, 'children'> {
   children: ReactNode;

package/src/components/form/Button/Button.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { ButtonProps as MuiButtonProps } from '@mui/material';
 import type * as React from 'react';
 
@@ -10,12 +11,12 @@ export interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'color' |
   /**
    * The color of the button
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'info' | 'danger' | 'neutral';
+  color?: ColorValue;
   
   /**
    * The size of the button
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: SizeValue;
   
   /**
    * Whether the button is in loading state

package/src/components/form/Command/Command.styles.ts

@@ -2,6 +2,7 @@ import { alpha } from '@mui/material';
 import type { CSSObject, Theme } from '@mui/material';
 
 import type { CommandProps } from './Command.types';
+import { accentFor } from '../../../tokens/scales';
 
 type CommandVariant = NonNullable<CommandProps['variant']>;
 type CommandColor = NonNullable<CommandProps['color']>;
@@ -24,14 +25,14 @@ const emphasisStyles = (
   pulse: boolean,
 ): CSSObject => ({
   ...(glow && {
-    boxShadow: `0 0 20px ${alpha(theme.palette[color].main, 0.4)}`,
+    boxShadow: `0 0 20px ${alpha(accentFor(theme, color).main, 0.4)}`,
   }),
   ...(pulse && {
     animation: 'pulse 2s infinite',
     '@keyframes pulse': {
-      '0%': { boxShadow: `0 0 0 0 ${alpha(theme.palette[color].main, 0.4)}` },
-      '70%': { boxShadow: `0 0 0 10px ${alpha(theme.palette[color].main, 0)}` },
-      '100%': { boxShadow: `0 0 0 0 ${alpha(theme.palette[color].main, 0)}` },
+      '0%': { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0.4)}` },
+      '70%': { boxShadow: `0 0 0 10px ${alpha(accentFor(theme, color).main, 0)}` },
+      '100%': { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0)}` },
     },
   }),
 });
@@ -46,12 +47,12 @@ const surfaceStyles = (
       return {
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
         backdropFilter: 'blur(20px)',
-        border: `1px solid ${alpha(theme.palette[color].main, 0.2)}`,
+        border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`,
       };
     case 'gradient':
       return {
-        background: `linear-gradient(135deg, ${theme.palette[color].main}, ${theme.palette[color].dark})`,
-        color: theme.palette[color].contrastText,
+        background: `linear-gradient(135deg, ${accentFor(theme, color).main}, ${accentFor(theme, color).dark})`,
+        color: accentFor(theme, color).contrastText,
       };
     case 'elevated':
       return { boxShadow: theme.shadows[8] };

package/src/components/form/Command/Command.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { CSSProperties,ReactNode } from 'react';
 
 export interface CommandItem {
@@ -21,8 +22,8 @@ export interface CommandProps {
   onValueChange?: (value: string) => void;
   onSelect?: (item: CommandItem) => void;
   variant?: 'default' | 'glass' | 'gradient' | 'minimal' | 'elevated';
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+  size?: SizeValue;
+  color?: Exclude<ColorValue, 'neutral'>;
   glow?: boolean;
   pulse?: boolean;
   loading?: boolean;

package/src/components/form/CreatableSelect/CreatableSelect.types.ts

@@ -1,3 +1,4 @@
+import type { SizeValue } from '../../../tokens/scales';
 /** One selectable option: a stable `value` and its human `label`. */
 export interface CreatableSelectOption {
   value: string;
@@ -44,7 +45,7 @@ export interface CreatableSelectProps {
    * Control height, matching {@link Input}'s scale so the two line up when they
    * share a grid row (default: `md`).
    */
-  size?: 'sm' | 'md';
+  size?: Extract<SizeValue, 'sm' | 'md'>;
   /** Base test id; the input is `<dataTestId>-input`. */
   dataTestId?: string;
 }

package/src/components/form/Input/Input.types.ts

@@ -1,9 +1,10 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type { InputLabelProps as MuiInputLabelProps } from '@mui/material';
 import type { InputHTMLAttributes, ReactNode } from 'react';
 import type React from 'react';
 
 export type InputVariant = 'outlined' | 'filled' | 'glass' | 'underline' | 'gradient';
-export type InputSize = 'sm' | 'md' | 'lg';
+export type InputSize = Extract<SizeValue, 'sm' | 'md' | 'lg'>;
 
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'color'> {
   variant?: InputVariant;