@shohojdhara/atomix 0.5.5 → 0.5.7

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

@@ -1,14 +1,75 @@
-@use 'sass:meta';
-@use 'sass:string';
 @use 'sass:math';
 @use 'sass:color';
 @use 'sass:map';
 @use 'sass:list';
 @use '../01-settings/settings.background' as *;
-@use '../01-settings/settings.config' as *;
 @use '../01-settings/settings.colors' as *;
-@use '../02-tools/tools.to-rgb' as *;
+/* Background utility simplification
+ * - Consolidates duplicated glass, mesh, shadow, border, and noise patterns into private helpers.
+ * - Replaces magic values with local token aliases backed by existing background settings.
+ * - Flattens variant and interaction branching, keeps public mixin signatures intact, and removes old backdrop prefixes.
+ */
+
+$_bg-highlight: $white !default;
+$_bg-shadow: $black !default;
+$_bg-filters: ('glass': blur(12px) saturate(1.4), 'solid': blur(8px), 'mesh': blur(16px)) !default;
+$_bg-motion: ('base': 0.3s, 'press': 0.2s, 'easing': cubic-bezier(0.4, 0, 0.2, 1), 'scale': 0.98) !default;
+$_bg-glass: ('angle': 110deg, 'edge-angle': 180deg, 'edge-stop': 30%, 'ambient-stop': 60%, 'ambient-size': ellipse 120% 80% at 50% 120%) !default;
+$_bg-states: ('base': ('shimmer': (0.08, 0.12, 0.08), 'edge': (0.15, 0.05), 'mix': (0.13, 0, -0.1, 0.03), 'ambient': 0.4), 'hover': ('shimmer': (0.1, 0.15, 0.1), 'edge': (0.18, 0.08), 'mix': (0.16, 0, -0.12, 0.04), 'ambient': 0.5), 'active': ('edge': (0.12, 0.05), 'mix': (0.18, 0, -0.09))) !default;
+$_bg-shadow-ambient: ('base': 0 2px 4px rgba($_bg-shadow, 0.05), 'hover': 0 2px 4px rgba($_bg-shadow, 0.08)) !default;
+
+// Changelog: Added a shared color-mix helper so all variants use the same tokenized transparency math.
+@function _bg-mix($color, $weight) { @return color-mix(in srgb, #{$color} #{math.percentage($weight)}, transparent); }
+
+// Changelog: Added compact token readers to remove repeated literal lookups from the public mixin.
+@function _bg-state($state, $group) { @return map.get($_bg-states, $state, $group); }
+@function _bg-surface($state, $transparency) { @return if($state == 'hover', $background-transparency-hover, if($state == 'active', $background-transparency-active, $transparency)); }
+@function _bg-noise-image() { @return url("data:image/svg+xml,%3Csvg viewBox='0 0 #{$background-noise-scale} #{$background-noise-scale}' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' /%3E%3C/svg%3E"); }
+
+// Changelog: Extracted glass background generation so base, hover, and active states reuse one recipe.
+@function _bg-glass($color, $transparency, $state: 'base') {
+  $surface: _bg-surface($state, $transparency);
+  $edge: _bg-state($state, 'edge');
+  $mix: _bg-state($state, 'mix');
+  @if $state == 'active' {
+    @return linear-gradient(map.get($_bg-glass, 'edge-angle'), rgba($_bg-highlight, list.nth($edge, 1)) 0%, rgba($_bg-highlight, list.nth($edge, 2)) 20%, transparent 40%), linear-gradient($background-gradient-angle, _bg-mix($color, $surface + list.nth($mix, 1)) 0%, _bg-mix($color, $surface + list.nth($mix, 2)) 50%, _bg-mix($color, $surface + list.nth($mix, 3)) 100%);
+  }
+  $shimmer: _bg-state($state, 'shimmer');
+  @return linear-gradient(map.get($_bg-glass, 'angle'), transparent 0%, rgba($_bg-highlight, list.nth($shimmer, 1)) 45%, rgba($_bg-highlight, list.nth($shimmer, 2)) 50%, rgba($_bg-highlight, list.nth($shimmer, 3)) 55%, transparent 100%), linear-gradient(map.get($_bg-glass, 'edge-angle'), rgba($_bg-highlight, list.nth($edge, 1)) 0%, rgba($_bg-highlight, list.nth($edge, 2)) 15%, transparent map.get($_bg-glass, 'edge-stop')), linear-gradient($background-gradient-angle, _bg-mix($color, $surface + list.nth($mix, 1)) 0%, _bg-mix($color, $surface + list.nth($mix, 2)) 40%, _bg-mix($color, $surface + list.nth($mix, 3)) 70%, _bg-mix($color, $surface + list.nth($mix, 4)) 100%), radial-gradient(map.get($_bg-glass, 'ambient-size'), _bg-mix($color, $surface * map.get($_bg-states, $state, 'ambient')) 0%, transparent map.get($_bg-glass, 'ambient-stop'));
+}
+
+// Changelog: Extracted shadow composition so base and hover shadows share one loop and corrected opacity scaling.
+@function _bg-shadows($color, $hover: false) {
+  $shadows: (inset 0 1px 0 rgba($_bg-highlight, if($hover, 0.15, 0.1)));
+  $multiplier: if($hover, 1.5, 1);
+  @for $i from 1 through $background-shadow-layers {
+    $blur: $background-shadow-blur-base * $i * $multiplier;
+    $opacity: math.div($background-shadow-intensity, $i) * $multiplier;
+    $shadows: list.append($shadows, 0 $blur ($blur * 2) if($i == 1, $background-shadow-spread, 0) _bg-mix($color, $opacity), comma);
+  }
+  @return list.append($shadows, map.get($_bg-shadow-ambient, if($hover, 'hover', 'base')), comma);
+}
+
+// Changelog: Extracted a shared overlay scaffold so border, noise, and shimmer pseudo-elements stay aligned.
+@mixin _bg-overlay($z) { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: $z; }
+
+// Changelog: Moved the glass border effect into a private helper to remove duplicate pseudo-element declarations.
+@mixin _bg-border() {
+  &::before { @include _bg-overlay(1); padding: $background-border-width; background: linear-gradient($background-gradient-angle, rgba($_bg-highlight, $background-border-opacity * 1.2) 0%, rgba($_bg-highlight, $background-border-opacity * 0.6) 50%, rgba($_bg-highlight, $background-border-opacity * 0.3) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
+}
+
+// Changelog: Moved the noise overlay into a helper so the SVG asset and sizing are defined once.
+@mixin _bg-noise() {
+  &::after { @include _bg-overlay(2); opacity: $background-noise-opacity; background-image: _bg-noise-image(); background-size: #{$background-noise-scale}px; mix-blend-mode: overlay; }
+}
+
+// Changelog: Moved the shimmer overlay into a helper so the variant branch only selects the effect.
+@mixin _bg-shimmer() {
+  overflow: hidden;
+  &::before { @include _bg-overlay(1); background: linear-gradient(map.get($_bg-glass, 'angle'), transparent 0%, rgba($_bg-highlight, $background-shimmer-intensity) 50%, transparent 100%); transform: translateX(-100%); animation: shimmer $background-shimmer-duration infinite; }
+}
 
+// Changelog: Rebuilt the main utility mixin around private helpers to preserve the API while removing nesting and redundancy.
 /// Dynamic background mixin with glass morphism effects
 /// @param {Color} $color - Base color for the background
 /// @param {Number} $transparency [0.65] - Transparency level (0-1)
@@ -28,326 +89,71 @@
   $enable-noise: $background-enable-noise-texture,
   $variant: 'glass'
 ) {
-  // Base positioning for pseudo-elements
   position: relative;
   isolation: isolate;
-
-  // ─── Glass Variant (Default) ────────────────────────────────────────────────
   @if $variant == 'glass' {
-    @if $enable-transparency {
-      @if $enable-gradient {
-        background:
-          // Shimmer highlight
-          linear-gradient(
-            110deg,
-            transparent 0%,
-            rgba(255, 255, 255, 0.08) 45%,
-            rgba(255, 255, 255, 0.12) 50%,
-            rgba(255, 255, 255, 0.08) 55%,
-            transparent 100%
-          ),
-          // Top edge highlight
-          linear-gradient(
-            180deg,
-            rgba(255, 255, 255, 0.15) 0%,
-            rgba(255, 255, 255, 0.05) 15%,
-            transparent 30%
-          ),
-          // Main glass layer with depth
-          linear-gradient(
-            $background-gradient-angle,
-            color-mix(in srgb, #{$color} 78%, transparent) 0%,
-            color-mix(in srgb, #{$color} 65%, transparent) 40%,
-            color-mix(in srgb, #{$color} 55%, transparent) 70%,
-            color-mix(in srgb, #{$color} 68%, transparent) 100%
-          ),
-          // Bottom ambient shadow
-          radial-gradient(
-            ellipse 120% 80% at 50% 120%,
-            color-mix(in srgb, #{$color} 26%, transparent) 0%,
-            transparent 60%
-          );
-        backdrop-filter: blur(12px) saturate(1.4);
-        -webkit-backdrop-filter: blur(12px) saturate(1.4);
-      } @else {
-        background-color: color-mix(
-          in srgb,
-          #{$color} 65%,
-          transparent
-        );
-        backdrop-filter: blur(8px);
-        -webkit-backdrop-filter: blur(8px);
-      }
+    @if $enable-transparency and $enable-gradient {
+      background: _bg-glass($color, $transparency);
+      backdrop-filter: map.get($_bg-filters, 'glass');
+    } @else if $enable-transparency {
+      background-color: _bg-mix($color, $transparency);
+      backdrop-filter: map.get($_bg-filters, 'solid');
     } @else {
       background-color: $color;
     }
-
-    // Glass border gradient
-    @if $enable-border {
-      &::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        padding: $background-border-width;
-        background: linear-gradient(
-          $background-gradient-angle,
-          rgba(255, 255, 255, $background-border-opacity * 1.2) 0%,
-          rgba(255, 255, 255, $background-border-opacity * 0.6) 50%,
-          rgba(255, 255, 255, $background-border-opacity * 0.3) 100%
-        );
-        -webkit-mask:
-          linear-gradient(#fff 0 0) content-box,
-          linear-gradient(#fff 0 0);
-        -webkit-mask-composite: xor;
-        mask-composite: exclude;
-        pointer-events: none;
-        z-index: 1;
-      }
-    }
-
-    // Noise texture overlay
-    @if $enable-noise {
-      &::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        opacity: $background-noise-opacity;
-        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 #{$background-noise-scale} #{$background-noise-scale}' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' /%3E%3C/svg%3E");
-        background-size: #{$background-noise-scale}px;
-        pointer-events: none;
-        mix-blend-mode: overlay;
-        z-index: 2;
-      }
-    }
-  }
-
-  // ─── Solid Variant ──────────────────────────────────────────────────────────
-  @else if $variant == 'solid' {
-    background-color: $color;
-    @if $enable-gradient {
-      background: linear-gradient(
-        $background-gradient-angle,
-        color.adjust($color, $lightness: 5%) 0%,
-        $color 50%,
-        color.adjust($color, $lightness: -5%) 100%
-      );
-    }
-  }
-
-  // ─── Mesh Gradient Variant ──────────────────────────────────────────────────
-  @else if $variant == 'mesh' {
-    background:
-      radial-gradient(
-        circle at 20% 30%,
-        color-mix(in srgb, #{$color} 40%, transparent) 0%,
-        transparent 50%
-      ),
-      radial-gradient(
-        circle at 80% 70%,
-        color-mix(in srgb, #{$color} 35%, transparent) 0%,
-        transparent 50%
-      ),
-      radial-gradient(
-        circle at 50% 50%,
-        color-mix(in srgb, #{$color} 65%, transparent) 0%,
-        color-mix(in srgb, #{$color} 39%, transparent) 100%
-      );
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
+    @if $enable-border { @include _bg-border(); }
+    @if $enable-noise { @include _bg-noise(); }
+  } @else if $variant == 'solid' {
+    background: if($enable-gradient, linear-gradient($background-gradient-angle, color.adjust($color, $lightness: 5%) 0%, $color 50%, color.adjust($color, $lightness: -5%) 100%), $color);
+  } @else if $variant == 'mesh' {
+    background: radial-gradient(circle at 20% 30%, _bg-mix($color, 0.4) 0%, transparent 50%), radial-gradient(circle at 80% 70%, _bg-mix($color, 0.35) 0%, transparent 50%), radial-gradient(circle at 50% 50%, _bg-mix($color, $transparency) 0%, _bg-mix($color, 0.39) 100%);
+    backdrop-filter: map.get($_bg-filters, 'mesh');
+  } @else if $variant == 'shimmer' {
+    background: _bg-mix($color, 0.75);
+    @include _bg-shimmer();
   }
-
-  // ─── Shimmer Variant ────────────────────────────────────────────────────────
-  @else if $variant == 'shimmer' {
-    background: color-mix(
-      in srgb,
-      #{$color} 75%,
-      transparent
-    );
-    overflow: hidden;
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: linear-gradient(
-        110deg,
-        transparent 0%,
-        rgba(255, 255, 255, $background-shimmer-intensity) 50%,
-        transparent 100%
-      );
-      transform: translateX(-100%);
-      animation: shimmer $background-shimmer-duration infinite;
-      pointer-events: none;
-    }
-  }
-
-  // ─── Shadow Layers ──────────────────────────────────────────────────────────
-  @if $enable-shadow {
-    $shadow-list: ();
-    
-    // Inner glow
-    $shadow-list: list.append(
-      $shadow-list,
-      inset 0 1px 0 rgba(255, 255, 255, 0.1),
-      comma
-    );
-    
-    // Layered outer shadows
-    @for $i from 1 through $background-shadow-layers {
-      $blur: $background-shadow-blur-base * $i;
-      $spread: if($i == 1, $background-shadow-spread, 0);
-      $opacity: math.div($background-shadow-intensity, $i);
-      
-      $shadow-list: list.append(
-        $shadow-list,
-        0 #{$blur} #{$blur * 2} #{$spread} color-mix(in srgb, #{$color} #{math.percentage($opacity * 100)}, transparent),
-        comma
-      );
-    }
-    
-    // Ambient shadow
-    $shadow-list: list.append(
-      $shadow-list,
-      0 2px 4px rgba(0, 0, 0, 0.05),
-      comma
-    );
-    
-    box-shadow: $shadow-list;
-  }
-
-  // ─── Hover & Active States ──────────────────────────────────────────────────
-  transition:
-    background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-
-  @media (hover: hover) {
-    &:hover {
-      @if $variant == 'glass' and $enable-transparency {
-        & {
-          background:
-            linear-gradient(
-              110deg,
-              transparent 0%,
-              rgba(255, 255, 255, 0.1) 45%,
-              rgba(255, 255, 255, 0.15) 50%,
-              rgba(255, 255, 255, 0.1) 55%,
-              transparent 100%
-            ),
-            linear-gradient(
-              180deg,
-              rgba(255, 255, 255, 0.18) 0%,
-              rgba(255, 255, 255, 0.08) 15%,
-              transparent 30%
-            ),
-            linear-gradient(
-              $background-gradient-angle,
-              color-mix(in srgb, #{$color} 96%, transparent) 0%,
-              color-mix(in srgb, #{$color} 80%, transparent) 40%,
-              color-mix(in srgb, #{$color} 68%, transparent) 70%,
-              color-mix(in srgb, #{$color} 84%, transparent) 100%
-            ),
-            radial-gradient(
-              ellipse 120% 80% at 50% 120%,
-              color-mix(in srgb, #{$color} 40%, transparent) 0%,
-              transparent 60%
-            );
-        }
-      }
-      
-      @if $enable-shadow {
-        & {
-          box-shadow:
-            inset 0 1px 0 rgba(255, 255, 255, 0.15),
-            0 #{$background-shadow-blur-base * 1.5} #{$background-shadow-blur-base * 3} #{$background-shadow-spread} color-mix(in srgb, #{$color} #{math.percentage($background-shadow-intensity * 150)}, transparent),
-            0 #{$background-shadow-blur-base * 2.5} #{$background-shadow-blur-base * 5} 0 color-mix(in srgb, #{$color} #{math.percentage($background-shadow-intensity * 100)}, transparent),
-            0 2px 4px rgba(0, 0, 0, 0.08);
-        }
+  @if $enable-shadow { box-shadow: _bg-shadows($color); }
+  transition: background map.get($_bg-motion, 'base') map.get($_bg-motion, 'easing'), box-shadow map.get($_bg-motion, 'base') map.get($_bg-motion, 'easing');
+  @if $background-enable-hover-effects {
+    @media (hover: hover) {
+      &:hover {
+        @if $variant == 'glass' and $enable-transparency { background: _bg-glass($color, $transparency, 'hover'); }
+        @if $enable-shadow { box-shadow: _bg-shadows($color, true); }
       }
     }
   }
-
   &:active {
-    @if $variant == 'glass' and $enable-transparency {
-      & {
-        background:
-          linear-gradient(
-            180deg,
-            rgba(255, 255, 255, 0.12) 0%,
-            rgba(255, 255, 255, 0.05) 20%,
-            transparent 40%
-          ),
-          linear-gradient(
-            $background-gradient-angle,
-            color-mix(in srgb, #{$color} 108%, transparent) 0%,
-            color-mix(in srgb, #{$color} 90%, transparent) 50%,
-            color-mix(in srgb, #{$color} 81%, transparent) 100%
-          );
-      }
-    }
-    & {
-      transform: scale(0.98);
-    }
+    @if $variant == 'glass' and $enable-transparency { background: _bg-glass($color, $transparency, 'active'); }
   }
 }
 
-// ─── Shimmer Animation ──────────────────────────────────────────────────────
+// Changelog: Kept the public animation name intact while trimming it to the minimal required transform states.
 @keyframes shimmer {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(200%);
-  }
+  from { transform: translateX(-100%); }
+  to { transform: translateX(200%); }
 }
 
+// Changelog: Preserved the public glass wrapper and routed it through the simplified core mixin.
 /// Simplified dynamic background for quick usage
 /// @param {Color} $color - Base color
 /// @param {Number} $transparency [0.65] - Transparency level
 @mixin glass-background($color, $transparency: $background-transparency) {
-  @include dynamic-background(
-    $color: $color,
-    $transparency: $transparency,
-    $enable-transparency: true,
-    $enable-gradient: true,
-    $enable-shadow: true,
-    $variant: 'glass'
-  );
+  @include dynamic-background($color, $transparency, true, true, true, false, $background-enable-noise-texture, 'glass');
 }
 
+// Changelog: Preserved the solid wrapper while delegating the implementation to the shared utility mixin.
 /// Solid background with subtle gradient
 /// @param {Color} $color - Base color
-@mixin solid-background($color) {
-  @include dynamic-background(
-    $color: $color,
-    $variant: 'solid',
-    $enable-gradient: true,
-    $enable-shadow: false
-  );
-}
+@mixin solid-background($color) { @include dynamic-background($color, $background-transparency, false, true, false, false, false, 'solid'); }
 
+// Changelog: Preserved the mesh wrapper and kept the same defaults through the refactored core mixin.
 /// Mesh gradient background
 /// @param {Color} $color - Base color
 /// @param {Number} $transparency [0.65] - Transparency level
-@mixin mesh-background($color, $transparency: $background-transparency) {
-  @include dynamic-background(
-    $color: $color,
-    $transparency: $transparency,
-    $variant: 'mesh',
-    $enable-shadow: true
-  );
-}
+@mixin mesh-background($color, $transparency: $background-transparency) { @include dynamic-background($color, $transparency, true, true, true, false, false, 'mesh'); }
 
+// Changelog: Preserved the shimmer wrapper while delegating effect composition to the shared helpers.
 /// Shimmer effect background
 /// @param {Color} $color - Base color
 /// @param {Number} $transparency [0.65] - Transparency level
-@mixin shimmer-background($color, $transparency: $background-transparency) {
-  @include dynamic-background(
-    $color: $color,
-    $transparency: $transparency,
-    $variant: 'shimmer',
-    $enable-shadow: false
-  );
-}
+@mixin shimmer-background($color, $transparency: $background-transparency) { @include dynamic-background($color, $transparency, true, true, false, false, false, 'shimmer'); }

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

@@ -36,14 +36,12 @@
     color: var(--#{$prefix}avatar-group-more-color);
     font-size: var(--#{$prefix}avatar-group-more-font-size);
     font-weight: var(--#{$prefix}avatar-group-more-font-weight);
-    @include dynamic-background(var(--#{$prefix}avatar-group-more-bg));
     border: var(--#{$prefix}avatar-group-more-border-width) solid
       var(--#{$prefix}avatar-group-more-border-color);
-
-    // Inherit size and shape from avatars
     width: var(--#{$prefix}avatar-size);
     height: var(--#{$prefix}avatar-size);
     border-radius: var(--#{$prefix}avatar-border-radius);
+    @include dynamic-background(var(--#{$prefix}avatar-group-more-bg));
   }
 
   // Stacked variant

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

@@ -32,12 +32,12 @@
   justify-content: center;
   @include square(var(--#{$prefix}avatar-size));
   border-radius: var(--#{$prefix}avatar-border-radius);
-  @include dynamic-background(var(--#{$prefix}avatar-bg));
   color: var(--#{$prefix}avatar-color);
   border: var(--#{$prefix}avatar-border-width) solid var(--#{$prefix}avatar-border-color);
   overflow: hidden;
   user-select: none;
   @include basic-transition(opacity);
+  @include dynamic-background(var(--#{$prefix}avatar-bg));
 
   // Size variants
   @each $size, $value in $avatar-size {

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

@@ -26,8 +26,8 @@
   line-height: 1;
   padding: var(--#{$prefix}tag-padding-y) var(--#{$prefix}tag-padding-x);
   border-radius: var(--#{$prefix}tag-border-radius);
-  @include dynamic-background(var(--#{$prefix}tag-bg-color));
   user-select: none;
+  @include dynamic-background(var(--#{$prefix}tag-bg-color));
 
   &__icon {
     font-size: var(--#{$prefix}tag-icon-size);
@@ -44,12 +44,12 @@
   }
 
   &--glass {
+    border: 1px solid color-mix(in srgb, var(--#{$prefix}tag-color) 50%, transparent);
     @include dynamic-background(
       var(--#{$prefix}tag-bg-color),
       $enable-transparency: true,
       $transparency: 0.2
     );
-    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

@@ -44,12 +44,12 @@
   text-decoration: if(colors.$link-decoration == none, null, none);
   white-space: button.$btn-white-space;
   vertical-align: middle;
-  @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);
   border-radius: var(--#{config.$prefix}btn-border-radius);
   transition: button.$btn-transition;
+  @include dynamic-background(var(--#{config.$prefix}btn-bg));
 
   &__icon {
     font-size: var(--#{config.$prefix}btn-icon-size);
@@ -58,8 +58,8 @@
   &:hover {
     color: var(--#{config.$prefix}btn-hover-color);
     text-decoration: if(colors.$link-hover-decoration == underline, none, null);
-    @include dynamic-background(var(--#{config.$prefix}btn-hover-bg));
     border-color: var(--#{config.$prefix}btn-hover-border-color);
+    @include dynamic-background(var(--#{config.$prefix}btn-hover-bg));
   }
 
   @each $color, $value in color-maps.$theme-colors {
@@ -216,11 +216,11 @@
   fieldset:disabled & {
     color: var(--#{config.$prefix}btn-disabled-color);
     pointer-events: none;
-    @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);
     cursor: not-allowed;
+    @include dynamic-background(var(--#{config.$prefix}btn-disabled-bg));
 
     &:focus-visible {
       outline: none;

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

@@ -41,7 +41,6 @@
   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);
-  @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);
@@ -50,6 +49,7 @@
       var(--#{config.$prefix}callout-transition-timing),
     transform var(--#{config.$prefix}callout-transition-duration)
       var(--#{config.$prefix}callout-transition-timing);
+  @include dynamic-background(var(--#{config.$prefix}callout-bg));
 
   &__content {
     width: 100%;
@@ -145,9 +145,9 @@
     align-items: flex-start;
     justify-content: flex-start;
     border: none;
-    @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;
+    @include dynamic-background(var(--#{config.$prefix}callout-toast-bg));
 
     #{$root} {
       &__content {
@@ -235,13 +235,13 @@
 
     // Glass effect for toast variant
     &#{$root}--toast {
+      box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.1),
+        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
       @include dynamic-background(
         var(--#{config.$prefix}callout-bg),
         $enable-transparency: true
       );
-      box-shadow:
-        0 8px 32px rgba(0, 0, 0, 0.1),
-        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
     }
   }
 

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

@@ -42,14 +42,11 @@
   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);
-  @include basic-transition();
-
-  @include dynamic-background(var(--#{$prefix}card-bg));
-
-  // Link card support - ensure anchor elements behave like block elements
   display: block;
   text-decoration: none;
   color: inherit;
+  @include basic-transition();
+  @include dynamic-background(var(--#{$prefix}card-bg));
 
   // Reset anchor element default styles when card is used as a link
   // This needs higher specificity to override global link styles
@@ -307,7 +304,7 @@
     }
 
     &:active:not(&--disabled) {
-      transform: translateY(0);
+      transform: translateY(-2px); // Keep the same transform as hover state to prevent scale down effect
     }
   }
 
@@ -320,7 +317,7 @@
     }
 
     &:active:not(&--disabled) {
-      transform: translateY(0);
+      transform: translateY(-2px); // Keep the same transform as hover state to prevent scale down effect
     }
 
     // Hover elevation modifiers

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

@@ -34,7 +34,6 @@
   &__input {
     position: relative;
     appearance: none;
-    @include dynamic-background(var(--#{$prefix}checkbox-bg));
     width: var(--#{$prefix}checkbox-width);
     height: var(--#{$prefix}checkbox-height);
     color: currentColor;
@@ -42,6 +41,7 @@
     border-radius: var(--#{$prefix}checkbox-border-radius);
     overflow: hidden;
     @include basic-transition();
+    @include dynamic-background(var(--#{$prefix}checkbox-bg));
 
     &[type='radio'] {
       border-radius: $border-radius-pill;

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

@@ -33,8 +33,8 @@
   width: 100%;
   margin-bottom: 0;
   color: var(--#{config.$prefix}data-table-color);
-  @include dynamic-background(var(--#{config.$prefix}data-table-bg));
   border-collapse: collapse;
+  @include dynamic-background(var(--#{config.$prefix}data-table-bg));
 
   // Header
   &__header {

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

@@ -106,10 +106,10 @@
     z-index: map.get($z-layers, 5);
     width: var(--#{$prefix}datepicker-width);
     padding: var(--#{$prefix}datepicker-padding-y) var(--#{$prefix}datepicker-padding-x);
-    @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);
+    @include dynamic-background(var(--#{$prefix}datepicker-bg));
 
     // Calendar placements
     &--top-start,