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

catarak · catarak · commit 642016a3b25b · 2020-04-21T17:49:02.000-04:00
diff --git a/client/styles/abstracts/_mixins.scss b/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');
       }
diff --git a/client/styles/abstracts/_placeholders.scss b/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');
 		}
 	}
 }
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
@@ -2,41 +2,50 @@ $base-font-size: 12;
 
 //colors
 $p5js-pink: #ed225d;
+$processing-blue: #007BBB;
 $white: #fff;
 $black: #000;
 $yellow: #F5DC23;
 $orange: #ffa500;
 $red: #ff0000;
 $lightsteelblue: #B0C4DE;
 $dodgerblue: #1E90FF;
-$icon-color: #666;
-$icon-hover-color: #333;
+// $icon-hover-color: #333;
 $p5-contrast-pink: #FFA9D9;
 
-// Grays
-$dark: #333;
-$middleGray: #7d7d7d;
-$middleLight: #a6a6a6;
+// Grayscale values
+$lightest: #FFF; // primary
+$lighter: #FBFBFB;
 
-// Abstracts
-$primary-text-color: $dark;
+$light: #F0F0F0; // primary
+$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,
-    dropzone-text-color: #333,
-    modal-button-color: #333,
-    heading-text-color: #333,
-    secondary-text-color: #666,
-    inactive-text-color: #666,
-    background-color: #fbfbfb,
+    heavy-text-color: $darker,
+    primary-text-color: $dark,
+    secondary-text-color: $medium-dark,
+    inactive-text-color: $middle-dark,
+    dropzone-text-color: $dark,
+    modal-button-color: $dark,
+    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-hover-color: $icon-hover-color,
+    icon-color: $medium-dark,
+    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-color: #1c1c1c,
+    console-header-background-color: $medium-light,
+    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,
-    editor-gutter-color: #f4f4f4,
-    file-selected-color: #f4f4f4,
+    ide-border-color: $light,
+    editor-gutter-color: $lighter,
+    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,20 +102,21 @@ $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,
     form-button-background-hover-color: $p5js-pink,
     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),
diff --git a/client/styles/components/_console.scss b/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;
diff --git a/client/styles/components/_editor.scss b/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;
diff --git a/client/styles/components/_nav.scss b/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 {
-  & button {
+.nav__items-left,
+.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() {
diff --git a/client/styles/components/_preferences.scss b/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");
   }
 }
 
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
@@ -50,19 +50,23 @@
   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 {
   font-size: #{12 / $base-font-size}rem;
   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');
-    }
-    &:hover > .file-item__content .sidebar__file-item-icon g {
-      fill: map-get($theme-map, 'primary-text-color');
+    color: map-get($theme-map, 'primary-text-color');
+    // TODO get this to not affect parent, need to move it into JS
+    &:hover:not(.sidebar__file-item--selected) > .file-item__content {
+      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;
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss

Original file line number	Diff line number	Diff line change
`@@ -58,15 +58,15 @@`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`%none-themify-icon-with-hover {`
`61`		`- color: $icon-color;`
	`61`	`+ color: $medium-dark;`
`62`	`62`	`& g {`
`63`		`- fill: $icon-color;`
	`63`	`+ fill: $medium-dark;`
`64`	`64`	`}`
`65`	`65`	`&:hover {`
`66`		`- color: $icon-hover-color;`
	`66`	`+ color: $p5js-pink;`
`67`	`67`	`& g {`
`68`	`68`	`opacity: 1;`
`69`		`- fill: $icon-hover-color;`
	`69`	`+ fill: $p5js-pink;`
`70`	`70`	`}`
`71`	`71`	`}`
`72`	`72`	`background-color: transparent;`
`@@ -136,7 +136,7 @@`
`136`	`136`	`background-color: transparent;`
`137`	`137`	`color: getThemifyVariable('inactive-text-color');`
`138`	`138`	`&:hover {`
`139`		`- color: getThemifyVariable('primary-text-color');`
	`139`	`+ color: getThemifyVariable('heavy-text-color');`
`140`	`140`	`}`
`141`	`141`	`}`
`142`	`142`	`font-size: #{12 / $base-font-size}rem;`
`@@ -172,11 +172,11 @@`
`172`	`172`	`%link {`
`173`	`173`	`@include themify() {`
`174`	`174`	`text-decoration: none;`
`175`		`- color: getThemifyVariable('inactive-text-color');`
	`175`	`+ color: getThemifyVariable('secondary-text-color');`
`176`	`176`	`cursor: pointer;`
`177`	`177`	`&:hover {`
`178`	`178`	`text-decoration: none;`
`179`		`- color: getThemifyVariable('primary-text-color');`
	`179`	`+ color: getThemifyVariable('logo-color');`
`180`	`180`	`}`
`181`	`181`	`}`
`182`	`182`	`}`
Original file line number	Diff line number	Diff line change
`@@ -374,7 +374,7 @@ pre.CodeMirror-line {`
`374`	`374`
`375`	`375`	`.editor__file-name {`
`376`	`376`	`@include themify() {`
`377`		`- color: getThemifyVariable('secondary-text-color');`
	`377`	`+ color: getThemifyVariable('primary-text-color');`
`378`	`378`	`}`
`379`	`379`	`height: #{29 / $base-font-size}rem;`
`380`	`380`	`padding-top: #{7 / $base-font-size}rem;`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`justify-content: space-between;`
`6`	`6`
`7`	`7`	`@include themify() {`
`8`		`- border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');`
	`8`	`+ border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`& button {`
`@@ -23,10 +23,11 @@`
`23`	`23`	`align-items: center;`
`24`	`24`	`}`
`25`	`25`
`26`		`-.nav__items-left {`
`27`		`- & button {`
	`26`	`+.nav__items-left,`
	`27`	`+.nav__items-right {`
	`28`	`+ & button, & a {`
`28`	`29`	`@include themify() {`
`29`		`- color: getThemifyVariable('secondary-text-color');`
	`30`	`+ color: getThemifyVariable('primary-text-color');`
`30`	`31`	`}`
`31`	`32`	`}`
`32`	`33`	`}`
`@@ -52,6 +53,12 @@`
`52`	`53`	`padding-right: #{15 / $base-font-size}rem;`
`53`	`54`	`}`
`54`	`55`
	`56`	`+.nav__item-header-triangle polygon {`
	`57`	`+ @include themify() {`
	`58`	`+ fill: getThemifyVariable('icon-color');`
	`59`	`+ }`
	`60`	`+}`
	`61`	`+`
`55`	`62`	`.nav__item:hover {`
`56`	`63`	`.nav__item-header {`
`57`	`64`	`@include themify() {`
Original file line number	Diff line number	Diff line change
`@@ -242,7 +242,7 @@ input[type="number"]::-webkit-outer-spin-button {`
`242`	`242`	`.preference__radio-button:checked + .preference__option {`
`243`	`243`	`@include themify() {`
`244`	`244`	`//for some reason this won't work for getThemifyVariable`
`245`		`- color: map-get($theme-map, "primary-text-color");`
	`245`	`+ color: map-get($theme-map, "heavy-text-color");`
`246`	`246`	`}`
`247`	`247`	`}`
`248`	`248`