@avenirs-esr/avenirs-dsav 0.1.107 → 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,183 +0,0 @@
-@use '../core/namespace' as *;
-@use '../settings/breakpoints' as bp;
-@use '../core/spacing' as sp;
-
-$columns: 12;
-
-// === Containers ===
-// Default 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: var(--spacing-none);
-    padding-right: var(--spacing-none);
-    overflow: hidden;
-  }
-}
-
-// Breakpoint-specific 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;
-      @if $bp-name == lg or $bp-name == xl {
-        padding-left: sp.get(md);
-        padding-right: sp.get(md);
-      } @else {
-        padding-left: sp.get(sm);
-        padding-right: sp.get(sm);
-      }
-    }
-  }
-}
-
-// === Rows ===
-$row-justifications: (
-  left: flex-start,
-  right: flex-end,
-  center: center,
-  between: space-between
-);
-
-$row-alignments: (
-  top: flex-start,
-  middle: center,
-  bottom: flex-end
-);
-
-@include ns("row") {
-  display: flex;
-  flex-wrap: wrap;
-
-  // Horizontal alignments
-  // Ex: .av-row--left / .av-row--center
-  @each $mod-name, $justify in $row-justifications {
-    &--#{$mod-name} {
-      justify-content: $justify;
-    }
-  }
-
-  // Vertical alignments
-  // Ex: .av-row--top / .av-row--bottom
-  @each $mod-name, $align in $row-alignments {
-    &--#{$mod-name} {
-      align-items: $align;
-    }
-  }
-}
-
-@each $bp-name, $bp-value in bp.$breakpoints {
-  @media (min-width: #{$bp-value}) {
-    // Base row
-    // Ex: .av-row-md
-    @include ns("row-#{$bp-name}") {
-      display: flex;
-      flex-wrap: wrap;
-      margin-left: -#{sp.get(sm)};
-      margin-right: -#{sp.get(sm)};
-
-      > * {
-        padding-left: sp.get(sm);
-        padding-right: sp.get(sm);
-      }
-
-      &.av-no-gutters {
-        margin-left: 0;
-        margin-right: 0;
-
-        > * {
-          padding-left: 0;
-          padding-right: 0;
-        }
-      }
-
-      // Horizontal alignments
-      // Ex: .av-row-md--left / .av-row-lg--center
-      @each $mod-name, $justify in $row-justifications {
-        &--#{$mod-name} {
-          justify-content: $justify;
-        }
-      }
-
-      // Vertical alignments
-      // Ex: .av-row-md--top / .av-row-lg--bottom
-      @each $mod-name, $align in $row-alignments {
-        &--#{$mod-name} {
-          align-items: $align;
-        }
-      }
-    }
-  }
-}
-
-// === Columns ===
-$col-alignments: (
-  top: flex-start,
-  middle: center,
-  bottom: flex-end
-);
-
-@each $bp-name, $bp-value in bp.$breakpoints {
-  @media (min-width: #{$bp-value}) {
-    // Base column
-    // Ex: .av-col-md
-    @include ns("col-#{$bp-name}") {
-      flex: 1;
-    }
-
-    // Align-self modifiers
-    // Ex: .av-col-md--top / .av-col-lg--bottom
-    @each $mod-name, $align in $col-alignments {
-      @include ns("col-#{$bp-name}--#{$mod-name}") {
-        align-self: $align;
-      }
-    }
-
-    // Width and offsets
-    // Ex: .av-col-md-4 / .av-col-offset-md-2 / .av-col-offset-md-2--right
-    @for $i from 1 through $columns {
-      @include ns("col-#{$bp-name}-#{$i}") {
-        flex: 0 0 calc(100% * #{$i} / #{$columns});
-        max-width: calc(100% * #{$i} / #{$columns});
-      }
-
-      @include ns("col-offset-#{$bp-name}-#{$i}") {
-        margin-left: calc(100% * #{$i} / #{$columns});
-      }
-
-      @include ns("col-offset-#{$bp-name}-#{$i}--right") {
-        margin-left: 0;
-        margin-right: calc(100% * #{$i} / #{$columns});
-      }
-    }
-  }
-}
-
-// === Gapped flex directions ===
-// Ex: .av-flex-row-md / .av-flex-col-sm
-$flex-directions: (
-  row: row,
-  col: column,
-);
-
-@each $dir-name, $dir-value in $flex-directions {
-  @each $size, $value in sp.$spacing {
-    @include ns("flex-#{$dir-name}-#{$size}") {
-      display: flex;
-      flex: 1;
-      flex-direction: $dir-value;
-      gap: var(--spacing-#{$size});
-    }
-  }
-}

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;
-}