From 642016a3b25ba0f25a09e1043077b6f771c59cce Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Tue, 21 Apr 2020 17:49:02 -0400 Subject: [PATCH] Update light theme to try to be WCAG AA compliant, adjust Toolbar styling --- client/styles/abstracts/_mixins.scss | 5 +- client/styles/abstracts/_placeholders.scss | 14 ++-- client/styles/abstracts/_variables.scss | 74 ++++++++++++++-------- client/styles/components/_console.scss | 4 ++ client/styles/components/_editor.scss | 2 +- client/styles/components/_nav.scss | 15 +++-- client/styles/components/_preferences.scss | 2 +- client/styles/components/_sidebar.scss | 21 ++++-- client/styles/components/_toolbar.scss | 40 +++--------- 9 files changed, 95 insertions(+), 82 deletions(-) diff --git a/client/styles/abstracts/_mixins.scss b/client/styles/abstracts/_mixins.scss index 1e6f2c52..1d51f204 100644 --- 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 index 09b9932f..b5a08d7a 100644 --- 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 index f6859ad0..2a9b290b 100644 --- a/client/styles/abstracts/_variables.scss +++ b/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 -$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,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), diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss index 53048614..16999c9e 100644 --- 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 index 6096afa1..b5b13c6e 100644 --- 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 index 7f5a45ac..ab7414fc 100644 --- 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 index 7d3bc6df..e65cfa40 100644 --- 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 index 345d0b40..4d120dee 100644 --- a/client/styles/components/_sidebar.scss +++ b/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'); - } - &: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 index 8db1ab81..35100cdd 100644 --- a/client/styles/components/_toolbar.scss +++ b/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'); } } }