@cdx-ui/components 0.0.1-beta.6 → 0.0.1-beta.60

package/lib/typescript/styles/primitives.d.ts

@@ -1,22 +1,53 @@
+/** @deprecated Use `bg-surface-primary` (--color-surface-primary) instead. */
 export declare const COLOR_BG_PRIMARY = "bg-white";
+/** @deprecated Use `bg-surface-secondary` (--color-surface-secondary) instead. */
 export declare const COLOR_BG_SUBTLE = "bg-slate-50";
+/** @deprecated Use `bg-surface-neutral-subtle` (--color-surface-neutral-subtle) instead. */
 export declare const COLOR_BG_MUTED = "bg-slate-100";
+/** @deprecated Use `bg-base-950` (--color-base-950) instead. */
 export declare const COLOR_BG_INVERSE = "bg-slate-900";
+/** @deprecated Use `border-stroke-secondary` (--color-stroke-secondary) instead. */
 export declare const COLOR_BORDER_DEFAULT = "border-slate-200";
+/** @deprecated Use `border-stroke-hover` (--color-stroke-hover) instead. */
 export declare const COLOR_BORDER_STRONG = "border-slate-300";
+/** @deprecated Use `border-stroke-focus` (--color-stroke-focus) instead. */
 export declare const COLOR_BORDER_FOCUS = "border-slate-900";
+/** @deprecated Use `border-stroke-danger` (--color-stroke-danger) instead. */
 export declare const COLOR_BORDER_INVALID = "border-red-500";
+/** @deprecated Use `text-content-primary` (--color-content-primary) instead. */
 export declare const COLOR_TEXT_PRIMARY = "text-slate-900";
+/** @deprecated Use `text-content-secondary` (--color-content-secondary) instead. */
 export declare const COLOR_TEXT_SECONDARY = "text-slate-500";
+/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
 export declare const COLOR_TEXT_MUTED = "text-slate-400";
+/** @deprecated Use the appropriate `text-content-*-on-strong` token for the surface color, e.g. `text-content-action-on-strong` (--color-content-action-on-strong). */
 export declare const COLOR_TEXT_INVERSE = "text-white";
+/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
 export declare const COLOR_TEXT_PLACEHOLDER = "text-slate-400";
+/** @deprecated Use `text-content-danger` (--color-content-danger) instead. */
 export declare const COLOR_TEXT_INVALID = "text-red-600";
+/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
 export declare const COLOR_BRAND_DEFAULT = "bg-slate-900";
+/** @deprecated Use `bg-surface-action-strong-hover` (--color-surface-action-strong-hover) instead. */
 export declare const COLOR_BRAND_HOVER = "bg-slate-800";
+/** @deprecated Use `bg-surface-action-strong-active` (--color-surface-action-strong-active) instead. */
 export declare const COLOR_BRAND_ACTIVE = "bg-slate-700";
+/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
 export declare const COLOR_ACCENT_DEFAULT = "bg-slate-900";
+/** @deprecated Use `border-stroke-action` (--color-stroke-action) instead. */
 export declare const COLOR_ACCENT_BORDER = "border-slate-900";
+/**
+ * @deprecated Use semantic token classes directly instead. Map each color key to its
+ * corresponding `--color-surface-*`, `--color-stroke-*`, and `--color-content-*` tokens:
+ * - `bg` → `bg-surface-{color}-strong` (--color-surface-{color}-strong)
+ * - `bgHover` → `bg-surface-{color}-strong-hover` (--color-surface-{color}-strong-hover)
+ * - `bgActive` → `bg-surface-{color}-strong-active` (--color-surface-{color}-strong-active)
+ * - `border` → `border-stroke-{color}` (--color-stroke-{color})
+ * - `text` → `text-content-{color}` (--color-content-{color})
+ * - `ring` → `ring-[--color-stroke-focus]` (--color-stroke-focus)
+ *
+ * See Button/styles.ts for a complete migration example.
+ */
 export declare const SEMANTIC_COLORS: {
     readonly action: {
         readonly bg: "bg-slate-900";
@@ -59,12 +90,19 @@ export declare const SEMANTIC_COLORS: {
         readonly ring: "ring-sky-400/50";
     };
 };
+/** @deprecated Use `ring-2 ring-[--color-stroke-focus] ring-offset-2` (--color-stroke-focus) instead. */
 export declare const FOCUS_RING = "ring-2 ring-slate-400/50 ring-offset-2";
+/** @deprecated Use `rounded-[var(--border-radius-button)]` for buttons/inputs or `rounded-[var(--border-radius-default)]` for containers. */
 export declare const RADIUS_SM = "rounded-lg";
+/** @deprecated Use `rounded-[var(--border-radius-default)]` for cards/containers. */
 export declare const RADIUS_MD = "rounded-xl";
+/** @deprecated Use `rounded-[var(--border-radius-round)]` for circular elements (icon buttons, radio, pills). */
 export declare const RADIUS_FULL = "rounded-full";
+/** @deprecated Use `shadow-sm` directly instead */
 export declare const SHADOW_SM = "shadow-sm";
+/** @deprecated Use `shadow-md` directly instead */
 export declare const SHADOW_MD = "shadow-md";
+/** @deprecated */
 export declare const SIZE_SCALE: {
     readonly default: {
         readonly height: "h-10";

package/lib/typescript/styles/primitives.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../src/styles/primitives.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAC3C,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAC7C,eAAO,MAAM,cAAc,iBAAiB,CAAC;AAC7C,eAAO,MAAM,gBAAgB,iBAAiB,CAAC;AAG/C,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AACvD,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AACtD,eAAO,MAAM,kBAAkB,qBAAqB,CAAC;AACrD,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAGrD,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AACrD,eAAO,MAAM,gBAAgB,mBAAmB,CAAC;AACjD,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAC/C,eAAO,MAAM,sBAAsB,mBAAmB,CAAC;AACvD,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,eAAO,MAAM,mBAAmB,iBAAiB,CAAC;AAClD,eAAO,MAAM,iBAAiB,iBAAiB,CAAC;AAChD,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,eAAO,MAAM,oBAAoB,iBAAiB,CAAC;AACnD,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAItD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyClB,CAAC;AAGX,eAAO,MAAM,UAAU,2CAA2C,CAAC;AAGnE,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAG1C,eAAO,MAAM,SAAS,cAAc,CAAC;AACrC,eAAO,MAAM,SAAS,cAAc,CAAC;AAMrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAGb,CAAC;AAGX,eAAO,MAAM,iBAAiB,mCAAmC,CAAC;AAGlE,eAAO,MAAM,gBAAgB,oCAAoC,CAAC;AAClE,eAAO,MAAM,eAAe,qFACwD,CAAC"}
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../src/styles/primitives.ts"],"names":[],"mappings":"AAKA,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAC3C,kFAAkF;AAClF,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAC7C,4FAA4F;AAC5F,eAAO,MAAM,cAAc,iBAAiB,CAAC;AAC7C,gEAAgE;AAChE,eAAO,MAAM,gBAAgB,iBAAiB,CAAC;AAG/C,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AACvD,4EAA4E;AAC5E,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AACtD,4EAA4E;AAC5E,eAAO,MAAM,kBAAkB,qBAAqB,CAAC;AACrD,8EAA8E;AAC9E,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAGrD,gFAAgF;AAChF,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AACrD,kFAAkF;AAClF,eAAO,MAAM,gBAAgB,mBAAmB,CAAC;AACjD,uKAAuK;AACvK,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAC/C,kFAAkF;AAClF,eAAO,MAAM,sBAAsB,mBAAmB,CAAC;AACvD,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,0FAA0F;AAC1F,eAAO,MAAM,mBAAmB,iBAAiB,CAAC;AAClD,sGAAsG;AACtG,eAAO,MAAM,iBAAiB,iBAAiB,CAAC;AAChD,wGAAwG;AACxG,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,0FAA0F;AAC1F,eAAO,MAAM,oBAAoB,iBAAiB,CAAC;AACnD,8EAA8E;AAC9E,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAEtD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyClB,CAAC;AAGX,yGAAyG;AACzG,eAAO,MAAM,UAAU,2CAA2C,CAAC;AAGnE,6IAA6I;AAC7I,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,qFAAqF;AACrF,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,iHAAiH;AACjH,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAI1C,mDAAmD;AACnD,eAAO,MAAM,SAAS,cAAc,CAAC;AACrC,mDAAmD;AACnD,eAAO,MAAM,SAAS,cAAc,CAAC;AAMrC,kBAAkB;AAClB,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAGb,CAAC;AAGX,eAAO,MAAM,iBAAiB,mCAAmC,CAAC;AAGlE,eAAO,MAAM,gBAAgB,oCAAoC,CAAC;AAClE,eAAO,MAAM,eAAe,qFACwD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.6",
+  "version": "0.0.1-beta.60",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -16,10 +16,10 @@
     },
     "./styles.css": "./src/styles.css",
     "./metro": {
-      "types": "./lib/typescript/metro/withCdxMetroConfig.d.ts",
-      "require": "./lib/commonjs/metro/withCdxMetroConfig.js",
-      "import": "./lib/module/metro/withCdxMetroConfig.js",
-      "default": "./lib/commonjs/metro/withCdxMetroConfig.js"
+      "types": "./lib/typescript/metro/withForgeMetroConfig.d.ts",
+      "require": "./lib/commonjs/metro/withForgeMetroConfig.js",
+      "import": "./lib/module/metro/withForgeMetroConfig.js",
+      "default": "./lib/commonjs/metro/withForgeMetroConfig.js"
     }
   },
   "files": [
@@ -67,11 +67,13 @@
     "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.6.1",
-    "@cdx-ui/primitives": "0.0.1-beta.6",
-    "@cdx-ui/utils": "0.0.1-beta.6",
-    "@cdx-ui/icons": "0.0.1-beta.6"
+    "@cdx-ui/primitives": "0.0.1-beta.60",
+    "@cdx-ui/utils": "0.0.1-beta.60",
+    "@cdx-ui/icons": "0.0.1-beta.60"
   },
   "devDependencies": {
+    "@react-navigation/bottom-tabs": "*",
+    "react-native-screens": "*",
     "@types/react": "*",
     "@types/react-dom": "*",
     "react": "*",

package/src/components/AlertDialog/index.tsx

@@ -54,7 +54,7 @@ const AlertDialogAction = forwardRef<View, AlertDialogActionProps>(
     }
 
     return (
-      <Button ref={ref} variant="strong" color={color} className={className} {...props}>
+      <Button ref={ref} variant="solid" color={color} className={className} {...props}>
         <Button.Label>{children}</Button.Label>
       </Button>
     );
@@ -85,7 +85,7 @@ const AlertDialogCancel = forwardRef<View, AlertDialogCancelProps>(
     }
 
     return (
-      <Button ref={ref} variant="outline" onPress={handlePress} className={className} {...props}>
+      <Button ref={ref} variant="ghost" onPress={handlePress} className={className} {...props}>
         <Button.Label>{children}</Button.Label>
       </Button>
     );
@@ -99,11 +99,12 @@ AlertDialogCancel.displayName = 'AlertDialog.Cancel';
 
 type AlertDialogCompoundComponent = typeof AlertDialogRoot & {
   Trigger: typeof Dialog.Trigger;
-  Content: typeof Dialog.Content;
+  Popup: typeof Dialog.Popup;
   Header: typeof Dialog.Header;
   Title: typeof Dialog.Title;
   Description: typeof Dialog.Description;
-  Body: typeof Dialog.Body;
+  Content: typeof Dialog.Content;
+  Text: typeof Dialog.Text;
   Footer: typeof Dialog.Footer;
   Close: typeof Dialog.Close;
   Action: typeof AlertDialogAction;
@@ -112,11 +113,12 @@ type AlertDialogCompoundComponent = typeof AlertDialogRoot & {
 
 export const AlertDialog = Object.assign(AlertDialogRoot, {
   Trigger: Dialog.Trigger,
-  Content: Dialog.Content,
+  Popup: Dialog.Popup,
   Header: Dialog.Header,
   Title: Dialog.Title,
   Description: Dialog.Description,
-  Body: Dialog.Body,
+  Content: Dialog.Content,
+  Text: Dialog.Text,
   Footer: Dialog.Footer,
   Close: Dialog.Close,
   Action: AlertDialogAction,

package/src/components/Avatar/index.tsx

@@ -36,7 +36,7 @@ export interface AvatarProps extends ViewProps, IAvatarProps, AvatarVariantProps
 }
 
 const AvatarRoot = forwardRef<View, AvatarProps>(
-  ({ size = 'lg', className, children, style, ...props }, ref) => {
+  ({ size = 'md', className, children, style, ...props }, ref) => {
     const computedClassName = cn(avatarRootVariants({ size }), className);
 
     return (

package/src/components/Avatar/styles.ts

@@ -1,22 +1,27 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import { COLOR_BG_MUTED, COLOR_TEXT_SECONDARY, RADIUS_FULL } from '../../styles/primitives';
 
 // ── Root ─────────────────────────────────────────────────
 
 export const avatarRootVariants = cva(
-  [RADIUS_FULL, 'relative items-center justify-center', COLOR_BG_MUTED],
+  [
+    'rounded-[var(--border-radius-round)]',
+    'relative items-center justify-center',
+    'bg-surface-tertiary',
+  ],
   {
     variants: {
       size: {
-        sm: 'w-8 h-8',
-        md: 'w-10 h-10',
-        lg: 'w-12 h-12',
-        xl: 'w-16 h-16',
-        '2xl': 'w-20 h-20',
+        '2xs': 'w-3 h-3',
+        xs: 'w-[18px] h-[18px]',
+        sm: 'w-6 h-6',
+        md: 'w-8 h-8',
+        lg: 'w-10 h-10',
+        xl: 'w-12 h-12',
+        '2xl': 'w-14 h-14',
       },
     },
     defaultVariants: {
-      size: 'lg',
+      size: 'md',
     },
   },
 );
@@ -25,59 +30,69 @@ export const avatarRootVariants = cva(
 
 export const avatarImageVariants = cva([
   'absolute top-0 left-0 w-full h-full',
-  RADIUS_FULL,
+  'rounded-[var(--border-radius-round)]',
   'overflow-hidden',
+  'border border-stroke-secondary',
 ]);
 
 // ── Text ─────────────────────────────────────────────────
 
-export const avatarTextVariants = cva([COLOR_TEXT_SECONDARY, 'font-semibold'], {
+export const avatarTextVariants = cva(['text-content-primary', 'font-medium'], {
   variants: {
     size: {
+      '2xs': 'text-[6px]',
+      xs: 'text-[9px]',
       sm: 'text-xs',
-      md: 'text-sm',
-      lg: 'text-base',
-      xl: 'text-xl',
-      '2xl': 'text-2xl',
+      md: 'text-base',
+      lg: 'text-xl',
+      xl: 'text-2xl',
+      '2xl': 'text-[28px]',
     },
   },
   defaultVariants: {
-    size: 'lg',
+    size: 'md',
   },
 });
 
 // ── Icon ─────────────────────────────────────────────────
 
-export const avatarIconVariants = cva([COLOR_TEXT_SECONDARY], {
+export const avatarIconVariants = cva(['text-content-primary'], {
   variants: {
     size: {
-      sm: 'size-4',
-      md: 'size-5',
-      lg: 'size-6',
-      xl: 'size-8',
-      '2xl': 'size-10',
+      '2xs': 'size-1.5',
+      xs: 'size-[9px]',
+      sm: 'size-3',
+      md: 'size-4',
+      lg: 'size-5',
+      xl: 'size-6',
+      '2xl': 'size-7',
     },
   },
   defaultVariants: {
-    size: 'lg',
+    size: 'md',
   },
 });
 
 // ── Badge ────────────────────────────────────────────────
 
-export const avatarBadgeVariants = cva(['absolute border-2 border-white', RADIUS_FULL], {
-  variants: {
-    size: {
-      sm: 'w-2.5 h-2.5 bottom-0 right-0',
-      md: 'w-3 h-3 bottom-0 right-0',
-      lg: 'w-3.5 h-3.5 bottom-0 right-0',
-      xl: 'w-4 h-4 bottom-0.5 right-0.5',
-      '2xl': 'w-5 h-5 bottom-0.5 right-0.5',
+export const avatarBadgeVariants = cva(
+  ['absolute border-white', 'rounded-[var(--border-radius-round)]', 'bottom-0 right-0'],
+  {
+    variants: {
+      size: {
+        '2xs': 'w-1.5 h-1.5 border translate-x-[21%] translate-y-[21%]',
+        xs: 'w-2 h-2 border translate-x-[17%] translate-y-[17%]',
+        sm: 'w-2.5 h-2.5 border-2 translate-x-[15%] translate-y-[15%]',
+        md: 'w-3 h-3 border-2 translate-x-[11%] translate-y-[11%]',
+        lg: 'w-3.5 h-3.5 border-2 translate-x-[8%] translate-y-[8%]',
+        xl: 'w-4 h-4 border-2 translate-x-[6%] translate-y-[6%]',
+        '2xl': 'w-5 h-5 border-2 translate-x-[9%] translate-y-[9%]',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
     },
   },
-  defaultVariants: {
-    size: 'lg',
-  },
-});
+);
 
 export type AvatarVariantProps = VariantProps<typeof avatarRootVariants>;

package/src/components/Button/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type ReactElement, type ReactNode } from 'react';
+import { forwardRef, useEffect, type ReactElement, type ReactNode } from 'react';
 import {
   ActivityIndicator,
   Pressable,
@@ -40,7 +40,25 @@ const ButtonPrimitive = createButton({
 // STYLED ROOT COMPONENT
 // =============================================================================
 
-export interface ButtonProps extends PressableProps, IButtonProps, ButtonVariantProps {
+export type ButtonVariant = 'solid' | 'outline' | 'ghost';
+
+/** @deprecated Use {@link ButtonVariant} (`'solid'`) instead. */
+export type ButtonVariantStrong = 'strong';
+
+let hasWarnedStrongButtonVariant = false;
+
+export interface ButtonProps
+  extends PressableProps, IButtonProps, Omit<ButtonVariantProps, 'variant'> {
+  /**
+   * Visual style variant.
+   * @default 'solid'
+   */
+  variant?:
+    | ButtonVariant
+    /**
+     * @deprecated Use `'solid'` instead.
+     */
+    | 'strong';
   className?: string;
   children?: ReactNode;
 }
@@ -48,7 +66,7 @@ export interface ButtonProps extends PressableProps, IButtonProps, ButtonVariant
 const ButtonRoot = forwardRef<View, ButtonProps>(
   (
     {
-      variant = 'strong',
+      variant: variantProp = 'solid',
       color = 'action',
       size = 'default',
       fullWidth = false,
@@ -59,6 +77,22 @@ const ButtonRoot = forwardRef<View, ButtonProps>(
     },
     ref,
   ) => {
+    // TODO: Remove this once the `strong` variant is removed.
+    useEffect(() => {
+      if (
+        typeof process !== 'undefined' &&
+        process.env.NODE_ENV !== 'production' &&
+        variantProp === 'strong' &&
+        !hasWarnedStrongButtonVariant
+      ) {
+        hasWarnedStrongButtonVariant = true;
+        console.warn(
+          '[Button] The `strong` variant is deprecated and will be removed in a future major release. Use `solid` instead.',
+        );
+      }
+    }, [variantProp]);
+
+    const variant = variantProp === 'strong' ? 'solid' : variantProp;
     const computedClassName = cn(
       buttonRootVariants({ variant, color, size, fullWidth }),
       className,
@@ -141,9 +175,9 @@ ButtonGroup.displayName = 'Button.Group';
 export interface ButtonIconProps extends Omit<IconProps, 'children'> {}
 
 const ButtonIcon = ({ className, style, as, ...props }: ButtonIconProps) => {
-  const { size } = useButtonStyleContext();
+  const { variant, color, size } = useButtonStyleContext();
 
-  const computedClassName = cn(buttonIconVariants({ size }), className);
+  const computedClassName = cn(buttonIconVariants({ variant, color, size }), className);
 
   return <Icon as={as} className={computedClassName} style={style} {...props} />;
 };

package/src/components/Button/styles.ts

@@ -10,14 +10,14 @@ export const buttonRootVariants = cva(
     'rounded-[var(--border-radius-button)]',
     'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
     TRANSITION_COLORS,
-    'data-[disabled=true]:opacity-[--opacity-disabled]',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
     DISABLED_CURSOR,
-    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[--color-stroke-focus] web:data-[focus-visible=true]:ring-offset-2',
+    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
   ],
   {
     variants: {
       variant: {
-        strong: ['border-b-1 border-black/75'], // TODO: Replace with token
+        solid: ['border-b-1 border-black/75'], // TODO: Replace with token
         outline: ['bg-transparent', 'border border-stroke-primary'],
         ghost: ['bg-transparent'],
       },
@@ -29,7 +29,7 @@ export const buttonRootVariants = cva(
         info: [],
       },
       size: {
-        default: 'h-10 px-4 gap-2',
+        default: 'h-11 px-4 gap-2',
         small: 'h-8 px-3 gap-1.5',
       },
       fullWidth: {
@@ -38,9 +38,9 @@ export const buttonRootVariants = cva(
       },
     },
     compoundVariants: [
-      // ── strong × color (filled surface) ──────────────────────────────
+      // ── solid × color (filled surface) ──────────────────────────────
       {
-        variant: 'strong',
+        variant: 'solid',
         color: 'action',
         className: [
           'bg-surface-action-strong',
@@ -51,7 +51,7 @@ export const buttonRootVariants = cva(
         ],
       },
       {
-        variant: 'strong',
+        variant: 'solid',
         color: 'danger',
         className: [
           'bg-surface-danger-strong',
@@ -62,7 +62,7 @@ export const buttonRootVariants = cva(
         ],
       },
       {
-        variant: 'strong',
+        variant: 'solid',
         color: 'warning',
         className: [
           'bg-surface-warning-strong',
@@ -73,7 +73,7 @@ export const buttonRootVariants = cva(
         ],
       },
       {
-        variant: 'strong',
+        variant: 'solid',
         color: 'success',
         className: [
           'bg-surface-success-strong',
@@ -84,7 +84,7 @@ export const buttonRootVariants = cva(
         ],
       },
       {
-        variant: 'strong',
+        variant: 'solid',
         color: 'info',
         className: [
           'bg-surface-info-strong',
@@ -205,7 +205,7 @@ export const buttonRootVariants = cva(
       },
     ],
     defaultVariants: {
-      variant: 'strong',
+      variant: 'solid',
       color: 'action',
       size: 'default',
       fullWidth: false,
@@ -216,7 +216,7 @@ export const buttonRootVariants = cva(
 export const buttonTextVariants = cva(['font-medium', 'text-center'], {
   variants: {
     variant: {
-      strong: [],
+      solid: [],
       outline: [],
       ghost: [],
     },
@@ -233,12 +233,12 @@ export const buttonTextVariants = cva(['font-medium', 'text-center'], {
     },
   },
   compoundVariants: [
-    // ── strong × color (filled foreground text) ──────────────────────
-    { variant: 'strong', color: 'action', className: 'text-content-action-on-strong' },
-    { variant: 'strong', color: 'danger', className: 'text-content-danger-on-strong' },
-    { variant: 'strong', color: 'warning', className: 'text-content-warning-on-strong' },
-    { variant: 'strong', color: 'success', className: 'text-content-success-on-strong' },
-    { variant: 'strong', color: 'info', className: 'text-content-info-on-strong' },
+    // ── solid × color (filled foreground text) ──────────────────────
+    { variant: 'solid', color: 'action', className: 'text-content-action-on-strong' },
+    { variant: 'solid', color: 'danger', className: 'text-content-danger-on-strong' },
+    { variant: 'solid', color: 'warning', className: 'text-content-warning-on-strong' },
+    { variant: 'solid', color: 'success', className: 'text-content-success-on-strong' },
+    { variant: 'solid', color: 'info', className: 'text-content-info-on-strong' },
 
     // ── outline/ghost × color (transparent foreground text) ──────────
     { variant: ['outline', 'ghost'], color: 'action', className: 'text-content-action' },
@@ -248,7 +248,7 @@ export const buttonTextVariants = cva(['font-medium', 'text-center'], {
     { variant: ['outline', 'ghost'], color: 'info', className: 'text-content-info' },
   ],
   defaultVariants: {
-    variant: 'strong',
+    variant: 'solid',
     color: 'action',
     size: 'default',
   },
@@ -257,7 +257,7 @@ export const buttonTextVariants = cva(['font-medium', 'text-center'], {
 export const buttonSpinnerVariants = cva([], {
   variants: {
     variant: {
-      strong: [],
+      solid: [],
       outline: [],
       ghost: [],
     },
@@ -270,29 +270,29 @@ export const buttonSpinnerVariants = cva([], {
     },
   },
   compoundVariants: [
-    // ── strong × color ───────────────────────────────────────────────
+    // ── solid × color ───────────────────────────────────────────────
     {
-      variant: 'strong',
+      variant: 'solid',
       color: 'action',
       className: 'accent-[var(--color-content-action-on-strong)]',
     },
     {
-      variant: 'strong',
+      variant: 'solid',
       color: 'danger',
       className: 'accent-[var(--color-content-danger-on-strong)]',
     },
     {
-      variant: 'strong',
+      variant: 'solid',
       color: 'warning',
       className: 'accent-[var(--color-content-warning-on-strong)]',
     },
     {
-      variant: 'strong',
+      variant: 'solid',
       color: 'success',
       className: 'accent-[var(--color-content-success-on-strong)]',
     },
     {
-      variant: 'strong',
+      variant: 'solid',
       color: 'info',
       className: 'accent-[var(--color-content-info-on-strong)]',
     },
@@ -325,7 +325,7 @@ export const buttonSpinnerVariants = cva([], {
     },
   ],
   defaultVariants: {
-    variant: 'strong',
+    variant: 'solid',
     color: 'action',
   },
 });
@@ -351,12 +351,41 @@ export const buttonGroupVariants = cva([], {
 
 export const buttonIconVariants = cva([], {
   variants: {
+    variant: {
+      solid: [],
+      outline: [],
+      ghost: [],
+    },
+    color: {
+      action: [],
+      danger: [],
+      warning: [],
+      success: [],
+      info: [],
+    },
     size: {
       default: 'size-5',
       small: 'size-4',
     },
   },
+  compoundVariants: [
+    // ── solid × color (filled foreground icon) ──────────────────────
+    { variant: 'solid', color: 'action', className: 'text-content-action-on-strong' },
+    { variant: 'solid', color: 'danger', className: 'text-content-danger-on-strong' },
+    { variant: 'solid', color: 'warning', className: 'text-content-warning-on-strong' },
+    { variant: 'solid', color: 'success', className: 'text-content-success-on-strong' },
+    { variant: 'solid', color: 'info', className: 'text-content-info-on-strong' },
+
+    // ── outline/ghost × color (transparent foreground icon) ──────────
+    { variant: ['outline', 'ghost'], color: 'action', className: 'text-content-action' },
+    { variant: ['outline', 'ghost'], color: 'danger', className: 'text-content-danger' },
+    { variant: ['outline', 'ghost'], color: 'warning', className: 'text-content-warning' },
+    { variant: ['outline', 'ghost'], color: 'success', className: 'text-content-success' },
+    { variant: ['outline', 'ghost'], color: 'info', className: 'text-content-info' },
+  ],
   defaultVariants: {
+    variant: 'solid',
+    color: 'action',
     size: 'default',
   },
 });