@avenirs-esr/avenirs-dsav 0.1.76 → 0.1.78

package/src/styles/{typography.scss → core/_typography.scss}

@@ -1,5 +1,37 @@
+@font-face {
+  font-family: 'Luciole';
+  src: url('@/assets/fonts/luciole/Luciole-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Luciole';
+  src: url('@/assets/fonts/luciole/Luciole-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Luciole';
+  src: url('@/assets/fonts/luciole/Luciole-BoldItalic.woff2') format('woff2');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Luciole';
+  src: url('@/assets/fonts/luciole/Luciole-Italic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
 :root {
-  --font-family-primary: 'Marianne', 'arial', sans-serif;
+  --font-family-primary: 'Luciole', 'arial', sans-serif;
   --font-weight-light: 300;
   --font-weight-regular: 400;
   --font-weight-bold: 700;
@@ -51,6 +83,7 @@
   color: var(--text1);
 }
 
+p,
 .b1-regular {
   font-family: var(--font-family-primary);
   font-weight: var(--font-weight-regular);
@@ -114,6 +147,7 @@
   color: var(--text2);
 }
 
+h1,
 .n1 {
   font-family: var(--font-family-primary);
   font-weight: var(--font-weight-light);
@@ -122,6 +156,7 @@
   color: var(--title);
 }
 
+h2,
 .n2 {
   font-family: var(--font-family-primary);
   font-weight: var(--font-weight-light);
@@ -130,6 +165,7 @@
   color: var(--title);
 }
 
+h3,
 .n3 {
   font-family: var(--font-family-primary);
   font-weight: var(--font-weight-regular);
@@ -138,6 +174,7 @@
   color: var(--title);
 }
 
+h4,
 .n4 {
   font-family: var(--font-family-primary);
   font-weight: var(--font-weight-regular);
@@ -146,6 +183,7 @@
   color: var(--title);
 }
 
+h5,
 .n5 {
   font-family: var(--font-family-primary);
   font-weight: var(--font-weight-regular);
@@ -154,6 +192,7 @@
   color: var(--title);
 }
 
+h6,
 .n6 {
   font-family: var(--font-family-primary);
   font-weight: var(--font-weight-bold);

package/src/styles/main.scss

@@ -1,42 +1,58 @@
-@use './palette.scss' as *;
-@use './typography.scss' as *;
-@use './buttons.scss' as *;
-@use './texts.scss' as *;
-@use './spacing.scss' as *;
-@use './radius.scss' as *;
-@use './dimensions.scss' as *;
+// === Core ===
+@use './core/palette' as *;
+@use './core/typography' as *;
+@use './core/focus' as *;
+@use './core/hover' as *;
+@use './core/cursors' as *;
+@use './core/spacing' as *;
+@use './core/radius' as *;
+@use './core/dimensions' as *;
+@use './core/accessibility' as *;
 
-@use '@gouvfr/dsfr/dist/core/core.main.min.css';
-@use '@gouvfr/dsfr/dist/component/component.main.min.css';
-@use '@gouvfr/dsfr/dist/utility/utility.main.min.css';
-@use '@gouvfr/dsfr/dist/scheme/scheme.min.css';
-@use '@gouvfr/dsfr/dist/utility/icons/icons.min.css';
+// === Settings ===
+@use './settings/breakpoints' as *;
 
+// === Components ===
+@use './components/grid' as *;
+@use './components/buttons' as *;
+@use './components/collapse' as *;
+@use './components/form' as *;
+@use './components/links' as *;
+@use './components/texts' as *;
+@use './components/selects' as *;
+@use './components/navigation' as *;
+@use './components/menu' as *;
+@use './components/footer' as *;
+
+// === Utilities ===
+@use './utilities/helpers' as *;
+@use './utilities/spacing' as *;
+
+// === Global ===
 :root {
-  --default-global-background-color: var(--other-background-base)
+  --default-global-background-color: var(--other-background-base);
   --global-background-color: var(--default-global-background-color);
 }
 
+// === Base styles ===
 html,
 body,
 #app {
   height: 100%;
   background-color: var(--global-background-color);
+  font-family: var(--font-family-primary);
+  margin: var(--spacing-none);
 }
 
-.fr-container {
-  max-width: 90rem !important;
-}
-
-:root[demo-mode="true"] .demo-display-none {
-  display: none !important;
-}
-
-.h-full {
-  height: 100%;
-}
-
+// === Reset headers ===
 h1, h2, h3, h4, h5, h6 {
   margin-bottom: 0;
   margin-top: 0;
+}
+
+// === Typography base ===
+*,
+::before,
+::after {
+  font-family: var(--font-family-primary);
 }

package/src/styles/settings/_breakpoints.scss

@@ -0,0 +1,33 @@
+@use 'sass:map';
+
+$breakpoints: (
+  sm: 36rem,  // 576px
+  md: 48rem,  // 768px
+  lg: 64rem,  // 1024px
+  xl: 90rem,  // 1440px
+);
+
+// === Mixins for media queries ===
+@mixin min-width($size) {
+  $breakpoint: map.get($breakpoints, $size);
+
+  @if $breakpoint {
+    @media (min-width: $breakpoint) {
+      @content;
+    }
+  } @else {
+    @warn "⚠️ Breakpoint `#{$size}` not found in $breakpoints map.";
+  }
+}
+
+@mixin max-width($size) {
+  $breakpoint: map.get($breakpoints, $size);
+
+  @if $breakpoint {
+    @media (max-width: $breakpoint) {
+      @content;
+    }
+  } @else {
+    @warn "⚠️ Breakpoint `#{$size}` not found in $breakpoints map.";
+  }
+}

package/src/styles/utilities/_helpers.scss

@@ -0,0 +1,136 @@
+@use '../settings/breakpoints' as bp;
+@use '../core/namespace' as *;
+
+// === Hidden class ===
+@include ns("hidden") {
+  display: none !important;
+}
+
+// === Breakpoint visibility classes ===
+@each $bp-name, $bp-value in bp.$breakpoints {
+  @media (min-width: #{$bp-value}) {
+    @include ns("hidden-#{$bp-name}") {
+      display: none !important;
+    }
+    @include ns("unhidden-#{$bp-name}") {
+      display: inherit !important;
+    }
+  }
+}
+
+// === No before/after classes ===
+@include ns("no-after") {
+  &::after {
+    content: none !important;
+  }
+}
+
+@include ns("no-before") {
+  &::before {
+    content: none !important;
+  }
+}
+
+// === Enlarge link area ===
+@include ns("enlarge-link") {
+  position: relative;
+
+  a {
+    background-image: none;
+    outline-width: 0;
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+      outline-style: inherit;
+      outline-color: inherit;
+      outline-width: 2px;
+      outline-offset: 2px;
+      z-index: 1;
+    }
+  }
+
+  &:active{
+    background-color:var(--light-background-neutral);
+  }
+
+  &:hover{
+    background-color:var(--surface-background);
+  }
+}
+
+// === Demo mode visibility classes ===
+:root[demo-mode="true"] .demo-display-none {
+  display: none !important;
+}
+
+// === Full height class ===
+.h-full {
+  height: 100%;
+}
+
+// === Reset link background image ===
+a,
+[href] {
+  background-image: none;
+}
+
+// === Reset button styles ===
+button {
+  border:none;
+  color:inherit;
+  font-family:inherit;
+  font-size:inherit;
+}
+
+// === Reset form element styles ===
+button,
+input,
+select,
+textarea{
+  -webkit-appearance:none;
+  -moz-appearance:none;
+  appearance:none;
+  background-color:transparent;
+  margin:0;
+}
+
+// === Reset list styles ===
+dl,
+ol,
+ul{
+  margin:0;
+  margin-block-end:0.5rem;
+  margin-block-start:0.5rem;
+  padding:0;
+}
+
+ul{
+  list-style-type:disc;
+  padding-inline-start:1rem;
+}
+
+ul>li::marker{
+  font-size:calc((1em)*.9);
+}
+
+ol{
+  counter-reset:li-counter;
+  list-style-type:decimal;
+  padding-inline-start:1.5rem;
+}
+
+ol>li{
+  counter-increment:li-counter;
+}
+
+li::marker{
+  content: counter(li-counter, ".") ". ";
+}

package/src/styles/utilities/_spacing.scss

@@ -0,0 +1,48 @@
+@use '../core/spacing' as sp;
+@use '../core/namespace' as *;
+@use "sass:meta";
+
+// === Properties and directions ===
+$properties: (
+  m: margin,
+  p: padding,
+);
+
+$directions: (
+  t: top,
+  r: right,
+  b: bottom,
+  l: left,
+  x: (left, right),
+  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
+@each $type, $property-value in $properties {
+  @each $size, $value in sp.$spacing {
+    @include ns("#{$type}-#{$size}") {
+      #{$property-value}: var(--spacing-#{$size}) !important;
+    }
+  }
+}

package/src/styles/buttons.scss

@@ -1,24 +0,0 @@
-.fr-btn {
-  border-radius: 0.75rem !important;
-}
-.fr-btn.fr-btn--sm {
-  border-radius: 0.5rem !important;
-}
-
-.fr-btn.fr-btn--close:hover,
-.fr-btn.fr-btn--menu:hover,
-.fr-btn.fr-btn--search:hover,
-.fr-btn.fr-translate__btn:hover {
-  background-color: var(--dark-background-primary1) !important;
-  color: var(--other-background-base) !important;
-}
-
-.fr-search-bar .fr-btn {
-  border-radius: 0 !important;
-}
-
-.fr-nav__btn:hover,
-.fr-nav__link:hover {
-  background-color: var(--dark-background-primary1) !important;
-  color: var(--other-background-base) !important;
-}

package/src/styles/spacing.scss

@@ -1,21 +0,0 @@
-:root {
-  --spacing-none: 0;
-  --spacing-xxxs: 0.125rem;   /* 2px */
-  --spacing-xxs: 0.25rem;     /* 4px */
-  --spacing-xs: 0.5rem;       /* 8px */
-  --spacing-sm: 1rem;         /* 16px */
-  --spacing-md: 1.5rem;       /* 24px */
-  --spacing-lg: 2rem;         /* 32px */
-  --spacing-xl: 2.5rem;       /* 40px */
-  --spacing-2xl: 3rem;        /* 48px */
-  --spacing-4xl: 4rem;        /* 64px */
-  --spacing-5xl: 5rem;        /* 80px */
-}
-
-.line-break {
-  height: var(--spacing-xs);
-}
-
-.indented-list {
-  padding-left: var(--spacing-md);
-}