beathers 5.7.6 → 5.9.1

package/scss/settings/_defaults.scss

@@ -1,214 +1,209 @@
-// 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,
-  ),
-) !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: (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:
-// $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: () !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;
-
-// Glassmorphism settings
-$glassBlur: 8px !default;
-// Glassmorphism color settings for light and dark modes
-$glassColor: (
-  'light': #ffffff,
-  'dark': #000000,
-) !default;
-// Glassmorphism border thickness
-$glassBorderThickness: 1px !default;
-// Glassmorphism border 1 settings for light and dark modes
-$glassBorder1Color: (
-  'light': #e6e6e6,
-  'dark': #303030,
-) !default;
-// Glassmorphism border 2 settings for light and dark modes
-$glassBorder2Color: (
-  'light': #e6e6e6,
-  'dark': #303030,
-) !default;
-// Glassmorphism light angle
-$glassLightAngle: 45deg !default;
-
-// Loader/Skeleton settings
-// Loader main color settings for light and dark modes
-$loaderColorMain: (
-  'light': #ffffff,
-  'dark': #1a1d21,
-) !default;
-// Loader second color settings for light and dark modes
-$loaderColorSecond: (
-  'light': #f4f4f4,
-  'dark': #2e2e3f,
-) !default;
-// Loader duration
-$loaderDuration: 2s !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
+  )
+) !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: (1, 2, 3) !default;
+
+// Defines the default font stack.
+$defaultFontFamilies: system-ui, 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:
+// $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: () !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;
+
+// Glassmorphism settings
+$glassBlur: 8px !default;
+// Glassmorphism color settings for light and dark modes
+$glassColor: (
+  'light': #ffffff,
+  'dark': #000000
+) !default;
+// Glassmorphism border thickness
+$glassBorderThickness: 1px !default;
+// Glassmorphism border 1 settings for light and dark modes
+$glassBorder1Color: (
+  'light': #e6e6e6,
+  'dark': #303030
+) !default;
+// Glassmorphism border 2 settings for light and dark modes
+$glassBorder2Color: (
+  'light': #e6e6e6,
+  'dark': #303030
+) !default;
+// Glassmorphism light angle
+$glassLightAngle: 45deg !default;
+
+// Loader/Skeleton settings
+// Loader main color settings for light and dark modes
+$loaderColorMain: (
+  'light': #ffffff,
+  'dark': #1a1d21
+) !default;
+// Loader second color settings for light and dark modes
+$loaderColorSecond: (
+  'light': #f4f4f4,
+  'dark': #2e2e3f
+) !default;
+// Loader duration
+$loaderDuration: 2s !default;

package/scss/settings/_index.scss

@@ -1,90 +1,90 @@
-// Main settings ----- ----- ----- -----
-
-// Typographic settings ----- ----- ----- -----
-// Enables or disables font family utilities.
-$useFontFamilies: true !default;
-$useFontFamiliesMediaQueries: false !default;
-// Enables or disables font size utilities.
-$useFontSizes: true !default;
-$useFontSizesMediaQueries: true !default;
-// Enables or disables font shape utilities (transform, decoration, styles).
-$useFontShapes: true !default;
-$useFontShapesMediaQueries: false !default;
-// Enables or disables text alignment utilities.
-$useTextAligns: true !default;
-$useTextAlignsMediaQueries: true !default;
-// Enables or disables text truncation utilities.
-$useTextTruncate: true !default;
-$useTextTruncateMediaQueries: 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 ----- ----- ----- -----
-$useGridMediaQueries: true !default;
-// Enables or disables grid utilities.
-$useGrid: true !default;
-// Enables or disables flexbox utilities.
-$useFlex: true !default;
-
-// Shapes settings ----- ----- ----- -----
-// Enables or disables wrapper utilities.
-$useWrappers: true !default;
-// Enables or disables shadow utilities.
-$useShadows: true !default;
-$useShadowsMediaQueries: false !default;
-// Enables or disables display utilities.
-$useDisplays: true !default;
-$useDisplaysMediaQueries: false !default;
-// Enables or disables overflow utilities.
-$useOverflows: true !default;
-$useOverflowsMediaQueries: false !default;
-// Enables or disables opacity utilities.
-$useOpacities: true !default;
-$useOpacitiesMediaQueries: false !default;
-// Enables or disables blur utilities.
-$useBlur: true !default;
-$useBlurMediaQueries: false !default;
-// Enables or disables object-fit utilities.
-$useObjectFits: true !default;
-$useObjectFitsMediaQueries: false !default;
-// Enables or disables position utilities.
-$usePositions: true !default;
-$usePositionsMediaQueries: false !default;
-// Enables or disables inset utilities.
-$useInsets: true !default;
-$useInsetsMediaQueries: false !default;
-// Enables or disables size utilities (width, height).
-$useSizes: true !default;
-$useSizesMediaQueries: true !default;
-// Enables or disables gutter utilities (padding, margin, gap).
-$useGutters: true !default;
-$useGuttersMediaQueries: true !default;
-// Enables or disables border utilities.
-$useBorders: true !default;
-$useBordersMediaQueries: false !default;
-// Enables or disables text border utilities.
-$useTextBorders: true !default;
-$useTextBordersMediaQueries: false !default;
-// Enables or disables border-radius utilities.
-$useRadius: true !default;
-$useRadiusMediaQueries: false !default;
-// Enables or disables glass effect utilities.
-$useGlass: false !default;
-// Enables or disables loader/skeleton utilities.
-$useLoader: false !default;
-// Enables or disables dialog/modal utilities.
-$useDialog: false !default;
-// Enables or disables button utilities.
-$useButton: false !default;
+// Main settings ----- ----- ----- -----
+
+// Typographic settings ----- ----- ----- -----
+// Enables or disables font family utilities.
+$useFontFamilies: true !default;
+$useFontFamiliesMediaQueries: false !default;
+// Enables or disables font size utilities.
+$useFontSizes: true !default;
+$useFontSizesMediaQueries: true !default;
+// Enables or disables font shape utilities (transform, decoration, styles).
+$useFontShapes: true !default;
+$useFontShapesMediaQueries: false !default;
+// Enables or disables text alignment utilities.
+$useTextAligns: true !default;
+$useTextAlignsMediaQueries: true !default;
+// Enables or disables text truncation utilities.
+$useTextTruncate: true !default;
+$useTextTruncateMediaQueries: 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 ----- ----- ----- -----
+$useGridMediaQueries: true !default;
+// Enables or disables grid utilities.
+$useGrid: true !default;
+// Enables or disables flexbox utilities.
+$useFlex: true !default;
+
+// Shapes settings ----- ----- ----- -----
+// Enables or disables wrapper utilities.
+$useWrappers: true !default;
+// Enables or disables shadow utilities.
+$useShadows: true !default;
+$useShadowsMediaQueries: false !default;
+// Enables or disables display utilities.
+$useDisplays: true !default;
+$useDisplaysMediaQueries: false !default;
+// Enables or disables overflow utilities.
+$useOverflows: true !default;
+$useOverflowsMediaQueries: false !default;
+// Enables or disables opacity utilities.
+$useOpacities: true !default;
+$useOpacitiesMediaQueries: false !default;
+// Enables or disables blur utilities.
+$useBlur: true !default;
+$useBlurMediaQueries: false !default;
+// Enables or disables object-fit utilities.
+$useObjectFits: true !default;
+$useObjectFitsMediaQueries: false !default;
+// Enables or disables position utilities.
+$usePositions: true !default;
+$usePositionsMediaQueries: false !default;
+// Enables or disables inset utilities.
+$useInsets: true !default;
+$useInsetsMediaQueries: false !default;
+// Enables or disables size utilities (width, height).
+$useSizes: true !default;
+$useSizesMediaQueries: true !default;
+// Enables or disables gutter utilities (padding, margin, gap).
+$useGutters: true !default;
+$useGuttersMediaQueries: true !default;
+// Enables or disables border utilities.
+$useBorders: true !default;
+$useBordersMediaQueries: false !default;
+// Enables or disables text border utilities.
+$useTextBorders: true !default;
+$useTextBordersMediaQueries: false !default;
+// Enables or disables border-radius utilities.
+$useRadius: true !default;
+$useRadiusMediaQueries: false !default;
+// Enables or disables glass effect utilities.
+$useGlass: false !default;
+// Enables or disables loader/skeleton utilities.
+$useLoader: false !default;
+// Enables or disables dialog/modal utilities.
+$useDialog: false !default;
+// Enables or disables button utilities.
+$useButton: false !default;