From f2a49717c8d368e03ebdc55f5fd43f6296120d55 Mon Sep 17 00:00:00 2001 From: nsedrickm Date: Fri, 16 Sep 2022 13:33:28 +0100 Subject: [PATCH] mgr/dashboard: improve level AA color contrast accessibility for dashboard pages and components Use more accessible colors for dashboard components, text and table columns Fixes: https://tracker.ceph.com/issues/56023 Signed-off-by: nsedrickm --- .../dashboard/health/health.component.scss | 2 +- .../info-card/info-card-popover.scss | 2 +- .../info-card/info-card.component.scss | 2 +- .../info-group/info-group.component.scss | 2 +- .../navigation/navigation.component.scss | 16 +++++------ .../notifications.component.scss | 4 +-- .../telemetry-notification.component.scss | 2 +- .../datatable/table/table.component.scss | 2 +- .../src/app/shared/enum/health-color.enum.ts | 2 +- .../shared/pipes/health-color.pipe.spec.ts | 2 +- .../mgr/dashboard/frontend/src/styles.scss | 1 + .../src/styles/ceph-custom/_basics.scss | 2 +- .../styles/defaults/_bootstrap-defaults.scss | 28 +++++++++---------- 13 files changed, 33 insertions(+), 34 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss index 61128949cd7..def7aab11a6 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss @@ -26,7 +26,7 @@ cd-info-card { text-align: center; a { - color: vv.$primary-wcag-aa-large-text; + color: vv.$primary; } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss index 8131ad5f0e3..d4828b3e034 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss @@ -17,7 +17,7 @@ } span.health-warn-description { - color: vv.$health-color-warning-wcag-aa-regular-text !important; + color: vv.$health-color-warning-800 !important; } } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss index 95ed689739b..46764975ce3 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss @@ -27,7 +27,7 @@ $card-font-max-size: 21px; } .card-title > a { - color: vv.$primary-wcag-aa-large-text; + color: vv.$primary; } } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.scss index e5ffb4e5954..3a417dda041 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.scss @@ -6,7 +6,7 @@ } .popover-icon { - color: vv.$primary-wcag-aa-large-text; + color: vv.$primary; } .popover-icon:focus { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss index 693a5613b96..695fddee835 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss @@ -18,7 +18,7 @@ ::ng-deep cd-navigation .cd-navbar-top { .cd-navbar-brand { background: vv.$secondary; - border-top: 4px solid vv.$primary-wcag-aa-large-text; + border-top: 4px solid vv.$primary; .navbar-brand, .navbar-brand:hover { @@ -49,7 +49,7 @@ } .cd-navbar-utility > .active > a { - background-color: vv.$primary-wcag-aa-large-text; + background-color: vv.$primary; color: vv.$gray-200; } @@ -83,7 +83,7 @@ .navbar-nav > li > .cd-navbar > a:hover, .navbar-nav > li > a:hover, .navbar-nav > li:hover { - background-color: vv.$primary-wcag-aa-large-text; + background-color: vv.$primary; } .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a, @@ -119,7 +119,7 @@ } .open .dropdown-menu { - background-color: vv.$primary-wcag-aa-large-text; + background-color: vv.$primary; border: 0; padding-bottom: 0; padding-top: 0; @@ -131,12 +131,12 @@ } .open .dropdown-menu > .active > a { - background-color: vv.$primary-wcag-aa-large-text; + background-color: vv.$primary; } } .navbar-nav > li > a:hover { - background-color: vv.$primary-wcag-aa-large-text; + background-color: vv.$primary; } } } @@ -150,7 +150,7 @@ $sidebar-width: 200px; .cd-navbar-primary .active > a, .cd-navbar-primary > .active > a:focus, .cd-navbar-primary > .active > a:hover { - background-color: vv.$primary-wcag-aa-large-text !important; + background-color: vv.$primary !important; border: 0 !important; color: vv.$white !important; } @@ -197,7 +197,7 @@ $sidebar-width: 200px; text-decoration: none; &:hover { - background: vv.$primary-wcag-aa-large-text; + background: vv.$primary; color: vv.$white; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss index 5729f762599..8bee3d8ff4e 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss @@ -10,7 +10,7 @@ a { .dot { - background-color: vv.$primary; + background-color: vv.$primary-500; border: 2px solid vv.$secondary; border-radius: 50%; height: 11px; @@ -22,6 +22,6 @@ a { &:hover .dot { background-color: vv.$white; - border-color: vv.$primary; + border-color: vv.$primary-500; } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss index f3e3b333ce7..1e1606724ca 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss @@ -18,6 +18,6 @@ } a { - color: darken(vv.$primary-wcag-aa-large-text, 10); + color: darken(vv.$primary, 10); font-weight: bold; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss index 4762b301ff0..8775b182ae7 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss @@ -203,7 +203,7 @@ } &.datatable-row-odd { - background-color: vv.$gray-100; + background-color: vv.$white; } &.active, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/health-color.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/health-color.enum.ts index 7cfea5bc2dd..04239422516 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/health-color.enum.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/health-color.enum.ts @@ -1,5 +1,5 @@ export enum HealthColor { HEALTH_ERR = 'health-color-error', - HEALTH_WARN = 'health-color-warning-wcag-aa-large-text', + HEALTH_WARN = 'health-color-warning', HEALTH_OK = 'health-color-healthy' } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/health-color.pipe.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/health-color.pipe.spec.ts index c45276bb546..f5e937ce377 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/health-color.pipe.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/health-color.pipe.spec.ts @@ -6,7 +6,7 @@ class CssHelperStub extends CssHelper { if (propertyName === 'health-color-healthy') { return 'fakeGreen'; } - if (propertyName === 'health-color-warning-wcag-aa-large-text') { + if (propertyName === 'health-color-warning') { return 'fakeOrange'; } if (propertyName === 'health-color-error') { diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss index e27b0126147..385f2bf07fa 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss @@ -133,6 +133,7 @@ $grid-breakpoints: ( .badge-cd-label-light-green { background-color: $light-green-300; color: $white; + font-weight: bolder; } // angular-tree-component diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss index 8ee05900c3e..ad94ffc6ed5 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss @@ -143,5 +143,5 @@ mark { } a.nav-link { - color: vv.$primary-wcag-aa-large-text; + color: vv.$primary; } diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss index c95f87a01eb..25edc11da13 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss @@ -16,16 +16,16 @@ $blue: #007bff !default; $indigo: #6610f2 !default; $purple: #6f42c1 !default; $pink: #a94442 !default; -$red: #ef5c55 !default; +$red: #dc3545 !default; $orange: #fd7e14 !default; -$yellow: #ffc200 !default; -$green: #0b0 !default; +$yellow: #d48200 !default; +$green: #008a00 !default; $teal: #20c997 !default; $cyan: #17a2b8 !default; $barley-white: #fcecba !default; -$primary: #2b99a8 !default; -$primary-wcag-aa-large-text: #25828e !default; +$primary: #25828e !default; +$primary-500: #2b99a8 !default; $secondary: #374249 !default; $success: $green !default; $info: $primary !default; @@ -43,15 +43,14 @@ $gold-300: #f4c145; $light-green-300: #ace12e; // Extra theme colors. -$accent: $red !default; -$accent-wcag-aa-regular-text: #25828e !default; +$accent: $primary !default; $warning-dark: $orange !default; $fg-color-over-dark-bg: $white !default; $fg-hover-color-over-dark-bg: $gray-500 !default; $theme-colors: ( - 'accent': $accent-wcag-aa-regular-text, + 'accent': $accent, 'warning-dark': $warning-dark ) !default; @@ -62,20 +61,19 @@ $body-color: $gray-900 !default; $body-bg-alt: $gray-200 !default; // Health colors. -$health-color-error: #f00 !default; +$health-color-error: $red !default; $health-color-healthy: $green !default; -$health-color-warning: #ffa500 !default; -$health-color-warning-wcag-aa-large-text: #d48200 !default; -$health-color-warning-wcag-aa-regular-text: #ae6200 !default; +$health-color-warning: $yellow !default; +$health-color-warning-800: #9d6d10 !default; // Chart colors. -$chart-color-red: #c9190b !default; +$chart-color-red: $red !default; $chart-color-blue: #06c !default; $chart-color-orange: #ef9234 !default; $chart-color-yellow: #f6d173 !default; -$chart-color-green: #7cc674 !default; +$chart-color-green: $green !default; $chart-color-gray: #ededed !default; -$chart-color-cyan: #73c5c5 !default; +$chart-color-cyan: $primary-500 !default; $chart-color-purple: #3c3d99 !default; $chart-color-center-text: #151515 !default; $chart-color-center-text-description: #72767b !default; -- 2.39.5