waves icon indicating copy to clipboard operation
waves copied to clipboard

[HA 2025.5+] Theme contains removed "paper-*" CSS variables

Open mathoudebine opened this issue 5 months ago • 0 comments

waves.yaml theme file contains several deprecated paper-* CSS variables that prevent the theme from rendering properly in HomeAssistant 2025.5+

From HomeAssistant 2025.5 release notes: https://www.home-assistant.io/blog/2025/05/07/release-20255/#backward-incompatible-changes

Polymer Components Removed: Legacy Polymer-based components have been fully removed. As a result, all related paper-* CSS variables have also been removed.

  • Some variables have been migrated to new theme tokens.
  • Others were outdated and have been removed entirely.

✅ New tokens

--ha-font-family-body
--ha-font-family-heading
--ha-font-family-code
--ha-font-family-longform
--ha-font-size-scale
--ha-font-size-2xs
--ha-font-size-xs
--ha-font-size-s
--ha-font-size-m
--ha-font-size-l
--ha-font-size-xl
--ha-font-size-2xl
--ha-font-size-3xl
--ha-font-size-4xl
--ha-font-weight-light
--ha-font-weight-normal
--ha-font-weight-medium
--ha-font-weight-bold
--ha-font-weight-body
--ha-font-weight-heading
--ha-font-weight-action
--ha-line-height-condensed
--ha-line-height-normal
--ha-line-height-expanded
--ha-font-smoothing

❌ Removed tokens

--paper-font-common-nowrap_-_text-overflow
--paper-font-display1_-_letter-spacing
--paper-font-headline_-_letter-spacing
--paper-font-common-base_-_font-family
--paper-font-common-base_-_-webkit-font-smoothing
--paper-font-common-code_-_font-family
--paper-font-common-code_-_-webkit-font-smoothing
--paper-font-common-nowrap_-_white-space
--paper-font-common-nowrap_-_overflow
--paper-font-title_-_overflow
--paper-font-title_-_text-overflow
--paper-font-title_-_text-overflow
--paper-font-title_-_white-space
--paper-item-body-two-line-min-height
--paper-time-input-justify-content
--paper-item-body-three-line-min-height
--paper-item-icon-width
--paper-card-header-color
--paper-dialog-color
--paper-font-headline_-_white-space
--paper-font-headline_-_overflow
--paper-font-headline_-_text-overflow
--paper-font-subhead_-_white-space
--paper-font-subhead_-_overflow
--paper-font-subhead_-_text-overflow
--paper-item-icon-active-color
--paper-listbox-background-color

🔄 Migrated tokens

--code-font-family → --ha-font-family-code
--paper-font-title_-_-webkit-font-smoothing → --ha-font-smoothing
--paper-font-headline_-_-webkit-font-smoothing → --ha-font-smoothing
--paper-font-display1_-_-webkit-font-smoothing → --ha-font-smoothing
--paper-font-subhead_-_-webkit-font-smoothing → --ha-font-smoothing
--paper-font-body1_-_-webkit-font-smoothing → --ha-font-smoothing
--paper-font-display1_-_font-family → --ha-font-family-body
--paper-font-display1_-_font-size → --ha-font-size-4xl
--paper-font-display1_-_font-weight → --ha-font-weight-normal
--paper-font-display1_-_line-height → --ha-line-height-condensed
--paper-font-headline_-_font-family → --ha-font-family-body
--paper-font-headline_-_font-size → --ha-font-size-2xl
--paper-font-headline_-_font-weight → --ha-font-weight-normal
--paper-font-headline_-_line-height → --ha-line-height-condensed
--paper-font-title_-_font-family → --ha-font-family-body
--paper-font-title_-_font-size → --ha-font-size-xl
--paper-font-title_-_font-weight → --ha-font-weight-medium
--paper-font-title_-_line-height → --ha-line-height-normal
--paper-font-subhead_-_font-family → --ha-font-family-body
--paper-font-subhead_-_font-size → --ha-font-size-l
--paper-font-subhead_-_font-weight → --ha-font-weight-normal
--paper-font-subhead_-_line-height → --ha-line-height-normal
--paper-font-body1_-_font-family → --ha-font-family-body
--paper-font-body1_-_font-size → --ha-font-size-m
--paper-font-body1_-_font-weight → --ha-font-weight-normal
--paper-font-body1_-_line-height → --ha-line-height-normal
--paper-item-icon-color → --state-icon-color

mathoudebine avatar Jul 21 '25 13:07 mathoudebine