From dc4bf82684badd89ad4b5f1fe8479640761604ca Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Fri, 29 Dec 2023 17:48:11 +0100
Subject: [PATCH] :recycle: Remove new-css-system on assets tab

---
 .../common/refactor/common-refactor.scss      |   4 -
 .../styles/common/refactor/design-tokens.scss |   4 +
 frontend/resources/styles/main-default.scss   |   1 -
 .../styles/main/partials/sidebar-assets.scss  | 538 ------------------
 .../src/app/main/ui/components/forms.scss     |   3 +-
 .../app/main/ui/workspace/sidebar/assets.cljs | 143 ++---
 .../app/main/ui/workspace/sidebar/assets.scss | 224 ++++----
 .../ui/workspace/sidebar/assets/colors.cljs   | 366 ++++--------
 .../ui/workspace/sidebar/assets/colors.scss   | 161 +++---
 .../ui/workspace/sidebar/assets/common.cljs   |  73 +--
 .../ui/workspace/sidebar/assets/common.scss   |  58 +-
 .../workspace/sidebar/assets/components.cljs  | 445 +++++----------
 .../workspace/sidebar/assets/components.scss  | 381 +++++++------
 .../sidebar/assets/file_library.cljs          | 298 +++-------
 .../sidebar/assets/file_library.scss          |  83 +--
 .../ui/workspace/sidebar/assets/groups.cljs   | 159 ++----
 .../ui/workspace/sidebar/assets/groups.scss   |  91 +--
 .../sidebar/assets/typographies.cljs          | 328 ++++-------
 .../sidebar/assets/typographies.scss          |  63 +-
 19 files changed, 1140 insertions(+), 2283 deletions(-)
 delete mode 100644 frontend/resources/styles/main/partials/sidebar-assets.scss

diff --git a/frontend/resources/styles/common/refactor/common-refactor.scss b/frontend/resources/styles/common/refactor/common-refactor.scss
index a200893e95..c1033735c8 100644
--- a/frontend/resources/styles/common/refactor/common-refactor.scss
+++ b/frontend/resources/styles/common/refactor/common-refactor.scss
@@ -34,7 +34,3 @@ $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 a69026ba08..f9c95e3f09 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -314,3 +314,7 @@
   --viewer-thumbnail-border-color: var(--color-accent-primary);
   --viewer-thumbnail-background-color-selected: var(--color-accent-primary-muted);
 }
+
+#app {
+  background-color: var(--app-background);
+}
diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss
index a961862db5..9271b633a6 100644
--- a/frontend/resources/styles/main-default.scss
+++ b/frontend/resources/styles/main-default.scss
@@ -72,7 +72,6 @@
 @import "main/partials/project-bar";
 @import "main/partials/sidebar";
 @import "main/partials/sidebar-align-options";
-@import "main/partials/sidebar-assets";
 @import "main/partials/sidebar-document-history";
 @import "main/partials/sidebar-element-options";
 @import "main/partials/sidebar-interactions";
diff --git a/frontend/resources/styles/main/partials/sidebar-assets.scss b/frontend/resources/styles/main/partials/sidebar-assets.scss
deleted file mode 100644
index aa1750b8dd..0000000000
--- a/frontend/resources/styles/main/partials/sidebar-assets.scss
+++ /dev/null
@@ -1,538 +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
-
-.assets-bar {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  height: 100%;
-
-  .assets-bar-title {
-    color: $color-gray-10;
-    font-size: $fs14;
-    margin: $size-2 $size-2 0 $size-2;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    & .libraries-button {
-      margin-left: auto;
-      display: flex;
-      align-items: center;
-
-      svg {
-        fill: $color-gray-30;
-        height: 16px;
-        width: 16px;
-        padding-right: 6px;
-      }
-    }
-
-    & .libraries-button:hover {
-      color: $color-primary;
-
-      & svg {
-        fill: $color-primary;
-      }
-    }
-  }
-
-  .search-block {
-    border: 1px solid $color-gray-30;
-    margin: $size-2 $size-2 0 $size-2;
-    padding: $size-1 $size-2;
-    display: flex;
-    align-items: center;
-
-    &:hover {
-      border-color: $color-gray-20;
-    }
-
-    &:focus-within {
-      border-color: $color-primary;
-    }
-
-    & .search-input {
-      background-color: $color-gray-50;
-      border: none;
-      color: $color-gray-10;
-      font-size: $fs12;
-      margin: 0;
-      padding: 0;
-      flex-grow: 1;
-
-      &:focus {
-        color: lighten($color-gray-10, 8%);
-        outline: none;
-      }
-    }
-
-    & .search-icon {
-      display: flex;
-      align-items: center;
-
-      svg {
-        fill: $color-gray-30;
-        height: 16px;
-        width: 16px;
-      }
-
-      &.close {
-        transform: rotate(45deg);
-        cursor: pointer;
-      }
-    }
-  }
-
-  .input-select {
-    background-color: $color-gray-50;
-    color: $color-gray-10;
-    border: 1px solid transparent;
-    border-bottom-color: $color-gray-40;
-    padding: $size-1;
-    margin: $size-2 $size-2 $size-4 $size-2;
-
-    &:focus {
-      color: lighten($color-gray-10, 8%);
-    }
-
-    &:active {
-      border-color: $color-primary;
-    }
-
-    option {
-      background: $color-white;
-      color: $color-gray-60;
-      font-size: $fs12;
-    }
-  }
-
-  .collapse-library {
-    margin-right: $size-2;
-    flex-shrink: inherit; // Inheriting shrink behaviour
-
-    &.open svg {
-      transform: rotate(90deg);
-    }
-  }
-
-  .library-bar {
-    cursor: pointer;
-  }
-
-  .listing-options {
-    background-color: $color-gray-60;
-    display: flex;
-    align-items: center;
-    padding: $size-4 $size-2 0 $size-2;
-
-    .selected-count {
-      color: $color-primary;
-      font-size: $fs12;
-    }
-
-    .listing-option-btn {
-      cursor: pointer;
-      margin-left: $size-2;
-
-      &.first {
-        margin-left: auto;
-      }
-
-      svg {
-        fill: $color-gray-20;
-        height: 16px;
-        width: 16px;
-      }
-    }
-  }
-
-  .asset-section {
-    background-color: $color-gray-60;
-    padding: $size-2;
-    font-size: $fs12;
-    color: $color-gray-20;
-    /* TODO: see if this is useful, or is better to leave only
-             one scroll bar in the whole sidebar
-             (also see .asset-list) */
-    // max-height: 30rem;
-    // overflow-y: scroll;
-
-    // First child is the listing options buttons
-    &:not(:nth-child(2)) {
-      border-top: 1px solid $color-gray-50;
-    }
-
-    .asset-title {
-      display: flex;
-      cursor: pointer;
-      font-size: $fs12;
-      text-transform: uppercase;
-
-      & .num-assets {
-        color: $color-gray-30;
-      }
-
-      & svg {
-        height: 8px;
-        width: 8px;
-        fill: $color-gray-30;
-        margin-right: 4px;
-        transform: rotate(90deg);
-      }
-
-      &.closed svg {
-        transform: rotate(0deg);
-        transition: transform 0.3s;
-      }
-    }
-
-    .group-title {
-      display: flex;
-      cursor: pointer;
-      margin-top: $size-2;
-      margin-bottom: $size-1;
-      color: $color-white;
-
-      & svg {
-        height: 8px;
-        width: 8px;
-        fill: $color-white;
-        margin-right: 4px;
-        transform: rotate(90deg);
-      }
-
-      &.closed svg {
-        transform: rotate(0deg);
-        transition: transform 0.3s;
-      }
-
-      & .dim {
-        color: $color-gray-40;
-      }
-    }
-
-    .assets-button {
-      margin-left: auto;
-      cursor: pointer;
-
-      & svg {
-        width: 0.7rem;
-        height: 0.7rem;
-        fill: #f0f0f0;
-      }
-
-      &:hover svg {
-        fill: $color-primary;
-      }
-    }
-
-    .asset-title + .asset-grid {
-      margin-top: $size-2;
-    }
-
-    .asset-grid {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      grid-auto-rows: 6vh;
-      column-gap: 0.5rem;
-      row-gap: 0.5rem;
-
-      &.big {
-        grid-template-columns: repeat(2, 1fr);
-        grid-auto-rows: 10vh;
-
-        .three-row & {
-          grid-template-columns: repeat(3, 1fr);
-        }
-
-        .four-row & {
-          grid-template-columns: repeat(4, 1fr);
-        }
-
-        .grid-cell {
-          padding: $size-1;
-
-          & svg {
-            height: 10vh;
-          }
-        }
-      }
-    }
-
-    .grid-cell {
-      background-color: $color-canvas;
-      border-radius: $br4;
-      border: 2px solid transparent;
-      overflow: hidden;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: $size-2;
-      position: relative;
-      cursor: pointer;
-
-      & img {
-        max-height: 100%;
-        max-width: 100%;
-        height: auto;
-        width: auto;
-        pointer-events: none;
-      }
-    }
-
-    .cell-name {
-      background-color: $color-gray-60;
-      font-size: $fs9;
-      display: none;
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-      padding: 3px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-      &.editing {
-        display: block;
-      }
-
-      .editable-label-input {
-        border: 1px solid $color-gray-20;
-        border-radius: $br3;
-        font-size: $fs12;
-        padding: 2px;
-        margin: 0;
-        height: unset;
-        width: 100%;
-      }
-
-      .editable-label-close {
-        display: none;
-      }
-    }
-
-    .grid-cell:hover {
-      border: 2px solid $color-primary;
-
-      & .cell-name {
-        display: block;
-      }
-    }
-
-    .grid-cell.selected {
-      border: 2px solid $color-primary;
-    }
-
-    .grid-placeholder {
-      border: 2px solid $color-gray-20;
-      border-radius: $br4;
-    }
-
-    .drop-space {
-      height: 10px;
-    }
-
-    .typography-container {
-      position: relative;
-
-      &:last-child {
-        padding-bottom: 0.5em;
-      }
-    }
-
-    .drag-counter {
-      position: absolute;
-      top: 5px;
-      left: 4px;
-      width: 16px;
-      height: 16px;
-      background-color: $color-primary;
-      border-radius: 50%;
-      color: $color-black;
-      font-size: $fs12;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .asset-title + .asset-enum {
-      margin-top: $size-2;
-    }
-
-    .asset-enum {
-      .enum-item {
-        position: relative;
-        display: flex;
-        align-items: center;
-        margin-bottom: $size-2;
-        cursor: pointer;
-
-        & > svg,
-        & > img {
-          background-color: $color-canvas;
-          border-radius: $br4;
-          border: 2px solid transparent;
-          height: 24px;
-          width: 24px;
-          margin-right: $size-2;
-        }
-
-        .item-name {
-          width: calc(100% - 24px - #{$size-2});
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          display: block;
-
-          &.editing {
-            display: flex;
-            align-items: center;
-
-            .editable-label-input {
-              height: 24px;
-            }
-
-            .editable-label-close {
-              display: none;
-            }
-          }
-        }
-      }
-
-      .enum-item:hover,
-      .enum-item.selected {
-        color: $color-primary;
-      }
-
-      .grid-placeholder {
-        margin-bottom: 5px;
-      }
-    }
-
-    /* TODO: see if this is useful, or is better to leave only
-             one scroll bar in the whole sidebar
-             (also see .asset-section) */
-    // .asset-list {
-    //   max-height: 30rem;
-    //   overflow-y: scroll;
-    // }
-
-    .asset-list-item {
-      display: flex;
-      align-items: center;
-      border: 1px solid transparent;
-      border-radius: $br3;
-      margin-top: $size-1;
-      padding: 2px;
-      font-size: $fs12;
-      color: $color-white;
-      cursor: pointer;
-      position: relative;
-
-      .name-block {
-        color: $color-gray-20;
-        width: calc(100% - 24px - #{$size-2});
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-
-      & span {
-        margin-left: $size-1;
-        color: $color-gray-30;
-        text-transform: uppercase;
-      }
-
-      &.selected {
-        border: 1px solid $color-primary;
-      }
-    }
-
-    .context-menu {
-      position: fixed;
-      top: 10px;
-      left: 10px;
-    }
-
-    .advanced-options {
-      border-color: $color-black;
-      background-color: $color-gray-60;
-
-      .input-text,
-      .input-select,
-      .adv-typography-name {
-        background-color: $color-gray-60;
-      }
-    }
-
-    .dragging {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: color.adjust($color-primary, $alpha: -0.5);
-    }
-  }
-}
-
-.modal-create-color {
-  position: relative;
-  background-color: $color-white;
-  padding: 4rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  & .sketch-picker,
-  .chrome-picker {
-    box-shadow: none !important;
-    border: 1px solid $color-gray-10 !important;
-    border-radius: $br0 !important;
-
-    & input {
-      background-color: $color-white;
-    }
-  }
-
-  & .close {
-    position: absolute;
-    right: 1rem;
-    transform: rotate(45deg);
-    top: 1rem;
-
-    svg {
-      fill: $color-black;
-      height: 20px;
-      width: 20px;
-
-      &:hover {
-        fill: $color-danger;
-      }
-    }
-  }
-
-  & .btn-primary {
-    width: 10rem;
-    padding: 0.5rem;
-    margin-top: 1rem;
-  }
-}
-
-.modal-create-color-title {
-  color: $color-black;
-  font-size: $fs24;
-  font-weight: $fw400;
-}
-
-.libraries-wrapper {
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss
index e0d10993b5..ec64c521c8 100644
--- a/frontend/src/app/main/ui/components/forms.scss
+++ b/frontend/src/app/main/ui/components/forms.scss
@@ -24,7 +24,7 @@
     cursor: pointer;
     color: var(--modal-title-foreground-color);
     text-transform: uppercase;
-
+    margin-bottom: $s-8;
     input {
       @extend .input-element;
       color: var(--input-foreground-color-active);
@@ -143,6 +143,7 @@
 
 .hint {
   @include titleTipography;
+  color: var(--modal-text-foreground-color);
   width: 99%;
 }
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
index f82f6bb8d3..cb67bf83df 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
@@ -19,7 +19,6 @@
    [app.main.ui.workspace.sidebar.assets.file-library :refer [file-library]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
-   [app.util.keyboard :as kbd]
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
@@ -71,7 +70,6 @@
   []
   (let [components-v2  (mf/use-ctx ctx/components-v2)
         read-only?     (mf/use-ctx ctx/workspace-read-only?)
-        new-css-system (mf/use-ctx ctx/new-css-system)
         filters*       (mf/use-state
                         {:term ""
                          :section "all"
@@ -104,17 +102,8 @@
 
         on-search-term-change
         (mf/use-fn
-         (mf/deps new-css-system)
          (fn [event]
-          ;;  NOTE: When old-css-system is removed this function will recibe value and event
-          ;;  Let won't be necessary any more
-           (let [value (if ^boolean new-css-system
-                         event
-                         (dom/get-target-val event))]
-             (swap! filters* assoc :term value))))
-
-        on-search-clear-click
-        (mf/use-fn #(swap! filters* assoc :term ""))
+           (swap! filters* assoc :term event)))
 
         on-section-filter-change
         (mf/use-fn
@@ -125,23 +114,12 @@
                              (dom/get-attribute $ "data-test")))]
              (swap! filters* assoc :section value :open-menu false))))
 
-        handle-key-down
-        (mf/use-fn
-         (fn [event]
-           (let [enter? (kbd/enter? event)
-                 esc?   (kbd/esc? event)
-                 node   (dom/get-target event)]
-
-             (when ^boolean enter? (dom/blur! node))
-             (when ^boolean esc?   (dom/blur! node)))))
-
         show-libraries-dialog
         (mf/use-fn
          (fn []
            (modal/show! :libraries-dialog {})
            (modal/allow-click-outside!)))
 
-
         on-open-menu
         (mf/use-fn  #(swap! filters* update :open-menu not))
 
@@ -175,86 +153,43 @@
                           :option-handler on-section-filter-change
                           :data-test      "typographies"}]))]
 
-    (if ^boolean new-css-system
-      [:div  {:class (stl/css :assets-bar)}
-       [:div {:class (stl/css :assets-header)}
-        (when-not ^boolean read-only?
-          [:button {:class (stl/css :libraries-button)
-                    :on-click show-libraries-dialog}
-           [:span {:class (stl/css :libraries-icon)}
-            i/library-refactor]
-           (tr "workspace.assets.libraries")])
+    [:div  {:class (stl/css :assets-bar)}
+     [:div {:class (stl/css :assets-header)}
+      (when-not ^boolean read-only?
+        [:button {:class (stl/css :libraries-button)
+                  :on-click show-libraries-dialog}
+         [:span {:class (stl/css :libraries-icon)}
+          i/library-refactor]
+         (tr "workspace.assets.libraries")])
 
-        [:div {:class (stl/css :search-wrapper)}
-         [:& search-bar {:on-change on-search-term-change
-                        :value term
-                        :placeholder (tr "workspace.assets.search")}
-         [:button
-          {:on-click on-open-menu
-           :class (stl/css :section-button)}
-          i/filter-refactor]]
-        [:& context-menu-a11y
-         {:on-close on-menu-close
-          :selectable true
-          :selected section
-          :show menu-open?
-          :fixed? true
-          :min-width? true
-          :top 152
-          :left 64
-          :options options
-          :workspace? true}]
-         [:button {:class (stl/css :sort-button)
-                   :on-click toggle-ordering}
-          (if reverse-sort?
-            i/asc-sort-refactor
-            i/desc-sort-refactor)]]]
+      [:div {:class (stl/css :search-wrapper)}
+       [:& search-bar {:on-change on-search-term-change
+                       :value term
+                       :placeholder (tr "workspace.assets.search")}
+        [:button
+         {:on-click on-open-menu
+          :class (stl/css :section-button)}
+         i/filter-refactor]]
+       [:& context-menu-a11y
+        {:on-close on-menu-close
+         :selectable true
+         :selected section
+         :show menu-open?
+         :fixed? true
+         :min-width? true
+         :top 152
+         :left 64
+         :options options
+         :workspace? true}]
+       [:button {:class (stl/css :sort-button)
+                 :on-click toggle-ordering}
+        (if reverse-sort?
+          i/asc-sort-refactor
+          i/desc-sort-refactor)]]]
 
-       [:& (mf/provider cmm/assets-filters) {:value filters}
-        [:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering}
-         [:& (mf/provider cmm/assets-toggle-list-style) {:value toggle-list-style}
-          [:div {:class (stl/css :libraries-wrapper)}
-           [:& assets-local-library {:filters filters}]
-           [:& assets-libraries {:filters filters}]]]]]]
-
-      [:div.assets-bar
-       [:div.tool-window
-        [:div.tool-window-content
-         [:div.assets-bar-title
-          (tr "workspace.assets.assets")
-
-          (when-not ^boolean read-only?
-            [:div.libraries-button {:on-click show-libraries-dialog}
-             i/text-align-justify
-             (tr "workspace.assets.libraries")])]
-         [:div.search-block
-          [:input.search-input
-           {:placeholder (tr "workspace.assets.search")
-            :type "text"
-            :value term
-            :on-change on-search-term-change
-            :on-key-down handle-key-down}]
-
-          (if ^boolean (str/empty? term)
-            [:div.search-icon
-             i/search]
-            [:div.search-icon.close
-             {:on-click on-search-clear-click}
-             i/close])]
-
-         [:select.input-select {:value (:section filters)
-                                :data-mousetrap-dont-stop true
-                                :on-change on-section-filter-change}
-          [:option {:value "all"} (tr "workspace.assets.box-filter-all")]
-          [:option {:value "components"} (tr "workspace.assets.components")]
-          (when-not components-v2
-            [:option {:value "graphics"} (tr "workspace.assets.graphics")])
-          [:option {:value "colors"} (tr "workspace.assets.colors")]
-          [:option {:value "typographies"} (tr "workspace.assets.typography")]]]]
-
-       [:& (mf/provider cmm/assets-filters) {:value filters}
-        [:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering}
-         [:& (mf/provider cmm/assets-toggle-list-style) {:value toggle-list-style}
-          [:div.libraries-wrapper
-           [:& assets-local-library {:filters filters}]
-           [:& assets-libraries {:filters filters}]]]]]])))
+     [:& (mf/provider cmm/assets-filters) {:value filters}
+      [:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering}
+       [:& (mf/provider cmm/assets-toggle-list-style) {:value toggle-list-style}
+        [:div {:class (stl/css :libraries-wrapper)}
+         [:& assets-local-library {:filters filters}]
+         [:& assets-libraries {:filters filters}]]]]]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss
index 82f81a7ac5..dd8ebf217a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss
@@ -10,121 +10,129 @@
   position: relative;
   height: 100%;
   overflow: hidden;
+}
 
-  .libraries-button {
-    @include tabTitleTipography;
-    @extend .button-secondary;
-    gap: $s-2;
-    height: $s-32;
-    width: 100%;
-    border-radius: $s-8;
-    margin-bottom: $s-4;
-    .libraries-icon {
-      @include flexCenter;
-      width: $s-24;
-      height: 100%;
-      svg {
-        @include flexCenter;
-        @extend .button-icon;
-        stroke: var(--icon-foreground);
-      }
-    }
-    &:hover {
-      background-color: var(--button-secondary-background-color-hover);
-      color: var(--button-secondary-foreground-color-hover);
-      border: $s-1 solid var(--button-secondary-border-color-hover);
-      svg {
-        stroke: var(--button-secondary-foreground-color-hover);
-      }
-    }
-    &:focus {
-      background-color: var(--button-secondary-background-color-focus);
-      color: var(--button-secondary-foreground-color-focus);
-      border: $s-1 solid var(--button-secondary-border-color-focus);
-      svg {
-        stroke: var(--button-secondary-foreground-color-focus);
-      }
-    }
-  }
-  .section-button {
+.libraries-button {
+  @include tabTitleTipography;
+  @extend .button-secondary;
+  gap: $s-2;
+  height: $s-32;
+  width: 100%;
+  border-radius: $s-8;
+  margin-bottom: $s-4;
+  .libraries-icon {
     @include flexCenter;
-    @include buttonStyle;
-    height: $s-32;
-    width: $s-32;
-    margin: 0;
-    border: 1px solid var(--color-background-tertiary);
-    border-radius: $br-8 $br-2 $br-2 $br-8;
-    background-color: var(--color-background-tertiary);
+    width: $s-24;
+    height: 100%;
     svg {
-      height: $s-16;
-      width: $s-16;
+      @include flexCenter;
+      @extend .button-icon;
       stroke: var(--icon-foreground);
     }
-    &:focus {
-      border: 1px solid var(--input-border-color-focus);
-      outline: 0;
-      background-color: var(--input-background-color-active);
-      color: var(--input-foreground-color-active);
-      svg {
-        background-color: var(--input-background-color-active);
-      }
-    }
-    &:hover {
-      border: 1px solid var(--input-background-color-hover);
-      background-color: var(--input-background-color-hover);
-      svg {
-        background-color: var(--input-background-color-hover);
-        stroke: var(--button-foreground-hover);
-      }
+  }
+  &:hover {
+    background-color: var(--button-secondary-background-color-hover);
+    color: var(--button-secondary-foreground-color-hover);
+    border: $s-1 solid var(--button-secondary-border-color-hover);
+    svg {
+      stroke: var(--button-secondary-foreground-color-hover);
     }
   }
-  .sections-container {
-    @include menuShadow;
-    @include flexColumn;
-    position: absolute;
-    top: $s-84;
-    left: $s-12;
-    width: $s-192;
-    padding: $s-4;
-    border-radius: $br-8;
-    background-color: var(--menu-background-color);
-    z-index: $z-index-2;
-    .section-item {
-      @include titleTipography;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      padding: $s-6;
-      border-radius: $br-8;
-      .section-btn {
-        @include buttonStyle;
-      }
-    }
-  }
-  .libraries-wrapper {
-    overflow-x: hidden;
-    overflow-y: auto;
-    scrollbar-gutter: stable;
-    display: flex;
-    flex-direction: column;
-    padding-left: $s-8;
-    height: calc(100vh - $s-180);
-  }
-  .assets-header {
-    padding: $s-8 $s-12 $s-12 $s-12;
-    .search-wrapper {
-      display: flex;
-      gap: $s-4;
-      .sort-button {
-        @extend .button-secondary;
-        width: $s-32;
-        border-radius: $br-8;
-        svg {
-          @extend .button-icon-small;
-          stroke: var(--icon-foreground);
-        }
-      }
+  &:focus {
+    background-color: var(--button-secondary-background-color-focus);
+    color: var(--button-secondary-foreground-color-focus);
+    border: $s-1 solid var(--button-secondary-border-color-focus);
+    svg {
+      stroke: var(--button-secondary-foreground-color-focus);
     }
   }
 }
+
+.section-button {
+  @include flexCenter;
+  @include buttonStyle;
+  height: $s-32;
+  width: $s-32;
+  margin: 0;
+  border: 1px solid var(--color-background-tertiary);
+  border-radius: $br-8 $br-2 $br-2 $br-8;
+  background-color: var(--color-background-tertiary);
+  svg {
+    height: $s-16;
+    width: $s-16;
+    stroke: var(--icon-foreground);
+  }
+  &:focus {
+    border: 1px solid var(--input-border-color-focus);
+    outline: 0;
+    background-color: var(--input-background-color-active);
+    color: var(--input-foreground-color-active);
+    svg {
+      background-color: var(--input-background-color-active);
+    }
+  }
+  &:hover {
+    border: 1px solid var(--input-background-color-hover);
+    background-color: var(--input-background-color-hover);
+    svg {
+      background-color: var(--input-background-color-hover);
+      stroke: var(--button-foreground-hover);
+    }
+  }
+}
+
+.sections-container {
+  @include menuShadow;
+  @include flexColumn;
+  position: absolute;
+  top: $s-84;
+  left: $s-12;
+  width: $s-192;
+  padding: $s-4;
+  border-radius: $br-8;
+  background-color: var(--menu-background-color);
+  z-index: $z-index-2;
+}
+
+.section-item {
+  @include titleTipography;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: $s-6;
+  border-radius: $br-8;
+}
+
+.section-btn {
+  @include buttonStyle;
+}
+
+.libraries-wrapper {
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  display: flex;
+  flex-direction: column;
+  padding-left: $s-8;
+  height: calc(100vh - $s-180);
+}
+
+.assets-header {
+  padding: $s-8 $s-12 $s-12 $s-12;
+}
+
+.search-wrapper {
+  display: flex;
+  gap: $s-4;
+}
+
+.sort-button {
+  @extend .button-secondary;
+  width: $s-32;
+  border-radius: $br-8;
+  svg {
+    @extend .button-icon-small;
+    stroke: var(--icon-foreground);
+  }
+}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
index 9ea7a1f6c8..d819943033 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
@@ -5,7 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.sidebar.assets.colors
-  (:require-macros [app.main.style :refer [css]])
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
@@ -18,7 +18,6 @@
    [app.main.data.workspace.undo :as dwu]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.color-bullet :as bc]
    [app.main.ui.components.color-bullet-new :as cb]
    [app.main.ui.context :as ctx]
    [app.main.ui.icons :as i]
@@ -59,7 +58,6 @@
 
         menu-state  (mf/use-state cmm/initial-context-menu-state)
         read-only?  (mf/use-ctx ctx/workspace-read-only?)
-        new-css-system (mf/use-ctx ctx/new-css-system)
 
         default-name (cond
                        (:gradient color) (uc/gradient-type->string (dm/get-in color [:gradient :type]))
@@ -193,113 +191,67 @@
           (dom/select-text! input)
           nil)))
 
-    (if ^boolean new-css-system
-      [:div {:class (dom/classnames (css :asset-list-item) true
-                                    (css :selected) (contains? selected (:id color))
-                                    (css :editing) editing?)
-             :style #js {"--bullet-size" "16px"}
-             :on-context-menu on-context-menu
-             :on-click (when-not editing? on-click)
-             :ref item-ref
-             :draggable (and (not read-only?) (not editing?))
-             :on-drag-start on-color-drag-start
-             :on-drag-enter on-drag-enter
-             :on-drag-leave on-drag-leave
-             :on-drag-over dom/prevent-default
-             :on-drop on-drop}
+    [:div {:class (stl/css-case :asset-list-item true
+                                :selected (contains? selected (:id color))
+                                :editing editing?)
+           :style #js {"--bullet-size" "16px"}
+           :on-context-menu on-context-menu
+           :on-click (when-not editing? on-click)
+           :ref item-ref
+           :draggable (and (not read-only?) (not editing?))
+           :on-drag-start on-color-drag-start
+           :on-drag-enter on-drag-enter
+           :on-drag-leave on-drag-leave
+           :on-drag-over dom/prevent-default
+           :on-drop on-drop}
 
-       [:div {:class (dom/classnames (css :bullet-block) true)}
-        [:& cb/color-bullet {:color color
-                             :mini? true}]]
+     [:div {:class (stl/css :bullet-block)}
+      [:& cb/color-bullet {:color color
+                           :mini? true}]]
 
-       (if ^boolean editing?
-         [:input
-          {:type "text"
-           :class (dom/classnames (css :element-name) true)
-           :ref input-ref
-           :on-blur input-blur
-           :on-key-down input-key-down
-           :auto-focus true
-           :default-value (cfh/merge-path-item (:path color) (:name color))}]
+     (if ^boolean editing?
+       [:input
+        {:type "text"
+         :class (stl/css :element-name)
+         :ref input-ref
+         :on-blur input-blur
+         :on-key-down input-key-down
+         :auto-focus true
+         :default-value (cfh/merge-path-item (:path color) (:name color))}]
 
-         [:div {:title (:name color)
-                :class (dom/classnames (css :name-block) true)
-                :on-double-click rename-color-clicked}
+       [:div {:title (:name color)
+              :class (stl/css :name-block)
+              :on-double-click rename-color-clicked}
 
-          (if (= (:name color) default-name)
-            [:span  {:class (dom/classnames (css :default-name-only) true)} default-name]
-            [:*
-             [:span  {:class (dom/classnames (css :name) true)} (:name color)]
-             [:span  {:class (dom/classnames (css :default-name) true)} default-name]])])
+        (if (= (:name color) default-name)
+          [:span  {:class (stl/css :default-name-only)} default-name]
+          [:*
+           [:span  {:class (stl/css :name)} (:name color)]
+           [:span  {:class (stl/css :default-name)} default-name]])])
 
-       (when local?
-         [:& cmm/assets-context-menu
-          {:on-close on-close-menu
-           :state @menu-state
-           :options [(when-not (or multi-colors? multi-assets?)
-                       {:option-name    (tr "workspace.assets.rename")
-                        :id             "assets-rename-color"
-                        :option-handler rename-color-clicked})
-                     (when-not (or multi-colors? multi-assets?)
-                       {:option-name    (tr "workspace.assets.edit")
-                        :id             "assets-edit-color"
-                        :option-handler edit-color-clicked})
+     (when local?
+       [:& cmm/assets-context-menu
+        {:on-close on-close-menu
+         :state @menu-state
+         :options [(when-not (or multi-colors? multi-assets?)
+                     {:option-name    (tr "workspace.assets.rename")
+                      :id             "assets-rename-color"
+                      :option-handler rename-color-clicked})
+                   (when-not (or multi-colors? multi-assets?)
+                     {:option-name    (tr "workspace.assets.edit")
+                      :id             "assets-edit-color"
+                      :option-handler edit-color-clicked})
 
-                     {:option-name    (tr "workspace.assets.delete")
-                      :id             "assets-delete-color"
-                      :option-handler delete-color}
-                     (when-not multi-assets?
-                       {:option-name   (tr "workspace.assets.group")
-                        :id             "assets-group-color"
-                        :option-handler (on-group (:id color))})]}])
+                   {:option-name    (tr "workspace.assets.delete")
+                    :id             "assets-delete-color"
+                    :option-handler delete-color}
+                   (when-not multi-assets?
+                     {:option-name   (tr "workspace.assets.group")
+                      :id             "assets-group-color"
+                      :option-handler (on-group (:id color))})]}])
 
-       (when ^boolean dragging?
-         [:div {:class (dom/classnames (css :dragging) true)}])]
-
-      [:div.asset-list-item
-       {:class-name (dom/classnames
-                     :selected (contains? selected (:id color)))
-        :on-context-menu on-context-menu
-        :on-click (when-not editing? on-click)
-        :ref item-ref
-        :draggable (and (not read-only?) (not editing?))
-        :on-drag-start on-color-drag-start
-        :on-drag-enter on-drag-enter
-        :on-drag-leave on-drag-leave
-        :on-drag-over dom/prevent-default
-        :on-drop on-drop}
-
-       [:& bc/color-bullet {:color color}]
-
-       (if ^boolean editing?
-         [:input.element-name
-          {:type "text"
-           :ref input-ref
-           :on-blur input-blur
-           :on-key-down input-key-down
-           :auto-focus true
-           :default-value (cfh/merge-path-item (:path color) (:name color))}]
-
-         [:div.name-block {:title (:name color)
-                           :on-double-click rename-color-clicked}
-          (:name color)
-          (when-not (= (:name color) default-name)
-            [:span default-name])])
-
-       (when local?
-         [:& cmm/assets-context-menu
-          {:on-close on-close-menu
-           :state @menu-state
-           :options [(when-not (or multi-colors? multi-assets?)
-                       [(tr "workspace.assets.rename") rename-color-clicked])
-                     (when-not (or multi-colors? multi-assets?)
-                       [(tr "workspace.assets.edit") edit-color-clicked])
-                     [(tr "workspace.assets.delete") delete-color]
-                     (when-not multi-assets?
-                       [(tr "workspace.assets.group") (on-group (:id color))])]}])
-
-       (when ^boolean dragging?
-         [:div.dragging])])))
+     (when ^boolean dragging?
+       [:div {:class (stl/css :dragging)}])]))
 
 (mf/defc colors-group
   [{:keys [file-id prefix groups open-groups force-open? local? selected
@@ -308,7 +260,6 @@
            selected-full]}]
   (let [group-open?    (or ^boolean force-open?
                            ^boolean (get open-groups prefix (if (= prefix "") true false)))
-        new-css-system (mf/use-ctx ctx/new-css-system)
         dragging*      (mf/use-state false)
         dragging?      (deref dragging*)
 
@@ -338,136 +289,71 @@
          (fn [event]
            (cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full move-color)))]
 
-    (if ^boolean new-css-system
-      [:div {:class (dom/classnames (css :colors-group) true)
-             :on-drag-enter on-drag-enter
-             :on-drag-leave on-drag-leave
-             :on-drag-over dom/prevent-default
-             :on-drop on-drop}
-       [:& grp/asset-group-title {:file-id file-id
-                                  :section :colors
-                                  :path prefix
-                                  :group-open? group-open?
-                                  :on-rename on-rename-group
-                                  :on-ungroup on-ungroup}]
-       (when group-open?
-         [:*
-          (let [colors (get groups "" [])]
-            [:div {:class (dom/classnames (css :asset-list) true)
-                   :on-drag-enter on-drag-enter
-                   :on-drag-leave on-drag-leave
-                   :on-drag-over dom/prevent-default
-                   :on-drop on-drop}
+    [:div {:class (stl/css :colors-group)
+           :on-drag-enter on-drag-enter
+           :on-drag-leave on-drag-leave
+           :on-drag-over dom/prevent-default
+           :on-drop on-drop}
+     [:& grp/asset-group-title {:file-id file-id
+                                :section :colors
+                                :path prefix
+                                :group-open? group-open?
+                                :on-rename on-rename-group
+                                :on-ungroup on-ungroup}]
+     (when group-open?
+       [:*
+        (let [colors (get groups "" [])]
+          [:div {:class (stl/css :asset-list)
+                 :on-drag-enter on-drag-enter
+                 :on-drag-leave on-drag-leave
+                 :on-drag-over dom/prevent-default
+                 :on-drop on-drop}
 
-             (when ^boolean dragging?
-               [:div {:class (dom/classnames (css :grid-placeholder) true)}
-                "\u00A0"])
+           (when ^boolean dragging?
+             [:div {:class (stl/css :grid-placeholder)}
+              "\u00A0"])
 
-             (when (and (empty? colors)
-                        (some? groups))
-               [:div {:class (dom/classnames (css :drop-space) true)}])
+           (when (and (empty? colors)
+                      (some? groups))
+             [:div {:class (stl/css :drop-space)}])
 
-             (for [color colors]
-               [:& color-item {:key (dm/str (:id color))
-                               :color color
-                               :file-id file-id
-                               :local? local?
-                               :selected selected
-                               :multi-colors? multi-colors?
-                               :multi-assets? multi-assets?
-                               :on-asset-click on-asset-click
-                               :on-assets-delete on-assets-delete
-                               :on-clear-selection on-clear-selection
-                               :on-group on-group
-                               :colors colors
-                               :selected-full selected-full
-                               :selected-paths selected-paths
-                               :move-color move-color}])])
+           (for [color colors]
+             [:& color-item {:key (dm/str (:id color))
+                             :color color
+                             :file-id file-id
+                             :local? local?
+                             :selected selected
+                             :multi-colors? multi-colors?
+                             :multi-assets? multi-assets?
+                             :on-asset-click on-asset-click
+                             :on-assets-delete on-assets-delete
+                             :on-clear-selection on-clear-selection
+                             :on-group on-group
+                             :colors colors
+                             :selected-full selected-full
+                             :selected-paths selected-paths
+                             :move-color move-color}])])
 
-          (for [[path-item content] groups]
-            (when-not (empty? path-item)
-              [:& colors-group {:file-id file-id
-                                :prefix (cfh/merge-path-item prefix path-item)
-                                :key (dm/str "group-" path-item)
-                                :groups content
-                                :open-groups open-groups
-                                :force-open? force-open?
-                                :local? local?
-                                :selected selected
-                                :multi-colors? multi-colors?
-                                :multi-assets? multi-assets?
-                                :on-asset-click on-asset-click
-                                :on-assets-delete on-assets-delete
-                                :on-clear-selection on-clear-selection
-                                :on-group on-group
-                                :on-rename-group on-rename-group
-                                :on-ungroup on-ungroup
-                                :colors colors
-                                :selected-full selected-full}]))])]
-
-
-      [:div {:on-drag-enter on-drag-enter
-             :on-drag-leave on-drag-leave
-             :on-drag-over dom/prevent-default
-             :on-drop on-drop}
-       [:& grp/asset-group-title {:file-id file-id
-                                  :section :colors
-                                  :path prefix
-                                  :group-open? group-open?
-                                  :on-rename on-rename-group
-                                  :on-ungroup on-ungroup}]
-       (when group-open?
-         [:*
-          (let [colors (get groups "" [])]
-            [:div.asset-list {:on-drag-enter on-drag-enter
-                              :on-drag-leave on-drag-leave
-                              :on-drag-over dom/prevent-default
-                              :on-drop on-drop}
-
-             (when ^boolean dragging?
-               [:div.grid-placeholder "\u00A0"])
-
-             (when (and (empty? colors)
-                        (some? groups))
-               [:div.drop-space])
-
-             (for [color colors]
-               [:& color-item {:key (dm/str (:id color))
-                               :color color
-                               :file-id file-id
-                               :local? local?
-                               :selected selected
-                               :multi-colors? multi-colors?
-                               :multi-assets? multi-assets?
-                               :on-asset-click on-asset-click
-                               :on-assets-delete on-assets-delete
-                               :on-clear-selection on-clear-selection
-                               :on-group on-group
-                               :colors colors
-                               :selected-full selected-full
-                               :selected-paths selected-paths
-                               :move-color move-color}])])
-
-          (for [[path-item content] groups]
-            (when-not (empty? path-item)
-              [:& colors-group {:file-id file-id
-                                :prefix (cfh/merge-path-item prefix path-item)
-                                :key (dm/str "group-" path-item)
-                                :groups content
-                                :open-groups open-groups
-                                :force-open? force-open?
-                                :local? local?
-                                :selected selected
-                                :multi-colors? multi-colors?
-                                :multi-assets? multi-assets?
-                                :on-asset-click on-asset-click
-                                :on-assets-delete on-assets-delete
-                                :on-clear-selection on-clear-selection
-                                :on-group on-group
-                                :on-rename-group on-rename-group
-                                :on-ungroup on-ungroup
-                                :colors colors
-                                :selected-full selected-full}]))])])))
+        (for [[path-item content] groups]
+          (when-not (empty? path-item)
+            [:& colors-group {:file-id file-id
+                              :prefix (cfh/merge-path-item prefix path-item)
+                              :key (dm/str "group-" path-item)
+                              :groups content
+                              :open-groups open-groups
+                              :force-open? force-open?
+                              :local? local?
+                              :selected selected
+                              :multi-colors? multi-colors?
+                              :multi-assets? multi-assets?
+                              :on-asset-click on-asset-click
+                              :on-assets-delete on-assets-delete
+                              :on-clear-selection on-clear-selection
+                              :on-group on-group
+                              :on-rename-group on-rename-group
+                              :on-ungroup on-ungroup
+                              :colors colors
+                              :selected-full selected-full}]))])]))
 
 (mf/defc colors-section
   [{:keys [file-id local? colors open? force-open? open-status-ref selected reverse-sort?
@@ -491,7 +377,6 @@
                           (grp/group-assets colors reverse-sort?))
 
         read-only?      (mf/use-ctx ctx/workspace-read-only?)
-        new-css-system  (mf/use-ctx ctx/new-css-system)
         add-color
         (mf/use-fn
          (fn [value _]
@@ -589,19 +474,12 @@
                            :section :colors
                            :assets-count (count colors)
                            :open? open?}
-     (if ^boolean new-css-system
-       (when local?
-         [:& cmm/asset-section-block {:role :title-button}
-          (when-not read-only?
-            [:button {:class (dom/classnames (css :assets-btn) true)
-                      :on-click add-color-clicked}
-             i/add-refactor])])
-
-       (when local?
-         [:& cmm/asset-section-block {:role :title-button}
-          (when-not read-only?
-            [:div.assets-button {:on-click add-color-clicked}
-             i/plus])]))
+     (when local?
+       [:& cmm/asset-section-block {:role :title-button}
+        (when-not read-only?
+          [:button {:class (stl/css :assets-btn)
+                    :on-click add-color-clicked}
+           i/add-refactor])])
 
 
      [:& cmm/asset-section-block {:role :content}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
index aed7ab1197..28dced5b49 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
@@ -9,7 +9,7 @@
 .assets-btn {
   @extend .button-tertiary;
   height: $s-32;
-  width: calc($s-24 + $s-4);
+  width: $s-28;
   padding: 0;
   border-radius: $br-8;
   svg {
@@ -20,83 +20,92 @@
 
 .colors-group {
   margin-top: $s-4;
-  .asset-list {
-    padding: 0 0 0 $s-4;
-    .asset-list-item {
-      position: relative;
-      display: flex;
-      align-items: center;
-      height: $s-32;
-      padding: $s-8;
-      margin-bottom: $s-4;
-      border-radius: $br-8;
-      background-color: var(--assets-item-background-color);
-      cursor: pointer;
-      .bullet-block {
-        @include flexCenter;
-        height: 100%;
-        justify-content: flex-start;
-        margin-right: $s-4;
-      }
-      .name-block {
-        @include titleTipography;
-        display: grid;
-        grid-template-columns: auto 1fr;
-        margin: 0;
-        overflow: hidden;
-        .default-name-only,
-        .name {
-          color: var(--assets-item-name-foreground-color-hover);
-          margin-right: $s-6;
-          @include textEllipsis;
-        }
-        .default-name {
-          min-width: 0;
-          color: var(--assets-item-name-foreground-color);
-        }
-      }
-      .element-name {
-        @include textEllipsis;
-        color: var(--color-foreground-primary);
-      }
-      &.selected {
-        border: $s-1 solid var(--assets-item-border-color);
-      }
+}
 
-      &.editing {
-        border: $s-1 solid var(--input-border-color-focus);
-        input.element-name {
-          @include textEllipsis;
-          @include titleTipography;
-          @include removeInputStyle;
-          flex-grow: 1;
-          height: $s-28;
-          max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
-          margin: 0;
-          color: var(--layer-row-foreground-color);
-        }
-      }
-      &:hover {
-        background-color: var(--assets-item-background-color-hover);
-      }
+.asset-list {
+  padding: 0 0 0 $s-4;
+}
+
+.asset-list-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: $s-32;
+  padding: $s-8;
+  margin-bottom: $s-4;
+  border-radius: $br-8;
+  background-color: var(--assets-item-background-color);
+  cursor: pointer;
+
+  &.selected {
+    border: $s-1 solid var(--assets-item-border-color);
+  }
+
+  &.editing {
+    border: $s-1 solid var(--input-border-color-focus);
+    input.element-name {
+      @include textEllipsis;
+      @include titleTipography;
+      @include removeInputStyle;
+      flex-grow: 1;
+      height: $s-28;
+      max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
+      margin: 0;
+      color: var(--layer-row-foreground-color);
     }
   }
-  .grid-placeholder {
-    height: $s-2;
-    margin-bottom: $s-2;
-    background-color: var(--color-accent-primary);
-  }
-  .drop-space {
-    height: $s-12;
-  }
-  .dragging {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: $s-8;
-    background-color: var(--assets-item-background-color-drag);
-    border: $s-2 solid var(--assets-item-border-color-drag);
+  &:hover {
+    background-color: var(--assets-item-background-color-hover);
   }
 }
+
+.bullet-block {
+  @include flexCenter;
+  height: 100%;
+  justify-content: flex-start;
+  margin-right: $s-4;
+}
+
+.name-block {
+  @include titleTipography;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  margin: 0;
+  overflow: hidden;
+  .default-name-only,
+  .name {
+    color: var(--assets-item-name-foreground-color-hover);
+    margin-right: $s-6;
+    @include textEllipsis;
+  }
+  .default-name {
+    min-width: 0;
+    color: var(--assets-item-name-foreground-color);
+  }
+}
+
+.element-name {
+  @include textEllipsis;
+  color: var(--color-foreground-primary);
+}
+
+.grid-placeholder {
+  height: $s-2;
+  margin-bottom: $s-2;
+  background-color: var(--color-accent-primary);
+}
+
+.drop-space {
+  height: $s-12;
+}
+
+.dragging {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: $s-8;
+  background-color: var(--assets-item-background-color-drag);
+  border: $s-2 solid var(--assets-item-border-color-drag);
+}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
index 141a83a68f..c6d63c7d3e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
@@ -6,7 +6,7 @@
 
 
 (ns app.main.ui.workspace.sidebar.assets.common
-  (:require-macros [app.main.style :refer [css]])
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
    [app.common.files.helpers :as cfh]
@@ -22,7 +22,6 @@
    [app.main.refs :as refs]
    [app.main.render :refer [component-svg component-svg-thumbnail]]
    [app.main.store :as st]
-   [app.main.ui.components.context-menu :refer [context-menu]]
    [app.main.ui.components.context-menu-a11y :refer [context-menu-a11y]]
    [app.main.ui.components.title-bar :refer [title-bar]]
    [app.main.ui.context :as ctx]
@@ -111,24 +110,14 @@
 (mf/defc assets-context-menu
   {::mf/wrap-props false}
   [{:keys [options state on-close]}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)]
-    (if new-css-system
-      [:& context-menu-a11y
-       {:show (:open? state)
-        :fixed? (or (not= (:top state) 0) (not= (:left state) 0))
-        :on-close on-close
-        :top (:top state)
-        :left (:left state)
-        :options options
-        :workspace? true}]
-
-      [:& context-menu
-       {:selectable false
-        :show (:open? state)
-        :on-close on-close
-        :top (:top state)
-        :left (:left state)
-        :options options}])))
+  [:& context-menu-a11y
+   {:show (:open? state)
+    :fixed? (or (not= (:top state) 0) (not= (:left state) 0))
+    :on-close on-close
+    :top (:top state)
+    :left (:left state)
+    :options options
+    :workspace? true}])
 
 (mf/defc section-icon
   [{:keys [section] :as props}]
@@ -145,34 +134,24 @@
                             (filter some?))
         get-role       #(.. % -props -role)
         title-buttons  (filter #(= (get-role %) :title-button) children)
-        content        (filter #(= (get-role %) :content) children)
-        new-css-system (mf/use-ctx ctx/new-css-system)]
-    (if ^boolean new-css-system
-      [:div {:class (dom/classnames (css :asset-section) true)}
-       [:& title-bar {:collapsable? true
-                      :collapsed?   (not open?)
-                      :clickable-all? true
-                      :on-collapsed #(st/emit! (dw/set-assets-section-open file-id section (not open?)))
-                      :class        (css :title-spacing)
-                      :title        (mf/html [:span {:class (dom/classnames (css :title-name) true)}
-                                              [:span {:class (dom/classnames (css :section-icon) true)}
-                                               [:& section-icon {:section section}]]
-                                              [:span {:class (dom/classnames (css :section-name) true)}
-                                               title]
+        content        (filter #(= (get-role %) :content) children)]
+    [:div {:class (stl/css :asset-section)}
+     [:& title-bar {:collapsable? true
+                    :collapsed?   (not open?)
+                    :clickable-all? true
+                    :on-collapsed #(st/emit! (dw/set-assets-section-open file-id section (not open?)))
+                    :class        (stl/css :title-spacing)
+                    :title        (mf/html [:span {:class (stl/css :title-name)}
+                                            [:span {:class (stl/css :section-icon)}
+                                             [:& section-icon {:section section}]]
+                                            [:span {:class (stl/css :section-name)}
+                                             title]
 
-                                              [:span {:class (dom/classnames (css :num-assets) true)}
-                                               assets-count]])}
-        title-buttons]
-       (when ^boolean open?
-         content)]
-      [:div.asset-section
-       [:div.asset-title {:class (when (not ^boolean open?) "closed")}
-        [:span {:on-click #(st/emit! (dw/set-assets-section-open file-id section (not open?)))}
-         i/arrow-slide title]
-        [:span.num-assets (dm/str "\u00A0(") assets-count ")"] ;; Unicode 00A0 is non-breaking space
-        title-buttons]
-       (when ^boolean open?
-         content)])))
+                                            [:span {:class (stl/css :num-assets)}
+                                             assets-count]])}
+      title-buttons]
+     (when ^boolean open?
+       content)]))
 
 (mf/defc asset-section-block
   [{:keys [children]}]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss
index 21da5c603c..a546e71a7d 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss
@@ -6,36 +6,38 @@
 
 @import "refactor/common-refactor.scss";
 
-.asset-section {
-  .title-name {
-    @include tabTitleTipography;
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    width: 100%;
-    .section-icon {
-      @include flexCenter;
-      padding-right: $s-2;
-      svg {
-        @include flexCenter;
-        height: $s-16;
-        width: $s-16;
-        color: transparent;
-        fill: none;
-      }
-    }
-    .section-name {
-      display: flex;
-      align-items: center;
-      margin: 0 $s-2;
-    }
-    .num-assets {
-      @include flexCenter;
-      height: 100%;
-      padding-left: $s-8;
-    }
+.title-name {
+  @include tabTitleTipography;
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  width: 100%;
+}
+
+.section-icon {
+  @include flexCenter;
+  padding-right: $s-2;
+  svg {
+    @include flexCenter;
+    height: $s-16;
+    width: $s-16;
+    color: transparent;
+    fill: none;
   }
 }
+
+.section-name {
+  display: flex;
+  align-items: center;
+  margin: 0 $s-2;
+}
+
+.num-assets {
+  @include flexCenter;
+  height: 100%;
+  padding-left: $s-8;
+}
+
 .title-spacing {
   margin-bottom: $s-4;
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
index 964b403802..833c573f7a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
@@ -5,7 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.sidebar.assets.components
-  (:require-macros [app.main.style :as stl :refer [css]])
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
@@ -77,7 +77,6 @@
 
         read-only?     (mf/use-ctx ctx/workspace-read-only?)
         components-v2  (mf/use-ctx ctx/components-v2)
-        new-css-system (mf/use-ctx ctx/new-css-system)
         component-id   (:id component)
 
         visible?       (h/use-visible item-ref :once? true)
@@ -144,89 +143,45 @@
          (mf/deps on-context-menu component-id)
          (partial on-context-menu component-id))]
 
-    (if ^boolean new-css-system
-      [:div {:ref item-ref
-             :class (dom/classnames
-                     (css :selected) (contains? selected (:id component))
-                     (css :grid-cell) listing-thumbs?
-                     (css :enum-item) (not listing-thumbs?))
-             :id (dm/str "component-shape-id-" (:id component))
-             :draggable (not read-only?)
-             :on-click on-component-click
-             :on-double-click on-component-double-click
-             :on-context-menu on-context-menu
-             :on-drag-start on-component-drag-start
-             :on-drag-enter on-drag-enter
-             :on-drag-leave on-drag-leave
-             :on-drag-over dom/prevent-default
-             :on-drop on-drop}
-       (when (and (some? root-shape)
-                  (some? container))
-         [:*
+    [:div {:ref item-ref
+           :class (stl/css-case :selected (contains? selected (:id component))
+                                :grid-cell listing-thumbs?
+                                :enum-item (not listing-thumbs?))
+           :id (dm/str "component-shape-id-" (:id component))
+           :draggable (not read-only?)
+           :on-click on-component-click
+           :on-double-click on-component-double-click
+           :on-context-menu on-context-menu
+           :on-drag-start on-component-drag-start
+           :on-drag-enter on-drag-enter
+           :on-drag-leave on-drag-leave
+           :on-drag-over dom/prevent-default
+           :on-drop on-drop}
+     (when (and (some? root-shape)
+                (some? container))
+       [:*
+        (let [renaming? (= renaming (:id component))]
+          [:*
+           [:& editable-label
+            {:class (stl/css-case :cell-name listing-thumbs?
+                                  :item-name (not listing-thumbs?)
+                                  :editing renaming?)
+             :value (cfh/merge-path-item (:path component) (:name component))
+             :tooltip (cfh/merge-path-item (:path component) (:name component))
+             :display-value (:name component)
+             :editing renaming?
+             :disable-dbl-click true
+             :on-change do-rename
+             :on-cancel cancel-rename}]
 
-          (let [renaming? (= renaming (:id component))]
-            [:*
-             [:& editable-label
-              {:class (dom/classnames
-                       (css :cell-name) listing-thumbs?
-                       (css :item-name) (not listing-thumbs?)
-                       (css :editing) renaming?)
-               :value (cfh/merge-path-item (:path component) (:name component))
-               :tooltip (cfh/merge-path-item (:path component) (:name component))
-               :display-value (:name component)
-               :editing renaming?
-               :disable-dbl-click true
-               :on-change do-rename
-               :on-cancel cancel-rename}]
+           (when ^boolean dragging?
+             [:div {:class (stl/css :dragging)}])])
 
-             (when ^boolean dragging?
-               [:div {:class (dom/classnames (css :dragging) true)}])])
+        (when visible?
           [:& cmm/component-item-thumbnail {:file-id file-id
                                             :root-shape root-shape
                                             :component component
-                                            :container container}]])]
-
-      [:div {:ref item-ref
-             :class (dom/classnames
-                     :selected (contains? selected (:id component))
-                     :grid-cell listing-thumbs?
-                     :enum-item (not listing-thumbs?))
-             :id (dm/str "component-shape-id-" (:id component))
-             :draggable (not read-only?)
-             :on-click on-component-click
-             :on-double-click on-component-double-click
-             :on-context-menu on-context-menu
-             :on-drag-start on-component-drag-start
-             :on-drag-enter on-drag-enter
-             :on-drag-leave on-drag-leave
-             :on-drag-over dom/prevent-default
-             :on-drop on-drop}
-
-       (when (and (some? root-shape)
-                  (some? container))
-         [:*
-          (when visible?
-            [:& cmm/component-item-thumbnail {:file-id file-id
-                                          :root-shape root-shape
-                                          :component component
-                                          :container container}])
-          (let [renaming? (= renaming (:id component))]
-            [:*
-             [:& editable-label
-              {:class (dom/classnames
-                       :cell-name listing-thumbs?
-                       :item-name (not listing-thumbs?)
-                       :editing renaming?)
-               :value (cfh/merge-path-item (:path component) (:name component))
-               :tooltip (cfh/merge-path-item (:path component) (:name component))
-               :display-value (:name component)
-               :editing renaming?
-               :disable-dbl-click true
-               :on-change do-rename
-               :on-cancel cancel-rename}]
-
-             (when ^boolean dragging?
-               [:div.dragging])])])])))
+                                            :container container}])])]))
 
 (mf/defc components-group
   {::mf/wrap-props false}
@@ -236,7 +191,6 @@
 
   (let [group-open?    (or ^boolean force-open?
                            ^boolean (get open-groups prefix (if (= prefix "") true false)))
-        new-css-system (mf/use-ctx ctx/new-css-system)
         dragging*      (mf/use-state false)
         dragging?      (deref dragging*)
 
@@ -266,162 +220,82 @@
            (when (and local (:local? @drag-data*))
              (cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full dwl/rename-component-and-main-instance))))]
 
-    (if ^boolean new-css-system
-      [:div {:class (dom/classnames (css :component-group) true)
-             :on-drag-enter on-drag-enter
-             :on-drag-leave on-drag-leave
-             :on-drag-over dom/prevent-default
-             :on-drop on-drop}
-       [:& grp/asset-group-title
-        {:file-id file-id
-         :section :components
-         :path prefix
-         :group-open? group-open?
-         :on-rename on-rename-group
-         :on-ungroup on-ungroup}]
+    [:div {:class (stl/css :component-group)
+           :on-drag-enter on-drag-enter
+           :on-drag-leave on-drag-leave
+           :on-drag-over dom/prevent-default
+           :on-drop on-drop}
+     [:& grp/asset-group-title
+      {:file-id file-id
+       :section :components
+       :path prefix
+       :group-open? group-open?
+       :on-rename on-rename-group
+       :on-ungroup on-ungroup}]
 
 
-       (when group-open?
-         [:*
-          (let [components (get groups "" [])]
-            [:div {:class-name (dom/classnames
-                                (css :asset-grid) listing-thumbs?
-                                (css :asset-enum) (not listing-thumbs?)
-                                (css :drop-space) (and
-                                                   (empty? components)
-                                                   (some? groups)
-                                                   (not dragging?)
-                                                   local))
-                   :on-drag-enter on-drag-enter
-                   :on-drag-leave on-drag-leave
-                   :on-drag-over dom/prevent-default
-                   :on-drop on-drop}
+     (when group-open?
+       [:*
+        (let [components (get groups "" [])]
+          [:div {:class-name (stl/css-case :asset-grid listing-thumbs?
+                                           :asset-enum (not listing-thumbs?)
+                                           :drop-space (and
+                                                        (empty? components)
+                                                        (some? groups)
+                                                        (not dragging?)
+                                                        local))
+                 :on-drag-enter on-drag-enter
+                 :on-drag-leave on-drag-leave
+                 :on-drag-over dom/prevent-default
+                 :on-drop on-drop}
 
-             (when ^boolean dragging?
-               [:div {:class (dom/classnames (css :grid-placeholder) true)} "\u00A0"])
+           (when ^boolean dragging?
+             [:div {:class (stl/css :grid-placeholder)} "\u00A0"])
 
 
-             (when (and (empty? components)
-                        (some? groups)
-                        local)
-               [:div {:class (dom/classnames (css :drop-space) true)}])
+           (when (and (empty? components)
+                      (some? groups)
+                      local)
+             [:div {:class (stl/css :drop-space)}])
 
-             (for [component components]
-               [:& components-item
-                {:component component
-                 :key (dm/str "component-" (:id component))
-                 :renaming renaming
-                 :listing-thumbs? listing-thumbs?
-                 :file-id file-id
-                 :selected selected
-                 :selected-full selected-full
-                 :selected-paths selected-paths
-                 :on-asset-click on-asset-click
-                 :on-context-menu on-context-menu
-                 :on-drag-start on-drag-start
-                 :on-group on-group
-                 :do-rename do-rename
-                 :cancel-rename cancel-rename
-                 :local local}])])
+           (for [component components]
+             [:& components-item
+              {:component component
+               :key (dm/str "component-" (:id component))
+               :renaming renaming
+               :listing-thumbs? listing-thumbs?
+               :file-id file-id
+               :selected selected
+               :selected-full selected-full
+               :selected-paths selected-paths
+               :on-asset-click on-asset-click
+               :on-context-menu on-context-menu
+               :on-drag-start on-drag-start
+               :on-group on-group
+               :do-rename do-rename
+               :cancel-rename cancel-rename
+               :local local}])])
 
-          (for [[path-item content] groups]
-            (when-not (empty? path-item)
-              [:& components-group {:file-id file-id
-                                    :key path-item
-                                    :prefix (cfh/merge-path-item prefix path-item)
-                                    :groups content
-                                    :open-groups open-groups
-                                    :force-open? force-open?
-                                    :renaming renaming
-                                    :listing-thumbs? listing-thumbs?
-                                    :selected selected
-                                    :on-asset-click on-asset-click
-                                    :on-drag-start on-drag-start
-                                    :do-rename do-rename
-                                    :cancel-rename cancel-rename
-                                    :on-rename-group on-rename-group
-                                    :on-ungroup on-ungroup
-                                    :on-context-menu on-context-menu
-                                    :selected-full selected-full
-                                    :local local}]))])]
-
-
-      [:div {:on-drag-enter on-drag-enter
-             :on-drag-leave on-drag-leave
-             :on-drag-over dom/prevent-default
-             :on-drop on-drop}
-
-       [:& grp/asset-group-title
-        {:file-id file-id
-         :section :components
-         :path prefix
-         :group-open? group-open?
-         :on-rename on-rename-group
-         :on-ungroup on-ungroup}]
-
-       (when group-open?
-         [:*
-          (let [components (get groups "" [])]
-            [:div {:class-name (dom/classnames
-                                :asset-grid listing-thumbs?
-                                :big listing-thumbs?
-                                :asset-enum (not listing-thumbs?)
-                                :drop-space (and
-                                             (empty? components)
-                                             (some? groups)
-                                             (not dragging?)
-                                             local))
-                   :on-drag-enter on-drag-enter
-                   :on-drag-leave on-drag-leave
-                   :on-drag-over dom/prevent-default
-                   :on-drop on-drop}
-
-             (when ^boolean dragging?
-               [:div.grid-placeholder "\u00A0"])
-
-             (when (and (empty? components)
-                        (some? groups)
-                        local)
-               [:div.drop-space])
-
-             (for [component components]
-               [:& components-item
-                {:component component
-                 :key (dm/str "component-" (:id component))
-                 :renaming renaming
-                 :listing-thumbs? listing-thumbs?
-                 :file-id file-id
-                 :selected selected
-                 :selected-full selected-full
-                 :selected-paths selected-paths
-                 :on-asset-click on-asset-click
-                 :on-context-menu on-context-menu
-                 :on-drag-start on-drag-start
-                 :on-group on-group
-                 :do-rename do-rename
-                 :cancel-rename cancel-rename
-                 :local local}])])
-
-          (for [[path-item content] groups]
-            (when-not (empty? path-item)
-              [:& components-group {:file-id file-id
-                                    :key path-item
-                                    :prefix (cfh/merge-path-item prefix path-item)
-                                    :groups content
-                                    :open-groups open-groups
-                                    :force-open? force-open?
-                                    :renaming renaming
-                                    :listing-thumbs? listing-thumbs?
-                                    :selected selected
-                                    :on-asset-click on-asset-click
-                                    :on-drag-start on-drag-start
-                                    :do-rename do-rename
-                                    :cancel-rename cancel-rename
-                                    :on-rename-group on-rename-group
-                                    :on-ungroup on-ungroup
-                                    :on-context-menu on-context-menu
-                                    :selected-full selected-full
-                                    :local local}]))])])))
+        (for [[path-item content] groups]
+          (when-not (empty? path-item)
+            [:& components-group {:file-id file-id
+                                  :key path-item
+                                  :prefix (cfh/merge-path-item prefix path-item)
+                                  :groups content
+                                  :open-groups open-groups
+                                  :force-open? force-open?
+                                  :renaming renaming
+                                  :listing-thumbs? listing-thumbs?
+                                  :selected selected
+                                  :on-asset-click on-asset-click
+                                  :on-drag-start on-drag-start
+                                  :do-rename do-rename
+                                  :cancel-rename cancel-rename
+                                  :on-rename-group on-rename-group
+                                  :on-ungroup on-ungroup
+                                  :on-context-menu on-context-menu
+                                  :selected-full selected-full
+                                  :local local}]))])]))
 
 (mf/defc components-section
   {::mf/wrap-props false}
@@ -446,7 +320,6 @@
         menu-state               (mf/use-state cmm/initial-context-menu-state)
         read-only?               (mf/use-ctx ctx/workspace-read-only?)
         components-v2            (mf/use-ctx ctx/components-v2)
-        new-css-system           (mf/use-ctx ctx/new-css-system)
         toggle-list-style        (mf/use-ctx cmm/assets-toggle-list-style)
 
         selected                 (:components selected)
@@ -623,38 +496,28 @@
                            :section :components
                            :assets-count (count components)
                            :open? open?}
-     (if ^boolean new-css-system
-       [:& cmm/asset-section-block {:role :title-button}
-        [:*
-         (when open?
-           [:div {:class (stl/css :listing-options)}
-            [:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
-                               :on-change toggle-list-style
-                               :name "listing-style"}
-             [:& radio-button {:icon i/view-as-list-refactor
-                               :value "list"
-                               :id "opt-list"}]
-             [:& radio-button {:icon i/flex-grid-refactor
-                               :value "grid"
-                               :id "opt-grid"}]]])
+     [:& cmm/asset-section-block {:role :title-button}
+      [:*
+       (when open?
+         [:div {:class (stl/css :listing-options)}
+          [:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
+                             :on-change toggle-list-style
+                             :name "listing-style"}
+           [:& radio-button {:icon i/view-as-list-refactor
+                             :value "list"
+                             :id "opt-list"}]
+           [:& radio-button {:icon i/flex-grid-refactor
+                             :value "grid"
+                             :id "opt-grid"}]]])
 
-         (when (and components-v2 (not read-only?) local?)
-           [:div {:on-click add-component
-                  :class (dom/classnames (css :add-component) true)}
-            i/add-refactor
-            [:& file-uploader {:accept cm/str-image-types
-                               :multi true
-                               :ref input-ref
-                               :on-selected on-file-selected}]])]]
-       (when local?
-         [:& cmm/asset-section-block {:role :title-button}
-          (when (and components-v2 (not read-only?))
-            [:div.assets-button {:on-click add-component}
-             i/plus
-             [:& file-uploader {:accept cm/str-image-types
-                                :multi true
-                                :ref input-ref
-                                :on-selected on-file-selected}]])]))
+       (when (and components-v2 (not read-only?) local?)
+         [:div {:on-click add-component
+                :class (stl/css :add-component)}
+          i/add-refactor
+          [:& file-uploader {:accept cm/str-image-types
+                             :multi true
+                             :ref input-ref
+                             :on-selected on-file-selected}]])]]
 
      [:& cmm/asset-section-block {:role :content}
       (when ^boolean open?
@@ -680,42 +543,28 @@
       [:& cmm/assets-context-menu
        {:on-close on-close-menu
         :state @menu-state
-        :options (if new-css-system
-                   [(when (and local? (not (or multi-components? multi-assets? read-only?)))
-                      {:option-name    (tr "workspace.assets.rename")
-                       :id             "assets-rename-component"
-                       :option-handler on-rename})
-                    (when (and local? (not (or multi-assets? read-only?)))
-                      {:option-name    (if components-v2
-                                         (tr "workspace.assets.duplicate-main")
-                                         (tr "workspace.assets.duplicate"))
-                       :id             "assets-duplicate-component"
-                       :option-handler on-duplicate})
+        :options [(when (and local? (not (or multi-components? multi-assets? read-only?)))
+                    {:option-name    (tr "workspace.assets.rename")
+                     :id             "assets-rename-component"
+                     :option-handler on-rename})
+                  (when (and local? (not (or multi-assets? read-only?)))
+                    {:option-name    (if components-v2
+                                       (tr "workspace.assets.duplicate-main")
+                                       (tr "workspace.assets.duplicate"))
+                     :id             "assets-duplicate-component"
+                     :option-handler on-duplicate})
 
-                    (when (and local? (not read-only?))
-                      {:option-name    (tr "workspace.assets.delete")
-                       :id             "assets-delete-component"
-                       :option-handler on-delete})
-                    (when (and local? (not (or multi-assets? read-only?)))
-                      {:option-name   (tr "workspace.assets.group")
-                       :id             "assets-group-component"
-                       :option-handler on-group})
+                  (when (and local? (not read-only?))
+                    {:option-name    (tr "workspace.assets.delete")
+                     :id             "assets-delete-component"
+                     :option-handler on-delete})
+                  (when (and local? (not (or multi-assets? read-only?)))
+                    {:option-name   (tr "workspace.assets.group")
+                     :id             "assets-group-component"
+                     :option-handler on-group})
 
-                    (when (and components-v2 (not multi-assets?))
-                      {:option-name   (tr "workspace.shape.menu.show-main")
-                       :id             "assets-show-main-component"
-                       :option-handler on-show-main})]
-
-                   [(when (and local? (not (or multi-components? multi-assets? read-only?)))
-                      [(tr "workspace.assets.rename") on-rename])
-                    (when (and local? (not (or multi-assets? read-only?)))
-                      [(if components-v2
-                         (tr "workspace.assets.duplicate-main")
-                         (tr "workspace.assets.duplicate")) on-duplicate])
-                    (when (and local? (not read-only?))
-                      [(tr "workspace.assets.delete") on-delete])
-                    (when (and local? (not (or multi-assets? read-only?)))
-                      [(tr "workspace.assets.group") on-group])
-                    (when (and components-v2 (not multi-assets?))
-                      [(tr "workspace.shape.menu.show-main") on-show-main])])}]]]))
+                  (when (and components-v2 (not multi-assets?))
+                    {:option-name   (tr "workspace.shape.menu.show-main")
+                     :id             "assets-show-main-component"
+                     :option-handler on-show-main})]}]]]))
 
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 82fa009bc6..6496b917eb 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
@@ -6,213 +6,217 @@
 
 @import "refactor/common-refactor.scss";
 
-.component-group {
-  .drop-space {
-    height: $s-12;
-  }
-  .asset-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-auto-rows: calc(10vh + $s-16);
-    gap: $s-4;
-    margin-left: $s-8;
-    .grid-cell {
-      @include flexCenter;
-      position: relative;
-      padding: $s-8;
-      border: $s-4 solid transparent;
-      border-radius: $br-8;
-      background-color: var(--assets-component-background-color);
-      overflow: hidden;
-      cursor: pointer;
-      img {
-        height: auto;
-        width: auto;
-        max-height: 100%;
-        max-width: 100%;
-        pointer-events: none;
-      }
-      svg {
-        height: 10vh;
-      }
-      .cell-name {
-        @include titleTipography;
-        @include textEllipsis;
-        display: none;
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        padding: $s-2;
-        &.editing {
-          display: flex;
-          align-items: center;
-          height: $s-32;
-          border: $s-1 solid var(--input-border-color-focus);
-          border-radius: $br-8;
-          background-color: var(--input-background-color);
-          input {
-            @include textEllipsis;
-            @include titleTipography;
-            @include removeInputStyle;
-            flex-grow: 1;
-            height: $s-28;
-            max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
-            padding-left: $s-6;
-            margin: 0;
-            border-radius: $br-8;
-            color: var(--input-foreground-color);
-          }
-          span {
-            @include flexCenter;
-            height: $s-28;
-            background-color: transparent;
-            border-radius: $br-8;
-            svg {
-              @extend .button-icon-small;
-              stroke: var(--input-foreground-color);
-              transform: rotate(90deg);
-            }
-          }
-        }
-      }
+.drop-space {
+  height: $s-12;
+}
+.asset-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: calc(10vh + $s-16);
+  gap: $s-4;
+  margin-left: $s-8;
+}
 
-      &:hover {
-        background-color: var(--assets-item-background-color-hover);
-        .cell-name {
-          display: block;
-          color: var(--assets-item-name-foreground-color-hover);
-          background: linear-gradient(to top, rgba(52, 57, 59, 1) 0%, rgba(52, 57, 59, 0) 100%);
-          &.editing {
-            display: flex;
-            background: var(--input-background-color);
-            input {
-              color: var(--input-foreground-color-active);
-            }
-            span svg {
-              stroke: var(--input-foreground-color-active);
-            }
-          }
-        }
-      }
-
-      &.selected {
-        border: $s-4 solid var(--assets-item-border-color);
-      }
-    }
-    .grid-placeholder {
-      width: 100%;
-      border-radius: $br-8;
-      background-color: var(--assets-item-background-color-drag);
-      border: $s-2 solid var(--assets-item-border-color-drag);
-    }
+.grid-cell {
+  @include flexCenter;
+  position: relative;
+  padding: $s-8;
+  border: $s-4 solid transparent;
+  border-radius: $br-8;
+  background-color: var(--assets-component-background-color);
+  overflow: hidden;
+  cursor: pointer;
+  img {
+    height: auto;
+    width: auto;
+    max-height: 100%;
+    max-width: 100%;
+    pointer-events: none;
   }
-  .asset-enum {
-    margin: 0 $s-12;
-    .enum-item {
-      position: relative;
+  svg {
+    height: 10vh;
+  }
+  .cell-name {
+    @include titleTipography;
+    @include textEllipsis;
+    display: none;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    padding: $s-2;
+    &.editing {
       display: flex;
       align-items: center;
-      height: $s-36;
-      margin-bottom: $s-4;
-      padding: $s-2;
+      height: $s-32;
+      border: $s-1 solid var(--input-border-color-focus);
       border-radius: $br-8;
-      background-color: var(--assets-item-background-color);
-      cursor: pointer;
-
-      svg,
-      img {
-        @include flexCenter;
-        flex-shrink: 0;
-        padding: $s-2;
-        height: $s-32;
-        width: $s-32;
-        border-radius: $br-6;
-        background-color: var(--color-foreground-secondary);
-      }
-
-      .item-name {
-        @include titleTipography;
+      background-color: var(--input-background-color);
+      input {
         @include textEllipsis;
-        padding-left: $s-8;
-        color: var(--assets-item-name-foreground-color);
-        &.editing {
-          display: flex;
-          align-items: center;
-          height: $s-32;
-          border: $s-1 solid var(--input-border-color-focus);
-          border-radius: $br-8;
-          background-color: var(--input-background-color);
-          input {
-            @include textEllipsis;
-            @include titleTipography;
-            @include removeInputStyle;
-            flex-grow: 1;
-            height: $s-28;
-            max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
-            padding-left: $s-6;
-            margin: 0;
-            border-radius: $br-8;
-            color: var(--input-foreground-color);
-          }
-          span {
-            @include flexCenter;
-            height: $s-28;
-            background-color: transparent;
-            border-radius: $br-8;
-            svg {
-              @extend .button-icon-small;
-              stroke: var(--input-foreground-color);
-              transform: rotate(90deg);
-            }
-          }
+        @include titleTipography;
+        @include removeInputStyle;
+        flex-grow: 1;
+        height: $s-28;
+        max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
+        padding-left: $s-6;
+        margin: 0;
+        border-radius: $br-8;
+        color: var(--input-foreground-color);
+      }
+      span {
+        @include flexCenter;
+        height: $s-28;
+        background-color: transparent;
+        border-radius: $br-8;
+        svg {
+          @extend .button-icon-small;
+          stroke: var(--input-foreground-color);
+          transform: rotate(90deg);
         }
       }
-
-      &:hover {
-        background-color: var(--assets-item-background-color-hover);
-        .item-name {
-          color: var(--assets-item-name-foreground-color-hover);
-          &.editing {
-            background: var(--input-background-color);
-            input {
-              color: var(--input-foreground-color-active);
-            }
-            span svg {
-              stroke: var(--input-foreground-color-active);
-            }
-          }
-        }
-      }
-      &.selected {
-        border: $s-1 solid var(--assets-item-border-color);
-      }
-    }
-    .grid-placeholder {
-      height: $s-2;
-      width: 100%;
-      background-color: var(--color-accent-primary);
     }
   }
+
+  &:hover {
+    background-color: var(--assets-item-background-color-hover);
+    .cell-name {
+      display: block;
+      color: var(--assets-item-name-foreground-color-hover);
+      background: linear-gradient(to top, rgba(52, 57, 59, 1) 0%, rgba(52, 57, 59, 0) 100%);
+      &.editing {
+        display: flex;
+        background: var(--input-background-color);
+        input {
+          color: var(--input-foreground-color-active);
+        }
+        span svg {
+          stroke: var(--input-foreground-color-active);
+        }
+      }
+    }
+  }
+
+  &.selected {
+    border: $s-4 solid var(--assets-item-border-color);
+  }
 }
+
+.grid-placeholder {
+  width: 100%;
+  border-radius: $br-8;
+  background-color: var(--assets-item-background-color-drag);
+  border: $s-2 solid var(--assets-item-border-color-drag);
+}
+
+.asset-enum {
+  margin: 0 $s-12;
+}
+.enum-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: $s-36;
+  margin-bottom: $s-4;
+  padding: $s-2;
+  border-radius: $br-8;
+  background-color: var(--assets-item-background-color);
+  cursor: pointer;
+
+  svg,
+  img {
+    @include flexCenter;
+    flex-shrink: 0;
+    padding: $s-2;
+    height: $s-32;
+    width: $s-32;
+    border-radius: $br-6;
+    background-color: var(--color-foreground-secondary);
+  }
+
+  .item-name {
+    @include titleTipography;
+    @include textEllipsis;
+    padding-left: $s-8;
+    color: var(--assets-item-name-foreground-color);
+    &.editing {
+      display: flex;
+      align-items: center;
+      height: $s-32;
+      border: $s-1 solid var(--input-border-color-focus);
+      border-radius: $br-8;
+      background-color: var(--input-background-color);
+      input {
+        @include textEllipsis;
+        @include titleTipography;
+        @include removeInputStyle;
+        flex-grow: 1;
+        height: $s-28;
+        max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
+        padding-left: $s-6;
+        margin: 0;
+        border-radius: $br-8;
+        color: var(--input-foreground-color);
+      }
+      span {
+        @include flexCenter;
+        height: $s-28;
+        background-color: transparent;
+        border-radius: $br-8;
+        svg {
+          @extend .button-icon-small;
+          stroke: var(--input-foreground-color);
+          transform: rotate(90deg);
+        }
+      }
+    }
+  }
+
+  &:hover {
+    background-color: var(--assets-item-background-color-hover);
+    .item-name {
+      color: var(--assets-item-name-foreground-color-hover);
+      &.editing {
+        background: var(--input-background-color);
+        input {
+          color: var(--input-foreground-color-active);
+        }
+        span svg {
+          stroke: var(--input-foreground-color-active);
+        }
+      }
+    }
+  }
+  &.selected {
+    border: $s-1 solid var(--assets-item-border-color);
+  }
+}
+
+.grid-placeholder {
+  height: $s-2;
+  width: 100%;
+  background-color: var(--color-accent-primary);
+}
+
 .listing-options {
   display: flex;
   align-items: center;
+}
 
-  .listing-option-btn {
-    @include flexCenter;
-    cursor: pointer;
-    background-color: var(--button-radio-background-color-rest);
+.listing-option-btn {
+  @include flexCenter;
+  cursor: pointer;
+  background-color: var(--button-radio-background-color-rest);
 
-    &.first {
-      margin-left: auto;
-    }
+  &.first {
+    margin-left: auto;
+  }
 
-    svg {
-      @extend .button-icon;
-    }
+  svg {
+    @extend .button-icon;
   }
 }
+
 .add-component {
   @extend .button-tertiary;
   height: $s-32;
@@ -224,6 +228,7 @@
     stroke: var(--icon-foreground);
   }
 }
+
 :global(.three-row) {
   .asset-grid {
     grid-template-columns: repeat(3, 1fr);
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
index 116ebd2abb..4b584aea7a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
@@ -5,7 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.sidebar.assets.file-library
-  (:require-macros [app.main.style :refer [css]])
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
@@ -40,62 +40,41 @@
 
 (mf/defc file-library-title
   {::mf/wrap-props false}
-  [{:keys [open? local? shared? project-id file-id page-id file-name]}]
+  [{:keys [open? local? project-id file-id page-id file-name]}]
   (let [router     (mf/deref refs/router)
         url        (rt/resolve router :workspace
                                {:project-id project-id
                                 :file-id file-id}
                                {:page-id page-id})
-        new-css-system (mf/use-ctx ctx/new-css-system)
         toggle-open
         (mf/use-fn
          (mf/deps file-id open?)
          (fn []
            (st/emit! (dw/set-assets-section-open file-id :library (not open?)))))]
-    (if ^boolean new-css-system
-      [:div  {:class (dom/classnames (css :library-title) true)}
-       [:& title-bar {:collapsable? true
-                      :collapsed?   (not open?)
-                      :clickable-all? true
-                      :on-collapsed  toggle-open
-                      :title        (if local?
-                                      (mf/html [:div {:class (dom/classnames (css :special-title) true)} (tr "workspace.assets.local-library")])
+    [:div  {:class (stl/css :library-title)}
+     [:& title-bar {:collapsable?   true
+                    :collapsed?     (not open?)
+                    :clickable-all? true
+                    :on-collapsed   toggle-open
+                    :title          (if local?
+                                      (mf/html [:div {:class (stl/css :special-title)}
+                                                (tr "workspace.assets.local-library")])
+                                      ;; Do we need to add shared info here?
 
-                                      (mf/html [:div {:class (dom/classnames (css :special-title) true)} file-name]))}
-        (when-not local?
-          [:span.tool-link.tooltip.tooltip-left {:alt "Open library file"}
-           [:a {:class (dom/classnames (css :file-link) true)
-                :href (str "#" url)
-                :target "_blank"
-                :on-click dom/stop-propagation}
-            i/open-link-refactor]])]]
-
-      [:div.tool-window-bar.library-bar
-       {:on-click toggle-open}
-       [:div.collapse-library
-        {:class (dom/classnames :open open?)}
-        i/arrow-slide]
-
-       (if local?
-         [:*
-          [:span.library-title (tr "workspace.assets.local-library")]
-          (when shared?
-            [:span.shared-library {:alt (tr "workspace.assets.shared-library") :title (tr "workspace.assets.shared-library")}
-              i/library]
-            )]
-         [:*
-          [:span.library-title {:title file-name} file-name]
-          [:span.tool-link {:alt (tr "workspace.assets.open-library") :title (tr "workspace.assets.open-library")}
-           [:a {:href (str "#" url)
-                :target "_blank"
-                :on-click dom/stop-propagation}
-            i/chain]]])])))
+                                      (mf/html [:div {:class (stl/css :special-title)}
+                                                file-name]))}
+      (when-not local?
+        [:span.tool-link.tooltip.tooltip-left {:alt "Open library file"}
+         [:a {:class (dom/classnames  true)
+              :href (str "#" url)
+              :target "_blank"
+              :on-click dom/stop-propagation}
+          i/open-link-refactor]])]]))
 
 (mf/defc file-library-content
   {::mf/wrap-props false}
   [{:keys [file local? open-status-ref on-clear-selection]}]
   (let [components-v2      (mf/use-ctx ctx/components-v2)
-        new-css-system     (mf/use-ctx ctx/new-css-system)
         open-status        (mf/deref open-status-ref)
 
         file-id            (:id file)
@@ -111,9 +90,6 @@
         reverse-sort?      (= :desc filters-ordering)
         listing-thumbs?    (= :thumbs filters-list-style)
 
-        toggle-ordering    (mf/use-ctx cmm/assets-toggle-ordering)
-        toggle-list-style  (mf/use-ctx cmm/assets-toggle-list-style)
-
         library-ref        (mf/with-memo [file-id]
                              (create-file-library-ref file-id))
 
@@ -155,10 +131,6 @@
                                  (l/derived lens:selected)))
 
         selected           (mf/deref selected-lens)
-        selected-count     (+ (count (get selected :components))
-                              (count (get selected :graphics))
-                              (count (get selected :colors))
-                              (count (get selected :typographies)))
 
         has-term?                (not ^boolean (str/empty? filters-term))
         force-open-components?   (when ^boolean has-term? (> 60 (count components)))
@@ -246,166 +218,80 @@
 
              (st/emit! (dwu/commit-undo-transaction undo-id)))))]
 
-    (if ^boolean new-css-system
-      [:div {:class (dom/classnames (css :library-content) true)}
-       (when ^boolean show-components?
-         [:& components-section
-          {:file-id file-id
-           :local? local?
-           :components components
-           :listing-thumbs? listing-thumbs?
-           :open? (or ^boolean force-open-components?
-                      ^boolean (get open-status :components false))
-           :force-open? force-open-components?
-           :open-status-ref open-status-ref
-           :reverse-sort? reverse-sort?
-           :selected selected
-           :on-asset-click on-component-click
-           :on-assets-delete on-assets-delete
-           :on-clear-selection on-clear-selection}])
+    [:div {:class (stl/css :library-content)}
+     (when ^boolean show-components?
+       [:& components-section
+        {:file-id file-id
+         :local? local?
+         :components components
+         :listing-thumbs? listing-thumbs?
+         :open? (or ^boolean force-open-components?
+                    ^boolean (get open-status :components false))
+         :force-open? force-open-components?
+         :open-status-ref open-status-ref
+         :reverse-sort? reverse-sort?
+         :selected selected
+         :on-asset-click on-component-click
+         :on-assets-delete on-assets-delete
+         :on-clear-selection on-clear-selection}])
 
-       (when ^boolean show-graphics?
-         [:& graphics-section
-          {:file-id file-id
-           :project-id project-id
-           :local? local?
-           :objects media
-           :listing-thumbs? listing-thumbs?
-           :open? (or ^boolean force-open-graphics?
-                      ^boolean (get open-status :graphics false))
-           :force-open? force-open-graphics?
-           :open-status-ref open-status-ref
-           :reverse-sort? reverse-sort?
-           :selected selected
-           :on-asset-click on-graphics-click
-           :on-assets-delete on-assets-delete
-           :on-clear-selection on-clear-selection}])
+     (when ^boolean show-graphics?
+       [:& graphics-section
+        {:file-id file-id
+         :project-id project-id
+         :local? local?
+         :objects media
+         :listing-thumbs? listing-thumbs?
+         :open? (or ^boolean force-open-graphics?
+                    ^boolean (get open-status :graphics false))
+         :force-open? force-open-graphics?
+         :open-status-ref open-status-ref
+         :reverse-sort? reverse-sort?
+         :selected selected
+         :on-asset-click on-graphics-click
+         :on-assets-delete on-assets-delete
+         :on-clear-selection on-clear-selection}])
 
-       (when ^boolean show-colors?
-         [:& colors-section
-          {:file-id file-id
-           :local? local?
-           :colors colors
-           :open? (or ^boolean force-open-colors?
-                      ^boolean (get open-status :colors false))
-           :force-open? force-open-colors?
-           :open-status-ref open-status-ref
-           :reverse-sort? reverse-sort?
-           :selected selected
-           :on-asset-click on-colors-click
-           :on-assets-delete on-assets-delete
-           :on-clear-selection on-clear-selection}])
+     (when ^boolean show-colors?
+       [:& colors-section
+        {:file-id file-id
+         :local? local?
+         :colors colors
+         :open? (or ^boolean force-open-colors?
+                    ^boolean (get open-status :colors false))
+         :force-open? force-open-colors?
+         :open-status-ref open-status-ref
+         :reverse-sort? reverse-sort?
+         :selected selected
+         :on-asset-click on-colors-click
+         :on-assets-delete on-assets-delete
+         :on-clear-selection on-clear-selection}])
 
-       (when ^boolean show-typography?
-         [:& typographies-section
-          {:file file
-           :file-id (:id file)
-           :local? local?
-           :typographies typographies
-           :open? (or ^boolean force-open-typographies?
-                      ^boolean (get open-status :typographies false))
-           :force-open? force-open-typographies?
-           :open-status-ref open-status-ref
-           :reverse-sort? reverse-sort?
-           :selected selected
-           :on-asset-click on-typography-click
-           :on-assets-delete on-assets-delete
-           :on-clear-selection on-clear-selection}])
+     (when ^boolean show-typography?
+       [:& typographies-section
+        {:file file
+         :file-id (:id file)
+         :local? local?
+         :typographies typographies
+         :open? (or ^boolean force-open-typographies?
+                    ^boolean (get open-status :typographies false))
+         :force-open? force-open-typographies?
+         :open-status-ref open-status-ref
+         :reverse-sort? reverse-sort?
+         :selected selected
+         :on-asset-click on-typography-click
+         :on-assets-delete on-assets-delete
+         :on-clear-selection on-clear-selection}])
 
-       (when (and (not ^boolean show-components?)
-                  (not ^boolean show-graphics?)
-                  (not ^boolean show-colors?)
-                  (not ^boolean show-typography?))
-         [:div  {:class (css :asset-title)}
-           [:span {:class (css :no-found-icon)}
-            i/search-refactor]
-           [:span {:class (css :no-found-text)}
-            (tr "workspace.assets.not-found")]])]
-      [:div.tool-window-content
-       [:div.listing-options
-        (when (> selected-count 0)
-          [:span.selected-count
-           (tr "workspace.assets.selected-count" (i18n/c selected-count))])
-        [:div.listing-option-btn.first {:on-click toggle-ordering}
-         (if reverse-sort?
-           i/sort-ascending
-           i/sort-descending)]
-        [:div.listing-option-btn {:on-click toggle-list-style}
-         (if listing-thumbs?
-           i/listing-enum
-           i/listing-thumbs)]]
-
-       (when ^boolean show-components?
-         [:& components-section
-          {:file-id file-id
-           :local? local?
-           :components components
-           :listing-thumbs? listing-thumbs?
-           :open? (or ^boolean force-open-components?
-                      ^boolean (get open-status :components false))
-           :force-open? force-open-components?
-           :open-status-ref open-status-ref
-           :reverse-sort? reverse-sort?
-           :selected selected
-           :on-asset-click on-component-click
-           :on-assets-delete on-assets-delete
-           :on-clear-selection on-clear-selection}])
-
-       (when ^boolean show-graphics?
-         [:& graphics-section
-          {:file-id file-id
-           :project-id project-id
-           :local? local?
-           :objects media
-           :listing-thumbs? listing-thumbs?
-           :open? (or ^boolean force-open-graphics?
-                      ^boolean (get open-status :graphics false))
-           :force-open? force-open-graphics?
-           :open-status-ref open-status-ref
-           :reverse-sort? reverse-sort?
-           :selected selected
-           :on-asset-click on-graphics-click
-           :on-assets-delete on-assets-delete
-           :on-clear-selection on-clear-selection}])
-
-       (when ^boolean show-colors?
-         [:& colors-section
-          {:file-id file-id
-           :local? local?
-           :colors colors
-           :open? (or ^boolean force-open-colors?
-                      ^boolean (get open-status :colors false))
-           :force-open? force-open-colors?
-           :open-status-ref open-status-ref
-           :reverse-sort? reverse-sort?
-           :selected selected
-           :on-asset-click on-colors-click
-           :on-assets-delete on-assets-delete
-           :on-clear-selection on-clear-selection}])
-
-       (when ^boolean show-typography?
-         [:& typographies-section
-          {:file file
-           :file-id (:id file)
-           :local? local?
-           :typographies typographies
-           :open? (or ^boolean force-open-typographies?
-                      ^boolean (get open-status :typographies false))
-           :force-open? force-open-typographies?
-           :open-status-ref open-status-ref
-           :reverse-sort? reverse-sort?
-           :selected selected
-           :on-asset-click on-typography-click
-           :on-assets-delete on-assets-delete
-           :on-clear-selection on-clear-selection}])
-
-       (when (and (not ^boolean show-components?)
-                  (not ^boolean show-graphics?)
-                  (not ^boolean show-colors?)
-                  (not ^boolean show-typography?))
-         [:div.asset-section
-          [:div.asset-title
-           (tr "workspace.assets.not-found")]])])))
+     (when (and (not ^boolean show-components?)
+                (not ^boolean show-graphics?)
+                (not ^boolean show-colors?)
+                (not ^boolean show-typography?))
+       [:div  {:class (stl/css :asset-title)}
+        [:span {:class (stl/css :no-found-icon)}
+         i/search-refactor]
+        [:span {:class (stl/css :no-found-text)}
+         (tr "workspace.assets.not-found")]])]))
 
 
 (mf/defc file-library
@@ -416,7 +302,6 @@
         shared?         (:is-shared file)
         project-id      (:project-id file)
         page-id         (dm/get-in file [:data :pages 0])
-        new-css-system  (mf/use-ctx ctx/new-css-system)
 
         open-status-ref (mf/with-memo [file-id]
                           (-> (l/key file-id)
@@ -429,8 +314,7 @@
          (mf/deps file-id)
          (fn []
            (st/emit! (dw/unselect-all-assets file-id))))]
-    [:div {:class (dom/classnames (css :tool-window) new-css-system
-                                  :tool-window (not new-css-system))
+    [:div {:class (stl/css :tool-window)
            :on-context-menu dom/prevent-default
            :on-click unselect-all}
      [:& file-library-title
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
index 68b50d27c0..0044dbcd18 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
@@ -8,35 +8,35 @@
 .tool-window {
   margin-bottom: $s-24;
 }
-.library-title {
-  .file-name {
-    @include titleTipography;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-grow: 100;
-    height: 100%;
-  }
 
-  .special-title {
-    @include textEllipsis;
-    color: var(--title-foreground-color-hover);
-    margin-left: $s-2;
-    text-align: left;
-  }
+.file-name {
+  @include titleTipography;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-grow: 100;
+  height: 100%;
+}
 
-  .file-link {
-    @extend .button-tertiary;
-    height: $s-32;
-    width: $s-28;
-    border-radius: $br-8;
-    svg {
-      @extend .button-icon;
-      stroke: var(--icon-foreground);
-      fill: var(--title-foreground-color-hover);
-    }
+.special-title {
+  @include textEllipsis;
+  color: var(--title-foreground-color-hover);
+  margin-left: $s-2;
+  text-align: left;
+}
+
+.file-link {
+  @extend .button-tertiary;
+  height: $s-32;
+  width: $s-28;
+  border-radius: $br-8;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+    fill: var(--title-foreground-color-hover);
   }
 }
+
 .library-content {
   display: flex;
   flex-direction: column;
@@ -53,22 +53,23 @@
   flex-direction: column;
   align-items: center;
   gap: $s-8;
-  .no-found-icon {
-    @include flexCenter;
-    background-color: var(--not-found-background-color);
-    border-radius: $br-circle;
-    height: $s-48;
-    width: $s-48;
-    svg {
-      @extend .button-icon;
-      height: $s-24;
-      width: $s-24;
-      stroke: var(--not-found-foreground-color);
-    }
-  }
+}
 
-  .no-found-text {
-    @include titleTipography;
-    color: var(--not-found-foreground-color);
+.no-found-icon {
+  @include flexCenter;
+  background-color: var(--not-found-background-color);
+  border-radius: $br-circle;
+  height: $s-48;
+  width: $s-48;
+  svg {
+    @extend .button-icon;
+    height: $s-24;
+    width: $s-24;
+    stroke: var(--not-found-foreground-color);
   }
 }
+
+.no-found-text {
+  @include titleTipography;
+  color: var(--not-found-foreground-color);
+}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
index 0dd0b0b47e..2705c891cb 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
@@ -14,7 +14,6 @@
    [app.main.store :as st]
    [app.main.ui.components.forms :as fm]
    [app.main.ui.components.title-bar :refer [title-bar]]
-   [app.main.ui.context :as ctx]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.util.dom :as dom]
@@ -27,7 +26,6 @@
   (when-not (empty? path)
     (let [[other-path last-path truncated] (cfh/compact-path path 35 true)
           menu-state     (mf/use-state cmm/initial-context-menu-state)
-          new-css-system (mf/use-ctx ctx/new-css-system)
           on-fold-group
           (mf/use-fn
            (mf/deps file-id section path group-open?)
@@ -46,45 +44,28 @@
 
           on-close-menu
           (mf/use-fn #(swap! menu-state cmm/close-context-menu))]
-      (if new-css-system
-        [:div {:class (stl/css :group-title)
-               :on-context-menu on-context-menu}
-         [:& title-bar {:collapsable?   true
-                        :collapsed?     (not group-open?)
-                        :clickable-all? true
-                        :on-collapsed   on-fold-group
-                        :title          (mf/html [:* (when-not (empty? other-path)
-                                                       [:span {:class (stl/css :pre-path)
-                                                               :title (when truncated path)}
-                                                        other-path "\u00A0\u2022\u00A0"])
-                                                  [:span {:class (stl/css :path)
-                                                          :title (when truncated path)}
-                                                   last-path]])}]
-         [:& cmm/assets-context-menu
-          {:on-close on-close-menu
-           :state @menu-state
-           :options [{:option-name    (tr "workspace.assets.rename")
-                      :id             "assets-rename-group"
-                      :option-handler #(on-rename % path last-path)}
-                     {:option-name    (tr "workspace.assets.ungroup")
-                      :id             "assets-ungroup-group"
-                      :option-handler  #(on-ungroup path)}]}]]
-
-
-        [:div.group-title {:class (when-not group-open? "closed")
-                           :on-click on-fold-group
-                           :on-context-menu on-context-menu}
-         [:span i/arrow-slide]
-         (when-not (empty? other-path)
-           [:span.dim {:title (when truncated path)}
-            other-path "\u00A0/\u00A0"])
-         [:span {:title (when truncated path)}
-          last-path]
-         [:& cmm/assets-context-menu
-          {:on-close on-close-menu
-           :state @menu-state
-           :options [[(tr "workspace.assets.rename") #(on-rename % path last-path)]
-                     [(tr "workspace.assets.ungroup") #(on-ungroup path)]]}]]))))
+      [:div {:class (stl/css :group-title)
+             :on-context-menu on-context-menu}
+       [:& title-bar {:collapsable?   true
+                      :collapsed?     (not group-open?)
+                      :clickable-all? true
+                      :on-collapsed   on-fold-group
+                      :title          (mf/html [:* (when-not (empty? other-path)
+                                                     [:span {:class (stl/css :pre-path)
+                                                             :title (when truncated path)}
+                                                      other-path "\u00A0\u2022\u00A0"])
+                                                [:span {:class (stl/css :path)
+                                                        :title (when truncated path)}
+                                                 last-path]])}]
+       [:& cmm/assets-context-menu
+        {:on-close on-close-menu
+         :state @menu-state
+         :options [{:option-name    (tr "workspace.assets.rename")
+                    :id             "assets-rename-group"
+                    :option-handler #(on-rename % path last-path)}
+                   {:option-name    (tr "workspace.assets.ungroup")
+                    :id             "assets-ungroup-group"
+                    :option-handler  #(on-ungroup path)}]}]])))
 
 (defn group-assets
   "Convert a list of assets in a nested structure like this:
@@ -120,8 +101,7 @@
    ::mf/register-as :name-group-dialog}
   [{:keys [path last-path accept] :as ctx
     :or {path "" last-path ""}}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        initial (mf/use-memo
+  (let [initial (mf/use-memo
                  (mf/deps last-path)
                  (constantly {:asset-name last-path}))
         form  (fm/use-form :spec ::name-group-form
@@ -142,69 +122,36 @@
                (accept asset-name)
                (accept path asset-name))
              (modal/hide!))))]
-    (if new-css-system
-      [:div {:class (stl/css :modal-overlay)}
-       [:div {:class (stl/css :modal-container)}
-        [:div {:class (stl/css :modal-header)}
-         [:h2  {:class (stl/css :modal-title)}
-          (if create?
-            (tr "workspace.assets.create-group")
-            (tr "workspace.assets.rename-group"))]
-         [:button {:class (stl/css :modal-close-btn)
-                   :on-click on-close} i/close-refactor]]
+    [:div {:class (stl/css :modal-overlay)}
+     [:div {:class (stl/css :modal-container)}
+      [:div {:class (stl/css :modal-header)}
+       [:h2  {:class (stl/css :modal-title)}
+        (if create?
+          (tr "workspace.assets.create-group")
+          (tr "workspace.assets.rename-group"))]
+       [:button {:class (stl/css :modal-close-btn)
+                 :on-click on-close} i/close-refactor]]
 
-        [:div {:class (stl/css :modal-content)}
-         [:& fm/form {:form form :on-submit on-accept}
-          [:& fm/input {:name :asset-name
-                        :class (stl/css :input-wrapper)
-                        :auto-focus? true
-                        :label (tr "workspace.assets.group-name")
-                        :hint (tr "workspace.assets.create-group-hint")}]]]
+      [:div {:class (stl/css :modal-content)}
+       [:& fm/form {:form form :on-submit on-accept}
+        [:& fm/input {:name :asset-name
+                      :class (stl/css :input-wrapper)
+                      :auto-focus? true
+                      :label (tr "workspace.assets.group-name")
+                      :hint (tr "workspace.assets.create-group-hint")}]]]
 
-        [:div {:class (stl/css :modal-footer)}
-         [:div {:class (stl/css :action-buttons)}
-          [:input
-           {:class (stl/css :cancel-button)
-            :type "button"
-            :value (tr "labels.cancel")
-            :on-click on-close}]
+      [:div {:class (stl/css :modal-footer)}
+       [:div {:class (stl/css :action-buttons)}
+        [:input
+         {:class (stl/css :cancel-button)
+          :type "button"
+          :value (tr "labels.cancel")
+          :on-click on-close}]
 
-          [:input
-           {:type "button"
-            :class (stl/css-case :accept-btn true
-                                 :global/disabled (not (:valid @form) ))
-            :disabled (not (:valid @form))
-            :value (if create? (tr "labels.create") (tr "labels.rename"))
-            :on-click on-accept}]]]]]
-
-
-      [:div.modal-overlay
-       [:div.modal-container.confirm-dialog
-        [:div.modal-header
-         [:div.modal-header-title
-          [:h2 (if create?
-                 (tr "workspace.assets.create-group")
-                 (tr "workspace.assets.rename-group"))]]
-         [:div.modal-close-button
-          {:on-click on-close} i/close]]
-
-        [:div.modal-content.generic-form
-         [:& fm/form {:form form :on-submit on-accept}
-          [:& fm/input {:name :asset-name
-                        :auto-focus? true
-                        :label (tr "workspace.assets.group-name")
-                        :hint (tr "workspace.assets.create-group-hint")}]]]
-
-        [:div.modal-footer
-         [:div.action-buttons
-          [:input.cancel-button
-           {:type "button"
-            :value (tr "labels.cancel")
-            :on-click on-close}]
-
-          [:input.accept-button.primary
-           {:type "button"
-            :class (when-not (:valid @form) "btn-disabled")
-            :disabled (not (:valid @form))
-            :value (if create? (tr "labels.create") (tr "labels.rename"))
-            :on-click on-accept}]]]]])))
+        [:input
+         {:type "button"
+          :class (stl/css-case :accept-btn true
+                               :global/disabled (not (:valid @form)))
+          :disabled (not (:valid @form))
+          :value (if create? (tr "labels.create") (tr "labels.rename"))
+          :on-click on-accept}]]]]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
index 93235d3bae..c3091a7cb2 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
@@ -8,52 +8,57 @@
 
 .group-title {
   padding-left: $s-4;
-  .pre-path {
-    margin-left: $s-2;
-    text-transform: initial;
-    color: var(--title-foreground-color);
-  }
-  .path {
-    margin-left: $s-2;
-    text-transform: initial;
-    color: var(--title-foreground-color-hover);
-  }
+}
+
+.pre-path {
+  margin-left: $s-2;
+  text-transform: initial;
+  color: var(--title-foreground-color);
+}
+
+.path {
+  margin-left: $s-2;
+  text-transform: initial;
+  color: var(--title-foreground-color-hover);
 }
 
 .modal-overlay {
   @extend .modal-overlay-base;
-  .modal-container {
-    @extend .modal-container-base;
-    .modal-header {
-      margin-bottom: $s-24;
-      .modal-title {
-        @include tabTitleTipography;
-        color: var(--modal-title-foreground-color);
-      }
-      .modal-close-btn {
-        @extend .modal-close-btn-base;
-      }
-    }
-    .modal-content {
-      @include titleTipography;
-      margin-bottom: $s-24;
-      .input-wrapper {
-        @extend .input-with-label;
-      }
-    }
-    .modal-footer {
-      .action-buttons {
-        @extend .modal-action-btns;
-        .cancel-button {
-          @extend .modal-cancel-btn;
-        }
-        .accept-btn {
-          @extend .modal-accept-btn;
-          &.danger {
-            @extend .modal-danger-btn;
-          }
-        }
-      }
-    }
+}
+
+.modal-container {
+  @extend .modal-container-base;
+}
+
+.modal-header {
+  margin-bottom: $s-24;
+}
+
+.modal-title {
+  @include tabTitleTipography;
+  color: var(--modal-title-foreground-color);
+}
+.modal-close-btn {
+  @extend .modal-close-btn-base;
+}
+
+.modal-content {
+  @include titleTipography;
+  margin-bottom: $s-24;
+}
+.input-wrapper {
+  @extend .input-with-label;
+}
+.action-buttons {
+  @extend .modal-action-btns;
+}
+.cancel-button {
+  @extend .modal-cancel-btn;
+}
+
+.accept-btn {
+  @extend .modal-accept-btn;
+  &.danger {
+    @extend .modal-danger-btn;
   }
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs
index 5708709d33..d85b1979cb 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs
@@ -46,7 +46,6 @@
         dragging?      (deref dragging*)
 
         read-only?     (mf/use-ctx ctx/workspace-read-only?)
-        new-css-system (mf/use-ctx ctx/new-css-system)
         editing?       (= editing-id (:id typography))
         renaming?      (= renaming-id (:id typography))
 
@@ -100,52 +99,29 @@
          (mf/deps typography apply-typography on-asset-click)
          (partial on-asset-click typography-id apply-typography))]
 
-    (if ^boolean new-css-system
-      [:div {:class (stl/css :typography-item)
-             :ref item-ref
-             :draggable (and (not read-only?) (not open?))
-             :on-drag-start on-typography-drag-start
-             :on-drag-enter on-drag-enter
-             :on-drag-leave on-drag-leave
-             :on-drag-over dom/prevent-default
-             :on-drop on-drop}
+    [:div {:class (stl/css :typography-item)
+           :ref item-ref
+           :draggable (and (not read-only?) (not open?))
+           :on-drag-start on-typography-drag-start
+           :on-drag-enter on-drag-enter
+           :on-drag-leave on-drag-leave
+           :on-drag-over dom/prevent-default
+           :on-drop on-drop}
 
-       [:& typography-entry
-        {:typography typography
-         :local? local?
-         :on-context-menu on-context-menu
-         :on-change handle-change
-         :selected? (contains? selected typography-id)
-         :on-click on-asset-click
-         :editing? editing?
-         :renaming? renaming?
-         :focus-name? rename?
-         :external-open* open*
-         :file-id file-id}]
-       (when ^boolean dragging?
-         [:div {:class (stl/css :dragging)}])]
-
-      [:div.typography-container {:ref item-ref
-                                  :draggable (and (not read-only?) (not open?))
-                                  :on-drag-start on-typography-drag-start
-                                  :on-drag-enter on-drag-enter
-                                  :on-drag-leave on-drag-leave
-                                  :on-drag-over dom/prevent-default
-                                  :on-drop on-drop}
-       [:& typography-entry
-        {:typography typography
-         :local? local?
-         :on-context-menu on-context-menu
-         :on-change handle-change
-         :selected? (contains? selected typography-id)
-         :on-click on-asset-click
-         :editing? editing?
-         :focus-name? rename?
-         :external-open* open*
-         :file-id file-id}]
-
-       (when ^boolean dragging?
-         [:div.dragging])])))
+     [:& typography-entry
+      {:typography typography
+       :local? local?
+       :on-context-menu on-context-menu
+       :on-change handle-change
+       :selected? (contains? selected typography-id)
+       :on-click on-asset-click
+       :editing? editing?
+       :renaming? renaming?
+       :focus-name? rename?
+       :external-open* open*
+       :file-id file-id}]
+     (when ^boolean dragging?
+       [:div {:class (stl/css :dragging)}])]))
 
 (mf/defc typographies-group
   {::mf/wrap-props false}
@@ -155,7 +131,6 @@
   (let [group-open?   (get open-groups prefix true)
         dragging*      (mf/use-state false)
         dragging?      (deref dragging*)
-        new-css-system (mf/use-ctx ctx/new-css-system)
         selected-paths (mf/with-memo [selected-full]
                          (into #{}
                                (comp (map :path) (d/nilv ""))
@@ -183,134 +158,72 @@
          (fn [event]
            (cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full move-typography)))]
 
-    (if ^boolean new-css-system
-      [:div {:class (stl/css :typographies-group)
-             :on-drag-enter on-drag-enter
-             :on-drag-leave on-drag-leave
-             :on-drag-over dom/prevent-default
-             :on-drop on-drop}
-       [:& grp/asset-group-title {:file-id file-id
-                                  :section :typographies
-                                  :path prefix
-                                  :group-open? group-open?
-                                  :on-rename on-rename-group
-                                  :on-ungroup on-ungroup}]
+    [:div {:class (stl/css :typographies-group)
+           :on-drag-enter on-drag-enter
+           :on-drag-leave on-drag-leave
+           :on-drag-over dom/prevent-default
+           :on-drop on-drop}
+     [:& grp/asset-group-title {:file-id file-id
+                                :section :typographies
+                                :path prefix
+                                :group-open? group-open?
+                                :on-rename on-rename-group
+                                :on-ungroup on-ungroup}]
 
-       (when group-open?
-         [:*
-          (let [typographies (get groups "" [])]
-            [:div {:class (stl/css :assets-list)
-                   :on-drag-enter on-drag-enter
-                   :on-drag-leave on-drag-leave
-                   :on-drag-over dom/prevent-default
-                   :on-drop on-drop}
+     (when group-open?
+       [:*
+        (let [typographies (get groups "" [])]
+          [:div {:class (stl/css :assets-list)
+                 :on-drag-enter on-drag-enter
+                 :on-drag-leave on-drag-leave
+                 :on-drag-over dom/prevent-default
+                 :on-drop on-drop}
 
-             (when ^boolean dragging?
-               [:div {:class  (stl/css :grid-placeholder)} "\u00A0"])
+           (when ^boolean dragging?
+             [:div {:class  (stl/css :grid-placeholder)} "\u00A0"])
 
-             (when (and
-                    (empty? typographies)
-                    (some? groups))
-               [:div  {:class (stl/css :drop-space)}])
-             (for [{:keys [id] :as typography} typographies]
-               [:& typography-item {:typography typography
-                                    :key (dm/str "typography-" id)
-                                    :file-id file-id
+           (when (and
+                  (empty? typographies)
+                  (some? groups))
+             [:div  {:class (stl/css :drop-space)}])
+           (for [{:keys [id] :as typography} typographies]
+             [:& typography-item {:typography typography
+                                  :key (dm/str "typography-" id)
+                                  :file-id file-id
+                                  :local? local?
+                                  :handle-change handle-change
+                                  :selected selected
+                                  :apply-typography apply-typography
+                                  :editing-id editing-id
+                                  :renaming-id renaming-id
+                                  :rename? (= (:rename-typography local-data) id)
+                                  :on-asset-click on-asset-click
+                                  :on-context-menu on-context-menu
+                                  :selected-full selected-full
+                                  :selected-paths selected-paths
+                                  :move-typography move-typography}])])
+
+        (for [[path-item content] groups]
+          (when-not (empty? path-item)
+            [:& typographies-group {:file-id file-id
+                                    :prefix (cfh/merge-path-item prefix path-item)
+                                    :key (dm/str "group-" path-item)
+                                    :groups content
+                                    :open-groups open-groups
+                                    :force-open? force-open?
+                                    :file file
                                     :local? local?
-                                    :handle-change handle-change
                                     :selected selected
-                                    :apply-typography apply-typography
                                     :editing-id editing-id
                                     :renaming-id renaming-id
-                                    :rename? (= (:rename-typography local-data) id)
+                                    :local-data local-data
                                     :on-asset-click on-asset-click
-                                    :on-context-menu on-context-menu
-                                    :selected-full selected-full
-                                    :selected-paths selected-paths
-                                    :move-typography move-typography}])])
-
-          (for [[path-item content] groups]
-            (when-not (empty? path-item)
-              [:& typographies-group {:file-id file-id
-                                      :prefix (cfh/merge-path-item prefix path-item)
-                                      :key (dm/str "group-" path-item)
-                                      :groups content
-                                      :open-groups open-groups
-                                      :force-open? force-open?
-                                      :file file
-                                      :local? local?
-                                      :selected selected
-                                      :editing-id editing-id
-                                      :renaming-id renaming-id
-                                      :local-data local-data
-                                      :on-asset-click on-asset-click
-                                      :handle-change handle-change
-                                      :apply-typography apply-typography
-                                      :on-rename-group on-rename-group
-                                      :on-ungroup on-ungroup
-                                      :on-context-menu on-context-menu
-                                      :selected-full selected-full}]))])]
-      [:div {:on-drag-enter on-drag-enter
-             :on-drag-leave on-drag-leave
-             :on-drag-over dom/prevent-default
-             :on-drop on-drop}
-       [:& grp/asset-group-title {:file-id file-id
-                                  :section :typographies
-                                  :path prefix
-                                  :group-open? group-open?
-                                  :on-rename on-rename-group
-                                  :on-ungroup on-ungroup}]
-       (when group-open?
-         [:*
-          (let [typographies (get groups "" [])]
-            [:div.asset-list {:on-drag-enter on-drag-enter
-                              :on-drag-leave on-drag-leave
-                              :on-drag-over dom/prevent-default
-                              :on-drop on-drop}
-
-             (when ^boolean dragging?
-               [:div.grid-placeholder "\u00A0"])
-
-             (when (and
-                    (empty? typographies)
-                    (some? groups))
-               [:div.drop-space])
-             (for [{:keys [id] :as typography} typographies]
-               [:& typography-item {:typography typography
-                                    :key (dm/str "typography-" id)
-                                    :file-id file-id
-                                    :local? local?
                                     :handle-change handle-change
-                                    :selected selected
                                     :apply-typography apply-typography
-                                    :editing-id editing-id
-                                    :rename? (= (:rename-typography local-data) id)
-                                    :on-asset-click on-asset-click
+                                    :on-rename-group on-rename-group
+                                    :on-ungroup on-ungroup
                                     :on-context-menu on-context-menu
-                                    :selected-full selected-full
-                                    :selected-paths selected-paths
-                                    :move-typography move-typography}])])
-
-          (for [[path-item content] groups]
-            (when-not (empty? path-item)
-              [:& typographies-group {:file-id file-id
-                                      :prefix (cfh/merge-path-item prefix path-item)
-                                      :key (dm/str "group-" path-item)
-                                      :groups content
-                                      :open-groups open-groups
-                                      :force-open? force-open?
-                                      :file file
-                                      :local? local?
-                                      :selected selected
-                                      :editing-id editing-id
-                                      :local-data local-data
-                                      :on-asset-click on-asset-click
-                                      :handle-change handle-change
-                                      :apply-typography apply-typography
-                                      :on-rename-group on-rename-group
-                                      :on-ungroup on-ungroup
-                                      :on-context-menu on-context-menu
-                                      :selected-full selected-full}]))])])))
+                                    :selected-full selected-full}]))])]))
 
 (mf/defc typographies-section
   {::mf/wrap-props false}
@@ -320,7 +233,6 @@
         local-data     (mf/deref lens:typography-section-state)
 
         read-only?     (mf/use-ctx ctx/workspace-read-only?)
-        new-css-system (mf/use-ctx ctx/new-css-system)
         menu-state     (mf/use-state cmm/initial-context-menu-state)
         typographies   (mf/with-memo [typographies]
                          (mapv dwl/extract-path-if-missing typographies))
@@ -465,10 +377,7 @@
                          (dwl/sync-file file-id file-id :typographies (:id @state))
                          (dwu/commit-undo-transaction undo-id))))))
 
-        editing-id (if new-css-system
-                     (:edit-typography local-data)
-                     (or (:rename-typography local-data)
-                         (:edit-typography local-data)))
+        editing-id (:edit-typography local-data)
 
         renaming-id (:rename-typography local-data)
 
@@ -478,10 +387,8 @@
          (partial on-asset-click groups))]
 
     (mf/use-effect
-     (mf/deps local-data new-css-system)
+     (mf/deps local-data )
      (fn []
-       (when (and (not new-css-system)(:rename-typography local-data))
-         (st/emit! #(update % :workspace-global dissoc :rename-typography)))
        (when (:edit-typography local-data)
          (st/emit! #(update % :workspace-global dissoc :edit-typography)))))
 
@@ -491,19 +398,12 @@
                            :section :typographies
                            :assets-count (count typographies)
                            :open? open?}
-     (if ^boolean new-css-system
-       (when local?
-         [:& cmm/asset-section-block {:role :title-button}
-          (when-not read-only?
-            [:button {:class (stl/css :assets-btn)
-                      :on-click add-typography}
-             i/add-refactor])])
-
-       (when local?
-         [:& cmm/asset-section-block {:role :title-button}
-          (when-not read-only?
-            [:div.assets-button {:on-click add-typography}
-             i/plus])]))
+     (when local?
+       [:& cmm/asset-section-block {:role :title-button}
+        (when-not read-only?
+          [:button {:class (stl/css :assets-btn)
+                    :on-click add-typography}
+           i/add-refactor])])
 
      [:& cmm/asset-section-block {:role :content}
       [:& typographies-group {:file-id file-id
@@ -530,38 +430,28 @@
         [:& cmm/assets-context-menu
          {:on-close on-close-menu
           :state @menu-state
-          :options (if new-css-system
-                     [(when-not (or multi-typographies? multi-assets?)
-                        {:option-name    (tr "workspace.assets.rename")
-                         :id             "assets-rename-typography"
-                         :option-handler handle-rename-typography-clicked})
-
-                      (when-not (or multi-typographies? multi-assets?)
-                        {:option-name    (tr "workspace.assets.edit")
-                         :id             "assets-edit-typography"
-                         :option-handler handle-edit-typography-clicked})
-
-                      {:option-name    (tr "workspace.assets.delete")
-                       :id             "assets-delete-typography"
-                       :option-handler handle-delete-typography}
-
-                      (when-not multi-assets?
-                        {:option-name    (tr "workspace.assets.group")
-                         :id             "assets-group-typography"
-                         :option-handler on-group})]
-
-                     [(when-not (or multi-typographies? multi-assets?)
-                        [(tr "workspace.assets.rename") handle-rename-typography-clicked])
-                      (when-not (or multi-typographies? multi-assets?)
-                        [(tr "workspace.assets.edit") handle-edit-typography-clicked])
-                      [(tr "workspace.assets.delete") handle-delete-typography]
-                      (when-not multi-assets?
-                        [(tr "workspace.assets.group") on-group])])}]
-
-        (when new-css-system
-          [:& cmm/assets-context-menu
-           {:on-close on-close-menu
-            :state @menu-state
-            :options [{:option-name   "show info"
+          :options [(when-not (or multi-typographies? multi-assets?)
+                      {:option-name    (tr "workspace.assets.rename")
                        :id             "assets-rename-typography"
-                       :option-handler handle-edit-typography-clicked}]}]))]]]))
+                       :option-handler handle-rename-typography-clicked})
+
+                    (when-not (or multi-typographies? multi-assets?)
+                      {:option-name    (tr "workspace.assets.edit")
+                       :id             "assets-edit-typography"
+                       :option-handler handle-edit-typography-clicked})
+
+                    {:option-name    (tr "workspace.assets.delete")
+                     :id             "assets-delete-typography"
+                     :option-handler handle-delete-typography}
+
+                    (when-not multi-assets?
+                      {:option-name    (tr "workspace.assets.group")
+                       :id             "assets-group-typography"
+                       :option-handler on-group})]}]
+
+        [:& cmm/assets-context-menu
+         {:on-close on-close-menu
+          :state @menu-state
+          :options [{:option-name   "show info"
+                     :id             "assets-rename-typography"
+                     :option-handler handle-edit-typography-clicked}]}])]]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss
index 01a0bb172d..e0ad31a23a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss
@@ -17,34 +17,37 @@
     stroke: var(--icon-foreground);
   }
 }
-.typographies-group {
-  .assets-list {
-    padding: 0 0 0 $s-4;
-    .drop-space {
-      height: $s-12;
-    }
-    .grid-placeholder {
-      height: $s-2;
-      width: 100%;
-      background-color: var(--color-accent-primary);
-    }
-    .typography-item {
-      position: relative;
-      display: flex;
-      align-items: center;
-      margin-bottom: $s-4;
-      border-radius: $br-8;
-      background-color: var(--assets-item-background-color);
-    }
-    .dragging {
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 100%;
-      width: 100%;
-      border: $s-2 solid var(--assets-item-border-color-drag);
-      border-radius: $s-8;
-      background-color: var(--assets-item-background-color-drag);
-    }
-  }
+
+.assets-list {
+  padding: 0 0 0 $s-4;
+}
+
+.drop-space {
+  height: $s-12;
+}
+
+.grid-placeholder {
+  height: $s-2;
+  width: 100%;
+  background-color: var(--color-accent-primary);
+}
+
+.typography-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-bottom: $s-4;
+  border-radius: $br-8;
+  background-color: var(--assets-item-background-color);
+}
+
+.dragging {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  border: $s-2 solid var(--assets-item-border-color-drag);
+  border-radius: $s-8;
+  background-color: var(--assets-item-background-color-drag);
 }