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

2 files changed, 44 insertions, 45 deletions

diff --git a/app/common/styles/components/form-elements.scss b/app/common/styles/components/form-elements.scss
index 8b26339..61ca4d3 100644
--- a/app/common/styles/components/form-elements.scss
+++ b/app/common/styles/components/form-elements.scss
@@ -6,7 +6,7 @@
   padding-left: .5em;
   padding-right: 1.5em;
   margin-top: 0;
-  border: 1px solid $input-border;
+  border: 1px solid $border-color-02;
   min-width: 70px;
   font-weight: 400;
   @include bgImage__arrowDown-primary;
@@ -25,12 +25,12 @@
   z-index: 100;
   right: 0;
   top: 100%;
-  background: $white;
+  background: $primary-light;
   padding: 0;
   width: 100%;
-  border: 1px solid $lightbg__grey;
+  border: 1px solid $border-color-02;
   margin-top: -5px;
-  box-shadow: 0 4px 10px -2px $darkgrey;
+  box-shadow: 0 4px 10px -2px $base-02--02;
   li {
     list-style-type: none;
   }
@@ -40,7 +40,7 @@
     width: 100%;
     font-weight: 400;
     &:hover {
-      background: $dropdown__focus-bg;
+      background: $background-02;
     }
   }
 }
@@ -57,7 +57,7 @@
       display: inline-block;
       top: 50%;
       left: .6em;
-      color: $lightbg__primary;
+      color: $primary-accent;
       transform: translateY(-50%);
     }
   }
@@ -71,7 +71,7 @@
   }
   input {
     max-width: 170px;
-    color: $darkgrey;
+    color: $text-01;
   }
 }
 
@@ -101,35 +101,34 @@
   left: 0;
   width: 20px;
   height: 20px;
-  background: $white;
-  border: 1px solid $lightbg__grey;
+  background: $primary-light;
+  border: 1px solid $border-color-02;
   font-size: 0;
 }
 
 /* Hover and focus states */
 .control-check:hover input ~ .control__indicator,
 .control-check input:focus ~ .control__indicator {
-  border: 1px solid $primebtn__bg;
-  background-color: $primebtn__bg;
+  border: 1px solid $primary-accent;
+  background-color: $primary-accent;
 }
 
 /* Checked state */
 .control-check input:checked ~ .control__indicator {
-  background: $primebtn__bg;
-
+  background: $primary-accent;
 }
 
 /* Hover state whilst checked */
 .control-check:hover input:not([disabled]):checked ~ .control__indicator {
-  background: $primebtn__bg;
+  background: $primary-accent;
 }
 
 /* Disabled state */
 .control-check input:disabled ~ .control__indicator {
   pointer-events: none;
   opacity: .6;
-  background: #ccc;
-  border: 1px solid $white;
+  background: $base-02--04;
+  border: 1px solid $primary-light;
 }
 
 .control-check:hover > input:disabled ~ .control__indicator {
@@ -156,14 +155,14 @@
   width: 5px;
   height: 10px;
   transform: rotate(45deg);
-  border: solid $white;
+  border: solid $primary-light;
   border-width: 0 2px 2px 0;
 }
 
 /* Disabled tick colour */
 .control-check input:disabled ~ .control__indicator:after {
-  border-color: $white;
-  color: $white;
+  border-color: $primary-light;
+  color: $primary-light;
 }
 
 // Radio Buttons
@@ -179,8 +178,8 @@
   left: 0;
   width: 30px;
   height: 30px;
-  background: $white;
-  border: 2px solid $darkgrey;
+  background: $primary-light;
+  border: 2px solid $border-color-02;
 }
 .control-radio input{
   position: absolute;
@@ -194,22 +193,22 @@
 
 /* Hover and focus states */
 .control-radio input:focus ~ .control__indicator {
-  background: $primebtn__bg;
-  outline: 1px solid $primebtn__bg;
+  background: $primary-accent;
+  outline: 1px solid $primary-accent;
   outline-offset: 3px;
 }
 
 .control-radio input:checked ~ .control__indicator {
-  background: $lightbg__accent;
-  border: 2px solid $primebtn__bg;
+  background: $background-02;
+  border: 2px solid $primary-accent;
 }
 
 /* Disabled state */
 .control-radio input:disabled ~ .control__indicator{
   pointer-events: none;
   opacity: .6;
-  background: #ccc;
-  border: 1px solid $medgrey;
+  background: $base-02--04;
+  border: 1px solid $border-color-01;
 }
 
 .control-radio:hover > input:disabled ~ .control__indicator{
@@ -234,8 +233,8 @@
 
 /* Disabled tick colour */
 .control-radio input:disabled ~ .control__indicator:after{
-  border-color: $white;
-  color: $white;
+  border-color: $primary-light;
+  color: $primary-light;
 }
 
 /* Radio button inner circle */
@@ -245,7 +244,7 @@
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background: $primebtn__bg;
+  background: $primary-accent;
 }
 
 .control-radio:hover .control__indicator:after {
@@ -254,7 +253,7 @@
 
 /* Disabled circle colour */
 .control-radio input:disabled ~ .control__indicator:after {
-  background: #7b7b7b;
+  background: $base-02--03;
   width: 20px;
   height: 20px;
 }
\ No newline at end of file
diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss
index c26ba59..67dc0be 100644
--- a/app/common/styles/components/table.scss
+++ b/app/common/styles/components/table.scss
@@ -2,11 +2,11 @@
 // Table Header
 .table-header {
   width: 100%;
-  color: $black;
+  color: $primary-dark;
   line-height: 30px;
   padding: .8em 0 0;
   margin-bottom: .8em;
-  border-bottom: 1px solid $medgrey;
+  border-bottom: 1px solid $border-color-01;
   font-size: 1.25em;
   @include mediaQuery(medium) {
     margin: 1.8em 0;
@@ -30,8 +30,8 @@
   font-weight: 400;
   position: relative;
   &.disabled {
-    background-color: $disabled-row;
-    color: $disabled-row-txt;
+    background-color: $background-03;
+    color: $text-02;
   }
 }
 
@@ -41,9 +41,9 @@
   left: 0;
   width: 100%;
   height:100%;
-  background: $darkbg__primary;
+  background: $background-04;
   z-index:200;
-  color: $white;
+  color: $primary-light;
   padding: .8em 1em;
   text-align: center;
   font-size: 1.5em;
@@ -57,7 +57,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  border-bottom: 1px solid $medgrey;
+  border-bottom: 1px solid $border-color-01;
   @include mediaQuery(small) {
     flex: 1;
   }
@@ -84,9 +84,9 @@
   .table__row {
     display: none;
     font-weight: 700;
-    border-bottom: 1px solid $medgrey;
-    background-color: $darkbg__primary;
-    color: $white;
+    border-bottom: 1px solid $border-color-01;
+    background-color: $background-05;
+    color: $primary-light;
 
     @include mediaQuery(small) {
       display: flex;
@@ -104,7 +104,7 @@
 }
 
 .table__row-uploading {
-  color: $darkgrey;
+  color: $text-02;
   font-weight: 700;
   @include indeterminate-bar;
 }
@@ -119,7 +119,7 @@
 //sortable heading
 .sort-heading {
   position: relative;
-  color: $lightblue;
+  color: $text-03;
   &::after {
     content: '\025be';
     position: absolute;
@@ -137,12 +137,12 @@
   }
   &.sort-up {
     &::before {
-      color: $darkbg__accent;
+      color: $primary-accent;
     }
   }
   &.sort-down {
     &::after {
-      color: $darkbg__accent;
+      color: $primary-accent;
     }
   }
 }