@shohojdhara/atomix 0.3.3 → 0.3.5

package/src/lib/theme/whitelabel/WhiteLabelManager.ts

@@ -1,364 +0,0 @@
-/**
- * White Label Manager
- * 
- * Provides white labeling capabilities for themes
- */
-
-import type { Theme, ThemeOptions } from '../types';
-import { createTheme } from '../createTheme';
-import { extendTheme } from '../composeTheme';
-
-/**
- * Brand configuration
- */
-export interface BrandConfig {
-  /** Brand name */
-  name: string;
-  /** Brand logo URL */
-  logo?: string;
-  /** Primary brand color */
-  primaryColor?: string;
-  /** Secondary brand color */
-  secondaryColor?: string;
-  /** Brand fonts */
-  fonts?: {
-    primary?: string;
-    secondary?: string;
-  };
-  /** Brand favicon */
-  favicon?: string;
-  /** Custom CSS */
-  customCSS?: string;
-  /** Custom meta tags */
-  metaTags?: Record<string, string>;
-}
-
-/**
- * White label configuration
- */
-export interface WhiteLabelConfig {
-  /** Brand configuration */
-  brand: BrandConfig;
-  /** Theme overrides */
-  themeOverrides?: Partial<ThemeOptions>;
-  /** Component overrides */
-  componentOverrides?: Record<string, any>;
-  /** CSS variable overrides */
-  cssVariableOverrides?: Record<string, string>;
-  /** Enable DOM mutations (default: false for headless/server safety) */
-  enableDOMOperations?: boolean;
-}
-
-/**
- * White Label Manager
- * 
- * Manages white labeling for themes
- */
-export class WhiteLabelManager {
-  private config: WhiteLabelConfig | null = null;
-  private baseTheme: Theme | null = null;
-
-  constructor(baseTheme?: Theme) {
-    if (baseTheme) {
-      this.baseTheme = baseTheme;
-    }
-  }
-
-  /**
-   * Set base theme
-   */
-  setBaseTheme(theme: Theme): void {
-    this.baseTheme = theme;
-  }
-
-  /**
-   * Configure white label
-   */
-  configure(config: WhiteLabelConfig): void {
-    this.config = config;
-    this.applyWhiteLabel();
-  }
-
-  /**
-   * Get white labeled theme
-   */
-  getWhiteLabeledTheme(): Theme | null {
-    if (!this.baseTheme || !this.config) {
-      return this.baseTheme;
-    }
-
-    // Create theme with white label overrides
-    const themeOptions: ThemeOptions = {
-      ...this.baseTheme,
-      name: this.config.brand.name,
-      ...this.config.themeOverrides,
-      palette: {
-        ...this.baseTheme.palette,
-        ...(this.config.brand.primaryColor && {
-          primary: {
-            ...this.baseTheme.palette.primary,
-            main: this.config.brand.primaryColor,
-          },
-        }),
-        ...(this.config.brand.secondaryColor && {
-          secondary: {
-            ...this.baseTheme.palette.secondary,
-            main: this.config.brand.secondaryColor,
-          },
-        }),
-        ...this.config.themeOverrides?.palette,
-      },
-      typography: {
-        ...this.baseTheme.typography,
-        ...(this.config.brand.fonts?.primary && {
-          fontFamily: this.config.brand.fonts.primary,
-        }),
-        ...this.config.themeOverrides?.typography,
-      },
-      custom: {
-        ...this.baseTheme.custom,
-        whiteLabel: {
-          brand: this.config.brand,
-          componentOverrides: this.config.componentOverrides,
-          cssVariableOverrides: this.config.cssVariableOverrides,
-        },
-      },
-    };
-
-    return createTheme(themeOptions);
-  }
-
-  /**
-   * Apply white label to DOM
-   */
-  private applyWhiteLabel(): void {
-    if (!this.config?.enableDOMOperations || typeof document === 'undefined') {
-      return;
-    }
-
-    const { brand } = this.config;
-
-    // Apply logo
-    if (brand.logo) {
-      this.applyLogo(brand.logo);
-    }
-
-    // Apply favicon
-    if (brand.favicon) {
-      this.applyFavicon(brand.favicon);
-    }
-
-    // Apply meta tags
-    if (brand.metaTags) {
-      this.applyMetaTags(brand.metaTags);
-    }
-
-    // Apply custom CSS
-    if (brand.customCSS) {
-      this.applyCustomCSS(brand.customCSS);
-    }
-
-    // Apply CSS variable overrides
-    if (this.config.cssVariableOverrides) {
-      this.applyCSSVariables(this.config.cssVariableOverrides);
-    }
-  }
-
-  /**
-   * Apply logo
-   */
-  applyLogo(logoUrl: string, selector?: string, element?: HTMLElement): void {
-    if (!this.config?.enableDOMOperations || typeof document === 'undefined') {
-      return;
-    }
-
-    // Find or create logo element
-    let logoElement = element || (selector ? document.querySelector(selector) : null) as HTMLImageElement | null;
-    
-    if (!logoElement) {
-      logoElement = document.querySelector('[data-whitelabel-logo]') as HTMLImageElement;
-    }
-    
-    if (!logoElement) {
-      logoElement = document.createElement('img');
-      logoElement.setAttribute('data-whitelabel-logo', 'true');
-      logoElement.style.maxHeight = '40px';
-      logoElement.style.maxWidth = '200px';
-      
-      // Try to find a container (e.g., header, navbar)
-      const container = selector 
-        ? document.querySelector(selector)
-        : document.querySelector('header, [role="banner"], .navbar, .header');
-      
-      if (container) {
-        container.insertBefore(logoElement, container.firstChild);
-      } else {
-        document.body.insertBefore(logoElement, document.body.firstChild);
-      }
-    }
-
-    (logoElement as HTMLImageElement).src = logoUrl;
-    (logoElement as HTMLImageElement).alt = this.config?.brand.name || 'Logo';
-  }
-
-  /**
-   * Apply favicon
-   */
-  applyFavicon(faviconUrl: string, selector?: string): void {
-    if (!this.config?.enableDOMOperations || typeof document === 'undefined') {
-      return;
-    }
-
-    // Remove existing favicons
-    const existingFavicons = document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"]');
-    existingFavicons.forEach(favicon => favicon.remove());
-
-    // Create new favicon link
-    const link = document.createElement('link');
-    link.rel = 'icon';
-    link.type = 'image/x-icon';
-    link.href = faviconUrl;
-    
-    const target = selector ? document.querySelector(selector) : document.head;
-    if (target) {
-      target.appendChild(link);
-    }
-  }
-
-  /**
-   * Apply meta tags
-   */
-  applyMetaTags(metaTags: Record<string, string>, selector?: string): void {
-    if (!this.config?.enableDOMOperations || typeof document === 'undefined') {
-      return;
-    }
-
-    const target = selector ? document.querySelector(selector) : document.head;
-    if (!target) {
-      return;
-    }
-
-    for (const [name, content] of Object.entries(metaTags)) {
-      // Check if meta tag exists
-      let metaElement = document.querySelector(`meta[name="${name}"]`) as HTMLMetaElement;
-      
-      if (!metaElement) {
-        metaElement = document.createElement('meta');
-        metaElement.name = name;
-        target.appendChild(metaElement);
-      }
-
-      metaElement.content = content;
-    }
-  }
-
-  /**
-   * Apply custom CSS
-   */
-  applyCustomCSS(css: string, styleId?: string): void {
-    if (!this.config?.enableDOMOperations || typeof document === 'undefined') {
-      return;
-    }
-
-    const id = styleId || 'whitelabel-custom-css';
-    
-    // Remove existing white label CSS
-    const existingStyle = document.getElementById(id);
-    if (existingStyle) {
-      existingStyle.remove();
-    }
-
-    // Create new style element
-    const style = document.createElement('style');
-    style.id = id;
-    style.textContent = css;
-    document.head.appendChild(style);
-  }
-
-  /**
-   * Apply CSS variables
-   */
-  applyCSSVariables(variables: Record<string, string>, root?: HTMLElement | string): void {
-    if (!this.config?.enableDOMOperations || typeof document === 'undefined') {
-      return;
-    }
-
-    let targetElement: HTMLElement;
-    
-    if (typeof root === 'string') {
-      const element = document.querySelector(root);
-      if (!element || !(element instanceof HTMLElement)) {
-        return;
-      }
-      targetElement = element;
-    } else if (root instanceof HTMLElement) {
-      targetElement = root;
-    } else {
-      targetElement = document.documentElement;
-    }
-
-    for (const [key, value] of Object.entries(variables)) {
-      targetElement.style.setProperty(key.startsWith('--') ? key : `--${key}`, value);
-    }
-  }
-
-  /**
-   * Remove white label
-   */
-  removeWhiteLabel(): void {
-    // Remove logo
-    const logo = document.querySelector('[data-whitelabel-logo]');
-    logo?.remove();
-
-    // Remove custom CSS
-    const customCSS = document.getElementById('whitelabel-custom-css');
-    customCSS?.remove();
-
-    // Remove CSS variables (would need to track original values)
-    if (this.config?.cssVariableOverrides) {
-      const root = document.documentElement;
-      for (const key of Object.keys(this.config.cssVariableOverrides)) {
-        root.style.removeProperty(key.startsWith('--') ? key : `--${key}`);
-      }
-    }
-
-    this.config = null;
-  }
-
-  /**
-   * Get current configuration
-   */
-  getConfig(): WhiteLabelConfig | null {
-    return this.config;
-  }
-
-  /**
-   * Export configuration
-   */
-  exportConfig(): string {
-    if (!this.config) {
-      throw new Error('No white label configuration to export');
-    }
-
-    return JSON.stringify(this.config, null, 2);
-  }
-
-  /**
-   * Import configuration
-   */
-  importConfig(json: string): void {
-    try {
-      const config = JSON.parse(json) as WhiteLabelConfig;
-      this.configure(config);
-    } catch (error) {
-      throw new Error(`Failed to import white label configuration: ${error instanceof Error ? error.message : String(error)}`);
-    }
-  }
-}
-
-/**
- * Create white label manager
- */
-export function createWhiteLabelManager(baseTheme?: Theme): WhiteLabelManager {
-  return new WhiteLabelManager(baseTheme);
-}

package/src/lib/theme/whitelabel/index.ts

@@ -1,13 +0,0 @@
-/**
- * White Label Module
- */
-
-export * from './WhiteLabelManager';
-export {
-  WhiteLabelManager,
-  createWhiteLabelManager,
-} from './WhiteLabelManager';
-export type {
-  BrandConfig,
-  WhiteLabelConfig,
-} from './WhiteLabelManager';

package/src/themes/THEME_CHECKLIST.md

@@ -1,74 +0,0 @@
-# Atomix Theme Checklist
-
-Use this checklist when creating or updating a theme to align with Atomix guidelines (Rollup, Storybook 8, Vitest, ITCSS-like SCSS).
-
-## 1) Structure and Entrypoint
-- [ ] Theme folder under `src/themes/<theme-name>/`
-- [ ] `index.scss` uses ITCSS order and forwards local overrides:
-  ```text
-  // Local settings override base
-  @use '01-settings/index' as *;
-  // Tools
-  @use '02-tools/index' as *;
-  @use '../../styles/02-tools/index' as tools;
-  // Generic
-  @use '03-generic/index' as *;
-  @use '../../styles/03-generic/index' as generic;
-  // Elements
-  @use '04-elements/index' as *;
-  @use '../../styles/04-elements/index' as elements;
-  // Objects
-  @use '05-objects/index' as *;
-  @use '../../styles/05-objects/index' as objects;
-  // Components
-  @use '06-components/index' as *;
-  @use '../../styles/06-components/index';
-  // Utilities
-  @use '99-utilities/index' as *;
-  @use '../../styles/99-utilities/index' as utilities;
-  ```
-- [ ] Exceptions (e.g., namespaced `@use`) are documented in a README inside the theme.
-
-## 2) Tokens and Settings Coverage
-- [ ] Colors: 1–10 scale for primary, neutral (gray), and any accent palettes
-- [ ] settings.config (prefix, env), spacing, breakpoints, typography
-- [ ] Component settings: button, input, card, nav, tabs, tooltip/popover, modal, forms
-- [ ] Prefer `@forward` in `01-settings/_index.scss` to keep `index.scss` clean.
-
-## 3) Theming Conventions
-- [ ] Data attributes/classes:
-  - `data-theme="<theme-name>"` on `body` or `html`
-  - `data-atomix-color-mode="light|dark"` on `html`
-- [ ] BEM-like class naming for components (e.g., `c-button`, `c-accordion`)
-- [ ] Avoid global overrides; prefer component-scoped tokens/utilities.
-
-## 4) Accessibility (A11y)
-- [ ] Contrast: ≥ 4.5:1 normal text, ≥ 3.0:1 large text
-- [ ] Focus visible and keyboard nav clearly styled in both color modes
-- [ ] Form controls: placeholder, helper text meet contrast
-- [ ] Record a11y state in `src/themes/themes.config.js` (`a11y` and `status` fields)
-
-## 5) Performance
-- [ ] Heavy effects (blur/backdrop-filter) are opt-in and scoped
-- [ ] Limit CSS custom properties; group by prefix, keep under ~500 per theme
-- [ ] Avoid duplicate declarations; rely on base utilities where possible
-
-## 6) Build and Distribution
-- [ ] `index.scss` compiles via `yarn build:styles` to `dist/themes/<theme>.css` and `.min.css`
-- [ ] Test import from package: `@shohojdhara/atomix/themes/<theme>.css`
-- [ ] Update `themes.config.js` metadata (name, version, tags, a11y, status)
-
-## 7) Storybook
-- [ ] Theme selectable via toolbar in `.storybook/preview.tsx`
-- [ ] If using custom switcher, read theme list from shared source to avoid drift
-- [ ] Provide a few Storybook stories showcasing theme-specific overrides (Buttons, Cards, Nav, Forms)
-
-## 8) Testing
-- [ ] Add or update minimal visual smoke tests in Storybook (manual)
-- [ ] For unit tests (optional): follow Vitest API (`vi.*`), not Jest
-- [ ] Run: `yarn dev` and validate main components under both color modes
-
-## 9) Documentation
-- [ ] Add theme README with design intent, palette examples, and any exceptions from the standard import pattern
-- [ ] Link to the Themes Guide: `src/themes/README.md`
-

package/src/themes/applemix/01-settings/_index.scss

@@ -1,24 +0,0 @@
-/*!
- * Applemix Theme Settings Index
- * Apple Mac OS 2026 Liquid Glass inspired settings
- */
-
-// Modern Sass module system with namespaced imports
-@use 'settings.config' as config;
-@use 'settings.colors' as colors;
-@use 'settings.typography' as typography;
-@use 'settings.animations' as anim;
-@use 'settings.background' as bg;
-
-// Export all modules for backward compatibility
-@forward 'settings.config';
-@forward 'settings.colors';
-@forward 'settings.typography';
-@forward 'settings.animations';
-@forward 'settings.background';
-
-// Forward core token groups from base theme for proper coverage
-@forward '../../../styles/01-settings/settings.spacing';
-@forward '../../../styles/01-settings/settings.breakpoints';
-@forward '../../../styles/01-settings/settings.border';
-@forward '../../../styles/01-settings/settings.border-radius';

package/src/themes/applemix/01-settings/_settings.background.scss

@@ -1,6 +0,0 @@
-@use '../../../styles/01-settings/settings.background' with (
-  $background-enable-gradient-overlay: false,
-  $background-transparency-enable: true,
-  $background-enable-with-shadow: false,
-  $background-transparency: 0.5
-);

package/src/themes/applemix/01-settings/_settings.colors.scss

@@ -1,75 +0,0 @@
-/*!
- * Applemix Theme Colors
- * Apple Mac OS 2026 Liquid Glass inspired color palette
- * Features transparency, depth, and chromatic effects
- */
-
-@use 'sass:color';
-@use '../../../styles/02-tools/tools.to-rgb' as *;
-@use '../../../styles/02-tools/tools.color-functions' as *;
-@use '../../../styles/01-settings/settings.colors' with (
-  $white: #ffffff,
-  $black: #000000,
-  $color-contrast-dark: #1d1d1f,
-  $color-contrast-light: #f5f5f7,
-  $red-1: #fff5f5,
-  $red-2: #ffe3e3,
-  $red-3: #ffc9c9,
-  $red-4: #ff9f9f,
-  $red-5: #ff6b6b,
-  $red-6: #ff3b30,
-  $red-7: #d70015,
-  $red-8: #a50000,
-  $red-9: #750000,
-  $red-10: #4a0000,
-  $green-1: #f0fff4,
-  $green-2: #dcfce7,
-  $green-3: #bbf7d0,
-  $green-4: #86efac,
-  $green-5: #4ade80,
-  $green-6: #30d158,
-  $green-7: #28cd41,
-  $green-8: #20a934,
-  $green-9: #198527,
-  $green-10: #12611a,
-  $yellow-1: #fffbf0,
-  $yellow-2: #fff3c4,
-  $yellow-3: #ffe066,
-  $yellow-4: #ffcc02,
-  $yellow-5: #ffb000,
-  $yellow-6: #ff9500,
-  $yellow-7: #ff8c00,
-  $yellow-8: #e67300,
-  $yellow-9: #cc5500,
-  $yellow-10: #b33c00,
-  $blue-1: #f0f8ff,
-  $blue-2: #e1f2ff,
-  $blue-3: #c7e9ff,
-  $blue-4: #9dd7ff,
-  $blue-5: #64c7ff,
-  $blue-6: #007aff,
-  $blue-7: #0056d6,
-  $blue-8: #003d99,
-  $blue-9: #002966,
-  $blue-10: #001a44,
-  $gray-1: #fafafa,
-  $gray-2: #f5f5f7,
-  $gray-3: #e5e5e7,
-  $gray-4: #d1d1d6,
-  $gray-5: #aeaeb2,
-  $gray-6: #8e8e93,
-  $gray-7: #636366,
-  $gray-8: #48484a,
-  $gray-9: #2c2c2e,
-  $gray-10: #1c1c1e,
-  $primary-1: #f0f8ff,
-  $primary-2: #e1f2ff,
-  $primary-3: #c7e9ff,
-  $primary-4: #9dd7ff,
-  $primary-5: #64c7ff,
-  $primary-6: #007aff,
-  $primary-7: #0056d6,
-  $primary-8: #003d99,
-  $primary-9: #002966,
-  $primary-10: #001a44
-);

package/src/themes/applemix/01-settings/_settings.config.scss

@@ -1,15 +0,0 @@
-/*!
- * Applemix Theme Configuration
- * Core configuration variables for the Apple-inspired liquid glass theme
- */
-
-@use '../../../styles/01-settings/settings.config' with (
-  $prefix: 'atomix-'
-);
-// Environment configuration
-$ENV: 'dev';
-
-// CSS variable prefix for theme namespacing
-$theme-name: 'applemix';
-$theme-version: '1.0.0';
-$theme-author: 'Atomix Design System';

package/src/themes/applemix/01-settings/_settings.typography.scss

@@ -1,30 +0,0 @@
-/*!
- * Applemix Theme Typography
- * Apple-inspired typography system with modern scaling
- * Optimized for liquid glass interfaces and readability
- */
-
-@use '../../../styles/01-settings/settings.typography' with (
-  // Apple-inspired font families
-  $font-family-base: (
-      -apple-system,
-      BlinkMacSystemFont,
-      'SF Pro Display',
-      'SF Pro Text',
-      'Helvetica Neue',
-      Helvetica,
-      Arial,
-      sans-serif
-    ),
-  // Apple-style font weights
-  $font-weight-light: 300,
-  $font-weight-normal: 400,
-  $font-weight-medium: 500,
-  $font-weight-semibold: 600,
-  $font-weight-bold: 700,
-  $font-weight-heavy: 800,
-  $font-weight-black: 900,
-  // Base typography settings
-  $font-size-base: 1rem,
-  $line-height-base: 1.47
-);

package/src/themes/applemix/02-tools/_index.scss

@@ -1,4 +0,0 @@
-/*!
- * Applemix Theme Tools Index
- * Apple Mac OS 2026 Liquid Glass inspired tools
- */

package/src/themes/applemix/03-generic/_index.scss

@@ -1,7 +0,0 @@
-/*!
- * Applemix Theme Generic Styles Index
- * Generic styles and resets for the liquid glass theme
- */
-
-// Forward base generic styles from the main design system
-@forward '../../../styles/03-generic/index';

package/src/themes/applemix/04-elements/_index.scss

@@ -1,7 +0,0 @@
-/*!
- * Applemix Theme Element Styles Index
- * Base element styles with liquid glass enhancements
- */
-
-// Forward base element styles from the main design system
-@forward '../../../styles/04-elements/index';

package/src/themes/applemix/05-objects/_index.scss

@@ -1,7 +0,0 @@
-/*!
- * Applemix Theme Object Styles Index
- * Layout objects and structural components with glass effects
- */
-
-// Forward base object styles from the main design system
-@forward '../../../styles/05-objects/index';

package/src/themes/applemix/06-components/_index.scss

@@ -1,15 +0,0 @@
-/*!
- * Applemix Theme Components Index
- * Component styles with liquid glass enhancements
- */
-
-// Component overrides with Apple-inspired glass effects
-// @forward 'components.button';
-// @forward 'components.card';
-// @forward 'components.form';
-// @forward 'components.navbar';
-// @forward 'components.modal';
-// @forward 'components.footer';
-
-// Forward base component styles from the main design system
-@forward '../../../styles/06-components/index';

package/src/themes/applemix/99-utilities/_index.scss

@@ -1,7 +0,0 @@
-/*!
- * Applemix Theme Utilities Index
- * Utility classes with liquid glass effects
- */
-
-// Forward base utility styles from the main design system
-@forward '../../../styles/99-utilities/index';