Theming

:root {
  /* Colors */
  --primary-color: #007bff;
  --primary-hover: #0056b3;
  --secondary-color: #6c757d;
  --secondary-hover: #545b62;
  --danger-color: #dc3545;
  --success-color: #28a745;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  
  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  
  /* Borders */
  --border-radius: 0.375rem;
  --border-width: 1px;
  --border-color: #dee2e6;
}

/* theme.css */
:root {
  --primary-color: #8b5cf6;
  --primary-hover: #7c3aed;
  --border-radius: 0.5rem;
  --font-family: 'Inter', sans-serif;
}

import '@abdalkader/component-library/dist/styles.css';
import './theme.css';

/* Dark mode theme */
[data-theme='dark'] {
  --primary-color: #3b9eff;
  --primary-hover: #007bff;
  --dark-color: #f8f9fa;
  --light-color: #343a40;
  --border-color: #495057;
}

function App() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);
  
  return (
    <div>
      <Button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </Button>
    </div>
  );
}

/* Custom button styles */
.btn--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.btn--primary:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

<div style={{ '--primary-color': '#e91e63' }}>
  <Button variant="primary">Pink Button</Button>
</div>

<div style={{ '--primary-color': '#4caf50' }}>
  <Button variant="primary">Green Button</Button>
</div>