From a39ab3c17408ac5f724d42a92a657544e6aa0076 Mon Sep 17 00:00:00 2001
From: Wendelin <12148533+wendevlin@users.noreply.github.com>
Date: Mon, 4 Aug 2025 14:58:12 +0200
Subject: [PATCH] Improve ha button radius variables (#26382)

* Improve ha button radius variables

* fixes

---------

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 .../src/pages/components/ha-button.markdown   |  2 +-
 src/components/ha-button.ts                   |  7 +++---
 src/components/ha-fab.ts                      | 12 ++++++++++
 src/resources/theme/core.globals.ts           | 24 +++++++++++++++++++
 src/resources/theme/theme.ts                  |  3 +++
 5 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 src/resources/theme/core.globals.ts

diff --git a/gallery/src/pages/components/ha-button.markdown b/gallery/src/pages/components/ha-button.markdown
index 76bb342b0b..b43451b5f6 100644
--- a/gallery/src/pages/components/ha-button.markdown
+++ b/gallery/src/pages/components/ha-button.markdown
@@ -64,4 +64,4 @@ Check the [webawesome documentation](https://webawesome.com/docs/components/butt
 **CSS Custom Properties**
 
 - `--ha-button-height` - Height of the button.
-- `--ha-button-radius` - Border radius of the button. Defaults to `var(--wa-border-radius-pill)`.
+- `--ha-button-border-radius` - Border radius of the button. Defaults to `var(--border-radius-pill)`.
diff --git a/src/components/ha-button.ts b/src/components/ha-button.ts
index 5ffe7b9876..942d221e64 100644
--- a/src/components/ha-button.ts
+++ b/src/components/ha-button.ts
@@ -27,7 +27,7 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain";
  * @csspart spinner - The spinner that shows when the button is in the loading state.
  *
  * @cssprop --ha-button-height - The height of the button.
- * @cssprop --ha-button-radius - The border radius of the button. defaults to `var(--wa-border-radius-pill)`.
+ * @cssprop --ha-button-border-radius - The border radius of the button. defaults to `var(--border-radius-pill)`.
  *
  * @attr {("small"|"medium")} size - Sets the button size.
  * @attr {("brand"|"neutral"|"danger"|"warning"|"success")} variant - Sets the button color variant. "primary" is default.
@@ -55,10 +55,9 @@ export class HaButton extends Button {
           /* set theme vars */
           --wa-form-control-padding-inline: 16px;
           --wa-font-weight-action: var(--ha-font-weight-medium);
-          --wa-border-radius-pill: 9999px;
           --wa-form-control-border-radius: var(
-            --ha-button-radius,
-            var(--wa-border-radius-pill)
+            --ha-button-border-radius,
+            var(--border-radius-pill)
           );
 
           --wa-form-control-height: var(
diff --git a/src/components/ha-fab.ts b/src/components/ha-fab.ts
index a97a1bfe39..a013537a8b 100644
--- a/src/components/ha-fab.ts
+++ b/src/components/ha-fab.ts
@@ -20,6 +20,18 @@ export class HaFab extends FabBase {
         --mdc-typography-button-font-family: var(--ha-font-family-body);
         --mdc-typography-button-font-weight: var(--ha-font-weight-medium);
       }
+      :host .mdc-fab--extended {
+        border-radius: var(
+          --ha-button-border-radius,
+          var(--border-radius-pill)
+        );
+      }
+      :host .mdc-fab.mdc-fab--extended .ripple {
+        border-radius: var(
+          --ha-button-border-radius,
+          var(--border-radius-pill)
+        );
+      }
       :host .mdc-fab--extended .mdc-fab__icon {
         margin-inline-start: -8px;
         margin-inline-end: 12px;
diff --git a/src/resources/theme/core.globals.ts b/src/resources/theme/core.globals.ts
new file mode 100644
index 0000000000..2790d18e36
--- /dev/null
+++ b/src/resources/theme/core.globals.ts
@@ -0,0 +1,24 @@
+import { css } from "lit";
+import { extractDerivedVars } from "../../common/style/derived-css-vars";
+
+export const coreStyles = css`
+  html {
+    --border-width-sm: 1px;
+    --border-width-md: 2px;
+    --border-width-lg: 3px;
+
+    --border-radius-sm: 4px;
+    --border-radius-md: 8px;
+    --border-radius-lg: 12px;
+    --border-radius-xl: 16px;
+    --border-radius-2xl: 24px;
+    --border-radius-3xl: 28px;
+    --border-radius-4xl: 32px;
+    --border-radius-5xl: 36px;
+    --border-radius-pill: 9999px;
+    --border-radius-circle: 50%;
+    --border-radius-square: 0;
+  }
+`;
+
+export const coreDerivedVariables = extractDerivedVars(coreStyles);
diff --git a/src/resources/theme/theme.ts b/src/resources/theme/theme.ts
index e8e3cc1168..1144aafd21 100644
--- a/src/resources/theme/theme.ts
+++ b/src/resources/theme/theme.ts
@@ -1,5 +1,6 @@
 import { fontStyles } from "../roboto";
 import { colorDerivedVariables, colorStylesCollection } from "./color";
+import { coreDerivedVariables, coreStyles } from "./core.globals";
 import { mainDerivedVariables, mainStyles } from "./main.globals";
 import {
   typographyDerivedVariables,
@@ -8,6 +9,7 @@ import {
 import { waMainDerivedVariables, waMainStyles } from "./wa.globals";
 
 export const themeStyles = [
+  coreStyles.toString(),
   mainStyles.toString(),
   typographyStyles.toString(),
   ...colorStylesCollection,
@@ -16,6 +18,7 @@ export const themeStyles = [
 ].join("");
 
 export const derivedStyles = {
+  ...coreDerivedVariables,
   ...mainDerivedVariables,
   ...typographyDerivedVariables,
   ...colorDerivedVariables,