r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

fix(contrast-theme): fixed failing WCAG-AAA checks

Browse source
This commit is contained in:
elit-altum 2020-04-04 13:51:57 +05:30
parent c19ae217ef
commit 21d44fa263
2 changed files with 25 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
client/styles/abstracts/_variables.scss
View file

@ -12,6 +12,7 @@ $dodgerblue: #1E90FF;
$icon-color: #8b8b8b; $icon-color: #8b8b8b;
$icon-hover-color: #333; $icon-hover-color: #333;
$p5-contrast-pink: #FFA9D9; $p5-contrast-pink: #FFA9D9;
$p5-contrast-lightgray: #f2f2f2;
// Grays // Grays
$dark: #333; $dark: #333;
@ -186,29 +187,29 @@ $themes: (
modal-button-color: #333, modal-button-color: #333,
heading-text-color: #e1e1e1, heading-text-color: #e1e1e1,
secondary-text-color: #e1e1e1, secondary-text-color: #e1e1e1,
inactive-text-color: #c1c1c1, inactive-text-color: $p5-contrast-lightgray,
background-color: #333, background-color: #333,
button-background-color: $white, button-background-color: $white,
button-color: $black, button-color: $black,
button-border-color: #979797, button-border-color: #979797,
toolbar-button-color: #333333, toolbar-button-color: #333333,
toolbar-button-background-color: #C1C1C1, toolbar-button-background-color: $p5-contrast-lightgray,
button-background-hover-color: $yellow, button-background-hover-color: $yellow,
button-background-active-color: $yellow, button-background-active-color: $yellow,
button-nav-inactive-color: #a0a0a0, button-nav-inactive-color: #a0a0a0,
button-hover-color: #333333, button-hover-color: #333333,
button-active-color: #333333, button-active-color: #333333,
modal-background-color: #444, modal-background-color: #444,
modal-button-background-color: #C1C1C1, modal-button-background-color: $p5-contrast-lightgray,
modal-border-color: #949494, modal-border-color: #949494,
icon-color: #a9a9a9, icon-color: #ddd,
icon-hover-color: $yellow, icon-hover-color: $yellow,
icon-toast-hover-color: $yellow, icon-toast-hover-color: $yellow,
shadow-color: rgba(0, 0, 0, 0.16), shadow-color: rgba(0, 0, 0, 0.16),
console-background-color: #4f4f4f, console-background-color: #4f4f4f,
console-color: $black, console-color: $black,
console-header-background-color: #3f3f3f, console-header-background-color: #3f3f3f,
console-header-color: #b5b5b5, console-header-color: #ddd,
console-info-background-color: $lightsteelblue, console-info-background-color: $lightsteelblue,
console-warn-background-color: $orange, console-warn-background-color: $orange,
console-debug-background-color: $dodgerblue, console-debug-background-color: $dodgerblue,
@ -235,7 +236,7 @@ $themes: (
primary-button-background-color: $p5js-pink, primary-button-background-color: $p5js-pink,
table-button-color: #333, table-button-color: #333,
table-button-background-color: #C1C1C1, table-button-background-color: $p5-contrast-lightgray,
table-button-active-color: #333, table-button-active-color: #333,
table-button-background-active-color: #00FFFF, table-button-background-active-color: #00FFFF,
table-button-hover-color: #333, table-button-hover-color: #333,

36
client/styles/components/_p5-contrast-codemirror-theme.scss
View file

@ -14,7 +14,7 @@ $p5-contrast-black: #333;
$p5-contrast-gray: #A0A0A0; $p5-contrast-gray: #A0A0A0;
$p5-contrast-white: #FDFDFD; $p5-contrast-white: #FDFDFD;
$p5-contrast-darkgray: #333333; $p5-contrast-darkgray: #333333;
$p5-contrast-lightgray: #C1C1C1; $p5-contrast-lightgray: #f2f2f2;
$p5-contrast-blue: #00FFFF; $p5-contrast-blue: #00FFFF;
$p5-contrast-green: #2DE9B6; $p5-contrast-green: #2DE9B6;
$p5-contrast-yellow: #F5DC23; $p5-contrast-yellow: #F5DC23;
@ -31,47 +31,47 @@ $p5-contrast-activeline: #999999;
color: $p5-contrast-white; color: $p5-contrast-white;
} }
.cm-s-p5-contrast .cm-comment { .cm-s-p5-contrast span .cm-comment {
color: $p5-contrast-lightgray; color: $p5-contrast-lightgray;
} }
.cm-s-p5-contrast .cm-def { .cm-s-p5-contrast span .cm-def {
color: $p5-contrast-blue; color: $p5-contrast-blue;
} }
.cm-s-p5-contrast .cm-string { .cm-s-p5-contrast span .cm-string {
color: $p5-contrast-green; color: $p5-contrast-green;
} }
.cm-s-p5-contrast .cm-string-2 { .cm-s-p5-contrast span .cm-string-2 {
color: $p5-contrast-green; color: $p5-contrast-green;
} }
.cm-s-p5-contrast .cm-number { .cm-s-p5-contrast span .cm-number {
color: $p5-contrast-pink; color: $p5-contrast-pink;
} }
.cm-s-p5-contrast .cm-keyword { .cm-s-p5-contrast span .cm-keyword {
color: $p5-contrast-yellow; color: $p5-contrast-yellow;
} }
.cm-s-p5-contrast .cm-variable { .cm-s-p5-contrast span .cm-variable {
color: $p5-contrast-white; color: $p5-contrast-white;
} }
.cm-s-p5-contrast .cm-variable-2 { .cm-s-p5-contrast span .cm-variable-2 {
color: $p5-contrast-white; color: $p5-contrast-white;
} }
.cm-s-p5-contrast .cm-property { .cm-s-p5-contrast span .cm-property {
color: $p5-contrast-white; color: $p5-contrast-white;
} }
.cm-s-p5-contrast .cm-atom { .cm-s-p5-contrast span .cm-atom {
color: $p5-contrast-pink; color: $p5-contrast-pink;
} }
.cm-s-p5-contrast .cm-operator { .cm-s-p5-contrast span .cm-operator {
color: $p5-contrast-lightgray; color: $p5-contrast-lightgray;
} }
@ -79,7 +79,7 @@ $p5-contrast-activeline: #999999;
color: $p5-contrast-number; color: $p5-contrast-number;
} }
.cm-s-p5-contrast .CodeMirror-selected { .cm-s-p5-contrast div .CodeMirror-selected {
background-color: $p5-contrast-selected; background-color: $p5-contrast-selected;
} }
@ -96,25 +96,25 @@ $p5-contrast-activeline: #999999;
color: #f00; color: #f00;
} }
.cm-s-p5-contrast .CodeMirror-matchingbracket { .cm-s-p5-contrast span.CodeMirror-matchingbracket {
outline: 1px solid $p5-contrast-lightgray; outline: 1px solid $p5-contrast-lightgray;
outline-offset: 1px; outline-offset: 1px;
color: $p5-contrast-white !important; color: $p5-contrast-white !important;
} }
.cm-s-p5-contrast .cm-qualifier { .cm-s-p5-contrast span .cm-qualifier {
color: $p5-contrast-yellow; color: $p5-contrast-yellow;
} }
.cm-s-p5-contrast .cm-tag { .cm-s-p5-contrast span .cm-tag {
color: $p5-contrast-orange; color: $p5-contrast-orange;
} }
.cm-s-p5-contrast .cm-builtin { .cm-s-p5-contrast span.cm-builtin {
color: $p5-contrast-yellow; color: $p5-contrast-yellow;
} }
.cm-s-p5-contrast .cm-attribute { .cm-s-p5-contrast span .cm-attribute {
color: $p5-contrast-white; color: $p5-contrast-white;
} }