Pre-launch design sync with Figma spec (#2154)

* Add lookbook + viewcomponent, organize design system file

* Build menu component

* Button updates

* More button fixes

* Replace all menus with new ViewComponent

* Checkpoint: fix tests, all buttons and menus converted

* Split into Link and Button components for clarity

* Button cleanup

* Simplify custom confirmation configuration in views

* Finalize button, link component API

* Add toggle field to custom form builder + Component

* Basic tabs component

* Custom tabs, convert all menu / tab instances in app

* Gem updates

* Centralized icon helper

* Update all icon usage to central helper

* Lint fixes

* Centralize all disclosure instances

* Dialog replacements

* Consolidation of all dialog styles

* Test fixes

* Fix app layout issues, move to component with slots

* Layout simplification

* Flakey test fix

* Fix dashboard mobile issues

* Finalize homepage

* Lint fixes

* Fix shadows and borders in dark mode

* Fix tests

* Remove stale class

* Fix filled icon logic

* Move transparent? to public interface

app/views/rule/actions/_action.html.erb

@@ -19,9 +19,9 @@
     <% end %>
   </div>
 
-  <button type="button"
-          data-action="rule--actions#remove"
-          data-rule--actions-destroy-param="<%= action.persisted? %>">
-    <%= icon("trash-2", color: "gray", size: "sm") %>
-  </button>
+  <%= icon(
+    "trash-2",
+    size: "sm",
+    as_button: true,
+    data: { action: "rule--actions#remove", rule__actions_destroy_param: action.persisted? }) %>
 </li>

app/views/rule/conditions/_condition.html.erb

@@ -32,9 +32,10 @@
     </div>
   </div>
 
-  <button type="button"
-          data-action="rule--conditions#remove"
-          data-rule--conditions-destroy-param="<%= condition.persisted? %>">
-    <%= icon("trash-2", color: "gray", size: "sm") %>
-  </button>
+  <%= icon(
+    "trash-2",
+    as_button: true,
+    size: "sm",
+    data: { action: "rule--conditions#remove", rule__conditions_destroy_param: condition.persisted? }
+  ) %>
 </li>

app/views/rule/conditions/_condition_group.html.erb

@@ -19,9 +19,12 @@
       <p class="text-sm text-secondary">of the following conditions</p>
     </div>
 
-    <button type="button" data-action="element-removal#remove">
-      <%= icon("trash-2", color: "gray", size: "sm") %>
-    </button>
+    <%= icon(
+      "trash-2",
+      size: "sm",
+      as_button: true,
+      data: { action: "element-removal#remove" }
+    ) %>
   </div>
 
   <%# Sub-condition template, used by Stimulus controller to add new sub-conditions dynamically %>
@@ -37,8 +40,10 @@
     <% end %>
   </ul>
 
-  <button type="button" class="btn btn--ghost" data-action="rule--conditions#addSubCondition">
-    <%= icon("plus", color: "gray", size: "sm") %>
-    <span>Add condition</span>
-  </button>
+  <%= render ButtonComponent.new(
+    text: "Add condition",
+    leading_icon: "plus",
+    variant: "ghost",
+    data: { action: "rule--conditions#addSubCondition" }
+  ) %>
 </li>