can't apple opacity to 'var(--button-card-light-color)`

[andyblac]

Checklist

• [yes ] I updated the card to the latest version available
• [yes ] I cleared the cache of my browser

Describe the bug when I use - background-color: "rgba(var(--button-card-light-color),0.2)", all I get is default card color background,

this - background-color: "var(--button-card-light-color)" give the correct color but it is solid, I am trying to have opacity of 20%

card_andyblac_widget_icon:
  variables:
    tap_action:
      action: "toggle"
    hold_action:
      action: "more-info"
  tap_action:
    action: "[[[ return variables?.tap_action?.action ? variables.tap_action.action : 'none'; ]]]"
    entity: "[[[ return variables.tap_action.entity; ]]]"
    navigation_path: "[[[ return variables.tap_action.navigation_path; ]]]"
    url_path: "[[[ return variables.tap_action.url_path; ]]]"
    service: "[[[ return variables.tap_action.service; ]]]"
    service_data: "[[[ return variables.tap_action.service_data; ]]]"
  hold_action:
    action: "[[[ return variables?.hold_action?.action ? variables.hold_action.action : 'none'; ]]]"
    entity: "[[[ return variables.hold_action.entity; ]]]"
    navigation_path: "[[[ return variables.hold_action.navigation_path; ]]]"
    url_path: "[[[ return variables.hold_action.url_path; ]]]"
    service: "[[[ return variables.hold_action.service; ]]]"
    service_data: "[[[ return variables.hold_action.service_data; ]]]"
  size: "15px"
  show_icon: true
  show_name: false
  styles:
    icon:
      - width: "50%"
      - height: "50%"
      - line-height: "0"
      - color: "rgba(var(--color-theme),0.2)"
    img_cell:
      - border-radius: "50%"
      - background-color: "rgba(var(--color-theme),0.05)"
    grid:
      - grid-template-areas: "'i'"
    card:
      - height: "100%"
      - background: "none"
      - box-shadow: "none"
      - padding: "0px"
      - border-radius: "50%"
  state:
    - styles:
        icon:
          - color: "var(--button-card-light-color)"
        img_cell:
          - background-color: "rgba(var(--button-card-light-color),0.2)"
      id: "on"
      value: "on"

[Lynilia]

This is not a button-card bug. rgba(var(--button-card-light-color),0.2) is not valid CSS because var(--button-card-light-color) evaluates to a <color> while rgb() expects numbers. You can use the recent function color-mix() to add transparency to an already existing color: color-mix(in srgb, transparent, var(--button-card-light-color) 20%) (note this requires an up-to-date browser)

[andyblac]

that great thanks so much.... 😄