From 0be3c51b1d17b7598bf8ffecb6c8a9f9adc63e7a Mon Sep 17 00:00:00 2001
From: imagoiq <{ID}+{username}@users.noreply.github.com>
Date: Tue, 25 Jul 2023 16:47:34 +0200
Subject: [PATCH 1/5] feat(styles): update buttons padding, gap and
 border-radius

---
 packages/styles/src/mixins/_button.scss        |  2 +-
 packages/styles/src/variables/_commons.scss    |  2 +-
 .../src/variables/components/_button.scss      | 18 ++++++++++++++----
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/styles/src/mixins/_button.scss b/packages/styles/src/mixins/_button.scss
index ee8dae85b0..981febd91e 100644
--- a/packages/styles/src/mixins/_button.scss
+++ b/packages/styles/src/mixins/_button.scss
@@ -21,7 +21,7 @@
 @mixin button-size($size: md) {
   min-height: map.get(button.$btn-height-map, $size);
   font-size: map.get(button.$btn-font-size-map, $size);
-  gap: map.get(button.$btn-padding-x-map, $size) * 0.5;
+  gap: map.get(button.$btn-gap-x-map, $size);
 
   &:where(:not(.btn-link, .btn-tertiary)) {
     padding: 0 map.get(button.$btn-padding-x-map, $size);
diff --git a/packages/styles/src/variables/_commons.scss b/packages/styles/src/variables/_commons.scss
index 0f994b8f29..26d61107c8 100644
--- a/packages/styles/src/variables/_commons.scss
+++ b/packages/styles/src/variables/_commons.scss
@@ -7,7 +7,7 @@ $border-width: 1px !default;
 $border-thick: 2px !default;
 $border-color: color.$gray-20 !default;
 
-$border-radius: 3px !default;
+$border-radius: 4px !default;
 $border-radius-sm: $border-radius !default;
 $border-radius-rg: $border-radius !default;
 $border-radius-lg: $border-radius !default;
diff --git a/packages/styles/src/variables/components/_button.scss b/packages/styles/src/variables/components/_button.scss
index 53bfc16950..118326acde 100644
--- a/packages/styles/src/variables/components/_button.scss
+++ b/packages/styles/src/variables/components/_button.scss
@@ -39,7 +39,8 @@ $btn-animation-distance-factor: 0.5 !default;
 
 // sm
 $btn-padding-y-sm: spacing.$size-mini !default;
-$btn-padding-x-sm: spacing.$size-regular !default;
+$btn-padding-x-sm: sizing.px-to-rem(12) !default;
+$btn-gap-x-sm: sizing.px-to-rem(6) !default;
 $btn-animation-distance-sm: spacing.$size-mini !default;
 // Design System only
 $btn-height-sm: 2rem;
@@ -48,7 +49,8 @@ $btn-icon-size-sm: spacing.$size-regular !default;
 
 // rg
 $btn-padding-y-rg: spacing.$size-small-regular !default;
-$btn-padding-x-rg: spacing.$size-large !default;
+$btn-padding-x-rg: sizing.px-to-rem(14) !default;
+$btn-gap-x-rg: sizing.px-to-rem(8) !default;
 $btn-animation-distance-rg: 0.625rem !default;
 // Design System only
 $btn-height-rg: 2.5rem;
@@ -57,7 +59,8 @@ $btn-icon-size-rg: 1.125rem !default;
 
 // md
 $btn-padding-y-md: spacing.$size-regular !default;
-$btn-padding-x-md: spacing.$size-big !default;
+$btn-padding-x-md: sizing.px-to-rem(16) !default;
+$btn-gap-x-md: sizing.px-to-rem(10) !default;
 $btn-animation-distance-md: spacing.$size-small-regular !default;
 // Design System only
 $btn-height-md: 3rem;
@@ -66,7 +69,8 @@ $btn-icon-size-md: spacing.$size-small-large !default;
 
 // lg
 $btn-padding-y-lg: spacing.$size-small-large !default;
-$btn-padding-x-lg: spacing.$size-bigger-big !default;
+$btn-padding-x-lg: sizing.px-to-rem(18) !default;
+$btn-gap-x-lg: sizing.px-to-rem(12) !default;
 $btn-animation-distance-lg: spacing.$size-regular !default;
 // Design System only
 $btn-height-lg: 3.5rem;
@@ -94,6 +98,12 @@ $btn-padding-x-map: (
   'md': $btn-padding-x-md,
   'lg': $btn-padding-x-lg,
 );
+$btn-gap-x-map: (
+  'sm': $btn-gap-x-sm,
+  'rg': $btn-gap-x-rg,
+  'md': $btn-gap-x-md,
+  'lg': $btn-gap-x-lg,
+);
 $btn-height-map: (
   'sm': $btn-height-sm,
   'rg': $btn-height-rg,

From 8e46a7b80ad1d03995ba5803be953d6819f952f7 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Thu, 27 Jul 2023 10:28:25 +0200
Subject: [PATCH 2/5] Set animation-distance to size-mini for all btn sizes to
 better accomodate new padding

---
 packages/styles/src/variables/components/_button.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/styles/src/variables/components/_button.scss b/packages/styles/src/variables/components/_button.scss
index 118326acde..b1d799c9e4 100644
--- a/packages/styles/src/variables/components/_button.scss
+++ b/packages/styles/src/variables/components/_button.scss
@@ -51,7 +51,7 @@ $btn-icon-size-sm: spacing.$size-regular !default;
 $btn-padding-y-rg: spacing.$size-small-regular !default;
 $btn-padding-x-rg: sizing.px-to-rem(14) !default;
 $btn-gap-x-rg: sizing.px-to-rem(8) !default;
-$btn-animation-distance-rg: 0.625rem !default;
+$btn-animation-distance-rg: spacing.$size-mini !default;
 // Design System only
 $btn-height-rg: 2.5rem;
 $btn-font-size-rg: type.$font-size-14 !default;
@@ -61,7 +61,7 @@ $btn-icon-size-rg: 1.125rem !default;
 $btn-padding-y-md: spacing.$size-regular !default;
 $btn-padding-x-md: sizing.px-to-rem(16) !default;
 $btn-gap-x-md: sizing.px-to-rem(10) !default;
-$btn-animation-distance-md: spacing.$size-small-regular !default;
+$btn-animation-distance-md: spacing.$size-mini !default;
 // Design System only
 $btn-height-md: 3rem;
 $btn-font-size-md: type.$font-size-16 !default;
@@ -71,7 +71,7 @@ $btn-icon-size-md: spacing.$size-small-large !default;
 $btn-padding-y-lg: spacing.$size-small-large !default;
 $btn-padding-x-lg: sizing.px-to-rem(18) !default;
 $btn-gap-x-lg: sizing.px-to-rem(12) !default;
-$btn-animation-distance-lg: spacing.$size-regular !default;
+$btn-animation-distance-lg: spacing.$size-mini !default;
 // Design System only
 $btn-height-lg: 3.5rem;
 $btn-font-size-lg: type.$font-size-18 !default;

From 152f041f3b34c6881516ed764806a7927a2d53ee Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Thu, 27 Jul 2023 11:02:51 +0200
Subject: [PATCH 3/5] Change icon size for large button

---
 packages/styles/src/variables/components/_button.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styles/src/variables/components/_button.scss b/packages/styles/src/variables/components/_button.scss
index b1d799c9e4..4770c034ef 100644
--- a/packages/styles/src/variables/components/_button.scss
+++ b/packages/styles/src/variables/components/_button.scss
@@ -75,7 +75,7 @@ $btn-animation-distance-lg: spacing.$size-mini !default;
 // Design System only
 $btn-height-lg: 3.5rem;
 $btn-font-size-lg: type.$font-size-18 !default;
-$btn-icon-size-lg: spacing.$size-large !default;
+$btn-icon-size-lg: 1.375rem !default;
 
 // Available button sizes except the default, which is md
 $btn-non-default-sizes: sm, rg, lg !default;

From c609281c48c03b57617ef26cfe8cd5fbab21647a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?=
 <12294151+imagoiq@users.noreply.github.com>
Date: Thu, 3 Aug 2023 07:45:43 +0200
Subject: [PATCH 4/5] Add changeset

---
 .changeset/polite-radios-train.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/polite-radios-train.md

diff --git a/.changeset/polite-radios-train.md b/.changeset/polite-radios-train.md
new file mode 100644
index 0000000000..1d503f550d
--- /dev/null
+++ b/.changeset/polite-radios-train.md
@@ -0,0 +1,5 @@
+---
+"@swisspost/design-system-styles": patch
+---
+
+Update button styles: padding, gap and border-radius

From 6a0b5b904ae13303ac3641492f3257decd0368dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?=
 <12294151+imagoiq@users.noreply.github.com>
Date: Thu, 3 Aug 2023 09:51:00 +0200
Subject: [PATCH 5/5] Update .changeset/polite-radios-train.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .changeset/polite-radios-train.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/polite-radios-train.md b/.changeset/polite-radios-train.md
index 1d503f550d..ce58fbf98e 100644
--- a/.changeset/polite-radios-train.md
+++ b/.changeset/polite-radios-train.md
@@ -2,4 +2,4 @@
 "@swisspost/design-system-styles": patch
 ---
 
-Update button styles: padding, gap and border-radius
+Update button styles: padding, gap and border-radius.