🐛 Fix some text and background colors

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 {

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);
+}

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);
 

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
+           [:input {:class (stl/css :cancel-button)
-            {: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)
+  (let [state           (mf/deref refs/export)
-        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
+        color  (cond
-                 (cond
+                 error?         clr/new-danger
-                   error?         clr/new-danger
+                 healthy?       clr/new-primary
-                   healthy?       clr/new-primary
+                 (not healthy?) clr/new-warning)
-                   (not healthy?) clr/new-warning)
-                 (cond
-                 error?         clr/danger
-                 healthy?       clr/primary
-                 (not healthy?) clr/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")]
+                       :on-click retry-last-export}
-             [:p {:class (stl/css :progress)} (dm/str progress " / " total)])]
+              (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

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);
     }

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
+    [:div {:class (stl/css-case  :color-cell true
-                                  (css :is-not-library-color) (nil? (:id color))
+                                  :is-not-library-color (nil? (:id color))
-                                  (css :no-text) (<= size 64))
+                                  :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
+    [:div {:class (stl/css-case :color-palette true
-                                  (css :no-text) (< size 64))
+                                :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])]))
 

frontend/src/app/main/ui/workspace/color_palette.scss

@@ -9,89 +9,94 @@
 .color-palette {
   height: 100%;
   display: flex;
+}
 
-  .left-arrow,
+.left-arrow,
-  .right-arrow {
+.right-arrow {
-    @include buttonStyle;
+  @include buttonStyle;
-    @include flexCenter;
+  @include flexCenter;
-    position: relative;
+  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;
+    width: $s-80;
-    padding: 0;
+    background-image: linear-gradient(
-    z-index: $z-index-4;
+      to left,
+      var(--palette-button-shadow-initial) 0%,
+      var(--palette-button-shadow-final) 100%
+    );
+    pointer-events: none;
+  }
+  &:hover {
     svg {
-      @extend .button-icon;
+      stroke: var(--button-foreground-hover);
-      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;
-      }
     }
   }
-  .left-arrow {
+  &:disabled {
-    &::after {
+    svg {
-      left: $s-24;
+      stroke: var(--button-background-color-disabled);
-      background-image: linear-gradient(
-        to right,
-        var(--palette-button-shadow-initial) 0%,
-        var(--palette-button-shadow-final) 100%
-      );
     }
-    &.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);
+}

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.highlight &,
-  .layer-row:hover {
+  .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.highlight &,
-    .layer-row:hover {
+    .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.highlight &,
-  .layer-row:hover {
+  .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;
 }

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

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
+           :class (stl/css-case :typography-item true
-                                  (css :mid-item) (<= size 72)
+                                :mid-item (<= size 72)
-                                  (css :small-item) (<= size 64))}
+                                :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])]))
 

frontend/src/app/main/ui/workspace/text_palette.scss

@@ -9,126 +9,132 @@
 .text-palette {
   height: 100%;
   display: flex;
-  .left-arrow,
+}
-  .right-arrow {
+.left-arrow,
-    @include buttonStyle;
+.right-arrow {
-    @include flexCenter;
+  @include buttonStyle;
-    position: relative;
+  @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;
+    width: $s-80;
-    padding: 0;
+    z-index: $z-index-1;
-    z-index: $z-index-2;
+    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(--button-foreground-hover);
-    }
-    &::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;
-      }
     }
   }
-  .left-arrow {
+  &:disabled {
-    &::after {
+    svg {
-      left: $s-24;
+      stroke: var(--button-background-color-disabled);
-      background-image: linear-gradient(
-        to right,
-        var(--palette-button-shadow-initial) 0%,
-        var(--palette-button-shadow-final) 100%
-      );
     }
-    &.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);
+}