beathers 5.0.0

package/src/scss/beathers-icons.min.scss

@@ -0,0 +1,265 @@
+@use "./settings/index" as settings;
+
+$icons: (
+  "cart": "\ea01",
+  "share": "\ea02",
+  "tag-1": "\ea03",
+  "facebook-messenger": "\ea04",
+  "arrow-corner-up-left": "\ea05",
+  "fastword": "\ea06",
+  "tiktok": "\ea07",
+  "database": "\ea08",
+  "syrian-pound": "\ea09",
+  "user-check": "\ea0a",
+  "server": "\ea0b",
+  "car": "\ea0c",
+  "times": "\ea0d",
+  "apple-store": "\ea0e",
+  "arrow-circle-up": "\ea0f",
+  "login": "\ea10",
+  "settings": "\ea11",
+  "instagram": "\ea12",
+  "sun": "\ea13",
+  "arrow-corner-left-up": "\ea14",
+  "star-Half": "\ea15",
+  "img": "\ea16",
+  "gender": "\ea17",
+  "amazon-payment": "\ea18",
+  "pintrest": "\ea19",
+  "arrow-droplist-down": "\ea1a",
+  "apple-pay": "\ea1b",
+  "whatsapp": "\ea1c",
+  "arrow-droplist-up": "\ea1d",
+  "pause": "\ea1e",
+  "arrow-corner-right-up": "\ea1f",
+  "save": "\ea20",
+  "star": "\ea21",
+  "arrow-corner-down-right": "\ea22",
+  "moon": "\ea23",
+  "arrow-classic-down-left": "\ea24",
+  "logout": "\ea25",
+  "certificate": "\ea26",
+  "repeat": "\ea27",
+  "rotate": "\ea28",
+  "warning": "\ea29",
+  "wallet": "\ea2a",
+  "headset": "\ea2b",
+  "plus": "\ea2c",
+  "double-check": "\ea2d",
+  "lock-opened": "\ea2e",
+  "arrow-classic-up-left": "\ea2f",
+  "chili": "\ea30",
+  "github": "\ea31",
+  "options": "\ea32",
+  "volume-up": "\ea33",
+  "flash": "\ea34",
+  "usb": "\ea35",
+  "shield-on": "\ea36",
+  "copy": "\ea37",
+  "stop": "\ea38",
+  "warehouse": "\ea39",
+  "user-delete": "\ea3a",
+  "target": "\ea3b",
+  "arrow-droplist-right": "\ea3c",
+  "arrow-sign-left": "\ea3d",
+  "check": "\ea3e",
+  "coin": "\ea3f",
+  "print": "\ea40",
+  "arrow-lite-double-down": "\ea41",
+  "card": "\ea42",
+  "stackoverflow": "\ea43",
+  "face-id": "\ea44",
+  "signal": "\ea45",
+  "arrow-droplist-left": "\ea46",
+  "cart-1": "\ea47",
+  "behance": "\ea48",
+  "menu-1": "\ea49",
+  "user-remove": "\ea4a",
+  "tag": "\ea4b",
+  "receipt": "\ea4c",
+  "check-1": "\ea4d",
+  "medal-1": "\ea4e",
+  "heart-rate": "\ea4f",
+  "coffee-1": "\ea50",
+  "halal": "\ea51",
+  "search-1": "\ea52",
+  "power": "\ea53",
+  "edit-1": "\ea54",
+  "arrow-classic-right": "\ea55",
+  "search": "\ea56",
+  "phone": "\ea57",
+  "saudi-riyal": "\ea58",
+  "time": "\ea59",
+  "btc": "\ea5a",
+  "play": "\ea5b",
+  "eye-closed": "\ea5c",
+  "shop": "\ea5d",
+  "menu": "\ea5e",
+  "facebook": "\ea5f",
+  "hackerrank": "\ea60",
+  "gift-opened": "\ea61",
+  "news": "\ea62",
+  "medal": "\ea63",
+  "finger-print": "\ea64",
+  "Unlink": "\ea65",
+  "huawei": "\ea66",
+  "arrow-classic-up-right": "\ea67",
+  "microsoft": "\ea68",
+  "pdf": "\ea69",
+  "dislike": "\ea6a",
+  "snapchat": "\ea6b",
+  "turkish": "\ea6c",
+  "bank": "\ea6d",
+  "home": "\ea6e",
+  "trash": "\ea6f",
+  "thermometer": "\ea70",
+  "sort-up": "\ea71",
+  "coffee-2": "\ea72",
+  "scale-down": "\ea73",
+  "lang-ar": "\ea74",
+  "files": "\ea75",
+  "archive": "\ea76",
+  "like": "\ea77",
+  "arrow-classic-down-right": "\ea78",
+  "timer": "\ea79",
+  "gold": "\ea7a",
+  "eye-opened": "\ea7b",
+  "arrow-circle-left": "\ea7c",
+  "telegram": "\ea7d",
+  "volume": "\ea7e",
+  "linkedin": "\ea7f",
+  "arrow-corner-down-left": "\ea80",
+  "download": "\ea81",
+  "inbox": "\ea82",
+  "arrow-corner-right-down": "\ea83",
+  "pin-2": "\ea84",
+  "game-contraller": "\ea85",
+  "users": "\ea86",
+  "volume-down": "\ea87",
+  "user": "\ea88",
+  "info": "\ea89",
+  "pin-1": "\ea8a",
+  "google-play": "\ea8b",
+  "arrow-sign-right": "\ea8c",
+  "ads": "\ea8d",
+  "car-1": "\ea8e",
+  "arrow-corner-left-down": "\ea8f",
+  "arrow-circle-down": "\ea90",
+  "ship": "\ea91",
+  "chart-3": "\ea92",
+  "dribbble": "\ea93",
+  "arrow-lite-double-right": "\ea94",
+  "check-2": "\ea95",
+  "arrow-classic-down": "\ea96",
+  "question": "\ea97",
+  "new-tab": "\ea98",
+  "cart-2": "\ea99",
+  "arrow-corner-up-right": "\ea9a",
+  "arrow-classic-left": "\ea9b",
+  "octagon": "\ea9c",
+  "rupee": "\ea9d",
+  "usb-1": "\ea9e",
+  "yuan": "\ea9f",
+  "cheeze": "\eaa0",
+  "arrow-lite-double-up": "\eaa1",
+  "dashboard": "\eaa2",
+  "android": "\eaa3",
+  "mail": "\eaa4",
+  "age": "\eaa5",
+  "filters": "\eaa6",
+  "chart-2": "\eaa7",
+  "drop": "\eaa8",
+  "gift-closed": "\eaa9",
+  "euro": "\eaaa",
+  "loading": "\eaab",
+  "upload": "\eaac",
+  "arrow-sign-up": "\eaad",
+  "bell-off": "\eaae",
+  "passport": "\eaaf",
+  "chart-1": "\eab0",
+  "user-add": "\eab1",
+  "edit": "\eab2",
+  "Chipset": "\eab3",
+  "youtube": "\eab4",
+  "arrow-lite-left": "\eab5",
+  "arrow-sign-down": "\eab6",
+  "arrow-classic-up": "\eab7",
+  "white-board": "\eab8",
+  "grid": "\eab9",
+  "pounds": "\eaba",
+  "pin": "\eabb",
+  "arrow-lite-right": "\eabc",
+  "shield-off": "\eabd",
+  "arrow-lite-up": "\eabe",
+  "scale-up": "\eabf",
+  "barcode": "\eac0",
+  "plane": "\eac1",
+  "quote": "\eac2",
+  "ruble": "\eac3",
+  "ice-cream": "\eac4",
+  "move": "\eac5",
+  "times-2": "\eac6",
+  "link-1": "\eac7",
+  "board": "\eac8",
+  "mobile": "\eac9",
+  "arrow-circle-right": "\eaca",
+  "apple": "\eacb",
+  "google": "\eacc",
+  "arrow-outside": "\eacd",
+  "compare": "\eace",
+  "mice": "\eacf",
+  "cloud": "\ead0",
+  "times-1": "\ead1",
+  "calendar": "\ead2",
+  "twitter": "\ead3",
+  "motorbike": "\ead4",
+  "categories": "\ead5",
+  "app-gallery": "\ead6",
+  "aws": "\ead7",
+  "arrow-inside": "\ead8",
+  "folder": "\ead9",
+  "x": "\eada",
+  "camera": "\eadb",
+  "minus": "\eadc",
+  "link": "\eadd",
+  "box": "\eade",
+  "color": "\eadf",
+  "sort-down": "\eae0",
+  "settings-1": "\eae1",
+  "google-pay": "\eae2",
+  "chart": "\eae3",
+  "heart": "\eae4",
+  "doller": "\eae5",
+  "lock-closed": "\eae6",
+  "umbrella": "\eae7",
+  "arrow-lite-double-left": "\eae8",
+  "gitlab": "\eae9",
+  "arrow-lite-down": "\eaea",
+  "bell": "\eaeb",
+  "git": "\eaec",
+  "paypal": "\eaed",
+  "coupon": "\eaee",
+);
+
+@if (settings.$useIcons) {
+  @font-face {
+    font-family: "beathers";
+    src: url("/fonts/beathers.woff") format("woff");
+  }
+
+  .be {
+    font-family: "beathers", system-ui !important;
+    font-size: 1em;
+    width: 1em;
+    height: 1em;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    @each $name, $glyph in $icons {
+      &.be-#{$name}:before {
+        content: $glyph;
+      }
+    }
+  }
+}

package/src/scss/beathers.min.scss

@@ -0,0 +1,13 @@
+/*!
+* Beathers v5.2.0 (https://beathers.bhoenixstudio.com/)
+* Copyright 2020-2025 Bhoenix Studio
+*/
+
+@use "./variables";
+
+// Style ----- ----- ----- -----
+@use "./settings/resets";
+@use "./style/colors";
+@use "./style/typographic";
+@use "./style/grid";
+@use "./style/shaping";

package/src/scss/functions/_colors.scss

@@ -0,0 +1,232 @@
+@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;
+
+// Color Convertors ----- ----- ----- -----
+//
+// @function hexToRgba
+// --------------------------------------
+// Converts a hex color value to RGBA format
+//
+// @param {Color} $color - The hex color to convert (e.g. '#ffffff' or '#fff')
+// @param {Number} $opacity - Optional opacity value between 0 and 1 (default: 1)
+// @return {Color} - The color in rgba() format
+//
+// @example scss
+//   color: hexToRgba('#ffffff');
+//   // Returns rgba(255, 255, 255, 1)
+//   color: hexToRgba('#ffffff', 0.5);
+//   // Returns rgba(255, 255, 255, 0.5)
+//   color: hexToRgba('#ffffff80');
+//   // Returns rgba(255, 255, 255, 0.5)
+//
+@function hexToRgba($color, $opacity: 1, $debugIn: null) {
+  // Validate parameters
+  $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),
+    $checkedOpacity
+  );
+}
+
+// Use Color ----- ----- ----- -----
+//
+// @function useColor
+// --------------------------------------
+// Retrieves a color from any color map with optional variant and opacity
+//
+// @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)
+// @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)
+//   color: useColor('primary', 'light', 0.5);
+//   // Returns the light variant of primary color with 50% opacity
+//
+//   // Using a custom color map
+//   color: useColor('secondary', 'dark', null, $customMap);
+//   // Returns the dark variant of secondary color from custom map
+//
+@function useColor($color, $mode: "light", $opacity: 100) {
+  // Validate parameters
+  $checkedMode: val.colorMode($mode, "useColor()");
+  $checkedOpacity: val.colorOpacity($opacity, "useColor()");
+
+  $value: map.get($color, $mode);
+
+  @if $checkedOpacity {
+    @return hexToRgba($value, math.div($opacity, 100), "useColor().#{$value}");
+  } @else {
+    @return $value;
+  }
+}
+
+@function useColorWithMap($color, $mode: "light", $opacity: 100, $map: vars.$colors) {
+  // Validate parameters
+  $checkedMap: val.map($map, "useColorWithMap().map");
+
+  $colorValue: map.get($checkedMap, $color);
+  @return useColor($colorValue, $mode, $opacity);
+}
+
+// @mixin useColorProperty
+// --------------------------------------
+// Applies color properties with theme variant support while handling light/dark themes
+// and creating appropriate CSS selectors for different use cases.
+//
+// @param {String} $colorClass - The CSS class name to apply the color to (e.g., 'color-1', 'bg\:color-1')
+// @param {String|Null} $class - The CSS class prefix (e.g., 'bg', 'border', null for 'color')
+// @param {String} $property - The CSS property to set (e.g., 'color', 'background-color')
+// @param {Map} $color - The color map with light/dark variants
+// @param {Map} $map - The parent color map containing all colors
+// @param {Number} $opacity - Optional opacity value between 0-100 (default: 100)
+// @throws {Error} - If provided parameters fail validation through val.* functions
+//
+// @example scss
+//   // Apply primary color as text color with 50% opacity
+//   @include useColorProperty("color-1", null, "color", $primaryColor, $colorsMap, 50);
+//
+//   // Apply primary color as background with full opacity
+//   @include useColorProperty("bg\:color-1", "bg", "background-color", $primaryColor, $colorsMap);
+//
+// Generated Selectors:
+// Each call to this mixin generates three CSS selectors to support different theming approaches:
+//
+// 1. Parent/child relationship: `.light .className`, `.dark .className`
+//    For theme inheritance from parent elements
+//    Example: <div class="light"><span class="color-1">Themed text</span></div>
+//
+// 2. Modifier class: `.className.light`, `.className.dark`
+//    For direct theme application to the element itself
+//    Example: <span class="color-1 light">Themed text</span>
+//
+// 3. Prefixed class: `.light\:className`, `.dark\:className`
+//    For utility-first CSS approaches
+//    Example: <span class="light\:color-1">Themed text</span>
+//
+// Note: When light and dark variants are identical, a single class without theme
+// 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");
+
+  $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()");
+
+  @if $dark != $light {
+    @if (settings.$useColorsLightMode) {
+      .light .#{$colorClass},
+      .#{$colorClass}.light,
+      .light\:#{$colorClass} {
+        #{$property}: useColor($color, "light", $opacity);
+      }
+    }
+
+    @if (settings.$useColorsDarkMode) {
+      .dark .#{$colorClass},
+      .#{$colorClass}.dark,
+      .dark\:#{$colorClass} {
+        #{$property}: useColor($color, "dark", $opacity);
+      }
+    }
+  } @else {
+    .#{$colorClass} {
+      #{$property}: useColor($color, "light", $opacity);
+    }
+  }
+}
+
+// Use Colors Map ----- ----- ----- -----
+//
+// @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 {Boolean} $withOpacity - Whether to generate opacity variants (default: true)
+// @throws {Error} - If $map is not a valid map
+//
+// @example scss
+//   @include useColorsMap($themeColors);
+//   // Creates all color classes with theme support
+//   // Generated classes include:
+//   // .color-[colorName], .bg-color-[colorName], .border-color-[colorName]
+//   // With theme variants like .light, .dark
+//   // With optional opacity variants like :50, :75
+//   // With pseudo-class variants like :hover, :focus
+//
+@mixin useColorsMap($map: vars.$colors, $withOpacity: true) {
+  // Validate parameters
+  $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}");
+
+        @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
+            );
+          }
+        }
+
+        @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 {
+                @include useColorProperty(
+                  "#{$mainClass}#{\:}#{$opacity}#{\:}#{$pseudoClass}#{$pseudo}",
+                  $class,
+                  $property,
+                  $modes,
+                  $map,
+                  $opacity
+                );
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/scss/functions/_mediaQueries.scss

@@ -0,0 +1,128 @@
+@use "sass:map";
+@use "sass:string";
+@use "../settings/configs" as configs;
+@use "../settings/index" as settings;
+
+// Breakpoint Mixin
+// --------------------------------------
+// Generates a media query based on a breakpoint key and type (min/max).
+// If the key is not found or is null/empty (e.g., for default styles),
+// 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").
+//                                If null or an empty string, content is applied directly.
+//
+// @content - Styles to be applied within the media query or directly.
+//
+// @example scss
+//   .element {
+//     color: blue; // Default
+//
+//     @include mQ(min, "md") {
+//       color: red; // Applied when (min-width: md-breakpoint-value)
+//     }
+//
+//     @include mQ(max, "lg") {
+//       padding: 20px; // Applied when (max-width: lg-breakpoint-value)
+//     }
+//
+//     // Example for applying base styles (no media query)
+//     @include mQ(min, null) { // or @include mQ(min, "")
+//       font-size: 16px; // Applied directly
+//     }
+//   }
+//
+// @output css - Example output for .element
+//   .element {
+//     color: blue;
+//     font-size: 16px;
+//   }
+//   @media (min-width: 768px) { // Assuming 'md' is 768px
+//     .element {
+//       color: red;
+//     }
+//   }
+//   @media (max-width: 1024px) { // Assuming 'lg' is 1024px
+//     .element {
+//       padding: 20px;
+//     }
+//   }
+//
+@mixin mQ($type, $key) {
+  // Retrieve the size value from the breakpoints map using the provided key
+  $size: map.get(configs.$breakpoints, $key);
+
+  @if $size and $size > 0 and settings.$useMediaQueries {
+    // Check if a valid size value exists
+    // Generate the media query using the provided type and size
+    @media (string.unquote("#{$type}-width"): $size) {
+      @content; // Content to be included within the media query
+    }
+  } @else {
+    // If no valid size value exists, apply the content without a media query
+    @content;
+  }
+}
+// How to call
+// ex: color: mQ(min or max, xs/md/lg/xl/xxl) // Note: This comment seems to refer to an old way or is a general usage hint.
+
+// Multi Sizes Mixin
+// --------------------------------------
+// Iterates through media query sizes defined by the `multiSizes()` function
+// and applies content within the appropriate media query.
+// This mixin is designed to be used with `@content($size, $divider)`,
+// allowing the consuming code to generate responsive utility classes.
+//
+// @content {String} $size - The current breakpoint size key (e.g., "", "sm", "md").
+// @content {String} $divider - The class divider for the current size (e.g., "", ":").
+//
+// @example scss
+//   // In another file (e.g., _typographic.scss)
+//   @use "mediaQueries" as mQ;
+//   @use "configs";
+//
+//   @include mQ.multiSizes() using ($size, $divider) {
+//     $classPrefix: if($size, "#{$size}#{$divider}", "");
+//
+//     .#{$classPrefix}text-left {
+//       text-align: left if($size, !important, null);
+//     }
+//     .#{$classPrefix}text-center {
+//       text-align: center if($size, !important, null);
+//     }
+//   }
+//
+// @output css - Example output
+//   .text-left {
+//     text-align: left;
+//   }
+//   .text-center {
+//     text-align: center;
+//   }
+//
+//   @media (min-width: 768px) { // Assuming 'md' is 768px
+//     .md\\:text-left {
+//       text-align: left !important;
+//     }
+//     .md\\:text-center {
+//       text-align: center !important;
+//     }
+//   }
+//
+@mixin multiSizes() {
+  @if settings.$useMediaQueries {
+    @each $size, $value in configs.$breakpoints {
+      $divider: if($size, #{\:}, "");
+
+      @include mQ(min, $size) {
+        @content ($size, $divider);
+      }
+    }
+  } @else {
+    $size: null;
+    $divider: "";
+
+    @content ($size, $divider);
+  }
+}