@shohojdhara/atomix 0.3.3 → 0.3.4

package/src/themes/shaj-default/06-components/_components.navbar.scss

@@ -1,99 +0,0 @@
-/*!
- * Shaj Default Theme Navbar Component Overrides
- * Additional styling for modern navbar aesthetics
- */
-@use '../01-settings/settings.config' as *;
-
-.c-navbar {
-  // Enhanced backdrop blur effect
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-
-  // Subtle border
-  border-bottom: 1px solid var(--#{$prefix}gray-2);
-
-  // Brand styling
-  .c-navbar-brand {
-    font-weight: 700;
-    letter-spacing: -0.02em;
-    color: var(--#{$prefix}gray-9);
-
-    &:hover {
-      color: var(--#{$prefix}primary-6);
-    }
-  }
-
-  // Nav links
-  .c-navbar-nav {
-    .c-nav-link {
-      font-weight: 500;
-      color: var(--#{$prefix}gray-7);
-      transition: all 200ms ease-in-out;
-      position: relative;
-
-      &:hover {
-        color: var(--#{$prefix}primary-6);
-      }
-
-      &.active {
-        color: var(--#{$prefix}primary-6);
-        font-weight: 600;
-
-        // Active indicator
-        &::after {
-          content: '';
-          position: absolute;
-          bottom: -8px;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 4px;
-          height: 4px;
-          background: var(--#{$prefix}primary-6);
-          border-radius: 50%;
-        }
-      }
-    }
-  }
-
-  // Mobile toggler
-  .c-navbar-toggler {
-    border: none;
-    padding: 8px;
-
-    &:focus {
-      box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.25);
-    }
-
-    .c-navbar-toggler-icon {
-      background-image: none;
-      width: 20px;
-      height: 2px;
-      background: var(--#{$prefix}gray-7);
-      position: relative;
-      transition: all 200ms ease-in-out;
-
-      &::before,
-      &::after {
-        content: '';
-        position: absolute;
-        width: 20px;
-        height: 2px;
-        background: var(--#{$prefix}gray-7);
-        transition: all 200ms ease-in-out;
-      }
-
-      &::before {
-        top: -6px;
-      }
-
-      &::after {
-        bottom: -6px;
-      }
-    }
-  }
-
-  // Fixed navbar styling
-  &.c-navbar-fixed {
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  }
-}

package/src/themes/shaj-default/06-components/_index.scss

@@ -1,13 +0,0 @@
-/*!
- * Shaj Default Theme Component Overrides
- * Additional component styling for modern aesthetics
- */
-
-@use '../01-settings/settings.config' as *;
-
-// Import component overrides
-@forward './components.button';
-@forward './components.card';
-@forward './components.input';
-@forward './components.navbar';
-@forward './components.tooltip';

package/src/themes/shaj-default/index.scss

@@ -1,25 +0,0 @@
-/*!
- * Atomix Design System theme Shaj Default
- */
-
-// Import and forward local theme settings first (these override base settings)
-@use '01-settings/index' as *;
-
-// Import and forward base styles with local overrides
-@use '02-tools/index' as *;
-@use '../../styles/02-tools/index' as tools;
-
-@use '03-generic/index' as *;
-@use '../../styles/03-generic/index' as generic;
-
-@use '04-elements/index' as *;
-@use '../../styles/04-elements/index' as elements;
-
-@use '05-objects/index' as *;
-@use '../../styles/05-objects/index' as objects;
-
-@use '06-components/index' as *;
-@use '../../styles/06-components/index';
-
-@use '99-utilities/index' as *;
-@use '../../styles/99-utilities/index' as utilities;

package/theme.config.ts

@@ -1,360 +0,0 @@
-/**
- * Atomix Theme Configuration
- * 
- * Global configuration file for the Atomix Design System theme system.
- * This file defines all available themes, build settings, runtime configuration,
- * and integration settings.
- * 
- * @example
- * ```typescript
- * import { loadThemeConfig } from '@shohojdhara/atomix/theme/config';
- * const config = loadThemeConfig();
- * ```
- */
-
-import type { Theme } from './src/lib/theme/types';
-import { createTheme } from './src/lib/theme/createTheme';
-
-/**
- * CSS Theme Definition
- * Defines a theme that is loaded from a CSS file
- */
-export interface CSSThemeDefinition {
-  /** Theme type identifier */
-  type: 'css';
-  /** Display name of the theme */
-  name: string;
-  /** Unique identifier/class name for the theme */
-  class?: string;
-  /** Theme description */
-  description?: string;
-  /** Theme author */
-  author?: string;
-  /** Theme version (semver) */
-  version?: string;
-  /** Theme tags for categorization */
-  tags?: string[];
-  /** Whether the theme supports dark mode */
-  supportsDarkMode?: boolean;
-  /** Theme status: stable, beta, experimental, deprecated */
-  status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
-  /** Accessibility information */
-  a11y?: {
-    /** Target contrast ratio */
-    contrastTarget?: number;
-    /** Supported color modes */
-    modes?: string[];
-  };
-  /** Primary theme color (for UI display) */
-  color?: string;
-  /** Theme features list */
-  features?: string[];
-  /** Theme dependencies (other themes required) */
-  dependencies?: string[];
-  /** Custom CSS file path (optional, defaults to theme name) */
-  cssPath?: string;
-}
-
-/**
- * JavaScript Theme Definition
- * Defines a theme created programmatically using createTheme
- */
-export interface JSThemeDefinition {
-  /** Theme type identifier */
-  type: 'js';
-  /** Display name of the theme */
-  name: string;
-  /** Unique identifier/class name for the theme */
-  class?: string;
-  /** Theme description */
-  description?: string;
-  /** Theme author */
-  author?: string;
-  /** Theme version (semver) */
-  version?: string;
-  /** Theme tags for categorization */
-  tags?: string[];
-  /** Whether the theme supports dark mode */
-  supportsDarkMode?: boolean;
-  /** Theme status: stable, beta, experimental, deprecated */
-  status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
-  /** Accessibility information */
-  a11y?: {
-    /** Target contrast ratio */
-    contrastTarget?: number;
-    /** Supported color modes */
-    modes?: string[];
-  };
-  /** Primary theme color (for UI display) */
-  color?: string;
-  /** Theme features list */
-  features?: string[];
-  /** Theme dependencies (other themes required) */
-  dependencies?: string[];
-  /** Function that creates the theme object */
-  createTheme: () => Theme;
-}
-
-/**
- * Theme definition (CSS or JS)
- */
-export type ThemeDefinition = CSSThemeDefinition | JSThemeDefinition;
-
-/**
- * Build configuration
- */
-export interface BuildConfig {
-  /** Output directory for compiled themes */
-  output: {
-    /** Output directory path */
-    directory: string;
-    /** Output file formats */
-    formats: {
-      /** Expanded format extension */
-      expanded: string;
-      /** Compressed format extension */
-      compressed: string;
-    };
-  };
-  /** Sass compilation settings */
-  sass: {
-    /** Output style */
-    style: 'expanded' | 'compressed' | 'compact' | 'nested';
-    /** Generate source maps */
-    sourceMap: boolean;
-    /** Additional load paths */
-    loadPaths: string[];
-  };
-}
-
-/**
- * Runtime configuration
- */
-export interface RuntimeConfig {
-  /** Base path for theme CSS files (relative to public directory) */
-  basePath: string;
-  /** Optional CDN path for theme files */
-  cdnPath?: string | null;
-  /** Themes to preload on initialization */
-  preload?: string[];
-  /** Enable lazy loading of themes */
-  lazy?: boolean;
-  /** Default theme name */
-  defaultTheme: string;
-  /** localStorage key for theme persistence */
-  storageKey?: string;
-  /** Data attribute name for theme */
-  dataAttribute?: string;
-  /** Enable persistence */
-  enablePersistence?: boolean;
-  /** Use minified CSS files in production */
-  useMinified?: boolean;
-}
-
-/**
- * Integration configuration
- */
-export interface IntegrationConfig {
-  /** CSS variables for theme integration */
-  cssVariables: {
-    /** Color mode variable name */
-    colorMode?: string;
-    /** Additional custom variables */
-    [key: string]: string | undefined;
-  };
-  /** Attribute names used for theme and color mode */
-  classNames: {
-    /** Theme attribute name */
-    theme: string;
-    /** Color mode attribute name */
-    colorMode: string;
-  };
-}
-
-/**
- * Complete theme configuration
- */
-export interface ThemeConfig {
-  /** Available themes */
-  themes: Record<string, ThemeDefinition>;
-  /** Build configuration */
-  build: BuildConfig;
-  /** Runtime configuration */
-  runtime: RuntimeConfig;
-  /** Integration settings */
-  integration: IntegrationConfig;
-  /** Theme dependencies mapping */
-  dependencies?: Record<string, string[]>;
-}
-
-/**
- * Default build configuration
- */
-const defaultBuildConfig: BuildConfig = {
-  output: {
-    directory: 'themes',
-    formats: {
-      expanded: '.css',
-      compressed: '.min.css',
-    },
-  },
-  sass: {
-    style: 'expanded',
-    sourceMap: true,
-    loadPaths: ['src'],
-  },
-};
-
-/**
- * Default runtime configuration
- */
-const defaultRuntimeConfig: RuntimeConfig = {
-  basePath: '/themes',
-  cdnPath: null,
-  preload: ['shaj-default'],
-  lazy: true,
-  defaultTheme: 'shaj-default',
-  storageKey: 'atomix-theme',
-  dataAttribute: 'data-theme',
-  enablePersistence: true,
-  useMinified: process.env.NODE_ENV === 'production',
-};
-
-/**
- * Default integration configuration
- */
-const defaultIntegrationConfig: IntegrationConfig = {
-  cssVariables: {
-    colorMode: '--storybook-color-mode',
-  },
-  classNames: {
-    theme: 'data-theme',
-    colorMode: 'data-atomix-color-mode',
-  },
-};
-
-/**
- * Theme configuration
- * 
- * This is the main configuration object that defines all themes,
- * build settings, runtime behavior, and integration options.
- */
-const themeConfig: ThemeConfig = {
-  themes: {
-    'shaj-default': {
-      type: 'css',
-      name: 'Shaj Default',
-      description: 'The default theme for the Atomix Design System',
-      author: 'Shohoj Dhara',
-      version: '1.0.0',
-      tags: ['default', 'light'],
-      supportsDarkMode: true,
-      status: 'stable',
-      a11y: { contrastTarget: 4.5, modes: ['light', 'dark'] },
-      color: '#3b82f6',
-    },
-    boomdevs: {
-      type: 'css',
-      name: 'BoomDevs',
-      description: 'BoomDevs theme for the Atomix Design System',
-      author: 'BoomDevs Team',
-      version: '1.0.0',
-      tags: ['dark', 'modern'],
-      supportsDarkMode: true,
-      status: 'beta',
-      a11y: { contrastTarget: 4.5, modes: ['light', 'dark'] },
-      color: '#8b5cf6',
-    },
-    esrar: {
-      type: 'css',
-      name: 'Esrar',
-      description: 'Esrar theme for the Atomix Design System',
-      author: 'Esrar Team',
-      version: '1.0.0',
-      tags: ['light', 'minimal'],
-      supportsDarkMode: true,
-      status: 'beta',
-      a11y: { contrastTarget: 4.5, modes: ['light', 'dark'] },
-      color: '#10b981',
-    },
-    mashroom: {
-      type: 'css',
-      name: 'Mashroom',
-      description: 'Mashroom theme for the Atomix Design System',
-      author: 'Mashroom Team',
-      version: '1.0.0',
-      tags: ['dark', 'contrast'],
-      supportsDarkMode: true,
-      status: 'beta',
-      a11y: { contrastTarget: 4.5, modes: ['light', 'dark'] },
-      color: '#f59e0b',
-    },
-    applemix: {
-      type: 'css',
-      name: 'Applemix',
-      description: 'Apple Mac OS 2026 Liquid Glass inspired theme with morphism effects',
-      author: 'Atomix Design System',
-      version: '1.0.0',
-      tags: ['glass', 'apple', 'modern', 'liquid', 'morphism'],
-      supportsDarkMode: true,
-      features: [
-        'Liquid glass morphism effects',
-        'Apple-inspired color palette',
-        'Chromatic aberration effects',
-        'Smooth animations and transitions',
-        'AtomixGlass component integration',
-        'Comprehensive component overrides',
-        'Light and dark mode support',
-      ],
-      status: 'experimental',
-      a11y: { contrastTarget: 4.5, modes: ['light', 'dark'] },
-      color: '#f5f5f5',
-    },
-    flashtrade: {
-      type: 'css',
-      name: 'Flash Trade',
-      description: 'Professional dark crypto perpetuals trading platform theme inspired by flash.trade',
-      author: 'Atomix Design System',
-      version: '1.1.0',
-      tags: ['dark', 'crypto', 'trading', 'glass', 'modern', 'decentralized', 'defi'],
-      supportsDarkMode: true,
-      features: [
-        'Ultra-dark trading interface aesthetic matching flash.trade',
-        'Bright cyan (#06b6d4) primary color for brand consistency',
-        'High contrast for financial data readability',
-        'Trading-focused color palette (green for long/profit, red for short/loss)',
-        'Glass morphism effects for modern UI depth',
-        'Optimized Inter typography for trading information',
-        'Fast animations for real-time data updates',
-        'Professional navbar with asset selector bar',
-        'Trading cards with hover effects and glass morphism',
-        'Comprehensive button styles for trading actions',
-        'Price change badges with glow effects',
-        'Responsive mobile-first design',
-        'AtomixGlass component integration',
-      ],
-      status: 'stable',
-      a11y: { contrastTarget: 4.5, modes: ['dark'] },
-      color: '#06b6d4',
-    },
-  },
-  build: defaultBuildConfig,
-  runtime: defaultRuntimeConfig,
-  integration: defaultIntegrationConfig,
-  dependencies: {},
-};
-
-/**
- * Helper function to define theme configuration with type safety
- * 
- * @param config - Theme configuration object
- * @returns The configuration object with proper typing
- */
-export function defineThemeConfig(config: ThemeConfig): ThemeConfig {
-  return config;
-}
-
-/**
- * Default export of theme configuration
- */
-export default themeConfig;