From 452289b7264594261efc570e6ef862607018519c Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Tue, 2 Jan 2024 17:01:52 +0100
Subject: [PATCH] :recycle: Remove new-css-system from colorpicker

---
 frontend/resources/styles/main-default.scss   |    3 -
 .../styles/main/partials/colorpicker.scss     |  598 ----
 .../main/partials/sidebar-align-options.scss  |   62 -
 .../partials/sidebar-element-options.scss     | 2593 -----------------
 .../app/main/ui/workspace/colorpicker.cljs    |  327 +--
 .../app/main/ui/workspace/colorpicker.scss    |  272 +-
 .../ui/workspace/colorpicker/gradients.cljs   |   53 +-
 .../ui/workspace/colorpicker/gradients.scss   |   66 +-
 .../ui/workspace/colorpicker/harmony.cljs     |  127 +-
 .../ui/workspace/colorpicker/harmony.scss     |   57 +-
 .../main/ui/workspace/colorpicker/hsva.cljs   |  121 +-
 .../main/ui/workspace/colorpicker/hsva.scss   |   31 +-
 .../ui/workspace/colorpicker/libraries.cljs   |   91 +-
 .../ui/workspace/colorpicker/libraries.scss   |   52 +-
 .../main/ui/workspace/colorpicker/ramp.cljs   |  121 +-
 .../main/ui/workspace/colorpicker/ramp.scss   |   16 +-
 .../colorpicker/slider_selector.cljs          |   70 +-
 17 files changed, 549 insertions(+), 4111 deletions(-)
 delete mode 100644 frontend/resources/styles/main/partials/colorpicker.scss
 delete mode 100644 frontend/resources/styles/main/partials/sidebar-align-options.scss
 delete mode 100644 frontend/resources/styles/main/partials/sidebar-element-options.scss

diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss
index 9271b633a..8243d1bb7 100644
--- a/frontend/resources/styles/main-default.scss
+++ b/frontend/resources/styles/main-default.scss
@@ -58,7 +58,6 @@
 @import "main/partials/viewer-header";
 @import "main/partials/viewer-thumbnails";
 @import "main/partials/activity-bar";
-@import "main/partials/colorpicker";
 @import "main/partials/dashboard";
 @import "main/partials/dashboard-header";
 @import "main/partials/dashboard-grid";
@@ -71,9 +70,7 @@
 @import "main/partials/loader";
 @import "main/partials/project-bar";
 @import "main/partials/sidebar";
-@import "main/partials/sidebar-align-options";
 @import "main/partials/sidebar-document-history";
-@import "main/partials/sidebar-element-options";
 @import "main/partials/sidebar-interactions";
 @import "main/partials/tab-container";
 @import "main/partials/tool-bar";
diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss
deleted file mode 100644
index e70546d65..000000000
--- a/frontend/resources/styles/main/partials/colorpicker.scss
+++ /dev/null
@@ -1,598 +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
-
-.colorpicker {
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  background-color: $color-white;
-}
-
-.colorpicker-content {
-  display: flex;
-  flex-direction: column;
-  padding: $size-2;
-
-  & > * {
-    width: 200px;
-  }
-
-  .top-actions {
-    display: flex;
-    margin-bottom: $size-1;
-    flex-direction: row-reverse;
-    justify-content: space-between;
-
-    .picker-btn {
-      background: none;
-      border: none;
-      cursor: pointer;
-
-      &.active svg,
-      &:hover svg {
-        fill: $color-primary;
-      }
-
-      svg {
-        width: 14px;
-        height: 14px;
-      }
-    }
-
-    .element-set-content {
-      width: auto;
-      padding: 0.25rem 0;
-      .custom-select {
-        border: none;
-        &:hover {
-          border: none;
-        }
-        .custom-select-dropdown {
-          left: auto;
-          right: 0;
-        }
-      }
-    }
-  }
-
-  .select-image {
-    .content {
-      display: flex;
-      justify-content: center;
-      background-image: url("/images/colorpicker-no-image.png");
-      background-position: center;
-      background-size: auto 6.75rem;
-      height: 6.75rem;
-      img {
-        height: fit-content;
-        width: fit-content;
-        max-height: 100%;
-        max-width: 100%;
-        margin: auto;
-      }
-    }
-    button {
-      width: 100%;
-      margin-top: 10px;
-    }
-  }
-  .gradients-buttons {
-    .gradient {
-      cursor: pointer;
-      width: 15px;
-      height: 15px;
-      padding: 0;
-      margin: 0;
-      border: 1px solid $color-gray-20;
-      border-radius: $br2;
-      margin-left: $size-1;
-    }
-
-    .active {
-      border-color: $color-primary;
-    }
-
-    .linear-gradient {
-      background: linear-gradient(180deg, $color-gray-20, transparent);
-    }
-
-    .radial-gradient {
-      background: radial-gradient(transparent, $color-gray-20);
-    }
-  }
-
-  .gradient-stops {
-    height: 10px;
-    display: flex;
-    margin-top: $size-2;
-    margin-bottom: $size-4;
-
-    .gradient-background-wrapper {
-      height: 100%;
-      width: 100%;
-      border: 1px solid $color-gray-10;
-      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
-        left center;
-    }
-
-    .gradient-background {
-      height: 100%;
-      width: 100%;
-    }
-
-    .gradient-stop-wrapper {
-      position: absolute;
-      width: calc(100% - 2rem);
-      margin-left: 0.5rem;
-    }
-
-    .gradient-stop {
-      display: grid;
-      grid-template-columns: 50% 50%;
-      position: absolute;
-      width: 15px;
-      height: 15px;
-      border-radius: $br2;
-      border: 1px solid $color-gray-20;
-      margin-top: -2px;
-      margin-left: -7px;
-      box-shadow: 0 2px 2px rgb(0 0 0 / 15%);
-
-      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
-        left center;
-      background-color: $color-white;
-
-      &.active {
-        border-color: $color-primary;
-      }
-    }
-  }
-
-  .picker-detail-wrapper {
-    position: relative;
-
-    .center-circle {
-      width: 14px;
-      height: 14px;
-      border: 2px solid $color-white;
-      border-radius: $br8;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-7px, -7px);
-      filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
-    }
-  }
-
-  #picker-detail {
-    border: 1px solid $color-gray-10;
-  }
-
-  .slider-selector {
-    --gradient-direction: 90deg;
-    --background-repeat: left;
-
-    &.vertical {
-      --gradient-direction: 0deg;
-      --background-repeat: top;
-    }
-
-    border: 1px solid $color-gray-10;
-
-    background: linear-gradient(
-      var(--gradient-direction),
-      rgba(var(--color), 0) 0%,
-      rgba(var(--color), 1) 100%
-    );
-    align-self: center;
-    position: relative;
-    cursor: pointer;
-
-    width: 100%;
-    height: calc(0.5rem + 1px);
-
-    &.vertical {
-      width: calc(0.5rem + 1px);
-      height: 100%;
-    }
-
-    &.hue {
-      background: linear-gradient(
-        var(--gradient-direction),
-        #f00 0%,
-        #ff0 17%,
-        #0f0 33%,
-        #0ff 50%,
-        #00f 67%,
-        #f0f 83%,
-        #f00 100%
-      );
-    }
-
-    &.saturation {
-      background: linear-gradient(
-        var(--gradient-direction),
-        var(--saturation-grad-from) 0%,
-        var(--saturation-grad-to) 100%
-      );
-    }
-
-    &.opacity {
-      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
-        var(--background-repeat) center;
-
-      &::after {
-        content: "";
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(
-          var(--gradient-direction),
-          rgba(var(--color), 0) 0%,
-          rgba(var(--color), 1) 100%
-        );
-      }
-    }
-
-    &.value {
-      background: linear-gradient(var(--gradient-direction), #000 0%, #fff 100%);
-    }
-
-    .handler {
-      background-color: $color-white;
-      box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
-      transform: translate(-6px, -2px);
-      left: 50%;
-      position: absolute;
-      width: 12px;
-      height: 12px;
-      border-radius: $br6;
-      z-index: 1;
-    }
-
-    &.vertical .handler {
-      transform: translate(-6px, 6px);
-    }
-  }
-
-  .value-saturation-selector {
-    background-color: rgba(var(--hue-rgb));
-    position: relative;
-    height: 6.75rem;
-    cursor: pointer;
-
-    .handler {
-      position: absolute;
-      width: 12px;
-      height: 12px;
-      border-radius: $br6;
-      z-index: 1;
-      border: 1px solid $color-white;
-      box-shadow:
-        rgb(255, 255, 255) 0px 0px 0px 1px inset,
-        rgb(0 0 0 / 0.25) 0px 4px 4px inset,
-        rgb(0 0 0 / 0.25) 0px 4px 4px;
-      transform: translate(-6px, -6px);
-      left: 50%;
-      top: 50%;
-    }
-
-    &::before {
-      content: "";
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
-    }
-
-    &::after {
-      content: "";
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
-    }
-  }
-
-  .shade-selector {
-    display: grid;
-    justify-items: center;
-    align-items: center;
-    grid-template-areas:
-      "color hue"
-      "color opacity";
-    grid-template-columns: 2.5rem 1fr;
-    height: 3.5rem;
-    grid-row-gap: 0.5rem;
-    cursor: pointer;
-    margin-bottom: 0.25rem;
-
-    .slider-selector.hue {
-      grid-area: "hue";
-      align-self: flex-end;
-    }
-
-    .slider-selector.opacity {
-      grid-area: "opacity";
-      align-self: flex-start;
-    }
-  }
-
-  .color-values {
-    display: grid;
-    grid-template-columns: 3.5rem repeat(4, 1fr);
-    grid-row-gap: 0.25rem;
-    justify-items: center;
-    grid-column-gap: 0.25rem;
-
-    &.disable-opacity {
-      grid-template-columns: 3.5rem repeat(3, 1fr);
-    }
-
-    input {
-      width: 100%;
-      margin: 0;
-      border: 1px solid $color-gray-10;
-      border-radius: $br2;
-      font-size: $fs12;
-      height: 1.5rem;
-      padding: 0 $size-1;
-      color: $color-gray-40;
-    }
-
-    label {
-      font-size: $fs12;
-    }
-  }
-
-  .libraries {
-    border-top: 1px solid $color-gray-10;
-    padding-top: 0.5rem;
-    margin-top: 0.25rem;
-    width: 200px;
-
-    select {
-      background-image: url(/images/icons/arrow-down.svg);
-      background-repeat: no-repeat;
-      background-position: 95% 48%;
-      background-size: 10px;
-      margin: 0;
-      margin-bottom: $size-2;
-      width: 100%;
-      padding: $size-1 0.25rem;
-      font-size: $fs12;
-      color: $color-gray-40;
-      cursor: pointer;
-      border: 1px solid $color-gray-10;
-      border-radius: $br2;
-
-      option {
-        padding: 0;
-      }
-    }
-
-    .selected-colors {
-      display: grid;
-      grid-template-columns: repeat(8, 1fr);
-      justify-content: space-between;
-      margin-right: -8px;
-      max-height: 5.5rem;
-      overflow: auto;
-      div {
-        grid-area: unset;
-      }
-    }
-
-    .selected-colors::after {
-      content: "";
-      flex: auto;
-    }
-  }
-
-  .actions {
-    margin-top: 0.5rem;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-
-    .btn-primary {
-      height: 1.5rem;
-      font-size: $fs12;
-      width: 100%;
-    }
-  }
-
-  .harmony-selector {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 0.5rem;
-
-    .hue-wheel-wrapper {
-      position: relative;
-
-      .hue-wheel {
-        width: 152px;
-        height: 152px;
-      }
-
-      .handler {
-        position: absolute;
-        width: 12px;
-        height: 12px;
-        border-radius: $br6;
-        z-index: 1;
-        border: 1px solid $color-white;
-        box-shadow:
-          rgb(255, 255, 255) 0px 0px 0px 1px inset,
-          rgb(0 0 0 / 0.25) 0px 4px 4px inset,
-          rgb(0 0 0 / 0.25) 0px 4px 4px;
-        transform: translate(-6px, -6px);
-        left: 50%;
-        top: 50%;
-      }
-
-      .handler.complement {
-        background-color: $color-white;
-        box-shadow: rgb(0 0 0 / 0.25) 0px 4px 4px;
-      }
-    }
-
-    .handlers-wrapper {
-      height: 152px;
-      display: flex;
-      flex-direction: row;
-      flex-grow: 1;
-      justify-content: space-around;
-      padding-top: 0.5rem;
-
-      & > * {
-        height: 100%;
-      }
-    }
-  }
-
-  .hsva-selector {
-    display: grid;
-    padding: 0.25rem;
-    grid-template-columns: 20px 1fr;
-    grid-template-rows: repeat(4, 2rem);
-    grid-row-gap: 0.5rem;
-    margin-bottom: 0.5rem;
-
-    .hue,
-    .saturation,
-    .value,
-    .opacity {
-      border-radius: $br10;
-    }
-
-    .hsva-selector-label {
-      grid-column: 1;
-      align-self: center;
-    }
-  }
-}
-
-.colorpicker-tooltip {
-  border-radius: $br3;
-  display: flex;
-  flex-direction: column;
-  left: 1400px;
-  top: 100px;
-  position: absolute;
-  z-index: 11;
-  width: auto;
-
-  span {
-    color: $color-gray-20;
-    font-size: $fs12;
-  }
-
-  .inputs-area {
-    .input-text {
-      color: $color-gray-60;
-      font-size: $fs12;
-      margin: 5px;
-      padding: 5px;
-      width: 100%;
-    }
-  }
-
-  .colorpicker-tabs {
-    display: flex;
-    margin-bottom: $size-2;
-    border-radius: $br5;
-    border: 1px solid $color-gray-10;
-    height: 2rem;
-
-    .colorpicker-tab {
-      cursor: pointer;
-      display: flex;
-      flex-grow: 1;
-      justify-content: center;
-      align-items: center;
-
-      svg {
-        width: 16px;
-        height: 16px;
-        fill: $color-gray-20;
-      }
-    }
-
-    .active {
-      background-color: $color-gray-10;
-      svg {
-        fill: $color-gray-60;
-      }
-    }
-
-    :hover svg {
-      fill: $color-primary;
-    }
-  }
-}
-
-.color-data {
-  align-items: center;
-  display: flex;
-  margin-bottom: $size-2;
-  position: relative;
-
-  &[draggable="true"] {
-    cursor: pointer;
-  }
-
-  .color-name {
-    font-size: $fs12;
-    margin: 5px 6px 0px 6px;
-  }
-
-  .color-info {
-    flex: 1 1 0;
-
-    input {
-      background-color: $color-gray-50;
-      border: 1px solid $color-gray-30;
-      border-radius: $br3;
-      color: $color-white;
-      height: 20px;
-      margin: 5px 0 0 0;
-      padding: 0 $size-1;
-      width: 84px;
-      font-size: $fs12;
-
-      &:focus {
-        border-color: $color-primary !important;
-        color: $color-white;
-        outline: none;
-      }
-
-      &:hover {
-        border-color: $color-gray-20;
-      }
-
-      &:invalid {
-        border-color: $color-danger;
-      }
-    }
-  }
-
-  ::placeholder {
-    color: $color-gray-10;
-  }
-
-  .type {
-    color: $color-gray-10;
-    margin-right: $size-1;
-  }
-
-  .number {
-    color: $color-gray-60;
-  }
-
-  .element-set-actions-button svg {
-    width: 10px;
-    height: 10px;
-  }
-}
diff --git a/frontend/resources/styles/main/partials/sidebar-align-options.scss b/frontend/resources/styles/main/partials/sidebar-align-options.scss
deleted file mode 100644
index b792e060c..000000000
--- a/frontend/resources/styles/main/partials/sidebar-align-options.scss
+++ /dev/null
@@ -1,62 +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
-
-.align-options {
-  display: flex;
-  border-bottom: solid 1px $color-gray-60;
-  height: 40px;
-
-  .align-group {
-    padding: 0 $size-1;
-    display: flex;
-    justify-content: flex-start;
-    width: 50%;
-
-    &:not(:last-child) {
-      border-right: solid 1px $color-gray-60;
-    }
-  }
-
-  .align-button {
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    height: 30px;
-    justify-content: center;
-    margin: 5px 0;
-    padding: $size-2 $size-1;
-    width: 25%;
-
-    svg {
-      height: 16px;
-      width: 16px;
-      fill: $color-gray-20;
-    }
-
-    &:hover {
-      background-color: $color-primary;
-      svg {
-        fill: $color-gray-50;
-      }
-    }
-
-    &.disabled {
-      background-color: transparent;
-      cursor: default;
-      svg {
-        fill: $color-gray-40;
-      }
-    }
-
-    &.selected svg {
-      fill: $color-primary;
-    }
-
-    &.selected:hover svg {
-      fill: $color-white;
-    }
-  }
-}
diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
deleted file mode 100644
index 5dab0ad90..000000000
--- a/frontend/resources/styles/main/partials/sidebar-element-options.scss
+++ /dev/null
@@ -1,2593 +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-options {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-
-  .element-icons {
-    background-color: $color-gray-60;
-    border: 1px solid $color-gray-60;
-    border-radius: $br3;
-    display: flex;
-    margin: $size-1;
-
-    li {
-      align-items: center;
-      border-right: 1px solid $color-gray-60;
-      border-radius: $br3;
-      cursor: pointer;
-      display: flex;
-      flex: 1;
-      justify-content: center;
-      padding: $size-2;
-
-      svg {
-        fill: $color-gray-20;
-        height: 15px;
-        width: 15px;
-      }
-
-      &:hover {
-        svg {
-          fill: $color-primary;
-        }
-      }
-
-      &.selected {
-        background-color: $color-primary;
-
-        svg {
-          fill: $color-white;
-        }
-      }
-
-      &:last-child {
-        border: none;
-      }
-    }
-  }
-
-  &.inspect {
-    & > :first-child {
-      margin-top: 7px;
-    }
-  }
-
-  .element-set {
-    border-bottom: 1px solid $color-gray-60;
-    color: $color-gray-20;
-    padding: $size-2 $size-1;
-
-    .element-set-title {
-      height: 35px;
-      color: $color-gray-20;
-      display: flex;
-      font-size: $fs14;
-      padding: $size-1;
-      width: 100%;
-      align-items: center;
-      justify-content: space-between;
-    }
-  }
-
-  .element-list {
-    margin-bottom: $size-2;
-
-    li {
-      align-items: center;
-      border-bottom: 1px solid $color-gray-60;
-      display: flex;
-      flex-direction: row;
-      padding: $size-2;
-      width: 100%;
-
-      .list-icon {
-        svg {
-          fill: $color-gray-30;
-          height: 15px;
-          margin-right: $size-1;
-          width: 15px;
-        }
-      }
-
-      span {
-        color: $color-gray-20;
-        font-size: $fs12;
-        max-width: 75%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .list-actions {
-        align-items: center;
-        cursor: pointer;
-        display: none;
-        margin-left: auto;
-
-        a {
-          svg {
-            fill: $color-gray-60;
-            height: 15px;
-            margin-left: $size-1;
-            width: 15px;
-
-            &:hover {
-              fill: $color-gray-20;
-            }
-          }
-        }
-      }
-
-      &:hover {
-        .list-icon {
-          svg {
-            fill: $color-primary;
-          }
-        }
-
-        span {
-          color: $color-primary;
-        }
-      }
-
-      &.selected {
-        .list-icon {
-          svg {
-            fill: $color-primary;
-          }
-        }
-
-        span {
-          color: $color-primary;
-          font-weight: $fw700;
-        }
-      }
-    }
-
-    &:hover {
-      .list-actions {
-        display: flex;
-        @include animation(0s, 0.3s, fadeIn);
-      }
-    }
-  }
-}
-
-.element-set-content {
-  display: flex;
-  flex-direction: column;
-  padding: $size-1;
-  width: 100%;
-
-  .input-text {
-    background-color: $color-gray-50;
-    border: 1px solid transparent;
-    border-bottom-color: $color-gray-40;
-    color: $color-white;
-    font-size: $fs12;
-    margin: $size-1;
-    min-width: 0;
-    padding: $size-1;
-    width: 100%;
-
-    &:focus {
-      color: lighten($color-gray-10, 8%);
-      border-color: $color-primary !important;
-    }
-
-    &:hover {
-      border-color: $color-gray-40;
-    }
-
-    &.error {
-      border-color: $color-danger;
-    }
-
-    &[disabled] {
-      color: $color-gray-30;
-    }
-  }
-
-  .input-select {
-    /* This padding is so the text won't overlap the arrow*/
-    padding-right: 1rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: $color-gray-10;
-
-    &:focus {
-      color: lighten($color-gray-10, 8%);
-      border-color: $color-primary;
-    }
-
-    option {
-      color: $color-gray-60;
-      background: $color-white;
-      font-size: $fs12;
-
-      &:disabled {
-        color: $color-gray-20;
-      }
-    }
-  }
-
-  .input-checkbox {
-    label {
-      color: $color-gray-20;
-    }
-
-    label::before {
-      background-color: transparent;
-      width: 16px;
-      height: 16px;
-    }
-
-    label::after {
-      width: 16px;
-      height: 16px;
-    }
-
-    input:checked + label::before {
-      border-width: 1px;
-    }
-
-    input:checked + label::after {
-      font-size: $fs13;
-    }
-  }
-
-  .element-set-subtitle {
-    color: $color-gray-20;
-    font-size: $fs12;
-    width: 64px;
-
-    &.wide {
-      min-width: 75px;
-    }
-  }
-
-  .lock-size {
-    cursor: pointer;
-    margin: auto;
-
-    svg {
-      fill: $color-gray-20;
-      height: 14px;
-      width: 14px;
-
-      &:hover {
-        fill: $color-primary;
-      }
-    }
-
-    &.selected {
-      svg {
-        fill: $color-primary;
-      }
-    }
-
-    &.disabled {
-      cursor: unset;
-      svg {
-        fill: $color-gray-40;
-      }
-    }
-  }
-
-  .save-btn {
-    width: 100%;
-  }
-
-  .cancel-btn {
-    color: $color-danger;
-    text-align: center;
-    width: 100%;
-  }
-
-  .custom-select {
-    border: 1px solid $color-gray-40;
-    border-radius: $br3;
-    cursor: pointer;
-    padding: $size-1 $size-5 $size-1 $size-1;
-    position: relative;
-
-    .dropdown-button {
-      position: absolute;
-      right: $size-1;
-      top: 7px;
-
-      svg {
-        fill: $color-gray-40;
-        height: 10px;
-        width: 10px;
-      }
-    }
-
-    span {
-      font-size: $fs12;
-    }
-
-    &:hover {
-      border: 1px solid $color-gray-20;
-    }
-
-    &.no-check {
-      .custom-select-dropdown {
-        width: 100%;
-        min-width: unset;
-        .check-icon {
-          display: none;
-        }
-        li.checked-element {
-          padding-left: 0.5rem;
-          &.is-selected {
-            background-color: $color-primary;
-          }
-        }
-      }
-    }
-  }
-  .opened {
-    border: 1px solid $color-primary;
-    &:hover,
-    &:focus {
-      outline: none;
-      border: 1px solid $color-primary;
-    }
-  }
-
-  .custom-select-dropdown {
-    background-color: $color-white;
-    border-radius: $br3;
-    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-    left: 0;
-    max-height: 30rem;
-    min-width: 7rem;
-    position: absolute;
-    overflow-y: auto;
-    top: 30px;
-    z-index: 12;
-
-    .presets {
-      width: 200px;
-    }
-
-    hr {
-      margin: 0;
-      border-color: $color-gray-20;
-    }
-
-    li {
-      color: $color-gray-60;
-      cursor: pointer;
-      font-size: $fs14;
-      display: flex;
-      gap: 0 10px;
-      justify-content: flex-start;
-      padding: $size-2;
-
-      span {
-        color: $color-gray-20;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-      }
-
-      .check-icon {
-        min-width: 25px;
-        color: $color-gray-20;
-        justify-content: center;
-      }
-
-      &.dropdown-separator:not(:last-child) {
-        border-bottom: 1px solid $color-gray-10;
-      }
-
-      &.dropdown-label:not(:first-child) {
-        border-top: 1px solid $color-gray-10;
-      }
-
-      &.dropdown-label span {
-        margin-left: 0;
-      }
-
-      &:hover {
-        background-color: $color-primary-lighter;
-      }
-    }
-  }
-
-  & li.checked-element {
-    padding-left: 0;
-
-    & span {
-      color: $color-black;
-    }
-
-    & svg {
-      visibility: hidden;
-      width: 8px;
-      height: 8px;
-      background: none;
-      margin: 0.25rem;
-      fill: $color-black;
-    }
-
-    &.is-selected {
-      & svg {
-        visibility: visible;
-      }
-    }
-  }
-
-  .editable-select {
-    border: 1px solid transparent;
-    position: relative;
-    height: 38px;
-    // margin-left: $size-2;
-    max-height: 30px;
-    position: relative;
-    width: 60%;
-
-    svg {
-      fill: $color-gray-10;
-      height: 10px;
-      width: 10px;
-    }
-
-    .input-text {
-      left: 0;
-      position: absolute;
-      top: -1px;
-      width: 60%;
-    }
-
-    input.input-text {
-      border: none;
-      background: none;
-    }
-
-    .input-select {
-      background-color: transparent;
-      border: none;
-      border-bottom: 1px solid $color-gray-40;
-      color: transparent;
-      left: 0;
-      position: absolute;
-      top: 0;
-      width: 100%;
-
-      option {
-        color: $color-gray-60;
-        background: $color-white;
-        font-size: $fs12;
-
-        &:disabled {
-          color: $color-gray-20;
-        }
-      }
-    }
-
-    .dropdown-button {
-      position: absolute;
-      right: 0;
-      padding-right: 4px;
-      height: 100%;
-      display: flex;
-      align-items: center;
-    }
-
-    &.input-option {
-      height: 26px;
-      border-bottom: 1px solid #64666a;
-      width: 100%;
-      margin-left: 0.25rem;
-
-      .input-text {
-        border: none;
-        margin: 0;
-        width: calc(100% - 12px);
-        height: 100%;
-        top: auto;
-        color: $color-white;
-      }
-    }
-
-    .custom-select-dropdown {
-      top: unset;
-      margin-bottom: 0;
-    }
-
-    &:hover {
-      border: 1px solid $color-gray-40;
-    }
-  }
-}
-
-.element-set-content .border-data {
-  &[draggable="true"] {
-    cursor: pointer;
-  }
-}
-
-.element-set-content .grid-option-main {
-  .editable-select {
-    height: 2rem;
-  }
-  .editable-select svg {
-    fill: $color-gray-40;
-  }
-  .editable-select.input-option .input-text {
-    padding: 0;
-    padding-top: 0.18rem;
-    padding-left: 0.25rem;
-  }
-
-  .input-element {
-    width: 55px;
-    margin: 0 0.2rem;
-  }
-
-  .input-text {
-    padding-left: 0;
-    color: $color-white;
-    background-color: transparent;
-    height: 30px;
-  }
-}
-
-.element-set-content .component-row {
-  display: flex;
-  align-items: center;
-  font-size: $fs12;
-  color: $color-gray-10;
-
-  svg {
-    fill: $color-gray-20;
-    height: 16px;
-    width: 16px;
-    margin-right: $size-2;
-  }
-
-  .component-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 100%;
-  }
-
-  .row-actions {
-    margin-left: auto;
-    cursor: pointer;
-
-    svg {
-      fill: $color-gray-20;
-      height: 12px;
-      margin-right: $size-1;
-      width: 12px;
-    }
-
-    .context-menu-items {
-      right: 0.5rem;
-      left: unset;
-      top: 0;
-
-      .context-menu-action {
-        overflow-wrap: break-word;
-        min-width: 223px;
-        white-space: break-spaces;
-      }
-    }
-  }
-
-  &.copy {
-    flex-wrap: wrap;
-    border-radius: 8px;
-    border: 1px solid $color-gray-60;
-    padding: 0.5rem;
-    cursor: pointer;
-
-    .component-name {
-      width: 80%;
-      color: $color-white;
-    }
-    .component-parent-name {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: 100%;
-      padding-left: calc(0.5rem + 16px);
-      color: $color-gray-40;
-    }
-  }
-}
-
-.grid-option .custom-select {
-  margin-bottom: 0;
-}
-
-.presets {
-  &:focus,
-  &:focus-within {
-    outline: none;
-    border: 1px solid $color-primary;
-  }
-  .custom-select-dropdown {
-    width: 237px;
-
-    li {
-      font-size: $fs12;
-
-      span {
-        font-size: $fs12;
-      }
-    }
-  }
-}
-
-.row-flex.align-icons {
-  margin-left: 0;
-}
-
-.align-icons {
-  cursor: pointer;
-  display: flex;
-  flex: 1;
-  justify-content: flex-end;
-  margin: $size-2 0 $size-2 $size-2;
-  padding: 0 $size-1;
-
-  &:first-child {
-    justify-content: flex-start;
-    margin-left: 0;
-  }
-
-  span {
-    align-items: center;
-    display: flex;
-    height: 20px;
-    justify-content: center;
-    margin-right: $size-2;
-    position: relative;
-    width: 20px;
-
-    svg {
-      fill: $color-gray-30;
-      height: 14px;
-      width: 14px;
-    }
-
-    &:hover,
-    &.current {
-      svg {
-        fill: $color-primary;
-      }
-    }
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-}
-
-.element-color-picker {
-  align-items: center;
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  margin: 0 4px;
-
-  .color-picker-body {
-    height: 100%;
-    margin-right: 15px;
-  }
-
-  .color-picker-bar {
-    height: 165px;
-    position: relative;
-    width: 15px;
-
-    .color-bar-select {
-      background-color: $color-gray-50;
-      height: 3px;
-      left: -4px;
-      position: absolute;
-      width: 23px;
-      transition: none;
-      top: 30%;
-    }
-  }
-}
-
-.radius-options,
-.padding-options,
-.margin-options {
-  align-items: center;
-  border: 1px solid $color-gray-60;
-  border-radius: $br4;
-  display: flex;
-  justify-content: space-between;
-  padding: 8px;
-  width: 64px;
-
-  .radius-icon,
-  .padding-icon,
-  .margin-icon {
-    display: flex;
-    align-items: center;
-
-    svg {
-      cursor: pointer;
-      height: 16px;
-      fill: $color-gray-30;
-      width: 16px;
-    }
-
-    &:hover,
-    &.selected {
-      svg {
-        fill: $color-primary;
-      }
-    }
-  }
-}
-
-.orientation-icon {
-  margin-left: $size-2;
-  display: flex;
-  align-items: center;
-
-  svg {
-    cursor: pointer;
-    height: 20px;
-    fill: $color-gray-40;
-    width: 20px;
-  }
-
-  &:hover {
-    svg {
-      fill: $color-gray-10;
-    }
-  }
-}
-
-.navigate-icon {
-  background-color: $color-gray-60;
-  cursor: pointer;
-  margin-left: $size-2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-
-  svg {
-    height: 16px;
-    fill: $color-gray-30;
-    width: 16px;
-  }
-
-  &:hover {
-    svg {
-      stroke: $color-gray-10;
-    }
-  }
-}
-
-.input-icon {
-  align-items: center;
-  display: flex;
-  width: 100%;
-
-  &:first-child {
-    margin-right: $size-2;
-  }
-
-  .icon-before {
-    align-items: center;
-    display: flex;
-    height: 18px;
-    position: relative;
-    width: 14px;
-
-    svg {
-      fill: $color-gray-30;
-      height: 14px;
-      width: 14px;
-    }
-  }
-}
-
-.custom-button {
-  cursor: pointer;
-  background: none;
-  border: none;
-
-  & svg {
-    width: 12px;
-    height: 12px;
-    fill: $color-gray-20;
-  }
-
-  &:hover svg,
-  &.is-active svg {
-    fill: $color-primary;
-  }
-}
-
-.element-set-content .input-row {
-  & .element-set-subtitle {
-    width: 5.5rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.grid-option,
-.shadow-option {
-  margin-bottom: 0.5rem;
-  .advanced-options {
-    .row-flex {
-      justify-content: flex-end;
-    }
-    .custom-button {
-      left: 0;
-      position: absolute;
-      top: 12px;
-    }
-    .element-set-actions-button {
-      min-width: auto;
-      min-height: auto;
-      padding-right: 10px;
-      svg {
-        width: 12px;
-        height: 12px;
-      }
-    }
-  }
-}
-
-.element-set-content .custom-select.input-option {
-  border-top: none;
-  border-left: none;
-  border-right: none;
-  margin-left: 0.25rem;
-}
-
-.element-set-content .grid-option-main,
-.element-set-content .shadow-option-main {
-  align-items: center;
-  display: flex;
-  padding: 0.3rem 0;
-  border: 1px solid $color-black;
-  border-radius: $br4;
-  height: 48px;
-
-  &:hover {
-    background: $color-gray-60;
-
-    .custom-select,
-    .editable-select,
-    input {
-      background-color: $color-gray-50;
-    }
-  }
-
-  & .custom-select {
-    min-width: 4.75rem;
-    height: 2rem;
-    border-color: transparent;
-    border-bottom: 1px solid #65666a;
-    max-height: 30px;
-
-    &:hover {
-      border: 1px solid $color-gray-40;
-    }
-  }
-
-  & .input-element {
-    width: 50px;
-    overflow: hidden;
-  }
-
-  & .custom-select-dropdown {
-    width: 96px;
-  }
-
-  & .input-option {
-    margin-left: 0.5rem;
-
-    & .custom-select-dropdown {
-      width: 5rem;
-      min-width: 5rem;
-      max-height: 10rem;
-    }
-  }
-}
-
-.grid-option-main-actions,
-.shadow-option-main-actions {
-  display: flex;
-  visibility: hidden;
-
-  .grid-option:hover &,
-  .shadow-option:hover & {
-    visibility: visible;
-  }
-}
-
-.focus-overlay {
-  background: $color-black;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: calc(100%);
-  opacity: 0.4;
-  z-index: 10;
-  display: flex;
-}
-
-.advanced-options-wrapper {
-  width: 100%;
-}
-
-.advanced-options {
-  border: 1px solid $color-gray-60;
-  background-color: $color-gray-50;
-  border-radius: $br4;
-  padding: 8px;
-  position: relative;
-  top: 2px;
-  width: 100%;
-}
-
-.btn-options {
-  cursor: pointer;
-  border: 1px solid $color-black;
-  background: $color-gray-60;
-  border-radius: $br2;
-  color: $color-gray-20;
-  font-size: $fs11;
-  line-height: $lh-145; // Original value was 16px; 16px/11px = 145.454545455% => $lh-145
-  flex-grow: 1;
-  padding: 0.25rem 0;
-
-  &:first-child {
-    margin-right: 0.5rem;
-  }
-
-  &:not([disabled]):hover {
-    background: $color-primary;
-    color: $color-black;
-  }
-
-  &[disabled] {
-    opacity: 0.4;
-    cursor: auto;
-  }
-}
-
-.element-set-options-group {
-  display: flex;
-  justify-content: space-between;
-  padding: 3px;
-  border: 1px solid $color-black;
-  border-radius: $br4;
-
-  &:hover {
-    background: #1f1f1f;
-  }
-
-  &.selected {
-    border: 1px solid $color-primary;
-  }
-
-  &:not(:first-child) {
-    margin-top: 7px;
-  }
-
-  &.open {
-    &:hover {
-      background: unset;
-    }
-  }
-}
-
-.interactions-options {
-  &.element-set {
-    border-bottom: 0;
-  }
-
-  .element-set-options-group {
-    flex-wrap: wrap;
-  }
-
-  &:not(:first-child) {
-    border-top: 1px solid $color-gray-60;
-  }
-}
-
-.exports-options,
-.shadow-options {
-  .element-set-options-group {
-    .delete-icon {
-      display: flex;
-      min-width: 40px;
-      min-height: 40px;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      svg {
-        width: 12px;
-        height: 12px;
-        fill: $color-gray-20;
-      }
-    }
-  }
-
-  .download-button {
-    margin-top: 10px;
-  }
-
-  .input-element {
-    width: 100%;
-    flex-shrink: initial;
-  }
-
-  .row-grid-2 {
-    grid-column-gap: 1em;
-  }
-
-  .color-info {
-    input {
-      margin-right: 1em;
-      width: 74px;
-      &:focus {
-        border-color: $color-primary !important;
-        color: $color-white;
-        outline: none;
-      }
-
-      &:hover {
-        border-color: $color-gray-20;
-      }
-    }
-  }
-}
-
-.shadow-options .color-row-wrap {
-  margin-left: 6px;
-  margin-top: 0.5rem;
-}
-
-.element-set-actions-button {
-  display: flex;
-  min-width: 30px;
-  min-height: 30px;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-
-  svg {
-    width: 12px;
-    height: 12px;
-    fill: $color-gray-20;
-    stroke: $color-gray-20;
-  }
-
-  &.remove {
-    min-width: 20px;
-    min-height: 20px;
-  }
-
-  &:hover svg,
-  &.active svg {
-    fill: $color-primary;
-    stroke: $color-primary;
-  }
-
-  &.actions-inside {
-    position: absolute;
-    right: 0;
-  }
-}
-
-.element-set-label {
-  font-size: $fs12;
-  padding: 0.5rem;
-  color: $color-gray-10;
-}
-
-.element-set-actions {
-  display: flex;
-  visibility: hidden;
-}
-
-.row-flex-removable:hover .element-set-actions,
-.element-set-options-group:hover .element-set-actions {
-  visibility: visible;
-}
-
-.layer-actions {
-  visibility: visible;
-}
-
-.typography-entry {
-  margin: 0.5rem 0.3rem;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  .typography-selection-wrapper {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    flex: 1;
-    height: 100%;
-
-    &.is-selectable {
-      cursor: pointer;
-    }
-  }
-
-  .typography-sample {
-    font-size: $fs17;
-    color: $color-white;
-    margin: 0 0.5rem;
-
-    font-family: sourcesanspro;
-    font-style: normal;
-    font-weight: $fw400;
-  }
-
-  .typography-name {
-    flex-grow: 1;
-    font-size: $fs11;
-    margin-top: 4px;
-    max-width: calc(var(--width, 256px) - 100px);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .element-set-actions-button svg {
-    width: 10px;
-    height: 10px;
-  }
-}
-
-.spacing-options {
-  display: flex;
-  width: 100%;
-}
-
-.asset-section {
-  .typography-entry {
-    margin: 0.25rem 0;
-  }
-
-  .element-set-content .font-option,
-  .element-set-content .size-option {
-    margin: 0.5rem 0;
-  }
-  .element-set-content .variant-option {
-    margin-left: 0.5rem;
-  }
-}
-
-.row-flex input.adv-typography-name {
-  font-size: $fs14;
-  color: $color-gray-10;
-  width: 100%;
-  max-width: none;
-  margin: 0;
-  background-color: #303236;
-  border-top: none;
-  border-left: none;
-  border-right: none;
-}
-
-.size-option .custom-select-dropdown {
-  cursor: pointer;
-  max-height: 16rem;
-  min-width: 6rem;
-  left: initial;
-  top: 0;
-}
-
-.typography-read-only-data {
-  font-size: $fs12;
-  color: $color-white;
-
-  .typography-name {
-    font-size: $fs14;
-  }
-
-  .row-flex {
-    padding: 0.5rem 0;
-  }
-
-  .label {
-    color: $color-gray-30;
-
-    &::after {
-      content: ":";
-      margin-right: 0.25rem;
-    }
-  }
-
-  .go-to-lib-button {
-    color: $color-white;
-    transition:
-      border 0.3s,
-      color 0.3s;
-    text-align: center;
-    background: $color-gray-50;
-    padding: 0.5rem;
-    border-radius: $br2;
-    cursor: pointer;
-    font-size: $fs14;
-    margin-top: 1rem;
-
-    &:hover {
-      background: $color-primary;
-      color: $color-black;
-    }
-  }
-}
-
-.multiple-typography {
-  margin: 0.5rem;
-  padding: 0.5rem;
-  border: 1px dashed $color-gray-30;
-  border-radius: $br4;
-  display: flex;
-  justify-content: space-between;
-
-  .multiple-typography-text,
-  .multiple-typography-button {
-    font-size: $fs12;
-    display: flex;
-    align-items: center;
-  }
-
-  .multiple-typography-button {
-    cursor: pointer;
-    svg {
-      transition: fill 0.3s;
-      width: 16px;
-      height: 16px;
-      fill: $color-gray-10;
-    }
-
-    &:hover svg {
-      fill: $color-primary;
-    }
-  }
-}
-
-.font-selector {
-  background: $color-black;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: calc(100%);
-  z-index: 10;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .font-selector-dropdown {
-    background: #303236;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    height: 100%;
-  }
-
-  header {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-
-    .backend-filters {
-      padding: $size-2 $size-4;
-      // width: 220px;
-      top: 40px;
-      right: 20px;
-    }
-    .backend-filter {
-      display: flex;
-      align-items: center;
-      padding: $size-2 0;
-      cursor: pointer;
-
-      .checkbox-icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: $size-4;
-        height: $size-4;
-        border: 1px solid $color-gray-30;
-        border-radius: $br3;
-
-        svg {
-          width: 8px;
-          display: none;
-          height: 8px;
-          fill: $color-black;
-        }
-      }
-
-      .backend-name {
-        margin-left: $size-2;
-        color: $color-gray-50;
-      }
-
-      &.selected {
-        .checkbox-icon {
-          svg {
-            display: inherit;
-          }
-        }
-      }
-    }
-
-    input {
-      display: flex;
-      flex-grow: 1;
-      padding: 4px;
-      font-size: $fs12;
-      background: $color-gray-50;
-      border-radius: $br3;
-      color: $color-gray-20;
-      border: 1px solid $color-gray-30;
-      width: 88%;
-      margin: 15px 17px;
-    }
-
-    .title {
-      font-size: $fs14;
-      margin: 9px 17px;
-    }
-
-    .options {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 24px;
-      height: 24px;
-      margin-left: $size-2;
-
-      svg {
-        width: 16px;
-        height: 16px;
-        fill: $color-gray-20;
-      }
-
-      &.active {
-        svg {
-          fill: $color-primary;
-        }
-      }
-    }
-  }
-
-  .fonts-list {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    position: relative;
-    -webkit-box-flex: 1;
-    flex: 1 1 auto;
-  }
-
-  hr {
-    margin-bottom: 0px;
-    margin-top: 0px;
-  }
-
-  .font-item {
-    padding-left: $size-5;
-    height: $size-6;
-    max-height: $size-6;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    color: $color-gray-10;
-
-    &.selected {
-      background-color: $color-black;
-      color: $color-primary;
-
-      .icon svg {
-        fill: $color-primary;
-      }
-    }
-
-    &:hover {
-      background-color: $color-primary;
-      color: $color-black;
-    }
-
-    .icon {
-      display: flex;
-      // justify-content: center;
-      align-items: center;
-      // border: 1px solid red;
-      width: $size-5;
-    }
-
-    .label {
-      font-size: $fs12;
-    }
-
-    svg {
-      fill: $color-gray-10;
-      width: 10px;
-      height: 10px;
-    }
-  }
-}
-
-.row-flex.align-top {
-  align-items: flex-start;
-}
-
-.constraints-widget {
-  min-width: 72px;
-  min-height: 72px;
-  position: relative;
-  background-color: $color-gray-60;
-  flex-grow: 0;
-
-  .constraints-box {
-    width: 28px;
-    height: 28px;
-    position: absolute;
-    top: 22px;
-    left: 22px;
-    border: 2px solid $color-gray-50;
-  }
-
-  .constraint-button {
-    position: absolute;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &::after {
-      content: " ";
-      background-color: $color-gray-30;
-    }
-
-    &.active,
-    &:hover {
-      &::after {
-        background-color: $color-primary;
-      }
-    }
-
-    &.top,
-    &.bottom {
-      width: 28px;
-      height: 22px;
-      left: calc(50% - 14px);
-
-      &::after {
-        width: 3px;
-        height: 15px;
-      }
-    }
-
-    &.top {
-      top: 0;
-    }
-
-    &.bottom {
-      bottom: 0;
-    }
-
-    &.left,
-    &.right {
-      width: 22px;
-      height: 28px;
-      top: calc(50% - 14px);
-
-      &::after {
-        width: 15px;
-        height: 3px;
-      }
-    }
-
-    &.left {
-      left: 0;
-    }
-
-    &.right {
-      right: 0;
-    }
-
-    &.centerv {
-      width: 28px;
-      height: 28px;
-      left: calc(50% - 14px);
-      top: calc(50% - 14px);
-
-      &::after {
-        width: 3px;
-        height: 15px;
-      }
-    }
-
-    &.centerh {
-      width: 28px;
-      height: 15px;
-      left: calc(50% - 14px);
-      top: calc(50% - 7px);
-
-      &::after {
-        width: 15px;
-        height: 3px;
-      }
-    }
-  }
-}
-
-.constraints-form {
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: flex-start;
-
-  .input-select {
-    font-size: $fs12;
-    margin: 0 $size-1 $size-2 $size-1;
-    padding: 0 $size-1;
-  }
-
-  svg {
-    width: 15px;
-    height: 15px;
-    margin-left: $size-4;
-    fill: $color-gray-20;
-  }
-
-  .left-right svg {
-    transform: rotate(45deg);
-  }
-
-  .top-bottom svg {
-    transform: rotate(-45deg);
-  }
-
-  .fix-when {
-    font-size: $fs12;
-    cursor: pointer;
-    display: flex;
-
-    span {
-      margin-left: $size-2;
-    }
-
-    &:hover,
-    &.active {
-      color: $color-primary;
-
-      svg {
-        fill: $color-primary;
-      }
-    }
-  }
-}
-
-.cap-select {
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-bottom-color: $color-gray-40;
-  color: $color-gray-10;
-  cursor: pointer;
-  font-size: $fs12;
-  margin: $size-1;
-  overflow: hidden;
-  padding: $size-1;
-  padding-right: 20px;
-  position: relative;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-
-  & .cap-select-button {
-    svg {
-      fill: $color-gray-10;
-      height: 11px;
-      position: absolute;
-      right: 5px;
-      top: 6px;
-      width: 11px;
-    }
-  }
-
-  &:hover {
-    border-color: $color-gray-40;
-  }
-
-  &:focus {
-    border-color: $color-primary;
-  }
-}
-
-.cap-select-dropdown {
-  right: 5px;
-  top: 30px;
-  z-index: 12;
-  width: 200px;
-  height: 320px;
-  position: fixed;
-
-  & li.separator {
-    border-top: 1px solid $color-gray-10;
-  }
-
-  & li img {
-    width: 16px;
-    margin-right: $size-2;
-  }
-}
-
-.expand-colors {
-  cursor: pointer;
-  display: flex;
-
-  .text {
-    color: $color-gray-30;
-    font-size: $fs12;
-    padding-left: 10px;
-  }
-
-  svg {
-    width: 16px;
-    height: 16px;
-    fill: $color-gray-20;
-    stroke: $color-gray-20;
-  }
-}
-
-.selected-colors {
-  .color-data {
-    margin-bottom: 0;
-    padding-bottom: 5px;
-
-    svg {
-      visibility: hidden;
-    }
-
-    .percentil {
-      margin-bottom: 0;
-    }
-  }
-
-  .color-data:hover {
-    background-color: $color-gray-60;
-
-    svg {
-      visibility: visible;
-    }
-  }
-}
-
-.layout-menu,
-.layout-item-menu,
-.layout-grid-item-menu {
-  font-family: "worksans", sans-serif;
-  svg {
-    height: 16px;
-    width: 16px;
-    fill: $color-gray-30;
-  }
-  .layout-row {
-    display: grid;
-    grid-template-columns: 60px 1fr;
-    margin-bottom: 5px;
-    .row-title {
-      font-size: $fs12;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      margin-right: 5px;
-      font-family: "worksans", sans-serif;
-
-      &.justify-content,
-      &.align-content,
-      &.sizing {
-        align-items: flex-start;
-        margin-top: 4px;
-      }
-
-      &.align-items-grid,
-      &.jusfiy-content-grid {
-        align-items: flex-start;
-        margin-top: 11px;
-      }
-    }
-    .btn-wrapper {
-      display: flex;
-      width: 100%;
-      max-width: 185px;
-
-      &.wrap {
-        flex-direction: column;
-        gap: 5px;
-      }
-
-      &.justify-content,
-      &.align-content {
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-      }
-
-      .direction,
-      .wrap-type,
-      .align-items-style,
-      .align-self-style,
-      .justify-content-style,
-      .align-content-style,
-      .layout-behavior,
-      .absolute {
-        display: flex;
-        border-radius: $br4;
-        border: 1px solid $color-gray-60;
-        height: 26px;
-        margin-right: 5px;
-        flex-grow: 1;
-        &.horizontal {
-          button svg {
-            transform: rotate(90deg);
-          }
-        }
-        button {
-          display: flex;
-          flex-grow: 1;
-          justify-content: center;
-          align-items: center;
-          background: none;
-          border: none;
-          cursor: pointer;
-          border-right: 1px solid $color-gray-60;
-          color: $color-gray-20;
-          &.active,
-          &:hover {
-            color: $color-primary;
-            &.dir {
-              color: $color-primary;
-            }
-            svg {
-              fill: $color-primary;
-            }
-          }
-        }
-        .dir {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          background: none;
-          border: none;
-          cursor: pointer;
-          border-right: 1px solid $color-gray-60;
-          padding: 2px;
-          &.row-reverse {
-            svg {
-              transform: rotate(180deg);
-            }
-          }
-
-          &.column-reverse {
-            svg {
-              transform: rotate(-90deg);
-            }
-          }
-          &.column {
-            svg {
-              transform: rotate(90deg);
-            }
-          }
-          &.active,
-          &:hover {
-            svg {
-              fill: $color-primary;
-            }
-          }
-        }
-        :last-child {
-          border-right: none;
-        }
-      }
-      .z-index {
-        display: flex;
-        align-items: center;
-        margin-left: 2px;
-        margin-top: -4px;
-        svg {
-          width: 30px;
-        }
-      }
-
-      .edit-mode {
-        align-items: center;
-        border-radius: 4px;
-        border: 1px solid $color-gray-60;
-        display: flex;
-        flex-direction: row;
-        gap: 10px;
-        justify-content: center;
-        margin-left: 5px;
-        padding: 0 8px;
-        text-align: left;
-        width: 120px;
-
-        button {
-          color: $color-gray-30;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          background: transparent;
-          border: none;
-          cursor: pointer;
-          gap: 16px;
-
-          &.active,
-          &:hover {
-            color: $color-primary;
-            svg {
-              fill: $color-primary;
-            }
-          }
-        }
-      }
-
-      &.align-grid-items {
-        flex-direction: row;
-        gap: 0px;
-        margin: 7px 0;
-
-        .align-items-style {
-          margin-right: 2px;
-        }
-      }
-
-      &.align-grid-content {
-        flex-direction: column;
-        gap: 7px;
-        margin: 7px 0;
-      }
-    }
-    .position-wrapper {
-      display: flex;
-      width: 100%;
-      max-width: 185px;
-      height: 26px;
-      border-radius: 4px;
-      border: 1px solid $color-gray-60;
-
-      .position-btn {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background: transparent;
-        border: none;
-        cursor: pointer;
-        color: $color-gray-20;
-        border-right: 1px solid $color-gray-60;
-        flex: 1;
-
-        &:last-child {
-          border-right: none;
-        }
-        &.active,
-        &:hover {
-          color: $color-primary;
-        }
-
-        &[disabled] {
-          opacity: 0.5;
-          &:hover {
-            color: $color-gray-20;
-          }
-        }
-      }
-    }
-
-    &.single-button {
-      display: flex;
-      justify-content: flex-end;
-      height: 1.5rem;
-
-      .btn-wrapper {
-        width: initial;
-      }
-    }
-  }
-  .no-wrap {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 21px;
-    width: 17px;
-    svg {
-      height: 0.7rem;
-      width: 0.7rem;
-    }
-  }
-
-  .wrap {
-    padding: 1px;
-  }
-
-  .gap-group {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 7px;
-    margin-top: 3px;
-    margin-bottom: 8px;
-    height: 26px;
-    max-width: 166px;
-    .gap-row {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      .icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-right: 7px;
-        svg {
-          height: 14px;
-          width: 14px;
-        }
-        &.rotated {
-          transform: rotate(90deg);
-        }
-        &.activated {
-          svg {
-            fill: $color-primary;
-          }
-        }
-      }
-      input {
-        font-size: $fs12;
-        min-width: 0;
-        padding: 0.25rem;
-        height: 20px;
-        margin: 0;
-      }
-    }
-    button {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background: none;
-      border: none;
-      cursor: pointer;
-      border-radius: $br3;
-
-      &.lock {
-        border: 1px solid $color-gray-60;
-        border-radius: $br3;
-        width: 30px;
-        height: 30px;
-      }
-      &.active {
-        svg {
-          fill: $color-primary;
-        }
-      }
-      &:hover {
-        background-color: $color-primary;
-        svg {
-          fill: $color-gray-60;
-        }
-      }
-    }
-  }
-
-  .padding-row,
-  .margin-row {
-    display: grid;
-    grid-template-columns: auto 30px;
-    max-width: 226px;
-    .padding-group,
-    .margin-item-group {
-      display: flex;
-      margin-top: 3px;
-      margin-bottom: 3px;
-      height: 26px;
-      .padding-item,
-      .margin-item {
-        display: flex;
-        align-items: center;
-        flex-grow: 1;
-        .icon {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          margin-right: 7px;
-          svg {
-            height: 14px;
-            width: 14px;
-          }
-          &.rotated {
-            transform: rotate(90deg);
-          }
-          &.activated {
-            svg {
-              fill: $color-primary;
-            }
-          }
-        }
-        input {
-          font-size: $fs12;
-          min-width: 0;
-          padding: 0.25rem;
-          width: 70px;
-          height: 20px;
-          margin: 0;
-        }
-      }
-      button {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background: none;
-        border: none;
-        cursor: pointer;
-        border-radius: $br3;
-
-        &.lock {
-          border: 1px solid $color-gray-60;
-          border-radius: $br3;
-          width: 30px;
-          height: 30px;
-        }
-        &.active {
-          svg {
-            fill: $color-primary;
-          }
-        }
-        &:hover {
-          background-color: $color-primary;
-          svg {
-            fill: $color-gray-60;
-          }
-        }
-      }
-    }
-    .padding-icons,
-    .margin-item-icons {
-      padding: 0;
-      border: 1px solid $color-gray-60;
-      border-radius: $br3;
-      margin-bottom: 8px;
-      margin-top: $br3;
-      margin-right: 1px;
-      height: 30px;
-      width: 30px;
-
-      .padding-icon,
-      .margin-item-icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 6px;
-        flex-grow: 1;
-        border-right: 1px solid $color-gray-60;
-        cursor: pointer;
-
-        &:hover,
-        &.selected {
-          svg {
-            fill: $color-primary;
-          }
-        }
-        svg {
-          height: 14px;
-          width: 14px;
-          fill: $color-gray-30;
-        }
-      }
-
-      :last-child {
-        border: none;
-      }
-    }
-
-    .wrapper {
-      display: flex;
-      height: 26px;
-
-      .input-element {
-        margin: 0;
-        margin-top: 3px;
-        height: 26px;
-      }
-    }
-  }
-
-  .layout-container {
-    border: 1px solid $color-gray-60;
-    border-radius: $br3;
-    margin: 5px 0;
-    .layout-entry {
-      display: flex;
-      align-items: center;
-      color: $color-gray-20;
-      height: 38px;
-      cursor: pointer;
-      &:hover {
-        svg {
-          fill: $color-primary;
-        }
-      }
-    }
-
-    .layout-info {
-      font-size: $fs12;
-      width: 100%;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      &::first-letter {
-        text-transform: capitalize;
-      }
-    }
-
-    .layout-body {
-      display: flex;
-      align-items: center;
-      margin: 7px;
-      .selects-wrapper {
-        width: 100%;
-        margin-left: 12px;
-        select {
-          text-transform: capitalize;
-        }
-        option {
-          text-transform: capitalize;
-        }
-      }
-
-      .orientation-grid {
-        background-color: $color-gray-60;
-        .button-wrapper {
-          display: grid;
-          grid-template-columns: 1fr 1fr 1fr;
-          grid-template-rows: 1fr 1fr 1fr;
-          width: 47px;
-          height: 47px;
-          border: 1px solid $color-gray-30;
-          margin: 12px;
-          .orientation {
-            background: none;
-            border: none;
-            height: 14px;
-            width: 14px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 2px;
-            cursor: pointer;
-
-            .icon {
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              svg {
-                fill: none;
-                height: 10px;
-                width: 10px;
-              }
-              &.rotated {
-                transform: rotate(90deg);
-              }
-            }
-
-            &.active {
-              .icon {
-                svg {
-                  fill: $color-primary;
-                }
-              }
-            }
-            &:hover {
-              .icon {
-                svg {
-                  fill: $color-gray-20;
-                }
-              }
-            }
-          }
-        }
-        &.col {
-          .button-wrapper {
-            display: grid;
-            grid-template-columns: 1fr 1fr 1fr;
-            grid-template-rows: 1fr;
-            .orientation {
-              height: 100%;
-              justify-content: space-between;
-              flex-direction: column;
-            }
-          }
-        }
-        &.row {
-          .button-wrapper {
-            display: grid;
-            grid-template-rows: 1fr 1fr 1fr;
-            grid-template-columns: 1fr;
-            .orientation {
-              width: 100%;
-              justify-content: space-between;
-              padding: 2px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .grid-columns {
-    border: 1px solid $color-gray-60;
-    padding: 5px;
-    min-height: 38px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    &:not(:first-child) {
-      margin-top: 5px;
-    }
-    .grid-columns-header {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      flex-grow: 1;
-      min-height: 36px;
-      .columns-info {
-        flex-grow: 1;
-        font-size: 12px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      .expand-icon,
-      .add-column {
-        cursor: pointer;
-        background-color: transparent;
-        border: none;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        &.active,
-        &:hover {
-          svg {
-            fill: $color-primary;
-          }
-        }
-      }
-
-      .add-column svg {
-        height: 12px;
-        width: 12px;
-        fill: $color-gray-20;
-      }
-    }
-    .columns-info-wrapper {
-      .column-info {
-        display: grid;
-        grid-template-columns: 35px 1fr 1fr auto;
-        background-color: $color-gray-60;
-        padding: 3px;
-        border-radius: 3px;
-        border: 1px solid transparent;
-
-        &:hover {
-          border: 1px solid $color-primary;
-        }
-
-        &:not(:first-child) {
-          margin-top: 3px;
-        }
-        .direction-grid-icon {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 5px;
-        }
-        input {
-          background-color: $color-gray-60;
-        }
-        .grid-column-value,
-        .grid-column-unit {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          height: 30px;
-          &.active,
-          &:focus,
-          &:focus-within {
-            border-bottom: 1px solid $color-primary;
-          }
-        }
-        .grid-column-unit-selector {
-          border: none;
-          border-bottom: 1px solid $color-gray-30;
-          margin: 0.25rem 0;
-          height: 23px;
-          width: 100%;
-          &:hover {
-            border-bottom: 1px solid $color-gray-20;
-          }
-        }
-
-        .remove-grid-column {
-          cursor: pointer;
-          background-color: transparent;
-          border: none;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          margin-left: 40px;
-          svg {
-            height: 12px;
-            width: 12px;
-            fill: $color-gray-20;
-          }
-          &.active,
-          &:hover {
-            svg {
-              fill: $color-primary;
-            }
-          }
-        }
-      }
-    }
-  }
-  .manage-grid-columns {
-    margin-left: 60px;
-    margin-bottom: 10px;
-    .grid-auto,
-    .grid-manual {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      .grid-columns-auto,
-      .grid-rows-auto {
-        display: grid;
-        grid-template-columns: 20px 1fr;
-        .icon {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-        input {
-          width: 80%;
-        }
-      }
-    }
-    .grid-manual {
-      .input-wrapper {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-      }
-    }
-  }
-}
-
-.advanced-ops {
-  margin: 10px 0;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  font-size: $fs12;
-  color: $color-gray-30;
-  border: none;
-  background-color: transparent;
-  padding: 0;
-  .icon {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    margin-right: 10px;
-    svg {
-      fill: $color-gray-20;
-    }
-  }
-
-  &:hover {
-    svg {
-      fill: $color-primary;
-    }
-  }
-}
-.advanced-ops-body {
-  .input-wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    .input-element {
-      width: 100%;
-      &::after {
-        content: attr(alt);
-        width: 100px;
-      }
-    }
-  }
-}
-
-.component-annotation {
-  background-color: $color-gray-60;
-  border: 1px solid $color-gray-60;
-  border-radius: 2px;
-
-  .title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-bottom: 1px solid $color-gray-50;
-    font-size: $fs12;
-    color: $color-gray-20;
-    padding: 0 10px;
-
-    &.expandeable {
-      cursor: pointer;
-    }
-
-    div {
-      display: flex;
-      align-items: center;
-      line-height: 2.5;
-    }
-
-    .expand {
-      svg {
-        fill: $color-gray-20;
-        width: $size-2;
-        height: $size-2;
-        margin-right: 10px;
-      }
-    }
-
-    .icon {
-      display: none;
-      cursor: pointer;
-      svg {
-        fill: $color-gray-20;
-        width: $size-4;
-        height: $size-4;
-        margin-left: 15px;
-        &.icon-cross {
-          width: $size-3;
-          height: $size-3;
-        }
-      }
-
-      .icon-tick:hover,
-      .icon-pencil:hover {
-        fill: $color-primary;
-      }
-
-      .icon-cross:hover,
-      .icon-trash:hover {
-        fill: $color-danger;
-      }
-    }
-
-    &:hover {
-      .icon {
-        display: flex;
-      }
-    }
-  }
-
-  &.editing {
-    border: 1px solid $color-primary;
-    .title .icon {
-      display: flex;
-    }
-
-    textarea {
-      min-height: 250px;
-    }
-  }
-
-  &.creating {
-    textarea {
-      min-height: 250px;
-    }
-  }
-
-  .hidden {
-    display: none;
-    svg {
-      display: none;
-    }
-  }
-
-  .counter {
-    text-align: right;
-    font-size: $fs11;
-    color: $color-gray-30;
-    margin: 0 10px 10px 0;
-  }
-
-  // Auto growing text
-  .grow-wrap {
-    // easy way to plop the elements on top of each other and have them both sized based on the tallest one's height
-    display: grid;
-
-    &:after {
-      // The space is needed to preventy jumpy behavior
-      content: attr(data-replicated-value) " ";
-      white-space: pre-wrap;
-      visibility: hidden;
-    }
-
-    textarea {
-      background-color: $color-gray-60;
-      color: $color-white;
-      padding: 10px;
-
-      border: none;
-      overflow: hidden;
-      outline: none;
-
-      -webkit-box-shadow: none;
-      -moz-box-shadow: none;
-      box-shadow: none;
-
-      resize: none; /*remove the resize handle on the bottom right*/
-    }
-
-    textarea,
-    &:after {
-      /* Identical styling required!! */
-      font: inherit;
-      font-size: $fs14;
-      overflow-wrap: anywhere;
-
-      padding: 10px;
-
-      /* Place on top of each other */
-      grid-area: 1 / 1 / 2 / 2;
-    }
-  }
-}
-
-.component-block-title {
-  border: none;
-  background: none;
-
-  svg {
-    height: 8px;
-    width: 8px;
-    fill: $color-gray-20;
-    margin-right: 1rem;
-    transform: rotate(180deg);
-  }
-
-  &.back {
-    cursor: pointer;
-  }
-}
diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs
index c4e1f8b3e..4972589ed 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs
@@ -20,7 +20,6 @@
    [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.components.tab-container :refer [tab-container tab-element]]
-   [app.main.ui.context :as ctx]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]]
    [app.main.ui.workspace.colorpicker.gradients :refer [gradients]]
@@ -52,8 +51,7 @@
 
 (mf/defc colorpicker
   [{:keys [data disable-gradient disable-opacity disable-image on-change on-accept]}]
-  (let [new-css-system         (mf/use-ctx ctx/new-css-system)
-        state                  (mf/deref refs/colorpicker)
+  (let [state                  (mf/deref refs/colorpicker)
         node-ref               (mf/use-ref)
 
         ;; TODO: I think we need to put all this picking state under
@@ -267,235 +265,123 @@
                                 :h h :s s :v v
                                 :alpha (/ alpha 255)}))))
 
-    (if new-css-system
-      [:div {:class (stl/css :colorpicker)
-             :ref node-ref
-             :style {:touch-action "none"}}
-       [:div {:class (stl/css :top-actions)}
-        (when (or (not disable-gradient) (not disable-image))
-          [:div {:class (stl/css :select)}
-           [:& select
-            {:default-value selected-mode
-             :options options
-             :on-change handle-change-mode}]])
-        (when (not= selected-mode :image)
-          [:button {:class (stl/css-case :picker-btn true
-                             :selected picking-color?)
-                    :on-click handle-click-picker}
-           i/picker-refactor])]
+    [:div {:class (stl/css :colorpicker)
+           :ref node-ref
+           :style {:touch-action "none"}}
+     [:div {:class (stl/css :top-actions)}
+      (when (or (not disable-gradient) (not disable-image))
+        [:div {:class (stl/css :select)}
+         [:& select
+          {:default-value selected-mode
+           :options options
+           :on-change handle-change-mode}]])
+      (when (not= selected-mode :image)
+        [:button {:class (stl/css-case :picker-btn true
+                                       :selected picking-color?)
+                  :on-click handle-click-picker}
+         i/picker-refactor])]
 
-       (when (or (= selected-mode :linear-gradient)
+     (when (or (= selected-mode :linear-gradient)
                (= selected-mode :radial-gradient))
-         [:& gradients
-          {:stops (:stops state)
-           :editing-stop (:editing-stop state)
-           :on-select-stop handle-change-stop}])
+       [:& gradients
+        {:stops (:stops state)
+         :editing-stop (:editing-stop state)
+         :on-select-stop handle-change-stop}])
 
-       (if (= selected-mode :image)
-         (let [uri (cfg/resolve-file-media (:image current-color))]
-           [:div {:class (stl/css :select-image)}
-            [:div {:class (stl/css :content)}
-             (when (:image current-color)
-               [:img {:src uri}])]
-            [:button
-             {:class (stl/css :choose-image)
-              :title (tr "media.choose-image")
-              :aria-label (tr "media.choose-image")
-              :on-click on-fill-image-click}
-             (tr "media.choose-image")
-             [:& file-uploader
-              {:input-id "fill-image-upload"
-               :accept "image/jpeg,image/png"
-               :multi false
-               :ref fill-image-ref
-               :on-selected on-fill-image-selected}]]])
-         [:*
-          [:div {:class (stl/css :colorpicker-tabs)}
-           [:& tab-container
-            {:on-change-tab set-tab!
-             :selected @active-color-tab
-             :collapsable? false}
-
-            [:& tab-element {:id :ramp :title i/rgba-refactor}
-             (if picking-color?
-               [:div {:class (stl/css :picker-detail-wrapper)}
-                [:div {:class (stl/css :center-circle)}]
-                [:canvas#picker-detail {:width 256 :height 140}]]
-               [:& ramp-selector
-                {:color current-color
-                 :disable-opacity disable-opacity
-                 :on-change handle-change-color
-                 :on-start-drag on-start-drag
-                 :on-finish-drag on-finish-drag}])]
-
-            [:& tab-element {:id :harmony :title i/rgba-complementary-refactor}
-             (if picking-color?
-               [:div {:class (stl/css :picker-detail-wrapper)}
-                [:div {:class (stl/css :center-circle)}]
-                [:canvas#picker-detail {:width 256 :height 140}]]
-               [:& harmony-selector
-                {:color current-color
-                 :disable-opacity disable-opacity
-                 :on-change handle-change-color
-                 :on-start-drag on-start-drag
-                 :on-finish-drag on-finish-drag}])]
-
-            [:& tab-element {:id :hsva :title i/hsva-refactor}
-             (if picking-color?
-               [:div {:class (stl/css :picker-detail-wrapper)}
-                [:div {:class (stl/css :center-circle)}]
-                [:canvas#picker-detail {:width 256 :height 140}]]
-               [:& hsva-selector
-                {:color current-color
-                 :disable-opacity disable-opacity
-                 :on-change handle-change-color
-                 :on-start-drag on-start-drag
-                 :on-finish-drag on-finish-drag}])]]]
-
-          [:& color-inputs
-           {:type (if (= @active-color-tab :hsva) :hsv :rgb)
-            :disable-opacity disable-opacity
-            :color current-color
-            :on-change handle-change-color}]
-
-          [:& libraries
-           {:state state
-            :current-color current-color
-            :disable-gradient disable-gradient
-            :disable-opacity disable-opacity
-            :disable-image disable-image
-            :on-select-color on-select-library-color
-            :on-add-library-color on-add-library-color}]])
-
-       (when on-accept
-         [:div {:class (stl/css :actions)}
-          [:button {:class (stl/css-case
-                             :accept-color true
-                             :btn-disabled disabled-color-accept?)
-                    :on-click on-color-accept
-                    :disabled disabled-color-accept?}
-           (tr "workspace.libraries.colors.save-color")]])]
-
-      [:div.colorpicker {:ref node-ref
-                         :style {:touch-action "none"}}
-       [:div.colorpicker-content
-        [:div.top-actions
-         (when (or (not disable-gradient) (not disable-image))
-           [:div.element-set-content
-            [:& select
-             {:default-value selected-mode
-              :options options
-              :on-change handle-change-mode}]])
-         (when (not= selected-mode :image)
-           [:button.picker-btn
-            {:class (when picking-color? "active")
-             :on-click handle-click-picker}
-            i/picker])]
-
-        (when (or (= (:type state) :linear-gradient)
-                (= (:type state) :radial-gradient))
-
-          [:& gradients
-           {:stops (:stops state)
-            :editing-stop (:editing-stop state)
-            :on-select-stop handle-change-stop}])
-
-        (if (= selected-mode :image)
-          (let [uri (cfg/resolve-file-media (:image current-color))]
-            [:div.select-image
-             [:div.content
-              (when (:image current-color)
-                [:img {:src uri}])]
-             [:button.btn-secondary
-              {:title (tr "media.choose-image")
-               :aria-label (tr "media.choose-image")
-               :on-click on-fill-image-click}
-              (tr "media.choose-image")
-              [:& file-uploader
-               {:input-id "fill-image-upload"
-                :accept "image/jpeg,image/png"
-                :multi false
-                :ref fill-image-ref
-                :on-selected on-fill-image-selected}]]])
-          [:*
-           [:div.colorpicker-tabs
-            [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
-             {:class (when (= @active-color-tab :ramp) "active")
-              :alt (tr "workspace.libraries.colors.rgba")
-              :on-click set-tab!
-              :data-tab "ramp"} i/picker-ramp]
-            [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
-             {:class (when (= @active-color-tab :harmony) "active")
-              :alt (tr "workspace.libraries.colors.rgb-complementary")
-              :on-click set-tab!
-              :data-tab "harmony"} i/picker-harmony]
-            [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
-             {:class (when (= @active-color-tab :hsva) "active")
-              :alt (tr "workspace.libraries.colors.hsv")
-              :on-click set-tab!
-              :data-tab "hsva"} i/picker-hsv]]
+     (if (= selected-mode :image)
+       (let [uri (cfg/resolve-file-media (:image current-color))]
+         [:div {:class (stl/css :select-image)}
+          [:div {:class (stl/css :content)}
+           (when (:image current-color)
+             [:img {:src uri}])]
+          [:button
+           {:class (stl/css :choose-image)
+            :title (tr "media.choose-image")
+            :aria-label (tr "media.choose-image")
+            :on-click on-fill-image-click}
+           (tr "media.choose-image")
+           [:& file-uploader
+            {:input-id "fill-image-upload"
+             :accept "image/jpeg,image/png"
+             :multi false
+             :ref fill-image-ref
+             :on-selected on-fill-image-selected}]]])
+       [:*
+        [:div {:class (stl/css :colorpicker-tabs)}
+         [:& tab-container
+          {:on-change-tab set-tab!
+           :selected @active-color-tab
+           :collapsable? false}
 
+          [:& tab-element {:id :ramp :title i/rgba-refactor}
            (if picking-color?
-             [:div.picker-detail-wrapper
-              [:div.center-circle]
-              [:canvas#picker-detail {:width 200 :height 160}]]
-             (case @active-color-tab
-               :ramp
-               [:& ramp-selector
-                {:color current-color
-                 :disable-opacity disable-opacity
-                 :on-change handle-change-color
-                 :on-start-drag on-start-drag
-                 :on-finish-drag on-finish-drag}]
-               :harmony
-               [:& harmony-selector
-                {:color current-color
-                 :disable-opacity disable-opacity
-                 :on-change handle-change-color
-                 :on-start-drag on-start-drag
-                 :on-finish-drag on-finish-drag}]
-               :hsva
-               [:& hsva-selector
-                {:color current-color
-                 :disable-opacity disable-opacity
-                 :on-change handle-change-color
-                 :on-start-drag on-start-drag
-                 :on-finish-drag on-finish-drag}]
-               nil))
+             [:div {:class (stl/css :picker-detail-wrapper)}
+              [:div {:class (stl/css :center-circle)}]
+              [:canvas#picker-detail {:width 256 :height 140}]]
+             [:& ramp-selector
+              {:color current-color
+               :disable-opacity disable-opacity
+               :on-change handle-change-color
+               :on-start-drag on-start-drag
+               :on-finish-drag on-finish-drag}])]
 
-           [:& color-inputs
-            {:type (if (= @active-color-tab :hsva) :hsv :rgb)
-             :disable-opacity disable-opacity
-             :color current-color
-             :on-change handle-change-color}]
+          [:& tab-element {:id :harmony :title i/rgba-complementary-refactor}
+           (if picking-color?
+             [:div {:class (stl/css :picker-detail-wrapper)}
+              [:div {:class (stl/css :center-circle)}]
+              [:canvas#picker-detail {:width 256 :height 140}]]
+             [:& harmony-selector
+              {:color current-color
+               :disable-opacity disable-opacity
+               :on-change handle-change-color
+               :on-start-drag on-start-drag
+               :on-finish-drag on-finish-drag}])]
 
-           [:& libraries
-            {:state state
-             :current-color current-color
-             :disable-gradient disable-gradient
-             :disable-opacity disable-opacity
-             :disable-image disable-image
-             :on-select-color on-select-library-color
-             :on-add-library-color on-add-library-color}]])
+          [:& tab-element {:id :hsva :title i/hsva-refactor}
+           (if picking-color?
+             [:div {:class (stl/css :picker-detail-wrapper)}
+              [:div {:class (stl/css :center-circle)}]
+              [:canvas#picker-detail {:width 256 :height 140}]]
+             [:& hsva-selector
+              {:color current-color
+               :disable-opacity disable-opacity
+               :on-change handle-change-color
+               :on-start-drag on-start-drag
+               :on-finish-drag on-finish-drag}])]]]
 
-        (when on-accept
-          [:div.actions
-           [:button.btn-primary.btn-large
-            {:on-click on-color-accept
-             :disabled disabled-color-accept?
-             :class (dom/classnames
-                      :btn-disabled disabled-color-accept?)}
-            (tr "workspace.libraries.colors.save-color")]])]])))
+        [:& color-inputs
+         {:type (if (= @active-color-tab :hsva) :hsv :rgb)
+          :disable-opacity disable-opacity
+          :color current-color
+          :on-change handle-change-color}]
+
+        [:& libraries
+         {:state state
+          :current-color current-color
+          :disable-gradient disable-gradient
+          :disable-opacity disable-opacity
+          :disable-image disable-image
+          :on-select-color on-select-library-color
+          :on-add-library-color on-add-library-color}]])
+
+     (when on-accept
+       [:div {:class (stl/css :actions)}
+        [:button {:class (stl/css-case
+                          :accept-color true
+                          :btn-disabled disabled-color-accept?)
+                  :on-click on-color-accept
+                  :disabled disabled-color-accept?}
+         (tr "workspace.libraries.colors.save-color")]])]))
 
 (defn calculate-position
   "Calculates the style properties for the given coordinates and position"
-  [{vh :height} position x y new-css-system]
+  [{vh :height} position x y]
   (let [;; picker height in pixels
-        h(if new-css-system 510 430)
+        h 510
         ;; Checks for overflow outside the viewport height
         overflow-fix (max 0 (+ y (- 50) h (- vh)))
 
-        x-pos (if new-css-system 325 250)]
+        x-pos 325]
     (cond
       (or (nil? x) (nil? y)) {:left "auto" :right "16rem" :top "4rem"}
       (= position :left) {:left (str (- x x-pos) "px")
@@ -512,12 +398,11 @@
            disable-opacity
            disable-image
            on-change on-close on-accept] :as props}]
-  (let [new-css-system      (mf/use-ctx ctx/new-css-system)
-        vport (mf/deref viewport)
+  (let [vport (mf/deref viewport)
         dirty? (mf/use-var false)
         last-change (mf/use-var nil)
         position (or position :left)
-        style (calculate-position vport position x y new-css-system)
+        style (calculate-position vport position x y)
 
         handle-change
         (fn [new-data]
@@ -531,7 +416,7 @@
        #(when (and @dirty? @last-change on-close)
           (on-close @last-change))))
 
-    [:div {:class (stl/css new-css-system :colorpicker-tooltip)
+    [:div {:class (stl/css :colorpicker-tooltip)
            :style (clj->js style)}
      [:& colorpicker {:data data
                       :disable-gradient disable-gradient
diff --git a/frontend/src/app/main/ui/workspace/colorpicker.scss b/frontend/src/app/main/ui/workspace/colorpicker.scss
index ae18f6abd..4abe58b46 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker.scss
@@ -11,118 +11,126 @@
   top: $s-100;
   left: calc(10 * $s-140);
   width: auto;
-  .colorpicker {
-    border-radius: $br-8;
-    width: $s-260;
-    & > * {
-      width: $s-260;
-    }
-    .top-actions {
-      display: flex;
-      align-items: flex-start;
-      flex-direction: row-reverse;
-      justify-content: space-between;
-      height: $s-40;
-      .picker-btn {
-        @include buttonStyle;
-        @include flexCenter;
-        border-radius: $br-8;
-        background-color: transparent;
-        border: $s-1 solid transparent;
-        height: $s-20;
-        width: $s-20;
-        border-radius: $br-4;
-        padding: 0;
-        margin-top: $s-4;
-        svg {
-          @extend .button-icon;
-          stroke: var(--button-tertiary-foreground-color-rest);
-        }
-        &:hover {
-          svg {
-            stroke: var(--button-tertiary-foreground-color-focus);
-          }
-        }
-        &:focus,
-        &:focus-visible {
-          outline: none;
-          svg {
-            stroke: var(--button-secondary-foreground-color-hover);
-          }
-        }
-        &:active {
-          outline: none;
-          border: $s-1 solid transparent;
-          svg {
-            stroke: var(--button-tertiary-foreground-color-active);
-          }
-        }
-        &.selected {
-          svg {
-            stroke: var(--button-tertiary-foreground-color-active);
-          }
-        }
-      }
-      .gradient-buttons {
-        display: flex;
-        align-items: center;
-        gap: $s-8;
-        .gradient-btn {
-          @extend .button-tertiary;
-          height: $s-20;
-          width: $s-20;
-          border-radius: $br-4;
-          border: $s-2 solid transparent;
-          &:hover {
-            border: $s-2 solid var(--colorpicker-details-color-selected);
-          }
-        }
-        .linear-gradient-btn {
-          background: linear-gradient(180deg, var(--color-foreground-secondary), transparent);
-          &.selected {
-            background: linear-gradient(to bottom, rgba(126, 255, 245, 1) 0%, rgba(126, 255, 245, 0.2) 100%);
-            border: $s-2 solid var(--colorpicker-details-color-selected);
-          }
-        }
+}
 
-        .radial-gradient-btn {
-          background: radial-gradient(transparent, var(--color-foreground-secondary));
-          &.selected {
-            background: radial-gradient(rgba(126, 255, 245, 1) 0%, rgba(126, 255, 245, 0.2) 100%);
-            border: $s-2 solid var(--colorpicker-details-color-selected);
-          }
-        }
-      }
-    }
-    .actions {
-      display: flex;
-      gap: $s-4;
-      .accept-color {
-        @include tabTitleTipography;
-        @extend .button-secondary;
-        width: 100%;
-        height: $s-32;
-        margin-top: $s-8;
-      }
+.colorpicker {
+  border-radius: $br-8;
+  width: $s-260;
+  & > * {
+    width: $s-260;
+  }
+}
+
+.top-actions {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  height: $s-40;
+}
+
+.picker-btn {
+  @include buttonStyle;
+  @include flexCenter;
+  border-radius: $br-8;
+  background-color: transparent;
+  border: $s-1 solid transparent;
+  height: $s-20;
+  width: $s-20;
+  border-radius: $br-4;
+  padding: 0;
+  margin-top: $s-4;
+  svg {
+    @extend .button-icon;
+    stroke: var(--button-tertiary-foreground-color-rest);
+  }
+  &:hover {
+    svg {
+      stroke: var(--button-tertiary-foreground-color-focus);
     }
   }
-  .colorpicker-tabs {
-    .picker-detail-wrapper {
-      @include flexCenter;
-      position: relative;
-      margin: $s-12 0 $s-8 0;
-      .center-circle {
-        width: $s-24;
-        height: $s-24;
-        border: $s-2 solid var(--colorpicker-details-color);
-        border-radius: $br-circle;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(calc(-1 * $s-12), calc(-1 * $s-12));
-      }
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    svg {
+      stroke: var(--button-secondary-foreground-color-hover);
     }
   }
+  &:active {
+    outline: none;
+    border: $s-1 solid transparent;
+    svg {
+      stroke: var(--button-tertiary-foreground-color-active);
+    }
+  }
+  &.selected {
+    svg {
+      stroke: var(--button-tertiary-foreground-color-active);
+    }
+  }
+}
+
+.gradient-buttons {
+  display: flex;
+  align-items: center;
+  gap: $s-8;
+}
+
+.gradient-btn {
+  @extend .button-tertiary;
+  height: $s-20;
+  width: $s-20;
+  border-radius: $br-4;
+  border: $s-2 solid transparent;
+  &:hover {
+    border: $s-2 solid var(--colorpicker-details-color-selected);
+  }
+}
+
+.linear-gradient-btn {
+  background: linear-gradient(180deg, var(--color-foreground-secondary), transparent);
+  &.selected {
+    background: linear-gradient(to bottom, rgba(126, 255, 245, 1) 0%, rgba(126, 255, 245, 0.2) 100%);
+    border: $s-2 solid var(--colorpicker-details-color-selected);
+  }
+}
+
+.radial-gradient-btn {
+  background: radial-gradient(transparent, var(--color-foreground-secondary));
+  &.selected {
+    background: radial-gradient(rgba(126, 255, 245, 1) 0%, rgba(126, 255, 245, 0.2) 100%);
+    border: $s-2 solid var(--colorpicker-details-color-selected);
+  }
+}
+
+.actions {
+  display: flex;
+  gap: $s-4;
+}
+
+.accept-color {
+  @include tabTitleTipography;
+  @extend .button-secondary;
+  width: 100%;
+  height: $s-32;
+  margin-top: $s-8;
+}
+
+.picker-detail-wrapper {
+  @include flexCenter;
+  position: relative;
+  margin: $s-12 0 $s-8 0;
+}
+
+.center-circle {
+  width: $s-24;
+  height: $s-24;
+  border: $s-2 solid var(--colorpicker-details-color);
+  border-radius: $br-circle;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(calc(-1 * $s-12), calc(-1 * $s-12));
 }
 
 .select {
@@ -131,29 +139,31 @@
 
 .select-image {
   margin-top: $s-4;
-  .content {
-    border-radius: $br-8;
-    display: flex;
-    justify-content: center;
-    background-image: url("/images/colorpicker-no-image.png");
-    background-position: center;
-    background-size: auto $s-140;
-    height: $s-140;
-    margin-bottom: $s-6;
-    margin-right: $s-1;
-    img {
-      height: fit-content;
-      width: fit-content;
-      max-height: 100%;
-      max-width: 100%;
-      margin: auto;
-    }
-  }
-  .choose-image {
-    @extend .button-secondary;
-    @include tabTitleTipography;
-    width: 100%;
-    margin-top: $s-12;
-    height: $s-32;
+}
+
+.content {
+  border-radius: $br-8;
+  display: flex;
+  justify-content: center;
+  background-image: url("/images/colorpicker-no-image.png");
+  background-position: center;
+  background-size: auto $s-140;
+  height: $s-140;
+  margin-bottom: $s-6;
+  margin-right: $s-1;
+  img {
+    height: fit-content;
+    width: fit-content;
+    max-height: 100%;
+    max-width: 100%;
+    margin: auto;
   }
 }
+
+.choose-image {
+  @extend .button-secondary;
+  @include tabTitleTipography;
+  width: 100%;
+  margin-top: $s-12;
+  height: $s-32;
+}
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
index 4242861de..9764b4eae 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
@@ -8,7 +8,6 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
-   [app.main.ui.context :as ctx]
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
@@ -22,40 +21,22 @@
 
 (mf/defc gradients
   [{:keys [stops editing-stop on-select-stop]}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)]
-    (if new-css-system
-      [:div {:class (stl/css :gradient-stops)}
-       [:div {:class (stl/css :gradient-background-wrapper)}
-        [:div {:class (stl/css :gradient-background)
-               :style {:background (gradient->string stops)}}]]
+  [:div {:class (stl/css :gradient-stops)}
+   [:div {:class (stl/css :gradient-background-wrapper)}
+    [:div {:class (stl/css :gradient-background)
+           :style {:background (gradient->string stops)}}]]
 
-       [:div {:class (stl/css :gradient-stop-wrapper)}
-        (for [{:keys [offset hex r g b alpha] :as value} stops]
-          [:button {:class (stl/css-case :gradient-stop true
-                                         :selected (= editing-stop offset))
-                    :data-value offset
-                    :on-click on-select-stop
-                    :style {:left (dm/str (* offset 100) "%")
-                            :backgroundColor hex}
-                    :key (dm/str offset)}
+   [:div {:class (stl/css :gradient-stop-wrapper)}
+    (for [{:keys [offset hex r g b alpha] :as value} stops]
+      [:button {:class (stl/css-case :gradient-stop true
+                                     :selected (= editing-stop offset))
+                :data-value offset
+                :on-click on-select-stop
+                :style {:left (dm/str (* offset 100) "%")
+                        :backgroundColor hex}
+                :key (dm/str offset)}
 
-           [:div {:class (stl/css :gradient-stop-color)
-                  :style {:background-color hex}}]
-           [:div {:class (stl/css :gradient-stop-alpha)
-                  :style {:background-color (str/ffmt "rgba(%1, %2, %3, %4)" r g b alpha)}}]])]]
-
-      [:div.gradient-stops
-       [:div.gradient-background-wrapper
-        [:div.gradient-background {:style {:background (gradient->string stops)}}]]
-
-       [:div.gradient-stop-wrapper
-        (for [{:keys [offset hex r g b alpha] :as value} stops]
-          [:div.gradient-stop
-           {:class (when (= editing-stop offset) "active")
-            :data-value offset
-            :on-click on-select-stop
-            :style {:left (dm/str (* offset 100) "%")}
-            :key (dm/str offset)}
-
-           [:div.gradient-stop-color {:style {:background-color hex}}]
-           [:div.gradient-stop-alpha {:style {:background-color (str/ffmt "rgba(%1, %2, %3, %4)" r g b alpha)}}]])]])))
+       [:div {:class (stl/css :gradient-stop-color)
+              :style {:background-color hex}}]
+       [:div {:class (stl/css :gradient-stop-alpha)
+              :style {:background-color (str/ffmt "rgba(%1, %2, %3, %4)" r g b alpha)}}]])]])
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
index 78932650d..a9b4107ee 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
@@ -13,39 +13,41 @@
   margin: $s-12 0;
   background-color: var(--colorpicker-handlers-color);
   border-radius: $br-6;
+}
 
-  .gradient-background-wrapper {
-    height: 100%;
-    width: 100%;
-    border-radius: $br-6;
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
-      left center;
+.gradient-background-wrapper {
+  height: 100%;
+  width: 100%;
+  border-radius: $br-6;
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+    left center;
+}
 
-    .gradient-background {
-      height: 100%;
-      width: 100%;
-      border-radius: $br-6;
-      border: $s-2 solid var(--colorpicker-details-color);
-    }
-  }
-  .gradient-stop-wrapper {
-    position: absolute;
-    width: calc(100% - 2rem);
-    .gradient-stop {
-      position: absolute;
-      display: grid;
-      grid-template-columns: 50% 50%;
-      width: $s-16;
-      height: $s-24;
-      border-radius: $br-4;
-      margin-top: calc(-1 * $s-2);
-      margin-left: calc(-1 * $s-8);
-      border: $s-2 solid var(--colorpicker-handlers-color);
-      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
-        left center;
-      &.selected {
-        border: $s-2 solid var(--colorpicker-details-color-selected);
-      }
-    }
+.gradient-background {
+  height: 100%;
+  width: 100%;
+  border-radius: $br-6;
+  border: $s-2 solid var(--colorpicker-details-color);
+}
+
+.gradient-stop-wrapper {
+  position: absolute;
+  width: calc(100% - 2rem);
+}
+
+.gradient-stop {
+  position: absolute;
+  display: grid;
+  grid-template-columns: 50% 50%;
+  width: $s-16;
+  height: $s-24;
+  border-radius: $br-4;
+  margin-top: calc(-1 * $s-2);
+  margin-left: calc(-1 * $s-8);
+  border: $s-2 solid var(--colorpicker-handlers-color);
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+    left center;
+  &.selected {
+    border: $s-2 solid var(--colorpicker-details-color-selected);
   }
 }
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs b/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs
index 2bc19b28b..7ca720bd2 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs
@@ -10,7 +10,6 @@
    [app.common.colors :as cc]
    [app.common.geom.point :as gpt]
    [app.common.math :as mth]
-   [app.main.ui.context :as ctx]
    [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]
    [app.util.dom :as dom]
    [app.util.object :as obj]
@@ -59,11 +58,8 @@
     (gpt/point x y)))
 
 (mf/defc harmony-selector [{:keys [color disable-opacity on-change on-start-drag on-finish-drag]}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        canvas-ref     (mf/use-ref nil)
-        canvas-side    (if new-css-system
-                         192
-                         152)
+  (let [canvas-ref     (mf/use-ref nil)
+        canvas-side    192
         {hue :h saturation :s value :v alpha :alpha} color
 
         pos-current    (color->point canvas-side hue saturation)
@@ -128,83 +124,44 @@
      (mf/deps canvas-ref)
      (fn [] (when canvas-ref
               (create-color-wheel (mf/ref-val canvas-ref)))))
-    (if new-css-system
-      [:div {:class (stl/css :harmony-selector)}
-       [:div {:class (stl/css :handlers-wrapper)}
-        [:& slider-selector {:type :value
-                             :vertical? true
-                             :reverse? true
-                             :value value
-                             :max-value 255
-                             :vertical true
-                             :on-change on-change-value
-                             :on-start-drag on-start-drag
-                             :on-finish-drag on-finish-drag}]
-        (when (not disable-opacity)
-          [[:& slider-selector {:type :opacity
-                               :vertical? true
-                               :value alpha
-                               :max-value 1
-                               :vertical true
-                               :on-change on-change-opacity
-                               :on-start-drag on-start-drag
-                               :on-finish-drag on-finish-drag}]])]
+    [:div {:class (stl/css :harmony-selector)}
+     [:div {:class (stl/css :handlers-wrapper)}
+      [:& slider-selector {:type :value
+                           :vertical? true
+                           :reverse? true
+                           :value value
+                           :max-value 255
+                           :vertical true
+                           :on-change on-change-value
+                           :on-start-drag on-start-drag
+                           :on-finish-drag on-finish-drag}]
+      (when (not disable-opacity)
+        [[:& slider-selector {:type :opacity
+                              :vertical? true
+                              :value alpha
+                              :max-value 1
+                              :vertical true
+                              :on-change on-change-opacity
+                              :on-start-drag on-start-drag
+                              :on-finish-drag on-finish-drag}]])]
 
-       [:div {:class (stl/css :hue-wheel-wrapper)}
-        [:canvas {:class (stl/css :hue-wheel)
-                  :ref canvas-ref
-                  :width canvas-side
-                  :height canvas-side
-                  :on-pointer-down handle-start-drag
-                  :on-pointer-up handle-stop-drag
-                  :on-lost-pointer-capture handle-stop-drag
-                  :on-click calculate-pos
-                  :on-pointer-move #(when @dragging? (calculate-pos %))}]
-        [:div {:class (stl/css :handler)
-               :style {:pointer-events "none"
-                       :left (:x pos-current)
-                       :top (:y pos-current)}}]
-        [:div {:class (stl/css-case :handler true
-                                    :complement true)
-               :style {:left (:x pos-complement)
-                       :top (:y pos-complement)
-                       :cursor "pointer"}
-               :on-click on-complement-click}]]]
-
-      [:div.harmony-selector
-       [:div.hue-wheel-wrapper
-        [:canvas.hue-wheel
-         {:ref canvas-ref
-          :width canvas-side
-          :height canvas-side
-          :on-pointer-down handle-start-drag
-          :on-pointer-up handle-stop-drag
-          :on-lost-pointer-capture handle-stop-drag
-          :on-click calculate-pos
-          :on-pointer-move #(when @dragging? (calculate-pos %))}]
-        [:div.handler {:style {:pointer-events "none"
-                               :left (:x pos-current)
-                               :top (:y pos-current)}}]
-        [:div.handler.complement {:style {:left (:x pos-complement)
-                                          :top (:y pos-complement)
-                                          :cursor "pointer"}
-                                  :on-click on-complement-click}]]
-       [:div.handlers-wrapper
-        [:& slider-selector {:class "value"
-                             :vertical? true
-                             :reverse? true
-                             :value value
-                             :max-value 255
-                             :vertical true
-                             :on-change on-change-value
-                             :on-start-drag on-start-drag
-                             :on-finish-drag on-finish-drag}]
-        (when (not disable-opacity)
-          [:& slider-selector {:class "opacity"
-                               :vertical? true
-                               :value alpha
-                               :max-value 1
-                               :vertical true
-                               :on-change on-change-opacity
-                               :on-start-drag on-start-drag
-                               :on-finish-drag on-finish-drag}])]])))
+     [:div {:class (stl/css :hue-wheel-wrapper)}
+      [:canvas {:class (stl/css :hue-wheel)
+                :ref canvas-ref
+                :width canvas-side
+                :height canvas-side
+                :on-pointer-down handle-start-drag
+                :on-pointer-up handle-stop-drag
+                :on-lost-pointer-capture handle-stop-drag
+                :on-click calculate-pos
+                :on-pointer-move #(when @dragging? (calculate-pos %))}]
+      [:div {:class (stl/css :handler)
+             :style {:pointer-events "none"
+                     :left (:x pos-current)
+                     :top (:y pos-current)}}]
+      [:div {:class (stl/css-case :handler true
+                                  :complement true)
+             :style {:left (:x pos-complement)
+                     :top (:y pos-complement)
+                     :cursor "pointer"}
+             :on-click on-complement-click}]]]))
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss b/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss
index 15b9f54d5..04bc1d46a 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss
@@ -12,32 +12,33 @@
   gap: $s-8;
   margin-top: $s-12;
   margin-bottom: $s-8;
-  .hue-wheel-wrapper {
-    @include flexCenter;
-    position: relative;
-
-    .hue-wheel {
-      width: $s-196;
-      height: $s-196;
-    }
-
-    .handler {
-      @extend .colorpicker-handler;
-      height: $s-16;
-      width: $s-16;
-      border: $s-2 solid var(--colorpicker-handlers-color);
-    }
-
-    .handler.complement {
-      background-color: var(--colorpicker-handlers-color);
-      border: $s-2 solid var(--colorpicker-handlers-color);
-    }
-  }
-
-  .handlers-wrapper {
-    @include flexRow;
-    height: $s-200;
-    width: $s-52;
-    flex-grow: 1;
-  }
+}
+
+.hue-wheel-wrapper {
+  @include flexCenter;
+  position: relative;
+}
+
+.hue-wheel {
+  width: $s-196;
+  height: $s-196;
+}
+
+.handler {
+  @extend .colorpicker-handler;
+  height: $s-16;
+  width: $s-16;
+  border: $s-2 solid var(--colorpicker-handlers-color);
+}
+
+.handler.complement {
+  background-color: var(--colorpicker-handlers-color);
+  border: $s-2 solid var(--colorpicker-handlers-color);
+}
+
+.handlers-wrapper {
+  @include flexRow;
+  height: $s-200;
+  width: $s-52;
+  flex-grow: 1;
 }
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/hsva.cljs b/frontend/src/app/main/ui/workspace/colorpicker/hsva.cljs
index 923637114..cf4554b6e 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/hsva.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/hsva.cljs
@@ -8,13 +8,11 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.colors :as cc]
-   [app.main.ui.context :as ctx]
    [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]
    [rumext.v2 :as mf]))
 
 (mf/defc hsva-selector [{:keys [color disable-opacity on-change on-start-drag on-finish-drag]}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        {hue :h saturation :s value :v alpha :alpha} color
+  (let [{hue :h saturation :s value :v alpha :alpha} color
         handle-change-slider (fn [key]
                                (fn [new-value]
                                  (let [change (hash-map key new-value)
@@ -25,87 +23,46 @@
                                                      {:hex hex
                                                       :r r :g g :b b})))))
         on-change-opacity (fn [new-alpha] (on-change {:alpha new-alpha}))]
-    (if new-css-system
-      [:div {:class (stl/css :hsva-selector)}
+    [:div {:class (stl/css :hsva-selector)}
+     [:div {:class (stl/css :hsva-row)}
+      [:span {:class (stl/css :hsva-selector-label)} "H"]
+      [:& slider-selector
+       {:class (stl/css :hsva-bar)
+        :type :hue
+        :max-value 360
+        :value hue
+        :on-change (handle-change-slider :h)
+        :on-start-drag on-start-drag
+        :on-finish-drag on-finish-drag}]]
+     [:div {:class (stl/css :hsva-row)}
+      [:span {:class (stl/css :hsva-selector-label)} "S"]
+      [:& slider-selector
+       {:class (stl/css :hsva-bar)
+        :type :saturation
+        :max-value 1
+        :value saturation
+        :on-change (handle-change-slider :s)
+        :on-start-drag on-start-drag
+        :on-finish-drag on-finish-drag}]]
+     [:div {:class (stl/css :hsva-row)}
+      [:span {:class (stl/css :hsva-selector-label)} "V"]
+      [:& slider-selector
+       {:class (stl/css :hsva-bar)
+        :type :value
+        :reverse? false
+        :max-value 255
+        :value value
+        :on-change (handle-change-slider :v)
+        :on-start-drag on-start-drag
+        :on-finish-drag on-finish-drag}]]
+     (when (not disable-opacity)
        [:div {:class (stl/css :hsva-row)}
-        [:span {:class (stl/css :hsva-selector-label)} "H"]
+        [:span {:class (stl/css :hsva-selector-label)} "A"]
         [:& slider-selector
          {:class (stl/css :hsva-bar)
-          :type :hue
-          :max-value 360
-          :value hue
-          :on-change (handle-change-slider :h)
-          :on-start-drag on-start-drag
-          :on-finish-drag on-finish-drag}]]
-       [:div {:class (stl/css :hsva-row)}
-        [:span {:class (stl/css :hsva-selector-label)} "S"]
-        [:& slider-selector
-         {:class (stl/css :hsva-bar)
-          :type :saturation
+          :type :opacity
           :max-value 1
-          :value saturation
-          :on-change (handle-change-slider :s)
+          :value alpha
+          :on-change on-change-opacity
           :on-start-drag on-start-drag
-          :on-finish-drag on-finish-drag}]]
-       [:div {:class (stl/css :hsva-row)}
-        [:span {:class (stl/css :hsva-selector-label)} "V"]
-        [:& slider-selector
-         {:class (stl/css :hsva-bar)
-          :type :value
-          :reverse? false
-          :max-value 255
-          :value value
-          :on-change (handle-change-slider :v)
-          :on-start-drag on-start-drag
-          :on-finish-drag on-finish-drag}]]
-       (when (not disable-opacity)
-         [:div {:class (stl/css :hsva-row)}
-          [:span {:class (stl/css :hsva-selector-label)} "A"]
-          [:& slider-selector
-           {:class (stl/css :hsva-bar)
-            :type :opacity
-            :max-value 1
-            :value alpha
-            :on-change on-change-opacity
-            :on-start-drag on-start-drag
-            :on-finish-drag on-finish-drag}]])]
-
-      [:div.hsva-selector
-       [:span.hsva-selector-label "H"]
-       [:& slider-selector
-        {:class "hue"
-         :max-value 360
-         :value hue
-         :on-change (handle-change-slider :h)
-         :on-start-drag on-start-drag
-         :on-finish-drag on-finish-drag}]
-
-       [:span.hsva-selector-label "S"]
-       [:& slider-selector
-        {:class "saturation"
-         :max-value 1
-         :value saturation
-         :on-change (handle-change-slider :s)
-         :on-start-drag on-start-drag
-         :on-finish-drag on-finish-drag}]
-       [:span.hsva-selector-label "V"]
-       [:& slider-selector
-        {:class "value"
-         :reverse? false
-         :max-value 255
-         :value value
-         :on-change (handle-change-slider :v)
-         :on-start-drag on-start-drag
-         :on-finish-drag on-finish-drag}]
-
-       (when (not disable-opacity)
-         [:*
-          [:span.hsva-selector-label "A"]
-          [:& slider-selector
-           {:class "opacity"
-            :max-value 1
-            :value alpha
-            :on-change on-change-opacity
-            :on-start-drag on-start-drag
-            :on-finish-drag on-finish-drag}]])])
-    ))
+          :on-finish-drag on-finish-drag}]])]))
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss b/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss
index 03e2d66b6..be13a492b 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss
@@ -11,18 +11,21 @@
   padding: $s-4;
   grid-row-gap: $s-8;
   margin-bottom: $s-8;
-  .hsva-row {
-    display: flex;
-    align-items: center;
-    .hsva-selector-label {
-      @include tabTitleTipography;
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      width: $s-32;
-    }
-    .hsva-bar {
-      width: $s-228;
-    }
-  }
+}
+
+.hsva-row {
+  display: flex;
+  align-items: center;
+}
+
+.hsva-selector-label {
+  @include tabTitleTipography;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: $s-32;
+}
+
+.hsva-bar {
+  width: $s-228;
 }
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
index d184ba8b4..5970835a0 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
@@ -14,10 +14,8 @@
    [app.main.data.workspace.colors :as mdc]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.color-bullet :refer [color-bullet]]
    [app.main.ui.components.color-bullet-new :as cb]
    [app.main.ui.components.select :refer [select]]
-   [app.main.ui.context :as ctx]
    [app.main.ui.hooks :as h]
    [app.main.ui.hooks.resize :as r]
    [app.main.ui.icons :as i]
@@ -28,8 +26,7 @@
 
 (mf/defc libraries
   [{:keys [state on-select-color on-add-library-color disable-gradient disable-opacity  disable-image]}]
-  (let [new-css-system   (mf/use-ctx ctx/new-css-system)
-        selected         (h/use-shared-state mdc/colorpicker-selected-broadcast-key :recent)
+  (let [selected         (h/use-shared-state mdc/colorpicker-selected-broadcast-key :recent)
         current-colors   (mf/use-state [])
 
         shared-libs      (mf/deref refs/workspace-libraries)
@@ -40,14 +37,11 @@
         on-library-change
         (mf/use-fn
          (fn [event]
-           (let [val (if new-css-system
-                       event
-                       (dom/get-target-val event))]
-             (reset! selected
-                     (if (or (= val "recent")
-                             (= val "file"))
-                       (keyword val)
-                       (parse-uuid val))))))
+           (reset! selected
+                   (if (or (= event "recent")
+                           (= event "file"))
+                     (keyword event)
+                     (parse-uuid event)))))
 
         check-valid-color?
         (fn [color]
@@ -103,59 +97,26 @@
         (let [colors (vals file-colors)]
           (reset! current-colors (into [] (filter check-valid-color?) colors)))))
 
-    (if new-css-system
-      [:div {:class (stl/css :libraries)}
-       [:div {:class (stl/css :select-wrapper)}
-        [:& select
-         {:class (stl/css :shadow-type-select)
-          :default-value (or (name @selected) "recent")
-          :options options
-          :on-change on-library-change}]]
+    [:div {:class (stl/css :libraries)}
+     [:div {:class (stl/css :select-wrapper)}
+      [:& select
+       {:class (stl/css :shadow-type-select)
+        :default-value (or (name @selected) "recent")
+        :options options
+        :on-change on-library-change}]]
 
-       [:div {:class (stl/css :selected-colors)}
-        (when (= @selected :file)
-          [:button {:class (stl/css :add-color-btn)
-                    :on-click on-add-library-color}
-           i/add-refactor])
+     [:div {:class (stl/css :selected-colors)}
+      (when (= @selected :file)
+        [:button {:class (stl/css :add-color-btn)
+                  :on-click on-add-library-color}
+         i/add-refactor])
 
-        [:button {:class (stl/css :palette-btn)
-                  :on-click toggle-palette}
-         i/swatches-refactor]
+      [:button {:class (stl/css :palette-btn)
+                :on-click toggle-palette}
+       i/swatches-refactor]
 
-        (for [[idx color] (map-indexed vector @current-colors)]
-          [:& cb/color-bullet
-           {:key (dm/str "color-" idx)
-            :color color
-            :on-click on-color-click}])]]
-
-
-      [:div.libraries
-       [:select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
-                 :on-change on-library-change
-                 :value (name @selected)}
-        [:option {:value "recent"} (tr "workspace.libraries.colors.recent-colors")]
-        [:option {:value "file"} (tr "workspace.libraries.colors.file-library")]
-
-        (for [[_ {:keys [name id]}] shared-libs]
-          [:option {:key id :value id} name])]
-
-       [:div.selected-colors
-        (when (= @selected :file)
-          [:div.color-bullet.button.plus-button {:style {:background-color "var(--color-white)"}
-                                                 :on-click on-add-library-color}
-           i/plus])
-
-        [:div.color-bullet.button {:style {:background-color "var(--color-white)"}
-                                   :on-click (fn []
-                                               (r/set-resize-type! :bottom)
-                                               (dom/add-class!  (dom/get-element-by-class "color-palette") "fade-out-down")
-                                               (ts/schedule 300 #(st/emit! (dw/remove-layout-flag :textpalette)
-                                                                           (-> (dw/toggle-layout-flag :colorpalette)
-                                                                               (vary-meta assoc ::ev/origin "workspace-colorpicker")))))}
-         i/palette]
-
-        (for [[idx color] (map-indexed vector @current-colors)]
-          [:& color-bullet
-           {:key (dm/str "color-" idx)
-            :color color
-            :on-click on-color-click}])]])))
+      (for [[idx color] (map-indexed vector @current-colors)]
+        [:& cb/color-bullet
+         {:key (dm/str "color-" idx)
+          :color color
+          :on-click on-color-click}])]]))
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss b/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss
index 483aa2bae..63a0f8398 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss
@@ -9,32 +9,34 @@
 .libraries {
   margin-top: $s-8;
   width: 100%;
+}
 
-  .selected-colors {
-    display: grid;
-    grid-template-columns: repeat(8, 1fr);
-    gap: $s-4;
-    justify-content: space-between;
-    overflow: auto;
-    margin-top: $s-8;
-    .add-color-btn,
-    .palette-btn {
-      @extend .button-secondary;
-      height: $s-24;
-      width: $s-24;
-      border-radius: $br-circle;
-      padding: 0;
-      svg {
-        @extend .button-icon;
-      }
-    }
-  }
-  .selected-colors::after {
-    content: "";
-    flex: auto;
-  }
+.selected-colors {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: $s-4;
+  justify-content: space-between;
+  overflow: auto;
+  margin-top: $s-8;
+}
 
-  .select-wrapper {
-    overflow: initial;
+.add-color-btn,
+.palette-btn {
+  @extend .button-secondary;
+  height: $s-24;
+  width: $s-24;
+  border-radius: $br-circle;
+  padding: 0;
+  svg {
+    @extend .button-icon;
   }
 }
+
+.selected-colors::after {
+  content: "";
+  flex: auto;
+}
+
+.select-wrapper {
+  overflow: initial;
+}
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs b/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs
index 4063c4015..8b5ee82a3 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs
@@ -9,16 +9,13 @@
   (:require
    [app.common.colors :as cc]
    [app.common.math :as mth]
-   [app.main.ui.components.color-bullet :refer [color-bullet]]
    [app.main.ui.components.color-bullet-new :as cb]
-   [app.main.ui.context :as ctx]
    [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
 (mf/defc value-saturation-selector [{:keys [saturation value on-change on-start-drag on-finish-drag]}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        dragging? (mf/use-state false)
+  (let [dragging? (mf/use-state false)
         calculate-pos
         (fn [ev]
           (let [{:keys [left right top bottom]} (-> ev dom/get-target dom/get-bounding-rect)
@@ -42,32 +39,20 @@
            (dom/release-pointer event)
            (reset! dragging? false)
            (on-finish-drag)))]
-    (if new-css-system
-      [:div {:class (stl/css :value-saturation-selector)
-             :on-pointer-down handle-start-drag
-             :on-pointer-up handle-stop-drag
-             :on-lost-pointer-capture handle-stop-drag
-             :on-click calculate-pos
-             :on-pointer-move #(when @dragging? (calculate-pos %))}
-       [:div {:class (stl/css :handler)
-              :style {:pointer-events "none"
-                      :left (str (* 100 saturation) "%")
-                      :top (str (* 100 (- 1 (/ value 255))) "%")}}]]
-
-      [:div.value-saturation-selector
-       {:on-pointer-down handle-start-drag
-        :on-pointer-up handle-stop-drag
-        :on-lost-pointer-capture handle-stop-drag
-        :on-click calculate-pos
-        :on-pointer-move #(when @dragging? (calculate-pos %))}
-       [:div.handler {:style {:pointer-events "none"
-                              :left (str (* 100 saturation) "%")
-                              :top (str (* 100 (- 1 (/ value 255))) "%")}}]])))
+    [:div {:class (stl/css :value-saturation-selector)
+           :on-pointer-down handle-start-drag
+           :on-pointer-up handle-stop-drag
+           :on-lost-pointer-capture handle-stop-drag
+           :on-click calculate-pos
+           :on-pointer-move #(when @dragging? (calculate-pos %))}
+     [:div {:class (stl/css :handler)
+            :style {:pointer-events "none"
+                    :left (str (* 100 saturation) "%")
+                    :top (str (* 100 (- 1 (/ value 255))) "%")}}]]))
 
 
 (mf/defc ramp-selector [{:keys [color disable-opacity on-change on-start-drag on-finish-drag]}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        {hex :hex
+  (let [{hex :hex
          hue :h saturation :s value :v alpha :alpha} color
 
         on-change-value-saturation
@@ -90,60 +75,32 @@
         on-change-opacity
         (fn [new-opacity]
           (on-change {:alpha new-opacity}))]
-    (if new-css-system
-      [:*
-       [:& value-saturation-selector
-        {:hue hue
-         :saturation saturation
-         :value value
-         :on-change on-change-value-saturation
-         :on-start-drag on-start-drag
-         :on-finish-drag on-finish-drag}]
+    [:*
+     [:& value-saturation-selector
+      {:hue hue
+       :saturation saturation
+       :value value
+       :on-change on-change-value-saturation
+       :on-start-drag on-start-drag
+       :on-finish-drag on-finish-drag}]
 
-       [:div {:class (stl/css new-css-system :shade-selector)
-              :style #js {"--bullet-size" "52px"}}
-        [:& cb/color-bullet {:color {:color hex
-                                     :opacity alpha}
-                             :area true}]
-        [:div {:class (stl/css :sliders-wrapper)}
-         [:& slider-selector {:type :hue
-                              :max-value 360
-                              :value hue
-                              :on-change on-change-hue
+     [:div {:class (stl/css :shade-selector)
+            :style #js {"--bullet-size" "52px"}}
+      [:& cb/color-bullet {:color {:color hex
+                                   :opacity alpha}
+                           :area true}]
+      [:div {:class (stl/css :sliders-wrapper)}
+       [:& slider-selector {:type :hue
+                            :max-value 360
+                            :value hue
+                            :on-change on-change-hue
+                            :on-start-drag on-start-drag
+                            :on-finish-drag on-finish-drag}]
+
+       (when (not disable-opacity)
+         [:& slider-selector {:type :opacity
+                              :max-value 1
+                              :value alpha
+                              :on-change on-change-opacity
                               :on-start-drag on-start-drag
-                              :on-finish-drag on-finish-drag}]
-
-         (when (not disable-opacity)
-           [:& slider-selector {:type :opacity
-                                :max-value 1
-                                :value alpha
-                                :on-change on-change-opacity
-                                :on-start-drag on-start-drag
-                                :on-finish-drag on-finish-drag}])]]]
-
-      [:*
-       [:& value-saturation-selector
-        {:hue hue
-         :saturation saturation
-         :value value
-         :on-change on-change-value-saturation
-         :on-start-drag on-start-drag
-         :on-finish-drag on-finish-drag}]
-
-       [:div.shade-selector
-        [:& color-bullet {:color {:color hex
-                                  :opacity alpha}}]
-        [:& slider-selector {:class "hue"
-                             :max-value 360
-                             :value hue
-                             :on-change on-change-hue
-                             :on-start-drag on-start-drag
-                             :on-finish-drag on-finish-drag}]
-
-        (when (not disable-opacity)
-          [:& slider-selector {:class "opacity"
-                               :max-value 1
-                               :value alpha
-                               :on-change on-change-opacity
-                               :on-start-drag on-start-drag
-                               :on-finish-drag on-finish-drag}])]])))
+                              :on-finish-drag on-finish-drag}])]]]))
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss b/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss
index 450dcd9e5..512739d8f 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss
@@ -15,13 +15,6 @@
   margin-bottom: $s-12;
   cursor: pointer;
 
-  .handler {
-    @extend .colorpicker-handler;
-    height: $s-16;
-    width: $s-16;
-    border: $s-2 solid var(--colorpicker-handlers-color);
-  }
-
   &::before {
     content: "";
     position: absolute;
@@ -38,12 +31,21 @@
     background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
   }
 }
+
+.handler {
+  @extend .colorpicker-handler;
+  height: $s-16;
+  width: $s-16;
+  border: $s-2 solid var(--colorpicker-handlers-color);
+}
+
 .shade-selector {
   display: flex;
   gap: $s-4;
   height: $s-52;
   cursor: pointer;
 }
+
 .sliders-wrapper {
   @include flexColumn;
 }
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs
index ddf475744..1fa07db8a 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs
@@ -9,15 +9,13 @@
   (:require
    [app.common.data.macros :as dm]
    [app.common.math :as mth]
-   [app.main.ui.context :as ctx]
    [app.util.dom :as dom]
    [app.util.object :as obj]
    [rumext.v2 :as mf]))
 
 (mf/defc slider-selector
   [{:keys [value class min-value max-value vertical? reverse? on-change on-start-drag on-finish-drag type]}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        min-value (or min-value 0)
+  (let [min-value (or min-value 0)
         max-value (or max-value 1)
         dragging? (mf/use-state false)
 
@@ -53,49 +51,27 @@
                   value (+ min-value (* unit-value (- max-value min-value)))]
               (on-change value))))]
 
-    (if new-css-system
-      [:div {:class (stl/css-case :opacity-wrapper (= type :opacity))}
-       [:div {:class (dm/str class (stl/css-case :vertical vertical?
-                                                :slider-selector true
-                                                :hue (= type :hue)
-                                                :opacity (= type :opacity)
-                                                :value (= type :value)))
-             :on-pointer-down handle-start-drag
-             :on-pointer-up handle-stop-drag
-             :on-lost-pointer-capture handle-stop-drag
-             :on-click calculate-pos
-             :on-pointer-move #(when @dragging? (calculate-pos %))}
-       (let [value-percent (* (/ (- value min-value)
-                                 (- max-value min-value)) 100)
+    [:div {:class (stl/css-case :opacity-wrapper (= type :opacity))}
+     [:div {:class (dm/str class (stl/css-case :vertical vertical?
+                                               :slider-selector true
+                                               :hue (= type :hue)
+                                               :opacity (= type :opacity)
+                                               :value (= type :value)))
+            :on-pointer-down handle-start-drag
+            :on-pointer-up handle-stop-drag
+            :on-lost-pointer-capture handle-stop-drag
+            :on-click calculate-pos
+            :on-pointer-move #(when @dragging? (calculate-pos %))}
+      (let [value-percent (* (/ (- value min-value)
+                                (- max-value min-value)) 100)
 
-             value-percent (if reverse?
-                             (mth/abs (- value-percent 100))
-                             value-percent)
-             value-percent-str (str value-percent "%")
+            value-percent (if reverse?
+                            (mth/abs (- value-percent 100))
+                            value-percent)
+            value-percent-str (str value-percent "%")
 
-             style-common #js {:pointerEvents "none"}
-             style-horizontal (obj/merge! #js {:left value-percent-str} style-common)
-             style-vertical   (obj/merge! #js {:bottom value-percent-str} style-common)]
-         [:div {:class (stl/css :handler)
-                :style (if vertical? style-vertical style-horizontal)}])]]
-
-      [:div.slider-selector
-       {:class (str (if vertical? "vertical " "") class)
-        :on-pointer-down handle-start-drag
-        :on-pointer-up handle-stop-drag
-        :on-lost-pointer-capture handle-stop-drag
-        :on-click calculate-pos
-        :on-pointer-move #(when @dragging? (calculate-pos %))}
-
-       (let [value-percent (* (/ (- value min-value)
-                                 (- max-value min-value)) 100)
-
-             value-percent (if reverse?
-                             (mth/abs (- value-percent 100))
-                             value-percent)
-             value-percent-str (str value-percent "%")
-
-             style-common #js {:pointerEvents "none"}
-             style-horizontal (obj/merge! #js {:left value-percent-str} style-common)
-             style-vertical   (obj/merge! #js {:bottom value-percent-str} style-common)]
-         [:div.handler {:style (if vertical? style-vertical style-horizontal)}])])))
+            style-common #js {:pointerEvents "none"}
+            style-horizontal (obj/merge! #js {:left value-percent-str} style-common)
+            style-vertical   (obj/merge! #js {:bottom value-percent-str} style-common)]
+        [:div {:class (stl/css :handler)
+               :style (if vertical? style-vertical style-horizontal)}])]]))