diff options
author | Derick Montague <derick.montague@ibm.com> | 2019-03-28 21:55:38 -0500 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2019-03-28 21:55:38 -0500 |
commit | f41ca4e67bdacc5af174c67c8ff047894ea777be (patch) | |
tree | 892e90e38d8b51eba49d61d7f601edfddd636717 | |
parent | b1e7c86360f3f9bb05264a3cdbc5a587aa8f1175 (diff) | |
download | phosphor-webui-f41ca4e67bdacc5af174c67c8ff047894ea777be.tar.gz phosphor-webui-f41ca4e67bdacc5af174c67c8ff047894ea777be.zip |
Update hex values to meet WCAG AA Guidelines for color contrast
- Change #3C6DF0 to #2D60E5
- Change #E62325 to #DA1416
Tested: I spot tested the Server Overview, the
Event log and System logs pages to verify color changes and overall
validate the update does not negatively impact the visual integrity
of the app.
Resolves openbmc/phosphor-webui#70
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I2315527a98937176b3e3a2a2118e1798fa4c9e5d
-rw-r--r-- | app/assets/images/icon-arrow-blue.svg | 2 | ||||
-rw-r--r-- | app/assets/images/icon-critical.svg | 6 | ||||
-rw-r--r-- | app/assets/images/icon-plus.svg | 2 | ||||
-rw-r--r-- | app/assets/images/icon-power.svg | 4 | ||||
-rw-r--r-- | app/common/styles/base/colors.scss | 8 | ||||
-rw-r--r-- | app/common/styles/base/mixins.scss | 2 |
6 files changed, 12 insertions, 12 deletions
diff --git a/app/assets/images/icon-arrow-blue.svg b/app/assets/images/icon-arrow-blue.svg index a246701..3b222a6 100644 --- a/app/assets/images/icon-arrow-blue.svg +++ b/app/assets/images/icon-arrow-blue.svg @@ -3,7 +3,7 @@ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve"> <style type="text/css"> - .st0{fill:#3C6DF0;} + .st0{fill:#2d60e5;} </style> <g> <path class="st0" d="M15,2c7.2,0,13,5.8,13,13s-5.8,13-13,13S2,22.2,2,15S7.8,2,15,2 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15 diff --git a/app/assets/images/icon-critical.svg b/app/assets/images/icon-critical.svg index 5b0b28c..345196c 100644 --- a/app/assets/images/icon-critical.svg +++ b/app/assets/images/icon-critical.svg @@ -2,9 +2,9 @@ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"> <style type="text/css"> - .st0{fill:#E62325;} - .st1{opacity:0.4;fill:#E62325;enable-background:new ;} - .st2{fill:none;stroke:#E62325;stroke-width:2;stroke-miterlimit:10;} + .st0{fill:#da1416;} + .st1{opacity:0.4;fill:#da1416;enable-background:new ;} + .st2{fill:none;stroke:#da1416;stroke-width:2;stroke-miterlimit:10;} </style> <path class="st0" d="M10,2.3c4.3,0,7.7,3.5,7.7,7.7s-3.5,7.7-7.7,7.7S2.3,14.3,2.3,10S5.8,2.3,10,2.3 M10,0.4 c-5.3,0-9.7,4.3-9.7,9.7s4.3,9.7,9.7,9.7s9.7-4.3,9.7-9.7S15.3,0.4,10,0.4L10,0.4z"/> diff --git a/app/assets/images/icon-plus.svg b/app/assets/images/icon-plus.svg index 0f36497..21566bc 100644 --- a/app/assets/images/icon-plus.svg +++ b/app/assets/images/icon-plus.svg @@ -2,7 +2,7 @@ viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> <style type="text/css"> .st0{fill:#FFFFFF;} - .st1{fill:#3C6DF0;} + .st1{fill:#2d60e5;} </style> <g id="Layer_2"> <rect x="3.7" y="4" class="st0" width="8.4" height="8.1"/> diff --git a/app/assets/images/icon-power.svg b/app/assets/images/icon-power.svg index 8844297..8040698 100644 --- a/app/assets/images/icon-power.svg +++ b/app/assets/images/icon-power.svg @@ -2,8 +2,8 @@ <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 75 75" xml:space="preserve"> -<path fill="#3C6DF0" d="M17,14.6L17,14.6c1.2-1,1.3-2.7,0.3-3.9c-1-1.1-2.7-1.3-3.9-0.2C1.8,20.6-2.3,36.8,3.1,51.2 +<path fill="#2d60e5" d="M17,14.6L17,14.6c1.2-1,1.3-2.7,0.3-3.9c-1-1.1-2.7-1.3-3.9-0.2C1.8,20.6-2.3,36.8,3.1,51.2 S22.3,75.1,37.6,75C53,74.9,66.7,65.3,72,50.9c5.3-14.4,1-30.6-10.6-40.6c-2.8-2.4-6.3,1.8-3.5,4.1c7,5.9,11,14.7,11,23.8 c0,17.3-14,31.3-31.3,31.3S6.2,55.5,6.2,38.2C6.2,29.2,10.1,20.5,17,14.6z"/> -<path fill="#3C6DF0" d="M40.2,40.8V2.7c0-3.6-5.4-3.6-5.4,0v38.1c0,1.5,1.2,2.8,2.7,2.8C39,43.6,40.3,42.3,40.2,40.8z"/> +<path fill="#2d60e5" d="M40.2,40.8V2.7c0-3.6-5.4-3.6-5.4,0v38.1c0,1.5,1.2,2.8,2.7,2.8C39,43.6,40.3,42.3,40.2,40.8z"/> </svg> diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss index 405dad4..6761967 100644 --- a/app/common/styles/base/colors.scss +++ b/app/common/styles/base/colors.scss @@ -28,10 +28,10 @@ $input-border: #a7a7a7; // Light Background $lightbg__grey: #b8c1c1; $lightbg__accent: #d8e2fc; -$lightbg__primary: #3c6df0; +$lightbg__primary: #2d60e5; // Primary Button colors -$primebtn__bg: #3c6df0; +$primebtn__bg: #2d60e5; $primebtn__text: $white; // Secondary Button colors @@ -55,7 +55,7 @@ $alert__message: rgb(203, 221, 235); $alert__danger: #fad3D3; // Severity -$critical-lightbg: #e62325; +$critical-lightbg: #da1416; $critical-darkbg: #ff5c49; $severity-medium-lightbg: #dc267f; $medium-darkbg: #FF509E; @@ -85,7 +85,7 @@ $active: #c6b6f5; $inactive: $severity-medium-lightbg; // Links -$links: #3c6df0; +$links: #2d60e5; $links__hover: $lightbg__primary; $links__visited: #8ea7ea; $links__disabled: rgba(27, 40, 52, 0.70); diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss index 6067a0e..c29936d 100644 --- a/app/common/styles/base/mixins.scss +++ b/app/common/styles/base/mixins.scss @@ -56,7 +56,7 @@ } @mixin bgImage__arrowDown-accent { - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #3c6df0'></polygon></svg>"); + background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #2d60e5'></polygon></svg>"); } @mixin bgImage__arrowDown-grey { |