From 74aaa710bfcf393293103c1c67db10f4b908811f Mon Sep 17 00:00:00 2001 From: Eva Date: Fri, 29 Dec 2023 12:36:26 +0100 Subject: [PATCH] :bug: Fix some text and background colors --- frontend/resources/styles/common/base.scss | 2 +- .../common/refactor/common-refactor.scss | 4 + .../styles/common/refactor/design-tokens.scss | 2 + frontend/src/app/main/ui/export.cljs | 51 ++-- frontend/src/app/main/ui/workspace.scss | 1 + .../app/main/ui/workspace/color_palette.cljs | 23 +- .../app/main/ui/workspace/color_palette.scss | 157 ++++++------ .../main/ui/workspace/sidebar/layer_item.scss | 46 ++-- .../sidebar/options/menus/typography.cljs | 2 +- .../app/main/ui/workspace/text_palette.cljs | 27 +- .../app/main/ui/workspace/text_palette.scss | 234 +++++++++--------- 11 files changed, 284 insertions(+), 265 deletions(-) diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss index 43543103f..6654083ac 100644 --- a/frontend/resources/styles/common/base.scss +++ b/frontend/resources/styles/common/base.scss @@ -19,7 +19,7 @@ body { overflow: hidden; background-color: red; //debugger colors - color: #fabada; //debugger colors + color: yellow; //debugger colors } #app { diff --git a/frontend/resources/styles/common/refactor/common-refactor.scss b/frontend/resources/styles/common/refactor/common-refactor.scss index c1033735c..a200893e9 100644 --- a/frontend/resources/styles/common/refactor/common-refactor.scss +++ b/frontend/resources/styles/common/refactor/common-refactor.scss @@ -34,3 +34,7 @@ $da-primary: var(--color-accent-primary); $da-primary-muted: var(--color-accent-primary-muted); $da-secondary: var(--color-accent-secondary); $da-tertiary: var(--color-accent-tertiary); + +#app { + background-color: var(--app-background); +} diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index 095fb40e9..a69026ba0 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -13,6 +13,8 @@ --scrollbar-background-color: var(--color-foreground-secondary); --panel-background-color: var(--color-background-primary); + --app-background: var(--color-background-primary); + --loader-background: var(--color-background-primary); --panel-title-background-color: var(--color-background-secondary); --presence-color: var(--default-presence-color); diff --git a/frontend/src/app/main/ui/export.cljs b/frontend/src/app/main/ui/export.cljs index d9fe198e6..778d96885 100644 --- a/frontend/src/app/main/ui/export.cljs +++ b/frontend/src/app/main/ui/export.cljs @@ -15,7 +15,6 @@ [app.main.data.modal :as modal] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.main.ui.workspace.shapes :refer [shape-wrapper]] [app.util.dom :as dom] @@ -86,11 +85,13 @@ [:span {:class (stl/css :checkbox-wrapper)} (cond all-checked? [:span {:class (stl/css-case :checkobox-tick true - :global/checked true)} i/tick-refactor] + :global/checked true)} + i/tick-refactor] all-unchecked? [:span {:class (stl/css-case :checkobox-tick true :global/uncheked true)}] :else [:span {:class (stl/css-case :checkobox-tick true - :global/intermediate true)} i/remove-refactor])]] + :global/intermediate true)} + i/remove-refactor])]] [:div {:class (stl/css :selection-title)} (tr "dashboard.export-multiple.selected" (c (count enabled-exports)) @@ -108,7 +109,8 @@ [:span {:class (stl/css :checkbox-wrapper)} (if (:enabled export) [:span {:class (stl/css-case :checkobox-tick true - :global/checked true)} i/tick-refactor] + :global/checked true)} + i/tick-refactor] [:span {:class (stl/css-case :checkobox-tick true :global/uncheked true)}])] @@ -128,7 +130,8 @@ [:& shape-wrapper {:shape shape}]])] - [:div {:class (stl/css :selection-name)} (cond-> (:name shape) suffix (str suffix))] + [:div {:class (stl/css :selection-name)} + (cond-> (:name shape) suffix (str suffix))] (when (:scale export) [:div {:class (stl/css :selection-scale)} (dm/str (ust/format-precision (* width (:scale export)) 2) "px" @@ -143,8 +146,7 @@ (when (> (count all-exports) 0) [:div {:class (stl/css :modal-footer)} [:div {:class (stl/css :action-buttons)} - [:input - {:class (stl/css :cancel-button) + [:input {:class (stl/css :cancel-button) :type "button" :value (tr "labels.cancel") :on-click cancel-fn}] @@ -160,7 +162,8 @@ (mf/defc shapes-no-selection [] [:div {:class (stl/css :no-selection)} - [:p {:class (stl/css :modal-msg)} (tr "dashboard.export-shapes.no-elements")] + [:p {:class (stl/css :modal-msg)} + (tr "dashboard.export-shapes.no-elements")] [:p {:class (stl/css :modal-scd-msg)} (tr "dashboard.export-shapes.how-to")] [:a {:target "_blank" :class (stl/css :modal-link) @@ -191,8 +194,7 @@ (mf/defc export-progress-widget {::mf/wrap [mf/memo]} [] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - state (mf/deref refs/export) + (let [state (mf/deref refs/export) error? (:error state) healthy? (:healthy? state) detail-visible? (:detail-visible state) @@ -207,15 +209,10 @@ pwidth (if error? 280 (/ (* progress 280) total)) - color (if new-css-system - (cond - error? clr/new-danger - healthy? clr/new-primary - (not healthy?) clr/new-warning) - (cond - error? clr/danger - healthy? clr/primary - (not healthy?) clr/warning)) + color (cond + error? clr/new-danger + healthy? clr/new-primary + (not healthy?) clr/new-warning) title (cond error? (tr "workspace.options.exporting-object-error") complete? (tr "workspace.options.exporting-complete") @@ -228,7 +225,7 @@ toggle-detail-visibility (mf/use-fn #(st/emit! (de/toggle-detail-visibililty)))] - [* + [:* (when widget-visible? [:div {:class (stl/css :export-progress-widget) :on-click toggle-detail-visibility} @@ -250,7 +247,6 @@ :transform "rotate(-90 16,16)" :style {:transition "stroke-dashoffset 1s ease-in-out"}}]]]) - (when detail-visible? [:div {:class (stl/css :export-progress-modal-overlay)} [:div {:class (stl/css :export-progress-modal-container)} @@ -260,14 +256,19 @@ title] (if error? [:button {:class (stl/css :retry-btn) - :on-click retry-last-export} (tr "workspace.options.retry")] - [:p {:class (stl/css :progress)} (dm/str progress " / " total)])] + :on-click retry-last-export} + (tr "workspace.options.retry")] + + [:p {:class (stl/css :progress)} + (dm/str progress " / " total)])] [:button {:class (stl/css :modal-close-button) - :on-click toggle-detail-visibility} i/close-refactor]] + :on-click toggle-detail-visibility} + i/close-refactor]] [:svg {:class (stl/css :progress-bar) - :height 5 :width 280} + :height 5 + :width 280} [:g [:path {:d "M0 0 L280 0" :stroke clr/black diff --git a/frontend/src/app/main/ui/workspace.scss b/frontend/src/app/main/ui/workspace.scss index 1665f7dc3..72633f95c 100644 --- a/frontend/src/app/main/ui/workspace.scss +++ b/frontend/src/app/main/ui/workspace.scss @@ -34,6 +34,7 @@ justify-content: center; align-items: center; grid-area: viewport; + background-color: var(--loader-background); :global(svg#loader-pencil) { fill: var(--icon-foreground); } diff --git a/frontend/src/app/main/ui/workspace/color_palette.cljs b/frontend/src/app/main/ui/workspace/color_palette.cljs index 8a191c763..ccecb957b 100644 --- a/frontend/src/app/main/ui/workspace/color_palette.cljs +++ b/frontend/src/app/main/ui/workspace/color_palette.cljs @@ -5,7 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.color-palette - (:require-macros [app.main.style :refer [css]]) + (:require-macros [app.main.style :as stl]) (:require [app.common.data.macros :as dm] [app.main.data.workspace.colors :as mdc] @@ -15,7 +15,6 @@ [app.main.ui.hooks :as h] [app.main.ui.icons :as i] [app.util.color :as uc] - [app.util.dom :as dom] [app.util.i18n :refer [tr]] [app.util.keyboard :as kbd] [app.util.object :as obj] @@ -26,9 +25,9 @@ [{:keys [color size]}] (letfn [(select-color [event] (st/emit! (mdc/apply-color-from-palette color (kbd/alt? event))))] - [:div {:class (dom/classnames (css :color-cell) true - (css :is-not-library-color) (nil? (:id color)) - (css :no-text) (<= size 64)) + [:div {:class (stl/css-case :color-cell true + :is-not-library-color (nil? (:id color)) + :no-text (<= size 64)) :title (uc/get-color-name color) :on-click select-color} [:& cb/color-bullet {:color color}] @@ -102,32 +101,32 @@ (when (not= 0 (:offset @state)) (swap! state assoc :offset 0))) - [:div {:class (dom/classnames (css :color-palette) true - (css :no-text) (< size 64)) + [:div {:class (stl/css-case :color-palette true + :no-text (< size 64)) :style #js {"--bullet-size" (dm/str bullet-size "px")}} (when show-arrows? - [:button {:class (dom/classnames (css :left-arrow) true) + [:button {:class (stl/css :left-arrow) :disabled (= offset 0) :on-click on-left-arrow-click} i/arrow-refactor]) - [:div {:class (dom/classnames (css :color-palette-content) true) + [:div {:class (stl/css :color-palette-content) :ref container :on-wheel on-scroll} (if (empty? current-colors) - [:div {:class (dom/classnames (css :color-palette-empty) true) + [:div {:class (stl/css :color-palette-empty) :style {:position "absolute" :left "50%" :top "50%" :transform "translate(-50%, -50%)"}} (tr "workspace.libraries.colors.empty-palette")] - [:div {:class (dom/classnames (css :color-palette-inside) true) + [:div {:class (stl/css :color-palette-inside) :style {:position "relative" :max-width (str width "px") :right (str (* offset-step offset) "px")}} (for [[idx item] (map-indexed vector current-colors)] [:& palette-item {:color item :key idx :size size}])])] (when show-arrows? - [:button {:class (dom/classnames (css :right-arrow) true) + [:button {:class (stl/css :right-arrow) :disabled (= offset max-offset) :on-click on-right-arrow-click} i/arrow-refactor])])) diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss index 8c65031f1..2fc27b5bb 100644 --- a/frontend/src/app/main/ui/workspace/color_palette.scss +++ b/frontend/src/app/main/ui/workspace/color_palette.scss @@ -9,89 +9,94 @@ .color-palette { height: 100%; display: flex; +} - .left-arrow, - .right-arrow { - @include buttonStyle; - @include flexCenter; - position: relative; +.left-arrow, +.right-arrow { + @include buttonStyle; + @include flexCenter; + position: relative; + height: 100%; + width: $s-24; + padding: 0; + z-index: $z-index-4; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + &::after { + content: ""; + position: absolute; + z-index: $z-index-1; + bottom: 0; + left: calc(-1 * $s-80); height: 100%; - width: $s-24; - padding: 0; - z-index: $z-index-4; + width: $s-80; + background-image: linear-gradient( + to left, + var(--palette-button-shadow-initial) 0%, + var(--palette-button-shadow-final) 100% + ); + pointer-events: none; + } + &:hover { svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } - &::after { - content: ""; - position: absolute; - z-index: $z-index-1; - bottom: 0; - left: calc(-1 * $s-80); - height: 100%; - width: $s-80; - background-image: linear-gradient( - to left, - var(--palette-button-shadow-initial) 0%, - var(--palette-button-shadow-final) 100% - ); - pointer-events: none; - } - &:hover { - svg { - stroke: var(--button-foreground-hover); - } - } - &:disabled { - svg { - stroke: var(--button-background-color-disabled); - } - &::after { - background-image: none; - } + stroke: var(--button-foreground-hover); } } - .left-arrow { - &::after { - left: $s-24; - background-image: linear-gradient( - to right, - var(--palette-button-shadow-initial) 0%, - var(--palette-button-shadow-final) 100% - ); + &:disabled { + svg { + stroke: var(--button-background-color-disabled); } - &.disabled ::after { + &::after { background-image: none; } - - svg { - transform: rotate(180deg); - } - } - - .color-palette-content { - display: flex; - overflow: hidden; - - .color-palette-inside { - display: flex; - gap: $s-8; - } - .color-cell { - display: grid; - grid-template-columns: 100%; - grid-template-rows: auto 1fr; - justify-items: center; - height: 100%; - width: $s-80; - &.is-not-library-color { - width: $s-64; - } - &.no-text { - @include flexCenter; - width: $s-32; - } - } } } +.left-arrow { + &::after { + left: $s-24; + background-image: linear-gradient( + to right, + var(--palette-button-shadow-initial) 0%, + var(--palette-button-shadow-final) 100% + ); + } + &.disabled ::after { + background-image: none; + } + + svg { + transform: rotate(180deg); + } +} + +.color-palette-content { + display: flex; + overflow: hidden; + + .color-palette-inside { + display: flex; + gap: $s-8; + } + .color-cell { + display: grid; + grid-template-columns: 100%; + grid-template-rows: auto 1fr; + justify-items: center; + height: 100%; + width: $s-80; + &.is-not-library-color { + width: $s-64; + } + &.no-text { + @include flexCenter; + width: $s-32; + } + } +} + +.color-palette-empty { + @include titleTipography; + color: var(--palette-text-color); +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss index 460ae6024..1fd4dde76 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss @@ -38,11 +38,13 @@ .parent-selected & { background-color: var(--layer-child-row-background-color); + box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-child-row-background-color); } .parent-selected &.highlight, .parent-selected &:hover { background-color: var(--layer-row-background-color-hover); + box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-hover); } &.dnd-over-bot { @@ -60,6 +62,7 @@ .layer-row.highlight &, .layer-row:hover & { background-color: var(--layer-row-background-color-selected); + box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-selected); } .layer-row.type-comp & { color: var(--layer-row-component-foreground-color); @@ -105,6 +108,7 @@ @include buttonStyle; position: relative; justify-self: flex-end; + width: $s-16; height: 100%; width: $s-24; padding: 0 $s-8 0 $s-4; @@ -137,23 +141,23 @@ .absolute { position: absolute; background-color: var(--layer-row-foreground-color); - height: $s-12; - width: $s-12; - border-radius: $br-2; opacity: $op-4; + width: $s-12; + height: $s-12; + border-radius: $br-2; - .layer-row.hidden { + .layer-row.hidden & { opacity: $op-1; } - .layer-row.type-comp { + .layer-row.type-comp & { background-color: var(--layer-row-component-foreground-color); } - .layer-row.highlight, - .layer-row:hover { + .layer-row.highlight &, + .layer-row:hover & { opacity: $op-4; background-color: var(--layer-row-foreground-color-hover); } - .layer-row.selected { + .layer-row.selected & { background-color: var(--layer-row-foreground-color-selected); } } @@ -171,23 +175,23 @@ @extend .button-icon-small; stroke: var(--icon-foreground); - .layer-row.hidden { + .layer-row.hidden & { opacity: $op-7; } - .layer-row.selected { + .layer-row.selected & { stroke: var(--layer-row-foreground-color-selected); } - .layer-row.type-comp { + .layer-row.type-comp & { stroke: var(--layer-row-component-foreground-color); } - .layer-row.highlight, - .layer-row:hover { + .layer-row.highlight &, + .layer-row:hover & { opacity: $op-10; stroke: var(--layer-row-foreground-color-hover); } } - .layer-row.selected { + .layer-row.selected & { background-color: var(--layer-row-background-color-selected); } &.inverse svg { @@ -208,15 +212,15 @@ @extend .button-icon-small; stroke: var(--icon-foreground); - .layer-row.hidden { + .layer-row.hidden & { opacity: $op-7; } - .type-comp { + .type-comp & { stroke: var(--layer-row-component-foreground-color); } } - .element-actions.selected { + .element-actions.selected & { display: flex; opacity: $op-0; @@ -225,16 +229,15 @@ } } - .layer-row.highlight, - .layer-row:hover { + .layer-row.highlight &, + .layer-row:hover & { display: flex; svg { opacity: $op-10; stroke: var(--layer-row-foreground-color-hover); } } - - .layer-row.selected { + .layer-row.selected & { display: flex; svg { stroke: var(--layer-row-foreground-color-selected); @@ -253,7 +256,6 @@ height: $s-16; min-width: calc(var(--depth) * var(--layer-indentation-size)); } - .filtered { min-width: $s-12; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index 41ba3448c..122c32ea8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs @@ -194,7 +194,7 @@ :placeholder (tr "workspace.options.search-font")}] (when (and recent-fonts show-recent) [* - [:p {:class :title} (tr "workspace.options.recent-fonts")] + [:p {:class (stl/css :title)} (tr "workspace.options.recent-fonts")] (for [[idx font] (d/enumerate recent-fonts)] [:& font-item {:key (dm/str "font-" idx) :font font diff --git a/frontend/src/app/main/ui/workspace/text_palette.cljs b/frontend/src/app/main/ui/workspace/text_palette.cljs index f2b5ef35c..da432d528 100644 --- a/frontend/src/app/main/ui/workspace/text_palette.cljs +++ b/frontend/src/app/main/ui/workspace/text_palette.cljs @@ -5,7 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.text-palette - (:require-macros [app.main.style :refer [css]]) + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.main.data.workspace.texts :as dwt] @@ -14,7 +14,6 @@ [app.main.store :as st] [app.main.ui.context :as ctx] [app.main.ui.icons :as i] - [app.util.dom :as dom] [app.util.i18n :refer [tr]] [app.util.object :as obj] [cuerdas.core :as str] @@ -42,11 +41,11 @@ :attrs attrs})) selected-ids))))] [:div {:on-click handle-click - :class (dom/classnames (css :typography-item) true - (css :mid-item) (<= size 72) - (css :small-item) (<= size 64))} + :class (stl/css-case :typography-item true + :mid-item (<= size 72) + :small-item (<= size 64))} [:div - {:class (dom/classnames (css :typography-name) true) + {:class (stl/css :typography-name) :title (:name typography) :style {:font-family (:font-family typography) :font-weight (:font-weight typography) @@ -54,9 +53,9 @@ (:name typography)] (when-not name-only? [:* - [:div {:class (dom/classnames (css :typography-font) true)} + [:div {:class (stl/css :typography-font)} (:name font-data)] - [:div {:class (dom/classnames (css :typography-data) true)} + [:div {:class (stl/css :typography-data)} (str (:font-size typography) "px | " (:name variant-data))]])])) (mf/defc palette @@ -132,25 +131,25 @@ (when (not= 0 (:offset @state)) (swap! state assoc :offset 0))) - [:div {:class (dom/classnames (css :text-palette) true) + [:div {:class (stl/css :text-palette) :style #js {"--height" (str size "px")}} (when show-arrows? - [:button {:class (dom/classnames (css :left-arrow) true) + [:button {:class (stl/css :left-arrow) :disabled (= offset 0) :on-click on-left-arrow-click} i/arrow-refactor]) - [:div {:class (dom/classnames (css :text-palette-content) true) + [:div {:class (stl/css :text-palette-content) :ref container :on-wheel on-wheel} (if (empty? current-typographies) - [:div {:class (dom/classnames (css :text-palette-empty) true) + [:div {:class (stl/css :text-palette-empty) :style {:position "absolute" :left "50%" :top "50%" :transform "translate(-50%, -50%)"}} (tr "workspace.libraries.colors.empty-typography-palette")] [:div - {:class (dom/classnames (css :text-palette-inside) true) + {:class (stl/css :text-palette-inside) :style {:position "relative" :max-width (str width "px") :right (str (* offset-step offset) "px")}} @@ -163,7 +162,7 @@ :size size}])])] (when show-arrows? - [:button {:class (dom/classnames (css :right-arrow) true) + [:button {:class (stl/css :right-arrow) :disabled (= offset max-offset) :on-click on-right-arrow-click} i/arrow-refactor])])) diff --git a/frontend/src/app/main/ui/workspace/text_palette.scss b/frontend/src/app/main/ui/workspace/text_palette.scss index 421511c4d..e5e570b2b 100644 --- a/frontend/src/app/main/ui/workspace/text_palette.scss +++ b/frontend/src/app/main/ui/workspace/text_palette.scss @@ -9,126 +9,132 @@ .text-palette { height: 100%; display: flex; - .left-arrow, - .right-arrow { - @include buttonStyle; - @include flexCenter; - position: relative; +} +.left-arrow, +.right-arrow { + @include buttonStyle; + @include flexCenter; + position: relative; + height: 100%; + width: $s-24; + padding: 0; + z-index: $z-index-2; + svg { + @extend .button-icon; + } + &::after { + content: ""; + position: absolute; + bottom: 0; + left: calc(-1 * $s-80); height: 100%; - width: $s-24; - padding: 0; - z-index: $z-index-2; + width: $s-80; + z-index: $z-index-1; + background-image: linear-gradient( + to left, + var(--palette-button-shadow-initial) 0%, + var(--palette-button-shadow-final) 100% + ); + pointer-events: none; + } + &:hover { svg { - @extend .button-icon; - } - &::after { - content: ""; - position: absolute; - bottom: 0; - left: calc(-1 * $s-80); - height: 100%; - width: $s-80; - z-index: $z-index-1; - background-image: linear-gradient( - to left, - var(--palette-button-shadow-initial) 0%, - var(--palette-button-shadow-final) 100% - ); - pointer-events: none; - } - &:hover { - svg { - stroke: var(--button-foreground-hover); - } - } - &:disabled { - svg { - stroke: var(--button-background-color-disabled); - } - &::after { - background-image: none; - } + stroke: var(--button-foreground-hover); } } - .left-arrow { - &::after { - left: $s-24; - background-image: linear-gradient( - to right, - var(--palette-button-shadow-initial) 0%, - var(--palette-button-shadow-final) 100% - ); + &:disabled { + svg { + stroke: var(--button-background-color-disabled); } - &.disabled ::after { + &::after { background-image: none; } - - svg { - transform: rotate(180deg); - } - } - - .text-palette-content { - display: flex; - overflow: hidden; - - .text-palette-inside { - display: flex; - gap: $s-8; - } - .typography-item { - @include titleTipography; - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - height: 100%; - width: $s-136; - padding: $s-8; - border-radius: $br-8; - background-color: var(--palette-text-background-color); - &:first-child { - margin-left: $s-8; - } - .typography-name { - @include tabTitleTipography; - @include textEllipsis; - height: $s-16; - width: $s-120; - color: var(--palette-text-color-selected); - } - .typography-font { - @include textEllipsis; - height: $s-16; - width: $s-120; - color: var(--palette-text-color); - } - .typography-data { - @include textEllipsis; - height: $s-16; - width: $s-120; - color: var(--palette-text-color); - } - &.mid-item { - .typography-name { - height: $s-16; - } - .typography-data { - display: none; - } - } - &.small-item { - .typography-name { - height: $s-12; - } - .typography-data, - .typography-font { - display: none; - } - } - &:hover { - background-color: var(--palette-text-background-color-hover); - } - } } } +.left-arrow { + &::after { + left: $s-24; + background-image: linear-gradient( + to right, + var(--palette-button-shadow-initial) 0%, + var(--palette-button-shadow-final) 100% + ); + } + &.disabled ::after { + background-image: none; + } + + svg { + transform: rotate(180deg); + } +} + +.text-palette-content { + display: flex; + overflow: hidden; +} + +.text-palette-inside { + display: flex; + gap: $s-8; +} + +.typography-item { + @include titleTipography; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + height: 100%; + width: $s-136; + padding: $s-8; + border-radius: $br-8; + background-color: var(--palette-text-background-color); + &:first-child { + margin-left: $s-8; + } + .typography-name { + @include tabTitleTipography; + @include textEllipsis; + height: $s-16; + width: $s-120; + color: var(--palette-text-color-selected); + } + .typography-font { + @include textEllipsis; + height: $s-16; + width: $s-120; + color: var(--palette-text-color); + } + .typography-data { + @include textEllipsis; + height: $s-16; + width: $s-120; + color: var(--palette-text-color); + } + &.mid-item { + .typography-name { + height: $s-16; + } + .typography-data { + display: none; + } + } + &.small-item { + .typography-name { + height: $s-12; + } + .typography-data, + .typography-font { + display: none; + } + } + &:hover { + background-color: var(--palette-text-background-color-hover); + } +} + +.text-palette-empty { + @include titleTipography; + color: var(--palette-text-color); +}