qc-trousse-sdg 1.4.2 → 1.4.4

package/src/sdg/components/Button/_button.scss

@@ -1,6 +1,12 @@
 @use "qc-sdg-lib" as *;
 @use "sass:map";
 
+%button-disabled {
+  cursor: not-allowed;
+  box-shadow: none;
+  opacity: 1;
+}
+
 .qc-button {
   font-family: token-value(font family, content);
   font-size: token-value(font size, md);
@@ -14,11 +20,11 @@
   min-width: rem(112);
   max-width: rem(360);
   min-height: rem(56);
-  padding: rem(16) rem(24);
+  // Compensation pour la bordure en retirant 2px de padding de chaque côté
+  padding: rem(14) rem(22);
   vertical-align: middle;
-  border: 2px solid transparent;
+  border: rem(2) solid transparent;
   cursor: pointer;
-  margin-right: rem(32);
   margin-bottom: token-value(spacer, md);
 
   &:focus,
@@ -30,9 +36,9 @@
     font-weight: token-value(font weight, semi-bold);
     min-width: rem(80);
     min-height: rem(40);
-    padding: rem(8) rem(16);
-    border-width: 1px;
-    margin-right: token-value(spacer, md);
+    // Compensation pour la bordure en retirant 1px de padding de chaque côté
+    padding: rem(7) rem(15);
+    border-width: rem(1);
     margin-bottom: token-value(spacer, sm);
   }
 
@@ -66,6 +72,14 @@
       background-color: token-value(color blue, regular_light);
       border-color: token-value(color blue, regular_light);
     }
+
+    &:disabled,
+    &.qc-disabled {
+      background-color: token-value(color grey, light);
+      border-color: token-value(color grey, light);
+      color: token-value(color white);
+      @extend %button-disabled;
+    }
   }
 
   &.qc-secondary {
@@ -90,6 +104,13 @@
     &.qc-active {
       background-color: rgba(map.get(map.get(map.get($xl-tokens, color), blue), piv), 0.08);
     }
+
+    &:disabled,
+    &.qc-disabled {
+      border-color: token-value(color grey, regular);
+      color: token-value(color grey regular);
+      @extend %button-disabled;
+    }
   }
 
   &.qc-tertiary {
@@ -114,6 +135,12 @@
     &.qc-active {
       background-color: rgba(map.get(map.get(map.get($xl-tokens, color), grey), light), 0.16);
     }
+
+    &:disabled,
+    &.qc-disabled {
+      color: token-value(color grey regular);
+      @extend %button-disabled;
+    }
   }
 
   &.qc-danger {
@@ -137,16 +164,14 @@
     &.qc-active {
       background-color: token-value(color red regular_light);
     }
-  }
 
-  &:disabled,
-  &.qc-disabled {
-    background-color: token-value(color grey, light);
-    border-color: token-value(color grey, light);
-    color: token-value(color white);
-    cursor: not-allowed;
-    box-shadow: none;
-    opacity: 1;
+    &:disabled,
+    &.qc-disabled {
+      background-color: token-value(color grey, light);
+      border-color: token-value(color grey, light);
+      color: token-value(color white);
+      @extend %button-disabled;
+    }
   }
 
   .qc-icon {
@@ -190,9 +215,7 @@
     &:disabled,
     &.qc-disabled {
       color: token-value(color, grey regular);
-      cursor: not-allowed;
-      box-shadow: none;
-      opacity: 1;
+      @extend %button-disabled;
     }
   }
 
@@ -200,3 +223,13 @@
     text-decoration: none;
   }
 }
+
+.qc-button-group {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: rem(4 * $base-spacer);
+
+  &.qc-compact {
+    column-gap: token-value(spacer, md);
+  }
+}

package/src/sdg/components/ChoiceGroup/_selectionButton.scss

@@ -17,6 +17,11 @@ label.qc-selection-button {
 
   &:has(input:checked)::before {
     background-color: token-value(color, blue, pale);
+    border-color: token-value(color, blue, light);
+  }
+
+  &:focus, &:has(input:focus)::before {
+    border-color: inherit;
   }
 
   &:has(input:disabled)::before {

package/src/sdg/components/DropdownList/DropdownListButton/_dropdownListButton.scss

@@ -6,7 +6,7 @@ $min-height: 40;
   display: flex;
   width: 100%;
   justify-content: space-between;
-  height: rem($min-height);
+  height: rem($min-height - 2);
   align-items: center;
   background-color: token-value(color, background);
   border: none;

package/src/sdg/components/DropdownList/_dropdownList.scss

@@ -43,6 +43,10 @@ $border: 1;
 
   &.qc-dropdown-list-invalid {
     border: rem(2) solid token-value(color, red, regular) !important;
+
+    & > .qc-dropdown-button {
+      height: rem(36);
+    }
   }
 }
 

package/src/sdg/components/Label/_label.scss

@@ -1,7 +1,7 @@
 @use "qc-sdg-lib" as *;
 
 .qc-label {
-  font-weight: token-value(font weight content medium);
+  font-weight: token-value(font weight content bold);
   display: block;
 
   &.qc-compact {

package/src/sdg/components/TextField/_textField.scss

@@ -28,7 +28,7 @@ textarea {
     position: relative;
     color: token-value(color text primary);
     background-color: token-value(color background);
-    padding: rem(8);
+    padding: rem(7);
     text-overflow: ellipsis;
     overflow: hidden;
     margin-top: rem(4);
@@ -43,7 +43,7 @@ textarea {
     &:focus-visible {
       outline: 2px solid token-value(color formfield focus outline);
       border: 2px solid token-value(color formfield focus border);
-      padding: rem(7);
+      padding: rem(6);
     }
 
     &:disabled {
@@ -56,7 +56,7 @@ textarea {
   [invalid] > & {
     border-color: token-value(color, red, regular);
     border-width: 2px;
-    padding: rem(7);
+    padding: rem(6);
   }
 
 }

package/src/sdg/components/ToTop/_toTop.scss

@@ -29,6 +29,7 @@
     background-color: token-value( color blue regular);
     outline: 2px solid token-value(color blue light);
     border: 2px solid token-value(color blue dark);
+    outline-offset: 0;
     @include qc-shading(2);
   }
   &:active {

package/src/sdg/scss/settings/_base.scss

@@ -22,9 +22,3 @@ $grid-aliases: (
     mobile: xs
 );
 
-
-  //TODO 1 -générer automatiquement cette map à partir du contenu du fichie img en javascript (avec gupl ou autre)
-  //TODO 2 - demander des nouvelles icône les plus neutres possibles
-  //TODO 3 - faire le ménage ; certaines icones sont présentées en 2 couleaurs, ce qui est inutile depuis l'introduction de qc-icon
-
-