jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-07 08:27:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add border radius css var ha prefix (#26411)

Browse Source
This commit is contained in:
Wendelin 2025-08-06 14:59:34 +02:00 committed by GitHub
parent 37def6d3e4
commit 96796ac5da
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gallery/src/pages/components/ha-button.markdown
View File

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

4
src/components/ha-button.ts
View File

@ -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(

2
src/components/ha-control-slider.ts
View File

@ -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%;

4
src/components/ha-fab.ts
View File

@ -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 {

28
src/resources/theme/core.globals.ts
View File

@ -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;
}
`;