commit 6f7ec80eb14084228cd7d8dae580da4b794c2595
author Yoshie Muranaka <yoshiemuranaka@gmail.com> Mon Jun 24 14:35:41 2019 -0500
committer Derick Montague <derick.montague@ibm.com> Tue Jul 09 16:37:46 2019 -0500
tree c01c0c280b0c30043d6443a93e5ec4c650095710
parent 309b5da3750a3a5b189362e31013d2ab9404e806

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

app/common/styles/components/table.scss

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;
     }
   }
 }