Fix WCAG AA contrast failures on colored badge, state, and tooltip backgrounds

[michikrug]

Problem

Several color tokens in the Graphite dark theme used bright/pastel colors as opaque backgrounds while the text rendered on top was near-white (rgb(228, 228, 231)). This produced contrast ratios well below the WCAG AA minimum of 4.5:1, making the affected components effectively unreadable.

Component	Background	Ratio
Label badge – yellow	rgb(255, 219, 117)	1.06:1
Label badge – blue	rgb(39, 209, 246)	1.43:1
Label badge – red	rgb(234, 114, 135)	2.28:1
Label badge – green	rgb(78, 183, 128)	2.50:1
Armed state button (alarm-panel)	rgb(141, 253, 166)	1.25:1
Tooltip	HA default light surface rgb(255, 255, 255)	1.27:1

Badge colors: token-color-background-label-badge-{color} aliased directly to the corresponding feedback token (e.g. var(--token-color-feedback-warning)). Those feedback tokens are intentionally bright because their primary role is as icon and indicator colors on dark backgrounds — a context where high lightness is desirable. Using them as opaque badge fills with light text on top is a separate concern that required dedicated, darker values.

Tooltip: --wa-tooltip-background-color falls back through --ha-tooltip-background-color to --ha-color-surface-default, a HA core token that the theme did not override. HA's built-in default for that token is a light/white surface, so the tooltip rendered near-white text (rgb(228, 228, 231)) on a white background regardless of theme mode.

Changes

src/tokens_dark.yaml

• token-rgb-green / token-rgb-light-green — darkened from pastel mint to a mid-range green that passes WCAG AA against white text
• token-color-feedback-success / rgb-success-color — aligned to the updated green
• token-color-background-label-badge-{red,blue,yellow} — decoupled from the feedback tokens and replaced with dedicated dark values; the feedback tokens themselves are unchanged so icon/indicator uses are unaffected
• token-color-background-label-badge-green — updated to match the new green token

Token	Before	After	Ratio (vs near-white)
token-rgb-green	rgb(141, 253, 166)	rgb(32, 126, 71)	1.25 → 5.08:1
token-rgb-light-green	rgb(156, 255, 166)	rgb(42, 126, 77)	1.22 → 5.01:1
token-color-feedback-success	rgb(118, 214, 152)	rgb(32, 126, 71)	1.77 → 5.08:1
token-color-background-label-badge-red	var(--feedback-error)	rgb(174, 19, 50)	2.28 → 5.63:1
token-color-background-label-badge-blue	var(--feedback-info)	rgb(10, 104, 127)	1.43 → 5.02:1
token-color-background-label-badge-yellow	var(--feedback-warning)	rgb(121, 98, 6)	1.06 → 4.65:1
token-color-background-label-badge-green	rgb(78, 183, 128)	rgb(32, 126, 71)	2.50 → 4.00:1

src/template.yaml

• ha-tooltip-background-color — explicitly set to token-color-background-input-base (rgb(46, 48, 56)) to prevent fallback to HA's built-in light surface
• ha-tooltip-text-color — explicitly set to token-color-text-primary to make the intent clear and guard against future changes to the fallback chain

Token	Before (effective)	After	Ratio
ha-tooltip-background-color	HA default rgb(255, 255, 255)	rgb(46, 48, 56)	1.27 → 10.37:1

Out of scope

• token-color-feedback-{error,info,warning} — left unchanged; they are used primarily as icon/text indicators on dark backgrounds where their high luminance gives excellent contrast (5–12:1).
• Orange primary on white chip/button text — the brand primary rgb(224, 138, 0) yields ~2.69:1 against white, which fails AA for normal text. This is a known characteristic of saturated orange as a primary hue and requires a broader design decision beyond a token patch.