Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-04-02 08:33:31 +01:00
Code Activity

Refactor tooltip CSS tokens to use ha- prefix (#29978)

Browse Source 
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
This commit is contained in:
Paul Bottein
2026-03-04 16:02:09 +01:00
committed by Bram Kragten
parent b286b07cfd
commit 1a6d46a7ff
3 changed files with 28 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
gallery/src/pages/components/ha-tooltip.markdown
View File

@@ -28,9 +28,12 @@ This element is based on webawesome `wa-tooltip` it only sets some css tokens an
In your theme settings use this without the prefixed `--`.
- `--ha-tooltip-border-radius` (Default: 4px)
- `--ha-tooltip-arrow-size` (Default: 8px)
- `--wa-tooltip-font-family` (Default: `var(--ha-font-family-body)`)
- `--ha-tooltip-background-color` (Default: `var(--secondary-background-color)`)
- `--ha-tooltip-text-color` (Default: `var(--primary-text-color)`)
- `--ha-tooltip-font-family` (Default: `var(--ha-font-family-body)`)
- `--ha-tooltip-font-size` (Default: `var(--ha-font-size-s)`)
- `--wa-tooltip-font-weight` (Default: `var(--ha-font-weight-normal)`)
- `--wa-tooltip-line-height` (Default: `var(--ha-line-height-condensed)`)
- `--ha-tooltip-font-weight` (Default: `var(--ha-font-weight-normal)`)
- `--ha-tooltip-line-height` (Default: `var(--ha-line-height-condensed)`)
- `--ha-tooltip-padding` (Default: 8px)
- `--ha-tooltip-border-radius` (Default: `var(--ha-border-radius-sm)`)
- `--ha-tooltip-arrow-size` (Default: 8px)

14
src/components/ha-slider.ts
View File

@@ -24,8 +24,14 @@ export class HaSlider extends Slider {
--marker-width: calc(var(--ha-slider-track-size, 4px) / 2);
--wa-color-surface-default: var(--card-background-color);
--wa-color-neutral-fill-normal: var(--disabled-color);
--wa-tooltip-background-color: var(--secondary-background-color);
--wa-tooltip-color: var(--primary-text-color);
--wa-tooltip-background-color: var(
--ha-tooltip-background-color,
var(--secondary-background-color)
);
--wa-tooltip-content-color: var(
--ha-tooltip-text-color,
var(--primary-text-color)
);
--wa-tooltip-font-family: var(
--ha-tooltip-font-family,
var(--ha-font-family-body)
@@ -42,13 +48,13 @@ export class HaSlider extends Slider {
--ha-tooltip-line-height,
var(--ha-line-height-condensed)
);
--wa-tooltip-padding: 8px;
--wa-tooltip-padding: var(--ha-tooltip-padding, var(--ha-space-2));
--wa-tooltip-border-radius: var(
--ha-tooltip-border-radius,
var(--ha-border-radius-sm)
);
--wa-tooltip-arrow-size: var(--ha-tooltip-arrow-size, 8px);
--wa-z-index-tooltip: var(--ha-tooltip-z-index, 1000);
--wa-z-index-tooltip: 1000;
min-width: 100px;
min-inline-size: 100px;
width: 200px;

14
src/components/ha-tooltip.ts
View File

@@ -16,8 +16,14 @@ export class HaTooltip extends Tooltip {
Tooltip.styles,
css`
:host {
--wa-tooltip-background-color: var(--secondary-background-color);
--wa-tooltip-content-color: var(--primary-text-color);
--wa-tooltip-background-color: var(
--ha-tooltip-background-color,
var(--secondary-background-color)
);
--wa-tooltip-content-color: var(
--ha-tooltip-text-color,
var(--primary-text-color)
);
--wa-tooltip-font-family: var(
--ha-tooltip-font-family,
var(--ha-font-family-body)
@@ -34,13 +40,13 @@ export class HaTooltip extends Tooltip {
--ha-tooltip-line-height,
var(--ha-line-height-condensed)
);
--wa-tooltip-padding: 8px;
--wa-tooltip-padding: var(--ha-tooltip-padding, var(--ha-space-2));
--wa-tooltip-border-radius: var(
--ha-tooltip-border-radius,
var(--ha-border-radius-sm)
);
--wa-tooltip-arrow-size: var(--ha-tooltip-arrow-size, 8px);
--wa-z-index-tooltip: var(--ha-tooltip-z-index, 1000);
--wa-z-index-tooltip: 1000;
}
`,
];