beathers 5.1.0 → 5.1.1

package/src/scss/settings/_defaults.scss

@@ -1,251 +1,251 @@
-// Variables
-// ---------
-// Core design system variables for Beathers.
-// Colors, fonts, and other configurable options.
-// Uses Sass default flag to allow overriding with @use ... with.
-
-// Colors
-// ------
-// 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,
-  ),
-) !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;
-
-// Font families map with language variants, unicode ranges and font weights
-// Example:
-// $fonts: (
-//    "fontKey": ( // String/Required | Font key i.e. "font1", "font2", etc.
-//       "weights": ("thin", "extra-light", "light", "regular", "medium", "semibold", "bold", "extra-bold", "black"),
-//                  Optional: Font weights, default to ("light", "regular", "medium", "bold")
-//       "styles": ("normal", "italic", "oblique"),
-//                  Optional: Font styles, default to ("normal")
-//       "variants": ( // Map/Required | Font variants
-//         "language": ( // String/Required i.e. "en", "ar"
-//           "title": string, // Required: Font family name i.e. "roboto"
-//           "unicode": string/null,  // Optional: Unicode range i.e. "U+0000-00FF...", default to null
-//           "format": string, // Optional: Font format i.e. "woff2" or "woff", default to "woff2"
-//           "isLocal": boolean, // Optional: Use local font files i.e. true or false, default to true
-//           "url": string, // Use it when "isLocal" is false
-//                  Optional: External font URL i.e. "https://fonts.googleapis.com/css2?family=Roboto&display=swap"
-//                  default to null
-//         )
-//       )
-// )
-$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",
-      ),
-    ),
-  ),
-) !default;
+// Variables
+// ---------
+// Core design system variables for Beathers.
+// Colors, fonts, and other configurable options.
+// Uses Sass default flag to allow overriding with @use ... with.
+
+// Colors
+// ------
+// 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,
+  ),
+) !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;
+
+// Font families map with language variants, unicode ranges and font weights
+// Example:
+// $fonts: (
+//    "fontKey": ( // String/Required | Font key i.e. "font1", "font2", etc.
+//       "weights": ("thin", "extra-light", "light", "regular", "medium", "semibold", "bold", "extra-bold", "black"),
+//                  Optional: Font weights, default to ("light", "regular", "medium", "bold")
+//       "styles": ("normal", "italic", "oblique"),
+//                  Optional: Font styles, default to ("normal")
+//       "variants": ( // Map/Required | Font variants
+//         "language": ( // String/Required i.e. "en", "ar"
+//           "title": string, // Required: Font family name i.e. "roboto"
+//           "unicode": string/null,  // Optional: Unicode range i.e. "U+0000-00FF...", default to null
+//           "format": string, // Optional: Font format i.e. "woff2" or "woff", default to "woff2"
+//           "isLocal": boolean, // Optional: Use local font files i.e. true or false, default to true
+//           "url": string, // Use it when "isLocal" is false
+//                  Optional: External font URL i.e. "https://fonts.googleapis.com/css2?family=Roboto&display=swap"
+//                  default to null
+//         )
+//       )
+// )
+$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",
+      ),
+    ),
+  ),
+) !default;

package/src/scss/settings/_index.scss

@@ -1,68 +1,68 @@
-// Main settings ----- ----- ----- -----
-// Enables or disables media queries.
-$useMediaQueries: false !default;
-$useIcons: true !default;
-
-// Typographic settings ----- ----- ----- -----
-// Enables or disables font family utilities.
-$useFontFamilies: true !default;
-// Enables or disables font size utilities.
-$useFontSizes: true !default;
-// Enables or disables font shape utilities (transform, decoration, styles).
-$useFontShapes: true !default;
-// Enables or disables text alignment utilities.
-$useTextAligns: true !default;
-// Enables or disables text truncation utilities.
-$useTextTruncate: true !default;
-
-// Colors settings ----- ----- ----- -----
-// Enables or disables color utilities.
-$useColors: true !default;
-// Enables or disables color opacity utilities.
-$useColorsOpacities: true !default;
-// Enables or disables light mode color variants.
-$useColorsLightMode: true !default;
-// Enables or disables dark mode color variants.
-$useColorsDarkMode: true !default;
-// Enables or disables current color usage.
-$useCurrentColors: true !default;
-// Enables or disables root color definitions.
-$useRootColors: true !default;
-
-// Grid settings ----- ----- ----- -----
-// Enables or disables grid utilities.
-$useGrid: true !default;
-// Enables or disables flexbox utilities.
-$useFlex: true !default;
-
-// Shapes settings ----- ----- ----- -----
-// Enables or disables transition utilities.
-$useTransitions: true !default;
-// Enables or disables wrapper utilities.
-$useWrappers: true !default;
-// Enables or disables shadow utilities.
-$useShadows: true !default;
-// Enables or disables display utilities.
-$useDisplays: true !default;
-// Enables or disables overflow utilities.
-$useOverflows: true !default;
-// Enables or disables opacity utilities.
-$useOpacities: true !default;
-// Enables or disables blur utilities.
-$useBlur: true !default;
-// Enables or disables object-fit utilities.
-$useObjectFits: true !default;
-// Enables or disables position utilities.
-$usePositions: true !default;
-// Enables or disables inset utilities.
-$useInsets: true !default;
-// Enables or disables size utilities (width, height).
-$useSizes: true !default;
-// Enables or disables gutter utilities (padding, margin, gap).
-$useGutters: true !default;
-// Enables or disables border utilities.
-$useBorders: true !default;
-// Enables or disables text border utilities.
-$useTextBorders: true !default;
-// Enables or disables border-radius utilities.
-$useRadius: true !default;
+// Main settings ----- ----- ----- -----
+// Enables or disables media queries.
+$useMediaQueries: false !default;
+$useIcons: true !default;
+
+// Typographic settings ----- ----- ----- -----
+// Enables or disables font family utilities.
+$useFontFamilies: true !default;
+// Enables or disables font size utilities.
+$useFontSizes: true !default;
+// Enables or disables font shape utilities (transform, decoration, styles).
+$useFontShapes: true !default;
+// Enables or disables text alignment utilities.
+$useTextAligns: true !default;
+// Enables or disables text truncation utilities.
+$useTextTruncate: true !default;
+
+// Colors settings ----- ----- ----- -----
+// Enables or disables color utilities.
+$useColors: true !default;
+// Enables or disables color opacity utilities.
+$useColorsOpacities: true !default;
+// Enables or disables light mode color variants.
+$useColorsLightMode: true !default;
+// Enables or disables dark mode color variants.
+$useColorsDarkMode: true !default;
+// Enables or disables current color usage.
+$useCurrentColors: true !default;
+// Enables or disables root color definitions.
+$useRootColors: true !default;
+
+// Grid settings ----- ----- ----- -----
+// Enables or disables grid utilities.
+$useGrid: true !default;
+// Enables or disables flexbox utilities.
+$useFlex: true !default;
+
+// Shapes settings ----- ----- ----- -----
+// Enables or disables transition utilities.
+$useTransitions: true !default;
+// Enables or disables wrapper utilities.
+$useWrappers: true !default;
+// Enables or disables shadow utilities.
+$useShadows: true !default;
+// Enables or disables display utilities.
+$useDisplays: true !default;
+// Enables or disables overflow utilities.
+$useOverflows: true !default;
+// Enables or disables opacity utilities.
+$useOpacities: true !default;
+// Enables or disables blur utilities.
+$useBlur: true !default;
+// Enables or disables object-fit utilities.
+$useObjectFits: true !default;
+// Enables or disables position utilities.
+$usePositions: true !default;
+// Enables or disables inset utilities.
+$useInsets: true !default;
+// Enables or disables size utilities (width, height).
+$useSizes: true !default;
+// Enables or disables gutter utilities (padding, margin, gap).
+$useGutters: true !default;
+// Enables or disables border utilities.
+$useBorders: true !default;
+// Enables or disables text border utilities.
+$useTextBorders: true !default;
+// Enables or disables border-radius utilities.
+$useRadius: true !default;