@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/lib/config/index.ts

@@ -1,16 +1,16 @@
 /**
  * Atomix Configuration System
- * 
+ *
  * Tailwind-like configuration for customizing the Atomix Design System.
- * 
+ *
  * External developers can create `atomix.config.ts` in their project root
  * to customize design tokens, similar to Tailwind's tailwind.config.js
- * 
+ *
  * @example
  * ```typescript
  * // atomix.config.ts (in your project)
  * import { defineConfig } from '@shohojdhara/atomix/config';
- * 
+ *
  * export default defineConfig({
  *   theme: {
  *     extend: {
@@ -29,104 +29,104 @@ import type { Theme } from '../theme/types';
  * Color Scale (1-10)
  */
 export interface ColorScale {
-    1?: string;
-    2?: string;
-    3?: string;
-    4?: string;
-    5?: string;
-    6?: string;
-    7?: string;
-    8?: string;
-    9?: string;
-    10?: string;
-    [key: string]: string | undefined;
+  1?: string;
+  2?: string;
+  3?: string;
+  4?: string;
+  5?: string;
+  6?: string;
+  7?: string;
+  8?: string;
+  9?: string;
+  10?: string;
+  [key: string]: string | undefined;
 }
 
 /**
  * Palette Color Options
  */
 export interface PaletteColorOptions {
-    main: string;
-    light?: string;
-    dark?: string;
-    contrastText?: string;
+  main: string;
+  light?: string;
+  dark?: string;
+  contrastText?: string;
 }
 
 /**
  * Design Tokens Schema (Tailwind-like)
  */
 export interface ThemeTokens {
-    /** Color palette */
-    colors?: Record<string, string | PaletteColorOptions | ColorScale | Record<string, string>>;
-    /** Spacing scale */
-    spacing?: Record<string, string>;
-    /** Border radius scale */
-    borderRadius?: Record<string, string>;
-    /** Typography scale and settings */
-    typography?: {
-        fontFamilies?: Record<string, string>;
-        fontSizes?: Record<string, string>;
-        fontWeights?: Record<string, string | number>;
-        lineHeights?: Record<string, string | number>;
-        letterSpacings?: Record<string, string>;
-    };
-    /** Shadow scale */
-    shadows?: Record<string, string>;
-    /** Z-index scale */
-    zIndex?: Record<string, string | number>;
-    /** Breakpoints scale */
-    breakpoints?: Record<string, string | number>;
-    /** Transitions settings */
-    transitions?: {
-        durations?: Record<string, string>;
-        easings?: Record<string, string>;
-    };
+  /** Color palette */
+  colors?: Record<string, string | PaletteColorOptions | ColorScale | Record<string, string>>;
+  /** Spacing scale */
+  spacing?: Record<string, string>;
+  /** Border radius scale */
+  borderRadius?: Record<string, string>;
+  /** Typography scale and settings */
+  typography?: {
+    fontFamilies?: Record<string, string>;
+    fontSizes?: Record<string, string>;
+    fontWeights?: Record<string, string | number>;
+    lineHeights?: Record<string, string | number>;
+    letterSpacings?: Record<string, string>;
+  };
+  /** Shadow scale */
+  shadows?: Record<string, string>;
+  /** Z-index scale */
+  zIndex?: Record<string, string | number>;
+  /** Breakpoints scale */
+  breakpoints?: Record<string, string | number>;
+  /** Transitions settings */
+  transitions?: {
+    durations?: Record<string, string>;
+    easings?: Record<string, string>;
+  };
 }
 
 /**
  * CSS Theme Definition
  */
 export interface CSSThemeDefinition {
-    type: 'css';
-    name: string;
-    class?: string;
-    description?: string;
-    author?: string;
-    version?: string;
-    tags?: string[];
-    supportsDarkMode?: boolean;
-    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
-    a11y?: {
-        contrastTarget?: number;
-        modes?: string[];
-    };
-    color?: string;
-    features?: string[];
-    dependencies?: string[];
-    cssPath?: string;
+  type: 'css';
+  name: string;
+  class?: string;
+  description?: string;
+  author?: string;
+  version?: string;
+  tags?: string[];
+  supportsDarkMode?: boolean;
+  status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
+  a11y?: {
+    contrastTarget?: number;
+    modes?: string[];
+  };
+  color?: string;
+  features?: string[];
+  dependencies?: string[];
+  cssPath?: string;
 }
 
 /**
  * JavaScript Theme Definition
  */
 export interface JSThemeDefinition {
-    type: 'js';
-    name: string;
-    class?: string;
-    description?: string;
-    author?: string;
-    version?: string;
-    tags?: string[];
-    supportsDarkMode?: boolean;
-    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
-    a11y?: {
-        contrastTarget?: number;
-        modes?: string[];
-    };
-    color?: string;
-    features?: string[];
-    dependencies?: string[];
-    createTheme: () => Theme;
+  type: 'js';
+  name: string;
+  class?: string;
+  description?: string;
+  author?: string;
+  version?: string;
+  tags?: string[];
+  supportsDarkMode?: boolean;
+  status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
+  a11y?: {
+    contrastTarget?: number;
+    modes?: string[];
+  };
+  color?: string;
+  features?: string[];
+  dependencies?: string[];
+  createTheme: () => Theme;
 }
 
 /**
@@ -138,122 +138,122 @@ export type ThemeDefinition = CSSThemeDefinition | JSThemeDefinition;
  * Build configuration (migrated from theme.config.ts)
  */
 export interface BuildConfig {
-    output?: {
-        directory?: string;
-        formats?: {
-            expanded?: string;
-            compressed?: string;
-        };
-    };
-    sass?: {
-        style?: 'expanded' | 'compressed';
-        sourceMap?: boolean;
-        loadPaths?: string[];
+  output?: {
+    directory?: string;
+    formats?: {
+      expanded?: string;
+      compressed?: string;
     };
+  };
+  sass?: {
+    style?: 'expanded' | 'compressed';
+    sourceMap?: boolean;
+    loadPaths?: string[];
+  };
 }
 
 /**
  * Runtime configuration (migrated from theme.config.ts)
  */
 export interface RuntimeConfig {
-    basePath?: string;
-    cdnPath?: string | null;
-    preload?: string[];
-    lazy?: boolean;
-    defaultTheme?: string;
-    storageKey?: string;
-    dataAttribute?: string;
-    enablePersistence?: boolean;
-    useMinified?: boolean;
+  basePath?: string;
+  cdnPath?: string | null;
+  preload?: string[];
+  lazy?: boolean;
+  defaultTheme?: string;
+  storageKey?: string;
+  dataAttribute?: string;
+  enablePersistence?: boolean;
+  useMinified?: boolean;
 }
 
 /**
  * Integration settings (migrated from theme.config.ts)
  */
 export interface IntegrationConfig {
-    cssVariables?: Record<string, string>;
-    classNames?: {
-        theme?: string;
-        colorMode?: string;
-    };
+  cssVariables?: Record<string, string>;
+  classNames?: {
+    theme?: string;
+    colorMode?: string;
+  };
 }
 
 /**
  * Atomix Configuration Interface
- * 
+ *
  * Tailwind-like configuration for external developers.
  * Focus on theme customization - build/runtime configs are internal only.
  */
 export interface AtomixConfig {
-    /** 
-     * CSS variable prefix (default: 'atomix')
-     * 
-     * Change this to customize all CSS variable names.
-     * Example: prefix: 'myapp' → --myapp-primary instead of --atomix-primary
-     */
-    prefix?: string;
+  /**
+   * CSS variable prefix (default: 'atomix')
+   *
+   * Change this to customize all CSS variable names.
+   * Example: prefix: 'myapp' → --myapp-primary instead of --atomix-primary
+   */
+  prefix?: string;
 
-    /** 
-     * Theme customization (Tailwind-like)
-     * 
-     * Use `extend` to add or override design tokens.
-     * Use `tokens` to completely replace the default token system (advanced).
+  /**
+   * Theme customization (Tailwind-like)
+   *
+   * Use `extend` to add or override design tokens.
+   * Use `tokens` to completely replace the default token system (advanced).
+   */
+  theme?: {
+    /**
+     * Extend the default design tokens
+     *
+     * This is the recommended way to customize Atomix.
+     * Your values will override or extend the base tokens.
      */
-    theme?: {
-        /** 
-         * Extend the default design tokens
-         * 
-         * This is the recommended way to customize Atomix.
-         * Your values will override or extend the base tokens.
-         */
-        extend?: ThemeTokens;
+    extend?: ThemeTokens;
 
-        /** 
-         * Override the default tokens entirely (advanced)
-         * 
-         * Use with caution - this replaces the entire token system.
-         * Most users should use `extend` instead.
-         */
-        tokens?: ThemeTokens;
+    /**
+     * Override the default tokens entirely (advanced)
+     *
+     * Use with caution - this replaces the entire token system.
+     * Most users should use `extend` instead.
+     */
+    tokens?: ThemeTokens;
 
-        /** 
-         * Register custom themes (optional)
-         * 
-         * Define CSS or JavaScript themes that can be loaded dynamically.
-         */
-        themes?: Record<string, ThemeDefinition>;
-    };
+    /**
+     * Register custom themes (optional)
+     *
+     * Define CSS or JavaScript themes that can be loaded dynamically.
+     */
+    themes?: Record<string, ThemeDefinition>;
+  };
 
-    // Internal configurations (for library development only)
-    // These are not needed for external developers
-    /** @internal Build configuration (internal use only) */
-    build?: BuildConfig;
-    /** @internal Runtime configuration (internal use only) */
-    runtime?: RuntimeConfig;
-    /** @internal Integration settings (internal use only) */
-    integration?: IntegrationConfig;
-    /** @internal Theme dependencies mapping (internal use only) */
-    dependencies?: Record<string, string[]>;
+  // Internal configurations (for library development only)
+  // These are not needed for external developers
+  /** @internal Build configuration (internal use only) */
+  build?: BuildConfig;
+  /** @internal Runtime configuration (internal use only) */
+  runtime?: RuntimeConfig;
+  /** @internal Integration settings (internal use only) */
+  integration?: IntegrationConfig;
+  /** @internal Theme dependencies mapping (internal use only) */
+  dependencies?: Record<string, string[]>;
 }
 
 /**
  * Helper function to define Atomix configuration with type safety
- * 
+ *
  * @param config - Atomix configuration object
  * @returns The configuration object
  */
 /**
  * Helper function to define Atomix configuration with type safety
- * 
+ *
  * Similar to Tailwind's defineConfig, provides autocomplete and type checking.
- * 
+ *
  * @param config - Atomix configuration object
  * @returns The configuration object
- * 
+ *
  * @example
  * ```typescript
  * import { defineConfig } from '@shohojdhara/atomix/config';
- * 
+ *
  * export default defineConfig({
  *   theme: {
  *     extend: {
@@ -266,7 +266,7 @@ export interface AtomixConfig {
  * ```
  */
 export function defineConfig(config: AtomixConfig): AtomixConfig {
-    return config;
+  return config;
 }
 
 // Export loader functions

package/src/lib/constants/components.ts

@@ -1522,37 +1522,6 @@ export const BLOCK = {
   },
 };
 
-/**
- * GlassContainer-specific constants
- */
-export const GLASS_CONTAINER = {
-  CLASSES: {
-    BASE: 'c-glass-container',
-    GLASS: 'c-glass-container__glass',
-    WARP: 'c-glass-container__warp',
-    CONTENT: 'c-glass-container__content',
-    OVERLAY: 'c-glass-container__overlay',
-    OVERLAY_VISIBLE: 'c-glass-container__overlay--visible',
-    OVERLAY_HIDDEN: 'c-glass-container__overlay--hidden',
-    OVERLAY_BLEND: 'c-glass-container__overlay-blend',
-    BORDER: 'c-glass-container__border',
-    BORDER_OVERLAY: 'c-glass-container__border-overlay',
-    HOVER_EFFECT: 'c-glass-container__hover-effect',
-    ACTIVE_EFFECT: 'c-glass-container__active-effect',
-    INTERACTION_EFFECT: 'c-glass-container__interaction-effect',
-    ACTIVE: 'c-glass-container--active',
-    CLICKABLE: 'c-glass-container--clickable',
-  },
-  DISPLACEMENT_MAPS: {
-    STANDARD:
-      'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcwIiBoZWlnaHQ9IjY5IiB2aWV3Qm94PSIwIDAgMjcwIDY5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0iZ3JhZGllbnQiIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZGllbnQpIi8+PC9zdmc+',
-    POLAR:
-      'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcwIiBoZWlnaHQ9IjY5IiB2aWV3Qm94PSIwIDAgMjcwIDY5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0icG9sYXIiIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjODA4MDgwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwb2xhcikiLz48L3N2Zz4=',
-    PROMINENT:
-      'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcwIiBoZWlnaHQ9IjY5IiB2aWV3Qm94PSIwIDAgMjcwIDY5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0icHJvbWluZW50IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNjMGMwYzAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MDQwNDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3Byb21pbmVudCkiLz48L3N2Zz4=',
-  },
-};
-
 /**
  * Footer-specific constants
  */
@@ -1698,9 +1667,17 @@ export const ATOMIX_GLASS = {
     MIN_BLUR: 0.1,
     MOUSE_INFLUENCE_DIVISOR: 100,
     EDGE_FADE_PIXELS: 2,
-    DEFAULT_CORNER_RADIUS: 16, // Fallback value matching design system
+    // Note: This default must match the SCSS variable --atomix-radius-md
+    // @see src/styles/01-settings/_settings.global.scss
+    DEFAULT_CORNER_RADIUS: 16,
     MAX_SIZE: 4096, // Maximum width/height for glass size
 
+    // Palette for internal calculations (matches design system base colors)
+    PALETTE: {
+      WHITE: '255, 255, 255',
+      BLACK: '0, 0, 0',
+    },
+
     // Gradient calculation constants
     GRADIENT: {
       BASE_ANGLE: 135, // Base angle for border gradients (degrees)