Merge pull request #5181 from penpot/luis-replace-icon-buttons-workspace

♻️ Replace buttons on workspace

frontend/src/app/main/ui/comments.cljs

@@ -17,6 +17,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -335,9 +336,10 @@
                                        :global/checked (:is-resolved thread))} i/tick]])
 
        (when (= (:id profile) (:id owner))
-         [:div {:class (stl/css :options)
+         [:> icon-button* {:variant "ghost"
-                :on-click on-toggle-options}
+                           :aria-label (tr "labels.options")
-          i/menu])]
+                           :on-click on-toggle-options
+                           :icon "menu"}])]
 
       [:div {:class (stl/css :content)}
        (if @edition?

frontend/src/app/main/ui/comments.scss

@@ -206,14 +206,6 @@
           cursor: pointer;
         }
       }
-      .options {
-        @extend .button-tertiary;
-        height: $s-32;
-        width: $s-28;
-        svg {
-          @extend .button-icon;
-        }
-      }
     }
   }
   .comment-options-dropdown {

frontend/src/app/main/ui/ds/buttons/icon_button.cljs

@@ -18,7 +18,7 @@
 (def ^:private schema:icon-button
   [:map
    [:class {:optional true} :string]
-   [:icon {:optional true}
+   [:icon
     [:and :string [:fn #(contains? icon-list %)]]]
    [:aria-label :string]
    [:variant {:optional true}
@@ -27,7 +27,7 @@
 (mf/defc icon-button*
   {::mf/props :obj
    ::mf/schema schema:icon-button}
-  [{:keys [class icon variant aria-label] :rest props}]
+  [{:keys [class icon variant aria-label children] :rest props}]
   (let [variant (or variant "primary")
         class (dm/str class " " (stl/css-case :icon-button true
                                               :icon-button-primary (= variant "primary")
@@ -35,4 +35,4 @@
                                               :icon-button-ghost (= variant "ghost")
                                               :icon-button-destructive (= variant "destructive")))
         props (mf/spread-props props {:class class :title aria-label})]
-    [:> "button" props [:> icon* {:id icon :aria-label aria-label}]]))
+    [:> "button" props [:> icon* {:id icon :aria-label aria-label}] children]))

frontend/src/app/main/ui/workspace/comments.cljs

@@ -16,6 +16,7 @@
    [app.main.ui.comments :as cmt]
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.context :as ctx]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -124,9 +125,10 @@
      [:div {:class (stl/css-case :comments-section-title true
                                  :viewer-title from-viewer)}
       [:span (tr "labels.comments")]
-      [:button {:class (stl/css :close-button)
+      [:> icon-button* {:variant "ghost"
-                :on-click close-section}
+                        :aria-label (tr "labels.close")
-       i/close]]
+                        :on-click close-section
+                        :icon "close"}]]
 
      [:button {:class (stl/css :mode-dropdown-wrapper)
                :on-click toggle-mode-selector}

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

@@ -38,20 +38,6 @@
   margin-block-start: $s-8;
 }
 
-.close-button {
-  @extend .button-tertiary;
-  position: absolute;
-  right: $s-2;
-  top: $s-2;
-  height: $s-28;
-  width: $s-28;
-  border-radius: $br-6;
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-  }
-}
-
 .mode-dropdown-wrapper {
   @include buttonStyle;
   @extend .asset-element;

frontend/src/app/main/ui/workspace/main_menu.cljs

@@ -29,6 +29,7 @@
    [app.main.store :as st]
    [app.main.ui.components.dropdown-menu :refer [dropdown-menu dropdown-menu-item*]]
    [app.main.ui.context :as ctx]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.hooks.resize :as r]
    [app.main.ui.icons :as i]
    [app.plugins.register :as preg]
@@ -745,8 +746,10 @@
 
 
     [:*
-     [:div {:on-click open-menu
+     [:> icon-button* {:variant "ghost"
-            :class (stl/css :menu-btn)} i/menu]
+                       :aria-label (tr "shortcut-subsection.main-menu")
+                       :on-click open-menu
+                       :icon "menu"}]
 
      [:& dropdown-menu {:show show-menu?
                         :on-close close-menu

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

@@ -6,18 +6,6 @@
 
 @import "refactor/common-refactor.scss";
 
-.menu-btn {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: calc($s-24 + $s-4);
-  padding: 0;
-  border-radius: $br-8;
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-  }
-}
-
 .menu {
   @extend .menu-dropdown;
   top: $s-48;

frontend/src/app/main/ui/workspace/plugins.cljs

@@ -16,6 +16,7 @@
    [app.main.store :as st]
    [app.main.ui.components.search-bar :refer [search-bar]]
    [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.icons :as i]
    [app.plugins.register :as preg]
    [app.util.avatars :as avatars]
@@ -65,8 +66,10 @@
       [:div {:class (stl/css :plugin-summary)} (d/nilv description "")]]
      [:button {:class (stl/css :open-button)
                :on-click handle-open-click} (tr "workspace.plugins.button-open")]
-     [:button {:class (stl/css :trash-button)
+     [:> icon-button* {:variant "ghost"
-               :on-click handle-delete-click} i/delete]]))
+                       :aria-label (tr "workspace.plugins.remove-plugin")
+                       :on-click handle-delete-click
+                       :icon "delete"}]]))
 
 (mf/defc plugin-management-dialog
   {::mf/register modal/components

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

@@ -121,17 +121,6 @@
   text-transform: uppercase;
 }
 
-.trash-button {
-  @extend .button-tertiary;
-  width: $s-32;
-  height: $s-32;
-
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-  }
-}
-
 .plugins-list {
   padding-top: $s-20;
   overflow-x: hidden;

frontend/src/app/main/ui/workspace/right_header.cljs

@@ -16,6 +16,7 @@
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.context :as ctx]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.exports.assets :refer [export-progress-widget]]
    [app.main.ui.formats :as fmt]
    [app.main.ui.icons :as i]
@@ -108,15 +109,15 @@
       [:ul {:class (stl/css :dropdown)}
        [:li {:class (stl/css :basic-zoom-bar)}
         [:span {:class (stl/css :zoom-btns)}
-         [:button {:class (stl/css :zoom-btn)
+         [:> icon-button* {:variant "ghost"
-                   :on-click on-decrease}
+                           :aria-label (tr "shortcuts.decrease-zoom")
-          [:span {:class (stl/css :zoom-icon)}
+                           :on-click on-decrease
-           i/remove-icon]]
+                           :icon "remove"}]
          [:p {:class (stl/css :zoom-text)} zoom]
-         [:button {:class (stl/css :zoom-btn)
+         [:> icon-button* {:variant "ghost"
-                   :on-click on-increase}
+                           :aria-label (tr "shortcuts.increase-zoom")
-          [:span {:class (stl/css :zoom-icon)}
+                           :on-click on-increase
-           i/add]]]
+                           :icon "add"}]]
         [:button {:class (stl/css :reset-btn)
                   :on-click on-zoom-reset}
          (tr "workspace.header.reset-zoom")]]

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

@@ -72,25 +72,6 @@
   display: flex;
 }
 
-.zoom-btn {
-  @extend .button-tertiary;
-  height: $s-28;
-  width: $s-28;
-  border-radius: $br-8;
-  .zoom-icon {
-    @include flexCenter;
-    svg {
-      @extend .button-icon;
-      stroke: var(--icon-foreground);
-    }
-  }
-  &:hover {
-    .zoom-icon svg {
-      stroke: var(--button-tertiary-foreground-color-hover);
-    }
-  }
-}
-
 .zoom-text {
   @include flexCenter;
   height: 100%;

frontend/src/app/main/ui/workspace/sidebar/assets.cljs

@@ -16,6 +16,7 @@
    [app.main.ui.components.context-menu-a11y :refer [context-menu*]]
    [app.main.ui.components.search-bar :refer [search-bar]]
    [app.main.ui.context :as ctx]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.main.ui.workspace.sidebar.assets.file-library :refer [file-library]]
@@ -182,12 +183,10 @@
          :top 158
          :left 18
          :options options}]
-       [:button {:class (stl/css :sort-button)
+       [:> icon-button* {:variant "ghost"
-                 :title (tr "workspace.assets.sort")
+                         :aria-label (tr "workspace.assets.sort")
-                 :on-click toggle-ordering}
+                         :on-click toggle-ordering
-        (if reverse-sort?
+                         :icon (if reverse-sort? "asc-sort" "desc-sort")}]]]
-          i/asc-sort
-          i/desc-sort)]]]
 
      [:& (mf/provider cmm/assets-filters) {:value filters}
       [:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering}

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

@@ -134,13 +134,3 @@
   display: flex;
   gap: $s-4;
 }
-
-.sort-button {
-  @extend .button-tertiary;
-  width: $s-32;
-  border-radius: $br-8;
-  svg {
-    @extend .button-icon-small;
-    stroke: var(--icon-foreground);
-  }
-}

frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs

@@ -20,7 +20,7 @@
    [app.main.store :as st]
    [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.context :as ctx]
-   [app.main.ui.icons :as i]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.main.ui.workspace.sidebar.assets.groups :as grp]
    [app.util.color :as uc]
@@ -491,9 +491,10 @@
      (when local?
        [:& cmm/asset-section-block {:role :title-button}
         (when-not read-only?
-          [:button {:class (stl/css :assets-btn)
+          [:> icon-button* {:variant "ghost"
-                    :on-click add-color-clicked}
+                            :aria-label (tr "workspace.assets.colors.add-color")
-           i/add])])
+                            :on-click add-color-clicked
+                            :icon "add"}])])
 
 
      [:& cmm/asset-section-block {:role :content}

frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss

@@ -11,18 +11,6 @@
 // the elements are not part of the same cascade).
 $assets-button-width: $s-28;
 
-.assets-btn {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $assets-button-width;
-  padding: 0;
-  border-radius: $br-8;
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-  }
-}
-
 .colors-group {
   margin-top: $s-4;
 }

frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs

@@ -24,6 +24,7 @@
    [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.context :as ctx]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
@@ -527,9 +528,10 @@
                             :id "opt-grid"}]]])
 
       (when (and components-v2 (not read-only?) local?)
-        [:div {:on-click add-component
+        [:> icon-button* {:variant "ghost"
-               :class (stl/css :add-component)}
+                          :aria-label (tr "workspace.assets.components.add-component")
-         i/add
+                          :on-click add-component
+                          :icon "add"}
          [:& file-uploader {:accept cm/str-image-types
                             :multi true
                             :ref input-ref

frontend/src/app/main/ui/workspace/sidebar/assets/components.scss

@@ -209,19 +209,6 @@
   align-items: center;
 }
 
-.add-component {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  margin-left: $s-2;
-  border-radius: $br-8;
-
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-  }
-}
-
 .dragging {
   position: absolute;
   top: 0;

frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs

@@ -18,7 +18,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.context :as ctx]
-   [app.main.ui.icons :as i]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.main.ui.workspace.sidebar.assets.groups :as grp]
    [app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry]]
@@ -404,9 +404,10 @@
       (when local?
         [:& cmm/asset-section-block {:role :title-button}
          (when-not read-only?
-           [:button {:class (stl/css :assets-btn)
+           [:> icon-button* {:variant "ghost"
-                     :on-click add-typography}
+                             :aria-label (tr "workspace.assets.typography.add-typography")
-            i/add])])
+                             :on-click add-typography
+                             :icon "add"}])])
 
       [:& cmm/asset-section-block {:role :content}
        [:& typographies-group {:file-id file-id

frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss

@@ -6,18 +6,6 @@
 
 @import "refactor/common-refactor.scss";
 
-.assets-btn {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: calc($s-24 + $s-4);
-  padding: 0;
-  border-radius: $br-8;
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-  }
-}
-
 .assets-list {
   padding: 0 0 0 $s-4;
 }

frontend/src/app/main/ui/workspace/sidebar/debug.cljs

@@ -11,9 +11,11 @@
    [app.common.data.macros :as dm]
    [app.main.data.workspace :as dw]
    [app.main.store :as st]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.icons :as i]
    [app.util.debug :as dbg]
    [app.util.dom :as dom]
+   [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
 (mf/defc debug-panel
@@ -34,8 +36,10 @@
     [:div {:class (dm/str class " " (stl/css :debug-panel))}
      [:div {:class (stl/css :panel-title)}
       [:span "Debugging tools"]
-      [:div {:class (stl/css :close-button) :on-click handle-close}
+      [:> icon-button* {:variant "ghost"
-       i/close]]
+                        :aria-label (tr "labels.close")
+                        :on-click handle-close
+                        :icon "close"}]]
 
      [:div {:class (stl/css :debug-panel-inner)}
       (for [option (sort-by d/name dbg/options)]

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

@@ -29,20 +29,6 @@
   }
 }
 
-.close-button {
-  @extend .button-tertiary;
-  position: absolute;
-  right: $s-2;
-  top: $s-2;
-  height: $s-28;
-  width: $s-28;
-  border-radius: $br-6;
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-  }
-}
-
 .checkbox-wrapper {
   @extend .input-checkbox;
   height: $s-32;

frontend/src/app/main/ui/workspace/sidebar/history.cljs

@@ -14,6 +14,7 @@
    [app.main.data.workspace.undo :as dwu]
    [app.main.refs :as refs]
    [app.main.store :as st]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr] :as i18n]
@@ -333,9 +334,10 @@
     [:div {:class (stl/css :history-toolbox)}
      [:div {:class (stl/css :history-toolbox-title)}
       [:span (tr "workspace.undo.title")]
-      [:div {:class (stl/css :close-button)
+      [:> icon-button* {:variant "ghost"
-             :on-click toggle-history}
+                        :aria-label (tr "labels.close")
-       i/close]]
+                        :on-click toggle-history
+                        :icon "close"}]]
      (if (empty? entries)
        [:div {:class (stl/css :history-entry-empty)}
         [:div {:class (stl/css :history-entry-empty-icon)} i/history]

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

@@ -29,20 +29,6 @@
   }
 }
 
-.close-button {
-  @extend .button-tertiary;
-  position: absolute;
-  right: $s-2;
-  top: $s-2;
-  height: $s-28;
-  width: $s-28;
-  border-radius: $br-6;
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-  }
-}
-
 .history-entry-empty {
   @include flexCenter;
   flex-direction: column;

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

@@ -18,6 +18,7 @@
    [app.main.ui.components.search-bar :refer [search-bar]]
    [app.main.ui.components.shape-icon :as sic]
    [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
    [app.main.ui.notifications.badge :refer [badge-notification]]
@@ -294,9 +295,10 @@
                               :active active?)}
              i/filter-icon]]
 
-           [:button {:class (stl/css :close-search)
+           [:> icon-button* {:variant "ghost"
-                     :on-click toggle-search}
+                             :aria-label (tr "labels.close")
-            i/close]]
+                             :on-click toggle-search
+                             :icon "close"}]]
 
           [:div {:class (stl/css :active-filters)}
            (for [fkey current-filters]

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

@@ -53,18 +53,6 @@
         @extend .button-icon-selected;
       }
     }
-    .close-search {
-      @extend .button-tertiary;
-      height: $s-32;
-      width: $s-28;
-      min-width: $s-28;
-      padding: 0;
-      border-radius: $br-8;
-      svg {
-        @extend .button-icon-small;
-        stroke: var(--icon-foreground);
-      }
-    }
   }
 }
 

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

@@ -40,6 +40,10 @@
   scrollbar-gutter: stable;
 }
 
+.design-options {
+  padding-inline-end: $s-12;
+}
+
 .inspect {
   scrollbar-gutter: unset;
 }

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

@@ -12,6 +12,7 @@
    [app.main.store :as st]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.icons :as i]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
@@ -86,9 +87,11 @@
                                      (tr "workspace.options.blur-options.title"))
                      :class        (stl/css-case :title-spacing-blur (not has-value?))}
        (when-not has-value?
-         [:button {:class (stl/css :add-blur)
+         [:> icon-button* {:variant "ghost"
-                   :data-testid "add-blur"
+                           :aria-label (tr "workspace.options.blur-options.add-blur")
-                   :on-click handle-add} i/add])]]
+                           :on-click handle-add
+                           :icon "add"
+                           :data-testid "add-blur"}])]]
      (when (and open? has-value?)
        [:div {:class (stl/css :element-set-content)}
         [:div {:class (stl/css-case :first-row true
@@ -101,13 +104,14 @@
           [:span {:class (stl/css :label)}
            (tr "workspace.options.blur-options.title")]]
          [:div {:class (stl/css :actions)}
-          [:button {:class (stl/css :action-btn)
+          [:> icon-button* {:variant "ghost"
-                    :on-click handle-toggle-visibility}
+                            :aria-label (tr "workspace.options.blur-options.toggle-blur")
-           (if hidden?
+                            :on-click handle-toggle-visibility
-             i/hide
+                            :icon (if hidden? "hide" "shown")}]
-             i/shown)]
+          [:> icon-button* {:variant "ghost"
-          [:button {:class (stl/css :action-btn)
+                            :aria-label (tr "workspace.options.blur-options.remove-blur")
-                    :on-click handle-delete} i/remove-icon]]]
+                            :on-click handle-delete
+                            :icon "remove"}]]]
         (when more-options?
           [:div {:class (stl/css :second-row)}
            [:label {:class (stl/css :label)

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

@@ -15,15 +15,6 @@
   margin: 0;
 }
 
-.add-blur {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  svg {
-    @extend .button-icon;
-  }
-}
-
 .element-set-content {
   @include flexColumn;
   margin-bottom: $s-8;
@@ -72,15 +63,6 @@
   }
   .actions {
     @include flexRow;
-    .action-btn {
-      @extend .button-tertiary;
-      box-sizing: border-box;
-      height: $s-32;
-      width: $s-28;
-      svg {
-        @extend .button-icon;
-      }
-    }
   }
 
   &.hidden {

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

@@ -16,8 +16,8 @@
    [app.main.store :as st]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.exports.assets]
-   [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :refer  [tr c]]
    [app.util.keyboard :as kbd]
@@ -116,12 +116,15 @@
         delete-export
         (mf/use-fn
          (mf/deps ids)
-         (fn [position]
+         (fn [event]
-           (let [remove-fill-by-index (fn [values index] (->> (d/enumerate values)
+           (let [value (-> (dom/get-current-target event)
+                           (dom/get-data "value")
+                           (d/parse-integer))
+                 remove-fill-by-index (fn [values index] (->> (d/enumerate values)
                                                               (filterv (fn [[idx _]] (not= idx index)))
                                                               (mapv second)))
 
-                 remove (fn [shape] (update shape :exports remove-fill-by-index position))]
+                 remove (fn [shape] (update shape :exports remove-fill-by-index value))]
              (st/emit! (dwsh/update-shapes ids remove)))))
 
         on-scale-change
@@ -188,9 +191,10 @@
                      :on-collapsed toggle-content
                      :title        (tr (if (> (count ids) 1) "workspace.options.export-multiple" "workspace.options.export"))
                      :class        (stl/css-case :title-spacing-export (not has-exports?))}
-       [:button {:class (stl/css :add-export)
+       [:> icon-button* {:variant "ghost"
-                 :on-click add-export}
+                         :aria-label (tr "workspace.options.export.add-export")
-        i/add]]]
+                         :on-click add-export
+                         :icon "add"}]]]
      (when open?
        [:div {:class (stl/css :element-set-content)}
 
@@ -199,9 +203,10 @@
           [:div {:class (stl/css :multiple-exports)}
            [:div {:class (stl/css :label)} (tr "settings.multiple")]
            [:div {:class (stl/css :actions)}
-            [:button {:class (stl/css :action-btn)
+            [:> icon-button* {:variant "ghost"
-                      :on-click on-remove-all}
+                              :aria-label (tr "workspace.options.export.remove-export")
-             i/remove-icon]]]
+                              :on-click on-remove-all
+                              :icon "remove"}]]]
 
           (seq exports)
           [:*
@@ -233,9 +238,11 @@
                          :on-change on-suffix-change
                          :on-key-down manage-key-down}]]]
 
-              [:button {:class (stl/css :action-btn)
+              [:> icon-button* {:variant "ghost"
-                        :on-click (partial delete-export index)}
+                                :aria-label (tr "workspace.options.export.remove-export")
-               i/remove-icon]])])
+                                :on-click delete-export
+                                :data-value index
+                                :icon "remove"}]])])
 
         (when (or (= :multiple exports) (seq exports))
           [:button

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

@@ -15,15 +15,6 @@
   margin: 0;
 }
 
-.add-export {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  svg {
-    @extend .button-icon;
-  }
-}
-
 .element-set-content {
   @include flexColumn;
   margin: $s-4 0 $s-8 0;
@@ -36,14 +27,6 @@
   }
   .actions {
     @include flexRow;
-    .action-btn {
-      @extend .button-tertiary;
-      height: $s-32;
-      width: $s-28;
-      svg {
-        @extend .button-icon;
-      }
-    }
   }
 }
 
@@ -51,15 +34,6 @@
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   column-gap: $s-4;
-
-  .action-btn {
-    @extend .button-tertiary;
-    height: $s-32;
-    width: $s-28;
-    svg {
-      @extend .button-icon;
-    }
-  }
 }
 
 .input-wrapper {

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

@@ -13,6 +13,7 @@
    [app.main.data.workspace.colors :as dc]
    [app.main.store :as st]
    [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
@@ -145,9 +146,11 @@
                      :class        (stl/css-case :title-spacing-fill (not has-fills?))}
 
        (when (and (not disable-remove?) (not (= :multiple fills)))
-         [:button {:class (stl/css :add-fill)
+         [:> icon-button* {:variant "ghost"
-                   :data-testid "add-fill"
+                           :aria-label (tr "workspace.options.fill.add-fill")
-                   :on-click on-add} i/add])]]
+                           :on-click on-add
+                           :data-testid "add-fill"
+                           :icon "add"}])]]
 
      (when open?
        [:div {:class (stl/css :element-content)}
@@ -156,9 +159,10 @@
           [:div {:class (stl/css :element-set-options-group)}
            [:div {:class (stl/css :group-label)}
             (tr "settings.multiple")]
-           [:button {:on-click on-remove-all
+           [:> icon-button* {:variant "ghost"
-                     :class (stl/css :remove-btn)}
+                             :aria-label (tr "workspace.options.fill.remove-fill")
-            i/remove-icon]]
+                             :on-click on-remove-all
+                             :icon "remove"}]]
 
           (seq fills)
           [:& h/sortable-container {}

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

@@ -19,15 +19,6 @@
   margin: 0;
 }
 
-.add-fill {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  svg {
-    @extend .button-icon;
-  }
-}
-
 .element-content {
   display: flex;
   flex-direction: column;
@@ -43,15 +34,6 @@
   @extend .mixed-bar;
 }
 
-.remove-btn {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  svg {
-    @extend .button-icon;
-  }
-}
-
 .checkbox {
   @extend .input-checkbox;
   padding-left: $s-8;

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

@@ -16,6 +16,7 @@
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
@@ -178,12 +179,14 @@
                                :on-change handle-change-size}]])]
 
       [:div {:class (stl/css :actions)}
-       [:button {:class (stl/css :action-btn)
+       [:> icon-button* {:variant "ghost"
-                 :on-click handle-toggle-visibility}
+                         :aria-label (tr "workspace.options.guides.toggle-guide")
-        (if display i/shown i/hide)]
+                         :on-click handle-toggle-visibility
-       [:button {:class (stl/css :action-btn)
+                         :icon (if display "shown" "hide")}]
-                 :on-click on-remove}
+       [:> icon-button* {:variant "ghost"
-        i/remove-icon]]]
+                         :aria-label (tr "workspace.options.guides.remove-guide")
+                         :on-click on-remove
+                         :icon "remove"}]]]
 
      (when (:display grid)
        [:& advanced-options {:class (stl/css :grid-advanced-options)
@@ -316,9 +319,10 @@
                     :class        (stl/css-case :title-spacing-board-grid (not has-frame-grids?))
                     :title        (tr "workspace.options.guides.title")}
 
-      [:button  {:on-click handle-create-grid
+      [:> icon-button* {:variant "ghost"
-                 :class (stl/css :add-grid)}
+                        :aria-label (tr "workspace.options.guides.add-guide")
-       i/add]]
+                        :on-click handle-create-grid
+                        :icon "add"}]]
 
      (when (and open? (seq frame-grids))
        [:div  {:class (stl/css :element-set-content)}

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

@@ -15,15 +15,6 @@
   margin: 0;
 }
 
-.add-grid {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  svg {
-    @extend .button-icon;
-  }
-}
-
 .element-set-content {
   @include flexColumn;
   margin: $s-4 0 $s-8 0;
@@ -154,15 +145,6 @@
   @include flexRow;
 }
 
-.action-btn {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  svg {
-    @extend .button-icon;
-  }
-}
-
 .grid-advanced-options {
   @include flexColumn;
   margin-top: $s-4;

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

@@ -22,6 +22,7 @@
    [app.main.ui.components.radio-buttons :refer [radio-buttons radio-button]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -149,9 +150,10 @@
           :on-key-down on-key-down
           :default-value (:name flow "")}]]]]
 
-     [:button {:class (stl/css :remove-flow-btn)
+     [:> icon-button* {:variant "ghost"
-               :on-click remove-flow}
+                       :aria-label (tr "workspace.options.flows.remove-flow")
-      i/remove-icon]]))
+                       :on-click remove-flow
+                       :icon "remove"}]]))
 
 (mf/defc page-flows
   {::mf/props :obj}
@@ -176,10 +178,10 @@
                       :title       (tr "workspace.options.flows.flow")
                       :class       (stl/css :title-spacing-layout-flow)}
         (when (nil? flow)
-          [:button {:class (stl/css :add-flow-btn)
+          [:> icon-button* {:variant "ghost"
-                    :title (tr  "workspace.options.flows.add-flow-start")
+                            :aria-label (tr "workspace.options.flows.add-flow-start")
-                    :on-click add-flow}
+                            :on-click add-flow
-           i/add])]
+                            :icon "add"}])]
 
        (when (some? flow)
          [:& flow-item {:flow flow :key (dm/str (:id flow))}])])))
@@ -727,9 +729,10 @@
                         :title       (tr "workspace.options.interactions")
                         :class       (stl/css :title-spacing-layout-interactions)}
 
-          [:button {:class (stl/css :add-interaction-btn)
+          [:> icon-button* {:variant "ghost"
-                    :on-click add-interaction}
+                            :aria-label (tr "workspace.options.interactions.add-interaction")
-           i/add]]])
+                            :on-click add-interaction
+                            :icon "add"}]]])
 
       (when (= (count interactions) 0)
         [:div {:class (stl/css :help-content)}

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

@@ -16,16 +16,6 @@
   @include flexColumn;
 }
 
-.add-interaction-btn {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-  }
-}
-
 .help-content {
   padding: $s-32 0;
   width: $s-200;
@@ -69,15 +59,6 @@
   @include flexColumn;
 }
 
-.add-flow-btn {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  svg {
-    @extend .button-icon;
-  }
-}
-
 .interactions-info {
   flex-grow: 1;
   display: grid;
@@ -364,13 +345,3 @@
     border: $s-1 solid var(--input-border-color-active);
   }
 }
-
-.remove-flow-btn {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  min-width: $s-28;
-  svg {
-    @extend .button-icon;
-  }
-}

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

@@ -14,7 +14,7 @@
    [app.main.store :as st]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.select :refer [select]]
-   [app.main.ui.icons :as i]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
@@ -172,19 +172,26 @@
       [:div {:class (stl/css :actions)}
        (cond
          (or (= :multiple hidden?) (not hidden?))
-         [:button {:on-click handle-set-hidden
+         [:> icon-button* {:variant "ghost"
-                   :class (stl/css :hidden-btn)} i/shown]
+                           :aria-label (tr "workspace.options.layer-options.toggle-layer")
+                           :on-click handle-set-hidden
+                           :icon "shown"}]
 
          :else
-         [:button {:on-click handle-set-visible
+         [:> icon-button* {:variant "ghost"
-                   :class (stl/css :hidden-btn)} i/hide])
+                           :aria-label (tr "workspace.options.layer-options.toggle-layer")
+                           :on-click handle-set-visible
+                           :icon "hide"}])
 
        (cond
          (or (= :multiple blocked?) (not blocked?))
-         [:button {:on-click handle-set-blocked
+         [:> icon-button* {:variant "ghost"
-                   :class (stl/css :lock-btn)} i/unlock]
+                           :aria-label (tr "workspace.shape.menu.lock")
+                           :on-click handle-set-blocked
+                           :icon "unlock"}]
 
          :else
-         [:button {:on-click handle-set-unblocked
+         [:> icon-button* {:variant "ghost"
-                   :class (stl/css-case :lock-btn true
+                           :aria-label (tr "workspace.shape.menu.unlock")
-                                        :locked blocked?)} i/lock])]]]))
+                           :on-click handle-set-unblocked
+                           :icon "lock"}])]]]))

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

@@ -25,17 +25,6 @@
   .actions {
     display: flex;
     gap: $s-4;
-    .hidden-btn,
-    .lock-btn {
-      @extend .button-tertiary;
-      border-radius: $br-8;
-      height: $s-32;
-      width: $s-28;
-      svg {
-        @extend .button-icon;
-        stroke: var(--icon-foreground);
-      }
-    }
   }
 
   &.hidden {

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

@@ -24,6 +24,7 @@
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.formats :as fmt]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
@@ -759,9 +760,12 @@
                              {:value :percent :label "%"}]
                    :on-change #(set-column-type type index %)}]]]
 
-     [:button {:class (stl/css :remove-track-btn)
+     [:> icon-button* {:variant "ghost"
-               :on-click #(remove-element type index)}
+                       :aria-label (tr "workspace.shape.menu.delete")
-      i/remove-icon]]))
+                       :on-click remove-element
+                       :data-type type
+                       :data-index index
+                       :icon "remove"}]]))
 
 (mf/defc grid-columns-row
   {::mf/props :obj}
@@ -996,10 +1000,10 @@
          [:div {:class (stl/css :title-actions)}
           (when ^boolean grid-enabled?
             [:*
-             [:button {:class (stl/css :add-layout)
+             [:> icon-button* {:variant "ghost"
-                       :aria-label "Add"
+                               :aria-label (tr "workspace.shape.menu.add-layout")
-                       :on-click on-toggle-dropdown-visibility}
+                               :on-click on-toggle-dropdown-visibility
-              i/menu]
+                               :icon "menu"}]
 
              [:& dropdown {:show show-dropdown?
                            :on-close on-hide-dropdown}
@@ -1014,16 +1018,18 @@
                 "Grid layout"]]]])
 
           (when has-layout?
-            [:button {:class (stl/css :remove-layout)
+            [:> icon-button* {:variant "ghost"
-                      :on-click on-remove-layout}
+                              :aria-label (tr "workspace.shape.menu.remove-layout")
-             i/remove-icon])]
+                              :on-click on-remove-layout
+                              :icon "remove"}])]
 
          [:div {:class (stl/css :title-actions)}
           (if ^boolean grid-enabled?
             [:*
-             [:button {:class (stl/css :add-layout)
+             [:> icon-button* {:variant "ghost"
-                       :on-click on-toggle-dropdown-visibility}
+                               :aria-label (tr "workspace.shape.menu.add-layout")
-              i/add]
+                               :on-click on-toggle-dropdown-visibility
+                               :icon "add"}]
 
              [:& dropdown {:show show-dropdown?
                            :on-close on-hide-dropdown}
@@ -1042,9 +1048,10 @@
                       :on-click on-add-layout}
              i/add])
           (when has-layout?
-            [:button {:class (stl/css :remove-layout)
+            [:> icon-button* {:variant "ghost"
-                      :on-click on-remove-layout}
+                              :aria-label (tr "workspace.shape.menu.delete")
-             i/remove-icon])])]]
+                              :on-click on-remove-layout
+                              :icon "remove"}])])]]
 
      (when (and ^boolean open?
                 ^boolean has-layout?
@@ -1068,9 +1075,10 @@
                                     :justify-content justify-content
                                     :on-change set-justify-content}]
 
-           [:button {:on-click open-flex-help
+           [:> icon-button* {:variant "ghost"
-                     :class (stl/css :help-button)}
+                             :aria-label (tr "labels.help-center")
-            i/help]]
+                             :on-click open-flex-help
+                             :icon "help"}]]
           (when (= :wrap wrap-type)
             [:div {:class (stl/css :third-row)}
              [:& align-content-row {:is-column is-column
@@ -1092,8 +1100,10 @@
           (when (= 1 (count ids))
             [:div {:class (stl/css :edit-grid-wrapper)}
              [:& grid-edit-mode {:id (first ids)}]
-             [:button {:on-click open-grid-help
+             [:> icon-button* {:variant "ghost"
-                       :class (stl/css :help-button)} i/help]])
+                               :aria-label (tr "labels.help-center")
+                               :on-click open-grid-help
+                               :icon "help"}]])
 
           [:div {:class (stl/css :row :first-row)}
            [:div {:class (stl/css :direction-edit)}
@@ -1222,8 +1232,14 @@
         remove-element
         (mf/use-fn
          (mf/deps ids)
-         (fn [type index]
+         (fn [event]
-           (st/emit! (dwsl/remove-layout-track ids type index))))
+           (let [type (-> (dom/get-current-target event)
+                          (dom/get-data "type")
+                          (d/read-string))
+                 index (-> (dom/get-current-target event)
+                           (dom/get-data "index")
+                           (d/parse-integer))]
+             (st/emit! (dwsl/remove-layout-track ids type index)))))
 
         reorder-track
         (mf/use-fn
@@ -1269,8 +1285,11 @@
     [:div {:class (stl/css :grid-layout-menu)}
      [:div {:class (stl/css :row)}
       [:div {:class (stl/css :grid-layout-menu-title)} "GRID LAYOUT"]
-      [:button {:on-click open-grid-help
+      [:> icon-button* {:variant "ghost"
-                :class (stl/css :help-button)} i/help]
+                        :class (stl/css :help-button)
+                        :aria-label (tr "labels.help-center")
+                        :on-click open-grid-help
+                        :icon "help"}]
       [:button {:class (stl/css :exit-btn)
                 :on-click #(st/emit! (udw/clear-edition-mode))}
        (tr "workspace.layout_grid.editor.options.exit")]]
@@ -1297,10 +1316,11 @@
                             :value grid-justify-content-row
                             :on-change on-row-justify-change}]
 
-      [:button {:on-click handle-locate-grid
+      [:> icon-button* {:variant "ghost"
-                :class (stl/css :locate-button)
+                        :class (stl/css :locate-button)
-                :title (tr "workspace.layout_grid.editor.top-bar.locate.tooltip")}
+                        :aria-label (tr "workspace.layout_grid.editor.top-bar.locate.tooltip")
-       i/locate]]
+                        :on-click handle-locate-grid
+                        :icon "locate"}]]
 
      [:div {:class (stl/css :row)}
       [:& gap-section {:on-change on-gap-change

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

@@ -27,17 +27,6 @@
       .layout-option {
         white-space: nowrap;
       }
-      .remove-layout,
-      .add-layout {
-        @extend .button-tertiary;
-        border-radius: $br-8;
-        height: $s-32;
-        width: $s-28;
-        svg {
-          @extend .button-icon;
-          stroke: var(--icon-foreground);
-        }
-      }
     }
   }
   .flex-layout-menu {
@@ -69,12 +58,9 @@
       @include flexColumn;
     }
     .help-button-wrapper {
-      position: relative;
+      display: flex;
-      .help-button {
+      flex-direction: row;
-        position: absolute;
+      justify-content: space-between;
-        top: 0;
-        right: 0;
-      }
     }
   }
 }
@@ -252,19 +238,6 @@
     border-radius: 0 $br-8 $br-8 0;
     width: $s-96;
   }
-
-  .remove-track-btn {
-    @extend .button-tertiary;
-    padding: $s-8;
-
-    svg {
-      @extend .button-icon;
-      width: $s-12;
-      height: $s-12;
-      stroke: var(--icon-foreground);
-      fill: var(--icon-foreground);
-    }
-  }
 }
 
 .grid-tracks {
@@ -320,9 +293,6 @@
     }
   }
 
-  .columns-info {
-  }
-
   .add-column {
     @extend .button-tertiary;
     height: $s-52;
@@ -337,17 +307,6 @@
   }
 }
 
-.locate-button,
-.help-button {
-  @extend .button-tertiary;
-  padding: $s-8;
-  svg {
-    fill: none;
-    width: $s-16;
-    height: $s-16;
-  }
-}
-
 .layout-options {
   @extend .dropdown-wrapper;
   @include flexColumn;

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

@@ -19,6 +19,7 @@
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
@@ -168,14 +169,14 @@
            :options type-options
            :on-change on-type-change}]]]
        [:div {:class (stl/css :actions)}
-        [:button {:class (stl/css :action-btn)
+        [:> icon-button* {:variant "ghost"
-                  :on-click toggle-visibility}
+                          :aria-label (tr "workspace.options.shadow-options.toggle-shadow")
-         (if hidden?
+                          :on-click toggle-visibility
-           i/hide
+                          :icon (if hidden? "hide" "shown")}]
-           i/shown)]
+        [:> icon-button* {:variant "ghost"
-        [:button {:class (stl/css :action-btn)
+                          :aria-label (tr "workspace.options.shadow-options.remove-shadow")
-                  :on-click on-remove-shadow}
+                          :on-click on-remove-shadow
-         i/remove-icon]]]
+                          :icon "remove"}]]]
       (when open-shadow
         [:& advanced-options {:class (stl/css :shadow-advanced-options)
                               :visible? open-shadow
@@ -297,9 +298,11 @@
                      :class        (stl/css-case :title-spacing-shadow (not has-shadows?))}
 
        (when-not (= :multiple shadows)
-         [:button {:class (stl/css :add-shadow)
+         [:> icon-button* {:variant "ghost"
-                   :data-testid "add-shadow"
+                           :aria-label (tr "workspace.options.shadow-options.add-shadow")
-                   :on-click on-add-shadow} i/add])]]
+                           :on-click on-add-shadow
+                           :icon "add"
+                           :data-testid "add-shadow"}])]]
 
      (when open?
        (cond
@@ -308,9 +311,10 @@
           [:div {:class (stl/css :multiple-shadows)}
            [:div {:class (stl/css :label)} (tr "settings.multiple")]
            [:div {:class (stl/css :actions)}
-            [:button {:class (stl/css :action-btn)
+            [:> icon-button* {:variant "ghost"
-                      :on-click on-remove-all}
+                              :aria-label (tr "workspace.options.shadow-options.remove-shadow")
-             i/remove-icon]]]]
+                              :on-click on-remove-all
+                              :icon "remove"}]]]]
 
          (seq shadows)
          [:& h/sortable-container {}

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

@@ -14,14 +14,6 @@
   margin: 0;
   padding-left: $s-2;
 }
-.add-shadow {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  svg {
-    @extend .button-icon;
-  }
-}
 
 .element-set-content {
   margin-top: $s-4;
@@ -40,15 +32,6 @@
   @include flexRow;
 }
 
-.action-btn {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  svg {
-    @extend .button-icon;
-  }
-}
-
 .shadow-element {
   @include flexColumn;
 }

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

@@ -13,8 +13,8 @@
    [app.main.data.workspace.colors :as dc]
    [app.main.store :as st]
    [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.hooks :as h]
-   [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.rows.stroke-row :refer [stroke-row]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -167,9 +167,11 @@
                      :title        label
                      :class        (stl/css-case :title-spacing-stroke (not has-strokes?))}
        (when (not (= :multiple strokes))
-         [:button {:class (stl/css :add-stroke)
+         [:> icon-button* {:variant "ghost"
-                   :data-testid "add-stroke"
+                           :aria-label (tr "workspace.options.stroke.add-stroke")
-                   :on-click on-add-stroke} i/add])]]
+                           :on-click on-add-stroke
+                           :icon "add"
+                           :data-testid "add-stroke"}])]]
      (when open?
        [:div {:class (stl/css-case :element-content true
                                    :empty-content (not has-strokes?))}
@@ -178,9 +180,10 @@
           [:div {:class (stl/css :element-set-options-group)}
            [:div {:class (stl/css :group-label)}
             (tr "settings.multiple")]
-           [:button {:on-click handle-remove-all
+           [:> icon-button* {:variant "ghost"
-                     :class (stl/css :remove-btn)}
+                             :aria-label (tr "workspace.options.stroke.remove-stroke")
-            i/remove-icon]]
+                             :on-click handle-remove-all
+                             :icon "remove"}]]
           (seq strokes)
           [:& h/sortable-container {}
            (for [[index value] (d/enumerate (:strokes values []))]

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

@@ -18,14 +18,6 @@
   padding-left: $s-2;
   margin: 0;
 }
-.add-stroke {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  svg {
-    @extend .button-icon;
-  }
-}
 
 .element-content {
   display: flex;
@@ -44,12 +36,3 @@
 .group-label {
   @extend .mixed-bar;
 }
-
-.remove-btn {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  svg {
-    @extend .button-icon;
-  }
-}

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

@@ -20,6 +20,7 @@
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.components.title-bar :refer [title-bar]]
    [app.main.ui.context :as ctx]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry text-options]]
    [app.util.dom :as dom]
@@ -290,9 +291,10 @@
                      :title        label
                      :class        (stl/css :title-spacing-text)}
        (when (and (not typography) (not multiple?))
-         [:button {:class   (stl/css :add-typography)
+         [:> icon-button* {:variant "ghost"
-                   :on-click on-convert-to-typography}
+                           :aria-label (tr "labels.options")
-          i/add])]]
+                           :on-click on-convert-to-typography
+                           :icon "add"}])]]
 
      (when main-menu-open?
        [:div {:class (stl/css :element-content)}
@@ -318,9 +320,10 @@
         [:div {:class (stl/css :text-align-options)}
          [:> text-align-options opts]
          [:> grow-options opts]
-         [:button {:class (stl/css :more-options)
+         [:> icon-button* {:variant "ghost"
-                   :on-click toggle-more-options}
+                           :aria-label (tr "labels.options")
-          i/menu]]
+                           :on-click toggle-more-options
+                           :icon "menu"}]]
 
         (when more-options-open?
           [:div  {:class (stl/css :text-decoration-options)}

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

@@ -14,15 +14,6 @@
   margin: 0;
 }
 
-.add-typography {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  svg {
-    @extend .button-icon;
-  }
-}
-
 .element-content {
   @include flexColumn;
   margin-top: $s-4;
@@ -60,15 +51,6 @@
   height: $s-32;
 }
 
-.more-options {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  svg {
-    @extend .button-icon;
-  }
-}
-
 .text-decoration-options {
   display: flex;
   gap: $s-4;

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs

@@ -19,6 +19,7 @@
    [app.main.ui.components.color-input :refer [color-input*]]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.context :as ctx]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.formats :as fmt]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
@@ -266,11 +267,13 @@
                              :max 100}]])]
 
      (when (some? on-remove)
-       [:button {:class (stl/css :remove-btn)
+       [:> icon-button* {:variant "ghost"
-                 :on-click on-remove} i/remove-icon])
+                         :aria-label (tr "settings.remove-color")
+                         :on-click on-remove
+                         :icon "remove"}])
      (when select-only
-       [:button {:class (stl/css :select-btn)
+       [:> icon-button* {:variant "ghost"
-                 :title (tr "settings.select-this-color")
+                         :aria-label (tr "settings.select-this-color")
-                 :on-click handle-select}
+                         :on-click handle-select
-        i/move])]))
+                         :icon "move"}])]))
 

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

@@ -182,13 +182,3 @@
     margin-block-start: $s-2;
   }
 }
-
-.remove-btn,
-.select-btn {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  svg {
-    @extend .button-icon;
-  }
-}

frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs

@@ -15,6 +15,7 @@
    [app.main.store :as st]
    [app.main.ui.components.title-bar :refer [title-bar]]
    [app.main.ui.context :as ctx]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
    [app.main.ui.notifications.badge :refer [badge-notification]]
@@ -223,9 +224,11 @@
           [:& badge-notification {:is-focus true
                                   :size :small
                                   :content (tr "labels.view-only")}])
-        [:button {:class (stl/css :add-page)
+        [:> icon-button* {:variant "ghost"
-                  :on-click on-create}
+                          :class (stl/css :add-page)
-         i/add])]
+                          :aria-label (tr "workspace.sidebar.sitemap.add-page")
+                          :on-click on-create
+                          :icon "add"}])]
 
      [:div {:class (stl/css :tool-window-content)}
       [:& pages-list {:file file :key (:id file)}]]]))

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

@@ -20,19 +20,6 @@
   color: var(--title-foreground-color-hover);
 }
 
-.add-page {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  padding: 0;
-  margin-right: $s-12;
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-    transform: rotate(90deg);
-  }
-}
-
 .resize-area {
   position: absolute;
   bottom: calc(-1 * $s-8);

frontend/src/app/main/ui/workspace/viewport/path_actions.cljs

@@ -218,4 +218,3 @@
                 :title (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes))
                 :on-click on-toggle-snap}
        snap-nodes-icon]]]))
-

frontend/translations/en.po

@@ -1903,6 +1903,10 @@ msgstr "Ok"
 msgid "labels.old-password"
 msgstr "Old password"
 
+#: src/app/main/ui/comments.cljs:331
+msgid "labels.options"
+msgstr "Options"
+
 #: src/app/main/ui/workspace/comments.cljs
 #, unused
 msgid "labels.only-yours"
@@ -2130,6 +2134,10 @@ msgstr "Your account"
 msgid "labels.youtube"
 msgstr "YouTube"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:1051
+msgid "labels.add"
+msgstr "Add"
+
 #: src/app/main/ui/workspace/colorpicker.cljs:341, src/app/main/ui/workspace/colorpicker.cljs:342, src/app/main/ui/workspace/colorpicker.cljs:344
 msgid "media.choose-image"
 msgstr "Choose image"
@@ -3127,6 +3135,10 @@ msgstr "Mixed"
 msgid "settings.select-this-color"
 msgstr "Select items using this style"
 
+#: src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs:271
+msgid "settings.remove-color"
+msgstr "Remove color"
+
 # SECTIONS
 #: src/app/main/ui/workspace/sidebar/shortcuts.cljs:414
 msgid "shortcut-section.basics"
@@ -3969,10 +3981,18 @@ msgstr "All assets"
 msgid "workspace.assets.colors"
 msgstr "Colors"
 
+#: src/app/main/ui/workspace/sidebar/assets/colors.cljs:495
+msgid "workspace.assets.colors.add-color"
+msgstr "Add color"
+
 #: src/app/main/ui/dashboard/grid.cljs:132, src/app/main/ui/dashboard/grid.cljs:147, src/app/main/ui/workspace/sidebar/assets/components.cljs:509, src/app/main/ui/workspace/sidebar/assets.cljs:139
 msgid "workspace.assets.components"
 msgstr "Components"
 
+#: src/app/main/ui/workspace/sidebar/assets/components.cljs:531
+msgid "workspace.assets.components.add-component"
+msgstr "Add component"
+
 #: src/app/main/ui/workspace/sidebar/assets/groups.cljs:127
 msgid "workspace.assets.create-group"
 msgstr "Create a group"
@@ -4075,6 +4095,10 @@ msgstr "Sort"
 msgid "workspace.assets.typography"
 msgstr "Typographies"
 
+#: src/app/main/ui/workspace/sidebar/assets/typographies.cljs:407
+msgid "workspace.assets.typography.add-typography"
+msgstr "Add typography"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
 #, unused
 msgid "workspace.assets.typography.font-id"
@@ -4552,6 +4576,18 @@ msgstr "Group blur"
 msgid "workspace.options.blur-options.title.multiple"
 msgstr "Selection blur"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/blur.cljs:91
+msgid "workspace.options.blur-options.add-blur"
+msgstr "Add blur"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/blur.cljs:112
+msgid "workspace.options.blur-options.remove-blur"
+msgstr "Remove blur"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/blur.cljs:108
+msgid "workspace.options.blur-options.toggle-blur"
+msgstr "Toggle blur"
+
 #: src/app/main/ui/workspace/sidebar/options/page.cljs:32, src/app/main/ui/workspace/sidebar/options/page.cljs:39
 msgid "workspace.options.canvas-background"
 msgstr "Canvas background"
@@ -4671,10 +4707,26 @@ msgstr "Export failed"
 msgid "workspace.options.exporting-object-slow"
 msgstr "Export unexpectedly slow"
 
+#: src/app/main/ui/export.cljs:194
+msgid "workspace.options.export.add-export"
+msgstr "Add export"
+
+#: src/app/main/ui/export.cljs:240
+msgid "workspace.options.export.remove-export"
+msgstr "Remove export"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:49, src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:174
 msgid "workspace.options.fill"
 msgstr "Fill"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:150
+msgid "workspace.options.fill.add-fill"
+msgstr "Add fill color"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:150
+msgid "workspace.options.fill.remove-fill"
+msgstr "Remove fill"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs:178
 msgid "workspace.options.flows.add-flow-start"
 msgstr "Add flow start"
@@ -4683,6 +4735,10 @@ msgstr "Add flow start"
 msgid "workspace.options.flows.flow"
 msgstr "Flow"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.flows.remove-flow"
+msgstr "Remove flow"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
 #, unused
 msgid "workspace.options.flows.flow-start"
@@ -4797,6 +4853,18 @@ msgstr "Group stroke"
 msgid "workspace.options.guides.title"
 msgstr "Guides"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs:323
+msgid "workspace.options.guides.add-guide"
+msgstr "Add guide"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs:187
+msgid "workspace.options.guides.remove-guide"
+msgstr "Remove guide"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs:183
+msgid "workspace.options.guides.toggle-guide"
+msgstr "Toggle guide"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs:406
 msgid "workspace.options.height"
 msgstr "Height"
@@ -5019,6 +5087,14 @@ msgstr "While Hovering"
 msgid "workspace.options.interaction-while-pressing"
 msgstr "While Pressing"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interactions.add-interaction"
+msgstr "Add interaction"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interactions.remove-interaction"
+msgstr "Remove interaction"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs:724
 msgid "workspace.options.interactions"
 msgstr "Interactions"
@@ -5102,6 +5178,10 @@ msgstr "Group layers"
 msgid "workspace.options.layer-options.title.multiple"
 msgstr "Selected layers"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
+msgid "workspace.options.layer-options.toggle-layer"
+msgstr "Toggle layer visibility"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
 #, unused
 msgid "workspace.options.layout-item.advanced-ops"
@@ -5354,6 +5434,18 @@ msgstr "Group shadow"
 msgid "workspace.options.shadow-options.title.multiple"
 msgstr "Selection shadows"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs:302
+msgid "workspace.options.shadow-options.add-shadow"
+msgstr "Add shadow"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs:178
+msgid "workspace.options.shadow-options.remove-shadow"
+msgstr "Remove shadow"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs:173
+msgid "workspace.options.shadow-options.toggle-shadow"
+msgstr "Toggle shadow"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:193
 msgid "workspace.options.show-fill-on-export"
 msgstr "Show in exports"
@@ -5374,6 +5466,14 @@ msgstr "Size presets"
 msgid "workspace.options.stroke"
 msgstr "Stroke"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs:172
+msgid "workspace.options.stroke.add-stroke"
+msgstr "Add stroke color"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs:172
+msgid "workspace.options.stroke.remove-stroke"
+msgstr "Remove stroke"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
 #, unused
 msgid "workspace.options.stroke-cap.circle-marker"
@@ -5725,6 +5825,18 @@ msgstr "Plugin correctly loaded."
 msgid "workspace.plugins.title"
 msgstr "Plugins"
 
+#: src/app/main/ui/workspace/plugins.cljs:64
+msgid "workspace.plugins.remove-plugin"
+msgstr "Remove plugin"
+
+#: /src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:1005
+msgid "workspace.shape.menu.add-layout"
+msgstr "Add layout"
+
+#: /src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:1024
+msgid "workspace.shape.menu.remove-layout"
+msgstr "Remove layout"
+
 #: src/app/main/ui/workspace/context_menu.cljs:441
 msgid "workspace.shape.menu.add-flex"
 msgstr "Add flex layout"
@@ -5983,6 +6095,10 @@ msgstr "Imported SVG Attributes"
 msgid "workspace.sidebar.sitemap"
 msgstr "Pages"
 
+#: src/app/main/ui/workspace/sidebar/sitemap.cljs:217
+msgid "workspace.sidebar.sitemap.add-page"
+msgstr "Add page"
+
 #: src/app/main/ui/workspace/left_header.cljs:91
 msgid "workspace.sitemap"
 msgstr "Sitemap"

frontend/translations/es.po

@@ -1243,6 +1243,10 @@ msgstr "El email o la contraseña son incorrectos."
 msgid "errors.wrong-old-password"
 msgstr "La contraseña anterior no es correcta"
 
+#: src/app/main/ui/comments.cljs:331
+msgid "labels.options"
+msgstr "Opciones"
+
 #: src/app/main/ui/settings/feedback.cljs:74
 msgid "feedback.description"
 msgstr "Descripción"
@@ -2118,6 +2122,10 @@ msgstr "(tú)"
 msgid "labels.your-account"
 msgstr "Tu cuenta"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:1051
+msgid "labels.add"
+msgstr "Añadir"
+
 #: src/app/main/ui/workspace/colorpicker.cljs:341, src/app/main/ui/workspace/colorpicker.cljs:342, src/app/main/ui/workspace/colorpicker.cljs:344
 msgid "media.choose-image"
 msgstr "Elegir imagen"
@@ -3106,6 +3114,10 @@ msgstr "Varios"
 msgid "settings.select-this-color"
 msgstr "Seleccionar elementos que usan este estilo"
 
+#: src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs:271
+msgid "settings.remove-color"
+msgstr "Eliminar color"
+
 # SECTIONS
 #: src/app/main/ui/workspace/sidebar/shortcuts.cljs:414
 msgid "shortcut-section.basics"
@@ -3943,10 +3955,18 @@ msgstr "Todos"
 msgid "workspace.assets.colors"
 msgstr "Colores"
 
+#: src/app/main/ui/workspace/sidebar/assets/colors.cljs:495
+msgid "workspace.assets.colors.add-color"
+msgstr "Añadir color"
+
 #: src/app/main/ui/dashboard/grid.cljs:132, src/app/main/ui/dashboard/grid.cljs:147, src/app/main/ui/workspace/sidebar/assets/components.cljs:509, src/app/main/ui/workspace/sidebar/assets.cljs:139
 msgid "workspace.assets.components"
 msgstr "Componentes"
 
+#: src/app/main/ui/workspace/sidebar/assets/components.cljs:531
+msgid "workspace.assets.components.add-component"
+msgstr "Añadir componente"
+
 #: src/app/main/ui/workspace/sidebar/assets/groups.cljs:127
 msgid "workspace.assets.create-group"
 msgstr "Crear un grupo"
@@ -4051,6 +4071,10 @@ msgstr "Ordenar"
 msgid "workspace.assets.typography"
 msgstr "Tipografías"
 
+#: src/app/main/ui/workspace/sidebar/assets/typographies.cljs:407
+msgid "workspace.assets.typography.add-typography"
+msgstr "Añadir tipografía"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
 #, unused
 msgid "workspace.assets.typography.font-id"
@@ -4528,6 +4552,18 @@ msgstr "Desenfoque del grupo"
 msgid "workspace.options.blur-options.title.multiple"
 msgstr "Desenfoque de la selección"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/blur.cljs:91
+msgid "workspace.options.blur-options.add-blur"
+msgstr "Añadir desenfoque"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/blur.cljs:112
+msgid "workspace.options.blur-options.remove-blur"
+msgstr "Eliminar desenfoque"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/blur.cljs:108
+msgid "workspace.options.blur-options.toggle-blur"
+msgstr "Mostrar/ocultar desenfoque"
+
 #: src/app/main/ui/workspace/sidebar/options/page.cljs:32, src/app/main/ui/workspace/sidebar/options/page.cljs:39
 msgid "workspace.options.canvas-background"
 msgstr "Color de fondo"
@@ -4647,10 +4683,26 @@ msgstr "Exportación fallida"
 msgid "workspace.options.exporting-object-slow"
 msgstr "Exportación lenta"
 
+#: src/app/main/ui/export.cljs:194
+msgid "workspace.options.export.add-export"
+msgstr "Añadir exportación"
+
+#: src/app/main/ui/export.cljs:240
+msgid "workspace.options.export.remove-export"
+msgstr "Eliminar exportación"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:49, src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:174
 msgid "workspace.options.fill"
 msgstr "Relleno"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:150
+msgid "workspace.options.fill.add-fill"
+msgstr "Añadir color de relleno"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:150
+msgid "workspace.options.fill.remove-fill"
+msgstr "Eliminar relleno"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs:178
 msgid "workspace.options.flows.add-flow-start"
 msgstr "Añadir inicio de flujo"
@@ -4659,6 +4711,10 @@ msgstr "Añadir inicio de flujo"
 msgid "workspace.options.flows.flow"
 msgstr "Flujo"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.flows.remove-flow"
+msgstr "Eliminar flujo"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
 #, unused
 msgid "workspace.options.flows.flow-start"
@@ -4773,6 +4829,18 @@ msgstr "Borde de grupo"
 msgid "workspace.options.guides.title"
 msgstr "Guías"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs:323
+msgid "workspace.options.guides.add-guide"
+msgstr "Añadir guía"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs:187
+msgid "workspace.options.guides.remove-guide"
+msgstr "Eliminar guía"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs:183
+msgid "workspace.options.guides.toggle-guide"
+msgstr "Mostrar/ocultar guía"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs:406
 msgid "workspace.options.height"
 msgstr "Altura"
@@ -4999,6 +5067,14 @@ msgstr "Mientras pulsa"
 msgid "workspace.options.interactions"
 msgstr "Interacciones"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interactions.add-interaction"
+msgstr "Añadir interacción"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interactions.remove-interaction"
+msgstr "Eliminar interacción"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/layer.cljs:137
 msgid "workspace.options.layer-options.blend-mode.color"
 msgstr "Color"
@@ -5078,6 +5154,10 @@ msgstr "Capas de grupo"
 msgid "workspace.options.layer-options.title.multiple"
 msgstr "Capas seleccionadas"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
+msgid "workspace.options.layer-options.toggle-layer"
+msgstr "Mostrar/ocultar capa"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
 #, unused
 msgid "workspace.options.layout-item.advanced-ops"
@@ -5332,6 +5412,18 @@ msgstr "Sombra del grupo"
 msgid "workspace.options.shadow-options.title.multiple"
 msgstr "Sombras de la seleccíón"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs:302
+msgid "workspace.options.shadow-options.add-shadow"
+msgstr "Añadir sombra"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs:178
+msgid "workspace.options.shadow-options.remove-shadow"
+msgstr "Eliminar sombra"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs:173
+msgid "workspace.options.shadow-options.toggle-shadow"
+msgstr "Mostrar/ocultar sombra"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:193
 msgid "workspace.options.show-fill-on-export"
 msgstr "Mostrar al exportar"
@@ -5352,6 +5444,14 @@ msgstr "Tamaños predefinidos"
 msgid "workspace.options.stroke"
 msgstr "Borde"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs:172
+msgid "workspace.options.stroke.add-stroke"
+msgstr "Añadir color de borde"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs:172
+msgid "workspace.options.stroke.remove-stroke"
+msgstr "Eliminar borde"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
 #, unused
 msgid "workspace.options.stroke-cap.circle-marker"
@@ -5703,6 +5803,18 @@ msgstr "Extensión cargada correctamente."
 msgid "workspace.plugins.title"
 msgstr "Extensiones"
 
+#: src/app/main/ui/workspace/plugins.cljs:64
+msgid "workspace.plugins.remove-plugin"
+msgstr "Eliminar extensión"
+
+#: /src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:1005
+msgid "workspace.shape.menu.add-layout"
+msgstr "Añadir layout"
+
+#: /src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:1024
+msgid "workspace.shape.menu.remove-layout"
+msgstr "Eliminar layout"
+
 #: src/app/main/ui/workspace/context_menu.cljs:441
 msgid "workspace.shape.menu.add-flex"
 msgstr "Añadir flex layout"
@@ -5961,6 +6073,10 @@ msgstr "Atributos del SVG Importado"
 msgid "workspace.sidebar.sitemap"
 msgstr "Páginas"
 
+#: src/app/main/ui/workspace/sidebar/sitemap.cljs:217
+msgid "workspace.sidebar.sitemap.add-page"
+msgstr "Añadir página"
+
 #: src/app/main/ui/workspace/left_header.cljs:91
 msgid "workspace.sitemap"
 msgstr "Mapa del sitio"