From 2a4f963b86ca95473b780627a3dea6a12db94588 Mon Sep 17 00:00:00 2001 From: Sandy McFadden Date: Tue, 27 Apr 2021 08:19:50 -0300 Subject: [PATCH 1/2] Define first set of css properties for light mode Update most uses of -white to use --primary-color in light mode Update uses of -gray-50, 40, 60 to --secondary-color in light mode Update uses of -gray-80 to be --tertiary-color Update uses of -simplenote-blue-50 to be --accent-color Update uses of white and hex value to be --primary-color in light mode Update uses of -simplenote-blue-5 to be --highlight-color in light mode Following a WordPress example renaming new css variables. Starting with --primary-color to --background-color Following a WordPress example renaming new css variables. --secondary-color to --foreground-color Following a WordPress example renaming new css variables. --tertiary-color to --primary-color Update uses of -gray-5 to be --secondary-color in light mode Update uses of -gray-20 to be --tertiary-color in light mode Update overlay colors to use --overlay-color in light mode Fix a couple of small CSS lint errors. --- lib/alternate-login-prompt/style.scss | 4 +- lib/app-layout/style.scss | 4 +- lib/auth/style.scss | 40 +++++++++---------- lib/components/dev-badge/style.scss | 4 +- lib/components/progress-bar/style.scss | 4 +- lib/components/slider/style.scss | 28 ++++++------- lib/components/spinner/style.scss | 4 +- lib/components/tab-panels/style.scss | 8 +++- lib/components/tag-chip/style.scss | 6 +-- lib/controls/checkbox/style.scss | 4 +- lib/controls/toggle/style.scss | 2 +- lib/dialog-renderer/style.scss | 2 +- lib/dialog/style.scss | 4 +- lib/dialogs/about/style.scss | 10 ++--- lib/dialogs/import/dropzone/style.scss | 10 ++--- .../source-importer/executor/style.scss | 4 +- lib/dialogs/import/source-importer/style.scss | 4 +- lib/dialogs/settings/style.scss | 6 +-- lib/dialogs/share/style.scss | 4 +- lib/dialogs/unsynchronized/style.scss | 14 +++---- lib/email-verification/style.scss | 4 +- lib/error-boundary/style.scss | 4 +- lib/icon-button/style.scss | 2 +- lib/icons/style.scss | 4 +- lib/menu-bar/style.scss | 2 +- lib/navigation-bar/item/style.scss | 6 +-- lib/note-actions/style.scss | 4 +- lib/note-detail/style.scss | 18 ++++----- lib/note-list/style.scss | 16 ++++---- lib/note-toolbar/style.scss | 8 ++-- lib/revision-selector/style.scss | 12 +++--- lib/search-results-bar/style.scss | 6 +-- lib/tag-email-tooltip/style.scss | 2 +- lib/tag-input/style.scss | 4 +- lib/tag-list/style.scss | 8 ++-- lib/tag-suggestions/style.scss | 2 +- scss/_general.scss | 4 +- scss/_scrollbar.scss | 2 +- scss/_variables.scss | 14 +++++++ scss/buttons.scss | 10 ++--- scss/inputs.scss | 2 +- scss/theme.scss | 22 +++++----- 42 files changed, 170 insertions(+), 152 deletions(-) diff --git a/lib/alternate-login-prompt/style.scss b/lib/alternate-login-prompt/style.scss index 5b34afc87..a24683bf2 100644 --- a/lib/alternate-login-prompt/style.scss +++ b/lib/alternate-login-prompt/style.scss @@ -7,7 +7,7 @@ display: flex; justify-content: center; align-items: center; - background: rgba($studio-black, 0.3); + background: var(--overlay-color); } .alternate-login__dismiss { @@ -62,7 +62,7 @@ padding-right: 12px; } .button-borderless { - color: $studio-simplenote-blue-50; + color: var(--accent-color); } } diff --git a/lib/app-layout/style.scss b/lib/app-layout/style.scss index f89bb2583..1d524b419 100644 --- a/lib/app-layout/style.scss +++ b/lib/app-layout/style.scss @@ -32,7 +32,7 @@ &::before { content: ''; - background-color: rgba($studio-black, 0.2); + background-color: var(--overlay-color); display: block; height: 100%; left: 0; @@ -85,7 +85,7 @@ animation: pulse 2s infinite ease-in-out; path { - fill: $studio-gray-5; + fill: var(--secondary-color); } } diff --git a/lib/auth/style.scss b/lib/auth/style.scss index c14d78472..b57cc7d9a 100644 --- a/lib/auth/style.scss +++ b/lib/auth/style.scss @@ -49,11 +49,11 @@ input, button[type='submit'] { - background-color: $studio-white; + background-color: var(--background-color); border: solid 1px $studio-gray-10; border-radius: 4px; box-sizing: border-box; - color: $studio-gray-80; + color: var(--primary-color); display: block; height: 40px; padding: 11px 15px; @@ -65,8 +65,8 @@ } input:disabled { - border-color: $studio-gray-5; - color: $studio-gray-20; + border-color: var(--secondary-color); + color: var(--tertiary-color); } input:read-only { @@ -75,8 +75,8 @@ } input:focus { - border-color: $studio-simplenote-blue-50; - box-shadow: 0 0 0 1px $studio-simplenote-blue-50; + border-color: var(--accent-color); + box-shadow: 0 0 0 1px var(--accent-color); outline: none; } @@ -85,23 +85,23 @@ } button[type='submit'] { - background-color: $studio-simplenote-blue-50; + background-color: var(--accent-color); border: none; - color: $studio-white; + color: var(--background-color); font-weight: 500; margin: 16px auto 8px; padding: 0 15px 2px; } a.login__forgot { - color: $studio-gray-50; + color: var(--foreground-color); text-decoration: none; } .login__forgot, .login__signup, .terms { - color: $studio-gray-50; + color: var(--foreground-color); display: block; font-size: 14px; margin: 16px auto; @@ -112,15 +112,15 @@ .login__signup a, .login__auth-message a, .terms a { - color: $studio-simplenote-blue-50; + color: var(--accent-color); margin-left: 5px; text-decoration: none; white-space: nowrap; } .or { - background: $studio-white; - color: $studio-gray-50; + background: var(--background-color); + color: var(--foreground-color); display: block; font-size: 15px; font-style: italic; @@ -133,7 +133,7 @@ } .or-line { - border-bottom: 1px solid $studio-gray-5; + border-bottom: 1px solid var(--secondary-color); margin: -20px auto; max-width: 320px; text-align: center; @@ -146,7 +146,7 @@ background-color: $studio-wordpress-blue-50; border-radius: 4px; box-sizing: border-box; - color: $studio-white; + color: var(--background-color); display: block; font-size: 16px; font-weight: 500; @@ -167,7 +167,7 @@ width: 320px; svg.icon-mail { - color: $studio-gray-50; + color: var(--foreground-color); width: 60px; height: 60px; } @@ -206,22 +206,22 @@ body[data-theme='dark'] .login { color: $studio-gray-20; } .or-line { - border-color: $studio-gray-80; + border-color: var(--primary-color); } svg.icon-mail { color: $studio-gray-30; } input { - border-color: $studio-gray-50; + border-color: var(--foreground-color); &:disabled { - color: $studio-gray-50; + color: var(--foreground-color); border-color: $studio-gray-70; } &:read-only { - border-color: $studio-gray-50; + border-color: var(--foreground-color); background-color: rgba(255, 255, 255, 0.07); } diff --git a/lib/components/dev-badge/style.scss b/lib/components/dev-badge/style.scss index 924a74084..9711236ae 100644 --- a/lib/components/dev-badge/style.scss +++ b/lib/components/dev-badge/style.scss @@ -5,8 +5,8 @@ right: 12px; bottom: 12px; padding: 2px 4px; - background: $studio-gray-5; - color: $studio-gray-80; + background: var(--secondary-color); + color: var(--primary-color); font-size: 0.75rem; line-height: 1; } diff --git a/lib/components/progress-bar/style.scss b/lib/components/progress-bar/style.scss index 91bcbe997..1cf9195c2 100644 --- a/lib/components/progress-bar/style.scss +++ b/lib/components/progress-bar/style.scss @@ -1,6 +1,6 @@ .progress-bar { @at-root body[data-theme='light'] & { - background-color: $studio-gray-5; + background-color: var(--secondary-color); } @at-root body[data-theme='dark'] & { background-color: $studio-gray-80; @@ -8,5 +8,5 @@ } .progress-bar__bar { - background-color: $studio-gray-50 !important; + background-color: var(--foreground-color) !important; } diff --git a/lib/components/slider/style.scss b/lib/components/slider/style.scss index f105936fa..21c4d5af3 100644 --- a/lib/components/slider/style.scss +++ b/lib/components/slider/style.scss @@ -108,36 +108,36 @@ body[data-theme='light'] { .slider { // Track &::-webkit-slider-runnable-track { - background: $studio-gray-5; + background: var(--secondary-color); } &::-moz-range-track { - background: $studio-gray-5; + background: var(--secondary-color); } &::-ms-track { - border-color: $studio-gray-5; + border-color: var(--secondary-color); } &::-ms-fill-lower { - background: $studio-white; + background: var(--background-color); } &::-ms-fill-upper { - background: $studio-white; + background: var(--background-color); } // Thumb &::-webkit-slider-thumb { - border-color: $studio-gray-5; - background: $studio-white; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); + border-color: var(--secondary-color); + background: var(--background-color); + box-shadow: 0 1px 3px 0 var(--overlay-color); } &::-moz-range-thumb { - background: $studio-white; - border-color: $studio-gray-5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); + background: var(--background-color); + border-color: var(--secondary-color); + box-shadow: 0 1px 3px 0 var(--overlay-color); } &::-ms-thumb { - border-color: $studio-gray-5; - background: $studio-white; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); + border-color: var(--secondary-color); + background: var(--background-color); + box-shadow: 0 1px 3px 0 var(--overlay-color); } } } diff --git a/lib/components/spinner/style.scss b/lib/components/spinner/style.scss index 0b5100ea6..f5c9e8400 100644 --- a/lib/components/spinner/style.scss +++ b/lib/components/spinner/style.scss @@ -1,12 +1,12 @@ .spinner__circle { @at-root body[data-theme='light'] & { - color: $studio-gray-5; + color: var(--secondary-color); } @at-root body[data-theme='dark'] & { color: $studio-gray-80; } &.is-white { - color: $studio-white; + color: var(--background-color); } } diff --git a/lib/components/tab-panels/style.scss b/lib/components/tab-panels/style.scss index b99becc4c..e6cbefc08 100644 --- a/lib/components/tab-panels/style.scss +++ b/lib/components/tab-panels/style.scss @@ -11,7 +11,7 @@ margin: 0 0.5em; border-bottom: 2px solid; padding: 0.75em; - color: $studio-gray-80; + color: var(--primary-color); text-transform: capitalize; border-radius: 0; @@ -19,8 +19,12 @@ border-bottom-color: transparent; } + &.is-active { + color: var(--accent-color); + border-bottom-color: var(--accent-color); + } &:active { - color: $studio-white; + color: var(--background-color); } } } diff --git a/lib/components/tag-chip/style.scss b/lib/components/tag-chip/style.scss index a078c9644..1c5a42f7b 100644 --- a/lib/components/tag-chip/style.scss +++ b/lib/components/tag-chip/style.scss @@ -5,7 +5,7 @@ border-radius: 16px; line-height: 1.25em; white-space: nowrap; - background: $studio-gray-5; + background: var(--secondary-color); text-decoration: none; font-size: 14px; position: relative; @@ -29,8 +29,8 @@ .remove-tag-icon { display: none; position: absolute; - background-color: $studio-gray-50; - color: $studio-white; + background-color: var(--foreground-color); + color: var(--background-color); border-radius: 50%; top: -8px; width: 16px; diff --git a/lib/controls/checkbox/style.scss b/lib/controls/checkbox/style.scss index fc58f6e77..8c4a79ae6 100644 --- a/lib/controls/checkbox/style.scss +++ b/lib/controls/checkbox/style.scss @@ -45,7 +45,7 @@ $checkbox-sprite: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5 pointer-events: none; border-radius: 50%; overflow: hidden; - border: 1px solid $studio-gray-5; + border: 1px solid var(--secondary-color); } .checkbox-control-checked { @@ -73,7 +73,7 @@ $checkbox-sprite: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5 background-size: 36px 36px; border-radius: 0; border: 0; - fill: $studio-gray-50; + fill: var(--foreground-color); } .checkbox-control-base { background-position: 0 0; diff --git a/lib/controls/toggle/style.scss b/lib/controls/toggle/style.scss index 1991d2161..38c9f3bae 100644 --- a/lib/controls/toggle/style.scss +++ b/lib/controls/toggle/style.scss @@ -64,7 +64,7 @@ $toggle-control-knob-size: $toggle-control-height - $toggle-control-knob-margin display: block; width: $toggle-control-knob-size; height: $toggle-control-knob-size; - background: white; + background: var(--background-color); border-radius: $toggle-control-height * 0.5; transform: translate( $toggle-control-knob-margin, diff --git a/lib/dialog-renderer/style.scss b/lib/dialog-renderer/style.scss index e1f2332d8..7aef6088b 100644 --- a/lib/dialog-renderer/style.scss +++ b/lib/dialog-renderer/style.scss @@ -7,7 +7,7 @@ display: flex; justify-content: center; align-items: center; - background: rgba($studio-black, 0.2); + background: var(--overlay-color); } .dialog-renderer__content { diff --git a/lib/dialog/style.scss b/lib/dialog/style.scss index 2ebddd30a..3b535da2e 100644 --- a/lib/dialog/style.scss +++ b/lib/dialog/style.scss @@ -5,7 +5,7 @@ $dialog-title-height: 56px; display: flex; flex-direction: column; width: calc(100vw - 2rem); - background: white; + background: var(--background-color); border-radius: 8px; max-height: $dialog-max-height; @@ -16,7 +16,7 @@ $dialog-title-height: 56px; .dialog-title-bar { display: flex; - border-bottom: 1px solid $studio-gray-5; + border-bottom: 1px solid var(--secondary-color); height: $dialog-title-height; .button { diff --git a/lib/dialogs/about/style.scss b/lib/dialogs/about/style.scss index 4314d5c22..ee4592553 100644 --- a/lib/dialogs/about/style.scss +++ b/lib/dialogs/about/style.scss @@ -7,10 +7,10 @@ // For overriding theme settings. // TODO: Improve theme management so this isn't necessary - background: $studio-simplenote-blue-50 !important; - color: $studio-white !important; + background: var(--accent-color) !important; + color: var(--background-color) !important; a { - color: $studio-white; + color: var(--background-color); } } @@ -20,7 +20,7 @@ } a { - color: white; + color: var(--background-color); text-decoration: none; } } @@ -95,6 +95,6 @@ & svg, &:active svg { - fill: white; + fill: var(--background-color); } } diff --git a/lib/dialogs/import/dropzone/style.scss b/lib/dialogs/import/dropzone/style.scss index 4701fbca3..2c5f7385c 100644 --- a/lib/dialogs/import/dropzone/style.scss +++ b/lib/dialogs/import/dropzone/style.scss @@ -9,7 +9,7 @@ border-style: dashed; transition: padding 0.2s ease-out, background 0.2s ease-out; text-align: center; - color: $studio-gray-50; + color: var(--foreground-color); background-color: transparent; &:focus-within { @@ -31,8 +31,8 @@ margin: 0; padding: 0; list-style: none; - border-top: 1px solid $studio-gray-5; - border-bottom: 1px solid $studio-gray-5; + border-top: 1px solid var(--secondary-color); + border-bottom: 1px solid var(--secondary-color); } li { @@ -43,7 +43,7 @@ align-items: center; display: flex; width: 100%; - color: $studio-gray-80; + color: var(--primary-color); font-size: 16px; white-space: nowrap; @@ -55,7 +55,7 @@ svg { height: 17px; - fill: $studio-gray-50; + fill: var(--foreground-color); margin-right: 4px; flex-shrink: 0; } diff --git a/lib/dialogs/import/source-importer/executor/style.scss b/lib/dialogs/import/source-importer/executor/style.scss index 1ffab52df..b5308f049 100644 --- a/lib/dialogs/import/source-importer/executor/style.scss +++ b/lib/dialogs/import/source-importer/executor/style.scss @@ -29,8 +29,8 @@ label { display: flex; - border-top: 1px solid $studio-gray-5; - border-bottom: 1px solid $studio-gray-5; + border-top: 1px solid var(--secondary-color); + border-bottom: 1px solid var(--secondary-color); align-items: center; font-size: 16px; height: 28px; diff --git a/lib/dialogs/import/source-importer/style.scss b/lib/dialogs/import/source-importer/style.scss index eb72b3174..2d2c01e2a 100644 --- a/lib/dialogs/import/source-importer/style.scss +++ b/lib/dialogs/import/source-importer/style.scss @@ -18,7 +18,7 @@ line-height: 16px; font-size: 14px; border: 0; - background-color: $studio-gray-20; + background-color: var(--tertiary-color); opacity: 1; font-weight: 400; } @@ -52,7 +52,7 @@ p { padding-left: 16px; padding-right: 16px; - color: $studio-gray-80; + color: var(--primary-color); } .source-importer-executor { diff --git a/lib/dialogs/settings/style.scss b/lib/dialogs/settings/style.scss index 1877caf76..c811e2ed7 100644 --- a/lib/dialogs/settings/style.scss +++ b/lib/dialogs/settings/style.scss @@ -33,12 +33,12 @@ p { line-height: normal; - color: $studio-gray-80; + color: var(--primary-color); } } .settings-items { - border: 1px solid $studio-gray-5; + border: 1px solid var(--secondary-color); } .settings-item { @@ -47,7 +47,7 @@ height: 3em; padding-left: 18px; padding-right: 18px; - border-bottom: 1px solid $studio-gray-5; + border-bottom: 1px solid var(--secondary-color); &:last-child { border-bottom: none; diff --git a/lib/dialogs/share/style.scss b/lib/dialogs/share/style.scss index 89d310c20..c9a896393 100644 --- a/lib/dialogs/share/style.scss +++ b/lib/dialogs/share/style.scss @@ -1,5 +1,5 @@ .share-collaborators-heading { - border-bottom: 1px solid $studio-gray-5; + border-bottom: 1px solid var(--secondary-color); } .share-collaborators { @@ -21,7 +21,7 @@ height: 34px; border-radius: 50%; overflow: hidden; - background: $studio-gray-5; + background: var(--secondary-color); } .share-collaborator-name { diff --git a/lib/dialogs/unsynchronized/style.scss b/lib/dialogs/unsynchronized/style.scss index 284a5cd3f..17844a381 100644 --- a/lib/dialogs/unsynchronized/style.scss +++ b/lib/dialogs/unsynchronized/style.scss @@ -14,7 +14,7 @@ .dialog-title-side svg { height: 16px; width: 16px; - color: $studio-gray-50; + color: var(--foreground-color); } .explanation, @@ -26,12 +26,12 @@ } .explanation-secondary { - color: $studio-gray-50; + color: var(--foreground-color); } .change-list { - border-bottom: 1px solid $studio-gray-5; - border-top: 1px solid $studio-gray-5; + border-bottom: 1px solid var(--secondary-color); + border-top: 1px solid var(--secondary-color); overflow-y: auto; ul { @@ -62,7 +62,7 @@ } .export-unsynchronized { - color: $studio-simplenote-blue-50; + color: var(--accent-color); padding: 17px; text-align: left; } @@ -73,8 +73,8 @@ .log-out { border-radius: 4px; - background-color: $studio-simplenote-blue-50; - color: $studio-white; + background-color: var(--accent-color); + color: var(--background-color); font-size: 14px; padding: 6px 12px; margin: 14px 12px; diff --git a/lib/email-verification/style.scss b/lib/email-verification/style.scss index 28f0558bf..a10fe9339 100644 --- a/lib/email-verification/style.scss +++ b/lib/email-verification/style.scss @@ -7,7 +7,7 @@ display: flex; justify-content: center; align-items: center; - background: rgba($studio-black, 0.3); + background: var(--overlay-color); } .email-verification__dismiss { @@ -64,7 +64,7 @@ padding-right: 12px; } .button-borderless { - color: $studio-simplenote-blue-50; + color: var(--accent-color); } } diff --git a/lib/error-boundary/style.scss b/lib/error-boundary/style.scss index ac6c2668c..f6ff877a1 100644 --- a/lib/error-boundary/style.scss +++ b/lib/error-boundary/style.scss @@ -16,7 +16,7 @@ text-align: center; } .error-message__icon { - color: $studio-gray-50; + color: var(--foreground-color); height: 80px; margin: 0 auto 0.5rem; width: 80px; @@ -42,6 +42,6 @@ } .error-message__footnote { - color: $studio-gray-50; + color: var(--foreground-color); font-size: 14px; } diff --git a/lib/icon-button/style.scss b/lib/icon-button/style.scss index 0bea92173..7b87616b3 100644 --- a/lib/icon-button/style.scss +++ b/lib/icon-button/style.scss @@ -1,7 +1,7 @@ .icon-button { width: 32px; height: 32px; - color: $studio-gray-50; + color: var(--foreground-color); svg { transition: $anim-fast; diff --git a/lib/icons/style.scss b/lib/icons/style.scss index a22bcf73f..23a8c457a 100644 --- a/lib/icons/style.scss +++ b/lib/icons/style.scss @@ -11,8 +11,8 @@ svg[class^='icon-'][class$='-small'] { // Color for the Simplenote logo .logo path { - fill: $studio-simplenote-blue-50; + fill: var(--accent-color); } .logo circle { - fill: $studio-white; + fill: var(--background-color); } diff --git a/lib/menu-bar/style.scss b/lib/menu-bar/style.scss index b2dae0bd6..ae7b40e38 100644 --- a/lib/menu-bar/style.scss +++ b/lib/menu-bar/style.scss @@ -1,7 +1,7 @@ .menu-bar { height: $toolbar-height; padding: 0 15px; - border-bottom: 1px solid $studio-gray-5; + border-bottom: 1px solid var(--secondary-color); display: flex; justify-content: space-between; align-items: center; diff --git a/lib/navigation-bar/item/style.scss b/lib/navigation-bar/item/style.scss index cdc27b28f..97e699aa3 100644 --- a/lib/navigation-bar/item/style.scss +++ b/lib/navigation-bar/item/style.scss @@ -25,19 +25,19 @@ } &.is-selected { - background-color: $studio-simplenote-blue-5; + background-color: var(--highlight-color); button { border-top: none; svg[class^='icon-'] { - fill: $studio-simplenote-blue-50; + fill: var(--accent-color); } } } .navigation-bar-item__icon { - color: $studio-gray-50; + color: var(--foreground-color); display: inline-block; margin-right: 18px; vertical-align: middle; diff --git a/lib/note-actions/style.scss b/lib/note-actions/style.scss index a98b5d46a..9e3eeded6 100644 --- a/lib/note-actions/style.scss +++ b/lib/note-actions/style.scss @@ -9,7 +9,7 @@ top: $toolbar-height + 16px; border: 1px solid; border-radius: 6px; - box-shadow: 0 3px 6px 0 rgba($studio-black, 0.2); + box-shadow: 0 3px 6px 0 var(--overlay-color); display: flex; flex-direction: column; overflow: auto; @@ -47,7 +47,7 @@ } .note-actions-item-disabled { - color: $studio-gray-5; + color: var(--secondary-color); &:hover { background-color: transparent; } diff --git a/lib/note-detail/style.scss b/lib/note-detail/style.scss index c0c0c89df..bf81554eb 100644 --- a/lib/note-detail/style.scss +++ b/lib/note-detail/style.scss @@ -40,7 +40,7 @@ opacity: 0.2; path { - fill: $studio-gray-50; + fill: var(--foreground-color); } } @@ -56,8 +56,8 @@ border: 0; line-height: 1.5em; font-size: 16px; - color: $studio-gray-50; - background: $studio-white; + color: var(--foreground-color); + background: var(--background-color); resize: none; -webkit-tap-highlight-color: transparent; word-break: break-word; @@ -127,12 +127,12 @@ hr { border: 0; - border-top: 1px solid $studio-gray-5; + border-top: 1px solid var(--secondary-color); } blockquote { font-style: italic; - border-left: 4px solid $studio-gray-5; + border-left: 4px solid var(--secondary-color); margin-left: 0; padding-left: 1em; } @@ -167,14 +167,14 @@ } pre { - border: 1px solid $studio-gray-20; + border: 1px solid var(--tertiary-color); padding: 1em; border-radius: $border-radius; font-size: 85%; } p > code { - background-color: $studio-gray-5; + background-color: var(--secondary-color); border-radius: 2px; padding: 3px; } @@ -186,12 +186,12 @@ width: 100%; tr:nth-child(2n) { - background-color: $studio-gray-5; + background-color: var(--secondary-color); } th, td { - border: 1px solid $studio-gray-20; + border: 1px solid var(--tertiary-color); padding: 6px 13px; } diff --git a/lib/note-list/style.scss b/lib/note-list/style.scss index 14369c426..625262bf4 100644 --- a/lib/note-list/style.scss +++ b/lib/note-list/style.scss @@ -61,7 +61,7 @@ .search-match { background-color: transparent; - color: $studio-simplenote-blue-50; + color: var(--accent-color); padding-left: 0; padding-right: 0; border-radius: 0; @@ -81,11 +81,11 @@ .no-notes-message { font-size: 16px; - color: $studio-gray-50; + color: var(--foreground-color); } button { - color: $studio-simplenote-blue-50; + color: var(--accent-color); display: block; font-size: 14px; margin-top: 8px; @@ -132,7 +132,7 @@ body[data-theme='dark'] { font-size: 14px; font-weight: 500; line-height: normal; - color: $studio-gray-50; + color: var(--foreground-color); padding: 5px 16px; } @@ -182,11 +182,11 @@ body[data-theme='dark'] { } &.note-list-item-selected { - background: $studio-simplenote-blue-5; + background: var(--highlight-color); } &:not(.note-list-item-pinned):hover .note-list-item-pinner { - color: $studio-gray-50; + color: var(--foreground-color); } &:not(.note-list-item-selected) { @@ -209,7 +209,7 @@ body[data-theme='dark'] { .note-list-item-pending-changes, .note-list-item-published-icon { padding: 0 4px; - color: $studio-gray-50; + color: var(--foreground-color); & svg { height: 16px; @@ -224,7 +224,7 @@ body[data-theme='dark'] { &.is-offline svg { animation: none; - fill: $studio-gray-20; + fill: var(--tertiary-color); } body[data-theme='dark'] &.is-offline svg { diff --git a/lib/note-toolbar/style.scss b/lib/note-toolbar/style.scss index 225989e63..6fb281bc5 100644 --- a/lib/note-toolbar/style.scss +++ b/lib/note-toolbar/style.scss @@ -3,14 +3,14 @@ justify-content: flex-end; flex: none; height: $toolbar-height; - border-bottom: 1px solid $studio-gray-5; + border-bottom: 1px solid var(--secondary-color); } .note-toolbar-wrapper .offline-badge { - border: solid 1px $studio-gray-5; + border: solid 1px var(--secondary-color); border-radius: 2px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05); - color: $studio-gray-50; + color: var(--foreground-color); font-size: 12px; height: 24px; line-height: 24px; @@ -106,7 +106,7 @@ body[data-theme='dark'] .note-toolbar-wrapper .offline-badge { } .note-toolbar-placeholder { - border-bottom: 1px solid $studio-gray-5; + border-bottom: 1px solid var(--secondary-color); display: block; height: $toolbar-height; } diff --git a/lib/revision-selector/style.scss b/lib/revision-selector/style.scss index 734bca12a..81f72bfe0 100644 --- a/lib/revision-selector/style.scss +++ b/lib/revision-selector/style.scss @@ -49,19 +49,19 @@ .button-primary { &:active { - background: $studio-simplenote-blue-5; - border-color: $studio-simplenote-blue-5; + background: var(--highlight-color); + border-color: var(--highlight-color); } } .button-secondary { - background: $studio-gray-50; - color: $studio-white; + background: var(--foreground-color); + color: var(--background-color); margin-right: 10px; &:active { - background: $studio-white; - color: $studio-simplenote-blue-50; + background: var(--background-color); + color: var(--accent-color); } } diff --git a/lib/search-results-bar/style.scss b/lib/search-results-bar/style.scss index 4aa837164..b31941def 100644 --- a/lib/search-results-bar/style.scss +++ b/lib/search-results-bar/style.scss @@ -2,8 +2,8 @@ height: $toolbar-height; line-height: $toolbar-height; z-index: 100; - border-top: 1px solid $studio-gray-5; - background-color: $studio-white; + border-top: 1px solid var(--secondary-color); + background-color: var(--background-color); text-align: center; user-select: none; @@ -19,7 +19,7 @@ height: 100%; svg { - fill: $studio-simplenote-blue-50; + fill: var(--accent-color); } } .search-results-next { diff --git a/lib/tag-email-tooltip/style.scss b/lib/tag-email-tooltip/style.scss index 3591d5727..1d7c36d8b 100644 --- a/lib/tag-email-tooltip/style.scss +++ b/lib/tag-email-tooltip/style.scss @@ -24,7 +24,7 @@ .tag-email-tooltip__inside { padding: 6px 8px; - color: #fff; + color: var(--background-color); text-align: center; border-radius: 3px; background-color: #000; diff --git a/lib/tag-input/style.scss b/lib/tag-input/style.scss index fdff76db0..25250daa6 100644 --- a/lib/tag-input/style.scss +++ b/lib/tag-input/style.scss @@ -12,7 +12,7 @@ min-width: 140px; outline: none; font: 14px/1.5 $sans; - color: $studio-gray-80; + color: var(--primary-color); background: transparent; } } @@ -43,5 +43,5 @@ } .tag-input__suggestion { - color: $studio-gray-50; + color: var(--foreground-color); } diff --git a/lib/tag-list/style.scss b/lib/tag-list/style.scss index c9089f7cf..50ec47b08 100644 --- a/lib/tag-list/style.scss +++ b/lib/tag-list/style.scss @@ -10,7 +10,7 @@ } &.is-selected { - background-color: $studio-simplenote-blue-5; + background-color: var(--highlight-color); } } @@ -54,7 +54,7 @@ body .tag-list-item { .tag-list-edit-toggle { &:active { - color: $studio-white; + color: var(--background-color); } } } @@ -88,7 +88,7 @@ body .tag-list-item { appearance: none; &.is-selected { - color: $studio-simplenote-blue-50; + color: var(--accent-color); } } @@ -128,7 +128,7 @@ body[data-theme='dark'] { .tag-list-item { &:hover { - background-color: $studio-gray-80; + background-color: var(--foreground-color); } } } diff --git a/lib/tag-suggestions/style.scss b/lib/tag-suggestions/style.scss index 4d4dde353..f96950189 100644 --- a/lib/tag-suggestions/style.scss +++ b/lib/tag-suggestions/style.scss @@ -30,7 +30,7 @@ body[data-theme='light'] { .tag-suggestion { - border-color: $studio-gray-5; + border-color: var(--secondary-color); } } diff --git a/scss/_general.scss b/scss/_general.scss index 9b97137ae..faab410a3 100644 --- a/scss/_general.scss +++ b/scss/_general.scss @@ -7,7 +7,7 @@ a { @extend %smart-focus-outline; - color: $studio-simplenote-blue-50; + color: var(--accent-color); } /* stylelint-disable block-opening-brace-space-before */ @@ -108,7 +108,7 @@ optgroup { } .search-match { - background-color: $studio-simplenote-blue-5; + background-color: var(--highlight-color); border-radius: 3px; padding-left: 2px; padding-right: 2px; diff --git a/scss/_scrollbar.scss b/scss/_scrollbar.scss index 289f5060f..e5cd11b89 100644 --- a/scss/_scrollbar.scss +++ b/scss/_scrollbar.scss @@ -11,7 +11,7 @@ ::-webkit-scrollbar-thumb { background: $studio-gray-10; border-radius: 100px; - border: 4px solid $studio-white; + border: 4px solid var(--background-color); min-height: 24px; } // hover effect for scrollbar 'thumb' diff --git a/scss/_variables.scss b/scss/_variables.scss index 6c6026f8d..dfa2263b3 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -23,3 +23,17 @@ $toolbar-height: 44px; // Viewport widths for media queries $single-column: 750px; $medium: 900px; + +// Theme color variables + +:root, +body[data-theme='light'] { + --background-color: #fff; // $studio-white + --foreground-color: #646970; // $studio-gray-50 + --primary-color: #2c3338; // $studio-gray-80 + --secondary-color: #dcdcde; // $studio-gray-5 + --tertiary-color: #a7aaad; // $studio-gray-20 + --accent-color: #3361cc; // $studio-simplenote-blue-50 + --highlight-color: #ced9f2; // $studio-simplenote-blue-5 + --overlay-color: rgba(0, 0, 0, 0.2); // black with 20% opacity +} diff --git a/scss/buttons.scss b/scss/buttons.scss index 7f38b4fe1..af10a0841 100644 --- a/scss/buttons.scss +++ b/scss/buttons.scss @@ -41,8 +41,8 @@ button { &:active, &.active { - background: $studio-simplenote-blue-50; - color: $studio-white; + background: var(--accent-color); + color: var(--background-color); } &[disabled], &:disabled { @@ -52,8 +52,8 @@ button { // Primary buttons. Solid buttons. .button-primary { - background: $studio-simplenote-blue-50; - color: white; + background: var(--accent-color); + color: var(--background-color); } // Compact buttons. Use to make buttons smaller. @@ -70,7 +70,7 @@ button { &:active { background: $studio-red-50; - color: $studio-white; + color: var(--background-color); } } diff --git a/scss/inputs.scss b/scss/inputs.scss index 2ad0f06a9..c89587454 100644 --- a/scss/inputs.scss +++ b/scss/inputs.scss @@ -11,7 +11,7 @@ input { -webkit-tap-highlight-color: transparent; &::placeholder { - color: $studio-gray-50; + color: var(--foreground-color); opacity: 1; } diff --git a/scss/theme.scss b/scss/theme.scss index 528c27844..01e3b004e 100644 --- a/scss/theme.scss +++ b/scss/theme.scss @@ -91,7 +91,7 @@ span[dir='ltr'] { border: 3px solid gray; } .search-decoration { - background-color: $studio-simplenote-blue-5; + background-color: var(--highlight-color); } .selected-search { background-color: $studio-yellow-20; @@ -124,37 +124,37 @@ span[dir='ltr'] { } body[data-theme='light'] { - background-color: $studio-white; - color: $studio-gray-50; + background-color: var(--background-color); + color: var(--foreground-color); .theme-color-bg { - background-color: $studio-white; + background-color: var(--background-color); } .theme-color-bg-lighter { - background-color: $studio-white; + background-color: var(--background-color); } .theme-color-fg { - color: $studio-gray-80; + color: var(--primary-color); } .theme-color-fg-dim { - color: $studio-gray-50; + color: var(--foreground-color); } .theme-color-border, &.theme-color-border, .button { - border-color: $studio-gray-5; + border-color: var(--secondary-color); } .button-borderless { - color: $studio-simplenote-blue-50; + color: var(--accent-color); } .note-list-item-pinned .note-list-item-pinner { - color: $studio-simplenote-blue-50; + color: var(--accent-color); } } .theme-light.theme-color-border { - border-color: $studio-gray-5; + border-color: var(--secondary-color); } body[data-theme='dark'] { From 2eb31d6ab6e66040961c586c65c5b06b12c7c135 Mon Sep 17 00:00:00 2001 From: Sandy McFadden Date: Mon, 3 May 2021 14:15:02 -0300 Subject: [PATCH 2/2] Fix list hover color --- lib/tag-list/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/tag-list/style.scss b/lib/tag-list/style.scss index 50ec47b08..8ee03a17e 100644 --- a/lib/tag-list/style.scss +++ b/lib/tag-list/style.scss @@ -128,7 +128,7 @@ body[data-theme='dark'] { .tag-list-item { &:hover { - background-color: var(--foreground-color); + background-color: $studio-gray-80; } } }