From aa0c1d7a878a75f49e084a04e47cfc08db035042 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Mon, 31 Jul 2017 13:17:02 +0300
Subject: [PATCH] color.scss added white and black

---
 src/app/core/scss/partials/_colors.scss      | 122 ++++++++-----------
 src/app/core/scss/variables/_theme.scss      |  40 ++++--
 src/app/main/ui/colors/colors.component.html |  19 ++-
 3 files changed, 91 insertions(+), 90 deletions(-)

diff --git a/src/app/core/scss/partials/_colors.scss b/src/app/core/scss/partials/_colors.scss
index 9dda2e02..8cb42eed 100644
--- a/src/app/core/scss/partials/_colors.scss
+++ b/src/app/core/scss/partials/_colors.scss
@@ -19,6 +19,8 @@ $matColorsMap: (
     brown: $mat-brown,
     grey: $mat-grey,
     blue-grey: $mat-blue-grey,
+    white: $mat-white,
+    black: $mat-black,
     primary: $primary,
     accent: $accent,
     warn: $warn
@@ -36,20 +38,50 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
 
     .md-#{$colorName}#{$hue}-bg {
         background-color: $bgColor !important;
-        color: $fgColor;
+        color: $fgColor !important;
 
-        .secondary-text {
-            color: rgba($fgColor, .7);
+        @if (rgba(black, 1) == rgba($fgColor, 1)) {
+
+            &.secondary-text,
+            .secondary-text,
+            &.mat-icon,
+            .mat-icon,
+            &.icon,
+            .icon {
+                color: rgba(0, 0, 0, 0.54) !important;
+            }
+
+            &.hint-text,
+            .hint-text,
+            &.disabled-text,
+            .disabled-text {
+                color: rgba(0, 0, 0, 0.38) !important;
+            }
+
+            &.divider,
+            .divider {
+                color: rgba(0, 0, 0, 0.12) !important;
+            }
+
+        } @else {
+
+            &.secondary-text,
+            .secondary-text {
+                color: rgba(255, 255, 255, 0.70) !important;
+            }
+
+            &.hint-text,
+            .hint-text,
+            &.disabled-text,
+            .disabled-text {
+                color: rgba(255, 255, 255, 0.50) !important;
+            }
+
+            &.divider,
+            .divider {
+                color: rgba(255, 255, 255, 0.12) !important;
+            }
         }
-
-        .hint-text {
-            color: rgba($fgColor, .3);
-        }
-
-        .fade-text {
-            color: rgba($fgColor, .12);
-        }
-
     }
 
     .#{$colorName}#{$hue}-fg {
@@ -85,66 +117,14 @@ $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);
 
-        @include generateColorClasses($colorName, $bgColor, $fgColor, '-#{$hue}');
+        @if ($bgColor != null and $fgColor != null) {
 
-        // Run the generator one more time for default values (500)
-        @if ($hue == 500) {
-            @include generateColorClasses($colorName, $bgColor, $fgColor, '');
+            @include generateColorClasses($colorName, $bgColor, $fgColor, '-#{$hue}');
+
+            // Run the generator one more time for default values (500)
+            @if ($hue == 500) {
+                @include generateColorClasses($colorName, $bgColor, $fgColor, '');
+            }
         }
     }
 }
-
-// Black text
-.black-fg,
-.black-text {
-    color: rgba(0, 0, 0, 0.87) !important;
-
-    &.secondary-text,
-    .secondary-text,
-    &.mat-icon,
-    .mat-icon,
-    &.icon,
-    .icon {
-        color: rgba(0, 0, 0, 0.54) !important;
-    }
-
-    &.hint-text,
-    .hint-text,
-    &.disabled-text,
-    .disabled-text {
-        color: rgba(0, 0, 0, 0.38) !important;
-    }
-
-    &.divider,
-    .divider,
-    &.faint-text,
-    .faint-text {
-        color: rgba(0, 0, 0, 0.12) !important;
-    }
-}
-
-// White text
-.white-fg,
-.white-text {
-    color: rgb(255, 255, 255) !important;
-
-    &.secondary-text,
-    .secondary-text {
-        color: rgba(255, 255, 255, 0.70) !important;
-    }
-
-    &.hint-text,
-    .hint-text,
-    &.disabled-text,
-    .disabled-text {
-        color: rgba(255, 255, 255, 0.50) !important;
-    }
-
-    &.divider,
-    .divider,
-    &.faint-text,
-    .faint-text {
-        color: rgba(255, 255, 255, 0.12) !important;
-    }
-
-}
diff --git a/src/app/core/scss/variables/_theme.scss b/src/app/core/scss/variables/_theme.scss
index 7018af23..77c75928 100644
--- a/src/app/core/scss/variables/_theme.scss
+++ b/src/app/core/scss/variables/_theme.scss
@@ -1,20 +1,34 @@
 @import '~@angular/material/theming';
 
+$mat-white: (
+    500: white,
+    contrast: (
+        500: $black-87-opacity
+    )
+);
+
+$mat-black: (
+    500: black,
+    contrast: (
+        500: white,
+    )
+);
+
 $mat-fusedark: (
-    50: #ececee,
-    100: #c5c6cb,
-    200: #9ea1a9,
-    300: #7d818c,
-    400: #5c616f,
-    500: #3c4252,
-    600: #353a48,
-    700: #2d323e,
+    50: #ECECEE,
+    100: #C5C6CB,
+    200: #9EA1A9,
+    300: #7D818C,
+    400: #5C616F,
+    500: #3C4252,
+    600: #353A48,
+    700: #2D323E,
     800: #262933,
-    900: #1e2129,
-    A100: #c5c6cb,
-    A200: #9ea1a9,
-    A400: #5c616f,
-    A700: #2d323e,
+    900: #1E2129,
+    A100: #C5C6CB,
+    A200: #9EA1A9,
+    A400: #5C616F,
+    A700: #2D323E,
     contrast: (
         50: $black-87-opacity,
         100: $black-87-opacity,
diff --git a/src/app/main/ui/colors/colors.component.html b/src/app/main/ui/colors/colors.component.html
index afbcb104..c23ccfd8 100644
--- a/src/app/main/ui/colors/colors.component.html
+++ b/src/app/main/ui/colors/colors.component.html
@@ -4,7 +4,7 @@
     <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"
+        <a md-raised-button class="reference-button md-white-bg"
            href="https://www.google.com/design/spec/style/color.html#color-color-palette"
            target="_blank">
             <md-icon>link</md-icon>
@@ -30,6 +30,12 @@
                 </ng-template>
             </md-tab>
 
+            <md-tab *ngFor="let color of ['white', 'black']" label="{{color}}">
+                <ng-template md-tab-label>
+                    <span class="text-capitalize">{{color}}</span>
+                </ng-template>
+            </md-tab>
+
         </md-tab-group>
 
         <div class="color-tabs-content p-24" fxLayout="column">
@@ -54,8 +60,8 @@
                     <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 class="hint-text pb-4">.hint-text, .disabled-text</div>
+                        <div class="divider">.divider</div>
                     </div>
 
                     <div fxFlex="30">
@@ -67,7 +73,7 @@
                 </div>
             </div>
 
-            <div class="color" fxLayout="column" fxFlex="1 0 auto">
+            <div class="color" fxLayout="column" fxFlex="1 0 auto" *ngIf="selectedColor != 'black' && selectedColor != 'white'">
 
                 <div class="colored-bg p-8"
                      *ngFor="let hue of ['50','100','200','300','400','500','600','700','800','900','A100','A200','A400','A700']"
@@ -79,8 +85,8 @@
                     <div class="colored-bg p-8" [ngClass]="'md-'+selectedColor+'-'+hue+'-bg'" fxFlex="30">
                         <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 class="hint-text pb-4">.hint-text, .disabled-text</div>
+                        <div class="divider">.divider</div>
                     </div>
 
                     <div class="p-8" fxFlex="30" fxLayoutAlign="start center">.{{selectedColor+'-'+hue+'-bg'}}</div>
@@ -90,6 +96,7 @@
                         .{{selectedColor+'-'+hue+'-fg'}}
                     </div>
                 </div>
+
             </div>
         </div>
     </div>