Clean up color values

This update will clean up slight color variations in the
code base by creating and using Sass color variables
instead of hex values. Available colors are defined in
colors.scss. Any usage of CSS color properties should
refer to the mapped color variables in colors.scss.

- Removed tags.scss file since tag components no longer used

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I045030a158469e59d07a9fa8cd8aa9f125f0d383

8 files changed, 117 insertions, 172 deletions

diff --git a/app/common/styles/base/buttons.scss b/app/common/styles/base/buttons.scss
index a04aebd..1d90036 100644
--- a/app/common/styles/base/buttons.scss
+++ b/app/common/styles/base/buttons.scss
@@ -1,18 +1,18 @@
-$btn-primary__bg: $color--blue-40;
-$btn-primary__bg--hover: $color--blue-30;
-$btn-primary__bg--disabled: $color--grey-40;
-$btn-primary__txt: $color--grey-0;
-$btn-primary__txt--disabled: $color--grey-60;
+$btn-primary__bg: $base-01--03;
+$btn-primary__bg--hover: $base-01--04;
+$btn-primary__bg--disabled: $base-02--04;
+$btn-primary__txt: $base-02--08;
+$btn-primary__txt--disabled: $base-02--03;
 
-$btn-secondary__bg: $color--grey-0;
-$btn-secondary__txt: $color--blue-40;
-$btn-secondary__txt--hover: $color--blue-30;
-$btn-secondary__txt--disabled: $color--grey-60;
+$btn-secondary__bg: $base-02--08;
+$btn-secondary__txt: $base-01--03;
+$btn-secondary__txt--hover: $base-01--04;
+$btn-secondary__txt--disabled: $base-02--03;
 
 $btn-tertiary__bg: transparent;
-$btn-tertiary__txt: $color--blue-40;
-$btn-tertiary__txt--hover: $color--blue-30;
-$btn-tertiary__txt--disabled: $color--grey-60;
+$btn-tertiary__txt: $base-01--03;
+$btn-tertiary__txt--hover: $base-01--04;
+$btn-tertiary__txt--disabled: $base-02--03;
 
 /***
 Include .btn class in addition to the button type.
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index bb07bd0..a31c603 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -14,7 +14,7 @@ $color--grey-20: #F0F2F5;
 $color--grey-10: #FAFBFC;
 $color--grey-0: #FFFFFF;
 
-// Status colors
+// Accent colors
 $color--teal-70: #098292;
 $color--teal-50: #00B6CB;
 $color--teal-20: #CCF0F5;
@@ -22,117 +22,66 @@ $color--teal-20: #CCF0F5;
 $color--green-50: #0A7D06;
 $color--green-20: #C6E8C5;
 
-$color--yellow-70: #EFC100;
+$color--yellow-70: #DB7C00;
 $color--yellow-50: #FEDF39;
-$color--yellow-40: #FFDF99;
 $color--yellow-20: #FFF8E4;
 
 $color--red-50: #DA1416;
 $color--red-20: #FAD3D3;
 
+// Color mapping
+$base-01--01: $color--blue-100;
+$base-01--02: $color--blue-50;
+$base-01--03: $color--blue-40;
+$base-01--04: $color--blue-30;
+$base-01--05: $color--blue-20;
+
+$base-02--01: $color--grey-100;
+$base-02--02: $color--grey-80;
+$base-02--03: $color--grey-60;
+$base-02--04: $color--grey-40;
+$base-02--05: $color--grey-30;
+$base-02--06: $color--grey-20;
+$base-02--07: $color--grey-10;
+$base-02--08: $color--grey-0;
+
+$accent-01--01: $color--teal-70;
+$accent-01--02: $color--teal-50;
+$accent-01--03: $color--teal-20;
+
+$accent-02--01: $color--green-50;
+$accent-02--02: $color--green-20;
+
+$accent-03--01: $color--yellow-70;
+$accent-03--02: $color--yellow-50;
+$accent-03--03: $color--yellow-20;
+
+$accent-04--01: $color--red-50;
+$accent-04--02: $color--red-20;
+
 // Global
-$white: $color--grey-0;
-$black: $color--grey-100;
-$darkgrey: $color--grey-80;
-$medgrey: #d7dbe0;
-$lightgrey: #f5f7fa;
-$lightblue: #f1f2f6;
-$medblue: #3f71ec;
-$darkblue: #1e3359;
-$purple: #5A3EC8;
-$field__disabled: #e6e6e6;
-$field__focus: #3C6DEF;
-$btn__disabled-txt: #a6a5a6;
-$btn__disabled-bg: #d8d8d8;
-$btn__disabled-border: #CCCCCC;
-$primebtn__disabled-txt: #999999;
-$primebtn__disabled-bg: #CCCCCC;
-
-// Dark background
-$darkbg__grey: #E3ECEC;
-$darkbg__accent: #79a6f6;
-$darkbg__primary: #19273c;
-
-//Disabled table elements
-$disabled-row: #dddee0;
-$disabled-row-txt: $color--grey-60;
-
-//Forms
-$input-border: #a7a7a7;
-
-// Light Background
-$lightbg__grey: #b8c1c1;
-$lightbg__accent: #d8e2fc;
-$lightbg__primary: $color--blue-40;
-
-// Primary Button colors
-$primebtn__bg: $color--blue-40;
-$primebtn__text: $white;
-
-// Secondary Button colors
-$secbtn__bg: #ebf0fc;
-$secbtn__border: #3863ce;
-$secbtn__text: #3863ce;
-
-// Dropdowns
-$dropdown__focus-bg: #e6e9ee;
-
-// Status colors
-$error-color: #e62425;
-$status-ok: #34bc6e;
-$status-ok-light: #cceedf;
-$status-warn: #ffb000;
-
-// Alerts
-$alert__error: rgb(230, 35, 37);
-$alert__warning: rgb(255, 127, 0);
-$alert__message: rgb(203, 221, 235);
-$alert__danger: #fad3D3;
-
-// Severity
-$critical-lightbg: #da1416;
-$critical-darkbg: #ff5c49;
-$severity-medium-lightbg: #dc267f;
-$medium-darkbg: #FF509E;
-$warning-lightbg: #fff8e4;
-$warning-border: #ffdf99;
-$warning-darkbg: #ffb000;
-$low-lightbg: #c42cd6;
-$normal: #00baa1;
-
-// Priority tags
-$lowPriorityColor: $color--teal-50;
-$lowPriorty-bg: #cdf0f6;
-$medPriorityColor: #feb101;
-$medPriorty-bg: #fef0cd;
-$highPriorityColor: #e62425;
-$highPriority-bg: #edc9cb;
-$resolvedColor: $color--grey-60;
-$resolved-bg: #d6d6d6;
-
-
-// Threshold graphs
-$thresh-critical: $error-color;
-$thresh-warning: #ffb001;
-$thresh-normal: #cceedf;
-
-//Inventory
-$active: #c6b6f5;
-$inactive: $severity-medium-lightbg;
-
-// Links
-$links: $color--blue-40;
-$links__hover: $lightbg__primary;
-$links__visited: #8ea7ea;
-$links__disabled: rgba(27, 40, 52, 0.70);
-
-// Navigation
-$nav__top-level-color: #1a273b;
-$nav__second-level-color: #e6e9ed;
-$nav__second-level-text-color: #4b5d78;
-
-//Upload
-$upload__background: #f0f2f5;
-
-//Loader
-$loaderColor: $color--blue-50;
+$primary-light: $base-02--08;
+$primary-dark: $base-02--01;
+$primary-accent: $base-01--03;
+
+$primary-action: $base-01--03;
+$primary-action--hover: $base-01--04;
+
+$text-01: $base-02--01;
+$text-02: $base-02--02;
+$text-03: $base-02--06;
+
+$background-01: $primary-light;
+$background-02: $base-02--06;
+$background-03: $base-02--05;
+$background-04: $base-01--01;
+$background-05: $base-01--02;
+
+$border-color-01: $base-02--05;
+$border-color-02: $base-02--03;
+
+$box-shadow-color: $base-02--05;
+
+$status-error: $accent-04--01;
+$status-ok: $accent-02--01;
+$status-warn: $accent-03--01;
diff --git a/app/common/styles/base/core.scss b/app/common/styles/base/core.scss
index 10ce9c3..7b627a2 100644
--- a/app/common/styles/base/core.scss
+++ b/app/common/styles/base/core.scss
@@ -3,7 +3,7 @@ html, body {
   @include fontFamily;
   font-size: 16px;
   font-weight: 400;
-  color: $black;
+  color: $primary-dark;
 }
 
 p {
@@ -11,19 +11,20 @@ p {
   transition: margin .05s;
 }
 
-a, button.link {
-  color: $links;
+a,
+button.link {
+  color: $primary-action;
   text-decoration: none;
   font-weight: 700;
   &:visited {
-    color: lighten($links, 5%);
+    color: lighten($primary-action, 5%);
   }
   &:hover {
     text-decoration: underline;
     cursor: pointer;
   }
   :focus {
-    color: $links;
+    color: $primary-action;
   }
 }
 
diff --git a/app/common/styles/base/forms.scss b/app/common/styles/base/forms.scss
index 5e75bcc..3699521 100644
--- a/app/common/styles/base/forms.scss
+++ b/app/common/styles/base/forms.scss
@@ -2,16 +2,13 @@ label, legend {
   font-size:1em;
   font-weight: 300;
   margin: 0;
-  &.disabled {
-    color: $lightbg__grey;
-  }
   .error {
     font-size: .9em;
   }
 }
 
 .label__helper-text {
-  color: $darkgrey;
+  color: $text-02;
   line-height: 1.2;
   font-size: 0.9em;
   margin-bottom: 0.4em;
@@ -28,50 +25,50 @@ input[type='date'],
 input[type='time'],
 textarea {
   border-radius: 0px;
-  border: 1px solid $input-border;
+  border: 1px solid $border-color-02;
   margin: 0;
-  background: $white;
+  background: $primary-light;
   box-shadow: 0 0 0;
   transition: none !important;
   max-height: 2.1em;
   &:focus {
-    border-color: $medgrey;
-    box-shadow: 0 -3px $field__focus inset;
+    border-color: $border-color-01;
+    box-shadow: 0 -3px $primary-accent inset;
   }
   &:disabled,
   .disabled {
-    background: $field__disabled;
-    border: 1px solid $lightbg__grey;
+    background: $background-03;
+    border: 1px solid $border-color-02;
   }
   &.input__error {
-    box-shadow: 0 -5px $error-color inset;
-    color: $error-color;
+    box-shadow: 0 -5px $status-error inset;
+    color: $status-error;
     &:focus {
-      box-shadow: 0 -5px $field__focus inset;
+      box-shadow: 0 -5px $primary-accent inset;
     }
   }
 }
 
 //input validation
 .ng-invalid.ng-touched {
-  box-shadow: 0 -3px $error-color inset;
+  box-shadow: 0 -3px $status-error inset;
   &:focus {
-    border-color: $medgrey;
-    box-shadow: 0 -3px $error-color inset;
+    border-color: $border-color-01;
+    box-shadow: 0 -3px $status-error inset;
   }
 }
 .submitted .ng-invalid {
-  box-shadow: 0 -3px $error-color inset;
+  box-shadow: 0 -3px $status-error inset;
   &:focus {
-    border-color: $medgrey;
-    box-shadow: 0 -3px $error-color inset;
+    border-color: $border-color-01;
+    box-shadow: 0 -3px $status-error inset;
   }
 }
 
 .form-error {
   margin-bottom: .7em;
   font-size: 0.8rem;
-  color: #c60f13;
+  color: $status-error;
   height:1rem;
   display: block;
   visibility: hidden;
@@ -81,14 +78,14 @@ textarea {
 }
 //Foundation overwrite
 [type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea {
-  border-color: $input-border;
+  border-color: $border-color-02;
 }
 
 input[readonly],
 input[readonly]:focus{
   box-shadow: 0 0 0;
-  background: $field__disabled;
-  border: 1px solid $lightbg__grey;
+  background: $background-03;
+  border: 1px solid $border-color-02;
 }
 
 textarea { padding: .2em;
@@ -103,7 +100,7 @@ select{
   border-radius: 0px;
   height: auto;
   padding-right: 0.5rem; //override inherited Foundation style
-  border-color: $input-border;
+  border-color: $border-color-02;
   @include fastTransition-all;
   @include bgImage__arrowDown-primary;
   &:focus {
@@ -121,6 +118,6 @@ select{
   }
 }
 .form__validation-message {
-  color: $error-color;
+  color: $status-error;
   font-size: 0.9em;
 }
diff --git a/app/common/styles/base/icons.scss b/app/common/styles/base/icons.scss
index bd5b9a6..9a9646b 100644
--- a/app/common/styles/base/icons.scss
+++ b/app/common/styles/base/icons.scss
@@ -5,8 +5,8 @@
 }
 
 .icon__more {
-  fill: $medblue;
-  stroke: $medblue;
+  fill: $primary-accent;
+  stroke: $primary-accent;
   background: transparent;
   overflow: visible;
   &:hover {
@@ -15,7 +15,7 @@
 }
 
 .icon__more-dropdown {
-  background: $lightgrey;
+  background: $background-02;
   position: absolute;
   right: 3px;
   white-space: normal;
@@ -23,7 +23,7 @@
   z-index: 200;
   padding: 1em;
   font-size: 1em;
-  box-shadow: 2px 4px 5px $medgrey;
+  box-shadow: 2px 4px 5px $box-shadow-color;
 }
 
 .icon__bar-arrow {
@@ -47,7 +47,7 @@
     display: inline-block;
     font-size: 1em;
     margin-left: 1em;
-    color: lighten($darkgrey, 4%);
+    color: $text-02;
   }
 }
 //Status icons
@@ -89,7 +89,7 @@
   margin-right: .5em;
   width: 25px;
   height: 25px;
-  fill: $medblue;
+  fill: $primary-accent;
   float: left;
 }
 
diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss
index 6b68114..87708da 100644
--- a/app/common/styles/base/mixins.scss
+++ b/app/common/styles/base/mixins.scss
@@ -154,7 +154,7 @@
 @mixin table-row-save {
   @-webkit-keyframes row-flash {
     from {
-      background-color: $lightblue;
+      background-color: $background-02;
     }
     to {
       background-color: inherit;
@@ -162,7 +162,7 @@
   }
   @-moz-keyframes row-flash {
     from {
-      background-color: $lightblue;
+      background-color: $background-02;
     }
     to {
       background-color: inherit;
@@ -170,7 +170,7 @@
   }
   @-o-keyframes row-flash {
     from {
-      background-color: $lightblue;
+      background-color: $background-02;
     }
     to {
       background-color: inherit;
@@ -178,7 +178,7 @@
   }
   @keyframes row-flash {
     from {
-      background-color: $lightblue;
+      background-color: $background-02;
     }
     to {
       background-color: inherit;
diff --git a/app/common/styles/base/typography.scss b/app/common/styles/base/typography.scss
index 0457fc2..f0a5e20 100644
--- a/app/common/styles/base/typography.scss
+++ b/app/common/styles/base/typography.scss
@@ -17,7 +17,7 @@ h3,
 h4,
 h5 {
   line-height: 1.25;
-  color: #333;
+  color: $text-01;
 }
 
 h1, .h1 {
@@ -44,7 +44,7 @@ h4, .h4 {
 h5, .h5 {
   font-size: .875rem;
   font-weight: 500;
-  color: $darkgrey;
+  color: $text-02;
 }
 
 // Fonts
diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss
index 7a19475..7297628 100644
--- a/app/common/styles/base/utility.scss
+++ b/app/common/styles/base/utility.scss
@@ -3,8 +3,6 @@
 }
 
 .disabled {
-  color: $lightbg__grey;
-  @include fastTransition-all;
   &:hover {
     cursor: default;
     text-decoration: none;
@@ -22,7 +20,7 @@
   }
 }
 .error {
-  color: $error-color;
+  color: $status-error;
 }
 
 .hide {
@@ -34,7 +32,7 @@
 }
 
 .close {
-  color: $lightbg__primary;
+  color: $primary-accent;
   font-size: 1.5em;
   padding: 1em;
   box-sizing: border-box;
@@ -46,7 +44,7 @@
   border: 0px;
   margin: 0;
   &:hover {
-    color: $lightbg__accent;
+    color: $text-03;
     background: transparent;
   }
 }
@@ -78,7 +76,7 @@
 }
 
 .btm-border-grey {
-  border-bottom: 1px solid $lightbg__grey;
+  border-bottom: 1px solid $border-color-02;
 }
 
 .transitionAll {
@@ -108,7 +106,7 @@
 .show-scroll {
   // Force scrollbar to always be visible in webkit browsers
   &::-webkit-scrollbar {
-    background-color: lighten($medgrey, 5%);
+    background-color: $background-03;
     width: 8px;
   }
 
@@ -126,14 +124,14 @@
   -webkit-animation-name: flash;
   -webkit-animation-timing-function: ease-out;
   -webkit-animation-duration: 1s;
-  color: $white;
+  color: $primary-light;
 }
 @-webkit-keyframes flash {
-  from { background: $field__focus; }
+  from { background: $primary-accent; }
   to  { background: none; }
 }
 
 @keyframes flash {
-  0% { background: $field__focus; }
+  0% { background: $primary-accent; }
   100% { background: none; }
 }
\ No newline at end of file