@shohojdhara/atomix 0.2.3 → 0.2.5

package/src/styles/01-settings/_settings.tabs.scss

@@ -23,7 +23,7 @@ $tabs-nav-btn-border-color: transparent !default;
 $tabs-nav-btn-border-active-color: var(--#{config.$prefix}brand-border-subtle) !default;
 $tabs-nav-btn-border-disabled-color: var(--#{config.$prefix}primary-border-subtle) !default;
 $tabs-nav-btns-gap: 0px !default;
-$tabs-nav-btn-inner-gap:map.get($spacing-sizes, 2) !default; //8px
+$tabs-nav-btn-inner-gap: map.get($spacing-sizes, 2) !default; //8px
 $tab-nav-btn-icon-size: map.get($spacing-sizes, 5) !default; //20px
 
 $tabs-panel-padding-x: math.div(grid.$grid-gutter-width, 2) !default;

package/src/styles/01-settings/_settings.upload.scss

@@ -30,13 +30,14 @@ $upload-icon-bg: var(--#{config.$prefix}body-bg) !default;
 $upload-title-font-size: typography.$font-size-lg !default;
 $upload-title-font-weight: typography.$headings-font-weight !default;
 $upload-title-color: var(--#{config.$prefix}body-color) !default;
-$upload-title-margin-top:  map.get($spacing-sizes, 2) !default; //8px
-
+$upload-title-margin-top: map.get($spacing-sizes, 2) !default; //8px
+$upload-title-margin-bottom: map.get($spacing-sizes, 2) !default; //8px
+$upload-text-opacity: 0.8 !default; //0.8 - opacity of the text
 $upload-text-font-size: typography.$font-size-sm !default;
 $upload-text-font-weight: typography.$font-weight-normal !default;
 $upload-text-color: var(--#{config.$prefix}body-color) !default;
-$upload-text-margin-top:  map.get($spacing-sizes, 4) !default; //4px
-
+$upload-text-margin-top: map.get($spacing-sizes, 4) !default; //4px
+$upload-text-margin-bottom: map.get($spacing-sizes, 4) !default; //16px
 $upload-btn-margin-top: map.get($spacing-sizes, 5) !default; //20px
 $upload-btn-margin-left: map.get($spacing-sizes, 4) !default; //16px
 
@@ -46,7 +47,7 @@ $upload-helper-text-font-size: typography.$font-size-sm !default;
 $upload-helper-text-font-weight: typography.$font-weight-normal !default;
 $upload-helper-text-color: var(--#{config.$prefix}body-color) !default;
 $upload-helper-text-margin-top: map.get($spacing-sizes, 2) !default; //8px
-
+$upload-helper-text-opacity: 0.7 !default; //0.7 - opacity of the helper text
 $upload-disabled-opacity: 0.5 !default;
 
 $upload-loader-padding-x: map.get($spacing-sizes, 3) !default; //12px

package/src/styles/02-tools/_tools.animations.scss

@@ -100,15 +100,14 @@
 //   );
 // }
 
-
-@keyframes backgroundMoving { 
+@keyframes backgroundMoving {
   0% {
     background-position: 0 0%;
   }
-   250% {
+  250% {
     background-position: 100% 100%;
   }
-   50% {
+  50% {
     background-position: 100% 0%;
   }
   75% {
@@ -117,4 +116,4 @@
   100% {
     background-position: 100% 100%;
   }
-} 
+}

package/src/styles/02-tools/_tools.background.scss

@@ -10,19 +10,13 @@
 @mixin dynamic-background(
   $color,
   $transparency: $background-transparency,
-  $background-transparency-enable: $background-transparency-enable,
-  $blur: $background-blur,
-  $use-backdrop-filter: $background-enable-backdrop-filter
+  $background-transparency-enable: $background-transparency-enable
 ) {
   // Validate inputs
   @if $transparency < 0 or $transparency > 1 {
     @error 'Transparency must be between 0 and 1, got #{$transparency}';
   }
 
-  @if $blur < 0 {
-    @error 'Blur value must be non-negative, got #{$blur}px';
-  }
-
   // Apply background based on transparency settings
   @if $background-transparency-enable and $transparency > 0 {
     @if $background-enable-gradient-overlay {
@@ -59,12 +53,6 @@
     background-color: $color;
   }
 
-  // Apply backdrop filter effects based on settings
-  @if $background-enable-backdrop-filter and ($blur > 0 or $use-backdrop-filter) {
-    backdrop-filter: blur(#{$blur}px) saturate(1.5) contrast(1.2) brightness(1.1);
-    -webkit-backdrop-filter: blur(#{$blur}px) saturate(1.2) contrast(1.2) brightness(1.1);
-  }
-
   @if $background-enable-with-shadow {
     box-shadow:
       var(--atomix-box-shadow-inset),

package/src/styles/02-tools/_tools.glass.scss

@@ -1 +0,0 @@
-

package/src/styles/02-tools/_tools.utility-api.scss

@@ -14,19 +14,20 @@
 
 // Default config for utilities
 $utility-defaults: (
-        responsive: true,
-        rfs: false,
-        print: false,
-        dark: false,
-        class: null,
-        state: null,
-        local-vars: (),
-        rtl: true,
+  responsive: true,
+  rfs: false,
+  print: false,
+  dark: false,
+  class: null,
+  state: null,
+  local-vars: (),
+  rtl: true,
 ) !default;
 
 // Core function to generate utility classes
 @mixin generate-utility($utility, $infix: '', $is-rfs: false) {
   $values: map.get($utility, values);
+  $css-var: map.get($utility, css-var);
 
   // If the values are a list or string, convert it to a map
   @if meta.type-of($values) == 'string' or meta.type-of($values) == 'list' {
@@ -36,44 +37,72 @@ $utility-defaults: (
   @each $key, $value in $values {
     $properties: map.get($utility, property);
     $property-class: map.get($utility, class);
-    $property-class: if($property-class, $property-class, list.nth($properties, 1));
 
-    // Handle decimal key case for spacing, only for numbers (integers or floats)
-    @if meta.type-of($key) == 'number' and $key % 1 != 0 {
-      $key: round($key); // Round to the nearest integer
+    // Handle case where property-class is null
+    @if $property-class == null and $properties {
+      $property-class: if(
+        meta.type-of($properties) == 'list',
+        list.nth($properties, 1),
+        $properties
+      );
     }
 
-    // Multiple properties are possible, like with borders or shadows
-    $property-class: if(
-                    meta.type-of($property-class) == 'list',
-                    list.nth($property-class, 1),
-                    $property-class
-    );
-
     // State variants (hover, focus, active, etc.)
+    // Create a local copy of infix to avoid affecting other utilities
+    $local-infix: $infix;
     $state: map.get($utility, state);
-    $infix: if($state, if(meta.type-of($state) == 'string', '#{$state}#{$infix}', $infix), $infix);
+    $local-infix: if(
+      $state,
+      if(meta.type-of($state) == 'string', '#{$state}#{$local-infix}', $local-infix),
+      $local-infix
+    );
 
-    // Don't prefix if value key is null (e.g. with shadow-none utility)
-    // Escape key to ensure valid CSS selector (e.g. 1.5 -> 1\.5)
+    // Escape special characters in key for valid CSS class names
     $escaped-key: if($key, _escape-key($key), null);
 
-    $class-name: if(
-      $escaped-key,
-      '#{$property-class}-#{$escaped-key}#{$infix}',
-      '#{$property-class}#{$infix}'
-    );
-
     @if map.get($utility, class) == null {
+      // Generate class with property name as class
+      $class-name: if(
+        $key,
+        '#{$property-class}-#{$escaped-key}#{$local-infix}',
+        '#{$property-class}#{$local-infix}'
+      );
+
       .#{$class-name} {
-        @each $property in $properties {
-          #{$property}: $value if(map.get($utility, rtl), null, !important);
+        @if $css-var {
+          // Handle CSS variable generation
+          $css-variable-name: str-replace(#{$property-class}, '.', '\\.');
+          --atomix-u-#{$css-variable-name}: #{$value};
+        } @else if $properties {
+          @each $property in $properties {
+            #{$property}: $value if(map.get($utility, rtl), null, !important);
+          }
+        } @else {
+          #{$property-class}: $value if(map.get($utility, rtl), null, !important);
         }
       }
     } @else {
-      .#{map.get($utility, class)}#{$infix}#{if($escaped-key, '-#{$escaped-key}', '')} {
-        @each $property in $properties {
-          #{$property}: $value if(map.get($utility, rtl), null, !important);
+      // Generate class with custom class name
+      $base-class: map.get($utility, class);
+      $modifier: if($key, '-#{$escaped-key}', '');
+
+      .#{$base-class}#{$local-infix}#{$modifier} {
+        @if $css-var and $properties {
+          // Handle CSS variable generation with properties
+          @each $property in $properties {
+            $css-variable-name: str-replace(#{$property}, '.', '\\.');
+            --atomix-u-#{$css-variable-name}: #{$value};
+          }
+        } @else if $css-var {
+          // Handle CSS variable generation without properties
+          $css-variable-name: str-replace(#{$base-class}, '.', '\\.');
+          --atomix-u-#{$css-variable-name}#{$modifier}: #{$value};
+        } @else if $properties {
+          @each $property in $properties {
+            #{$property}: $value if(map.get($utility, rtl), null, !important);
+          }
+        } @else {
+          #{$base-class}: $value if(map.get($utility, rtl), null, !important);
         }
       }
     }
@@ -105,9 +134,9 @@ $utility-defaults: (
 ) {
   // Set default breakpoint infix generator if not provided
   $breakpoint-infix-generator: if(
-                  $breakpoint-infix-generator,
-                  $breakpoint-infix-generator,
-                  get-breakpoint-infix
+    $breakpoint-infix-generator,
+    $breakpoint-infix-generator,
+    get-breakpoint-infix
   );
 
   @each $utility, $config in $utilities {
@@ -117,17 +146,19 @@ $utility-defaults: (
     // Only process if the utility is not explicitly set to false
     @if map.get($config, generated) != false {
       $utility-map: (
-              property: map.get($config, property),
-              values: map.get($config, values),
-              class: map.get($config, class),
-              state: map.get($config, state),
-              rtl: map.get($config, rtl),
+        property: map.get($config, property),
+        values: map.get($config, values),
+        class: map.get($config, class),
+        state: map.get($config, state),
+        rtl: map.get($config, rtl),
+        css-var: map.get($config, css-var),
+        local-vars: map.get($config, local-vars),
       );
 
       @include generate-responsive-utilities(
-                      $utility-map,
-                      $breakpoints,
-                      $breakpoint-infix-generator
+        $utility-map,
+        $breakpoints,
+        $breakpoint-infix-generator
       );
     }
   }
@@ -159,13 +190,25 @@ $utility-defaults: (
 
   @each $key in $keys {
     $result: map.merge(
-                    $result,
-                    (
-                            $key: if($index <= list.length($values), list.nth($values, $index), null),
-                    )
+      $result,
+      (
+        $key: if($index <= list.length($values), list.nth($values, $index), null),
+      )
     );
     $index: $index + 1;
   }
 
   @return $result;
 }
+
+// Helper function to replace strings
+@function str-replace($string, $search, $replace: '') {
+  $index: string.index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}

package/src/styles/03-generic/_generic.root.scss

@@ -10,7 +10,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-
 :root,
 [data-#{config.$prefix}color-mode='light'] {
   // Note: Custom variable values only support SassScript inside `#{}`.
@@ -66,8 +65,6 @@
   --#{config.$prefix}font-sans-serif: #{meta.inspect(typography.$font-family-sans-serif)};
   --#{config.$prefix}font-monospace: #{meta.inspect(typography.$font-family-monospace)};
 
-  
-
   // Root and body
   // scss-docs-start root-body-variables
   @if typography.$font-size-root != null {
@@ -172,7 +169,7 @@
       --#{config.$prefix}#{$color}-gradient: #{$value};
     }
 
-  --#{config.$prefix}gradient: #{map.get(color-maps.$gradient-colors, dark)};
+    --#{config.$prefix}gradient: #{map.get(color-maps.$gradient-colors, dark)};
 
     --#{config.$prefix}box-shadow: #{box-shadow.$box-shadow-dark};
     --#{config.$prefix}box-shadow-xs: #{box-shadow.$box-shadow-xs-dark};

package/src/styles/04-elements/_elements.body.scss

@@ -17,5 +17,4 @@ body {
   &.is-modal-open {
     overflow: hidden;
   }
-
 }

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

@@ -0,0 +1,249 @@
+// Component: AtomixGlass
+// =============================================================================
+
+.c-atomix-glass {
+  position: relative;
+
+  // CSS custom property defaults
+  --atomix-glass-radius: var(--atomix-radius-md, 16px);
+  --atomix-glass-transform: none;
+  --atomix-glass-transition: opacity var(--atomix-transition-duration, 0.2s) ease-out;
+  --atomix-glass-position: absolute;
+  --atomix-glass-container-width: 100%;
+  --atomix-glass-container-height: 100%;
+  --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem);
+
+  // Base layer styles for all effect layers (hover, border, overlay)
+  &__hover-1,
+  &__hover-2,
+  &__hover-3,
+  &__base,
+  &__overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: var(--atomix-glass-radius);
+    transform: var(--atomix-glass-transform);
+    transition: var(--atomix-glass-transition);
+  }
+
+  // Interactive hover effects
+  &__hover-1,
+  &__hover-2,
+  &__hover-3 {
+    mix-blend-mode: overlay;
+    // Dynamic opacity and background are set via inline styles using CSS variables
+    opacity: var(--atomix-glass-hover-1-opacity, 0);
+    background: var(--atomix-glass-hover-1-gradient, none);
+  }
+
+  &__hover-1 {
+    transition: opacity 0.2s ease-out;
+    opacity: var(--atomix-glass-hover-1-opacity, 0);
+    background: var(--atomix-glass-hover-1-gradient, none);
+  }
+
+  &__hover-2 {
+    transition: opacity 0.4s ease-out;
+    opacity: var(--atomix-glass-hover-2-opacity, 0);
+    background: var(--atomix-glass-hover-2-gradient, none);
+  }
+
+  &__hover-3 {
+    transition: opacity 0.6s ease-out;
+    opacity: var(--atomix-glass-hover-3-opacity, 0);
+    background: var(--atomix-glass-hover-3-gradient, none);
+  }
+
+  // Base and overlay layers for over-light mode
+  &__base {
+    mix-blend-mode: soft-light;
+    // Dynamic opacity and background are set via inline styles using CSS variables
+    opacity: var(--atomix-glass-base-opacity, 0);
+    background: var(--atomix-glass-base-gradient, none);
+  }
+
+  &__overlay {
+    mix-blend-mode: overlay;
+    // Dynamic opacity and background are set via inline styles using CSS variables
+    opacity: var(--atomix-glass-overlay-opacity, 0);
+    background: var(--atomix-glass-overlay-gradient, none);
+  }
+
+  &__overlay-highlight {
+    position: absolute;
+    inset: var(--atomix-spacing-0-5, 0.125rem);
+    pointer-events: none;
+    border-radius: var(--atomix-glass-radius);
+    transform: var(--atomix-glass-transform);
+    transition: var(--atomix-glass-transition);
+    mix-blend-mode: screen;
+    // Dynamic opacity and background are set via inline styles
+    // Opacity is calculated: opacityValues.over * OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER
+    // Background gradient uses constants for positioning
+  }
+
+  // Border effect layers - matching old version exactly
+  &__border-1,
+  &__border-2 {
+    // Static styles
+    padding: var(--atomix-glass-border-width);
+    box-sizing: border-box;
+    overflow: hidden;
+    pointer-events: none;
+    -webkit-mask:
+      linear-gradient(var(--atomix-black, #000000) 0 0) content-box,
+      linear-gradient(var(--atomix-black, #000000) 0 0);
+    -webkit-mask-composite: xor;
+    mask:
+      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);
+    width: var(--atomix-glass-width);
+    height: var(--atomix-glass-height);
+    border-radius: var(--atomix-glass-radius);
+    transform: var(--atomix-glass-transform);
+    transition: var(--atomix-glass-transition);
+  }
+
+  &__border-1 {
+    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));
+  }
+
+  &__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));
+  }
+
+  // Container styles
+  &__container {
+    width: var(--atomix-glass-container-width);
+    height: var(--atomix-glass-container-height);
+    position: relative;
+    border-radius: var(--atomix-glass-radius);
+    transition: border-radius 0.25s ease-out;
+  }
+
+  &__inner {
+    width: var(--atomix-glass-container-width);
+    height: var(--atomix-glass-container-height);
+    position: relative;
+    // Padding and border-radius are set dynamically via inline styles
+    border-radius: var(--atomix-glass-radius);
+  }
+
+  &__filter {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  &__filter-overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  &__filter-shadow {
+    position: absolute;
+    inset: var(--atomix-glass-border-width);
+    pointer-events: none;
+  }
+
+  &__content {
+    position: relative;
+    width: var(--atomix-glass-container-width);
+    height: var(--atomix-glass-container-height);
+  }
+
+  // Background layers for over-light mode
+  &__background-layer {
+    position: absolute;
+    pointer-events: none;
+    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);
+    }
+
+    &--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;
+
+    * {
+      transition: none !important;
+    }
+  }
+
+  &--high-contrast {
+    border: var(--atomix-spacing-0-5, 2px) solid currentColor;
+    outline: var(--atomix-spacing-0-5, 2px) solid transparent;
+    outline-offset: var(--atomix-spacing-0-5, 2px);
+  }
+
+  &--disabled-effects {
+    --atomix-glass-transform: none;
+    --atomix-glass-transition: none;
+  }
+
+  // Responsive and accessibility
+  @media (prefers-reduced-motion: reduce) {
+    --atomix-glass-transition: none;
+
+    * {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: high) {
+    border-width: var(--atomix-spacing-0-5, 0.125rem);
+  }
+}

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

@@ -47,18 +47,17 @@
     @include dynamic-background(
       var(--#{$prefix}tag-bg-color),
       $background-transparency-enable: true,
-      $transparency: 0.8
+      $transparency: 0.2
     );
-    border: 1px solid color-mix(in srgb, var(--#{$prefix}tag-color) 20%, transparent);
+    border: 1px solid color-mix(in srgb, var(--#{$prefix}tag-color) 90%, transparent);
 
+    // // Outer depth and glass effect
+    // 0 1px 3px rgba(0, 0, 0, 0.2),
+    // 0 2px 8px rgba(0, 0, 0, 0.15),
+    // 0 4px 16px rgba(0, 0, 0, 0.1),
 
-      // // Outer depth and glass effect
-      // 0 1px 3px rgba(0, 0, 0, 0.2),
-      // 0 2px 8px rgba(0, 0, 0, 0.15),
-      // 0 4px 16px rgba(0, 0, 0, 0.1),
-      
-      // Subtle highlight on top edge
-      // 0 -1px 0 rgba(255, 255, 255, 0.1);
+    // Subtle highlight on top edge
+    // 0 -1px 0 rgba(255, 255, 255, 0.1);
   }
 
   @each $color, $value in maps.$theme-colors {
@@ -81,17 +80,3 @@
     }
   }
 }
-
-.c-badge-glass {
-  box-shadow:
-    // Inner glow
-    inset 1px 2px 3px rgba(255, 255, 255, 0.1),
-    inset 0 -2px 2px rgba(0, 0, 0, 0.3);
-    // 0 1px 3px rgba(0, 0, 0, 0.2),
-    // 0 2px 8px rgba(0, 0, 0, 0.15),
-    // 0 4px 16px rgba(0, 0, 0, 0.1),
-    // Subtle highlight on top edge
-    // 0 -1px 0 rgba(255, 255, 255, 0.1);
-    border-radius: 999px;
-
-}

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

@@ -135,11 +135,16 @@
 
   // Glass morphism effect styles
   &--glass {
-    @include dynamic-background(var(--#{config.$prefix}btn-bg), $background-transparency-enable: true);
+    @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);
+      @include dynamic-background(
+        var(--#{config.$prefix}btn-hover-bg),
+        $background-transparency-enable: true
+      );
     }
-
   }
 }

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

@@ -203,7 +203,7 @@
 
   // Glass morphism effect styles
   &--glass {
-    @include dynamic-background(var(--#{config.$prefix}callout-bg), $background-transparency-enable: true);
+    background: none;
     padding: 0;
     border: none;
     display: block;
@@ -214,10 +214,14 @@
       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);
+        color-mix(in srgb, var(--#{config.$prefix}callout-border-color) 20%, transparent);
       max-width: var(--#{config.$prefix}callout-width);
       border-radius: var(--#{config.$prefix}callout-border-radius);
       width: 100%;
+      @include dynamic-background(
+        var(--#{config.$prefix}callout-bg),
+        $background-transparency-enable: true
+      );
     }
 
     // Adjust text colors for glass effect
@@ -231,13 +235,14 @@
 
     // Glass effect for toast variant
     &#{$root}--toast {
-      @include dynamic-background(var(--#{config.$prefix}callout-bg), $background-transparency-enable: true);
+      @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 {