New badges and card-mod customisation

[Ideefiks]

@Mariusthvdb

also, I did quickly try to get the rgb() colors from the badge color (and prevent the hard-coded rgb there) using the relative value syntax rgb(from var(--badge-color) r g b / 1) function. (see CSS rgb() function)
I didnt manage to find the 100% correct syntax for that though. Which is too bad, as it would allow me to generalize the modification into a yaml anchor or include

Are you still looking for this syntax? Not sure what exactly you were missing but this works for me. Now I plan to generalise this in an include so the alpha corrections and positions are calculated on the fly, depending on number of stops - I might have overdone it a little below - and desired easing function (in, out or in-out):

btw, I got the idea for this crazy long gradient here Easing Gradients and have to admit, even on a small badge, the difference is noticeable so now applying this trick in other places (hence the need to turn this into an include …)

{% set gradientcolor = 'var(--badge-color)' %} 
{% set alpha = 0.5 %}
{% set startgradient = 0 %}
{% set endgradient = 100 %}

background: linear-gradient(90deg,
            {{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 1.000) | string + ' )'}} 0%, 
            {{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 1.000) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 00.0 / 100}}%, 
            {{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.925) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 09.5 / 100}}%,
            {{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.857) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 17.7 / 100}}%,
            {{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.781) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 24.7 / 100}}%,
            {{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.701) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 31.0 / 100}}%,
            {{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.620) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 36.8 / 100}}%,
            {{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.538) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 42.3 / 100}}%,
            {{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.455) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 47.6 / 100}}%,
            {{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.373) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 52.9 / 100}}%,
            {{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.291) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 58.2 / 100}}%,
            {{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.212) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 63.7 / 100}}%,
            {{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.138) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 69.5 / 100}}%,
            {{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.070) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 75.8 / 100}}%,
            {{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.019) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 91.2 / 100}}%,
            {{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.000) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 100 / 100}}%,
            {{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.000) | string + ' )'}} 100%
          );