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

Merge pull request #1380 from elit-altum/updating-high-contrast-theme

Browse source 
fix(high-contrast-theme): fixed failing WCAG AAA checks
This commit is contained in:
Cassie Tarakajian 2020-04-10 17:45:22 -04:00 committed by GitHub
commit 4cb48399db
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -186,7 +186,7 @@ $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: #f2f2f2,
background-color: #333, background-color: #333,
button-background-color: $white, button-background-color: $white,
button-color: $black, button-color: $black,
@ -201,14 +201,14 @@ $themes: (
modal-background-color: #444, modal-background-color: #444,
modal-button-background-color: #C1C1C1, modal-button-background-color: #C1C1C1,
modal-border-color: #949494, modal-border-color: #949494,
icon-color: #a9a9a9, icon-color: #d9d9d9,
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: #d9d9d9,
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,

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

@ -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;
} }