@shohojdhara/atomix 0.2.8 → 0.3.0

package/CHANGELOG.md

@@ -7,6 +7,66 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.3.0] - 2025-12-03
+
+### Added
+
+#### Theme Manager System
+- **Theme Manager Class**: Core theme management for vanilla JavaScript applications
+  - Dynamic theme loading with CSS file management
+  - Theme persistence using localStorage
+  - Event system for theme changes (`themeChange`, `themeLoad`, `themeError`)
+  - Theme preloading for faster switching
+  - SSR-safe implementation
+  - Comprehensive error handling
+
+- **React Integration**:
+  - `ThemeProvider` component for React applications
+  - `useTheme` hook for accessing theme state
+  - `ThemeContext` for context-based state management
+  - Loading and error states
+  - Automatic cleanup on unmount
+
+- **TypeScript Support**:
+  - Complete type definitions for all theme utilities
+  - `ThemeMetadata`, `ThemeManagerConfig`, `ThemeChangeEvent` interfaces
+  - Type-safe event system
+  - Full IntelliSense support
+
+- **Package Exports**:
+  - `@shohojdhara/atomix/theme` - Theme manager utilities
+  - `@shohojdhara/atomix/themes/config` - Theme configuration
+
+- **Documentation**:
+  - Comprehensive theme manager guide (`docs/THEME_MANAGER.md`)
+  - React usage examples
+  - Vanilla JavaScript examples
+  - API reference
+  - Migration guide
+  - Troubleshooting section
+
+- **Runtime Configuration**:
+  - Added runtime section to `themes.config.js`
+  - Support for CDN paths
+  - Theme preloading configuration
+  - Theme dependencies mapping
+
+### Changed
+- Updated `README.md` with theme manager usage examples
+- Enhanced `themes.config.js` with runtime configuration options
+- Updated `src/lib/index.ts` to export theme utilities
+
+### Features
+- 🎨 Dynamic theme switching without page reload
+- 💾 Automatic theme persistence across sessions
+- ⚡ Theme preloading for instant switching
+- 🔒 Full TypeScript support
+- ♿ SSR compatible (Next.js, Remix, etc.)
+- 🎯 Works with React and vanilla JavaScript
+- 📦 Zero breaking changes to existing API
+
+## [0.2.9] - 2025-01-29
+
 ## [0.2.8] - 2025-01-28
 
 ## [0.2.7] - 2025-01-27

package/README.md

@@ -32,7 +32,6 @@ npm install @shohojdhara/atomix
 
 ### React
 
-```jsx
 import { Button } from '@shohojdhara/atomix';
 import '@shohojdhara/atomix/css';
 
@@ -41,6 +40,46 @@ function App() {
 }
 ```
 
+### Theme Management
+
+Atomix includes a powerful theme manager for dynamic theme switching:
+
+```jsx
+import { ThemeProvider, useTheme } from '@shohojdhara/atomix/theme';
+import { themesConfig } from '@shohojdhara/atomix/themes/config';
+
+function App() {
+  return (
+    <ThemeProvider themes={themesConfig.metadata} defaultTheme="shaj-default">
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+
+function ThemeSwitcher() {
+  const { theme, setTheme, availableThemes } = useTheme();
+  
+  return (
+    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
+      {availableThemes.map(t => (
+        <option key={t.class} value={t.class}>{t.name}</option>
+      ))}
+    </select>
+  );
+}
+```
+
+**Available Themes:**
+- `shaj-default` - Default theme (stable)
+- `flashtrade` - Crypto trading platform theme (stable)
+- `boomdevs` - BoomDevs theme (beta)
+- `esrar` - Esrar theme (beta)
+- `mashroom` - Mashroom theme (beta)
+- `applemix` - Apple-inspired glass morphism theme (experimental)
+
+For detailed theme manager documentation, see [Theme Manager Guide](docs/THEME_MANAGER.md).
+
+
 ## Styles
 
 Atomix provides comprehensive styling through CSS or SCSS:

package/dist/atomix.css

@@ -3028,6 +3028,10 @@ a, a:hover {
 .c-card--filled {
   background-color: var(--atomix-card-bg);
 }
+.c-card--glass {
+  max-width: none;
+  background-color: color-mix(in srgb, var(--atomix-card-bg) 50%, transparent);
+}
 .c-card--outlined {
   background-color: transparent;
   border-width: var(--atomix-card-border-width);
@@ -3037,22 +3041,22 @@ a, a:hover {
   border: none;
 }
 .c-card--elevated {
-  box-shadow: var(--atomix-box-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--atomix-box-shadow-md);
 }
 .c-card--elevation-none {
   box-shadow: none;
 }
 .c-card--elevation-sm {
-  box-shadow: var(--atomix-box-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  box-shadow: var(--atomix-box-shadow-sm);
 }
 .c-card--elevation-md {
-  box-shadow: var(--atomix-box-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--atomix-box-shadow-md);
 }
 .c-card--elevation-lg {
-  box-shadow: var(--atomix-box-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--atomix-box-shadow-lg);
 }
 .c-card--elevation-xl {
-  box-shadow: var(--atomix-box-shadow-xl, 0 20px 25px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--atomix-box-shadow-xl);
 }
 .c-card--disabled {
   opacity: 0.6;
@@ -3074,7 +3078,7 @@ a, a:hover {
   content: "";
   position: absolute;
   inset: 0;
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: var(--atomix-card-bg-hover);
   -webkit-backdrop-filter: blur(1px);
           backdrop-filter: blur(1px);
   z-index: 1;
@@ -3086,7 +3090,7 @@ a, a:hover {
 .c-card--selected {
   --atomix-card-border-color: var(--atomix-brand-border-subtle);
   --atomix-card-border-width: 2px;
-  box-shadow: var(--atomix-box-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--atomix-box-shadow-md);
 }
 .c-card--interactive {
   cursor: pointer;
@@ -3094,7 +3098,7 @@ a, a:hover {
 }
 .c-card--interactive:hover:not(.c-card--interactive--disabled) {
   transform: translateY(-2px);
-  box-shadow: var(--atomix-box-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--atomix-box-shadow-lg);
 }
 .c-card--interactive:active:not(.c-card--interactive--disabled) {
   transform: translateY(0);
@@ -3104,54 +3108,66 @@ a, a:hover {
   --atomix-card-bg-hover: var(--atomix-brand-bg-subtle);
   --atomix-card-border-color: var(--atomix-brand-border-subtle);
   --atomix-card-title-color: var(--atomix-brand-text-emphasis);
+  --atomix-card-icon-bg: var(--atomix-brand-text-emphasis);
+  --atomix-card-icon-color: var(--atomix-brand-bg-subtle);
 }
 .c-card--secondary {
   --atomix-card-bg: var(--atomix-secondary-bg-subtle);
   --atomix-card-bg-hover: var(--atomix-secondary-bg-subtle);
   --atomix-card-border-color: var(--atomix-secondary-border-subtle);
   --atomix-card-title-color: var(--atomix-secondary-text-emphasis);
+  --atomix-card-icon-bg: var(--atomix-secondary-text-emphasis);
+  --atomix-card-icon-color: var(--atomix-secondary-bg-subtle);
 }
 .c-card--success {
   --atomix-card-bg: var(--atomix-success-bg-subtle);
   --atomix-card-bg-hover: var(--atomix-success-bg-subtle);
   --atomix-card-border-color: var(--atomix-success-border-subtle);
   --atomix-card-title-color: var(--atomix-success-text-emphasis);
+  --atomix-card-icon-bg: var(--atomix-success-text-emphasis);
+  --atomix-card-icon-color: var(--atomix-success-bg-subtle);
 }
 .c-card--info {
   --atomix-card-bg: var(--atomix-info-bg-subtle);
   --atomix-card-bg-hover: var(--atomix-info-bg-subtle);
   --atomix-card-border-color: var(--atomix-info-border-subtle);
   --atomix-card-title-color: var(--atomix-info-text-emphasis);
+  --atomix-card-icon-bg: var(--atomix-info-text-emphasis);
+  --atomix-card-icon-color: var(--atomix-info-bg-subtle);
 }
 .c-card--warning {
   --atomix-card-bg: var(--atomix-warning-bg-subtle);
   --atomix-card-bg-hover: var(--atomix-warning-bg-subtle);
   --atomix-card-border-color: var(--atomix-warning-border-subtle);
   --atomix-card-title-color: var(--atomix-warning-text-emphasis);
+  --atomix-card-icon-bg: var(--atomix-warning-text-emphasis);
+  --atomix-card-icon-color: var(--atomix-warning-bg-subtle);
 }
 .c-card--error {
   --atomix-card-bg: var(--atomix-error-bg-subtle);
   --atomix-card-bg-hover: var(--atomix-error-bg-subtle);
   --atomix-card-border-color: var(--atomix-error-border-subtle);
   --atomix-card-title-color: var(--atomix-error-text-emphasis);
+  --atomix-card-icon-bg: var(--atomix-error-text-emphasis);
+  --atomix-card-icon-color: var(--atomix-error-bg-subtle);
 }
 .c-card--light {
   --atomix-card-bg: var(--atomix-light);
   --atomix-card-bg-hover: var(--atomix-light-hover);
   --atomix-card-border-color: var(--atomix-light);
   --atomix-card-title-color: var(--atomix-dark);
-  --atomix-card-text-color: rgba(0, 0, 0, 0.7);
+  --atomix-card-text-color: var(--atomix-dark);
+  --atomix-card-icon-bg: var(--atomix-dark);
+  --atomix-card-icon-color: var(--atomix-light);
 }
 .c-card--dark {
   --atomix-card-bg: var(--atomix-dark);
   --atomix-card-bg-hover: var(--atomix-dark-hover);
   --atomix-card-border-color: var(--atomix-dark);
   --atomix-card-title-color: var(--atomix-light);
-  --atomix-card-text-color: rgba(255, 255, 255, 0.8);
-}
-.c-card--glass {
-  max-width: none;
-  background-color: color-mix(in srgb, var(--atomix-card-bg) 50%, transparent);
+  --atomix-card-text-color: var(--atomix-light);
+  --atomix-card-icon-bg: var(--atomix-light);
+  --atomix-card-icon-color: var(--atomix-dark);
 }
 .c-card__loading {
   position: absolute;
@@ -3168,8 +3184,8 @@ a, a:hover {
   height: 2.5rem;
   border: 4px solid;
   border-color: var(--atomix-border-primary, rgba(0, 0, 0, 0.15));
-  border-top-color: var(--atomix-brand-text-emphasis, var(--atomix-primary, #7c3aed));
-  border-right-color: var(--atomix-brand-text-emphasis, var(--atomix-primary, #7c3aed));
+  border-top-color: var(--atomix-brand-text-emphasis, var(--atomix-primary));
+  border-right-color: var(--atomix-brand-text-emphasis, var(--atomix-primary));
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
   background-color: transparent;
@@ -9401,30 +9417,30 @@ a, a:hover {
     padding: 1rem 1rem;
   }
 }
-@media (max-width: 991.98px) {
-  .c-side-menu__wrapper {
-    height: 0px;
-    overflow: hidden;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-    transition: var(--atomix-side-menu-wrapper-transition);
-  }
+.c-side-menu__wrapper {
+  overflow: hidden;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  transition: var(--atomix-side-menu-wrapper-transition);
+  height: 0px;
 }
-@media (max-width: 991.98px) {
-  .c-side-menu__inner {
-    padding-top: var(--atomix-side-menu-inner-padding-top);
-  }
+.c-side-menu__inner {
+  padding-top: var(--atomix-side-menu-inner-padding-top);
 }
 .c-side-menu__title {
   color: var(--atomix-side-menu-title-color);
   font-size: var(--atomix-side-menu-title-font-size);
   font-weight: var(--atomix-side-menu-title-font-weight);
+  margin: 0;
   margin-bottom: var(--atomix-side-menu-title-spacer-y);
-  margin: 0 0 var(--atomix-side-menu-title-spacer-y) 0;
+}
+.c-side-menu__toggler .c-side-menu__title {
+  margin-bottom: 0;
+  flex: 1 1;
 }
 .c-side-menu__toggler {
-  display: none;
+  display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
@@ -9438,19 +9454,18 @@ a, a:hover {
           user-select: none;
   transition: var(--atomix-side-menu-toggler-transition);
   text-align: left;
-}
-@media (max-width: 991.98px) {
-  .c-side-menu__toggler {
-    display: flex;
-  }
+  margin: 0;
 }
 .c-side-menu__toggler:hover {
   background-color: var(--atomix-side-menu-toggler-hover-bg);
 }
-.c-side-menu__toggler:focus {
+.c-side-menu__toggler:focus-visible {
   outline: 2px solid var(--atomix-focus-ring-color);
   outline-offset: 2px;
 }
+.c-side-menu__toggler:focus:not(:focus-visible) {
+  outline: none;
+}
 .c-side-menu__toggler:active {
   transform: scale(0.98);
 }
@@ -9462,6 +9477,23 @@ a, a:hover {
 .c-side-menu__toggler-icon {
   transition: var(--atomix-side-menu-toggler-transition);
   font-size: 0.875em;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transform-origin: center;
+}
+.c-side-menu__toggler--nested {
+  margin-bottom: var(--atomix-side-menu-item-gap);
+}
+.c-side-menu__nested-wrapper {
+  overflow: hidden;
+  transition: var(--atomix-side-menu-wrapper-transition);
+  height: 0px;
+  margin: 0;
+}
+.c-side-menu__nested-inner {
+  display: block;
 }
 .c-side-menu__list {
   list-style: none;
@@ -9474,6 +9506,9 @@ a, a:hover {
 .c-side-menu__list:last-child {
   margin-bottom: 0;
 }
+.c-side-menu__item {
+  display: block;
+}
 .c-side-menu__link {
   display: flex;
   align-items: center;
@@ -9489,16 +9524,20 @@ a, a:hover {
   text-decoration: none;
   cursor: pointer;
   transition: var(--atomix-side-menu-item-transition);
+  position: relative;
 }
 .c-side-menu__link:hover {
   color: var(--atomix-side-menu-item-hover-color);
   background-color: var(--atomix-side-menu-item-hover-bg);
   text-decoration: none;
 }
-.c-side-menu__link:focus {
+.c-side-menu__link:focus-visible {
   outline: 2px solid var(--atomix-focus-ring-color);
   outline-offset: 2px;
 }
+.c-side-menu__link:focus:not(:focus-visible) {
+  outline: none;
+}
 .c-side-menu__link:active {
   transform: scale(0.98);
 }
@@ -9525,9 +9564,15 @@ a, a:hover {
   background-color: transparent;
   border-bottom: none;
 }
-.c-side-menu.is-open .c-side-menu__toggler-icon {
+.c-side-menu.is-open .c-side-menu__toggler .c-side-menu__toggler-icon {
   transform: rotate(90deg);
 }
+.c-side-menu__toggler--nested.is-open .c-side-menu__toggler-icon {
+  transform: rotate(90deg);
+}
+.c-side-menu__toggler--nested.is-open + .c-side-menu__nested-wrapper {
+  height: auto;
+}
 .dark-mode .c-side-menu {
   --atomix-side-menu-bg: var(--atomix-gray-9);
   --atomix-side-menu-border-color: var(--atomix-gray-7);
@@ -9545,6 +9590,18 @@ a, a:hover {
   .c-side-menu .c-side-menu__toggler-icon {
     transition: none;
   }
+  .c-side-menu .c-side-menu__toggler:active {
+    transform: none;
+  }
+  .c-side-menu .c-side-menu__link:active {
+    transform: none;
+  }
+}
+@media (prefers-contrast: high) {
+  .c-side-menu .c-side-menu__toggler:focus-visible,
+  .c-side-menu .c-side-menu__link:focus-visible {
+    outline-width: 3px;
+  }
 }
 .c-skeleton {
   --atomix-skeleton-width: 100%;