Use factorized colors.

src/app/core/components/confirm-dialog/confirm-dialog.component.html

@@ -7,8 +7,8 @@
         </div>
     </div>
     <div class="actions">
-        <button class="raised" (click)="cancel()">Annuler</button>
+        <button class="stroked" (click)="cancel()">Annuler</button>
-        <button class="raised" 
+        <button class="stroked"
                 (click)="confirm()"
                 [ngClass]="data.confirmButtonType">
             {{data.confirmButtonLabel}}

src/app/core/components/header/header.component.html

@@ -6,13 +6,13 @@
     </span>
     <button *ngIf="!activeTaskList"
         (click)="openNewListForm()"
-        class="raised"
+        class="stroked primary"
         matRipple>
       Nouvelle liste
     </button>
     <button *ngIf="activeTaskList"
         (click)="goTaskListsPane()"
-        class="icon raised"
+        class="icon stroked primary"
         matRipple
         matTooltip="Retourner aux task-lists">
       <mat-icon>chevron_left</mat-icon>
@@ -22,7 +22,7 @@
     test
   </div>
   <div class="right">
-    <button class="icon raised"
+    <button class="icon stroked primary"
         (click)="enableSelectionMode()"
         matTooltip="Activer la sélection des task-lists"
         matTooltipPosition="left">
@@ -36,6 +36,6 @@
     Cliquez sur une liste pour la sélectionner
   </div>
   <div class="actions">
-    <button class="raised" (click)="disableSelectionMode()">Annuler</button>
+    <button class="stroked primary" (click)="disableSelectionMode()">Annuler</button>
   </div>
 </nav>

src/app/core/components/header/header.component.scss

@@ -6,7 +6,7 @@ nav {
   display: flex;
   align-items: center;
   height: 3.2rem;
-  background-color: var(--secondary); //#666;
+  background-color: #eee; //#666;
 
   .left {
     position: absolute;
@@ -21,8 +21,6 @@ nav {
       align-items: center;
       margin-right: 1rem;
     }
-
-    
   }
 
   .middle {

src/styles.scss

@@ -5,6 +5,7 @@
   --primary-border: #ccc;
   --primary-hover: #eee;
   --secondary: #dddddd;
+  --secondary-hover: #c9c9c9;
   --secondaryBorder: #cccccc;
 
   --disabled: #eee;
@@ -84,7 +85,6 @@ button {
       min-width: 1rem;
       min-height: 1rem;
       padding: 0;
-      background-color: inherit;
   }
 
   &.raised {
@@ -96,6 +96,22 @@ button {
 
   &.stroked {
     border-color: var(--primary-border);
+
+    &.primary {
+      background-color: var(--primary);
+
+      &:hover {
+        background-color: var(--primary-hover);
+      }
+    }
+    
+    &.secondary {
+      background-color: var(--secondary);
+
+      &:hover {
+        background-color: var(--secondary-hover)
+      }
+    }
   }
 
   &.alert {