@shohojdhara/atomix 0.4.7 → 0.4.9

package/src/styles/06-components/_components.edge-panel.scss

@@ -349,16 +349,12 @@
 
 // Glass Variant Styles
 .c-edge-panel--glass {
-  position: absolute;
-  z-index: unset;
-
   .c-edge-panel__container {
     background: transparent;
     box-shadow: none;
     overflow: hidden;
     border: none;
     padding: 0;
-    z-index: unset;
     will-change: initial;
     transform: none !important;
     border-radius: inherit;
@@ -413,7 +409,7 @@
       $background-transparency-enable: true
     );
     animation: fadeIn 0.3s ease forwards;
-    z-index: 0;
+    z-index: map.get($z-layers, 1);
 
     &.is-animating-out {
       animation: fadeOut 0.3s ease forwards;

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

@@ -44,10 +44,7 @@
   inset: 0;
   @include square(100%);
   display: none;
-
-  &:not(.c-modal--glass) {
-    z-index: map.get($z-layers, modal);
-  }
+  z-index: map.get($z-layers, modal);
 
   &__backdrop {
     position: absolute;

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

@@ -252,7 +252,7 @@
   &--glass {
     position: relative;
     background-color: transparent;
-    border-bottom: none;
+    @include dynamic-background(var(--#{$prefix}navbar-bg), $background-transparency-enable: true);
   }
 
   &--fixed-bottom {

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

@@ -0,0 +1,212 @@
+// TestButton Component Styles
+// Generated by Atomix CLI
+// ITCSS Layer: Components
+// =============================================================================
+
+@use 'sass:map';
+@use '../../01-settings/settings.testbutton' as *;
+@use '../../02-tools/mixins' as *;
+@use '../../02-tools/functions' as *;
+
+// Base Component Class
+// =============================================================================
+
+.c-testbutton {
+  // Layout
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--testbutton-gap);
+  
+  // Spacing
+  padding: var(--testbutton-padding-y) var(--testbutton-padding-x);
+  
+  // Typography
+  font-size: var(--testbutton-font-size);
+  font-weight: var(--testbutton-font-weight);
+  line-height: var(--testbutton-line-height);
+  
+  // Appearance
+  border-radius: var(--testbutton-radius);
+  border: none;
+  cursor: pointer;
+  
+  // Transition
+  transition: all var(--atomix-duration-fast) var(--atomix-easing-smooth);
+  
+  // Focus
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--testbutton-focus-ring);
+  }
+  
+  // Disabled state
+  &:disabled {
+    opacity: var(--testbutton-disabled-opacity);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+// Variants
+// =============================================================================
+
+@if true {
+  .c-testbutton--variant-primary {
+    background-color: var(--testbutton-primary);
+    color: var(--atomix-color-white);
+    
+    &:hover:not(:disabled) {
+      background-color: var(--testbutton-primary-hover);
+    }
+    
+    &:active:not(:disabled) {
+      background-color: var(--testbutton-primary-active);
+    }
+  }
+  
+  .c-testbutton--variant-secondary {
+    background-color: var(--atomix-color-neutral-100);
+    color: var(--atomix-color-neutral-900);
+    
+    &:hover:not(:disabled) {
+      background-color: var(--atomix-color-neutral-200);
+    }
+  }
+  
+  .c-testbutton--variant-outline {
+    background-color: transparent;
+    border: 1px solid var(--atomix-color-neutral-300);
+    color: var(--atomix-color-neutral-700);
+    
+    &:hover:not(:disabled) {
+      border-color: var(--atomix-color-neutral-400);
+      background-color: var(--atomix-color-neutral-50);
+    }
+  }
+}
+
+// Glassmorphism Variant
+// =============================================================================
+
+.c-testbutton--glass {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px) saturate(200%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  
+  @media (prefers-reduced-transparency: reduce) {
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: none;
+  }
+  
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.15);
+  }
+}
+
+// Animation Variants
+// =============================================================================
+
+@if true {
+  // Fade In Animation
+  .c-testbutton--animate-fade-in {
+    animation: atomix-fade-in var(--atomix-duration-base) var(--atomix-easing-smooth);
+  }
+  
+  // Slide In Up Animation
+  .c-testbutton--animate-slide-in-up {
+    animation: atomix-slide-in-up var(--atomix-duration-slow) var(--atomix-easing-smooth);
+  }
+  
+  // Scale In Animation
+  .c-testbutton--animate-scale-in {
+    animation: atomix-scale-in var(--atomix-duration-base) var(--atomix-easing-smooth);
+  }
+  
+  // Pulse Animation (for loading states)
+  .c-testbutton--animate-pulse {
+    animation: atomix-pulse 2s var(--atomix-easing-smooth) infinite;
+  }
+  
+  // Shimmer Animation (for skeleton loaders)
+  .c-testbutton--animate-shimmer {
+    animation: atomix-shimmer 2s linear infinite;
+    background: linear-gradient(
+      90deg,
+      var(--atomix-color-neutral-100) 0%,
+      var(--atomix-color-neutral-200) 50%,
+      var(--atomix-color-neutral-100) 100%
+    );
+    background-size: 200% 100%;
+  }
+}
+
+// Motion Preferences
+// =============================================================================
+
+@media (prefers-reduced-motion: reduce) {
+  .c-testbutton,
+  .c-testbutton * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+// Sizes
+// =============================================================================
+
+@if true {
+  .c-testbutton--size-sm {
+    padding: calc(var(--testbutton-padding-y) * 0.75) calc(var(--testbutton-padding-x) * 0.75);
+    font-size: var(--atomix-font-size-sm);
+  }
+  
+  .c-testbutton--size-md {
+    // Default size - no overrides needed
+  }
+  
+  .c-testbutton--size-lg {
+    padding: calc(var(--testbutton-padding-y) * 1.25) calc(var(--testbutton-padding-x) * 1.25);
+    font-size: var(--atomix-font-size-lg);
+  }
+}
+
+// States
+// =============================================================================
+
+@if true {
+  .c-testbutton--state-loading {
+    position: relative;
+    pointer-events: none;
+    
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: rgba(255, 255, 255, 0.3);
+      backdrop-filter: blur(2px);
+    }
+  }
+  
+  .c-testbutton--state-glass {
+    background-color: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+}
+
+// Responsive Overrides
+// =============================================================================
+
+@include atomix-media-breakpoint-up(md) {
+  .c-testbutton {
+    // Tablet-specific adjustments if needed
+  }
+}
+
+@include atomix-media-breakpoint-up(lg) {
+  .c-testbutton {
+    // Desktop-specific adjustments if needed
+  }
+}

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

@@ -0,0 +1,212 @@
+// TestTypeCheck Component Styles
+// Generated by Atomix CLI
+// ITCSS Layer: Components
+// =============================================================================
+
+@use 'sass:map';
+@use '../../01-settings/settings.testtypecheck' as *;
+@use '../../02-tools/mixins' as *;
+@use '../../02-tools/functions' as *;
+
+// Base Component Class
+// =============================================================================
+
+.c-testtypecheck {
+  // Layout
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--testtypecheck-gap);
+  
+  // Spacing
+  padding: var(--testtypecheck-padding-y) var(--testtypecheck-padding-x);
+  
+  // Typography
+  font-size: var(--testtypecheck-font-size);
+  font-weight: var(--testtypecheck-font-weight);
+  line-height: var(--testtypecheck-line-height);
+  
+  // Appearance
+  border-radius: var(--testtypecheck-radius);
+  border: none;
+  cursor: pointer;
+  
+  // Transition
+  transition: all var(--atomix-duration-fast) var(--atomix-easing-smooth);
+  
+  // Focus
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--testtypecheck-focus-ring);
+  }
+  
+  // Disabled state
+  &:disabled {
+    opacity: var(--testtypecheck-disabled-opacity);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+// Variants
+// =============================================================================
+
+@if true {
+  .c-testtypecheck--variant-primary {
+    background-color: var(--testtypecheck-primary);
+    color: var(--atomix-color-white);
+    
+    &:hover:not(:disabled) {
+      background-color: var(--testtypecheck-primary-hover);
+    }
+    
+    &:active:not(:disabled) {
+      background-color: var(--testtypecheck-primary-active);
+    }
+  }
+  
+  .c-testtypecheck--variant-secondary {
+    background-color: var(--atomix-color-neutral-100);
+    color: var(--atomix-color-neutral-900);
+    
+    &:hover:not(:disabled) {
+      background-color: var(--atomix-color-neutral-200);
+    }
+  }
+  
+  .c-testtypecheck--variant-outline {
+    background-color: transparent;
+    border: 1px solid var(--atomix-color-neutral-300);
+    color: var(--atomix-color-neutral-700);
+    
+    &:hover:not(:disabled) {
+      border-color: var(--atomix-color-neutral-400);
+      background-color: var(--atomix-color-neutral-50);
+    }
+  }
+}
+
+// Glassmorphism Variant
+// =============================================================================
+
+.c-testtypecheck--glass {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px) saturate(200%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  
+  @media (prefers-reduced-transparency: reduce) {
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: none;
+  }
+  
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.15);
+  }
+}
+
+// Animation Variants
+// =============================================================================
+
+@if true {
+  // Fade In Animation
+  .c-testtypecheck--animate-fade-in {
+    animation: atomix-fade-in var(--atomix-duration-base) var(--atomix-easing-smooth);
+  }
+  
+  // Slide In Up Animation
+  .c-testtypecheck--animate-slide-in-up {
+    animation: atomix-slide-in-up var(--atomix-duration-slow) var(--atomix-easing-smooth);
+  }
+  
+  // Scale In Animation
+  .c-testtypecheck--animate-scale-in {
+    animation: atomix-scale-in var(--atomix-duration-base) var(--atomix-easing-smooth);
+  }
+  
+  // Pulse Animation (for loading states)
+  .c-testtypecheck--animate-pulse {
+    animation: atomix-pulse 2s var(--atomix-easing-smooth) infinite;
+  }
+  
+  // Shimmer Animation (for skeleton loaders)
+  .c-testtypecheck--animate-shimmer {
+    animation: atomix-shimmer 2s linear infinite;
+    background: linear-gradient(
+      90deg,
+      var(--atomix-color-neutral-100) 0%,
+      var(--atomix-color-neutral-200) 50%,
+      var(--atomix-color-neutral-100) 100%
+    );
+    background-size: 200% 100%;
+  }
+}
+
+// Motion Preferences
+// =============================================================================
+
+@media (prefers-reduced-motion: reduce) {
+  .c-testtypecheck,
+  .c-testtypecheck * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+// Sizes
+// =============================================================================
+
+@if true {
+  .c-testtypecheck--size-sm {
+    padding: calc(var(--testtypecheck-padding-y) * 0.75) calc(var(--testtypecheck-padding-x) * 0.75);
+    font-size: var(--atomix-font-size-sm);
+  }
+  
+  .c-testtypecheck--size-md {
+    // Default size - no overrides needed
+  }
+  
+  .c-testtypecheck--size-lg {
+    padding: calc(var(--testtypecheck-padding-y) * 1.25) calc(var(--testtypecheck-padding-x) * 1.25);
+    font-size: var(--atomix-font-size-lg);
+  }
+}
+
+// States
+// =============================================================================
+
+@if true {
+  .c-testtypecheck--state-loading {
+    position: relative;
+    pointer-events: none;
+    
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: rgba(255, 255, 255, 0.3);
+      backdrop-filter: blur(2px);
+    }
+  }
+  
+  .c-testtypecheck--state-glass {
+    background-color: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+}
+
+// Responsive Overrides
+// =============================================================================
+
+@include atomix-media-breakpoint-up(md) {
+  .c-testtypecheck {
+    // Tablet-specific adjustments if needed
+  }
+}
+
+@include atomix-media-breakpoint-up(lg) {
+  .c-testtypecheck {
+    // Desktop-specific adjustments if needed
+  }
+}

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

@@ -84,22 +84,26 @@
   }
 
   &--glass {
-    z-index: unset;
     #{$root}__content {
       @include dynamic-background(
         var(--#{$prefix}tooltip-bg),
         $background-transparency-enable: true,
-        $transparency: 0.4
+        $transparency: 0.3
       );
     }
     #{$root}__arrow {
       @include dynamic-background(
         var(--#{$prefix}tooltip-bg),
         $background-transparency-enable: true,
-        $transparency: 0.4
+        $transparency: 0.3
+      );
+    }
+    #{$root}__arrow {
+      @include dynamic-background(
+        var(--#{$prefix}tooltip-bg),
+        $background-transparency-enable: true,
+        $transparency: 0.3
       );
-      clip-path: polygon(0 100%, 100% 100%, 100% 0);
-      backdrop-filter: var(--atomix-glass-container-backdrop);
     }
   }
 }

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

@@ -0,0 +1,212 @@
+// TypedButton Component Styles
+// Generated by Atomix CLI
+// ITCSS Layer: Components
+// =============================================================================
+
+@use 'sass:map';
+@use '../../01-settings/settings.typedbutton' as *;
+@use '../../02-tools/mixins' as *;
+@use '../../02-tools/functions' as *;
+
+// Base Component Class
+// =============================================================================
+
+.c-typedbutton {
+  // Layout
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--typedbutton-gap);
+  
+  // Spacing
+  padding: var(--typedbutton-padding-y) var(--typedbutton-padding-x);
+  
+  // Typography
+  font-size: var(--typedbutton-font-size);
+  font-weight: var(--typedbutton-font-weight);
+  line-height: var(--typedbutton-line-height);
+  
+  // Appearance
+  border-radius: var(--typedbutton-radius);
+  border: none;
+  cursor: pointer;
+  
+  // Transition
+  transition: all var(--atomix-duration-fast) var(--atomix-easing-smooth);
+  
+  // Focus
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--typedbutton-focus-ring);
+  }
+  
+  // Disabled state
+  &:disabled {
+    opacity: var(--typedbutton-disabled-opacity);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+// Variants
+// =============================================================================
+
+@if true {
+  .c-typedbutton--variant-primary {
+    background-color: var(--typedbutton-primary);
+    color: var(--atomix-color-white);
+    
+    &:hover:not(:disabled) {
+      background-color: var(--typedbutton-primary-hover);
+    }
+    
+    &:active:not(:disabled) {
+      background-color: var(--typedbutton-primary-active);
+    }
+  }
+  
+  .c-typedbutton--variant-secondary {
+    background-color: var(--atomix-color-neutral-100);
+    color: var(--atomix-color-neutral-900);
+    
+    &:hover:not(:disabled) {
+      background-color: var(--atomix-color-neutral-200);
+    }
+  }
+  
+  .c-typedbutton--variant-outline {
+    background-color: transparent;
+    border: 1px solid var(--atomix-color-neutral-300);
+    color: var(--atomix-color-neutral-700);
+    
+    &:hover:not(:disabled) {
+      border-color: var(--atomix-color-neutral-400);
+      background-color: var(--atomix-color-neutral-50);
+    }
+  }
+}
+
+// Glassmorphism Variant
+// =============================================================================
+
+.c-typedbutton--glass {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px) saturate(200%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  
+  @media (prefers-reduced-transparency: reduce) {
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: none;
+  }
+  
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.15);
+  }
+}
+
+// Animation Variants
+// =============================================================================
+
+@if true {
+  // Fade In Animation
+  .c-typedbutton--animate-fade-in {
+    animation: atomix-fade-in var(--atomix-duration-base) var(--atomix-easing-smooth);
+  }
+  
+  // Slide In Up Animation
+  .c-typedbutton--animate-slide-in-up {
+    animation: atomix-slide-in-up var(--atomix-duration-slow) var(--atomix-easing-smooth);
+  }
+  
+  // Scale In Animation
+  .c-typedbutton--animate-scale-in {
+    animation: atomix-scale-in var(--atomix-duration-base) var(--atomix-easing-smooth);
+  }
+  
+  // Pulse Animation (for loading states)
+  .c-typedbutton--animate-pulse {
+    animation: atomix-pulse 2s var(--atomix-easing-smooth) infinite;
+  }
+  
+  // Shimmer Animation (for skeleton loaders)
+  .c-typedbutton--animate-shimmer {
+    animation: atomix-shimmer 2s linear infinite;
+    background: linear-gradient(
+      90deg,
+      var(--atomix-color-neutral-100) 0%,
+      var(--atomix-color-neutral-200) 50%,
+      var(--atomix-color-neutral-100) 100%
+    );
+    background-size: 200% 100%;
+  }
+}
+
+// Motion Preferences
+// =============================================================================
+
+@media (prefers-reduced-motion: reduce) {
+  .c-typedbutton,
+  .c-typedbutton * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+// Sizes
+// =============================================================================
+
+@if true {
+  .c-typedbutton--size-sm {
+    padding: calc(var(--typedbutton-padding-y) * 0.75) calc(var(--typedbutton-padding-x) * 0.75);
+    font-size: var(--atomix-font-size-sm);
+  }
+  
+  .c-typedbutton--size-md {
+    // Default size - no overrides needed
+  }
+  
+  .c-typedbutton--size-lg {
+    padding: calc(var(--typedbutton-padding-y) * 1.25) calc(var(--typedbutton-padding-x) * 1.25);
+    font-size: var(--atomix-font-size-lg);
+  }
+}
+
+// States
+// =============================================================================
+
+@if true {
+  .c-typedbutton--state-loading {
+    position: relative;
+    pointer-events: none;
+    
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: rgba(255, 255, 255, 0.3);
+      backdrop-filter: blur(2px);
+    }
+  }
+  
+  .c-typedbutton--state-glass {
+    background-color: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+}
+
+// Responsive Overrides
+// =============================================================================
+
+@include atomix-media-breakpoint-up(md) {
+  .c-typedbutton {
+    // Tablet-specific adjustments if needed
+  }
+}
+
+@include atomix-media-breakpoint-up(lg) {
+  .c-typedbutton {
+    // Desktop-specific adjustments if needed
+  }
+}