2022.11 b0 - Ugly white card borders

[mehhhhhhhhhhhhhhhhhhhhhhhhhh]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

Cards now have white borders in dark mode, which negatively impact the aesthetic of front end dashboards.

Describe the behavior you expected

All front end cards have white borders when in dark mode.

Steps to reproduce the issue

1. None

...

What version of Home Assistant Core has the issue?

2022.11 b0

What was the last working version of Home Assistant Core?

2022.10.5

In which browser are you experiencing the issue with?

Safari & Chrome

Which operating system are you using to run this browser?

MacOS Big Sur, Ubuntu

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[SmarterHomeLife]

I'm also getting a thin border around all elements on my dashboards after upgrading to 2022.11.0b0, also showing in Chrome on Android and the HA app on Android.

[Mincka]

I don't know if it's the border-style: solid that's breaking all my dashboards or something else.
All the cards are now taking more place. This should not be the case in my opinion.

:host {
    background: var( --ha-card-background, var(--card-background-color, white) );
    box-shadow: var(--ha-card-box-shadow, none);
    box-sizing: border-box;
    border-radius: var(--ha-card-border-radius, 12px);
    border-width: var(--ha-card-border-width, 1px);
    border-style: solid;
    border-color: var( --ha-card-border-color, var(--divider-color, #e0e0e0) );
    color: var(--primary-text-color);
    display: block;
    transition: all 0.3s ease-out 0s;
    position: relative;
}

Before:

After:

[SmarterHomeLife]

If you add 'ha-card-border-width: 0px' to your theme file it will remove all the borders until a permanant fix is released.

[Kertz1954]

This change of appearance is due to the removal of the default box-shadow and the increase of the default border-radius from 4px to 16px (in most cases).

This results in a unwanted visable border-radius and destroys the alignment of height and width sizes.

For the dev (name withheld) that decided to make these changes, I hope you have a good place to hide when this is released today in 2022.11.0 as you are about to upset a very very high percentage of existing users who are not going to appreciate that there dashboards/tabs are no longer in alignment.

[ildar170975]

Now users will have to create a custom theme only to fix the new design.
This is not a good practice.

[Mincka]

I think they were stuck with the old design and now they want to introduce mushroom cards (starting with Tile), they need to change global styling with small touches. It must be complicated for them to take such choices since they know that any little change will break dashboards of users. Still, I personally think that the new default border radius is way to big.

[Imoriarty]

I just hate that the onus is always on the users to figure out what changed, and how to revert or fix the changes. A simple addition to the patch notes about a breaking change to the design would go a long way. Even better, provide some simple CSS in the patch notes to revert the change in a custom theme until people have the time to migrate.

But, no, instead it's a surprise to most users who haven't been following the design changes, and a sudden realization that what was supposed to be a simple version update I didn't expect to spend time on is (was) yet another fiddly task, for really no reason.

[CumpsD]

Sometimes borders also appear on container cards like custom-mod-card

[bkr1969]

Same problem here. The borders are stupid. There has to be a way to remove them.

[Imoriarty]

@bkr1969

SmarterHomeLife's hack worked for me:

If you add 'ha-card-border-width: 0px' to your theme file it will remove all the borders until a permanent fix is released.

I placed it in my themes file (the filename might vary based on your particular setup), and refreshed my themes by going to Developer Tools > Services > Home Assistant Frontend: Reload themes option, and hitting the Call Service button.

You may need to experiment to find the best place for the hack for you, and I suggest making a comment about it in your file, should you want to revert it sometime in the future.

[bkr1969]

That didn't do anything for me. Where exactly did you place that line? I tried it in the Global and Cards section with no luck.

[InfinityATX]

That didn't do anything for me. Where exactly did you place that line? I tried it in the Global and Cards section with no luck.

I had to restart HA for the change to take effect, but keep an eye on your theme repository, they are updating with the fix pretty quickly.

[mehhhhhhhhhhhhhhhhhhhhhhhhhh]

Worked for me. It doesn't require a restart if you use the frontend.reload_themes service.

[bkr1969]

I've restarted both just the themes and entire HA. No difference. Please tell me where in the code you placed the line.

[mehhhhhhhhhhhhhhhhhhhhhhhhhh]

I've restarted both just the themes and entire HA. No difference. Please tell me where in the code you placed the line.

I placed the line directly under the name of each theme. I’m using iOS-themes, which has several different themes listed.

To make it easy, I used text replace to replace the "# Global" comment with "ha-card-border-width: 0px" then saved & reloaded my themes.

[bkr1969]

That did it. Thanks!

[PacmanForever]

In general I'm very happy with the HA, but these changes break designs that have cost many hours to thousands of users. I think this change has not been well thought out.

[ildar170975]

Removing shadows and adding borders.
Huge radius for corners.
Icons with a background of “mushroom style”.
This is a new glory future (facepalm).

[CoreyJ87]

Removing shadows and adding borders. Huge radius for corners. Icons with a background of “mushroom style”. This is a new glory future (facepalm).

what do u mean by this? are u saying that those things are being changed next release? or?

[ildar170975]

I mean - there is a big probability that this may happen.
The corresponding issue “why the new tile card look different?” was closed.
Also, some users are agree with new changes.
Some users think that there is no need to worry about changes - “may be customized by themes and card-mod”.
Surely I am worried about this trend.

[ltjessem]

This is just business as usual. For years. There's a major disconnect between what the devs like and what the majority of the userbase want.
The insistence on not allowing users options other than third-party themes etc. just makes for more things to break in a future update.

Strap in, we're just in for the ride.

[andige]

This is really unbelievable.
Was it really so hard to at least warn the users about this unnecessary change?

btw: this is not only affecting user themes but also the standard theme, which looks completely awful now. Are you deliberately trying to scare new users away?

[ildar170975]

Was it really so hard to at least warn the users about this unnecessary change?

I consider these changes as BREAKING.

Now I am busy with preparing proposals with adapting users' code for the new UI to get an "old look".
Results will be published in the Community.
Some changes may be done by creating a custom theme. Some changes may only be done by using card-mod in Frontend; also gonna register some issues for custom cards which were affected by 2022.11.

[mehhhhhhhhhhhhhhhhhhhhhhhhhh]

I consider these changes as BREAKING.

Agreed. I’m baffled that they didn't add it to breaking changes.

[PacmanForever]

What is really sad is that they ignore us.

[Aasikki]

This is a big case of vocal minority happened right here. Overall I think moving towards the style of mushroom cards is the right choice, they look much more modern and like it or not, home assistant needs to keep up with other options in the looks department in order to stay relevant.

That said, as far as I understand, the material ui 3 has three different styles of cards to choose from:

I guess home assistant here went for the outlined one and personally I also like the two other options more, but neither of the options look bad by any means. This is just preference and I think it would be very nice to have option to choose one from all three options.

[PacmanForever]

Hi,

all this borders are new:

This is just one example of many.

How can I get back to the previous view without borders?

[ltjessem]

This is just preference and I think it would be very nice to have option to choose one from all three options.

The devs have said on multiple occasions that they don't like giving people options... So we're stuck with either whatever they like, or a third-party/self made theme that will eventually break in a future update.

[Aasikki]

This is just preference and I think it would be very nice to have option to choose one from all three options.

The devs have said on multiple occasions that they don't like giving people options... So we're stuck with either whatever they like, or a third-party/self made theme that will eventually break in a future update.

Which is perfectly reasonable as giving more options means more effort to keep all of the options up to date.

[ltjessem]

I understand that, especially in the context of theming. Heck, I even like the new look. This release however brought with it another unpopular change, the horribly inaccurate history card. Mine can travel backwards in time...

Both of these issues are basically told "this is how we like it, so that's how it going to be". The theming issue is cosmetic, and I can understand not wanting to maintain an old theme, though leaving it in as a legacy option for the time being shouldn't have been an issue. The graphing, now that is worse due to actually degrading functionality. The old graphs are still there so it costs them absolutely nothing to give the option to keep them in "more info".

The community can only be treated that way for so long before it come back to bite them in the butt.

[ildar170975]

I repeated the same many times in Community.
Once again.
To restore the old look may - using a custom theme with old radius, old shadows and without a border - may NOT work. The latest changes in HA are not only about changing some themable variables - they are also about handling a border and shadow in cards.
As a result - some custom cards now got a wrong border - for instance, mod-card, bar-card, stack-in-card (the latter has an “unofficial” fix, which only useful in SOME cases).
These three cards - are what I use and where I noticed bugs. Probably the latest HA changes resulted bugs in more cards.
Ok, these are merely custom cards - which are not a headache for devs...

[PacmanForever]

Hi,
Which solution has stack-in-card?

[ildar170975]

Go to stack-in-card repo, there is a PR.
As I said, in some cases may not help.

[darmach]

I also found new design with outline less appealing. To be honest - such borders on everything feel so designed 20 years ago... Anyways, here's a fork of the old theme, you cna install that with HACS - works well so far.

https://github.com/ChristophCaina/home-assistant-theme-outline-edge

[PacmanForever]

Interesting....

[piitaya]

I close the PR as the issues are about stack in card and PR has been open : custom-cards/stack-in-card#47

[PacmanForever]

In my case, this works.

custom-cards/stack-in-card#47 (comment)