From fd97857599350bbf1fd254d8da2f69ee91eb95ad Mon Sep 17 00:00:00 2001
From: ewsgit <ewsgit@ewsgit.uk>
Date: Tue, 9 Jun 2026 16:41:14 +0100
Subject: [PATCH] Button border-radius animation improvements

---
 src/components/button/UKButton.module.scss    |  65 ++++------
 .../iconButton/UKIconButton.module.scss       | 122 +++++++++++-------
 2 files changed, 103 insertions(+), 84 deletions(-)

diff --git a/src/components/button/UKButton.module.scss b/src/components/button/UKButton.module.scss
index e7d7d89..576dd42 100644
--- a/src/components/button/UKButton.module.scss
+++ b/src/components/button/UKButton.module.scss
@@ -1,9 +1,10 @@
 .root {
   padding-left: var(--padding-left-override, var(--padding-left, 0px));
   padding-right: var(--padding-right-override, var(--padding-right, 0px));
+  height: var(--button-height);
 
   transition:
-    all var(--uk-sys-motion-duration-50) var(--transition-all, linear),
+    all var(--uk-sys-motion-duration-50) var(--uk-sys-motion-easing-standard-decelerate),
     outline-color var(--uk-sys-motion-duration-100) var(--uk-sys-motion-easing-standard-decelerate),
     outline-width 0ms linear,
     background-color var(--uk-sys-motion-duration-100) var(--uk-sys-motion-easing-standard-normal),
@@ -68,7 +69,7 @@
     --padding-left: 8px;
     --padding-right: 8px;
 
-    height: 24px;
+    --button-height: 24px;
     border-width: 1px;
     gap: 8px;
     font-weight: var(--uk-ref-typeface-weight-medium);
@@ -80,22 +81,20 @@
 
     &[data-shape="square"] {
       border-radius: var(--uk-sys-shape-corner-medium);
-      --transition-all: var(--uk-sys-motion-easing-standard-accelerate);
 
       &:not(&[disabled]) {
         &:active {
-          border-radius: var(--uk-sys-shape-corner-full);
+          border-radius: calc(var(--button-height) / 2);
         }
       }
     }
 
-    &:not([data-shape="square"]) {
-      border-radius: 24px;
-      --transition-all: var(--uk-sys-motion-easing-standard-decelerate);
+    &[data-shape="round"] {
+      border-radius: calc(var(--button-height) / 2);
 
       &:not(&[disabled]) {
         &:active {
-          border-radius: var(--uk-sys-shape-corner-small);
+          border-radius: calc(var(--uk-sys-shape-corner-small) / 4);
         }
       }
     }
@@ -105,7 +104,7 @@
     --padding-left: 12px;
     --padding-right: 12px;
 
-    height: 32px;
+    --button-height: 32px;
     border-width: 1px;
     gap: 8px;
     font-weight: var(--uk-ref-typeface-weight-medium);
@@ -117,18 +116,16 @@
 
     &[data-shape="square"] {
       border-radius: var(--uk-sys-shape-corner-medium);
-      --transition-all: var(--uk-sys-motion-easing-standard-accelerate);
 
       &:not(&[disabled]) {
         &:active {
-          border-radius: var(--uk-sys-shape-corner-full);
+          border-radius: calc(var(--button-height) / 2);
         }
       }
     }
 
-    &:not([data-shape="square"]) {
-      border-radius: 32px;
-      --transition-all: var(--uk-sys-motion-easing-standard-decelerate);
+    &[data-shape="round"] {
+      border-radius: calc(var(--button-height) / 2);
 
       &:not(&[disabled]) {
         &:active {
@@ -142,7 +139,7 @@
     --padding-left: 16px;
     --padding-right: 16px;
 
-    height: 40px;
+    --button-height: 40px;
     border-width: 1px;
     gap: 8px;
     font-weight: var(--uk-ref-typeface-weight-medium);
@@ -154,18 +151,16 @@
 
     &[data-shape="square"] {
       border-radius: var(--uk-sys-shape-corner-medium);
-      --transition-all: var(--uk-sys-motion-easing-standard-accelerate);
 
       &:not(&[disabled]) {
         &:active {
-          border-radius: 40px;
+          border-radius: calc(var(--button-height) / 2);
         }
       }
     }
 
-    &:not([data-shape="square"]) {
-      border-radius: 40px;
-      --transition-all: var(--uk-sys-motion-easing-standard-decelerate);
+    &[data-shape="round"] {
+      border-radius: calc(var(--button-height) / 2);
 
       &:not(&[disabled]) {
         &:active {
@@ -179,7 +174,7 @@
     --padding-left: 24px;
     --padding-right: 24px;
 
-    height: 56px;
+    --button-height: 56px;
     border-width: 1px;
     gap: 8px;
     font-weight: var(--uk-ref-typeface-weight-medium);
@@ -191,18 +186,16 @@
 
     &[data-shape="square"] {
       border-radius: var(--uk-sys-shape-corner-large);
-      --transition-all: var(--uk-sys-motion-easing-standard-accelerate);
 
       &:not(&[disabled]) {
         &:active {
-          border-radius: 40px;
+          border-radius: calc(var(--button-height) / 2);
         }
       }
     }
 
-    &:not([data-shape="square"]) {
-      border-radius: 56px;
-      --transition-all: var(--uk-sys-motion-easing-standard-decelerate);
+    &[data-shape="round"] {
+      border-radius: calc(var(--button-height) / 2);
 
       &:not(&[disabled]) {
         &:active {
@@ -216,7 +209,7 @@
     --padding-left: 48px;
     --padding-right: 48px;
 
-    height: 96px;
+    --button-height: 96px;
     border-width: 2px;
     gap: 12px;
     font-weight: var(--uk-ref-typeface-weight-regular);
@@ -228,18 +221,16 @@
 
     &[data-shape="square"] {
       border-radius: var(--uk-sys-shape-corner-large);
-      --transition-all: var(--uk-sys-motion-easing-standard-accelerate);
 
       &:not(&[disabled]) {
         &:active {
-          border-radius: 40px;
+          border-radius: calc(var(--button-height) / 2);
         }
       }
     }
 
-    &:not([data-shape="square"]) {
-      border-radius: 96px;
-      --transition-all: var(--uk-sys-motion-easing-standard-decelerate);
+    &[data-shape="round"] {
+      border-radius: calc(var(--button-height) / 2);
 
       &:not(&[disabled]) {
         &:active {
@@ -253,7 +244,7 @@
     --padding-left: 64px;
     --padding-right: 64px;
 
-    height: 132px;
+    --button-height: 132px;
     border-width: 3px;
     gap: 16px;
     font-weight: var(--uk-ref-typeface-weight-regular);
@@ -265,18 +256,16 @@
 
     &[data-shape="square"] {
       border-radius: var(--uk-sys-shape-corner-extra-large);
-      --transition-all: var(--uk-sys-motion-easing-standard-accelerate);
 
       &:not(&[disabled]) {
         &:active {
-          border-radius: 40px;
+          border-radius: calc(var(--button-height) / 2);
         }
       }
     }
 
-    &:not([data-shape="square"]) {
-      border-radius: 132px;
-      --transition-all: var(--uk-sys-motion-easing-standard-decelerate);
+    &[data-shape="round"] {
+      border-radius: calc(var(--button-height) / 2);
 
       &:not(&[disabled]) {
         &:active {
diff --git a/src/components/iconButton/UKIconButton.module.scss b/src/components/iconButton/UKIconButton.module.scss
index b923cda..9245992 100644
--- a/src/components/iconButton/UKIconButton.module.scss
+++ b/src/components/iconButton/UKIconButton.module.scss
@@ -1,7 +1,7 @@
 .root {
   background-color: rgb(var(--uk-sys-color-primary));
   color: rgb(var(--uk-sys-color-on-primary));
-  height: 40px;
+  height: var(--button-height, 40px);
   border: none;
   --icon-size: 24px;
   overflow: hidden;
@@ -18,7 +18,7 @@
   padding-right: var(--padding-right-override, var(--padding-right, 0px));
 
   transition:
-    all var(--uk-sys-motion-duration-50) var(--transition-all, linear),
+    all var(--uk-sys-motion-duration-50) var(--uk-sys-motion-easing-standard-decelerate),
     outline-color var(--uk-sys-motion-duration-100) var(--uk-sys-motion-easing-standard-decelerate),
     outline-width 0ms linear,
     background-color var(--uk-sys-motion-duration-100) var(--uk-sys-motion-easing-standard-normal),
@@ -29,7 +29,7 @@
     margin-right var(--uk-sys-motion-duration-50) var(--uk-sys-motion-easing-linear),
     border-radius var(--border-radius-duration, var(--uk-sys-motion-duration-50)) var(--uk-sys-motion-easing-linear);
 
-  >img {
+  > img {
     display: block;
     width: var(--icon-size);
     height: var(--icon-size);
@@ -68,7 +68,7 @@
   }
 
   &[data-size="xxs"] {
-    height: 24px;
+    --button-height: 24px;
     border-width: 1px;
     --icon-size: 16px;
     --outline-width: 1px;
@@ -89,7 +89,7 @@
     }
 
     &[data-shape="round"] {
-      border-radius: 24px;
+      border-radius: calc(var(--button-height) / 2);
 
       &[data-selected="true"] {
         border-radius: var(--uk-sys-shape-corner-medium);
@@ -100,7 +100,7 @@
       border-radius: var(--uk-sys-shape-corner-medium);
 
       &[data-selected="true"] {
-        border-radius: 24px;
+        border-radius: calc(var(--button-height) / 2);
       }
     }
 
@@ -110,7 +110,7 @@
   }
 
   &[data-size="xs"] {
-    height: 32px;
+    --button-height: 32px;
     border-width: 1px;
     --icon-size: 20px;
     --outline-width: 1px;
@@ -131,7 +131,7 @@
     }
 
     &[data-shape="round"] {
-      border-radius: 24px;
+        border-radius: calc(var(--button-height) / 2);
 
       &[data-selected="true"] {
         border-radius: var(--uk-sys-shape-corner-medium);
@@ -142,7 +142,7 @@
       border-radius: var(--uk-sys-shape-corner-medium);
 
       &[data-selected="true"] {
-        border-radius: 24px;
+        border-radius: calc(var(--button-height) / 2);
       }
     }
 
@@ -152,7 +152,7 @@
   }
 
   &[data-size="s"] {
-    height: 40px;
+    --button-height: 40px;
     border-width: 1px;
     --icon-size: 24px;
     --outline-width: 1px;
@@ -173,7 +173,7 @@
     }
 
     &[data-shape="round"] {
-      border-radius: 40px;
+        border-radius: calc(var(--button-height) / 2);
 
       &[data-selected="true"] {
         border-radius: var(--uk-sys-shape-corner-medium);
@@ -184,7 +184,8 @@
       border-radius: var(--uk-sys-shape-corner-medium);
 
       &[data-selected="true"] {
-        border-radius: 40px;
+        border-radius: calc(var(--button-height) / 2);
+
       }
     }
 
@@ -194,7 +195,7 @@
   }
 
   &[data-size="m"] {
-    height: 56px;
+    --button-height: 56px;
     border-width: 1px;
     --icon-size: 24px;
     --outline-width: 1px;
@@ -215,7 +216,8 @@
     }
 
     &[data-shape="round"] {
-      border-radius: 56px;
+        border-radius: calc(var(--button-height) / 2);
+
 
       &[data-selected="true"] {
         border-radius: var(--uk-sys-shape-corner-large);
@@ -226,7 +228,8 @@
       border-radius: var(--uk-sys-shape-corner-large);
 
       &[data-selected="true"] {
-        border-radius: 56px;
+        border-radius: calc(var(--button-height) / 2);
+
       }
     }
 
@@ -236,7 +239,7 @@
   }
 
   &[data-size="l"] {
-    height: 96px;
+    --button-height: 96px;
     border-width: 2px;
     --icon-size: 32px;
     --outline-width: 2px;
@@ -257,7 +260,7 @@
     }
 
     &[data-shape="round"] {
-      border-radius: 96px;
+        border-radius: calc(var(--button-height) / 2);
 
       &[data-selected="true"] {
         border-radius: var(--uk-sys-shape-corner-extra-large);
@@ -268,7 +271,8 @@
       border-radius: var(--uk-sys-shape-corner-extra-large);
 
       &[data-selected="true"] {
-        border-radius: 96px;
+        border-radius: calc(var(--button-height) / 2);
+
       }
     }
 
@@ -278,7 +282,7 @@
   }
 
   &[data-size="xl"] {
-    height: 136px;
+    --button-height: 136px;
     border-width: 3px;
     --icon-size: 40px;
     --outline-width: 3px;
@@ -299,7 +303,8 @@
     }
 
     &[data-shape="round"] {
-      border-radius: 136px;
+        border-radius: calc(var(--button-height) / 2);
+
 
       &[data-selected="true"] {
         border-radius: var(--uk-sys-shape-corner-extra-large);
@@ -310,7 +315,8 @@
       border-radius: var(--uk-sys-shape-corner-extra-large);
 
       &[data-selected="true"] {
-        border-radius: 136px;
+        border-radius: calc(var(--button-height) / 2);
+
       }
     }
 
@@ -392,8 +398,10 @@
         color: rgb(var(--uk-sys-color-on-surface-variant));
 
         &::before {
-          background-color: rgb(var(--uk-sys-color-on-surface-variant),
-              var(--uk-sys-state-pressed-state-layer-opacity));
+          background-color: rgb(
+            var(--uk-sys-color-on-surface-variant),
+            var(--uk-sys-state-pressed-state-layer-opacity)
+          );
         }
       }
 
@@ -401,8 +409,10 @@
         color: rgb(var(--uk-sys-color-on-primary));
 
         &::before {
-          background-color: rgb(var(--uk-sys-color-on-surface-variant),
-              var(--uk-sys-state-pressed-state-layer-opacity));
+          background-color: rgb(
+            var(--uk-sys-color-on-surface-variant),
+            var(--uk-sys-state-pressed-state-layer-opacity)
+          );
         }
       }
     }
@@ -447,16 +457,20 @@
       color: rgb(var(--uk-sys-color-on-secondary-container));
 
       &::before {
-        background-color: rgb(var(--uk-sys-color-on-secondary-container),
-            var(--uk-sys-state-focus-state-layer-opacity));
+        background-color: rgb(
+          var(--uk-sys-color-on-secondary-container),
+          var(--uk-sys-state-focus-state-layer-opacity)
+        );
       }
 
       &[data-type="toggle"] {
         color: rgb(var(--uk-sys-color-on-secondary-container));
 
         &::before {
-          background-color: rgb(var(--uk-sys-color-on-secondary-container),
-              var(--uk-sys-state-focus-state-layer-opacity));
+          background-color: rgb(
+            var(--uk-sys-color-on-secondary-container),
+            var(--uk-sys-state-focus-state-layer-opacity)
+          );
         }
       }
 
@@ -473,16 +487,20 @@
       color: rgb(var(--uk-sys-color-on-secondary-container));
 
       &::before {
-        background-color: rgb(var(--uk-sys-color-on-secondary-container),
-            var(--uk-sys-state-hover-state-layer-opacity));
+        background-color: rgb(
+          var(--uk-sys-color-on-secondary-container),
+          var(--uk-sys-state-hover-state-layer-opacity)
+        );
       }
 
       &[data-type="toggle"] {
         color: rgb(var(--uk-sys-color-on-secondary-container));
 
         &::before {
-          background-color: rgb(var(--uk-sys-color-on-secondary-container),
-              var(--uk-sys-state-over-state-layer-opacity));
+          background-color: rgb(
+            var(--uk-sys-color-on-secondary-container),
+            var(--uk-sys-state-over-state-layer-opacity)
+          );
         }
       }
 
@@ -499,16 +517,20 @@
       color: rgb(var(--uk-sys-color-on-secondary-container));
 
       &::before {
-        background-color: rgb(var(--uk-sys-color-on-secondary-container),
-            var(--uk-sys-state-pressed-state-layer-opacity));
+        background-color: rgb(
+          var(--uk-sys-color-on-secondary-container),
+          var(--uk-sys-state-pressed-state-layer-opacity)
+        );
       }
 
       &[data-type="toggle"] {
         color: rgb(var(--uk-sys-color-on-surface-variant));
 
         &::before {
-          background-color: rgb(var(--uk-sys-color-on-secondary-container),
-              var(--uk-sys-state-pressed-state-layer-opacity));
+          background-color: rgb(
+            var(--uk-sys-color-on-secondary-container),
+            var(--uk-sys-state-pressed-state-layer-opacity)
+          );
         }
       }
 
@@ -569,8 +591,10 @@
         color: rgb(var(--uk-sys-color-on-surface-variant));
 
         &::before {
-          background-color: rgb(var(--uk-sys-color-on-secondary-container),
-              var(--uk-sys-state-focus-state-layer-opacity));
+          background-color: rgb(
+            var(--uk-sys-color-on-secondary-container),
+            var(--uk-sys-state-focus-state-layer-opacity)
+          );
         }
       }
 
@@ -618,8 +642,10 @@
         color: rgb(var(--uk-sys-color-on-surface-variant));
 
         &::before {
-          background-color: rgb(var(--uk-sys-color-on-surface-variant),
-              var(--uk-sys-state-pressed-state-layer-opacity));
+          background-color: rgb(
+            var(--uk-sys-color-on-surface-variant),
+            var(--uk-sys-state-pressed-state-layer-opacity)
+          );
         }
       }
 
@@ -627,8 +653,10 @@
         color: rgb(var(--uk-sys-color-inverse-on-surface));
 
         &::before {
-          background-color: rgb(var(--uk-sys-color-inverse-on-surface),
-              var(--uk-sys-state-pressed-state-layer-opacity));
+          background-color: rgb(
+            var(--uk-sys-color-inverse-on-surface),
+            var(--uk-sys-state-pressed-state-layer-opacity)
+          );
         }
       }
     }
@@ -726,8 +754,10 @@
         color: rgb(var(--uk-sys-color-on-surface-variant));
 
         &::before {
-          background-color: rgb(var(--uk-sys-color-on-surface-variant),
-              var(--uk-sys-state-pressed-state-layer-opacity));
+          background-color: rgb(
+            var(--uk-sys-color-on-surface-variant),
+            var(--uk-sys-state-pressed-state-layer-opacity)
+          );
         }
       }
 
@@ -760,4 +790,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
-- 
2.51.2