@grupor5/raya 0.1.0

package/src/tokens/buttons.ts

@@ -0,0 +1,234 @@
+/**
+ * Button Design Tokens - Raya Design System
+ * 
+ * Defines the button system tokens including sizes, variants, colors, and states
+ * for consistent button usage across the design system.
+ */
+
+// Button Sizes
+export const buttonSizes = {
+  sm: {
+    height: '32px',
+    paddingX: '8px',
+    paddingY: '4px',
+    fontSize: '14px',
+    iconSize: '16px',
+    borderRadius: '10px',
+  },
+  md: {
+    height: '40px',
+    paddingX: '16px',
+    paddingY: '8px',
+    fontSize: '16px',
+    iconSize: '20px',
+    borderRadius: '12px',
+  },
+  lg: {
+    height: '48px',
+    paddingX: '24px',
+    paddingY: '12px',
+    fontSize: '18px',
+    iconSize: '24px',
+    borderRadius: '16px',
+  },
+} as const;
+
+// Button Size Classes for Tailwind
+export const buttonSizeClasses = {
+  sm: {
+    base: 'h-8 px-2 py-1 text-sm rounded-[10px]',
+    icon: 'h-8 w-8 rounded-[10px]',
+    iconSize: 'w-4 h-4',
+  },
+  md: {
+    base: 'h-10 px-4 py-2 text-base rounded-xl',
+    icon: 'h-10 w-10 rounded-xl',
+    iconSize: 'w-5 h-5',
+  },
+  lg: {
+    base: 'h-12 px-6 py-3 text-lg rounded-2xl',
+    icon: 'h-12 w-12 rounded-2xl',
+    iconSize: 'w-[22px] h-[22px]',
+  },
+} as const;
+
+// Button Variants
+export const buttonVariants = {
+  primary: 'filled',
+  secondary: 'outlined', 
+  ghost: 'text-only',
+  icon: 'icon-only',
+} as const;
+
+// Button Colors
+export const buttonColors = {
+  primary: 'default',
+  secondary: 'purple',
+  success: 'green',
+  warning: 'orange',
+  destructive: 'red',
+  neutral: 'gray',
+} as const;
+
+// Button States
+export const buttonStates = {
+  default: 'normal',
+  hover: 'highlighted',
+  pressed: 'active',
+  disabled: 'inactive',
+  loading: 'processing',
+} as const;
+
+// Button Variant Classes
+export const buttonVariantClasses = {
+  // Primary variants
+  primary: {
+    primary: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-[hsl(var(--primary-pressed))] disabled:bg-neutral-300 disabled:text-neutral-500',
+    secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90 active:bg-secondary/80 disabled:bg-neutral-300 disabled:text-neutral-500',
+    success: 'bg-emerald-600 text-white shadow-sm hover:bg-emerald-700 active:bg-emerald-800 disabled:bg-neutral-300 disabled:text-neutral-500',
+    warning: 'bg-amber-600 text-white shadow-sm hover:bg-amber-700 active:bg-amber-800 disabled:bg-neutral-300 disabled:text-neutral-500',
+    destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 active:bg-destructive/80 disabled:bg-neutral-300 disabled:text-neutral-500',
+    neutral: 'bg-neutral-700 text-white shadow-sm hover:bg-neutral-800 active:bg-neutral-900 disabled:bg-neutral-300 disabled:text-neutral-500',
+  },
+  // Secondary variants (outlined)
+  secondary: {
+    primary: 'border border-primary text-primary bg-transparent hover:bg-primary/10 active:bg-primary/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent',
+    secondary: 'border border-secondary text-secondary bg-transparent hover:bg-secondary/10 active:bg-secondary/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent',
+    success: 'border border-emerald-600 text-emerald-600 bg-transparent hover:bg-emerald-50 active:bg-emerald-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent',
+    warning: 'border border-amber-600 text-amber-600 bg-transparent hover:bg-amber-50 active:bg-amber-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent',
+    destructive: 'border border-destructive text-destructive bg-transparent hover:bg-destructive/10 active:bg-destructive/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent',
+    neutral: 'border border-neutral-700 text-neutral-700 bg-transparent hover:bg-neutral-50 active:bg-neutral-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent',
+  },
+  // Ghost variants (text only)
+  ghost: {
+    primary: 'text-primary bg-transparent hover:bg-primary/10 active:bg-primary/20 disabled:text-neutral-500 disabled:bg-transparent',
+    secondary: 'text-secondary bg-transparent hover:bg-secondary/10 active:bg-secondary/20 disabled:text-neutral-500 disabled:bg-transparent',
+    success: 'text-emerald-600 bg-transparent hover:bg-emerald-50 active:bg-emerald-100 disabled:text-neutral-500 disabled:bg-transparent',
+    warning: 'text-amber-600 bg-transparent hover:bg-amber-50 active:bg-amber-100 disabled:text-neutral-500 disabled:bg-transparent',
+    destructive: 'text-destructive bg-transparent hover:bg-destructive/10 active:bg-destructive/20 disabled:text-neutral-500 disabled:bg-transparent',
+    neutral: 'text-neutral-700 bg-transparent hover:bg-neutral-100 active:bg-neutral-200 disabled:text-neutral-500 disabled:bg-transparent',
+  },
+} as const;
+
+// Button Base Classes
+export const buttonBaseClasses = 'inline-flex items-center justify-center gap-2 whitespace-nowrap font-regular transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed focus-visible:border-2 focus-visible:border-[--stroke-color-focus-border]';
+
+// Button Icon Classes
+export const buttonIconClasses = {
+  left: 'mr-2',
+  right: 'ml-2',
+  only: '',
+} as const;
+
+// Button Loading Classes
+export const buttonLoadingClasses = {
+  spinner: 'animate-spin',
+  container: 'flex items-center justify-center gap-2',
+  text: 'opacity-70',
+} as const;
+
+// Type definitions
+export type ButtonSize = keyof typeof buttonSizes;
+export type ButtonVariant = keyof typeof buttonVariants;
+export type ButtonColor = keyof typeof buttonColors;
+export type ButtonState = keyof typeof buttonStates;
+
+// Utility functions
+export const getButtonSizeClasses = (size: ButtonSize, isIcon?: boolean): string => {
+  return isIcon ? buttonSizeClasses[size].icon : buttonSizeClasses[size].base;
+};
+
+export const getButtonVariantClasses = (variant: ButtonVariant, color: ButtonColor): string => {
+  if (variant === 'icon') {
+    // Icon buttons use the same classes as ghost buttons
+    return buttonVariantClasses.ghost[color];
+  }
+  return buttonVariantClasses[variant as keyof typeof buttonVariantClasses]?.[color] || '';
+};
+
+export const getButtonIconSize = (size: ButtonSize): string => {
+  return buttonSizeClasses[size].iconSize;
+};
+
+// Button component props interface
+export interface ButtonProps {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  color?: ButtonColor;
+  disabled?: boolean;
+  loading?: boolean;
+  loadingText?: string;
+  icon?: string;
+  iconLeft?: string;
+  iconRight?: string;
+  className?: string;
+  children?: React.ReactNode;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  type?: 'button' | 'submit' | 'reset';
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+  asChild?: boolean;
+}
+
+// Default button configuration
+export const defaultButtonConfig = {
+  variant: 'primary' as ButtonVariant,
+  size: 'md' as ButtonSize,
+  color: 'primary' as ButtonColor,
+  type: 'button' as const,
+};
+
+// Button theme configuration
+export const buttonTheme = {
+  light: {
+    focus: 'focus-visible:ring-ring',
+    disabled: 'disabled:opacity-50',
+  },
+  dark: {
+    focus: 'focus-visible:ring-ring',
+    disabled: 'disabled:opacity-50',
+  },
+};
+
+// Export all tokens
+export const buttonTokens = {
+  sizes: buttonSizes,
+  sizeClasses: buttonSizeClasses,
+  variants: buttonVariants,
+  colors: buttonColors,
+  states: buttonStates,
+  variantClasses: buttonVariantClasses,
+  baseClasses: buttonBaseClasses,
+  iconClasses: buttonIconClasses,
+  loadingClasses: buttonLoadingClasses,
+  defaultConfig: defaultButtonConfig,
+  theme: buttonTheme,
+};
+
+// Animation tokens for loading states
+export const buttonAnimations = {
+  scale: 'active:scale-95',
+  fadeIn: 'animate-in fade-in-0 duration-200',
+  fadeOut: 'animate-out fade-out-0 duration-200',
+  slideIn: 'animate-in slide-in-from-left-1 duration-200',
+  slideOut: 'animate-out slide-out-to-left-1 duration-200',
+} as const;
+
+// Loading spinner SVG content
+export const loadingSpinnerSVG = `
+  <svg className="animate-spin" fill="none" viewBox="0 0 24 24">
+    <circle 
+      className="opacity-25" 
+      cx="12" 
+      cy="12" 
+      r="10" 
+      stroke="currentColor" 
+      strokeWidth="4"
+    />
+    <path 
+      className="opacity-75" 
+      fill="currentColor" 
+      d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
+  </svg>
+`; 

package/src/tokens/colors.ts

@@ -0,0 +1,63 @@
+export const colors = {
+  primary: {
+    100: '#faf9fb',
+    200: '#eeedf1',
+    300: '#dbd9e1',
+    400: '#c3c0cd',
+    500: '#a8a3b6',
+    600: '#8b859e',
+    700: '#706984',
+    800: '#585267',
+    900: '#423e4e',
+    1000: '#312e3a',
+    1100: '#26242d',
+    1200: '#222028',
+  },
+  secondary: {
+    100: '#fbf7fc',
+    200: '#f2e4f6',
+    300: '#e4c7ed',
+    400: '#d3a2e1',
+    500: '#c07ad4',
+    600: '#ac50c7',
+    700: '#9037ab',
+    800: '#722b86',
+    900: '#592269',
+    1000: '#481b55',
+    1100: '#42194e',
+    1200: '#1d0b23',
+  },
+  neutral: {
+    500: '#bdb3b3',
+    400: '#bdb3b3',
+    300: '#d2caca',
+    200: '#e7e2e2',
+    100: '#fbfafa',
+    10: '#ffffff',
+    20: '#f9f9f9',
+    30: '#f2f2f2',
+  },
+  red: {
+    600: '#dc2626',
+    500: '#ee4444',
+    400: '#e86e6e',
+    300: '#fca5a5',
+    200: '#e86e6e',
+    100: '#f3b7b7',
+  },
+  yellow: {
+    300: '#f59e0b',
+    200: '#f8be5c',
+    100: '#fcdfae',
+    10: '#fcdfaeB3',
+  },
+  green: {
+    600: '#096849',
+    500: '#10b981',
+    400: '#10b981',
+    300: '#10b981',
+    200: '#10b981',
+    100: '#D0FAE5',
+    10: '#beba6bB3',
+  },
+};

package/src/tokens/effects.ts

@@ -0,0 +1,167 @@
+/**
+ * Raya Design System - Effects Tokens
+ * 
+ * Effects system for creating depth, hierarchy, and visual distinction
+ * through carefully crafted shadows and visual effects.
+ */
+
+export const effects = {
+  // Effect levels
+  s: '0 1px 2px rgba(0, 0, 0, 0.05)',
+  m: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+  l: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+} as const;
+
+export type EffectToken = keyof typeof effects;
+
+/**
+ * Dark mode variants with adjusted opacity for better visibility
+ */
+export const effectsDark = {
+  s: '0 1px 2px rgba(0, 0, 0, 0.3)',
+  m: '0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3)',
+  l: '0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3)',
+} as const;
+
+/**
+ * Effect colors for customization
+ */
+export const effectColors = {
+  primary: 'rgba(0, 0, 0, 0.1)',
+  secondary: 'rgba(0, 0, 0, 0.06)',
+  subtle: 'rgba(0, 0, 0, 0.05)',
+  strong: 'rgba(0, 0, 0, 0.15)',
+} as const;
+
+/**
+ * Pre-composed effect styles for common use cases
+ */
+export const effectStyles = {
+  // Button effects
+  buttonDefault: effects.s,
+  buttonHover: effects.m,
+  buttonActive: effects.s,
+  buttonFloating: effects.l,
+  
+  // Card effects
+  cardFlat: 'none',
+  cardElevated: effects.s,
+  cardProminent: effects.m,
+  cardFloating: effects.l,
+  
+  // Form effects
+  inputDefault: effects.s,
+  inputFocus: effects.m,
+  inputInvalid: `${effects.s}, 0 0 0 1px var(--destructive)`,
+  
+  // Navigation effects
+  dropdown: effects.m,
+  tooltip: effects.m,
+  modal: effects.l,
+  popover: effects.m,
+  
+  // Interactive effects
+  hoverSubtle: effects.s,
+  hoverMedium: effects.m,
+  hoverStrong: effects.l,
+} as const;
+
+/**
+ * Drop shadow variants for SVG and filter effects
+ */
+export const dropShadows = {
+  s: '0 1px 2px rgba(0, 0, 0, 0.05)',
+  m: ['0 4px 6px rgba(0, 0, 0, 0.1)', '0 2px 4px rgba(0, 0, 0, 0.06)'],
+  l: ['0 10px 15px rgba(0, 0, 0, 0.1)', '0 4px 6px rgba(0, 0, 0, 0.05)'],
+} as const;
+
+/**
+ * Utility function to get effect value
+ */
+export const getEffect = (token: EffectToken): string => {
+  return effects[token];
+};
+
+/**
+ * Utility function to get dark mode effect
+ */
+export const getEffectDark = (token: EffectToken): string => {
+  return effectsDark[token];
+};
+
+/**
+ * Generate CSS custom properties for effects
+ */
+export const generateEffectsCSS = (): string => {
+  const lightVars = Object.entries(effects)
+    .map(([key, value]) => `  --effect-${key}: ${value};`)
+    .join('\n');
+  
+  const darkVars = Object.entries(effectsDark)
+    .map(([key, value]) => `  --effect-${key}: ${value};`)
+    .join('\n');
+  
+  return `:root {\n  /* Effect tokens - Light mode */\n${lightVars}\n}\n\n.dark {\n  /* Effect tokens - Dark mode */\n${darkVars}\n}`;
+};
+
+/**
+ * Effects tokens for Tailwind CSS configuration
+ */
+export const tailwindEffects = {
+  'effect-s': 'var(--effect-s)',
+  'effect-m': 'var(--effect-m)',
+  'effect-l': 'var(--effect-l)',
+} as const;
+
+/**
+ * Component-specific effect utilities
+ */
+export const componentEffects = {
+  // Button component effects
+  button: {
+    default: effects.s,
+    hover: effects.m,
+    active: effects.s,
+    floating: effects.l,
+    disabled: 'none',
+  },
+  
+  // Card component effects
+  card: {
+    flat: 'none',
+    elevated: effects.s,
+    interactive: effects.s,
+    interactiveHover: effects.m,
+    prominent: effects.m,
+    floating: effects.l,
+  },
+  
+  // Form component effects
+  form: {
+    input: effects.s,
+    inputFocus: effects.m,
+    inputError: `${effects.s}, 0 0 0 1px var(--destructive)`,
+    select: effects.s,
+    selectOpen: effects.m,
+  },
+  
+  // Navigation component effects
+  navigation: {
+    dropdown: effects.m,
+    tooltip: effects.m,
+    modal: effects.l,
+    popover: effects.m,
+    sidebar: effects.s,
+  },
+} as const;
+
+/**
+ * Animation-ready effect transitions
+ */
+export const effectTransitions = {
+  fast: 'box-shadow 0.15s ease-in-out',
+  medium: 'box-shadow 0.2s ease-in-out',
+  slow: 'box-shadow 0.3s ease-in-out',
+} as const;
+
+export default effects;