beathers 5.1.0 → 5.1.1

package/src/scss/settings/_resets.scss

@@ -1,103 +1,103 @@
-@use "./configs" as configs;
-@use "../settings/defaults" as vars;
-@use "../functions/colors" as colors;
-@use "../settings/index" as settings;
-
-html {
-  scroll-behavior: smooth;
-  interpolate-size: allow-keywords;
-}
-
-body {
-  position: relative;
-  font-family: "regular";
-  overflow-x: hidden;
-}
-
-*,
-::before,
-::after {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-:focus,
-button:focus {
-  outline: unset !important;
-  box-shadow: unset !important;
-}
-
-ul {
-  margin: unset;
-  list-style: none;
-  padding: 0;
-
-  li {
-    margin-bottom: unset;
-  }
-}
-
-a {
-  text-decoration: unset;
-}
-
-@if settings.$useColors {
-  @if settings.$useColorsLightMode {
-    .light::selection {
-      background-color: colors.useColorWithMap("custom-2");
-      color: colors.useColorWithMap("white");
-    }
-  }
-  @if settings.$useColorsDarkMode {
-    .dark::selection {
-      background-color: colors.useColorWithMap("custom-2", "dark");
-      color: colors.useColorWithMap("black");
-    }
-  }
-}
-
-::-webkit-scrollbar {
-  width: 6px;
-
-  &-track {
-    background-color: transparent;
-    border-radius: unset;
-  }
-  &-thumb {
-    border-radius: 100vw;
-  }
-}
-@if settings.$useColors {
-  @if settings.$useColorsLightMode {
-    .light::-webkit-scrollbar-thumb {
-      background: colors.useColorWithMap("third");
-    }
-  }
-  @if settings.$useColorsDarkMode {
-    .dark::-webkit-scrollbar-thumb {
-      background: colors.useColorWithMap("third", "dark");
-    }
-  }
-}
-
-@each $option, $properties in configs.$clearanceOptions {
-  @each $property, $value in $properties {
-    .i\:#{$option} {
-      #{$property}: $value !important;
-    }
-    .#{$option} {
-      #{$property}: $value;
-    }
-  }
-}
-
-@each $cursor in configs.$cursors {
-  .cursor#{\:}#{$cursor} {
-    cursor: #{$cursor};
-  }
-}
-
-.scroll-smooth {
-  scroll-behavior: smooth;
-}
+@use "./configs" as configs;
+@use "../settings/defaults" as vars;
+@use "../functions/colors" as colors;
+@use "../settings/index" as settings;
+
+html {
+  scroll-behavior: smooth;
+  interpolate-size: allow-keywords;
+}
+
+body {
+  position: relative;
+  font-family: "regular";
+  overflow-x: hidden;
+}
+
+*,
+::before,
+::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:focus,
+button:focus {
+  outline: unset !important;
+  box-shadow: unset !important;
+}
+
+ul {
+  margin: unset;
+  list-style: none;
+  padding: 0;
+
+  li {
+    margin-bottom: unset;
+  }
+}
+
+a {
+  text-decoration: unset;
+}
+
+@if settings.$useColors {
+  @if settings.$useColorsLightMode {
+    .light::selection {
+      background-color: colors.useColorWithMap("custom-2");
+      color: colors.useColorWithMap("white");
+    }
+  }
+  @if settings.$useColorsDarkMode {
+    .dark::selection {
+      background-color: colors.useColorWithMap("custom-2", "dark");
+      color: colors.useColorWithMap("black");
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+
+  &-track {
+    background-color: transparent;
+    border-radius: unset;
+  }
+  &-thumb {
+    border-radius: 100vw;
+  }
+}
+@if settings.$useColors {
+  @if settings.$useColorsLightMode {
+    .light::-webkit-scrollbar-thumb {
+      background: colors.useColorWithMap("third");
+    }
+  }
+  @if settings.$useColorsDarkMode {
+    .dark::-webkit-scrollbar-thumb {
+      background: colors.useColorWithMap("third", "dark");
+    }
+  }
+}
+
+@each $option, $properties in configs.$clearanceOptions {
+  @each $property, $value in $properties {
+    .i\:#{$option} {
+      #{$property}: $value !important;
+    }
+    .#{$option} {
+      #{$property}: $value;
+    }
+  }
+}
+
+@each $cursor in configs.$cursors {
+  .cursor#{\:}#{$cursor} {
+    cursor: #{$cursor};
+  }
+}
+
+.scroll-smooth {
+  scroll-behavior: smooth;
+}

package/src/scss/style/_colors.scss

@@ -1,139 +1,139 @@
-@use "sass:map";
-@use "../settings/defaults" as vars;
-@use "../functions/validations" as val;
-@use "../settings/configs" as configs;
-@use "../functions/colors" as colors;
-@use "../settings/index" as settings;
-
-// 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 ../settings/defaults.scss - For color definitions
-
-@if settings.$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 vars.$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 settings.$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 settings.$useRootColors {
-  // CSS Color Variables
-  // ------------------
-  // Generates CSS custom properties (variables) for all colors in the vars.$colors map.
-  // These variables can be used throughout the application to ensure color consistency.
-  //
-  // The implementation:
-  // 1. Iterates through each color in the vars.$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 vars.$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 "../settings/defaults" as vars;
+@use "../functions/validations" as val;
+@use "../settings/configs" as configs;
+@use "../functions/colors" as colors;
+@use "../settings/index" as settings;
+
+// 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 ../settings/defaults.scss - For color definitions
+
+@if settings.$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 vars.$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 settings.$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 settings.$useRootColors {
+  // CSS Color Variables
+  // ------------------
+  // Generates CSS custom properties (variables) for all colors in the vars.$colors map.
+  // These variables can be used throughout the application to ensure color consistency.
+  //
+  // The implementation:
+  // 1. Iterates through each color in the vars.$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 vars.$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/src/scss/style/_grid.scss

@@ -1,92 +1,92 @@
-@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;
-
-@if settings.$useGrid {
-  .grid {
-    display: grid;
-
-    @include mQ.multiSizes() using ($size, $divider) {
-      @include func.gridDivision(column, $size, $divider);
-      @include func.gridDivision(row, $size, $divider);
-    }
-  }
-}
-
-@if settings.$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 settings.$useFlex or settings.$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;
+
+@if settings.$useGrid {
+  .grid {
+    display: grid;
+
+    @include mQ.multiSizes() using ($size, $divider) {
+      @include func.gridDivision(column, $size, $divider);
+      @include func.gridDivision(row, $size, $divider);
+    }
+  }
+}
+
+@if settings.$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 settings.$useFlex or settings.$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);
+            }
+          }
+        }
+      }
+    }
+  }
+}