beathers 5.7.3 → 5.9.1

package/scss/settings/_configs.scss

@@ -7,14 +7,14 @@ $colorsPropertiesMap: (
   border: border-color,
   fill: fill,
   stroke: stroke,
-  text-stroke: -webkit-text-stroke-color,
+  text-stroke: -webkit-text-stroke-color
 );
 
 // Defines pseudo-classes for color variants.
 $colorsPseudoMap: (
   'placeholder': '::placeholder',
   'hover': ':hover',
-  'focus': ':focus',
+  'focus': ':focus'
 );
 
 // Defines available font weights.
@@ -27,7 +27,7 @@ $fontWeightsValues: (
   'semibold': 600,
   'bold': 700,
   'extra-bold': 800,
-  'black': 900,
+  'black': 900
 );
 
 // Defines text transformation and decoration options.
@@ -35,18 +35,18 @@ $fontShapes: (
   'transform': (
     uppercase,
     lowercase,
-    capitalize,
+    capitalize
   ),
   'decoration': (
     underline,
-    line-through,
+    line-through
   ),
   'styles': (
     wavy,
     double,
     dotted,
-    dashed,
-  ),
+    dashed
+  )
 );
 
 // Defines text alignment options.
@@ -55,7 +55,7 @@ $aligns: (left, start, right, end, justify, center);
 // Defines flexbox properties.
 $flexProperties: (
   flex-wrap: wrap nowrap,
-  flex-direction: row row-reverse column column-reverse,
+  flex-direction: row row-reverse column column-reverse
 );
 
 // Defines display utility options.
@@ -97,49 +97,49 @@ $cursors: (
 // Defines shadow presets.
 $shadows: (
   'light': (
-    rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em,
-    rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
-    rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset,
+    rgb(0, 0, 0, 0.25) 0px 0.0625em 0.0625em,
+    rgb(0, 0, 0, 0.25) 0px 0.125em 0.5em,
+    rgb(255, 255, 255, 0.1) 0px 0px 0px 1px inset
   ),
   'soft': (
-    rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
-    rgba(0, 0, 0, 0.04) 0px 10px 10px -5px,
+    rgb(0, 0, 0, 0.1) 0px 20px 25px -5px,
+    rgb(0, 0, 0, 0.04) 0px 10px 10px -5px
   ),
   'medium': (
-    rgba(0, 0, 0, 0.1) 0px 10px 50px,
+    rgb(0, 0, 0, 0.1) 0px 10px 50px
   ),
   'solid': (
-    rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
-    rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
-    rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset,
+    rgb(0, 0, 0, 0.2) 0px 12px 28px 0px,
+    rgb(0, 0, 0, 0.1) 0px 2px 4px 0px,
+    rgb(255, 255, 255, 0.05) 0px 0px 0px 1px inset
   ),
   'floating': (
-    rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
-    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px,
+    rgb(50, 50, 93, 0.25) 0px 13px 27px -5px,
+    rgb(0, 0, 0, 0.3) 0px 8px 16px -8px
   ),
   'flat': (
-    rgba(0, 0, 0, 0.15) 0px 3px 3px 0px,
-  ),
+    rgb(0, 0, 0, 0.15) 0px 3px 3px 0px
+  )
 ) !default;
 
 // Defines utility classes for clearing properties.
 $clearanceOptions: (
   no-bg: (
     background: unset,
-    background-color: unset,
+    background-color: unset
   ),
   no-border: (
-    border: unset,
+    border: unset
   ),
   no-radius: (
-    border-radius: unset,
+    border-radius: unset
   ),
   no-events: (
-    pointer-events: none,
+    pointer-events: none
   ),
   no-position: (
-    position: unset,
-  ),
+    position: unset
+  )
 );
 
 // Defines available position values.
@@ -158,7 +158,7 @@ $spacesDirections: (
   'max#{\:}w': max-width,
   'h': height,
   'min#{\:}h': min-height,
-  'max#{\:}h': max-height,
+  'max#{\:}h': max-height
 );
 
 // Defines properties for padding, margin and gap utilities.
@@ -179,7 +179,7 @@ $gutters: (
   mb: margin-block-end,
   g: gap,
   gx: column-gap,
-  gy: row-gap,
+  gy: row-gap
 );
 
 // Defines border direction properties.
@@ -188,42 +188,42 @@ $bordersDirections: (
   'top': border-block-start,
   'bottom': border-block-end,
   'start': border-inline-start,
-  'end': border-inline-end,
+  'end': border-inline-end
 );
 
 // Defines border-radius direction properties.
 $radiusDirection: (
   null: (
-    border-radius,
+    border-radius
   ),
   'top': (
     border-start-start-radius,
-    border-start-end-radius,
+    border-start-end-radius
   ),
   'bottom': (
     border-end-start-radius,
-    border-end-end-radius,
+    border-end-end-radius
   ),
   'start': (
     border-start-start-radius,
-    border-end-start-radius,
+    border-end-start-radius
   ),
   'end': (
     border-start-end-radius,
-    border-end-end-radius,
+    border-end-end-radius
   ),
   'top-start': (
-    border-start-start-radius,
+    border-start-start-radius
   ),
   'top-end': (
-    border-start-end-radius,
+    border-start-end-radius
   ),
   'bottom-start': (
-    border-end-start-radius,
+    border-end-start-radius
   ),
   'bottom-end': (
-    border-end-end-radius,
-  ),
+    border-end-end-radius
+  )
 );
 
 $justify: (
@@ -234,13 +234,13 @@ $justify: (
       end,
       between,
       around,
-      evenly,
+      evenly
     ),
     self: (
       auto,
       center,
-      stretch,
-    ),
+      stretch
+    )
   ),
   align: (
     content: (
@@ -249,14 +249,14 @@ $justify: (
       end,
       around,
       between,
-      stretch,
+      stretch
     ),
     items: (
       start,
       center,
       end,
       stretch,
-      baseline,
+      baseline
     ),
     self: (
       auto,
@@ -264,7 +264,7 @@ $justify: (
       center,
       end,
       stretch,
-      baseline,
-    ),
-  ),
+      baseline
+    )
+  )
 );

package/scss/settings/_defaults.scss

@@ -11,64 +11,64 @@
 $colors: (
   'main': (
     'light': #ffffff,
-    'dark': #1a1d21,
+    'dark': #1a1d21
   ),
   'second': (
     'light': #f8f8ff,
-    'dark': #2e2e3f,
+    'dark': #2e2e3f
   ),
   'third': (
     'light': #ebecf7,
-    'dark': #39394a,
+    'dark': #39394a
   ),
   't1': (
     'light': #303030,
-    'dark': #fafafa,
+    'dark': #fafafa
   ),
   't2': (
     'light': #404040,
-    'dark': #f5f5f5,
+    'dark': #f5f5f5
   ),
   't3': (
     'light': #404040,
-    'dark': #f5f5f5,
+    'dark': #f5f5f5
   ),
   'd1': (
     'light': #505050,
-    'dark': #dfdfdf,
+    'dark': #dfdfdf
   ),
   'd2': (
     'light': #808080,
-    'dark': #bdbdbd,
+    'dark': #bdbdbd
   ),
   'd3': (
     'light': #909090,
-    'dark': #9e9e9e,
+    'dark': #9e9e9e
   ),
   'success': (
     'light': #099750,
-    'dark': #5ff2a9,
+    'dark': #5ff2a9
   ),
   'primary': (
     'light': #2a6e9f,
-    'dark': #89c5f0,
+    'dark': #89c5f0
   ),
   'secondary': (
     'light': #545454,
-    'dark': #c6c3c3,
+    'dark': #c6c3c3
   ),
   'danger': (
     'light': #b5333b,
-    'dark': #ee6b74,
+    'dark': #ee6b74
   ),
   'warning': (
     'light': #ca9420,
-    'dark': #fcd06f,
+    'dark': #fcd06f
   ),
   'info': (
     'light': #0c8181,
-    'dark': #49d1d1,
-  ),
+    'dark': #49d1d1
+  )
 ) !default;
 
 // Typography
@@ -82,12 +82,7 @@ $fontStyles: ('normal') !default;
 $textTruncate: (1, 2, 3) !default;
 
 // Defines the default font stack.
-$defaultFontFamilies:
-  system-ui,
-  -apple-system,
-  Roboto,
-  Arial,
-  sans-serif !default;
+$defaultFontFamilies: system-ui, Arial, sans-serif !default;
 
 // Defines the typography scale for font sizes.
 $fontSizes: (
@@ -103,7 +98,7 @@ $fontSizes: (
   'body2': 14px,
   'button': 14px,
   'caption': 12px,
-  'overline': 10px,
+  'overline': 10px
 ) !default;
 
 // Font families map with language variants, unicode ranges and font weights
@@ -135,7 +130,7 @@ $breakpoints: (
   md: 768px,
   lg: 992px,
   xl: 1200px,
-  xxl: 1400px,
+  xxl: 1400px
 ) !default;
 
 // Defines container max-widths and padding at different breakpoints.
@@ -145,7 +140,7 @@ $wrappers: (
   md: 720px 3rem,
   lg: 960px 3rem,
   xl: 1140px 2rem,
-  xxl: 1320px 2rem,
+  xxl: 1320px 2rem
 ) !default;
 
 // Defines the number of columns/rows in the grid system.
@@ -159,7 +154,7 @@ $guttersValues: (
   3: 0.75rem,
   4: 1rem,
   5: 1.5rem,
-  6: 2rem,
+  6: 2rem
 ) !default;
 
 // Defines available opacity values.
@@ -182,19 +177,19 @@ $glassBlur: 8px !default;
 // Glassmorphism color settings for light and dark modes
 $glassColor: (
   'light': #ffffff,
-  'dark': #000000,
+  'dark': #000000
 ) !default;
 // Glassmorphism border thickness
 $glassBorderThickness: 1px !default;
 // Glassmorphism border 1 settings for light and dark modes
 $glassBorder1Color: (
   'light': #e6e6e6,
-  'dark': #303030,
+  'dark': #303030
 ) !default;
 // Glassmorphism border 2 settings for light and dark modes
 $glassBorder2Color: (
   'light': #e6e6e6,
-  'dark': #303030,
+  'dark': #303030
 ) !default;
 // Glassmorphism light angle
 $glassLightAngle: 45deg !default;
@@ -203,12 +198,12 @@ $glassLightAngle: 45deg !default;
 // Loader main color settings for light and dark modes
 $loaderColorMain: (
   'light': #ffffff,
-  'dark': #1a1d21,
+  'dark': #1a1d21
 ) !default;
 // Loader second color settings for light and dark modes
 $loaderColorSecond: (
   'light': #f4f4f4,
-  'dark': #2e2e3f,
+  'dark': #2e2e3f
 ) !default;
 // Loader duration
 $loaderDuration: 2s !default;

package/scss/style/_button.scss

@@ -1,7 +1,9 @@
 $corners: (
   'rounded': 0.25rem,
+  'big-rounded': 0.75rem,
   'circle': 100vw,
   'sharp': 0,
+  'full': 100vw
 ) !default;
 
 button {
@@ -13,7 +15,7 @@ button {
     position: relative;
     isolation: isolate;
     appearance: none;
-    display: flex;
+    display: inline-flex;
     flex-wrap: nowrap;
     cursor: pointer;
     transition: 250ms ease-in-out;
@@ -24,7 +26,7 @@ button {
     &:not([class*='align-items:']) {
       align-items: center;
     }
-    &:not([class*='text-start'], [class*='text-left'], [class*='text-end'], [class*='text-right']) {
+    &:not([class*='text-start']):not([class*='text-left']):not([class*='text-end']):not([class*='text-right']) {
       text-align: center;
     }
     &:not([class*='border:']) {
@@ -78,15 +80,15 @@ button {
     &:is(:focus-visible, :hover) {
       transform: translateY(-0.1em);
 
-      &:is(.text-variant) {
-        text-shadow: 0 0.05em rgba(0, 0, 0, 0.4);
+      &:is(.btn-text) {
+        text-shadow: 0 0.05em rgb(0, 0, 0, 0.4);
       }
 
-      &:not(.text-variant) {
-        box-shadow: 0 0.15em 0.15em rgba(0, 0, 0, 0.4);
+      &:not(.btn-text) {
+        box-shadow: 0 0.15em 0.15em rgb(0, 0, 0, 0.4);
 
         &::before {
-          background-color: rgba(0, 0, 0, 0.15);
+          background-color: rgb(0, 0, 0, 0.15);
           opacity: 1;
         }
       }

package/scss/style/_colors.scss

@@ -7,10 +7,18 @@
 @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);
+$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
 // --------------------------
@@ -80,7 +88,9 @@ $useRootColors: if(vars.$useRootColors != null, vars.$useRootColors, settings.$u
   //   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: if(
+      sass($class): '#{$class}#{\:}current-color' ; else: 'current-color'
+    );
 
     .#{$mainClass} {
       #{$property}: currentColor;

package/scss/style/_dialog.scss

@@ -2,96 +2,97 @@
 @use '../variables' as vars;
 
 // Definitions
-$useLoader: if(vars.$useLoader != null, vars.$useLoader, settings.$useLoader);
-
+$useLoader: if(
+  sass(vars.$useLoader != null): vars.$useLoader; else: settings.$useLoader
+);
 
 $dialogInline: (
   height: 100dvh,
-  transition: all 300ms ease-in-out,
+  transition: all 300ms ease-in-out
 );
 
 $dialogBlock: (
   transform: translateX(-50%),
   max-width: 95%,
   max-height: 95%,
-  transition: all 300ms ease-in-out,
+  transition: all 300ms ease-in-out
 );
 
 $dialogCenter: (
   transform: translate(-50%, -50%),
   max-width: 95%,
   max-height: 95%,
-  transition: all 300ms cubic-bezier(0, 2.5, 1, 1),
+  transition: all 300ms cubic-bezier(0, 2.5, 1, 1)
 );
 
 $dialogPositions: (
   'top': (
     origin: (
       top: -150%,
-      left: 50%,
+      left: 50%
     ),
     active: (
-      top: 2.5%,
-    ),
+      top: 2.5%
+    )
   ),
   'bottom': (
     origin: (
       bottom: -150%,
-      left: 50%,
+      left: 50%
     ),
     active: (
-      bottom: 2.5%,
-    ),
+      bottom: 2.5%
+    )
   ),
   'left': (
     origin: (
       top: 0,
       left: -100%,
-      right: unset,
+      right: unset
     ),
     active: (
-      left: 0,
-    ),
+      left: 0
+    )
   ),
   'start': (
     origin: (
       top: 0,
       inset-inline-start: -100%,
-      inset-inline-end: unset,
+      inset-inline-end: unset
     ),
     active: (
-      inset-inline-start: 0,
-    ),
+      inset-inline-start: 0
+    )
   ),
   'right': (
     origin: (
       top: 0,
       right: -100%,
-      left: unset,
+      left: unset
     ),
     active: (
-      right: 0,
-    ),
+      right: 0
+    )
   ),
   'end': (
     origin: (
       top: 0,
       inset-inline-end: -100%,
-      inset-inline-start: unset,
+      inset-inline-start: unset
     ),
     active: (
-      inset-inline-end: 0,
-    ),
+      inset-inline-end: 0
+    )
   ),
   'center': (
     origin: (
       top: 150%,
-      left: 50%,
+      left: 50%
     ),
     active: (
-      top: 50%,
-    ),
-  ),
+      top: 50%
+    )
+  )
 );
 
 .dialog {

package/scss/style/_glass.scss

@@ -5,15 +5,33 @@
 @use '../variables' as vars;
 
 // Definitions
-$useGlass: if(vars.$useGlass != null, vars.$useGlass, settings.$useGlass);
-$useColorsLightMode: if(vars.$useColorsLightMode != null, vars.$useColorsLightMode, settings.$useColorsLightMode);
-$useColorsDarkMode: if(vars.$useColorsDarkMode != null, vars.$useColorsDarkMode, settings.$useColorsDarkMode);
-$glassBlur: if(vars.$glassBlur != null, vars.$glassBlur, defs.$glassBlur);
-$glassColor: if(vars.$glassColor != null, vars.$glassColor, defs.$glassColor);
-$glassBorderThickness: if(vars.$glassBorderThickness != null, vars.$glassBorderThickness, defs.$glassBorderThickness);
-$glassBorder1Color: if(vars.$glassBorder1Color != null, vars.$glassBorder1Color, defs.$glassBorder1Color);
-$glassBorder2Color: if(vars.$glassBorder2Color != null, vars.$glassBorder2Color, defs.$glassBorder2Color);
-$glassLightAngle: if(vars.$glassLightAngle != null, vars.$glassLightAngle, defs.$glassLightAngle);
+$useGlass: if(
+  sass(vars.$useGlass != null): vars.$useGlass; else: settings.$useGlass
+);
+$useColorsLightMode: if(
+  sass(vars.$useColorsLightMode != null): vars.$useColorsLightMode; else: settings.$useColorsLightMode
+);
+$useColorsDarkMode: if(
+  sass(vars.$useColorsDarkMode != null): vars.$useColorsDarkMode; else: settings.$useColorsDarkMode
+);
+$glassBlur: if(
+  sass(vars.$glassBlur != null): vars.$glassBlur; else: defs.$glassBlur
+);
+$glassColor: if(
+  sass(vars.$glassColor != null): vars.$glassColor; else: defs.$glassColor
+);
+$glassBorderThickness: if(
+  sass(vars.$glassBorderThickness != null): vars.$glassBorderThickness; else: defs.$glassBorderThickness
+);
+$glassBorder1Color: if(
+  sass(vars.$glassBorder1Color != null): vars.$glassBorder1Color; else: defs.$glassBorder1Color
+);
+$glassBorder2Color: if(
+  sass(vars.$glassBorder2Color != null): vars.$glassBorder2Color; else: defs.$glassBorder2Color
+);
+$glassLightAngle: if(
+  sass(vars.$glassLightAngle != null): vars.$glassLightAngle; else: defs.$glassLightAngle
+);
 
 @if $useGlass {
   $glassColorLight: colors.hexToRgba(map.get($glassColor, 'light'), 0.15, 'Glass.light');