beathers 5.7.6 → 5.9.1

package/scss/style/_button.scss

@@ -1,101 +1,103 @@
-$corners: (
-  'rounded': 0.25rem,
-  'circle': 100vw,
-  'sharp': 0,
-) !default;
-
-button {
-  cursor: pointer;
-  background: transparent;
-  border: none;
-
-  &.btn {
-    position: relative;
-    isolation: isolate;
-    appearance: none;
-    display: flex;
-    flex-wrap: nowrap;
-    cursor: pointer;
-    transition: 250ms ease-in-out;
-
-    &:not([class*='justify-content:']) {
-      justify-content: center;
-    }
-    &:not([class*='align-items:']) {
-      align-items: center;
-    }
-    &:not([class*='text-start'], [class*='text-left'], [class*='text-end'], [class*='text-right']) {
-      text-align: center;
-    }
-    &:not([class*='border:']) {
-      border-width: 0.15em;
-      border-style: solid;
-    }
-    &:not([class*='bg:']) {
-      background-color: unset;
-    }
-    &:not([class*='radius:']) {
-      @each $corner, $value in $corners {
-        &.btn-#{$corner} {
-          border-radius: $value;
-        }
-      }
-
-      &:is(.btn-circle) {
-        aspect-ratio: 1;
-      }
-    }
-
-    &:is([disabled]) {
-      cursor: not-allowed;
-      opacity: 0.7;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: inherit;
-      pointer-events: none;
-      z-index: -1;
-      transition: 250ms ease-in-out;
-      opacity: 0;
-    }
-
-    &:is(.loading) .loader-icon {
-      animation: rotate 4s ease-in-out infinite;
-
-      @keyframes rotate {
-        0% {
-          transform: rotate(0deg);
-        }
-        100% {
-          transform: rotate(360deg);
-        }
-      }
-    }
-
-    &:is(:focus-visible, :hover) {
-      transform: translateY(-0.1em);
-
-      &:is(.text-variant) {
-        text-shadow: 0 0.05em rgba(0, 0, 0, 0.4);
-      }
-
-      &:not(.text-variant) {
-        box-shadow: 0 0.15em 0.15em rgba(0, 0, 0, 0.4);
-
-        &::before {
-          background-color: rgba(0, 0, 0, 0.15);
-          opacity: 1;
-        }
-      }
-    }
-  }
-}
-
-:focus,
-button:focus {
-  outline: unset;
-  box-shadow: unset;
-}
+$corners: (
+  'rounded': 0.25rem,
+  'big-rounded': 0.75rem,
+  'circle': 100vw,
+  'sharp': 0,
+  'full': 100vw
+) !default;
+
+button {
+  cursor: pointer;
+  background: transparent;
+  border: none;
+
+  &.btn {
+    position: relative;
+    isolation: isolate;
+    appearance: none;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    cursor: pointer;
+    transition: 250ms ease-in-out;
+
+    &:not([class*='justify-content:']) {
+      justify-content: center;
+    }
+    &:not([class*='align-items:']) {
+      align-items: center;
+    }
+    &:not([class*='text-start']):not([class*='text-left']):not([class*='text-end']):not([class*='text-right']) {
+      text-align: center;
+    }
+    &:not([class*='border:']) {
+      border-width: 0.15em;
+      border-style: solid;
+    }
+    &:not([class*='bg:']) {
+      background-color: unset;
+    }
+    &:not([class*='radius:']) {
+      @each $corner, $value in $corners {
+        &.btn-#{$corner} {
+          border-radius: $value;
+        }
+      }
+
+      &:is(.btn-circle) {
+        aspect-ratio: 1;
+      }
+    }
+
+    &:is([disabled]) {
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      z-index: -1;
+      transition: 250ms ease-in-out;
+      opacity: 0;
+    }
+
+    &:is(.loading) .loader-icon {
+      animation: rotate 4s ease-in-out infinite;
+
+      @keyframes rotate {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    }
+
+    &:is(:focus-visible, :hover) {
+      transform: translateY(-0.1em);
+
+      &:is(.btn-text) {
+        text-shadow: 0 0.05em rgb(0, 0, 0, 0.4);
+      }
+
+      &:not(.btn-text) {
+        box-shadow: 0 0.15em 0.15em rgb(0, 0, 0, 0.4);
+
+        &::before {
+          background-color: rgb(0, 0, 0, 0.15);
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+:focus,
+button:focus {
+  outline: unset;
+  box-shadow: unset;
+}

package/scss/style/_colors.scss

@@ -1,146 +1,156 @@
-@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(
+  sass(vars.$useColors != null): vars.$useColors; else: settings.$useColors
+);
+$colors: if(
+  sass(vars.$colors != null): vars.$colors; else: defs.$colors
+);
+$useCurrentColors: if(
+  sass(vars.$useCurrentColors != null): vars.$useCurrentColors; else: settings.$useCurrentColors
+);
+$useRootColors: if(
+  sass(vars.$useRootColors != null): vars.$useRootColors; else: 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(
+      sass($class): '#{$class}#{\:}current-color' ; else: '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};
+      }
+    }
+  }
+}