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

♻️ Replace buttons on workspace
2025-03-21 12:11:37 -05:00 · 2024-10-23 16:13:51 +02:00 · 2024-10-23 16:13:51 +02:00 · c7308ce634
commit c7308ce634
parent 283ea16627 e45fa1380d
53 changed files with 495 additions and 560 deletions
--- a/frontend/src/app/main/ui/comments.cljs
+++ b/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)
-                :on-click on-toggle-options}
-          i/menu])]
+         [:> icon-button* {:variant "ghost"
+                           :aria-label (tr "labels.options")
+                           :on-click on-toggle-options
+                           :icon "menu"}])]

      [:div {:class (stl/css :content)}
       (if @edition?
--- a/frontend/src/app/main/ui/comments.scss
+++ b/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 {
--- a/frontend/src/app/main/ui/ds/buttons/icon_button.cljs
+++ b/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]))
--- a/frontend/src/app/main/ui/workspace/comments.cljs
+++ b/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)
-                :on-click close-section}
-       i/close]]
+      [:> icon-button* {:variant "ghost"
+                        :aria-label (tr "labels.close")
+                        :on-click close-section
+                        :icon "close"}]]

     [:button {:class (stl/css :mode-dropdown-wrapper)
               :on-click toggle-mode-selector}
--- a/frontend/src/app/main/ui/workspace/comments.scss
+++ b/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;
--- a/frontend/src/app/main/ui/workspace/main_menu.cljs
+++ b/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
-            :class (stl/css :menu-btn)} i/menu]
+     [:> icon-button* {:variant "ghost"
+                       :aria-label (tr "shortcut-subsection.main-menu")
+                       :on-click open-menu
+                       :icon "menu"}]

     [:& dropdown-menu {:show show-menu?
                        :on-close close-menu
--- a/frontend/src/app/main/ui/workspace/main_menu.scss
+++ b/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;
--- a/frontend/src/app/main/ui/workspace/plugins.cljs
+++ b/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)
-               :on-click handle-delete-click} i/delete]]))
+     [:> icon-button* {:variant "ghost"
+                       :aria-label (tr "workspace.plugins.remove-plugin")
+                       :on-click handle-delete-click
+                       :icon "delete"}]]))

 (mf/defc plugin-management-dialog
  {::mf/register modal/components
--- a/frontend/src/app/main/ui/workspace/plugins.scss
+++ b/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;
--- a/frontend/src/app/main/ui/workspace/right_header.cljs
+++ b/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)
-                   :on-click on-decrease}
-          [:span {:class (stl/css :zoom-icon)}
-           i/remove-icon]]
+         [:> icon-button* {:variant "ghost"
+                           :aria-label (tr "shortcuts.decrease-zoom")
+                           :on-click on-decrease
+                           :icon "remove"}]
         [:p {:class (stl/css :zoom-text)} zoom]
-         [:button {:class (stl/css :zoom-btn)
-                   :on-click on-increase}
-          [:span {:class (stl/css :zoom-icon)}
-           i/add]]]
+         [:> icon-button* {:variant "ghost"
+                           :aria-label (tr "shortcuts.increase-zoom")
+                           :on-click on-increase
+                           :icon "add"}]]
        [:button {:class (stl/css :reset-btn)
                  :on-click on-zoom-reset}
         (tr "workspace.header.reset-zoom")]]
--- a/frontend/src/app/main/ui/workspace/right_header.scss
+++ b/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%;
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
+++ b/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)
-                 :title (tr "workspace.assets.sort")
-                 :on-click toggle-ordering}
-        (if reverse-sort?
-          i/asc-sort
-          i/desc-sort)]]]
+       [:> icon-button* {:variant "ghost"
+                         :aria-label (tr "workspace.assets.sort")
+                         :on-click toggle-ordering
+                         :icon (if reverse-sort? "asc-sort" "desc-sort")}]]]

     [:& (mf/provider cmm/assets-filters) {:value filters}
      [:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering}
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss
+++ b/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);
-  }
-}
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
+++ b/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)
-                    :on-click add-color-clicked}
-           i/add])])
+          [:> icon-button* {:variant "ghost"
+                            :aria-label (tr "workspace.assets.colors.add-color")
+                            :on-click add-color-clicked
+                            :icon "add"}])])


     [:& cmm/asset-section-block {:role :content}
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
+++ b/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;
 }
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
+++ b/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
-               :class (stl/css :add-component)}
-         i/add
+        [:> icon-button* {:variant "ghost"
+                          :aria-label (tr "workspace.assets.components.add-component")
+                          :on-click add-component
+                          :icon "add"}
         [:& file-uploader {:accept cm/str-image-types
                            :multi true
                            :ref input-ref
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
+++ b/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;
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs
+++ b/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)
-                     :on-click add-typography}
-            i/add])])
+           [:> icon-button* {:variant "ghost"
+                             :aria-label (tr "workspace.assets.typography.add-typography")
+                             :on-click add-typography
+                             :icon "add"}])])

      [:& cmm/asset-section-block {:role :content}
       [:& typographies-group {:file-id file-id
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss
+++ b/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;
 }
--- a/frontend/src/app/main/ui/workspace/sidebar/debug.cljs
+++ b/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}
-       i/close]]
+      [:> icon-button* {:variant "ghost"
+                        :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)]
--- a/frontend/src/app/main/ui/workspace/sidebar/debug.scss
+++ b/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;
--- a/frontend/src/app/main/ui/workspace/sidebar/history.cljs
+++ b/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)
-             :on-click toggle-history}
-       i/close]]
+      [:> icon-button* {:variant "ghost"
+                        :aria-label (tr "labels.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]
--- a/frontend/src/app/main/ui/workspace/sidebar/history.scss
+++ b/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;
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
+++ b/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)
-                     :on-click toggle-search}
-            i/close]]
+           [:> icon-button* {:variant "ghost"
+                             :aria-label (tr "labels.close")
+                             :on-click toggle-search
+                             :icon "close"}]]

          [:div {:class (stl/css :active-filters)}
           (for [fkey current-filters]
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss
+++ b/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);
-      }
-    }
  }
 }

--- a/frontend/src/app/main/ui/workspace/sidebar/options.scss
+++ b/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;
 }
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs
+++ b/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)
-                   :data-testid "add-blur"
-                   :on-click handle-add} i/add])]]
+         [:> icon-button* {:variant "ghost"
+                           :aria-label (tr "workspace.options.blur-options.add-blur")
+                           :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)
-                    :on-click handle-toggle-visibility}
-           (if hidden?
-             i/hide
-             i/shown)]
-          [:button {:class (stl/css :action-btn)
-                    :on-click handle-delete} i/remove-icon]]]
+          [:> icon-button* {:variant "ghost"
+                            :aria-label (tr "workspace.options.blur-options.toggle-blur")
+                            :on-click handle-toggle-visibility
+                            :icon (if hidden? "hide" "shown")}]
+          [:> icon-button* {:variant "ghost"
+                            :aria-label (tr "workspace.options.blur-options.remove-blur")
+                            :on-click handle-delete
+                            :icon "remove"}]]]
        (when more-options?
          [:div {:class (stl/css :second-row)}
           [:label {:class (stl/css :label)
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
+++ b/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 {
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
+++ b/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]
-           (let [remove-fill-by-index (fn [values index] (->> (d/enumerate values)
+         (fn [event]
+           (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)
-                 :on-click add-export}
-        i/add]]]
+       [:> icon-button* {:variant "ghost"
+                         :aria-label (tr "workspace.options.export.add-export")
+                         :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)
-                      :on-click on-remove-all}
-             i/remove-icon]]]
+            [:> icon-button* {:variant "ghost"
+                              :aria-label (tr "workspace.options.export.remove-export")
+                              :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)
-                        :on-click (partial delete-export index)}
-               i/remove-icon]])])
+              [:> icon-button* {:variant "ghost"
+                                :aria-label (tr "workspace.options.export.remove-export")
+                                :on-click delete-export
+                                :data-value index
+                                :icon "remove"}]])])

        (when (or (= :multiple exports) (seq exports))
          [:button
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
+++ b/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 {
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
+++ b/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)
-                   :data-testid "add-fill"
-                   :on-click on-add} i/add])]]
+         [:> icon-button* {:variant "ghost"
+                           :aria-label (tr "workspace.options.fill.add-fill")
+                           :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
-                     :class (stl/css :remove-btn)}
-            i/remove-icon]]
+           [:> icon-button* {:variant "ghost"
+                             :aria-label (tr "workspace.options.fill.remove-fill")
+                             :on-click on-remove-all
+                             :icon "remove"}]]

          (seq fills)
          [:& h/sortable-container {}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss
+++ b/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;
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
+++ b/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)
-                 :on-click handle-toggle-visibility}
-        (if display i/shown i/hide)]
-       [:button {:class (stl/css :action-btn)
-                 :on-click on-remove}
-        i/remove-icon]]]
+       [:> icon-button* {:variant "ghost"
+                         :aria-label (tr "workspace.options.guides.toggle-guide")
+                         :on-click handle-toggle-visibility
+                         :icon (if display "shown" "hide")}]
+       [:> icon-button* {:variant "ghost"
+                         :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
-                 :class (stl/css :add-grid)}
-       i/add]]
+      [:> icon-button* {:variant "ghost"
+                        :aria-label (tr "workspace.options.guides.add-guide")
+                        :on-click handle-create-grid
+                        :icon "add"}]]

     (when (and open? (seq frame-grids))
       [:div  {:class (stl/css :element-set-content)}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
+++ b/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;
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+++ b/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)
-               :on-click remove-flow}
-      i/remove-icon]]))
+     [:> icon-button* {:variant "ghost"
+                       :aria-label (tr "workspace.options.flows.remove-flow")
+                       :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)
-                    :title (tr  "workspace.options.flows.add-flow-start")
-                    :on-click add-flow}
-           i/add])]
+          [:> icon-button* {:variant "ghost"
+                            :aria-label (tr "workspace.options.flows.add-flow-start")
+                            :on-click add-flow
+                            :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)
-                    :on-click add-interaction}
-           i/add]]])
+          [:> icon-button* {:variant "ghost"
+                            :aria-label (tr "workspace.options.interactions.add-interaction")
+                            :on-click add-interaction
+                            :icon "add"}]]])

      (when (= (count interactions) 0)
        [:div {:class (stl/css :help-content)}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
+++ b/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;
-  }
-}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
+++ b/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
-                   :class (stl/css :hidden-btn)} i/shown]
+         [:> icon-button* {:variant "ghost"
+                           :aria-label (tr "workspace.options.layer-options.toggle-layer")
+                           :on-click handle-set-hidden
+                           :icon "shown"}]

         :else
-         [:button {:on-click handle-set-visible
-                   :class (stl/css :hidden-btn)} i/hide])
+         [:> icon-button* {:variant "ghost"
+                           :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
-                   :class (stl/css :lock-btn)} i/unlock]
+         [:> icon-button* {:variant "ghost"
+                           :aria-label (tr "workspace.shape.menu.lock")
+                           :on-click handle-set-blocked
+                           :icon "unlock"}]

         :else
-         [:button {:on-click handle-set-unblocked
-                   :class (stl/css-case :lock-btn true
-                                        :locked blocked?)} i/lock])]]]))
+         [:> icon-button* {:variant "ghost"
+                           :aria-label (tr "workspace.shape.menu.unlock")
+                           :on-click handle-set-unblocked
+                           :icon "lock"}])]]]))
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss
+++ b/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 {
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
+++ b/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)
-               :on-click #(remove-element type index)}
-      i/remove-icon]]))
+     [:> icon-button* {:variant "ghost"
+                       :aria-label (tr "workspace.shape.menu.delete")
+                       :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)
-                       :aria-label "Add"
-                       :on-click on-toggle-dropdown-visibility}
-              i/menu]
+             [:> icon-button* {:variant "ghost"
+                               :aria-label (tr "workspace.shape.menu.add-layout")
+                               :on-click on-toggle-dropdown-visibility
+                               :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)
-                      :on-click on-remove-layout}
-             i/remove-icon])]
+            [:> icon-button* {:variant "ghost"
+                              :aria-label (tr "workspace.shape.menu.remove-layout")
+                              :on-click on-remove-layout
+                              :icon "remove"}])]

         [:div {:class (stl/css :title-actions)}
          (if ^boolean grid-enabled?
            [:*
-             [:button {:class (stl/css :add-layout)
-                       :on-click on-toggle-dropdown-visibility}
-              i/add]
+             [:> icon-button* {:variant "ghost"
+                               :aria-label (tr "workspace.shape.menu.add-layout")
+                               :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)
-                      :on-click on-remove-layout}
-             i/remove-icon])])]]
+            [:> icon-button* {:variant "ghost"
+                              :aria-label (tr "workspace.shape.menu.delete")
+                              :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
-                     :class (stl/css :help-button)}
-            i/help]]
+           [:> icon-button* {:variant "ghost"
+                             :aria-label (tr "labels.help-center")
+                             :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
-                       :class (stl/css :help-button)} i/help]])
+             [:> icon-button* {:variant "ghost"
+                               :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]
-           (st/emit! (dwsl/remove-layout-track ids type index))))
+         (fn [event]
+           (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
-                :class (stl/css :help-button)} i/help]
+      [:> icon-button* {:variant "ghost"
+                        :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
-                :class (stl/css :locate-button)
-                :title (tr "workspace.layout_grid.editor.top-bar.locate.tooltip")}
-       i/locate]]
+      [:> icon-button* {:variant "ghost"
+                        :class (stl/css :locate-button)
+                        :aria-label (tr "workspace.layout_grid.editor.top-bar.locate.tooltip")
+                        :on-click handle-locate-grid
+                        :icon "locate"}]]

     [:div {:class (stl/css :row)}
      [:& gap-section {:on-change on-gap-change
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
+++ b/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;
-      .help-button {
-        position: absolute;
-        top: 0;
-        right: 0;
-      }
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
    }
  }
 }
@ -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;
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
+++ b/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)
-                  :on-click toggle-visibility}
-         (if hidden?
-           i/hide
-           i/shown)]
-        [:button {:class (stl/css :action-btn)
-                  :on-click on-remove-shadow}
-         i/remove-icon]]]
+        [:> icon-button* {:variant "ghost"
+                          :aria-label (tr "workspace.options.shadow-options.toggle-shadow")
+                          :on-click toggle-visibility
+                          :icon (if hidden? "hide" "shown")}]
+        [:> icon-button* {:variant "ghost"
+                          :aria-label (tr "workspace.options.shadow-options.remove-shadow")
+                          :on-click on-remove-shadow
+                          :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)
-                   :data-testid "add-shadow"
-                   :on-click on-add-shadow} i/add])]]
+         [:> icon-button* {:variant "ghost"
+                           :aria-label (tr "workspace.options.shadow-options.add-shadow")
+                           :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)
-                      :on-click on-remove-all}
-             i/remove-icon]]]]
+            [:> icon-button* {:variant "ghost"
+                              :aria-label (tr "workspace.options.shadow-options.remove-shadow")
+                              :on-click on-remove-all
+                              :icon "remove"}]]]]

         (seq shadows)
         [:& h/sortable-container {}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss
+++ b/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;
 }
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
+++ b/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)
-                   :data-testid "add-stroke"
-                   :on-click on-add-stroke} i/add])]]
+         [:> icon-button* {:variant "ghost"
+                           :aria-label (tr "workspace.options.stroke.add-stroke")
+                           :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
-                     :class (stl/css :remove-btn)}
-            i/remove-icon]]
+           [:> icon-button* {:variant "ghost"
+                             :aria-label (tr "workspace.options.stroke.remove-stroke")
+                             :on-click handle-remove-all
+                             :icon "remove"}]]
          (seq strokes)
          [:& h/sortable-container {}
           (for [[index value] (d/enumerate (:strokes values []))]
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss
+++ b/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;
-  }
-}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
+++ b/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)
-                   :on-click on-convert-to-typography}
-          i/add])]]
+         [:> icon-button* {:variant "ghost"
+                           :aria-label (tr "labels.options")
+                           :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)
-                   :on-click toggle-more-options}
-          i/menu]]
+         [:> icon-button* {:variant "ghost"
+                           :aria-label (tr "labels.options")
+                           :on-click toggle-more-options
+                           :icon "menu"}]]

        (when more-options-open?
          [:div  {:class (stl/css :text-decoration-options)}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
+++ b/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;
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/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)
-                 :on-click on-remove} i/remove-icon])
+       [:> icon-button* {:variant "ghost"
+                         :aria-label (tr "settings.remove-color")
+                         :on-click on-remove
+                         :icon "remove"}])
     (when select-only
-       [:button {:class (stl/css :select-btn)
-                 :title (tr "settings.select-this-color")
-                 :on-click handle-select}
-        i/move])]))
+       [:> icon-button* {:variant "ghost"
+                         :aria-label (tr "settings.select-this-color")
+                         :on-click handle-select
+                         :icon "move"}])]))

--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
+++ b/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;
-  }
-}
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
+++ b/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)
-                  :on-click on-create}
-         i/add])]
+        [:> icon-button* {:variant "ghost"
+                          :class (stl/css :add-page)
+                          :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)}]]]))
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
+++ b/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);
--- a/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs
+++ b/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]]]))
-
--- a/frontend/translations/en.po
+++ b/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"
--- a/frontend/translations/es.po
+++ b/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"