@12-apps/ui 1.22.0 → 2.0.0

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

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 
 export interface InputOTPProps {
   /**
@@ -8,12 +9,12 @@ export interface InputOTPProps {
   /**
    * The color theme of the OTP input
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+  color?: Exclude<ColorValue, 'info'>;
   
   /**
    * The size of the OTP input
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: SizeValue;
   
   /**
    * Number of OTP digits

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

@@ -2,6 +2,7 @@ import { alpha } from '@mui/material';
 import type { CSSObject, Theme } from '@mui/material';
 
 import type { LabelProps } from './Label.types';
+import { accentFor} from '../../../tokens/scales';
 
 type Size = NonNullable<LabelProps['size']>;
 type Variant = NonNullable<LabelProps['variant']>;
@@ -53,8 +54,8 @@ export interface LabelStyleFlags {
 export const textColor = (theme: Theme, flags: LabelStyleFlags): string => {
   if (flags.error) return theme.palette.error.main;
   if (flags.disabled) return theme.palette.text.disabled;
-  if (flags.color === 'default') return theme.palette.text.primary;
-  return theme.palette[flags.color].main;
+  if (flags.color === 'neutral') return theme.palette.text.primary;
+  return accentFor(theme, flags.color).main;
 };
 
 /** The ripple that expands from the centre on press, for clickable labels. */
@@ -119,7 +120,9 @@ const SURFACES: Record<Variant, (input: SurfaceInput) => CSSObject> = {
   }),
 
   gradient: ({ theme, flags }) => {
-    const key = flags.color === 'default' ? 'primary' : flags.color;
+    // `neutral` has no accent of its own in the gradient; it borrows primary,
+    // which is what this branch already did before the vocabulary was named.
+    const accent = accentFor(theme, flags.color === 'neutral' ? 'primary' : flags.color);
     // The gradient paints the glyphs themselves rather than the box behind them.
     const clip = {
       WebkitBackgroundClip: 'text',
@@ -128,11 +131,11 @@ const SURFACES: Record<Variant, (input: SurfaceInput) => CSSObject> = {
     };
 
     return {
-      background: `linear-gradient(135deg, ${theme.palette[key].light}, ${theme.palette[key].main})`,
+      background: `linear-gradient(135deg, ${accent.light}, ${accent.main})`,
       ...clip,
       '&:hover': flags.clickable
         ? {
-            background: `linear-gradient(135deg, ${theme.palette[key].main}, ${theme.palette[key].dark})`,
+            background: `linear-gradient(135deg, ${accent.main}, ${accent.dark})`,
             ...clip,
           }
         : {},

package/src/components/form/Label/Label.tsx

@@ -14,7 +14,7 @@ const DEFAULTS = {
   error: false,
   variant: 'default',
   size: 'md',
-  color: 'default',
+  color: 'neutral',
   glow: false,
   pulse: false,
   ripple: false,

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

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { CSSProperties, HTMLAttributes,ReactNode } from 'react';
 
 export interface LabelProps extends HTMLAttributes<globalThis.HTMLLabelElement> {
@@ -7,8 +8,8 @@ export interface LabelProps extends HTMLAttributes<globalThis.HTMLLabelElement>
   disabled?: boolean;
   error?: boolean;
   variant?: 'default' | 'filled' | 'outlined' | 'glass' | 'gradient' | 'minimal';
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'default';
+  size?: SizeValue;
+  color?: ColorValue;
   glow?: boolean;
   pulse?: boolean;
   glass?: boolean;

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

@@ -2,6 +2,7 @@ import { alpha } from '@mui/material';
 import type { CSSObject, Theme } from '@mui/material';
 
 import type { MenubarProps } from './Menubar.types';
+import { accentFor} from '../../../tokens/scales';
 
 type Size = NonNullable<MenubarProps['size']>;
 type Variant = NonNullable<MenubarProps['variant']>;
@@ -20,13 +21,13 @@ export const sizeStyles = (theme: Theme, size: Size): CSSObject =>
 
 /** `default` is not a palette entry — it means the paper surface and its text. */
 const accentOf = (theme: Theme, color: Color) =>
-  color === 'default' ? theme.palette.primary.main : theme.palette[color].main;
+  color === 'neutral' ? theme.palette.primary.main : accentFor(theme, color).main;
 
 const colorStyles = (theme: Theme, color: Color, transparent: boolean): CSSObject => {
   const surface =
-    color === 'default'
+    color === 'neutral'
       ? { backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary }
-      : { backgroundColor: theme.palette[color].main, color: theme.palette[color].contrastText };
+      : { backgroundColor: accentFor(theme, color).main, color: accentFor(theme, color).contrastText };
 
   return transparent ? { ...surface, backgroundColor: 'transparent' } : surface;
 };
@@ -57,12 +58,13 @@ const SURFACES: Record<Variant, (theme: Theme, flags: MenubarStyleFlags) => CSSO
   }),
 
   gradient: (theme, { color, gradient }) => {
-    const key = color === 'default' ? 'primary' : color;
+    // `neutral` borrows primary for the gradient, as this branch always did.
+    const accent = accentFor(theme, color === 'neutral' ? 'primary' : color);
     return {
       background: gradient
-        ? `linear-gradient(135deg, ${theme.palette[key].light}, ${theme.palette[key].dark})`
-        : theme.palette[key].main,
-      color: theme.palette[key].contrastText,
+        ? `linear-gradient(135deg, ${accent.light}, ${accent.dark})`
+        : accent.main,
+      color: accent.contrastText,
     };
   },
 
@@ -80,7 +82,7 @@ const SURFACES: Record<Variant, (theme: Theme, flags: MenubarStyleFlags) => CSSO
   bordered: (theme, { blur, color }) => ({
     ...(blur && { backdropFilter: 'blur(10px)' }),
     borderBottom: `2px solid ${
-      color === 'default' ? theme.palette.divider : theme.palette[color].main
+      color === 'neutral' ? theme.palette.divider : accentFor(theme, color).main
     }`,
   }),
 

package/src/components/form/Menubar/Menubar.tsx

@@ -18,6 +18,7 @@ import { withDefaults } from '../../../utils/withDefaults';
 import { useMenubarMenus } from './Menubar.hooks';
 import { barStyles } from './Menubar.styles';
 import { MenubarToolbar } from './Menubar.toolbar';
+
 import type {
   MenubarGroupProps,
   MenubarItem,
@@ -27,7 +28,7 @@ import type {
 const DEFAULTS = {
   variant: 'default',
   size: 'md',
-  color: 'default',
+  color: 'neutral',
   orientation: 'horizontal',
   glow: false,
   pulse: false,

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

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { CSSProperties,ReactNode } from 'react';
 
 export interface MenubarItem {
@@ -14,8 +15,8 @@ export interface MenubarItem {
 export interface MenubarProps {
   items: MenubarItem[];
   variant?: 'default' | 'glass' | 'gradient' | 'elevated' | 'minimal' | 'bordered';
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'default';
+  size?: SizeValue;
+  color?: ColorValue;
   orientation?: 'horizontal' | 'vertical';
   glow?: boolean;
   pulse?: boolean;
@@ -47,8 +48,8 @@ export interface MenubarGroupProps {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   onClick?: (item: MenubarItem) => void;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'default';
+  size?: SizeValue;
+  color?: ColorValue;
   className?: string;
   style?: CSSProperties;
 }
@@ -56,8 +57,8 @@ export interface MenubarGroupProps {
 export interface MenubarItemProps extends MenubarItem {
   selected?: boolean;
   onClick?: () => void;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'default';
+  size?: SizeValue;
+  color?: ColorValue;
   showShortcut?: boolean;
   ripple?: boolean;
   className?: string;

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

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { RadioGroupProps as MuiRadioGroupProps } from '@mui/material';
 import type React from 'react';
 
@@ -18,12 +19,12 @@ export interface RadioGroupProps extends Omit<MuiRadioGroupProps, 'color'> {
   /**
    * The color theme of the radio group
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+  color?: Exclude<ColorValue, 'info'>;
 
   /**
    * The size of the radio group
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: SizeValue;
 
   /**
    * Array of radio options

package/src/components/form/Select/Select.tsx

@@ -172,6 +172,18 @@ function renderMenuItems(
   return items;
 }
 
+/**
+ * The house scale as a FormControl size.
+ *
+ * Not `muiSize`: that collapses five onto MUI's three, and a FormControl takes
+ * only two. This component's scale is already narrowed to `sm | md`, so the map
+ * is exact rather than lossy.
+ */
+const formControlSize = (size: SelectProps['size']): 'small' | 'medium' | undefined => {
+  if (size === undefined) return undefined;
+  return size === 'sm' ? 'small' : 'medium';
+};
+
 export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
   (
     {
@@ -202,7 +214,7 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
     return (
       <StyledFormControl
         fullWidth={fullWidth}
-        size={size}
+        size={formControlSize(size)}
         error={error}
         customVariant={variant}
         glow={glow}

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

@@ -1,3 +1,4 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type { SelectProps as MuiSelectProps } from '@mui/material';
 
 export type SelectVariant = 'default' | 'glass' | 'gradient';
@@ -8,7 +9,9 @@ export interface SelectOption {
   disabled?: boolean;
 }
 
-export interface SelectProps extends Omit<MuiSelectProps, 'variant'> {
+// `size` is omitted alongside `variant`: MUI declares it in its own words
+// (`small | medium`), and this component speaks the house scale.
+export interface SelectProps extends Omit<MuiSelectProps, 'variant' | 'size'> {
   /**
    * Visual variant of the select component
    * @default 'default'
@@ -35,7 +38,7 @@ export interface SelectProps extends Omit<MuiSelectProps, 'variant'> {
    * Size of the select component
    * @default 'medium'
    */
-  size?: 'small' | 'medium';
+  size?: Extract<SizeValue, 'sm' | 'md'>;
   /**
    * Placeholder text when no option is selected
    */

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

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { SliderProps as MuiSliderProps } from '@mui/material';
 
 export interface SliderProps extends Omit<MuiSliderProps, 'color' | 'size'> {
@@ -9,12 +10,12 @@ export interface SliderProps extends Omit<MuiSliderProps, 'color' | 'size'> {
   /**
    * The color theme of the slider
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+  color?: Exclude<ColorValue, 'info'>;
 
   /**
    * The size of the slider
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: SizeValue;
 
   /**
    * Label for the slider

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

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { SwitchProps as MuiSwitchProps } from '@mui/material';
 import type { FocusEventHandler,MouseEventHandler, ReactNode } from 'react';
 
@@ -10,12 +11,12 @@ export interface SwitchProps extends Omit<MuiSwitchProps, 'color' | 'size'> {
   /**
    * The color theme of the switch
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+  color?: Exclude<ColorValue, 'info'>;
   
   /**
    * The size of the switch
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: SizeValue;
   
   /**
    * Label text for the switch

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

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { TextareaAutosizeProps } from '@mui/material';
 import type React from 'react';
 
@@ -10,12 +11,12 @@ export interface TextareaProps extends Omit<TextareaAutosizeProps, 'variant' | '
   /**
    * The color theme of the textarea
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+  color?: Exclude<ColorValue, 'info'>;
   
   /**
    * The size of the textarea
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: SizeValue;
   
   /**
    * Whether the textarea has an error

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

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { ToggleButtonProps } from '@mui/material';
 import type React from 'react';
 
@@ -10,12 +11,12 @@ export interface ToggleProps extends Omit<ToggleButtonProps, 'color' | 'size'> {
   /**
    * The color theme of the toggle
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+  color?: Exclude<ColorValue, 'info'>;
   
   /**
    * The size of the toggle
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: SizeValue;
   
   /**
    * Icon for the toggle

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

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { ToggleButtonGroupProps } from '@mui/material';
 import type React from 'react';
 
@@ -17,12 +18,12 @@ export interface ToggleGroupProps extends Omit<ToggleButtonGroupProps, 'color' |
   /**
    * The color theme of the toggle group
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+  color?: Exclude<ColorValue, 'info'>;
 
   /**
    * The size of the toggle group
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: SizeValue;
 
   /**
    * Array of toggle options

package/src/components/layout/Separator/Separator.types.ts

@@ -1,8 +1,9 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type { ReactNode } from 'react';
 
 export type SeparatorVariant = 'solid' | 'dashed' | 'dotted' | 'gradient';
 export type SeparatorOrientation = 'horizontal' | 'vertical';
-export type SeparatorSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SeparatorSize = SizeValue;
 
 export interface SeparatorProps {
   variant?: SeparatorVariant;

package/src/components/layout/Spacer/Spacer.types.ts

@@ -1,4 +1,5 @@
-export type SpacerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+import type { SizeValue } from '../../../tokens/scales';
+export type SpacerSize = SizeValue;
 export type SpacerDirection = 'horizontal' | 'vertical' | 'both';
 
 export interface SpacerProps {

package/src/components/navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -114,7 +114,7 @@ const BREADCRUMBS_DEFAULTS: Pick<BreadcrumbsProps, BreadcrumbsDefaultedKeys> = {
   maxItems: 8,
   showHomeIcon: true,
   size: 'md',
-  color: 'default',
+  color: 'neutral',
   elevation: 1,
   collapseBehavior: 'menu',
   mobileMaxItems: 3 };

package/src/components/navigation/Breadcrumbs/Breadcrumbs.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { BreadcrumbsProps as MuiBreadcrumbsProps } from '@mui/material';
 import type { ReactNode } from 'react';
 
@@ -105,13 +106,17 @@ export interface BreadcrumbsProps extends Omit<MuiBreadcrumbsProps, 'separator'>
    * Size of the breadcrumbs
    * @default 'md'
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
   
   /**
    * Color scheme for separators and accents
    * @default 'default'
    */
-  color?: 'default' | 'primary' | 'secondary';
+  /**
+   * `neutral` is what this called `default`: the unaccented state, renamed to
+   * the house word rather than kept as a third spelling of the same idea.
+   */
+  color?: Extract<ColorValue, 'primary' | 'secondary' | 'neutral'>;
   
   /**
    * Elevation level for glass and elevated variants (0-5)

package/src/components/navigation/ContextMenu/ContextMenu.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { MenuProps } from '@mui/material';
 import type { ReactNode } from 'react';
 
@@ -40,7 +41,7 @@ export interface ContextMenuItem {
   /**
    * Color variant for the item
    */
-  color?: 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+  color?: ColorValue;
   
   /**
    * Whether the item is dangerous/destructive
@@ -82,7 +83,7 @@ export interface ContextMenuProps extends Omit<MenuProps, 'open' | 'anchorEl' |
   /**
    * Size of the menu items
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
   
   /**
    * Custom className for the trigger element

package/src/components/navigation/DropdownMenu/DropdownMenu.tsx

@@ -189,6 +189,7 @@ const renderLeafMenuItem = (
       onClick={!item.disabled ? () => handleItemClick(item) : undefined} // ← change
       color={item.color}
       showIconSpace={showIconSpace && !hasIcon}
+      data-testid={item.dataTestId}
     >
       {hasIcon && (
         <ListItemIcon sx={{ minWidth: size === 'sm' ? 32 : 40 }}>{item.icon}</ListItemIcon>

package/src/components/navigation/DropdownMenu/DropdownMenu.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { MenuProps } from '@mui/material';
 import type { ReactNode } from 'react';
 
@@ -55,7 +56,16 @@ export interface DropdownMenuItem {
   /**
    * Color variant for the item
    */
-  color?: 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+  color?: ColorValue;
+
+  /**
+   * Test ID for the rendered item.
+   *
+   * Needed by any surface where an action MOVES into this menu when the row
+   * runs out of room: the action's id has to survive the move, or a suite that
+   * drives it by id passes on a wide screen and fails on a narrow one.
+   */
+  dataTestId?: string;
 }
 
 export interface DropdownMenuProps extends Omit<MenuProps, 'open' | 'variant'> {
@@ -92,7 +102,7 @@ export interface DropdownMenuProps extends Omit<MenuProps, 'open' | 'variant'> {
   /**
    * Size of the menu items
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
   
   /**
    * Maximum height of the menu

package/src/components/navigation/NavigationMenu/NavigationMenu.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { ReactNode } from 'react';
 
 export interface NavigationMenuItem {
@@ -76,12 +77,16 @@ export interface NavigationMenuProps {
   /**
    * Color scheme of the menu
    */
-  color?: 'default' | 'primary' | 'secondary';
+  /**
+   * `neutral` is what this called `default`: the unaccented state, renamed to
+   * the house word rather than kept as a third spelling of the same idea.
+   */
+  color?: Extract<ColorValue, 'primary' | 'secondary' | 'neutral'>;
 
   /**
    * Size of the menu items
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
 
   /**
    * Minimal style with no borders, shadows, or container backgrounds

package/src/components/navigation/Pagination/Pagination.tsx

@@ -139,7 +139,9 @@ const PaginationControl: React.FC<
       showFirstButton={p.showFirstButton && !isDots}
       showLastButton={p.showLastButton && !isDots}
       disabled={p.disabled}
-      color={p.color}
+      // MUI spells the unaccented pagination colour `standard`; ours is
+      // `neutral`, translated here rather than carried as a second name.
+      color={p.color === undefined ? undefined : p.color === 'neutral' ? 'standard' : p.color}
       renderItem={renderItem}
       {...rest}
     />

package/src/components/navigation/Pagination/Pagination.types.ts

@@ -1,7 +1,8 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { PaginationProps as MuiPaginationProps } from '@mui/material';
 import type { ReactNode } from 'react';
 
-export interface PaginationProps extends Omit<MuiPaginationProps, 'variant' | 'size'> {
+export interface PaginationProps extends Omit<MuiPaginationProps, 'variant' | 'size' | 'color'> {
   /**
    * The variant of the pagination
    */
@@ -10,7 +11,7 @@ export interface PaginationProps extends Omit<MuiPaginationProps, 'variant' | 's
   /**
    * Size of the pagination buttons
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
   
   /**
    * Current page number
@@ -85,7 +86,8 @@ export interface PaginationProps extends Omit<MuiPaginationProps, 'variant' | 's
   /**
    * Custom color for the active page
    */
-  color?: 'primary' | 'secondary' | 'standard';
+  /** `neutral` is what MUI spells `standard`; it is translated at the boundary. */
+  color?: Extract<ColorValue, 'primary' | 'secondary' | 'neutral'>;
   
   /**
    * Whether to show page info text

package/src/components/navigation/Tabs/Tabs.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { TabsProps as MuiTabsProps } from '@mui/material';
 import type { ReactNode } from 'react';
 
@@ -57,7 +58,7 @@ export interface TabsProps extends Omit<MuiTabsProps, 'variant' | 'children' | '
   /**
    * Size of the tabs
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
   
   /**
    * Array of tab items
@@ -77,7 +78,7 @@ export interface TabsProps extends Omit<MuiTabsProps, 'variant' | 'children' | '
   /**
    * Color theme for the tabs
    */
-  color?: 'primary' | 'secondary';
+  color?: Extract<ColorValue, 'primary' | 'secondary'>;
   
   /**
    * Whether tabs should fill the full width

package/src/components/typography/Blockquote/Blockquote.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue } from '../../../tokens/scales';
 import type React from 'react';
 
 export type BlockquoteVariant = 'default' | 'bordered' | 'citation';
@@ -6,6 +7,6 @@ export interface BlockquoteProps extends React.HTMLAttributes<HTMLElement> {
   variant?: BlockquoteVariant;
   author?: string;
   source?: string;
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+  color?: Exclude<ColorValue, 'info'>;
   children: React.ReactNode;
 }

package/src/components/typography/Code/Code.types.ts

@@ -1,3 +1,4 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type React from 'react';
 
 export type CodeVariant = 'inline' | 'block' | 'highlight';
@@ -7,6 +8,6 @@ export interface CodeProps extends React.HTMLAttributes<HTMLElement> {
   language?: string;
   copyable?: boolean;
   lineNumbers?: boolean;
-  size?: 'xs' | 'sm' | 'md' | 'lg';
+  size?: Extract<SizeValue, 'xs' | 'sm' | 'md' | 'lg'>;
   children: React.ReactNode;
 }

package/src/components/typography/Heading/Heading.types.ts

@@ -1,10 +1,11 @@
+import type { ColorValue } from '../../../tokens/scales';
 import type React from 'react';
 
 export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'display';
 
 export interface HeadingProps extends React.HTMLAttributes<globalThis.HTMLHeadingElement> {
   level?: HeadingLevel;
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+  color?: Exclude<ColorValue, 'info'>;
   weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
   gradient?: boolean;
   children: React.ReactNode;

package/src/components/typography/Paragraph/Paragraph.types.ts

@@ -1,10 +1,11 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type React from 'react';
 
 export type ParagraphVariant = 'default' | 'lead' | 'muted' | 'small';
 
 export interface ParagraphProps extends React.HTMLAttributes<globalThis.HTMLParagraphElement> {
   variant?: ParagraphVariant;
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  color?: Exclude<ColorValue, 'info'>;
+  size?: SizeValue;
   children: React.ReactNode;
 }