improvement: new palette system

scss/_global.scss

@@ -11,8 +11,10 @@
 
 /* 02.1 - Wrapper et page totale */
 
+$background-color: get-color("skyblue");
+
 #wrapper {
-  background: #64b5f6 url('img/background.png') center bottom repeat-x;
+  background: $background-color url('img/background.png') center bottom repeat-x;
 }
 
 /* 02.1 - Header */

scss/_palette.scss

@@ -1,48 +1,85 @@
-/* --- COLORS --- */
+@use "sass:map";
 
-$color-blue: #4e63c9;
+// BASE PALETTE
-$color-violet: #ce4dcd;
-$color-purple: #7951c0;
-$color-red: #e33d22;
-$color-orange: #eb790a;
-$color-green: #75b82d;
-$color-skyblue: #42a0f3;
-$color-dark: #2D2D2D;
-$color-light: #eeeeec;
-$color-turquoise: #46bd9e;
-$color-yellow: #f6d32d;
-$color-brown: #986a44;
-$color-grey: #77767b;
 
-$color-primary: $color-purple;
+$palette: ("blue":#4e63c9, "violet":#ce4dcd, "purple":#7951c0, "red":#e33d22, "orange":#eb790a, "green":#75b82d, "skyblue":#42a0f3, "dark": #2D2D2D, "light":#eeeeec, "turquoise": #46bd9e, "yellow": #f6d32d, "brown":#986a44, "grey":#77767b);
-$color-secondary: $color-blue;
-$color-warning: $color-orange;
-$color-danger: $color-red;
-$color-info: $color-skyblue;
-$color-success: $color-green;
 
-$color-link: $color-blue;
+$semantics: ("primary":"purple", "secondary":"blue", "warning":"orange", "danger":"red", "info":"skyblue", "success":"green");
-$color-selection: $color-blue;
+
-$color-mark: $color-yellow;
+$whiteness_value: 0.8;
+
+// FUNCTIONS TO GET MORE EASILY COLORS
+
+@function get-color($name) {
+    @if map-has-key($semantics, $name) {
+        @return map.get($palette, map.get($semantics, $name));
+    } @else {
+        @return map.get($palette, $name);
+    }
+}
+
+@function list-colors() {
+    $newmap: map.merge($palette, $semantics);
+    @return $newmap;
+}
+
+@function luminance($color) {
+    $c_red: red($color);
+    $c_grn: green($color);
+    $c_blu: blue($color);
+
+    $luminance: $c_red*0.299 + $c_grn*0.587 + $c_blu*0.114;
+
+    @return $luminance
+}
+
+$color-primary: get-color("primary");
+$color-secondary: get-color("secondary");
+$color-warning: get-color("warning");
+$color-danger: get-color("danger");
+$color-info: get-color("info");
+$color-success: get-color("success");
+
+$color-link: get-color("blue");
+$color-selection: get-color("blue");
+$color-mark: get-color("yellow");
 
 @mixin text-color($text-color) {
   color: $text-color;
 }
 
-@mixin background-color($background-color, $text-color) {
+@mixin background-color($background-color, $light-color, $dark-color) {
   background-color: $background-color!important;
-  color: $text-color;
+    @if (luminance($background-color ) < 255 * $whiteness_value) {
+        color: $light-color;
+    } @else {
+        color: $dark-color;
+    }
 }
 
+.text {
+    @each $name, $color in list-colors() {
+        &-#{$name} { @include text-color(get-color($name)); }
+    }
+}
+
+.bg {
+    @each $name, $color in list-colors() {
+        &-#{$name} { @include background-color(get-color($name), #FFF, #000); }
+    }
+}
+
+// Direct uses of colors
+
 a, a:hover, a:active {
   color: $color-link;
 }
 
 ::selection {
-  @include background-color($color-selection, #FFF);
+  @include background-color($color-selection, #FFF, #000);
 }
 ::-moz-selection {
-  @include background-color($color-selection, #FFF);
+  @include background-color($color-selection, #FFF, #000);
 }
 
 mark {
@@ -52,49 +89,3 @@ mark {
 blockquote, pre {
   border-color: $color-primary;
 }
-
-.text {
-  &-blue { @include text-color($color-blue); }
-  &-violet { @include text-color($color-violet); }
-  &-purple { @include text-color($color-purple); }
-  &-red { @include text-color($color-red); }
-  &-orange { @include text-color($color-orange); }
-  &-green { @include text-color($color-green); }
-  &-skyblue { @include text-color($color-skyblue); }
-  &-dark { @include text-color($color-dark); }
-  &-light { @include text-color($color-light); }
-  &-turquoise { @include text-color($color-turquoise); }
-  &-yellow { @include text-color($color-yellow); }
-  &-brown { @include text-color($color-brown); }
-  &-grey { @include text-color($color-grey); }
-
-  &-primary { @include text-color($color-primary); }
-  &-secondary { @include text-color($color-secondary); }
-  &-warning { @include text-color($color-warning); }
-  &-danger { @include text-color($color-danger); }
-  &-info { @include text-color($color-info); }
-  &-success { @include text-color($color-success); }
-}
-
-.bg {
-  &-blue { @include background-color($color-blue, #FFF); }
-  &-violet { @include background-color($color-violet, #FFF); }
-  &-purple { @include background-color($color-purple, #FFF); }
-  &-red { @include background-color($color-red, #FFF); }
-  &-orange { @include background-color($color-orange, #FFF); }
-  &-green { @include background-color($color-green, #FFF); }
-  &-skyblue { @include background-color($color-skyblue, #FFF); }
-  &-dark { @include background-color($color-dark, #FFF); }
-  &-light { @include background-color($color-light, #111); }
-  &-turquoise { @include background-color($color-turquoise, #FFF); }
-  &-yellow { @include background-color($color-yellow, #FFF); }
-  &-brown { @include background-color($color-brown, #FFF); }
-  &-grey { @include background-color($color-grey, #FFF); }
-
-  &-primary { @include background-color($color-primary, #FFF); }
-  &-secondary { @include background-color($color-secondary, #FFF); }
-  &-warning { @include background-color($color-warning, #FFF); }
-  &-danger { @include background-color($color-danger, #FFF); }
-  &-info { @include background-color($color-info, #FFF); }
-  &-success { @include background-color($color-success, #FFF); }
-}

scss/components/_buttons.scss

@@ -8,29 +8,25 @@
 	text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
 }
 
-@mixin button-lighten($background-color, $text-color) {
+// Colorization functions
-  background-color: lighten($background-color, 10%);
+
-  color:$text-color;
+@mixin colorize-button() {
+    @each $name, $color in list-colors() {
+        &-#{$name} { @include button-color(get-color($name), #FFF, #000); }
+    }
 }
 
-@mixin button-color($background-color, $text-color) {
+@mixin button-color($background-color, $light-color, $dark-color) {
-  background-color: $background-color;
+    @include background-color($background-color, $light-color, $dark-color);
-  color: $text-color;
   &, &:not(.disabled):not(:disabled) {
-    &:hover, &:active, &:focus {
+    &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
-      @include button-lighten($background-color, $text-color);
+      @include button-hover($background-color, $light-color, $dark-color);
     }
   }
 }
 
-@mixin badge-color($background-color, $text-color) {
+@mixin button-hover($background-color, $light-color, $dark-color) {
-  background-color: $background-color;
+    @include background-color(lighten($background-color, 10%), $light-color, $dark-color);
-  color: $text-color;
-    &, &:not(.disabled):not(:disabled) {
-    &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
-      @include button-lighten($background-color, $text-color);
-    }
-  }
 }
 
 // 11.1 - Buttons
@@ -58,6 +54,8 @@
             outline: none;
         }
     }
+
+    @include colorize-button();
 }
 
 .btn-group {
@@ -76,57 +74,12 @@
 	}
 }
 
-.btn {
-  &-blue { @include button-color($color-blue, #FFF); }
-  &-violet { @include button-color($color-violet, #FFF); }
-  &-purple { @include button-color($color-purple, #FFF); }
-  &-red { @include button-color($color-red, #FFF); }
-  &-orange { @include button-color($color-orange, #FFF); }
-  &-green { @include button-color($color-green, #FFF); }
-  &-skyblue { @include button-color($color-skyblue, #FFF); }
-  &-dark { @include button-color($color-dark, #FFF); }
-  &-light { @include button-color($color-light, #111); }
-  &-turquoise { @include button-color($color-turquoise, #FFF); }
-  &-yellow { @include button-color($color-yellow, #FFF); }
-  &-brown { @include button-color($color-brown, #FFF); }
-  &-grey { @include button-color($color-grey, #FFF); }
-
-  &-primary { @include button-color($color-primary, #FFF); }
-  &-secondary { @include button-color($color-secondary, #FFF); }
-  &-warning { @include button-color($color-warning, #FFF); }
-  &-danger { @include button-color($color-danger, #FFF); }
-  &-info { @include button-color($color-info, #FFF); }
-  &-success { @include button-color($color-success, #FFF); }
-}
-
-
 /* 11.2 - Badges */
 
 .badge {
     font-weight:400;
-}
 
-.badge {
+    @include colorize-button();
-  &-blue { @include badge-color($color-blue, #FFF); }
-  &-violet { @include badge-color($color-violet, #FFF); }
-  &-purple { @include badge-color($color-purple, #FFF); }
-  &-red { @include badge-color($color-red, #FFF); }
-  &-orange { @include badge-color($color-orange, #FFF); }
-  &-green { @include badge-color($color-green, #FFF); }
-  &-skyblue { @include badge-color($color-skyblue, #FFF); }
-  &-dark { @include badge-color($color-dark, #FFF); }
-  &-light { @include badge-color($color-light, #111); }
-  &-turquoise { @include badge-color($color-turquoise, #FFF); }
-  &-yellow { @include badge-color($color-yellow, #FFF); }
-  &-brown { @include badge-color($color-brown, #FFF); }
-  &-grey { @include badge-color($color-grey, #FFF); }
-
-  &-primary { @include badge-color($color-primary, #FFF); }
-  &-secondary { @include badge-color($color-secondary, #FFF); }
-  &-warning { @include badge-color($color-warning, #FFF); }
-  &-danger { @include badge-color($color-danger, #FFF); }
-  &-info { @include badge-color($color-info, #FFF); }
-  &-success { @include badge-color($color-success, #FFF); }
 }
 
 /* 11.3 - Réseaux sociaux */
@@ -141,9 +94,9 @@
 }
 
 .btn {
-  &-facebook {@include button-color(#3B5998, #FFF);}
+  &-facebook {@include button-color(#3B5998, #FFF, #000);}
-  &-twitter {@include button-color(#55ACEE, #FFF);}
+  &-twitter {@include button-color(#55ACEE, #FFF, #000);}
-  &-googleplus {@include button-color(#d34836, #FFF);}
+  &-googleplus {@include button-color(#d34836, #FFF, #000);}
-  &-diaspora {@include button-color(#313739, #FFF);}
+  &-diaspora {@include button-color(#313739, #FFF, #000);}
-  &-mastodon {@include button-color(#282c37, #FFF);}
+  &-mastodon {@include button-color(#282c37, #FFF, #000);}
 }

scss/components/_cards.scss

@@ -41,13 +41,43 @@ $card-color-default: white;
     box-shadow: $large-shadow, $inset-shadow;
 }
 
-@mixin card-color($background-color, $text-color) {
+// CARD COLORIZATION
-  & > .card-header { background-color: $background-color; color:$text-color; }
+
+@mixin colorize-card() {
+    @each $name, $color in list-colors() {
+        &-#{$name} { @include card-color(get-color($name), #FFF, #000); }
+    }
+}
+
+@mixin card-color($background-color, $light-color, $dark-color) {
+  & > .card-header, & > .card-footer { @include background-color($background-color, $light-color, $dark-color); }
+  &.card-colored > .card-body { @include background-color($background-color, $light-color, $dark-color); }
+}
+
+// ALERT COLORIZATION
+
+@mixin colorize-alert() {
+  @each $name, $color in list-colors() {
+        &-#{$name} { @include alert-color(get-color($name)); }
+    }
 }
 
 @mixin alert-color($background-color) {
   background-color: lighten($background-color, 35%);
-  color: darken($background-color, 80%);
+  @if (luminance($background-color) > 128 * 0.8) {
+    color: darken($background-color, 70%);
+    a, .alert-link {
+      color:darken($background-color, 70%);
+      font-weight:bold;
+    }
+  } @else {
+    color: lighten($background-color, 80%);
+    a, .alert-link {
+      color:lighten($background-color, 85%);
+      font-weight:bold;
+    }
+  }
+
 }
 
 /* 10.1 - Cards */
@@ -59,35 +89,14 @@ $card-color-default: white;
 	   color:#333;
 	   text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
     }
+
+    @include colorize-card();
 }
 
 .card-body {
     @include card-element();
 }
 
-.card {
-  &-blue { @include card-color($color-blue, #FFF); }
-  &-violet { @include card-color($color-violet, #FFF); }
-  &-purple { @include card-color($color-purple, #FFF); }
-  &-red { @include card-color($color-red, #FFF); }
-  &-orange { @include card-color($color-orange, #FFF); }
-  &-green { @include card-color($color-green, #FFF); }
-  &-skyblue { @include card-color($color-skyblue, #FFF); }
-  &-dark { @include card-color($color-dark, #FFF); }
-  &-light { @include card-color($color-light, #111); }
-  &-turquoise { @include card-color($color-turquoise, #FFF); }
-  &-yellow { @include card-color($color-yellow, #FFF); }
-  &-brown { @include card-color($color-brown, #FFF); }
-  &-grey { @include card-color($color-grey, #FFF); }
-
-  &-primary { @include card-color($color-primary, #FFF); }
-  &-secondary { @include card-color($color-secondary, #FFF); }
-  &-warning { @include card-color($color-warning, #FFF); }
-  &-danger { @include card-color($color-danger, #FFF); }
-  &-info { @include card-color($color-info, #FFF); }
-  &-success { @include card-color($color-success, #FFF); }
-}
-
 /* 10.1.1 - Headers */
 
 .card-header, .card-footer {
@@ -172,32 +181,6 @@ a.list-group-item:hover {
 .alert {
   @include card-self-contained();
   color:rgba(0, 0, 0, 0.7);
-}
 
-.alert a, .alert-link {
+  @include colorize-alert();
-  color:rgba(0, 0, 0, 0.7);
-  font-weight:bold;
-}
-
-.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); }
-  &-yellow { @include alert-color($color-yellow); }
-  &-brown { @include alert-color($color-brown); }
-  &-grey { @include alert-color($color-grey); }
-
-  &-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); }
 }

scss/components/_previews.scss

@@ -28,7 +28,7 @@
     line-height: 1.5em !important;
     padding:0.2em;
     text-align:justify;
-    background-color: $color-light;
+    background-color: get-color("light");
     color:rgba(0,0,0,0.4);
     position: relative;