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

26 files changed, 265 insertions, 494 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
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;
     }
   }
 }
diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss
index 79eb11e..3baa214 100644
--- a/app/common/styles/directives/app-navigation.scss
+++ b/app/common/styles/directives/app-navigation.scss
@@ -1,10 +1,13 @@
 $nav__toplvlWidth: 125px;
 $nav__seclvlWidth: 240px;
+$nav__top-level-color: $base-01--01;
+$nav__second-level-color: $base-02--06;
+$nav__second-level-text-color: $base-02--01;
 
 //Navigation icons
 @mixin navIcons {
-  color: $white;
-  fill: $white;
+  color: $primary-light;
+  fill: $primary-light;
   max-height: 40px;
   stroke-width: .5;
   display: block;
@@ -12,13 +15,13 @@ $nav__seclvlWidth: 240px;
   overflow: hidden;
   .st0 {
     fill: none;
-    stroke: $white;
+    stroke: $primary-light;
     stroke-width: 2;
     stroke-miterlimit: 10;
   }
   .st1 {
     fill: none;
-    stroke: $white;
+    stroke: $primary-light;
     stroke-width: 4;
     stroke-miterlimit: 10;
   }
@@ -62,8 +65,8 @@ $nav__seclvlWidth: 240px;
   .button, button, a {
     background: transparent;
     border: 0;
-    color: $white;
-    fill: $white;
+    color: $primary-light;
+    fill: $primary-light;
     width: 100%;
     padding: 1em;
     display: block;
@@ -73,52 +76,52 @@ $nav__seclvlWidth: 240px;
     border-radius: 0;
     text-decoration: none;
     border-top: 1px solid transparent;
-    border-bottom: 1px solid $darkgrey;
+    border-bottom: 1px solid $border-color-02;
     font-weight: normal;
     font-size: .9em;
     line-height: 1.2;
     &:hover {
-      background: $white;
-      fill: $black;
-      color: $medblue;
+      background: $primary-light;
+      fill: $primary-dark;
+      color: $primary-action;
       padding: 1em;
       border-radius: 0;
-      border-bottom: 1px solid $lightgrey;
+      border-bottom: 1px solid $border-color-01;
       .nav__icon-help__outer {
-        stroke: $black;
+        stroke: $primary-dark;
       }
       .nav__icon-help__inner {
-        fill: $lightbg__primary;
+        fill: $primary-action;
       }
       .nav-icon {
-        fill: $medblue;
-        color: $medblue;
+        fill: $primary-action;
+        color: $primary-action;
         .st0 {
-          stroke: $medblue;
+          stroke: $primary-action;
         }
         .st1 {
-          fill: $medblue;
-          color: $medblue;
-          stroke: $medblue;
+          fill: $primary-action;
+          color: $primary-action;
+          stroke: $primary-action;
         }
       }
     }
   }
   .opened {
     background: $nav__second-level-color;
-    fill: $black;
-    color: darken($medblue, 10%);
-    border-bottom: 1px solid $lightgrey;
+    fill: $primary-dark;
+    color: darken($primary-action, 10%);
+    border-bottom: 1px solid $border-color-01;
     .nav-icon {
-      fill: $medblue;
-      color: $medblue;
+      fill: $primary-action;
+      color: $primary-action;
       .st0 {
-        stroke: $medblue;
+        stroke: $primary-action;
       }
       .st1 {
-        fill: $medblue;
-        color: $medblue;
-        stroke: $medblue;
+        fill: $primary-action;
+        color: $primary-action;
+        stroke: $primary-action;
       }
     }
   }
@@ -139,20 +142,20 @@ $nav__seclvlWidth: 240px;
     @include fastTransition-all;
     &.opened {
       left: $nav__toplvlWidth;
-      box-shadow: 7px 0 28px -10px $darkgrey;
+      box-shadow: 7px 0 28px -10px $base-02--02;
       @include fastTransition-all;
     }
     a {
       padding: 1.2em 1em 1.2em 1em;
       display: block;
-      color: $black;
+      color: $primary-dark;
       text-decoration: none;
       position: relative;
       font-weight: 400;
       text-align: left;
       border-bottom: 1px solid transparent;
       &:hover {
-        background: $white;
+        background: $primary-light;
       }
     }
 
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
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index 79229b6..61e082b 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -6,7 +6,7 @@ $nav__seclvlWidth: 240px;
 .page-header {
   width: 100%;
   position: relative;
-  border-bottom: 1px solid $lightbg__grey;
+  border-bottom: 1px solid $border-color-02;
   margin: 0.5em 0 2.2em;
   padding-left: 0;
 }
@@ -43,7 +43,7 @@ $nav__seclvlWidth: 240px;
 
 .content-label,
 label {
-  color: $darkgrey;
+  color: $text-02;
   text-transform: uppercase;
   font-weight: 700;
   font-size: 0.75em;
@@ -52,6 +52,6 @@ label {
 
 .subhead {
   width: 100%;
-  border-bottom: 1px solid $medgrey;
+  border-bottom: 1px solid $border-color-01;
   padding-bottom: 0.5em;
 }
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index 034c49e..3593780 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -30,37 +30,37 @@ $logoMaxWidth: 125px;
 
 .header__info-section {
   position: relative;
-  background: $black;
-  color: $white;
+  background: $primary-dark;
+  color: $primary-light;
   overflow: hidden;
 }
 
 .header__logout {
   float: right;
-  color: $white;
+  color: $primary-light;
   font-size: .9em;
   text-decoration: none;
   padding: 1em;
   font-weight: 400;
   &:visited {
-    color: $white;
+    color: $primary-light;
   }
 }
 
 .header__functions-section {
-  color: $white;
+  color: $primary-light;
   padding: 0 1.1em;
   box-sizing: border-box;
   display: block;
   position: relative;
   overflow: hidden;
   min-height: 5em;
-  border-bottom: 1px solid $medgrey;
-  background: $white;
+  border-bottom: 1px solid $border-color-01;
+  background: $primary-light;
   .header__server-name {
     font-size: 1.5em;
     font-weight: 500;
-    color: $darkgrey;
+    color: $text-02;
     padding: .4em 0 0 1em;
     height: 100%;
     background: transparent;
@@ -68,7 +68,7 @@ $logoMaxWidth: 125px;
     white-space: nowrap;
     overflow: hidden;
     .header__hostname {
-      color: $black;
+      color: $primary-dark;
       font-size: 1.2rem;
       font-weight: 700;
       margin-bottom: 0;
@@ -98,7 +98,7 @@ $logoMaxWidth: 125px;
     bottom: 0;
     z-index: 100;
     margin: .3em 0;
-    background: $white;
+    background: $primary-light;
     @include fastTransition-all;
     &.active {
       right: 1em;
@@ -108,14 +108,14 @@ $logoMaxWidth: 125px;
     }
     span {
       display: block;
-      color: $black;
+      color: $primary-dark;
       font-size: 1em;
     }
     a, p {
       display: block;
       float: left;
       text-decoration: none;
-      color: $darkgrey;
+      color: $text-02;
       padding: 1.250em;
       height: 100%;
       font-size: 0.875em;
@@ -135,15 +135,15 @@ $logoMaxWidth: 125px;
   .header__server-health,
   .header__info,
   .header__multi-server {
-    background: $lightgrey;
+    background: $background-02;
     @include round-corners;
     margin: 0 .3em;
     height: 100%;
-    border: 1px solid $medgrey;
+    border: 1px solid $border-color-01;
     opacity: 1;
     @include fastTransition-all;
     &:hover {
-      background: rgba(255, 255, 255, 1);
+      background: $background-01;
     }
   }
 
@@ -175,7 +175,7 @@ $logoMaxWidth: 125px;
         padding: .7em 0 .3em;
         font-size: 1em;
         font-weight: 400;
-        color: $darkgrey;
+        color: $text-02;
       }
       .icon-angle {
         margin: 0.2em 0 0 0;
@@ -199,7 +199,7 @@ $logoMaxWidth: 125px;
     }
 
     .header__refresh {
-      color: $darkgrey;
+      color: $text-02;
       line-height: 1.4;
       border-radius: 6px;
       span {
@@ -212,7 +212,7 @@ $logoMaxWidth: 125px;
     span {
       font-size: 0.875em;
       font-weight: 400;
-      color: $darkgrey;
+      color: $text-02;
       display: block;
       margin-bottom: .2em;
     }
@@ -224,7 +224,7 @@ $logoMaxWidth: 125px;
     svg {
       width: 25px;
       height: auto;
-      fill: $color--blue-40;
+      fill: $primary-accent;
     }
   }
 }