beathers 5.2.1 → 5.3.0

package/src/scss/functions/_colors.scss

@@ -1,12 +1,32 @@
-@use "sass:meta";
-@use "sass:color";
-@use "sass:math";
-@use "sass:list";
-@use "sass:map";
-@use "../settings/configs" as configs;
-@use "../settings/index" as settings;
-@use "../settings/defaults" as vars;
-@use "../functions/validations" as val;
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:math';
+@use 'sass:list';
+@use 'sass:map';
+@use '../settings/configs' as configs;
+@use '../settings/index' as settings;
+@use '../variables' as vars;
+@use '../settings/defaults' as defs;
+@use '../functions/validations' as val;
+
+// Definitions
+$colors: if(meta.variable-exists('vars.$colors') and vars.$colors, vars.$colors, defs.$colors);
+$opacities: if(meta.variable-exists('vars.$opacities') and vars.$opacities, vars.$opacities, defs.$opacities);
+$useColorsLightMode: if(
+  meta.variable-exists('vars.$useColorsLightMode') and vars.$useColorsLightMode,
+  vars.$useColorsLightMode,
+  settings.$useColorsLightMode
+);
+$useColorsDarkMode: if(
+  meta.variable-exists('vars.$useColorsDarkMode') and vars.$useColorsDarkMode,
+  vars.$useColorsDarkMode,
+  settings.$useColorsDarkMode
+);
+$useColorsOpacities: if(
+  meta.variable-exists('vars.$useColorsOpacities') and vars.$useColorsOpacities,
+  vars.$useColorsOpacities,
+  settings.$useColorsOpacities
+);
 
 // Color Convertors ----- ----- ----- -----
 //
@@ -28,13 +48,13 @@
 //
 @function hexToRgba($color, $opacity: 1, $debugIn: null) {
   // Validate parameters
-  $checkedColor: val.hexColor("color", $color, "hexToRgba().#{$debugIn}");
-  $checkedOpacity: val.opacity($opacity, "hexToRgba().#{$debugIn}");
+  $checkedColor: val.hexColor('color', $color, 'hexToRgba().#{$debugIn}');
+  $checkedOpacity: val.opacity($opacity, 'hexToRgba().#{$debugIn}');
 
   @return rgba(
-    color.channel($checkedColor, "red", $space: rgb),
-    color.channel($checkedColor, "green", $space: rgb),
-    color.channel($checkedColor, "blue", $space: rgb),
+    color.channel($checkedColor, 'red', $space: rgb),
+    color.channel($checkedColor, 'green', $space: rgb),
+    color.channel($checkedColor, 'blue', $space: rgb),
     $checkedOpacity
   );
 }
@@ -48,13 +68,13 @@
 // @param {String} $color - The color key to retrieve from the map
 // @param {String} $mode - Optional mode, must be 'light' or 'dark' (default: 'light')
 // @param {Number} $opacity - Optional opacity value between 0 and 100 (default: 100)
-// @param {Map} $map - Optional color map to use (defaults to vars.$colors)
+// @param {Map} $map - Optional color map to use (defaults to $colors)
 // @return {Color} - The color value, possibly with applied opacity
 // @throws {Error} - If mode is provided but isn't 'light' or 'dark'
 // @throws {Error} - If opacity is provided but isn't a number between 0 and 100
 //
 // @example scss
-//   // Using default color map (vars.$colors)
+//   // Using default color map ($colors)
 //   color: useColor('primary', 'light', 0.5);
 //   // Returns the light variant of primary color with 50% opacity
 //
@@ -62,23 +82,27 @@
 //   color: useColor('secondary', 'dark', null, $customMap);
 //   // Returns the dark variant of secondary color from custom map
 //
-@function useColor($color, $mode: "light", $opacity: 100) {
+@function useColor($color, $mode: 'light', $opacity: 100) {
   // Validate parameters
-  $checkedMode: val.colorMode($mode, "useColor()");
-  $checkedOpacity: val.colorOpacity($opacity, "useColor()");
+  $checkedMode: val.colorMode($mode, 'useColor()');
+  $checkedOpacity: val.colorOpacity($opacity, 'useColor()');
 
-  $value: map.get($color, $mode);
+  @if $color {
+    $value: map.get($color, $mode);
 
-  @if $checkedOpacity {
-    @return hexToRgba($value, math.div($opacity, 100), "useColor().#{$value}");
+    @if $checkedOpacity {
+      @return hexToRgba($value, math.div($opacity, 100), 'useColor().#{$value}');
+    } @else {
+      @return $value;
+    }
   } @else {
-    @return $value;
+    @return null;
   }
 }
 
-@function useColorWithMap($color, $mode: "light", $opacity: 100, $map: vars.$colors) {
+@function useColorWithMap($color, $mode: 'light', $opacity: 100, $map: $colors) {
   // Validate parameters
-  $checkedMap: val.map($map, "useColorWithMap().map");
+  $checkedMap: val.map($map, 'useColorWithMap().map');
 
   $colorValue: map.get($checkedMap, $color);
   @return useColor($colorValue, $mode, $opacity);
@@ -123,38 +147,38 @@
 // modifiers is generated to reduce CSS output size.
 @mixin useColorProperty($colorClass, $class, $property, $color, $map, $opacity: 100) {
   // Validate parameters
-  $checkedClass: val.colorClass($class, "useColorProperty().class");
-  $checkedProperty: val.colorProperty($property, "useColorProperty().property");
-  $checkedMap: val.map($map, "useColorProperty().map");
-  $checkedOpacity: val.colorOpacity($opacity, "useColorProperty().opacity");
-  $checkedLight: val.mapItem($color, "light", "light/dark", "useColorProperty().color");
-  $checkedDark: val.mapItem($color, "dark", "light/dark", "useColorProperty().color");
+  $checkedClass: val.colorClass($class, 'useColorProperty().class');
+  $checkedProperty: val.colorProperty($property, 'useColorProperty().property');
+  $checkedMap: val.map($map, 'useColorProperty().map');
+  $checkedOpacity: val.colorOpacity($opacity, 'useColorProperty().opacity');
+  $checkedLight: val.mapItem($color, 'light', 'light/dark', 'useColorProperty().color');
+  $checkedDark: val.mapItem($color, 'dark', 'light/dark', 'useColorProperty().color');
 
-  $light: map.get($color, "light");
-  $dark: map.get($color, "dark");
+  $light: map.get($color, 'light');
+  $dark: map.get($color, 'dark');
 
-  $checkedLightValue: val.hexColor("#{$colorClass}.light", $light, "root-colors()");
-  $checkedDarkValue: val.hexColor("#{$colorClass}.dark", $dark, "root-colors()");
+  $checkedLightValue: val.hexColor('#{$colorClass}.light', $light, 'root-colors()');
+  $checkedDarkValue: val.hexColor('#{$colorClass}.dark', $dark, 'root-colors()');
 
-  @if $dark != $light {
-    @if (settings.$useColorsLightMode) {
+  @if $light and $dark and $dark != $light {
+    @if ($useColorsLightMode) {
       .light .#{$colorClass},
       .#{$colorClass}.light,
       .light\:#{$colorClass} {
-        #{$property}: useColor($color, "light", $opacity);
+        #{$property}: useColor($color, 'light', $opacity);
       }
     }
 
-    @if (settings.$useColorsDarkMode) {
+    @if ($useColorsDarkMode) {
       .dark .#{$colorClass},
       .#{$colorClass}.dark,
       .dark\:#{$colorClass} {
-        #{$property}: useColor($color, "dark", $opacity);
+        #{$property}: useColor($color, 'dark', $opacity);
       }
     }
   } @else {
     .#{$colorClass} {
-      #{$property}: useColor($color, "light", $opacity);
+      #{$property}: useColor($color, if($light, 'light', 'dark'), $opacity);
     }
   }
 }
@@ -164,7 +188,7 @@
 // @mixin useColorsMap
 // --------------------------------------
 // Creates color utility classes using useColor() function for theme variant handling
-// @param {Map} $map - The color map to use (e.g., vars.$colors)
+// @param {Map} $map - The color map to use (e.g., $colors)
 // @param {Boolean} $withOpacity - Whether to generate opacity variants (default: true)
 // @throws {Error} - If $map is not a valid map
 //
@@ -177,45 +201,32 @@
 //   // With optional opacity variants like :50, :75
 //   // With pseudo-class variants like :hover, :focus
 //
-@mixin useColorsMap($map: vars.$colors, $withOpacity: true) {
+@mixin useColorsMap($map: $colors, $withOpacity: true) {
   // Validate parameters
-  $checkedMap: val.map($map, "useColorsMap()");
-  $checkedWithOpacity: val.boolean($withOpacity, "useColorsMap()");
+  $checkedMap: val.map($map, 'useColorsMap()');
+  $checkedWithOpacity: val.boolean($withOpacity, 'useColorsMap()');
 
   @each $color, $modes in $checkedMap {
     @if $color {
       @each $class, $property in configs.$colorsPropertiesMap {
-        $mainClass: if($class, "#{$class}#{\:}color-#{$color}", "color-#{$color}");
+        $mainClass: if($class, '#{$class}#{\:}color-#{$color}', 'color-#{$color}');
 
         @include useColorProperty($mainClass, $class, $property, $modes, $map);
 
-        @if $checkedWithOpacity and settings.$useColorsOpacities {
-          @each $opacity in configs.$opacities {
-            @include useColorProperty(
-              "#{$mainClass}#{\:}#{$opacity}",
-              $class,
-              $property,
-              $modes,
-              $map,
-              $opacity
-            );
+        @if $checkedWithOpacity and $useColorsOpacities {
+          @each $opacity in $opacities {
+            @include useColorProperty('#{$mainClass}#{\:}#{$opacity}', $class, $property, $modes, $map, $opacity);
           }
         }
 
         @each $pseudoClass, $pseudo in configs.$colorsPseudoMap {
-          @if $pseudoClass != "placeholder" or ($pseudoClass == "placeholder" and $class == null) {
-            @include useColorProperty(
-              "#{$mainClass}#{\:}#{$pseudoClass}#{$pseudo}",
-              $class,
-              $property,
-              $modes,
-              $map
-            );
-
-            @if $checkedWithOpacity and settings.$useColorsOpacities {
-              @each $opacity in configs.$opacities {
+          @if $pseudoClass != 'placeholder' or ($pseudoClass == 'placeholder' and $class == null) {
+            @include useColorProperty('#{$mainClass}#{\:}#{$pseudoClass}#{$pseudo}', $class, $property, $modes, $map);
+
+            @if $checkedWithOpacity and $useColorsOpacities {
+              @each $opacity in $opacities {
                 @include useColorProperty(
-                  "#{$mainClass}#{\:}#{$opacity}#{\:}#{$pseudoClass}#{$pseudo}",
+                  '#{$mainClass}#{\:}#{$opacity}#{\:}#{$pseudoClass}#{$pseudo}',
                   $class,
                   $property,
                   $modes,

package/src/scss/functions/_mediaQueries.scss

@@ -1,7 +1,17 @@
-@use "sass:map";
-@use "sass:string";
-@use "../settings/configs" as configs;
-@use "../settings/index" as settings;
+@use 'sass:meta';
+@use 'sass:map';
+@use 'sass:string';
+@use '../variables' as vars;
+@use '../settings/defaults' as defs;
+@use '../settings/index' as settings;
+
+// Definitions
+$breakpoints: if(meta.variable-exists('vars.$breakpoints') and vars.$breakpoints, vars.$breakpoints, defs.$breakpoints);
+$useMediaQueries: if(
+  meta.variable-exists('vars.$useMediaQueries') and vars.$useMediaQueries,
+  vars.$useMediaQueries,
+  settings.$useMediaQueries
+);
 
 // Breakpoint Mixin
 // --------------------------------------
@@ -10,7 +20,7 @@
 // it applies the content directly without a media query.
 //
 // @param {String} $type - The type of media query (e.g., "min", "max").
-// @param {String | Null} $key - The breakpoint key from `configs.$breakpoints` (e.g., "sm", "md", "lg").
+// @param {String | Null} $key - The breakpoint key from `$breakpoints` (e.g., "sm", "md", "lg").
 //                                If null or an empty string, content is applied directly.
 //
 // @content - Styles to be applied within the media query or directly.
@@ -51,9 +61,9 @@
 //
 @mixin mQ($type, $key) {
   // Retrieve the size value from the breakpoints map using the provided key
-  $size: map.get(configs.$breakpoints, $key);
+  $size: map.get($breakpoints, $key);
 
-  @if $size and $size > 0 and settings.$useMediaQueries {
+  @if $size and $size > 0 and $useMediaQueries {
     // Check if a valid size value exists
     // Generate the media query using the provided type and size
     @media (string.unquote("#{$type}-width"): $size) {
@@ -80,7 +90,7 @@
 // @example scss
 //   // In another file (e.g., _typographic.scss)
 //   @use "mediaQueries" as mQ;
-//   @use "configs";
+//   @use "defs";
 //
 //   @include mQ.multiSizes() using ($size, $divider) {
 //     $classPrefix: if($size, "#{$size}#{$divider}", "");
@@ -111,9 +121,9 @@
 //   }
 //
 @mixin multiSizes() {
-  @if settings.$useMediaQueries {
-    @each $size, $value in configs.$breakpoints {
-      $divider: if($size, #{\:}, "");
+  @if $useMediaQueries {
+    @each $size, $value in $breakpoints {
+      $divider: if($size, #{\:}, '');
 
       @include mQ(min, $size) {
         @content ($size, $divider);
@@ -121,7 +131,7 @@
     }
   } @else {
     $size: null;
-    $divider: "";
+    $divider: '';
 
     @content ($size, $divider);
   }

package/src/scss/functions/_others.scss

@@ -1,13 +1,22 @@
-@use "sass:map";
-@use "../settings/configs" as configs;
-@use "../functions/validations" as val;
+@use 'sass:meta';
+@use 'sass:map';
+@use '../variables' as vars;
+@use '../settings/defaults' as defs;
+@use '../functions/validations' as val;
+
+// Definitions
+$axisDivisions: if(
+  meta.variable-exists('vars.$axisDivisions') and vars.$axisDivisions,
+  vars.$axisDivisions,
+  defs.$axisDivisions
+);
 
 // @function shadowValue
 // @description Converts a unitless number to a pixel value for shadows, unless the value is 0.
 // @param {Number} $value - The shadow value.
 // @return {String} The shadow value with "px" appended, or 0.
 @function shadowValue($value) {
-  @return if($value != 0, #{$value}#{"px"}, $value);
+  @return if($value != 0, #{$value}#{'px'}, $value);
 }
 
 // @mixin gridDivision
@@ -17,23 +26,23 @@
 // @param {String} $divider - A divider string for the generated classes (e.g., '-').
 @mixin gridDivision($axis, $size, $divider) {
   // Validate parameters
-  $checkedAxis: val.listItem((column, row), $axis, "gridDivision.axis");
-  $checkedBase: val.number(configs.$axisDivisions, "gridDivision.axisDivisions");
+  $checkedAxis: val.listItem((column, row), $axis, 'gridDivision.axis');
+  $checkedBase: val.number($axisDivisions, 'gridDivision.axisDivisions');
 
-  $type: if($axis == "column", "col", "row");
-  $mainClass: if($size, "#{$size}#{$divider}#{$type}s", "#{$type}s");
-  $subClass: if($size, "#{$size}#{$divider}#{$type}", $type);
+  $type: if($axis == 'column', 'col', 'row');
+  $mainClass: if($size, '#{$size}#{$divider}#{$type}s', '#{$type}s');
+  $subClass: if($size, '#{$size}#{$divider}#{$type}', $type);
 
-  @for $i from 0 through configs.$axisDivisions {
+  @for $i from 0 through $axisDivisions {
     @if ($i > 0) {
       &.#{$mainClass}#{\:}#{$i} {
         grid-template-#{$axis}s: repeat($i, 1fr);
       }
     }
 
-    $axisProperty: if($i == 0, "grid-#{$axis}-end", "grid-#{$axis}");
+    $axisProperty: if($i == 0, 'grid-#{$axis}-end', 'grid-#{$axis}');
     $class: if($i == 0, auto, $i);
-    $value: if($i == 0, -1, "span #{$i}");
+    $value: if($i == 0, -1, 'span #{$i}');
 
     > .#{$subClass}#{\:}#{$class} {
       #{$axisProperty}: #{$value};
@@ -49,30 +58,30 @@
 // @param {String} $divider - A divider string for the generated classes (e.g., '-').
 @mixin flexDivision($axis, $type, $size, $divider) {
   // Validate parameters
-  $checkedAxis: val.listItem((width, height), $axis, "flexDivision.axis");
-  $checkedType: val.listItem(("col", "cols", "rows", "row"), $type, "flexDivision.type");
-  $checkedBase: val.number(configs.$axisDivisions, "flexDivision.axisDivisions");
+  $checkedAxis: val.listItem((width, height), $axis, 'flexDivision.axis');
+  $checkedType: val.listItem(('col', 'cols', 'rows', 'row'), $type, 'flexDivision.type');
+  $checkedBase: val.number($axisDivisions, 'flexDivision.axisDivisions');
 
-  $mainClass: if($size, "#{$size}#{$divider}#{$type}", $type);
+  $mainClass: if($size, '#{$size}#{$divider}#{$type}', $type);
 
-  @if (not $size) and $type == "cols" or $type == "rows" {
+  @if (not $size) and $type == 'cols' or $type == 'rows' {
     > * {
       flex: 0 0 auto;
       max-#{$axis}: 100%;
     }
   }
 
-  @for $i from 0 through configs.$axisDivisions {
-    @if $type == "cols" or $type == "rows" {
+  @for $i from 0 through $axisDivisions {
+    @if $type == 'cols' or $type == 'rows' {
       $class: if($i == 0, auto, $i);
       $axisSize: if($i == 0, auto, calc(100% / $i));
 
       &.#{$mainClass}#{\:}#{$class} > * {
         #{$axis}: if($size, $axisSize !important, $axisSize);
       }
-    } @else if $type == "col" or $type == "row" {
-      $axisSize: if($i == 0, 100%, calc(($i / configs.$axisDivisions) * 100%));
-      $class: if($i == 0, "", $i);
+    } @else if $type == 'col' or $type == 'row' {
+      $axisSize: if($i == 0, 100%, calc(($i / $axisDivisions) * 100%));
+      $class: if($i == 0, '', $i);
       $classSize: if($i == 0, #{$class}, #{\:}#{$class});
 
       > .#{$mainClass}#{$classSize} {

package/src/scss/functions/_typographic.scss

@@ -1,9 +1,18 @@
+@use 'sass:meta';
 @use 'sass:string';
 @use 'sass:map';
-@use '../settings/defaults' as vars;
+@use '../variables' as vars;
+@use '../settings/defaults' as defs;
 @use '../functions/validations' as val;
 @use '../settings/configs' as configs;
 
+// Definitions
+$fontMainPath: if(
+  meta.variable-exists('vars.$fontMainPath') and vars.$fontMainPath,
+  vars.$fontMainPath,
+  defs.$fontMainPath
+);
+
 // Font Face Mixin
 // --------------------------------------
 // Generates an @font-face rule.
@@ -70,7 +79,7 @@
     @if ($isLocal) {
       src:
         local('#{$title}-#{$weight}'),
-        url(string.unquote('#{vars.$fontMainPath}#{$title}-#{$weight}.#{$format}')) format('#{$format}');
+        url(string.unquote('#{$fontMainPath}#{$title}-#{$weight}.#{$format}')) format('#{$format}');
     } @else {
       src: url(string.unquote('#{$externalUrl}'));
     }

package/src/scss/functions/_validations.scss

@@ -1,7 +1,13 @@
-@use "sass:meta";
-@use "sass:list";
-@use "sass:map";
-@use "../settings/configs" as configs;
+@use 'sass:meta';
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:string';
+@use '../variables' as vars;
+@use '../settings/defaults' as defs;
+@use '../settings/configs' as configs;
+
+// Definitions
+$opacities: if(meta.variable-exists('vars.$opacities') and vars.$opacities, vars.$opacities, defs.$opacities);
 
 // Basics validations functions
 
@@ -12,8 +18,8 @@
 // @return {*} The original value if it's a number.
 // @error If the value is not a number.
 @function number($number, $in: null) {
-  @if $number != null and (meta.type-of($number) != "number") {
-    $in: if($in != null, " | in #{$in}", ".");
+  @if $number != null and (meta.type-of($number) != 'number') {
+    $in: if($in != null, ' | in #{$in}', '.');
     @error '❌ Error at "validate.number()": Please enter a valid number | Expected a number, but got "#{$number}"#{$in}';
   }
   @return $number;
@@ -26,8 +32,8 @@
 // @return {*} The original value if it's a string.
 // @error If the value is not a string.
 @function string($string, $in: null) {
-  @if $string != null and (meta.type-of($string) != "string") {
-    $in: if($in != null, " | in #{$in}", ".");
+  @if $string != null and (meta.type-of($string) != 'string') {
+    $in: if($in != null, ' | in #{$in}', '.');
     @error '❌ Error at "validate.string()": Please enter a valid string | Expected a string, but got "#{$string}"#{$in}';
   }
   @return $string;
@@ -40,8 +46,8 @@
 // @return {*} The original value if it's a boolean.
 // @error If the value is not a boolean.
 @function boolean($boolean, $in: null) {
-  @if $boolean != null and (meta.type-of($boolean) != "bool") {
-    $in: if($in != null, " | in #{$in}", ".");
+  @if $boolean != null and (meta.type-of($boolean) != 'bool') {
+    $in: if($in != null, ' | in #{$in}', '.');
     @error '❌ Error at "validate.boolean()": Please enter a valid boolean | Expected a (true or false), but got "#{$boolean}"#{$in}';
   }
   @return $boolean;
@@ -55,7 +61,7 @@
 // @error If the value is null.
 @function notNull($value, $in: null) {
   @if $value == null {
-    $in: if($in != null, " | in #{$in}", ".");
+    $in: if($in != null, ' | in #{$in}', '.');
     @error '❌ Error at "validate.notNull()": Please enter a valid value | Value must not be null#{$in}';
   }
   @return $value;
@@ -70,8 +76,8 @@
 // @return {*} The original value if it's a valid opacity.
 // @error If the value is not a number or not between 0 and 1.
 @function opacity($opacity, $in: null) {
-  @if $opacity != null and (meta.type-of($opacity) != "number" or $opacity < 0 or $opacity > 1) {
-    $in: if($in != null, " | in #{$in}", ".");
+  @if $opacity != null and (meta.type-of($opacity) != 'number' or $opacity < 0 or $opacity > 1) {
+    $in: if($in != null, ' | in #{$in}', '.');
     @error '❌ Error at "validate.opacity()": Please enter a valid number | Opacity must be a number between 0 and 1. You entered: "#{$opacity}"#{$in}';
   }
   @return $opacity;
@@ -84,8 +90,8 @@
 // @return {*} The original value if it's a valid color mode.
 // @error If the value is not 'light' or 'dark'.
 @function colorMode($mode, $in: null) {
-  @if $mode != null and not($mode == "light" or $mode == "dark") {
-    $in: if($in != null, " | in #{$in}", ".");
+  @if $mode != null and not($mode == 'light' or $mode == 'dark') {
+    $in: if($in != null, ' | in #{$in}', '.');
     @error '❌ Error at "validate.colorMode()": Please enter a valid mode | Allowed values are "light" or "dark"#{$in}';
   }
   @return $mode;
@@ -99,13 +105,13 @@
 // @return {*} The original value if it's a valid hex color.
 // @error If the value is null, not a string/color, or doesn't start with '#'.
 @function hexColor($key, $value, $in: null) {
-  $in: if($in != null, " | in #{$in}", ".");
+  $in: if($in != null, ' | in #{$in}', '.');
 
   @if $value == null {
     @error '❌ Error at "validate.hexColor()": Invalid "#{$key}" value | "#{$key}" value is null#{$in}';
-  } @else if meta.type-of($value) != "string" and meta.type-of($value) != "color" {
+  } @else if meta.type-of($value) != 'string' and meta.type-of($value) != 'color' {
     @error '❌ Error at "validate.hexColor()": Invalid "#{$key}" value | "#{$key}" value must be a string or color, got type #{meta.type-of($value)}#{$in}';
-  } @else if meta.type-of($value) == "string" and str-index($value, "#") != 1 {
+  } @else if meta.type-of($value) == 'string' and string.index($value, '#') != 1 {
     @error '❌ Error at "validate.hexColor()": Invalid "#{$key}" value | "#{$key}" value must start with "#", got "#{$value}"#{$in}';
   }
 
@@ -122,7 +128,7 @@
 // @error If the value is not a map.
 @function map($map, $in: null) {
   @if meta.type-of($map) != map {
-    $in: if($in != null, " | in #{$in}", ".");
+    $in: if($in != null, ' | in #{$in}', '.');
     @error '❌ Error at "validate.map()": Invalid type provided | Expected a map, but got "#{$map}" of type "#{meta.type-of($map)}"#{$in}';
   }
   @return $map;
@@ -138,7 +144,7 @@
 // @error If the key is missing from the map.
 @function mapItem($map, $key, $expectedKeys, $in: null) {
   @if not map.has-key($map, $key) {
-    $in: if($in != null, " | in #{$in}", ".");
+    $in: if($in != null, ' | in #{$in}', '.');
     @error '❌ Error at "validate.mapItem()": Missing key | Missing key "#{$key}" in the map "#{$map}" | Expected keys: "#{$expectedKeys}"#{$in}';
   }
   @return $map;
@@ -155,19 +161,11 @@
 @function list($list, $in: null) {
   $list-type: meta.type-of($list);
 
-  @if $list != null and $list-type != "list" {
-    @if $list-type ==
-      "string" or
-      $list-type ==
-      "number" or
-      $list-type ==
-      "bool" or
-      $list-type ==
-      "color"
-    {
+  @if $list != null and $list-type != 'list' {
+    @if $list-type == 'string' or $list-type == 'number' or $list-type == 'bool' or $list-type == 'color' {
       @return ($list);
     } @else {
-      $in: if($in != null, " | in #{$in}", ".");
+      $in: if($in != null, ' | in #{$in}', '.');
       @error '❌ Error at "validate.list()": Please enter a valid list | Expected a list, but got "#{$list}" of type "#{$list-type}"#{$in}';
     }
   }
@@ -184,7 +182,7 @@
 // @error If the item is not found in the list.
 @function listItem($list, $item, $in: null) {
   @if not list.index($list, $item) {
-    $in: if($in != null, " | in #{$in}", ".");
+    $in: if($in != null, ' | in #{$in}', '.');
     @error '❌ Error at "validate.listItem()": Invalid item | Missing item "#{$item}" not found in the list "#{$list}"#{$in}';
   }
   @return $item;
@@ -205,23 +203,23 @@
     $mapVal: map($value, $in);
     $lightKey: colorMode($value, $in);
     $darkKey: colorMode($value, $in);
-    $light: hexColor("#{$key}.light", map.get($value, "light"), $in);
-    $dark: hexColor("#{$key}.dark", map.get($value, "dark"), $in);
+    $light: hexColor('#{$key}.light', map.get($value, 'light'), $in);
+    $dark: hexColor('#{$key}.dark', map.get($value, 'dark'), $in);
   }
 
   @return $map;
 }
 
 // @function colorOpacity
-// @description Validates if an opacity value is one of the predefined opacities in `configs.$opacities`.
+// @description Validates if an opacity value is one of the predefined opacities in `$opacities`.
 // @param {*} $opacity - The opacity value to validate.
 // @param {String | Null} $in - Optional context for the error message.
 // @return {*} The original opacity value if it's valid.
-// @error If the opacity value is not in `configs.$opacities`.
+// @error If the opacity value is not in `$opacities`.
 @function colorOpacity($opacity, $in: null) {
-  @if $opacity != null and not(list.index(configs.$opacities, $opacity)) {
-    $in: if($in != null, " | in #{$in}", ".");
-    @error '❌ Error at "validate.colorOpacity()": Invalid color property value | Expected one of (#{configs.$opacities}), but got "#{$opacity}"#{$in}';
+  @if $opacity != null and $opacity != 100 and not(list.index($opacities, $opacity)) {
+    $in: if($in != null, ' | in #{$in}', '.');
+    @error '❌ Error at "validate.colorOpacity()": Invalid color property value | Expected one of (#{$opacities}), but got "#{$opacity}"#{$in}';
   }
   @return $opacity;
 }
@@ -246,10 +244,7 @@
 // @return {*} The original value if it's a valid color class.
 // @error If the value is not an allowed color class.
 @function colorClass($value, $in: null) {
-  @if $value !=
-    null and
-    not($value == null or list.index(map.keys(configs.$colorsPropertiesMap), $value))
-  {
+  @if $value != null and not($value == null or list.index(map.keys(configs.$colorsPropertiesMap), $value)) {
     @error '❌ Error at "validate.colorClass()": Invalid color class value | Expected one of #{map.keys(configs.$colorsPropertiesMap)}, but got "#{$value}"#{$in}';
   }
   @return $value;