@shohojdhara/atomix 0.3.14 → 0.4.0

package/themes/dark-complementary/index.scss

@@ -0,0 +1,158 @@
+// Theme: dark-complementary
+// =============================================================================
+
+@import '../../src/styles/01-settings';
+@import '../../src/styles/02-tools';
+
+// Theme Variables
+// =============================================================================
+:root[data-theme="dark-complementary"] {
+  // Colors (complementary to light theme)
+  --atomix-color-primary: #4dabf7; // Lighter blue for dark background
+  --atomix-color-primary-light: #74c0fc;
+  --atomix-color-primary-dark: #228be6;
+  --atomix-color-secondary: #868e96; // Lighter gray
+  --atomix-color-secondary-light: #adb5bd;
+  --atomix-color-secondary-dark: #495057;
+  --atomix-color-success: #51cf66; // Brighter green
+  --atomix-color-success-light: #8ce99a;
+  --atomix-color-success-dark: #40c057;
+  --atomix-color-error: #ff6b6b; // Brighter red
+  --atomix-color-error-light: #ff8787;
+  --atomix-color-error-dark: #fa5252;
+  --atomix-color-warning: #ffd43b; // Brighter yellow
+  --atomix-color-warning-light: #ffe066;
+  --atomix-color-warning-dark: #fab005;
+  --atomix-color-info: #74c0fc; // Brighter cyan
+  --atomix-color-info-light: #a5d8ff;
+  --atomix-color-info-dark: #339af0;
+
+  // Background (dark)
+  --atomix-color-background: #1a1a1a;
+  --atomix-color-background-paper: #2d2d2d;
+  --atomix-color-background-subtle: #404040;
+
+  // Text (light)
+  --atomix-color-text: #ffffff;
+  --atomix-color-text-secondary: #cccccc;
+  --atomix-color-text-disabled: #888888;
+
+  // Border (dark theme borders)
+  --atomix-color-border: #404040;
+  --atomix-color-border-light: #555555;
+  --atomix-color-border-dark: #1a1a1a;
+
+  // Spacing (same as light theme)
+  --atomix-space-0: 0;
+  --atomix-space-1: 0.25rem;
+  --atomix-space-2: 0.5rem;
+  --atomix-space-3: 0.75rem;
+  --atomix-space-4: 1rem;
+  --atomix-space-5: 1.25rem;
+  --atomix-space-6: 1.5rem;
+  --atomix-space-8: 2rem;
+  --atomix-space-10: 2.5rem;
+  --atomix-space-12: 3rem;
+  --atomix-space-16: 4rem;
+  --atomix-space-20: 5rem;
+  --atomix-space-24: 6rem;
+  --atomix-space-32: 8rem;
+  --atomix-space-base: 1rem;
+
+  // Typography (same as light theme)
+  --atomix-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --atomix-font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --atomix-font-family-mono: 'Fira Code', 'Monaco', 'Consolas', monospace;
+
+  --atomix-font-size-xs: 0.75rem;
+  --atomix-font-size-sm: 0.875rem;
+  --atomix-font-size-base: 1rem;
+  --atomix-font-size-lg: 1.125rem;
+  --atomix-font-size-xl: 1.25rem;
+  --atomix-font-size-2xl: 1.5rem;
+  --atomix-font-size-3xl: 1.875rem;
+  --atomix-font-size-4xl: 2.25rem;
+  --atomix-font-size-5xl: 3rem;
+
+  --atomix-font-weight-light: 300;
+  --atomix-font-weight-normal: 400;
+  --atomix-font-weight-medium: 500;
+  --atomix-font-weight-semibold: 600;
+  --atomix-font-weight-bold: 700;
+  --atomix-font-weight-extrabold: 800;
+
+  --atomix-line-height-tight: 1.25;
+  --atomix-line-height-snug: 1.375;
+  --atomix-line-height-normal: 1.5;
+  --atomix-line-height-relaxed: 1.625;
+  --atomix-line-height-loose: 2;
+
+  // Shadows (adjusted for dark theme)
+  --atomix-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --atomix-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --atomix-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  --atomix-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+  --atomix-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+  --atomix-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  --atomix-shadow-inner: inset 0 2px 4px 0 rgba(255, 255, 255, 0.1);
+  --atomix-shadow-outline: 0 0 0 3px rgba(77, 144, 254, 0.6);
+
+  // Animations/Transitions (same as light theme)
+  --atomix-transition-fast: 150ms ease-in-out;
+  --atomix-transition-base: 200ms ease-in-out;
+  --atomix-transition-slow: 300ms ease-in-out;
+
+  --atomix-animation-duration-fast: 150ms;
+  --atomix-animation-duration-base: 200ms;
+  --atomix-animation-duration-slow: 300ms;
+
+  --atomix-animation-easing-ease: ease;
+  --atomix-animation-easing-ease-in: ease-in;
+  --atomix-animation-easing-ease-out: ease-out;
+  --atomix-animation-easing-ease-in-out: ease-in-out;
+
+  // Border Radius (same as light theme)
+  --atomix-radius-none: 0;
+  --atomix-radius-sm: 0.125rem;
+  --atomix-radius-base: 0.25rem;
+  --atomix-radius-md: 0.375rem;
+  --atomix-radius-lg: 0.5rem;
+  --atomix-radius-xl: 0.75rem;
+  --atomix-radius-2xl: 1rem;
+  --atomix-radius-full: 9999px;
+}
+
+// Theme-specific Component Overrides
+// =============================================================================
+[data-theme="dark-complementary"] {
+  // Button overrides
+  .c-button {
+    border-radius: var(--atomix-radius-base);
+    transition: all var(--atomix-transition-base);
+    background-color: var(--atomix-color-background-paper);
+    border: 1px solid var(--atomix-color-border);
+
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: var(--atomix-shadow-md);
+      background-color: var(--atomix-color-background-subtle);
+    }
+
+    &:focus {
+      box-shadow: var(--atomix-shadow-outline);
+    }
+  }
+
+  // Card overrides
+  .c-card {
+    border: 1px solid var(--atomix-color-border);
+    border-radius: var(--atomix-radius-lg);
+    box-shadow: var(--atomix-shadow-sm);
+    background-color: var(--atomix-color-background-paper);
+
+    &:hover {
+      box-shadow: var(--atomix-shadow-md);
+      background-color: var(--atomix-color-background-subtle);
+    }
+  }
+}

package/themes/default-light/README.md

@@ -0,0 +1,81 @@
+# default-light Theme
+
+## Description
+
+The default-light theme provides a clean, modern light theme with a blue primary color scheme. This theme is optimized for readability and provides excellent contrast ratios for accessibility.
+
+## Usage
+
+### CSS Theme
+
+```scss
+@import 'themes/default-light';
+```
+
+### JavaScript Theme
+
+```typescript
+import { defaultLightTheme } from './themes/default-light';
+import { ThemeProvider } from '@shohojdhara/atomix/theme';
+
+function App() {
+  return (
+    <ThemeProvider theme={defaultLightTheme}>
+      {/* Your app */}
+    </ThemeProvider>
+  );
+}
+```
+
+## Customization
+
+Edit the theme variables in `index.scss` to customize colors, typography, spacing, and more. The theme uses CSS custom properties for easy customization.
+
+### Color Customization
+
+```scss
+:root[data-theme='default-light'] {
+  --atomix-color-primary: #your-primary-color;
+  --atomix-color-background: #your-background-color;
+  // ... other variables
+}
+```
+
+### Typography Customization
+
+```scss
+:root[data-theme='default-light'] {
+  --atomix-font-family-base: 'Your Font', sans-serif;
+  --atomix-font-size-base: 1rem;
+  // ... other typography variables
+}
+```
+
+## Features
+
+- **High Contrast**: Excellent readability with proper contrast ratios
+- **Modern Design**: Clean, minimal aesthetic with subtle shadows
+- **Responsive**: Scales well across all device sizes
+- **Accessible**: Meets WCAG 2.1 AA standards for color contrast
+
+## Build
+
+```bash
+atomix build-theme themes/default-light
+```
+
+## Color Palette
+
+- **Primary**: Blue (#007bff) - Used for primary actions and links
+- **Secondary**: Gray (#6c757d) - Used for secondary elements
+- **Success**: Green (#28a745) - Used for success states
+- **Error**: Red (#dc3545) - Used for error states
+- **Warning**: Yellow (#ffc107) - Used for warning states
+- **Info**: Cyan (#17a2b8) - Used for informational elements
+
+## Typography
+
+- **Base Font**: Inter (system font stack fallback)
+- **Mono Font**: Fira Code (for code elements)
+- **Font Sizes**: Responsive scale from xs to 5xl
+- **Font Weights**: Light (300) to Extra Bold (800)

package/themes/default-light/index.scss

@@ -0,0 +1,154 @@
+// Theme: default-light
+// =============================================================================
+
+@import '../../src/styles/01-settings';
+@import '../../src/styles/02-tools';
+
+// Theme Variables
+// =============================================================================
+:root[data-theme="default-light"] {
+  // Colors
+  --atomix-color-primary: #007bff;
+  --atomix-color-primary-light: #4dabf7;
+  --atomix-color-primary-dark: #0056b3;
+  --atomix-color-secondary: #6c757d;
+  --atomix-color-secondary-light: #adb5bd;
+  --atomix-color-secondary-dark: #495057;
+  --atomix-color-success: #28a745;
+  --atomix-color-success-light: #71dd8a;
+  --atomix-color-success-dark: #1e7e34;
+  --atomix-color-error: #dc3545;
+  --atomix-color-error-light: #f28b94;
+  --atomix-color-error-dark: #bd2130;
+  --atomix-color-warning: #ffc107;
+  --atomix-color-warning-light: #ffda6a;
+  --atomix-color-warning-dark: #d39e00;
+  --atomix-color-info: #17a2b8;
+  --atomix-color-info-light: #6edff6;
+  --atomix-color-info-dark: #117a8b;
+
+  // Background
+  --atomix-color-background: #ffffff;
+  --atomix-color-background-paper: #f8f9fa;
+  --atomix-color-background-subtle: #e9ecef;
+
+  // Text
+  --atomix-color-text: #212529;
+  --atomix-color-text-secondary: #6c757d;
+  --atomix-color-text-disabled: #adb5bd;
+
+  // Border
+  --atomix-color-border: #dee2e6;
+  --atomix-color-border-light: #f8f9fa;
+  --atomix-color-border-dark: #343a40;
+
+  // Spacing
+  --atomix-space-0: 0;
+  --atomix-space-1: 0.25rem;
+  --atomix-space-2: 0.5rem;
+  --atomix-space-3: 0.75rem;
+  --atomix-space-4: 1rem;
+  --atomix-space-5: 1.25rem;
+  --atomix-space-6: 1.5rem;
+  --atomix-space-8: 2rem;
+  --atomix-space-10: 2.5rem;
+  --atomix-space-12: 3rem;
+  --atomix-space-16: 4rem;
+  --atomix-space-20: 5rem;
+  --atomix-space-24: 6rem;
+  --atomix-space-32: 8rem;
+  --atomix-space-base: 1rem;
+
+  // Typography
+  --atomix-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --atomix-font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --atomix-font-family-mono: 'Fira Code', 'Monaco', 'Consolas', monospace;
+
+  --atomix-font-size-xs: 0.75rem;
+  --atomix-font-size-sm: 0.875rem;
+  --atomix-font-size-base: 1rem;
+  --atomix-font-size-lg: 1.125rem;
+  --atomix-font-size-xl: 1.25rem;
+  --atomix-font-size-2xl: 1.5rem;
+  --atomix-font-size-3xl: 1.875rem;
+  --atomix-font-size-4xl: 2.25rem;
+  --atomix-font-size-5xl: 3rem;
+
+  --atomix-font-weight-light: 300;
+  --atomix-font-weight-normal: 400;
+  --atomix-font-weight-medium: 500;
+  --atomix-font-weight-semibold: 600;
+  --atomix-font-weight-bold: 700;
+  --atomix-font-weight-extrabold: 800;
+
+  --atomix-line-height-tight: 1.25;
+  --atomix-line-height-snug: 1.375;
+  --atomix-line-height-normal: 1.5;
+  --atomix-line-height-relaxed: 1.625;
+  --atomix-line-height-loose: 2;
+
+  // Shadows
+  --atomix-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --atomix-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --atomix-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --atomix-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --atomix-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --atomix-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --atomix-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --atomix-shadow-outline: 0 0 0 3px rgba(59, 130, 246, 0.5);
+
+  // Animations/Transitions
+  --atomix-transition-fast: 150ms ease-in-out;
+  --atomix-transition-base: 200ms ease-in-out;
+  --atomix-transition-slow: 300ms ease-in-out;
+
+  --atomix-animation-duration-fast: 150ms;
+  --atomix-animation-duration-base: 200ms;
+  --atomix-animation-duration-slow: 300ms;
+
+  --atomix-animation-easing-ease: ease;
+  --atomix-animation-easing-ease-in: ease-in;
+  --atomix-animation-easing-ease-out: ease-out;
+  --atomix-animation-easing-ease-in-out: ease-in-out;
+
+  // Border Radius
+  --atomix-radius-none: 0;
+  --atomix-radius-sm: 0.125rem;
+  --atomix-radius-base: 0.25rem;
+  --atomix-radius-md: 0.375rem;
+  --atomix-radius-lg: 0.5rem;
+  --atomix-radius-xl: 0.75rem;
+  --atomix-radius-2xl: 1rem;
+  --atomix-radius-full: 9999px;
+}
+
+// Theme-specific Component Overrides
+// =============================================================================
+[data-theme="default-light"] {
+  // Button overrides
+  .c-button {
+    border-radius: var(--atomix-radius-base);
+    transition: all var(--atomix-transition-base);
+
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: var(--atomix-shadow-md);
+    }
+
+    &:focus {
+      box-shadow: var(--atomix-shadow-outline);
+    }
+  }
+
+  // Card overrides
+  .c-card {
+    border: 1px solid var(--atomix-color-border);
+    border-radius: var(--atomix-radius-lg);
+    box-shadow: var(--atomix-shadow-sm);
+    background-color: var(--atomix-color-background);
+
+    &:hover {
+      box-shadow: var(--atomix-shadow-md);
+    }
+  }
+}

package/themes/high-contrast/README.md

@@ -0,0 +1,105 @@
+# high-contrast Theme
+
+## Description
+
+The high-contrast theme provides maximum visibility and readability for users with visual impairments or those requiring enhanced accessibility. This theme uses pure black and white backgrounds with bright, high-contrast accent colors and thicker borders.
+
+## Usage
+
+### CSS Theme
+
+```scss
+@import 'themes/high-contrast';
+```
+
+### JavaScript Theme
+
+```typescript
+import { highContrastTheme } from './themes/high-contrast';
+import { ThemeProvider } from '@shohojdhara/atomix/theme';
+
+function App() {
+  return (
+    <ThemeProvider theme={highContrastTheme}>
+      {/* Your app */}
+    </ThemeProvider>
+  );
+}
+```
+
+## Customization
+
+Edit the theme variables in `index.scss` to customize colors, typography, spacing, and more. The theme uses CSS custom properties for easy customization.
+
+### Color Customization
+
+For high-contrast themes, maintain maximum contrast ratios:
+
+```scss
+:root[data-theme='high-contrast'] {
+  --atomix-color-primary: #your-high-contrast-color;
+  --atomix-color-background: #ffffff; // Keep pure white
+  --atomix-color-text: #000000; // Keep pure black
+  // ... other variables
+}
+```
+
+### Border Customization
+
+High-contrast themes benefit from thicker borders:
+
+```scss
+:root[data-theme='high-contrast'] {
+  --atomix-color-border: #000000; // Pure black borders
+  // Component-specific border widths can be adjusted in overrides
+}
+```
+
+## Features
+
+- **Maximum Accessibility**: Meets WCAG 2.1 AAA standards for color contrast
+- **Visual Impairment Support**: Optimized for users with low vision
+- **Clear Visual Hierarchy**: Thick borders and high contrast ensure clarity
+- **Reduced Motion**: Faster transitions for users sensitive to animation
+- **Bold Typography**: Heavier font weights and larger sizes for better readability
+
+## Build
+
+```bash
+atomix build-theme themes/high-contrast
+```
+
+## Color Palette
+
+- **Primary**: Bright Blue (#0066cc) - High contrast for primary actions
+- **Secondary**: Medium Gray (#666666) - For secondary elements
+- **Success**: Pure Green (#008000) - Maximum visibility for success states
+- **Error**: Bright Red (#cc0000) - Highly visible error states
+- **Warning**: Bright Yellow (#ffcc00) - Noticeable warning states
+- **Info**: Bright Cyan (#0099cc) - Clear informational elements
+
+## Typography
+
+- **Base Font**: Arial/Helvetica (highly readable system fonts)
+- **Mono Font**: Courier New (for code elements)
+- **Font Sizes**: Larger scale starting from 0.875rem for better readability
+- **Font Weights**: No light weights (minimum 400), emphasizing bold (700-900)
+- **Text Colors**: Pure black (#000000) on pure white (#ffffff)
+
+## Accessibility Features
+
+- **Thick Borders**: 2-3px borders for maximum visibility
+- **High Contrast Focus Rings**: 4px thick focus indicators
+- **Bold Text**: Minimum font-weight of 400, recommended 600-700
+- **Minimal Animations**: Reduced motion for users with vestibular disorders
+- **Clear Visual States**: Distinct hover, focus, and active states
+
+## Component Overrides
+
+- **Buttons**: Thick black borders, bold text, clear state changes
+- **Cards**: 3px borders, enhanced focus states, high contrast backgrounds
+- **Focus Management**: Thick outline rings for keyboard navigation
+
+## Browser Support
+
+This theme is designed to work in all modern browsers and provides fallback support for older browsers through the use of standard CSS properties.

package/themes/high-contrast/index.scss

@@ -0,0 +1,172 @@
+// Theme: high-contrast
+// =============================================================================
+
+@import '../../src/styles/01-settings';
+@import '../../src/styles/02-tools';
+
+// Theme Variables
+// =============================================================================
+:root[data-theme="high-contrast"] {
+  // Colors (high contrast - pure black/white with bright accents)
+  --atomix-color-primary: #0066cc; // Bright blue for high visibility
+  --atomix-color-primary-light: #3399ff;
+  --atomix-color-primary-dark: #004d99;
+  --atomix-color-secondary: #666666; // Medium gray
+  --atomix-color-secondary-light: #999999;
+  --atomix-color-secondary-dark: #333333;
+  --atomix-color-success: #008000; // Pure green
+  --atomix-color-success-light: #00cc00;
+  --atomix-color-success-dark: #004d00;
+  --atomix-color-error: #cc0000; // Bright red
+  --atomix-color-error-light: #ff3333;
+  --atomix-color-error-dark: #990000;
+  --atomix-color-warning: #ffcc00; // Bright yellow
+  --atomix-color-warning-light: #ffff66;
+  --atomix-color-warning-dark: #cc9900;
+  --atomix-color-info: #0099cc; // Bright cyan
+  --atomix-color-info-light: #33ccff;
+  --atomix-color-info-dark: #006699;
+
+  // Background (pure white/black)
+  --atomix-color-background: #ffffff;
+  --atomix-color-background-paper: #ffffff;
+  --atomix-color-background-subtle: #f0f0f0;
+
+  // Text (pure black/white)
+  --atomix-color-text: #000000;
+  --atomix-color-text-secondary: #333333;
+  --atomix-color-text-disabled: #666666;
+
+  // Border (thick black borders for maximum visibility)
+  --atomix-color-border: #000000;
+  --atomix-color-border-light: #333333;
+  --atomix-color-border-dark: #000000;
+
+  // Spacing (same as other themes)
+  --atomix-space-0: 0;
+  --atomix-space-1: 0.25rem;
+  --atomix-space-2: 0.5rem;
+  --atomix-space-3: 0.75rem;
+  --atomix-space-4: 1rem;
+  --atomix-space-5: 1.25rem;
+  --atomix-space-6: 1.5rem;
+  --atomix-space-8: 2rem;
+  --atomix-space-10: 2.5rem;
+  --atomix-space-12: 3rem;
+  --atomix-space-16: 4rem;
+  --atomix-space-20: 5rem;
+  --atomix-space-24: 6rem;
+  --atomix-space-32: 8rem;
+  --atomix-space-base: 1rem;
+
+  // Typography (high contrast fonts)
+  --atomix-font-family-base: 'Arial', 'Helvetica', sans-serif; // More readable fonts
+  --atomix-font-family-heading: 'Arial Black', 'Arial', 'Helvetica', sans-serif;
+  --atomix-font-family-mono: 'Courier New', 'Monaco', 'Consolas', monospace;
+
+  --atomix-font-size-xs: 0.875rem; // Slightly larger for better readability
+  --atomix-font-size-sm: 1rem;
+  --atomix-font-size-base: 1.125rem;
+  --atomix-font-size-lg: 1.25rem;
+  --atomix-font-size-xl: 1.375rem;
+  --atomix-font-size-2xl: 1.625rem;
+  --atomix-font-size-3xl: 2rem;
+  --atomix-font-size-4xl: 2.5rem;
+  --atomix-font-size-5xl: 3.25rem;
+
+  --atomix-font-weight-light: 400; // No light fonts for better readability
+  --atomix-font-weight-normal: 400;
+  --atomix-font-weight-medium: 600;
+  --atomix-font-weight-semibold: 700;
+  --atomix-font-weight-bold: 700;
+  --atomix-font-weight-extrabold: 900;
+
+  --atomix-line-height-tight: 1.4;
+  --atomix-line-height-snug: 1.5;
+  --atomix-line-height-normal: 1.6;
+  --atomix-line-height-relaxed: 1.7;
+  --atomix-line-height-loose: 2;
+
+  // Shadows (minimal for high contrast)
+  --atomix-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+  --atomix-shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+  --atomix-shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
+  --atomix-shadow-lg: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
+  --atomix-shadow-xl: 0 16px 32px 0 rgba(0, 0, 0, 0.5);
+  --atomix-shadow-2xl: 0 24px 48px 0 rgba(0, 0, 0, 0.5);
+  --atomix-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+  --atomix-shadow-outline: 0 0 0 4px #0066cc; // Thick focus ring
+
+  // Animations/Transitions (reduced for accessibility)
+  --atomix-transition-fast: 100ms ease-in-out;
+  --atomix-transition-base: 150ms ease-in-out;
+  --atomix-transition-slow: 200ms ease-in-out;
+
+  --atomix-animation-duration-fast: 100ms;
+  --atomix-animation-duration-base: 150ms;
+  --atomix-animation-duration-slow: 200ms;
+
+  --atomix-animation-easing-ease: ease;
+  --atomix-animation-easing-ease-in: ease-in;
+  --atomix-animation-easing-ease-out: ease-out;
+  --atomix-animation-easing-ease-in-out: ease-in-out;
+
+  // Border Radius (minimal for high contrast)
+  --atomix-radius-none: 0;
+  --atomix-radius-sm: 0.125rem;
+  --atomix-radius-base: 0.25rem;
+  --atomix-radius-md: 0.25rem;
+  --atomix-radius-lg: 0.25rem;
+  --atomix-radius-xl: 0.5rem;
+  --atomix-radius-2xl: 0.5rem;
+  --atomix-radius-full: 9999px;
+}
+
+// Theme-specific Component Overrides
+// =============================================================================
+[data-theme="high-contrast"] {
+  // Button overrides (high contrast)
+  .c-button {
+    border: 2px solid var(--atomix-color-border);
+    border-radius: var(--atomix-radius-sm);
+    transition: all var(--atomix-transition-fast);
+    font-weight: var(--atomix-font-weight-bold);
+    background-color: var(--atomix-color-background);
+
+    &:hover {
+      background-color: var(--atomix-color-background-subtle);
+      border-color: var(--atomix-color-primary);
+      color: var(--atomix-color-primary);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: var(--atomix-shadow-outline);
+      border-color: var(--atomix-color-primary);
+    }
+
+    &:active {
+      background-color: var(--atomix-color-primary);
+      color: var(--atomix-color-background);
+      border-color: var(--atomix-color-primary);
+    }
+  }
+
+  // Card overrides (high contrast)
+  .c-card {
+    border: 3px solid var(--atomix-color-border);
+    border-radius: var(--atomix-radius-sm);
+    box-shadow: var(--atomix-shadow-sm);
+    background-color: var(--atomix-color-background);
+
+    &:hover {
+      border-color: var(--atomix-color-primary);
+      box-shadow: var(--atomix-shadow-md);
+    }
+
+    &:focus-within {
+      border-color: var(--atomix-color-primary);
+      box-shadow: var(--atomix-shadow-outline);
+    }
+  }
+}