as discovered during beta testing of card_mod 4.0.0
find more details in the FR that turned out not to be required… 
we can again modify the custom:hui-state-badge-element, which is how the former state-badge from before the introduction of the current badges can still be used in the top view badge section.
using dedicated variables on the :host
- type: custom:hui-state-badge-element
entity: device_tracker.ha_main
card_mod:
style: |
:host {
color: purple;
--label-badge-text-color: green;
--label-badge-red: orange;
--label-badge-background-color: salmon;
--ha-label-badge-label-color: blue;
--ha-label-badge-title-font-size: 20px;
--ha-label-badge-label-text-transform: uppercase;
}
or, make it through the Dom traversal on the individual elements
- entity: sun.sun #person.xxx
type: custom:hui-state-badge-element
visibility:
- condition: state
entity: sun.sun
state: above_horizon
card_mod:
style:
<<: &exist
.: |
:host {
{% if states(config.entity) == 'unknown' %} display: none {% endif %}
}
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container
/* Top circle of the Badge (State) */
.label-badge {
border-style: dashed;
border-color: blue;
color: gray;
background: yellow;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
animation: rotate 2s infinite, colorize 4s infinite;
}
@keyframes rotate {
0% {transform: rotate(0);}
50% {transform: rotate(3.142rad);}
100% {transform: rotate(0);}
}
@keyframes colorize {
0% {background-color: yellow;}
25% {background: brown;}
50% {background: purple;}
75% {background: green;}
100% {background: pink;}
}
/* Label of the Badge (Unit) */
.label-badge .label span {
border-style: dotted;
border-color: pink;
color: red;
background: green;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {opacity: 0;
transform: scale(0.5);
}
50% {opacity: 1;}
100% {opacity: 0;
transform: scale(1.7);
}
}
/* Below the Badge (Name) */
.title {
color: orange;
background: green;
border-style: dotted solid double dashed;
border-color: pink;
}
great news for those still using these style of elements in their badge section.
only but:
havent found yet how to modify badges inside the custom:badge-card, that let’s us place badges everywhere in the view:
- type: custom:badge-card
badges:
- entity: sun.sun
type: custom:hui-state-badge-element
then again, that card is very old and not updated since some 4 years…
the fix that was found during the time of the transition does not stick anymore