From db0dc434e4035b06bcc471c878d14fd388e394c8 Mon Sep 17 00:00:00 2001 From: elit-altum Date: Mon, 20 Apr 2020 15:54:53 +0530 Subject: [PATCH 01/22] fix(light-theme): fixed failing WCAG AA checks - I1263 --- client/styles/abstracts/_variables.scss | 8 ++-- .../_p5-light-codemirror-theme.scss | 44 +++++++++---------- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 05dfcf6e..f6859ad0 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -9,7 +9,7 @@ $orange: #ffa500; $red: #ff0000; $lightsteelblue: #B0C4DE; $dodgerblue: #1E90FF; -$icon-color: #8b8b8b; +$icon-color: #666; $icon-hover-color: #333; $p5-contrast-pink: #FFA9D9; @@ -28,8 +28,8 @@ $themes: ( dropzone-text-color: #333, modal-button-color: #333, heading-text-color: #333, - secondary-text-color: #a8a8a8, - inactive-text-color: #b5b5b5, + secondary-text-color: #666, + inactive-text-color: #666, background-color: #fbfbfb, preview-placeholder-color: #dcdcdc, button-background-color: #f4f4f4, @@ -53,7 +53,7 @@ $themes: ( console-background-color: #eee, console-color: $white, console-header-background-color: #d6d6d6, - console-header-color: #b1b1b1, + console-header-color: #1c1c1c, console-info-background-color: $lightsteelblue, console-warn-background-color: $orange, console-debug-background-color: $dodgerblue, diff --git a/client/styles/components/_p5-light-codemirror-theme.scss b/client/styles/components/_p5-light-codemirror-theme.scss index 49328175..1c7b23b4 100644 --- a/client/styles/components/_p5-light-codemirror-theme.scss +++ b/client/styles/components/_p5-light-codemirror-theme.scss @@ -10,18 +10,18 @@ //light gray: #f4f4f4 //dark gray: #b5b5b5 -$p5-light-lightbrown: #A67F59; +$p5-light-lightbrown: #7a5a3a; $p5-light-brown: #704F21; $p5-light-black: #333333; -$p5-light-pink: #D9328F; -$p5-light-gray: #A0A0A0; -$p5-light-lightblue: #00A1D3; -$p5-light-darkblue: #2D7BB6; +$p5-light-pink: #be3652; +$p5-light-gray: #666; +$p5-light-lightblue: #007bbb; +$p5-light-darkblue: #306bb4; $p5-light-white: #FDFDFD; $p5-light-orange: #EE9900; $p5-light-lightgray: #E0D7D1; $p5-light-darkgray: #666666; -$p5-light-green: #58a10b; +$p5-light-green: #008007; $p5-light-gutter: #f4f4f4; $p5-light-number: #b5b5b5; @@ -33,23 +33,23 @@ $p5-light-activeline: rgb(207, 207, 207); color: $p5-light-black; } -.cm-s-p5-light .cm-comment { +.cm-s-p5-light span .cm-comment { color: $p5-light-gray; } -.cm-s-p5-light .cm-def { +.cm-s-p5-light span .cm-def { color: $p5-light-lightblue; } -.cm-s-p5-light .cm-string { +.cm-s-p5-light span .cm-string { color: $p5-light-green; } -.cm-s-p5-light .cm-string-2 { +.cm-s-p5-light span .cm-string-2 { color: $p5-light-orange; } -.cm-s-p5-light .cm-number { +.cm-s-p5-light span .cm-number { color: $p5-light-black; } @@ -57,23 +57,23 @@ $p5-light-activeline: rgb(207, 207, 207); color: $p5-light-brown; } -.cm-s-p5-light .cm-variable { +.cm-s-p5-light span .cm-variable { color: $p5-light-lightblue; } -.cm-s-p5-light .cm-variable2 { +.cm-s-p5-light span .cm-variable2 { color: $p5-light-black; } -.cm-s-p5-light .cm-property { +.cm-s-p5-light span .cm-property { color: $p5-light-black; } -.cm-s-p5-light .cm-atom { +.cm-s-p5-light span .cm-atom { color: $p5-light-pink; } -.cm-s-p5-light .cm-operator { +.cm-s-p5-light span .cm-operator { color: $p5-light-lightbrown; } @@ -81,7 +81,7 @@ $p5-light-activeline: rgb(207, 207, 207); color: $p5-light-number; } -.cm-s-p5-light .CodeMirror-selected { +.cm-s-p5-light div .CodeMirror-selected { background-color: $p5-light-selected; } @@ -97,25 +97,25 @@ $p5-light-activeline: rgb(207, 207, 207); color: #f00; } -.cm-s-p5-light .CodeMirror-matchingbracket { +.cm-s-p5-light span .CodeMirror-matchingbracket { outline: 1px solid $p5-light-gray; outline-offset: 1px; color: $p5-light-black !important; } -.cm-s-p5-light .cm-qualifier { +.cm-s-p5-light span .cm-qualifier { color: $p5-light-lightblue; } -.cm-s-p5-light .cm-tag { +.cm-s-p5-light span .cm-tag { color: $p5-light-pink; } -.cm-s-p5-light .cm-builtin { +.cm-s-p5-light span .cm-builtin { color: $p5-light-lightblue; } -.cm-s-p5-light .cm-attribute { +.cm-s-p5-light span .cm-attribute { color: $p5-light-black; } From 642016a3b25ba0f25a09e1043077b6f771c59cce Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Tue, 21 Apr 2020 17:49:02 -0400 Subject: [PATCH 02/22] 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'); } } } From b70f49ffc54a799863ce43a052f7a16f65e31980 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 22 Apr 2020 16:52:47 -0400 Subject: [PATCH 03/22] Remove unused theme variables, redce the number of different grays, light theme WCAG updates --- client/components/Nav.jsx | 2 +- client/images/triangle-arrow-down.svg | 2 +- client/images/triangle-arrow-right.svg | 2 +- client/styles/abstracts/_placeholders.scss | 6 +-- client/styles/abstracts/_variables.scss | 49 +++++++++----------- client/styles/base/_base.scss | 8 ++++ client/styles/components/_about.scss | 8 ---- client/styles/components/_preview-frame.scss | 9 ---- client/utils/metaKey.js | 2 +- 9 files changed, 38 insertions(+), 50 deletions(-) diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx index 8e9cde7a..93c47fd2 100644 --- a/client/components/Nav.jsx +++ b/client/components/Nav.jsx @@ -281,7 +281,7 @@ class Nav extends React.PureComponent { onBlur={this.handleBlur} > Save - {metaKeyName}+s + {metaKeyName}+S } { this.props.project.id && this.props.user.authenticated && diff --git a/client/images/triangle-arrow-down.svg b/client/images/triangle-arrow-down.svg index a66e9ff6..47ab5d10 100644 --- a/client/images/triangle-arrow-down.svg +++ b/client/images/triangle-arrow-down.svg @@ -3,7 +3,7 @@ Created with Sketch. - + diff --git a/client/images/triangle-arrow-right.svg b/client/images/triangle-arrow-right.svg index a99148b2..222020a8 100644 --- a/client/images/triangle-arrow-right.svg +++ b/client/images/triangle-arrow-right.svg @@ -3,7 +3,7 @@ Created with Sketch. - + diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss index b5a08d7a..2694b3ed 100644 --- a/client/styles/abstracts/_placeholders.scss +++ b/client/styles/abstracts/_placeholders.scss @@ -110,7 +110,7 @@ @extend %toolbar-button; @include themify() { color: getThemifyVariable('primary-text-color'); - background-color: getThemifyVariable('modal-button-background-color'); + background-color: getThemifyVariable('preferences-button-background-color'); padding: 0; margin-bottom: #{28 / $base-font-size}rem; line-height: #{50 / $base-font-size}rem; @@ -126,7 +126,7 @@ } &:disabled:hover { cursor: not-allowed; - background-color: getThemifyVariable('modal-button-background-color'); + background-color: getThemifyVariable('preferences-button-background-color'); } } } @@ -176,7 +176,7 @@ cursor: pointer; &:hover { text-decoration: none; - color: getThemifyVariable('logo-color'); + color: getThemifyVariable('heavy-text-color'); } } } diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 2a9b290b..a8a58df7 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -13,6 +13,9 @@ $dodgerblue: #1E90FF; // $icon-hover-color: #333; $p5-contrast-pink: #FFA9D9; +$border-color: #B5B5B5; +$outline-color: #0F9DD7; + // Grayscale values $lightest: #FFF; // primary $lighter: #FBFBFB; @@ -21,7 +24,8 @@ $light: #F0F0F0; // primary $medium-light: #D9D9D9; $middle-light: #A6A6A6; -$middle-gray: #7D7D7D; // primary +// $middle-gray: #7D7D7D; // primary +$middle-gray: #747474; // primary $middle-dark: #666; $medium-dark: #4D4D4D; @@ -40,26 +44,24 @@ $themes: ( modal-button-color: $dark, heading-text-color: $dark, background-color: $lighter, - preview-placeholder-color: #dcdcdc, button-background-color: $light, button-color: $black, button-border-color: $middle-light, toolbar-button-color: $p5js-pink, - toolbar-button-background-color: $light, + toolbar-button-background-color: $medium-light, button-background-hover-color: $p5js-pink, button-background-active-color: #f10046, - button-nav-inactive-color: #a0a0a0, + button-nav-inactive-color: $middle-gray, button-hover-color: $white, button-active-color: $white, - modal-background-color: #f4f4f4, - modal-button-background-color: #e6e6e6, - modal-border-color: rgba(17, 17, 17, 0.3), - modal-border-selected-color: #B9D0E1, - icon-color: $medium-dark, - icon-hover-color: $p5js-pink, + modal-background-color: $light, + preferences-button-background-color: $medium-light, + modal-border-color: $middle-light, + icon-color: $middle-gray, + icon-hover-color: $darker, icon-toast-hover-color: $white, shadow-color: rgba(0, 0, 0, 0.16), - console-background-color: #eee, + console-background-color: $light, console-color: $white, console-header-background-color: $medium-light, console-header-color: $darker, @@ -71,24 +73,22 @@ $themes: ( 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, - search-background-color: #ffffff, - search-clear-background-color: #e9e9e9, - search-hover-text-color: #ffffff, - search-hover-background-color: #4d4d4d, + input-text-color: $dark, + input-border-color: $middle-light, + search-background-color: $lightest, + search-clear-background-color: $light, + search-hover-text-color: $lightest, + search-hover-background-color: $medium-dark, dropdown-color: #414141, - keyboard-shortcut-color: #757575, + keyboard-shortcut-color: $middle-gray, 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-color: $lightest, primary-button-background-color: $p5js-pink, table-button-color: $white, @@ -124,7 +124,6 @@ $themes: ( secondary-text-color: #DADADA, inactive-text-color: #b5b5b5, background-color: #333, - preview-placeholder-color: #dcdcdc, button-background-color: $white, button-color: $black, button-border-color: #979797, @@ -136,7 +135,7 @@ $themes: ( button-hover-color: $white, button-active-color: $white, modal-background-color: #444, - modal-button-background-color: #5f5f5f, + preferences-button-background-color: #5f5f5f, modal-border-color: #949494, icon-color: #a9a9a9, icon-hover-color: $white, @@ -156,7 +155,6 @@ $themes: ( file-selected-color: #404040, input-text-color: #333, input-border-color: #b5b5b5, - about-list-text-color: #f4f4f4, search-background-color: #ffffff, search-clear-background-color: #4f4f4f, search-hover-text-color: #ffffff, @@ -215,7 +213,7 @@ $themes: ( button-hover-color: #333333, button-active-color: #333333, modal-background-color: #444, - modal-button-background-color: #C1C1C1, + preferences-button-background-color: #C1C1C1, modal-border-color: #949494, icon-color: #d9d9d9, icon-hover-color: $yellow, @@ -235,7 +233,6 @@ $themes: ( file-selected-color: #404040, input-text-color: #333, input-border-color: #b5b5b5, - about-list-text-color: #f4f4f4, search-background-color: $white, search-clear-background-color: #444, search-hover-text-color: $black, diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss index c0d8a05c..7c0a10b1 100644 --- a/client/styles/base/_base.scss +++ b/client/styles/base/_base.scss @@ -87,3 +87,11 @@ thead { th { text-align: left; } + +a:focus, +button:focus, +input:focus, +textarea:focus { + outline: none; + box-shadow: 0 0 0 1px $outline-color; +} diff --git a/client/styles/components/_about.scss b/client/styles/components/_about.scss index 54929f04..66ff9ccd 100644 --- a/client/styles/components/_about.scss +++ b/client/styles/components/_about.scss @@ -45,11 +45,6 @@ padding-bottom: #{20 / $base-font-size}rem; padding-left: #{20 / $base-font-size}rem; width: #{720 / $base-font-size}rem; - & a { - @include themify() { - color: getThemifyVariable('form-navigation-options-color'); - } - } } .about__content-column { @@ -76,9 +71,6 @@ @include themify() { padding-top: #{10 / $base-font-size}rem; font-size: #{16 / $base-font-size}rem; - & a { - color: getThemifyVariable(about-list-text-color); - } } } diff --git a/client/styles/components/_preview-frame.scss b/client/styles/components/_preview-frame.scss index 31f12481..04443267 100644 --- a/client/styles/components/_preview-frame.scss +++ b/client/styles/components/_preview-frame.scss @@ -23,15 +23,6 @@ display: none; } -.preview-frame-placeholder { - width: #{400 / $base-font-size}rem; - height: #{400 / $base-font-size}rem; - position: absolute; - @include themify() { - background: getThemifyVariable('preview-placeholder-color'); - } -} - .preview-frame__header { height: #{29 / $base-font-size}rem; } diff --git a/client/utils/metaKey.js b/client/utils/metaKey.js index 47899976..e8c45eed 100644 --- a/client/utils/metaKey.js +++ b/client/utils/metaKey.js @@ -8,7 +8,7 @@ const metaKey = (() => { return 'Ctrl'; })(); -const metaKeyName = metaKey === 'Cmd' ? '\u2318' : 'Ctrl'; +const metaKeyName = metaKey === 'Cmd' ? '⌘' : '⌃'; export { metaKey, From 7c54b71002f45fc4f45826439faa7b8e0dec0acf Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 22 Apr 2020 17:06:05 -0400 Subject: [PATCH 04/22] Fix right nav items alignment --- client/components/Nav.jsx | 6 +++--- client/styles/components/_nav.scss | 17 +++++++++++------ 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx index 93c47fd2..a34b9e46 100644 --- a/client/components/Nav.jsx +++ b/client/components/Nav.jsx @@ -541,13 +541,13 @@ class Nav extends React.PureComponent { return (
  • - + Log in
    • - or + or
  • - + Sign up
    • diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss index ab7414fc..f63ef9ad 100644 --- a/client/styles/components/_nav.scss +++ b/client/styles/components/_nav.scss @@ -44,15 +44,10 @@ } } -.nav__item:first-child, .nav__item--no-icon { padding-left: #{15 / $base-font-size}rem; } -.nav__item:last-child { - padding-right: #{15 / $base-font-size}rem; -} - .nav__item-header-triangle polygon { @include themify() { fill: getThemifyVariable('icon-color'); @@ -123,10 +118,20 @@ .nav__item-spacer { @include themify() { color: map-get($theme-map, 'inactive-text-color'); - margin: 0 #{8 / $base-font-size}rem; + margin-left: #{8 / $base-font-size}rem; } } +.nav__item-or { + @include themify() { + color: map-get($theme-map, 'inactive-text-color'); + } +} + +.nav__auth-button { + padding: #{10 / $base-font-size}rem; +} + // .nav__dropdown button { // padding: 0; // } From e8c3587b41f285ace0a23b6dbe018d05862eec9b Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 22 Apr 2020 17:45:48 -0400 Subject: [PATCH 05/22] Move all light theme variables to new design grayscale --- client/styles/abstracts/_placeholders.scss | 4 ++-- client/styles/abstracts/_variables.scss | 19 ++++++++++--------- client/styles/components/_asset-list.scss | 2 +- .../components/_collection-popover.scss | 2 +- client/styles/components/_sketch-list.scss | 2 +- 5 files changed, 15 insertions(+), 14 deletions(-) diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss index 2694b3ed..fb8131ce 100644 --- a/client/styles/abstracts/_placeholders.scss +++ b/client/styles/abstracts/_placeholders.scss @@ -186,7 +186,7 @@ background-color: map-get($theme-map, 'modal-background-color'); border: 1px solid map-get($theme-map, 'modal-border-color'); box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color'); - color: getThemifyVariable('dropdown-color'); + color: getThemifyVariable('primary-text-color'); } text-align: left; width: #{180 / $base-font-size}rem; @@ -207,7 +207,7 @@ & button, & a { @include themify() { - color: getThemifyVariable('dropdown-color'); + color: getThemifyVariable('primary-text-color'); } width: 100%; text-align: left; diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index a8a58df7..b76098d5 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -3,6 +3,7 @@ $base-font-size: 12; //colors $p5js-pink: #ed225d; $processing-blue: #007BBB; +$p5js-active-pink: #f10046; $white: #fff; $black: #000; $yellow: #F5DC23; @@ -50,7 +51,7 @@ $themes: ( toolbar-button-color: $p5js-pink, toolbar-button-background-color: $medium-light, button-background-hover-color: $p5js-pink, - button-background-active-color: #f10046, + button-background-active-color: $p5js-active-pink, button-nav-inactive-color: $middle-gray, button-hover-color: $white, button-active-color: $white, @@ -79,12 +80,12 @@ $themes: ( search-clear-background-color: $light, search-hover-text-color: $lightest, search-hover-background-color: $medium-dark, - dropdown-color: #414141, + dropdown-color: $dark, keyboard-shortcut-color: $middle-gray, nav-hover-color: $p5js-pink, nav-border-color: $middle-light, error-color: $p5js-pink, - table-row-stripe-color: #d6d6d6, + table-row-stripe-color: $medium-light, codefold-icon-open: url(../images/triangle-arrow-down.svg), codefold-icon-closed: url(../images/triangle-arrow-right.svg), @@ -92,24 +93,24 @@ $themes: ( primary-button-background-color: $p5js-pink, table-button-color: $white, - table-button-background-color: #979797, + table-button-background-color: $middle-gray, table-button-active-color: $white, table-button-background-active-color: #00A1D3, table-button-hover-color: $white, table-button-background-hover-color: $p5js-pink, - progress-bar-background-color: #979797, - progress-bar-active-color: #f10046, + progress-bar-background-color: $middle-gray, + progress-bar-active-color: $p5js-active-pink, form-title-color: rgba(51, 51, 51, 0.87), form-secondary-title-color: $middle-dark, form-input-text-color: $dark, form-input-placeholder-text-color: $middle-light, - form-border-color: #b5b5b5, + form-border-color: $middle-light, form-button-background-color: $white, - form-button-color: #f10046, + form-button-color: $p5js-active-pink, form-button-background-hover-color: $p5js-pink, - form-button-background-active-color: #f10046, + form-button-background-active-color: $p5js-active-pink, form-button-hover-color: $white, form-button-active-color: $white, form-navigation-options-color: $middle-dark diff --git a/client/styles/components/_asset-list.scss b/client/styles/components/_asset-list.scss index 335fc7bf..c0cd524d 100644 --- a/client/styles/components/_asset-list.scss +++ b/client/styles/components/_asset-list.scss @@ -83,7 +83,7 @@ @include themify() { & polygon { - fill: getThemifyVariable('dropdown-color'); + fill: getThemifyVariable('inactive-text-color'); } } } diff --git a/client/styles/components/_collection-popover.scss b/client/styles/components/_collection-popover.scss index 2d5db110..a9176c9e 100644 --- a/client/styles/components/_collection-popover.scss +++ b/client/styles/components/_collection-popover.scss @@ -16,7 +16,7 @@ background-color: map-get($theme-map, 'modal-background-color'); border: 1px solid map-get($theme-map, 'modal-border-color'); box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color'); - color: getThemifyVariable('dropdown-color'); + color: getThemifyVariable('primary-text-color'); } text-align: left; diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss index 87162305..bc3c0724 100644 --- a/client/styles/components/_sketch-list.scss +++ b/client/styles/components/_sketch-list.scss @@ -96,7 +96,7 @@ height:#{25 / $base-font-size}rem; @include themify() { & polygon { - fill: getThemifyVariable('dropdown-color'); + fill: getThemifyVariable('inactive-text-color'); } } } From 3461c9619e96213fd8b34e45e6588174207dc876 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 22 Apr 2020 18:31:04 -0400 Subject: [PATCH 06/22] Update dark theme colors --- client/images/triangle-arrow-down-white.svg | 2 +- client/styles/abstracts/_variables.scss | 76 +++++++++---------- client/styles/components/_console.scss | 2 +- .../components/_p5-dark-codemirror-theme.scss | 2 +- 4 files changed, 41 insertions(+), 41 deletions(-) diff --git a/client/images/triangle-arrow-down-white.svg b/client/images/triangle-arrow-down-white.svg index a66e9ff6..75fd5567 100644 --- a/client/images/triangle-arrow-down-white.svg +++ b/client/images/triangle-arrow-down-white.svg @@ -3,7 +3,7 @@ Created with Sketch. - + diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index b76098d5..3996fc97 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -53,17 +53,17 @@ $themes: ( button-background-hover-color: $p5js-pink, button-background-active-color: $p5js-active-pink, button-nav-inactive-color: $middle-gray, - button-hover-color: $white, - button-active-color: $white, + button-hover-color: $lightest, + button-active-color: $lightest, modal-background-color: $light, preferences-button-background-color: $medium-light, modal-border-color: $middle-light, icon-color: $middle-gray, icon-hover-color: $darker, - icon-toast-hover-color: $white, + icon-toast-hover-color: $lightest, shadow-color: rgba(0, 0, 0, 0.16), console-background-color: $light, - console-color: $white, + console-color: $lightest, console-header-background-color: $medium-light, console-header-color: $darker, console-info-background-color: $lightsteelblue, @@ -92,11 +92,11 @@ $themes: ( primary-button-color: $lightest, primary-button-background-color: $p5js-pink, - table-button-color: $white, + table-button-color: $lightest, table-button-background-color: $middle-gray, - table-button-active-color: $white, + table-button-active-color: $lightest, table-button-background-active-color: #00A1D3, - table-button-hover-color: $white, + table-button-hover-color: $lightest, table-button-background-hover-color: $p5js-pink, progress-bar-background-color: $middle-gray, @@ -107,51 +107,51 @@ $themes: ( form-input-text-color: $dark, form-input-placeholder-text-color: $middle-light, form-border-color: $middle-light, - form-button-background-color: $white, + form-button-background-color: $lightest, form-button-color: $p5js-active-pink, form-button-background-hover-color: $p5js-pink, form-button-background-active-color: $p5js-active-pink, - form-button-hover-color: $white, - form-button-active-color: $white, + form-button-hover-color: $lightest, + form-button-active-color: $lightest, form-navigation-options-color: $middle-dark ), dark: ( logo-color: $p5js-pink, heavy-text-color: $lightest, - primary-text-color: $white, + primary-text-color: $lightest, dropzone-text-color: $black, - modal-button-color: $white, - heading-text-color: $white, - secondary-text-color: #DADADA, - inactive-text-color: #b5b5b5, - background-color: #333, - button-background-color: $white, - button-color: $black, - button-border-color: #979797, + modal-button-color: $lightest, + heading-text-color: $lightest, + secondary-text-color: $medium-light, + inactive-text-color: $middle-light, + background-color: $darker, + button-background-color: $lightest, + button-color: $darkest, + button-border-color: $middle-gray, toolbar-button-color: $p5js-pink, - toolbar-button-background-color: #424242, + toolbar-button-background-color: $medium-dark, button-background-hover-color: $p5js-pink, - button-background-active-color: #f10046, - button-nav-inactive-color: #a0a0a0, - button-hover-color: $white, - button-active-color: $white, - modal-background-color: #444, - preferences-button-background-color: #5f5f5f, - modal-border-color: #949494, - icon-color: #a9a9a9, - icon-hover-color: $white, - icon-toast-hover-color: $white, + button-background-active-color: $p5js-active-pink, + button-nav-inactive-color: $middle-light, + button-hover-color: $lightest, + button-active-color: $lightest, + modal-background-color: $dark, + preferences-button-background-color: $middle-dark, + modal-border-color: $middle-dark, + icon-color: $middle-light, + icon-hover-color: $lightest, + icon-toast-hover-color: $lightest, 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-background-color: $dark, + console-color: $lightest, + console-header-background-color: $medium-dark, + console-header-color: $lightest, console-info-background-color: $lightsteelblue, console-warn-background-color: $orange, console-debug-background-color: $dodgerblue, console-error-background-color: $red, - ide-border-color: #949494, - editor-gutter-color: #363636, + ide-border-color: $middle-dark, + editor-gutter-color: $darker, file-hover-color: #404040, file-selected-color: #404040, input-text-color: #333, @@ -173,13 +173,13 @@ $themes: ( primary-button-background-color: $p5js-pink, table-button-color: $white, - table-button-background-color: #979797, + table-button-background-color: $middle-gray, table-button-active-color: $white, table-button-background-active-color: #00A1D3, table-button-hover-color: $white, table-button-background-hover-color: $p5js-pink, - progress-bar-background-color: #979797, + progress-bar-background-color: $middle-gray, progress-bar-active-color: #f10046, form-title-color: $white, diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss index 16999c9e..04374947 100644 --- a/client/styles/components/_console.scss +++ b/client/styles/components/_console.scss @@ -78,7 +78,7 @@ .preview-console__clear { @include themify() { @extend %link; - color: getThemifyVariable('primary-text-color'); + color: getThemifyVariable('inactive-text-color'); // &:hover { // color: getThemifyVariable('console-header-color'); // } diff --git a/client/styles/components/_p5-dark-codemirror-theme.scss b/client/styles/components/_p5-dark-codemirror-theme.scss index bd073941..6cc3b074 100644 --- a/client/styles/components/_p5-dark-codemirror-theme.scss +++ b/client/styles/components/_p5-dark-codemirror-theme.scss @@ -12,7 +12,7 @@ $p5-dark-lightbrown: #A67F59; $p5-light-green: #42F48F; -$p5-dark-black: #333; +$p5-dark-black: #1C1C1C; $p5-dark-pink: #D9328F; $p5-dark-gray: #999999; $p5-dark-lightblue: #0F9DD7; From b16f628352e4605b261bfc6938e1f45009b467a5 Mon Sep 17 00:00:00 2001 From: shakti97 Date: Fri, 24 Apr 2020 00:29:33 +0530 Subject: [PATCH 07/22] Enhancement(Esc key hide modal) --- client/modules/IDE/pages/IDEView.jsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index 2b0fd714..eba7b76c 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -170,6 +170,14 @@ class IDEView extends React.Component { } else { this.props.expandConsole(); } + } else if (e.keyCode === 27) { + if (this.props.ide.newFolderModalVisible) { + this.props.closeNewFolderModal(); + } else if (this.props.ide.uploadFileModalVisible) { + this.props.closeUploadFileModal(); + } else if (this.props.ide.modalIsVisible) { + this.props.closeNewFileModal(); + } } } @@ -562,6 +570,7 @@ IDEView.propTypes = { closeProjectOptions: PropTypes.func.isRequired, newFolder: PropTypes.func.isRequired, closeNewFolderModal: PropTypes.func.isRequired, + closeNewFileModal: PropTypes.func.isRequired, createFolder: PropTypes.func.isRequired, closeShareModal: PropTypes.func.isRequired, showEditorOptions: PropTypes.func.isRequired, From 6b11adf88b88a8e78121acc7d60122b9d2c9330c Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 23 Apr 2020 20:25:39 -0400 Subject: [PATCH 08/22] Continue to update dark theme, remove many unused theme variables --- client/styles/abstracts/_variables.scss | 63 ++++++++-------------- client/styles/base/_base.scss | 1 + client/styles/components/_console.scss | 14 ++++- client/styles/components/_forms.scss | 1 + client/styles/components/_preferences.scss | 3 +- 5 files changed, 38 insertions(+), 44 deletions(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 3996fc97..b62b7c8d 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -75,12 +75,12 @@ $themes: ( file-hover-color: $light, file-selected-color: $medium-light, input-text-color: $dark, + input-background-color: $lightest, input-border-color: $middle-light, search-background-color: $lightest, search-clear-background-color: $light, search-hover-text-color: $lightest, search-hover-background-color: $medium-dark, - dropdown-color: $dark, keyboard-shortcut-color: $middle-gray, nav-hover-color: $p5js-pink, nav-border-color: $middle-light, @@ -103,16 +103,9 @@ $themes: ( progress-bar-active-color: $p5js-active-pink, form-title-color: rgba(51, 51, 51, 0.87), - form-secondary-title-color: $middle-dark, + form-secondary-title-color: $medium-dark, form-input-text-color: $dark, form-input-placeholder-text-color: $middle-light, - form-border-color: $middle-light, - form-button-background-color: $lightest, - form-button-color: $p5js-active-pink, - form-button-background-hover-color: $p5js-pink, - form-button-background-active-color: $p5js-active-pink, - form-button-hover-color: $lightest, - form-button-active-color: $lightest, form-navigation-options-color: $middle-dark ), dark: ( @@ -152,46 +145,39 @@ $themes: ( console-error-background-color: $red, ide-border-color: $middle-dark, editor-gutter-color: $darker, - file-hover-color: #404040, - file-selected-color: #404040, - input-text-color: #333, - input-border-color: #b5b5b5, - search-background-color: #ffffff, - search-clear-background-color: #4f4f4f, - search-hover-text-color: #ffffff, + file-hover-color: $dark, + file-selected-color: $medium-dark, + input-text-color: $lightest, + input-background-color: $dark, + input-border-color: $middle-dark, + search-background-color: $lightest, + search-clear-background-color: $medium-dark, + search-hover-text-color: $lightest, search-hover-background-color: $p5js-pink, - dropdown-color: #dadada, - keyboard-shortcut-color: #B5B5B5, + keyboard-shortcut-color: $middle-light, nav-hover-color: $p5js-pink, nav-border-color: $middle-dark, error-color: $p5js-pink, - table-row-stripe-color: #3f3f3f, + table-row-stripe-color: $dark, codefold-icon-open: url(../images/triangle-arrow-down-white.svg), codefold-icon-closed: url(../images/triangle-arrow-right-white.svg), - primary-button-color: #fff, + primary-button-color: $lightest, primary-button-background-color: $p5js-pink, - table-button-color: $white, + table-button-color: $lightest, table-button-background-color: $middle-gray, - table-button-active-color: $white, + table-button-active-color: $lightest, table-button-background-active-color: #00A1D3, - table-button-hover-color: $white, + table-button-hover-color: $lightest, table-button-background-hover-color: $p5js-pink, progress-bar-background-color: $middle-gray, - progress-bar-active-color: #f10046, + progress-bar-active-color: $p5js-active-pink, - form-title-color: $white, - form-secondary-title-color: #b5b5b5, - form-border-color: #b5b5b5, - form-button-background-color: $black, - 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-title-color: $lightest, + form-secondary-title-color: $medium-light, + form-navigation-options-color: $middle-light ), contrast: ( logo-color: $yellow, @@ -233,12 +219,12 @@ $themes: ( file-hover-color: #404040, file-selected-color: #404040, input-text-color: #333, + input-background-color: $lightest, input-border-color: #b5b5b5, search-background-color: $white, search-clear-background-color: #444, search-hover-text-color: $black, search-hover-background-color: $yellow, - dropdown-color: #e1e1e1, keyboard-shortcut-color: #e1e1e1, nav-hover-color: $yellow, nav-border-color: $middle-dark, @@ -262,13 +248,6 @@ $themes: ( form-title-color: $white, form-secondary-title-color: #b5b5b5, - form-border-color: #b5b5b5, - form-button-background-color: $black, - form-button-color: #f10046, - form-button-background-hover-color: $p5-contrast-pink, - form-button-background-active-color: #f10046, - form-button-hover-color: $white, - form-button-active-color: $white, form-navigation-options-color: #999999 ) ); diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss index 7c0a10b1..94b3d55a 100644 --- a/client/styles/base/_base.scss +++ b/client/styles/base/_base.scss @@ -39,6 +39,7 @@ textarea { padding: #{10 / $base-font-size}rem; @include themify() { color: getThemifyVariable('input-text-color'); + background-color: getThemifyVariable('input-background-color'); border-color: getThemifyVariable('input-border-color'); } } diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss index 04374947..411406eb 100644 --- a/client/styles/components/_console.scss +++ b/client/styles/components/_console.scss @@ -56,6 +56,12 @@ .preview-console__collapse { padding-top: #{3 / $base-font-size}rem; @include icon(); + @include themify() { + & g, + & polygon { + fill: getThemifyVariable('secondary-text-color'); + } + } .preview-console--collapsed & { display: none; } @@ -64,6 +70,12 @@ .preview-console__expand { padding-top: #{3 / $base-font-size}rem; @include icon(); + @include themify() { + & g, + & polygon { + fill: getThemifyVariable('secondary-text-color'); + } + } display: none; .preview-console--collapsed & { display: inline-block; @@ -78,7 +90,7 @@ .preview-console__clear { @include themify() { @extend %link; - color: getThemifyVariable('inactive-text-color'); + // color: getThemifyVariable('inactive-text-color'); // &:hover { // color: getThemifyVariable('console-header-color'); // } diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss index 8f3ade0e..a3f28be9 100644 --- a/client/styles/components/_forms.scss +++ b/client/styles/components/_forms.scss @@ -53,6 +53,7 @@ font-size: #{16 / $base-font-size}rem; @include themify() { color: getThemifyVariable('form-input-text-color'); + background-color: getThemifyVariable('input-background-color'); } } diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index e65cfa40..6cc218fe 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -104,8 +104,9 @@ @include themify() { border: #{1 / $base-font-size}rem solid getThemifyVariable("button-border-color"); - background-color: getThemifyVariable("button-background-color"); + // background-color: getThemifyVariable("button-background-color"); color: getThemifyVariable("input-text-color"); + background-color: getThemifyVariable('input-background-color'); } text-align: center; border-radius: 0%; From c6f946dbfd05fb13a45eea9f2c931ac64cf8b206 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 23 Apr 2020 20:31:00 -0400 Subject: [PATCH 09/22] Adjust size of file name input, start updaing high contrast theme --- client/styles/abstracts/_variables.scss | 2 +- client/styles/components/_sidebar.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index b62b7c8d..272be3f3 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -188,7 +188,7 @@ $themes: ( heading-text-color: #e1e1e1, secondary-text-color: #e1e1e1, inactive-text-color: #f2f2f2, - background-color: #333, + background-color: $darker, button-background-color: $white, button-color: $black, button-border-color: #979797, diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss index 4d120dee..3ea29059 100644 --- a/client/styles/components/_sidebar.scss +++ b/client/styles/components/_sidebar.scss @@ -173,7 +173,7 @@ display: none; padding: 0; border: 0; - width: calc(100% - #{100 / $base-font-size}rem); + width: calc(100% - #{63 / $base-font-size}rem); .sidebar__file-item--editing & { display: inline-block; } From a0d6b71f217b68d74701f376c9b6e21e05402265 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 23 Apr 2020 20:35:33 -0400 Subject: [PATCH 10/22] Update dark code theme --- client/styles/components/_p5-dark-codemirror-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/styles/components/_p5-dark-codemirror-theme.scss b/client/styles/components/_p5-dark-codemirror-theme.scss index 6cc3b074..d9091bf8 100644 --- a/client/styles/components/_p5-dark-codemirror-theme.scss +++ b/client/styles/components/_p5-dark-codemirror-theme.scss @@ -13,7 +13,7 @@ $p5-dark-lightbrown: #A67F59; $p5-light-green: #42F48F; $p5-dark-black: #1C1C1C; -$p5-dark-pink: #D9328F; +$p5-dark-pink: #DE4A9B; $p5-dark-gray: #999999; $p5-dark-lightblue: #0F9DD7; $p5-dark-darkblue: #318094; From edb5187e03b1cf5c52d8e536572abe732d950beb Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Fri, 24 Apr 2020 18:34:26 -0400 Subject: [PATCH 11/22] Update high contrast theme --- client/components/PreviewNav.jsx | 2 +- client/styles/abstracts/_variables.scss | 83 +++++++++---------- client/styles/components/_api-key.scss | 9 -- client/styles/components/_nav.scss | 16 ++-- .../_p5-contrast-codemirror-theme.scss | 2 +- client/styles/components/_preferences.scss | 22 ----- client/styles/components/_searchbar.scss | 2 +- client/styles/components/_sidebar.scss | 2 +- 8 files changed, 52 insertions(+), 86 deletions(-) diff --git a/client/components/PreviewNav.jsx b/client/components/PreviewNav.jsx index 7169621d..8afdcb9d 100644 --- a/client/components/PreviewNav.jsx +++ b/client/components/PreviewNav.jsx @@ -10,7 +10,7 @@ const PreviewNav = ({ owner, project }) => (