@shohojdhara/atomix 0.3.14 → 0.3.15

package/src/styles/99-utilities/_utilities.text-gradient.scss

@@ -0,0 +1,45 @@
+// Text gradient utilities - requires special CSS properties
+// These utilities apply gradient colors to text using background-clip technique
+// Using utility generator system with advanced best practices
+
+@use 'sass:map';
+@use '../01-settings/settings.design-tokens' as *;
+
+// Define utilities for text gradients
+$utilities-text-gradient: (
+  // Base text gradient utility - applies the core text gradient properties
+  'text-gradient': (
+    property: null,  // No specific CSS property, we're only using local-vars
+    class: u-text-gradient,
+    values: (
+      // Base class with no modifier applies the core text gradient styles
+      'base': null
+    ),
+    local-vars: (
+      'background-clip': text,
+      '-webkit-background-clip': text,
+      '-webkit-text-fill-color': transparent
+    )
+  ),
+  
+  // Text gradient color variations using existing CSS gradient tokens
+  'text-gradient-colors': (
+    property: background-image,
+    class: u-text-gradient,
+    values: (
+      primary: var(--atomix-primary-gradient),
+      secondary: var(--atomix-secondary-gradient),
+      success: var(--atomix-success-gradient),
+      warning: var(--atomix-warning-gradient),
+      error: var(--atomix-error-gradient),
+      info: var(--atomix-info-gradient),
+      light: var(--atomix-light-gradient),
+      dark: var(--atomix-dark-gradient)
+    ),
+    local-vars: (
+      'background-clip': text,
+      '-webkit-background-clip': text,
+      '-webkit-text-fill-color': transparent
+    )
+  )
+);

package/themes/dark-complementary/README.md

@@ -0,0 +1,98 @@
+# dark-complementary Theme
+
+## Description
+
+The dark-complementary theme provides a modern dark theme with complementary colors optimized for low-light environments and reduced eye strain. This theme maintains excellent readability while providing a sophisticated dark aesthetic.
+
+## Usage
+
+### CSS Theme
+
+```scss
+@import 'themes/dark-complementary';
+```
+
+### JavaScript Theme
+
+```typescript
+import { darkComplementaryTheme } from './themes/dark-complementary';
+import { ThemeProvider } from '@shohojdhara/atomix/theme';
+
+function App() {
+  return (
+    <ThemeProvider theme={darkComplementaryTheme}>
+      {/* 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='dark-complementary'] {
+  --atomix-color-primary: #your-primary-color;
+  --atomix-color-background: #your-background-color;
+  // ... other variables
+}
+```
+
+### Background Customization
+
+For dark themes, consider the background hierarchy:
+
+```scss
+:root[data-theme='dark-complementary'] {
+  --atomix-color-background: #1a1a1a; // Main background
+  --atomix-color-background-paper: #2d2d2d; // Card/surface backgrounds
+  --atomix-color-background-subtle: #404040; // Hover states, subtle elements
+}
+```
+
+## Features
+
+- **Dark Mode Optimized**: Reduced blue light for better eye comfort
+- **High Contrast**: Maintained readability in low-light conditions
+- **Complementary Colors**: Brighter, more vibrant color palette for dark backgrounds
+- **Modern Design**: Clean aesthetic with enhanced shadows for depth
+- **Accessible**: Meets WCAG 2.1 AA standards with proper contrast ratios
+
+## Build
+
+```bash
+atomix build-theme themes/dark-complementary
+```
+
+## Color Palette
+
+- **Primary**: Light Blue (#4dabf7) - Brighter blue for dark backgrounds
+- **Secondary**: Light Gray (#868e96) - Muted for secondary elements
+- **Success**: Bright Green (#51cf66) - Highly visible success states
+- **Error**: Bright Red (#ff6b6b) - Attention-grabbing error states
+- **Warning**: Bright Yellow (#ffd43b) - Noticeable warning states
+- **Info**: Bright Cyan (#74c0fc) - Clear 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)
+- **Text Colors**: White primary (#ffffff), Light gray secondary (#cccccc)
+
+## Background Hierarchy
+
+- **Main Background**: Dark gray (#1a1a1a)
+- **Paper/Surface**: Medium dark gray (#2d2d2d)
+- **Subtle Elements**: Light medium gray (#404040)
+
+## Shadows
+
+Enhanced shadow definitions for better depth perception in dark themes:
+
+- Inner shadows use white tints for subtle highlights
+- Outer shadows use increased opacity for better definition

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.