2025.8 Beta week!

Mariusthvdb · August 2, 2025, 10:30am

wow this is empty still…

let me add my observations up to 2025.8.0b1

after an initial fluke with the new buttons without text, .1 fixed that, and we now have new buttons working as per new design.

Those still need some fixes here and there regarding their position and color setting

Jul-31-2025 17-18-39

but all in all, it seems ok. In Default theme that is.

If you have carefully curated themes, as many of us do, you’re stuck with really nasty color clashes, because of the introduction of

github.com/home-assistant/frontend

src/components/ha-button.ts

c2ca55615


      
          }
          
          :host([size="small"]) .button {
            --wa-form-control-height: var(
              --ha-button-height,
              var(--button-height, 32px)
            );
            font-size: var(--wa-font-size-s, var(--ha-font-size-m));
          }
          
          :host([variant="brand"]) {
            --color-fill-normal-active: var(--color-fill-primary-normal-active);
            --color-fill-normal-hover: var(--color-fill-primary-normal-hover);
            --color-fill-loud-active: var(--color-fill-primary-loud-active);
            --color-fill-loud-hover: var(--color-fill-primary-loud-hover);
          }
          
          :host([variant="neutral"]) {
            --color-fill-normal-active: var(--color-fill-neutral-normal-active);
            --color-fill-normal-hover: var(--color-fill-neutral-normal-hover);
            --color-fill-loud-active: var(--color-fill-neutral-loud-active);

and

github.com/home-assistant/frontend

src/resources/theme/color/semantic.globals.ts

c2ca55615

import { css } from "lit";

export const semanticColorStyles = css`
  html {
    --color-overlay-modal: rgba(0, 0, 0, 0.25);
    --color-focus: var(--color-orange-60);

    /* surface */
    --color-surface-lower: var(--color-neutral-90);
    --color-surface-low: var(--color-neutral-95);
    --color-surface-default: var(--white);

    /* text */
    --color-text-primary: var(--color-neutral-05);
    --color-text-secondary: var(--color-neutral-40);
    --color-text-disabled: var(--color-neutral-60);
    --color-text-link: var(--color-primary-40);
    /* border primary */
    --color-border-quiet: var(--color-primary-80);
    --color-border-normal: var(--color-primary-70);

This file has been truncated. show original

Ive asked for some explanation which semantics is used where, as currently it will take some effort to untangle that spaghetti of new theme variables… and do:

So just set all of these core primary colors. And the semantics are build up on them
    --color-primary-05: #001721;
    --color-primary-10: #002e3e;
    --color-primary-20: #004156;
    --color-primary-30: #006787;
    --color-primary-40: #009ac7;
    --color-primary-50: #18bcf2;
    --color-primary-60: #37c8fd;
    --color-primary-70: #7bd4fb;
    --color-primary-80: #b9e6fc;
    --color-primary-90: #dff3fc;
    --color-primary-95: #eff9fe;
[07:30]

This is the beginning of our design system. We just use it for buttons now. But when we hopefully sometime use it on most parts of the software it will be really cool.

This is only about looks

more serious trouble I experience with the new functionality of the group members on the more-info of grouped helpers. Lights and Covers show their members as tiles, which seems very cool indeed!

If it didn’t grind the interface to an almost standstill…
Interaction is very very laggy in my setup, even on helpers with only 2 or 3 members.
I have to manually reload the view returning from those more-info panels, otherwise I am stuck with

Btw this also occurs on the other helper groups, as Ive documented in this issue more-info group functionality very slow and lagging interaction · Issue #26325 · home-assistant/frontend · GitHub

That’s mostly it for me, my use case doesnt benefit from the other changes in this release.
Although I do love the fact we can now add availability templates via the UI Helpers, thanks to Petro!

O, and 1 more titbit: use ha-button-radius in your themes to get rid of those rounded button blobs, my theme is squared mostly, so I set those to 0px, or more precisely I use:

    ha-card-border-radius: 0px
    ha-dialog-border-radius: var(--ha-card-border-radius)
    ha-config-card-border-radius: var(--ha-card-border-radius)
    feature-border-radius: var(--ha-card-border-radius)
    ha-button-radius: var(--ha-card-border-radius)