@shohojdhara/atomix 0.3.5 → 0.3.6

package/src/styles/02-tools/_tools.button.scss

@@ -1,7 +1,9 @@
 @use 'sass:color';
+@use 'sass:map';
 @use '../01-settings/settings.config' as config;
 @use '../01-settings/settings.button' as button;
 @use '../01-settings/settings.colors' as colors;
+@use '../01-settings/settings.design-tokens' as tokens;
 @use '../01-settings/settings.border-radius' as *;
 @use 'tools.to-rgb' as *;
 @use 'tools.border-radius' as *;
@@ -16,99 +18,84 @@
   $active-background: null,
   $active-border: null
 ) {
-  $btn-text-color: colors.$white;
-  $btn-text-hover-color: colors.$white;
+  $btn-text-color: var(--#{config.$prefix}white, #{colors.$white});
+  $btn-text-hover-color: var(--#{config.$prefix}white, #{colors.$white});
 
   @if ($color == 'light') {
-    $btn-text-color: var(--#{config.$prefix}dark-text-emphasis);
-    $btn-text-hover-color: var(--#{config.$prefix}dark-text-emphasis);
-  }
-
-  @if ($color == 'secondary') {
-    $btn-text-color: var(--#{config.$prefix}dark-text-emphasis);
-    $btn-text-hover-color: var(--#{config.$prefix}dark-text-emphasis);
+    $btn-text-color: var(--#{config.$prefix}dark-text-emphasis, #{colors.$dark-text});
+    $btn-text-hover-color: var(--#{config.$prefix}dark-text-emphasis, #{colors.$dark-text});
+  } @else if ($color == 'secondary') {
+    $btn-text-color: var(--#{config.$prefix}dark-text-emphasis, #{colors.$dark-text});
+    $btn-text-hover-color: var(--#{config.$prefix}dark-text-emphasis, #{colors.$dark-text});
   }
 
   --#{config.$prefix}btn-color: #{$btn-text-color};
-  --#{config.$prefix}btn-bg: #{$background};
-  --#{config.$prefix}btn-border-color: #{$border};
+  --#{config.$prefix}btn-bg: var(--#{config.$prefix}#{$color}, #{$background});
+  --#{config.$prefix}btn-border-color: var(--#{config.$prefix}#{$color}, #{$border});
   --#{config.$prefix}btn-hover-color: #{$btn-text-hover-color};
-  --#{config.$prefix}btn-hover-bg: #{if(
-      $hover-background,
-      $hover-background,
-      color.scale($background, $lightness: -15%)
-    )};
-  --#{config.$prefix}btn-hover-border-color: #{if(
-      $hover-border,
-      $hover-border,
-      color.scale($border, $lightness: -10%)
-    )};
-  --#{config.$prefix}btn-active-color: #{colors.$white};
-  --#{config.$prefix}btn-active-bg: #{if(
-      $active-background,
-      $active-background,
-      color.scale($background, $lightness: -20%)
-    )};
-  --#{config.$prefix}btn-active-border-color: #{if(
-      $active-border,
-      $active-border,
-      color.scale($border, $lightness: -25%)
-    )};
-  --#{config.$prefix}btn-disabled-color: #{colors.$white};
-  --#{config.$prefix}btn-disabled-bg: #{$background};
-  --#{config.$prefix}btn-disabled-border-color: #{$background};
+  --#{config.$prefix}btn-hover-bg: var(--#{config.$prefix}#{$color}-hover, #{color.scale($background, $lightness: -15%)});
+  --#{config.$prefix}btn-hover-border-color: var(--#{config.$prefix}#{$color}-hover, #{color.scale($border, $lightness: -10%)});
+  --#{config.$prefix}btn-active-color: var(--#{config.$prefix}white, #{colors.$white});
+  --#{config.$prefix}btn-active-bg: var(--#{config.$prefix}#{$color}-hover, #{color.scale($background, $lightness: -20%)});
+  --#{config.$prefix}btn-active-border-color: var(--#{config.$prefix}#{$color}-hover, #{color.scale($border, $lightness: -25%)});
+  --#{config.$prefix}btn-disabled-color: var(--#{config.$prefix}white, #{colors.$white});
+  --#{config.$prefix}btn-disabled-bg: var(--#{config.$prefix}#{$color}, #{$background});
+  --#{config.$prefix}btn-disabled-border-color: var(--#{config.$prefix}#{$color}, #{$border});
 }
 
 // Button outline variant mixin
 @mixin btn-outline-variant(
   $color,
-  $color-hover: 'light',
-  $hover-background: $color,
-  $hover-border: $color,
-  $active-background: $color,
-  $active-border: $color
+  $color-hover: null,
+  $hover-background: null,
+  $hover-border: null,
+  $active-background: null,
+  $active-border: null
 ) {
-  @if ($hover-background == 'primary') {
-    $hover-background: 'primary';
-  }
-
-  @if ($hover-background == 'light') {
-    $hover-background: 'secondary';
-  }
-
-  @if ($hover-background == 'dark') {
-    $hover-background: 'secondary';
-  }
-
-  $btn-color: $color;
-
-  @if ($color == 'secondary') {
-    $btn-color: 'invert';
-    $color-hover: 'invert';
-  }
-
-  @if ($color == 'dark') {
-    $btn-color: 'invert';
-    $color-hover: 'invert';
-  }
+  $btn-color: var(--#{config.$prefix}#{$color}, #{map.get(tokens.$theme-colors, $color)});
+  $btn-hover-color: if(
+    $color-hover, 
+    var(--#{config.$prefix}#{$color-hover}, #{map.get(tokens.$theme-colors, $color-hover)}), 
+    var(--#{config.$prefix}white, #{colors.$white})
+  );
+  $btn-hover-bg: if(
+    $hover-background, 
+    var(--#{config.$prefix}#{$hover-background}, #{map.get(tokens.$theme-colors, $hover-background)}), 
+    var(--#{config.$prefix}#{$color}-hover, #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -15%)})
+  );
+  $btn-hover-border: if(
+    $hover-border, 
+    var(--#{config.$prefix}#{$hover-border}, #{map.get(tokens.$theme-colors, $hover-border)}), 
+    var(--#{config.$prefix}#{$color}-hover, #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -10%)})
+  );
+  $btn-active-color: if(
+    $color-hover, 
+    var(--#{config.$prefix}#{$color-hover}, #{map.get(tokens.$theme-colors, $color-hover)}), 
+    var(--#{config.$prefix}white, #{colors.$white})
+  );
+  $btn-active-bg: if(
+    $active-background, 
+    var(--#{config.$prefix}#{$active-background}, #{map.get(tokens.$theme-colors, $active-background)}), 
+    var(--#{config.$prefix}#{$color}-hover, #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -20%)})
+  );
+  $btn-active-border: if(
+    $active-border, 
+    var(--#{config.$prefix}#{$active-border}, #{map.get(tokens.$theme-colors, $active-border)}), 
+    var(--#{config.$prefix}#{$color}-hover, #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -25%)})
+  );
 
-  @if ($color == 'light') {
-    $btn-color: 'invert';
-    $color-hover: 'invert';
-  }
-
-  --#{config.$prefix}btn-color: var(--#{config.$prefix}#{$btn-color});
+  --#{config.$prefix}btn-color: #{$btn-color};
   --#{config.$prefix}btn-bg: transparent;
-  --#{config.$prefix}btn-border-color: var(--#{config.$prefix}#{$color});
-  --#{config.$prefix}btn-hover-color: var(--#{config.$prefix}#{$color-hover});
-  --#{config.$prefix}btn-hover-bg: var(--#{config.$prefix}#{$hover-background});
-  --#{config.$prefix}btn-hover-border-color: var(--#{config.$prefix}#{$hover-border});
-  --#{config.$prefix}btn-active-color: var(--#{config.$prefix}#{$color-hover});
-  --#{config.$prefix}btn-active-bg: var(--#{config.$prefix}#{$active-background});
-  --#{config.$prefix}btn-active-border-color: var(--#{config.$prefix}#{$active-border});
-  --#{config.$prefix}btn-disabled-color: var(--#{config.$prefix}#{$color});
+  --#{config.$prefix}btn-border-color: #{$btn-color};
+  --#{config.$prefix}btn-hover-color: #{$btn-hover-color};
+  --#{config.$prefix}btn-hover-bg: #{$btn-hover-bg};
+  --#{config.$prefix}btn-hover-border-color: #{$btn-hover-border};
+  --#{config.$prefix}btn-active-color: #{$btn-active-color};
+  --#{config.$prefix}btn-active-bg: #{$btn-active-bg};
+  --#{config.$prefix}btn-active-border-color: #{$btn-active-border};
+  --#{config.$prefix}btn-disabled-color: #{$btn-color};
   --#{config.$prefix}btn-disabled-bg: transparent;
-  --#{config.$prefix}btn-disabled-border-color: var(--#{config.$prefix}#{$color});
+  --#{config.$prefix}btn-disabled-border-color: #{$btn-color};
 }
 
 // Button size mixin
@@ -117,4 +104,4 @@
   --#{config.$prefix}btn-padding-x: #{$padding-x};
   --#{config.$prefix}btn-font-size: #{$font-size};
   --#{config.$prefix}btn-border-radius: #{$border-radius};
-}
+}

package/src/styles/06-components/_components.atomix-glass.scss

@@ -1,6 +1,8 @@
 // Component: AtomixGlass
 // =============================================================================
 
+@use '../02-tools/tools.component' as *;
+
 .c-atomix-glass {
   position: relative;
 
@@ -38,19 +40,19 @@
   }
 
   &__hover-1 {
-    transition: opacity 0.2s ease-out;
+    transition: opacity var(--atomix-transition-duration-fast, 0.15s) ease-out;
     opacity: var(--atomix-glass-hover-1-opacity, 0);
     background: var(--atomix-glass-hover-1-gradient, none);
   }
 
   &__hover-2 {
-    transition: opacity 0.4s ease-out;
+    transition: opacity var(--atomix-transition-duration-base, 0.3s) ease-out;
     opacity: var(--atomix-glass-hover-2-opacity, 0);
     background: var(--atomix-glass-hover-2-gradient, none);
   }
 
   &__hover-3 {
-    transition: opacity 0.6s ease-out;
+    transition: opacity var(--atomix-transition-duration-slow, 0.5s) ease-out;
     opacity: var(--atomix-glass-hover-3-opacity, 0);
     background: var(--atomix-glass-hover-3-gradient, none);
   }
@@ -91,6 +93,7 @@
     box-sizing: border-box;
     overflow: hidden;
     pointer-events: none;
+    /* postcss-ignore-start */
     -webkit-mask:
       linear-gradient(var(--atomix-black, #000000) 0 0) content-box,
       linear-gradient(var(--atomix-black, #000000) 0 0);
@@ -99,6 +102,7 @@
       linear-gradient(var(--atomix-black, #000000) 0 0) content-box,
       linear-gradient(var(--atomix-black, #000000) 0 0);
     mask-composite: exclude;
+    /* postcss-ignore-end */
 
     position: var(--atomix-glass-position);
     top: var(--atomix-glass-top);
@@ -233,6 +237,12 @@
     --atomix-glass-transition: none;
   }
 
+  // Focus ring for interactive elements (when onClick is provided)
+  &[role='button'],
+  &[tabindex]:not([tabindex='-1']) {
+    @include focus-ring;
+  }
+
   // Responsive and accessibility
   @media (prefers-reduced-motion: reduce) {
     --atomix-glass-transition: none;

package/src/styles/06-components/_components.pagination.scss

@@ -153,4 +153,92 @@
   &__icon-skip-forward::before {
     content: '⏭';
   }
+
+  // Search functionality
+  &__search {
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  &__search-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  &__search-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  &__search-label-text {
+    font-size: var(--#{config.$prefix}pagination-font-size);
+    color: var(--#{config.$prefix}pagination-color);
+    white-space: nowrap;
+  }
+
+  &__search-input {
+    width: 80px;
+    padding: var(--#{config.$prefix}pagination-padding-y)
+      var(--#{config.$prefix}pagination-padding-x);
+    font-size: var(--#{config.$prefix}pagination-font-size);
+    text-align: center;
+    border: 1px solid var(--#{config.$prefix}pagination-color);
+    border-radius: var(--#{config.$prefix}pagination-border-radius);
+    @include dynamic-background(var(--#{config.$prefix}pagination-bg));
+    color: var(--#{config.$prefix}pagination-color);
+    transition: all 0.2s ease-in-out;
+
+    &:focus {
+      outline: none;
+      border-color: var(--#{config.$prefix}pagination-focus-border-color);
+      border-width: var(--#{config.$prefix}pagination-focus-border-width);
+    }
+
+    &.is-error {
+      border-color: var(--#{config.$prefix}error-color, #dc3545);
+      background-color: var(--#{config.$prefix}error-bg-subtle, rgba(220, 53, 69, 0.1));
+    }
+  }
+
+  &__search-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @include size.square(var(--#{config.$prefix}pagination-size));
+    padding: var(--#{config.$prefix}pagination-padding-y)
+      var(--#{config.$prefix}pagination-padding-x);
+    @include dynamic-background(var(--#{config.$prefix}pagination-bg));
+    border: 1px solid var(--#{config.$prefix}pagination-color);
+    border-radius: var(--#{config.$prefix}pagination-border-radius);
+    color: var(--#{config.$prefix}pagination-color);
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+      --#{config.$prefix}pagination-color: var(--#{config.$prefix}pagination-hover-color);
+      --#{config.$prefix}pagination-bg: var(--#{config.$prefix}pagination-hover-bg);
+    }
+
+    &:focus-visible {
+      outline: none;
+      border-color: var(--#{config.$prefix}pagination-focus-border-color);
+      border-width: var(--#{config.$prefix}pagination-focus-border-width);
+    }
+
+    .c-icon {
+      color: inherit;
+    }
+  }
+
+  &__search-error {
+    font-size: 0.75rem;
+    color: var(--#{config.$prefix}error-color, #dc3545);
+    text-align: center;
+    margin-top: 0.25rem;
+  }
 }

package/scripts/sync-theme-config.js

@@ -1,309 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Sync Theme Configuration
- * 
- * This script generates src/themes/themes.config.js from theme.config.ts
- * to maintain a single source of truth for theme configuration.
- */
-
-import { readFile, writeFile } from 'fs/promises';
-import { join, dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-// File paths
-const THEME_CONFIG_TS = join(__dirname, '../theme.config.ts');
-const THEMES_CONFIG_JS = join(__dirname, '../src/themes/themes.config.js');
-
-/**
- * Parse theme.config.ts to extract configuration
- * Note: This is a simplified parser that works with the current structure
- */
-async function parseThemeConfigTS() {
-  try {
-    const content = await readFile(THEME_CONFIG_TS, 'utf8');
-
-    // Extract themes object
-    const themesMatch = content.match(/themes:\s*{([^}]+(?:{[^}]*}[^}]*)*[^}]+)}/s);
-    if (!themesMatch) {
-      throw new Error('Could not find themes configuration');
-    }
-
-    // Extract individual theme configurations
-    const themes = {};
-    const themeRegex = /['"]([^'"]+)['"]\s*:\s*{([^}]+(?:{[^}]*}[^}]*)*[^}]+)}/gs;
-    let match;
-
-    while ((match = themeRegex.exec(themesMatch[1])) !== null) {
-      const [, themeName, themeConfig] = match;
-
-      // Parse theme properties
-      const theme = {
-        name: extractValue(themeConfig, 'name'),
-        description: extractValue(themeConfig, 'description'),
-        author: extractValue(themeConfig, 'author'),
-        version: extractValue(themeConfig, 'version'),
-        tags: extractArray(themeConfig, 'tags'),
-        supportsDarkMode: extractBoolean(themeConfig, 'supportsDarkMode'),
-        status: extractValue(themeConfig, 'status'),
-        color: extractValue(themeConfig, 'color'),
-      };
-
-      // Parse features if present
-      const featuresMatch = themeConfig.match(/features:\s*\[([^\]]*)\]/s);
-      if (featuresMatch) {
-        theme.features = featuresMatch[1]
-          .split(',')
-          .map(f => f.trim().replace(/['"]/g, ''))
-          .filter(f => f.length > 0);
-      }
-
-      // Parse a11y if present
-      const a11yMatch = themeConfig.match(/a11y:\s*{([^}]*)}/);
-      if (a11yMatch) {
-        theme.a11y = {
-          contrastTarget: extractNumber(a11yMatch[1], 'contrastTarget'),
-          modes: extractArray(a11yMatch[1], 'modes'),
-        };
-      }
-
-      themes[themeName] = theme;
-    }
-
-    // Extract build configuration
-    const buildMatch = content.match(/build:\s*(defaultBuildConfig|{[^}]+})/);
-    const build = buildMatch && buildMatch[1] === 'defaultBuildConfig'
-      ? getDefaultBuildConfig()
-      : parseBuildConfig(buildMatch?.[1]);
-
-    // Extract runtime configuration  
-    const runtimeMatch = content.match(/runtime:\s*(defaultRuntimeConfig|{[^}]+})/);
-    const runtime = runtimeMatch && runtimeMatch[1] === 'defaultRuntimeConfig'
-      ? getDefaultRuntimeConfig()
-      : parseRuntimeConfig(runtimeMatch?.[1]);
-
-    // Extract integration configuration
-    const integrationMatch = content.match(/integration:\s*(defaultIntegrationConfig|{[^}]+})/);
-    const integration = integrationMatch && integrationMatch[1] === 'defaultIntegrationConfig'
-      ? getDefaultIntegrationConfig()
-      : parseIntegrationConfig(integrationMatch?.[1]);
-
-    return {
-      themes,
-      build,
-      runtime,
-      integration,
-      dependencies: {},
-    };
-  } catch (error) {
-    console.error('❌ Failed to parse theme.config.ts:', error.message);
-    throw error;
-  }
-}
-
-/**
- * Helper function to extract string values
- */
-function extractValue(text, key) {
-  const regex = new RegExp(`${key}:\\s*['"]([^'"]+)['"]`);
-  const match = text.match(regex);
-  return match ? match[1] : undefined;
-}
-
-/**
- * Helper function to extract number values
- */
-function extractNumber(text, key) {
-  const regex = new RegExp(`${key}:\\s*(\\d+(?:\\.\\d+)?)`);
-  const match = text.match(regex);
-  return match ? parseFloat(match[1]) : undefined;
-}
-
-/**
- * Helper function to extract boolean values
- */
-function extractBoolean(text, key) {
-  const regex = new RegExp(`${key}:\\s*(true|false)`);
-  const match = text.match(regex);
-  return match ? match[1] === 'true' : undefined;
-}
-
-/**
- * Helper function to extract array values
- */
-function extractArray(text, key) {
-  const regex = new RegExp(`${key}:\\s*\\[([^\\]]*)\\]`);
-  const match = text.match(regex);
-  if (!match) return undefined;
-
-  return match[1]
-    .split(',')
-    .map(item => item.trim().replace(/['"]/g, ''))
-    .filter(item => item.length > 0);
-}
-
-/**
- * Get default build configuration
- */
-function getDefaultBuildConfig() {
-  return {
-    output: {
-      directory: 'themes',
-      formats: {
-        expanded: '.css',
-        compressed: '.min.css',
-      },
-    },
-    sass: {
-      style: 'expanded',
-      sourceMap: true,
-      loadPaths: ['src'],
-    },
-  };
-}
-
-/**
- * Get default runtime configuration
- */
-function getDefaultRuntimeConfig() {
-  return {
-    basePath: '/themes',
-    cdnPath: null,
-    preload: [],
-    lazy: true,
-    defaultTheme: '',
-    storageKey: 'atomix-theme',
-    useMinified: "process.env.NODE_ENV === 'production'",
-  };
-}
-
-/**
- * Get default integration configuration
- */
-function getDefaultIntegrationConfig() {
-  return {
-    cssVariables: {
-      colorMode: '--storybook-color-mode',
-    },
-    classNames: {
-      theme: 'data-theme',
-      colorMode: 'data-atomix-color-mode',
-    },
-  };
-}
-
-/**
- * Parse build configuration
- */
-function parseBuildConfig(configText) {
-  if (!configText) return getDefaultBuildConfig();
-  // For now, return default config
-  // A more sophisticated parser would be needed for complex objects
-  return getDefaultBuildConfig();
-}
-
-/**
- * Parse runtime configuration
- */
-function parseRuntimeConfig(configText) {
-  if (!configText) return getDefaultRuntimeConfig();
-  // For now, return default config
-  // A more sophisticated parser would be needed for complex objects
-  return getDefaultRuntimeConfig();
-}
-
-/**
- * Parse integration configuration
- */
-function parseIntegrationConfig(configText) {
-  if (!configText) return getDefaultIntegrationConfig();
-  // For now, return default config
-  // A more sophisticated parser would be needed for complex objects
-  return getDefaultIntegrationConfig();
-}
-
-/**
- * Generate themes.config.js content
- */
-function generateThemesConfigJS(config) {
-  const { themes, build, runtime, integration, dependencies } = config;
-
-  // Convert themes to metadata format
-  const metadata = {};
-  for (const [key, theme] of Object.entries(themes)) {
-    metadata[key] = { ...theme };
-    // Remove undefined values
-    Object.keys(metadata[key]).forEach(k => {
-      if (metadata[key][k] === undefined) {
-        delete metadata[key][k];
-      }
-    });
-  }
-
-  return `/**
- * Theme Configuration
- *
- * This file is auto-generated from theme.config.ts
- * DO NOT EDIT MANUALLY - Edit theme.config.ts instead
- * 
- * Generated on: ${new Date().toISOString()}
- */
-
-export const themesConfig = {
-  // Theme metadata
-  metadata: ${JSON.stringify(metadata, null, 4).replace(/"([^"]+)":/g, '$1:')},
-
-  // Build configuration
-  build: ${JSON.stringify(build, null, 4).replace(/"([^"]+)":/g, '$1:')},
-
-  // Export configuration for package.json
-  exports: {
-    './themes/*': './dist/themes/*.css',
-    './themes/*.min': './dist/themes/*.min.css',
-  },
-
-  // Theme integration settings
-  integration: ${JSON.stringify(integration, null, 4).replace(/"([^"]+)":/g, '$1:')},
-
-  // Runtime theme loading configuration
-  runtime: ${JSON.stringify(runtime, null, 4).replace(/"([^"]+)":/g, '$1:').replace(/"process\.env\.NODE_ENV === 'production'"/g, "process.env.NODE_ENV === 'production'")},
-
-  // Theme dependencies (if a theme requires another theme to be loaded)
-  dependencies: ${JSON.stringify(dependencies, null, 4).replace(/"([^"]+)":/g, '$1:')},
-};`;
-}
-
-/**
- * Main function
- */
-async function main() {
-  console.log('🔄 Syncing theme configuration...\n');
-
-  try {
-    // Parse theme.config.ts
-    console.log('📖 Reading theme.config.ts...');
-    const config = await parseThemeConfigTS();
-    console.log(`  ✅ Found ${Object.keys(config.themes).length} themes`);
-
-    // Generate themes.config.js
-    console.log('\n📝 Generating themes.config.js...');
-    const jsContent = generateThemesConfigJS(config);
-
-    // Write to file
-    await writeFile(THEMES_CONFIG_JS, jsContent, 'utf8');
-    console.log('  ✅ Written to src/themes/themes.config.js');
-
-    console.log('\n✨ Configuration sync complete!');
-    console.log('   themes.config.js has been updated from theme.config.ts');
-
-  } catch (error) {
-    console.error('\n💥 Sync failed:', error.message);
-    process.exit(1);
-  }
-}
-
-// Run the sync
-main();