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-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,

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