@shohojdhara/atomix 0.3.3 → 0.3.4

package/README.md

@@ -42,60 +42,78 @@ function App() {
 
 ### 🎨 Theme Management
 
-Atomix provides a powerful, developer-friendly theming system with multiple options:
+Atomix provides a powerful, developer-friendly theming system with **Tailwind-like configuration**:
 
-#### Quick Start with Pre-built Themes
+#### Tailwind-like Configuration (Recommended)
 
-```jsx
-// Option 1: Import a pre-built theme
-import '@shohojdhara/atomix/themes/flashtrade.css';
+Create `atomix.config.ts` in your project root:
 
-// Option 2: Dynamic theme switching
-import { ThemeProvider, useTheme } from '@shohojdhara/atomix/theme';
+```typescript
+import { defineConfig } from '@shohojdhara/atomix/config';
+
+export default defineConfig({
+  theme: {
+    extend: {
+      colors: {
+        primary: { main: '#7AFFD7' },
+        secondary: { main: '#FF5733' },
+      },
+    },
+  },
+});
+```
+
+Use it in your app:
+
+```tsx
+import { loadAtomixConfig } from '@shohojdhara/atomix/config';
+import { createThemeFromConfig, ThemeProvider } from '@shohojdhara/atomix/theme';
+
+const config = loadAtomixConfig();
+const theme = createThemeFromConfig(config);
 
 function App() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultTheme={theme}>
       <YourApp />
     </ThemeProvider>
   );
 }
 ```
 
-#### Create Custom Themes
-
-```bash
-# Use the CLI to create a new theme
-npx atomix create-theme my-theme
+#### Quick Start with Themes
 
-# Build your theme
-npx atomix build-theme my-theme
+```jsx
+import { ThemeProvider, useTheme } from '@shohojdhara/atomix/theme';
 
-# List available themes
-npx atomix list-themes
+function App() {
+  return (
+    <ThemeProvider>
+      <YourApp />
+    </ThemeProvider>
+  );
+}
 ```
 
 #### Programmatic Theme Creation
 
 ```jsx
-import { quickTheme, ThemeProvider } from '@shohojdhara/atomix/theme-tools';
+import { createTheme, ThemeProvider } from '@shohojdhara/atomix/theme';
 
-const myTheme = quickTheme('My Brand', '#FF5733', '#33FF57');
+const myTheme = createTheme({
+  palette: {
+    primary: { main: '#7AFFD7' },
+  },
+});
 
 <ThemeProvider defaultTheme={myTheme}>
   <App />
 </ThemeProvider>
 ```
 
-**📦 Pre-built Themes:**
-- `shaj-default` - Default theme with light/dark modes (stable)
-- `flashtrade` - Crypto trading platform theme (stable)
-- `boomdevs` - Modern dark theme (beta)
-- `esrar` - Minimal light theme (beta)
-- `mashroom` - Psychedelic colorful theme (beta)
-- `applemix` - Apple-inspired glass morphism (experimental)
-
-For complete documentation, see [Developer Guide](docs/DEVELOPER_GUIDE.md) and [Theme System Guide](docs/THEME_SYSTEM.md).
+For complete documentation, see:
+- [Getting Started - Theme System](docs/getting-started/theme-system.md) - Quick start guide
+- [Theme System Guide](docs/THEME_SYSTEM.md) - Complete reference (includes guides for both external developers and library developers)
 
 
 ## Styles

package/dist/atomix.css

@@ -8016,7 +8016,7 @@ a, a:hover {
   --atomix-navbar-brand-font-size: 1.25rem;
   --atomix-navbar-brand-font-weight: 700;
   --atomix-navbar-brand-color: var(--atomix-body-color);
-  --atomix-navbar-toggler-size: 30px;
+  --atomix-navbar-toggler-size: 2rem;
   --atomix-navbar-toggler-color: var(--atomix-body-color);
   --atomix-navbar-toggler-bg: transparent;
   --atomix-navbar-toggler-border: 0;
@@ -8041,6 +8041,13 @@ a, a:hover {
   max-width: var(--atomix-navbar-container-max-width);
   padding: 0 var(--atomix-navbar-padding-x);
   margin: 0 auto;
+  gap: var(--atomix-navbar-padding-x);
+}
+@media (max-width: 767.98px) {
+  .c-navbar__container {
+    flex-wrap: nowrap;
+    gap: 0.5rem;
+  }
 }
 .c-navbar__brand {
   margin-right: var(--atomix-navbar-brand-margin-end);
@@ -8059,6 +8066,7 @@ a, a:hover {
   color: inherit;
 }
 .c-navbar__toggler {
+  position: relative;
   display: none;
   align-items: center;
   justify-content: center;
@@ -8083,15 +8091,11 @@ a, a:hover {
 }
 .c-navbar__toggler-icon {
   position: relative;
-  display: inline-block;
-  width: 1.5em;
-  height: 1.5em;
-  vertical-align: middle;
 }
 .c-navbar__toggler-icon::before, .c-navbar__toggler-icon::after, .c-navbar__toggler-icon {
   position: absolute;
   height: 2px;
-  width: 100%;
+  width: var(--atomix-navbar-toggler-size);
   background-color: var(--atomix-navbar-toggler-color);
   border-radius: 1px;
   transition: transform 0.15s ease;
@@ -8184,6 +8188,9 @@ a, a:hover {
   .c-navbar--collapsible .c-navbar__collapse {
     display: flex !important;
   }
+  .c-navbar--collapsible .c-navbar__toggler {
+    display: none !important;
+  }
 }
 .c-navbar--fixed:not(.c-navbar--glass), .c-navbar--fixed-bottom:not(.c-navbar--glass) {
   position: fixed;