From 153bb752a4924cdd82fc36435acdc30d8b2ba35a Mon Sep 17 00:00:00 2001 From: Eva Date: Tue, 30 Jan 2024 10:40:28 +0100 Subject: [PATCH] :recycle: Add new exceptions for light theme --- .../styles/common/refactor/basic-rules.scss | 14 ++--- .../styles/common/refactor/color-defs.scss | 1 + .../styles/common/refactor/design-tokens.scss | 44 ++++++++++++--- .../common/refactor/themes/light-theme.scss | 3 +- .../main/ui/components/editable_label.scss | 6 +-- .../app/main/ui/components/radio_buttons.scss | 18 ++++--- .../app/main/ui/components/tab_container.scss | 8 +-- .../main/ui/components/tabs_container.cljs | 53 ------------------- .../src/app/main/ui/dashboard/comments.scss | 4 +- .../src/app/main/ui/dashboard/import.scss | 26 ++++----- .../src/app/main/ui/dashboard/pin_button.scss | 10 ++-- frontend/src/app/main/ui/export.scss | 16 +++--- .../src/app/main/ui/workspace/comments.scss | 7 +-- .../src/app/main/ui/workspace/palette.scss | 6 +-- .../app/main/ui/workspace/right_header.scss | 6 ++- .../src/app/main/ui/workspace/sidebar.scss | 5 +- .../app/main/ui/workspace/sidebar/assets.cljs | 3 +- .../app/main/ui/workspace/sidebar/assets.scss | 4 ++ .../workspace/sidebar/assets/components.scss | 8 +-- .../app/main/ui/workspace/sidebar/layers.cljs | 1 + .../app/main/ui/workspace/sidebar/layers.scss | 3 ++ .../sidebar/options/menus/grid_cell.scss | 2 +- .../sidebar/options/menus/interactions.scss | 5 +- .../options/menus/layout_container.scss | 10 +--- .../sidebar/options/menus/layout_item.scss | 6 +-- .../sidebar/options/menus/measures.cljs | 2 +- .../sidebar/options/menus/measures.scss | 10 +--- .../app/main/ui/workspace/top_toolbar.scss | 7 +-- 28 files changed, 131 insertions(+), 157 deletions(-) delete mode 100644 frontend/src/app/main/ui/components/tabs_container.cljs diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 272577023..638867c89 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -127,7 +127,7 @@ border-radius: $br-8; color: var(--button-tertiary-foreground-color-rest); background-color: transparent; - border: $s-1 solid transparent; + border: $s-2 solid transparent; svg, span svg { stroke: var(--button-tertiary-foreground-color-rest); @@ -135,7 +135,7 @@ &:hover { background-color: var(--button-tertiary-background-color-hover); color: var(--button-tertiary-foreground-color-hover); - border: $s-1 solid var(--button-secondary-border-color-hover); + border: $s-2 solid var(--button-secondary-border-color-hover); svg, span svg { stroke: var(--button-tertiary-foreground-color-hover); @@ -143,7 +143,7 @@ } &:active { outline: none; - border: $s-1 solid transparent; + border: $s-2 solid transparent; background-color: var(--button-tertiary-background-color-active); color: var(--button-tertiary-foreground-color-active); svg, @@ -168,11 +168,11 @@ .button-icon-selected { outline: none; - border: $s-1 solid transparent; - background-color: var(--button-tertiary-background-color-hover); - color: var(--button-tertiary-foreground-color-active); + border: $s-2 solid var(--button-icon-border-color-selected); + background-color: var(--button-icon-background-color-selected); + color: var(--button-icon-foreground-color-selected); svg { - stroke: var(--button-tertiary-foreground-color-active); + stroke: var(--button-icon-foreground-color-selected); } } diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss index 6c47a842f..24b66209b 100644 --- a/frontend/resources/styles/common/refactor/color-defs.scss +++ b/frontend/resources/styles/common/refactor/color-defs.scss @@ -42,6 +42,7 @@ --lf-primary: #000; --lf-secondary: #495e74; --lf-secondary-40: #{color.change(#495e74, $alpha: 0.4)}; + --lf-secondary-50: #{color.change(#495e74, $alpha: 0.5)}; //Light accent --la-primary: #6911d4; diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index fe73cd6af..0e80da058 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -63,6 +63,12 @@ --button-tertiary-border-color-focus: var(--color-accent-primary); --button-tertiary-foreground-color-focus: var(--color-foreground-primary); + --button-icon-foreground-color: var(--color-foreground-secondary); + --button-icon-foreground-color-hover: var(--color-foreground-secondary); + --button-icon-background-color-selected: var(--color-background-quaternary); + --button-icon-foreground-color-selected: var(--color-accent-primary); + --button-icon-border-color-selected: var(--color-background-quaternary); + --button-radio-background-color-rest: var(--color-background-tertiary); --button-radio-border-color-rest: var(--color-background-tertiary); --button-radio-foreground-color-rest: var(--color-foreground-secondary); @@ -92,11 +98,14 @@ --constraint-center-area-background-color: var(--color-background-primary); // TABS + --tabs-background-color: var(--color-background-secondary); --tab-background-color-hover: var(--color-background-primary); --tab-background-color-selected: var(--color-background-quaternary); --tab-foreground-color: var(--color-foreground-secondary); --tab-foreground-color-hover: var(--color-foreground-primary); --tab-foreground-color-selected: var(--color-accent-primary); + --tab-border-color: var(--color-background-secondary); + --tab-border-color-selected: var(--color-background-secondary); // SECTION TITLE --title-background-color: var(--color-background-primary); @@ -213,16 +222,14 @@ --assets-item-background-color: var(--color-background-tertiary); --assets-item-background-color-hover: var(--color-background-quaternary); --assets-item-name-background-color: var(--db-secondary-80); // TODO: penpot file has a non-existing token - --assets-item-name-foreground-color: var(--color-foreground-secondary); + --assets-item-name-foreground-color: var(--color-foreground-primary); --assets-item-name-foreground-color-hover: var(--color-foreground-primary); --assets-item-name-foreground-color-disabled: var(--color-foreground-disabled); --assets-item-border-color: var(--color-accent-primary); - --assets-item-background-color-drag: var(--color-accent-primary-muted); - --assets-item-border-color-drag: var(--color-accent-tertiary); - --assets-component-background-color: var(--app-white); // We don't want this color to change with palette - --assets-component-background-color-disabled: var( - --df-secondary; - ); // We don't want this color to change with palette + --assets-item-background-color-drag: transparent; + --assets-item-border-color-drag: var(--color-accent-primary-muted); + --assets-component-background-color: var(--app-white); // TODO: review this token + --assets-component-background-color-disabled: var(--df-secondary;); --assets-component-border-color: var(--color-background-tertiary); --assets-component-border-selected: var(--color-accent-tertiary); @@ -230,6 +237,7 @@ --radio-btn-background-color-selected: var(--color-background-quaternary); --radio-btn-foreground-color: var(--color-foreground-secondary); --radio-btn-foreground-color-selected: var(--color-accent-primary); + --radio-btn-border-color: var(--color-background-tertiary); --radio-btn-border-color-selected: var(--color-background-quaternary); --library-name-foreground-color: var(--color-foreground-primary); @@ -354,3 +362,25 @@ #app { background-color: var(--app-background); } + +.light { + --assets-component-background-color: var(--color-background-secondary); + + --tabs-background-color: var(--color-background-tertiary); + --tab-background-color-selected: var(--color-background-primary); + --tab-border-color: var(--color-background-tertiary); + --tab-border-color-selected: var(--color-background-secondary); + + --radio-btns-background-color: var(--color-background-tertiary); + --radio-btn-background-color-selected: var(--color-background-primary); + --radio-btn-foreground-color: var(--color-foreground-secondary); + --radio-btn-foreground-color-selected: var(--color-accent-primary); + --radio-btn-border-color: var(--color-background-tertiary); + --radio-btn-border-color-selected: var(--color-background-secondary); + + --button-icon-background-color-selected: var(--color-background-primary); + --button-icon-border-color-selected: var(--color-background-secondary); + + --assets-item-name-background-color: var(--color-background-primary); + --assets-item-name-foreground-color: var(--color-foreground-primary); +} diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss index ba5fcb7a7..e2fe1b643 100644 --- a/frontend/resources/styles/common/refactor/themes/light-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/light-theme.scss @@ -24,8 +24,7 @@ --color-accent-quaternary: var(--la-quaternary); --color-component-highlight: var(--la-secondary); - --overlay-color: rgba(255, 255, 255, 0.4); - + --overlay-color: var(--lf-secondary-50); --shadow-color: var(--lf-secondary-40); --radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset; diff --git a/frontend/src/app/main/ui/components/editable_label.scss b/frontend/src/app/main/ui/components/editable_label.scss index b444a3be7..168d73ad1 100644 --- a/frontend/src/app/main/ui/components/editable_label.scss +++ b/frontend/src/app/main/ui/components/editable_label.scss @@ -15,9 +15,9 @@ max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size))); margin: 0; padding-left: $s-6; - border-radius: $br-8; - border: $s-1 solid var(--input-border-color-focus); - color: var(--layer-row-foreground-color); + border-radius: $br-4; + border: $s-1 solid var(--input-border-color-active); + color: var(--input-foreground-color-active); } .editable-label { diff --git a/frontend/src/app/main/ui/components/radio_buttons.scss b/frontend/src/app/main/ui/components/radio_buttons.scss index 0c512f3e8..62e5c612f 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.scss +++ b/frontend/src/app/main/ui/components/radio_buttons.scss @@ -12,13 +12,16 @@ height: $s-32; background-color: var(--input-background-color); } + .radio-icon { - @extend .button-radio; + @include buttonStyle; + @include flexCenter; + @include focusRadio; height: $s-32; flex-grow: 1; border-radius: $s-8; - box-sizing: content-box; - border: none; + box-sizing: border-box; + border: $s-2 solid var(--radio-btn-border-color); input { display: none; } @@ -31,16 +34,14 @@ color: var(--radio-btn-foreground-color); } &:hover { - border: none; svg { - color: var(--radio-btn-foreground-color-selected); + stroke: var(--radio-btn-foreground-color-selected); } } &.checked { - border: none; background-color: var(--radio-btn-background-color-selected); - box-shadow: var(--radio-button-box-shadow); + border-color: var(--radio-btn-border-color-selected); svg { stroke: var(--radio-btn-foreground-color-selected); } @@ -52,6 +53,7 @@ &.disabled { cursor: default; background-color: transparent; + border: $s-2 solid transparent; svg { stroke: var(--button-foreground-color-disabled); } @@ -59,8 +61,8 @@ color: var(--button-foreground-color-disabled); } &:hover { - border: none; background-color: transparent; + border: $s-2 solid transparent; svg { stroke: var(--button-foreground-color-disabled); } diff --git a/frontend/src/app/main/ui/components/tab_container.scss b/frontend/src/app/main/ui/components/tab_container.scss index 2db5c9df3..d859680cf 100644 --- a/frontend/src/app/main/ui/components/tab_container.scss +++ b/frontend/src/app/main/ui/components/tab_container.scss @@ -17,8 +17,7 @@ flex-direction: row; gap: $s-2; border-radius: $br-8; - background: var(--color-background-secondary); - padding: $s-2; + background: var(--tabs-background-color); cursor: pointer; font-size: $fs-12; height: 100%; @@ -27,7 +26,6 @@ flex-direction: row; height: 100%; width: 100%; - gap: $s-2; .tab-container-tab-title { @include flexCenter; @include tabTitleTipography; @@ -35,10 +33,11 @@ width: 100%; padding: 0 $s-8; margin: 0; - border-radius: $br-5; + border-radius: $br-8; background-color: transparent; color: var(--tab-foreground-color); white-space: nowrap; + border: $s-2 solid var(--tab-border-color); svg { @extend .button-icon; stroke: var(--tab-foreground-color); @@ -47,6 +46,7 @@ &.current, &.current:hover { background: var(--tab-background-color-selected); + border-color: var(--tab-border-color-selected); color: var(--tab-foreground-color-selected); svg { stroke: var(--tab-foreground-color-selected); diff --git a/frontend/src/app/main/ui/components/tabs_container.cljs b/frontend/src/app/main/ui/components/tabs_container.cljs deleted file mode 100644 index 2275d06fe..000000000 --- a/frontend/src/app/main/ui/components/tabs_container.cljs +++ /dev/null @@ -1,53 +0,0 @@ -;; This Source Code Form is subject to the terms of the Mozilla Public -;; License, v. 2.0. If a copy of the MPL was not distributed with this -;; file, You can obtain one at http://mozilla.org/MPL/2.0/. -;; -;; Copyright (c) KALEIDOS INC - -(ns app.main.ui.components.tabs-container - (:require - [app.common.data :as d] - [cuerdas.core :as str] - [rumext.v2 :as mf])) - -(mf/defc tabs-element - {::mf/wrap-props false} - [props] - (let [children (unchecked-get props "children")] - [:div.tab-element - [:div.tab-element-content children]])) - -(mf/defc tabs-container - {::mf/wrap-props false} - [props] - (let [children (->> - (unchecked-get props "children") - (filter some?)) - selected (unchecked-get props "selected") - on-change (unchecked-get props "on-change-tab") - - state (mf/use-state #(or selected (-> children first .-props .-id))) - selected (or selected @state) - - select-fn - (mf/use-fn - (mf/deps on-change) - (fn [event] - (let [id (d/read-string (.. event -target -dataset -id))] - (reset! state id) - (when (fn? on-change) (on-change id)))))] - - [:div.tab-container - [:div.tab-container-tabs - (for [tab children] - (let [props (.-props tab) - id (.-id props) - title (.-title props)] - [:div.tab-container-tab-title - {:key (str/concat "tab-" (d/name id)) - :data-id (pr-str id) - :on-click select-fn - :class (when (= selected id) "current")} - title]))] - [:div.tab-container-content - (d/seek #(= selected (-> % .-props .-id)) children)]])) diff --git a/frontend/src/app/main/ui/dashboard/comments.scss b/frontend/src/app/main/ui/dashboard/comments.scss index bdfcca141..70b96cdae 100644 --- a/frontend/src/app/main/ui/dashboard/comments.scss +++ b/frontend/src/app/main/ui/dashboard/comments.scss @@ -67,8 +67,8 @@ width: $s-32; svg { - min-width: $s-16; - min-height: $s-16; + width: $s-16; + height: $s-16; stroke: $df-secondary; fill: none; } diff --git a/frontend/src/app/main/ui/dashboard/import.scss b/frontend/src/app/main/ui/dashboard/import.scss index e4b3a7bb7..ade895916 100644 --- a/frontend/src/app/main/ui/dashboard/import.scss +++ b/frontend/src/app/main/ui/dashboard/import.scss @@ -163,12 +163,12 @@ &.loading { .file-name { - color: var(--element-foreground-pending); + color: var(--modal-text-foreground-color); .file-icon { :global(#loader-pencil) { - color: var(--element-foreground-pending); - stroke: var(--element-foreground-pending); - fill: var(--element-foreground-pending); + color: var(--modal-text-foreground-color); + stroke: var(--modal-text-foreground-color); + fill: var(--modal-text-foreground-color); } } } @@ -186,34 +186,34 @@ } &.success { .file-name { - color: var(--element-foreground-success); + color: var(--modal-text-foreground-color); .file-icon svg { - stroke: var(--element-foreground-success); + stroke: var(--modal-text-foreground-color); } .file-icon.icon-fill svg { - fill: var(--element-foreground-success); + fill: var(--modal-text-foreground-color); } } } &.error { .file-name { - color: var(--element-foreground-error); + color: var(--modal-text-foreground-color); .file-icon svg { - stroke: var(--element-foreground-error); + stroke: var(--modal-text-foreground-color); } .file-icon.icon-fill svg { - fill: var(--element-foreground-error); + fill: var(--modal-text-foreground-color); } } } &.editable { .file-name { - color: var(--icon-foreground); + color: var(--modal-text-foreground-color); .file-icon svg { - stroke: var(--icon-foreground); + stroke: var(--modal-text-foreground-color); } .file-icon.icon-fill svg { - fill: var(--icon-foreground); + fill: var(--modal-text-foreground-color); } } } diff --git a/frontend/src/app/main/ui/dashboard/pin_button.scss b/frontend/src/app/main/ui/dashboard/pin_button.scss index 50997fe24..9b00a1307 100644 --- a/frontend/src/app/main/ui/dashboard/pin_button.scss +++ b/frontend/src/app/main/ui/dashboard/pin_button.scss @@ -7,13 +7,14 @@ @use "common/refactor/common-refactor.scss" as *; .button { - --pin-button-icon-color: #{$df-secondary}; + --pin-button-icon-color: var(--button-icon-foreground-color); --pin-button-bg-color: none; + --pin-button-border-color: none; width: $s-32; height: $s-32; background: var(--pin-button-bg-color); - border: none; + border: $s-2 solid var(--pin-button-border-color); border-radius: $br-8; display: grid; place-content: center; @@ -21,8 +22,9 @@ } .button-active { - --pin-button-icon-color: #{$da-primary}; - --pin-button-bg-color: #{$db-cuaternary}; + --pin-button-icon-color: var(--button-icon-foreground-color-selected); + --pin-button-bg-color: var(--button-icon-background-color-selected); + --pin-button-border-color: var(--button-icon-border-color-selected); } .icon { diff --git a/frontend/src/app/main/ui/export.scss b/frontend/src/app/main/ui/export.scss index cf72b301d..16e280ba9 100644 --- a/frontend/src/app/main/ui/export.scss +++ b/frontend/src/app/main/ui/export.scss @@ -276,27 +276,27 @@ } &.loading { .file-name { - color: var(--element-foreground-pending); + color: var(--modal-text-foreground-color); .file-icon svg:global(#loader-pencil) { - color: var(--element-foreground-pending); - stroke: var(--element-foreground-pending); - fill: var(--element-foreground-pending); + color: var(--modal-text-foreground-color); + stroke: var(--modal-text-foreground-color); + fill: var(--modal-text-foreground-color); } } } &.error { .file-name { - color: var(--element-foreground-error); + color: var(--modal-text-foreground-color); .file-icon svg { - stroke: var(--element-foreground-error); + stroke: var(--modal-text-foreground-color); } } } &.success { .file-name { - color: var(--element-foreground-success); + color: var(--modal-text-foreground-color); .file-icon svg { - stroke: var(--element-foreground-success); + stroke: var(--modal-text-foreground-color); } } } diff --git a/frontend/src/app/main/ui/workspace/comments.scss b/frontend/src/app/main/ui/workspace/comments.scss index 71c824b6a..b62b640f8 100644 --- a/frontend/src/app/main/ui/workspace/comments.scss +++ b/frontend/src/app/main/ui/workspace/comments.scss @@ -16,9 +16,7 @@ .comments-section-title { @include flexCenter; @include tabTitleTipography; - display: flex; - justify-content: space-between; - align-items: center; + position: relative; height: $s-32; min-height: $s-32; margin: $s-8 $s-8 0 $s-8; @@ -33,6 +31,9 @@ .close-button { @extend .button-tertiary; + position: absolute; + right: $s-2; + top: $s-2; height: $s-28; width: $s-28; border-radius: $br-6; diff --git a/frontend/src/app/main/ui/workspace/palette.scss b/frontend/src/app/main/ui/workspace/palette.scss index 56853ad43..9d88d9e03 100644 --- a/frontend/src/app/main/ui/workspace/palette.scss +++ b/frontend/src/app/main/ui/workspace/palette.scss @@ -59,6 +59,7 @@ margin: $s-0; list-style: none; z-index: $z-index-2; + gap: $s-2; &.mid-palette, &.small-palette { display: flex; @@ -73,7 +74,6 @@ height: $s-32; width: $s-32; border-radius: $br-8; - border: $s-2 solid transparent; background-clip: padding-box; padding: 0; svg { @@ -83,12 +83,10 @@ &.selected { @extend .button-icon-selected; } - &:hover { - border: $s-2 solid transparent; - } } } } + .palette-actions { @extend .button-tertiary; grid-area: actions; diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss index a56f73629..c7a45ab87 100644 --- a/frontend/src/app/main/ui/workspace/right_header.scss +++ b/frontend/src/app/main/ui/workspace/right_header.scss @@ -128,6 +128,7 @@ margin: 0; height: $s-28; width: $s-28; + border: none; svg { @extend .button-icon; stroke: var(--icon-foreground); @@ -140,7 +141,6 @@ } &.selected { background-color: var(--button-tertiary-background-color-selected); - border: $s-2 solid var(--button-tertiary-border-color-selected); svg { stroke: var(--button-tertiary-foreground-color-active); } @@ -153,6 +153,7 @@ margin: 0; height: $s-28; width: $s-28; + border: none; svg { @extend .button-icon; stroke: var(--icon-foreground); @@ -165,7 +166,6 @@ } &.selected { background-color: var(--button-tertiary-background-color-selected); - border: $s-2 solid var(--button-tertiary-border-color-selected); svg { stroke: var(--button-tertiary-foreground-color-active); } @@ -218,6 +218,7 @@ margin: 0; width: $s-28; height: $s-28; + border: none; svg { @extend .button-icon; height: $s-16; @@ -226,5 +227,6 @@ } &:hover { background-color: transparent; + border: none; } } diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss index af90a5ea5..57e839013 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar.scss @@ -30,6 +30,10 @@ $width-settings-bar-max: $s-500; } } +.layers-tab { + padding-top: $s-4; +} + .left-header { grid-area: header; } @@ -85,6 +89,5 @@ $width-settings-bar-max: $s-500; width: 100%; height: $s-12; border-top: $s-2 solid var(--resize-area-border-color); - background-color: var(--resize-area-background-color); cursor: ns-resize; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index d82ae14e1..62338f4ec 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -168,7 +168,8 @@ :placeholder (tr "workspace.assets.search")} [:button {:on-click on-open-menu - :class (stl/css :section-button)} + :class (stl/css-case :section-button true + :opened menu-open?)} i/filter-refactor]] [:& context-menu-a11y {:on-close on-menu-close diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss index 27f8ca218..723ac54fa 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss @@ -90,6 +90,10 @@ } } } + + &.opened { + @extend .button-icon-selected; + } } .sections-container { diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss index baef288b8..79fe504da 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss @@ -34,6 +34,7 @@ position: absolute; left: $s-4; bottom: $s-4; + height: $s-20; width: calc(100% - 2 * $s-4); padding: $s-2; column-gap: $s-4; @@ -50,10 +51,11 @@ span { display: flex; align-items: center; + height: 100%; } &.editing { border: $s-1 solid var(--input-border-color-focus); - border-radius: $br-2; + border-radius: $br-4; display: flex; align-items: center; background-color: var(--input-background-color); @@ -63,12 +65,12 @@ &:hover { background-color: var(--assets-item-background-color-hover); .cell-name { - display: flex; + display: block; } } &.selected { - border: $s-4 solid var(--assets-item-border-color); + border: $s-1 solid var(--assets-item-border-color); } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index 4ce3d3196..101ec3e93 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -239,6 +239,7 @@ [:button {:on-click toggle-filters :class (stl/css-case :filter-button true + :opened show-menu? :active active?)} i/filter-refactor]] diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss index 55811f110..4b39fbaa4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss @@ -49,6 +49,9 @@ stroke: var(--button-foreground-hover); } } + &.opened { + @extend .button-icon-selected; + } } .close-search { @extend .button-tertiary; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss index a2a3449f4..602a13293 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss @@ -52,5 +52,5 @@ .coord-input { @extend .input-element; border-radius: 0 $br-8 $br-8 0; - border-left: 1px solid var(--panel-background-color); + border-left: $s-1 solid var(--panel-background-color); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss index e2f48a6e3..cc3679140 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss @@ -229,10 +229,7 @@ @extend .button-icon; } &.extended { - background-color: var(--button-radio-background-color-active); - svg { - stroke: var(--button-radio-foreground-color-active); - } + @extend .button-icon-selected; } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss index d52e12d33..eb71a9392 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss @@ -54,10 +54,7 @@ stroke: var(--icon-foreground); } &.selected { - background-color: var(--button-tertiary-background-color-hover); - svg { - stroke: var(--button-tertiary-foreground-color-active); - } + @extend .button-icon-selected; } } } @@ -138,10 +135,7 @@ stroke: var(--icon-foreground); } &.selected { - background-color: var(--button-tertiary-background-color-hover); - svg { - stroke: var(--button-tertiary-foreground-color-active); - } + @extend .button-icon-selected; } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss index a88b10213..e876cbfaf 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss @@ -83,11 +83,7 @@ @extend .button-icon; } &.selected { - background-color: var(--button-tertiary-background-color-active); - color: var(--button-tertiary-foreground-color-active); - svg { - stroke: var(--button-tertiary-foreground-color-active); - } + @extend .button-icon-selected; } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index 6956aa30f..530ee7ed4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -546,7 +546,7 @@ [:span {:class (stl/css :icon)} i/clip-content-refactor]]]) (when (options :show-in-viewer) - [:div {:class (stl/css :clip-content)} + [:div {:class (stl/css :show-in-viewer)} [:input {:type "checkbox" :id "show-in-viewer" :ref show-in-viewer-ref diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss index f05c3e555..c7e4e533b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss @@ -203,10 +203,7 @@ stroke: var(--icon-foreground); } &.selected { - background-color: var(--button-tertiary-background-color-hover); - svg { - stroke: var(--button-tertiary-foreground-color-active); - } + @extend .button-icon-selected; } } @@ -235,10 +232,7 @@ } } &.selected { - background-color: var(--button-tertiary-background-color-hover); - svg { - stroke: var(--button-tertiary-foreground-color-active); - } + @extend .button-icon-selected; } } } diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.scss b/frontend/src/app/main/ui/workspace/top_toolbar.scss index 03cfac697..9777a3f7b 100644 --- a/frontend/src/app/main/ui/workspace/top_toolbar.scss +++ b/frontend/src/app/main/ui/workspace/top_toolbar.scss @@ -39,7 +39,6 @@ height: $s-36; width: $s-36; flex-shrink: 0; - background-color: transparent; border-radius: $s-8; border: none; margin: 0 $s-2; @@ -48,11 +47,9 @@ @extend .button-icon; stroke: var(--color-foreground-secondary); } + &.selected { - background-color: var(--button-radio-background-color-active); - svg { - stroke: var(--button-radio-foreground-color-active); - } + @extend .button-icon-selected; } } }