@shohojdhara/atomix 0.5.4 → 0.5.6

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

@@ -1,75 +1,159 @@
-@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 '../02-tools/tools.to-rgb' as *;
+@use '../01-settings/settings.colors' 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)
+/// @param {Boolean} $enable-transparency [true] - Enable transparency effects
+/// @param {Boolean} $enable-gradient [true] - Enable gradient overlay
+/// @param {Boolean} $enable-shadow [true] - Enable shadow layers
+/// @param {Boolean} $enable-border [false] - Enable border gradient
+/// @param {Boolean} $enable-noise [false] - Enable noise texture
+/// @param {String} $variant ['glass'] - Variant: 'glass', 'solid', 'mesh', 'shimmer'
 @mixin dynamic-background(
   $color,
   $transparency: $background-transparency,
-  $background-transparency-enable: $background-transparency-enable
+  $enable-transparency: $background-transparency-enable,
+  $enable-gradient: $background-enable-gradient-overlay,
+  $enable-shadow: $background-enable-with-shadow,
+  $enable-border: false,
+  $enable-noise: $background-enable-noise-texture,
+  $variant: 'glass'
 ) {
-  // Validate inputs
-  @if $transparency < 0 or $transparency > 1 {
-    @error 'Transparency must be between 0 and 1, got #{$transparency}';
-  }
-
-  // Apply background based on transparency settings
-  @if $background-transparency-enable and $transparency > 0 {
-    @if $background-enable-gradient-overlay {
-      background:
-        // Top highlight layer
-        linear-gradient(
-          135deg,
-          rgba(255, 255, 255, 0.15) 0%,
-          rgba(255, 255, 255, 0.05) 25%,
-          transparent 50%
-        ),
-        // Main liquid glass layer
-        linear-gradient(
-            to bottom,
-            color-mix(in srgb, #{$color} #{math.percentage($transparency * 1.2)}, transparent) 0%,
-            color-mix(in srgb, #{$color} #{math.percentage($transparency)}, transparent) 35%,
-            color-mix(in srgb, #{$color} #{math.percentage($transparency * 0.8)}, transparent) 65%,
-            color-mix(in srgb, #{$color} #{math.percentage($transparency * 1.1)}, transparent) 100%
-          ),
-        // Bottom shadow layer
-        radial-gradient(
-            ellipse at bottom,
-            color-mix(in srgb, #{$color} #{math.percentage($transparency * 0.3)}, transparent) 0%,
-            transparent 70%
-          );
+  position: relative;
+  isolation: isolate;
+  @if $variant == 'glass' {
+    @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-mix(
-        in srgb,
-        #{$color} #{math.percentage($transparency)},
-        transparent
-      );
+      background-color: $color;
     }
-  } @else {
-    background-color: $color;
+    @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();
   }
-
-  @if $background-enable-with-shadow {
-    box-shadow:
-      var(--atomix-box-shadow-inset),
-      // Inner glow
-      // inset
-      //   0
-      //   1px
-      //   0
-      //   rgba(255, 255, 255, 0.25),
-      // inset 0 -1px 0 color-mix(in srgb, #{$color} 10%, transparent),
-      // Outer depth
-      4px
-        8px
-        32px
-        color-mix(in srgb, #{$color} 20%, transparent),
-      0 1px 2px rgba(0, 0, 0, 0.1),
-      0 8px 20px color-mix(in srgb, #{$color} 20%, transparent),
-      0 1px 2px rgba(0, 0, 0, 0.1);
+  @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: _bg-glass($color, $transparency, 'active'); }
   }
 }
+
+// Changelog: Kept the public animation name intact while trimming it to the minimal required transform states.
+@keyframes shimmer {
+  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, $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, $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, $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, $transparency, true, true, false, false, false, 'shimmer'); }

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

@@ -146,13 +146,13 @@
       #{$root}__header {
         @include dynamic-background(
           var(--#{config.$prefix}accordion-header-bg),
-          $background-transparency-enable: true
+          $enable-transparency: true
         );
       }
       #{$root}__body {
         @include dynamic-background(
           var(--#{config.$prefix}accordion-header-bg),
-          $background-transparency-enable: true
+          $enable-transparency: true
         );
       }
     }

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

@@ -46,7 +46,7 @@
   &--glass {
     @include dynamic-background(
       var(--#{$prefix}tag-bg-color),
-      $background-transparency-enable: true,
+      $enable-transparency: true,
       $transparency: 0.2
     );
     border: 1px solid color-mix(in srgb, var(--#{$prefix}tag-color) 50%, transparent);

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

@@ -231,13 +231,13 @@
   &--glass {
     @include dynamic-background(
       var(--#{config.$prefix}btn-bg),
-      $background-transparency-enable: true
+      $enable-transparency: true
     );
 
     &:hover {
       @include dynamic-background(
         var(--#{config.$prefix}btn-hover-bg),
-        $background-transparency-enable: true
+        $enable-transparency: true
       );
     }
   }

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

@@ -220,7 +220,7 @@
       width: 100%;
       @include dynamic-background(
         var(--#{config.$prefix}callout-bg),
-        $background-transparency-enable: true
+        $enable-transparency: true
       );
     }
 
@@ -237,7 +237,7 @@
     &#{$root}--toast {
       @include dynamic-background(
         var(--#{config.$prefix}callout-bg),
-        $background-transparency-enable: true
+        $enable-transparency: true
       );
       box-shadow:
         0 8px 32px rgba(0, 0, 0, 0.1),

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

@@ -222,7 +222,7 @@
 
   &--glass {
     max-width: none;
-    @include dynamic-background(var(--#{$prefix}card-bg), $background-transparency-enable: true);
+    @include dynamic-background(var(--#{$prefix}card-bg), $enable-transparency: true);
   }
 
   &--outlined {
@@ -307,7 +307,7 @@
     }
 
     &:active:not(&--disabled) {
-      transform: translateY(0);
+      transform: translateY(-2px); // Keep the same transform as hover state to prevent scale down effect
     }
   }
 
@@ -320,7 +320,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.dropdown.scss

@@ -194,7 +194,7 @@
     &--glass {
       @include dynamic-background(
         var(--#{$prefix}dropdown-bg),
-        $background-transparency-enable: true
+        $enable-transparency: true
       );
       box-shadow: var(--#{$prefix}dropdown-box-shadow);
     }

package/src/styles/06-components/_components.dynamic-background.scss

@@ -0,0 +1,69 @@
+@use '../../styles/01-settings/settings.colors' as *;
+@use '../../styles/01-settings/settings.background' as *;
+@use '../../styles/02-tools/tools.background' as *;
+
+.c-dynamic-background {
+  // Base styles
+  min-height: 200px;
+  border-radius: 16px;
+  
+  // Glass variant (default)
+  &--glass {
+    @include glass-background($primary-6, $background-transparency);
+  }
+  
+  // Solid variant
+  &--solid {
+    @include solid-background($primary-6);
+  }
+  
+  // Mesh variant
+  &--mesh {
+    @include mesh-background($primary-6, $background-transparency);
+  }
+  
+  // Shimmer variant
+  &--shimmer {
+    @include shimmer-background($primary-6, $background-transparency);
+  }
+  
+  // Border modifier
+  &--with-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 modifier
+  &--with-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;
+    }
+  }
+}

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

@@ -373,7 +373,7 @@
     transition: opacity 0.3s ease;
     @include dynamic-background(
       var(--#{$prefix}edge-panel-bg),
-      $background-transparency-enable: true
+      $enable-transparency: true
     );
   }
 
@@ -406,7 +406,7 @@
   .c-edge-panel__backdrop {
     @include dynamic-background(
       var(--#{$prefix}edge-panel-backdrop-bg),
-      $background-transparency-enable: true
+      $enable-transparency: true
     );
     animation: fadeIn 0.3s ease forwards;
     z-index: map.get($z-layers, 1);

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

@@ -108,7 +108,7 @@
 
   // Glass morphism effect styles
   &--glass {
-    @include dynamic-background(var(--#{$prefix}input-bg), $background-transparency-enable: true);
+    @include dynamic-background(var(--#{$prefix}input-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;
@@ -118,7 +118,7 @@
     &:hover {
       @include dynamic-background(
         var(--#{$prefix}input-bg),
-        $background-transparency-enable: true,
+        $enable-transparency: true,
         $transparency: 0.9
       );
     }
@@ -130,7 +130,7 @@
     // Glass disabled state
     &:disabled,
     &.is-disabled {
-      @include dynamic-background(var(--#{$prefix}input-bg), $background-transparency-enable: true);
+      @include dynamic-background(var(--#{$prefix}input-bg), $enable-transparency: true);
       opacity: 0.6;
     }
   }

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

@@ -348,7 +348,7 @@
       padding: rem.rem(8px);
       @include dynamic-background(
         var(--#{config.$prefix}body-bg),
-        $background-transparency-enable: true,
+        $enable-transparency: true,
         $transparency: 0.15
       );
     }
@@ -357,7 +357,7 @@
     #{$root}__text {
       @include dynamic-background(
         var(--#{config.$prefix}body-bg),
-        $background-transparency-enable: true
+        $enable-transparency: true
       );
       backdrop-filter: blur(8px);
       border: 1px solid rgba(255, 255, 255, 0.2);
@@ -369,7 +369,7 @@
       #{$root}__text {
         @include dynamic-background(
           var(--#{config.$prefix}brand-bg-subtle),
-          $background-transparency-enable: true
+          $enable-transparency: true
         );
         border: 1px solid rgba(var(--#{config.$prefix}primary-rgb), 0.3);
         backdrop-filter: blur(8px);
@@ -378,7 +378,7 @@
       #{$root}__file {
         @include dynamic-background(
           var(--#{config.$prefix}brand-bg-subtle),
-          $background-transparency-enable: true
+          $enable-transparency: true
         );
         border: 1px solid rgba(var(--#{config.$prefix}primary-rgb), 0.3);
         backdrop-filter: blur(8px);
@@ -389,7 +389,7 @@
     #{$root}__file {
       @include dynamic-background(
         var(--#{config.$prefix}brand-bg-subtle),
-        $background-transparency-enable: true
+        $enable-transparency: true
       );
       border: 1px solid rgba(var(--#{config.$prefix}primary-rgb), 0.3);
       backdrop-filter: blur(8px);
@@ -400,7 +400,7 @@
     #{$root}__file-icon {
       @include dynamic-background(
         var(--#{config.$prefix}brand-bg-subtle),
-        $background-transparency-enable: true
+        $enable-transparency: true
       );
       backdrop-filter: blur(8px);
       border: 1px solid rgba(255, 255, 255, 0.15);

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

@@ -146,7 +146,7 @@
       &__content {
         @include dynamic-background(
           var(--#{config.$prefix}modal-content-bg),
-          $background-transparency-enable: true
+          $enable-transparency: true
         );
         box-shadow: none;
         border-radius: inherit;

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

@@ -252,7 +252,7 @@
   &--glass {
     position: relative;
     background-color: transparent;
-    @include dynamic-background(var(--#{$prefix}navbar-bg), $background-transparency-enable: true);
+    @include dynamic-background(var(--#{$prefix}navbar-bg), $enable-transparency: true);
   }
 
   &--fixed-bottom {

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

@@ -96,7 +96,7 @@
     #{$root}__content-inner {
       @include dynamic-background(
         var(--#{$prefix}popover-bg),
-        $background-transparency-enable: true
+        $enable-transparency: true
       );
       box-shadow: none;
     }

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

@@ -106,7 +106,7 @@
     #{$root}__switch {
       @include dynamic-background(
         var(--#{$prefix}toggle-switch-bg),
-        $background-transparency-enable: true
+        $enable-transparency: true
       );
 
       &::before {

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

@@ -87,21 +87,21 @@
     #{$root}__content {
       @include dynamic-background(
         var(--#{$prefix}tooltip-bg),
-        $background-transparency-enable: true,
+        $enable-transparency: true,
         $transparency: 0.3
       );
     }
     #{$root}__arrow {
       @include dynamic-background(
         var(--#{$prefix}tooltip-bg),
-        $background-transparency-enable: true,
+        $enable-transparency: true,
         $transparency: 0.3
       );
     }
     #{$root}__arrow {
       @include dynamic-background(
         var(--#{$prefix}tooltip-bg),
-        $background-transparency-enable: true,
+        $enable-transparency: true,
         $transparency: 0.3
       );
     }

package/src/styles/06-components/_index.scss

@@ -16,6 +16,7 @@
 @forward 'components.countdown';
 @forward 'components.data-table';
 @forward 'components.dropdown';
+@forward 'components.dynamic-background';
 @forward 'components.edge-panel';
 @forward 'components.footer';
 @forward 'components.form';

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

@@ -64,12 +64,11 @@ $utilities-link: (
 $enable-important-utilities: true !default;
 $link-shade-percentage: 15% !default;
 
-// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in color-maps.$theme-colors {
   .u-link-#{$color} {
-    color: RGBA(var(--#{config.$prefix}#{$color}-rgb), var(--#{config.$prefix}u-link-opacity, 1))
+    color: rgba(var(--#{config.$prefix}#{$color}-rgb), var(--#{config.$prefix}u-link-opacity, 1))
       if($enable-important-utilities, !important, null);
-    text-decoration-color: RGBA(
+    text-decoration-color: rgba(
         var(--#{config.$prefix}#{$color}-rgb),
         var(--#{config.$prefix}u-link-underline-opacity, 1)
       )
@@ -83,9 +82,9 @@ $link-shade-percentage: 15% !default;
           shade-color($value, $link-shade-percentage),
           tint-color($value, $link-shade-percentage)
         );
-        color: RGBA(#{to-rgb($hover-color)}, var(--#{config.$prefix}u-link-opacity, 1))
+        color: rgba(#{to-rgb($hover-color)}, var(--#{config.$prefix}u-link-opacity, 1))
           if($enable-important-utilities, !important, null);
-        text-decoration-color: RGBA(
+        text-decoration-color: rgba(
             #{to-rgb($hover-color)},
             var(--#{config.$prefix}u-link-underline-opacity, 1)
           )