@shohojdhara/atomix 0.3.3 → 0.3.4

package/src/lib/types/components.ts

@@ -261,13 +261,7 @@ export type Size = 'sm' | 'md' | 'lg';
 /**
  * Available theme variants in the Shaj theme system
  */
-export type ThemeName =
-  | 'shaj-default'
-  | 'shaj-ocean'
-  | 'shaj-sunset'
-  | 'shaj-forest'
-  | 'shaj-midnight'
-  | 'shaj-pastel';
+export type ThemeName = string;
 
 // ============================================================================
 // END THEME SYSTEM TYPES
@@ -412,19 +406,19 @@ export interface ButtonProps extends BaseComponentProps {
    * Button size
    */
   size?: Size;
-  
+
   /**
    * Part-based styling (NEW)
    * Allows styling individual button parts
    */
   parts?: ButtonParts;
-  
+
   /**
    * CSS variable overrides (NEW)
    * Runtime CSS custom property overrides
    */
   cssVars?: Partial<Record<ButtonCSSVariable, string | number>>;
-  
+
   /**
    * Slot-based customization (NEW)
    * Complete control over rendering
@@ -1383,16 +1377,16 @@ export interface SideMenuProps extends BaseComponentProps {
       active?: boolean | undefined;
       disabled?: boolean | undefined;
       as?:
-        | React.ComponentType<{
-            href?: string;
-            to?: string;
-            children: React.ReactNode;
-            className?: string;
-            onClick?: (event: React.MouseEvent) => void;
-            target?: string;
-            rel?: string;
-          }>
-        | undefined;
+      | React.ComponentType<{
+        href?: string;
+        to?: string;
+        children: React.ReactNode;
+        className?: string;
+        onClick?: (event: React.MouseEvent) => void;
+        target?: string;
+        rel?: string;
+      }>
+      | undefined;
     }>;
   }>;
 }
@@ -3418,17 +3412,17 @@ export interface VideoPlayerProps extends BaseComponentProps {
    * - object: Custom glass configuration
    */
   glass?:
-    | boolean
-    | {
-        displacementScale?: number;
-        blurAmount?: number;
-        saturation?: number;
-        aberrationIntensity?: number;
-        elasticity?: number;
-        cornerRadius?: number;
-        mode?: 'standard' | 'polar' | 'prominent' | 'shader';
-        overLight?: boolean;
-      };
+  | boolean
+  | {
+    displacementScale?: number;
+    blurAmount?: number;
+    saturation?: number;
+    aberrationIntensity?: number;
+    elasticity?: number;
+    cornerRadius?: number;
+    mode?: 'standard' | 'polar' | 'prominent' | 'shader';
+    overLight?: boolean;
+  };
 
   /**
    * Glass overlay opacity (0-1) when glass variant is enabled
@@ -4816,23 +4810,23 @@ export interface SliderProps extends BaseComponentProps {
    * Whether to enable mouse wheel control
    */
   mousewheel?:
-    | boolean
-    | {
-        forceToAxis?: boolean;
-        sensitivity?: number;
-        releaseOnEdges?: boolean;
-      };
+  | boolean
+  | {
+    forceToAxis?: boolean;
+    sensitivity?: number;
+    releaseOnEdges?: boolean;
+  };
 
   /**
    * Whether to enable keyboard control
    */
   keyboard?:
-    | boolean
-    | {
-        enabled?: boolean;
-        onlyInViewport?: boolean;
-        pageUpDown?: boolean;
-      };
+  | boolean
+  | {
+    enabled?: boolean;
+    onlyInViewport?: boolean;
+    pageUpDown?: boolean;
+  };
 
   /**
    * Whether to grab cursor on hover (default: true)
@@ -4895,16 +4889,16 @@ export interface SliderProps extends BaseComponentProps {
    * Whether to free mode (no snap to slides)
    */
   freeMode?:
-    | boolean
-    | {
-        enabled?: boolean;
-        sticky?: boolean;
-        momentumRatio?: number;
-        momentumVelocityRatio?: number;
-        momentumBounce?: boolean;
-        momentumBounceRatio?: number;
-        minimumVelocity?: number;
-      };
+  | boolean
+  | {
+    enabled?: boolean;
+    sticky?: boolean;
+    momentumRatio?: number;
+    momentumVelocityRatio?: number;
+    momentumBounce?: boolean;
+    momentumBounceRatio?: number;
+    minimumVelocity?: number;
+  };
 
   /**
    * Whether to watch for slides and wrapper size changes
@@ -4940,23 +4934,23 @@ export interface SliderProps extends BaseComponentProps {
    * Hash navigation
    */
   hashNavigation?:
-    | boolean
-    | {
-        watchState?: boolean;
-        replaceState?: boolean;
-      };
+  | boolean
+  | {
+    watchState?: boolean;
+    replaceState?: boolean;
+  };
 
   /**
    * History navigation
    */
   history?:
-    | boolean
-    | {
-        enabled?: boolean;
-        root?: string;
-        replaceState?: boolean;
-        key?: string;
-      };
+  | boolean
+  | {
+    enabled?: boolean;
+    root?: string;
+    replaceState?: boolean;
+    key?: string;
+  };
 
   /**
    * Controller configuration
@@ -4971,16 +4965,16 @@ export interface SliderProps extends BaseComponentProps {
    * A11y configuration
    */
   a11y?:
-    | boolean
-    | {
-        enabled?: boolean;
-        prevSlideMessage?: string;
-        nextSlideMessage?: string;
-        firstSlideMessage?: string;
-        lastSlideMessage?: string;
-        paginationBulletMessage?: string;
-        notificationClass?: string;
-      };
+  | boolean
+  | {
+    enabled?: boolean;
+    prevSlideMessage?: string;
+    nextSlideMessage?: string;
+    firstSlideMessage?: string;
+    lastSlideMessage?: string;
+    paginationBulletMessage?: string;
+    notificationClass?: string;
+  };
 
   /**
    * Slide change callback

package/src/styles/01-settings/_settings.navbar.scss

@@ -24,7 +24,7 @@ $navbar-brand-font-weight: $font-weight-bold !default;
 $navbar-brand-color: var(--#{$prefix}body-color) !default;
 
 // Mobile toggler
-$navbar-toggler-size: 30px !default;
+$navbar-toggler-size: 2rem !default; 
 $navbar-toggler-color: var(--#{$prefix}body-color) !default;
 $navbar-toggler-bg: transparent !default;
 $navbar-toggler-border: 0 !default;

package/src/styles/03-generic/_generated-root.css

@@ -0,0 +1,5 @@
+/* AUTO-GENERATED - DO NOT EDIT MANUALLY */
+
+:root {
+  --atomix-colors-primary-main: #3b82f6;
+}

package/src/styles/06-components/_components.navbar.scss

@@ -48,6 +48,12 @@
     max-width: var(--#{$prefix}navbar-container-max-width);
     padding: 0 var(--#{$prefix}navbar-padding-x);
     margin: 0 auto;
+    gap: var(--#{$prefix}navbar-padding-x);
+
+    @include media.media-down('md') {
+      flex-wrap: nowrap;
+      gap: 0.5rem;
+    }
   }
 
   // 3. Element Styles (BEM Elements)
@@ -72,6 +78,7 @@
   }
 
   &__toggler {
+    position: relative;
     display: none;
     align-items: center;
     justify-content: center;
@@ -99,17 +106,13 @@
 
     &-icon {
       position: relative;
-      display: inline-block;
-      width: 1.5em;
-      height: 1.5em;
-      vertical-align: middle;
 
       &::before,
       &::after,
       & {
         position: absolute;
         height: 2px;
-        width: 100%;
+        width: var(--#{$prefix}navbar-toggler-size);
         background-color: var(--#{$prefix}navbar-toggler-color);
         border-radius: 1px;
         transition: transform 0.15s ease;
@@ -228,6 +231,10 @@
       #{$root}__collapse {
         display: flex !important;
       }
+
+      #{$root}__toggler {
+        display: none !important;
+      }
     }
   }
 

package/src/themes/README.md

@@ -1,8 +1,7 @@
-# Atomix Design System Themes
 
 # Atomix Design System Themes
 
-This guide documents how to build SCSS-based themes for the Atomix Design System, using the existing `shaj-default` theme as the reference implementation. It covers the architecture, creation process, best practices, testing and validation, and maintenance guidelines. Real code excerpts are taken from `./src/themes/shaj-default` to ensure your new themes align with the established patterns.
+This guide documents how to build SCSS-based themes for the Atomix Design System
 
 ## Theme Architecture
 

package/src/themes/themes.config.js

@@ -1,186 +1,22 @@
 /**
  * Theme Configuration
  *
- * This file is auto-generated from theme.config.ts
- * DO NOT EDIT MANUALLY - Edit theme.config.ts instead
+ * This file is auto-generated from atomix.config.ts
+ * DO NOT EDIT MANUALLY - Edit atomix.config.ts instead
  * Run 'npm run sync:config' to regenerate
  * 
- * Generated on: 2025-12-18T01:03:26.168Z
+ * Generated on: 2025-12-21T16:24:42.905Z
  */
 
 export const themesConfig = {
+  // CSS variable prefix (from atomix.config.ts)
+  prefix: 'atomix',
+  
   // Theme metadata
-  metadata: {
-    shaj-default: {
-        name: "Shaj Default",
-        description: "The default theme for the Atomix Design System",
-        author: "Shohoj Dhara",
-        version: "1.0.0",
-        tags: [
-            "default",
-            "light"
-        ],
-        supportsDarkMode: true,
-        status: "stable",
-        a11y: {
-            contrastTarget: 4.5,
-            modes: [
-                "light",
-                "dark"
-            ]
-        },
-        color: "#3b82f6"
-    },
-    boomdevs: {
-        name: "BoomDevs",
-        description: "BoomDevs theme for the Atomix Design System",
-        author: "BoomDevs Team",
-        version: "1.0.0",
-        tags: [
-            "dark",
-            "modern"
-        ],
-        supportsDarkMode: true,
-        status: "beta",
-        a11y: {
-            contrastTarget: 4.5,
-            modes: [
-                "light",
-                "dark"
-            ]
-        },
-        color: "#8b5cf6"
-    },
-    esrar: {
-        name: "Esrar",
-        description: "Esrar theme for the Atomix Design System",
-        author: "Esrar Team",
-        version: "1.0.0",
-        tags: [
-            "light",
-            "minimal"
-        ],
-        supportsDarkMode: true,
-        status: "beta",
-        a11y: {
-            contrastTarget: 4.5,
-            modes: [
-                "light",
-                "dark"
-            ]
-        },
-        color: "#10b981"
-    },
-    mashroom: {
-        name: "Mashroom",
-        description: "Mashroom theme for the Atomix Design System",
-        author: "Mashroom Team",
-        version: "1.0.0",
-        tags: [
-            "dark",
-            "contrast"
-        ],
-        supportsDarkMode: true,
-        status: "beta",
-        a11y: {
-            contrastTarget: 4.5,
-            modes: [
-                "light",
-                "dark"
-            ]
-        },
-        color: "#f59e0b"
-    },
-    applemix: {
-        name: "Applemix",
-        description: "Apple Mac OS 2026 Liquid Glass inspired theme with morphism effects",
-        author: "Atomix Design System",
-        version: "1.0.0",
-        tags: [
-            "glass",
-            "apple",
-            "modern",
-            "liquid",
-            "morphism"
-        ],
-        supportsDarkMode: true,
-        status: "experimental",
-        a11y: {
-            contrastTarget: 4.5,
-            modes: [
-                "light",
-                "dark"
-            ]
-        },
-        color: "#f5f5f5",
-        features: [
-            "Liquid glass morphism effects",
-            "Apple-inspired color palette",
-            "Chromatic aberration effects",
-            "Smooth animations and transitions",
-            "AtomixGlass component integration",
-            "Comprehensive component overrides",
-            "Light and dark mode support"
-        ]
-    },
-    flashtrade: {
-        name: "Flash Trade",
-        description: "Professional dark crypto perpetuals trading platform theme inspired by flash.trade",
-        author: "Atomix Design System",
-        version: "1.1.0",
-        tags: [
-            "dark",
-            "crypto",
-            "trading",
-            "glass",
-            "modern",
-            "decentralized",
-            "defi"
-        ],
-        supportsDarkMode: true,
-        status: "stable",
-        a11y: {
-            contrastTarget: 4.5,
-            modes: [
-                "dark"
-            ]
-        },
-        color: "#06b6d4",
-        features: [
-            "Ultra-dark trading interface aesthetic matching flash.trade",
-            "Bright cyan (#06b6d4) primary color for brand consistency",
-            "High contrast for financial data readability",
-            "Trading-focused color palette (green for long/profit, red for short/loss)",
-            "Glass morphism effects for modern UI depth",
-            "Optimized Inter typography for trading information",
-            "Fast animations for real-time data updates",
-            "Professional navbar with asset selector bar",
-            "Trading cards with hover effects and glass morphism",
-            "Comprehensive button styles for trading actions",
-            "Price change badges with glow effects",
-            "Responsive mobile-first design",
-            "AtomixGlass component integration"
-        ]
-    }
-},
+  metadata: {},
 
   // Build configuration
-  build: {
-    output: {
-        directory: "themes",
-        formats: {
-            expanded: ".css",
-            compressed: ".min.css"
-        }
-    },
-    sass: {
-        style: "expanded",
-        sourceMap: true,
-        loadPaths: [
-            "src"
-        ]
-    }
-},
+  build: {},
 
   // Export configuration for package.json
   exports: {
@@ -189,30 +25,10 @@ export const themesConfig = {
   },
 
   // Theme integration settings
-  integration: {
-    cssVariables: {
-        colorMode: "--storybook-color-mode"
-    },
-    classNames: {
-        theme: "data-theme",
-        colorMode: "data-atomix-color-mode"
-    }
-},
+  integration: {},
 
   // Runtime theme loading configuration
-  runtime: {
-    basePath: "/themes",
-    cdnPath: null,
-    preload: [
-        "shaj-default"
-    ],
-    lazy: true,
-    defaultTheme: "shaj-default",
-    storageKey: "atomix-theme",
-    dataAttribute: "data-theme",
-    enablePersistence: true,
-    useMinified: process.env.NODE_ENV === 'production'
-},
+  runtime: {},
 
   // Theme dependencies (if a theme requires another theme to be loaded)
   dependencies: {},