@shohojdhara/atomix 0.3.15 → 0.4.1

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: (
@@ -21,7 +22,7 @@ $utility-defaults: (
   class: null,
   state: null,
   local-vars: (),
-  rtl: true,
+  is-important: true,
 ) !default;
 
 // Core function to generate utility classes
@@ -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}'
       );
 
@@ -75,15 +77,17 @@ $utility-defaults: (
           --atomix-u-#{$css-variable-name}: #{$value};
         } @else if $properties {
           @each $property in $properties {
-            #{$property}: $value if(map.get($utility, rtl), null, !important);
+            #{$property}: $value if(map.get($utility, is-important), !important, null);
           }
-        } @else {
-          #{$property-class}: $value if(map.get($utility, rtl), null, !important);
+        } @else if $value != null {
+          // Guard: only emit property declaration if value is not null
+          #{$property-class}: $value if(map.get($utility, is-important), !important, null);
         }
-        
+
         // 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
@@ -106,15 +111,17 @@ $utility-defaults: (
           --atomix-u-#{$css-variable-name}#{$modifier}: #{$value};
         } @else if $properties {
           @each $property in $properties {
-            #{$property}: $value if(map.get($utility, rtl), null, !important);
+            #{$property}: $value if(map.get($utility, is-important), !important, null);
           }
-        } @else {
-          #{$base-class}: $value if(map.get($utility, rtl), null, !important);
+        } @else if $value != null {
+          // Guard: only emit property declaration if value is not null
+          #{$base-class}: $value if(map.get($utility, is-important), !important, null);
         }
-        
+
         // 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
@@ -164,9 +169,10 @@ $utility-defaults: (
         values: map.get($config, values),
         class: map.get($config, class),
         state: map.get($config, state),
-        rtl: map.get($config, rtl),
+        is-important: map.get($config, is-important),
         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};
-}
+}

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

@@ -121,20 +121,24 @@
     mix-blend-mode: screen;
     z-index: var(--atomix-z-index-5, 5);
     background: var(--atomix-glass-border-gradient-1, none);
-    box-shadow: var(--atomix-glass-border-shadow,
-        0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
-        0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
-        0 0.25rem 1rem rgba(0, 0, 0, 0.35));
+    box-shadow: var(
+      --atomix-glass-border-shadow,
+      0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
+      0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
+      0 0.25rem 1rem rgba(0, 0, 0, 0.35)
+    );
   }
 
   &__border-2 {
     mix-blend-mode: overlay;
     z-index: var(--atomix-z-index-6, 6);
     background: var(--atomix-glass-border-gradient-2, none);
-    box-shadow: var(--atomix-glass-border-shadow,
-        0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
-        0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
-        0 0.25rem 1rem rgba(0, 0, 0, 0.35));
+    box-shadow: var(
+      --atomix-glass-border-shadow,
+      0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
+      0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
+      0 0.25rem 1rem rgba(0, 0, 0, 0.35)
+    );
   }
 
   // Container styles
@@ -254,4 +258,4 @@
   @media (prefers-contrast: high) {
     border-width: var(--atomix-spacing-0-5, 0.125rem);
   }
-}
+}

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

@@ -149,15 +149,27 @@
   }
 
   &--active {
-    --#{config.$prefix}btn-bg: var(--#{config.$prefix}btn-active-bg, var(--#{config.$prefix}btn-hover-bg));
-    --#{config.$prefix}btn-color: var(--#{config.$prefix}btn-active-color, var(--#{config.$prefix}btn-hover-color));
-    --#{config.$prefix}btn-border-color: var(--#{config.$prefix}btn-active-border-color, var(--#{config.$prefix}btn-hover-border-color));
+    --#{config.$prefix}btn-bg: var(
+      --#{config.$prefix}btn-active-bg,
+      var(--#{config.$prefix}btn-hover-bg)
+    );
+    --#{config.$prefix}btn-color: var(
+      --#{config.$prefix}btn-active-color,
+      var(--#{config.$prefix}btn-hover-color)
+    );
+    --#{config.$prefix}btn-border-color: var(
+      --#{config.$prefix}btn-active-border-color,
+      var(--#{config.$prefix}btn-hover-border-color)
+    );
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
   }
 
   &--selected {
     --#{config.$prefix}btn-border-width: 2px;
-    --#{config.$prefix}btn-border-color: var(--#{config.$prefix}brand-border-subtle, var(--#{config.$prefix}primary));
+    --#{config.$prefix}btn-border-color: var(
+      --#{config.$prefix}brand-border-subtle,
+      var(--#{config.$prefix}primary)
+    );
     box-shadow: 0 0 0 2px rgba(var(--#{config.$prefix}primary-rgb, 124, 58, 237), 0.2);
   }
 

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

@@ -43,9 +43,13 @@
   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);
-  transition: opacity var(--#{config.$prefix}callout-transition-duration) var(--#{config.$prefix}callout-transition-timing),
-  transform var(--#{config.$prefix}callout-transition-duration) var(--#{config.$prefix}callout-transition-timing);
+  border: var(--#{config.$prefix}callout-border-witdh) solid
+    var(--#{config.$prefix}callout-border-color);
+  transition:
+    opacity var(--#{config.$prefix}callout-transition-duration)
+      var(--#{config.$prefix}callout-transition-timing),
+    transform var(--#{config.$prefix}callout-transition-duration)
+      var(--#{config.$prefix}callout-transition-timing);
 
   &__content {
     width: 100%;
@@ -135,7 +139,8 @@
     position: relative;
     max-width: rem.rem(350px);
     width: 100%;
-    padding: var(--#{config.$prefix}callout-tost-padding-y) var(--#{config.$prefix}callout-tost-padding-x);
+    padding: var(--#{config.$prefix}callout-tost-padding-y)
+      var(--#{config.$prefix}callout-tost-padding-x);
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
@@ -151,7 +156,9 @@
       }
 
       &__actions {
-        padding-left: calc(var(--#{config.$prefix}callout-icon-size) + var(--#{config.$prefix}callout-message-spacer));
+        padding-left: calc(
+          var(--#{config.$prefix}callout-icon-size) + var(--#{config.$prefix}callout-message-spacer)
+        );
         margin-top: var(--#{config.$prefix}callout-actions-spacer-y);
       }
 
@@ -170,29 +177,23 @@
 
   @each $color, $value in maps.$theme-colors {
     &--#{$color} {
-      @if ($color =='primary') {
+      @if ($color == 'primary') {
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}brand-bg-subtle);
         --#{config.$prefix}callout-border-color: var(--#{config.$prefix}brand-border-subtle);
         --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}brand-text-emphasis);
-      }
-
-      @else if($color =='light') {
+      } @else if($color == 'light') {
         --#{config.$prefix}callout-title-color: var(--#{config.$prefix}dark);
         --#{config.$prefix}callout-text-color: var(--#{config.$prefix}dark);
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}light);
         --#{config.$prefix}callout-border-color: var(--#{config.$prefix}primary-border-subtle);
         --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}tertiary-text-emphasis);
-      }
-
-      @else if($color =='dark') {
+      } @else if($color == 'dark') {
         --#{config.$prefix}callout-title-color: var(--#{config.$prefix}light);
         --#{config.$prefix}callout-text-color: #{$gray-4};
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}dark);
         --#{config.$prefix}callout-border-color: var(--#{config.$prefix}dark-border-subtle);
         --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}light);
-      }
-
-      @else {
+      } @else {
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}#{$color}-bg-subtle);
         --#{config.$prefix}callout-border-color: var(--#{config.$prefix}#{$color}-border-subtle);
         --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}#{$color}-text-emphasis);
@@ -212,12 +213,15 @@
       justify-content: center;
       align-items: center;
       padding: var(--#{config.$prefix}callout-padding-y) var(--#{config.$prefix}callout-padding-x);
-      border: var(--#{config.$prefix}callout-border-width) solid color-mix(in srgb, var(--#{config.$prefix}callout-border-color) 20%, transparent);
+      border: var(--#{config.$prefix}callout-border-width) solid
+        color-mix(in srgb, var(--#{config.$prefix}callout-border-color) 20%, transparent);
       max-width: var(--#{config.$prefix}callout-width);
       border-radius: var(--#{config.$prefix}callout-border-radius);
       width: 100%;
-      @include dynamic-background(var(--#{config.$prefix}callout-bg),
-        $background-transparency-enable: true);
+      @include dynamic-background(
+        var(--#{config.$prefix}callout-bg),
+        $background-transparency-enable: true
+      );
     }
 
     // Adjust text colors for glass effect
@@ -231,8 +235,10 @@
 
     // Glass effect for toast variant
     &#{$root}--toast {
-      @include dynamic-background(var(--#{config.$prefix}callout-bg),
-        $background-transparency-enable: true);
+      @include dynamic-background(
+        var(--#{config.$prefix}callout-bg),
+        $background-transparency-enable: true
+      );
       box-shadow:
         0 8px 32px rgba(0, 0, 0, 0.1),
         0 0 0 1px rgba(255, 255, 255, 0.1) inset;
@@ -311,4 +317,4 @@
     opacity: 1;
     transform: translateY(0);
   }
-}
+}

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

@@ -199,8 +199,6 @@
     }
   }
 
-
-
   &--sm {
     --#{$prefix}card-spacer-y: #{rem(map.get(spacing.$spacing-sizes, 2))}; // 8px
     --#{$prefix}card-spacer-x: #{rem(map.get(spacing.$spacing-sizes, 2))}; // 8px
@@ -222,7 +220,6 @@
     @include dynamic-background(var(--#{$prefix}card-bg));
   }
 
-
   &--glass {
     max-width: none;
     @include dynamic-background(var(--#{$prefix}card-bg), $background-transparency-enable: true);
@@ -350,16 +347,14 @@
 
   @each $color, $value in maps.$theme-colors {
     &--#{$color} {
-      @if ($color =='primary') {
+      @if ($color == 'primary') {
         --#{$prefix}card-bg: var(--#{$prefix}brand-bg-subtle);
         --#{$prefix}card-bg-hover: var(--#{$prefix}brand-bg-subtle);
         --#{$prefix}card-border-color: var(--#{$prefix}brand-border-subtle);
         --#{$prefix}card-title-color: var(--#{$prefix}brand-text-emphasis);
         --#{$prefix}card-icon-bg: var(--#{$prefix}brand-text-emphasis);
         --#{$prefix}card-icon-color: var(--#{$prefix}brand-bg-subtle);
-      }
-
-      @else if ($color =='dark') {
+      } @else if ($color == 'dark') {
         --#{$prefix}card-bg: var(--#{$prefix}dark);
         --#{$prefix}card-bg-hover: var(--#{$prefix}dark-hover);
         --#{$prefix}card-border-color: var(--#{$prefix}dark);
@@ -367,9 +362,7 @@
         --#{$prefix}card-text-color: var(--#{$prefix}light);
         --#{$prefix}card-icon-bg: var(--#{$prefix}light);
         --#{$prefix}card-icon-color: var(--#{$prefix}dark);
-      }
-
-      @else if ($color =='light') {
+      } @else if ($color == 'light') {
         --#{$prefix}card-bg: var(--#{$prefix}light);
         --#{$prefix}card-bg-hover: var(--#{$prefix}light-hover);
         --#{$prefix}card-border-color: var(--#{$prefix}light);
@@ -377,9 +370,7 @@
         --#{$prefix}card-text-color: var(--#{$prefix}dark);
         --#{$prefix}card-icon-bg: var(--#{$prefix}dark);
         --#{$prefix}card-icon-color: var(--#{$prefix}light);
-      }
-
-      @else {
+      } @else {
         --#{$prefix}card-bg: var(--#{$prefix}#{$color}-bg-subtle);
         --#{$prefix}card-bg-hover: var(--#{$prefix}#{$color}-bg-subtle);
         --#{$prefix}card-border-color: var(--#{$prefix}#{$color}-border-subtle);
@@ -456,4 +447,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}

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

@@ -31,7 +31,7 @@
   border: var(--#{$prefix}chart-border-width) solid var(--#{$prefix}chart-border-color);
   border-radius: var(--#{$prefix}chart-border-radius);
   overflow: hidden;
-  box-shadow: 
+  box-shadow:
     0 1px 3px rgba(0, 0, 0, 0.12),
     0 1px 2px rgba(0, 0, 0, 0.24),
     0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.05);
@@ -48,7 +48,7 @@
     content: '';
     position: absolute;
     inset: 0;
-    background: 
+    background:
       linear-gradient(
         135deg,
         rgba(var(--#{$prefix}primary-rgb), 0.08) 0%,
@@ -85,9 +85,13 @@
       rgba(var(--#{$prefix}secondary-rgb), 0.05),
       transparent
     );
-    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
-    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);
     mask-composite: exclude;
     pointer-events: none;
     z-index: 2;
@@ -96,7 +100,7 @@
   }
 
   &:hover {
-    box-shadow: 
+    box-shadow:
       0 8px 24px rgba(0, 0, 0, 0.12),
       0 4px 8px rgba(0, 0, 0, 0.16),
       0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.1),
@@ -143,14 +147,14 @@
     background: var(--#{$prefix}body-bg);
   }
   &--elevated {
-    box-shadow: 
+    box-shadow:
       0 12px 32px rgba(0, 0, 0, 0.15),
       0 6px 12px rgba(0, 0, 0, 0.2),
       0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.1),
       0 0 60px rgba(var(--#{$prefix}primary-rgb), 0.12);
 
     &:hover {
-      box-shadow: 
+      box-shadow:
         0 16px 40px rgba(0, 0, 0, 0.18),
         0 8px 16px rgba(0, 0, 0, 0.24),
         0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.15),
@@ -190,12 +194,12 @@
 
   &--selected {
     border-color: rgba(var(--#{$prefix}primary-rgb), 0.3);
-    box-shadow: 
+    box-shadow:
       0 4px 16px rgba(0, 0, 0, 0.1),
       0 2px 4px rgba(0, 0, 0, 0.12),
       0 0 0 2px rgba(var(--#{$prefix}primary-rgb), 0.2),
       0 0 30px rgba(var(--#{$prefix}primary-rgb), 0.15);
-    background: 
+    background:
       linear-gradient(
         135deg,
         rgba(var(--#{$prefix}primary-rgb), 0.08) 0%,
@@ -213,7 +217,7 @@
     cursor: pointer;
 
     &:hover {
-      box-shadow: 
+      box-shadow:
         0 8px 24px rgba(0, 0, 0, 0.12),
         0 4px 8px rgba(0, 0, 0, 0.16),
         0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.1),
@@ -222,7 +226,7 @@
     }
 
     &:active {
-      box-shadow: 
+      box-shadow:
         0 2px 8px rgba(0, 0, 0, 0.1),
         0 1px 2px rgba(0, 0, 0, 0.12);
     }
@@ -601,14 +605,13 @@
       content: '';
       position: absolute;
       inset: 0;
-      background: 
-        linear-gradient(
-          180deg,
-          rgba(var(--#{$prefix}primary-rgb), 0.03) 0%,
-          transparent 30%,
-          transparent 70%,
-          rgba(var(--#{$prefix}secondary-rgb), 0.02) 100%
-        );
+      background: linear-gradient(
+        180deg,
+        rgba(var(--#{$prefix}primary-rgb), 0.03) 0%,
+        transparent 30%,
+        transparent 70%,
+        rgba(var(--#{$prefix}secondary-rgb), 0.02) 100%
+      );
       pointer-events: none;
       z-index: 1;
     }

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

@@ -61,7 +61,9 @@
       content: '';
       transform: scale(0);
       opacity: 0;
-      transition: transform 120ms ease-in-out, opacity 120ms ease-in-out;
+      transition:
+        transform 120ms ease-in-out,
+        opacity 120ms ease-in-out;
       font-size: 0.65em;
       line-height: 1;
       font-family: 'Lux Icon';

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

@@ -12,7 +12,9 @@
   cursor: pointer;
   padding: rem(8px);
   border-radius: 50%;
-  transition: background-color 0.2s ease, opacity 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    opacity 0.2s ease;
   color: var(--#{$prefix}body-color);
 
   &:hover:not(:disabled) {