@shohojdhara/atomix 0.3.0 → 0.3.1

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

@@ -7,7 +7,7 @@
   // CSS custom property defaults
   --atomix-glass-radius: var(--atomix-radius-md, 16px);
   --atomix-glass-transform: none;
-  --atomix-glass-transition: all var(--atomix-transition-duration, 0s) ease-out;
+  --atomix-glass-transition: all var(--atomix-transition-duration, 0.15s) ease-out;
   --atomix-glass-position: absolute;
   --atomix-glass-container-width: 100%;
   --atomix-glass-container-height: 100%;
@@ -99,8 +99,7 @@
       linear-gradient(var(--atomix-black, #000000) 0 0) content-box,
       linear-gradient(var(--atomix-black, #000000) 0 0);
     mask-composite: exclude;
-    
-    // Dynamic values set via inline styles using CSS variables
+
     position: var(--atomix-glass-position);
     top: var(--atomix-glass-top);
     left: var(--atomix-glass-left);
@@ -115,21 +114,25 @@
     opacity: var(--atomix-opacity-20, 0.2);
     mix-blend-mode: screen;
     z-index: var(--atomix-z-index-5, 5);
-    // Dynamic gradient background set via CSS variable
     background: var(--atomix-glass-border-gradient-1, none);
-    // Note: Box-shadow rgba values use CSS custom properties for colors via CSS variables
-    // These are set dynamically in TypeScript component via --atomix-glass-border-shadow
-    box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset, 0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset, 0 0.25rem 1rem rgba(0, 0, 0, 0.35));
+    box-shadow: var(
+      --atomix-glass-border-shadow,
+      0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
+      0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
+      0 0.25rem 1rem rgba(0, 0, 0, 0.35)
+    );
   }
 
   &__border-2 {
     mix-blend-mode: overlay;
     z-index: var(--atomix-z-index-6, 6);
-    // Dynamic gradient background set via CSS variable
     background: var(--atomix-glass-border-gradient-2, none);
-    // Note: Box-shadow rgba values use CSS custom properties for colors via CSS variables
-    // These are set dynamically in TypeScript component via --atomix-glass-border-shadow
-    box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset, 0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset, 0 0.25rem 1rem rgba(0, 0, 0, 0.35));
+    box-shadow: var(
+      --atomix-glass-border-shadow,
+      0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
+      0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
+      0 0.25rem 1rem rgba(0, 0, 0, 0.35)
+    );
   }
 
   // Container styles
@@ -155,12 +158,17 @@
     width: 100%;
     height: 100%;
     pointer-events: none;
+
+    svg {
+      border-radius: var(--atomix-glass-radius);
+    }
   }
 
   &__filter-overlay {
     position: absolute;
     inset: 0;
     pointer-events: none;
+    border-radius: var(--atomix-glass-radius);
   }
 
   &__filter-shadow {
@@ -173,6 +181,7 @@
     position: relative;
     width: var(--atomix-glass-container-width);
     height: var(--atomix-glass-container-height);
+    border-radius: var(--atomix-glass-radius);
   }
 
   // Background layers for over-light mode
@@ -182,23 +191,15 @@
     border-radius: var(--atomix-glass-radius);
     transform: var(--atomix-glass-transform);
     transition: var(--atomix-glass-transition);
-    will-change: transform;
-    // Dynamic values: position, width, height are set via inline styles
-    // Position comes from positionStyles, width/height from adjustedSize
-
-    // Dark background variant
     &--dark {
       background-color: var(--atomix-gray-9, #1f2937);
     }
 
-    // Black background variant
     &--black {
       background-color: var(--atomix-black, #000000);
       mix-blend-mode: overlay;
     }
 
-    // Over-light state modifier (50% opacity for dark, 25% for black)
-    // When both --dark and --over-light modifiers are present
     &--dark#{&}--over-light {
       opacity: var(--atomix-opacity-50, 0.5);
       z-index: -1;
@@ -206,16 +207,13 @@
 
     &--black#{&}--over-light {
       opacity: var(--atomix-opacity-25, 0.25);
-      
     }
 
-    // Hidden state modifier
     &--hidden {
       opacity: var(--atomix-opacity-0, 0);
     }
   }
 
-  // State modifiers
   &--reduced-motion {
     --atomix-glass-transition: none;
 

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

@@ -2,7 +2,7 @@
 @use '../01-settings/settings.config' as *;
 @use '../01-settings/settings.badge' as *;
 @use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
+@use '../01-settings/settings.design-tokens' as maps;
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.background' as *;
 
@@ -49,7 +49,7 @@
       $background-transparency-enable: true,
       $transparency: 0.2
     );
-    border: 1px solid color-mix(in srgb, var(--#{$prefix}tag-color) 90%, transparent);
+    border: 1px solid color-mix(in srgb, var(--#{$prefix}tag-color) 50%, transparent);
 
     // // Outer depth and glass effect
     // 0 1px 3px rgba(0, 0, 0, 0.2),

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

@@ -1,7 +1,7 @@
 @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.maps' as color-maps;
+@use '../01-settings/settings.design-tokens' as color-maps;
 @use '../01-settings/settings.border-radius' as border-radius;
 @use '../02-tools/tools.border-radius' as *;
 @use '../02-tools/tools.button' as *;

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

@@ -1,6 +1,6 @@
 @use '../01-settings/settings.config' as config;
 @use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
+@use '../01-settings/settings.design-tokens' as maps;
 @use '../01-settings/settings.callout' as callout;
 @use '../02-tools/tools.rem' as rem;
 @use '../02-tools/tools.background' as *;

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

@@ -3,7 +3,7 @@
 @use '../01-settings/settings.card' as *;
 @use '../01-settings/settings.spacing' as spacing;
 @use '../01-settings/settings.border-radius' as *;
-@use '../01-settings/settings.maps' as maps;
+@use '../01-settings/settings.design-tokens' as maps;
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.animations' as *;
 @use '../02-tools/tools.object-fit' as *;
@@ -110,6 +110,43 @@
     border-radius: $border-radius-pill;
   }
 
+  &__footer {
+    margin-top: var(--#{$prefix}card-spacer-y);
+    padding-top: var(--#{$prefix}card-spacer-y);
+    border-top: 1px solid var(--#{$prefix}card-border-color);
+
+    // Footer alignment modifiers
+    &--align-start {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+
+    &--align-center {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &--align-end {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+
+    &--align-between {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+
+  // Body scrollable modifier
+  &__body--scrollable {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
   @if ($card-hover ==true) {
     &:hover {
       @include dynamic-background(var(--#{$prefix}card-bg-hover));
@@ -277,6 +314,40 @@
     }
   }
 
+  &--hoverable {
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+
+    &:hover:not(&--disabled) {
+      transform: translateY(-2px);
+    }
+
+    &:active:not(&--disabled) {
+      transform: translateY(0);
+    }
+
+    // Hover elevation modifiers
+    &--hover-elevation-none:hover:not(&--disabled) {
+      box-shadow: none;
+    }
+
+    &--hover-elevation-sm:hover:not(&--disabled) {
+      box-shadow: var(--#{$prefix}box-shadow-sm);
+    }
+
+    &--hover-elevation-md:hover:not(&--disabled) {
+      box-shadow: var(--#{$prefix}box-shadow-md);
+    }
+
+    &--hover-elevation-lg:hover:not(&--disabled) {
+      box-shadow: var(--#{$prefix}box-shadow-lg);
+    }
+
+    &--hover-elevation-xl:hover:not(&--disabled) {
+      box-shadow: var(--#{$prefix}box-shadow-xl);
+    }
+  }
+
   @each $color, $value in maps.$theme-colors {
     &--#{$color} {
       @if ($color =='primary') {
@@ -353,7 +424,8 @@
   @media (prefers-reduced-motion: reduce) {
     transition: none;
 
-    &--interactive:hover:not(&--disabled) {
+    &--interactive:hover:not(&--disabled),
+    &--hoverable:hover:not(&--disabled) {
       transform: none;
     }
 

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

@@ -5,7 +5,7 @@
 @use '../01-settings/settings.typography' as *;
 @use '../01-settings/settings.border-radius' as *;
 @use '../01-settings/settings.box-shadow' as *;
-@use '../01-settings/settings.maps' as color-maps;
+@use '../01-settings/settings.design-tokens' as color-maps;
 @use '../02-tools/tools.component' as *;
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.animations' as *;

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

@@ -266,6 +266,12 @@
     }
   }
 
+  &--glass {
+    .c-dropdown__menu-inner {
+      box-shadow: none;
+    }
+  }
+
   &.is-open {
     #{$root}__toggle-icon {
       transform: rotate(-180deg);

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

@@ -3,7 +3,7 @@
 @use '../01-settings/settings.breakpoints' as breakpoints;
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.media-queries' as media;
-@use '../01-settings/settings.maps' as maps;
+@use '../01-settings/settings.design-tokens' as maps;
 @use '../02-tools/tools.animations' as *;
 @use '../02-tools/tools.background' as *;
 @use '../02-tools/tools.to-rgb' as *;

package/src/styles/06-components/_components.list-group.scss

@@ -2,7 +2,7 @@
 @use '../01-settings/_settings.list-group' as *;
 @use '../01-settings/settings.config' as config;
 @use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
+@use '../01-settings/settings.design-tokens' as maps;
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.background' as *;
 

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

@@ -1,6 +1,6 @@
 @use '../01-settings/settings.config' as config;
 @use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
+@use '../01-settings/settings.design-tokens' as maps;
 @use '../01-settings/settings.list' as list;
 @use '../02-tools/tools.rem' as rem;
 @use '../02-tools/tools.background' as *;

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

@@ -1,6 +1,6 @@
 @use '../01-settings/settings.config' as config;
 @use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
+@use '../01-settings/settings.design-tokens' as maps;
 @use '../01-settings/settings.menu' as menu;
 @use '../02-tools/tools.rem' as rem;
 @use '../02-tools/tools.animations' as animations;

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

@@ -1,6 +1,6 @@
 @use '../01-settings/settings.config' as config;
 @use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
+@use '../01-settings/settings.design-tokens' as maps;
 @use '../01-settings/settings.messages' as messages;
 @use '../01-settings/settings.border-radius' as border;
 @use '../01-settings/settings.typography' as typo;

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

@@ -1,6 +1,6 @@
 @use '../01-settings/settings.config' as config;
 @use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
+@use '../01-settings/settings.design-tokens' as maps;
 @use '../01-settings/settings.modal' as modal;
 @use '../02-tools/tools.rem' as rem;
 @use '../02-tools/tools.size' as *;
@@ -146,11 +146,16 @@
 
   &--glass {
     #{$root} {
-      & &__content {
+      &__content {
         @include dynamic-background(
           var(--#{config.$prefix}modal-content-bg),
           $background-transparency-enable: true
         );
+        box-shadow: none;
+        border-radius: inherit;
+
+        width: var(--#{config.$prefix}modal-width);
+        height: 100%;
       }
     }
   }

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

@@ -3,7 +3,7 @@
 @use '../01-settings/settings.breakpoints' as breakpoints;
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.media-queries' as media;
-@use '../01-settings/settings.maps' as maps;
+@use '../01-settings/settings.design-tokens' as maps;
 @use '../02-tools/tools.background' as *;
 
 .c-navbar {

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

@@ -92,6 +92,16 @@
     }
   }
 
+  &--glass {
+    #{$root}__content-inner {
+      @include dynamic-background(
+        var(--#{$prefix}popover-bg),
+        $background-transparency-enable: true
+      );
+      box-shadow: none;
+    }
+  }
+
   // Auto position automatically selects the best position
   // and will dynamically apply one of the position classes above
   &--auto {

package/src/styles/06-components/_components.product-review.scss

@@ -1,6 +1,6 @@
 @use '../01-settings/settings.config' as config;
 @use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
+@use '../01-settings/settings.design-tokens' as maps;
 @use '../02-tools/tools.rem' as rem;
 @use '../02-tools/tools.size' as size;
 @use '../02-tools/tools.grid' as *;

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

@@ -1,6 +1,6 @@
 @use '../01-settings/settings.config' as config;
 @use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
+@use '../01-settings/settings.design-tokens' as maps;
 @use '../01-settings/settings.progress' as progress;
 @use '../02-tools/tools.rem' as rem;
 @use '../02-tools/tools.background' as *;

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

@@ -1,6 +1,6 @@
 @use '../01-settings/settings.config' as config;
 @use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
+@use '../01-settings/settings.design-tokens' as maps;
 @use '../01-settings/settings.rating' as rating;
 @use '../02-tools/tools.rem' as rem;
 @use '../02-tools/tools.size' as size;

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

@@ -1,6 +1,6 @@
 @use '../01-settings/settings.config' as config;
 @use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
+@use '../01-settings/settings.design-tokens' as maps;
 @use '../01-settings/settings.spinner' as spinner;
 @use '../02-tools/tools.rem' as rem;
 @use '../02-tools/tools.size' as size;

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

@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use '../01-settings/settings.colors' as colors;
-@use '../01-settings/settings.maps' as color-maps;
+@use '../01-settings/settings.design-tokens' as color-maps;
 @use '../01-settings/settings.config' as config;
 
 // Define utilities for background

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

@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use '../01-settings/settings.config' as config;
-@use '../01-settings/settings.maps' as color-maps;
+@use '../01-settings/settings.design-tokens' as color-maps;
 @use '../01-settings/settings.border' as border;
 
 // Define utilities for borders

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../01-settings/settings.maps' as color-maps;
+@use '../01-settings/settings.design-tokens' as color-maps;
 @use '../01-settings/settings.config' as config;
 @use '../01-settings/settings.colors' as colors;
 @use '../02-tools/tools.to-rgb' as *;

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

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '../01-settings/settings.typography' as *;
 @use '../01-settings/settings.config' as config;
-@use '../01-settings/settings.maps' as color-maps;
+@use '../01-settings/settings.design-tokens' as color-maps;
 @use '../01-settings/settings.colors' as colors;
 
 // Define utilities for text