@shohojdhara/atomix 0.5.0 → 0.5.1

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

@@ -6,59 +6,82 @@
 .c-atomix-glass {
   position: relative;
 
-  // CSS custom property defaults
-  --atomix-glass-transition: all 0.15s ease;
+  // Local, sane defaults (kept minimal)
+  --_glass-radius: var(--atomix-glass-radius, var(--atomix-radius-md, 0.75rem));
+  --_glass-transform: var(--atomix-glass-transform, translateZ(0));
+  --_glass-backdrop: var(--atomix-glass-border-backdrop, blur(14px) saturate(140%));
+
   --atomix-glass-position: absolute;
-  --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem);
+  --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.125rem);
+  --atomix-glass-top: 0;
+  --atomix-glass-left: 0;
+  --atomix-glass-right: auto;
+  --atomix-glass-bottom: auto;
+
+  --_glass-transition: var(--atomix-transition-base);
 
   // =========================================================================
-  // Z-INDEX STACKING ORDER (local scale, scoped to this component)
+  // Z-INDEX STACKING ORDER (based on design token system)
   // =========================================================================
-  // 0: background layers
-  // 1: container (wraps filter + content)
-  // 2: base / overlay effect layers
-  // 3: hover effect layers
-  // 4: overlay-highlight
-  // 5: border-1
-  // 6: border-2
+  // Using the z-index layers mapping defined in the theme system
+  // Background: 0
+  // Overlay: 1
+  // Content: 2
+  // Floating: 10+
   // =========================================================================
   // Internal layers within the container:
   //   filter  = base + 1
   //   content = base + 7
   // =========================================================================
-  --atomix-glass-base-z-index: 0;
-
-  --_glass-z-background: calc(var(--atomix-glass-base-z-index) + 0);
-  --_glass-z-container: calc(var(--atomix-glass-base-z-index) + 1);
-  --_glass-z-filter: calc(var(--atomix-glass-base-z-index) + 1);
-  --_glass-z-effect: calc(var(--atomix-glass-base-z-index) + 2);
-  --_glass-z-hover: calc(var(--atomix-glass-base-z-index) + 3);
-  --_glass-z-overlay-highlight: calc(var(--atomix-glass-base-z-index) + 4);
-  --_glass-z-border-1: calc(var(--atomix-glass-base-z-index) + 5);
-  --_glass-z-border-2: calc(var(--atomix-glass-base-z-index) + 6);
-  --_glass-z-content: calc(var(--atomix-glass-base-z-index) + 7);
-  position: relative;
-
-  // Base layer styles for all effect layers (hover, border, overlay)
+  --atomix-glass-base-z-index: var(--atomix-z-index-base, 0);
+
+  --_glass-z-background: calc(
+    var(--atomix-glass-base-z-index) + var(--atomix-z-index-background, 0)
+  );
+  --_glass-z-container: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
+  --_glass-z-filter: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
+  --_glass-z-effect: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
+  --_glass-z-hover: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
+  --_glass-z-overlay-highlight: calc(
+    var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1)
+  );
+  --_glass-z-border-1: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
+  --_glass-z-border-2: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
+  --_glass-z-border-3: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-content, 2));
+  --_glass-z-content: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-content, 2));
+
+  --atomix-glass-border-shadow:
+    0 0 0 0.5px var(--atomix-glass-border-color, rgba(255, 255, 255, 0.45)) inset,
+    0 1px 2px var(--atomix-glass-inner-shadow-color, rgba(255, 255, 255, 0.18)) inset,
+    0 2px 6px var(--atomix-glass-outer-shadow-color, rgba(0, 0, 0, 0.28));
+
+  // Base layer styles for effect layers
   &__hover-1,
   &__hover-2,
-  &__hover-3 {
+  &__hover-3,
+  &__base,
+  &__overlay {
     position: var(--atomix-glass-position);
     top: var(--atomix-glass-top);
     left: var(--atomix-glass-left);
+    right: var(--atomix-glass-right);
+    bottom: var(--atomix-glass-bottom);
+    width: var(--atomix-glass-width);
+    height: var(--atomix-glass-height);
     pointer-events: none;
-    border-radius: var(--atomix-glass-radius);
-    transform: var(--atomix-glass-transform);
-    transition: var(--atomix-glass-transition);
+    border-radius: var(--_glass-radius);
+    transform: var(--_glass-transform);
+    transition: var(--_glass-transition);
+  }
+
+  &__hover-1,
+  &__hover-2,
+  &__hover-3 {
     z-index: var(--_glass-z-hover);
   }
 
   &__base,
   &__overlay {
-    pointer-events: none;
-    border-radius: var(--atomix-glass-radius);
-    transform: var(--atomix-glass-transform);
-    transition: var(--atomix-glass-transition);
     z-index: var(--_glass-z-effect);
   }
 
@@ -67,64 +90,102 @@
   &__hover-2,
   &__hover-3 {
     mix-blend-mode: overlay;
-    // Dynamic opacity and background are set via inline styles using CSS variables
-    opacity: var(--atomix-glass-hover-1-opacity, 0);
-    background: var(--atomix-glass-hover-1-gradient, none);
   }
 
   &__hover-1 {
     transition:
-      opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
-      background 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+      var(--_glass-transition),
+      background var(--atomix-transition-duration-base, 0.3s)
+        var(--atomix-easing-base, cubic-bezier(0.23, 1, 0.32, 1));
     opacity: var(--atomix-glass-hover-1-opacity, 0);
-    background: var(--atomix-glass-hover-1-gradient, none);
+    background: var(
+      --atomix-glass-hover-1-gradient,
+      radial-gradient(
+        60% 60% at 50% 0%,
+        var(--atomix-glass-hover-1-start-color, rgba(255, 255, 255, 0.18)) 0%,
+        var(--atomix-glass-hover-1-end-color, rgba(255, 255, 255, 0)) 60%
+      )
+    );
   }
 
   &__hover-2 {
     transition:
-      opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
-      background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
+      var(--_glass-transition),
+      background var(--atomix-transition-duration-base, 0.3s)
+        var(--atomix-easing-base, cubic-bezier(0.23, 1, 0.32, 1));
     opacity: var(--atomix-glass-hover-2-opacity, 0);
-    background: var(--atomix-glass-hover-2-gradient, none);
+    background: var(
+      --atomix-glass-hover-2-gradient,
+      radial-gradient(
+        80% 80% at 50% 100%,
+        var(--atomix-glass-hover-2-start-color, rgba(0, 0, 0, 0.12)) 0%,
+        var(--atomix-glass-hover-2-end-color, rgba(0, 0, 0, 0)) 60%
+      )
+    );
   }
 
   &__hover-3 {
-    transition:
-      opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
-      background 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+    transition: var(--_glass-transition);
     opacity: var(--atomix-glass-hover-3-opacity, 0);
-    background: var(--atomix-glass-hover-3-gradient, none);
+    background: var(
+      --atomix-glass-hover-3-gradient,
+      linear-gradient(
+        180deg,
+        var(--atomix-glass-hover-3-start-color, rgba(255, 255, 255, 0.06)) 0%,
+        var(--atomix-glass-hover-3-end-color, rgba(255, 255, 255, 0)) 100%
+      )
+    );
   }
 
-  // Base and overlay layers for over-light mode
   &__base {
     mix-blend-mode: soft-light;
-    // Dynamic opacity and background are set via inline styles using CSS variables
-    opacity: var(--atomix-glass-base-opacity, 0);
-    background: var(--atomix-glass-base-gradient, none);
+    opacity: var(--atomix-glass-base-opacity, 0.6);
+    background: var(
+      --atomix-glass-base-gradient,
+      linear-gradient(
+        180deg,
+        var(--atomix-glass-base-start-color, rgba(255, 255, 255, 0.08)) 0%,
+        var(--atomix-glass-base-end-color, rgba(255, 255, 255, 0.02)) 100%
+      )
+    );
   }
 
   &__overlay {
     mix-blend-mode: overlay;
-    // Dynamic opacity and background are set via inline styles using CSS variables
-    opacity: var(--atomix-glass-overlay-opacity, 0);
-    background: var(--atomix-glass-overlay-gradient, none);
+    opacity: var(--atomix-glass-overlay-opacity, 0.35);
+    background: var(
+      --atomix-glass-overlay-gradient,
+      radial-gradient(
+        120% 120% at 50% -10%,
+        var(--atomix-glass-overlay-start-color, rgba(255, 255, 255, 0.12)) 0%,
+        var(--atomix-glass-overlay-end-color, rgba(255, 255, 255, 0)) 40%
+      )
+    );
   }
 
   &__overlay-highlight {
     position: absolute;
     inset: var(--atomix-spacing-0-5, 0.125rem);
+    
     pointer-events: none;
-    border-radius: var(--atomix-glass-radius);
-    transform: var(--atomix-glass-transform);
-    transition: var(--atomix-glass-transition);
+    border-radius: var(--_glass-radius);
+    transform: var(--_glass-transform);
+    transition: var(--_glass-transition);
     mix-blend-mode: screen;
     z-index: var(--_glass-z-overlay-highlight);
-    opacity: var(--atomix-glass-overlay-highlight-opacity, 0);
-    background: var(--atomix-glass-overlay-highlight-bg, none);
+    opacity: var(--atomix-glass-overlay-highlight-opacity, 0.25);
+    background: var(
+      --atomix-glass-overlay-highlight-bg,
+      linear-gradient(
+        180deg,
+        var(--atomix-glass-highlight-start-color, rgba(255, 255, 255, 0.24)) 0%,
+        var(--atomix-glass-highlight-end-color, rgba(255, 255, 255, 0)) 60%
+      )
+    );
   }
 
   // Border effect layers - matching old version exactly
+  &__border-backdrop,
   &__border-1,
   &__border-2 {
     // Static styles
@@ -148,46 +209,44 @@
     position: var(--atomix-glass-position);
     top: var(--atomix-glass-top);
     left: var(--atomix-glass-left);
+    right: var(--atomix-glass-right);
+    bottom: var(--atomix-glass-bottom);
     width: var(--atomix-glass-width);
     height: var(--atomix-glass-height);
-    border-radius: var(--atomix-glass-radius);
-    transform: var(--atomix-glass-transform);
-    transition: var(--atomix-glass-transition);
+    border-radius: var(--_glass-radius);
+    transform: var(--_glass-transform);
+    transition: var(--_glass-transition);
+  }
+
+  &__border-backdrop {
+    mix-blend-mode: overlay;
+    z-index: var(--_glass-z-border-1);
+    backdrop-filter: var(--_glass-backdrop);
+    box-shadow: var(--atomix-glass-border-shadow);
   }
 
   &__border-1 {
-    opacity: var(--atomix-opacity-20, 0.2);
+    opacity: var(--atomix-glass-border-1-opacity, var(--atomix-opacity-18, 0.18));
     mix-blend-mode: screen;
-    z-index: var(--_glass-z-border-1);
+    z-index: var(--_glass-z-border-2);
     background: var(--atomix-glass-border-gradient-1, none);
-    box-shadow: var(
-      --atomix-glass-border-shadow,
-      0 0 0 0.5px rgba(255, 255, 255, 0.5) inset,
-      0 1px 3px rgba(255, 255, 255, 0.25) inset,
-      0 1px 4px rgba(0, 0, 0, 0.35)
-    );
   }
 
   &__border-2 {
     mix-blend-mode: overlay;
-    z-index: var(--_glass-z-border-2);
+    z-index: var(--_glass-z-border-3);
     background: var(--atomix-glass-border-gradient-2, none);
-    box-shadow: var(
-      --atomix-glass-border-shadow,
-      0 0 0 0.5px rgba(255, 255, 255, 0.5) inset,
-      0 1px 3px rgba(255, 255, 255, 0.25) inset,
-      0 1px 4px rgba(0, 0, 0, 0.35)
-    );
   }
 
-  // Container styles
   &__container {
-    position: var(--atomix-glass-position);
+    position: relative;
     top: var(--atomix-glass-top);
     left: var(--atomix-glass-left);
-    border-radius: var(--atomix-glass-radius);
-    transition: var(--atomix-glass-transition);
-    transform: var(--atomix-glass-transform);
+    right: var(--atomix-glass-right);
+    bottom: var(--atomix-glass-bottom);
+    border-radius: var(--_glass-radius);
+    transition: var(--_glass-transition);
+    transform: var(--_glass-transform);
     z-index: var(--_glass-z-container);
   }
 
@@ -195,9 +254,7 @@
     width: 100%;
     height: 100%;
     position: relative;
-    border-radius: var(--atomix-glass-radius);
-    padding: var(--atomix-glass-container-padding);
-    box-shadow: var(--atomix-glass-container-box-shadow);
+    border-radius: var(--_glass-radius);
   }
 
   &__filter {
@@ -210,7 +267,7 @@
     z-index: var(--_glass-z-filter);
 
     svg {
-      border-radius: var(--atomix-glass-radius);
+      border-radius: var(--_glass-radius);
     }
   }
 
@@ -218,15 +275,15 @@
     position: absolute;
     inset: 0;
     pointer-events: none;
-    border-radius: var(--atomix-glass-container-radius);
-    backdrop-filter: var(--atomix-glass-container-backdrop);
+    border-radius: var(--_glass-radius);
+    backdrop-filter: var(--atomix-glass-container-backdrop, var(--_glass-backdrop));
   }
 
   &__filter-shadow {
     position: absolute;
     inset: var(--atomix-glass-border-width);
     pointer-events: none;
-    border-radius: var(--atomix-glass-container-radius);
+    border-radius: var(--_glass-radius);
     box-shadow: var(--atomix-glass-container-shadow);
     opacity: var(--atomix-glass-container-shadow-opacity);
     background: var(--atomix-glass-container-bg);
@@ -236,9 +293,10 @@
     position: relative;
     width: var(--atomix-glass-container-width);
     height: var(--atomix-glass-container-height);
-    border-radius: var(--atomix-glass-radius);
+    border-radius: var(--_glass-radius);
     z-index: var(--_glass-z-content);
     text-shadow: var(--atomix-glass-container-text-shadow);
+    box-shadow: var(--atomix-glass-container-box-shadow);
   }
 
   // Background layers for over-light mode
@@ -246,12 +304,14 @@
     position: var(--atomix-glass-position);
     top: var(--atomix-glass-top);
     left: var(--atomix-glass-left);
+    right: var(--atomix-glass-right);
+    bottom: var(--atomix-glass-bottom);
     width: var(--atomix-glass-width);
     height: var(--atomix-glass-height);
     pointer-events: none;
-    border-radius: var(--atomix-glass-radius);
-    transform: var(--atomix-glass-transform);
-    transition: var(--atomix-glass-transition);
+    border-radius: var(--_glass-radius);
+    transform: var(--_glass-transform);
+    transition: var(--_glass-transition);
     z-index: var(--_glass-z-background);
 
     &--dark {
@@ -264,11 +324,11 @@
     }
 
     &--dark#{&}--over-light {
-      opacity: var(--atomix-opacity-50, 0.5);
+      opacity: var(--atomix-glass-over-light-dark-opacity, var(--atomix-opacity-50, 0.5));
     }
 
     &--black#{&}--over-light {
-      opacity: var(--atomix-opacity-25, 0.25);
+      opacity: var(--atomix-glass-over-light-black-opacity, var(--atomix-opacity-25, 0.25));
     }
 
     &--hidden {
@@ -278,6 +338,7 @@
 
   &--reduced-motion {
     --atomix-glass-transition: none;
+    --_glass-transition: none;
 
     * {
       transition: none !important;
@@ -285,9 +346,9 @@
   }
 
   &--high-contrast {
-    border: var(--atomix-spacing-0-5, 2px) solid currentColor;
-    outline: var(--atomix-spacing-0-5, 2px) solid transparent;
-    outline-offset: var(--atomix-spacing-0-5, 2px);
+    border: var(--atomix-spacing-0-5) solid currentColor;
+    outline: var(--atomix-spacing-0-5) solid transparent;
+    outline-offset: var(--atomix-spacing-0-5);
   }
 
   &--disabled-effects {

package/scripts/cli/__tests__/README.md

@@ -1,81 +0,0 @@
-# CLI Tests
-
-This directory contains comprehensive tests for the Atomix CLI tools.
-
-## Test Structure
-
-### Files
-- `basic.test.js` - Core utility functions (validatePath, validateComponentName, etc.)
-- `utils.test.js` - Extended utility tests with file system operations
-- `token-manager.test.js` - Token management functionality
-- `component-generator.test.js` - Component generation and validation
-- `integration.test.js` - End-to-end CLI command tests
-- `test-setup.js` - Global test configuration and mocks
-
-## Running Tests
-
-### Run all CLI tests
-```bash
-npm run test:cli
-```
-
-### Run with watch mode
-```bash
-npm run test:cli:watch
-```
-
-### Run with coverage
-```bash
-npm run test:cli:coverage
-```
-
-### Run specific test file
-```bash
-npx vitest run scripts/cli/__tests__/basic.test.js
-```
-
-## Test Categories
-
-### Unit Tests
-- **Utils**: Path validation, name validation, input sanitization
-- **Token Manager**: Token parsing, validation, export/import
-- **Component Generator**: Component creation, validation, templates
-
-### Integration Tests
-- Full CLI command execution
-- File system operations
-- Error handling scenarios
-
-## Coverage Goals
-
-- **Overall Coverage**: 80%+
-- **Functions**: 80%+
-- **Branches**: 80%+
-- **Lines**: 80%+
-- **Statements**: 80%+
-
-## Mock Strategy
-
-- External dependencies (ora, chalk, inquirer) are mocked
-- File system operations use temporary directories
-- CLI commands are tested in isolated environments
-
-## Adding New Tests
-
-1. Create test file with `.test.js` extension
-2. Use descriptive test names
-3. Mock external dependencies
-4. Clean up temporary files in afterEach
-5. Follow existing patterns for consistency
-
-## Debugging Failed Tests
-
-Run tests with verbose output:
-```bash
-npx vitest run --reporter=verbose scripts/cli/__tests__/
-```
-
-For specific test debugging:
-```bash
-npx vitest run --no-coverage scripts/cli/__tests__/basic.test.js
-```

package/scripts/cli/__tests__/basic.test.js

@@ -1,116 +0,0 @@
-/**
- * Basic CLI Tests - Core Functionality
- */
-
-import { describe, it, expect } from 'vitest';
-import { 
-  validatePath,
-  validateComponentName,
-  validateThemeName,
-  sanitizeInput,
-  AtomixCLIError
-} from '../utils.js';
-
-describe('CLI Core Utils', () => {
-  describe('validatePath', () => {
-    it('should accept valid relative paths', () => {
-      const result = validatePath('./src/components', '/project');
-      expect(result.isValid).toBe(true);
-    });
-
-    it('should reject paths outside project directory', () => {
-      const result = validatePath('../../etc/passwd', '/project');
-      expect(result.isValid).toBe(false);
-      expect(result.error).toBeTruthy();
-      expect(result.error).toMatch(/outside|traversal/);
-    });
-
-    it('should reject sensitive files', () => {
-      const result = validatePath('.env', '/project');
-      expect(result.isValid).toBe(false);
-      expect(result.error).toContain('sensitive path');
-    });
-  });
-
-  describe('validateComponentName', () => {
-    it('should accept valid PascalCase names', () => {
-      const validNames = ['Button', 'CardHeader', 'ModalDialog'];
-      
-      validNames.forEach(name => {
-        const result = validateComponentName(name);
-        expect(result.isValid).toBe(true);
-      });
-    });
-
-    it('should reject invalid names', () => {
-      const invalidNames = ['123Button', '', '1', 'a'];
-      
-      invalidNames.forEach(name => {
-        const result = validateComponentName(name);
-        expect(result.isValid).toBe(false);
-      });
-    });
-
-    it('should reject reserved words', () => {
-      const reservedWords = ['Component', 'React', 'Fragment'];
-      
-      reservedWords.forEach(name => {
-        const result = validateComponentName(name);
-        expect(result.isValid).toBe(false);
-      });
-    });
-  });
-
-  describe('validateThemeName', () => {
-    it('should accept valid kebab-case names', () => {
-      const validNames = ['dark-theme', 'light', 'high-contrast'];
-      
-      validNames.forEach(name => {
-        const result = validateThemeName(name);
-        expect(result.isValid).toBe(true);
-      });
-    });
-
-    it('should reject invalid theme names', () => {
-      const invalidNames = ['DarkTheme', 'theme_dark', 'Theme-Dark', '123theme', ''];
-      
-      invalidNames.forEach(name => {
-        const result = validateThemeName(name);
-        expect(result.isValid).toBe(false);
-      });
-    });
-  });
-
-  describe('sanitizeInput', () => {
-    it('should remove dangerous shell characters', () => {
-      const dangerousInputs = [
-        'test; rm -rf /',
-        'input && malicious-command',
-        'command | pipe'
-      ];
-      
-      dangerousInputs.forEach(input => {
-        const sanitized = sanitizeInput(input);
-        expect(sanitized).not.toMatch(/[;&|`$<>]/);
-      });
-    });
-
-    it('should preserve safe characters', () => {
-      const safeInput = 'Button-Component_123';
-      const sanitized = sanitizeInput(safeInput);
-      expect(sanitized).toBe(safeInput);
-    });
-  });
-
-  describe('AtomixCLIError', () => {
-    it('should create error with code and suggestions', () => {
-      const suggestions = ['Use PascalCase', 'Start with letter'];
-      const error = new AtomixCLIError('Invalid name', 'INVALID_NAME', suggestions);
-      
-      expect(error.message).toBe('Invalid name');
-      expect(error.code).toBe('INVALID_NAME');
-      expect(error.suggestions).toEqual(suggestions);
-      expect(error.name).toBe('AtomixCLIError');
-    });
-  });
-});