Ajustement de la couleur de fond des boutons secondaire non inversé (#86

)

Signed-off-by: Alexis Boulerice <[email protected]>

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Components Accordeon: Ajustement structure accordeon et fix disabled state.
 - Components Étiquettes: Fusion de la variante light. Modification des schemas de couleurs des étiquettes.
 - Components Badge: Harmonisation des schémas de couleurs avec les étiquettes. Ajout d'une bordure.
+- Components Boutons: Ajustement couleur de fond des boutons secondaires et tertiaires (non inversés)
 
 ## Added
 - Styles - iconographie: Ajout des icones social-threads, social-twitch, social-vimeo.

source/css/scss/_buttons.scss

@@ -121,12 +121,12 @@ fieldset:disabled a.btn {
 }
 
 .btn-secondary {
-  @include button-variant($background: transparent, $border: $neutral-stroke, $color: $action, $hover-background: transparent, $hover-border: $action, $hover-color: $action, $active-background: transparent, $active-border: $action, $active-color: $action);
+  @include button-variant($background: $white, $border: $neutral-stroke, $color: $action, $hover-background: $white, $hover-border: $action, $hover-color: $action, $active-background: $white, $active-border: $action, $active-color: $action);
 }
 
 .btn-link,
 .btn-tertiary {
-  @include button-variant($background: transparent, $border: transparent, $color: $action, $hover-background: $highlight-light, $hover-border: $highlight-light, $hover-color: $action, $active-background: $highlight-light, $active-border: $highlight-light, $active-color: $action);
+  @include button-variant($background: $white, $border: $white, $color: $action, $hover-background: $highlight-light, $hover-border: $highlight-light, $hover-color: $action, $active-background: $highlight-light, $active-border: $highlight-light, $active-color: $action);
 }
 
 // Dialog Color Modifier
@@ -142,12 +142,12 @@ fieldset:disabled a.btn {
     }
     // Secondary
     &.btn-secondary {
-      @include button-variant($background: transparent, $border: $neutral-stroke, $color: $color-dark, $hover-background: transparent, $hover-border: $color-dark, $hover-color: $color-dark, $active-background: transparent, $active-border: $color-dark, $active-color: $color-dark, $box-shadow-color: $color-dark);
+      @include button-variant($background: $white, $border: $neutral-stroke, $color: $color-dark, $hover-background: $white, $hover-border: $color-dark, $hover-color: $color-dark, $active-background: $white, $active-border: $color-dark, $active-color: $color-dark, $box-shadow-color: $color-dark);
     }
     // Tertiary
     &.btn-tertiary,
     &.btn-link {
-      @include button-variant($background: transparent, $border: transparent, $color: $color-dark, $hover-background: $color-light, $hover-border: $color-light, $hover-color: $color-dark, $active-background: $color-light, $active-border: $color-light, $active-color: $color-dark, $box-shadow-color: $color-dark);
+      @include button-variant($background: $white, $border: $white, $color: $color-dark, $hover-background: $color-light, $hover-border: $color-light, $hover-color: $color-dark, $active-background: $color-light, $active-border: $color-light, $active-color: $color-dark, $box-shadow-color: $color-dark);
     }
   }
 
@@ -217,12 +217,12 @@ fieldset:disabled a.btn {
   }
   // Secondary
   &.btn-secondary {
-    @include button-variant($background: transparent, $border: $neutral-stroke, $color: $neutral-tertiary, $hover-background: transparent, $hover-border: $neutral-stroke, $hover-color: $neutral-tertiary, $active-background: transparent, $active-border: $neutral-stroke, $active-color: $neutral-tertiary);
+    @include button-variant($background: $neutral-underground-1, $border: $neutral-stroke, $color: $neutral-tertiary, $hover-background: $neutral-underground-1, $hover-border: $neutral-stroke, $hover-color: $neutral-tertiary, $active-background: $neutral-underground-1, $active-border: $neutral-stroke, $active-color: $neutral-tertiary);
   }
   // Tertiary
   &.btn-link,
   &.btn-tertiary {
-    @include button-variant($background: transparent, $border: transparent, $color: $neutral-tertiary, $hover-background: transparent, $hover-border: transparent, $hover-color: $neutral-tertiary, $active-background: transparent, $active-border: transparent, $active-color: $neutral-tertiary);
+    @include button-variant($background: $neutral-underground-1, $border: $neutral-underground-1, $color: $neutral-tertiary, $hover-background: $neutral-underground-1, $hover-border: $neutral-underground-1, $hover-color: $neutral-tertiary, $active-background: $neutral-underground-1, $active-border: $neutral-underground-1, $active-color: $neutral-tertiary);
   }
 
   // Reversed

source/css/scss/_messaging.scss

@@ -32,13 +32,13 @@
       }
 
       &.btn-secondary {
-        @include button-variant($background: transparent, $border: $neutral-stroke, $color: $informative-dark, $hover-background: transparent, $hover-border: $informative-dark, $hover-color: $informative-dark, $active-background: transparent, $active-border: $informative-dark, $active-color: $informative-dark, $box-shadow-color: $informative-dark);
+        @include button-variant($background: $white, $border: $neutral-stroke, $color: $informative-dark, $hover-background: $white, $hover-border: $informative-dark, $hover-color: $informative-dark, $active-background: $white, $active-border: $informative-dark, $active-color: $informative-dark, $box-shadow-color: $informative-dark);
       }
 
       // Tertiary
       &.btn-tertiary,
       &.btn-link {
-        @include button-variant($background: transparent, $border: transparent, $color: $informative-dark, $hover-background: $informative-light, $hover-border: $informative-light, $hover-color: $informative-dark, $active-background: $informative-light, $active-border: $informative-light, $active-color: $informative-dark, $box-shadow-color: $informative-dark);
+        @include button-variant($background: $white, $border: $white, $color: $informative-dark, $hover-background: $informative-light, $hover-border: $informative-light, $hover-color: $informative-dark, $active-background: $informative-light, $active-border: $informative-light, $active-color: $informative-dark, $box-shadow-color: $informative-dark);
       }
     }
   }
@@ -146,13 +146,13 @@
         }
 
         &.btn-secondary {
-          @include button-variant($background: transparent, $border: $neutral-stroke, $color: $color-dark, $hover-background: transparent, $hover-border: $color-dark, $hover-color: $color-dark, $active-background: transparent, $active-border: $color-dark, $active-color: $color-dark, $box-shadow-color: $color-dark);
+          @include button-variant($background: $white, $border: $neutral-stroke, $color: $color-dark, $hover-background: $white, $hover-border: $color-dark, $hover-color: $color-dark, $active-background: $white, $active-border: $color-dark, $active-color: $color-dark, $box-shadow-color: $color-dark);
         }
 
         // Tertiary
         &.btn-tertiary,
         &.btn-link {
-          @include button-variant($background: transparent, $border: transparent, $color: $color-dark, $hover-background: $color-light, $hover-border: $color-light, $hover-color: $color-dark, $active-background: $color-light, $active-border: $color-light, $active-color: $color-dark, $box-shadow-color: $color-dark);
+          @include button-variant($background: $white, $border: $white, $color: $color-dark, $hover-background: $color-light, $hover-border: $color-light, $hover-color: $color-dark, $active-background: $color-light, $active-border: $color-light, $active-color: $color-dark, $box-shadow-color: $color-dark);
         }
       }
     }