From 47031269a4fd30f77eae52b18db6166754f56ea4 Mon Sep 17 00:00:00 2001
From: Bor <borkolar95@gmail.com>
Date: Tue, 14 Jul 2026 17:28:29 +0200
Subject: [PATCH] Add icon-aware button padding, radius and icon sizes
 [SCI-13284]

Restyle design-system buttons to match the Core Design Figma spec:
- Border radius 4px -> 8px across all sizes
- Size-specific icon sizes (24/24/20/16 for lg/md/sm/xs)
- Size-specific gaps and horizontal padding
- Icon-aware padding: a leading (left) icon reduces the left padding
  while the text side keeps the larger padding; no icon = symmetric

Co-Authored-By: WOZCODE <contact@withwoz.com>
---
 app/assets/stylesheets/tailwind/buttons.css | 42 ++++++++++++++++++---
 app/views/design_elements/_button.html.erb  |  4 --
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/tailwind/buttons.css b/app/assets/stylesheets/tailwind/buttons.css
index 47bccef221..6d43ec0424 100644
--- a/app/assets/stylesheets/tailwind/buttons.css
+++ b/app/assets/stylesheets/tailwind/buttons.css
@@ -3,35 +3,67 @@
     @apply inline-flex items-center gap-2 relative;
   }
 
+  /* Medium (default). Size, radius, icon size and icon-aware padding follow
+     the Core Design system spec and are identical across all button types. */
   .btn {
-    @apply relative inline-flex items-center text-sm shrink-0 gap-2 justify-center px-4 rounded border border-solid appearance-none whitespace-nowrap cursor-pointer h-[40px];
+    @apply relative inline-flex items-center text-sm shrink-0 gap-[6px] justify-center px-4 rounded-lg border border-solid appearance-none whitespace-nowrap cursor-pointer h-[40px];
     border-color: transparent;
   }
 
+  /* Icon-aware padding: a leading (left) icon gets less padding on its side than
+     the text side. Buttons in this system only ever have a left icon or no icon,
+     so matching the first child is enough — no label wrapper or side class needed. */
+  .btn:not(.icon-btn):has(> .sn-icon:first-child) {
+    @apply pl-2;
+  }
+
   .btn.icon-btn {
     @apply px-2 ;
   }
 
   .btn.btn-lg {
-    @apply px-[1.125rem] text-base h-[44px];
+    @apply px-6 text-base h-[44px] gap-2;
+  }
+
+  .btn.btn-lg:not(.icon-btn):has(> .sn-icon:first-child) {
+    @apply pl-4;
   }
 
+
   .btn.btn-lg.icon-btn {
     @apply px-2.5;
   }
 
   .btn.btn-sm {
-    @apply px-2.5 text-xs h-[36px];
+    @apply px-3 text-xs h-[36px] gap-1;
+  }
+
+  .btn.btn-sm .sn-icon {
+    @apply !text-[20px];
   }
 
+  .btn.btn-sm:not(.icon-btn):has(> .sn-icon:first-child) {
+    @apply pl-2;
+  }
+
+
   .btn.btn-sm.icon-btn {
-    @apply px-1.5;
+    @apply px-2;
   }
 
   .btn.btn-xs {
-    @apply px-2.5 text-xs h-[30px];
+    @apply px-2 text-xs h-[30px] gap-1;
+  }
+
+  .btn.btn-xs .sn-icon {
+    @apply !text-[16px];
   }
 
+  .btn.btn-xs:not(.icon-btn):has(> .sn-icon:first-child) {
+    @apply pl-1.5;
+  }
+
+
   .btn.btn-xs.icon-btn {
     @apply px-0.5 w-[30px];
   }
diff --git a/app/views/design_elements/_button.html.erb b/app/views/design_elements/_button.html.erb
index 8069b0f0f0..b126776464 100644
--- a/app/views/design_elements/_button.html.erb
+++ b/app/views/design_elements/_button.html.erb
@@ -33,10 +33,6 @@
               <i class="sn-icon sn-icon-<%= icons_list.sample %>"></i>
               Button
             </button>
-            <button class="btn <%= type_class %> <%= size_class %>">
-              Button
-              <i class="sn-icon sn-icon-<%= icons_list.sample %>"></i>
-            </button>
             <button class="btn <%= type_class %> <%= size_class %>" disabled="true">
               Button
             </button>