From b1bd87bcd256dd7070b187dabaa8cdf8e115edc2 Mon Sep 17 00:00:00 2001 From: Ryan Petrello Date: Tue, 27 Nov 2018 09:42:35 -0500 Subject: [PATCH] raise contrast on a few key page elements to pass WCAG contrast checks --- awx/ui/client/features/output/_index.less | 6 ++--- awx/ui/client/features/output/constants.js | 2 +- awx/ui/client/legacy/styles/codemirror.less | 4 +-- .../launchTemplateButton/_index.less | 2 +- awx/ui/client/lib/components/list/_index.less | 2 +- .../client/lib/components/panel/_index.less | 2 +- .../lib/components/relaunchButton/_index.less | 2 +- awx/ui/client/lib/theme/_variables.less | 25 ++++++++++--------- .../instance-groups/instance-group.block.less | 2 +- .../src/shared/branding/colors.default.less | 4 +-- 10 files changed, 26 insertions(+), 25 deletions(-) diff --git a/awx/ui/client/features/output/_index.less b/awx/ui/client/features/output/_index.less index 4491a1eb45..f4ea6d5fab 100644 --- a/awx/ui/client/features/output/_index.less +++ b/awx/ui/client/features/output/_index.less @@ -1,7 +1,7 @@ @import 'host-event/_index'; .at-Stdout { &-menuTop { - color: @at-gray-848992; + color: @at-gray-646972; border: 1px solid @at-gray-b7; border-top-left-radius: 4px; border-top-right-radius: 4px; @@ -87,7 +87,7 @@ &-toggle { background-color: @at-gray-eb; - color: @at-gray-848992; + color: @at-gray-646972; display: flex; flex: 0 0 30px; font-size: 18px; @@ -204,7 +204,7 @@ color: @login-notice-text; border-radius: @at-border-radius; border: 1px solid @at-gray-b7; - // color: @at-gray-848992; + // color: @at-gray-646972; padding: 6px @at-padding-input 6px @at-padding-input; } diff --git a/awx/ui/client/features/output/constants.js b/awx/ui/client/features/output/constants.js index e8880587b1..400e9de10e 100644 --- a/awx/ui/client/features/output/constants.js +++ b/awx/ui/client/features/output/constants.js @@ -16,7 +16,7 @@ export const JOB_STATUS_FINISHED = JOB_STATUS_COMPLETE.concat(JOB_STATUS_INCOMPL export const OUTPUT_ANSI_COLORMAP = { 0: '#000', 1: '#A00', - 2: '#0A0', + 2: '#080', 3: '#F0AD4E', 4: '#00A', 5: '#A0A', diff --git a/awx/ui/client/legacy/styles/codemirror.less b/awx/ui/client/legacy/styles/codemirror.less index 8050905d31..0a0a1ac47a 100644 --- a/awx/ui/client/legacy/styles/codemirror.less +++ b/awx/ui/client/legacy/styles/codemirror.less @@ -31,8 +31,8 @@ background-color: @default-no-items-bord; } -.CodeMirror-lineNumber { - color: @default-icon; +.CodeMirror-linenumber { + color: @at-gray-70; } // Disabled diff --git a/awx/ui/client/lib/components/launchTemplateButton/_index.less b/awx/ui/client/lib/components/launchTemplateButton/_index.less index f0d68bd3d8..94c9988872 100644 --- a/awx/ui/client/lib/components/launchTemplateButton/_index.less +++ b/awx/ui/client/lib/components/launchTemplateButton/_index.less @@ -3,7 +3,7 @@ font-size: 16px; height: 30px; min-width: 30px; - color: #848992; + color: #646972; background-color: inherit; border: none; border-radius: 5px; diff --git a/awx/ui/client/lib/components/list/_index.less b/awx/ui/client/lib/components/list/_index.less index 1d8cd87867..072780a456 100644 --- a/awx/ui/client/lib/components/list/_index.less +++ b/awx/ui/client/lib/components/list/_index.less @@ -217,7 +217,7 @@ } .at-RowItem-badge { - background-color: @at-gray-848992; + background-color: @at-gray-646972; border-radius: @at-border-radius; color: @at-white; font-size: 11px; diff --git a/awx/ui/client/lib/components/panel/_index.less b/awx/ui/client/lib/components/panel/_index.less index 33d12aa7a1..4330d8fbae 100644 --- a/awx/ui/client/lib/components/panel/_index.less +++ b/awx/ui/client/lib/components/panel/_index.less @@ -36,7 +36,7 @@ font-weight: normal; padding: 2px 10px; line-height: 10px; - background-color: #848992; + background-color: #646972; border-radius: 5px; display: inline-block; min-width: 10px; diff --git a/awx/ui/client/lib/components/relaunchButton/_index.less b/awx/ui/client/lib/components/relaunchButton/_index.less index 7bc6e55e13..d9ccc1f67f 100644 --- a/awx/ui/client/lib/components/relaunchButton/_index.less +++ b/awx/ui/client/lib/components/relaunchButton/_index.less @@ -5,7 +5,7 @@ font-size: 16px; height: 30px; min-width: 30px; - color: #848992; + color: #646972; background-color: inherit; border: none; border-radius: 4px; diff --git a/awx/ui/client/lib/theme/_variables.less b/awx/ui/client/lib/theme/_variables.less index 9752164db7..157adf6cb0 100644 --- a/awx/ui/client/lib/theme/_variables.less +++ b/awx/ui/client/lib/theme/_variables.less @@ -29,8 +29,9 @@ @at-gray-d7: #d7d7d7; @at-gray-b7: #b7b7b7; @at-gray-a9: #a9a9a9; -@at-gray-848992: #848992; +@at-gray-646972: #646972; @at-gray-76: #767676; +@at-gray-60: #606060; @at-gray-70: #707070; @at-gray-48: #484848; @at-gray-161b1f: #161b1f; @@ -128,8 +129,8 @@ @at-color-button-border-default: @at-gray-b7; @at-color-button-text-default: @at-gray-70; -@at-color-tab-default-active: @at-gray-848992; -@at-color-tab-border-default-active: @at-gray-848992; +@at-color-tab-default-active: @at-gray-646972; +@at-color-tab-border-default-active: @at-gray-646972; @at-color-tab-text-default-active: @at-white; @at-color-tab-default-disabled: @at-white; @@ -147,16 +148,16 @@ @at-color-input-error: @at-color-error; @at-color-input-focus: @at-color-info; -@at-color-input-hint: @at-gray-848992; +@at-color-input-hint: @at-gray-646972; @at-color-input-icon: @at-gray-b7; -@at-color-input-placeholder: @at-gray-848992; +@at-color-input-placeholder: @at-gray-646972; @at-color-input-text: @at-gray-161b1f; @at-color-input-slider-thumb: @at-blue; @at-color-input-slider-track: @at-gray-b7; @at-color-icon-dismiss: @at-gray-d7; -@at-color-icon-popover: @at-gray-848992; -@at-color-icon-hover: @at-gray-848992; +@at-color-icon-popover: @at-gray-646972; +@at-color-icon-hover: @at-gray-646972; @at-color-panel-heading: @at-gray-70; @at-color-panel-border: @at-gray-b7; @@ -169,7 +170,7 @@ @at-color-top-nav-background: @at-white; @at-color-top-nav-border-bottom: @at-gray-b7; @at-color-top-nav-item-text: @at-gray-70; -@at-color-top-nav-item-icon: @at-gray-848992; +@at-color-top-nav-item-icon: @at-gray-646972; @at-color-top-nav-item-icon-socket-outline: @at-white; @at-color-top-nav-item-background-hover: @at-gray-fa; @at-color-side-nav-background: @at-gray-48; @@ -182,13 +183,13 @@ @at-color-list-empty-border: @at-gray-d7; @at-color-list-empty-background: @at-gray-f6; -@at-color-list-empty: @at-gray-848992; +@at-color-list-empty: @at-gray-646972; @at-color-list-border: @at-gray-b7; @at-color-list-row-item-tag-background: @at-gray-eb; -@at-color-list-row-item-tag: @at-gray-70; -@at-color-list-row-item-label: @at-gray-848992; +@at-color-list-row-item-tag: @at-gray-60; +@at-color-list-row-item-label: @at-gray-646972; @at-color-list-row-action-background: @at-white; -@at-color-list-row-action-icon: @at-gray-848992; +@at-color-list-row-action-icon: @at-gray-646972; @at-color-list-row-action-hover: @at-blue; @at-color-list-row-action-hover-danger: @at-red; @at-color-list-row-action-icon-hover: @at-white; diff --git a/awx/ui/client/src/instance-groups/instance-group.block.less b/awx/ui/client/src/instance-groups/instance-group.block.less index a36827befe..ec5279eb8d 100644 --- a/awx/ui/client/src/instance-groups/instance-group.block.less +++ b/awx/ui/client/src/instance-groups/instance-group.block.less @@ -63,7 +63,7 @@ i { font-size: @at-font-size-icon; - color: @at-gray-848992; + color: @at-gray-646972; } } diff --git a/awx/ui/client/src/shared/branding/colors.default.less b/awx/ui/client/src/shared/branding/colors.default.less index 89d1778152..a285015b7d 100644 --- a/awx/ui/client/src/shared/branding/colors.default.less +++ b/awx/ui/client/src/shared/branding/colors.default.less @@ -1,7 +1,7 @@ // default base colors -@default-interface-txt: #707070; +@default-interface-txt: #606060; @default-data-txt: #161B1F; -@default-icon: #848992; +@default-icon: #646972; @default-icon-hov: #D7D7D7; // also selected button @default-border: @default-icon-hov; @d7grey: @default-icon-hov; // used for random things, like the close button on top-right corner of panes