From 6f7ec80eb14084228cd7d8dae580da4b794c2595 Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Mon, 24 Jun 2019 14:35:41 -0500
Subject: 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/base/colors.scss | 165 +++++++++++++------------------------
 1 file changed, 57 insertions(+), 108 deletions(-)

(limited to 'app/common/styles/base/colors.scss')

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;
-- 
cgit v1.2.1