Bubble Card 2

v2.3.0-beta.1

Hi everyone!

I took a few days off from development, but I'm back! This new beta release brings a highly requested feature, along with a few others.

Here are all the details:

Global CSS variables

You can now modify most of the styles directly in your theme file without needing custom styles! For example, here's my dashboard with less rounded borders and new background colors.

This was achievable with just a few lines added to my theme. Don’t forget to reload your theme using the frontend.reload_themes action, such as via Developer Tools.

I’ll be adding the full list to the documentation soon, but just like with custom styles, you can find all of them by checking the src/cards folder in this repository. In each card folder, you'll find a file named styles.ts. These files contain all the applied styles.

Sub-buttons support light color

If you have a sub-button with a light entity, it will now change its color based on the light’s color. I noticed many of you were achieving this with custom templates, no need for them anymore!

That "Power" sub-button now changes its color based on the light’s color. This pop-up is also modified by the new global variables, though the color harmony might not be the best…

I’ve also worked on improving the button slider, updates are now triggered only on release, making it easier to use!

This is still an early release, and I plan to fix more of the new issues you've all submitted.

Here’s the full changelog:

💡 New Features

• Global CSS variables: Added CSS variables for the most important values, allowing simple editing in themes.
• Sub-buttons color: Sub-buttons background color now changes based on light color.
• Select styling: It's now possible to modify the styles of a select card/sub-button with the new variables. #725

✔️ Bug Fixes and Optimizations

• Slider optimization: Button slider updates are now triggered only on release. #686 (Partial optimization for #764)
• Slider haptic feedback: Button slider haptic feedback is now triggered only on release.
• Cover attribute fix: Attributes with a value of "0" were not displayed, this is now fixed! #750
• Show name issue: Disabling the "Text Scrolling Effect" was breaking "Show Name", this is now fixed! #598
• Sub-view back button issue: The back button on sub-views stopped working after the v2.2.4 release, this is now fixed!

I can't wait for your feedback as always!

Oh, and one more thing! I have a small surprise for you all! I’ve been wanting to start my own YouTube channel for a while, focusing on tutorials around Home Assistant and Bubble Card. There are two videos so far, an introduction explaining the project and a first tutorial on how to create your first pop-up. I really hope you will enjoy them. Don’t hesitate to subscribe to help give my channel more visibility. Thank you in advance!

The next video will cover the new global variables, as well as custom styles and templates, since I’ve noticed more and more questions on these topics.

And if you are interested I've opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:

🍻