@amelharrak/eldo-ui 1.0.1

package/src/scss/utilities/_api.scss

@@ -0,0 +1,66 @@
+@use "sass:map";
+@use "sass:meta";
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+@use "map" as *;
+
+// Loop over each breakpoint
+@each $breakpoint in map.keys($grid-breakpoints) {
+
+    // Generate media query content if breakpoint is not xs
+    @include media-up($breakpoint) {
+        $infix: "";
+
+        @if $breakpoint !="xs" {
+            $infix: "-#{$breakpoint}";
+        }
+
+        // Loop over each utility property in the map
+        @each $key, $utility in $utilities {
+
+            // Check if utility is meant to be responsive or if it's XS (base)
+            @if (map.get($utility, responsive) or $infix =="") {
+
+                $values: map.get($utility, values);
+                $property: map.get($utility, property);
+
+                $property-class: $key;
+
+                @if map.has-key($utility, class) {
+                    $property-class: map.get($utility, class);
+                }
+
+                $state: null;
+
+                @if map.has-key($utility, state) {
+                    $state: map.get($utility, state);
+                }
+
+                // Assuming values is a map (key: value)
+                @if meta.type-of($values)=="map" {
+                    @each $class-modifier, $value in $values {
+                        // Create the class name
+                        $property-class-modifier: "";
+
+                        @if $class-modifier !=null {
+                            $property-class-modifier: "-" + $class-modifier;
+                        }
+
+                        // Output the class
+                        .#{$property-class}#{$infix}#{$property-class-modifier} {
+                            #{$property}: $value !important;
+                        }
+                    }
+                }
+
+                @else if meta.type-of($values)=="list" {
+                    @each $value in $values {
+                        .#{$property-class}#{$infix}-#{$value} {
+                            #{$property}: $value !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/src/scss/utilities/_colors.scss

@@ -0,0 +1,32 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/functions" as *;
+
+$theme-colors: (
+    "primary": $primary,
+    "secondary": $secondary,
+    "success": $success,
+    "info": $info,
+    "warning": $warning,
+    "danger": $danger,
+    "light": $light,
+    "dark": $dark
+);
+
+@each $name, $value in $theme-colors {
+    .text-#{$name} {
+        color: var(--e-#{$name}) !important;
+    }
+
+    .bg-#{$name} {
+        background-color: var(--e-#{$name}) !important;
+        color: color-contrast($value);
+    }
+}
+
+.text-white {
+    color: #fff !important;
+}
+
+.text-body {
+    color: var(--e-body-color) !important;
+}

package/src/scss/utilities/_display.scss

@@ -0,0 +1,70 @@
+@use "sass:map";
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+@each $breakpoint in map.keys($grid-breakpoints) {
+    $infix: "";
+
+    @if $breakpoint !=xs {
+        $infix: "-#{$breakpoint}";
+    }
+
+    @include media-up($breakpoint) {
+        .d#{$infix}-none {
+            display: none !important;
+        }
+
+        .d#{$infix}-block {
+            display: block !important;
+        }
+
+        .d#{$infix}-flex {
+            display: flex !important;
+        }
+
+        .d#{$infix}-inline {
+            display: inline !important;
+        }
+
+        .d#{$infix}-inline-block {
+            display: inline-block !important;
+        }
+
+        // Flex utilities
+        .flex#{$infix}-row {
+            flex-direction: row !important;
+        }
+
+        .flex#{$infix}-column {
+            flex-direction: column !important;
+        }
+
+        .justify-content#{$infix}-start {
+            justify-content: flex-start !important;
+        }
+
+        .justify-content#{$infix}-center {
+            justify-content: center !important;
+        }
+
+        .justify-content#{$infix}-end {
+            justify-content: flex-end !important;
+        }
+
+        .justify-content#{$infix}-between {
+            justify-content: space-between !important;
+        }
+
+        .align-items#{$infix}-start {
+            align-items: flex-start !important;
+        }
+
+        .align-items#{$infix}-center {
+            align-items: center !important;
+        }
+
+        .align-items#{$infix}-end {
+            align-items: flex-end !important;
+        }
+    }
+}

package/src/scss/utilities/_glass.scss

@@ -0,0 +1,32 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.glass {
+    background-color: rgba($white, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba($white, 0.2);
+}
+
+.glass-dark {
+    background-color: rgba($dark, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba($white, 0.1);
+}
+
+.glass-primary {
+    background-color: rgba($primary, 0.2);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba($primary, 0.3);
+}
+
+// Border only glass
+.glass-border {
+    border-color: rgba($white, 0.2);
+
+    &:hover {
+        border-color: rgba($white, 0.4);
+    }
+}

package/src/scss/utilities/_helpers.scss

@@ -0,0 +1,16 @@
+//
+// Screenreaders
+//
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+}

package/src/scss/utilities/_map.scss

@@ -0,0 +1,224 @@
+@use "sass:map";
+@use "../abstracts/variables" as *;
+
+$utilities: (
+    // Spacing
+    "margin": (responsive: true,
+        property: margin,
+        class: m,
+        values: map.merge($spacers, (auto: auto))),
+    "margin-x": (responsive: true,
+        property: margin-inline,
+        class: mx,
+        values: map.merge($spacers, (auto: auto))),
+    "margin-y": (responsive: true,
+        property: margin-block,
+        class: my,
+        values: map.merge($spacers, (auto: auto))),
+    "margin-top": (responsive: true,
+        property: margin-top,
+        class: mt,
+        values: map.merge($spacers, (auto: auto))),
+    "margin-end": (responsive: true,
+        property: margin-right,
+        class: me,
+        values: map.merge($spacers, (auto: auto))),
+    "margin-bottom": (responsive: true,
+        property: margin-bottom,
+        class: mb,
+        values: map.merge($spacers, (auto: auto))),
+    "margin-start": (responsive: true,
+        property: margin-left,
+        class: ms,
+        values: map.merge($spacers, (auto: auto))),
+    // Padding
+    "padding": (responsive: true,
+        property: padding,
+        class: p,
+        values: $spacers ),
+    "padding-x": (responsive: true,
+        property: padding-inline,
+        class: px,
+        values: $spacers ),
+    "padding-y": (responsive: true,
+        property: padding-block,
+        class: py,
+        values: $spacers ),
+    "padding-top": (responsive: true,
+        property: padding-top,
+        class: pt,
+        values: $spacers ),
+    "padding-end": (responsive: true,
+        property: padding-right,
+        class: pe,
+        values: $spacers ),
+    "padding-bottom": (responsive: true,
+        property: padding-bottom,
+        class: pb,
+        values: $spacers ),
+    "padding-start": (responsive: true,
+        property: padding-left,
+        class: ps,
+        values: $spacers ),
+    // Display
+    "display": (responsive: true,
+        property: display,
+        class: d,
+        values: (none: none,
+            inline: inline,
+            inline-block: inline-block,
+            block: block,
+            grid: grid,
+            flex: flex,
+            inline-flex: inline-flex)),
+    // Flex
+    "flex-direction": (responsive: true,
+        property: flex-direction,
+        class: flex,
+        values: (row: row,
+            column: column,
+            row-reverse: row-reverse,
+            column-reverse: column-reverse)),
+    "flex-grow": (responsive: true,
+        property: flex-grow,
+        class: flex,
+        values: (grow-0: 0,
+            grow-1: 1)),
+    "justify-content": (responsive: true,
+        property: justify-content,
+        values: (start: flex-start,
+            end: flex-end,
+            center: center,
+            between: space-between,
+            around: space-around,
+            evenly: space-evenly)),
+    "align-items": (responsive: true,
+        property: align-items,
+        values: (start: flex-start,
+            end: flex-end,
+            center: center,
+            baseline: baseline,
+            stretch: stretch)),
+    "align-self": (responsive: true,
+        property: align-self,
+        values: (auto: auto,
+            start: flex-start,
+            end: flex-end,
+            center: center,
+            baseline: baseline,
+            stretch: stretch)),
+    // Gap
+    "gap": (responsive: true,
+        property: gap,
+        class: gap,
+        values: $spacers ),
+    // Sizing
+    "width": (responsive: true,
+        property: width,
+        class: w,
+        values: (25: 25%,
+            50: 50%,
+            75: 75%,
+            100: 100%,
+            auto: auto)),
+    "height": (responsive: true,
+        property: height,
+        class: h,
+        values: (25: 25%,
+            50: 50%,
+            75: 75%,
+            100: 100%,
+            auto: auto)),
+    "viewport-height": (responsive: true,
+        property: height,
+        class: vh,
+        values: (100: 100vh)),
+    "viewport-width": (responsive: true,
+        property: width,
+        class: vw,
+        values: (100: 100vw)),
+    // Text
+    "text-align": (responsive: true,
+        property: text-align,
+        class: text,
+        values: (start: left,
+            center: center,
+            end: right)),
+    "font-weight": (property: font-weight,
+        class: fw,
+        values: (light: $font-weight-light,
+            normal: $font-weight-normal,
+            medium: $font-weight-medium,
+            bold: $font-weight-bold,
+            semibold: $font-weight-semibold )),
+    "text-transform": (property: text-transform,
+        class: text,
+        values: lowercase uppercase capitalize),
+    "text-decoration": (property: text-decoration,
+        class: text,
+        values: none underline line-through),
+    "font-size": (property: font-size,
+        class: fs,
+        values: (1: $h1-font-size,
+            2: $h2-font-size,
+            3: $h3-font-size,
+            4: $h4-font-size,
+            5: $h5-font-size,
+            6: $h6-font-size )),
+    // Borders
+    "border": (property: border,
+        values: (null: 1px solid $gray-200,
+            0: 0)),
+    "border-top": (property: border-top,
+        values: (null: 1px solid $gray-200,
+            0: 0)),
+    "border-bottom": (property: border-bottom,
+        values: (null: 1px solid $gray-200,
+            0: 0)),
+    "rounded": (property: border-radius,
+        class: rounded,
+        values: (null: $border-radius,
+            0: 0,
+            1: $border-radius-sm,
+            2: $border-radius,
+            3: $border-radius-lg,
+            circle: 50%,
+            pill: 50rem)),
+    // Position
+    "position": (property: position,
+        values: static relative absolute fixed sticky),
+    "top": (property: top,
+        values: (0: 0,
+            50: 50%,
+            100: 100%)),
+    "bottom": (property: bottom,
+        values: (0: 0,
+            50: 50%,
+            100: 100%)),
+    "start": (property: left,
+        class: start,
+        values: (0: 0,
+            50: 50%,
+            100: 100%)),
+    "end": (property: right,
+        class: end,
+        values: (0: 0,
+            50: 50%,
+            100: 100%)),
+    "translate-middle": (property: transform,
+        class: translate,
+        values: (middle: translate(-50%, -50%),
+            middle-x: translateX(-50%),
+            middle-y: translateY(-50%))),
+    // Shadows
+    "shadow": (property: box-shadow,
+        class: shadow,
+        values: (null: $box-shadow,
+            sm: $box-shadow-sm,
+            lg: $box-shadow-lg,
+            none: none)),
+    // Float
+    "float": (responsive: true,
+        property: float,
+        values: start end none)
+);

package/src/scss/utilities/_spacing.scss

@@ -0,0 +1,58 @@
+@use "sass:map";
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+$utilities-spacing: (
+    "m": "margin",
+    "p": "padding",
+    "mt": "margin-top",
+    "mb": "margin-bottom",
+    "ms": "margin-left",
+    "me": "margin-right",
+    "mx": "margin-inline",
+    "my": "margin-block",
+    "pt": "padding-top",
+    "pb": "padding-bottom",
+    "ps": "padding-left",
+    "pe": "padding-right",
+    "px": "padding-inline",
+    "py": "padding-block"
+);
+
+@each $breakpoint in map.keys($grid-breakpoints) {
+    $infix: "";
+
+    @if $breakpoint !=xs {
+        $infix: "-#{$breakpoint}";
+    }
+
+    @include media-up($breakpoint) {
+        @each $key, $prop in $utilities-spacing {
+            @each $size-key, $size-val in $spacers {
+                .#{$key}#{$infix}-#{$size-key} {
+                    #{$prop}: $size-val !important;
+                }
+            }
+        }
+
+        .m#{$infix}-auto {
+            margin: auto !important;
+        }
+
+        .mt#{$infix}-auto {
+            margin-top: auto !important;
+        }
+
+        .mb#{$infix}-auto {
+            margin-bottom: auto !important;
+        }
+
+        .ms#{$infix}-auto {
+            margin-left: auto !important;
+        }
+
+        .me#{$infix}-auto {
+            margin-right: auto !important;
+        }
+    }
+}