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
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 @@
// 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__danger: #fad3D3;
// Severity
-$critical-lightbg: #e62325;
+$critical-lightbg: #da1416;
$critical-darkbg: #ff5c49;
$severity-medium-lightbg: #dc267f;
$medium-darkbg: #FF509E;
@@ -85,7 +85,7 @@
$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 {
