From b70f49ffc54a799863ce43a052f7a16f65e31980 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 22 Apr 2020 16:52:47 -0400 Subject: [PATCH] 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,