@avenirs-esr/avenirs-dsav 0.1.108 → 0.1.109

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@avenirs-esr/avenirs-dsav",
   "type": "module",
-  "version": "0.1.108",
+  "version": "0.1.109",
   "repository": {
     "type": "git",
     "url": "https://github.com/avenirs-esr/avenirs-dsav"

package/src/styles/core/_spacing.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 
 $spacing: (
-  none: 0,
+  none: 0,        /* 0px */
   xxxs: 0.125rem, /* 2px */
   xxs: 0.25rem,   /* 4px */
   xs: 0.5rem,     /* 8px */
@@ -20,10 +20,6 @@ $spacing: (
   }
 }
 
-@function get($key) {
-  @return map.get($spacing, $key);
-}
-
 .line-break {
   height: var(--spacing-xs);
 }

package/src/styles/core/_typography.scss

@@ -94,11 +94,29 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@/assets/fonts/open-sans/OpenSans-VariableFont.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 300 800;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@/assets/fonts/open-sans/OpenSans-Italic-VariableFont.ttf') format('truetype');
+  font-style: italic;
+  font-weight: 300 800;
+  font-display: swap;
+}
+
 :root {
-  --font-family-primary: 'B612', 'arial', sans-serif;
+  --font-family-primary: 'Open Sans', 'arial', sans-serif;
   --font-weight-light: 300;
   --font-weight-regular: 400;
+  --font-weight-semi-bold: 600;
   --font-weight-bold: 700;
+  --font-weight-extra-bold: 800;
   --font-size-xxs: 0.5rem; /* 8px */
   --font-size-xs: 0.75rem; /* 12px */
   --font-size-sm: 0.875rem; /* 14px */
@@ -140,7 +158,7 @@
 
 .b1-light {
   font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-light);
+  font-weight: var(--font-weight-regular);
   font-size: var(--font-size-md);
   line-height: var(--line-height-md);
   letter-spacing: var(--letter-spacing-md);
@@ -150,7 +168,7 @@
 p,
 .b1-regular {
   font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--font-weight-semi-bold);
   font-size: var(--font-size-md);
   line-height: var(--line-height-md);
   letter-spacing: var(--letter-spacing-md);
@@ -168,7 +186,7 @@ p,
 
 .b2-light {
   font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-light);
+  font-weight: var(--font-weight-regular);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   letter-spacing: var(--letter-spacing-sm);
@@ -177,7 +195,7 @@ p,
 
 .b2-regular {
   font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--font-weight-semi-bold);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   letter-spacing: var(--letter-spacing-sm);
@@ -195,7 +213,7 @@ p,
 
 .caption-light {
   font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-light);
+  font-weight: var(--font-weight-regular);
   font-size: var(--font-size-xs);
   line-height: var(--line-height-xs);
   letter-spacing: var(--letter-spacing-caption);
@@ -204,7 +222,7 @@ p,
 
 .caption-regular {
   font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--font-weight-semi-bold);
   font-size: var(--font-size-xs);
   line-height: var(--line-height-xs);
   letter-spacing: var(--letter-spacing-caption);
@@ -214,7 +232,7 @@ p,
 h1,
 .n1 {
   font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-light);
+  font-weight: var(--font-weight-regular);
   font-size: var(--font-size-n1);
   line-height: var(--line-height-n1);
   color: var(--title);
@@ -223,7 +241,7 @@ h1,
 h2,
 .n2 {
   font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-light);
+  font-weight: var(--font-weight-regular);
   font-size: var(--font-size-n2);
   line-height: var(--line-height-n2);
   color: var(--title);
@@ -232,7 +250,7 @@ h2,
 h3,
 .n3 {
   font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--font-weight-semi-bold);
   font-size: var(--font-size-n3);
   line-height: var(--line-height-n3);
   color: var(--title);
@@ -241,7 +259,7 @@ h3,
 h4,
 .n4 {
   font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--font-weight-semi-bold);
   font-size: var(--font-size-n4);
   line-height: var(--line-height-n4);
   color: var(--title);
@@ -250,7 +268,7 @@ h4,
 h5,
 .n5 {
   font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--font-weight-semi-bold);
   font-size: var(--font-size-n5);
   line-height: var(--line-height-n5);
   color: var(--title);
@@ -276,7 +294,7 @@ h6,
 
 .s1-light {
   font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-light);
+  font-weight: var(--font-weight-regular);
   font-size: var(--font-size-s1);
   line-height: var(--line-height-s1);
   letter-spacing: var(--letter-spacing-s1);
@@ -285,7 +303,7 @@ h6,
 
 .s1-regular {
   font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--font-weight-semi-bold);
   font-size: var(--font-size-s1);
   line-height: var(--line-height-s1);
   letter-spacing: var(--letter-spacing-s1);
@@ -303,7 +321,7 @@ h6,
 
 .s2-light {
   font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-light);
+  font-weight: var(--font-weight-regular);
   font-size: var(--font-size-s2);
   line-height: var(--line-height-s2);
   letter-spacing: var(--letter-spacing-s2);

package/src/styles/main.scss

@@ -7,14 +7,12 @@
 @use './core/spacing' as *;
 @use './core/radius' as *;
 @use './core/dimensions' as *;
-@use './core/accessibility' as *;
 
 // === Settings ===
 @use './settings/breakpoints' as *;
 
 // === Components ===
 @use './components/icons' as *;
-@use './components/grid' as *;
 @use './components/buttons' as *;
 @use './components/collapse' as *;
 @use './components/form' as *;
@@ -28,6 +26,7 @@
 // === Utilities ===
 @use './utilities/helpers' as *;
 @use './utilities/spacing' as *;
+@use './utilities/layout' as *;
 
 // === Global ===
 :root {

package/src/styles/mixins/_responsive-utility.scss

@@ -0,0 +1,23 @@
+@use '../core/namespace' as *;
+@use '../settings/breakpoints' as bp;
+
+// === Responsive utility mixin ===
+@mixin responsive-utility($class-name, $rules) {
+  // Base class
+  @include ns($class-name) {
+    @each $prop, $value in $rules {
+      #{$prop}: #{$value};
+    }
+  }
+
+  // Breakpoint-specific classes
+  @each $bp-name, $bp-value in bp.$breakpoints {
+    @media (min-width: #{$bp-value}) {
+      @include ns("#{$class-name}--#{$bp-name}") {
+        @each $prop, $value in $rules {
+          #{$prop}: #{$value};
+        }
+      }
+    }
+  }
+}

package/src/styles/utilities/_helpers.scss

@@ -2,70 +2,6 @@
 @use '../core/spacing' as sp;
 @use '../core/namespace' as *;
 
-// === Responsive utility mixin ===
-@mixin responsive-utility($class-name, $prop, $value) {
-  // Base class
-  @include ns($class-name) {
-    #{$prop}: #{$value};
-  }
-
-  // Breakpoint-specific classes
-  @each $bp-name, $bp-value in bp.$breakpoints {
-    @media (min-width: #{$bp-value}) {
-      @include ns("#{$class-name}--#{$bp-name}") {
-        #{$prop}: #{$value};
-      }
-    }
-  }
-}
-
-// === 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
-$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
-$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);
-}
-
 // === No before/after classes ===
 // Ex: .av-no-before / .av-no-after
 @include ns("no-after") {

package/src/styles/utilities/_layout.md

@@ -0,0 +1,317 @@
+# Layout
+
+## ✨ Introduction
+
+This file contains layout-related utility classes for managing the overall structure and alignment of elements within the application. These utilities help in creating responsive designs and ensuring consistent spacing and alignment across different components.
+
+## 🏷️ Class patterns
+
+| Class pattern | Description | Responsive variants |
+|---------------|-------------|---------------------|
+| `.av-container` | Centers content, sets max-width | `--sm`, `--md`, `--lg`, `--xl` |
+| `.av-container-fluid` | Full-width container, no horizontal padding | None |
+| `.av-row` | `display: flex; flex-direction: row` | `--sm`, `--md`, `--lg`, `--xl` |
+| `.av-col` | `display: flex; flex-direction: column` | `--sm`, `--md`, `--lg`, `--xl` |
+| `.av-wrap` | `flex-wrap: wrap` | `--sm`, `--md`, `--lg`, `--xl` |
+| `.av-nowrap` | `flex-wrap: nowrap` | `--sm`, `--md`, `--lg`, `--xl` |
+| `.av-sr-only` | Hides element visually but keeps it accessible to screen readers | `--sm`, `--md`, `--lg`, `--xl` |
+| `.av-hidden` | `display: none !important` | `--sm`, `--md`, `--lg`, `--xl` |
+| `.av-unhidden` | `display: inherit !important` | `--sm`, `--md`, `--lg`, `--xl` |
+| `.av-gap-{spacing}` | Sets `gap` between flex items | `--sm`, `--md`, `--lg`, `--xl` |
+| `.av-flex-fill` | `flex: 1 1 0%` (grow and fill available space) | `--sm`, `--md`, `--lg`, `--xl` |
+| `.av-w-full` | `width: 100%` | `--sm`, `--md`, `--lg`, `--xl` |
+| `.av-h-full` | `height: 100%` | `--sm`, `--md`, `--lg`, `--xl` |
+| `.av-align-{alignment}` | Sets `align-items`: `start` (`flex-start`), `center`, `end` (`flex-end`), `stretch`, `baseline` | `--sm`, `--md`, `--lg`, `--xl` |
+| `.av-justify-{justification}` | Sets `justify-content`: `start` (`flex-start`), `center`, `end` (`flex-end`), `between` (`space-between`), `around` (`space-around`), `evenly` (`space-evenly`) | `--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`.
+- `{alignment}` options include: `start`, `center`, `end`, `stretch`, `baseline`.
+- `{justification}` options include: `start`, `center`, `end`, `between`, `around`, `evenly`.
+
+## 🎨 Some CSS results
+
+### Containers
+
+```css
+.av-container {
+  max-width: 90rem;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--spacing-sm);
+  padding-right: var(--spacing-sm);
+}
+
+.av-container-fluid {
+  max-width: none;
+  padding-left: var(--spacing-none);
+  padding-right: var(--spacing-none);
+  overflow: hidden;
+}
+
+@media (min-width: 36rem) {
+  .av-container--sm {
+    width: 100%;
+    max-width: 36rem;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--spacing-sm);
+    padding-right: var(--spacing-sm);
+  }
+}
+
+@media (min-width: 48rem) {
+  .av-container--md {
+    width: 100%;
+    max-width: 48rem;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--spacing-sm);
+    padding-right: var(--spacing-sm);
+  }
+}
+
+@media (min-width: 64rem) {
+  .av-container--lg {
+    width: 100%;
+    max-width: 64rem;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+}
+```
+
+### Rows and colums
+
+```css
+.av-row {
+  display: flex;
+  flex-direction: row;
+}
+
+@media (min-width: 36rem) {
+  .av-row--sm {
+    display: flex;
+    flex-direction: row;
+  }
+}
+
+.av-col {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 36rem) {
+  .av-col--sm {
+    display: flex;
+    flex-direction: column;
+  }
+}
+```
+
+### Flex wrap
+
+```css
+.av-wrap {
+  flex-wrap: wrap;
+}
+
+.av-nowrap {
+  flex-wrap: nowrap;
+}
+```
+
+### Accessibility
+
+```css
+.av-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;
+}
+
+@media (min-width: 36rem) {
+  .av-sr-only--sm {
+    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
+
+```css
+.av-hidden {
+  display: none !important;
+}
+
+@media (min-width: 36rem) {
+  .av-hidden--sm {
+    display: none !important;
+  }
+}
+
+.av-unhidden {
+  display: inherit !important;
+}
+
+@media (min-width: 36rem) {
+  .av-unhidden--sm {
+    display: inherit !important;
+  }
+}
+```
+
+### Gapped layouts
+
+```css
+.av-gap-sm {
+  gap: var(--spacing-sm);
+}
+
+@media (min-width: 48rem) {
+  .av-gap-lg--md {
+    gap: var(--spacing-lg);
+  }
+}
+```
+
+### Flex fill
+
+```css
+.av-flex-fill {
+  flex: 1 1 0%;
+}
+
+@media (min-width: 36rem) {
+  .av-flex-fill--sm {
+    flex: 1 1 0%;
+  }
+}
+```
+
+### Full width and height
+
+```css
+.av-w-full {
+  width: 100%;
+}
+
+@media (min-width: 36rem) {
+  .av-w-full--sm {
+    width: 100%;
+  }
+}
+
+.av-h-full {
+  height: 100%;
+}
+
+@media (min-width: 36rem) {
+  .av-h-full--sm {
+    height: 100%;
+  }
+}
+```
+
+### Alignment
+
+```css
+.av-align-start {
+  align-items: flex-start;
+}
+
+.av-align-center {
+  align-items: center;
+}
+
+.av-align-end {
+  align-items: flex-end;
+}
+
+.av-align-stretch {
+  align-items: stretch;
+}
+
+.av-align-baseline {
+  align-items: baseline;
+}
+
+@media (min-width: 36rem) {
+  .av-align-center--sm {
+    align-items: center;
+  }
+}
+```
+
+### Justification
+
+```css
+.av-justify-start {
+  justify-content: flex-start;
+}
+
+.av-justify-center {
+  justify-content: center;
+}
+
+.av-justify-end {
+  justify-content: flex-end;
+}
+
+.av-justify-between {
+  justify-content: space-between;
+}
+
+.av-justify-around {
+  justify-content: space-around;
+}
+
+.av-justify-evenly {
+  justify-content: space-evenly;
+}
+
+@media (min-width: 36rem) {
+  .av-justify-center--sm {
+    justify-content: center;
+  }
+}
+```
+
+## 💡 Examples of use
+
+```html
+<div class="av-container">
+  <!-- Row with medium gap -->
+  <div class="av-row av-gap-md">
+
+    <!-- Column with centered and spaced items -->
+    <div class="av-col av-align-center av-justify-between">
+      <div>Item 1</div>
+      <!-- Visible only on large devices -->
+      <div class="av-hidden av-unhidden-lg">Item 2</div>
+    </div>
+
+    <!-- Flexible column filling remaining space -->
+    <div class="av-col av-flex-fill">
+      <div class="av-w-full av-h-full">Item 3</div>
+    </div>
+
+  </div>
+</div>
+```