From bdd9a51d256a9a2fe4ea11e3313e662dafb5d3a1 Mon Sep 17 00:00:00 2001 From: antelle Date: Sun, 29 Nov 2020 13:12:32 +0100 Subject: [PATCH] style fixes --- app/scripts/plugins/theme-vars.js | 13 +++--- app/styles/areas/_open.scss | 1 + app/styles/base/_properties.scss | 1 + app/styles/base/_theme-vars.scss | 70 +++++++++++++++++++++++-------- app/styles/base/_variables.scss | 2 +- 5 files changed, 62 insertions(+), 25 deletions(-) diff --git a/app/scripts/plugins/theme-vars.js b/app/scripts/plugins/theme-vars.js index f9b50c55..677ddce8 100644 --- a/app/scripts/plugins/theme-vars.js +++ b/app/scripts/plugins/theme-vars.js @@ -24,13 +24,14 @@ const ThemeVars = { apply(cssStyle) { this.init(); - const lines = ThemeVarsScss.split('\n'); - for (const line of lines) { - const match = line.match(/\s*([^:]+):\s*(.*?),?\s*$/); - if (!match) { - continue; + const matches = ThemeVarsScss.replace(/[\n\s]+/g, '').matchAll(/([\w\-]+):([^:]+),(\$)?/g); + for (let [, name, def, last] of matches) { + if (last && def.endsWith(')')) { + // definitions are written like this: + // map-merge((def:val, def:val, ..., last-def:val),$t) + // so, the last item has "),$" captured, here we're removing that bracket + def = def.substr(0, def.length - 1); } - const [, name, def] = match; const propName = '--' + name; const currentValue = cssStyle.getPropertyValue(propName); if (currentValue) { diff --git a/app/styles/areas/_open.scss b/app/styles/areas/_open.scss index 5d58ec83..bb57511c 100644 --- a/app/styles/areas/_open.scss +++ b/app/styles/areas/_open.scss @@ -388,6 +388,7 @@ &__item { padding: $base-padding; cursor: pointer; + border-radius: var(--block-border-radius); &:hover { background-color: var(--action-background-color-focus-tr); } diff --git a/app/styles/base/_properties.scss b/app/styles/base/_properties.scss index bc3d2200..196223ec 100644 --- a/app/styles/base/_properties.scss +++ b/app/styles/base/_properties.scss @@ -5,4 +5,5 @@ body { --block-border-radius: 5px; --selected-item-text-color: var(--text-color); --open-icon-color: var(--text-color); + --dropdown-box-shadow-color: rgba(0, 0, 0, 0.1); } diff --git a/app/styles/base/_theme-vars.scss b/app/styles/base/_theme-vars.scss index 7cd509ae..6889543c 100644 --- a/app/styles/base/_theme-vars.scss +++ b/app/styles/base/_theme-vars.scss @@ -1,27 +1,57 @@ -/* prettier-ignore */ /* This file is also parsed in JS to build theme styles, see theme-vars.js */ @function set-theme-vars($t) { @return map-merge( - $t, ( - muted-color: mix(map-get($t, medium-color), map-get($t, background-color), map-get($t, mute-percent)), - muted-color-border: mix(map-get($t, medium-color), map-get($t, background-color), semi-mute-percent(map-get($t, mute-percent))), + muted-color: + mix( + map-get($t, medium-color), + map-get($t, background-color), + map-get($t, mute-percent) + ), + muted-color-border: + mix( + map-get($t, medium-color), + map-get($t, background-color), + semi-mute-percent(map-get($t, mute-percent)) + ), text-selection-bg-color: rgba(map-get($t, action-color), 0.3), text-selection-bg-color-error: rgba(map-get($t, error-color), 0.8), text-semi-muted-color: mix(map-get($t, action-color), map-get($t, text-color), 0.5), - text-contrast-action-color: text-contrast-color(map-get($t, action-color), map-get($t, color-lightness-shift), map-get($t, background-color), map-get($t, text-color)), - text-contrast-error-color: text-contrast-color(map-get($t, error-color), map-get($t, color-lightness-shift), map-get($t, background-color), map-get($t, text-color)), + text-contrast-action-color: + text-contrast-color( + map-get($t, action-color), + map-get($t, color-lightness-shift), + map-get($t, background-color), + map-get($t, text-color) + ), + text-contrast-error-color: + text-contrast-color( + map-get($t, error-color), + map-get($t, color-lightness-shift), + map-get($t, background-color), + map-get($t, text-color) + ), base-border-color: mix(map-get($t, medium-color), map-get($t, background-color), 50%), accent-border-color: mix(map-get($t, medium-color), map-get($t, background-color), 65%), - light-border-color: mix(map-get($t, medium-color), map-get($t, background-color), map-get($t, light-border-percent)), - form-box-border-color-focus: mix(map-get($t, action-color), map-get($t, text-color), 70%), - form-box-shadow-color-focus: rgba(mix(map-get($t, action-color), map-get($t, text-color), 70%), 0.7), - form-box-shadow-color-hover: rgba(mix(map-get($t, action-color), map-get($t, text-color), 70%), 0.5), + light-border-color: + mix( + map-get($t, medium-color), + map-get($t, background-color), + map-get($t, light-border-percent) + ), + form-box-border-color-focus: + mix(map-get($t, action-color), map-get($t, text-color), 70%), + form-box-shadow-color-focus: + rgba(mix(map-get($t, action-color), map-get($t, text-color), 70%), 0.7), + form-box-shadow-color-hover: + rgba(mix(map-get($t, action-color), map-get($t, text-color), 70%), 0.5), form-box-shadow-color-focus-error: lightness-alpha(map-get($t, error-color), -5%, -0.3), - dropdown-box-shadow-color: rgba(map-get($t, medium-color), 0.05), - secondary-background-color: mix(map-get($t, medium-color), map-get($t, background-color), 10%), - intermediate-background-color: mix(map-get($t, medium-color), map-get($t, background-color), 3%), - intermediate-pressed-background-color: mix(map-get($t, medium-color), map-get($t, background-color), 2.6%), + secondary-background-color: + mix(map-get($t, medium-color), map-get($t, background-color), 10%), + intermediate-background-color: + mix(map-get($t, medium-color), map-get($t, background-color), 3%), + intermediate-pressed-background-color: + mix(map-get($t, medium-color), map-get($t, background-color), 2.6%), disabled-background-color: shade(map-get($t, background-color), 5%), action-background-color-focus: shade(map-get($t, action-color), 20%), action-background-color-focus-tr: rgba(shade(map-get($t, action-color), 20%), 0.1), @@ -34,9 +64,13 @@ modal-background-color: rgba(map-get($t, background-color), map-get($t, modal-opacity)), modal-background-color-tr: rgba(map-get($t, background-color), 0), selected-item-color: mix(map-get($t, action-color), map-get($t, background-color), 85%), - selected-on-secondary-item-color: mix(map-get($t, medium-color), map-get($t, background-color), 30%), - selectable-on-secondary-item-color: mix(map-get($t, medium-color), map-get($t, background-color), 14%), - clickable-on-secondary-color: mix(map-get($t, medium-color), map-get($t, background-color), 75%), - ) + selected-on-secondary-item-color: + mix(map-get($t, medium-color), map-get($t, background-color), 30%), + selectable-on-secondary-item-color: + mix(map-get($t, medium-color), map-get($t, background-color), 14%), + clickable-on-secondary-color: + mix(map-get($t, medium-color), map-get($t, background-color), 75%) + ), + $t ); } diff --git a/app/styles/base/_variables.scss b/app/styles/base/_variables.scss index b417a659..78543097 100644 --- a/app/styles/base/_variables.scss +++ b/app/styles/base/_variables.scss @@ -61,7 +61,7 @@ $titlebar-padding-large: 40px; // Shadows @function dropdown-box-shadow() { - @return 0 0 50px var(--dropdown-box-shadow-color); + @return 0 0.15rem 0.5rem 0.25rem var(--dropdown-box-shadow-color); } // Animations