Factorize colors.

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

@@ -6,7 +6,7 @@ nav {
   display: flex;
   align-items: center;
   height: 3.2rem;
-  background-color: #666;
+  background-color: var(--secondary); //#666;
 
   .left {
     position: absolute;

src/app/task-lists/task-lists.component.html

@@ -25,11 +25,11 @@
   </div>
 </div>
 <div class="selection-actions" *ngIf="isSelectionModeEnabled()">
-  <button class="raised"
+  <button class="stroked"
       [disabled]="isThereMultipleTaskListsSelected()"
       (click)="renameSelectedTaskList()">
     Renommer
   </button>
-  <button class="raised alert"
+  <button class="stroked alert"
       (click)="deleteSelectedTaskLists()">Supprimer</button>
 </div>

src/styles.scss

@@ -1,25 +1,47 @@
 /* You can add global styles to this file, and also import other style files */
+:root {
+  --primary: #fff;
+  --primary-text: #444444;
+  --primary-border: #ccc;
+  --primary-hover: #eee;
+  --secondary: #dddddd;
+  --secondaryBorder: #cccccc;
+
+  --disabled: #eee;
+  --disabled-text: #aaa;
+
+  --transparent: rgba(0,0,0, 0);
+
+  --shadow-1: rgba(0, 0, 0, 0.2);
+  --shadow-2: rgba(0, 0, 0, 0.14);
+  --shadow-3: rgba(0, 0, 0, 0.12);
+  --shadow-hover: #777;
+
+  --alert: #eb1d3f;
+  --alert-text: #fff;
+  --alert-hover: #c20d2b;
+  --alert-border: #b91b35;
+}
 
 html {
   height: 100%;
 }
+
 body {
   margin: 0;
   font-family: Roboto, "Helvetica Neue", sans-serif;
   padding-top: 3.2rem;
-  background-color: #555;
+  background-color: var(--primary);
 }
 
-
-
-
-
 .shadowed {
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 2px 1px -1px var(--shadow-1),
+              0px 1px 1px 0px var(--shadow-2),
+              0px 1px 3px 0px var(--shadow-3);
   transition: box-shadow .2s ease-out;
 
   &:hover {
-    box-shadow: 0 .2em .5em #777;
+    box-shadow: 0 .2em .5em var(--shadow-hover);
   }
 }
 
@@ -28,29 +50,31 @@ a.no-style {
   text-decoration: none;
 }
 
-
 button {
   border-style: solid;
   border-width: .1rem;
-  border-color: rgba(0,0,0, 0);
+  border-color: var(--transparent);
   border-radius: .2rem;
+
   display: flex;
   justify-content: center;
   align-items: center;
+
   padding: .5rem;
-  color: #fff;
+  background-color: var(--transparent);
+  color: var(--primary-text);
 
   transition: background-color .2s ease-out,
               border-color .2s ease-out;
 
   &:hover {
-      background-color: #666;
+      background-color: var(--primary-hover);
-      border-color: rgb(53, 53, 53);
+      border-color: var(--primary-border);
   }
 
   &:disabled {
-    background-color: #aaa;
+    background-color: var(--disabled);
-    color: #ccc;
+    color: var(--disabled-text);
     cursor: not-allowed;
   }
 
@@ -64,16 +88,23 @@ button {
   }
 
   &.raised {
-    background-color: #4a4a4a;
+    background-color: var(--primary); //#4a4a4a;
+    box-shadow: 0px 2px 1px -1px var(--shadow-1),
+              0px 1px 1px 0px var(--shadow-2),
+              0px 1px 3px 0px var(--shadow-3);
+  }
+
+  &.stroked {
+    border-color: var(--primary-border);
   }
 
   &.alert {
-    background: #F93154;
+    background-color: var(--alert);
-    color: #fff;
+    color: var(--alert-text);
 
-    :hover {
+    &:hover {
-      background-color: #f83e5d;
+      background-color: var(--alert-hover);
-      border-color: #b91b35;
+      border-color: var(--alert-border);
     }
   }
 }