beathers 5.0.0

package/src/scss/settings/_configs.scss

@@ -0,0 +1,366 @@
+// Core configuration maps and variables for the Beathers Design System.
+
+// Defines CSS properties for color utilities.
+$colorsPropertiesMap: (
+  null: color,
+  bg: background-color,
+  border: border-color,
+  fill: fill,
+  stroke: stroke,
+  text-stroke: -webkit-text-stroke-color,
+);
+
+// Defines pseudo-classes for color variants.
+$colorsPseudoMap: (
+  'placeholder': '::placeholder',
+  'hover': ':hover',
+  'focus': ':focus',
+);
+
+// Defines the default font stack.
+$defaultFontFamilies:
+  system-ui,
+  -apple-system,
+  Roboto,
+  Arial,
+  sans-serif !default;
+
+// Defines available font weights.
+$fontWeightsValues: (
+  'thin': 100,
+  'extra-light': 200,
+  'light': 300,
+  'regular': 400,
+  'medium': 500,
+  'semibold': 600,
+  'bold': 700,
+  'extra-bold': 800,
+  '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': (
+    uppercase,
+    lowercase,
+    capitalize,
+  ),
+  'decoration': (
+    underline,
+    line-through,
+  ),
+  'styles': (
+    wavy,
+    double,
+    dotted,
+    dashed,
+  ),
+);
+
+// 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);
+
+// Defines overflow directions.
+$overflowsDirections: (null, 'x', 'y');
+// Defines overflow behaviors.
+$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,
+  auto,
+  cell,
+  context-menu,
+  copy,
+  crosshair,
+  default,
+  grab,
+  grabbing,
+  help,
+  move,
+  no-drop,
+  none,
+  not-allowed,
+  pointer,
+  progress,
+  col-resize,
+  row-resize,
+  text,
+  wait,
+  zoom-in,
+  zoom-out
+);
+
+// Defines shadow presets.
+$shadows: (
+  'light': (
+    x: 0,
+    y: 2,
+    blur: 5,
+    spread: 0,
+    opacity: 0.15,
+  ),
+  'soft': (
+    x: 2,
+    y: 2,
+    blur: 12,
+    spread: 0,
+    opacity: 0.2,
+  ),
+  'medium': (
+    x: 0,
+    y: 10,
+    blur: 20,
+    spread: 0,
+    opacity: 0.2,
+  ),
+  'solid': (
+    x: 0,
+    y: 4,
+    blur: 10,
+    spread: 0,
+    opacity: 0.3,
+  ),
+  'ambient': (
+    x: 0,
+    y: 0,
+    blur: 40,
+    spread: 10,
+    opacity: 0.1,
+  ),
+  'flat': (
+    x: 0,
+    y: 6,
+    blur: 6,
+    spread: 4,
+    opacity: 0.2,
+  ),
+  'floating': (
+    x: 0,
+    y: 20,
+    blur: 40,
+    spread: 0,
+    opacity: 0.15,
+  ),
+);
+
+// Defines utility classes for clearing properties.
+$clearanceOptions: (
+  no-bg: (
+    background: unset,
+    background-color: unset,
+  ),
+  no-border: (
+    border: unset,
+  ),
+  no-radius: (
+    border-radius: unset,
+  ),
+  no-events: (
+    pointer-events: none,
+  ),
+  no-position: (
+    position: unset,
+  ),
+);
+
+// Defines available position values.
+$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,
+  'min#{\:}w': min-width,
+  'max#{\:}w': max-width,
+  'h': height,
+  'min#{\:}h': min-height,
+  'max#{\:}h': max-height,
+);
+
+// Defines properties for padding, margin and gap utilities.
+$gutters: (
+  p: padding,
+  px: padding-inline,
+  py: padding-block,
+  ps: padding-inline-start,
+  pe: padding-inline-end,
+  pt: padding-block-start,
+  pb: padding-block-end,
+  m: margin,
+  mx: margin-inline,
+  my: margin-block,
+  ms: margin-inline-start,
+  me: margin-inline-end,
+  mt: margin-block-start,
+  mb: margin-block-end,
+  g: gap,
+  gx: column-gap,
+  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,
+  'top': border-block-start,
+  'bottom': border-block-end,
+  'start': border-inline-start,
+  'end': border-inline-end,
+);
+
+// Defines available border-radius values.
+$radiuses: (5, 10, 15, 25) !default;
+
+// Defines border-radius direction properties.
+$radiusDirection: (
+  null: (
+    border-radius,
+  ),
+  'top': (
+    border-start-start-radius,
+    border-start-end-radius,
+  ),
+  'bottom': (
+    border-end-start-radius,
+    border-end-end-radius,
+  ),
+  'start': (
+    border-start-start-radius,
+    border-end-start-radius,
+  ),
+  'end': (
+    border-start-end-radius,
+    border-end-end-radius,
+  ),
+  'top-start': (
+    border-start-start-radius,
+  ),
+  'top-end': (
+    border-start-end-radius,
+  ),
+  'bottom-start': (
+    border-end-start-radius,
+  ),
+  'bottom-end': (
+    border-end-end-radius,
+  ),
+);
+
+$justify: (
+  justify: (
+    content: (
+      start,
+      center,
+      end,
+      between,
+      around,
+      evenly,
+    ),
+    self: (
+      auto,
+      center,
+      stretch,
+    ),
+  ),
+  align: (
+    content: (
+      start,
+      center,
+      end,
+      around,
+      between,
+      stretch,
+    ),
+    items: (
+      start,
+      center,
+      end,
+      stretch,
+      baseline,
+    ),
+    self: (
+      auto,
+      start,
+      center,
+      end,
+      stretch,
+      baseline,
+    ),
+  ),
+);

package/src/scss/settings/_defaults.scss

@@ -0,0 +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;

package/src/scss/settings/_index.scss

@@ -0,0 +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;