@cdx-ui/components 0.0.1-alpha.2 → 0.0.1-alpha.21

package/src/components/Button/styles.ts

@@ -1,5 +1,13 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  COLOR_BORDER_DEFAULT,
+  DISABLED_CURSOR,
+  DISABLED_OPACITY,
+  RADIUS_SM,
+  SEMANTIC_COLORS,
+  TRANSITION_COLORS,
+} from '../../styles/primitives';
 
 // TODO: Split into 2 files
 // TODO: Create cva wrapper
@@ -7,37 +15,43 @@ import { cva, type VariantProps } from 'class-variance-authority';
 export const buttonRootVariants = cva(
   [
     'flex-row items-center justify-center',
-    'rounded-md',
-    'transition-colors duration-150', // TODO: Transition not working on mobile
-    'data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none',
-    'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-ring data-[focus-visible=true]:ring-offset-2 data-[focus-visible=true]:ring-offset-bg',
+    RADIUS_SM,
+    'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+    TRANSITION_COLORS,
+    DISABLED_OPACITY,
+    DISABLED_CURSOR,
+    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-slate-400/50 web:data-[focus-visible=true]:ring-offset-2',
   ],
   {
     variants: {
       variant: {
-        solid: [],
-        subtle: [],
+        strong: [],
         outline: [
-          'bg-transparent border border-border',
-          'data-[hover=true]:bg-surface',
-          'data-[active=true]:bg-surface-raised',
+          'bg-transparent',
+          `border ${COLOR_BORDER_DEFAULT}`,
+          'data-[hover=true]:bg-slate-50',
+          'data-[active=true]:bg-slate-100',
         ],
         ghost: [
           'bg-transparent',
-          'data-[hover=true]:bg-surface',
-          'data-[active=true]:bg-surface-raised',
+          'data-[hover=true]:bg-slate-50',
+          'data-[active=true]:bg-slate-100',
         ],
       },
       color: {
-        primary: [],
-        secondary: [],
-        success: [],
+        action: [],
         danger: [],
+        warning: [],
+        success: [],
+        info: [],
       },
       size: {
-        sm: 'h-8 px-3 gap-1.5',
-        md: 'h-10 px-4 gap-2',
-        lg: 'h-12 px-6 gap-2.5',
+        default: 'h-10 px-4 gap-2',
+        small: 'h-8 px-3 gap-1.5',
+      },
+      mode: {
+        light: [],
+        dark: [],
       },
       fullWidth: {
         true: 'w-full',
@@ -45,22 +59,34 @@ export const buttonRootVariants = cva(
       },
     },
     compoundVariants: [
+      // --- strong × color (light mode) ---
       {
-        variant: 'solid',
-        color: 'primary',
+        variant: 'strong',
+        color: 'action',
+        className: [
+          SEMANTIC_COLORS.action.bg,
+          Platform.select({
+            default: 'data-[active=true]:bg-slate-700',
+            web: 'data-[hover=true]:bg-slate-800 data-[active=true]:data-[hover=true]:bg-slate-700',
+          }),
+        ],
+      },
+      {
+        variant: 'strong',
+        color: 'danger',
         className: [
-          'bg-blue-500',
+          SEMANTIC_COLORS.danger.bg,
           Platform.select({
-            default: 'data-[active=true]:bg-blue-700',
-            web: 'data-[hover=true]:bg-blue-600 data-[active=true]:data-[hover=true]:bg-blue-700',
+            default: 'data-[active=true]:bg-red-800',
+            web: 'data-[hover=true]:bg-red-700 data-[active=true]:data-[hover=true]:bg-red-800',
           }),
         ],
       },
       {
-        variant: 'solid',
-        color: 'secondary',
+        variant: 'strong',
+        color: 'warning',
         className: [
-          'bg-amber-500',
+          SEMANTIC_COLORS.warning.bg,
           Platform.select({
             default: 'data-[active=true]:bg-amber-700',
             web: 'data-[hover=true]:bg-amber-600 data-[active=true]:data-[hover=true]:bg-amber-700',
@@ -68,131 +94,177 @@ export const buttonRootVariants = cva(
         ],
       },
       {
-        variant: 'solid',
+        variant: 'strong',
         color: 'success',
         className: [
-          'bg-green-500',
+          SEMANTIC_COLORS.success.bg,
           Platform.select({
-            default: 'data-[active=true]:bg-green-700',
-            web: 'data-[hover=true]:bg-green-600 data-[active=true]:data-[hover=true]:bg-green-700',
+            default: 'data-[active=true]:bg-green-800',
+            web: 'data-[hover=true]:bg-green-700 data-[active=true]:data-[hover=true]:bg-green-800',
           }),
         ],
       },
       {
-        variant: 'solid',
-        color: 'danger',
+        variant: 'strong',
+        color: 'info',
+        className: [
+          SEMANTIC_COLORS.info.bg,
+          Platform.select({
+            default: 'data-[active=true]:bg-sky-700',
+            web: 'data-[hover=true]:bg-sky-600 data-[active=true]:data-[hover=true]:bg-sky-700',
+          }),
+        ],
+      },
+
+      // --- strong × action × mode: dark ---
+      {
+        variant: 'strong',
+        color: 'action',
+        mode: 'dark',
+        className: [
+          'bg-slate-200',
+          Platform.select({
+            default: 'data-[active=true]:bg-slate-400',
+            web: 'data-[hover=true]:bg-slate-300 data-[active=true]:data-[hover=true]:bg-slate-400',
+          }),
+        ],
+      },
+
+      // --- outline × color (light mode) ---
+      {
+        variant: 'outline',
+        color: 'action',
         className: [
-          'bg-red-500',
+          'border-slate-300',
           Platform.select({
-            default: 'data-[active=true]:bg-red-700',
-            web: 'data-[hover=true]:bg-red-600 data-[active=true]:data-[hover=true]:bg-red-700',
+            default: 'data-[active=true]:border-slate-500 data-[active=true]:bg-slate-100',
+            web: 'data-[hover=true]:border-slate-400 data-[hover=true]:bg-slate-50 data-[active=true]:data-[hover=true]:border-slate-500 data-[active=true]:data-[hover=true]:bg-slate-100',
           }),
         ],
       },
       {
-        variant: 'subtle',
-        color: 'primary',
+        variant: 'outline',
+        color: 'danger',
         className: [
-          'bg-blue-100',
+          'border-red-600',
           Platform.select({
-            default: 'data-[active=true]:bg-blue-200',
-            web: 'data-[hover=true]:bg-blue-200 data-[active=true]:data-[hover=true]:bg-blue-300',
+            default: 'data-[active=true]:border-red-800 data-[active=true]:bg-red-100',
+            web: 'data-[hover=true]:border-red-700 data-[hover=true]:bg-red-50 data-[active=true]:data-[hover=true]:border-red-800 data-[active=true]:data-[hover=true]:bg-red-100',
           }),
         ],
       },
       {
-        variant: 'subtle',
-        color: 'secondary',
+        variant: 'outline',
+        color: 'warning',
         className: [
-          'bg-amber-200',
+          'border-amber-500',
           Platform.select({
-            default: 'data-[active=true]:bg-amber-300',
-            web: 'data-[hover=true]:bg-amber-300 data-[active=true]:data-[hover=true]:bg-amber-400',
+            default: 'data-[active=true]:border-amber-700 data-[active=true]:bg-amber-50',
+            web: 'data-[hover=true]:border-amber-600 data-[hover=true]:bg-amber-50 data-[active=true]:data-[hover=true]:border-amber-700 data-[active=true]:data-[hover=true]:bg-amber-100',
           }),
         ],
       },
       {
-        variant: 'subtle',
+        variant: 'outline',
         color: 'success',
         className: [
-          'bg-green-200',
+          'border-green-600',
           Platform.select({
-            default: 'data-[active=true]:bg-green-300',
-            web: 'data-[hover=true]:bg-green-300 data-[active=true]:data-[hover=true]:bg-green-400',
+            default: 'data-[active=true]:border-green-800 data-[active=true]:bg-green-100',
+            web: 'data-[hover=true]:border-green-700 data-[hover=true]:bg-green-50 data-[active=true]:data-[hover=true]:border-green-800 data-[active=true]:data-[hover=true]:bg-green-100',
           }),
         ],
       },
       {
-        variant: 'subtle',
-        color: 'danger',
+        variant: 'outline',
+        color: 'info',
         className: [
-          'bg-red-200',
+          'border-sky-500',
           Platform.select({
-            default: 'data-[active=true]:bg-red-300',
-            web: 'data-[hover=true]:bg-red-300 data-[active=true]:data-[hover=true]:bg-red-400',
+            default: 'data-[active=true]:border-sky-700 data-[active=true]:bg-sky-100',
+            web: 'data-[hover=true]:border-sky-600 data-[hover=true]:bg-sky-50 data-[active=true]:data-[hover=true]:border-sky-700 data-[active=true]:data-[hover=true]:bg-sky-100',
           }),
         ],
       },
+
+      // --- outline × action × mode: dark ---
       {
         variant: 'outline',
-        color: 'primary',
+        color: 'action',
+        mode: 'dark',
         className: [
-          'border-blue-500',
+          'bg-transparent border-slate-700',
           Platform.select({
-            default: 'data-[active=true]:border-blue-700 data-[active=true]:bg-blue-100',
-            web: 'data-[hover=true]:border-blue-600 data-[hover=true]:bg-blue-100 data-[active=true]:data-[hover=true]:border-blue-700 data-[active=true]:data-[hover=true]:bg-blue-200',
+            default: 'data-[active=true]:bg-slate-700',
+            web: 'data-[hover=true]:bg-slate-800 data-[active=true]:data-[hover=true]:bg-slate-700',
           }),
         ],
       },
+      // --- outline × semantic colors × mode: dark ---
       {
         variant: 'outline',
-        color: 'secondary',
+        color: 'danger',
+        mode: 'dark',
         className: [
-          'border-amber-500',
+          'bg-transparent border-red-500',
           Platform.select({
-            default: 'data-[active=true]:border-amber-700 data-[active=true]:bg-amber-50',
-            web: 'data-[hover=true]:border-amber-600 data-[hover=true]:bg-amber-50 data-[active=true]:data-[hover=true]:border-amber-700 data-[active=true]:data-[hover=true]:bg-amber-100',
+            default: 'data-[active=true]:bg-red-950',
+            web: 'data-[hover=true]:bg-red-950/50 data-[active=true]:data-[hover=true]:bg-red-950',
+          }),
+        ],
+      },
+      {
+        variant: 'outline',
+        color: 'warning',
+        mode: 'dark',
+        className: [
+          'bg-transparent border-amber-500',
+          Platform.select({
+            default: 'data-[active=true]:bg-amber-950',
+            web: 'data-[hover=true]:bg-amber-950/50 data-[active=true]:data-[hover=true]:bg-amber-950',
           }),
         ],
       },
       {
         variant: 'outline',
         color: 'success',
+        mode: 'dark',
         className: [
-          'border-green-500',
+          'bg-transparent border-green-500',
           Platform.select({
-            default: 'data-[active=true]:border-green-700 data-[active=true]:bg-green-100',
-            web: 'data-[hover=true]:border-green-600 data-[hover=true]:bg-green-100 data-[active=true]:data-[hover=true]:border-green-700 data-[active=true]:data-[hover=true]:bg-green-200',
+            default: 'data-[active=true]:bg-green-950',
+            web: 'data-[hover=true]:bg-green-950/50 data-[active=true]:data-[hover=true]:bg-green-950',
           }),
         ],
       },
       {
         variant: 'outline',
-        color: 'danger',
+        color: 'info',
+        mode: 'dark',
         className: [
-          'border-red-500',
+          'bg-transparent border-sky-500',
           Platform.select({
-            default: 'data-[active=true]:border-red-700 data-[active=true]:bg-red-100',
-            web: 'data-[hover=true]:border-red-600 data-[hover=true]:bg-red-100 data-[active=true]:data-[hover=true]:border-red-700 data-[active=true]:data-[hover=true]:bg-red-200',
+            default: 'data-[active=true]:bg-sky-950',
+            web: 'data-[hover=true]:bg-sky-950/50 data-[active=true]:data-[hover=true]:bg-sky-950',
           }),
         ],
       },
+
+      // --- ghost × color (light mode, non-action) ---
       {
         variant: 'ghost',
-        color: 'primary',
+        color: 'danger',
         className: [
-          'bg-transparent',
           Platform.select({
-            default: 'data-[active=true]:bg-blue-100',
-            web: 'data-[hover=true]:bg-blue-50 data-[active=true]:data-[hover=true]:bg-blue-100',
+            default: 'data-[active=true]:bg-red-100',
+            web: 'data-[hover=true]:bg-red-50 data-[active=true]:data-[hover=true]:bg-red-100',
           }),
         ],
       },
       {
         variant: 'ghost',
-        color: 'secondary',
+        color: 'warning',
         className: [
-          'bg-transparent',
           Platform.select({
             default: 'data-[active=true]:bg-amber-100',
             web: 'data-[hover=true]:bg-amber-50 data-[active=true]:data-[hover=true]:bg-amber-100',
@@ -203,29 +275,86 @@ export const buttonRootVariants = cva(
         variant: 'ghost',
         color: 'success',
         className: [
-          'bg-transparent',
           Platform.select({
             default: 'data-[active=true]:bg-green-100',
             web: 'data-[hover=true]:bg-green-50 data-[active=true]:data-[hover=true]:bg-green-100',
           }),
         ],
       },
+      {
+        variant: 'ghost',
+        color: 'info',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-sky-100',
+            web: 'data-[hover=true]:bg-sky-50 data-[active=true]:data-[hover=true]:bg-sky-100',
+          }),
+        ],
+      },
+
+      // --- ghost × action × mode: dark ---
+      {
+        variant: 'ghost',
+        color: 'action',
+        mode: 'dark',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-slate-700',
+            web: 'data-[hover=true]:bg-slate-800 data-[active=true]:data-[hover=true]:bg-slate-700',
+          }),
+        ],
+      },
+      // --- ghost × semantic colors × mode: dark ---
       {
         variant: 'ghost',
         color: 'danger',
+        mode: 'dark',
         className: [
-          'bg-transparent',
           Platform.select({
-            default: 'data-[active=true]:bg-red-100',
-            web: 'data-[hover=true]:bg-red-50 data-[active=true]:data-[hover=true]:bg-red-100',
+            default: 'data-[active=true]:bg-red-950',
+            web: 'data-[hover=true]:bg-red-950/50 data-[active=true]:data-[hover=true]:bg-red-950',
+          }),
+        ],
+      },
+      {
+        variant: 'ghost',
+        color: 'warning',
+        mode: 'dark',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-amber-950',
+            web: 'data-[hover=true]:bg-amber-950/50 data-[active=true]:data-[hover=true]:bg-amber-950',
+          }),
+        ],
+      },
+      {
+        variant: 'ghost',
+        color: 'success',
+        mode: 'dark',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-green-950',
+            web: 'data-[hover=true]:bg-green-950/50 data-[active=true]:data-[hover=true]:bg-green-950',
+          }),
+        ],
+      },
+      {
+        variant: 'ghost',
+        color: 'info',
+        mode: 'dark',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-sky-950',
+            web: 'data-[hover=true]:bg-sky-950/50 data-[active=true]:data-[hover=true]:bg-sky-950',
           }),
         ],
       },
     ],
     defaultVariants: {
-      variant: 'solid',
-      color: 'primary',
-      size: 'md',
+      variant: 'strong',
+      color: 'action',
+      size: 'default',
+      mode: 'light',
       fullWidth: false,
     },
   },
@@ -234,58 +363,63 @@ export const buttonRootVariants = cva(
 export const buttonTextVariants = cva(['font-medium', 'text-center'], {
   variants: {
     variant: {
-      solid: 'text-white',
-      subtle: [],
+      strong: [],
       outline: [],
       ghost: [],
     },
     color: {
-      primary: [],
-      secondary: [],
-      success: [],
+      action: [],
       danger: [],
+      warning: [],
+      success: [],
+      info: [],
     },
     size: {
-      sm: 'text-sm',
-      md: 'text-base',
-      lg: 'text-lg',
+      default: 'text-base',
+      small: 'text-sm',
+    },
+    mode: {
+      light: [],
+      dark: [],
     },
   },
   compoundVariants: [
+    // --- strong × color (light mode) — always white text ---
+    { variant: 'strong', color: 'action', className: 'text-white' },
+    { variant: 'strong', color: 'danger', className: 'text-white' },
+    { variant: 'strong', color: 'warning', className: 'text-white' },
+    { variant: 'strong', color: 'success', className: 'text-white' },
+    { variant: 'strong', color: 'info', className: 'text-white' },
+
+    // --- strong × action × mode: dark ---
+    { variant: 'strong', color: 'action', mode: 'dark', className: 'text-slate-900' },
+
+    // --- outline/ghost × color (light mode text) ---
     {
-      variant: 'subtle',
-      color: 'primary',
-      className: 'text-blue-950',
-    },
-    {
-      variant: 'subtle',
-      color: 'secondary',
-      className: 'text-amber-950',
-    },
-    {
-      variant: 'subtle',
-      color: 'success',
-      className: 'text-green-950',
-    },
-    {
-      variant: 'subtle',
-      color: 'danger',
-      className: 'text-red-950',
+      variant: ['outline', 'ghost'],
+      color: 'action',
+      className: [
+        'text-slate-900',
+        Platform.select({
+          default: 'data-[active=true]:text-slate-700',
+          web: 'data-[hover=true]:text-slate-800 data-[active=true]:data-[hover=true]:text-slate-700',
+        }),
+      ],
     },
     {
       variant: ['outline', 'ghost'],
-      color: 'primary',
+      color: 'danger',
       className: [
-        'text-blue-500',
+        'text-red-600',
         Platform.select({
-          default: 'data-[active=true]:text-blue-700',
-          web: 'data-[hover=true]:text-blue-600 data-[active=true]:data-[hover=true]:text-blue-700',
+          default: 'data-[active=true]:text-red-800',
+          web: 'data-[hover=true]:text-red-700 data-[active=true]:data-[hover=true]:text-red-800',
         }),
       ],
     },
     {
       variant: ['outline', 'ghost'],
-      color: 'secondary',
+      color: 'warning',
       className: [
         'text-amber-600',
         Platform.select({
@@ -307,83 +441,146 @@ export const buttonTextVariants = cva(['font-medium', 'text-center'], {
     },
     {
       variant: ['outline', 'ghost'],
-      color: 'danger',
+      color: 'info',
       className: [
-        'text-red-500',
+        'text-sky-600',
         Platform.select({
-          default: 'data-[active=true]:text-red-700',
-          web: 'data-[hover=true]:text-red-600 data-[active=true]:data-[hover=true]:text-red-700',
+          default: 'data-[active=true]:text-sky-800',
+          web: 'data-[hover=true]:text-sky-700 data-[active=true]:data-[hover=true]:text-sky-800',
         }),
       ],
     },
+
+    // --- outline/ghost × action × mode: dark ---
+    {
+      variant: ['outline', 'ghost'],
+      color: 'action',
+      mode: 'dark',
+      className: [
+        'text-white',
+        Platform.select({
+          default: 'data-[active=true]:text-white',
+          web: 'data-[hover=true]:text-white data-[active=true]:data-[hover=true]:text-white',
+        }),
+      ],
+    },
+    // --- outline/ghost × semantic colors × mode: dark ---
+    {
+      variant: ['outline', 'ghost'],
+      color: 'danger',
+      mode: 'dark',
+      className: 'text-red-400',
+    },
+    {
+      variant: ['outline', 'ghost'],
+      color: 'warning',
+      mode: 'dark',
+      className: 'text-amber-400',
+    },
+    {
+      variant: ['outline', 'ghost'],
+      color: 'success',
+      mode: 'dark',
+      className: 'text-green-400',
+    },
+    {
+      variant: ['outline', 'ghost'],
+      color: 'info',
+      mode: 'dark',
+      className: 'text-sky-400',
+    },
   ],
   defaultVariants: {
-    variant: 'solid',
-    color: 'primary',
-    size: 'md',
+    variant: 'strong',
+    color: 'action',
+    size: 'default',
+    mode: 'light',
   },
 });
 
 export const buttonSpinnerVariants = cva([], {
   variants: {
     variant: {
-      solid: 'accent-white',
-      subtle: [],
+      strong: 'accent-white',
       outline: [],
       ghost: [],
     },
     color: {
-      primary: [],
-      secondary: [],
-      success: [],
+      action: [],
       danger: [],
+      warning: [],
+      success: [],
+      info: [],
+    },
+    mode: {
+      light: [],
+      dark: [],
     },
   },
   compoundVariants: [
+    // --- outline/ghost × color (light mode) ---
+    {
+      variant: ['outline', 'ghost'],
+      color: 'action',
+      className: 'accent-slate-900',
+    },
     {
-      variant: 'subtle',
-      color: 'primary',
-      className: 'accent-blue-950',
+      variant: ['outline', 'ghost'],
+      color: 'danger',
+      className: 'accent-red-600',
     },
     {
-      variant: 'subtle',
-      color: 'secondary',
-      className: 'accent-amber-950',
+      variant: ['outline', 'ghost'],
+      color: 'warning',
+      className: 'accent-amber-600',
     },
     {
-      variant: 'subtle',
+      variant: ['outline', 'ghost'],
       color: 'success',
-      className: 'accent-green-950',
+      className: 'accent-green-600',
     },
     {
-      variant: 'subtle',
-      color: 'danger',
-      className: 'accent-red-950',
+      variant: ['outline', 'ghost'],
+      color: 'info',
+      className: 'accent-sky-600',
     },
+
+    // --- outline/ghost × color × mode: dark ---
     {
       variant: ['outline', 'ghost'],
-      color: 'primary',
-      className: 'accent-blue-500',
+      color: 'action',
+      mode: 'dark',
+      className: 'accent-white',
     },
     {
       variant: ['outline', 'ghost'],
-      color: 'secondary',
-      className: 'accent-amber-600',
+      color: 'danger',
+      mode: 'dark',
+      className: 'accent-red-300',
+    },
+    {
+      variant: ['outline', 'ghost'],
+      color: 'warning',
+      mode: 'dark',
+      className: 'accent-amber-300',
     },
     {
       variant: ['outline', 'ghost'],
       color: 'success',
-      className: 'accent-green-600',
+      mode: 'dark',
+      className: 'accent-green-300',
     },
     {
       variant: ['outline', 'ghost'],
-      color: 'danger',
-      className: 'accent-red-500',
+      color: 'info',
+      mode: 'dark',
+      className: 'accent-sky-300',
     },
   ],
   defaultVariants: {
-    variant: 'solid',
-    color: 'primary',
+    variant: 'strong',
+    color: 'action',
+    mode: 'light',
   },
 });
 
@@ -406,5 +603,17 @@ export const buttonGroupVariants = cva([], {
   },
 });
 
+export const buttonIconVariants = cva([], {
+  variants: {
+    size: {
+      default: 'size-5',
+      small: 'size-4',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
 export type ButtonVariantProps = VariantProps<typeof buttonRootVariants>;
 export type ButtonGroupVariantProps = VariantProps<typeof buttonGroupVariants>;