@shohojdhara/atomix 0.5.1 → 0.5.2

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

@@ -1,212 +0,0 @@
-// 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

@@ -1,212 +0,0 @@
-// 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.typedbutton.scss

@@ -1,212 +0,0 @@
-// 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
-  }
-}