qc-trousse-sdg 1.2.5-dev → 1.3.0-develop.0

package/src/sdg/scss/base/_accessibility.scss

@@ -0,0 +1,4 @@
+@use "qc-sdg-lib" as *;
+.qc-sr-only {
+  @include sr-only();
+}

package/src/sdg/scss/base/_colors.scss

@@ -1,12 +1,12 @@
-@use "modules/utils" as *;
-@use "modules/tokens" as *;
-@use "modules/map" as *;
+@use "qc-sdg-lib" as *;
 @use "sass:map";
 
-$colors : (color : map.get($xl-tokens, color));
-@include map-deep-parse($colors) using ($path,$value)
-{
-  .qc-bg-#{deep-implode($path, '-')} {
-    background-color: $value;
-  }
-};
+@mixin generate-color-classes($colors) {
+  @include map-deep-parse($colors) using ($path,$value)
+  {
+    .qc-bg-#{deep-implode($path, '-')} {
+      background-color: token-value($path);
+    }
+  };
+}
+@include generate-color-classes((color : map.get($lg-tokens, color)));

package/src/sdg/scss/base/_figure.scss

@@ -1,25 +1,30 @@
-@use "modules/tokens" as *;
-@use "modules/utils" as *;
+@use "qc-sdg-lib" as *;
+
+img {
+  border: none;
+  vertical-align: middle;
+}
 
 figure {
-  display: inline-block;
-  flex-direction: column;
+  margin: 0 0 token-value(spacer content-block mb);
+  display: table;
+  overflow-x: auto;
   img {
-    max-width: 100%;
+    width: 100%;
     height: auto;
   }
 }
 figcaption {
+  display: table-caption;
+  caption-side: bottom;
   @include content-font(sm);
+  max-inline-size: token-value(max-content-width);
   background-color: token-value(color, grey, pale);
   padding: rem($base-spacer);
   margin-top: rem($base-spacer);
   p {
     @include content-font(sm);
-    &:last-child {
-      margin-bottom: 0;
-    }
+    margin-bottom: 0;
   }
-  //margin-bottom: token-value(spacer md);
 }
 

package/src/sdg/scss/base/_fonts.scss

@@ -1,12 +1,12 @@
-@use "modules/tokens" as *;
-@use "modules/utils" as *;
+@use "sass:meta";
+@use "qc-sdg-lib" as *;
 @use "sass:map";
 @use "sass:list";
 
 @if $google-api-font {
   // ci dessous on construit l'url pour importer les fonts google
   // en se basant sur la déclaration des tokens (les font-weights)
-  $font-weights : map.values(map-get($xl-tokens, font, weight));
+  $font-weights : map.values(map.get($lg-tokens, font, weight));
   $url : 'https://fonts.googleapis.com/css2';
   $param-separator : '?';
   @each $name, $fonts in $google-fonts {
@@ -15,7 +15,7 @@
     $separator : '@';
     @each $i in (0,1) {
       @each $scale in $font-weights {
-        @if type-of($scale) != 'map' {
+        @if meta.type-of($scale) != 'map' {
           $request : '#{$request}#{$separator}#{$i},#{$scale}';
           $separator : ';';
         }

package/src/sdg/scss/base/_form.scss

@@ -0,0 +1,7 @@
+// Inherit fonts for inputs and buttons
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}

package/src/sdg/scss/base/_layout.scss

@@ -0,0 +1,45 @@
+@use "qc-sdg-lib" as *;
+
+:root {
+  font-size: token-value(font size root-percent);
+}
+
+// Box sizing rules
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  @include content-font($scale: md , $include-family: 1);
+  margin:0;
+  background-color: token-value(color, background);
+  color: token-value(color, text, primary);
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  &:focus-within {
+    scroll-behavior: smooth;
+  }
+
+}
+
+
+// Remove all animations and transitions for people that prefer not to see them
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+legend {
+  padding: 0;
+}

package/src/sdg/scss/base/_lists.scss

@@ -1,18 +1,18 @@
-@use "modules/tokens" as *;
-@use "modules/utils" as *;
+@use "qc-sdg-lib" as *;
 
 ul {
     max-inline-size: token-value(max-content-width);
     list-style: disc;
     margin-top: 0;
-    margin-bottom: token-value(spacer list mb);
+    margin-bottom: token-value(spacer content-block mb);
     padding-left: token-value(spacer list pl);
     li {
         margin-bottom: token-value(spacer list-item mb);
+        margin-top: token-value(spacer list-item mb);
     }
     ul {
-        margin-top: token-value(spacer list-item mb);
-        margin-bottom: token-value(spacer list embedded-mb);
+        margin-top: 0;
+        margin-bottom: 0;
         list-style: circle;
     }
 }

package/src/sdg/scss/base/_shadings.scss

@@ -1,16 +1,8 @@
-@use "../modules/tokens" as *;
-@use "../modules/utils" as *;
-@use "../modules/map" as *;
+@use "qc-sdg-lib" as *;
 @use "sass:map";
 
-@each $index, $blur in map.get($xl-tokens, box-shadow, blur) {
-  $color : token-value(box-shadow color);
-  // qc-shading-0 and qc-shading-1
-  @if($index in [0,1]){
-    $color: token-value(color, grey, light);
-  }
-  $offset : map.get($xl-tokens, box-shadow, offset, $index);
+@each $index,$settings in map.get($lg-tokens, box_shadow) {
   .qc-shading-#{$index} {
-    box-shadow: 0 $offset $blur $color;
+    @include qc-shading($index)
   }
 }

package/src/sdg/scss/base/_typography.scss

@@ -1,23 +1,8 @@
-@use "modules/tokens" as *;
-@use "modules/utils" as *;
-
-:root {
-  font-size: token-value(font size root-percent);
-}
-
-body {
-  @include content-font($scale: md , $include-family: 1);
-  background-color: token-value(color, white);
-  color: token-value(color, text, primary);
-}
-
+@use "qc-sdg-lib" as *;
 
 @for $i from 1 through 6 {
   h#{$i}, .qc-h#{$i} {
-    @include header-font(h#{$i});
-    max-inline-size: token-value(max-content-width);
-    margin-top: token-value(spacer h#{$i} mt);
-    margin-bottom: token-value(spacer h#{$i} mb);
+    @include heading($i);
   }
 }
 
@@ -46,33 +31,65 @@ p {
   max-inline-size: token-value(max-content-width);
 }
 
-img {
-  border: none;
-  vertical-align: middle;
-}
-
 a {
   color: token-value(color, link, text);
   &:visited {
     color: token-value(color, link, visited);
   }
-  &:hover,&:focus {
+  &:hover {
     @include hover-link();
   }
+  &:focus, &:focus-visible {
+    @include focus-link();
+  }
   &:active {
     @include active-link();
   }
-  /* to assure non breaking space inter last word and icon */
+   //DEPRECATED: use <qc-external-link> instead.
+   // to assure non breaking space inter last word and icon
   .qc-external-link-tail {
     white-space: nowrap;
     img {
       @include external-link-img();
-      content:url(#{$img-dir}/external-link.svg?v={{pkg-version}});
+      content:getImageUrl(external-link);
     }
   }
+  .img-wrap {
+    white-space: nowrap;
+  }
+
 
 }
+span.qc-ext-link-img {
+  @include external-link-img();
+  .img-wrap + & {
+    display: none;
+  }
+}
 
 code, .qc-code {
   font-family: token-value(font, family, code);
 }
+
+// pour les très petites résolutions, on ajoute des tirets aux mots.
+@media (max-width: 320px) {
+  body {
+    overflow-wrap: break-word;
+    hyphens: auto;
+  }
+}
+
+
+.qc-font-size-sm {
+  @include content-font("sm");
+}
+
+.qc-font-size-lg {
+  @include content-font("lg");
+}
+.qc-font-size-xl {
+  @include content-font("xl");
+}
+.qc-font-size-md {
+  @include content-font("md");
+}

package/src/sdg/scss/components/_alert.scss

@@ -1,18 +1,14 @@
-@use "modules/tokens" as *;
-@use "modules/utils" as *;
-@use "../modules/grid" as *;
+@use "qc-sdg-lib" as *;
 
 .qc-general-alert {
-  max-inline-size: token-value(max-content-width);
-  padding: token-value(spacer, md) token-value(spacer, sm);
+  padding: token-value(spacer, md) 0;
 
   @include media-mobile() {
-    padding: token-value(spacer, sm);
+    padding: token-value(spacer, sm) 0;
   }
 
   .qc-general-alert-elements {
     display: flex;
-    padding: 0;
   }
 
   &.warning {
@@ -23,11 +19,6 @@
     background-color: token-value(color, blue, pale);
   }
 
-  .qc-icon {
-    min-width: token-value(spacer, md);
-    height: token-value(spacer, md);
-  }
-
   .qc-alert-content {
     @include content-font(md, semi-bold);
     margin: 0 token-value(spacer, md);
@@ -38,39 +29,25 @@
     }
   }
 
-  .qc-alert-close {
-    display: flex;
-    align-items: center;
-    @include media-mobile() {
-      align-items: inherit;
-    }
-  }
-
-  .qc-close {
-    padding: 0;
-    background-color: transparent;
-    border: 0;
-    display: inline-flex;
-    justify-content: center;
-
-    .qc-close-alert-icon {
-      display: inline-block;
-      min-width: token-value(spacer, sm);
-      height: token-value(spacer, sm);
-      vertical-align: middle;
-      cursor: pointer;
+  button {
+    @include qc-formcontrol-box;
+    flex-shrink: 0;
+    &::before {
+      background: transparent;
     }
+    cursor: pointer;
   }
 }
 
 qc-alert {
+  display: block;
   [slot], &:not([slot=content]) {
     * {
       margin-bottom: 0;
     }
 
     a {
-      color: token-value(color blue dark);
+      color: token-value(color blue piv);
     }
   }
 }

package/src/sdg/scss/components/_icons.scss

@@ -1,17 +1,33 @@
-@use "modules/tokens" as *;
-@use "modules/utils" as *;
-@use "modules/helpers" as *;
-@use "modules/grid" as *;
+@use "qc-sdg-lib" as *;
 
-/* TODO voir si meilleure façon d'intégrer en scss... */
+qc-icon {
+  display: inline-flex;
+  align-items: stretch;
+}
+
+
+
+
+// TODO retirer une fois toutes les icônes remplacées par Icon dans les composants
 .qc-icon {
   display: inline-block;
-  content: "";
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100% auto;
-  min-width: 32px;
-  height: 32px;
+  flex-shrink: 0;
+  width: var(--img-width);
+  height: var(--img-height);
+  // TODO questionner une échelle [0 - 10 ou 100]
+  @each $size-type, $size in (xs: 12, sm: 16, md: 20, nm: 24, lg: 28, xl: 32) {
+    &[data-img-size=#{$size-type}] {
+      height: rem($size);
+      width: rem($size);
+    }
+  }
+  background-color: var(--img-color);
+  @each $name, $url in $images {
+    &[data-img-type=#{$name}] {
+      mask: getImageUrl($name) no-repeat;
+      mask-size: 100% 100%;
+    }
+  }
 
   &.qc-icon-sm {
     min-width: 12px;
@@ -35,16 +51,16 @@
   &.qc-warning {
     background-image: getImageUrl(warning);
   }
-  
+
   &.qc-arrow-up-white {
     background-image: getImageUrl(arrow-up-white);
   }
 
-  
+
   &.qc-clipboard {
     background-image: getImageUrl(clipboard);
   }
-  
+
   &.qc-error {
     background-image: getImageUrl(error);
   }
@@ -52,75 +68,75 @@
   &.qc-error-white {
     background-image: getImageUrl(error-white);
   }
-  
+
   &.qc-information {
-    background-image: getImageUrl(information);  
+    background-image: getImageUrl(information);
   }
-  
+
   &.qc-information-white {
-    background-image: getImageUrl(information-white);  
+    background-image: getImageUrl(information-white);
   }
-  
+
   &.qc-minus {
-    background-image: getImageUrl(minus);  
+    background-image: getImageUrl(minus);
   }
-  
+
   &.qc-plus {
-    background-image: getImageUrl(plus);  
+    background-image: getImageUrl(plus);
   }
-  
+
   &.qc-question-mark {
-    background-image: getImageUrl(question-mark);  
+    background-image: getImageUrl(question-mark);
   }
-  
+
   &.qc-success {
-    background-image: getImageUrl(success);  
+    background-image: getImageUrl(success);
   }
   &.qc-success-white {
-    background-image: getImageUrl(success-white);  
+    background-image: getImageUrl(success-white);
   }
-  
+
   &.qc-xclose-white {
     width: 16px;
     height: 16px;
     min-width: 16px;
-    background-image: getImageUrl(xclose-white);  
+    background-image: getImageUrl(xclose-white);
   }
   &.qc-xclose-blue {
     width: 16px;
     height: 16px;
     min-width: 16px;
-    background-image: getImageUrl(xclose-blue);  
+    background-image: getImageUrl(xclose-blue);
   }
-  
+
   &.qc-chevron-blue,
   &.qc-chevron-white {
     width: 16px;
     min-width: 16px;
     height: 10px;
   }
-  
+
   &.qc-chevron-blue {
     background-image: getImageUrl(chevron-blue);
   }
-  
+
   &.qc-chevron-white {
     background-image: getImageUrl(chevron-white);
   }
-  
+
   &.qc-facebook {
     background-image: getImageUrl(facebook);
   }
-  
+
   &.qc-linkedin {
     background-image: getImageUrl(linkedin);
     height: 30px;
   }
-  
+
   &.qc-twitter {
     background-image: getImageUrl(twitter);
   }
-  
+
   &.qc-youtube {
     background-image: getImageUrl(youtube);
   }
@@ -140,4 +156,17 @@
     background-image: getImageUrl(loupe-piv-fonce);
   }
 
-}
+}
+
+.qc-icon-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    @each $size-type, $size in ( sm: 16, md: 20, nm: 24, lg: 32, xl: 40) {
+      &[data-button-size=#{$size-type}] {
+        height: rem($size);
+        width: rem($size);
+      }
+    }
+  }

package/src/sdg/scss/components/_notice.scss

@@ -1,6 +1,13 @@
-@use "../modules/tokens" as *;
-@use "../modules/utils" as *;
-@use "../modules/grid" as *;
+@use "qc-sdg-lib" as *;
+
+@mixin qc-notice-title() {
+  h1,h2,h3,h4,h5,h6,[role=heading] {
+    margin: 0;
+    padding: 0;
+    @include content-font(sm, bold);
+    font-family: token-value(font, family, content);
+  }
+}
 
 .qc-notice {
   max-inline-size: token-value(max-content-width);
@@ -26,58 +33,58 @@
     width: 100%;
   }
 
-  &.qc-information .icon-container {
-    background-color: token-value(color,blue,pale);    
-  }  
-  &.qc-warning .icon-container {
-    background-color: token-value(color,yellow,pale);
-  }
-  &.qc-success .icon-container {
-    background-color: token-value(color,green,pale);
-  }
+  @include qc-notice-title();
 
-  &.qc-error .icon-container {
-      background-color: token-value(color,pink,pale);
-  }
+  //TODO Quelle est la marge entre le titre et le texte? Rien de spécifié dans le SDG.
 
 
-  /*TODO Quelle est la marge entre le titre et le texte? Rien de spécifié dans le SDG. */
-  .title {
-    margin: 0;
-    padding: 0;
-    @include content-font(sm, bold);
-    font-family: token-value(font, family, content); 
-  }
-
   .content {
       margin:
-          token-value(spacer notice my)
-          token-value(spacer notice mx)
-          token-value(spacer notice my)
+          token-value(spacer md)
+          token-value(spacer md)
+          token-value(spacer md)
           token-value(spacer, sm);
+  }
 
-    .text {
-      ::slotted(ul) {
-        padding-left: token-value(spacer, sm) !important;
-        margin-top: token-value(spacer, sm) !important;
+  @each $type, $color in (
+      "information": "blue",
+      "warning": "yellow",
+      "neutral": "grey",
+      "error": "red",
+      "success": "green",
+  ) {
+    &.qc-#{$type} .icon-container {
+      background-color: token-value(color,$color,pale);
+      [role=img] {
+        background-color: token-value(color,$color,dark);
+
+        &[data-img-type=success], &[data-img-type=error] {
+          background-color: token-value(color,$color,regular);
+        }
       }
     }
   }
 }
 
-/* Links in a error notice (eg. error summary) */
-qc-notice[type="error"] ul li a {
-  color: token-value(color,red,regular);
-  &:hover, &:focus {
-    text-decoration: none;
-  }  
-}
-
-
-@include media-mobile(){
-  .qc-notice {
-    .content {
-      margin-right: token-value(spacer notice my);
+// Links in a error notice (eg. error summary)
+qc-notice {
+  display: block;
+  @include qc-notice-title();
+  ul {
+    padding-left: token-value(spacer, sm) !important;
+    //margin-top: token-value(spacer, sm) !important;
+  }
+  &[type="error"] ul li {
+     &::marker {
+       color:token-value(color text primary);
+     }
+     color: token-value(color, red, regular);
+     a {
+      color: inherit;
+      &:hover, &:focus {
+        text-decoration: none;
+      }
     }
   }
-}
+
+}