@shohojdhara/atomix 0.4.8 → 0.5.0

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.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
+  }
+}

package/src/styles/99-utilities/_index.scss

@@ -19,6 +19,7 @@
 @forward 'utilities.visibility';
 @forward 'utilities.visually-hidden';
 @forward 'utilities.z-index';
+@forward 'utilities.touch-target';
 
 // Forward the main utilities generator
 @forward 'utilities';

package/src/styles/99-utilities/_utilities.text.scss

@@ -9,7 +9,7 @@ $utilities-text: (
   'font-size': (
     rfs: true,
     property: font-size,
-    class: u-fs,
+    class: u-text,
     values: map.merge(
         color-maps.$font-sizes-extended,
         (

package/src/styles/99-utilities/_utilities.touch-target.scss

@@ -0,0 +1,36 @@
+@use '../02-tools/tools.breakpoints' as *;
+@use '../01-settings/settings.config' as config;
+
+/**
+ * Touch Target Optimization
+ * Ensures interactive elements have a minimum touch target size of 44px
+ * as per WCAG 2.1 Success Criterion 2.5.5 (Target Size).
+ */
+
+.u-touch-target {
+  @include media-breakpoint-down(md) {
+    min-height: 44px;
+    min-width: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+// Apply to common interactive elements automatically on mobile
+@include media-breakpoint-down(md) {
+  .c-btn--sm,
+  .c-form-check-input,
+  .c-form-select-sm,
+  .c-form-control-sm {
+    min-height: 44px;
+    min-width: 44px;
+  }
+
+  // Checkbox/Radio labels should also be part of the touch target
+  .c-form-check {
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+  }
+}