Optimize custom style settings

[Matssa56]

Goal

Hi, I'm customizing some button cards in order to change the colors if an entity is on, off, unavailable, etc... Currently it works, however I need to copy my settings on a lot of buttons.

Is there a way to centralize these settings somewhere (for example in the theme, macro, CSS anchor, CSS class, etc?) in order to call the same settings everywhere I need (and therefore create other settings)?

For example I currently have three "settings" : entity on (put the card in green and icon in green), entity off (changed the global CSS value), alarm buttons (icon and color in red if a door is open and put some anymation in there with icon shadow is an entity is unavailable).

I wanted to use the .is-on or stuff like that since I want to avoid checking the state of the entity for easy stuff (less load maybe on the server?).

Thanks!

Source Yaml

Custom theme :
  bubble-button-accent-color: var(--color-card-green) # card color when entity is on on switch bubble cards
  bubble-accent-color: var(--color-icon-green) # icon color when entity is on on switch bubble cards
  bubble-button-main-background-color: var(--ha-card-background) # want a specific background color
  bubble-button-icon-background-color: "transparent"  # no background behind icons


Custom settings on green buttons (mostly nothing since I directly changed the accent color) :
.bubble-name {
    font-size: 15px;
}
.bubble-state {
    font-size: 12px;
    opacity: 1;
}
.bubble-icon {
  opacity: 1;
}


Custom settings on alarm buttons (a lot of stuff here) :
.bubble-name {
  font-size: 15px;
}
.bubble-state {
  font-size: 12px;
}
*:not(.is-unavailable .bubble-icon) {
  opacity: 1 !important;
}
.is-unavailable .bubble-button-background {
  background-color: var(--color-card-red);
}
.is-unavailable .bubble-name {
  color: var(--color-icon-red);
}
.is-unavailable .bubble-icon {
  color: var(--color-icon-red) !important;
  animation: blink 1s ease infinite !important;
}
.is-unavailable .bubble-icon-container{
  background-color: var(--color-img-cell-red);
}
@keyframes blink {
	0% {opacity: 0}
	50% {opacity: 1}
    100% {opacity: 0}
}

Which step did you already try?

No response

Problem

No response

Read the documentation

• I have read the documentation