Update styles for buttons - Segmented controls - alerts

- Buttons: Change padding between icons/text - Segmented control: Change default height of each size - Alerts: Change gap between buttons
brave · Oct 7, 2024 · d97cea7 · d97cea7
1 parent 4c11d2c
commit d97cea7
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git a/src/components/alert/alert.svelte b/src/components/alert/alert.svelte
@@ -72,7 +72,7 @@
   .leo-alert .actions ::slotted(*) {
     display: flex;
     flex-direction: row;
-    gap: var(--leo-spacing-xl);
+    gap: var(--leo-spacing-s);
   }
   .leo-alert {
     --leo-icon-color: var(--leo-alert-icon-color, var(--default-icon-color));

diff --git a/src/components/button/button.svelte b/src/components/button/button.svelte
@@ -238,10 +238,10 @@
     font: var(--leo-font-components-button-small);
     min-height: 28px;
     --padding-y: var(--leo-spacing-s);
-    --padding-x: var(--leo-spacing-m);
+    --padding-x: var(--leo-spacing-s);
     --radius: var(--leo-radius-m);
     --leo-icon-size: var(--leo-icon-xs);
-    --icon-gap: var(--leo-spacing-m);
+    --icon-gap: var(--leo-spacing-s);
 
     &.fab {
       min-height: 0;
@@ -253,10 +253,10 @@
     font: var(--leo-font-components-button-small);
     min-height: 36px;
     --padding-y: var(--leo-spacing-m);
-    --padding-x: var(--leo-spacing-l);
+    --padding-x: var(--leo-spacing-m);
     --radius: var(--leo-radius-m);
     --leo-icon-size: var(--leo-icon-s);
-    --icon-gap: var(--leo-spacing-m);
+    --icon-gap: var(--leo-spacing-s);
 
     &.fab {
       min-height: 0;
@@ -270,7 +270,7 @@
     --padding-x: var(--leo-spacing-xl);
     --radius: var(--leo-radius-l);
     --leo-icon-size: var(--leo-icon-m);
-    --icon-gap: var(--leo-spacing-m);
+    --icon-gap: var(--leo-spacing-s);
 
     &.fab {
       min-height: 0;
@@ -285,7 +285,7 @@
     --padding-x: var(--leo-spacing-xl);
     --radius: var(--leo-radius-xl);
     --leo-icon-size: var(--leo-icon-m);
-    --icon-gap: 10px;
+    --icon-gap: var(--leo-spacing-s);
 
     &.fab {
       min-height: 0;
@@ -300,7 +300,7 @@
     --padding-x: var(--leo-spacing-xl);
     --radius: var(--leo-radius-xl);
     --leo-icon-size: var(--leo-icon-l);
-    --icon-gap: var(--leo-spacing-l);
+    --icon-gap: var(--leo-spacing-m);
 
     &.fab {
       min-height: 0;

diff --git a/src/components/segmentedControl/segmentedControl.svelte b/src/components/segmentedControl/segmentedControl.svelte
@@ -119,10 +119,10 @@
     --bg: var(--leo-color-neutral-10);
     --control-padding: var(--leo-control-padding, var(--leo-spacing-s));
     --gap: var(--leo-spacing-s);
-    --control-height: 44px;
+    --control-height: 36px;
     --radius: var(--leo-radius-xl);
 
-    --leo-control-item-padding: var(--leo-spacing-xl);
+    --leo-control-item-padding: var(--leo-spacing-l);
     --leo-control-item-icon-gap: var(--leo-spacing-m);
     --leo-control-item-font: var(--leo-font-components-button-default);
 
@@ -140,19 +140,19 @@
 
     &.size-small {
       --leo-icon-size: var(--leo-icon-s);
-      --control-height: 36px;
+      --control-height: 28px;
       --radius: var(--leo-radius-xl);
-      --leo-control-item-padding: var(--leo-spacing-l);
+      --leo-control-item-padding: var(--leo-spacing-m);
       --leo-control-item-font: var(--leo-font-components-button-small);
     }
 
     &.size-tiny {
       --leo-icon-size: var(--leo-icon-xs);
       --control-padding: var(--leo-control-padding, var(--leo-spacing-xs));
       --gap: var(--leo-spacing-xs);
-      --control-height: 28px;
+      --control-height: 24px;
       --radius: var(--leo-radius-m);
-      --leo-control-item-padding: var(--leo-spacing-m);
+      --leo-control-item-padding: var(--leo-spacing-s);
       --leo-control-item-font: var(--leo-font-components-button-small);
     }