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

13 files changed, 48 insertions, 224 deletions

diff --git a/app/common/styles/elements/accordion.scss b/app/common/styles/elements/accordion.scss
index a709349..6f4c62e 100644
--- a/app/common/styles/elements/accordion.scss
+++ b/app/common/styles/elements/accordion.scss
@@ -5,8 +5,8 @@
   padding-top: 1em;
   padding-bottom: 1em;
   padding-right: 1em;
-  background: $darkblue;
-  color: $white;
+  background: $background-05;
+  color: $primary-light;
   margin-left: 0;
   .event__actions {
     margin-right: 10px;
@@ -21,7 +21,7 @@
 .accord-trigger {
   transform: rotate(90deg);
   font-size: 1.5em;
-  color: lighten($darkgrey, 10%);
+  color: $text-02;
   padding: .3em;
   display: block;
   margin: 0 auto;
@@ -34,7 +34,7 @@
   }
   &:focus {
     outline: 0;
-    color: $darkbg__accent;
+    color: $primary-action;
   }
 }
 
diff --git a/app/common/styles/elements/alerts.scss b/app/common/styles/elements/alerts.scss
index 8853c70..70fc247 100644
--- a/app/common/styles/elements/alerts.scss
+++ b/app/common/styles/elements/alerts.scss
@@ -1,19 +1,15 @@
 //Fixed alerts
-
 .alert-danger {
-  background-color: $alert__danger;
-  border-color: $critical-lightbg;
+  background-color: $accent-04--02;
+  border-color: $accent-04--01;
   border-radius: 0;
-  color: $black;
+  color: $primary-dark;
   text-align: left;
 }
-
 .alert-warning {
-  background-color: $warning-lightbg;
-  border-color: $warning-border;
+  background-color: $accent-03--03;
+  border-color: $accent-03--02;
   border-radius: 0;
-  color: $black;
+  color: $primary-dark;
   text-align: left;
 }
-
-
diff --git a/app/common/styles/elements/content-search.scss b/app/common/styles/elements/content-search.scss
index 4f4dfa4..869a4b6 100644
--- a/app/common/styles/elements/content-search.scss
+++ b/app/common/styles/elements/content-search.scss
@@ -10,7 +10,7 @@
 
   #content__search-input {
     margin: 0;
-    border: 1px solid $input-border;
+    border: 1px solid $border-color-02;
     padding-left: 40px;
     padding-right: 5px;
     height: 3em;
@@ -35,7 +35,7 @@
     display: inline-block;
     height: 30px;
     width: 20px;
-    color: $darkgrey;
+    color: $text-02;
     padding: 0;
     margin-right: .5em;
   }
@@ -64,7 +64,7 @@
 
   .tag-filter-label {
     text-transform: uppercase;
-    color: $darkgrey;
+    color: $text-02;
     font-size: .7em;
     font-weight: 700;
     min-height: 20px;
diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index c8bbfce..0588813 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -7,7 +7,6 @@
 @import "loader";
 @import "content-search";
 @import "paginate";
-@import "tags";
 @import "modals";
 @import "quicklinks";
 @import "toast";
diff --git a/app/common/styles/elements/inline-confirm.scss b/app/common/styles/elements/inline-confirm.scss
index 873e66e..d6fc2c2 100644
--- a/app/common/styles/elements/inline-confirm.scss
+++ b/app/common/styles/elements/inline-confirm.scss
@@ -7,8 +7,8 @@
   width: 100%;
   height: 100%;
   z-index: 5;
-  background: $darkbg__primary;
-  color: $white;
+  background: $background-04;
+  color: $primary-light;
   padding: 2em 2em 1.55em 2em;
   overflow: hidden;
   @include fastTransition-all;
@@ -20,43 +20,13 @@
 
 // Power confirmation buttons
 .inline__confirm-buttons {
-  margin-left: 1.8em;
-  .btn-primary {
-    background: transparent;
-    border: 2px solid $white;
-    padding: 1em 2.2em;
-    margin: 0 10px;
-    &:focus,
-    &.default {
-      background: $primebtn__bg;
-      border: 2px solid $primebtn__bg;
-    }
-    &:hover {
-      background: darken($primebtn__bg, 10%);
-      border: 2px solid $primebtn__bg;
-    }
-  }
   @media (min-width: 900px) {
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
   }
-}
-
-// confirmation message
-.inline__confirm-message {
-  display: inline-block;
-  font-weight: 400;
-}
-
-// Power confirmation message icon
-.inline__confirm-message i::before {
-  content: '\26A0';
-  color: $status-warn;
-  display: inline-block;
-  font-size: 2em;
-  vertical-align: middle;
-  font-style: normal;
-  margin-right: 15px;
+  .btn {
+    min-width: 100px!important;
+  }
 }
\ No newline at end of file
diff --git a/app/common/styles/elements/loader.scss b/app/common/styles/elements/loader.scss
index 7eaea60..bfd0272 100644
--- a/app/common/styles/elements/loader.scss
+++ b/app/common/styles/elements/loader.scss
@@ -32,7 +32,7 @@
   cx: 50px;
   cy: 50px;
   fill: transparent;
-  stroke: $loaderColor;
+  stroke: $base-01--02;
   stroke-width: 5px;
   stroke-linecap: round;
   transition: stroke-dashoffset 1s cubic-bezier(.5,.08,0,1);
@@ -45,7 +45,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  background: #fefefe;
+  background: $base-02--07;
   height: 100%;
   z-index: 90;
   width: 100%;
diff --git a/app/common/styles/elements/modals.scss b/app/common/styles/elements/modals.scss
index 0bb81d5..87ad432 100644
--- a/app/common/styles/elements/modals.scss
+++ b/app/common/styles/elements/modals.scss
@@ -2,7 +2,7 @@
   width: 100%;
   height: 100%;
   z-index: -1;
-  background-color: #000;
+  background-color: $primary-dark;
   position: fixed;
   top: 0;
   left: 0;
@@ -27,8 +27,8 @@
   max-width: 850px;
   min-width: 450px;
   padding: .8em 1.5em;
-  border: thin #000 solid;
-  background-color :#fff;
+  border: thin $primary-dark solid;
+  background-color :$background-01;
   z-index: 101;
   position: fixed;
   overflow: hidden;
@@ -55,7 +55,7 @@
   top: auto;
 }
 .modal__content {
-  border-bottom: 1px solid $lightbg__grey;
+  border-bottom: 1px solid $border-color-02;
   padding-bottom: 1em;
   margin-bottom: 2em;
 }
@@ -92,7 +92,7 @@
   }
   .modal-content {
     border-radius: 0;
-    border-color: $black;
+    border-color: $primary-dark;
   }
 }
 
diff --git a/app/common/styles/elements/paginate.scss b/app/common/styles/elements/paginate.scss
index 461b854..49e1163 100644
--- a/app/common/styles/elements/paginate.scss
+++ b/app/common/styles/elements/paginate.scss
@@ -20,21 +20,20 @@
   font-weight: 300;
   padding-top: 1px;
   text-decoration:none;
-  border: 1px solid $medgrey;
+  border: 1px solid $border-color-01;
   border-left-width: 0;
   min-width:44px;
   min-height:44px;
-  color: $darkbg__primary;
+  color: $text-01;
 }
 
 .pagination li:not([class*="current"]) a:hover {
-  background-color: $primebtn__bg;
-  color: $white;
+  background-color: $primary-accent;
+  color: $primary-light;
 }
 
 .pagination li:not([class*="current"]) a:focus,
-.pagination li:not([class*="current"]) a:active {;
-  //box-shadow: 0px 0px 10px 1px rgba(0,0,0,.25);
+.pagination li:not([class*="current"]) a:active {
   border-left-width:1px;
 }
 
@@ -76,8 +75,8 @@
 
 .pagination li.current a, .pagination li.active a {
   padding-top:.25em;
-  color: $white;
-  background-color: $lightbg__primary;
+  color: $primary-light;
+  background-color: $background-05;
   cursor: default;
   pointer-events: none;
   font-weight: 700;
diff --git a/app/common/styles/elements/quicklinks.scss b/app/common/styles/elements/quicklinks.scss
index 9fec160..9d6ea48 100644
--- a/app/common/styles/elements/quicklinks.scss
+++ b/app/common/styles/elements/quicklinks.scss
@@ -1,6 +1,6 @@
 //Quick links block
 .quick-links {
-  background-color: $lightgrey;
+  background-color: $background-02;
   padding: .5em 1em;
   font-size: .9em;
   font-weight: 400;
@@ -9,7 +9,7 @@
     margin: 0 0 0 1em;
   }
   a {
-    color: $black;
+    color: $primary-dark;
     text-decoration: none;
     display: block;
   }
@@ -23,7 +23,7 @@
 
 .quick-links__item {
   padding: 1em 0 1em 0;
-  border-bottom: 1px solid $medgrey;
+  border-bottom: 1px solid $border-color-01;
   position: relative;
   &:after {
     content: '\203A';
@@ -31,7 +31,7 @@
     top: 50%;
     right: 0;
     font-size: 3em;
-    color: lighten($darkgrey, 15%);
+    color: $text-02;
     transform: translateY(-50%);
   }
   &.no-icon {
@@ -69,12 +69,12 @@
 }
 
 .quick-links__event-copy {
-  color: $alert__error;
+  color: $status-error;
   margin-bottom: 0;
   font-weight: 700;
   font-size: .9em;
   a {
-    color: $alert__error;
+    color: $status-error;
   }
 }
 
diff --git a/app/common/styles/elements/tags.scss b/app/common/styles/elements/tags.scss
deleted file mode 100644
index e6f9bc7..0000000
--- a/app/common/styles/elements/tags.scss
+++ /dev/null
@@ -1,140 +0,0 @@
-// Tags
-
-.tag {
-  font-size: .9em;
-  padding: .4em .8em .2em;
-  position: relative;
-  display: inline-block;
-  font-weight: 700;
-  padding-right: 60px;
-  border-radius: 3px;
-  line-height: 1.5;
-  overflow: hidden;
-  margin: .4em .3em;
-  min-width: 185px;
-  text-align: left;
-  &:hover {
-    cursor: pointer;
-  }
-  &:before { // close icon
-    content: '+';
-    font-size: 2em;
-    font-weight: 400;
-    transform: rotate(45deg);
-    display: inline-block;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    margin-top: -18px;
-    color: $darkgrey;
-    height: 20px;
-    width: 20px;
-  }
-  &:after { // white separator
-    content: '';
-    height: 100%;
-    position: absolute;
-    top: 0;
-    right: 40px;
-    border-left: 1px solid $white;
-  }
-}
-
-//Custom tag
-.tag.custom {
-  background: lighten($darkbg__primary, 65%);
-}
-
-//Event log tags
-.event__resolved {
-  background: lighten($purple, 40%);
-}
-.event__unresolved {
-  background: lighten($purple, 40%);
-}
-.event__high {
-  background: lighten($error-color, 30%);
-}
-.event__medium{
-  background: lighten($alert__warning, 30%);
-}
-.event__low {
-  background: lighten($lightbg__primary, 30%);
-}
-
-// Priority tags
-.priority-tag {
-  color: $white;
-  font-size: .8em;
-  text-transform: uppercase;
-  padding: 2px 2em;
-  font-weight: 700;
-  line-height: inherit;
-  min-width: 103px;
-  text-align: center;
-
-  &.high-priority {
-    background: $error-color;
-
-  }
-  &.med-priority {
-    background: $alert__warning;
-
-  }
-  &.low-priority {
-    background: $lightbg__primary;
-  }
-  &.event-resolved {
-    background: $purple;
-    padding: 2px 1em;
-  }
-}
-
-.priority-tag-circ {
-  //padding: 0;
-  //line-height: inherit;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: rgba( $normal, .4);
-  position: relative;
-  border-width: 2px;
-  border-style: solid;
-  border-color: $normal;
-  &.high-priority {
-    color: $critical-lightbg;
-    background-color: rgba( $critical-lightbg, .4 );
-    background-image: url(../assets/images/crit-x.svg);
-    border-color: $critical-lightbg;
-    &:before {
-      content: '';
-      position: absolute;
-      top: -11px;
-      left: -3px;
-      font-weight: 600;
-      font-size: 1.5em;
-      -webkit-font-smoothing: antialiased;
-      text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
-    }
-  }
-  &.medium-priority {
-    background: rgba($severity-medium-lightbg, .5);
-    border-color: rgba($severity-medium-lightbg, 1);
-  }
-  &.warn-priority {
-    border-color: $warning-lightbg;
-    background-image: url(../assets/images/warn-slash.svg);
-    background-color: rgba($thresh-warning, .3);
-  }
-  &.normal-priority {
-    background: rgba( $normal, .4);
-  }
-  &.disabled {
-    background: rgba( $darkgrey, .2);
-    border-color: rgba( $darkgrey, .2);
-  }
-  &.event-resolved {
-    background: $purple;
-    padding: 2px 1em;
-  }
-}
diff --git a/app/common/styles/elements/toast.scss b/app/common/styles/elements/toast.scss
index a530472..e9b1980 100644
--- a/app/common/styles/elements/toast.scss
+++ b/app/common/styles/elements/toast.scss
@@ -11,7 +11,7 @@
     max-width: 400px;
   }
   .alert {
-    color: #333;
+    color: $text-01;
     border-radius: 0;
     text-align: left;
   }
diff --git a/app/common/styles/elements/toggle-filter.scss b/app/common/styles/elements/toggle-filter.scss
index 94c94d1..88189ad 100644
--- a/app/common/styles/elements/toggle-filter.scss
+++ b/app/common/styles/elements/toggle-filter.scss
@@ -6,7 +6,7 @@
     margin-bottom: .4em;
   }
   .filter-label {
-    color: darken($lightgrey, 10%);
+    color: $text-02;
     text-transform: uppercase;
     font-weight: 700;
     font-size: .75em;
@@ -22,6 +22,6 @@
     }
   }
   .btn-primary {
-    border: 2px solid $primebtn__bg;
+    border: 2px solid $primary-accent;
   }
 }
diff --git a/app/common/styles/elements/toggle-switch.scss b/app/common/styles/elements/toggle-switch.scss
index f24dfae..ae8c276 100644
--- a/app/common/styles/elements/toggle-switch.scss
+++ b/app/common/styles/elements/toggle-switch.scss
@@ -39,13 +39,13 @@ input.toggle-switch__round-flat + label {
   padding: 2px;
   width: 50px;
   height: 30px;
-  background-color: darken($medgrey, 8%);
+  background-color: $border-color-02;
   @include borderRadius;
   @include marginTransition;
 }
 
 input.toggle-switch__round-flat:focus + label {
-  box-shadow: 0 0 4px 4px $darkbg__accent;
+  box-shadow: 0 0 4px 4px $primary-accent;
 }
 input.toggle-switch__round-flat + label:before, input.toggle-switch__round-flat + label:after {
   display: block;
@@ -57,7 +57,7 @@ input.toggle-switch__round-flat + label:before {
   left: 2px;
   bottom: 2px;
   right: 2px;
-  background-color: $white;
+  background-color: $primary-light;
   @include borderRadius;
   @include marginTransition;
 }
@@ -66,19 +66,19 @@ input.toggle-switch__round-flat + label:after {
   left: 4px;
   bottom: 4px;
   width: 20px;
-  background-color: darken($medgrey, 8%);
+  background-color: $border-color-02;
   -webkit-border-radius: 52px;
   -moz-border-radius: 52px;
   border-radius: 52px;
   @include marginTransition;
 }
 input.toggle-switch__round-flat:checked + label {
-  background-color: $primebtn__bg;
+  background-color: $primary-accent;
 }
 input.toggle-switch__round-flat:checked + label:before {
-  background-color: $lightbg__accent;
+  background-color: $background-02;
 }
 input.toggle-switch__round-flat:checked + label:after {
   margin-left: 20px;
-  background-color: $primebtn__bg;
+  background-color: $primary-accent;
 }
\ No newline at end of file