From ea245b33e9e88170425f5df3c8a430bb45e6b47c Mon Sep 17 00:00:00 2001
From: Kazhnuz <antoine@sortilege.net>
Date: Sat, 13 Oct 2018 18:08:18 +0200
Subject: [PATCH] palette: use mixin and variables for alerts

---
 css/palette.css   | 94 +++++++++++++++++++++++++++--------------------
 scss/palette.scss | 88 ++++++++++++--------------------------------
 2 files changed, 79 insertions(+), 103 deletions(-)

diff --git a/css/palette.css b/css/palette.css
index 9369aec..b0d0523 100644
--- a/css/palette.css
+++ b/css/palette.css
@@ -278,51 +278,67 @@
   background-color: #75b82d !important;
   color: #FFF; }
 
-/* alertes */
-.alert-primary {
-  background-color: #e4dcf2; }
-
-.alert-secondary {
-  background-color: #dbdff4; }
-
-.alert-info {
-  background-color: #d9ecfc; }
-
-.alert-success {
-  background-color: #e3f0d5; }
-
-.alert-warning {
-  background-color: #fbe4ce; }
-
-.alert-danger {
-  background-color: #f9d8d2; }
+/* ALERTS */
+.alert-blue {
+  background-color: #eaedf9;
+  color: black; }
 
 .alert-violet {
-  background-color: #f5dbf5; }
+  background-color: #faedfa;
+  color: black; }
 
 .alert-purple {
-  background-color: #e4dcf2; }
-
-.alert-blue {
-  background-color: #dbdff4; }
-
-.alert-skyblue {
-  background-color: #d9ecfc; }
-
-.alert-turquoise {
-  background-color: #daf1eb; }
-
-.alert-green {
-  background-color: #e3f0d5; }
-
-.alert-orange {
-  background-color: #fbe4ce; }
+  background-color: #ece7f6;
+  color: black; }
 
 .alert-red {
-  background-color: #f9d8d2; }
+  background-color: #fadcd7;
+  color: black; }
 
-.alert-light {
-  background-color: #ffffff; }
+.alert-orange {
+  background-color: #fde0c4;
+  color: black; }
+
+.alert-green {
+  background-color: #d9f0c1;
+  color: black; }
+
+.alert-skyblue {
+  background-color: white;
+  color: black; }
 
 .alert-dark {
-  background-color: #e1e1e1; }
+  background-color: lightgray;
+  color: black; }
+
+.alert-light {
+  background-color: white;
+  color: #23231f; }
+
+.alert-turquoise {
+  background-color: #dcf3ed;
+  color: black; }
+
+.alert-primary {
+  background-color: #ece7f6;
+  color: black; }
+
+.alert-secondary {
+  background-color: #eaedf9;
+  color: black; }
+
+.alert-warning {
+  background-color: #fde0c4;
+  color: black; }
+
+.alert-danger {
+  background-color: #fadcd7;
+  color: black; }
+
+.alert-info {
+  background-color: white;
+  color: black; }
+
+.alert-success {
+  background-color: #d9f0c1;
+  color: black; }
diff --git a/scss/palette.scss b/scss/palette.scss
index f5a4bbd..2c307c2 100644
--- a/scss/palette.scss
+++ b/scss/palette.scss
@@ -33,6 +33,11 @@ $color-success: $color-green;
   color: $text-color;
 }
 
+@mixin alert-color($background-color) {
+  background-color: lighten($background-color, 40%);
+  color: darken($background-color, 80%);
+}
+
 /* CARDS */
 
 .card {
@@ -109,69 +114,24 @@ $color-success: $color-green;
   &-success { @include background-color($color-success, #FFF); }
 }
 
-/* alertes */
+/* ALERTS */
 
-.alert-primary {
-  background-color:#e4dcf2;
-}
-
-.alert-secondary {
-  background-color:#dbdff4;
-}
-
-.alert-info {
-  background-color:#d9ecfc;
-}
-
-.alert-success {
-  background-color:#e3f0d5;
-}
-
-.alert-warning {
-  background-color:#fbe4ce;
-}
-
-.alert-danger {
-  background-color:#f9d8d2;
-}
-
-
-.alert-violet {
-  background-color:#f5dbf5;
-}
-
-.alert-purple {
-  background-color:#e4dcf2;
-}
-
-.alert-blue {
-  background-color:#dbdff4;
-}
-
-.alert-skyblue {
-  background-color:#d9ecfc;
-}
-
-.alert-turquoise {
-  background-color:#daf1eb;
-}
-
-.alert-green {
-  background-color:#e3f0d5;
-}
-
-.alert-orange {
-  background-color:#fbe4ce;
-}
-
-.alert-red {
-  background-color:#f9d8d2;
-}
-
-.alert-light {
-  background-color:#ffffff;
-}
-
-.alert-dark {
-  background-color:#e1e1e1;
+.alert {
+  &-blue { @include alert-color($color-blue); }
+  &-violet { @include alert-color($color-violet); }
+  &-purple { @include alert-color($color-purple); }
+  &-red { @include alert-color($color-red); }
+  &-orange { @include alert-color($color-orange); }
+  &-green { @include alert-color($color-green); }
+  &-skyblue { @include alert-color($color-skyblue); }
+  &-dark { @include alert-color($color-dark); }
+  &-light { @include alert-color($color-light); }
+  &-turquoise { @include alert-color($color-turquoise); }
+  
+  &-primary { @include alert-color($color-primary); }
+  &-secondary { @include alert-color($color-secondary); }
+  &-warning { @include alert-color($color-warning); }
+  &-danger { @include alert-color($color-danger); }
+  &-info { @include alert-color($color-info); }
+  &-success { @include alert-color($color-success); }
 }