@cdx-ui/components 0.0.1-beta.117 → 0.0.1-beta.118

package/src/components/IconButton/styles.ts

@@ -16,7 +16,7 @@ export const iconButtonRootVariants = cva(
     variants: {
       variant: {
         solid: [],
-        tint: [],
+        subtle: [],
         ghost: ['bg-transparent'],
       },
       color: {
@@ -65,37 +65,37 @@ export const iconButtonRootVariants = cva(
         ],
       },
 
-      // ── tint × color ─────────────────────────────────────────────────
+      // ── subtle × color ─────────────────────────────────────────────────
       {
-        variant: 'tint',
+        variant: 'subtle',
         color: 'neutral',
         className: [
-          'bg-surface-neutral-tint',
+          'bg-surface-neutral-subtle',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-neutral-tint-active',
-            web: 'data-[hover=true]:bg-surface-neutral-tint-hover data-[active=true]:data-[hover=true]:bg-surface-neutral-tint-active',
+            default: 'data-[active=true]:bg-surface-neutral-subtle-active',
+            web: 'data-[hover=true]:bg-surface-neutral-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-neutral-subtle-active',
           }),
         ],
       },
       {
-        variant: 'tint',
+        variant: 'subtle',
         color: 'action',
         className: [
-          'bg-surface-action-tint',
+          'bg-surface-action-subtle',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-action-tint-active',
-            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active',
+            default: 'data-[active=true]:bg-surface-action-subtle-active',
+            web: 'data-[hover=true]:bg-surface-action-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-action-subtle-active',
           }),
         ],
       },
       {
-        variant: 'tint',
+        variant: 'subtle',
         color: 'danger',
         className: [
-          'bg-surface-danger-tint',
+          'bg-surface-danger-subtle',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-danger-tint-active',
-            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-tint-active',
+            default: 'data-[active=true]:bg-surface-danger-subtle-active',
+            web: 'data-[hover=true]:bg-surface-danger-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-danger-subtle-active',
           }),
         ],
       },
@@ -116,8 +116,8 @@ export const iconButtonRootVariants = cva(
         color: 'action',
         className: [
           Platform.select({
-            default: 'data-[active=true]:bg-surface-action-tint-active',
-            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active',
+            default: 'data-[active=true]:bg-surface-action-subtle-active',
+            web: 'data-[hover=true]:bg-surface-action-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-action-subtle-active',
           }),
         ],
       },
@@ -126,8 +126,8 @@ export const iconButtonRootVariants = cva(
         color: 'danger',
         className: [
           Platform.select({
-            default: 'data-[active=true]:bg-surface-danger-tint-active',
-            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-tint-active',
+            default: 'data-[active=true]:bg-surface-danger-subtle-active',
+            web: 'data-[hover=true]:bg-surface-danger-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-danger-subtle-active',
           }),
         ],
       },
@@ -156,7 +156,7 @@ export const iconButtonIconColorVariants = cva([], {
   variants: {
     variant: {
       solid: [],
-      tint: [],
+      subtle: [],
       ghost: [],
     },
     color: {
@@ -169,9 +169,9 @@ export const iconButtonIconColorVariants = cva([], {
     { variant: 'solid', color: 'neutral', className: 'text-content-primary' },
     { variant: 'solid', color: 'action', className: 'text-content-action-on-strong' },
     { variant: 'solid', color: 'danger', className: 'text-content-danger-on-strong' },
-    { variant: 'tint', color: 'neutral', className: 'text-content-primary' },
-    { variant: 'tint', color: 'action', className: 'text-content-action-on-subtle' },
-    { variant: 'tint', color: 'danger', className: 'text-content-danger-on-subtle' },
+    { variant: 'subtle', color: 'neutral', className: 'text-content-primary' },
+    { variant: 'subtle', color: 'action', className: 'text-content-action-on-subtle' },
+    { variant: 'subtle', color: 'danger', className: 'text-content-danger-on-subtle' },
     { variant: 'ghost', color: 'neutral', className: 'text-content-primary' },
     { variant: 'ghost', color: 'action', className: 'text-content-action' },
     { variant: 'ghost', color: 'danger', className: 'text-content-danger' },

package/src/components/Toast/hooks.ts

@@ -3,14 +3,14 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native';
 import { useResolveClassNames } from 'uniwind';
 import type { ButtonProps } from '../Button';
-import { ToastColor } from './types';
+import { ToastColorInternal } from './types';
 
 export function useButtonColor({
   color,
   toastColor,
 }: {
   color: ButtonProps['color'];
-  toastColor: ToastColor;
+  toastColor: ToastColorInternal;
 }) {
   // TODO: Add toastActionVariants to styles.ts to restore color-aware action styling
   return useMemo(() => {
@@ -25,6 +25,7 @@ export function useButtonColor({
         return 'warning';
       case 'danger':
         return 'danger';
+      case 'neutral':
       default:
         return 'action';
     }

package/src/components/Toast/index.tsx

@@ -33,6 +33,7 @@ import type {
   DefaultToastProps,
   ToastActionProps,
   ToastCloseProps,
+  ToastColorInternal,
   ToastContextValue,
   ToastDescriptionProps,
   ToastIconProps,
@@ -48,6 +49,8 @@ const AnimatedToastRoot = Animated.createAnimatedComponent(ToastRootPrimitive);
 
 const IS_WEB = Platform.OS === 'web';
 
+let hasWarnedToastDefaultColor = false;
+
 /**
  * Fallback timeout for web exit transitions. Covers cases where
  * `transitionend` never fires — `prefers-reduced-motion: reduce`
@@ -84,11 +87,25 @@ const ToastRoot = forwardRef<View, ToastProps>((props, ref) => {
   /**
    * Merge global config with local props, ensuring local props take precedence
    */
-  const color = localColor ?? globalConfig?.color ?? 'default';
+  const resolvedColor = localColor ?? globalConfig?.color ?? 'neutral';
   const placement = localPlacement ?? globalConfig?.placement ?? 'bottom';
   const animation = localAnimation ?? globalConfig?.animation;
   const isSwipeable = localIsSwipeable ?? globalConfig?.isSwipeable;
 
+  useEffect(() => {
+    if (__DEV__ && resolvedColor === ('default' as string) && !hasWarnedToastDefaultColor) {
+      hasWarnedToastDefaultColor = true;
+      console.warn(
+        '[Toast] The `default` color is deprecated and will be removed in a future major release. Use `neutral` instead.',
+      );
+    }
+  }, [resolvedColor]);
+
+  const color: NonNullable<ToastColorInternal> =
+    (resolvedColor as string) === 'default'
+      ? 'neutral'
+      : (resolvedColor as NonNullable<ToastColorInternal>);
+
   // Access id from props (id is omitted from ToastProps type but available at runtime)
   const toastProps = props as ToastProps & Pick<ToastComponentProps, 'id'>;
   const { id } = toastProps;
@@ -445,11 +462,25 @@ export function DefaultToast(props: DefaultToastProps) {
   /**
    * Merge global config with local props, ensuring local props take precedence
    */
-  const color = localColor ?? globalConfig?.color ?? 'default';
+  const rawDefaultColor = localColor ?? globalConfig?.color ?? 'neutral';
   const placement = localPlacement ?? globalConfig?.placement ?? 'bottom';
   const isSwipeable = localIsSwipeable ?? globalConfig?.isSwipeable;
   const animation = localAnimation ?? globalConfig?.animation;
 
+  useEffect(() => {
+    if (__DEV__ && rawDefaultColor === ('default' as string) && !hasWarnedToastDefaultColor) {
+      hasWarnedToastDefaultColor = true;
+      console.warn(
+        '[Toast] The `default` color is deprecated and will be removed in a future major release. Use `neutral` instead.',
+      );
+    }
+  }, [rawDefaultColor]);
+
+  const color: NonNullable<ToastColorInternal> =
+    (rawDefaultColor as string) === 'default'
+      ? 'neutral'
+      : (rawDefaultColor as NonNullable<ToastColorInternal>);
+
   const handleActionPress = () => {
     if (onActionPress) {
       onActionPress({ show, hide });

package/src/components/Toast/styles.ts

@@ -46,7 +46,7 @@ export const toastRootVariants = cva(
   {
     variants: {
       color: {
-        default: '',
+        neutral: '',
         info: '',
         success: '',
         warning: '',
@@ -54,7 +54,7 @@ export const toastRootVariants = cva(
       },
     },
     defaultVariants: {
-      color: 'default',
+      color: 'neutral',
     },
   },
 );
@@ -135,7 +135,7 @@ export const toastWrapperVariants = cva(
 export const toastLabelVariants = cva(['text-base font-sans-medium'], {
   variants: {
     color: {
-      default: 'text-content-primary',
+      neutral: 'text-content-primary',
       info: 'text-content-info',
       success: 'text-content-success',
       warning: 'text-content-warning',
@@ -143,14 +143,14 @@ export const toastLabelVariants = cva(['text-base font-sans-medium'], {
     },
   },
   defaultVariants: {
-    color: 'default',
+    color: 'neutral',
   },
 });
 
 export const toastDescriptionVariants = cva(['text-sm text-content-primary'], {
   variants: {
     color: {
-      default: 'text-content-primary',
+      neutral: 'text-content-primary',
       info: 'text-content-info',
       success: 'text-content-success',
       warning: 'text-content-warning',
@@ -158,14 +158,14 @@ export const toastDescriptionVariants = cva(['text-sm text-content-primary'], {
     },
   },
   defaultVariants: {
-    color: 'default',
+    color: 'neutral',
   },
 });
 
 export const toastIconVariants = cva(['size-5'], {
   variants: {
     color: {
-      default: 'text-content-primary',
+      neutral: 'text-content-primary',
       info: 'text-content-info',
       success: 'text-content-success',
       warning: 'text-content-warning',
@@ -173,7 +173,7 @@ export const toastIconVariants = cva(['size-5'], {
     },
   },
   defaultVariants: {
-    color: 'default',
+    color: 'neutral',
   },
 });
 

package/src/components/Toast/types.ts

@@ -10,9 +10,15 @@ import type { IconProps } from '../Icon';
 import { ToastColorProps } from './styles';
 
 /**
- * Toast color types
+ * Internal (normalized) toast color values used by CVA and context.
  */
-export type ToastColor = ToastColorProps['color'];
+export type ToastColorInternal = ToastColorProps['color'];
+
+/**
+ * Toast color types accepted by consumers.
+ * @remarks `'default'` is deprecated — use `'neutral'` instead.
+ */
+export type ToastColor = ToastColorInternal | 'default';
 
 /**
  * Toast placement types.
@@ -120,7 +126,7 @@ export type ToastRootAnimation = AnimationRoot<{
 export interface ToastProps extends ToastRootProps, Omit<ToastComponentProps, 'id'> {
   /**
    * Color of the toast
-   * @default 'default'
+   * @default 'neutral'
    */
   color?: ToastColor;
   /**
@@ -246,9 +252,9 @@ export type ToastCloseProps = Omit<IconButtonProps, 'as'> & {
  */
 export interface ToastContextValue {
   /**
-   * Color of the toast
+   * Color of the toast (normalized — always uses the current value names)
    */
-  color?: ToastColor;
+  color?: ToastColorInternal;
   /**
    * Function to hide the toast
    */
@@ -288,7 +294,7 @@ export type UseToastRootAnimationOptions = Pick<
 export interface DefaultToastProps extends ToastComponentProps {
   /**
    * Color of the toast
-   * @default 'default'
+   * @default 'neutral'
    */
   color?: ToastProps['color'];
   /**

package/src/providers/toast/provider.tsx

@@ -68,7 +68,7 @@ function createStringToastComponent(
 ): (props: ToastComponentProps) => React.ReactElement {
   return (props: ToastComponentProps) => {
     const mergedConfig = mergeToastConfig(globalConfig, {
-      color: 'default',
+      color: 'neutral',
     });
     return (
       <DefaultToast