beathers 5.2.2 → 5.3.0

package/src/scss/settings/_configs.scss

@@ -17,14 +17,6 @@ $colorsPseudoMap: (
   'focus': ':focus',
 );
 
-// Defines the default font stack.
-$defaultFontFamilies:
-  system-ui,
-  -apple-system,
-  Roboto,
-  Arial,
-  sans-serif !default;
-
 // Defines available font weights.
 $fontWeightsValues: (
   'thin': 100,
@@ -38,23 +30,6 @@ $fontWeightsValues: (
   'black': 900,
 );
 
-// Defines the typography scale for font sizes.
-$fontSizes: (
-  'h1': 96px,
-  'h2': 60px,
-  'h3': 40px,
-  'h4': 34px,
-  'h5': 24px,
-  'h6': 20px,
-  'subtitle1': 16px,
-  'subtitle2': 14px,
-  'body1': 16px,
-  'body2': 14px,
-  'button': 14px,
-  'caption': 12px,
-  'overline': 10px,
-) !default;
-
 // Defines text transformation and decoration options.
 $fontShapes: (
   'transform': (
@@ -77,35 +52,12 @@ $fontShapes: (
 // Defines text alignment options.
 $aligns: (left, start, right, end, justify, center);
 
-// Defines the number of columns/rows in the grid system.
-$axisDivisions: 12 !default;
-
 // Defines flexbox properties.
 $flexProperties: (
   flex-wrap: wrap nowrap,
   flex-direction: row row-reverse column column-reverse,
 );
 
-// Defines responsive breakpoint values.
-$breakpoints: (
-  null: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px,
-) !default;
-
-// Defines container max-widths and padding at different breakpoints.
-$wrappers: (
-  null: 100% 1.5rem,
-  sm: 540px 2rem,
-  md: 720px 3rem,
-  lg: 960px 3rem,
-  xl: 1140px 2rem,
-  xxl: 1320px 2rem,
-) !default;
-
 // Defines display utility options.
 $displays: (inline, block, inline-block, flex, inline-flex, inline-grid, table, table-cell, none);
 
@@ -116,12 +68,6 @@ $overflows: (visible, hidden, auto, scroll);
 // Defines object-fit property values.
 $objectsFits: (cover, fill, contain, none);
 
-// Defines available opacity values.
-$opacities: (10, 20, 30, 40, 50, 60, 70, 80, 90, 100) !default;
-
-// Defines blur values for filter properties.
-$blurValues: (5, 10, 15, 25) !default;
-
 // Defines available cursor types.
 $cursors: (
   alias,
@@ -226,11 +172,10 @@ $positions: static, relative, fixed, absolute, sticky;
 
 // Defines inset positioning options.
 $insetPositions: null, inline, block;
-// Defines default inset value.
-$insetValues: (0, 5, 15, 25) !default;
 
 // Defines the step for spacing utilities.
 $spacesStep: 5;
+
 // Defines properties for width and height utilities.
 $spacesDirections: (
   'w': width,
@@ -262,19 +207,6 @@ $gutters: (
   gy: row-gap,
 );
 
-// Defines values for gutter utilities.
-$guttersValues: (
-  auto: auto,
-  1: 0.25rem,
-  2: 0.5rem,
-  3: 0.75rem,
-  4: 1rem,
-  5: 1.5rem,
-  6: 2rem,
-) !default;
-
-// Defines the default border width.
-$bordersValue: 10 !default;
 // Defines border direction properties.
 $bordersDirections: (
   null: border,
@@ -284,9 +216,6 @@ $bordersDirections: (
   'end': border-inline-end,
 );
 
-// Defines available border-radius values.
-$radiuses: (5, 10, 15, 25) !default;
-
 // Defines border-radius direction properties.
 $radiusDirection: (
   null: (

package/src/scss/settings/_defaults.scss

@@ -9,209 +9,102 @@
 // Theme color map with light/dark variants for each color.
 // Example: "name": ("light": #color, "dark": #color)
 $colors: (
-  "main": (
-    "light": #ffffff,
-    "dark": #1a1d21,
-  ),
-  "second": (
-    "light": #f8f8ff,
-    "dark": #2e2e3f,
-  ),
-  "third": (
-    "light": #ebecf7,
-    "dark": #39394a,
-  ),
-  "t1": (
-    "light": #303030,
-    "dark": #fafafa,
-  ),
-  "t2": (
-    "light": #404040,
-    "dark": #f5f5f5,
-  ),
-  "t3": (
-    "light": #404040,
-    "dark": #f5f5f5,
-  ),
-  "d1": (
-    "light": #505050,
-    "dark": #dfdfdf,
-  ),
-  "d2": (
-    "light": #808080,
-    "dark": #bdbdbd,
-  ),
-  "d3": (
-    "light": #909090,
-    "dark": #9e9e9e,
-  ),
-  "success": (
-    "light": #099750,
-    "dark": #5ff2a9,
-  ),
-  "primary": (
-    "light": #2a6e9f,
-    "dark": #89c5f0,
-  ),
-  "secondary": (
-    "light": #545454,
-    "dark": #c6c3c3,
-  ),
-  "danger": (
-    "light": #b5333b,
-    "dark": #ee6b74,
-  ),
-  "warning": (
-    "light": #ca9420,
-    "dark": #fcd06f,
-  ),
-  "info": (
-    "light": #0c8181,
-    "dark": #49d1d1,
-  ),
-  "facebook": (
-    "light": #3b5998,
-    "dark": #3b5998,
-  ),
-  "messenger": (
-    "light": #006aff,
-    "dark": #006aff,
-  ),
-  "whatsapp": (
-    "light": #25d366,
-    "dark": #25d366,
-  ),
-  "instagram": (
-    "light": #3f729b,
-    "dark": #3f729b,
-  ),
-  "google": (
-    "light": #4285f4,
-    "dark": #4285f4,
-  ),
-  "signal": (
-    "light": #2190e8,
-    "dark": #2190e8,
-  ),
-  "twitter": (
-    "light": #00acee,
-    "dark": #00acee,
-  ),
-  "telegram": (
-    "light": #0088cc,
-    "dark": #0088cc,
-  ),
-  "youtube": (
-    "light": #ff0000,
-    "dark": #ff0000,
-  ),
-  "linkedin": (
-    "light": #0077b5,
-    "dark": #0077b5,
-  ),
-  "behance": (
-    "light": #053eff,
-    "dark": #053eff,
-  ),
-  "github": (
-    "light": #171515,
-    "dark": #171515,
-  ),
-  "gitlab": (
-    "light": #fca326,
-    "dark": #fca326,
-  ),
-  "wechat": (
-    "light": #09b83e,
-    "dark": #09b83e,
-  ),
-  "tiktok": (
-    "light": #ff0050,
-    "dark": #ff0050,
-  ),
-  "snapchat": (
-    "light": #fffc00,
-    "dark": #fffc00,
-  ),
-  "pinterest": (
-    "light": #e60023,
-    "dark": #e60023,
-  ),
-  "reddit": (
-    "light": #ff4500,
-    "dark": #ff4500,
-  ),
-  "teams": (
-    "light": #464eb8,
-    "dark": #464eb8,
-  ),
-  "twitch": (
-    "light": #6441a5,
-    "dark": #6441a5,
-  ),
-  "dribbble": (
-    "light": #ea4c89,
-    "dark": #ea4c89,
-  ),
-  "custom-1": (
-    "light": #4289c7,
-    "dark": #75b0e4,
-  ),
-  "custom-2": (
-    "light": #39c2cb,
-    "dark": #79e2e9,
-  ),
-  "custom-3": (
-    "light": #36c07e,
-    "dark": #86f3be,
-  ),
-  "custom-4": (
-    "light": #a84fd1,
-    "dark": #cd87ee,
-  ),
-  "custom-5": (
-    "light": #df4f60,
-    "dark": #df7884,
-  ),
-  "custom-6": (
-    "light": #dec338,
-    "dark": #e6d689,
-  ),
-  "custom-7": (
-    "light": #ea6e2c,
-    "dark": #e29f7b,
-  ),
-  "custom-8": (
-    "light": #a66d38,
-    "dark": #e3b387,
-  ),
-  "custom-9": (
-    "light": #eb30a0,
-    "dark": #e779bb,
-  ),
-  "custom-10": (
-    "light": #1e24a5,
-    "dark": #5d64ea,
-  ),
-  "black": (
-    "light": #000000,
-    "dark": #000000,
-  ),
-  "white": (
-    "light": #ffffff,
-    "dark": #ffffff,
-  ),
+  'main': (
+    'light': #ffffff,
+    'dark': #1a1d21,
+  ),
+  'second': (
+    'light': #f8f8ff,
+    'dark': #2e2e3f,
+  ),
+  'third': (
+    'light': #ebecf7,
+    'dark': #39394a,
+  ),
+  't1': (
+    'light': #303030,
+    'dark': #fafafa,
+  ),
+  't2': (
+    'light': #404040,
+    'dark': #f5f5f5,
+  ),
+  't3': (
+    'light': #404040,
+    'dark': #f5f5f5,
+  ),
+  'd1': (
+    'light': #505050,
+    'dark': #dfdfdf,
+  ),
+  'd2': (
+    'light': #808080,
+    'dark': #bdbdbd,
+  ),
+  'd3': (
+    'light': #909090,
+    'dark': #9e9e9e,
+  ),
+  'success': (
+    'light': #099750,
+    'dark': #5ff2a9,
+  ),
+  'primary': (
+    'light': #2a6e9f,
+    'dark': #89c5f0,
+  ),
+  'secondary': (
+    'light': #545454,
+    'dark': #c6c3c3,
+  ),
+  'danger': (
+    'light': #b5333b,
+    'dark': #ee6b74,
+  ),
+  'warning': (
+    'light': #ca9420,
+    'dark': #fcd06f,
+  ),
+  'info': (
+    'light': #0c8181,
+    'dark': #49d1d1,
+  )
 ) !default;
 
 // Typography
 // ---------
 // Font configuration for the Beathers system
 // Defines paths, formats and font families with their variations
-$fontMainPath: "/fonts/" !default;
-$fontFormat: "woff2" !default;
-$fontWeights: ("light", "regular", "medium", "bold") !default;
-$fontStyles: ("normal") !default;
-$textTruncate: 10 !default;
+$fontMainPath: '/fonts/' !default;
+$fontFormat: 'woff2' !default;
+$fontWeights: ('light', 'regular', 'medium', 'bold') !default;
+$fontStyles: ('normal') !default;
+$textTruncate: (1, 2, 3) !default;
+
+// Defines the default font stack.
+$defaultFontFamilies:
+  system-ui,
+  -apple-system,
+  Roboto,
+  Arial,
+  sans-serif !default;
+
+// Defines the typography scale for font sizes.
+$fontSizes: (
+  'h1': 96px,
+  'h2': 60px,
+  'h3': 40px,
+  'h4': 34px,
+  'h5': 24px,
+  'h6': 20px,
+  'subtitle1': 16px,
+  'subtitle2': 14px,
+  'body1': 16px,
+  'body2': 14px,
+  'button': 14px,
+  'caption': 12px,
+  'overline': 10px,
+) !default;
 
 // Font families map with language variants, unicode ranges and font weights
 // Example:
@@ -233,19 +126,53 @@ $textTruncate: 10 !default;
 //         )
 //       )
 // )
-$fonts: (
-  "font1": (
-    "variants": (
-      "en": (
-        "title": roboto,
-        "unicode":
-          "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
-      ),
-      "ar": (
-        "title": cairo,
-        "unicode":
-          "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
-      ),
-    ),
-  ),
+$fonts: () !default;
+
+// Defines responsive breakpoint values.
+$breakpoints: (
+  null: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+) !default;
+
+// Defines container max-widths and padding at different breakpoints.
+$wrappers: (
+  null: 100% 1.5rem,
+  sm: 540px 2rem,
+  md: 720px 3rem,
+  lg: 960px 3rem,
+  xl: 1140px 2rem,
+  xxl: 1320px 2rem,
 ) !default;
+
+// Defines the number of columns/rows in the grid system.
+$axisDivisions: 12 !default;
+
+// Defines values for gutter utilities.
+$guttersValues: (
+  auto: auto,
+  1: 0.25rem,
+  2: 0.5rem,
+  3: 0.75rem,
+  4: 1rem,
+  5: 1.5rem,
+  6: 2rem,
+) !default;
+
+// Defines available opacity values.
+$opacities: (15, 25, 50, 70) !default;
+
+// Defines blur values for filter properties.
+$blurValues: (3, 8, 15) !default;
+
+// Defines default inset value.
+$insetValues: (0, 5) !default;
+
+// Defines the default border width.
+$bordersValue: (1, 2, 3) !default;
+
+// Defines available border-radius values.
+$radiuses: (5, 10) !default;

package/src/scss/style/_colors.scss

@@ -1,9 +1,25 @@
-@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;
+@use 'sass:meta';
+@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(meta.variable-exists('vars.$useColors') and vars.$useColors, vars.$useColors, settings.$useColors);
+$useCurrentColors: if(
+  meta.variable-exists('vars.$useCurrentColors') and vars.$useCurrentColors,
+  vars.$useCurrentColors,
+  settings.$useCurrentColors
+);
+$useRootColors: if(
+  meta.variable-exists('vars.$useRootColors') and vars.$useRootColors,
+  vars.$useRootColors,
+  settings.$useRootColors
+);
+$colors: if(meta.variable-exists('vars.$colors') and vars.$colors, vars.$colors, defs.$colors);
 
 // Colors System Module
 // --------------------------
@@ -23,14 +39,14 @@
 // @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
+// @requires ../variables.scss - For color definitions
 
-@if settings.$useColors {
+@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 vars.$colors.
+  // set of color utilities for all the colors defined in $colors.
   //
   // Generated classes include:
   // - .color-[colorName] - Sets text color
@@ -48,10 +64,10 @@
   // With pseudo-class variants:
   // - .color-[colorName]:hover
   // - .bg-color-[colorName]:focus
-  @include colors.useColorsMap();
+  @include colors.useColorsMap;
 }
 
-@if settings.$useCurrentColors {
+@if $useCurrentColors {
   // CurrentColor Utility Classes
   // ----------------------------
   // Creates utility classes for applying the CSS `currentColor` value to various CSS properties
@@ -73,13 +89,13 @@
   //   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($class, '#{$class}#{\:}current-color', 'current-color');
 
     .#{$mainClass} {
       #{$property}: currentColor;
 
       @each $pseudoClass, $pseudo in configs.$colorsPseudoMap {
-        @if $pseudoClass != "placeholder" or ($pseudoClass == "placeholder" and $class == null) {
+        @if $pseudoClass != 'placeholder' or ($pseudoClass == 'placeholder' and $class == null) {
           &#{\:}#{$pseudoClass}#{$pseudo} {
             #{$property}: currentColor;
           }
@@ -89,14 +105,14 @@
   }
 }
 
-@if settings.$useRootColors {
+@if $useRootColors {
   // CSS Color Variables
   // ------------------
-  // Generates CSS custom properties (variables) for all colors in the vars.$colors map.
+  // 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 vars.$colors map
+  // 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
@@ -116,17 +132,17 @@
   //   color: var(--color-accent);
   // }
   :root {
-    @each $color, $modes in vars.$colors {
+    @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()");
+      $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");
+      $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()");
+      $checkedLightValue: val.hexColor('#{$color}.light', $light, 'root-colors()');
+      $checkedDarkValue: val.hexColor('#{$color}.dark', $dark, 'root-colors()');
 
       @if ($light == $dark) {
         --color-#{$color}: #{$checkedLightValue};