Overload Internal Templates

[jn3va]

Is there a way to overload the internal templates similar to how you can use a folder/file with the prefix custom_ to add a new card and inherit the rest of the template/theme? What I would like to do is change the button styling so that when it is on the button has an outline and some additional animation. Essentially have something like the "blue:" internal template replaced with a different version of 'blue:' but use the same name so that I don't also have to recreate all of the custom cards; and anything that was using the old blue will inherit these changes.

For example, add the 3 lines
- box-shadow: 0px 0px 15px rgb(18,81,219, 100%)
- --mdc-ripple-color: black
- --mdc-ripple-press-opacity: 0.5

to the blue: internal template.

blue:
state:
- styles:
icon:
- color: 'rgba(var(--color-blue),1)'
label:
- color: 'rgba(var(--color-blue-text),1)'
name:
- color: 'rgba(var(--color-blue-text),1)'
img_cell:
- background-color: 'rgba(var(--color-blue), 0.2)'
card:
- background-color: 'rgba(var(--color-background-blue), var(--opacity-bg))'
- box-shadow: 0px 0px 15px rgb(18,81,219, 100%)
- --mdc-ripple-color: black
- --mdc-ripple-press-opacity: 0.5
value: 'on'

[mp-se]

yes its possible to apply other templates since they can be stacked. I've added a few more color options (blue is standard) to the standard templates which I can easily add. I've tested with applying more colors but you should be able to override/add most things. The colors below are defined in the standard theme. You can also use this method if you want to apply highlight to other states than the default ones.

      - type: custom:button-card
        template: 
          - card_generic
          - purple_no_state
        entity: sensor.temp_outside_temperature

Just add these lines to a yaml file in the same directory as the other cards.

purple:
  state:
    - styles:
        icon:
          - color: "rgba(var(--color-purple),1)"
        label:
          - color: "rgba(var(--color-purple-text),1)"
        name:
          - color: "rgba(var(--color-purple-text),1)"
        img_cell:
          - background-color: "rgba(var(--color-purple), 0.2)"
        card:
          - background-color: "rgba(var(--color-background-purple), var(--opacity-bg))"
      value: "on"
purple_no_state:
  styles:
    icon:
      - color: "rgba(var(--color-purple),1)"
    label:
      - color: "rgba(var(--color-purple-text),1)"
    name:
      - color: "rgba(var(--color-purple-text),1)"
    img_cell:
      - background-color: "rgba(var(--color-purple), 0.2)"
    card:
      - background-color: "rgba(var(--color-background-purple), var(--opacity-bg))"

[mp-se]

The way the button card works is that it overvrites older values from templates in the order which they are declared/imported in the yaml file. You can have a template with a new name blue2: and apply that in your UI yaml file (as my example above) which can overwrite the same parameters set by the blue. You can do that with any value. In the example below I can change the parameter of the graph card from the standard line to a bar.

- type: 'custom:button-card'
  template: card_graph
  variables:
    ulm_card_graph_color: "var(--google-blue)"
    ulm_card_graph_name: Temperatur
    ulm_card_graph_entity: sensor.temp_livingroom_temperature
  custom_fields:
    item2:
      card:
        show:
          graph: bar