@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/lib/utils/memoryMonitor.ts

@@ -1,6 +1,6 @@
 /**
  * Memory Monitoring Utilities
- * 
+ *
  * Detects memory leaks and tracks component lifecycle memory usage
  * Only available in development mode
  */
@@ -40,7 +40,7 @@ export function isMemoryMonitoringAvailable(): boolean {
 
 /**
  * Get current memory usage snapshot
- * 
+ *
  * @returns Memory snapshot or null if not available
  */
 export function getMemorySnapshot(): MemorySnapshot | null {
@@ -60,7 +60,7 @@ export function getMemorySnapshot(): MemorySnapshot | null {
 
 /**
  * Format bytes to human-readable string
- * 
+ *
  * @param bytes - Number of bytes
  * @returns Formatted string (e.g., "1.5 MB")
  */
@@ -76,7 +76,7 @@ export function formatBytes(bytes: number): string {
 
 /**
  * Compare two memory snapshots and detect potential leaks
- * 
+ *
  * @param before - Snapshot before operation
  * @param after - Snapshot after operation
  * @param threshold - Threshold in bytes to consider a leak (default: 5MB)
@@ -114,7 +114,7 @@ export function detectMemoryLeak(
 
 /**
  * Monitor memory usage over time
- * 
+ *
  * @param interval - Interval in milliseconds to check memory
  * @param callback - Callback function called with each snapshot
  * @returns Function to stop monitoring
@@ -156,7 +156,7 @@ export function monitorMemoryUsage(
 
 /**
  * Track component lifecycle memory usage
- * 
+ *
  * @param componentName - Name of the component
  * @returns Object with start and end tracking functions
  */
@@ -175,7 +175,10 @@ export function trackComponentMemory(componentName: string) {
       const after = getMemorySnapshot();
       if (before && after) {
         const leakInfo = detectMemoryLeak(before, after);
-        if (leakInfo.hasLeak && (typeof process === 'undefined' || process.env?.NODE_ENV === 'development')) {
+        if (
+          leakInfo.hasLeak &&
+          (typeof process === 'undefined' || process.env?.NODE_ENV === 'development')
+        ) {
           console.warn(
             `[Memory Monitor] Potential memory leak detected in ${componentName}:`,
             leakInfo
@@ -186,4 +189,3 @@ export function trackComponentMemory(componentName: string) {
     },
   };
 }
-

package/src/lib/utils/themeNaming.ts

@@ -1,6 +1,6 @@
 /**
  * Theme Naming Utility
- * 
+ *
  * Provides consistent naming conventions for CSS classes, CSS variables,
  * and JavaScript properties throughout the theme system.
  */
@@ -36,7 +36,7 @@ export class ThemeNaming {
    * @param str - String to convert
    */
   static kebabToCamel(str: string): string {
-    return str.replace(/-([a-z])/g, (g) => g[1]?.toUpperCase() ?? '');
+    return str.replace(/-([a-z])/g, g => g[1]?.toUpperCase() ?? '');
   }
 
   /**

package/src/styles/01-settings/_index.scss

@@ -64,4 +64,4 @@
 @forward './settings.typography';
 @forward './settings.upload';
 @forward './settings.video-player';
-@forward './settings.z-layers';
+@forward './settings.z-layers';

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

@@ -3,30 +3,51 @@
 @use './settings.config' as config;
 @use './settings.spacing' as *;
 @use './settings.colors' as *;
+@use './settings.typography' as *;
 
+// Accordion dimensions
 $accordion-width: 100% !default;
-$accordion-padding-x: map.get($spacing-sizes, 5) !default;
-$accordion-padding-y: map.get($spacing-sizes, 4) !default;
+$accordion-padding-x: map.get($spacing-sizes, 5) !default; //20px
+$accordion-padding-y: map.get($spacing-sizes, 4) !default; //16px
 
+// Accordion borders
 $accordion-border-width: calc(var(--#{config.$prefix}border-width) * 2) !default;
-$accordion-border-color: transparent !default;
+$accordion-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
 $accordion-border-radius: radius.$border-radius-sm !default;
 
+// Accordion body
 $accordion-body-padding-x: $accordion-padding-x !default;
-$accordion-body-padding-y: map.get($spacing-sizes, 2) !default;
+$accordion-body-padding-y: map.get($spacing-sizes, 2) !default; //8px
 $accordion-body-color: var(--#{config.$prefix}body-color) !default;
 $accordion-body-bg: var(--#{config.$prefix}body-bg) !default;
 
+// Accordion header
 $accordion-header-padding-x: $accordion-padding-x !default;
 $accordion-header-padding-y: $accordion-padding-y !default;
 $accordion-header-color: var(--#{config.$prefix}body-color) !default;
 $accordion-header-bg: var(--#{config.$prefix}body-bg) !default;
-
 $accordion-header-bg-hover: var(--#{config.$prefix}body-bg) !default;
+$accordion-header-font-size: $font-size-base !default;
+$accordion-header-font-weight: $font-weight-normal !default;
 
-$accordion-icon-size: map.get($spacing-sizes, 5) !default;
+// Accordion icon
+$accordion-icon-size: map.get($spacing-sizes, 5) !default; //20px
 $accordion-icon-color: var(--#{config.$prefix}body-color) !default;
-
 $accordion-icon-transform: 180deg !default;
 
+// Accordion states
 $accordion-disable-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
+$accordion-focus-border-color: var(--#{config.$prefix}focus-border-color) !default;
+
+// Accordion transitions
+$accordion-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !default;
+$accordion-panel-transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !default;
+
+// Accordion spacing
+$accordion-item-gap: 0px !default;
+$accordion-header-inner-gap: map.get($spacing-sizes, 2) !default; //8px
+
+// Enable features
+$accordion-enable-glass: true !default;
+$accordion-enable-smooth-scroll: true !default;
+$accordion-enable-focus-ring: true !default;

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

@@ -11,17 +11,17 @@ $black: #000000 !default;
 $color-contrast-dark: #000000 !default;
 $color-contrast-light: #ffffff !default;
 
-// Primitives Primary Colors
-$primary-1: #fff9e6 !default;
-$primary-2: #fff4cc !default; 
-$primary-3: #ffe699 !default; 
-$primary-4: #ffd966 !default; 
-$primary-5: #ffcc33 !default; 
-$primary-6: #ffb800 !default; // Balanced primary - main brand color (WCAG AA compliant)
-$primary-7: #e6a600 !default; 
-$primary-8: #cc9400 !default; 
-$primary-9: #b38200 !default; 
-$primary-10: #997000 !default; 
+// Primitives Primary Colors (Purple Scale)
+$primary-1: #f5f3ff !default;
+$primary-2: #ede9fe !default;
+$primary-3: #ddd6fe !default;
+$primary-4: #c4b5fd !default;
+$primary-5: #a78bfa !default;
+$primary-6: #8b5cf6 !default; // Balanced primary - main brand color (WCAG AA compliant)
+$primary-7: #7c3aed !default;
+$primary-8: #6d28d9 !default;
+$primary-9: #5b21b6 !default;
+$primary-10: #4c1d95 !default;
 
 // Primitives Red Colors
 $red-1: #fef2f2 !default;

package/src/styles/01-settings/_settings.design-tokens.scss

@@ -7,7 +7,6 @@
 @use 'settings.breakpoints' as breakpoints;
 @use 'settings.config' as config;
 
-
 // Color maps
 
 $theme-colors-text: (
@@ -23,7 +22,7 @@ $theme-colors-text: (
   'info': $info-text,
   'light': $light-text,
   'dark': $dark-text,
-  ) !default;
+) !default;
 
 $theme-colors-text-dark: (
   'primary': $primary-text-dark,
@@ -38,7 +37,7 @@ $theme-colors-text-dark: (
   'info': $info-text-dark,
   'light': $light-text-dark,
   'dark': $dark-text-dark,
-  ) !default;
+) !default;
 
 $theme-colors-bg-subtle: (
   'primary': $primary-bg,
@@ -52,7 +51,7 @@ $theme-colors-bg-subtle: (
   'info': $info-bg,
   'light': $light-bg,
   'dark': $dark-bg,
-  ) !default;
+) !default;
 
 $theme-colors-bg-subtle-dark: (
   'primary': $primary-bg-dark,
@@ -66,7 +65,7 @@ $theme-colors-bg-subtle-dark: (
   'info': $info-bg-dark,
   'light': $light-bg-dark,
   'dark': $dark-bg-dark,
-  ) !default;
+) !default;
 
 $theme-colors-border-subtle: (
   'primary': $primary-border,
@@ -78,7 +77,7 @@ $theme-colors-border-subtle: (
   'brand': $brand-border,
   'light': $light-border,
   'dark': $dark-border,
-  ) !default;
+) !default;
 
 $theme-colors-border-subtle-dark: (
   'primary': $primary-border-dark,
@@ -90,7 +89,7 @@ $theme-colors-border-subtle-dark: (
   'brand': $brand-border-dark,
   'light': $light-border-dark,
   'dark': $dark-border-dark,
-  ) !default;
+) !default;
 
 // Main theme colors map
 $theme-colors: (
@@ -102,7 +101,7 @@ $theme-colors: (
   'error': $error,
   'light': $light,
   'dark': $dark,
-  ) !default;
+) !default;
 
 $theme-colors-dark: (
   'primary': $primary-dark,
@@ -113,7 +112,7 @@ $theme-colors-dark: (
   'success': $success-dark,
   'warning': $warning-dark,
   'info': $info-dark,
-  ) !default;
+) !default;
 
 $theme-colors-hover: (
   'primary': $primary-hover,
@@ -124,7 +123,7 @@ $theme-colors-hover: (
   'success': $success-hover,
   'warning': $warning-hover,
   'info': $info-hover,
-  ) !default;
+) !default;
 
 $theme-colors-hover-dark: (
   'primary': $primary-hover-dark,
@@ -135,7 +134,7 @@ $theme-colors-hover-dark: (
   'success': $success-hover-dark,
   'warning': $warning-hover-dark,
   'info': $info-hover-dark,
-  ) !default;
+) !default;
 
 $grays: (
   '1': $gray-1,
@@ -148,7 +147,7 @@ $grays: (
   '8': $gray-8,
   '9': $gray-9,
   '10': $gray-10,
-  ) !default;
+) !default;
 
 $primarys: (
   '1': $primary-1,
@@ -161,7 +160,7 @@ $primarys: (
   '8': $primary-8,
   '9': $primary-9,
   '10': $primary-10,
-  ) !default;
+) !default;
 
 // Typography Maps
 
@@ -177,7 +176,7 @@ $theme-font-size: (
   'h4': $h4-font-size,
   'h5': $h5-font-size,
   'h6': $h6-font-size,
-  ) !default;
+) !default;
 
 $theme-font-weight: (
   'light': $font-weight-light,
@@ -187,7 +186,7 @@ $theme-font-weight: (
   'bold': $font-weight-bold,
   'heavy': $font-weight-heavy,
   'black': $font-weight-black,
-  ) !default;
+) !default;
 
 // Utilities maps
 //
@@ -202,11 +201,14 @@ $theme-font-weight: (
 
 $utilities-colors: $theme-colors !default;
 
-$utilities-text-colors: map.merge($utilities-colors,
-    ('black': $black,
-      'white': $white,
-      'body': $body-color,
-    )) !default;
+$utilities-text-colors: map.merge(
+  $utilities-colors,
+  (
+    'black': $black,
+    'white': $white,
+    'body': $body-color,
+  )
+) !default;
 
 $utilities-text-emphasis-colors: (
   'primary-emphasis': var(--#{config.$prefix}primary-text-emphasis),
@@ -221,14 +223,17 @@ $utilities-text-emphasis-colors: (
   'error-emphasis': var(--#{config.$prefix}error-text-emphasis),
   'light-emphasis': var(--#{config.$prefix}light-text-emphasis),
   'dark-emphasis': var(--#{config.$prefix}dark-text-emphasis),
-  ) !default;
+) !default;
 
 // scss-docs-start utilities-bg-colors
-$utilities-bg-colors: map.merge($utilities-colors,
-    ('black': $black,
-      'white': $white,
-      'body': var(--#{config.$prefix}body-bg),
-    )) !default;
+$utilities-bg-colors: map.merge(
+  $utilities-colors,
+  (
+    'black': $black,
+    'white': $white,
+    'body': var(--#{config.$prefix}body-bg),
+  )
+) !default;
 
 $utilities-bg-subtle: (
   'primary-subtle': var(--#{config.$prefix}primary-bg-subtle),
@@ -242,13 +247,16 @@ $utilities-bg-subtle: (
   'error-subtle': var(--#{config.$prefix}error-bg-subtle),
   'light-subtle': var(--#{config.$prefix}light-bg-subtle),
   'dark-subtle': var(--#{config.$prefix}dark-bg-subtle),
-  ) !default;
+) !default;
 
 // scss-docs-start utilities-border-colors
-$utilities-border-colors: map.merge($utilities-colors,
-    ('black': $black,
-      'white': $white,
-    )) !default;
+$utilities-border-colors: map.merge(
+  $utilities-colors,
+  (
+    'black': $black,
+    'white': $white,
+  )
+) !default;
 
 $utilities-border-subtle: (
   'primary-subtle': var(--#{config.$prefix}primary-border-subtle),
@@ -260,13 +268,16 @@ $utilities-border-subtle: (
   'brand-subtle': var(--#{config.$prefix}brand-border-subtle),
   'light-subtle': var(--#{config.$prefix}light-border-subtle),
   'dark-subtle': var(--#{config.$prefix}dark-border-subtle),
-  ) !default;
+) !default;
 
 // scss-docs-start utilities-links-underline
-$utilities-links-underline: map.merge($utilities-colors,
-    ('black': $black,
-      'white': $white,
-    )) !default;
+$utilities-links-underline: map.merge(
+  $utilities-colors,
+  (
+    'black': $black,
+    'white': $white,
+  )
+) !default;
 
 $shadows: (
   'shadow': var(--#{config.$prefix}box-shadow),
@@ -275,7 +286,7 @@ $shadows: (
   'shadow-lg': var(--#{config.$prefix}box-shadow-lg),
   'shadow-xl': var(--#{config.$prefix}box-shadow-xl),
   'shadow-inset': var(--#{config.$prefix}box-shadow-inset),
-  ) !default;
+) !default;
 
 $shadows-dark: (
   'shadow': var(--#{config.$prefix}box-shadow-dark),
@@ -284,7 +295,7 @@ $shadows-dark: (
   'shadow-lg': var(--#{config.$prefix}box-shadow-lg-dark),
   'shadow-xl': var(--#{config.$prefix}box-shadow-xl-dark),
   'shadow-inset': var(--#{config.$prefix}box-shadow-inset-dark),
-  ) !default;
+) !default;
 
 $gradient-colors: (
   'primary': $gradient-primary,
@@ -321,7 +332,7 @@ $reds: (
   '8': $red-8,
   '9': $red-9,
   '10': $red-10,
-  ) !default;
+) !default;
 
 // Green scale (1-10)
 $greens: (
@@ -335,7 +346,7 @@ $greens: (
   '8': $green-8,
   '9': $green-9,
   '10': $green-10,
-  ) !default;
+) !default;
 
 // Blue scale (1-10)
 $blues: (
@@ -349,7 +360,7 @@ $blues: (
   '8': $blue-8,
   '9': $blue-9,
   '10': $blue-10,
-  ) !default;
+) !default;
 
 // Yellow scale (1-10)
 $yellows: (
@@ -363,14 +374,14 @@ $yellows: (
   '8': $yellow-8,
   '9': $yellow-9,
   '10': $yellow-10,
-  ) !default;
+) !default;
 
 // Line Height Maps
 $line-heights: (
   'base': $line-height-base,
   'sm': $line-height-sm,
   'lg': $line-height-lg,
-  ) !default;
+) !default;
 
 // Extended Font Size Map
 $font-sizes-extended: (
@@ -388,7 +399,7 @@ $font-sizes-extended: (
   'h5': $h5-font-size,
   'h6': $h6-font-size,
   'display-1': $display-1,
-  ) !default;
+) !default;
 
 // Letter Spacing Map
 $letter-spacings: (
@@ -398,33 +409,33 @@ $letter-spacings: (
   'h4': $h4-letter-spaceing,
   'h5': $h5-letter-spaceing,
   'h6': $h6-letter-spaceing,
-  ) !default;
+) !default;
 
 // Transition & Animation Maps
 $transitions: (
   'fast': animations.$transition-fast,
   'base': animations.$transition-base,
   'slow': animations.$transition-slow,
-  ) !default;
+) !default;
 
 $transition-durations: (
   'fast': 0.15s,
   'base': 0.3s,
   'slow': 0.5s,
   'slower': 0.7s,
-  ) !default;
+) !default;
 
 $easings: (
   'base': animations.$easing,
   'ease-in-out': cubic-bezier(0.4, 0, 0.2, 1),
-  'ease-out': cubic-bezier(0.0, 0, 0.2, 1),
+  'ease-out': cubic-bezier(0, 0, 0.2, 1),
   'ease-in': cubic-bezier(0.4, 0, 1, 1),
   'ease-linear': linear,
-  ) !default;
+) !default;
 
 // Focus Ring Tokens
 $focus-ring: (
   'width': 3px,
   'offset': 2px,
   'opacity': 0.25,
-  ) !default;
+) !default;

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

@@ -24,7 +24,7 @@ $navbar-brand-font-weight: $font-weight-bold !default;
 $navbar-brand-color: var(--#{$prefix}body-color) !default;
 
 // Mobile toggler
-$navbar-toggler-size: 2rem !default; 
+$navbar-toggler-size: 2rem !default;
 $navbar-toggler-color: var(--#{$prefix}body-color) !default;
 $navbar-toggler-bg: transparent !default;
 $navbar-toggler-border: 0 !default;

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

@@ -71,11 +71,10 @@ $spacing-sizes: (
   //320px
   90: 22.5rem,
   //360px
-  200: 50rem,
-  //800px
-  ) !default;
+  200: 50rem, //800px
+) !default;
 
 $spacing-important: false !default;
 $enable-negative-margins: false !default;
 
-$negative-spacers: if($enable-negative-margins, negativify-map($spacing-sizes), null) !default;
+$negative-spacers: if($enable-negative-margins, negativify-map($spacing-sizes), null) !default;

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

@@ -18,4 +18,4 @@ $tooltip-border-width: null !default;
 $tooltip-border-color: null !default;
 $tooltip-box-shadow: null !default;
 
-$tooltip-arrow-size: map.get($spacing-sizes, 3) !default; //12px
+$tooltip-arrow-size: map.get($spacing-sizes, 3) !default; //12px

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

@@ -3,7 +3,7 @@
 // Font, line-height, and color for body text, headings, and more.
 
 // Font stacks with appropriate fallbacks
-$Roboto: 'Roboto', sans-serif !default;
+$roboto: 'Roboto', sans-serif !default;
 
 $helvetica-neue:
   'Helvetica Neue',
@@ -26,11 +26,11 @@ $system-font-stack:
   Arial,
   sans-serif !default;
 
-$font-family-base: $Roboto !default;
-$font-family-sans-serif: $Roboto !default;
+$font-family-base: $roboto !default;
+$font-family-sans-serif: $roboto !default;
 $font-family-monospace:
   SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
-$headings-font-family: $Roboto !default;
+$headings-font-family: $roboto !default;
 
 $font-weight-light: 300 !default;
 $font-weight-normal: 400 !default;

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

@@ -33,11 +33,23 @@
   --#{config.$prefix}btn-bg: var(--#{config.$prefix}#{$color}, #{$background});
   --#{config.$prefix}btn-border-color: var(--#{config.$prefix}#{$color}, #{$border});
   --#{config.$prefix}btn-hover-color: #{$btn-text-hover-color};
-  --#{config.$prefix}btn-hover-bg: var(--#{config.$prefix}#{$color}-hover, #{color.scale($background, $lightness: -15%)});
-  --#{config.$prefix}btn-hover-border-color: var(--#{config.$prefix}#{$color}-hover, #{color.scale($border, $lightness: -10%)});
+  --#{config.$prefix}btn-hover-bg: var(
+    --#{config.$prefix}#{$color}-hover,
+    #{color.scale($background, $lightness: -15%)}
+  );
+  --#{config.$prefix}btn-hover-border-color: var(
+    --#{config.$prefix}#{$color}-hover,
+    #{color.scale($border, $lightness: -10%)}
+  );
   --#{config.$prefix}btn-active-color: var(--#{config.$prefix}white, #{colors.$white});
-  --#{config.$prefix}btn-active-bg: var(--#{config.$prefix}#{$color}-hover, #{color.scale($background, $lightness: -20%)});
-  --#{config.$prefix}btn-active-border-color: var(--#{config.$prefix}#{$color}-hover, #{color.scale($border, $lightness: -25%)});
+  --#{config.$prefix}btn-active-bg: var(
+    --#{config.$prefix}#{$color}-hover,
+    #{color.scale($background, $lightness: -20%)}
+  );
+  --#{config.$prefix}btn-active-border-color: var(
+    --#{config.$prefix}#{$color}-hover,
+    #{color.scale($border, $lightness: -25%)}
+  );
   --#{config.$prefix}btn-disabled-color: var(--#{config.$prefix}white, #{colors.$white});
   --#{config.$prefix}btn-disabled-bg: var(--#{config.$prefix}#{$color}, #{$background});
   --#{config.$prefix}btn-disabled-border-color: var(--#{config.$prefix}#{$color}, #{$border});
@@ -54,34 +66,52 @@
 ) {
   $btn-color: var(--#{config.$prefix}#{$color}, #{map.get(tokens.$theme-colors, $color)});
   $btn-hover-color: if(
-    $color-hover, 
-    var(--#{config.$prefix}#{$color-hover}, #{map.get(tokens.$theme-colors, $color-hover)}), 
+    $color-hover,
+    var(--#{config.$prefix}#{$color-hover}, #{map.get(tokens.$theme-colors, $color-hover)}),
     var(--#{config.$prefix}white, #{colors.$white})
   );
   $btn-hover-bg: if(
-    $hover-background, 
-    var(--#{config.$prefix}#{$hover-background}, #{map.get(tokens.$theme-colors, $hover-background)}), 
-    var(--#{config.$prefix}#{$color}-hover, #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -15%)})
+    $hover-background,
+    var(
+      --#{config.$prefix}#{$hover-background},
+      #{map.get(tokens.$theme-colors, $hover-background)}
+    ),
+    var(
+      --#{config.$prefix}#{$color}-hover,
+      #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -15%)}
+    )
   );
   $btn-hover-border: if(
-    $hover-border, 
-    var(--#{config.$prefix}#{$hover-border}, #{map.get(tokens.$theme-colors, $hover-border)}), 
-    var(--#{config.$prefix}#{$color}-hover, #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -10%)})
+    $hover-border,
+    var(--#{config.$prefix}#{$hover-border}, #{map.get(tokens.$theme-colors, $hover-border)}),
+    var(
+      --#{config.$prefix}#{$color}-hover,
+      #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -10%)}
+    )
   );
   $btn-active-color: if(
-    $color-hover, 
-    var(--#{config.$prefix}#{$color-hover}, #{map.get(tokens.$theme-colors, $color-hover)}), 
+    $color-hover,
+    var(--#{config.$prefix}#{$color-hover}, #{map.get(tokens.$theme-colors, $color-hover)}),
     var(--#{config.$prefix}white, #{colors.$white})
   );
   $btn-active-bg: if(
-    $active-background, 
-    var(--#{config.$prefix}#{$active-background}, #{map.get(tokens.$theme-colors, $active-background)}), 
-    var(--#{config.$prefix}#{$color}-hover, #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -20%)})
+    $active-background,
+    var(
+      --#{config.$prefix}#{$active-background},
+      #{map.get(tokens.$theme-colors, $active-background)}
+    ),
+    var(
+      --#{config.$prefix}#{$color}-hover,
+      #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -20%)}
+    )
   );
   $btn-active-border: if(
-    $active-border, 
-    var(--#{config.$prefix}#{$active-border}, #{map.get(tokens.$theme-colors, $active-border)}), 
-    var(--#{config.$prefix}#{$color}-hover, #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -25%)})
+    $active-border,
+    var(--#{config.$prefix}#{$active-border}, #{map.get(tokens.$theme-colors, $active-border)}),
+    var(
+      --#{config.$prefix}#{$color}-hover,
+      #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -25%)}
+    )
   );
 
   --#{config.$prefix}btn-color: #{$btn-color};
@@ -104,4 +134,4 @@
   --#{config.$prefix}btn-padding-x: #{$padding-x};
   --#{config.$prefix}btn-font-size: #{$font-size};
   --#{config.$prefix}btn-border-radius: #{$border-radius};
-}
+}