Colors defined by CSS vars in "color_thresholds" are wrongly processed

[krasatos]

Hey everyone.

On 0.13.0 color vars color: var(---color-var) renders black bars on the card.
If i change to color: green it works ok.

Just rolled back to check, and this example code works ok on 0.12.1:

          - type: custom:mini-graph-card
            name: Master CPU Temp
            icon: mdi:temperature-celsius
            entities:
              - entity: sensor.processor_temperature
            show:
              graph: bar
            hours_to_show: 24
            points_per_hour: 3
            color_thresholds:
              - value: 0
                color: var(--success-color)
              - value: 40
                color: var(--error-color)
              - value: 65
                color: var(--warning-color)

Hope my submission includes all needed info.
Let me know if you need any further information from me.

[ildar170975]

Are these variables defined in the system?
I have some suspicions why this could be broken.
But can do nothing now, away from PC.

[heidrifx]

For me, this only ever occurs on the first color.
All other color thresholds work when using var(--color).

The following works besides the first threshold:

color_thresholds:
  - value: 0
    color: var(--red-color)   # <- this does *NOT* work
  - var(--deep-orange-color)  # <- these work just fine for me
  - var(--orange-color)
  - var(--light-green-color)
  - value: 66
    color: var(--green-color)

When I change the first threshold to a hex color (i.e., #f44336) or color name (i.e., red), the first color threshold works as well:

color_thresholds:
  - value: 0
    color: red                # <- this *works*
  - var(--deep-orange-color)
  - var(--orange-color)
  - var(--light-green-color)
  - value: 66
    color: var(--green-color)

[ildar170975]

There are issues with colors defined by CSS vars.
Colors may be not processed properly.
Better to see it with lower_bound defined to "widen up" a graph:

  - type: custom:mini-graph-card
    name: vars
    <<: &ref_settings
      entities:
        - entity: sensor.system_monitor_processor_use
      points_per_hour: 120
      hours_to_show: 0.5
      color_thresholds_transition: hard
      height: 200
      show:
        points: true
    color_thresholds: &ref_thresholds_vars
      - value: 0
        color: var(--red-color)
      - value: 10
        color: var(--cyan-color)
      - value: 15
        color: var(--yellow-color)
  - type: custom:mini-graph-card
    name: names
    <<: *ref_settings
    color_thresholds: &ref_thresholds_names
      - value: 0
        color: red
      - value: 10
        color: cyan
      - value: 15
        color: yellow
  - type: custom:mini-graph-card
    <<: *ref_settings
    name: vars + lower_bound
    lower_bound: ~0
    color_thresholds: *ref_thresholds_vars
  - type: custom:mini-graph-card
    <<: *ref_settings
    name: names + lower_bound
    lower_bound: ~0
    color_thresholds: *ref_thresholds_names

[ildar170975]

Hopefully will be fixed with #1270