From a820faae1a3d367b2ac2ec0fc0757169339c1546 Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Tue, 24 May 2016 17:43:28 +0300
Subject: [PATCH] refactor(color scheme): colors docs

---
 .../theme/sass/conf/colorSchemes/_blur.scss   | 15 ++++---
 .../theme/sass/conf/colorSchemes/_mint.scss   | 14 +++---
 .../theme/sass/conf/colorSchemes/_ng2.scss    | 43 +++++++++++--------
 3 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/src/app/theme/sass/conf/colorSchemes/_blur.scss b/src/app/theme/sass/conf/colorSchemes/_blur.scss
index 37bb9cdf..6784df3a 100644
--- a/src/app/theme/sass/conf/colorSchemes/_blur.scss
+++ b/src/app/theme/sass/conf/colorSchemes/_blur.scss
@@ -1,32 +1,33 @@
 $default: rgba(#000000, 0.2);
 $body-bg: #F0F3F4;
 
-
 $default-text: #ffffff;
 $content-text: $default-text;
 $help-text: #eeeeee;
-$label-text: #ffffff;
 
+$label-text: #ffffff;
 $disabled: #dddddd;
 $disabled-bg: transparent;
 $border: #ffffff;
 $border-light: rgba(#ffffff, 0.2);
 $input-border: transparent;
 $input-background: rgba(#000000, 0.15);
+$dropdown-text: #7d7d7d;
 
 $sidebar: rgba(#000000, 0.5);
 $sidebar-text: #ffffff;
-$dropdown-text: #7d7d7d;
+
+$mail-box: whitesmoke;
+$auth-panel-background: rgba(#000000, 0.55);
+$progress-background: rgba(#000000, 0.15);
+$progress-default: #ffffff;
+
 $bootstrap-panel-radius: 5px;
 $bootstrap-panel-text: #7d7d7d;
 $bootstrap-panel-bg: #ffffff;
 $bootstrap-panel-header-bg: $bootstrap-panel-bg;
 $bootstrap-panel-header-border: 1px solid rgba(0, 0, 0, 0.12);
 $bootstrap-panel-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
-$mail-box: whitesmoke;
-$auth-panel-background: rgba(#000000, 0.55);
-$progress-background: rgba(#000000, 0.15);
-$progress-default: #ffffff;
 
 $primary: #209e91 !default;
 $info: #2dacd1 !default;
diff --git a/src/app/theme/sass/conf/colorSchemes/_mint.scss b/src/app/theme/sass/conf/colorSchemes/_mint.scss
index 75002a22..48bc278d 100644
--- a/src/app/theme/sass/conf/colorSchemes/_mint.scss
+++ b/src/app/theme/sass/conf/colorSchemes/_mint.scss
@@ -4,28 +4,30 @@ $body-bg: #F0F3F4;
 $default-text: #666666;
 $content-text: $default-text;
 $help-text: #949494;
-$label-text: #ffffff;
 
+$label-text: #ffffff;
 $disabled: #dddddd;
 $disabled-bg: tint($disabled, 15%);
 $border: #d6d6d6;
 $border-light: tint($border, 15%);
 $input-border: shade($border, 5%);
 $input-background: #ffffff;
+$dropdown-text: #7d7d7d;
 
 $sidebar: #1C2B36;
 $sidebar-text: #ffffff;
-$dropdown-text: #7d7d7d;
+
+$mail-box: whitesmoke;
+$auth-panel-background: #ffffff;
+$progress-background: rgba(#000000, 0.07);
+$progress-default: rgba(#000000, 0.15);
+
 $bootstrap-panel-radius: 5px;
 $bootstrap-panel-text: #7d7d7d;
 $bootstrap-panel-bg: #ffffff;
 $bootstrap-panel-header-bg: $bootstrap-panel-bg;
 $bootstrap-panel-header-border: 1px solid rgba(0, 0, 0, 0.12);
 $bootstrap-panel-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
-$mail-box: whitesmoke;
-$auth-panel-background: #ffffff;
-$progress-background: rgba(#000000, 0.07);
-$progress-default: rgba(#000000, 0.15);
 
 $primary: #209e91 !default;
 $info: #2dacd1 !default;
diff --git a/src/app/theme/sass/conf/colorSchemes/_ng2.scss b/src/app/theme/sass/conf/colorSchemes/_ng2.scss
index dec1a17b..1d895829 100644
--- a/src/app/theme/sass/conf/colorSchemes/_ng2.scss
+++ b/src/app/theme/sass/conf/colorSchemes/_ng2.scss
@@ -1,32 +1,38 @@
-$default: #ffffff;
-$body-bg: #F0F3F4;
+$default: #ffffff; // default colors for layout
+$body-bg: #F0F3F4; // default bg color
 
-$default-text: #ffffff;
-$content-text: $default-text;
-$help-text: $default-text;
-$label-text: $default-text;
+$default-text: $default; // default text color layout (usually is the same as $default)
+$content-text: $default-text; // content text color on card, panels, form, etc
+$help-text: $default-text; // additional text color for hits
 
-$disabled: rgba(255, 255, 255, 0.4);
-$disabled-bg: tint($disabled, 15%);
-$border: rgba(255, 255, 255, 0.5);
-$border-light: rgba(255, 255, 255, 0.3);
-$input-border: rgba(255, 255, 255, 0.6);
-$input-background: rgba(255, 255, 255, 0.1);
+$label-text: $default-text; // labels color
+$disabled: rgba(255, 255, 255, 0.4); // color for disabled state
+$disabled-bg: tint($disabled, 15%); // background color for disable state
+$border: rgba(255, 255, 255, 0.5); // border color
+$border-light: rgba(255, 255, 255, 0.3); // lighter version of border color (for hovers)
+$input-border: rgba(255, 255, 255, 0.6); // input border color
+$input-background: rgba(255, 255, 255, 0.1); // input border color for hover
+$dropdown-text: #7d7d7d; // dropdown text color
 
+// sidebar colors
 $sidebar: #282828;
 $sidebar-text: #ffffff;
-$dropdown-text: #7d7d7d;
+
+// specific components colors
+$mail-box: whitesmoke;
+$auth-panel-background: #ffffff;
+$progress-background: rgba(0, 0, 0, 0.15);
+$progress-default: rgba($default-text, 0.95);
+
+// bootstrap card panel styles
 $bootstrap-panel-radius: 7px;
 $bootstrap-panel-text: #ffffff;
 $bootstrap-panel-bg: rgba(255, 255, 255, 0.1);
 $bootstrap-panel-header-bg: transparent;
 $bootstrap-panel-header-border: 1px solid $border-light;
 $bootstrap-panel-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
-$mail-box: whitesmoke;
-$auth-panel-background: #ffffff;
-$progress-background: rgba(0, 0, 0, 0.15);
-$progress-default: rgba($default-text, 0.95);
 
+// color scheme
 $primary: #00abff !default;
 $info: #40daf1 !default;
 $success: #8bd22f !default;
@@ -51,9 +57,11 @@ $success-bg: tint($success, 20%);
 $warning-bg: tint($warning, 20%);
 $danger-bg: tint($danger, 20%);
 
+// link colors
 $activelink: #285eb8;
 $hoverlink: darken($activelink, 20%);
 
+// main background
 @mixin body-bg() {
   background-color: $body-bg;
 
@@ -73,6 +81,7 @@ $hoverlink: darken($activelink, 20%);
   }
 }
 
+// additional background if you want another layer
 @mixin additional-bg() {
   //display: block; // additional background layer, hidden by default
 }