(Colors) Improved the color generators

src/@fuse/scss/partials/_colors.scss

@@ -14,7 +14,7 @@ i {
 }
 
 // Material colors map
-$matColorsMap: (
+$matPalettes: (
     primary: $primary,
     accent: $accent,
     warn: $warn,
@@ -43,13 +43,16 @@ $matColorsMap: (
 );
 
 // Material color hues list
-$matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
+$matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
 
 // Text color levels generator mixin
-@mixin generateTextColorLevels($baseTextColor) {
+@mixin generateTextColorLevels($classes, $contrast) {
 
-    // If the base text color is black...
+    // If the contrast is dark...
-    @if (rgba(black, 1) == rgba($baseTextColor, 1)) {
+    @if ($contrast == 'dark') {
+
+        // Put down the color classes
+        #{$classes} {
 
             i,
             .icon {
@@ -76,11 +79,15 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
             .mat-ripple-element {
                 background: rgba(0, 0, 0, 0.1);
             }
+        }
 
     }
         // If the base text color is white...
     @else {
 
+        // Put down the color classes
+        #{$classes} {
+
             i,
             .icon {
                 color: rgba(255, 255, 255, 1);
@@ -107,11 +114,12 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
                 background: rgba(255, 255, 255, 0.1);
             }
         }
+    }
 }
 
-@mixin generateMaterialElementColors($contrastColor) {
+@mixin generateMaterialElementColors($classes, $contrast) {
 
-    // If the contrast color is white...
+    // If the contrast color is light...
     $fuseForeground: (
         base: white,
         text: white,
@@ -119,8 +127,8 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         divider: rgba(white, 0.12),
     );
 
-    // If the contrast color is black...
+    // If the contrast color is dark...
-    @if (rgba(black, 1) == rgba($contrastColor, 1)) {
+    @if ($contrast == 'dark') {
 
         $fuseForeground: (
             base: black,
@@ -129,6 +137,9 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         );
     }
 
+    // Put down the color classes
+    #{$classes} {
+
         // Native Input
         input[type="text"] {
             color: map_get($fuseForeground, base);
@@ -167,6 +178,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         .mat-select-value {
             color: map_get($fuseForeground, text);
         }
+    }
 }
 
 // Color classes generator mixin
@@ -180,14 +192,6 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         background-color: $color !important;
         color: $contrastColor !important;
 
-        // Generate text color levels
-        // based on current contrast color
-        @include generateTextColorLevels($contrastColor);
-
-        // Generate material element colors
-        // based on current contrast color
-        @include generateMaterialElementColors($contrastColor);
-
         &[disabled] {
             background-color: rgba($color, .12) !important;
             color: rgba($contrastColor, .26) !important;
@@ -196,14 +200,6 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
 
     .#{$colorName}#{$hue}-fg {
         color: $color !important;
-
-        // Generate text color levels
-        // based on current contrast color
-        @include generateTextColorLevels($color);
-
-        // Generate material element colors
-        // based on current contrast color
-        @include generateMaterialElementColors($color);
     }
 
     .#{$colorName}#{$hue}-border {
@@ -229,49 +225,126 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
 
 @mixin generateFuseColorClasses($primary, $accent, $warn) {
 
-    $colorMap: (
+    $palettes: (
         primary: $primary,
         accent: $accent,
         warn: $warn
     );
 
+    // Define contrast lists
+    $light-contrasting-classes: ();
+    $dark-contrasting-classes: ();
+
     // Generate the color classes...
-    @each $name, $map in $colorMap {
+    @each $paletteName, $palette in $palettes {
 
-        @each $hue in $matColorHues {
+        // Get the contrasts map
+        $contrasts: map-get($palette, 'contrast');
 
-            $color: map-get($map, $hue);
+        @each $hue in $matHues {
-            $contrastColor: map-get(map-get($map, 'contrast'), $hue);
 
-            @if ($color != null and $contrastColor != null) {
+            // Get the color and the contrasting color
+            $color: map-get($palette, $hue);
+            $contrast: map-get($contrasts, $hue);
 
-                @include generateColorClasses($name, $color, $contrastColor, '-#{$hue}');
+            @if ($color != null and $contrast != null) {
+
+                // Generate color classes
+                @include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
+
+                // If the contrast color is dark
+                @if (rgba(black, 1) == rgba($contrast, 1)) {
+                    $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
+                }
+                    // if the contrast color is light
+                @else {
+                    $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
+                }
 
                 // Run the generator one more time for default values (500)
                 @if ($hue == 500) {
-                    @include generateColorClasses($name, $color, $contrastColor, '');
+
+                    // Generate color classes
+                    @include generateColorClasses($paletteName, $color, $contrast, '');
+
+                    // Add color to the correct list depending on the contrasting color
+
+                    // If the contrast color is dark
+                    @if (rgba(black, 1) == rgba($contrast, 1)) {
+                        $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
+                    }
+                        // if the contrast color is light
+                    @else {
+                        $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
                     }
                 }
             }
         }
+    }
+
+    // Generate contrasting colors
+    @include generateTextColorLevels($dark-contrasting-classes, 'dark');
+    @include generateTextColorLevels($light-contrasting-classes, 'light');
+    @include generateMaterialElementColors($dark-contrasting-classes, 'dark');
+    @include generateMaterialElementColors($light-contrasting-classes, 'light');
 }
 
 // Generate the color classes...
-@each $colorName, $colorMap in $matColorsMap {
 
-    @each $hue in $matColorHues {
+// Define contrast lists
+$light-contrasting-classes: ();
+$dark-contrasting-classes: ();
 
-        $color: map-get($colorMap, $hue);
+@each $paletteName, $palette in $matPalettes {
-        $contrastColor: map-get(map-get($colorMap, 'contrast'), $hue);
 
-        @if ($color != null and $contrastColor != null) {
+    // Get the contrasts map
+    $contrasts: map-get($palette, 'contrast');
 
-            @include generateColorClasses($colorName, $color, $contrastColor, '-#{$hue}');
+    @each $hue in $matHues {
+
+        // Get the color and the contrasting color
+        $color: map-get($palette, $hue);
+        $contrast: map-get($contrasts, $hue);
+
+        @if ($color != null and $contrast != null) {
+
+            // Generate color classes
+            @include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
+
+            // Add color to the correct list depending on the contrasting color
+
+            // If the contrast color is dark
+            @if (rgba(black, 1) == rgba($contrast, 1)) {
+                $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
+            }
+                // if the contrast color is light
+            @else {
+                $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
+            }
 
             // Run the generator one more time for default values (500)
             @if ($hue == 500) {
-                @include generateColorClasses($colorName, $color, $contrastColor, '');
+
+                // Generate color classes
+                @include generateColorClasses($paletteName, $color, $contrast, '');
+
+                // Add color to the correct list depending on the contrasting color
+
+                // If the contrast color is dark
+                @if (rgba(black, 1) == rgba($contrast, 1)) {
+                    $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
+                }
+                    // if the contrast color is light
+                @else {
+                    $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
+                }
             }
         }
     }
 }
+
+// Generate contrasting colors
+@include generateTextColorLevels($dark-contrasting-classes, 'dark');
+@include generateTextColorLevels($light-contrasting-classes, 'light');
+@include generateMaterialElementColors($dark-contrasting-classes, 'dark');
+@include generateMaterialElementColors($light-contrasting-classes, 'light');