After many hours...define custom var is a mistery

Configuration Frontend
1

Hi all,
i 'm trying to understand one more in HA (i’m developer in javascript,html,css, react, nodejs, php etc…) and i find some complex to go inside the logic.

for example, after installed “Custom cards for Home Assistant · GitHub” now i want only colorize the button in different color by a var.

this is my template to style my button and work fine if i set “red” in color, but use the var “pippo_test” is almost impossible!

garage_door:
  variables:
    pippo_test: "blue"
    name: "[[[ return variables.pippo_test ]]]"

  styles:
    card:
      - max-width: 120px
      - fontSize: .9em
    icon:
      - margin: 8px
  state:
    - value: 'closed'
      operator: '=='
      icon: mdi:garage-variant
      color: red

some other tests

 color: "[[[ return variables.pippo_test ]]]" #not work
 color: "[[[ variables.pippo_test ]]]" #not work
 color: [[[ return variables.pippo_test ]]] #not work
 color: return variables.pippo_test #not work
 color: variables.pippo_test" #not work

i can not understand the complex in this very easy action! someone can help me?
in some example i find var(–paper-item-icon-active-color), but why in all documentations of HA it dosen’t not exists?!where is the doc for the var?

have you some basic example?

why in name work bu in color no?

garage_door:
  variables:
    color: "red"
  styles:
    card:
      - max-width: 120px
      - fontSize: .9em
    icon:
      - margin: 8px
  state:
    - value: 'closed'
      operator: '=='
      icon: mdi:garage-variant
      name: '[[[return variables.color]]]' 
      color: '[[[return variables.color]]]'

immagine

2

The color object doesn’t support templates.
But you can solve it this way:


variables:
  color: red
styles:
  card:
    - max-width: 120px
    - fontSize: .9em
  icon:
    - margin: 8px
state:
  - value: 'closed'
    icon: mdi:garage-variant
    styles:
      icon:
        - color: '[[[return variables.color]]]'
3

yes correct! i’m dummy! Thanks