Merge pull request #1360 from elit-altum/updating-theme

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

Author: catarak

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: #f0f0f0;
 
 // 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: #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: #b5b5b5,
+    console-header-color: #d9d9d9,
     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,

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,55 +31,55 @@ $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;
 }
 
 .cm-s-p5-contrast .cm-linenumber {
   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;
 }