Color helper updated.

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

@@ -1,26 +1,26 @@
 $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
 );
 
 $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
@@ -39,6 +39,19 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         .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 {
@@ -70,6 +83,19 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
             .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 {
@@ -103,11 +129,6 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     }
 }
 
-
-
-
-
-
 // Black text
 .black-fg,
 .black-text {

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

@@ -2,11 +2,11 @@
 
     <!-- HEADER -->
     <div class="header" fxLayout="row" fxLayoutAlign="space-between center">
-        <h1 class="title">Material Colors</h1>
+        <h1 class="title">Colors</h1>
 
         <a md-raised-button class="reference-button"
-                href="https://www.google.com/design/spec/style/color.html#color-color-palette"
+           href="https://www.google.com/design/spec/style/color.html#color-color-palette"
-                target="_blank">
+           target="_blank">
             <md-icon>link</md-icon>
             <span>Reference</span>
         </a>
@@ -18,6 +18,12 @@
 
         <md-tab-group class="color-tabs" md-dynamic-height="true" (selectChange)="selectColor($event)">
 
+            <md-tab *ngFor="let color of ['primary', 'accent', 'warn']" label="{{color}}">
+                <ng-template md-tab-label>
+                    <span class="text-capitalize">{{color}}</span>
+                </ng-template>
+            </md-tab>
+
             <md-tab *ngFor="let color of (colors | keys)" label="{{color.key}}">
                 <ng-template md-tab-label>
                     <span class="text-capitalize">{{color.key}}</span>
@@ -41,9 +47,21 @@
                 <div class="p-8">
                     <h3 class="text-capitalize">{{selectedColor}}</h3>
                 </div>
-                <div class="p-8" fxLayout="row" fxLayoutAlign="space-between center">
+                <div class="p-8" fxLayout="row">
-                    <div>500</div>
+
-                    <div>
+                    <div fxFlex="30" fxLayoutAlign="start center">500</div>
+
+                    <div class="colored-bg p-8" [ngClass]="'md-'+selectedColor+'-bg'" fxFlex="30">
+                        <div class="pb-4">.{{'md-'+selectedColor+'-bg'}}</div>
+                        <div class="secondary-text pb-4">.secondary-text</div>
+                        <div class="hint-text pb-4">.hint-text</div>
+                        <div class="fade-text">.fade-text</div>
+                    </div>
+
+                    <div fxFlex="30">
+                    </div>
+
+                    <div fxFlex="128px">
                         {{selectedColorDefaultValue}}
                     </div>
                 </div>
@@ -56,16 +74,19 @@
                      fxFlex="1 0 auto" fxLayout="row" fxLayout.sm="column"
                      [ngClass]="selectedColor+'-'+hue+'-bg'">
 
-                    <div class="p-8" fxFlex>{{hue}}</div>
+                    <div class="p-8" fxFlex="30" fxLayoutAlign="start center">{{hue}}</div>
 
-                    <div class="colored-bg p-8" [ngClass]="'md-'+selectedColor+'-'+hue+'-bg'" fxFlex>
+                    <div class="colored-bg p-8" [ngClass]="'md-'+selectedColor+'-'+hue+'-bg'" fxFlex="30">
-                        .{{'md-'+selectedColor+'-'+hue+'-bg'}}
+                        <div class="pb-4">.{{'md-'+selectedColor+'-'+hue+'-bg'}}</div>
+                        <div class="secondary-text pb-4">.secondary-text</div>
+                        <div class="hint-text pb-4">.hint-text</div>
+                        <div class="fade-text">.fade-text</div>
                     </div>
 
-                    <div class="p-8" fxFlex>.{{selectedColor+'-'+hue+'-bg'}}</div>
+                    <div class="p-8" fxFlex="30" fxLayoutAlign="start center">.{{selectedColor+'-'+hue+'-bg'}}</div>
 
                     <div class="fg-box mat-elevation-z2 p-8"
-                         [ngClass]="selectedColor+'-'+hue+'-fg'">
+                         [ngClass]="selectedColor+'-'+hue+'-fg'" fxFlex="128px" fxLayoutAlign="center center">
                         .{{selectedColor+'-'+hue+'-fg'}}
                     </div>
                 </div>

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

@@ -16,7 +16,6 @@
 
                 .fg-box {
                     background-color: white;
-                    min-width: 128px;
                 }
             }
 

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

@@ -16,7 +16,7 @@ export class ColorsComponent implements OnInit
     constructor()
     {
         this.colors = MatColors.all;
-        this.updateSelectedColor('red');
+        this.updateSelectedColor('primary');
     }
 
     ngOnInit()