Update light theme to try to be WCAG AA compliant, adjust Toolbar styling

client/styles/abstracts/_mixins.scss

@@ -21,12 +21,13 @@
 @mixin icon() {
   @include themify() {
     color: getThemifyVariable('icon-color');
-    & g {
+    & g, & polygon {
+      opacity: 1;
       fill: getThemifyVariable('icon-color');
     }
     &:hover {
       color: getThemifyVariable('icon-hover-color');
-      & g {
+      & g, & polygon {
         opacity: 1;
         fill: getThemifyVariable('icon-hover-color');
       }

client/styles/abstracts/_placeholders.scss

@@ -58,15 +58,15 @@
 }
 
 %none-themify-icon-with-hover {
-	color: $icon-color;
+	color: $medium-dark;
 	& g {
-		fill: $icon-color;
+		fill: $medium-dark;
 	}
 	&:hover {
-		color: $icon-hover-color;
+		color: $p5js-pink;
 		& g {
 			opacity: 1;
-			fill: $icon-hover-color;
+			fill: $p5js-pink;
 		}
 	}
 	background-color: transparent;
@@ -136,7 +136,7 @@
 		background-color: transparent;
 		color: getThemifyVariable('inactive-text-color');
 		&:hover {
-			color: getThemifyVariable('primary-text-color');
+			color: getThemifyVariable('heavy-text-color');
 		}
 	}
 	font-size: #{12 / $base-font-size}rem;
@@ -172,11 +172,11 @@
 %link {
 	@include themify() {
 		text-decoration: none;
-		color: getThemifyVariable('inactive-text-color');
+		color: getThemifyVariable('secondary-text-color');
 		cursor: pointer;
 		&:hover {
 			text-decoration: none;
-			color: getThemifyVariable('primary-text-color');
+			color: getThemifyVariable('logo-color');
 		}
 	}
 }

client/styles/abstracts/_variables.scss

@@ -2,6 +2,7 @@ $base-font-size: 12;
 
 //colors
 $p5js-pink: #ed225d;
+$processing-blue: #007BBB;
 $white: #fff;
 $black: #000;
 $yellow: #F5DC23;
@@ -9,34 +10,42 @@ $orange: #ffa500;
 $red: #ff0000;
 $lightsteelblue: #B0C4DE;
 $dodgerblue: #1E90FF;
-$icon-color: #666;
+// $icon-hover-color: #333;
-$icon-hover-color: #333;
 $p5-contrast-pink: #FFA9D9;
 
-// Grays
+// Grayscale values
-$dark: #333;
+$lightest: #FFF; // primary
-$middleGray: #7d7d7d;
+$lighter: #FBFBFB;
-$middleLight: #a6a6a6;
 
-// Abstracts
+$light: #F0F0F0; // primary
-$primary-text-color: $dark;
+$medium-light: #D9D9D9;
+$middle-light: #A6A6A6;
+
+$middle-gray: #7D7D7D; // primary
+$middle-dark: #666;
+$medium-dark: #4D4D4D;
+
+$dark: #333; // primary
+$darker: #1C1C1C;
+$darkest: #000;
 
 $themes: (
   light: (
     logo-color: $p5js-pink,
-    primary-text-color: $primary-text-color,
+    heavy-text-color: $darker,
-    dropzone-text-color: #333,
+    primary-text-color: $dark,
-    modal-button-color: #333,
+    secondary-text-color: $medium-dark,
-    heading-text-color: #333,
+    inactive-text-color: $middle-dark,
-    secondary-text-color: #666,
+    dropzone-text-color: $dark,
-    inactive-text-color: #666,
+    modal-button-color: $dark,
-    background-color: #fbfbfb,
+    heading-text-color: $dark,
+    background-color: $lighter,
     preview-placeholder-color: #dcdcdc,
-    button-background-color: #f4f4f4,
+    button-background-color: $light,
     button-color: $black,
-    button-border-color: #979797,
+    button-border-color: $middle-light,
     toolbar-button-color: $p5js-pink,
-    toolbar-button-background-color: #f4f4f4,
+    toolbar-button-background-color: $light,
     button-background-hover-color: $p5js-pink,
     button-background-active-color: #f10046,
     button-nav-inactive-color: #a0a0a0,
@@ -46,21 +55,22 @@ $themes: (
     modal-button-background-color: #e6e6e6,
     modal-border-color: rgba(17, 17, 17, 0.3),
     modal-border-selected-color: #B9D0E1,
-    icon-color: $icon-color,
+    icon-color: $medium-dark,
-    icon-hover-color: $icon-hover-color,
+    icon-hover-color: $p5js-pink,
     icon-toast-hover-color: $white,
     shadow-color: rgba(0, 0, 0, 0.16),
     console-background-color: #eee,
     console-color: $white,
-    console-header-background-color: #d6d6d6,
+    console-header-background-color: $medium-light,
-    console-header-color: #1c1c1c,
+    console-header-color: $darker,
     console-info-background-color: $lightsteelblue,
     console-warn-background-color: $orange,
     console-debug-background-color: $dodgerblue,
     console-error-background-color: $red,
-    ide-border-color: #f4f4f4,
+    ide-border-color: $light,
-    editor-gutter-color: #f4f4f4,
+    editor-gutter-color: $lighter,
-    file-selected-color: #f4f4f4,
+    file-hover-color: $light,
+    file-selected-color: $medium-light,
     input-text-color: #333,
     input-border-color: #b5b5b5,
     about-list-text-color: #4a4a4a,
@@ -71,10 +81,12 @@ $themes: (
     dropdown-color: #414141,
     keyboard-shortcut-color: #757575,
     nav-hover-color: $p5js-pink,
+    nav-border-color: $middle-light,
     error-color: $p5js-pink,
     table-row-stripe-color: #d6d6d6,
     codefold-icon-open: url(../images/triangle-arrow-down.svg),
     codefold-icon-closed: url(../images/triangle-arrow-right.svg),
+    sidebar-background-color: $light,
 
     primary-button-color: #fff,
     primary-button-background-color: $p5js-pink,
@@ -90,9 +102,9 @@ $themes: (
     progress-bar-active-color: #f10046,
 
     form-title-color: rgba(51, 51, 51, 0.87),
-    form-secondary-title-color: $middleGray,
+    form-secondary-title-color: $middle-dark,
     form-input-text-color: $dark,
-    form-input-placeholder-text-color: $middleLight,
+    form-input-placeholder-text-color: $middle-light,
     form-border-color: #b5b5b5,
     form-button-background-color: $white,
     form-button-color: #f10046,
@@ -100,10 +112,11 @@ $themes: (
     form-button-background-active-color: #f10046,
     form-button-hover-color: $white,
     form-button-active-color: $white,
-    form-navigation-options-color: #999999
+    form-navigation-options-color: $middle-dark
   ),
   dark: (
     logo-color: $p5js-pink,
+    heavy-text-color: $lightest,
     primary-text-color: $white,
     dropzone-text-color: $black,
     modal-button-color: $white,
@@ -139,6 +152,7 @@ $themes: (
     console-error-background-color: $red,
     ide-border-color: #949494,
     editor-gutter-color: #363636,
+    file-hover-color: #404040,
     file-selected-color: #404040,
     input-text-color: #333,
     input-border-color: #b5b5b5,
@@ -150,6 +164,7 @@ $themes: (
     dropdown-color: #dadada,
     keyboard-shortcut-color: #B5B5B5,
     nav-hover-color: $p5js-pink,
+    nav-border-color: $middle-dark,
     error-color: $p5js-pink,
     table-row-stripe-color: #3f3f3f,
     codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
@@ -181,6 +196,7 @@ $themes: (
   ),
   contrast: (
     logo-color: $yellow,
+    heavy-text-color: $yellow,
     primary-text-color: $yellow,
     dropzone-text-color: $black,
     modal-button-color: #333,
@@ -215,6 +231,7 @@ $themes: (
     console-error-background-color: $red,
     ide-border-color: #949494,
     editor-gutter-color: #454545,
+    file-hover-color: #404040,
     file-selected-color: #404040,
     input-text-color: #333,
     input-border-color: #b5b5b5,
@@ -226,6 +243,7 @@ $themes: (
     dropdown-color: #e1e1e1,
     keyboard-shortcut-color: #e1e1e1,
     nav-hover-color: $yellow,
+    nav-border-color: $middle-dark,
     error-color: $p5-contrast-pink,
     table-row-stripe-color: #3f3f3f,
     codefold-icon-open: url(../images/triangle-arrow-down-white.svg),

client/styles/components/_console.scss

@@ -78,6 +78,10 @@
 .preview-console__clear {
 	@include themify() {
 		@extend %link;
+		color: getThemifyVariable('primary-text-color');
+		// &:hover {
+		// 	color: getThemifyVariable('console-header-color');
+		// }
 	}
 	background: transparent;
 	border: none;

client/styles/components/_editor.scss

@@ -374,7 +374,7 @@ pre.CodeMirror-line {
 
 .editor__file-name {
   @include themify() {
-    color: getThemifyVariable('secondary-text-color');
+    color: getThemifyVariable('primary-text-color');
   }
   height: #{29 / $base-font-size}rem;
   padding-top: #{7 / $base-font-size}rem;

client/styles/components/_nav.scss

@@ -5,7 +5,7 @@
   justify-content: space-between;
 
   @include themify() {
-    border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
+    border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
   }
 
   & button {
@@ -23,10 +23,11 @@
   align-items: center;
 }
 
-.nav__items-left {
+.nav__items-left,
-  & button {
+.nav__items-right {
+  & button, & a {
     @include themify() {
-      color: getThemifyVariable('secondary-text-color');
+      color: getThemifyVariable('primary-text-color');
     }
   }
 }
@@ -52,6 +53,12 @@
   padding-right: #{15 / $base-font-size}rem;
 }
 
+.nav__item-header-triangle polygon {
+  @include themify() {
+    fill: getThemifyVariable('icon-color');
+  }
+}
+
 .nav__item:hover {
   .nav__item-header {
     @include themify() {

client/styles/components/_preferences.scss

@@ -242,7 +242,7 @@ input[type="number"]::-webkit-outer-spin-button {
 .preference__radio-button:checked + .preference__option {
   @include themify() {
     //for some reason this won't work for getThemifyVariable
-    color: map-get($theme-map, "primary-text-color");
+    color: map-get($theme-map, "heavy-text-color");
   }
 }
 

client/styles/components/_sidebar.scss

@@ -50,6 +50,12 @@
   position: relative;
   overflow-y: auto;
   flex: 1 1 auto;
+  @include themify() {
+    border-top: 1px solid map-get($theme-map, 'ide-border-color');
+  }
+  .sidebar--contracted & {
+    border: none;
+  }
 }
 
 .sidebar__file-item {
@@ -57,12 +63,10 @@
   cursor: pointer;
   position: relative;
   @include themify() {
-    color: map-get($theme-map, 'inactive-text-color');
-    &:hover > .file-item__content .sidebar__file-item-name {
     color: map-get($theme-map, 'primary-text-color');
-    }
+    // TODO get this to not affect parent, need to move it into JS
-    &:hover > .file-item__content .sidebar__file-item-icon g {
+    &:hover:not(.sidebar__file-item--selected) > .file-item__content {
-      fill: map-get($theme-map, 'primary-text-color');
+      background-color: map-get($theme-map, 'file-hover-color');
     }
   }
 }
@@ -120,6 +124,9 @@
     content: '';
     width: 100%;
   }
+  @include themify() {
+    color: map-get($theme-map, 'primary-text-color');
+  }
 }
 
 .sidebar__file-item-show-options {
@@ -191,7 +198,7 @@
   @include icon();
   position: absolute;
   top: #{7 / $base-font-size}rem;
-  left: #{34 / $base-font-size}rem;
+  left: #{1 / $base-font-size}rem;
   height: #{14 / $base-font-size}rem;
   & svg {
     height: #{14 / $base-font-size}rem;

client/styles/components/_toolbar.scss

@@ -89,9 +89,12 @@
 }
 
 .toolbar {
-	padding: #{20 / $base-font-size}rem #{34 / $base-font-size}rem;
+	padding: #{10 / $base-font-size}rem #{20 / $base-font-size}rem;
 	display: flex;
 	align-items: center;
+	@include themify() {
+		border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
+	}
 }
 
 .toolbar__project-name-container {
@@ -106,7 +109,7 @@
 
 .toolbar__project-name {
 	@include themify() {
-		color: getThemifyVariable('inactive-text-color');
+		color: getThemifyVariable('logo-color');
 		&:hover {
 		color: getThemifyVariable('primary-text-color');
 		  & .toolbar__edit-name-button path {
@@ -134,45 +137,18 @@
 .toolbar__project-owner {
 	margin-left: #{5 / $base-font-size}rem;
 	@include themify() {
-		color: getThemifyVariable('inactive-text-color');
+		color: getThemifyVariable('secondary-text-color');
 	}
 }
 
 .toolbar__autorefresh-label {
 	@include themify() {
-		color: getThemifyVariable('inactive-text-color');
+		color: getThemifyVariable('secondary-text-color');
 	}
 	margin-left: #{5 / $base-font-size}rem;
 	font-size: #{12 / $base-font-size}rem;
 }
 
-.toolbar__serve-secure {
-	margin-left: #{20 / $base-font-size}rem;
-}
-
-.toolbar__serve-secure-label {
-	@include themify() {
-		color: getThemifyVariable('inactive-text-color');
-	}
-	margin-left: #{5 / $base-font-size}rem;
-	font-size: #{12 / $base-font-size}rem;
-}
-
-.toolbar__serve-secure-help {
-	display: inline-block;
-	padding-top: 0;
-	padding-bottom: 0;
-	& svg {
-		width: #{10 / $base-font-size}rem;
-		height: #{10 / $base-font-size}rem;
-	}
-	@include themify() {
-		& path {
-			fill: getThemifyVariable('inactive-text-color');
-		}
-	}
-}
-
 .toolbar__edit-name-button {
 	display: inline-block;
 	vertical-align: top;
@@ -183,7 +159,7 @@
 	}
 	@include themify() {
 		& path {
-			fill: getThemifyVariable('inactive-text-color');
+			fill: getThemifyVariable('logo-color');
 		}
 	}
 }