From c707539f6f6c9a17a8b700824724ee523662286f Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Thu, 28 Dec 2023 13:35:30 +0100
Subject: [PATCH] :recycle: Remove new-css-system from layers

---
 frontend/resources/styles/common/base.scss    |   3 +
 .../styles/common/refactor/basic-rules.scss   |   2 +-
 .../styles/common/refactor/design-tokens.scss |   3 +-
 frontend/resources/styles/main-default.scss   |   4 -
 .../styles/main/partials/sidebar-icons.scss   |  49 --
 .../styles/main/partials/sidebar-layers.scss  | 540 ------------------
 .../styles/main/partials/sidebar-sitemap.scss |  89 ---
 .../styles/main/partials/sidebar-tools.scss   |  40 --
 .../styles/main/partials/sidebar.scss         |   4 -
 .../main/ui/workspace/sidebar/layer_item.cljs | 176 ++----
 .../main/ui/workspace/sidebar/layer_item.scss |  53 +-
 .../main/ui/workspace/sidebar/layer_name.cljs |  25 +-
 .../main/ui/workspace/sidebar/layer_name.scss |   2 +-
 .../app/main/ui/workspace/sidebar/layers.cljs | 361 +++++-------
 .../app/main/ui/workspace/sidebar/layers.scss | 413 +++++++-------
 .../sidebar/options/menus/constraints.scss    |  11 +-
 16 files changed, 460 insertions(+), 1315 deletions(-)
 delete mode 100644 frontend/resources/styles/main/partials/sidebar-icons.scss
 delete mode 100644 frontend/resources/styles/main/partials/sidebar-layers.scss
 delete mode 100644 frontend/resources/styles/main/partials/sidebar-sitemap.scss
 delete mode 100644 frontend/resources/styles/main/partials/sidebar-tools.scss

diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss
index fd1e4ecb0f..43543103fb 100644
--- a/frontend/resources/styles/common/base.scss
+++ b/frontend/resources/styles/common/base.scss
@@ -17,6 +17,9 @@ body {
   width: 100vw;
   height: 100vh;
   overflow: hidden;
+
+  background-color: red; //debugger colors
+  color: #fabada; //debugger colors
 }
 
 #app {
diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss
index 944fa8e522..9cfb1eb6c4 100644
--- a/frontend/resources/styles/common/refactor/basic-rules.scss
+++ b/frontend/resources/styles/common/refactor/basic-rules.scss
@@ -403,7 +403,6 @@
   min-width: $s-16;
   min-height: $s-16;
   border-radius: $br-6;
-
   background-color: var(--input-checkbox-inactive-background-color);
   border-radius: $br-4;
   box-shadow: inset 0 0 0px 2px rgb(255 255 255 / 20%);
@@ -451,6 +450,7 @@
     align-items: center;
     gap: $s-6;
     cursor: pointer;
+    color: var(--input-checkbox-text-foreground-color);
     span {
       @extend .checkbox-icon;
     }
diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index cd3433b515..095fb40e9d 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -162,10 +162,11 @@
   --input-checkbox-background-color-intermediate: var(--color-foreground-secondary);
 
   // Checkbox color
-  --input-checkbox-inactive-background-color: var(--off-white);
+  --input-checkbox-inactive-background-color: var(--color-foreground-secondary);
   --input-checkbox-inactive-foreground-color: var(--color-background-primary);
   --input-checkbox-active-background-color: var(--color-accent-primary);
   --input-checkbox-active-foreground-color: var(--color-background-primary);
+  --input-checkbox-text-foreground-color: var(--color-foreground-secondary);
 
   --menu-background-color: var(--color-background-tertiary);
   --menu-foreground-color: var(--color-foreground-primary);
diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss
index 26695dd85c..8d20f8f620 100644
--- a/frontend/resources/styles/main-default.scss
+++ b/frontend/resources/styles/main-default.scss
@@ -75,15 +75,11 @@
 @import "main/partials/loader";
 @import "main/partials/project-bar";
 @import "main/partials/sidebar";
-@import "main/partials/sidebar-layers";
 @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-icons";
 @import "main/partials/sidebar-interactions";
-@import "main/partials/sidebar-sitemap";
-@import "main/partials/sidebar-tools";
 @import "main/partials/tab-container";
 @import "main/partials/tool-bar";
 @import "main/partials/user-settings";
diff --git a/frontend/resources/styles/main/partials/sidebar-icons.scss b/frontend/resources/styles/main/partials/sidebar-icons.scss
deleted file mode 100644
index c48dd2e39e..0000000000
--- a/frontend/resources/styles/main/partials/sidebar-icons.scss
+++ /dev/null
@@ -1,49 +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
-
-.figures-catalog {
-  width: 100%;
-  padding: $size-4 $size-4 0 $size-4;
-
-  select {
-    color: $color-gray-10;
-    width: 100%;
-    margin-bottom: 0;
-  }
-}
-
-.figure-btn {
-  align-items: center;
-  background-color: $color-gray-60;
-  border-radius: $br3;
-  border: 1px solid transparent;
-  cursor: pointer;
-  display: flex;
-  flex-shrink: 0;
-  height: 54px;
-  justify-content: center;
-  margin: $size-4 0 0 $size-4;
-  width: 54px;
-
-  svg {
-    fill: $color-gray-20;
-    height: 40px;
-    width: 40px;
-  }
-
-  &:hover {
-    background-color: $color-gray-10;
-    border-color: $color-gray-60;
-  }
-
-  &.selected {
-    background-color: $color-primary;
-
-    svg {
-      fill: $color-white;
-    }
-  }
-}
diff --git a/frontend/resources/styles/main/partials/sidebar-layers.scss b/frontend/resources/styles/main/partials/sidebar-layers.scss
deleted file mode 100644
index b07d260386..0000000000
--- a/frontend/resources/styles/main/partials/sidebar-layers.scss
+++ /dev/null
@@ -1,540 +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
-
-.element-list-body {
-  align-items: center;
-  display: flex;
-  height: 32px;
-  padding: $size-1 $size-2;
-  transition: none;
-  width: 100%;
-  .toggle-content {
-    svg {
-      display: flex;
-      height: 13px;
-      width: 13px;
-    }
-  }
-
-  .icon {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 4px;
-    margin-bottom: 3px;
-    width: 18px;
-    height: 18px;
-
-    svg {
-      fill: $color-gray-20;
-      height: 12px;
-      width: 12px;
-    }
-
-    & .absolute {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 18px;
-      height: 18px;
-
-      svg {
-        width: 18px;
-        height: 18px;
-        fill: $color-gray-20;
-        fill-opacity: 0.5;
-      }
-    }
-  }
-
-  &.selected .icon .absolute svg {
-    fill: $color-primary;
-  }
-
-  &:hover .icon .absolute svg {
-    fill: $color-gray-60;
-  }
-
-  &.group {
-    &.open {
-      .toggle-content {
-        flex-shrink: 0;
-
-        svg {
-          transform: rotate(270deg);
-        }
-      }
-    }
-  }
-
-  &:hover,
-  &.hover {
-    background-color: $color-primary;
-
-    svg {
-      fill: $color-gray-60 !important;
-    }
-
-    .element-icon,
-    .element-actions {
-      svg {
-        fill: $color-gray-60;
-      }
-    }
-
-    .element-actions > * {
-      display: flex;
-    }
-
-    span {
-      color: $color-gray-60;
-    }
-    input {
-      color: $color-white !important;
-    }
-
-    .toggle-content {
-      svg {
-        fill: $color-gray-60;
-      }
-    }
-  }
-
-  &.selected {
-    background-color: $color-gray-60;
-
-    svg {
-      fill: $color-primary;
-    }
-
-    .element-icon {
-      svg {
-        fill: $color-primary;
-      }
-    }
-
-    span {
-      color: $color-primary;
-    }
-
-    &:hover {
-      background-color: $color-primary;
-
-      .element-icon,
-      .element-actions {
-        svg {
-          fill: $color-gray-60;
-        }
-      }
-
-      .element-name {
-        color: $color-gray-60;
-      }
-    }
-  }
-
-  &.drag-top {
-    border-top: 40px solid $color-gray-60 !important;
-  }
-
-  &.drag-bottom {
-    border-bottom: 40px solid $color-gray-60 !important;
-  }
-
-  &.drag-inside {
-    border: 2px solid $color-primary !important;
-  }
-}
-
-.element-list li.sticky {
-  > :first-child {
-    position: sticky;
-    top: 0px;
-    background-color: $color-gray-50;
-    z-index: 1;
-    &.selected {
-      background-color: #1f1f1f;
-    }
-    &:hover {
-      background-color: #31efb8;
-    }
-  }
-}
-
-.element-list li.component {
-  .element-list-body {
-    span.element-name {
-      color: $color-component;
-    }
-
-    svg {
-      fill: $color-component;
-    }
-
-    &.selected {
-      span.element-name {
-        color: $color-component-highlight;
-      }
-
-      svg {
-        fill: $color-component-highlight;
-      }
-    }
-
-    &:hover {
-      background-color: $color-component-highlight;
-
-      span.element-name {
-        color: $color-gray-60;
-      }
-      input.element-name {
-        color: $color-white !important;
-      }
-
-      svg {
-        fill: $color-gray-60;
-      }
-    }
-  }
-}
-
-.element-list li.masked > .element-children > li {
-  &:first-child {
-    position: relative;
-
-    &::before {
-      content: " ";
-      border-right: 1px solid $color-gray-40;
-      border-top: 1px solid $color-gray-40;
-      position: absolute;
-      width: 6px;
-      height: 6px;
-      transform: rotate(-45deg);
-      top: -1px;
-      left: -4px;
-    }
-
-    &.sticky {
-      margin-top: 32px;
-    }
-  }
-
-  &:last-child {
-    border-left: none;
-    position: relative;
-
-    &::after {
-      content: " ";
-      border-left: 1px solid $color-gray-40;
-      border-bottom: 1px solid $color-gray-40;
-      height: 1rem;
-      width: 0.3rem;
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-  }
-}
-
-.element-icon {
-  svg {
-    fill: $color-gray-30;
-  }
-}
-
-input.element-name {
-  max-width: 75%;
-  margin-right: 5px;
-  background-color: $color-gray-50;
-  color: $color-white;
-  &:focus,
-  &:focus-within {
-    outline: none;
-    border: 1px solid $color-primary;
-  }
-}
-
-span.element-name {
-  color: $color-gray-20;
-  display: block;
-  font-size: $fs12;
-  max-width: 75%;
-  min-width: 40px;
-  min-height: 16px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  &.left-ellipsis {
-    direction: rtl; // hack for getting the ellipsis on the left side
-  }
-}
-
-span.element-name-touched {
-  color: $color-component;
-}
-
-.element-actions {
-  display: flex;
-  flex-shrink: 0;
-  height: 14px;
-  margin-left: auto;
-  position: relative;
-  width: 32px;
-
-  &.is-parent {
-    right: 0;
-  }
-
-  svg {
-    height: 13px;
-    width: 13px;
-  }
-
-  > * {
-    display: none;
-  }
-
-  .toggle-element,
-  .block-element {
-    border: none;
-    background-color: transparent;
-    left: 0;
-    position: absolute;
-    top: 0;
-
-    &.selected {
-      display: flex;
-
-      svg {
-        fill: $color-gray-20;
-      }
-    }
-  }
-}
-
-.block-element {
-  left: 18px !important;
-
-  svg {
-    fill: $color-gray-30;
-  }
-}
-
-.toggle-content {
-  margin-left: 8px;
-  width: 12px;
-
-  svg {
-    fill: $color-gray-20;
-    transform: rotate(90deg);
-    width: 10px;
-  }
-
-  &.inverse {
-    svg {
-      transform: rotate(270deg);
-    }
-  }
-
-  &:hover {
-    svg {
-      fill: $color-gray-60;
-    }
-  }
-}
-
-.icon-layer {
-  > svg {
-    background-color: rgba(255, 255, 255, 0.6);
-    border-radius: $br3;
-    flex-shrink: 0;
-    fill: $color-black !important;
-    padding: 1px;
-  }
-}
-
-#layers {
-  .tool-window-bar,
-  .pages-tool-bar {
-    display: flex;
-    justify-content: space-between;
-    height: 40px;
-    padding: 0;
-
-    &.search {
-      margin-top: 8px;
-      padding: 8px;
-      .search-box {
-        border: 1px solid $color-gray-20;
-        border-radius: $br4;
-        height: 32px;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        &:active,
-        &:focus-within {
-          border: 1px solid $color-primary;
-        }
-        input {
-          border: 0;
-          width: 100%;
-          background-color: $color-gray-50;
-          color: $color-white;
-          font-size: $fs12;
-          flex-grow: 1;
-          margin: 0;
-          height: 16px;
-          &:focus {
-            outline: none;
-          }
-        }
-        div {
-          height: 16px;
-          overflow: hidden;
-          width: 100%;
-          display: flex;
-          align-items: center;
-        }
-        .filter,
-        .clear {
-          width: 35px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          &.active {
-            svg {
-              fill: $color-primary;
-            }
-          }
-        }
-      }
-    }
-
-    svg {
-      width: 16px;
-      height: 16px;
-      margin: 0 2px 0 5px;
-      cursor: pointer;
-    }
-    .page-name {
-      padding: 8px;
-      margin-top: 8px;
-      color: #e3e3e3;
-      font-size: 0.875rem;
-      max-width: 90%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .icon-search {
-      margin-top: 8px;
-    }
-    .focus-title {
-      width: 100%;
-      height: 100%;
-      display: grid;
-      align-items: center;
-      grid-template-columns: 16px 1fr auto;
-      grid-column-gap: 8px;
-      cursor: pointer;
-
-      .back-button {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-        background: none;
-        border: none;
-        padding: 0;
-        margin: 0;
-
-        svg {
-          width: 12px;
-          height: 12px;
-          fill: $color-gray-20;
-          transform: rotate(180deg);
-        }
-
-        &:hover {
-          svg {
-            fill: $color-primary;
-          }
-        }
-      }
-
-      .focus-name {
-        height: 100%;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .focus-mode {
-        color: $color-primary;
-        border: 1px solid $color-primary;
-        border-radius: $br3;
-        font-size: $fs10;
-        text-transform: uppercase;
-        padding: 0px 4px;
-        display: flex;
-        align-items: center;
-      }
-    }
-  }
-}
-.active-filters {
-  margin-top: 5px;
-  line-height: 26px; // Original value was 26px; 26px/11px = 236.363636364% => $lh-236 (rounded)
-  font-size: $fs11;
-  margin: 0 0.5rem;
-  span {
-    background-color: $color-primary;
-    color: $color-black;
-    padding: 3px 5px;
-    margin: 0 2px;
-    border: none;
-    border-radius: $br4;
-    cursor: pointer;
-    svg {
-      width: 7px;
-      height: 7px;
-      vertical-align: middle;
-      margin-left: 5px;
-    }
-  }
-}
-
-.filters-container {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  top: 40px;
-  left: 8px;
-  background-color: $color-white;
-  color: $color-gray-50;
-  border-radius: $br4;
-  z-index: 1;
-  span {
-    padding: 10px 20px 10px 10px;
-    border-radius: $br4;
-    svg {
-      width: 16px;
-      height: 16px;
-      margin-right: 10px;
-      vertical-align: middle;
-      fill: $color-gray-30;
-    }
-
-    &:hover {
-      background-color: $color-primary-lighter;
-    }
-  }
-}
diff --git a/frontend/resources/styles/main/partials/sidebar-sitemap.scss b/frontend/resources/styles/main/partials/sidebar-sitemap.scss
deleted file mode 100644
index 8f92f34d42..0000000000
--- a/frontend/resources/styles/main/partials/sidebar-sitemap.scss
+++ /dev/null
@@ -1,89 +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
-
-.add-page {
-  align-items: center;
-  background-color: transparent;
-  border-radius: $br3;
-  border: 1px solid transparent;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  margin-left: auto;
-  padding: $size-1;
-
-  svg {
-    fill: $color-gray-20;
-    height: 0.7rem;
-    width: 0.7rem;
-  }
-
-  &:hover {
-    background-color: $color-primary;
-
-    svg {
-      fill: $color-gray-60 !important;
-    }
-  }
-}
-
-.title-actions {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  margin-left: auto;
-  .layout-btns {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-  .remove-layout {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 21px;
-    width: 21px;
-    padding: 4px;
-    svg {
-      height: 0.7rem;
-      width: 0.7rem;
-    }
-  }
-  button {
-    background-color: transparent;
-    border-radius: $br3;
-    border: 1px solid transparent;
-    cursor: pointer;
-    color: $color-gray-20;
-    svg {
-      fill: $color-gray-20;
-      height: 0.7rem;
-      width: 0.7rem;
-    }
-    &.active {
-      color: $color-primary;
-    }
-
-    &:hover {
-      background-color: $color-primary;
-      color: $color-gray-60;
-      svg {
-        fill: $color-gray-60 !important;
-      }
-    }
-  }
-}
-
-.element-set-title-actions {
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  justify-content: flex-end;
-
-  .add-page {
-    margin: 0;
-  }
-}
diff --git a/frontend/resources/styles/main/partials/sidebar-tools.scss b/frontend/resources/styles/main/partials/sidebar-tools.scss
deleted file mode 100644
index 90a320cc48..0000000000
--- a/frontend/resources/styles/main/partials/sidebar-tools.scss
+++ /dev/null
@@ -1,40 +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
-
-.drawing-tools {
-  max-height: 185px;
-}
-
-.tool-btn {
-  align-items: center;
-  background-color: $color-gray-60;
-  border-radius: $br4;
-  cursor: pointer;
-  display: flex;
-  flex-shrink: 0;
-  height: 54px;
-  justify-content: center;
-  margin: $size-4 0 0 $size-4;
-  width: 54px;
-
-  svg {
-    fill: $color-gray-20;
-    height: 35px;
-    width: 35px;
-  }
-
-  &:hover {
-    background-color: $color-gray-10;
-  }
-
-  &.selected {
-    background-color: $color-primary;
-
-    svg {
-      fill: $color-white;
-    }
-  }
-}
diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss
index 7b8a449ec4..88b199e3e5 100644
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ b/frontend/resources/styles/main/partials/sidebar.scss
@@ -327,10 +327,6 @@ button.collapse-sidebar {
   }
 }
 
-#layers.tool-window {
-  overflow: auto;
-}
-
 .layers-tab {
   display: grid;
   grid-template-rows: auto 1fr;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
index 400dc5adbf..4cafb8a012 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
@@ -18,7 +18,6 @@
    [app.main.data.workspace.collapse :as dwc]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.shape-icon :as si]
    [app.main.ui.components.shape-icon-refactor :as sic]
    [app.main.ui.context :as ctx]
    [app.main.ui.hooks :as hooks]
@@ -130,6 +129,7 @@
                        :type-comp component-tree?
                        :type-frame (cfh/frame-shape? item)
                        :hidden? hidden?}]
+
        (when (not read-only?)
          [:div {:class (stl/css-case
                         :element-actions true
@@ -159,11 +159,9 @@
   {::mf/wrap-props false}
   [{:keys [index item selected objects sortable? filtered? depth parent-size component-child? highlighted]}]
   (let [id                (:id item)
-        name              (:name item)
         blocked?          (:blocked item)
         hidden?           (:hidden item)
-        touched?          (-> item :touched seq boolean)
-        has-shapes?       (-> item :shapes seq boolean)
+
 
         drag-disabled*    (mf/use-state false)
         drag-disabled?    (deref drag-disabled*)
@@ -179,14 +177,8 @@
 
         container?        (or (cfh/frame-shape? item)
                               (cfh/group-shape? item))
-        absolute?         (ctl/item-absolute? item)
 
-        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)
-        main-instance?    (if components-v2
-                            (:main-instance item)
-                            true)
         parent-board?     (and (cfh/frame-shape? item)
                                (= uuid/zero (:parent-id item)))
         toggle-collapse
@@ -346,124 +338,48 @@
         #(when (some? subid)
            (rx/dispose! subid))))
 
-    (if new-css-system
-      [:& layer-item-inner
-       {:ref dref
-        :item item
-        :depth depth
-        :parent-size parent-size
-        :name-ref ref
-        :read-only? read-only?
-        :highlighted? highlighted?
-        :selected? selected?
-        :component-tree? component-tree?
-        :filtered? filtered?
-        :expanded? expanded?
-        :dnd-over? (= (:over dprops) :center)
-        :dnd-over-top? (= (:over dprops) :top)
-        :dnd-over-bot? (= (:over dprops) :bot)
-        :on-select-shape select-shape
-        :on-context-menu on-context-menu
-        :on-pointer-enter on-pointer-enter
-        :on-pointer-leave on-pointer-leave
-        :on-zoom-to-selected zoom-to-selected
-        :on-toggle-collapse toggle-collapse
-        :on-enable-drag enable-drag
-        :on-disable-drag disable-drag
-        :on-toggle-visibility toggle-visibility
-        :on-toggle-blocking toggle-blocking}
+    [:& layer-item-inner
+     {:ref dref
+      :item item
+      :depth depth
+      :parent-size parent-size
+      :name-ref ref
+      :read-only? read-only?
+      :highlighted? highlighted?
+      :selected? selected?
+      :component-tree? component-tree?
+      :filtered? filtered?
+      :expanded? expanded?
+      :dnd-over? (= (:over dprops) :center)
+      :dnd-over-top? (= (:over dprops) :top)
+      :dnd-over-bot? (= (:over dprops) :bot)
+      :on-select-shape select-shape
+      :on-context-menu on-context-menu
+      :on-pointer-enter on-pointer-enter
+      :on-pointer-leave on-pointer-leave
+      :on-zoom-to-selected zoom-to-selected
+      :on-toggle-collapse toggle-collapse
+      :on-enable-drag enable-drag
+      :on-disable-drag disable-drag
+      :on-toggle-visibility toggle-visibility
+      :on-toggle-blocking toggle-blocking}
 
-       (when (and (:shapes item) expanded?)
-         [:div {:class (stl/css-case
-                        :element-children true
-                        :parent-selected selected?
-                        :sticky-children parent-board?)
-                :data-id (when ^boolean parent-board? id)}
-          (for [[index id] (reverse (d/enumerate (:shapes item)))]
-            (when-let [item (get objects id)]
-              [:& layer-item
-               {:item item
-                :highlighted highlighted
-                :selected selected
-                :index index
-                :objects objects
-                :key (dm/str id)
-                :sortable? sortable?
-                :depth depth
-                :parent-size parent-size
-                :component-child? component-tree?}]))])]
-
-      ;; ---- OLD CSS
-      [:li {:on-context-menu on-context-menu
-            :ref dref
-            :class (stl/css-case*
-                    :component    (some? (:component-id item))
-                    :masked       (:masked-group item)
-                    :dnd-over     (= (:over dprops) :center)
-                    :dnd-over-top (= (:over dprops) :top)
-                    :dnd-over-bot (= (:over dprops) :bot)
-                    :selected     selected?
-                    :type-frame   (cfh/frame-shape? item))}
-
-       [:div.element-list-body {:class (stl/css-case*
-                                        :selected selected?
-                                        :hover highlighted?
-                                        :icon-layer (= (:type item) :icon))
-                                :on-click select-shape
-                                :on-pointer-enter on-pointer-enter
-                                :on-pointer-leave on-pointer-leave
-                                :on-double-click dom/stop-propagation}
-
-        [:div.icon {:on-double-click zoom-to-selected}
-         (when ^boolean absolute?
-           [:div.absolute i/position-absolute])
-         [:& si/element-icon
-          {:shape item
-           :main-instance? main-instance?}]]
-        [:& layer-name {:ref ref
-                        :parent-size parent-size
-                        :shape-id id
-                        :shape-name name
-                        :shape-touched? touched?
-                        :on-start-edit disable-drag
-                        :on-stop-edit enable-drag
-                        :disabled-double-click read-only?
-                        :selected? selected?
-                        :type-comp component-tree?
-                        :type-frame (cfh/frame-shape? item)
-                        :hidden? hidden?}]
-
-        [:div.element-actions {:class (when ^boolean has-shapes? "is-parent")}
-         [:div.toggle-element {:class (when ^boolean hidden? "selected")
-                               :title (if (:hidden item)
-                                        (tr "workspace.shape.menu.show")
-                                        (tr "workspace.shape.menu.hide"))
-                               :on-click toggle-visibility}
-          (if ^boolean hidden? i/eye-closed i/eye)]
-         [:div.block-element {:class (when ^boolean blocked? "selected")
-                              :on-click toggle-blocking
-                              :title (if (:blocked item)
-                                       (tr "workspace.shape.menu.unlock")
-                                       (tr "workspace.shape.menu.lock"))}
-          (if ^boolean blocked? i/lock i/unlock)]]
-
-        (when ^boolean has-shapes?
-          (when (not ^boolean filtered?)
-            [:span.toggle-content
-             {:on-click toggle-collapse
-              :class (when ^boolean expanded? "inverse")}
-             i/arrow-slide]))]
-
-       (when (and ^boolean has-shapes?
-                  ^boolean expanded?)
-         [:ul.element-children
-          (for [[index id] (reverse (d/enumerate (:shapes item)))]
-            (when-let [item (get objects id)]
-              [:& layer-item
-               {:item item
-                :selected selected
-                :highlighted highlighted
-                :index index
-                :objects objects
-                :key (dm/str id)
-                :sortable? sortable?}]))])])))
+     (when (and (:shapes item) expanded?)
+       [:div {:class (stl/css-case
+                      :element-children true
+                      :parent-selected selected?
+                      :sticky-children parent-board?)
+              :data-id (when ^boolean parent-board? id)}
+        (for [[index id] (reverse (d/enumerate (:shapes item)))]
+          (when-let [item (get objects id)]
+            [:& layer-item
+             {:item item
+              :highlighted highlighted
+              :selected selected
+              :index index
+              :objects objects
+              :key (dm/str id)
+              :sortable? sortable?
+              :depth depth
+              :parent-size parent-size
+              :component-child? component-tree?}]))])]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
index f3209a29dc..460ae6024f 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
@@ -12,7 +12,7 @@
   align-items: center;
   width: 100%;
   background-color: var(--layer-row-background-color);
-  border: 2px solid transparent;
+  border: $s-2 solid transparent;
 
   &.highlight,
   &:hover {
@@ -20,7 +20,7 @@
     --context-hover-opacity: $op-10;
     background-color: var(--layer-row-background-color-hover);
     color: var(--layer-row-foreground-color-hover);
-    box-shadow: $s-16 0px 0px 0px var(--layer-row-background-color-hover);
+    box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-hover);
     &.hidden {
       opacity: $op-10;
     }
@@ -28,7 +28,7 @@
 
   &.selected {
     background-color: var(--layer-row-background-color-selected);
-    box-shadow: $s-16 0px 0px 0px var(--layer-row-background-color-selected);
+    box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-selected);
   }
 
   &.selected.highlight,
@@ -105,7 +105,6 @@
   @include buttonStyle;
   position: relative;
   justify-self: flex-end;
-  width: $s-16;
   height: 100%;
   width: $s-24;
   padding: 0 $s-8 0 $s-4;
@@ -138,23 +137,23 @@
 .absolute {
   position: absolute;
   background-color: var(--layer-row-foreground-color);
-  opacity: $op-4;
-  width: $s-12;
   height: $s-12;
+  width: $s-12;
   border-radius: $br-2;
+  opacity: $op-4;
 
-  .layer-row.hidden & {
+  .layer-row.hidden {
     opacity: $op-1;
   }
-  .layer-row.type-comp & {
+  .layer-row.type-comp {
     background-color: var(--layer-row-component-foreground-color);
   }
-  .layer-row.highlight &,
-  .layer-row:hover & {
+  .layer-row.highlight,
+  .layer-row:hover {
     opacity: $op-4;
     background-color: var(--layer-row-foreground-color-hover);
   }
-  .layer-row.selected & {
+  .layer-row.selected {
     background-color: var(--layer-row-foreground-color-selected);
   }
 }
@@ -166,29 +165,29 @@
   align-items: center;
   height: 100%;
   width: $s-24;
-  padding: 0 4px 0 8px;
+  padding: 0 $s-4 0 $s-8;
 
   svg {
     @extend .button-icon-small;
     stroke: var(--icon-foreground);
 
-    .layer-row.hidden & {
+    .layer-row.hidden {
       opacity: $op-7;
     }
-    .layer-row.selected & {
+    .layer-row.selected {
       stroke: var(--layer-row-foreground-color-selected);
     }
-    .layer-row.type-comp & {
+    .layer-row.type-comp {
       stroke: var(--layer-row-component-foreground-color);
     }
-    .layer-row.highlight &,
-    .layer-row:hover & {
+    .layer-row.highlight,
+    .layer-row:hover {
       opacity: $op-10;
       stroke: var(--layer-row-foreground-color-hover);
     }
   }
 
-  .layer-row.selected & {
+  .layer-row.selected {
     background-color: var(--layer-row-background-color-selected);
   }
   &.inverse svg {
@@ -209,15 +208,15 @@
     @extend .button-icon-small;
     stroke: var(--icon-foreground);
 
-    .layer-row.hidden & {
+    .layer-row.hidden {
       opacity: $op-7;
     }
-    .type-comp & {
+    .type-comp {
       stroke: var(--layer-row-component-foreground-color);
     }
   }
 
-  .element-actions.selected & {
+  .element-actions.selected {
     display: flex;
     opacity: $op-0;
 
@@ -226,15 +225,16 @@
     }
   }
 
-  .layer-row.highlight &,
-  .layer-row:hover & {
+  .layer-row.highlight,
+  .layer-row:hover {
     display: flex;
     svg {
       opacity: $op-10;
       stroke: var(--layer-row-foreground-color-hover);
     }
   }
-  .layer-row.selected & {
+
+  .layer-row.selected {
     display: flex;
     svg {
       stroke: var(--layer-row-foreground-color-selected);
@@ -244,8 +244,8 @@
 
 :global(.sticky) {
   position: sticky;
-  top: 0px;
-  z-index: 3;
+  top: $s-0;
+  z-index: $z-index-3;
 }
 
 .tab-indentation {
@@ -253,6 +253,7 @@
   height: $s-16;
   min-width: calc(var(--depth) * var(--layer-indentation-size));
 }
+
 .filtered {
   min-width: $s-12;
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs b/frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs
index 88af3c7e32..862b594101 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs
@@ -11,7 +11,6 @@
    [app.common.data.macros :as dm]
    [app.main.data.workspace :as dw]
    [app.main.store :as st]
-   [app.main.ui.context :as ctx]
    [app.util.debug :as dbg]
    [app.util.dom :as dom]
    [app.util.keyboard :as kbd]
@@ -38,7 +37,6 @@
         ref              (d/nilv external-ref local-ref)
 
         shape-for-rename (mf/deref lens:shape-for-rename)
-        new-css-system   (mf/use-ctx ctx/new-css-system)
 
         has-path?        (str/includes? shape-name "/")
 
@@ -90,7 +88,8 @@
 
     (if ^boolean edition?
       [:input
-       {:class (stl/css new-css-system :element-name :element-name-input)
+       {:class (stl/css :element-name
+                        :element-name-input)
         :style {"--depth" depth "--parent-size" parent-size}
         :type "text"
         :ref ref
@@ -100,20 +99,16 @@
         :default-value (d/nilv shape-name "")}]
       [:*
        [:span
-        {:class (if ^boolean new-css-system
-                  (stl/css-case
-                   :element-name true
-                   :left-ellipsis has-path?
-                   :selected selected?
-                   :hidden hidden?
-                   :type-comp type-comp
-                   :type-frame type-frame)
-                  (stl/css-case
-                   "element-name" true
-                   :left-ellipsis has-path?))
+        {:class (stl/css-case
+                 :element-name true
+                 :left-ellipsis has-path?
+                 :selected selected?
+                 :hidden hidden?
+                 :type-comp type-comp
+                 :type-frame type-frame)
          :style {"--depth" depth "--parent-size" parent-size}
          :ref ref
          :on-double-click start-edit}
         (d/nilv shape-name "")]
        (when (and (dbg/enabled? :show-touched) ^boolean shape-touched?)
-         [:span {:class (stl/css new-css-system :element-name-touched)} "*"])])))
+         [:span {:class (stl/css :element-name-touched)} "*"])])))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
index 3151b8101b..46ee413658 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
@@ -35,7 +35,7 @@
   margin: 0;
   padding-left: $s-6;
   border-radius: $br-8;
-  border: 1px solid var(--input-border-color-focus);
+  border: $s-1 solid var(--input-border-color-focus);
   color: var(--layer-row-foreground-color);
 }
 .element-name-touched {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
index 60f26c46d2..296daa7b37 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
@@ -17,13 +17,11 @@
    [app.main.ui.components.search-bar :refer [search-bar]]
    [app.main.ui.components.shape-icon-refactor :as sic]
    [app.main.ui.components.title-bar :refer [title-bar]]
-   [app.main.ui.context :as ctx]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.layer-item :refer [layer-item]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
-   [app.util.keyboard :as kbd]
    [app.util.timers :as ts]
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
@@ -45,10 +43,8 @@
         selected       (hooks/use-equal-memo selected)
         highlighted    (mf/deref refs/highlighted-shapes)
         highlighted    (hooks/use-equal-memo highlighted)
-        root           (get objects uuid/zero)
-        new-css-system (mf/use-ctx ctx/new-css-system)]
-    [:div
-     {:class (stl/css new-css-system :element-list)}
+        root           (get objects uuid/zero)]
+    [:div {:class (stl/css :element-list)}
      [:& hooks/sortable-container {}
       (for [[index id] (reverse (d/enumerate (:shapes root)))]
         (when-let [obj (get objects id)]
@@ -82,9 +78,8 @@
   [{:keys [objects parent-size]}]
   (let [selected       (mf/deref refs/selected-shapes)
         selected       (hooks/use-equal-memo selected)
-        root           (get objects uuid/zero)
-        new-css-system (mf/use-ctx ctx/new-css-system)]
-    [:ul {:class (stl/css new-css-system :element-list)}
+        root           (get objects uuid/zero)]
+    [:ul {:class (stl/css :element-list)}
      (for [[index id] (d/enumerate (:shapes root))]
        (when-let [obj (get objects id)]
          [:& layer-item
@@ -140,8 +135,7 @@
 
 (defn use-search
   [page objects]
-  (let [new-css-system  (mf/use-ctx ctx/new-css-system)
-        state*          (mf/use-state
+  (let [state*          (mf/use-state
                          {:show-search false
                           :show-menu false
                           :search-text ""
@@ -164,13 +158,7 @@
         (mf/use-fn
          #(swap! state* update :show-menu not))
 
-        update-search-text-v1
-        (mf/use-fn
-         (fn [event]
-           (let [value (-> event dom/get-target dom/get-value)]
-             (swap! state* assoc :search-text value :num-items 100))))
-
-        update-search-text-v2
+        update-search-text
         (mf/use-fn
          (fn [value _event]
            (swap! state* assoc :search-text value :num-items 100)))
@@ -236,57 +224,29 @@
          (mf/deps filtered-objects-total current-items)
          (fn [_]
            (when (<= current-items filtered-objects-total)
-             (swap! state* update :num-items + 100))))
-
-        handle-key-down
-        (mf/use-fn
-         (fn [event]
-           (when-let [node (dom/get-target event)]
-             (when (kbd/enter? event)
-               (dom/blur! node))
-             (when (kbd/esc? event)
-               (dom/blur! node)))))]
+             (swap! state* update :num-items + 100))))]
 
     [filtered-objects
      handle-show-more
      #(mf/html
        (if show-search?
          [:*
-          [:div {:class (stl/css new-css-system :tool-window-bar :search)}
-           (if ^boolean new-css-system
-             [:& search-bar
-              {:on-change update-search-text-v2
-               :value current-search
-               :on-clear clear-search-text
-               :placeholder (tr "workspace.sidebar.layers.search")}
-              [:button
-               {:on-click toggle-filters
-                :class (stl/css-case
-                        :filter-button true
-                        :active active?)}
-               i/filter-refactor]]
+          [:div {:class (stl/css :tool-window-bar :search)}
+           [:& search-bar {:on-change update-search-text
+                           :value current-search
+                           :on-clear clear-search-text
+                           :placeholder (tr "workspace.sidebar.layers.search")}
+            [:button {:on-click toggle-filters
+                      :class (stl/css-case
+                              :filter-button true
+                              :active active?)}
+             i/filter-refactor]]
 
-             [:span.search-box
-              [:button.filter
-               {:on-click toggle-filters
-                :class (stl/css-case :active active?)}
-               i/icon-filter]
-              [:div
-               [:input {:on-change update-search-text-v1
-                        :value current-search
-                        :auto-focus show-search?
-                        :placeholder (tr "workspace.sidebar.layers.search")
-                        :on-key-down handle-key-down}]
-               (when (not (= "" current-search))
-                 [:button.clear {:on-click clear-search-text} i/exclude])]])
-
-           [:button {:class (stl/css-case :close-search new-css-system)
+           [:button {:class (stl/css :close-search)
                      :on-click toggle-search}
-            (if ^boolean new-css-system
-              i/close-refactor
-              i/cross)]]
+            i/close-refactor]]
 
-          [:div {:class (stl/css new-css-system :active-filters)}
+          [:div {:class (stl/css :active-filters)}
            (for [fkey current-filters]
              (let [fname (d/name fkey)
                    name  (case fkey
@@ -298,146 +258,126 @@
                            :image     (tr "workspace.sidebar.layers.images")
                            :shape     (tr "workspace.sidebar.layers.shapes")
                            (tr fkey))]
-               (if ^boolean new-css-system
-                 [:button {:class (stl/css :layer-filter)
-                           :key fname
-                           :data-filter fname
-                           :on-click remove-filter}
-                  [:span {:class (stl/css :layer-filter-icon)}
-                   [:& sic/element-icon-refactor-by-type
-                    {:type fkey
-                     :main-instance? (= fkey :component)}]]
-                  [:span {:class (stl/css :layer-filter-name)}
-                   name]
-                  [:span {:class (stl/css :layer-filter-close)}
-                   i/close-small-refactor]]
 
-                 [:span {:on-click remove-filter
+               [:button {:class (stl/css :layer-filter)
+                         :key fname
                          :data-filter fname
-                         :key fname}
-                  name i/cross])))]
+                         :on-click remove-filter}
+
+                [:span {:class (stl/css :layer-filter-icon)}
+                 [:& sic/element-icon-refactor-by-type
+                  {:type fkey
+                   :main-instance? (= fkey :component)}]]
+                [:span {:class (stl/css :layer-filter-name)}
+                 name]
+                [:span {:class (stl/css :layer-filter-close)}
+                 i/close-small-refactor]]))]
 
           (when ^boolean show-menu?
-            (if ^boolean new-css-system
-              [:ul {:class (stl/css :filters-container)}
-               [:li {:class (stl/css-case
-                             :filter-menu-item true
-                             :selected (contains? current-filters :frame))
-                     :data-filter "frame"
-                     :on-click add-filter}
-                [:div {:class (stl/css :filter-menu-item-name-wrapper)}
-                 [:span {:class (stl/css :filter-menu-item-icon)} i/board-refactor]
-                 [:span {:class (stl/css :filter-menu-item-name)}
-                  (tr "workspace.sidebar.layers.frames")]]
-                (when (contains? current-filters :frame)
-                  [:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
+            [:ul {:class (stl/css :filters-container)}
+             [:li {:class (stl/css-case :filter-menu-item true
+                                        :selected (contains? current-filters :frame))
+                   :data-filter "frame"
+                   :on-click add-filter}
+              [:div {:class (stl/css :filter-menu-item-name-wrapper)}
+               [:span {:class (stl/css :filter-menu-item-icon)}
+                i/board-refactor]
+               [:span {:class (stl/css :filter-menu-item-name)}
+                (tr "workspace.sidebar.layers.frames")]]
 
-               [:li {:class (stl/css-case
-                             :filter-menu-item true
-                             :selected (contains? current-filters :group))
-                     :data-filter "group"
-                     :on-click add-filter}
-                [:div {:class (stl/css :filter-menu-item-name-wrapper)}
-                 [:span {:class (stl/css :filter-menu-item-icon)} i/group-refactor]
-                 [:span {:class (stl/css :filter-menu-item-name)}
-                  (tr "workspace.sidebar.layers.groups")]]
+              (when (contains? current-filters :frame)
+                [:span {:class (stl/css :filter-menu-item-tick)}
+                 i/tick-refactor])]
 
-                (when (contains? current-filters :group)
-                  [:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
+             [:li {:class (stl/css-case :filter-menu-item true
+                                        :selected (contains? current-filters :group))
+                   :data-filter "group"
+                   :on-click add-filter}
+              [:div {:class (stl/css :filter-menu-item-name-wrapper)}
+               [:span {:class (stl/css :filter-menu-item-icon)}
+                i/group-refactor]
+               [:span {:class (stl/css :filter-menu-item-name)}
+                (tr "workspace.sidebar.layers.groups")]]
 
-               [:li {:class (stl/css-case
-                             :filter-menu-item true
-                             :selected (contains? current-filters :mask))
-                     :data-filter "mask"
-                     :on-click add-filter}
-                [:div {:class (stl/css :filter-menu-item-name-wrapper)}
-                 [:span {:class (stl/css :filter-menu-item-icon)} i/mask-refactor]
-                 [:span {:class (stl/css :filter-menu-item-name)}
-                  (tr "workspace.sidebar.layers.masks")]]
-                (when (contains? current-filters :mask)
-                  [:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
+              (when (contains? current-filters :group)
+                [:span {:class (stl/css :filter-menu-item-tick)}
+                 i/tick-refactor])]
 
-               [:li {:class (stl/css-case
-                             :filter-menu-item true
-                             :selected (contains? current-filters :component))
-                     :data-filter "component"
-                     :on-click add-filter}
-                [:div {:class (stl/css :filter-menu-item-name-wrapper)}
-                 [:span {:class (stl/css :filter-menu-item-icon)} i/component-refactor]
-                 [:span {:class (stl/css :filter-menu-item-name)}
-                  (tr "workspace.sidebar.layers.components")]]
-                (when (contains? current-filters :component)
-                  [:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
-               [:li {:class (stl/css-case
-                             :filter-menu-item true
-                             :selected (contains? current-filters :text))
-                     :data-filter "text"
-                     :on-click add-filter}
-                [:div {:class (stl/css :filter-menu-item-name-wrapper)}
-                 [:span {:class (stl/css :filter-menu-item-icon)} i/text-refactor]
-                 [:span {:class (stl/css :filter-menu-item-name)}
-                  (tr "workspace.sidebar.layers.texts")]]
-                (when (contains? current-filters :text)
-                  [:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
+             [:li {:class (stl/css-case :filter-menu-item true
+                                        :selected (contains? current-filters :mask))
+                   :data-filter "mask"
+                   :on-click add-filter}
+              [:div {:class (stl/css :filter-menu-item-name-wrapper)}
+               [:span {:class (stl/css :filter-menu-item-icon)}
+                i/mask-refactor]
+               [:span {:class (stl/css :filter-menu-item-name)}
+                (tr "workspace.sidebar.layers.masks")]]
 
-               [:li {:class (stl/css-case
-                             :filter-menu-item true
-                             :selected (contains? current-filters :image))
-                     :data-filter "image"
-                     :on-click add-filter}
-                [:div {:class (stl/css :filter-menu-item-name-wrapper)}
-                 [:span {:class (stl/css :filter-menu-item-icon)} i/img-refactor]
-                 [:span {:class (stl/css :filter-menu-item-name)}
-                  (tr "workspace.sidebar.layers.images")]]
-                (when (contains? current-filters :image)
-                  [:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
-               [:li {:class (stl/css-case
-                             :filter-menu-item true
-                             :selected (contains? current-filters :shape))
-                     :data-filter "shape"
-                     :on-click add-filter}
-                [:div {:class (stl/css :filter-menu-item-name-wrapper)}
-                 [:span {:class (stl/css :filter-menu-item-icon)} i/path-refactor]
-                 [:span {:class (stl/css :filter-menu-item-name)}
-                  (tr "workspace.sidebar.layers.shapes")]]
-                (when (contains? current-filters :shape)
-                  [:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]]
+              (when (contains? current-filters :mask)
+                [:span {:class (stl/css :filter-menu-item-tick)}
+                 i/tick-refactor])]
 
-              [:div.filters-container
-               [:span {:data-filter "frame"
-                       :on-click add-filter}
-                i/artboard (tr "workspace.sidebar.layers.frames")]
-               [:span {:data-filter "group"
-                       :on-click add-filter}
-                i/folder (tr "workspace.sidebar.layers.groups")]
-               [:span {:data-filter "mask"
-                       :on-click add-filter}
-                i/mask (tr "workspace.sidebar.layers.masks")]
-               [:span {:data-filter "component"
-                       :on-click add-filter}
-                i/component (tr "workspace.sidebar.layers.components")]
-               [:span {:data-filter "text"
-                       :on-click add-filter}
-                i/text (tr "workspace.sidebar.layers.texts")]
-               [:span {:data-filter "image"
-                       :on-click add-filter}
-                i/image (tr "workspace.sidebar.layers.images")]
-               [:span {:data-filter "shape"
-                       :on-click add-filter}
-                i/curve (tr "workspace.sidebar.layers.shapes")]]))]
+             [:li {:class (stl/css-case :filter-menu-item true
+                                        :selected (contains? current-filters :component))
+                   :data-filter "component"
+                   :on-click add-filter}
+              [:div {:class (stl/css :filter-menu-item-name-wrapper)}
+               [:span {:class (stl/css :filter-menu-item-icon)}
+                i/component-refactor]
+               [:span {:class (stl/css :filter-menu-item-name)}
+                (tr "workspace.sidebar.layers.components")]]
 
-         (if ^boolean new-css-system
-           [:div {:class (stl/css :tool-window-bar)}
-            [:& title-bar {:collapsable? false
-                           :title        (:name page)
-                           :on-btn-click toggle-search
-                           :btn-children i/search-refactor}]]
+              (when (contains? current-filters :component)
+                [:span {:class (stl/css :filter-menu-item-tick)}
+                 i/tick-refactor])]
 
-           [:div.tool-window-bar
-            [:span.page-name
-             (:name page)]
-            [:button.icon-search {:on-click toggle-search}
-             i/search]])))]))
+             [:li {:class (stl/css-case :filter-menu-item true
+                                        :selected (contains? current-filters :text))
+                   :data-filter "text"
+                   :on-click add-filter}
+              [:div {:class (stl/css :filter-menu-item-name-wrapper)}
+               [:span {:class (stl/css :filter-menu-item-icon)}
+                i/text-refactor]
+               [:span {:class (stl/css :filter-menu-item-name)}
+                (tr "workspace.sidebar.layers.texts")]]
+
+              (when (contains? current-filters :text)
+                [:span {:class (stl/css :filter-menu-item-tick)}
+                 i/tick-refactor])]
+
+             [:li {:class (stl/css-case :filter-menu-item true
+                                        :selected (contains? current-filters :image))
+                   :data-filter "image"
+                   :on-click add-filter}
+              [:div {:class (stl/css :filter-menu-item-name-wrapper)}
+               [:span {:class (stl/css :filter-menu-item-icon)}
+                i/img-refactor]
+               [:span {:class (stl/css :filter-menu-item-name)}
+                (tr "workspace.sidebar.layers.images")]]
+
+              (when (contains? current-filters :image)
+                [:span {:class (stl/css :filter-menu-item-tick)}
+                 i/tick-refactor])]
+
+             [:li {:class (stl/css-case :filter-menu-item true
+                                        :selected (contains? current-filters :shape))
+                   :data-filter "shape"
+                   :on-click add-filter}
+              [:div {:class (stl/css :filter-menu-item-name-wrapper)}
+               [:span {:class (stl/css :filter-menu-item-icon)}
+                i/path-refactor]
+               [:span {:class (stl/css :filter-menu-item-name)}
+                (tr "workspace.sidebar.layers.shapes")]]
+
+              (when (contains? current-filters :shape)
+                [:span {:class (stl/css :filter-menu-item-tick)}
+                 i/tick-refactor])]])]
+
+         [:div {:class (stl/css :tool-window-bar)}
+          [:& title-bar {:collapsable? false
+                         :title        (:name page)
+                         :on-btn-click toggle-search
+                         :btn-children i/search-refactor}]]))]))
 
 
 (defn- on-scroll
@@ -490,7 +430,6 @@
         title          (when (= 1 (count focus))
                          (dm/get-in objects [(first focus) :name]))
 
-        new-css-system (mf/use-ctx ctx/new-css-system)
         observer-var   (mf/use-var nil)
         lazy-load-ref  (mf/use-ref nil)
 
@@ -513,53 +452,51 @@
 
               (and (nil? element) (some? @observer-var))
               (do (.disconnect ^js @observer-var)
-                  (reset! observer-var nil)))))]
+                  (reset! observer-var nil)))))
 
-    [:div#layers
-     {:class (if ^boolean new-css-system
-               (stl/css :layers)
-               (stl/css* :tool-window))}
+        toogle-focus-mode
+        (mf/use-fn
+         #(st/emit! (dw/toggle-focus-mode)))]
+
+    [:div#layers {:class (stl/css :layers)}
      (if (d/not-empty? focus)
-       [:div
-        {:class (stl/css new-css-system :tool-window-bar)}
-        [:button {:class (stl/css new-css-system :focus-title)
-                  :on-click #(st/emit! (dw/toggle-focus-mode))}
-         [:span {:class (stl/css new-css-system :back-button)}
-          (if ^boolean new-css-system
-            i/arrow-refactor
-            i/arrow-slide)]
+       [:div {:class (stl/css :tool-window-bar)}
+        [:button {:class (stl/css :focus-title)
+                  :on-click toogle-focus-mode}
+         [:span {:class (stl/css :back-button)}
+          i/arrow-refactor]
 
-         [:div {:class (stl/css new-css-system :focus-name)}
+         [:div {:class (stl/css :focus-name)}
           (or title (tr "workspace.sidebar.layers"))]
 
-         (if ^boolean new-css-system
-           [:div {:class (stl/css :focus-mode-tag-wrapper)}
-            [:div {:class (stl/css :focus-mode-tag)} (tr "workspace.focus.focus-mode")]]
-           [:div.focus-mode (tr "workspace.focus.focus-mode")])]]
+         [:div {:class (stl/css :focus-mode-tag-wrapper)}
+          [:div {:class (stl/css :focus-mode-tag)}
+           (tr "workspace.focus.focus-mode")]]]]
 
        (filter-component))
 
      (if (some? filtered-objects)
        [:*
-        [:div {:class (stl/css new-css-system :tool-window-content)
+        [:div {:class (stl/css :tool-window-content)
                :data-scroll-container true
                :ref on-render-container}
          [:& filters-tree {:objects filtered-objects
                            :key (dm/str (:id page))
                            :parent-size size-parent}]
-         [:div.lazy {:ref lazy-load-ref
-                     :style {:min-height 16}}]]
+         [:div {:ref lazy-load-ref
+                :style {:min-height 16}}]]
         [:div {:on-scroll on-scroll
-               :class (stl/css new-css-system :tool-window-content)
+               :class (stl/css :tool-window-content)
                :data-scroll-container true
                :style {:display (when (some? filtered-objects) "none")}}
+
          [:& layers-tree {:objects filtered-objects
                           :key (dm/str (:id page))
                           :filtered? true
                           :parent-size size-parent}]]]
 
        [:div {:on-scroll on-scroll
-              :class (stl/css new-css-system :tool-window-content)
+              :class (stl/css :tool-window-content)
               :data-scroll-container true
               :style {:display (when (some? filtered-objects) "none")}}
         [:& layers-tree {:objects objects
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
index 77f50b02eb..1e4f17f714 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
@@ -12,238 +12,249 @@
   flex-direction: column;
   overflow: auto;
   box-sizing: border-box;
-  .tool-window-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: $s-32;
-    min-height: $s-32;
-    margin: $s-4 0 $s-4 $s-8;
-    padding-right: $s-8;
-    .page-name {
-      @include tabTitleTipography;
-      padding: 0 $s-12;
-      color: var(--title-foreground-color);
+}
+
+.tool-window-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: $s-32;
+  min-height: $s-32;
+  margin: $s-4 0 $s-4 $s-8;
+  padding-right: $s-8;
+
+  &.search {
+    padding: 0 $s-8 0 $s-12;
+    gap: $s-4;
+    .filter-button {
+      @include flexCenter;
+      @include buttonStyle;
+      height: $s-32;
+      width: $s-32;
+      margin: 0;
+      border: $s-1 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: $s-1 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: $s-1 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);
+        }
+      }
     }
-    .icon-search {
+    .close-search {
       @extend .button-tertiary;
       height: $s-32;
       width: $s-28;
-      border-radius: $br-8;
-      margin-right: $s-8;
+      min-width: $s-28;
       padding: 0;
+      border-radius: $br-8;
       svg {
-        @extend .button-icon;
+        @extend .button-icon-small;
         stroke: var(--icon-foreground);
       }
     }
-    &.search {
-      padding: 0 $s-8 0 $s-12;
-      gap: $s-4;
-      .filter-button {
-        @include flexCenter;
-        @include buttonStyle;
-        height: $s-32;
-        width: $s-32;
-        margin: 0;
-        border: $s-1 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: $s-1 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: $s-1 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);
-          }
-        }
-      }
-      .close-search {
-        @extend .button-tertiary;
-        height: $s-32;
-        width: $s-28;
-        min-width: $s-28;
-        padding: 0;
-        border-radius: $br-8;
-        svg {
-          @extend .button-icon-small;
-          stroke: var(--icon-foreground);
-        }
-      }
-    }
-    .focus-title {
-      @include buttonStyle;
-      display: grid;
-      grid-template-columns: auto 1fr auto;
-      width: 100%;
-      padding: 0;
-      .back-button-icon {
-        @include flexCenter;
-        height: $s-32;
-        width: $s-24;
-        padding: 0 $s-4 0 $s-8;
-        svg {
-          @extend .button-icon-small;
-          stroke: var(--icon-foreground);
-          transform: rotate(180deg);
-        }
-      }
-      .focus-name {
-        @include titleTipography;
-        display: flex;
-        align-items: center;
-        height: 100%;
-        padding-left: $s-4;
-        color: var(--title-foreground-color);
-      }
-      .focus-mode-tag-wrapper {
-        @include flexCenter;
-        height: 100%;
-        margin-right: $s-12;
-
-        .focus-mode-tag {
-          @include flexCenter;
-          @include titleTipography;
-          height: $s-20;
-          padding: $s-4 $s-6;
-          border: $s-1 solid var(--tag-background-color);
-          border-radius: $br-6;
-          color: var(--tag-background-color);
-        }
-      }
-    }
-  }
-  .active-filters {
-    @include flexRow;
-    flex-wrap: wrap;
-    margin: 0 $s-12;
-    .layer-filter {
-      @extend .button-tag;
-      @include buttonStyle;
-      gap: $s-6;
-      height: $s-24;
-      margin: $s-2 0;
-      border-radius: $br-6;
-      background-color: var(--pill-background-color);
-      cursor: pointer;
-      .layer-filter-icon,
-      .layer-filter-close {
-        @extend .button-icon-small;
-        stroke: var(--pill-foreground-color);
-        svg {
-          height: $s-12;
-          width: $s-12;
-        }
-      }
-      .layer-filter-name {
-        @include flexCenter;
-        @include titleTipography;
-        color: var(--pill-foreground-color);
-      }
-    }
   }
+}
 
-  .filters-container {
-    @extend .menu-dropdown;
-    top: $s-44;
-    left: $s-12;
-    width: $s-192;
-    .filter-menu-item {
-      @include titleTipography;
+.page-name {
+  @include tabTitleTipography;
+  padding: 0 $s-12;
+  color: var(--title-foreground-color);
+}
+
+.icon-search {
+  @extend .button-tertiary;
+  height: $s-32;
+  width: $s-28;
+  border-radius: $br-8;
+  margin-right: $s-8;
+  padding: 0;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+  }
+}
+
+.focus-title {
+  @include buttonStyle;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  width: 100%;
+  padding: 0;
+}
+
+.back-button-icon {
+  @include flexCenter;
+  height: $s-32;
+  width: $s-24;
+  padding: 0 $s-4 0 $s-8;
+  svg {
+    @extend .button-icon-small;
+    stroke: var(--icon-foreground);
+    transform: rotate(180deg);
+  }
+}
+
+.focus-name {
+  @include titleTipography;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-left: $s-4;
+  color: var(--title-foreground-color);
+}
+
+.focus-mode-tag-wrapper {
+  @include flexCenter;
+  height: 100%;
+  margin-right: $s-12;
+}
+
+.focus-mode-tag {
+  @include flexCenter;
+  @include titleTipography;
+  height: $s-20;
+  padding: $s-4 $s-6;
+  border: $s-1 solid var(--tag-background-color);
+  border-radius: $br-6;
+  color: var(--tag-background-color);
+}
+
+.active-filters {
+  @include flexRow;
+  flex-wrap: wrap;
+  margin: 0 $s-12;
+}
+
+.layer-filter {
+  @extend .button-tag;
+  gap: $s-6;
+  height: $s-24;
+  margin: $s-2 0;
+  border-radius: $br-6;
+  background-color: var(--pill-background-color);
+  cursor: pointer;
+}
+
+.layer-filter-icon,
+.layer-filter-close {
+  @extend .button-icon-small;
+  stroke: var(--pill-foreground-color);
+  svg {
+    height: $s-12;
+    width: $s-12;
+  }
+}
+
+.layer-filter-name {
+  @include flexCenter;
+  @include titleTipography;
+  color: var(--pill-foreground-color);
+}
+
+.filters-container {
+  @extend .menu-dropdown;
+  top: $s-44;
+  left: $s-12;
+  width: $s-192;
+  .filter-menu-item {
+    @include titleTipography;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: $s-6;
+    border-radius: $br-8;
+
+    .filter-menu-item-name-wrapper {
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      padding: $s-6;
-      border-radius: $br-8;
-
-      .filter-menu-item-name-wrapper {
-        display: flex;
-        align-items: center;
-        gap: $s-8;
-        .filter-menu-item-icon {
-          svg {
-            @extend .button-icon-small;
-            stroke: var(--menu-foreground-color);
-          }
-        }
-        .filter-menu-item-name {
-          padding-top: $s-2;
-          color: var(--menu-foreground-color);
-        }
-      }
-      .filter-menu-item-tick {
+      gap: $s-8;
+      .filter-menu-item-icon {
         svg {
           @extend .button-icon-small;
           stroke: var(--menu-foreground-color);
         }
       }
+      .filter-menu-item-name {
+        padding-top: $s-2;
+        color: var(--menu-foreground-color);
+      }
+    }
+    .filter-menu-item-tick {
+      svg {
+        @extend .button-icon-small;
+        stroke: var(--menu-foreground-color);
+      }
+    }
 
-      &.selected {
-        background-color: var(--menu-background-color-selected);
-        .filter-menu-item-name-wrapper {
-          .filter-menu-item-icon {
-            svg {
-              stroke: var(--menu-foreground-color);
-            }
-          }
-          .filter-menu-item-name {
-            color: var(--menu-foreground-color);
-          }
-        }
-        .filter-menu-item-tick {
+    &.selected {
+      background-color: var(--menu-background-color-selected);
+      .filter-menu-item-name-wrapper {
+        .filter-menu-item-icon {
           svg {
             stroke: var(--menu-foreground-color);
           }
         }
-      }
-
-      &:hover {
-        background-color: var(--menu-background-color-hover);
-        .filter-menu-item-name-wrapper {
-          .filter-menu-item-icon {
-            svg {
-              stroke: var(--menu-foreground-color-hover);
-            }
-          }
-          .filter-menu-item-name {
-            color: var(--menu-foreground-color-hover);
-          }
+        .filter-menu-item-name {
+          color: var(--menu-foreground-color);
         }
-        .filter-menu-item-tick {
+      }
+      .filter-menu-item-tick {
+        svg {
+          stroke: var(--menu-foreground-color);
+        }
+      }
+    }
+
+    &:hover {
+      background-color: var(--menu-background-color-hover);
+      .filter-menu-item-name-wrapper {
+        .filter-menu-item-icon {
           svg {
             stroke: var(--menu-foreground-color-hover);
           }
         }
+        .filter-menu-item-name {
+          color: var(--menu-foreground-color-hover);
+        }
+      }
+      .filter-menu-item-tick {
+        svg {
+          stroke: var(--menu-foreground-color-hover);
+        }
       }
     }
   }
-  .tool-window-content {
-    --calculated-height: calc($s-128 + var(--height, $s-200));
-    display: flex;
-    flex-direction: column;
-    height: calc(100vh - var(--calculated-height));
+}
+
+.tool-window-content {
+  --calculated-height: calc($s-128 + var(--height, $s-200));
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - var(--calculated-height));
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: overlay;
+  scrollbar-gutter: stable;
+  .element-list {
     width: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    scrollbar-gutter: stable;
-    overflow-y: overlay;
-    .element-list {
-      width: 100%;
-    }
   }
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
index 78e2617766..736bde4e40 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
@@ -129,19 +129,26 @@
           align-items: center;
           gap: $s-2;
           cursor: pointer;
+          color: var(--input-checkbox-text-foreground-color);
           .check-mark {
             @include flexCenter;
             width: $s-16;
             height: $s-16;
             border-radius: $br-6;
-            background-color: var(--input-background-color);
+            background-color: var(--input-checkbox-inactive-background-color);
             &.checked {
-              background-color: var(--input-border-color-active);
+              background-color: var(--input-checkbox-active-background-color);
               svg {
                 @extend .button-icon-small;
                 stroke: var(--input-details-color);
               }
             }
+            &:hover {
+              border-color: var(--input-checkbox-border-color-hover);
+            }
+            &:focus {
+              border-color: var(--input-checkbox-border-color-focus);
+            }
           }
         }
       }