@spavn/ui 0.0.1 → 0.0.2

package/src/lib/types.ts

@@ -0,0 +1,370 @@
+/**
+ * Shared types and utilities for the Spavn UI design system
+ */
+
+/** Size scale used across components */
+export type SpavnSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl'
+
+/** Extended color palette */
+export type SpavnColor =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'destructive'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'amber'
+  | 'blue'
+  | 'green'
+  | 'purple'
+  | 'pink'
+  | 'orange'
+
+/** Border radius scale */
+export type SpavnRadius = 'none' | 'sm' | 'md' | 'lg' | 'full'
+
+/** Radius class map */
+export const radiusMap: Record<SpavnRadius, string> = {
+  none: 'rounded-none',
+  sm: 'rounded-sm',
+  md: 'rounded-md',
+  lg: 'rounded-lg',
+  full: 'rounded-full',
+}
+
+/**
+ * Returns Tailwind classes for a given color and style combination.
+ * Used by components to apply color theming outside of CVA.
+ * Returns empty string for 'default' color (component uses its own defaults).
+ */
+export function colorClasses(
+  color: SpavnColor,
+  style: 'solid' | 'soft' | 'surface' | 'outline'
+): string {
+  if (color === 'default') return ''
+
+  const colorMap: Record<Exclude<SpavnColor, 'default'>, Record<typeof style, string>> = {
+    primary: {
+      solid: 'bg-primary text-primary-foreground',
+      soft: 'bg-primary-soft text-primary border-primary/20',
+      surface: 'bg-primary-soft text-primary border border-primary/30',
+      outline: 'text-primary border border-primary/50',
+    },
+    secondary: {
+      solid: 'bg-secondary text-secondary-foreground',
+      soft: 'bg-secondary-soft text-secondary-foreground border-secondary/20',
+      surface: 'bg-secondary-soft text-secondary-foreground border border-secondary/30',
+      outline: 'text-secondary-foreground border border-secondary/50',
+    },
+    destructive: {
+      solid: 'bg-destructive text-destructive-foreground',
+      soft: 'bg-destructive-soft text-destructive border-destructive/20',
+      surface: 'bg-destructive-soft text-destructive border border-destructive/30',
+      outline: 'text-destructive border border-destructive/50',
+    },
+    success: {
+      solid: 'bg-success text-success-foreground',
+      soft: 'bg-success-soft text-success border-success/20',
+      surface: 'bg-success-soft text-success border border-success/30',
+      outline: 'text-success border border-success/50',
+    },
+    info: {
+      solid: 'bg-info text-info-foreground',
+      soft: 'bg-info-soft text-info border-info/20',
+      surface: 'bg-info-soft text-info border border-info/30',
+      outline: 'text-info border border-info/50',
+    },
+    warning: {
+      solid: 'bg-warning text-warning-foreground',
+      soft: 'bg-warning-soft text-warning border-warning/20',
+      surface: 'bg-warning-soft text-warning border border-warning/30',
+      outline: 'text-warning border border-warning/50',
+    },
+    amber: {
+      solid: 'bg-amber text-amber-foreground',
+      soft: 'bg-amber-soft text-amber border-amber/20',
+      surface: 'bg-amber-soft text-amber border border-amber/30',
+      outline: 'text-amber border border-amber/50',
+    },
+    blue: {
+      solid: 'bg-blue text-blue-foreground',
+      soft: 'bg-blue-soft text-blue border-blue/20',
+      surface: 'bg-blue-soft text-blue border border-blue/30',
+      outline: 'text-blue border border-blue/50',
+    },
+    green: {
+      solid: 'bg-green text-green-foreground',
+      soft: 'bg-green-soft text-green border-green/20',
+      surface: 'bg-green-soft text-green border border-green/30',
+      outline: 'text-green border border-green/50',
+    },
+    purple: {
+      solid: 'bg-purple text-purple-foreground',
+      soft: 'bg-purple-soft text-purple border-purple/20',
+      surface: 'bg-purple-soft text-purple border border-purple/30',
+      outline: 'text-purple border border-purple/50',
+    },
+    pink: {
+      solid: 'bg-pink text-pink-foreground',
+      soft: 'bg-pink-soft text-pink border-pink/20',
+      surface: 'bg-pink-soft text-pink border border-pink/30',
+      outline: 'text-pink border border-pink/50',
+    },
+    orange: {
+      solid: 'bg-orange text-orange-foreground',
+      soft: 'bg-orange-soft text-orange border-orange/20',
+      surface: 'bg-orange-soft text-orange border border-orange/30',
+      outline: 'text-orange border border-orange/50',
+    },
+  }
+
+  return colorMap[color][style]
+}
+
+type ColorKey = Exclude<SpavnColor, 'default'>
+
+/**
+ * Static color class maps for Tailwind scanner detection.
+ * NEVER use template literals for Tailwind classes — the scanner cannot detect them.
+ */
+
+/** Background color classes */
+export const colorBg: Record<ColorKey, string> = {
+  primary: 'bg-primary',
+  secondary: 'bg-secondary',
+  destructive: 'bg-destructive',
+  success: 'bg-success',
+  info: 'bg-info',
+  warning: 'bg-warning',
+  amber: 'bg-amber',
+  blue: 'bg-blue',
+  green: 'bg-green',
+  purple: 'bg-purple',
+  pink: 'bg-pink',
+  orange: 'bg-orange',
+}
+
+/** Text color classes */
+export const colorText: Record<ColorKey, string> = {
+  primary: 'text-primary',
+  secondary: 'text-secondary-foreground',
+  destructive: 'text-destructive',
+  success: 'text-success',
+  info: 'text-info',
+  warning: 'text-warning',
+  amber: 'text-amber',
+  blue: 'text-blue',
+  green: 'text-green',
+  purple: 'text-purple',
+  pink: 'text-pink',
+  orange: 'text-orange',
+}
+
+/** Border color classes */
+export const colorBorder: Record<ColorKey, string> = {
+  primary: 'border-primary',
+  secondary: 'border-secondary',
+  destructive: 'border-destructive',
+  success: 'border-success',
+  info: 'border-info',
+  warning: 'border-warning',
+  amber: 'border-amber',
+  blue: 'border-blue',
+  green: 'border-green',
+  purple: 'border-purple',
+  pink: 'border-pink',
+  orange: 'border-orange',
+}
+
+/** Foreground text classes (for use on colored backgrounds) */
+export const colorTextForeground: Record<ColorKey, string> = {
+  primary: 'text-primary-foreground',
+  secondary: 'text-secondary-foreground',
+  destructive: 'text-destructive-foreground',
+  success: 'text-success-foreground',
+  info: 'text-info-foreground',
+  warning: 'text-warning-foreground',
+  amber: 'text-amber-foreground',
+  blue: 'text-blue-foreground',
+  green: 'text-green-foreground',
+  purple: 'text-purple-foreground',
+  pink: 'text-pink-foreground',
+  orange: 'text-orange-foreground',
+}
+
+/** Soft background classes */
+export const colorBgSoft: Record<ColorKey, string> = {
+  primary: 'bg-primary-soft',
+  secondary: 'bg-secondary-soft',
+  destructive: 'bg-destructive-soft',
+  success: 'bg-success-soft',
+  info: 'bg-info-soft',
+  warning: 'bg-warning-soft',
+  amber: 'bg-amber-soft',
+  blue: 'bg-blue-soft',
+  green: 'bg-green-soft',
+  purple: 'bg-purple-soft',
+  pink: 'bg-pink-soft',
+  orange: 'bg-orange-soft',
+}
+
+/** Hover classes for solid button variants */
+export const colorHoverSolid: Record<ColorKey, string> = {
+  primary: 'hover:bg-primary/90 active:bg-primary/95',
+  secondary: 'hover:bg-secondary/80 active:bg-secondary/70',
+  destructive: 'hover:bg-destructive/90 active:bg-destructive/95',
+  success: 'hover:bg-success/90 active:bg-success/95',
+  info: 'hover:bg-info/90 active:bg-info/95',
+  warning: 'hover:bg-warning/90 active:bg-warning/95',
+  amber: 'hover:bg-amber/90 active:bg-amber/95',
+  blue: 'hover:bg-blue/90 active:bg-blue/95',
+  green: 'hover:bg-green/90 active:bg-green/95',
+  purple: 'hover:bg-purple/90 active:bg-purple/95',
+  pink: 'hover:bg-pink/90 active:bg-pink/95',
+  orange: 'hover:bg-orange/90 active:bg-orange/95',
+}
+
+/** Hover classes for outline button variant */
+export const colorHoverOutline: Record<ColorKey, string> = {
+  primary: 'hover:bg-primary/10 hover:text-primary hover:border-primary/50 active:bg-primary/20',
+  secondary: 'hover:bg-secondary/10 hover:text-secondary-foreground hover:border-secondary/50 active:bg-secondary/20',
+  destructive: 'hover:bg-destructive/10 hover:text-destructive hover:border-destructive/50 active:bg-destructive/20',
+  success: 'hover:bg-success/10 hover:text-success hover:border-success/50 active:bg-success/20',
+  info: 'hover:bg-info/10 hover:text-info hover:border-info/50 active:bg-info/20',
+  warning: 'hover:bg-warning/10 hover:text-warning hover:border-warning/50 active:bg-warning/20',
+  amber: 'hover:bg-amber/10 hover:text-amber hover:border-amber/50 active:bg-amber/20',
+  blue: 'hover:bg-blue/10 hover:text-blue hover:border-blue/50 active:bg-blue/20',
+  green: 'hover:bg-green/10 hover:text-green hover:border-green/50 active:bg-green/20',
+  purple: 'hover:bg-purple/10 hover:text-purple hover:border-purple/50 active:bg-purple/20',
+  pink: 'hover:bg-pink/10 hover:text-pink hover:border-pink/50 active:bg-pink/20',
+  orange: 'hover:bg-orange/10 hover:text-orange hover:border-orange/50 active:bg-orange/20',
+}
+
+/** Hover classes for ghost/plain button variants */
+export const colorHoverGhost: Record<ColorKey, string> = {
+  primary: 'hover:bg-primary-soft hover:text-primary active:bg-primary-soft/80',
+  secondary: 'hover:bg-secondary-soft hover:text-secondary-foreground active:bg-secondary-soft/80',
+  destructive: 'hover:bg-destructive-soft hover:text-destructive active:bg-destructive-soft/80',
+  success: 'hover:bg-success-soft hover:text-success active:bg-success-soft/80',
+  info: 'hover:bg-info-soft hover:text-info active:bg-info-soft/80',
+  warning: 'hover:bg-warning-soft hover:text-warning active:bg-warning-soft/80',
+  amber: 'hover:bg-amber-soft hover:text-amber active:bg-amber-soft/80',
+  blue: 'hover:bg-blue-soft hover:text-blue active:bg-blue-soft/80',
+  green: 'hover:bg-green-soft hover:text-green active:bg-green-soft/80',
+  purple: 'hover:bg-purple-soft hover:text-purple active:bg-purple-soft/80',
+  pink: 'hover:bg-pink-soft hover:text-pink active:bg-pink-soft/80',
+  orange: 'hover:bg-orange-soft hover:text-orange active:bg-orange-soft/80',
+}
+
+/** Hover classes for link variant */
+export const colorHoverLink: Record<ColorKey, string> = {
+  primary: 'hover:text-primary/80',
+  secondary: 'hover:text-secondary-foreground/80',
+  destructive: 'hover:text-destructive/80',
+  success: 'hover:text-success/80',
+  info: 'hover:text-info/80',
+  warning: 'hover:text-warning/80',
+  amber: 'hover:text-amber/80',
+  blue: 'hover:text-blue/80',
+  green: 'hover:text-green/80',
+  purple: 'hover:text-purple/80',
+  pink: 'hover:text-pink/80',
+  orange: 'hover:text-orange/80',
+}
+
+/** Checked state for Switch */
+export const colorCheckedBg: Record<ColorKey, string> = {
+  primary: 'data-[state=checked]:bg-primary',
+  secondary: 'data-[state=checked]:bg-secondary',
+  destructive: 'data-[state=checked]:bg-destructive',
+  success: 'data-[state=checked]:bg-success',
+  info: 'data-[state=checked]:bg-info',
+  warning: 'data-[state=checked]:bg-warning',
+  amber: 'data-[state=checked]:bg-amber',
+  blue: 'data-[state=checked]:bg-blue',
+  green: 'data-[state=checked]:bg-green',
+  purple: 'data-[state=checked]:bg-purple',
+  pink: 'data-[state=checked]:bg-pink',
+  orange: 'data-[state=checked]:bg-orange',
+}
+
+/** Checked state for Checkbox (border + bg + text) */
+export const colorCheckedFull: Record<ColorKey, string> = {
+  primary: 'border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+  secondary: 'border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground',
+  destructive: 'border-destructive data-[state=checked]:bg-destructive data-[state=checked]:text-destructive-foreground',
+  success: 'border-success data-[state=checked]:bg-success data-[state=checked]:text-success-foreground',
+  info: 'border-info data-[state=checked]:bg-info data-[state=checked]:text-info-foreground',
+  warning: 'border-warning data-[state=checked]:bg-warning data-[state=checked]:text-warning-foreground',
+  amber: 'border-amber data-[state=checked]:bg-amber data-[state=checked]:text-amber-foreground',
+  blue: 'border-blue data-[state=checked]:bg-blue data-[state=checked]:text-blue-foreground',
+  green: 'border-green data-[state=checked]:bg-green data-[state=checked]:text-green-foreground',
+  purple: 'border-purple data-[state=checked]:bg-purple data-[state=checked]:text-purple-foreground',
+  pink: 'border-pink data-[state=checked]:bg-pink data-[state=checked]:text-pink-foreground',
+  orange: 'border-orange data-[state=checked]:bg-orange data-[state=checked]:text-orange-foreground',
+}
+
+/** Radio border + text */
+export const colorBorderText: Record<ColorKey, string> = {
+  primary: 'border-primary text-primary',
+  secondary: 'border-secondary text-secondary',
+  destructive: 'border-destructive text-destructive',
+  success: 'border-success text-success',
+  info: 'border-info text-info',
+  warning: 'border-warning text-warning',
+  amber: 'border-amber text-amber',
+  blue: 'border-blue text-blue',
+  green: 'border-green text-green',
+  purple: 'border-purple text-purple',
+  pink: 'border-pink text-pink',
+  orange: 'border-orange text-orange',
+}
+
+/** Toggle on state */
+export const colorOnState: Record<ColorKey, string> = {
+  primary: 'data-[state=on]:bg-primary data-[state=on]:text-primary-foreground',
+  secondary: 'data-[state=on]:bg-secondary data-[state=on]:text-secondary-foreground',
+  destructive: 'data-[state=on]:bg-destructive data-[state=on]:text-destructive-foreground',
+  success: 'data-[state=on]:bg-success data-[state=on]:text-success-foreground',
+  info: 'data-[state=on]:bg-info data-[state=on]:text-info-foreground',
+  warning: 'data-[state=on]:bg-warning data-[state=on]:text-warning-foreground',
+  amber: 'data-[state=on]:bg-amber data-[state=on]:text-amber-foreground',
+  blue: 'data-[state=on]:bg-blue data-[state=on]:text-blue-foreground',
+  green: 'data-[state=on]:bg-green data-[state=on]:text-green-foreground',
+  purple: 'data-[state=on]:bg-purple data-[state=on]:text-purple-foreground',
+  pink: 'data-[state=on]:bg-pink data-[state=on]:text-pink-foreground',
+  orange: 'data-[state=on]:bg-orange data-[state=on]:text-orange-foreground',
+}
+
+/** Tabs active state for underline variant */
+export const colorActiveUnderline: Record<ColorKey, string> = {
+  primary: 'data-[state=active]:border-primary',
+  secondary: 'data-[state=active]:border-secondary',
+  destructive: 'data-[state=active]:border-destructive',
+  success: 'data-[state=active]:border-success',
+  info: 'data-[state=active]:border-info',
+  warning: 'data-[state=active]:border-warning',
+  amber: 'data-[state=active]:border-amber',
+  blue: 'data-[state=active]:border-blue',
+  green: 'data-[state=active]:border-green',
+  purple: 'data-[state=active]:border-purple',
+  pink: 'data-[state=active]:border-pink',
+  orange: 'data-[state=active]:border-orange',
+}
+
+/** Tabs active state for pills/enclosed variant */
+export const colorActivePill: Record<ColorKey, string> = {
+  primary: 'data-[state=active]:bg-primary data-[state=active]:text-primary-foreground',
+  secondary: 'data-[state=active]:bg-secondary data-[state=active]:text-secondary-foreground',
+  destructive: 'data-[state=active]:bg-destructive data-[state=active]:text-destructive-foreground',
+  success: 'data-[state=active]:bg-success data-[state=active]:text-success-foreground',
+  info: 'data-[state=active]:bg-info data-[state=active]:text-info-foreground',
+  warning: 'data-[state=active]:bg-warning data-[state=active]:text-warning-foreground',
+  amber: 'data-[state=active]:bg-amber data-[state=active]:text-amber-foreground',
+  blue: 'data-[state=active]:bg-blue data-[state=active]:text-blue-foreground',
+  green: 'data-[state=active]:bg-green data-[state=active]:text-green-foreground',
+  purple: 'data-[state=active]:bg-purple data-[state=active]:text-purple-foreground',
+  pink: 'data-[state=active]:bg-pink data-[state=active]:text-pink-foreground',
+  orange: 'data-[state=active]:bg-orange data-[state=active]:text-orange-foreground',
+}

package/src/lib/utils.ts

@@ -1,10 +1,31 @@
 import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { extendTailwindMerge } from 'tailwind-merge'
+
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      colors: [
+        // Extended palette colors
+        'info', 'info-foreground', 'info-soft',
+        'warning', 'warning-foreground', 'warning-soft',
+        'amber', 'amber-foreground', 'amber-soft',
+        'blue', 'blue-foreground', 'blue-soft',
+        'green', 'green-foreground', 'green-soft',
+        'purple', 'purple-foreground', 'purple-soft',
+        'pink', 'pink-foreground', 'pink-soft',
+        'orange', 'orange-foreground', 'orange-soft',
+        // Soft variants for semantic colors
+        'primary-soft', 'secondary-soft', 'destructive-soft', 'success-soft',
+      ],
+    },
+  },
+})
 
 /**
  * Utility function to merge Tailwind CSS classes
  * Combines clsx for conditional classes with tailwind-merge for conflict resolution
- * 
+ * Extended to recognize Spavn UI custom color tokens from @theme
+ *
  * @example
  * cn('px-2 py-1', 'bg-red-500', isActive && 'bg-blue-500')
  * // → 'px-2 py-1 bg-blue-500' (when isActive is true)

package/src/theme.css

@@ -34,6 +34,45 @@
   --color-card-elevated-1: hsl(var(--card-elevated-1));
   --color-card-elevated-2: hsl(var(--card-elevated-2));
 
+  /* Extended Color Palette */
+  --color-info: hsl(var(--info));
+  --color-info-foreground: hsl(var(--info-foreground));
+  --color-info-soft: hsl(var(--info-soft));
+
+  --color-warning: hsl(var(--warning));
+  --color-warning-foreground: hsl(var(--warning-foreground));
+  --color-warning-soft: hsl(var(--warning-soft));
+
+  --color-amber: hsl(var(--amber));
+  --color-amber-foreground: hsl(var(--amber-foreground));
+  --color-amber-soft: hsl(var(--amber-soft));
+
+  --color-blue: hsl(var(--blue));
+  --color-blue-foreground: hsl(var(--blue-foreground));
+  --color-blue-soft: hsl(var(--blue-soft));
+
+  --color-green: hsl(var(--green));
+  --color-green-foreground: hsl(var(--green-foreground));
+  --color-green-soft: hsl(var(--green-soft));
+
+  --color-purple: hsl(var(--purple));
+  --color-purple-foreground: hsl(var(--purple-foreground));
+  --color-purple-soft: hsl(var(--purple-soft));
+
+  --color-pink: hsl(var(--pink));
+  --color-pink-foreground: hsl(var(--pink-foreground));
+  --color-pink-soft: hsl(var(--pink-soft));
+
+  --color-orange: hsl(var(--orange));
+  --color-orange-foreground: hsl(var(--orange-foreground));
+  --color-orange-soft: hsl(var(--orange-soft));
+
+  /* Soft variants for existing semantic colors */
+  --color-primary-soft: hsl(var(--primary-soft));
+  --color-secondary-soft: hsl(var(--secondary-soft));
+  --color-destructive-soft: hsl(var(--destructive-soft));
+  --color-success-soft: hsl(var(--success-soft));
+
   /* Depth/Elevation Shadow System (Material Design 3 inspired) */
   --shadow-depth-1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-depth-2: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);