@cdx-ui/components 0.0.1-alpha.32 → 0.0.1-alpha.34

package/src/components/Button/styles.ts

@@ -1,69 +1,25 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
-import {
-  COLOR_BORDER_DEFAULT,
-  DISABLED_CURSOR,
-  DISABLED_OPACITY,
-  RADIUS_SM,
-  TRANSITION_COLORS,
-} from '../../styles/primitives';
-import {
-  sharedFilledForegroundTextCompounds,
-  sharedFilledSurfaceCompounds,
-  sharedGhostSurfaceCompounds,
-  sharedOutlineGhostForegroundTextCompounds,
-} from './buttonSharedVariants';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
 
-const buttonStrongSurfaceCompounds = sharedFilledSurfaceCompounds.map((c) => ({
-  variant: 'strong' as const,
-  ...c,
-}));
-
-const buttonGhostSurfaceCompounds = sharedGhostSurfaceCompounds.map((c) => ({
-  variant: 'ghost' as const,
-  ...c,
-}));
-
-const buttonStrongForegroundTextCompounds = sharedFilledForegroundTextCompounds.map((c) => ({
-  variant: 'strong' as const,
-  ...c,
-}));
-
-const buttonOutlineGhostForegroundTextCompounds = sharedOutlineGhostForegroundTextCompounds.map(
-  (c) => ({
-    variant: ['outline', 'ghost'] as ('outline' | 'ghost')[],
-    ...c,
-  }),
-);
-
-// TODO: Split into 2 files
-// TODO: Create cva wrapper
+// TODO: Validate that `dark:` syntax works with Uniwind `ScopedTheme`
 
 export const buttonRootVariants = cva(
   [
     'flex-row items-center justify-center',
-    RADIUS_SM,
+    'rounded-[var(--border-radius-button)]',
     'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
     TRANSITION_COLORS,
-    DISABLED_OPACITY,
+    'data-[disabled=true]:opacity-[--opacity-disabled]',
     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',
+    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[--color-stroke-focus] web:data-[focus-visible=true]:ring-offset-2',
   ],
   {
     variants: {
       variant: {
-        strong: [],
-        outline: [
-          '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-slate-50',
-          'data-[active=true]:bg-slate-100',
-        ],
+        strong: ['border-b-1 border-black/75'], // TODO: Replace with token
+        outline: ['bg-transparent', 'border border-stroke-primary'],
+        ghost: ['bg-transparent'],
       },
       color: {
         action: [],
@@ -76,145 +32,182 @@ export const buttonRootVariants = cva(
         default: 'h-10 px-4 gap-2',
         small: 'h-8 px-3 gap-1.5',
       },
-      mode: {
-        light: [],
-        dark: [],
-      },
       fullWidth: {
         true: 'w-full',
         false: '',
       },
     },
     compoundVariants: [
-      ...buttonStrongSurfaceCompounds,
-
-      // --- outline × color (light mode) ---
+      // ── strong × color (filled surface) ──────────────────────────────
       {
-        variant: 'outline',
+        variant: 'strong',
         color: 'action',
         className: [
-          'border-slate-300',
+          'bg-surface-action-strong',
           Platform.select({
-            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',
+            default: 'data-[active=true]:bg-surface-action-strong-active',
+            web: 'data-[hover=true]:bg-surface-action-strong-hover data-[active=true]:data-[hover=true]:bg-surface-action-strong-active',
           }),
         ],
       },
       {
-        variant: 'outline',
+        variant: 'strong',
         color: 'danger',
         className: [
-          'border-red-600',
+          'bg-surface-danger-strong',
           Platform.select({
-            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',
+            default: 'data-[active=true]:bg-surface-danger-strong-active',
+            web: 'data-[hover=true]:bg-surface-danger-strong-hover data-[active=true]:data-[hover=true]:bg-surface-danger-strong-active',
           }),
         ],
       },
       {
-        variant: 'outline',
+        variant: 'strong',
         color: 'warning',
         className: [
-          'border-amber-500',
+          'bg-surface-warning-strong',
           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-amber-600',
+            web: 'data-[hover=true]:bg-amber-500 data-[active=true]:data-[hover=true]:bg-amber-600',
           }),
         ],
       },
       {
-        variant: 'outline',
+        variant: 'strong',
         color: 'success',
         className: [
-          'border-green-600',
+          'bg-surface-success-strong',
           Platform.select({
-            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',
+            default: 'data-[active=true]:bg-green-800',
+            web: 'data-[hover=true]:bg-green-700 data-[active=true]:data-[hover=true]:bg-green-800',
           }),
         ],
       },
       {
-        variant: 'outline',
+        variant: 'strong',
         color: 'info',
         className: [
-          'border-sky-500',
+          'bg-surface-info-strong',
           Platform.select({
-            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',
+            default: 'data-[active=true]:bg-sky-700',
+            web: 'data-[hover=true]:bg-sky-600 data-[active=true]:data-[hover=true]:bg-sky-700',
           }),
         ],
       },
 
-      // --- outline × action × mode: dark ---
+      // ── outline × color (border + hover/active surface) ─────────────
       {
         variant: 'outline',
         color: 'action',
-        mode: 'dark',
         className: [
-          'bg-transparent border-slate-700',
+          'border-stroke-action',
           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',
+            default: 'data-[active=true]:bg-surface-action-subtle-active',
+            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-subtle-active',
           }),
         ],
       },
-      // --- outline × semantic colors × mode: dark ---
       {
         variant: 'outline',
         color: 'danger',
-        mode: 'dark',
         className: [
-          'bg-transparent border-red-500',
+          'border-stroke-danger',
           Platform.select({
-            default: 'data-[active=true]:bg-red-950',
-            web: 'data-[hover=true]:bg-red-950/50 data-[active=true]:data-[hover=true]:bg-red-950',
+            default: 'data-[active=true]:bg-surface-danger-subtle-active',
+            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-subtle-active',
           }),
         ],
       },
       {
         variant: 'outline',
         color: 'warning',
-        mode: 'dark',
         className: [
-          'bg-transparent border-amber-500',
+          'border-stroke-warning',
           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',
+            default: 'data-[active=true]:bg-surface-warning-subtle',
+            web: 'data-[hover=true]:bg-surface-warning-tint data-[active=true]:data-[hover=true]:bg-surface-warning-subtle',
           }),
         ],
       },
       {
         variant: 'outline',
         color: 'success',
-        mode: 'dark',
         className: [
-          'bg-transparent border-green-500',
+          'border-stroke-success',
           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',
+            default: 'data-[active=true]:bg-surface-success-subtle',
+            web: 'data-[hover=true]:bg-surface-success-tint data-[active=true]:data-[hover=true]:bg-surface-success-subtle',
           }),
         ],
       },
       {
         variant: 'outline',
         color: 'info',
-        mode: 'dark',
         className: [
-          'bg-transparent border-sky-500',
+          'border-stroke-info',
           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',
+            default: 'data-[active=true]:bg-surface-info-subtle',
+            web: 'data-[hover=true]:bg-surface-info-tint data-[active=true]:data-[hover=true]:bg-surface-info-subtle',
           }),
         ],
       },
 
-      ...buttonGhostSurfaceCompounds,
+      // ── ghost × color (hover/active surface fills) ──────────────────
+      {
+        variant: 'ghost',
+        color: 'action',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-action-subtle-active',
+            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-subtle-active',
+          }),
+        ],
+      },
+      {
+        variant: 'ghost',
+        color: 'danger',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-danger-subtle-active',
+            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-subtle-active',
+          }),
+        ],
+      },
+      {
+        variant: 'ghost',
+        color: 'warning',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-warning-subtle',
+            web: 'data-[hover=true]:bg-surface-warning-tint data-[active=true]:data-[hover=true]:bg-surface-warning-subtle',
+          }),
+        ],
+      },
+      {
+        variant: 'ghost',
+        color: 'success',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-success-subtle',
+            web: 'data-[hover=true]:bg-surface-success-tint data-[active=true]:data-[hover=true]:bg-surface-success-subtle',
+          }),
+        ],
+      },
+      {
+        variant: 'ghost',
+        color: 'info',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-info-subtle',
+            web: 'data-[hover=true]:bg-surface-info-tint data-[active=true]:data-[hover=true]:bg-surface-info-subtle',
+          }),
+        ],
+      },
     ],
     defaultVariants: {
       variant: 'strong',
       color: 'action',
       size: 'default',
-      mode: 'light',
       fullWidth: false,
     },
   },
@@ -238,27 +231,33 @@ export const buttonTextVariants = cva(['font-medium', 'text-center'], {
       default: 'text-base',
       small: 'text-sm',
     },
-    mode: {
-      light: [],
-      dark: [],
-    },
   },
   compoundVariants: [
-    ...buttonStrongForegroundTextCompounds,
-    ...buttonOutlineGhostForegroundTextCompounds,
+    // ── 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' },
+
+    // ── outline/ghost × color (transparent foreground text) ──────────
+    { 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: 'strong',
     color: 'action',
     size: 'default',
-    mode: 'light',
   },
 });
 
 export const buttonSpinnerVariants = cva([], {
   variants: {
     variant: {
-      strong: 'accent-white',
+      strong: [],
       outline: [],
       ghost: [],
     },
@@ -269,75 +268,65 @@ export const buttonSpinnerVariants = cva([], {
       success: [],
       info: [],
     },
-    mode: {
-      light: [],
-      dark: [],
-    },
   },
   compoundVariants: [
-    // --- outline/ghost × color (light mode) ---
+    // ── strong × color ───────────────────────────────────────────────
     {
-      variant: ['outline', 'ghost'],
+      variant: 'strong',
       color: 'action',
-      className: 'accent-slate-900',
+      className: 'accent-[var(--color-content-action-on-strong)]',
     },
     {
-      variant: ['outline', 'ghost'],
+      variant: 'strong',
       color: 'danger',
-      className: 'accent-red-600',
+      className: 'accent-[var(--color-content-danger-on-strong)]',
     },
     {
-      variant: ['outline', 'ghost'],
+      variant: 'strong',
       color: 'warning',
-      className: 'accent-amber-600',
+      className: 'accent-[var(--color-content-warning-on-strong)]',
     },
     {
-      variant: ['outline', 'ghost'],
+      variant: 'strong',
       color: 'success',
-      className: 'accent-green-600',
+      className: 'accent-[var(--color-content-success-on-strong)]',
     },
     {
-      variant: ['outline', 'ghost'],
+      variant: 'strong',
       color: 'info',
-      className: 'accent-sky-600',
+      className: 'accent-[var(--color-content-info-on-strong)]',
     },
 
-    // --- outline/ghost × color × mode: dark ---
+    // ── outline/ghost × color ────────────────────────────────────────
     {
       variant: ['outline', 'ghost'],
       color: 'action',
-      mode: 'dark',
-      className: 'accent-white',
+      className: 'accent-[var(--color-content-action)]',
     },
     {
       variant: ['outline', 'ghost'],
       color: 'danger',
-      mode: 'dark',
-      className: 'accent-red-300',
+      className: 'accent-[var(--color-content-danger)]',
     },
     {
       variant: ['outline', 'ghost'],
       color: 'warning',
-      mode: 'dark',
-      className: 'accent-amber-300',
+      className: 'accent-[var(--color-content-warning)]',
     },
     {
       variant: ['outline', 'ghost'],
       color: 'success',
-      mode: 'dark',
-      className: 'accent-green-300',
+      className: 'accent-[var(--color-content-success)]',
     },
     {
       variant: ['outline', 'ghost'],
       color: 'info',
-      mode: 'dark',
-      className: 'accent-sky-300',
+      className: 'accent-[var(--color-content-info)]',
     },
   ],
   defaultVariants: {
     variant: 'strong',
     color: 'action',
-    mode: 'light',
   },
 });
 

package/src/components/Heading/styles.tsx

@@ -1,10 +1,9 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { COLOR_TEXT_PRIMARY } from '../../styles/primitives';
 
 export const headingStyle = cva(
   [
-    `${COLOR_TEXT_PRIMARY} font-semibold tracking-tight my-0`,
+    `text-content-primary font-semibold tracking-tight my-0`,
     Platform.select({
       web: 'font-sans bg-transparent display-inline no-underline',
       default: '',
@@ -13,11 +12,11 @@ export const headingStyle = cva(
   {
     variants: {
       size: {
-        xl: 'text-6xl',
-        lg: 'text-5xl',
-        md: 'text-4xl',
-        sm: 'text-3xl',
-        xs: 'text-2xl',
+        xl: 'heading-xl',
+        lg: 'heading-lg',
+        md: 'heading-md',
+        sm: 'heading-sm',
+        xs: 'heading-xs',
       },
     },
   },

package/src/components/IconButton/index.tsx

@@ -54,7 +54,6 @@ const IconButtonRoot = forwardRef<View, IconButtonProps>(
     {
       variant = 'solid',
       size = 'default',
-      mode = 'light',
       className,
       style,
       as: IconComponent,
@@ -64,11 +63,11 @@ const IconButtonRoot = forwardRef<View, IconButtonProps>(
     },
     ref,
   ) => {
-    const rootClassName = cn(iconButtonRootVariants({ variant, size, mode }), className);
+    const rootClassName = cn(iconButtonRootVariants({ variant, size }), className);
 
     const glyphClassName = cn(
       iconButtonGlyphVariants({ size }),
-      iconButtonIconColorVariants({ variant, mode }),
+      iconButtonIconColorVariants(),
       iconClassName,
     );
 

package/src/components/IconButton/styles.ts

@@ -1,98 +1,43 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
-import {
-  COLOR_BORDER_DEFAULT,
-  DISABLED_CURSOR,
-  DISABLED_OPACITY,
-  RADIUS_FULL,
-  TRANSITION_COLORS,
-} from '../../styles/primitives';
-import {
-  type SharedButtonSemanticColor,
-  sharedGhostSurfaceCompounds,
-  sharedOutlineGhostForegroundTextCompounds,
-} from '../Button/buttonSharedVariants';
-
-function actionOnlyCompounds<T extends { color: SharedButtonSemanticColor }>(
-  compounds: T[],
-): Omit<T, 'color'>[] {
-  return compounds
-    .filter((c) => c.color === 'action')
-    .map((c) => {
-      const { color, ...rest } = c;
-      void color;
-      return rest;
-    });
-}
-
-/** Dark-mode hover/active surface for ghost (solid uses a separate compound with border). */
-const iconButtonDarkGhostSurfaceCompounds = actionOnlyCompounds(sharedGhostSurfaceCompounds).map(
-  (c) => ({
-    variant: 'ghost' as const,
-    ...c,
-  }),
-);
-
-const iconButtonForegroundTextCompounds = actionOnlyCompounds(
-  sharedOutlineGhostForegroundTextCompounds,
-).map((c) => ({
-  variant: ['solid', 'ghost'] as ('solid' | 'ghost')[],
-  ...c,
-}));
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
 
 export const iconButtonRootVariants = cva(
   [
     'flex items-center justify-center',
-    RADIUS_FULL,
+    'rounded-[var(--border-radius-round)]',
     'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
     TRANSITION_COLORS,
-    DISABLED_OPACITY,
+    'data-[disabled=true]:opacity-[--opacity-disabled]',
     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',
+    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[--color-stroke-ring] web:data-[focus-visible=true]:ring-offset-2',
   ],
   {
     variants: {
       variant: {
-        /** Same surface as ghost, with a light gray border (aligned with Button `outline`). */
         solid: [
-          'bg-transparent',
-          `border ${COLOR_BORDER_DEFAULT}`,
-          'data-[hover=true]:bg-slate-50',
-          'data-[active=true]:bg-slate-100',
+          'bg-surface-primary border border-stroke-secondary',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-primary-active',
+            web: 'data-[hover=true]:bg-surface-primary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
+          }),
         ],
         ghost: [
           'bg-transparent',
-          'data-[hover=true]:bg-slate-50',
-          'data-[active=true]:bg-slate-100',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-primary-active',
+            web: 'data-[hover=true]:bg-surface-primary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
+          }),
         ],
       },
       size: {
-        default: 'h-10 w-10 min-w-10 shrink-0 p-0',
-        small: 'h-8 w-8 min-w-8 shrink-0 p-0',
-      },
-      mode: {
-        light: [],
-        dark: [],
+        default: 'h-11 w-11 min-w-11 shrink-0 p-2.5',
+        small: 'h-8 w-8 min-w-8 shrink-0 p-1.5',
       },
     },
-    compoundVariants: [
-      ...iconButtonDarkGhostSurfaceCompounds,
-      {
-        variant: 'solid',
-        mode: 'dark',
-        className: [
-          'border-slate-700',
-          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',
-          }),
-        ],
-      },
-    ],
     defaultVariants: {
       variant: 'solid',
       size: 'default',
-      mode: 'light',
     },
   },
 );
@@ -100,8 +45,8 @@ export const iconButtonRootVariants = cva(
 export const iconButtonGlyphVariants = cva([], {
   variants: {
     size: {
-      default: 'size-5',
-      small: 'size-4',
+      default: 'size-6',
+      small: 'size-5',
     },
   },
   defaultVariants: {
@@ -109,23 +54,6 @@ export const iconButtonGlyphVariants = cva([], {
   },
 });
 
-/** Icon fill aligned with Button outline/ghost action label colors (solid matches ghost). */
-export const iconButtonIconColorVariants = cva([], {
-  variants: {
-    variant: {
-      solid: [],
-      ghost: [],
-    },
-    mode: {
-      light: [],
-      dark: [],
-    },
-  },
-  compoundVariants: [...iconButtonForegroundTextCompounds],
-  defaultVariants: {
-    variant: 'solid',
-    mode: 'light',
-  },
-});
+export const iconButtonIconColorVariants = cva(['text-content-primary']);
 
 export type IconButtonVariantProps = VariantProps<typeof iconButtonRootVariants>;