@shohojdhara/atomix 0.3.2 → 0.3.4

package/README.md

@@ -40,43 +40,80 @@ function App() {
 }
 ```
 
-### Theme Management
+### 🎨 Theme Management
 
-Atomix includes a powerful theme manager for dynamic theme switching:
+Atomix provides a powerful, developer-friendly theming system with **Tailwind-like configuration**:
 
-```jsx
-import { ThemeProvider, useTheme } from '@shohojdhara/atomix/theme';
+#### Tailwind-like Configuration (Recommended)
+
+Create `atomix.config.ts` in your project root:
+
+```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>
   );
 }
+```
+
+#### Quick Start with Themes
 
-function ThemeSwitcher() {
-  const { theme, setTheme, availableThemes } = useTheme();
-  
+```jsx
+import { ThemeProvider, useTheme } from '@shohojdhara/atomix/theme';
+
+function App() {
   return (
-    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
-      {availableThemes.map(t => (
-        <option key={t.class} value={t.class}>{t.name}</option>
-      ))}
-    </select>
+    <ThemeProvider>
+      <YourApp />
+    </ThemeProvider>
   );
 }
 ```
 
-**Available Themes:**
-- Built-in styles are used by default (no theme CSS loaded)
-- `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)
+#### Programmatic Theme Creation
+
+```jsx
+import { createTheme, ThemeProvider } from '@shohojdhara/atomix/theme';
+
+const myTheme = createTheme({
+  palette: {
+    primary: { main: '#7AFFD7' },
+  },
+});
+
+<ThemeProvider defaultTheme={myTheme}>
+  <App />
+</ThemeProvider>
+```
 
-For detailed theme manager documentation, see [Theme Manager Guide](docs/THEME_MANAGER.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

@@ -365,7 +365,7 @@ summary {
  */
 :root,
 [data-atomix-color-mode=light] {
-  --atomix-primary: #7c3aed;
+  --atomix-primary: #ffb800;
   --atomix-secondary: #f3f4f6;
   --atomix-success: #22c55e;
   --atomix-info: #3b82f6;
@@ -373,7 +373,7 @@ summary {
   --atomix-error: #ef4444;
   --atomix-light: #f9fafb;
   --atomix-dark: #1f2937;
-  --atomix-primary-rgb: 124, 58, 237;
+  --atomix-primary-rgb: 255, 184, 0;
   --atomix-secondary-rgb: 243, 244, 246;
   --atomix-success-rgb: 34, 197, 94;
   --atomix-info-rgb: 59, 130, 246;
@@ -391,22 +391,22 @@ summary {
   --atomix-gray-8: #374151;
   --atomix-gray-9: #1f2937;
   --atomix-gray-10: #111827;
-  --atomix-primary-1: #f2e8fd;
-  --atomix-primary-2: #e4d0fa;
-  --atomix-primary-3: #d0b2f5;
-  --atomix-primary-4: #b88cef;
-  --atomix-primary-5: #9c63e9;
-  --atomix-primary-6: #7c3aed;
-  --atomix-primary-7: #6425ca;
-  --atomix-primary-8: #501ba6;
-  --atomix-primary-9: #3c1583;
-  --atomix-primary-10: #2a0e60;
+  --atomix-primary-1: #fff9e6;
+  --atomix-primary-2: #fff4cc;
+  --atomix-primary-3: #ffe699;
+  --atomix-primary-4: #ffd966;
+  --atomix-primary-5: #ffcc33;
+  --atomix-primary-6: #ffb800;
+  --atomix-primary-7: #e6a600;
+  --atomix-primary-8: #cc9400;
+  --atomix-primary-9: #b38200;
+  --atomix-primary-10: #997000;
   --atomix-primary-text-emphasis: #111827;
   --atomix-secondary-text-emphasis: #374151;
   --atomix-tertiary-text-emphasis: #6b7280;
   --atomix-disabled-text-emphasis: #9ca3af;
   --atomix-invert-text-emphasis: #111827;
-  --atomix-brand-text-emphasis: #7c3aed;
+  --atomix-brand-text-emphasis: #ffb800;
   --atomix-error-text-emphasis: #ef4444;
   --atomix-success-text-emphasis: #22c55e;
   --atomix-warning-text-emphasis: #eab308;
@@ -417,7 +417,7 @@ summary {
   --atomix-secondary-bg-subtle: #e5e7eb;
   --atomix-tertiary-bg-subtle: #d1d5db;
   --atomix-invert-bg-subtle: #111827;
-  --atomix-brand-bg-subtle: #e4d0fa;
+  --atomix-brand-bg-subtle: #fff4cc;
   --atomix-error-bg-subtle: #fee2e2;
   --atomix-success-bg-subtle: #dcfce7;
   --atomix-warning-bg-subtle: #fef9c3;
@@ -430,10 +430,10 @@ summary {
   --atomix-error-border-subtle: #ef4444;
   --atomix-warning-border-subtle: #eab308;
   --atomix-info-border-subtle: #3b82f6;
-  --atomix-brand-border-subtle: #7c3aed;
+  --atomix-brand-border-subtle: #ffb800;
   --atomix-light-border-subtle: #f9fafb;
   --atomix-dark-border-subtle: #1f2937;
-  --atomix-primary-hover: #7c3aed;
+  --atomix-primary-hover: #ffb800;
   --atomix-secondary-hover: #e5e7eb;
   --atomix-light-hover: #f3f4f6;
   --atomix-dark-hover: #4b5563;
@@ -441,7 +441,7 @@ summary {
   --atomix-success-hover: #15803d;
   --atomix-warning-hover: #a16207;
   --atomix-info-hover: #1d4ed8;
-  --atomix-primary-gradient: linear-gradient(135deg, #e4d0fa, #d0b2f5, #b88cef);
+  --atomix-primary-gradient: linear-gradient(135deg, #fff4cc, #ffe699, #ffd966);
   --atomix-secondary-gradient: linear-gradient(135deg, #f3f4f6, #e5e7eb, #d1d5db);
   --atomix-light-gradient: linear-gradient(135deg, #f9fafb, #f3f4f6, #e5e7eb);
   --atomix-dark-gradient: linear-gradient(135deg, #4b5563, #1f2937, #000000);
@@ -459,11 +459,11 @@ summary {
   --atomix-body-color: #111827;
   --atomix-body-bg: #ffffff;
   --atomix-heading-color: #111827;
-  --atomix-link-color: #7c3aed;
-  --atomix-link-color-rgb: 124, 58, 237;
+  --atomix-link-color: #ffb800;
+  --atomix-link-color-rgb: 255, 184, 0;
   --atomix-link-decoration: none;
-  --atomix-link-hover-color: rgb(85.3674418605, 18.2930232558, 200.2069767442);
-  --atomix-link-hover-color-rgb: 85.3674418605, 18.2930232558, 200.2069767442;
+  --atomix-link-hover-color: rgb(178.5, 128.8, 0);
+  --atomix-link-hover-color-rgb: 178.5, 128.8, 0;
   --atomix-highlight-bg: #fef08a;
   --atomix-border-width: 1px;
   --atomix-border-style: solid;
@@ -484,7 +484,7 @@ summary {
   --atomix-box-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.175);
   --atomix-box-shadow-xl: 0px 16px 64px -8px rgba(45, 54, 67, 0.14);
   --atomix-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
-  --atomix-focus-border-color: #9c63e9;
+  --atomix-focus-border-color: #ffcc33;
   --atomix-form-valid-color: #22c55e;
   --atomix-form-valid-border-color: #22c55e;
   --atomix-form-invalid-color: #ef4444;
@@ -624,7 +624,7 @@ summary {
   color-scheme: dark;
   --atomix-body-color: #ffffff;
   --atomix-body-bg: #1f2937;
-  --atomix-primary: #7c3aed;
+  --atomix-primary: #ffb800;
   --atomix-secondary: #4b5563;
   --atomix-light: #f9fafb;
   --atomix-dark: #374151;
@@ -632,7 +632,7 @@ summary {
   --atomix-success: #22c55e;
   --atomix-warning: #eab308;
   --atomix-info: #3b82f6;
-  --atomix-primary-rgb: 124, 58, 237;
+  --atomix-primary-rgb: 255, 184, 0;
   --atomix-secondary-rgb: 75, 85, 99;
   --atomix-light-rgb: 249, 250, 251;
   --atomix-dark-rgb: 55, 65, 81;
@@ -645,7 +645,7 @@ summary {
   --atomix-tertiary-text-emphasis: #d1d5db;
   --atomix-disabled-text-emphasis: #9ca3af;
   --atomix-invert-text-emphasis: #f9fafb;
-  --atomix-brand-text-emphasis: #e4d0fa;
+  --atomix-brand-text-emphasis: #fff4cc;
   --atomix-error-text-emphasis: #fecaca;
   --atomix-success-text-emphasis: #bbf7d0;
   --atomix-warning-text-emphasis: #fef08a;
@@ -656,7 +656,7 @@ summary {
   --atomix-secondary-bg-subtle: #4b5563;
   --atomix-tertiary-bg-subtle: #6b7280;
   --atomix-invert-bg-subtle: #ffffff;
-  --atomix-brand-bg-subtle: #501ba6;
+  --atomix-brand-bg-subtle: #cc9400;
   --atomix-error-bg-subtle: #7f1d1d;
   --atomix-success-bg-subtle: #166534;
   --atomix-warning-bg-subtle: #713f12;
@@ -669,10 +669,10 @@ summary {
   --atomix-error-border-subtle: #ef4444;
   --atomix-warning-border-subtle: #eab308;
   --atomix-info-border-subtle: #3b82f6;
-  --atomix-brand-border-subtle: #7c3aed;
+  --atomix-brand-border-subtle: #ffb800;
   --atomix-light-border-subtle: #f9fafb;
   --atomix-dark-border-subtle: #374151;
-  --atomix-primary-hover: #7c3aed;
+  --atomix-primary-hover: #ffb800;
   --atomix-secondary-hover: #6b7280;
   --atomix-light-hover: #9ca3af;
   --atomix-dark-hover: #4b5563;
@@ -680,7 +680,7 @@ summary {
   --atomix-success-hover: #86efac;
   --atomix-warning-hover: #facc15;
   --atomix-info-hover: #93c5fd;
-  --atomix-primary-gradient: linear-gradient(135deg, #2a0e60, #3c1583, #501ba6);
+  --atomix-primary-gradient: linear-gradient(135deg, #997000, #b38200, #cc9400);
   --atomix-secondary-gradient: linear-gradient(135deg, #374151, #6b7280, #d1d5db);
   --atomix-light-gradient: linear-gradient(135deg, #9ca3af, #6b7280, #9ca3af);
   --atomix-dark-gradient: linear-gradient(135deg, #000000, #4b5563, #1f2937);
@@ -695,33 +695,33 @@ summary {
   --atomix-box-shadow-lg: 0px 8px 18px -2px rgba(30, 30, 30, 0.5), 0px 8px 24px -2px rgba(30, 30, 30, 0.5);
   --atomix-box-shadow-xl: 0px 33px 61px -8px rgba(30, 30, 30, 0.9), 0px 8px 10px 0px rgba(30, 30, 30, 0.9);
   --atomix-heading-color: #e5e7eb;
-  --atomix-link-color: #b88cef;
-  --atomix-link-color-rgb: 184, 140, 239;
-  --atomix-link-hover-color: rgb(142.5381679389, 72.8435114504, 229.6564885496);
-  --atomix-link-hover-color-rgb: 142.5381679389, 72.8435114504, 229.6564885496;
+  --atomix-link-color: #ffd966;
+  --atomix-link-color-rgb: 255, 217, 102;
+  --atomix-link-hover-color: rgb(255, 198, 25.5);
+  --atomix-link-hover-color-rgb: 255, 198, 25.5;
   --atomix-code-color: #f87171;
   --atomix-border-color: #374151;
   --atomix-border-color-translucent: rgba(255, 255, 255, 0.15);
-  --atomix-focus-border-color: #b88cef;
+  --atomix-focus-border-color: #ffd966;
   --atomix-form-valid-color: #4ade80;
   --atomix-form-valid-border-color: #4ade80;
   --atomix-form-invalid-color: #f87171;
   --atomix-form-invalid-border-color: #f87171;
 }
 ::-moz-selection {
-  background: #7c3aed;
-  background: rgba(124, 58, 237, 0.3);
+  background: #ffb800;
+  background: rgba(255, 184, 0, 0.3);
 }
 ::selection {
-  background: #7c3aed;
-  background: rgba(124, 58, 237, 0.3);
+  background: #ffb800;
+  background: rgba(255, 184, 0, 0.3);
 }
 ::-moz-selection {
-  background: #7c3aed;
-  background: rgba(124, 58, 237, 0.3);
+  background: #ffb800;
+  background: rgba(255, 184, 0, 0.3);
 }
 * {
-  -webkit-tap-highlight-color: rgba(124, 58, 237, 0.2);
+  -webkit-tap-highlight-color: rgba(255, 184, 0, 0.2);
 }
 *,
 *:before,
@@ -2252,17 +2252,17 @@ a, a:hover {
 }
 .c-btn--primary {
   --atomix-btn-color: #ffffff;
-  --atomix-btn-bg: #7c3aed;
-  --atomix-btn-border-color: #7c3aed;
+  --atomix-btn-bg: #ffb800;
+  --atomix-btn-border-color: #ffb800;
   --atomix-btn-hover-color: #ffffff;
-  --atomix-btn-hover-bg: rgb(97.9674418605, 20.9930232558, 229.7569767442);
-  --atomix-btn-hover-border-color: rgb(106.0255813953, 30.9697674419, 234.5302325581);
+  --atomix-btn-hover-bg: rgb(216.75, 156.4, 0);
+  --atomix-btn-hover-border-color: rgb(229.5, 165.6, 0);
   --atomix-btn-active-color: #ffffff;
-  --atomix-btn-active-bg: rgb(92.2046511628, 19.7581395349, 216.2418604651);
-  --atomix-btn-active-border-color: rgb(86.4418604651, 18.523255814, 202.726744186);
+  --atomix-btn-active-bg: rgb(204, 147.2, 0);
+  --atomix-btn-active-border-color: rgb(191.25, 138, 0);
   --atomix-btn-disabled-color: #ffffff;
-  --atomix-btn-disabled-bg: #7c3aed;
-  --atomix-btn-disabled-border-color: #7c3aed;
+  --atomix-btn-disabled-bg: #ffb800;
+  --atomix-btn-disabled-border-color: #ffb800;
 }
 .c-btn--secondary {
   --atomix-btn-color: var(--atomix-dark-text-emphasis);
@@ -7009,7 +7009,7 @@ a, a:hover {
   --atomix-input-textarea-height: 120px;
 }
 .c-input--primary {
-  --atomix-input-border-color: var(--atomix-primary-border-subtle, #7c3aed);
+  --atomix-input-border-color: var(--atomix-primary-border-subtle, #ffb800);
 }
 .c-input--success {
   --atomix-input-border-color: var(--atomix-success-border-subtle, #22c55e);
@@ -7382,7 +7382,7 @@ a, a:hover {
   --atomix-messages-file-text-color: var(--atomix-body-color);
   --atomix-messages-file-icon-size: 2.5rem;
   --atomix-messages-file-icon-margin-right: 0.5rem;
-  --atomix-messages-file-icon-bg: #e4d0fa;
+  --atomix-messages-file-icon-bg: #fff4cc;
   --atomix-messages-file-info-font-size: 0.75rem;
   --atomix-messages-file-info-color: var(--atomix-tertiary-text-emphasis);
   --atomix-messages-file-bg: var(--atomix-tertiary-bg-subtle);
@@ -7527,7 +7527,7 @@ a, a:hover {
   border-radius: var(--atomix-messages-file-border-radius) 0.25rem 0.25rem var(--atomix-messages-file-border-radius);
 }
 .c-messages__content--self .c-messages__file [data-atomix-color-mode=dark] {
-  --atomix-messages-file-icon-bg: #6425ca;
+  --atomix-messages-file-icon-bg: #e6a600;
 }
 .c-messages__content--self .c-messages__image {
   border-radius: var(--atomix-messages-image-border-radius) 0.25rem 0.25rem var(--atomix-messages-image-border-radius);
@@ -7537,7 +7537,7 @@ a, a:hover {
   background-color: var(--atomix-messages-file-icon-bg);
 }
 .c-messages__content--self .c-messages__file-icon [data-atomix-color-mode=dark] {
-  --atomix-messages-file-icon-bg: #6425ca;
+  --atomix-messages-file-icon-bg: #e6a600;
 }
 .c-messages__form {
   display: flex;
@@ -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;
@@ -9046,7 +9053,7 @@ a, a:hover {
   display: block;
 }
 .c-rating__star--primary {
-  --atomix-rating-star-bg: #7c3aed;
+  --atomix-rating-star-bg: #ffb800;
 }
 .c-rating__star--secondary {
   --atomix-rating-star-bg: #f3f4f6;
@@ -9116,7 +9123,7 @@ a, a:hover {
   flex-direction: column;
 }
 .c-rating--primary {
-  --atomix-rating-star-bg: #7c3aed;
+  --atomix-rating-star-bg: #ffb800;
 }
 .c-rating--secondary {
   --atomix-rating-star-bg: #f3f4f6;
@@ -10577,13 +10584,14 @@ a, a:hover {
   --atomix-tooltip-bg: var(--atomix-invert-bg-subtle);
   --atomix-tooltip-font-size: 0.75rem;
   --atomix-tooltip-font-weight: 400;
-  --atomix-tooltip-color: var(--atomix-invert-text);
+  --atomix-tooltip-color: var(--atomix-body-bg);
   --atomix-tooltip-border-radius: 0.5rem;
   --atomix-tooltip-border-width: ;
   --atomix-tooltip-border-color: ;
   --atomix-tooltip-box-shadow: ;
   --atomix-tooltip-arrow-size: 0.75rem;
   --atomix-tooltip-offset: 0.75rem;
+  --atomix-z-index-tooltip: 1060;
   position: absolute;
   width: -moz-max-content;
   width: max-content;
@@ -10591,37 +10599,7 @@ a, a:hover {
   height: max-content;
   max-width: var(--atomix-tooltip-max-width);
   pointer-events: none;
-  z-index: 1000;
-}
-.c-tooltip--top, .c-tooltip--top-left, .c-tooltip--top-right {
-  bottom: calc(100% + var(--atomix-tooltip-offset));
-  transform-origin: bottom center;
-}
-.c-tooltip--bottom, .c-tooltip--bottom-left, .c-tooltip--bottom-right {
-  top: calc(100% + var(--atomix-tooltip-offset));
-  transform-origin: top center;
-}
-.c-tooltip--left {
-  right: calc(100% + var(--atomix-tooltip-offset));
-  top: 50%;
-  transform: translateY(-50%);
-  transform-origin: right center;
-}
-.c-tooltip--right {
-  left: calc(100% + var(--atomix-tooltip-offset));
-  top: 50%;
-  transform: translateY(-50%);
-  transform-origin: left center;
-}
-.c-tooltip--top, .c-tooltip--bottom {
-  left: 50%;
-  transform: translateX(-50%);
-}
-.c-tooltip--top-left, .c-tooltip--bottom-left {
-  left: 0;
-}
-.c-tooltip--top-right, .c-tooltip--bottom-right {
-  right: 0;
+  z-index: var(--atomix-z-index-tooltip);
 }
 .c-tooltip__content {
   position: relative;
@@ -10646,35 +10624,32 @@ a, a:hover {
   position: absolute;
   width: var(--atomix-tooltip-arrow-size);
   height: var(--atomix-tooltip-arrow-size);
+  border-radius: calc((var(--atomix-tooltip-arrow-size) - var(--atomix-tooltip-border-radius)) / 2);
   background-color: var(--atomix-tooltip-bg);
   z-index: 1;
   transform: rotate(45deg);
 }
-.c-tooltip--top .c-tooltip__arrow, .c-tooltip--top-left .c-tooltip__arrow, .c-tooltip--top-right .c-tooltip__arrow {
-  bottom: calc(var(--atomix-tooltip-arrow-size) / -2);
-}
-.c-tooltip--bottom .c-tooltip__arrow, .c-tooltip--bottom-left .c-tooltip__arrow, .c-tooltip--bottom-right .c-tooltip__arrow {
-  top: calc(var(--atomix-tooltip-arrow-size) / -2);
+.c-tooltip--left .c-tooltip__arrow, .c-tooltip--right .c-tooltip__arrow {
+  transform: rotate(45deg);
 }
-.c-tooltip--left .c-tooltip__arrow {
-  right: calc(var(--atomix-tooltip-arrow-size) / -2);
-  top: 50%;
-  transform: translateY(-50%) rotate(45deg);
+.c-tooltip--top .c-tooltip__arrow {
+  transform: rotate(45deg);
 }
-.c-tooltip--right .c-tooltip__arrow {
-  left: calc(var(--atomix-tooltip-arrow-size) / -2);
-  top: 50%;
-  transform: translateY(-50%) rotate(45deg);
+.c-tooltip--bottom .c-tooltip__arrow {
+  transform: rotate(225deg);
 }
-.c-tooltip--top .c-tooltip__arrow, .c-tooltip--bottom .c-tooltip__arrow {
-  left: 50%;
-  transform: translateX(-50%) rotate(45deg);
+.c-tooltip--glass {
+  z-index: auto;
+  z-index: initial;
 }
-.c-tooltip--top-left .c-tooltip__arrow, .c-tooltip--bottom-left .c-tooltip__arrow {
-  left: var(--atomix-tooltip-arrow-size);
+.c-tooltip--glass .c-tooltip__content {
+  background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 40%, transparent);
 }
-.c-tooltip--top-right .c-tooltip__arrow, .c-tooltip--bottom-right .c-tooltip__arrow {
-  right: var(--atomix-tooltip-arrow-size);
+.c-tooltip--glass .c-tooltip__arrow {
+  background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 40%, transparent);
+  clip-path: polygon(0 100%, 100% 100%, 100% 0);
+  -webkit-backdrop-filter: var(--atomix-glass-container-backdrop);
+          backdrop-filter: var(--atomix-glass-container-backdrop);
 }
 .c-upload {
   --atomix-upload-width: 31.25rem;
@@ -12322,7 +12297,7 @@ body.is-open-photoviewer {
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
 }
 .c-image-gallery__item:hover .c-image-gallery__card {
-  border-color: #9c63e9;
+  border-color: #ffcc33;
 }
 .c-image-gallery__card {
   height: 100%;
@@ -12385,8 +12360,8 @@ body.is-open-photoviewer {
   text-decoration-color: RGBA(var(--atomix-primary-rgb), var(--atomix-u-link-underline-opacity, 1)) !important;
 }
 .u-link-primary:hover, .u-link-primary:focus {
-  color: RGBA(143.65, 87.55, 239.7, var(--atomix-u-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(143.65, 87.55, 239.7, var(--atomix-u-link-underline-opacity, 1)) !important;
+  color: RGBA(255, 194.65, 38.25, var(--atomix-u-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(255, 194.65, 38.25, var(--atomix-u-link-underline-opacity, 1)) !important;
 }
 .u-link-secondary {
   color: RGBA(var(--atomix-secondary-rgb), var(--atomix-u-link-opacity, 1)) !important;
@@ -12456,7 +12431,7 @@ body.is-open-photoviewer {
   white-space: nowrap;
 }
 .u-bg-primary {
-  background-color: #7c3aed;
+  background-color: #ffb800;
 }
 .u-bg-secondary {
   background-color: #f3f4f6;
@@ -12558,7 +12533,7 @@ body.is-open-photoviewer {
   border-inline-start: 0;
 }
 .u-border-primary {
-  border-color: #7c3aed;
+  border-color: #ffb800;
 }
 .u-border-secondary {
   border-color: #f3f4f6;
@@ -12978,7 +12953,7 @@ body.is-open-photoviewer {
   order: 6;
 }
 .u-bg-gradient-primary {
-  background-image: linear-gradient(135deg, #e4d0fa, #d0b2f5, #b88cef);
+  background-image: linear-gradient(135deg, #fff4cc, #ffe699, #ffd966);
 }
 .u-bg-gradient-secondary {
   background-image: linear-gradient(135deg, #f3f4f6, #e5e7eb, #d1d5db);
@@ -13026,7 +13001,7 @@ body.is-open-photoviewer {
   text-underline-offset: 0.375em;
 }
 .u-link-underline-primary {
-  text-decoration-color: #7c3aed;
+  text-decoration-color: #ffb800;
 }
 .u-link-underline-secondary {
   text-decoration-color: #f3f4f6;
@@ -15342,7 +15317,7 @@ body.is-open-photoviewer {
   word-break: break-word !important;
 }
 .u-text-primary {
-  color: #7c3aed;
+  color: #ffb800;
 }
 .u-text-secondary {
   color: #f3f4f6;