@shohojdhara/atomix 0.3.15 → 0.4.0

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

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

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

@@ -13,15 +13,15 @@ $color-contrast-light: #ffffff !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-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; 
+$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

@@ -92,4 +92,4 @@ $h5-letter-spaceing: -0.5px !default;
 $h6-letter-spaceing: -0.5px !default;
 
 $paragraph-margin-bottom: 0 !default;
-$body-text-align: null !default;
+$body-text-align: null !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};
-}
+}

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

@@ -11,6 +11,7 @@
 @use 'sass:meta';
 @use '../01-settings/settings.config' as *;
 @use '../01-settings/settings.breakpoints' as *;
+@use 'tools.breakpoints' as *;
 
 // Default config for utilities
 $utility-defaults: (
@@ -62,9 +63,10 @@ $utility-defaults: (
 
     @if map.get($utility, class) == null {
       // Generate class with property name as class
+      // Responsive infix goes between prefix and value: .u-prefix-{bp}-{value}
       $class-name: if(
         $key,
-        '#{$property-class}-#{$escaped-key}#{$local-infix}',
+        '#{$property-class}#{$local-infix}-#{$escaped-key}',
         '#{$property-class}#{$local-infix}'
       );
 
@@ -77,13 +79,15 @@ $utility-defaults: (
           @each $property in $properties {
             #{$property}: $value if(map.get($utility, rtl), null, !important);
           }
-        } @else {
+        } @else if $value != null {
+          // Guard: only emit property declaration if value is not null
           #{$property-class}: $value if(map.get($utility, rtl), null, !important);
         }
-        
+
         // Add local CSS variables if specified
-        @if map.get($utility, local-vars) {
-          @each $local-var-name, $local-var-value in map.get($utility, local-vars) {
+        $local-vars: map.get($utility, local-vars);
+        @if $local-vars and list.length($local-vars) > 0 {
+          @each $local-var-name, $local-var-value in $local-vars {
             --#{$local-var-name}: #{$local-var-value};
           }
         }
@@ -93,6 +97,7 @@ $utility-defaults: (
       $base-class: map.get($utility, class);
       $modifier: if($key, '-#{$escaped-key}', '');
 
+      // Responsive infix goes between class and modifier: .u-class-{bp}-{value}
       .#{$base-class}#{$local-infix}#{$modifier} {
         @if $css-var and $properties {
           // Handle CSS variable generation with properties
@@ -108,13 +113,15 @@ $utility-defaults: (
           @each $property in $properties {
             #{$property}: $value if(map.get($utility, rtl), null, !important);
           }
-        } @else {
+        } @else if $value != null {
+          // Guard: only emit property declaration if value is not null
           #{$base-class}: $value if(map.get($utility, rtl), null, !important);
         }
-        
+
         // Add local CSS variables if specified
-        @if map.get($utility, local-vars) {
-          @each $local-var-name, $local-var-value in map.get($utility, local-vars) {
+        $local-vars: map.get($utility, local-vars);
+        @if $local-vars and list.length($local-vars) > 0 {
+          @each $local-var-name, $local-var-value in $local-vars {
             --#{$local-var-name}: #{$local-var-value};
           }
         }
@@ -129,7 +136,7 @@ $utility-defaults: (
 
   @if $responsive {
     @each $breakpoint in map.keys($breakpoints) {
-      $infix: call($breakpoint-infix-generator, $breakpoint);
+      $infix: meta.call($breakpoint-infix-generator, $breakpoint);
 
       @include media-breakpoint-up($breakpoint) {
         @include generate-utility($utility, $infix);
@@ -147,11 +154,9 @@ $utility-defaults: (
   $breakpoint-infix-generator: null
 ) {
   // Set default breakpoint infix generator if not provided
-  $breakpoint-infix-generator: if(
-    $breakpoint-infix-generator,
-    $breakpoint-infix-generator,
-    get-breakpoint-infix
-  );
+  @if not $breakpoint-infix-generator {
+    $breakpoint-infix-generator: meta.get-function('breakpoint-infix');
+  }
 
   @each $utility, $config in $utilities {
     // Merge default config
@@ -167,6 +172,7 @@ $utility-defaults: (
         rtl: map.get($config, rtl),
         css-var: map.get($config, css-var),
         local-vars: map.get($config, local-vars),
+        responsive: map.get($config, responsive),
       );
 
       @include generate-responsive-utilities(
@@ -174,14 +180,20 @@ $utility-defaults: (
         $breakpoints,
         $breakpoint-infix-generator
       );
+
+      // Generate print utilities if requested
+      @if map.get($config, print) == true {
+        @media print {
+          @include generate-utility($utility-map);
+        }
+      }
     }
   }
 }
 
 // Helper function to get breakpoint infix
-@function get-breakpoint-infix($breakpoint) {
-  @return if($breakpoint == null, '', '-#{$breakpoint}');
-}
+// Uses breakpoint-infix from _tools.breakpoints.scss
+// Returns '' for the smallest breakpoint (xs), '-sm', '-md', etc. for others
 
 // Helper function to escape keys for safe CSS class names
 @function _escape-key($key) {

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

@@ -117,7 +117,9 @@
   --#{config.$prefix}border-radius-lg: #{border-radius.$border-radius-lg};
   --#{config.$prefix}border-radius-xl: #{border-radius.$border-radius-xl};
   --#{config.$prefix}border-radius-xxl: #{border-radius.$border-radius-xxl};
-  --#{config.$prefix}border-radius-2xl: var(--#{config.$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
+  --#{config.$prefix}border-radius-2xl: var(
+    --#{config.$prefix}border-radius-xxl
+  ); // Deprecated in v5.3.0 for consistency
   --#{config.$prefix}border-radius-3xl: #{border-radius.$border-radius-3xl};
   --#{config.$prefix}border-radius-4xl: #{border-radius.$border-radius-4xl};
   --#{config.$prefix}border-radius-pill: #{border-radius.$border-radius-pill};
@@ -212,7 +214,6 @@
   @each $property, $value in color-maps.$focus-ring {
     --#{config.$prefix}focus-ring-#{$property}: #{$value};
   }
-
 }
 
 // Dark mode overrides
@@ -276,4 +277,4 @@
   --#{config.$prefix}form-valid-border-color: #{colors.$form-valid-border-color-dark};
   --#{config.$prefix}form-invalid-color: #{colors.$form-invalid-color-dark};
   --#{config.$prefix}form-invalid-border-color: #{colors.$form-invalid-border-color-dark};
-}
+}