@cdx-ui/components 0.3.0 → 0.3.2

package/src/components/IconButton/styles.ts

@@ -29,6 +29,9 @@ export const iconButtonRootVariants = cva(
         neutral: [],
         action: [],
         danger: [],
+        warning: [],
+        success: [],
+        info: [],
       },
       size: iconButtonSizeClassNames,
     },
@@ -67,6 +70,39 @@ export const iconButtonRootVariants = cva(
           }),
         ],
       },
+      {
+        variant: 'solid',
+        color: 'warning',
+        className: [
+          'bg-surface-warning-strong',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-warning-strong-active',
+            web: 'data-[hover=true]:bg-surface-warning-strong-hover data-[active=true]:data-[hover=true]:bg-surface-warning-strong-active',
+          }),
+        ],
+      },
+      {
+        variant: 'solid',
+        color: 'success',
+        className: [
+          'bg-surface-success-strong',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-success-strong-active',
+            web: 'data-[hover=true]:bg-surface-success-strong-hover data-[active=true]:data-[hover=true]:bg-surface-success-strong-active',
+          }),
+        ],
+      },
+      {
+        variant: 'solid',
+        color: 'info',
+        className: [
+          'bg-surface-info-strong',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-info-strong-active',
+            web: 'data-[hover=true]:bg-surface-info-strong-hover data-[active=true]:data-[hover=true]:bg-surface-info-strong-active',
+          }),
+        ],
+      },
 
       // ── subtle × color ─────────────────────────────────────────────────
       {
@@ -102,6 +138,39 @@ export const iconButtonRootVariants = cva(
           }),
         ],
       },
+      {
+        variant: 'subtle',
+        color: 'warning',
+        className: [
+          'bg-surface-warning-subtle',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-warning-subtle-active',
+            web: 'data-[hover=true]:bg-surface-warning-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-warning-subtle-active',
+          }),
+        ],
+      },
+      {
+        variant: 'subtle',
+        color: 'success',
+        className: [
+          'bg-surface-success-subtle',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-success-subtle-active',
+            web: 'data-[hover=true]:bg-surface-success-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-success-subtle-active',
+          }),
+        ],
+      },
+      {
+        variant: 'subtle',
+        color: 'info',
+        className: [
+          'bg-surface-info-subtle',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-info-subtle-active',
+            web: 'data-[hover=true]:bg-surface-info-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-info-subtle-active',
+          }),
+        ],
+      },
 
       // ── ghost × color ──────────────────────────────────────────────────
       {
@@ -134,6 +203,36 @@ export const iconButtonRootVariants = cva(
           }),
         ],
       },
+      {
+        variant: 'ghost',
+        color: 'warning',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-warning-subtle-active',
+            web: 'data-[hover=true]:bg-surface-warning-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-warning-subtle-active',
+          }),
+        ],
+      },
+      {
+        variant: 'ghost',
+        color: 'success',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-success-subtle-active',
+            web: 'data-[hover=true]:bg-surface-success-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-success-subtle-active',
+          }),
+        ],
+      },
+      {
+        variant: 'ghost',
+        color: 'info',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-info-subtle-active',
+            web: 'data-[hover=true]:bg-surface-info-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-info-subtle-active',
+          }),
+        ],
+      },
     ],
     defaultVariants: {
       variant: 'solid',
@@ -166,18 +265,30 @@ export const iconButtonIconColorVariants = cva([], {
       neutral: [],
       action: [],
       danger: [],
+      warning: [],
+      success: [],
+      info: [],
     },
   },
   compoundVariants: [
     { 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: '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' },
     { 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: 'subtle', color: 'warning', className: 'text-content-warning-on-subtle' },
+    { variant: 'subtle', color: 'success', className: 'text-content-success-on-subtle' },
+    { variant: 'subtle', color: 'info', className: 'text-content-info-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' },
+    { variant: 'ghost', color: 'warning', className: 'text-content-warning' },
+    { variant: 'ghost', color: 'success', className: 'text-content-success' },
+    { variant: 'ghost', color: 'info', className: 'text-content-info' },
   ],
   defaultVariants: {
     variant: 'solid',

package/src/components/Toast/index.tsx

@@ -441,9 +441,18 @@ const ToastAction = forwardRef<View, ToastActionProps>((props, ref) => {
 // --------------------------------------------------
 
 const ToastClose = forwardRef<View, ToastCloseProps>((props, ref) => {
-  const { children, size = 'small', className, onPress, iconClassName, ...restProps } = props;
+  const {
+    children,
+    size = 'small',
+    className,
+    onPress,
+    iconClassName,
+    color: colorProp,
+    as = CloseIcon,
+    ...restProps
+  } = props;
   const { hide, id, color: toastColor } = useToastStyleContext();
-  const usesNeutralStandIn = toastColor === 'neutral';
+  const usesNeutralStandIn = toastColor === 'neutral' && colorProp == null;
 
   /**
    * Handle close button press
@@ -463,12 +472,13 @@ const ToastClose = forwardRef<View, ToastCloseProps>((props, ref) => {
     <IconButton
       ref={ref}
       variant="ghost"
+      color={colorProp ?? toastColor}
       size={size}
       aria-label="Close"
       className={cn(usesNeutralStandIn ? toastCloseRootVariants() : undefined, className)}
       iconClassName={cn(usesNeutralStandIn ? toastCloseIconVariants() : undefined, iconClassName)}
       onPress={handlePress}
-      as={CloseIcon}
+      as={as}
       {...restProps}
     />
   );