@cdx-ui/components 0.0.1-alpha.14 → 0.0.1-alpha.15

package/src/components/Select/styles.ts

@@ -1,58 +1,58 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  COLOR_BG_PRIMARY,
+  COLOR_BORDER_DEFAULT,
+  COLOR_TEXT_MUTED,
+  COLOR_TEXT_PRIMARY,
+  DISABLED_CURSOR,
+  DISABLED_OPACITY,
+  RADIUS_SM,
+  RADIUS_MD,
+  SHADOW_SM,
+  SHADOW_MD,
+  SIZE_SCALE,
+  TRANSITION_COLORS,
+} from '../../styles/primitives';
 
 // ── Trigger ─────────────────────────────────────────────────
 
 export const selectTriggerVariants = cva(
   [
     'flex-row items-center justify-between',
-    'rounded-lg',
-    'transition-colors duration-150',
-    'data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none',
+    RADIUS_SM,
+    SHADOW_SM,
+    TRANSITION_COLORS,
+    COLOR_BG_PRIMARY,
+    `border ${COLOR_BORDER_DEFAULT}`,
+    DISABLED_OPACITY,
+    DISABLED_CURSOR,
     'data-[readonly=true]:cursor-default',
-    'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-blue-500 data-[focus-visible=true]:ring-offset-2',
+    'data-[state=open]:border-slate-900',
+    'data-[invalid=true]:border-red-500',
+    'data-[readonly=true]:bg-slate-50',
+    Platform.select({
+      default: 'data-[active=true]:border-slate-300',
+      web: [
+        'data-[hover=true]:border-slate-300 data-[active=true]:data-[hover=true]:border-slate-400',
+        'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-slate-400/50 data-[focus-visible=true]:ring-offset-2',
+        'data-[state=open]:ring-2 data-[state=open]:ring-slate-400/50',
+      ].join(' '),
+    }),
   ],
   {
     variants: {
       variant: {
-        outline: [
-          'bg-white border border-gray-300',
-          Platform.select({
-            default: 'data-[active=true]:border-gray-400',
-            web: 'data-[hover=true]:border-gray-400 data-[active=true]:data-[hover=true]:border-gray-500',
-          }),
-          'data-[state=open]:data-[invalid=false]:border-blue-500',
-          'data-[invalid=true]:border-red-500',
-          'data-[readonly=true]:bg-gray-50',
-        ],
-        filled: [
-          'bg-gray-100 border border-transparent',
-          Platform.select({
-            default: 'data-[active=true]:bg-gray-200',
-            web: 'data-[hover=true]:bg-gray-200 data-[active=true]:data-[hover=true]:bg-gray-300',
-          }),
-          'data-[state=open]:border-blue-500',
-          'data-[invalid=true]:border-red-500 data-[invalid=true]:border',
-          'data-[readonly=true]:bg-gray-200',
-        ],
-        ghost: [
-          'bg-transparent border border-transparent',
-          Platform.select({
-            default: 'data-[active=true]:bg-gray-100',
-            web: 'data-[hover=true]:bg-gray-50 data-[active=true]:data-[hover=true]:bg-gray-100',
-          }),
-          'data-[invalid=true]:border-red-500 data-[invalid=true]:border',
-        ],
+        outline: [],
       },
       size: {
-        sm: 'h-8 px-2.5 gap-1.5',
-        md: 'h-10 px-3 gap-2',
-        lg: 'h-12 px-4 gap-2.5',
+        default: `${SIZE_SCALE.default.height} ${SIZE_SCALE.default.px} ${SIZE_SCALE.default.gap}`,
+        small: `${SIZE_SCALE.small.height} ${SIZE_SCALE.small.px} ${SIZE_SCALE.small.gap}`,
       },
     },
     defaultVariants: {
       variant: 'outline',
-      size: 'md',
+      size: 'default',
     },
   },
 );
@@ -60,23 +60,21 @@ export const selectTriggerVariants = cva(
 // ── Value ───────────────────────────────────────────────────
 
 export const selectValueVariants = cva(
-  ['flex-1', 'data-[placeholder=true]:text-gray-400', 'data-[invalid=true]:text-red-600'],
+  [
+    'flex-1',
+    'data-[placeholder=true]:text-slate-400',
+    'data-[invalid=true]:text-red-600',
+    COLOR_TEXT_PRIMARY,
+  ],
   {
     variants: {
-      variant: {
-        outline: 'text-gray-900',
-        filled: 'text-gray-900',
-        ghost: 'text-gray-900',
-      },
       size: {
-        sm: 'text-sm',
-        md: 'text-base',
-        lg: 'text-lg',
+        default: SIZE_SCALE.default.text,
+        small: SIZE_SCALE.small.text,
       },
     },
     defaultVariants: {
-      variant: 'outline',
-      size: 'md',
+      size: 'default',
     },
   },
 );
@@ -84,23 +82,16 @@ export const selectValueVariants = cva(
 // ── Icon ────────────────────────────────────────────────────
 
 export const selectIconVariants = cva(
-  ['items-center justify-center', 'data-[invalid=true]:text-red-500'],
+  ['items-center justify-center', COLOR_TEXT_MUTED, 'data-[invalid=true]:text-red-500'],
   {
     variants: {
-      variant: {
-        outline: 'text-gray-500',
-        filled: 'text-gray-500',
-        ghost: 'text-gray-400',
-      },
       size: {
-        sm: 'h-4 w-4',
-        md: 'h-5 w-5',
-        lg: 'h-6 w-6',
+        default: 'h-5 w-5',
+        small: 'h-4 w-4',
       },
     },
     defaultVariants: {
-      variant: 'outline',
-      size: 'md',
+      size: 'default',
     },
   },
 );
@@ -108,12 +99,12 @@ export const selectIconVariants = cva(
 // ── Content ─────────────────────────────────────────────────
 
 export const selectContentVariants = cva([
-  'bg-white',
-  'border border-gray-200',
+  COLOR_BG_PRIMARY,
+  `border ${COLOR_BORDER_DEFAULT}`,
   'overflow-hidden',
-  'rounded-lg',
+  RADIUS_MD,
   Platform.select({
-    web: 'shadow-lg',
+    web: SHADOW_MD,
     default: '',
   }),
   'max-h-60',
@@ -127,22 +118,21 @@ export const selectItemVariants = cva(
     'flex-row items-center',
     'transition-colors duration-100',
     'data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none',
-    'data-[state=checked]:bg-blue-50',
+    'data-[state=checked]:bg-slate-50 data-[state=checked]:font-medium',
     Platform.select({
-      default: 'data-[active=true]:bg-gray-100',
-      web: 'data-[hover=true]:bg-gray-100 data-[active=true]:data-[hover=true]:bg-gray-200 data-[highlighted=true]:bg-blue-50',
+      default: 'data-[active=true]:bg-slate-100',
+      web: 'data-[hover=true]:bg-slate-50 data-[active=true]:data-[hover=true]:bg-slate-100 data-[highlighted=true]:bg-slate-50',
     }),
   ],
   {
     variants: {
       size: {
-        sm: 'px-2.5 py-1.5',
-        md: 'px-3 py-2',
-        lg: 'px-4 py-2.5',
+        default: 'px-3 py-2',
+        small: 'px-2.5 py-1.5',
       },
     },
     defaultVariants: {
-      size: 'md',
+      size: 'default',
     },
   },
 );
@@ -150,17 +140,16 @@ export const selectItemVariants = cva(
 // ── ItemLabel ───────────────────────────────────────────────
 
 export const selectItemLabelVariants = cva(
-  ['text-gray-900', 'data-[state=checked]:font-semibold', 'data-[state=checked]:text-blue-700'],
+  [COLOR_TEXT_PRIMARY, 'data-[state=checked]:font-medium'],
   {
     variants: {
       size: {
-        sm: 'text-sm',
-        md: 'text-base',
-        lg: 'text-lg',
+        default: SIZE_SCALE.default.text,
+        small: SIZE_SCALE.small.text,
       },
     },
     defaultVariants: {
-      size: 'md',
+      size: 'default',
     },
   },
 );

package/src/components/Stack/styles.ts

@@ -16,13 +16,7 @@ export const hStackRootVariants = cva([], {
       true: 'flex-row-reverse',
       false: 'flex-row',
     },
-    space: {
-      xs: spaceMap.xs,
-      sm: spaceMap.sm,
-      md: spaceMap.md,
-      lg: spaceMap.lg,
-      xl: spaceMap.xl,
-    },
+    space: spaceMap,
   },
   defaultVariants: {
     reversed: false,
@@ -35,13 +29,7 @@ export const vStackRootVariants = cva([], {
       true: 'flex-col-reverse',
       false: 'flex-col',
     },
-    space: {
-      xs: spaceMap.xs,
-      sm: spaceMap.sm,
-      md: spaceMap.md,
-      lg: spaceMap.lg,
-      xl: spaceMap.xl,
-    },
+    space: spaceMap,
   },
   defaultVariants: {
     reversed: false,

package/src/components/Text/index.tsx

@@ -3,7 +3,8 @@ import { Text as RNText } from 'react-native';
 import { cn } from '@cdx-ui/utils';
 import { textStyle, TextVariantProps } from './styles';
 
-export type TextProps = TextVariantProps & ComponentPropsWithoutRef<typeof RNText>;
+export type TextProps = TextVariantProps &
+  ComponentPropsWithoutRef<typeof RNText> & { className?: string };
 
 export const Text = forwardRef<ComponentRef<typeof RNText>, TextProps>(function Text(
   { className, size = 'md', ...props },

package/src/components/Text/styles.tsx

@@ -1,11 +1,12 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
+import { COLOR_TEXT_PRIMARY } from '../../styles/primitives';
 
 export const textStyle = cva(
   [
-    'text-foreground font-body',
+    `${COLOR_TEXT_PRIMARY} font-normal`,
     Platform.select({
-      web: 'font-sans tracking-sm my-0 bg-transparent border-0 box-border display-inline list-none margin-0 padding-0 position-relative text-start no-underline whitespace-pre-wrap word-wrap-break-word',
+      web: 'font-sans my-0 bg-transparent display-inline no-underline',
       default: '',
     }),
   ],

package/src/styles/index.ts

@@ -0,0 +1 @@
+export * from './primitives';

package/src/styles/primitives.ts

@@ -0,0 +1,107 @@
+// packages/components/src/styles/primitives.ts
+// Semantic constants for CDX UI component styling.
+// See docs/visual-revamp-plan.md for rationale and usage.
+
+// ─── Colors ──────────────────────────────────────────────
+// Surface & background
+export const COLOR_BG_PRIMARY = 'bg-white';
+export const COLOR_BG_SUBTLE = 'bg-slate-50';
+export const COLOR_BG_MUTED = 'bg-slate-100';
+export const COLOR_BG_INVERSE = 'bg-slate-900';
+
+// Border
+export const COLOR_BORDER_DEFAULT = 'border-slate-200';
+export const COLOR_BORDER_STRONG = 'border-slate-300';
+export const COLOR_BORDER_FOCUS = 'border-slate-900';
+export const COLOR_BORDER_INVALID = 'border-red-500';
+
+// Text
+export const COLOR_TEXT_PRIMARY = 'text-slate-900';
+export const COLOR_TEXT_SECONDARY = 'text-slate-500';
+export const COLOR_TEXT_MUTED = 'text-slate-400';
+export const COLOR_TEXT_INVERSE = 'text-white';
+export const COLOR_TEXT_PLACEHOLDER = 'text-slate-400';
+export const COLOR_TEXT_INVALID = 'text-red-600';
+
+// Brand / Action
+export const COLOR_BRAND_DEFAULT = 'bg-slate-900';
+export const COLOR_BRAND_HOVER = 'bg-slate-800';
+export const COLOR_BRAND_ACTIVE = 'bg-slate-700';
+
+// Accent (for checked states, active indicators)
+export const COLOR_ACCENT_DEFAULT = 'bg-slate-900';
+export const COLOR_ACCENT_BORDER = 'border-slate-900';
+
+// Semantic colors (danger, warning, success, info)
+// Kept for Button's 5-color system
+export const SEMANTIC_COLORS = {
+  action: {
+    bg: 'bg-slate-900',
+    bgHover: 'bg-slate-800',
+    bgActive: 'bg-slate-700',
+    border: 'border-slate-900',
+    text: 'text-slate-900',
+    ring: 'ring-slate-400/50',
+  },
+  danger: {
+    bg: 'bg-red-600',
+    bgHover: 'bg-red-700',
+    bgActive: 'bg-red-800',
+    border: 'border-red-600',
+    text: 'text-red-600',
+    ring: 'ring-red-400/50',
+  },
+  warning: {
+    bg: 'bg-amber-500',
+    bgHover: 'bg-amber-600',
+    bgActive: 'bg-amber-700',
+    border: 'border-amber-500',
+    text: 'text-amber-600',
+    ring: 'ring-amber-400/50',
+  },
+  success: {
+    bg: 'bg-green-600',
+    bgHover: 'bg-green-700',
+    bgActive: 'bg-green-800',
+    border: 'border-green-600',
+    text: 'text-green-600',
+    ring: 'ring-green-400/50',
+  },
+  info: {
+    bg: 'bg-sky-500',
+    bgHover: 'bg-sky-600',
+    bgActive: 'bg-sky-700',
+    border: 'border-sky-500',
+    text: 'text-sky-600',
+    ring: 'ring-sky-400/50',
+  },
+} as const;
+
+// ─── Focus ───────────────────────────────────────────────
+export const FOCUS_RING = 'ring-2 ring-slate-400/50 ring-offset-2';
+
+// ─── Radius ──────────────────────────────────────────────
+export const RADIUS_SM = 'rounded-lg'; // buttons, inputs, checkboxes
+export const RADIUS_MD = 'rounded-xl'; // cards, dropdowns, modals
+export const RADIUS_FULL = 'rounded-full'; // pills, avatars, switches
+
+// ─── Shadows ─────────────────────────────────────────────
+export const SHADOW_SM = 'shadow-sm';
+export const SHADOW_MD = 'shadow-md';
+
+// ─── Sizing ──────────────────────────────────────────────
+// Unified size scale for interactive/form components (Button, Input, Select, Checkbox).
+// Only two sizes: 'default' (regular) and 'small' (compact).
+// NOTE: Text and Heading use a separate typography scale (xs/sm/md/lg/xl) — not this.
+export const SIZE_SCALE = {
+  default: { height: 'h-10', px: 'px-4', gap: 'gap-2', text: 'text-base' },
+  small: { height: 'h-8', px: 'px-3', gap: 'gap-1.5', text: 'text-sm' },
+} as const;
+
+// ─── Transitions ─────────────────────────────────────────
+export const TRANSITION_COLORS = 'transition-colors duration-150';
+
+// ─── Disabled ────────────────────────────────────────────
+export const DISABLED_OPACITY = 'data-[disabled=true]:opacity-50';
+export const DISABLED_CURSOR =
+  'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none';