♻️ Remove new-css-system from layers

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 {

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

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

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

frontend/resources/styles/main/partials/sidebar-icons.scss

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

frontend/resources/styles/main/partials/sidebar-layers.scss

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

frontend/resources/styles/main/partials/sidebar-sitemap.scss

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

frontend/resources/styles/main/partials/sidebar-tools.scss

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

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;

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,7 +338,6 @@
         #(when (some? subid)
            (rx/dispose! subid))))
 
-    (if new-css-system
     [:& layer-item-inner
      {:ref dref
       :item item
@@ -391,79 +382,4 @@
               :sortable? sortable?
               :depth depth
               :parent-size parent-size
-                :component-child? component-tree?}]))])]
+              :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?}]))])])))

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.highlight,
-  .layer-row:hover & {
+  .layer-row:hover {
     opacity: $op-4;
     background-color: var(--layer-row-foreground-color-hover);
   }
-  .layer-row.selected & {
+  .layer-row.selected {
     background-color: var(--layer-row-foreground-color-selected);
   }
 }
@@ -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.highlight,
-    .layer-row:hover & {
+    .layer-row:hover {
       opacity: $op-10;
       stroke: var(--layer-row-foreground-color-hover);
     }
   }
 
-  .layer-row.selected & {
+  .layer-row.selected {
     background-color: var(--layer-row-background-color-selected);
   }
   &.inverse svg {
@@ -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.highlight,
-  .layer-row:hover & {
+  .layer-row:hover {
     display: flex;
     svg {
       opacity: $op-10;
       stroke: var(--layer-row-foreground-color-hover);
     }
   }
-  .layer-row.selected & {
+
+  .layer-row.selected {
     display: flex;
     svg {
       stroke: var(--layer-row-foreground-color-selected);
@@ -244,8 +244,8 @@
 
 :global(.sticky) {
   position: sticky;
-  top: 0px;
+  top: $s-0;
-  z-index: 3;
+  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;
 }

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
+        {:class (stl/css-case
-                  (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?))
          :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)} "*"])])))

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 {

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)
+        root           (get objects uuid/zero)]
-        new-css-system (mf/use-ctx ctx/new-css-system)]
+    [:div {:class (stl/css :element-list)}
-    [:div
-     {:class (stl/css new-css-system :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)
+        root           (get objects uuid/zero)]
-        new-css-system (mf/use-ctx ctx/new-css-system)]
+    [:ul {:class (stl/css :element-list)}
-    [:ul {:class (stl/css new-css-system :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)
+  (let [state*          (mf/use-state
-        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
+        update-search-text
-        (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
         (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))))
+             (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)))))]
 
     [filtered-objects
      handle-show-more
      #(mf/html
        (if show-search?
          [:*
-          [:div {:class (stl/css new-css-system :tool-window-bar :search)}
+          [:div {:class (stl/css :tool-window-bar :search)}
-           (if ^boolean new-css-system
+           [:& search-bar {:on-change update-search-text
-             [:& search-bar
-              {:on-change update-search-text-v2
                            :value current-search
                            :on-clear clear-search-text
                            :placeholder (tr "workspace.sidebar.layers.search")}
-              [:button
+            [:button {:on-click toggle-filters
-               {:on-click toggle-filters
                       :class (stl/css-case
                               :filter-button true
                               :active active?)}
              i/filter-refactor]]
 
-             [:span.search-box
+           [:button {:class (stl/css :close-search)
-              [: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)
                      :on-click toggle-search}
-            (if ^boolean new-css-system
+            i/close-refactor]]
-              i/close-refactor
-              i/cross)]]
 
-          [: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,11 +258,12 @@
                            :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
@@ -310,134 +271,113 @@
                 [:span {:class (stl/css :layer-filter-name)}
                  name]
                 [:span {:class (stl/css :layer-filter-close)}
-                   i/close-small-refactor]]
+                 i/close-small-refactor]]))]
-
-                 [:span {:on-click remove-filter
-                         :data-filter fname
-                         :key fname}
-                  name i/cross])))]
 
           (when ^boolean show-menu?
-            (if ^boolean new-css-system
             [:ul {:class (stl/css :filters-container)}
-               [:li {:class (stl/css-case
+             [:li {:class (stl/css-case :filter-menu-item true
-                             :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-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])]
 
-               [:li {:class (stl/css-case
+              (when (contains? current-filters :frame)
-                             :filter-menu-item true
+                [: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-icon)}
+                i/group-refactor]
                [:span {:class (stl/css :filter-menu-item-name)}
                 (tr "workspace.sidebar.layers.groups")]]
 
               (when (contains? current-filters :group)
-                  [:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
+                [:span {:class (stl/css :filter-menu-item-tick)}
+                 i/tick-refactor])]
 
-               [:li {:class (stl/css-case
+             [:li {:class (stl/css-case :filter-menu-item true
-                             :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-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])]
 
-               [:li {:class (stl/css-case
+              (when (contains? current-filters :mask)
-                             :filter-menu-item true
+                [: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-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])]
+                [:span {:class (stl/css :filter-menu-item-tick)}
-               [:li {:class (stl/css-case
+                 i/tick-refactor])]
-                             :filter-menu-item true
+
+             [: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-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
+              (when (contains? current-filters :text)
-                             :filter-menu-item true
+                [: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-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])]
+                [:span {:class (stl/css :filter-menu-item-tick)}
-               [:li {:class (stl/css-case
+                 i/tick-refactor])]
-                             :filter-menu-item true
+
+             [: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-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])]]
+                [: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")]]))]
-
-         (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}]]
+                         :btn-children i/search-refactor}]]))]))
-
-           [:div.tool-window-bar
-            [:span.page-name
-             (:name page)]
-            [:button.icon-search {:on-click toggle-search}
-             i/search]])))]))
 
 
 (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
+        toogle-focus-mode
-     {:class (if ^boolean new-css-system
+        (mf/use-fn
-               (stl/css :layers)
+         #(st/emit! (dw/toggle-focus-mode)))]
-               (stl/css* :tool-window))}
+
+    [:div#layers {:class (stl/css :layers)}
      (if (d/not-empty? focus)
-       [:div
+       [:div {:class (stl/css :tool-window-bar)}
-        {:class (stl/css new-css-system :tool-window-bar)}
+        [:button {:class (stl/css :focus-title)
-        [:button {:class (stl/css new-css-system :focus-title)
+                  :on-click toogle-focus-mode}
-                  :on-click #(st/emit! (dw/toggle-focus-mode))}
+         [:span {:class (stl/css :back-button)}
-         [:span {:class (stl/css new-css-system :back-button)}
+          i/arrow-refactor]
-          (if ^boolean new-css-system
-            i/arrow-refactor
-            i/arrow-slide)]
 
-         [: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 {:class (stl/css :focus-mode-tag)}
-           [:div.focus-mode (tr "workspace.focus.focus-mode")])]]
+           (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
+         [: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

frontend/src/app/main/ui/workspace/sidebar/layers.scss

@@ -12,7 +12,9 @@
   flex-direction: column;
   overflow: auto;
   box-sizing: border-box;
-  .tool-window-bar {
+}
+
+.tool-window-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -20,23 +22,7 @@
   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);
-    }
-    .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);
-      }
-    }
   &.search {
     padding: 0 $s-8 0 $s-12;
     gap: $s-4;
@@ -85,13 +71,36 @@
       }
     }
   }
-    .focus-title {
+}
+
+.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 {
+}
+
+.back-button-icon {
   @include flexCenter;
   height: $s-32;
   width: $s-24;
@@ -101,21 +110,24 @@
     stroke: var(--icon-foreground);
     transform: rotate(180deg);
   }
-      }
+}
-      .focus-name {
+
+.focus-name {
   @include titleTipography;
   display: flex;
   align-items: center;
   height: 100%;
   padding-left: $s-4;
   color: var(--title-foreground-color);
-      }
+}
-      .focus-mode-tag-wrapper {
+
+.focus-mode-tag-wrapper {
   @include flexCenter;
   height: 100%;
   margin-right: $s-12;
+}
 
-        .focus-mode-tag {
+.focus-mode-tag {
   @include flexCenter;
   @include titleTipography;
   height: $s-20;
@@ -123,41 +135,41 @@
   border: $s-1 solid var(--tag-background-color);
   border-radius: $br-6;
   color: var(--tag-background-color);
-        }
+}
-      }
+
-    }
+.active-filters {
-  }
-  .active-filters {
   @include flexRow;
   flex-wrap: wrap;
   margin: 0 $s-12;
-    .layer-filter {
+}
+
+.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 {
+
+.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 {
+
+.layer-filter-name {
   @include flexCenter;
   @include titleTipography;
   color: var(--pill-foreground-color);
-      }
+}
-    }
-  }
 
-  .filters-container {
+.filters-container {
   @extend .menu-dropdown;
   top: $s-44;
   left: $s-12;
@@ -231,19 +243,18 @@
       }
     }
   }
-  }
+}
-  .tool-window-content {
+
+.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-y: auto;
   overflow-x: hidden;
-    scrollbar-gutter: stable;
   overflow-y: overlay;
+  scrollbar-gutter: stable;
   .element-list {
     width: 100%;
   }
-  }
 }

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