@shohojdhara/atomix 0.3.1 → 0.3.3

package/src/themes/applemix/03-generic/_index.scss

@@ -0,0 +1,7 @@
+/*!
+ * Applemix Theme Generic Styles Index
+ * Generic styles and resets for the liquid glass theme
+ */
+
+// Forward base generic styles from the main design system
+@forward '../../../styles/03-generic/index';

package/src/themes/applemix/04-elements/_index.scss

@@ -0,0 +1,7 @@
+/*!
+ * Applemix Theme Element Styles Index
+ * Base element styles with liquid glass enhancements
+ */
+
+// Forward base element styles from the main design system
+@forward '../../../styles/04-elements/index';

package/src/themes/applemix/05-objects/_index.scss

@@ -0,0 +1,7 @@
+/*!
+ * Applemix Theme Object Styles Index
+ * Layout objects and structural components with glass effects
+ */
+
+// Forward base object styles from the main design system
+@forward '../../../styles/05-objects/index';

package/src/themes/applemix/06-components/_index.scss

@@ -0,0 +1,15 @@
+/*!
+ * Applemix Theme Components Index
+ * Component styles with liquid glass enhancements
+ */
+
+// Component overrides with Apple-inspired glass effects
+// @forward 'components.button';
+// @forward 'components.card';
+// @forward 'components.form';
+// @forward 'components.navbar';
+// @forward 'components.modal';
+// @forward 'components.footer';
+
+// Forward base component styles from the main design system
+@forward '../../../styles/06-components/index';

package/src/themes/applemix/99-utilities/_index.scss

@@ -0,0 +1,7 @@
+/*!
+ * Applemix Theme Utilities Index
+ * Utility classes with liquid glass effects
+ */
+
+// Forward base utility styles from the main design system
+@forward '../../../styles/99-utilities/index';

package/src/themes/applemix/README.md

@@ -0,0 +1,378 @@
+# Applemix Theme
+
+> Apple Mac OS 2026 Liquid Glass inspired theme for the Atomix Design System
+
+## Overview
+
+The Applemix theme brings the futuristic liquid glass aesthetics of Apple Mac OS 2026 to the Atomix Design System. It features advanced glass morphism effects, chromatic aberration, depth-based lighting, and smooth animations that create an immersive, modern interface experience.
+
+## Features
+
+- 🌊 **Liquid Glass Morphism**: Advanced backdrop filters with blur, saturation, and brightness effects
+- 🎨 **Apple-Inspired Color Palette**: Carefully crafted colors matching Apple's design language
+- ✨ **Chromatic Aberration**: Subtle color separation effects for enhanced visual depth
+- 🎭 **Multiple Glass Modes**: Standard, Polar, Prominent, and Shader effect variations
+- 📱 **Responsive Design**: Optimized performance across all device sizes
+- ♿ **Accessibility**: Full support for reduced motion and high contrast preferences
+- 🔧 **AtomixGlass Integration**: Seamless compatibility with existing AtomixGlass components
+
+## Installation
+
+The Applemix theme is included in the Atomix Design System. To use it in your project:
+
+```scss
+// Import the Applemix theme
+@use '@shohojdhara/atomix/themes/applemix' as applemix;
+```
+
+Or use the compiled CSS:
+
+```html
+<link rel="stylesheet" href="@shohojdhara/atomix/dist/themes/applemix.css">
+```
+
+## Usage
+
+### Basic Implementation
+
+Apply the theme using the data attribute:
+
+```html
+<div data-theme="applemix">
+  <!-- Your content here -->
+</div>
+```
+
+### AtomixGlass Components
+
+The theme enhances AtomixGlass components with Apple-inspired styling:
+
+```html
+<!-- Standard glass effect -->
+<div class="atomix-glass">
+  <div class="atomix-glass__content">
+    <h2>Glass Surface</h2>
+    <p>Content with liquid glass background</p>
+  </div>
+</div>
+
+<!-- Enhanced glass modes -->
+<div class="atomix-glass atomix-glass--polar">
+  <div class="atomix-glass__content">
+    <h2>Polar Glass Effect</h2>
+    <p>Enhanced with chromatic aberration</p>
+  </div>
+</div>
+```
+
+### Glass Cards
+
+```html
+<div class="atomix-glass-card">
+  <div class="atomix-glass-card__header">
+    <h3>Card Title</h3>
+  </div>
+  <div class="atomix-glass-card__body">
+    <p>Card content with glass morphism effects</p>
+  </div>
+  <div class="atomix-glass-card__footer">
+    <button class="btn">Action</button>
+  </div>
+</div>
+```
+
+### Glass Navigation
+
+```html
+<nav class="atomix-glass-nav">
+  <a href="#" class="nav-item active">Home</a>
+  <a href="#" class="nav-item">About</a>
+  <a href="#" class="nav-item">Contact</a>
+</nav>
+```
+
+## SCSS Mixins
+
+The theme provides powerful mixins for custom glass effects:
+
+### Basic Glass Surface
+
+```scss
+@use '@shohojdhara/atomix/themes/applemix/02-tools/tools.glass-mixins' as glass;
+
+.my-glass-element {
+  @include glass.glass-surface(
+    $mode: 'standard',
+    $depth: 'elevated',
+    $lighting: 'ambient',
+    $hover: true
+  );
+}
+```
+
+### Custom Glass Effects
+
+```scss
+.custom-glass {
+  // Base glass effect
+  @include glass.glass-base($blur: 16px, $opacity: 0.2);
+  
+  // Add chromatic aberration
+  @include glass.chromatic-aberration(2px);
+  
+  // Add hover effects
+  @include glass.glass-hover($lift: true, $glow: true);
+  
+  // Add focus effects
+  @include glass.glass-focus();
+}
+```
+
+### Glass Modes
+
+```scss
+.glass-variations {
+  // Standard mode
+  &.standard {
+    @include glass.glass-mode('standard');
+  }
+  
+  // Polar mode with aberration
+  &.polar {
+    @include glass.glass-mode('polar');
+  }
+  
+  // Prominent mode with enhanced effects
+  &.prominent {
+    @include glass.glass-mode('prominent');
+  }
+  
+  // Shader mode with maximum effects
+  &.shader {
+    @include glass.glass-mode('shader');
+  }
+}
+```
+
+## Color System
+
+### Primary Colors
+
+The Applemix theme uses Apple's System Blue as the primary color with glass-enhanced variations:
+
+```scss
+// CSS Custom Properties
+:root {
+  --applemix-primary-1: #f0f8ff;   // Ultra light blue glass
+  --applemix-primary-6: #007aff;   // Apple System Blue
+  --applemix-primary-10: #001a44;  // Deepest blue
+}
+```
+
+### Glass-Specific Colors
+
+```scss
+:root {
+  // Glass transparency levels
+  --applemix-glass-opacity-light: 0.1;
+  --applemix-glass-opacity-medium: 0.15;
+  --applemix-glass-opacity-strong: 0.25;
+  
+  // Chromatic aberration colors
+  --applemix-aberration-red: rgba(255, 0, 100, 0.3);
+  --applemix-aberration-green: rgba(0, 255, 150, 0.3);
+  --applemix-aberration-blue: rgba(0, 150, 255, 0.3);
+}
+```
+
+## Typography
+
+The theme uses Apple's San Francisco font family with optimized settings:
+
+```scss
+// Font families
+$font-family-base: (-apple-system, BlinkMacSystemFont, 'SF Pro Display', ...);
+
+// Apple-style scaling
+$h1-font-size: 3.5rem;    // Large Title
+$h2-font-size: 2.75rem;   // Title 1
+$h3-font-size: 2.25rem;   // Title 2
+```
+
+## Performance Optimization
+
+### Hardware Acceleration
+
+The theme automatically enables hardware acceleration for glass effects:
+
+```scss
+.atomix-glass {
+  will-change: backdrop-filter, background-color, transform;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+}
+```
+
+### Responsive Behavior
+
+Glass effects are automatically reduced on smaller screens:
+
+```scss
+@media (max-width: 768px) {
+  .atomix-glass {
+    backdrop-filter: blur(8px) saturate(1.5); // Reduced complexity
+  }
+}
+```
+
+### Reduced Motion Support
+
+The theme respects user preferences for reduced motion:
+
+```scss
+@media (prefers-reduced-motion: reduce) {
+  .atomix-glass {
+    backdrop-filter: none;
+    background-color: rgba(255, 255, 255, 0.9);
+    transition: none;
+  }
+}
+```
+
+## Customization
+
+### Theme Variables
+
+Override theme variables to customize the appearance:
+
+```scss
+@use '@shohojdhara/atomix/themes/applemix' with (
+  $glass-base-opacity: 0.2,
+  $glass-base-blur: 16px,
+  $aberration-intensity: 3px
+);
+```
+
+### Custom Glass Modes
+
+Create your own glass modes:
+
+```scss
+$custom-glass-modes: (
+  'subtle': (
+    'blur': 6px,
+    'opacity': 0.08,
+    'saturation': 1.5,
+    'brightness': 1.05,
+    'aberration': 0.5px
+  ),
+  'intense': (
+    'blur': 32px,
+    'opacity': 0.4,
+    'saturation': 3.0,
+    'brightness': 1.6,
+    'aberration': 5px
+  )
+);
+```
+
+## Browser Support
+
+The Applemix theme requires modern browsers with support for:
+
+- `backdrop-filter` (CSS Backdrop Filter)
+- CSS Custom Properties (CSS Variables)
+- CSS Grid and Flexbox
+- CSS Transforms and Transitions
+
+### Fallbacks
+
+For browsers without `backdrop-filter` support, the theme provides graceful fallbacks:
+
+```scss
+.atomix-glass {
+  background-color: rgba(255, 255, 255, 0.9); // Fallback
+  backdrop-filter: blur(12px); // Enhanced
+}
+```
+
+## Best Practices
+
+### Performance
+
+1. **Limit Glass Layers**: Avoid nesting multiple glass elements deeply
+2. **Use Hardware Acceleration**: The theme automatically optimizes for GPU rendering
+3. **Responsive Design**: Glass effects are automatically reduced on mobile devices
+
+### Accessibility
+
+1. **Contrast**: Ensure sufficient contrast ratios on glass surfaces
+2. **Motion**: The theme respects `prefers-reduced-motion` settings
+3. **Focus**: Clear focus indicators are provided for keyboard navigation
+
+### Design Guidelines
+
+1. **Hierarchy**: Use different glass depths to establish visual hierarchy
+2. **Content**: Ensure text remains readable on glass backgrounds
+3. **Consistency**: Use consistent glass modes throughout your interface
+
+## Examples
+
+### Hero Section
+
+```html
+<section class="hero atomix-glass atomix-glass--prominent">
+  <div class="atomix-glass__content">
+    <h1>Welcome to the Future</h1>
+    <p>Experience liquid glass interfaces</p>
+    <button class="btn btn-primary">Get Started</button>
+  </div>
+</section>
+```
+
+### Dashboard Card
+
+```html
+<div class="atomix-glass-card">
+  <div class="atomix-glass-card__header">
+    <h3>Analytics</h3>
+  </div>
+  <div class="atomix-glass-card__body">
+    <div class="stats">
+      <div class="stat">
+        <span class="value">1,234</span>
+        <span class="label">Users</span>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+### Modal Dialog
+
+```html
+<dialog class="atomix-glass-modal">
+  <div class="atomix-glass__content">
+    <h2>Confirm Action</h2>
+    <p>Are you sure you want to proceed?</p>
+    <div class="actions">
+      <button class="btn btn-secondary">Cancel</button>
+      <button class="btn btn-primary">Confirm</button>
+    </div>
+  </div>
+</dialog>
+```
+
+## Contributing
+
+When contributing to the Applemix theme:
+
+1. Follow the existing SCSS architecture
+2. Test across different browsers and devices
+3. Ensure accessibility compliance
+4. Update documentation for new features
+5. Maintain performance optimization
+
+## License
+
+The Applemix theme is part of the Atomix Design System and follows the same licensing terms.

package/src/themes/applemix/index.scss

@@ -0,0 +1,33 @@
+/*!
+ * Applemix Theme
+ * Apple Mac OS 2026 Liquid Glass inspired theme for Atomix Design System
+ *
+ * Features:
+ * - Liquid glass morphism effects
+ * - Apple-inspired color palette
+ * - Chromatic aberration effects
+ * - Smooth animations and transitions
+ * - AtomixGlass component integration
+ * - Light and dark mode support
+ */
+
+// Settings
+@use '01-settings' as *;
+
+// Tools
+@use '02-tools' as *;
+
+// Generic
+@use '03-generic' as *;
+
+// Elements
+@use '04-elements' as *;
+
+// Objects
+@use '05-objects' as *;
+
+// Components
+@use '06-components' as *;
+
+// Utilities
+@use '99-utilities' as *;

package/src/themes/boomdevs/01-settings/_index.scss

@@ -0,0 +1,38 @@
+/*!
+ * Boomdevs Theme Settings Index
+ * Define any custom settings for the Boomdevs theme
+ */
+
+@forward 'settings.colors';
+@forward 'settings.spacing';
+@forward 'settings.typography';
+@forward 'settings.border';
+@forward 'settings.border-radius';
+@forward 'settings.accordion';
+@forward 'settings.animations';
+@forward 'settings.avatar';
+@forward 'settings.badge';
+@forward 'settings.box-shadow';
+@forward 'settings.breadcrumb';
+@forward 'settings.breakpoints';
+@forward 'settings.button';
+@forward 'settings.callout';
+@forward 'settings.card';
+@forward 'settings.checkbox';
+@forward 'settings.dropdown';
+@forward 'settings.grid';
+@forward 'settings.input';
+@forward 'settings.link';
+@forward 'settings.list';
+@forward 'settings.modal';
+@forward 'settings.navbar';
+@forward 'settings.pagination';
+@forward 'settings.progress';
+@forward 'settings.rating';
+@forward 'settings.spinner';
+@forward 'settings.steps';
+@forward 'settings.tabs';
+@forward 'settings.todo';
+@forward 'settings.toggle';
+@forward 'settings.tooltip';
+@forward 'settings.video-player';

package/src/themes/boomdevs/01-settings/_settings.accordion.scss

@@ -0,0 +1,12 @@
+/*!
+ * Boomdevs Theme Accordion Settings
+ * Custom accordion styles for the Boomdevs theme
+ */
+
+@use '../../../styles/01-settings/settings.accordion' with (
+  $accordion-border-width: 1px,
+  $accordion-border-radius: 8px,
+  $accordion-header-bg: var(--atomix-light),
+  $accordion-body-bg: var(--atomix-light),
+  $accordion-icon-color: var(--atomix-primary)
+);

package/src/themes/boomdevs/01-settings/_settings.animations.scss

@@ -0,0 +1,11 @@
+/*!
+ * Boomdevs Theme Animations Settings
+ * Custom animations styles for the Boomdevs theme
+ */
+
+@use '../../../styles/01-settings/settings.animations' with (
+  $transition-duration: 0.25s,
+  $easing: cubic-bezier(0.4, 0, 0.2, 1),
+  $transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+  $transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
+);

package/src/themes/boomdevs/01-settings/_settings.avatar.scss

@@ -0,0 +1,9 @@
+/*!
+ * Boomdevs Theme Avatar Settings
+ * Custom avatar styles for the Boomdevs theme
+ */
+
+@use '../../../styles/01-settings/settings.avatar' with (
+  $avatar-initials-font-weight: 600,
+  $avatar-focus-ring-color: var(--atomix-primary)
+);

package/src/themes/boomdevs/01-settings/_settings.badge.scss

@@ -0,0 +1,11 @@
+/*!
+ * Boomdevs Theme Badge Settings
+ * Custom badge styles for the Boomdevs theme
+ */
+
+@use '../../../styles/01-settings/settings.badge' with (
+  $badge-font-weight: 600,
+  $badge-padding-x: 12px,
+  $badge-padding-y: 6px,
+  $badge-border-radius: 6px
+);

package/src/themes/boomdevs/01-settings/_settings.border-radius.scss

@@ -0,0 +1,16 @@
+/*!
+ * Boomdevs Theme Border Radius Settings
+ * Custom border radius styles for the Boomdevs theme
+ */
+
+@use '../../../styles/01-settings/settings.border-radius' with (
+  $border-radius: 0.5rem,
+  $border-radius-sm: 0.25rem,
+  $border-radius-md: 0.5rem,
+  $border-radius-lg: 0.75rem,
+  $border-radius-xl: 1rem,
+  $border-radius-xxl: 1.25rem,
+  $border-radius-3xl: 1.5rem,
+  $border-radius-4xl: 2rem,
+  $border-radius-pill: 50rem
+);

package/src/themes/boomdevs/01-settings/_settings.border.scss

@@ -0,0 +1,10 @@
+/*!
+ * Boomdevs Theme Border Settings
+ * Custom border styles for the Boomdevs theme
+ */
+
+@use '../../../styles/01-settings/settings.border' with (
+  $border-color: var(--atomix-gray-4),
+  $border-width: 1px,
+  $border-style: solid
+);

package/src/themes/boomdevs/01-settings/_settings.box-shadow.scss

@@ -0,0 +1,14 @@
+/*!
+ * Boomdevs Theme Box Shadow Settings
+ * Custom box shadow styles for the Boomdevs theme
+ */
+
+@use '../../../styles/01-settings/settings.box-shadow' with (
+  $box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08),
+  $box-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04),
+  $box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06),
+  $box-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1),
+  $box-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12),
+  $box-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15),
+  $box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.05)
+);

package/src/themes/boomdevs/01-settings/_settings.breadcrumb.scss

@@ -0,0 +1,13 @@
+/*!
+ * Boomdevs Theme Breadcrumb Settings
+ * Custom breadcrumb styles for the Boomdevs theme
+ */
+
+@use '../../../styles/01-settings/settings.breadcrumb' with (
+  $breadcrumb-font-size: 0.875rem,
+  $breadcrumb-color: var(--atomix-gray-7),
+  $breadcrumb-hover-color: var(--atomix-brand-text-emphasis),
+  $breadcrumb-active-color: var(--atomix-gray-10),
+  $breadcrumb-divider-color: var(--atomix-gray-6),
+  $breadcrumb-divider: '/'
+);

package/src/themes/boomdevs/01-settings/_settings.breakpoints.scss

@@ -0,0 +1,15 @@
+/*!
+ * Boomdevs Theme Breakpoints Settings
+ * Custom breakpoints for the Boomdevs theme
+ */
+
+@use '../../../styles/01-settings/settings.breakpoints' with (
+  $grid-breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1440px,
+  )
+);

package/src/themes/boomdevs/01-settings/_settings.button.scss

@@ -0,0 +1,9 @@
+/*!
+ * Boomdevs Theme Button Settings
+ * Custom button styles for the Boomdevs theme
+ */
+
+@use '../../../styles/01-settings/settings.button' with (
+  $btn-border-radius: 6px,
+  $btn-font-weight: 600
+);

package/src/themes/boomdevs/01-settings/_settings.callout.scss

@@ -0,0 +1,9 @@
+/*!
+ * Boomdevs Theme Callout Settings
+ * Custom callout styles for the Boomdevs theme
+ */
+
+@use '../../../styles/01-settings/settings.callout' with (
+  $callout-border-radius: 6px,
+  $callout-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)
+);

package/src/themes/boomdevs/01-settings/_settings.card.scss

@@ -0,0 +1,11 @@
+/*!
+ * Boomdevs Theme Card Settings
+ * Custom card styles for the Boomdevs theme
+ */
+
+@use '../../../styles/01-settings/settings.card' with (
+  $card-border-radius: 8px,
+  $card-boxshadow: 0 4px 12px rgba(0, 0, 0, 0.08),
+  $card-hover-box-shadow: 0 6px 16px rgba(0, 97, 255, 0.12),
+  $card-border-width: 1px
+);

package/src/themes/boomdevs/01-settings/_settings.checkbox.scss

@@ -0,0 +1,9 @@
+/*!
+ * Boomdevs Theme Checkbox Settings
+ * Custom checkbox styles for the Boomdevs theme
+ */
+
+@use '../../../styles/01-settings/settings.checkbox' with (
+  $checkbox-checked-bg: var(--atomix-primary),
+  $checkbox-border-color-hover: var(--atomix-primary)
+);