beathers 5.4.0 → 5.4.1

package/scss/style/_colors.scss

@@ -1,146 +1,146 @@
-@use 'sass:map';
-@use '../variables' as vars;
-@use '../settings/defaults' as defs;
-@use '../functions/validations' as val;
-@use '../settings/configs' as configs;
-@use '../functions/colors' as colors;
-@use '../settings/index' as settings;
-
-// Definitions
-$useColors: if(vars.$useColors != null, vars.$useColors, settings.$useColors);
-$colors: if(vars.$colors != (), vars.$colors, defs.$colors);
-$useCurrentColors: if(vars.$useCurrentColors != null, vars.$useCurrentColors, settings.$useCurrentColors);
-$useRootColors: if(vars.$useRootColors != null, vars.$useRootColors, settings.$useRootColors);
-
-// Colors System Module
-// --------------------------
-// This file is responsible for generating color utility classes and CSS variables
-// based on the color maps defined in the variables file.
-//
-// Key features:
-// 1. Generates color utility classes from the main colors map
-// 2. Creates currentColor utility classes
-// 3. Sets up CSS variables for all defined colors
-//
-// The color system supports:
-// - Light and dark mode theming
-// - Opacity variations
-// - Pseudo-class variants (:hover, :focus, etc.)
-//
-// @requires ../functions/colors.scss - For color utility functions and mixins
-// @requires ../settings/configs.scss - For configuration variables
-// @requires ../functions/validations.scss - For validation utilities
-// @requires ../variables.scss - For color definitions
-
-@if $useColors {
-  // Color Utility Classes
-  // --------------------
-  // Generate color utility classes from the main colors map.
-  // Uses the useColorsMap mixin from colors functions to create a comprehensive
-  // set of color utilities for all the colors defined in $colors.
-  //
-  // Generated classes include:
-  // - .color-[colorName] - Sets text color
-  // - .bg-color-[colorName] - Sets background color
-  // - .border-color-[colorName] - Sets border color
-  //
-  // With light/dark theme variants:
-  // - Automatically applies correct color based on .light/.dark context
-  // - Supports direct class application with .color-[colorName].light
-  //
-  // With opacity variants (e.g., :50 for 50% opacity):
-  // - .color-[colorName]:50
-  // - .bg-color-[colorName]:75
-  //
-  // With pseudo-class variants:
-  // - .color-[colorName]:hover
-  // - .bg-color-[colorName]:focus
-  @include colors.useColorsMap;
-}
-
-@if $useCurrentColors {
-  // CurrentColor Utility Classes
-  // ----------------------------
-  // Creates utility classes for applying the CSS `currentColor` value to various CSS properties
-  // as defined in the configs.$colorsPropertiesMap.
-  //
-  // For each property in the map (color, background-color, border-color, etc.):
-  // - Creates a base class (.{property}-current-color)
-  // - Creates pseudo-class variants for interaction states
-  //
-  // Examples:
-  // - .current-color { color: currentColor; }
-  // - .bg-current-color { background-color: currentColor; }
-  // - .border-current-color { border-color: currentColor; }
-  // - .current-color\:hover:hover { color: currentColor; }
-  // - .bg-current-color\:focus:focus { background-color: currentColor; }
-  //
-  // Usage:
-  // <div class="current-color bg-current-color:hover">
-  //   This text uses currentColor and background changes to currentColor on hover
-  // </div>
-  @each $class, $property in configs.$colorsPropertiesMap {
-    $mainClass: if($class, '#{$class}#{\:}current-color', 'current-color');
-
-    .#{$mainClass} {
-      #{$property}: currentColor;
-
-      @each $pseudoClass, $pseudo in configs.$colorsPseudoMap {
-        @if $pseudoClass != 'placeholder' or ($pseudoClass == 'placeholder' and $class == null) {
-          &#{\:}#{$pseudoClass}#{$pseudo} {
-            #{$property}: currentColor;
-          }
-        }
-      }
-    }
-  }
-}
-
-@if $useRootColors {
-  // CSS Color Variables
-  // ------------------
-  // Generates CSS custom properties (variables) for all colors in the $colors map.
-  // These variables can be used throughout the application to ensure color consistency.
-  //
-  // The implementation:
-  // 1. Iterates through each color in the $colors map
-  // 2. Validates the color values through val.mapItem and val.hexColor functions
-  // 3. Determines if light and dark variants are the same
-  // 4. Creates appropriate CSS variables based on variant differences
-  //
-  // Format:
-  // - For colors with light/dark variants: --color-{name}-{variant}: {color-value}
-  // - For colors without variants: --color-{name}: {color-value}
-  //
-  // Examples:
-  // --color-main-light: #ffffff
-  // --color-main-dark: #1a1d21
-  // --color-accent: #3498db (when light and dark variants are the same)
-  //
-  // Usage:
-  // .my-element {
-  //   background-color: var(--color-main-light);
-  //   color: var(--color-accent);
-  // }
-  :root {
-    @each $color, $modes in $colors {
-      // Validate parameters
-      $checkedLight: val.mapItem($modes, 'light', 'light/dark', 'root-colors()');
-      $checkedDark: val.mapItem($modes, 'dark', 'light/dark', 'root-colors()');
-
-      $light: map.get($modes, 'light');
-      $dark: map.get($modes, 'dark');
-
-      // Validate colors
-      $checkedLightValue: val.hexColor('#{$color}.light', $light, 'root-colors()');
-      $checkedDarkValue: val.hexColor('#{$color}.dark', $dark, 'root-colors()');
-
-      @if ($light == $dark) {
-        --color-#{$color}: #{$checkedLightValue};
-      } @else {
-        --color-#{$color}-light: #{$checkedLightValue};
-        --color-#{$color}-dark: #{$checkedDarkValue};
-      }
-    }
-  }
-}
+@use 'sass:map';
+@use '../variables' as vars;
+@use '../settings/defaults' as defs;
+@use '../functions/validations' as val;
+@use '../settings/configs' as configs;
+@use '../functions/colors' as colors;
+@use '../settings/index' as settings;
+
+// Definitions
+$useColors: if(vars.$useColors != null, vars.$useColors, settings.$useColors);
+$colors: if(vars.$colors != (), vars.$colors, defs.$colors);
+$useCurrentColors: if(vars.$useCurrentColors != null, vars.$useCurrentColors, settings.$useCurrentColors);
+$useRootColors: if(vars.$useRootColors != null, vars.$useRootColors, settings.$useRootColors);
+
+// Colors System Module
+// --------------------------
+// This file is responsible for generating color utility classes and CSS variables
+// based on the color maps defined in the variables file.
+//
+// Key features:
+// 1. Generates color utility classes from the main colors map
+// 2. Creates currentColor utility classes
+// 3. Sets up CSS variables for all defined colors
+//
+// The color system supports:
+// - Light and dark mode theming
+// - Opacity variations
+// - Pseudo-class variants (:hover, :focus, etc.)
+//
+// @requires ../functions/colors.scss - For color utility functions and mixins
+// @requires ../settings/configs.scss - For configuration variables
+// @requires ../functions/validations.scss - For validation utilities
+// @requires ../variables.scss - For color definitions
+
+@if $useColors {
+  // Color Utility Classes
+  // --------------------
+  // Generate color utility classes from the main colors map.
+  // Uses the useColorsMap mixin from colors functions to create a comprehensive
+  // set of color utilities for all the colors defined in $colors.
+  //
+  // Generated classes include:
+  // - .color-[colorName] - Sets text color
+  // - .bg-color-[colorName] - Sets background color
+  // - .border-color-[colorName] - Sets border color
+  //
+  // With light/dark theme variants:
+  // - Automatically applies correct color based on .light/.dark context
+  // - Supports direct class application with .color-[colorName].light
+  //
+  // With opacity variants (e.g., :50 for 50% opacity):
+  // - .color-[colorName]:50
+  // - .bg-color-[colorName]:75
+  //
+  // With pseudo-class variants:
+  // - .color-[colorName]:hover
+  // - .bg-color-[colorName]:focus
+  @include colors.useColorsMap;
+}
+
+@if $useCurrentColors {
+  // CurrentColor Utility Classes
+  // ----------------------------
+  // Creates utility classes for applying the CSS `currentColor` value to various CSS properties
+  // as defined in the configs.$colorsPropertiesMap.
+  //
+  // For each property in the map (color, background-color, border-color, etc.):
+  // - Creates a base class (.{property}-current-color)
+  // - Creates pseudo-class variants for interaction states
+  //
+  // Examples:
+  // - .current-color { color: currentColor; }
+  // - .bg-current-color { background-color: currentColor; }
+  // - .border-current-color { border-color: currentColor; }
+  // - .current-color\:hover:hover { color: currentColor; }
+  // - .bg-current-color\:focus:focus { background-color: currentColor; }
+  //
+  // Usage:
+  // <div class="current-color bg-current-color:hover">
+  //   This text uses currentColor and background changes to currentColor on hover
+  // </div>
+  @each $class, $property in configs.$colorsPropertiesMap {
+    $mainClass: if($class, '#{$class}#{\:}current-color', 'current-color');
+
+    .#{$mainClass} {
+      #{$property}: currentColor;
+
+      @each $pseudoClass, $pseudo in configs.$colorsPseudoMap {
+        @if $pseudoClass != 'placeholder' or ($pseudoClass == 'placeholder' and $class == null) {
+          &#{\:}#{$pseudoClass}#{$pseudo} {
+            #{$property}: currentColor;
+          }
+        }
+      }
+    }
+  }
+}
+
+@if $useRootColors {
+  // CSS Color Variables
+  // ------------------
+  // Generates CSS custom properties (variables) for all colors in the $colors map.
+  // These variables can be used throughout the application to ensure color consistency.
+  //
+  // The implementation:
+  // 1. Iterates through each color in the $colors map
+  // 2. Validates the color values through val.mapItem and val.hexColor functions
+  // 3. Determines if light and dark variants are the same
+  // 4. Creates appropriate CSS variables based on variant differences
+  //
+  // Format:
+  // - For colors with light/dark variants: --color-{name}-{variant}: {color-value}
+  // - For colors without variants: --color-{name}: {color-value}
+  //
+  // Examples:
+  // --color-main-light: #ffffff
+  // --color-main-dark: #1a1d21
+  // --color-accent: #3498db (when light and dark variants are the same)
+  //
+  // Usage:
+  // .my-element {
+  //   background-color: var(--color-main-light);
+  //   color: var(--color-accent);
+  // }
+  :root {
+    @each $color, $modes in $colors {
+      // Validate parameters
+      $checkedLight: val.mapItem($modes, 'light', 'light/dark', 'root-colors()');
+      $checkedDark: val.mapItem($modes, 'dark', 'light/dark', 'root-colors()');
+
+      $light: map.get($modes, 'light');
+      $dark: map.get($modes, 'dark');
+
+      // Validate colors
+      $checkedLightValue: val.hexColor('#{$color}.light', $light, 'root-colors()');
+      $checkedDarkValue: val.hexColor('#{$color}.dark', $dark, 'root-colors()');
+
+      @if ($light == $dark) {
+        --color-#{$color}: #{$checkedLightValue};
+      } @else {
+        --color-#{$color}-light: #{$checkedLightValue};
+        --color-#{$color}-dark: #{$checkedDarkValue};
+      }
+    }
+  }
+}

package/scss/style/_grid.scss

@@ -1,89 +1,89 @@
-@use '../functions/mediaQueries' as mQ;
-@use '../settings/configs' as configs;
-@use '../functions/validations' as val;
-@use '../settings/index' as settings;
-@use '../functions/others' as func;
-@use '../variables' as vars;
-
-// Definitions
-$useGrid: if(vars.$useGrid != null, vars.$useGrid, settings.$useGrid);
-$useFlex: if(vars.$useFlex != null, vars.$useFlex, settings.$useFlex);
-
-@if $useGrid {
-  .grid {
-    display: grid;
-
-    @include mQ.multiSizes() using ($size, $divider) {
-      @include func.gridDivision(column, $size, $divider);
-      @include func.gridDivision(row, $size, $divider);
-    }
-  }
-}
-
-@if $useFlex {
-  .flex {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-
-    @include mQ.multiSizes() using ($size, $divider) {
-      @each $property, $values in configs.$flexProperties {
-        // Validate parameters
-        $checkedProperty: val.listItem((flex-wrap, flex-direction), $property, 'flex.properties');
-
-        @each $value in $values {
-          // Validate parameters
-          $checkedProperty: val.listItem(
-            (wrap, nowrap, row, row-reverse, column, column-reverse),
-            $value,
-            'flex.properties.values'
-          );
-
-          $mainClass: if($size, #{$size}#{$divider}#{$value}, $value);
-
-          &.#{$mainClass} {
-            #{$property}: if($size, $value !important, $value);
-          }
-        }
-      }
-
-      &.row,
-      &.row-reverse {
-        @include func.flexDivision(width, 'cols', $size, $divider);
-        @include func.flexDivision(width, 'col', $size, $divider);
-      }
-      &.column,
-      &.column-reverse {
-        @include func.flexDivision(height, 'rows', $size, $divider);
-        @include func.flexDivision(height, 'row', $size, $divider);
-      }
-    }
-  }
-}
-
-@if $useFlex or $useGrid {
-  @include mQ.multiSizes() using ($size, $divider) {
-    @each $way, $selections in configs.$justify {
-      @each $selection, $properties in $selections {
-        @each $property in $properties {
-          $mainClass: if($size, '#{$size}#{$divider}#{$way}-#{$selection}#{\:}', '#{$way}-#{$selection}#{\:}');
-
-          .#{$mainClass} {
-            $prefix: if($property == 'around' or $property == 'between' or $property == 'evenly', 'space-', '');
-            $flexPrefix: if($property == 'start' or $property == 'end', 'flex-', '');
-            $value: #{$prefix}#{$property};
-            $flexValue: #{$flexPrefix}#{$value};
-
-            &#{$property} {
-              &.flex {
-                #{$way}-#{$selection}: if($size, $flexValue !important, $flexValue);
-              }
-
-              #{$way}-#{$selection}: if($size, $value !important, $value);
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use '../functions/mediaQueries' as mQ;
+@use '../settings/configs' as configs;
+@use '../functions/validations' as val;
+@use '../settings/index' as settings;
+@use '../functions/others' as func;
+@use '../variables' as vars;
+
+// Definitions
+$useGrid: if(vars.$useGrid != null, vars.$useGrid, settings.$useGrid);
+$useFlex: if(vars.$useFlex != null, vars.$useFlex, settings.$useFlex);
+
+@if $useGrid {
+  .grid {
+    display: grid;
+
+    @include mQ.multiSizes() using ($size, $divider) {
+      @include func.gridDivision(column, $size, $divider);
+      @include func.gridDivision(row, $size, $divider);
+    }
+  }
+}
+
+@if $useFlex {
+  .flex {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    @include mQ.multiSizes() using ($size, $divider) {
+      @each $property, $values in configs.$flexProperties {
+        // Validate parameters
+        $checkedProperty: val.listItem((flex-wrap, flex-direction), $property, 'flex.properties');
+
+        @each $value in $values {
+          // Validate parameters
+          $checkedProperty: val.listItem(
+            (wrap, nowrap, row, row-reverse, column, column-reverse),
+            $value,
+            'flex.properties.values'
+          );
+
+          $mainClass: if($size, #{$size}#{$divider}#{$value}, $value);
+
+          &.#{$mainClass} {
+            #{$property}: if($size, $value !important, $value);
+          }
+        }
+      }
+
+      &.row,
+      &.row-reverse {
+        @include func.flexDivision(width, 'cols', $size, $divider);
+        @include func.flexDivision(width, 'col', $size, $divider);
+      }
+      &.column,
+      &.column-reverse {
+        @include func.flexDivision(height, 'rows', $size, $divider);
+        @include func.flexDivision(height, 'row', $size, $divider);
+      }
+    }
+  }
+}
+
+@if $useFlex or $useGrid {
+  @include mQ.multiSizes() using ($size, $divider) {
+    @each $way, $selections in configs.$justify {
+      @each $selection, $properties in $selections {
+        @each $property in $properties {
+          $mainClass: if($size, '#{$size}#{$divider}#{$way}-#{$selection}#{\:}', '#{$way}-#{$selection}#{\:}');
+
+          .#{$mainClass} {
+            $prefix: if($property == 'around' or $property == 'between' or $property == 'evenly', 'space-', '');
+            $flexPrefix: if($property == 'start' or $property == 'end', 'flex-', '');
+            $value: #{$prefix}#{$property};
+            $flexValue: #{$flexPrefix}#{$value};
+
+            &#{$property} {
+              &.flex {
+                #{$way}-#{$selection}: if($size, $flexValue !important, $flexValue);
+              }
+
+              #{$way}-#{$selection}: if($size, $value !important, $value);
+            }
+          }
+        }
+      }
+    }
+  }
+}