@shohojdhara/atomix 0.3.1 → 0.3.3

package/src/themes/shaj-default/06-components/_components.navbar.scss

@@ -0,0 +1,99 @@
+/*!
+ * Shaj Default Theme Navbar Component Overrides
+ * Additional styling for modern navbar aesthetics
+ */
+@use '../01-settings/settings.config' as *;
+
+.c-navbar {
+  // Enhanced backdrop blur effect
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+
+  // Subtle border
+  border-bottom: 1px solid var(--#{$prefix}gray-2);
+
+  // Brand styling
+  .c-navbar-brand {
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    color: var(--#{$prefix}gray-9);
+
+    &:hover {
+      color: var(--#{$prefix}primary-6);
+    }
+  }
+
+  // Nav links
+  .c-navbar-nav {
+    .c-nav-link {
+      font-weight: 500;
+      color: var(--#{$prefix}gray-7);
+      transition: all 200ms ease-in-out;
+      position: relative;
+
+      &:hover {
+        color: var(--#{$prefix}primary-6);
+      }
+
+      &.active {
+        color: var(--#{$prefix}primary-6);
+        font-weight: 600;
+
+        // Active indicator
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: -8px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 4px;
+          height: 4px;
+          background: var(--#{$prefix}primary-6);
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+
+  // Mobile toggler
+  .c-navbar-toggler {
+    border: none;
+    padding: 8px;
+
+    &:focus {
+      box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.25);
+    }
+
+    .c-navbar-toggler-icon {
+      background-image: none;
+      width: 20px;
+      height: 2px;
+      background: var(--#{$prefix}gray-7);
+      position: relative;
+      transition: all 200ms ease-in-out;
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        width: 20px;
+        height: 2px;
+        background: var(--#{$prefix}gray-7);
+        transition: all 200ms ease-in-out;
+      }
+
+      &::before {
+        top: -6px;
+      }
+
+      &::after {
+        bottom: -6px;
+      }
+    }
+  }
+
+  // Fixed navbar styling
+  &.c-navbar-fixed {
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  }
+}

package/src/themes/shaj-default/06-components/_index.scss

@@ -0,0 +1,13 @@
+/*!
+ * Shaj Default Theme Component Overrides
+ * Additional component styling for modern aesthetics
+ */
+
+@use '../01-settings/settings.config' as *;
+
+// Import component overrides
+@forward './components.button';
+@forward './components.card';
+@forward './components.input';
+@forward './components.navbar';
+@forward './components.tooltip';

package/src/themes/shaj-default/index.scss

@@ -0,0 +1,25 @@
+/*!
+ * Atomix Design System theme Shaj Default
+ */
+
+// Import and forward local theme settings first (these override base settings)
+@use '01-settings/index' as *;
+
+// Import and forward base styles with local overrides
+@use '02-tools/index' as *;
+@use '../../styles/02-tools/index' as tools;
+
+@use '03-generic/index' as *;
+@use '../../styles/03-generic/index' as generic;
+
+@use '04-elements/index' as *;
+@use '../../styles/04-elements/index' as elements;
+
+@use '05-objects/index' as *;
+@use '../../styles/05-objects/index' as objects;
+
+@use '06-components/index' as *;
+@use '../../styles/06-components/index';
+
+@use '99-utilities/index' as *;
+@use '../../styles/99-utilities/index' as utilities;

package/src/themes/themes.config.js

@@ -0,0 +1,219 @@
+/**
+ * Theme Configuration
+ *
+ * This file is auto-generated from theme.config.ts
+ * DO NOT EDIT MANUALLY - Edit theme.config.ts instead
+ * Run 'npm run sync:config' to regenerate
+ * 
+ * Generated on: 2025-12-18T01:03:26.168Z
+ */
+
+export const themesConfig = {
+  // 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"
+        ]
+    }
+},
+
+  // Build configuration
+  build: {
+    output: {
+        directory: "themes",
+        formats: {
+            expanded: ".css",
+            compressed: ".min.css"
+        }
+    },
+    sass: {
+        style: "expanded",
+        sourceMap: true,
+        loadPaths: [
+            "src"
+        ]
+    }
+},
+
+  // Export configuration for package.json
+  exports: {
+    './themes/*': './dist/themes/*.css',
+    './themes/*.min': './dist/themes/*.min.css',
+  },
+
+  // Theme integration settings
+  integration: {
+    cssVariables: {
+        colorMode: "--storybook-color-mode"
+    },
+    classNames: {
+        theme: "data-theme",
+        colorMode: "data-atomix-color-mode"
+    }
+},
+
+  // 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'
+},
+
+  // Theme dependencies (if a theme requires another theme to be loaded)
+  dependencies: {},
+};