From 96796ac5dae7bc8dc8c9638aacead1569097af95 Mon Sep 17 00:00:00 2001
From: Wendelin <12148533+wendevlin@users.noreply.github.com>
Date: Wed, 6 Aug 2025 14:59:34 +0200
Subject: [PATCH] Add border radius css var ha prefix (#26411)

---
 .../src/pages/components/ha-button.markdown   |  2 +-
 src/components/ha-button.ts                   |  4 +--
 src/components/ha-control-slider.ts           |  2 +-
 src/components/ha-fab.ts                      |  4 +--
 src/resources/theme/core.globals.ts           | 28 +++++++++----------
 5 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/gallery/src/pages/components/ha-button.markdown b/gallery/src/pages/components/ha-button.markdown
index b43451b5f6..9acc6bf58d 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-border-radius` - Border radius of the button. Defaults to `var(--border-radius-pill)`.
+- `--ha-button-border-radius` - Border radius of the button. Defaults to `var(--ha-border-radius-pill)`.
diff --git a/src/components/ha-button.ts b/src/components/ha-button.ts
index f8edd18a0d..b14d3db48f 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-border-radius - The border radius of the button. defaults to `var(--border-radius-pill)`.
+ * @cssprop --ha-button-border-radius - The border radius of the button. defaults to `var(--ha-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.
@@ -57,7 +57,7 @@ export class HaButton extends Button {
           --wa-font-weight-action: var(--ha-font-weight-medium);
           --wa-form-control-border-radius: var(
             --ha-button-border-radius,
-            var(--border-radius-pill)
+            var(--ha-border-radius-pill)
           );
 
           --wa-form-control-height: var(
diff --git a/src/components/ha-control-slider.ts b/src/components/ha-control-slider.ts
index dc31618d96..c158f68b7b 100644
--- a/src/components/ha-control-slider.ts
+++ b/src/components/ha-control-slider.ts
@@ -506,7 +506,7 @@ export class HaControlSlider extends LitElement {
       width: 100%;
     }
     .slider .slider-track-bar {
-      --border-radius: var(--control-slider-border-radius);
+      --ha-border-radius: var(--control-slider-border-radius);
       --slider-size: 100%;
       position: absolute;
       height: 100%;
diff --git a/src/components/ha-fab.ts b/src/components/ha-fab.ts
index a013537a8b..ab8e68966f 100644
--- a/src/components/ha-fab.ts
+++ b/src/components/ha-fab.ts
@@ -23,13 +23,13 @@ export class HaFab extends FabBase {
       :host .mdc-fab--extended {
         border-radius: var(
           --ha-button-border-radius,
-          var(--border-radius-pill)
+          var(--ha-border-radius-pill)
         );
       }
       :host .mdc-fab.mdc-fab--extended .ripple {
         border-radius: var(
           --ha-button-border-radius,
-          var(--border-radius-pill)
+          var(--ha-border-radius-pill)
         );
       }
       :host .mdc-fab--extended .mdc-fab__icon {
diff --git a/src/resources/theme/core.globals.ts b/src/resources/theme/core.globals.ts
index 2790d18e36..158b41d271 100644
--- a/src/resources/theme/core.globals.ts
+++ b/src/resources/theme/core.globals.ts
@@ -3,21 +3,21 @@ 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;
+    --ha-border-width-sm: 1px;
+    --ha-border-width-md: 2px;
+    --ha-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;
+    --ha-border-radius-sm: 4px;
+    --ha-border-radius-md: 8px;
+    --ha-border-radius-lg: 12px;
+    --ha-border-radius-xl: 16px;
+    --ha-border-radius-2xl: 24px;
+    --ha-border-radius-3xl: 28px;
+    --ha-border-radius-4xl: 32px;
+    --ha-border-radius-5xl: 36px;
+    --ha-border-radius-pill: 9999px;
+    --ha-border-radius-circle: 50%;
+    --ha-border-radius-square: 0;
   }
 `;