From 1a6d46a7ffe2d25aadcc12a830daf9f911c06de9 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Wed, 4 Mar 2026 16:02:09 +0100
Subject: [PATCH] Refactor tooltip CSS tokens to use ha- prefix (#29978)

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
---
 gallery/src/pages/components/ha-tooltip.markdown | 13 ++++++++-----
 src/components/ha-slider.ts                      | 14 ++++++++++----
 src/components/ha-tooltip.ts                     | 14 ++++++++++----
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/gallery/src/pages/components/ha-tooltip.markdown b/gallery/src/pages/components/ha-tooltip.markdown
index c51856ba41..bd5713a39a 100644
--- a/gallery/src/pages/components/ha-tooltip.markdown
+++ b/gallery/src/pages/components/ha-tooltip.markdown
@@ -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)
diff --git a/src/components/ha-slider.ts b/src/components/ha-slider.ts
index 57d35a28e0..1b55319338 100644
--- a/src/components/ha-slider.ts
+++ b/src/components/ha-slider.ts
@@ -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;
diff --git a/src/components/ha-tooltip.ts b/src/components/ha-tooltip.ts
index 6635da1361..c3bf0c7249 100644
--- a/src/components/ha-tooltip.ts
+++ b/src/components/ha-tooltip.ts
@@ -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;
         }
       `,
     ];