💄 Adds new UI elements files and visual changes

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -316,6 +316,7 @@
 
 .menu-dropdown {
   @include menuShadow;
+  color: var(--title-foreground-color-hover);
   display: flex;
   flex-direction: column;
   gap: $s-4;

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -128,7 +128,7 @@
   --pill-foreground-color: var(--color-foreground-primary);
 
   --menu-background-color: var(--color-background-tertiary);
-  --menu-foreground-color: var(--color-foreground-secondary);
+  --menu-foreground-color: var(--color-foreground-primary);
   --menu-background-color-selected: var(--color-background-tertiary);
   --menu-foreground-color-selected: var(--color-foreground-primary);
   --menu-background-color-hover: var(--color-background-quaternary);
@@ -175,7 +175,7 @@
   --assets-component-background-color: var(--white); // We don't want this color to change with palette
 
   --radio-btns-background-color: var(--color-background-tertiary);
-  --radio-btn-background-color-selected: var(--color-background-primary);
+  --radio-btn-background-color-selected: var(--color-background-quaternary);
   --radio-btn-foreground-color: var(--color-foreground-secondary);
   --radio-btn-foreground-color-selected: var(--color-accent-primary);
   --radio-btn-border-color-selected: var(--color-background-quaternary);

frontend/src/app/main/ui/components/radio_buttons.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.main.ui.formats :as fmt]
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
@@ -138,7 +139,6 @@
                :decode-fn decode-fn})]
 
     [:& (mf/provider context) {:value context-value}
-     [:div {:class (stl/css-case :radio-btn-wrapper true
+     [:div {:class (dm/str class " " (stl/css :radio-btn-wrapper))
-                                 class true)
             :style {:width width}}
       children]]))

frontend/src/app/main/ui/components/radio_buttons.scss

@@ -17,7 +17,7 @@
   height: $s-28;
   flex-grow: 1;
   border-radius: $s-6;
-  border: solid $s-2 transparent;
+  border: solid $s-1 transparent;
   box-sizing: content-box;
   input {
     display: none;

frontend/src/app/main/ui/components/tab_container.scss

@@ -28,6 +28,7 @@
   height: $s-32;
   border-radius: $br-8;
   background: var(--color-background-secondary);
+  padding: $s-2;
   cursor: pointer;
   font-size: $fs12;
   .tab-container-tab-wrapper {

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

@@ -127,7 +127,8 @@
     @extend .menu-dropdown;
     position: absolute;
     left: calc(var(--width, $s-256) + $s-180);
-    width: 270px;
+    min-width: 270px;
+    width: 110%;
     .shortcut {
       @extend .shortcut;
     }

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

@@ -12,6 +12,7 @@
   flex-direction: column;
   width: 100%;
   padding-left: $s-12;
+
   .tab-spacing {
     margin-right: $s-12;
     margin-bottom: $s-16;

frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs

@@ -94,6 +94,7 @@
         [:div {:class (stl/css :boolean-options)}
          [:div {:class (stl/css :bool-group)}
           [:& radio-buttons {:selected (d/name head-bool-type)
+                             :class (stl/css :boolean-radio-btn)
                              :on-change set-bool-refactor
                              :name "bool-options"}
            [:& radio-button {:icon i/boolean-union-refactor

frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.css.json

@@ -1 +1 @@
-{"button-primary":"menus_bool_button-primary_OZ9LY","button-secondary":"menus_bool_button-secondary_XAFBl","button-tertiary":"menus_bool_button-tertiary_YQhEH","boolean-options":"menus_bool_boolean-options_Yq7h2","bool-group":"menus_bool_bool-group_eJQaa","flatten":"menus_bool_flatten_Mx-oM","button-radio":"menus_bool_button-radio_WaRtW","button-warning":"menus_bool_button-warning_3dgn5","button-disabled":"menus_bool_button-disabled_uItqB","button-tag":"menus_bool_button-tag_FX2MF","button-icon":"menus_bool_button-icon_O1hdU","button-icon-small":"menus_bool_button-icon-small_NE9w7","link":"menus_bool_link_YleIO","asset-element":"menus_bool_asset-element_AOtGG","input-element":"menus_bool_input-element_r4K6y","new-scrollbar":"menus_bool_new-scrollbar_9D-29","menu-dropdown":"menus_bool_menu-dropdown_ghGsu","menu-item":"menus_bool_menu-item_PBOy4","shortcut":"menus_bool_shortcut_CzGpH","shortcut-key":"menus_bool_shortcut-key_6ESUj","user-icon":"menus_bool_user-icon_u8tS1","disabled":"menus_bool_disabled_Q2PTU","spin-animation":"menus_bool_spin-animation_uXbpx"}
+{"button-primary":"menus_bool_button-primary_OZ9LY","button-secondary":"menus_bool_button-secondary_XAFBl","button-tertiary":"menus_bool_button-tertiary_YQhEH","boolean-options":"menus_bool_boolean-options_Yq7h2","bool-group":"menus_bool_bool-group_eJQaa","flatten":"menus_bool_flatten_Mx-oM","button-radio":"menus_bool_button-radio_WaRtW","button-warning":"menus_bool_button-warning_3dgn5","button-disabled":"menus_bool_button-disabled_uItqB","button-tag":"menus_bool_button-tag_FX2MF","button-icon":"menus_bool_button-icon_O1hdU","button-icon-small":"menus_bool_button-icon-small_NE9w7","link":"menus_bool_link_YleIO","asset-element":"menus_bool_asset-element_AOtGG","input-element":"menus_bool_input-element_r4K6y","new-scrollbar":"menus_bool_new-scrollbar_9D-29","menu-dropdown":"menus_bool_menu-dropdown_ghGsu","menu-item":"menus_bool_menu-item_PBOy4","shortcut":"menus_bool_shortcut_CzGpH","shortcut-key":"menus_bool_shortcut-key_6ESUj","user-icon":"menus_bool_user-icon_u8tS1","disabled":"menus_bool_disabled_Q2PTU","boolean-radio-btn":"menus_bool_boolean-radio-btn_EChGS","spin-animation":"menus_bool_spin-animation_uXbpx"}

frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss

@@ -36,5 +36,8 @@
         }
       }
     }
+    .boolean-radio-btn {
+      background-color: transparent;
+    }
   }
 }

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss

@@ -8,8 +8,9 @@
 
 .element-set {
   .element-title {
+    margin-right: $s-12;
     .title-spacing-layout {
-      margin: 0 0 $s-4 0;
+      margin: 0;
     }
 
     .title-actions {
@@ -39,6 +40,7 @@
       display: flex;
       gap: $s-4;
       margin-bottom: $s-12;
+      margin-top: $s-4;
       .wrap-button {
         @extend .button-tertiary;
         border-radius: $br-8;

frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs

@@ -5,10 +5,12 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.sidebar.options.shapes.group
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
    [app.common.types.shape.layout :as ctl]
    [app.main.refs :as refs]
+   [app.main.ui.context :as ctx]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
    [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]]
@@ -31,7 +33,8 @@
   {::mf/wrap [mf/memo]
    ::mf/wrap-props false}
   [props]
-  (let [shape                    (unchecked-get props "shape")
+  (let [new-css-system           (mf/use-ctx ctx/new-css-system)
+        shape                    (unchecked-get props "shape")
         shape-with-children      (unchecked-get props "shape-with-children")
         shared-libs              (unchecked-get props "shared-libs")
         objects                  (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
@@ -66,7 +69,9 @@
         [comp-ids       comp-values]         [[(:id shape)] (select-keys shape component-attrs)]
         [layout-item-ids layout-item-values] (get-attrs [shape] objects :layout-item)]
 
-    [:div.options
+
+    [:div {:class (stl/css-case new-css-system
+                                :options true)}
      [:& layer-menu {:type type :ids layer-ids :values layer-values}]
      [:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}]
      [:& component-menu {:ids comp-ids :values comp-values :shape shape}] ;;remove this in components-v2
@@ -90,8 +95,6 @@
      (when (or (not is-layout-child?) is-layout-child-absolute?)
        [:& constraints-menu {:ids constraint-ids :values constraint-values}])
 
-
-
      (when-not (empty? fill-ids)
        [:& fill-menu {:type type :ids fill-ids :values fill-values}])
 

frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.css.json

@@ -0,0 +1 @@
+{"button-primary":"shapes_group_button-primary_3YsFJ","button-secondary":"shapes_group_button-secondary_5w8ZE","button-tertiary":"shapes_group_button-tertiary_oGyWP","button-radio":"shapes_group_button-radio_sN6Iu","button-warning":"shapes_group_button-warning_3T5ny","button-disabled":"shapes_group_button-disabled_Sne1l","button-tag":"shapes_group_button-tag_MiHvW","button-icon":"shapes_group_button-icon_2kU9k","button-icon-small":"shapes_group_button-icon-small_FsVta","link":"shapes_group_link_JwvvK","asset-element":"shapes_group_asset-element_--UYW","input-element":"shapes_group_input-element_71Yj6","new-scrollbar":"shapes_group_new-scrollbar_CkPdN","menu-dropdown":"shapes_group_menu-dropdown_6SUZA","menu-item":"shapes_group_menu-item_HiCsN","shortcut":"shapes_group_shortcut_fEK4X","shortcut-key":"shapes_group_shortcut-key_6bTeI","user-icon":"shapes_group_user-icon_IryZR","options":"shapes_group_options_s7fvt","spin-animation":"shapes_group_spin-animation_ObWj0"}

frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.scss

@@ -0,0 +1,14 @@
+// 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
+
+@import "refactor/common-refactor.scss";
+
+.options {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: $s-16;
+}

frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs

@@ -5,6 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.sidebar.options.shapes.multiple
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.common.attrs :as attrs]
    [app.common.data :as d]
@@ -14,6 +15,7 @@
    [app.common.types.shape.layout :as ctl]
    [app.main.data.workspace.texts :as dwt]
    [app.main.refs :as refs]
+   [app.main.ui.context :as ctx]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-attrs blur-menu]]
    [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]]
@@ -264,7 +266,8 @@
   {::mf/wrap [#(mf/memo' % (mf/check-props ["shapes" "shapes-with-children" "page-id" "file-id"]))]
    ::mf/wrap-props false}
   [props]
-  (let [shapes (unchecked-get props "shapes")
+  (let [new-css-system       (mf/use-ctx ctx/new-css-system)
+        shapes               (unchecked-get props "shapes")
         shapes-with-children (unchecked-get props "shapes-with-children")
 
         ;; remove children from bool shapes
@@ -339,10 +342,10 @@
              (get-attrs shapes objects-no-measures :stroke)
              (get-attrs shapes objects-no-measures :exports)
              (get-attrs shapes objects-no-measures :layout-container)
-             (get-attrs shapes objects-no-measures :layout-item)
+             (get-attrs shapes objects-no-measures :layout-item)])))]
-             ])))]
 
-    [:div.options
+    [:div {:class (stl/css-case new-css-system
+                                :options true)}
      (when-not (empty? layer-ids)
        [:& layer-menu {:type type :ids layer-ids :values layer-values}])
 
@@ -364,7 +367,6 @@
      (when-not (or (empty? constraint-ids) is-layout-child?)
        [:& constraints-menu {:ids constraint-ids :values constraint-values}])
 
-
      (when-not (empty? text-ids)
        [:& ot/text-menu {:type type :ids text-ids :values text-values}])
 

frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.css.json

@@ -0,0 +1 @@
+{"button-primary":"shapes_multiple_button-primary_tBxly","button-secondary":"shapes_multiple_button-secondary_Zdbm7","button-tertiary":"shapes_multiple_button-tertiary_Jm9gZ","button-radio":"shapes_multiple_button-radio_8704N","button-warning":"shapes_multiple_button-warning_Wll0q","button-disabled":"shapes_multiple_button-disabled_s7vii","button-tag":"shapes_multiple_button-tag_-XskF","button-icon":"shapes_multiple_button-icon_abpuP","button-icon-small":"shapes_multiple_button-icon-small_CKGK-","link":"shapes_multiple_link_cW5PS","asset-element":"shapes_multiple_asset-element_-uz8i","input-element":"shapes_multiple_input-element_hEvdj","new-scrollbar":"shapes_multiple_new-scrollbar_KNebV","menu-dropdown":"shapes_multiple_menu-dropdown_VPG-P","menu-item":"shapes_multiple_menu-item_ujp5B","shortcut":"shapes_multiple_shortcut_qvN33","shortcut-key":"shapes_multiple_shortcut-key_QPNHs","user-icon":"shapes_multiple_user-icon_C6b9g","options":"shapes_multiple_options_wIEW5","spin-animation":"shapes_multiple_spin-animation_J799p"}

frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.scss

@@ -0,0 +1,14 @@
+// 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
+
+@import "refactor/common-refactor.scss";
+
+.options {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: $s-16;
+}