color.scss generator refactor

src/app/core/scss/partials/_colors.scss

@@ -1,30 +1,83 @@
+// Material colors map
 $matColorsMap: (
-        red: $mat-red,
+    red: $mat-red,
-        pink:$mat-pink,
+    pink: $mat-pink,
-        purple:$mat-purple,
+    purple: $mat-purple,
-        deep-purple:$mat-deep-purple,
+    deep-purple: $mat-deep-purple,
-        indigo:$mat-indigo,
+    indigo: $mat-indigo,
-        blue:$mat-blue,
+    blue: $mat-blue,
-        light-blue:$mat-light-blue,
+    light-blue: $mat-light-blue,
-        cyan:$mat-cyan,
+    cyan: $mat-cyan,
-        teal:$mat-teal,
+    teal: $mat-teal,
-        green:$mat-green,
+    green: $mat-green,
-        light-green:$mat-light-green,
+    light-green: $mat-light-green,
-        lime:$mat-lime,
+    lime: $mat-lime,
-        yellow:$mat-yellow,
+    yellow: $mat-yellow,
-        amber:$mat-amber,
+    amber: $mat-amber,
-        orange:$mat-orange,
+    orange: $mat-orange,
-        deep-orange:$mat-deep-orange,
+    deep-orange: $mat-deep-orange,
-        brown:$mat-brown,
+    brown: $mat-brown,
-        grey:$mat-grey,
+    grey: $mat-grey,
-        blue-grey:$mat-blue-grey,
+    blue-grey: $mat-blue-grey,
-        primary:$primary,
+    primary: $primary,
-        accent: $accent,
+    accent: $accent,
-        warn: $warn
+    warn: $warn
 );
 
+// Material color hues list
 $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
 
+// Color classes generator mixin
+@mixin generateColorClasses($colorName, $bgColor, $fgColor, $hue) {
+
+    .#{$colorName}#{$hue}-bg {
+        background-color: $bgColor !important;
+    }
+
+    .md-#{$colorName}#{$hue}-bg {
+        background-color: $bgColor !important;
+        color: $fgColor;
+
+        .secondary-text {
+            color: rgba($fgColor, .7);
+        }
+
+        .hint-text {
+            color: rgba($fgColor, .3);
+        }
+
+        .fade-text {
+            color: rgba($fgColor, .12);
+        }
+
+    }
+
+    .#{$colorName}#{$hue}-fg {
+        color: $bgColor !important;
+    }
+
+    .#{$colorName}#{$hue}-border {
+        border-color: $bgColor !important;
+    }
+
+    .#{$colorName}#{$hue}-border-top {
+        border-top-color: $bgColor !important;
+    }
+
+    .#{$colorName}#{$hue}-border-right {
+        border-right-color: $bgColor !important;
+    }
+
+    .#{$colorName}#{$hue}-border-bottom {
+        border-bottom-color: $bgColor !important;
+    }
+
+    .#{$colorName}#{$hue}-border-left {
+        border-left-color: $bgColor !important;
+    }
+}
+
+// Generate the color classes...
 @each $colorName, $colorMap in $matColorsMap {
 
     @each $hue in $matColorHues {
@@ -32,99 +85,11 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         $bgColor: map-get($colorMap, $hue);
         $fgColor: map-get(map-get($colorMap, 'contrast'), $hue);
 
-        .#{$colorName}-#{$hue}-bg {
+        @include generateColorClasses($colorName, $bgColor, $fgColor, '-#{$hue}');
-            background-color: $bgColor !important;
-        }
-
-        .md-#{$colorName}-#{$hue}-bg {
-            background-color: $bgColor !important;
-            color: $fgColor;
-
-            .secondary-text {
-                color: rgba($fgColor, .7);
-            }
-
-            .hint-text {
-                color: rgba($fgColor, .3);
-            }
-
-            .fade-text {
-                color: rgba($fgColor, .12);
-            }
-
-        }
-
-        .#{$colorName}-#{$hue}-fg {
-            color: $bgColor !important;
-        }
-
-        .#{$colorName}-#{$hue}-border {
-            border-color: $bgColor !important;
-        }
-
-        .#{$colorName}-#{$hue}-border-top {
-            border-top-color: $bgColor !important;
-        }
-
-        .#{$colorName}-#{$hue}-border-right {
-            border-right-color: $bgColor !important;
-        }
-
-        .#{$colorName}-#{$hue}-border-bottom {
-            border-bottom-color: $bgColor !important;
-        }
-
-        .#{$colorName}-#{$hue}-border-left {
-            border-left-color: $bgColor !important;
-        }
 
+        // Run the generator one more time for default values (500)
         @if ($hue == 500) {
-
+            @include generateColorClasses($colorName, $bgColor, $fgColor, '');
-            .md-#{$colorName}-bg {
-                background-color: $bgColor !important;
-                color: $fgColor;
-
-                .secondary-text {
-                    color: rgba($fgColor, .7);
-                }
-
-                .hint-text {
-                    color: rgba($fgColor, .3);
-                }
-
-                .fade-text {
-                    color: rgba($fgColor, .12);
-                }
-
-            }
-
-            .#{$colorName}-bg {
-                background-color: $bgColor !important;
-            }
-
-            .#{$colorName}-fg {
-                color: $bgColor !important;
-            }
-
-            .#{$colorName}-border {
-                border-color: $bgColor !important;
-            }
-
-            .#{$colorName}-border-top {
-                border-top-color: $bgColor !important;
-            }
-
-            .#{$colorName}-border-right {
-                border-right-color: $bgColor !important;
-            }
-
-            .#{$colorName}-border-bottom {
-                border-bottom-color: $bgColor !important;
-            }
-
-            .#{$colorName}-border-left {
-                border-left-color: $bgColor !important;
-            }
         }
     }
 }
@@ -147,7 +112,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     .hint-text,
     &.disabled-text,
     .disabled-text {
-        color: rgba(0, 0, 0, 0.26) !important;
+        color: rgba(0, 0, 0, 0.38) !important;
     }
 
     &.divider,
@@ -164,11 +129,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     color: rgb(255, 255, 255) !important;
 
     &.secondary-text,
-    .secondary-text,
+    .secondary-text {
-    &.mat-icon,
-    .mat-icon,
-    &.icon,
-    .icon {
         color: rgba(255, 255, 255, 0.70) !important;
     }
 
@@ -176,7 +137,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     .hint-text,
     &.disabled-text,
     .disabled-text {
-        color: rgba(255, 255, 255, 0.30) !important;
+        color: rgba(255, 255, 255, 0.50) !important;
     }
 
     &.divider,
@@ -186,9 +147,4 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         color: rgba(255, 255, 255, 0.12) !important;
     }
 
-    // Angular material element color override
-    .mat-icon {
-        color: #FFFFFF;
-    }
-
 }

src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html

@@ -1,7 +1,7 @@
 <!-- SIDENAV HEADER -->
-<div class="header p-24" fxLayout="column" fxLayoutAlign="space-between start">
+<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
     <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
-        <md-icon class="logo-icon">mail</md-icon>
+        <md-icon class="logo-icon s-32 white-fg">mail</md-icon>
         <span class="logo-text">Mailbox</span>
     </div>
 

src/app/main/apps/todo/sidenavs/main/main-sidenav.component.html

@@ -1,7 +1,7 @@
 <!-- SIDENAV HEADER -->
-<div class="header p-24" fxLayout="column" fxLayoutAlign="space-between start">
+<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
     <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
-        <md-icon class="logo-icon">check_box</md-icon>
+        <md-icon class="logo-icon s-32 white-fg">check_box</md-icon>
         <span class="logo-text">To-do</span>
     </div>
 

src/app/main/apps/todo/todo.component.html

@@ -1,7 +1,7 @@
 <div id="todo" class="page-layout carded left-sidenav">
 
     <!-- TOP BACKGROUND -->
-    <div class="top-bg"></div>
+    <div class="top-bg md-accent-bg"></div>
     <!-- / TOP BACKGROUND -->
 
     <md-sidenav-container>

src/app/main/ui/colors/colors.component.html

@@ -1,7 +1,7 @@
 <div id="material-colors" class="page-layout simple tabbed" fxLayout="column">
 
     <!-- HEADER -->
-    <div class="header p-24" fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="space-between center">
         <h1 class="title">Colors</h1>
 
         <a md-raised-button class="reference-button"

src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html

@@ -1,14 +1,14 @@
 <div class="page-layout carded fullwidth single-scroll">
 
     <!-- TOP BACKGROUND -->
-    <div class="top-bg"></div>
+    <div class="top-bg md-accent-bg"></div>
     <!-- / TOP BACKGROUND -->
 
     <!-- CENTER -->
     <div class="center">
 
         <!-- CONTENT HEADER -->
-        <div class="header p-24">
+        <div class="header md-accent-bg p-24">
             <h2>Fullwidth with page scroll</h2>
         </div>
         <!-- / CONTENT HEADER -->

src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html

@@ -10,7 +10,6 @@
         <!-- CONTENT HEADER -->
         <div class="header md-accent-bg p-24">
             <h2>Fullwidth with content scroll</h2>
-            <button md-raised-button>test</button>
         </div>
         <!-- / CONTENT HEADER -->
 

src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html

@@ -1,7 +1,7 @@
 <div class="page-layout carded left-sidenav single-scroll">
 
     <!-- TOP BACKGROUND -->
-    <div class="top-bg"></div>
+    <div class="top-bg md-accent-bg"></div>
     <!-- / TOP BACKGROUND -->
 
     <md-sidenav-container>
@@ -11,7 +11,7 @@
                     fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24">
+            <div class="header md-accent-bg p-24">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->
@@ -29,7 +29,7 @@
         <div class="center">
 
             <!-- CONTENT HEADER -->
-            <div class="header p-24">
+            <div class="header md-accent-bg p-24">
                 <h2>Left sidenav with page scroll</h2>
             </div>
             <!-- / CONTENT HEADER -->

src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html

@@ -1,7 +1,7 @@
 <div class="page-layout carded left-sidenav">
 
     <!-- TOP BACKGROUND -->
-    <div class="top-bg"></div>
+    <div class="top-bg md-accent-bg"></div>
     <!-- / TOP BACKGROUND -->
 
     <md-sidenav-container>
@@ -11,7 +11,7 @@
                     fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24">
+            <div class="header md-accent-bg p-24">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->
@@ -29,7 +29,7 @@
         <div class="center">
 
             <!-- CONTENT HEADER -->
-            <div class="header p-24">
+            <div class="header md-accent-bg p-24">
                 <h2>Left sidenav with content scroll</h2>
             </div>
             <!-- / CONTENT HEADER -->

src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html

@@ -11,7 +11,7 @@
                     fuseMdSidenavHelper="carded-right-sidenav" md-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24">
+            <div class="header md-accent-bg p-24">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->
@@ -29,7 +29,7 @@
         <div class="center">
 
             <!-- CONTENT HEADER -->
-            <div class="header p-24">
+            <div class="header md-accent-bg p-24">
                 <h2>Right sidenav with page scroll</h2>
             </div>
             <!-- / CONTENT HEADER -->

src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html

@@ -1,7 +1,7 @@
 <div class="page-layout carded right-sidenav">
 
     <!-- TOP BACKGROUND -->
-    <div class="top-bg"></div>
+    <div class="top-bg md-accent-bg"></div>
     <!-- / TOP BACKGROUND -->
 
     <md-sidenav-container>
@@ -11,7 +11,7 @@
                     fuseMdSidenavHelper="carded-right-sidenav" md-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24">
+            <div class="header md-accent-bg p-24">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->
@@ -29,7 +29,7 @@
         <div class="center">
 
             <!-- CONTENT HEADER -->
-            <div class="header p-24">
+            <div class="header md-accent-bg p-24">
                 <h2>Right sidenav with content scroll</h2>
             </div>
             <!-- / CONTENT HEADER -->

src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html

@@ -1,7 +1,7 @@
 <div class="page-layout simple fullwidth">
 
     <!-- HEADER -->
-    <div class="header p-24">
+    <div class="header md-accent-bg p-24">
         <h2>Fullwidth</h2>
     </div>
     <!-- / HEADER -->

src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html

@@ -15,7 +15,7 @@
         <div class="center" fxFlex perfect-scrollbar>
 
             <!-- HEADER -->
-            <div class="header p-24" fxLayout="row">
+            <div class="header md-accent-bg p-24" fxLayout="row">
 
                 <button md-button class="mat-icon-button sidenav-toggle"
                         fuseMdSidenavToggler="simple-left-sidenav-2"

src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html

@@ -15,7 +15,7 @@
         <div class="center" fxFlex perfect-scrollbar>
 
             <!-- HEADER -->
-            <div class="header p-24" fxLayout="row">
+            <div class="header md-accent-bg p-24" fxLayout="row">
 
                 <button md-button class="mat-icon-button sidenav-toggle"
                         fuseMdSidenavToggler="simple-left-sidenav"

src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html

@@ -15,7 +15,7 @@
         <div class="center" fxFlex perfect-scrollbar>
 
             <!-- HEADER -->
-            <div class="header p-24" fxLayout="row">
+            <div class="header md-accent-bg p-24" fxLayout="row">
 
                 <button md-button class="mat-icon-button sidenav-toggle"
                         fuseMdSidenavToggler="simple-right-sidenav-2"

src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html

@@ -15,7 +15,7 @@
         <div class="center" fxFlex perfect-scrollbar>
 
             <!-- HEADER -->
-            <div class="header p-24" fxLayout="row">
+            <div class="header md-accent-bg p-24" fxLayout="row">
 
                 <button md-button class="mat-icon-button sidenav-toggle"
                         fuseMdSidenavToggler="simple-right-sidenav"

src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.html

@@ -1,7 +1,7 @@
 <div class="page-layout simple tabbed" fxLayout="column">
 
     <!-- HEADER -->
-    <div class="header p-24">
+    <div class="header md-accent-bg p-24">
         <h2>Tabbed</h2>
     </div>
     <!-- / HEADER -->