CSS Variables extension, PX to EM

[honzis1364]

Proposed change

Extend Bubble Card CSS Variables to give users easier access to theming.
Convert Bubble Card full to EM units instead of PX.

• Added and extended CSS variables
• Converted PX values to EM

Type of change

• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

.bubble-buttons-container {
    --icon-primary-color: var(--primary-text-color);
    display: flex;
    margin-right: var(--bubble-buttons-container-margin-right, 0.5em);
    margin-left: var(--bubble-buttons-container-margin-left, 0em);
    margin-top: var(--bubble-buttons-container-margin-top, 0em);
    margin-bottom: var(--bubble-buttons-container-margin-bottom, 0em);
    gap: var(--bubble-buttons-container-gap, 0.25em);
}

Example printscreens/gif

Visually Bubble Card remains the same:

Additional information

Some user styling could be overrided by these changes - to specify transition and margin. It has been splitted into standalone properties rather than using transition: all 1.5s; for future user-overrides specific (for ex. only to change the duration of the animation via variable).
Fallbacks remained the same. For users with compatibility issue - take a look at new css vars and consider changing them instead of other code overrides.
This PR opens the way to style Bubble Card more easily with just CSS variables without need to use !important.

Additional documentation needed.

.bubble-container {
     font-size: 16px; /* default font size for EM scaling */
 }

This can be used to scale Bubble Card proportionally and globally. Change the font-size to see how the Bubble Card scales. Changing this value scales everything, not just a font-size. To understand how does em / rem sizing works, take a look here: https://www.a11y-collective.com/blog/what-is-rem-in-css/

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests screenshots/gifs have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for readme.

[AlexDaniel]

Out of curiosity, why em and not rem?

Also, I think dist/ changes should not be part of the PR.

[nagtegaal]

How does this work? I see you do this in more places.
I know that this works:
height: var(--bubble-separator-height, 2.75em);

But replacing:
height: 44px;
with:
--bubble-separator-height: 2,75em

How does CSS knows, that this is the height-property which is set here? Curious to learn/understand.

[nagtegaal]

Indentation is off

[Clooos]

Hi! I hope you're doing well. I'm currently reviewing your PR and I've run into a few issues, actually the first three CSS files I checked (maybe just bad luck) needed some fixes because some elements were not looking the same 😅 I'll wait for your response before continuing, since I can't merge the PR as it is.

I'm planning to release the stable v3.0.0 in less than 2 weeks 🥳 So if I don't have news from you until that, this PR will be for the next release, like v3.0.1 🙂