diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2019-06-24 14:35:41 -0500 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2019-07-09 16:37:46 -0500 |
commit | 6f7ec80eb14084228cd7d8dae580da4b794c2595 (patch) | |
tree | c01c0c280b0c30043d6443a93e5ec4c650095710 /app/common/styles/base/colors.scss | |
parent | 309b5da3750a3a5b189362e31013d2ab9404e806 (diff) | |
download | phosphor-webui-6f7ec80eb14084228cd7d8dae580da4b794c2595.tar.gz phosphor-webui-6f7ec80eb14084228cd7d8dae580da4b794c2595.zip |
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
Diffstat (limited to 'app/common/styles/base/colors.scss')
-rw-r--r-- | app/common/styles/base/colors.scss | 165 |
1 files changed, 57 insertions, 108 deletions
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; |