2025.5 theme variable changes (alert)

Mariusthvdb · May 1, 2025, 6:26pm

starting a post here, as it will be very prominent after release, that the changes in the Frontend in 2025.5 affect many users dashboards

at this time, 1 day in beta 2025.5 these changes not only have their impact in core components, many custom components will have to be updated to, to do away with paper-xx variables, and start supporting the new system.

In my own config, that is at least the case for
Completely broken:

Kiosk mode
custom-sidebar
tabbed-card

Impacted

card-mod and mostly card-mod theming
probably also template-entity-row and fold-entity-row (not tested completely yet)
tabbed-card

I am hoping we can join here and post our findings, and preferably some solutions

simply replacing paper-tab with sl-tab in the card-mod themes did bring back the modified tabs, with 1 exception:

can no longer set the color of the active icon…

      /* Set the color of the currently selected tab.
         Set size of the currently selected tab icon*/
      sl-tab[aria-selected=true] {
        color: red;
        border: 1px solid var(--primary-color);
        background: linear-gradient(180deg, var(--primary-color) 0%, var(--card-background-color) 50%);
        --mdc-icon-size: {{states('input_number.active_icon_size')|int(24)}}px;
        display: flex;
      }

Note the display: flex is required now to center the enlarged active icon
the app-header-selection-bar-color: red can now be set in the themes directly, and no longer requires a card-mod modification, which is nice.

however, as dev in Discord suggested I use

--ha-tab-active-text-color: red
--ha-tab-indicator-color: red

I can not make those happen. not in themes, not in card-mod themes. So, maybe there is a bug in it too, cant say for sure yet.

Sidebar menu is completely unmodified now, and no matter what I do, I cant make it happen… yet.

So, please join in and make this a community effort …

Individual authors will update their own repos, and maybe it is a good idea to consolidate those here too, to have a direct link top those repos

Edit

these are the mentioned changes regarding the theme variables and

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

CSS

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

CSS

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

Mariusthvdb · May 2, 2025, 6:13pm

some progress:

      /* Set the color of the currently selected tab.
         Set size of the currently selected tab icon*/
      sl-tab[aria-selected=true] {
        --card-mod-icon-color: red !important;
        border: 1px solid var(--primary-color);
        /*background: linear-gradient(180deg, var(--primary-color) 0%, var(--card-background-color) 50%);*/
        --mdc-icon-size: {{states('input_number.active_icon_size')|int(24)}}px;
        display: flex;
      }

does color the selected icon (before, simply using ‘color’ was sufficient, without !important)

it does color it only on reload of the view though, and not on browsing the tabs within the dashboard.
So still useless because of that, even though its good to know the --card-mod-icon-color does work under those conditions…

jazzyisj · May 3, 2025, 12:57am

I haven’t had a chance to install the beta yet. Are you saying --paper-item-icon-color has been deprecated? I think that’s the only --paper variable I use, but I use it everywhere. If it was indeed deprecated, is there a drop in replacement?

tom_l · May 3, 2025, 1:19am

No Marius is talking about the icons in the view menu, the menu along the top of the dashboard.

jazzyisj · May 3, 2025, 5:07am

Ugh. Well that may have been all he was talking about but --paper-item-icon-color is gone as well. I’ll have to check out Discord tomorrow see if anyone came up with a fix.

Mariusthvdb · May 3, 2025, 5:30am

Well, I am talking/alerting about all changes yes, and illustrated my personal issue with the menu icons.

Your drop in replacement is state-icon-color as can be seen in the link in the opening post.

Maybe we should paste that list here too

update
Ive edited the opening post and added that list

tom_l · May 3, 2025, 6:09am

That’s not a recent change though. I’m already using that and can’t remember the last time I changed my theme. Maybe when this happened: 2022.12 Color states are broken/unusable

Ildar_Gabdullin · May 3, 2025, 12:13pm

in 2022.12 the “-active” variable was removed.

tom_l · May 3, 2025, 12:25pm

FYI: the update has had no effect on any of my extensive card-mod themes.

Ildar_Gabdullin · May 3, 2025, 12:32pm

I am not near a PC, but try searching for “paper” keyword in JS file.

jazzyisj · May 3, 2025, 2:39pm

I did end up figuring that out with the element inspector, but thank you! Not sure why I was still using the paper variable. Fortunately it was the only old paper variable I was still using.

jazzyisj · May 3, 2025, 2:51pm

The --paper-item-icon-color issue was the only one for me. Just me using an old variable. Other than that all good in the hood!

Mariusthvdb · May 3, 2025, 4:27pm

Yeah could be.

It is mentioned in the release notes list of changed variable however, so probably good to note, as it could be one of the more frequently used ones

pedolsky · May 3, 2025, 5:29pm

For me, the following code is working and brought back my custom-colored header tabs:


  card-mod-theme: Global Theme

  card-mod-root-yaml: |
      .: |
        #view {
          margin-top: 0 !important;
        }

        /* ............. HEADER ............. */
        /*
          frontend/src/components/sl-tab-group.ts
          https://github.com/home-assistant/frontend/pull/24909
        */

        .header {
          box-shadow: none !important;
        }

        ha-menu-button, ha-button-menu {
          color: grey;
        }

        sl-tab {
          --sl-color-primary-600: skyblue;
        }

        sl-tab:not([active]) {
        opacity: .6;
        --sl-color-neutral-600: grey;
        }

Mariusthvdb · May 3, 2025, 7:21pm

thanks, this works too:

      /* Set the color of the currently selected tab.
         Set size of the currently selected tab icon*/
      sl-tab[aria-selected=true] {
        --sl-color-primary-600: red !important;
        border: 1px solid var(--primary-color);
        /*background: linear-gradient(180deg, var(--primary-color) 0%, var(--card-background-color) 50%);*/
        --mdc-icon-size: {{states('input_number.active_icon_size')|int(24)}}px;
        display: flex;
      }

of course, that is a silly variable name…

pedolsky · May 4, 2025, 8:58am

Found out that this is way easier and without card mod:


  # active tab and menu buttons left/right
  app-header-text-color: skyblue
  # inactive header icons/text
  sl-color-neutral-600: rgba(var(--darkblue),.5)

Mariusthvdb · May 4, 2025, 11:06am

~~Yes that is much better indeed .~~
I’ve asked for a dedicated variable name, just as we have one for the active tab indicator.

~~For the time being your method seems best~~

Btw we can still use all mods for individual tabs and use ‘color’.
So it’s a bit inconsistent we can not use that on the active tab …

and your sl-color-neutral-600 overrides all of those card-mod settings, so, its not a real solution…

The app-header-text-color ~~should really be~~ is for the inactive tab, as the generic setting, so if we can have app-header-active-text-color, consistent with the app-header-active-tab-indicator imho

for the time being 2 : Ill keep my own card-mod setting to color the active tab, use app-header-text-color for the generic color of the tabs, and mod those conditionally based on several relevant states for that tab

elchininet · May 4, 2025, 1:40pm

@Mariusthvdb,
JFYI, I have submitted pull requests for kiosk-mode, custom-sidebar and keep-texts-in-tabs. Just to warn you, all your CSS personalisations related to sidebar, mainly the ones related to the notification badges will get broken. Everything has changed radically so the CSS rules have changed as well as some variable names and class names.

Mariusthvdb · May 4, 2025, 2:48pm

great, let me check.
I do hope you will also allow us to do what we did before? (CSS personalizations as you call them)

might need some help, but if its only the naming, I think it can be done

btw I did already dl kiosk mode beta, but the search and assist icons in the menu bar still wont be hidden with the boolean we had before…

elchininet · May 4, 2025, 2:54pm

Do you mean with version 2025.5.x? The kiosk-mode beta is for <= 2025.4.4. The changes in the pull request are not in that beta yet.