Improve ha button radius variables (#26382)

* Improve ha button radius variables

* fixes

---------

Co-authored-by: Bram Kragten <[email protected]>

Author: wendevlin

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)`.

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(

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;

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);

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,