feat(tokens): implement complete design token system with WCAG AA compliance

- Add comprehensive design token system with CSS custom properties
- Implement automatic light/dark theme switching
- Create production-ready UI primitive library (Button, Input, Select, Card, Alert, Badge)
- Ensure WCAG AA accessibility with 4.5:1+ contrast ratios
- Add theme context and custom hooks for theme management
- Include contrast validation utilities

Components include full TypeScript interfaces, accessibility features,
and consistent design token integration.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

reactrebuild0825/src/components/ui/Alert.tsx

@@ -0,0 +1,150 @@
+import React, { forwardRef, useState } from 'react';
+
+import { clsx } from 'clsx';
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+  title?: string;
+  dismissible?: boolean;
+  onDismiss?: () => void;
+  icon?: React.ReactNode;
+  actions?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ 
+    variant = 'info',
+    title,
+    dismissible = false,
+    onDismiss,
+    icon,
+    actions,
+    children,
+    className,
+    ...props 
+  }, ref) => {
+    const [isVisible, setIsVisible] = useState(true);
+
+    const handleDismiss = () => {
+      setIsVisible(false);
+      onDismiss?.();
+    };
+
+    if (!isVisible) {return null;}
+
+    // Default icons for each variant
+    const defaultIcons = {
+      success: (
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+        </svg>
+      ),
+      warning: (
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+        </svg>
+      ),
+      error: (
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+        </svg>
+      ),
+      info: (
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+        </svg>
+      ),
+      neutral: (
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+        </svg>
+      ),
+    };
+
+    const alertStyles = clsx(
+      // Base styles
+      'relative p-lg rounded-lg border backdrop-blur-md',
+      'transition-all duration-200 ease-in-out',
+      
+      // Variant styles
+      {
+        'bg-success-bg text-success-text border-success-border': variant === 'success',
+        'bg-warning-bg text-warning-text border-warning-border': variant === 'warning',
+        'bg-error-bg text-error-text border-error-border': variant === 'error',
+        'bg-info-bg text-info-text border-info-border': variant === 'info',
+        'bg-glass-bg text-text-primary border-glass-border': variant === 'neutral',
+      },
+      
+      className
+    );
+
+    const iconColor = {
+      success: 'text-success-accent',
+      warning: 'text-warning-accent',
+      error: 'text-error-accent',
+      info: 'text-info-accent',
+      neutral: 'text-text-muted',
+    };
+
+    const displayIcon = icon ?? defaultIcons[variant];
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={alertStyles}
+        {...props}
+      >
+        <div className="flex">
+          {displayIcon && (
+            <div className={clsx('flex-shrink-0 mr-md', iconColor[variant])}>
+              {displayIcon}
+            </div>
+          )}
+          
+          <div className="flex-1 min-w-0">
+            {title && (
+              <h3 className="text-sm font-semibold mb-xs">
+                {title}
+              </h3>
+            )}
+            
+            <div className="text-sm">
+              {children}
+            </div>
+            
+            {actions && (
+              <div className="mt-md">
+                {actions}
+              </div>
+            )}
+          </div>
+          
+          {dismissible && (
+            <div className="flex-shrink-0 ml-md">
+              <button
+                type="button"
+                className={clsx(
+                  'inline-flex rounded-md p-xs transition-colors duration-150',
+                  'hover:bg-black/10 focus:bg-black/10 focus:outline-none',
+                  iconColor[variant]
+                )}
+                onClick={handleDismiss}
+                aria-label="Dismiss alert"
+              >
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
+                </svg>
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+Alert.displayName = 'Alert';
+
+export { Alert };