beathers 5.0.0

package/src/scss/settings/_resets.scss

@@ -0,0 +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;
+}

package/src/scss/style/_colors.scss

@@ -0,0 +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};
+      }
+    }
+  }
+}

package/src/scss/style/_grid.scss

@@ -0,0 +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);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/scss/style/_shaping.scss

@@ -0,0 +1,372 @@
+@use "sass:map";
+@use "sass:list";
+@use "sass:math";
+@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.$useWrappers {
+  @each $wSize, $properties in configs.$wrappers {
+    $mainWSize: if($wSize, "#{$wSize}#{\:}wrapper", "wrapper");
+
+    $size: list.nth($properties, 1);
+    $padding: if(list.nth($properties, 2), list.nth($properties, 2), 0);
+
+    // Validate parameters
+    $checkedSize: val.notNull($size, "Wrappers.size");
+
+    .#{$mainWSize} {
+      width: 100%;
+
+      @if ($padding != 0) {
+        padding-inline: $padding;
+      }
+
+      @include mQ.mQ(min, md) {
+        padding-inline: calc((100% - #{$size}) / 2 + $padding);
+      }
+    }
+  }
+}
+
+@if settings.$useShadows {
+  @include mQ.multiSizes() using ($size, $divider) {
+    @each $class, $values in configs.$shadows {
+      $x: map.get($values, x);
+      $y: map.get($values, y);
+      $blur: map.get($values, blur);
+      $spread: map.get($values, spread);
+      $opacity: map.get($values, opacity);
+
+      // Validate parameters
+      $checkedX: val.number($x, "Shadows.x");
+      $checkedY: val.number($y, "Shadows.y");
+      $checkedBlur: val.number($blur, "Shadows.blur");
+      $checkedSpread: val.number($spread, "Shadows.spread");
+      $checkedOpacity: val.opacity($opacity, "Shadows.opacity");
+
+      $mainClass: if($size, "#{$size}#{$divider}divider-#{$class}", "divider-#{$class}");
+
+      .#{$mainClass} {
+        box-shadow: func.shadowValue($x)
+          func.shadowValue($y)
+          func.shadowValue($blur)
+          func.shadowValue($spread)
+          rgba(0, 0, 0, $opacity);
+      }
+    }
+  }
+}
+
+@if settings.$useDisplays {
+  @include mQ.multiSizes() using ($size, $divider) {
+    @each $display in configs.$displays {
+      // Validate parameters
+      $checkedDisplay: val.listItem(configs.$displays, $display, "Shaping.displays");
+
+      $mainClass: if($size, "#{$size}#{$divider}d-#{$display}", "d-#{$display}");
+
+      .#{$mainClass} {
+        display: if($size, $display !important, $display);
+      }
+    }
+  }
+}
+
+@if settings.$useOverflows {
+  @include mQ.multiSizes() using ($size, $divider) {
+    @each $dir in configs.$overflowsDirections {
+      // Validate parameters
+      @if $dir {
+        $checkedDir: val.listItem(("x", "y"), $dir, "Shaping.overflow.direction");
+      }
+
+      $dirClass: if($dir, "#{$dir}#{\:}overflow", "overflow");
+      $mainClass: if($size, "#{$size}#{$divider}#{$dirClass}", $dirClass);
+      $property: if($dir, "overflow-#{$dir}", "overflow");
+
+      .#{$mainClass} {
+        @each $value in configs.$overflows {
+          // Validate parameters
+          $checkedClass: val.listItem(configs.$overflows, $value, "Shaping.overflow.value");
+
+          &-#{$value} {
+            #{$property}: if($size, $value !important, $value);
+          }
+        }
+      }
+    }
+  }
+}
+
+@if settings.$useOpacities {
+  @include mQ.multiSizes() using ($size, $divider) {
+    @each $value in configs.$opacities {
+      $checkedValue: val.opacity(math.div($value, 100), "Shaping.opacity");
+
+      $mainClass: if($size, "#{$size}#{$divider}op", "op");
+
+      .#{$mainClass}#{\:}#{$value} {
+        opacity: if($size, $checkedValue !important, $checkedValue);
+
+        &#{\:}hover:hover {
+          opacity: if($size, $checkedValue !important, $checkedValue);
+        }
+      }
+    }
+  }
+}
+
+@if settings.$useBlur {
+  @include mQ.multiSizes() using ($size, $divider) {
+    @each $value in configs.$blurValues {
+      $checkedValue: val.listItem(configs.$blurValues, $value, "Shaping.blur");
+
+      $mainClass: if($size, "#{$size}#{$divider}bg#{\:}blur", "bg#{\:}blur");
+      $calcValue: blur(#{$checkedValue}#{px});
+
+      .#{$mainClass}#{\:}#{$value} {
+        backdrop-filter: if($size, $calcValue !important, $calcValue);
+
+        &#{\:}hover:hover {
+          backdrop-filter: if($size, $calcValue !important, $calcValue);
+        }
+      }
+    }
+  }
+}
+
+@if settings.$useObjectFits {
+  @include mQ.multiSizes() using ($size, $divider) {
+    @each $fit in configs.$objectsFits {
+      // Validate parameters
+      $checkedFit: val.listItem(configs.$objectsFits, $fit, "Shaping.objectFit");
+
+      $mainClass: if($size, "#{$size}#{$divider}object-fit", "object-fit");
+
+      .#{$mainClass}#{\:}#{$fit} {
+        object-fit: if($size, $fit !important, $fit);
+      }
+    }
+  }
+}
+
+@if settings.$usePositions {
+  @include mQ.multiSizes() using ($size, $divider) {
+    @each $position in configs.$positions {
+      // Validate parameters
+      $checkedPosition: val.listItem(configs.$positions, $position, "Shaping.position");
+
+      $mainClass: if($size, "#{$size}#{$divider}p-", "p-");
+
+      .#{$mainClass}#{$position} {
+        position: if($size, $position !important, $position);
+      }
+    }
+  }
+}
+
+@if settings.$useInsets {
+  @include mQ.multiSizes() using ($size, $divider) {
+    @each $value in configs.$insetValues {
+      @each $position in configs.$insetPositions {
+        // Validate parameters
+        $checkedPosition: val.listItem(configs.$insetPositions, $position, "Shaping.inset");
+
+        $mainClass: if($size, "#{$size}#{$divider}inset", "inset");
+        $posClass: if($position, "#{$mainClass}-#{$position}", "#{$mainClass}");
+        $property: if($position, "inset-#{$position}", "inset");
+        $val: if($value == 0, "full", $value);
+
+        .#{$posClass}#{\:}#{$val} {
+          #{$property}: $value;
+        }
+      }
+    }
+  }
+}
+
+@if settings.$useSizes {
+  @include mQ.multiSizes() using ($size, $divider) {
+    @each $dir, $direction in configs.$spacesDirections {
+      // Validate parameters
+      $checkedDir: val.listItem(
+        ("w", "min#{\:}w", "max#{\:}w", "h", "min#{\:}h", "max#{\:}h"),
+        $dir,
+        "Shaping.space.direction"
+      );
+      $checkedDirection: val.listItem(
+        ("width", "min-width", "max-width", "height", "min-height", "max-height"),
+        $direction,
+        "Shaping.space.direction"
+      );
+      $checkedStep: val.number(configs.$spacesStep, "Shaping.space.step");
+
+      $mainClass: if($size, #{$size}#{$divider}#{$dir}, $dir);
+
+      .#{$mainClass} {
+        @for $i from 0 through 100 {
+          $value: $i * $checkedStep;
+
+          @if ($value != 0) and ($value % $checkedStep == 0) and ($value <= 100) {
+            &#{\:}#{$value} {
+              #{$direction}: if($size, #{$value}#{"%"} !important, #{$value}#{"%"});
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@if settings.$useGutters {
+  @include mQ.multiSizes() using ($size, $divider) {
+    @each $class, $property in configs.$gutters {
+      // Validate parameters
+      $checkedClass: val.listItem(
+        (p, px, py, ps, pe, pt, pb, m, mx, my, ms, me, mt, mb, g, gx, gy),
+        $class,
+        "Shaping.gutter.class"
+      );
+      $checkedProperty: val.listItem(
+        (
+          padding,
+          padding-inline,
+          padding-block,
+          padding-inline-start,
+          padding-inline-end,
+          padding-block-start,
+          padding-block-end,
+          margin,
+          margin-inline,
+          margin-block,
+          margin-inline-start,
+          margin-inline-end,
+          margin-block-start,
+          margin-block-end,
+          gap,
+          column-gap,
+          row-gap
+        ),
+        $property,
+        "Shaping.gutter.property"
+      );
+
+      $mainClass: if($size, #{$size}#{$divider}#{$class}, $class);
+
+      .#{$mainClass} {
+        @each $vClass, $value in configs.$guttersValues {
+          &-#{$vClass} {
+            @if $size {
+              #{$property}: if($size, $value !important, $value);
+            } @else {
+              #{$property}: $value;
+
+              &\:i {
+                #{$property}: $value !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@if settings.$useBorders {
+  @include mQ.multiSizes() using ($size, $divider) {
+    @for $i from 1 through configs.$bordersValue {
+      @each $dir, $property in configs.$bordersDirections {
+        // Validate parameters
+        $checkedDir: val.listItem((null, "top", "bottom", "start", "end"), $dir, "Shaping.borders");
+        $checkedProperty: val.listItem(
+          (border, border-block-start, border-block-end, border-inline-start, border-inline-end),
+          $property,
+          "Shaping.borders"
+        );
+
+        $mainClass: if($size, "#{$size}#{$divider}border", "border");
+        $dirClass: if($dir, "#{$dir}#{\:}", $dir);
+
+        .#{$mainClass}#{\:}#{$dirClass}#{$i} {
+          #{$property}-width: if($size, #{$i}#{px} !important, #{$i}#{px});
+
+          @if not $size {
+            #{$property}-style: if($size, solid !important, solid);
+          }
+        }
+      }
+    }
+  }
+}
+
+@if settings.$useTextBorders {
+  @include mQ.multiSizes() using ($size, $divider) {
+    @for $i from 1 through configs.$bordersValue {
+      $mainClass: if($size, "#{$size}#{$divider}stroke", "stroke");
+      $value: math.div($i, 10);
+
+      // Validate parameters
+      $checkedValue: val.number($value, "Shaping.textBorder");
+
+      .#{$mainClass}#{\:}#{$i} {
+        -webkit-text-stroke-width: if($size, #{$value}#{px} !important, #{$value}#{px});
+      }
+    }
+  }
+}
+
+@if settings.$useRadius {
+  @include mQ.multiSizes() using ($size, $divider) {
+    @each $dir, $properties in configs.$radiusDirection {
+      // Validate parameters
+      $checkedDir: val.listItem(
+        (
+          null,
+          "top",
+          "bottom",
+          "start",
+          "end",
+          "top-start",
+          "top-end",
+          "bottom-start",
+          "bottom-end"
+        ),
+        $dir,
+        "Shaping.radius.direction"
+      );
+
+      $mainClass: if($size, "#{$size}#{$divider}radius", "radius");
+      $dirClass: if($dir, "#{$dir}#{\:}", $dir);
+
+      @each $property in $properties {
+        .#{$mainClass}#{\:}#{$dirClass} {
+          &full {
+            #{$property}: if($size, 100vw !important, 100vw);
+          }
+
+          @each $value in configs.$radiuses {
+            // Validate parameters
+            $checkedProperty: val.listItem(
+              (
+                border-radius,
+                border-start-start-radius,
+                border-start-end-radius,
+                border-end-start-radius,
+                border-end-end-radius
+              ),
+              $property,
+              "Shaping.radius.property"
+            );
+
+            &#{$value} {
+              #{$property}: if($size, #{$value}#{px} !important, #{$value}#{"px"});
+            }
+          }
+        }
+      }
+    }
+  }
+}