@shohojdhara/atomix 0.2.1 → 0.2.3

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

@@ -6,6 +6,7 @@
 @use '../02-tools/tools.border-radius' as *;
 @use '../02-tools/tools.button' as *;
 @use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-btn {
   $root: &;
@@ -43,7 +44,7 @@
   text-decoration: if(colors.$link-decoration == none, null, none);
   white-space: button.$btn-white-space;
   vertical-align: middle;
-  background-color: var(--#{config.$prefix}btn-bg);
+  @include dynamic-background(var(--#{config.$prefix}btn-bg));
   cursor: if(button.$enable-button-pointers, pointer, null);
   user-select: none;
   border: var(--#{config.$prefix}btn-border-width) solid var(--#{config.$prefix}btn-border-color);
@@ -57,7 +58,7 @@
   &:hover {
     color: var(--#{config.$prefix}btn-hover-color);
     text-decoration: if(colors.$link-hover-decoration == underline, none, null);
-    background-color: var(--#{config.$prefix}btn-hover-bg);
+    @include dynamic-background(var(--#{config.$prefix}btn-hover-bg));
     border-color: var(--#{config.$prefix}btn-hover-border-color);
   }
 
@@ -126,9 +127,19 @@
   fieldset:disabled & {
     color: var(--#{config.$prefix}btn-disabled-color);
     pointer-events: none;
-    background-color: var(--#{config.$prefix}btn-disabled-bg);
+    @include dynamic-background(var(--#{config.$prefix}btn-disabled-bg));
     background-image: if(button.$enable-gradients, none, null);
     border-color: var(--#{config.$prefix}btn-disabled-border-color);
     opacity: var(--#{config.$prefix}btn-disabled-opacity);
   }
+
+  // Glass morphism effect styles
+  &--glass {
+    @include dynamic-background(var(--#{config.$prefix}btn-bg), $background-transparency-enable: true);
+
+    &:hover {
+      @include dynamic-background(var(--#{config.$prefix}btn-hover-bg), $background-transparency-enable: true);
+    }
+
+  }
 }

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

@@ -3,6 +3,7 @@
 @use '../01-settings/settings.maps' as maps;
 @use '../01-settings/settings.callout' as callout;
 @use '../02-tools/tools.rem' as rem;
+@use '../02-tools/tools.background' as *;
 
 .c-callout {
   $root: &;
@@ -40,7 +41,7 @@
   max-width: var(--#{config.$prefix}callout-width);
   gap: var(--#{config.$prefix}callout-actions-spacer);
   padding: var(--#{config.$prefix}callout-padding-y) var(--#{config.$prefix}callout-padding-x);
-  background: var(--#{config.$prefix}callout-bg);
+  @include dynamic-background(var(--#{config.$prefix}callout-bg));
   border-radius: var(--#{config.$prefix}callout-border-radius);
   border: var(--#{config.$prefix}callout-border-witdh) solid
     var(--#{config.$prefix}callout-border-color);
@@ -89,9 +90,9 @@
   &__actions {
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
     gap: var(--#{config.$prefix}callout-actions-spacer);
     margin-left: auto;
+    margin-right: 10px;
   }
 
   &__close-btn {
@@ -144,7 +145,7 @@
     align-items: flex-start;
     justify-content: flex-start;
     border: none;
-    background-color: var(--#{config.$prefix}callout-toast-bg);
+    @include dynamic-background(var(--#{config.$prefix}callout-toast-bg));
     box-shadow: var(--#{config.$prefix}callout-box-shadow);
     animation: calloutToastIn 0.3s var(--#{config.$prefix}callout-transition-timing) forwards;
 
@@ -190,7 +191,7 @@
         --#{config.$prefix}callout-title-color: var(--#{config.$prefix}light);
         --#{config.$prefix}callout-text-color: #{$gray-4};
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}dark);
-        --#{config.$prefix}callout-border-color: var(--#{config.$prefix}primary-border-subtle);
+        --#{config.$prefix}callout-border-color: var(--#{config.$prefix}dark-border-subtle);
         --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}light);
       } @else {
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}#{$color}-bg-subtle);
@@ -200,6 +201,45 @@
     }
   }
 
+  // Glass morphism effect styles
+  &--glass {
+    @include dynamic-background(var(--#{config.$prefix}callout-bg), $background-transparency-enable: true);
+    padding: 0;
+    border: none;
+    display: block;
+
+    #{$root}__glass-content {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: var(--#{config.$prefix}callout-padding-y) var(--#{config.$prefix}callout-padding-x);
+      border: var(--#{config.$prefix}callout-border-witdh) solid
+        var(--#{config.$prefix}callout-border-color);
+      max-width: var(--#{config.$prefix}callout-width);
+      border-radius: var(--#{config.$prefix}callout-border-radius);
+      width: 100%;
+    }
+
+    // Adjust text colors for glass effect
+    #{$root}__title {
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
+
+    #{$root}__text {
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
+
+    // Glass effect for toast variant
+    &#{$root}--toast {
+      @include dynamic-background(var(--#{config.$prefix}callout-bg), $background-transparency-enable: true);
+      box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.1),
+        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
+    }
+
+
+  }
+
   &.is-hide {
     opacity: 0;
     transform: translateY(-10px);

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

@@ -6,6 +6,7 @@
 @use '../02-tools/tools.animations' as *;
 @use '../02-tools/tools.object-fit' as *;
 @use '../02-tools/tools.size' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-card {
   $root: &;
@@ -39,9 +40,10 @@
   padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
   border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
   border-radius: var(--#{$prefix}card-border-radius);
-  background-color: var(--#{$prefix}card-bg);
   @include basic-transition();
 
+  @include dynamic-background(var(--#{$prefix}card-bg));
+
   &__header {
     margin-bottom: var(--#{$prefix}card-header-spacer-y);
   }
@@ -86,7 +88,7 @@
 
   @if ($card-hover == true) {
     &:hover {
-      background-color: var(--#{$prefix}card-bg-hover);
+      @include dynamic-background(var(--#{$prefix}card-bg-hover));
     }
   }
 
@@ -135,6 +137,23 @@
       padding-top: 0;
     }
   }
+
+  &--glass {
+    background-color: transparent;
+    padding: 0;
+    border: none;
+    display: block;
+    border-radius: 0;
+
+    #{$root}__glass-content {
+      padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
+      max-width: var(--#{$prefix}card-width);
+      border-radius: var(--#{$prefix}card-border-radius);
+      width: 100%;
+      @include dynamic-background(var(--#{$prefix}card-bg), $background-transparency-enable: true);
+      background-blend-mode: overlay;
+    }
+  }
 }
 
 // Elevation effect for ElevationCard

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

@@ -9,6 +9,7 @@
 @use '../02-tools/tools.component' as *;
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.animations' as *;
+@use '../02-tools/tools.background' as *;
 
 @use 'sass:map';
 
@@ -35,7 +36,7 @@
   min-height: var(--#{$prefix}chart-min-height);
   width: 100%;
   max-width: 100%;
-  background-color: var(--#{$prefix}chart-bg);
+  @include dynamic-background(var(--#{$prefix}chart-bg));
   @include basic-transition();
 
   &::after {
@@ -2020,7 +2021,7 @@
 
 // Focus management for keyboard navigation
 .c-chart:focus-within {
-  &__data-point:focus {
+  .c-chart__data-point:focus {
     outline: 2px solid var(--#{$prefix}primary-6);
     outline-offset: 2px;
     z-index: 10;

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

@@ -4,6 +4,7 @@
 @use '../01-settings/settings.border-radius' as *;
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.animations' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-checkbox {
   $root: &;
@@ -32,7 +33,7 @@
   &__input {
     position: relative;
     appearance: none;
-    background-color: var(--#{$prefix}checkbox-bg);
+    @include dynamic-background(var(--#{$prefix}checkbox-bg));
     width: var(--#{$prefix}checkbox-width);
     height: var(--#{$prefix}checkbox-height);
     color: currentColor;

package/src/styles/06-components/_components.color-mode-toggle.scss

@@ -1,6 +1,7 @@
 @use '../01-settings/settings.config' as *;
 @use '../01-settings/settings.colors' as colors;
 @use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-color-mode-toggle {
   display: inline-flex;
@@ -15,7 +16,7 @@
   color: var(--#{$prefix}body-color);
 
   &:hover {
-    background-color: rgba(0, 0, 0, 0.05);
+    @include dynamic-background(rgba(0, 0, 0, 0.05));
   }
 
   &:focus {
@@ -30,7 +31,7 @@
 
   [data-#{$prefix}theme='dark'] & {
     &:hover {
-      background-color: rgba(255, 255, 255, 0.1);
+      @include dynamic-background(rgba(255, 255, 255, 0.1));
     }
   }
 }

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

@@ -3,6 +3,7 @@
 @use '../01-settings/settings.countdown' as *;
 @use '../01-settings/settings.typography' as *;
 @use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-countdown {
   $root: &;
@@ -51,7 +52,7 @@
         align-items: center;
         padding: var(--#{$prefix}countdown-item-padding-y) var(--#{$prefix}countdown-item-padding-x);
         border-radius: var(--#{$prefix}countdown-focused-border-radius);
-        background-color: var(--#{$prefix}countdown-focused-bg);
+        @include dynamic-background(var(--#{$prefix}countdown-focused-bg));
       }
 
       &__time-label {

package/src/styles/06-components/_components.data-table.scss

@@ -2,6 +2,7 @@
 @use '../01-settings/settings.data-table' as data-table;
 @use '../02-tools/tools.color-functions' as *;
 @use '../02-tools/tools.to-rgb' as *;
+@use '../02-tools/tools.background' as *;
 
 // Component: DataTable
 // Description: Styles for the DataTable component
@@ -32,12 +33,12 @@
   width: 100%;
   margin-bottom: 0;
   color: var(--#{config.$prefix}data-table-color);
-  background-color: var(--#{config.$prefix}data-table-bg);
+  @include dynamic-background(var(--#{config.$prefix}data-table-bg));
   border-collapse: collapse;
 
   // Header
   &__header {
-    background-color: var(--#{config.$prefix}data-table-header-bg);
+    @include dynamic-background(var(--#{config.$prefix}data-table-header-bg));
   }
 
   &__header-cell {
@@ -54,7 +55,7 @@
       user-select: none;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.05);
+        @include dynamic-background(rgba(0, 0, 0, 0.05));
       }
     }
   }
@@ -85,10 +86,10 @@
 
   // Rows
   &__row {
-    background-color: var(--#{config.$prefix}data-table-bg);
+    @include dynamic-background(var(--#{config.$prefix}data-table-bg));
 
     &:hover {
-      background-color: var(--#{config.$prefix}data-table-hover-bg);
+      @include dynamic-background(var(--#{config.$prefix}data-table-hover-bg));
     }
 
     &[role='button'] {
@@ -116,7 +117,7 @@
   // Variants
   &--striped {
     tbody tr:nth-of-type(odd) {
-      background-color: var(--#{config.$prefix}data-table-striped-bg);
+      @include dynamic-background(var(--#{config.$prefix}data-table-striped-bg));
     }
   }
 

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

@@ -6,6 +6,7 @@
 @use '../02-tools/_tools.rem' as *;
 @use '../02-tools/_tools.animations' as *;
 @use '../01-settings/_settings.z-layers' as *;
+@use '../02-tools/tools.background' as *;
 
 // DatePicker base component
 // --------------------------------------------------
@@ -105,7 +106,7 @@
     z-index: map.get($z-layers, 5);
     width: var(--#{$prefix}datepicker-width);
     padding: var(--#{$prefix}datepicker-padding-y) var(--#{$prefix}datepicker-padding-x);
-    background-color: var(--#{$prefix}datepicker-bg);
+    @include dynamic-background(var(--#{$prefix}datepicker-bg));
     border-radius: var(--#{$prefix}datepicker-border-radius);
     box-shadow: var(--#{$prefix}datepicker-box-shadow);
     margin-top: rem(4px);
@@ -160,6 +161,24 @@
     &--right-end {
       bottom: 0;
     }
+
+    &--glass {
+      z-index: unset;
+      box-shadow: none;
+      border: none;
+      border-radius: 0;
+      padding: 0;
+      background: transparent;
+    }
+  }
+
+  &__glass-content {
+    z-index: unset;
+    box-shadow: none;
+    border: none;
+    border-radius: var(--#{$prefix}datepicker-border-radius);
+    padding: var(--#{$prefix}datepicker-padding-y) var(--#{$prefix}datepicker-padding-x);
+    background: color-mix(in srgb, var(--#{$prefix}datepicker-bg) 50%, transparent 0%);
   }
 
   // Inline mode

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

@@ -3,6 +3,7 @@
 @use '../02-tools/_tools.rem' as *;
 @use '../02-tools/_tools.animations' as *;
 @use '../02-tools/_tools.spacing' as *;
+@use '../02-tools/tools.background' as *;
 
 // Add keyframe animations for dropdown
 @keyframes #{$prefix}dropdown-fade-in {
@@ -83,7 +84,7 @@
   &__menu-wrapper {
     position: absolute;
     left: 0;
-    z-index: 99;
+    // z-index: 99;
     display: flex;
     opacity: 0;
     visibility: hidden;
@@ -176,10 +177,16 @@
     padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
     list-style: none;
     @include mb(0);
-    background-color: var(--#{$prefix}dropdown-bg);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+    @include dynamic-background(var(--#{$prefix}dropdown-bg));
     border-radius: var(--#{$prefix}dropdown-border-radius);
     box-shadow: var(--#{$prefix}dropdown-box-shadow);
     overflow: hidden;
+
+    &--glass {
+      @include dynamic-background(var(--#{$prefix}dropdown-bg), $background-transparency-enable: true);
+      box-shadow: var(--#{$prefix}dropdown-box-shadow);
+    }
   }
 
   &__menu-item {
@@ -199,14 +206,14 @@
     &:hover,
     &:focus {
       color: var(--#{$prefix}dropdown-link-hover-color);
-      background-color: var(--#{$prefix}dropdown-link-hover-bg);
+      @include dynamic-background(var(--#{$prefix}dropdown-link-hover-bg));
       outline: none;
       padding-left: calc(var(--#{$prefix}dropdown-item-padding-x) + 3px);
     }
 
     &.is-active {
       color: var(--#{$prefix}dropdown-active-color);
-      background-color: var(--#{$prefix}dropdown-active-bg);
+      @include dynamic-background(var(--#{$prefix}dropdown-active-bg));
     }
 
     &.is-disabled {

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

@@ -4,6 +4,7 @@
 @use '../01-settings/settings.z-layers' as *;
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.animations' as *;
+@use '../02-tools/tools.background' as *;
 
 // EdgePanel SCSS Styling
 .c-edge-panel {
@@ -34,7 +35,7 @@
   &__backdrop {
     position: absolute;
     inset: 0;
-    background: var(--#{$prefix}edge-panel-backdrop-bg);
+    @include dynamic-background(var(--#{$prefix}edge-panel-backdrop-bg));
     backdrop-filter: blur(var(--#{$prefix}edge-panel-backdrop-blur));
     opacity: 0;
     z-index: map.get($z-layers, 1);
@@ -56,7 +57,7 @@
     color: var(--#{$prefix}edge-panel-color);
     width: var(--#{$prefix}edge-panel-width);
     height: 100%;
-    background-color: var(--#{$prefix}edge-panel-bg);
+    @include dynamic-background(var(--#{$prefix}edge-panel-bg));
     box-shadow: var(--#{$prefix}edge-panel-shadow);
     z-index: map.get($z-layers, 2);
     overflow: hidden;
@@ -97,7 +98,7 @@
     transition: background-color 0.2s ease;
 
     &:hover {
-      background-color: rgba(0, 0, 0, 0.05);
+      @include dynamic-background(rgba(0, 0, 0, 0.05));
     }
 
     &:focus-visible {