From 21d44fa2635b98e8e06f6bf1021a8e62bac17c2d Mon Sep 17 00:00:00 2001 From: elit-altum Date: Sat, 4 Apr 2020 13:51:57 +0530 Subject: [PATCH 1/2] fix(contrast-theme): fixed failing WCAG-AAA checks --- client/styles/abstracts/_variables.scss | 13 +++---- .../_p5-contrast-codemirror-theme.scss | 36 +++++++++---------- 2 files changed, 25 insertions(+), 24 deletions(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index b0fd5a69..2baee4e4 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -12,6 +12,7 @@ $dodgerblue: #1E90FF; $icon-color: #8b8b8b; $icon-hover-color: #333; $p5-contrast-pink: #FFA9D9; +$p5-contrast-lightgray: #f2f2f2; // Grays $dark: #333; @@ -186,29 +187,29 @@ $themes: ( modal-button-color: #333, heading-text-color: #e1e1e1, secondary-text-color: #e1e1e1, - inactive-text-color: #c1c1c1, + inactive-text-color: $p5-contrast-lightgray, background-color: #333, button-background-color: $white, button-color: $black, button-border-color: #979797, toolbar-button-color: #333333, - toolbar-button-background-color: #C1C1C1, + toolbar-button-background-color: $p5-contrast-lightgray, button-background-hover-color: $yellow, button-background-active-color: $yellow, button-nav-inactive-color: #a0a0a0, button-hover-color: #333333, button-active-color: #333333, modal-background-color: #444, - modal-button-background-color: #C1C1C1, + modal-button-background-color: $p5-contrast-lightgray, modal-border-color: #949494, - icon-color: #a9a9a9, + icon-color: #ddd, icon-hover-color: $yellow, icon-toast-hover-color: $yellow, shadow-color: rgba(0, 0, 0, 0.16), console-background-color: #4f4f4f, console-color: $black, console-header-background-color: #3f3f3f, - console-header-color: #b5b5b5, + console-header-color: #ddd, console-info-background-color: $lightsteelblue, console-warn-background-color: $orange, console-debug-background-color: $dodgerblue, @@ -235,7 +236,7 @@ $themes: ( primary-button-background-color: $p5js-pink, table-button-color: #333, - table-button-background-color: #C1C1C1, + table-button-background-color: $p5-contrast-lightgray, table-button-active-color: #333, table-button-background-active-color: #00FFFF, table-button-hover-color: #333, diff --git a/client/styles/components/_p5-contrast-codemirror-theme.scss b/client/styles/components/_p5-contrast-codemirror-theme.scss index fd289df3..cd736d2f 100644 --- a/client/styles/components/_p5-contrast-codemirror-theme.scss +++ b/client/styles/components/_p5-contrast-codemirror-theme.scss @@ -14,7 +14,7 @@ $p5-contrast-black: #333; $p5-contrast-gray: #A0A0A0; $p5-contrast-white: #FDFDFD; $p5-contrast-darkgray: #333333; -$p5-contrast-lightgray: #C1C1C1; +$p5-contrast-lightgray: #f2f2f2; $p5-contrast-blue: #00FFFF; $p5-contrast-green: #2DE9B6; $p5-contrast-yellow: #F5DC23; @@ -31,47 +31,47 @@ $p5-contrast-activeline: #999999; color: $p5-contrast-white; } -.cm-s-p5-contrast .cm-comment { +.cm-s-p5-contrast span .cm-comment { color: $p5-contrast-lightgray; } -.cm-s-p5-contrast .cm-def { +.cm-s-p5-contrast span .cm-def { color: $p5-contrast-blue; } -.cm-s-p5-contrast .cm-string { +.cm-s-p5-contrast span .cm-string { color: $p5-contrast-green; } -.cm-s-p5-contrast .cm-string-2 { +.cm-s-p5-contrast span .cm-string-2 { color: $p5-contrast-green; } -.cm-s-p5-contrast .cm-number { +.cm-s-p5-contrast span .cm-number { color: $p5-contrast-pink; } -.cm-s-p5-contrast .cm-keyword { +.cm-s-p5-contrast span .cm-keyword { color: $p5-contrast-yellow; } -.cm-s-p5-contrast .cm-variable { +.cm-s-p5-contrast span .cm-variable { color: $p5-contrast-white; } -.cm-s-p5-contrast .cm-variable-2 { +.cm-s-p5-contrast span .cm-variable-2 { color: $p5-contrast-white; } -.cm-s-p5-contrast .cm-property { +.cm-s-p5-contrast span .cm-property { color: $p5-contrast-white; } -.cm-s-p5-contrast .cm-atom { +.cm-s-p5-contrast span .cm-atom { color: $p5-contrast-pink; } -.cm-s-p5-contrast .cm-operator { +.cm-s-p5-contrast span .cm-operator { color: $p5-contrast-lightgray; } @@ -79,7 +79,7 @@ $p5-contrast-activeline: #999999; color: $p5-contrast-number; } -.cm-s-p5-contrast .CodeMirror-selected { +.cm-s-p5-contrast div .CodeMirror-selected { background-color: $p5-contrast-selected; } @@ -96,25 +96,25 @@ $p5-contrast-activeline: #999999; color: #f00; } -.cm-s-p5-contrast .CodeMirror-matchingbracket { +.cm-s-p5-contrast span.CodeMirror-matchingbracket { outline: 1px solid $p5-contrast-lightgray; outline-offset: 1px; color: $p5-contrast-white !important; } -.cm-s-p5-contrast .cm-qualifier { +.cm-s-p5-contrast span .cm-qualifier { color: $p5-contrast-yellow; } -.cm-s-p5-contrast .cm-tag { +.cm-s-p5-contrast span .cm-tag { color: $p5-contrast-orange; } -.cm-s-p5-contrast .cm-builtin { +.cm-s-p5-contrast span.cm-builtin { color: $p5-contrast-yellow; } -.cm-s-p5-contrast .cm-attribute { +.cm-s-p5-contrast span .cm-attribute { color: $p5-contrast-white; } From 6088783b616c6802726e3e45c5aa1ae73583603b Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 8 Apr 2020 14:03:56 -0400 Subject: [PATCH 2/2] Adjust high contrast colors to design system --- client/styles/abstracts/_variables.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 2baee4e4..58eb80de 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -12,7 +12,7 @@ $dodgerblue: #1E90FF; $icon-color: #8b8b8b; $icon-hover-color: #333; $p5-contrast-pink: #FFA9D9; -$p5-contrast-lightgray: #f2f2f2; +$p5-contrast-lightgray: #f0f0f0; // Grays $dark: #333; @@ -202,14 +202,14 @@ $themes: ( modal-background-color: #444, modal-button-background-color: $p5-contrast-lightgray, modal-border-color: #949494, - icon-color: #ddd, + icon-color: #d9d9d9, icon-hover-color: $yellow, icon-toast-hover-color: $yellow, shadow-color: rgba(0, 0, 0, 0.16), console-background-color: #4f4f4f, console-color: $black, console-header-background-color: #3f3f3f, - console-header-color: #ddd, + console-header-color: #d9d9d9, console-info-background-color: $lightsteelblue, console-warn-background-color: $orange, console-debug-background-color: $dodgerblue,