@avenirs-esr/avenirs-dsav 0.1.108 → 0.1.109

package/src/styles/utilities/_layout.scss

@@ -0,0 +1,142 @@
+@use '../core/namespace' as *;
+@use '../mixins/responsive-utility' as *;
+@use '../settings/breakpoints' as bp;
+@use '../core/spacing' as sp;
+@use "sass:map";
+
+// === Containers ===
+$container-paddings: (
+  sm: sm,
+  md: sm,
+  lg: md,
+  xl: md
+);
+
+// === Base container ===
+// Ex: .av-container, .av-container-fluid
+@include ns("container") {
+  max-width: 90rem;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--spacing-sm);
+  padding-right: var(--spacing-sm);
+
+  &-fluid {
+    max-width: none;
+    padding-left: var(--spacing-none);
+    padding-right: var(--spacing-none);
+    overflow: hidden;
+  }
+}
+
+// === Responsive containers ===
+// Ex: .av-container--md / .av-container--lg
+@each $bp-name, $bp-value in bp.$breakpoints {
+  @media (min-width: #{$bp-value}) {
+    @include ns("container--#{$bp-name}") {
+      width: 100%;
+      max-width: #{$bp-value};
+      margin-left: auto;
+      margin-right: auto;
+      padding-left: var(--spacing-#{map.get($container-paddings, $bp-name)});
+      padding-right: var(--spacing-#{map.get($container-paddings, $bp-name)});
+    }
+  }
+}
+
+// === Rows ===
+@include responsive-utility("row", (
+  display: flex,
+  flex-direction: row
+));
+
+// === Columns ===
+@include responsive-utility("col", (
+  display: flex,
+  flex-direction: column
+));
+
+// === Flex wrap ===
+@include responsive-utility("wrap", (
+  flex-wrap: wrap
+));
+@include responsive-utility("nowrap", (
+  flex-wrap: nowrap
+));
+
+// === Accessibility ===
+// Ex: .av-sr-only / .av-sr-only--sm / .av-sr-only--md / .av-sr-only--lg / .av-sr-only--xl
+@include responsive-utility("sr-only", (
+  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
+));
+
+// === Visibility classes ===
+// Ex: .av-hidden / .av-hidden--md / .av-unhidden / .av-unhidden--lg
+@include responsive-utility("hidden", (
+  display: none !important
+));
+@include responsive-utility("unhidden", (
+  display: inherit !important
+));
+
+// === Gapped layouts ===
+// Ex: .av-gap-sm / .av-gap-lg / .av-gap-lg--lg
+@each $size, $value in sp.$spacing {
+  @include responsive-utility("gap-#{$size}", (
+    gap: var(--spacing-#{$size})
+  ));
+}
+
+// === Flex fill class ===
+// Ex: .av-flex-fill / .av-flex-fill--md
+@include responsive-utility("flex-fill", (
+  flex: 1 1 0%
+));
+
+// === Full width/height classes ===
+// Ex: .av-w-full / .av-h-full / .av-w-full--lg / .av-h-full--md
+@include responsive-utility("w-full", (
+  width: 100%
+));
+@include responsive-utility("h-full", (
+  height: 100%
+));
+
+// === Flex alignment classes ===
+// Ex: .av-align-center / .av-align-end / .av-align-baseline--lg
+$alignments: (
+  start: flex-start,
+  center: center,
+  end: flex-end,
+  stretch: stretch,
+  baseline: baseline
+);
+@each $alignment, $value in $alignments {
+  @include responsive-utility("align-#{$alignment}", (
+    align-items: $value
+  ));
+}
+
+// === Flex justification classes ===
+// Ex: .av-justify-center / .av-justify-between / .av-justify-end--md
+$justifications: (
+  start: flex-start,
+  center: center,
+  end: flex-end,
+  between: space-between,
+  around: space-around,
+  evenly: space-evenly
+);
+@each $justification, $value in $justifications {
+  @include responsive-utility("justify-#{$justification}", (
+    justify-content: $value
+  ));
+}

package/src/styles/utilities/_spacing.md

@@ -0,0 +1,91 @@
+---
+layout: page
+lastUpdated: true
+---
+
+# Spacing
+
+## ✨ Introduction
+
+This `spacing` utility generates margin and padding classes for all defined spacing sizes, both globally and directionally, with responsive variants.
+
+## 🏷️ Class patterns
+
+| Class pattern | Description | Responsive variants |
+|---------------|-------------|---------------------|
+| `.av-m{direction?}-{spacing}` | Applies `margin`; optional direction: `t` (`top`), `r` (`right`), `b` (`bottom`), `l` (`left`), `x` (`horizontal`), `y` (`vertical`) | `--sm`, `--md`, `--lg`, `--xl` |
+| `.av-p{direction?}-{spacing}` | Applies `padding`; optional direction: `t` (`top`), `r` (`right`), `b` (`bottom`), `l` (`left`), `x` (`horizontal`), `y` (`vertical`) | `--sm`, `--md`, `--lg`, `--xl` |
+
+📝 Notes:
+- `{spacing}` corresponds to the spacing scale defined in the core: `none`, `xxxs`, `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `4xl`, `5xl`.
+
+## 🎨 Some CSS results
+
+### Global margin
+
+```css
+.av-m-sm {
+  margin: var(--spacing-sm) !important;
+}
+
+@media (min-width: 36rem) {
+  .av-m-sm--md {
+    margin: var(--spacing-sm) !important;
+  }
+}
+```
+
+### Directional margin
+
+```css
+.av-mt-sm {
+  margin-top: var(--spacing-sm) !important;
+}
+
+@media (min-width: 48rem) {
+  .av-my-lg--md {
+    margin-top: var(--spacing-lg) !important;
+    margin-bottom: var(--spacing-lg) !important;
+  }
+}
+```
+
+### Global padding
+
+```css
+.av-p-md {
+  padding: var(--spacing-md) !important;
+}
+
+@media (min-width: 64rem) {
+  .av-p-md--lg {
+    padding: var(--spacing-md) !important;
+  }
+}
+```
+
+### Directional padding
+
+```css
+.av-pb-lg--md {
+  padding-bottom: var(--spacing-lg) !important;
+}
+
+@media (min-width: 48rem) {
+  .av-px-lg--md {
+    padding-left: var(--spacing-lg) !important;
+    padding-right: var(--spacing-lg) !important;
+  }
+}
+```
+
+## 💡 Examples of use
+
+```html
+<div class="av-mt-md av-mb-lg--md av-px-sm av-py-xl--lg">
+  <!-- mt-md: top margin md on all screens -->
+  <!-- mb-lg--md: bottom margin lg on medium screens and up -->
+  <!-- px-sm: horizontal padding sm -->
+  <!-- py-xl--lg: vertical padding xl on large screens and up -->
+</div>
+```

package/src/styles/utilities/_spacing.scss

@@ -1,5 +1,6 @@
 @use '../core/spacing' as sp;
 @use '../core/namespace' as *;
+@use '../mixins/responsive-utility' as *;
 @use '../settings/breakpoints' as bp;
 @use "sass:meta";
 
@@ -18,71 +19,31 @@ $directions: (
   y: (top, bottom),
 );
 
-// === Directional classes ===
-// Ex : .av-mt-sm / .av-px-md
-@each $type, $property-value in $properties {
-  @each $direction-key, $direction-value in $directions {
-    @each $size, $value in sp.$spacing {
-      @if meta.type-of($direction-value) == 'list' {
-        @include ns("#{$type}#{$direction-key}-#{$size}") {
-          @each $d in $direction-value {
-            #{$property-value}-#{$d}: var(--spacing-#{$size}) !important;
-          }
-        }
-      } @else {
-        @include ns("#{$type}#{$direction-key}-#{$size}") {
-          #{$property-value}-#{$direction-value}: var(--spacing-#{$size}) !important;
-        }
-      }
-    }
-  }
-}
-
 // === Global classes ===
-// Ex : .av-m-sm / .av-p-md
+// Ex : .av-m-sm / .av-p-md / .av-m-none--lg / .av-p-md--xl
 @each $type, $property-value in $properties {
   @each $size, $value in sp.$spacing {
-    @include ns("#{$type}-#{$size}") {
-      #{$property-value}: var(--spacing-#{$size}) !important;
-    }
+    @include responsive-utility("#{$type}-#{$size}", (
+      #{$property-value}: var(--spacing-#{$size}) !important
+    ));
   }
 }
 
-// === Breakpoint-specific directional classes ===
-// Ex : .av-mt-sm--lg / .av-px-md--xl / .av-mt-none--lg
+// === Directional classes ===
+// Ex : .av-mt-sm / .av-px-md / .av-mb-none--lg / .av-pt-md--xl
 @each $type, $property-value in $properties {
   @each $direction-key, $direction-value in $directions {
     @each $size, $value in sp.$spacing {
-      @each $breakpoint, $breakpoint-value in bp.$breakpoints {
-        @if meta.type-of($direction-value) == 'list' {
-          @include ns("#{$type}#{$direction-key}-#{$size}--#{$breakpoint}") {
-            @include bp.min-width($breakpoint) {
-              @each $d in $direction-value {
-                #{$property-value}-#{$d}: var(--spacing-#{$size}) !important;
-              }
-            }
-          }
-        } @else {
-          @include ns("#{$type}#{$direction-key}-#{$size}--#{$breakpoint}") {
-            @include bp.min-width($breakpoint) {
-              #{$property-value}-#{$direction-value}: var(--spacing-#{$size}) !important;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// === Breakpoint-specific global classes ===
-// Ex : .av-m-sm--lg / .av-p-md--xl / .av-m-none--lg
-@each $type, $property-value in $properties {
-  @each $size, $value in sp.$spacing {
-    @each $breakpoint, $breakpoint-value in bp.$breakpoints {
-      @include ns("#{$type}-#{$size}--#{$breakpoint}") {
-        @include bp.min-width($breakpoint) {
-          #{$property-value}: var(--spacing-#{$size}) !important;
+      @if meta.type-of($direction-value) == 'list' {
+        @each $d in $direction-value {
+          @include responsive-utility("#{$type}#{$direction-key}-#{$size}", (
+            #{$property-value}-#{$d}: var(--spacing-#{$size}) !important
+          ));
         }
+      } @else {
+        @include responsive-utility("#{$type}#{$direction-key}-#{$size}", (
+          #{$property-value}-#{$direction-value}: var(--spacing-#{$size}) !important
+        ));
       }
     }
   }

package/src/styles/components/_grid.scss

@@ -1,117 +0,0 @@
-@use '../core/namespace' as *;
-@use '../settings/breakpoints' as bp;
-@use '../core/spacing' as sp;
-@use "sass:map";
-
-// === Containers ===
-$container-paddings: (
-  sm: sm,
-  md: sm,
-  lg: md,
-  xl: md
-);
-
-// === Base container ===
-// Ex: .av-container, .av-container-fluid
-@include ns("container") {
-  max-width: 90rem;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: sp.get(sm);
-  padding-right: sp.get(sm);
-
-  &-fluid {
-    max-width: none;
-    padding-left: 0;
-    padding-right: 0;
-    overflow: hidden;
-  }
-}
-
-// === Responsive containers ===
-// Ex: .av-container--md / .av-container--lg
-@each $bp-name, $bp-value in bp.$breakpoints {
-  @media (min-width: #{$bp-value}) {
-    @include ns("container--#{$bp-name}") {
-      width: 100%;
-      max-width: #{$bp-value};
-      margin-left: auto;
-      margin-right: auto;
-      padding-left: sp.get(map.get($container-paddings, $bp-name));
-      padding-right: sp.get(map.get($container-paddings, $bp-name));
-    }
-  }
-}
-
-// === Rows ===
-$row-justifications: (
-  left: flex-start,
-  right: flex-end,
-  center: center,
-  between: space-between
-);
-
-$row-alignments: (
-  top: flex-start,
-  middle: center,
-  bottom: flex-end
-);
-
-// === Mixin row layout ===
-@mixin row-layout {
-  display: flex;
-  flex-direction: row;
-}
-
-// === Base row ===
-// Ex: .av-row / .av-row-wrap / .av-row-nowrap
-@include ns("row") {
-  @include row-layout;
-
-  &-wrap {
-    flex-wrap: wrap;
-  }
-
-  &-nowrap {
-    flex-wrap: nowrap;
-  }
-}
-
-// === Responsive layout for rows ===
-// Ex: .av-row--md
-@each $bp-name, $bp-value in bp.$breakpoints {
-  @media (min-width: #{$bp-value}) {
-    @include ns("row--#{$bp-name}") {
-      @include row-layout;
-    }
-  }
-}
-
-// === Columns ===
-$col-alignments: (
-  top: flex-start,
-  middle: center,
-  bottom: flex-end
-);
-
-// === Mixin column layout ===
-@mixin col-layout {
-  display: flex;
-  flex-direction: column;
-}
-
-// === Base column ===
-// Ex: .av-col
-@include ns("col") {
-  @include col-layout;
-}
-
-// === Responsive layout for columns ===
-// Ex: .av-col--md
-@each $bp-name, $bp-value in bp.$breakpoints {
-  @media (min-width: #{$bp-value}) {
-    @include ns("col--#{$bp-name}") {
-      @include col-layout;
-    }
-  }
-}

package/src/styles/core/_accessibility.scss

@@ -1,14 +0,0 @@
-@use './namespace' as *;
-
-@include ns("sr-only") {
-  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;
-  display: block !important;
-}