Add ha-card and background color option

[sdrapha]

Currently, tabbed card doesn't have a background, or a ha-card element that card-mod could modify.
So this is a feature request for that.

I was able to achieve what I wanted with an extra card_mod card as a parent card. But I would like to avoid that and have the options directly. Especially if new versions will implement an UI editor, since the card_mod card will nullify that and force it into yaml.

Desired outcome:

Click to expand the yaml code for my current card

type: horizontal-stack
cards:
  - type: custom:button-card
    template: vertical_title
    name: Living Room
    icon: mdi:sofa
    color: rgb(40,30,80)
    styles:
      grid:
        - grid-template-rows: 55px auto
  - type: custom:mod-card
    card_mod:
      style: |
        ha-card {
          background: rgba(40,30,80,0.4);  
        }
    card:
      type: custom:tabbed-card
      attributes:
        isMinWidthIndicator: true
      styles:
        '--mdc-typography-button-font-size': 13px
        '--mdc-theme-primary': var(--secondary-text-color)
        '--mdc-tab-text-label-color-default': var(--secondary-text-color)
        '--mdc-tab-color-default': var(--secondary-text-color)
        '--mdc-ripple-color': transparent
      tabs:
        - attributes:
            label: Living Room
            icon: mdi:sofa
          card:
            type: vertical-stack
            cards:
              - cards:
                  - entity: null
                    color: auto
                    color_type: icon
                    show_icon: true
                    icon: mdi:sofa
                    size: 2em
                    show_name: true
                    name: Scenes
                    styles:
                      card:
                        - height: 70px
                        - '--mdc-ripple-color': none
                        - padding: 0px
                        - margin: 0px
                      name:
                        - font-size: 1em
                        - align-self: end
                        - opacity: 75%
                      icon:
                        - color: var(--paper-item-icon-color)
                    tap_action: none
                    type: custom:button-card
                    0template: entity_label
                  - entity: script.living_room_nightlight
                    color: auto
                    color_type: icon
                    hold_action:
                      action: more-info
                    show_icon: true
                    0icon: mdi:brightness-3
                    size: 2em
                    show_name: true
                    name: Nightlight
                    styles:
                      card:
                        - height: 70px
                        - width: 70px
                        - '--mdc-ripple-color': none
                      name:
                        - font-size: 0.8em
                      icon:
                        - color: var(--paper-item-text-color)
                        - 0color: var(--paper-item-icon-color)
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      service_data:
                        entity_id: script.living_room_nightlight
                    type: custom:button-card
                    0template: entity_label
                  - entity: script.living_room_dim
                    color: auto
                    color_type: icon
                    hold_action:
                      action: more-info
                    show_icon: true
                    icon: mdi:brightness-5
                    size: 2em
                    show_name: true
                    name: Dim
                    styles:
                      card:
                        - height: 70px
                        - width: 70px
                        - '--mdc-ripple-color': none
                      name:
                        - font-size: 0.8em
                      icon:
                        - color: var(--paper-item-text-color)
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      service_data:
                        entity_id: script.living_room_dim
                    type: custom:button-card
                  - entity: script.living_room_bright
                    color: auto
                    color_type: icon
                    hold_action:
                      action: more-info
                    show_icon: true
                    icon: mdi:brightness-7
                    size: 2em
                    show_name: true
                    name: Bright
                    styles:
                      card:
                        - height: 70px
                        - width: 70px
                        - '--mdc-ripple-color': none
                      name:
                        - font-size: 0.8em
                      icon:
                        - color: var(--paper-item-text-color)
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      service_data:
                        entity_id: script.living_room_bright
                    type: custom:button-card
                type: horizontal-stack
              - type: custom:decluttering-card
                template: tunable_light
                variables:
                  - name: Living Room group
                  - icon: sofa
                  - entity: light.livingroom_lights
        - attributes:
            label: More
          card:
            type: vertical-stack
            cards:
              - cards:
                  - entity: null
                    color: auto
                    color_type: icon
                    show_icon: true
                    icon: mdi:sofa
                    size: 2em
                    show_name: true
                    name: Scenes
                    styles:
                      card:
                        - height: 70px
                        - '--mdc-ripple-color': none
                        - padding: 0px
                        - margin: 0px
                      name:
                        - font-size: 1em
                        - align-self: end
                        - opacity: 75%
                      icon:
                        - color: var(--paper-item-icon-color)
                    tap_action: none
                    type: custom:button-card
                    0template: entity_label
                  - entity: script.living_room_nightlight
                    color: auto
                    color_type: icon
                    hold_action:
                      action: more-info
                    show_icon: true
                    0icon: mdi:brightness-3
                    size: 2em
                    show_name: true
                    name: Nightlight
                    styles:
                      card:
                        - height: 70px
                        - width: 70px
                        - '--mdc-ripple-color': none
                      name:
                        - font-size: 0.8em
                      icon:
                        - color: var(--paper-item-text-color)
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      service_data:
                        entity_id: script.living_room_nightlight
                    type: custom:button-card
                    0template: entity_label
                  - entity: script.living_room_dim
                    color: auto
                    color_type: icon
                    hold_action:
                      action: more-info
                    show_icon: true
                    icon: mdi:brightness-5
                    size: 2em
                    show_name: true
                    name: Dim
                    styles:
                      card:
                        - height: 70px
                        - width: 70px
                        - '--mdc-ripple-color': none
                      name:
                        - font-size: 0.8em
                      icon:
                        - color: var(--paper-item-text-color)
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      service_data:
                        entity_id: script.living_room_dim
                    type: custom:button-card
                  - entity: script.living_room_bright
                    color: auto
                    color_type: icon
                    hold_action:
                      action: more-info
                    show_icon: true
                    icon: mdi:brightness-7
                    size: 2em
                    show_name: true
                    name: Bright
                    styles:
                      card:
                        - height: 70px
                        - width: 70px
                        - '--mdc-ripple-color': none
                      name:
                        - font-size: 0.8em
                      icon:
                        - color: var(--paper-item-text-color)
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      service_data:
                        entity_id: script.living_room_bright
                    type: custom:button-card
                type: horizontal-stack
              - type: custom:decluttering-card
                template: tunable_light
                variables:
                  - name: Living Room group
                  - icon: sofa
                  - entity: light.livingroom_lights
              - type: custom:decluttering-card
                template: tunable_light
                variables:
                  - name: Fireplace group
                  - icon: fireplace
                  - entity: light.fireplaces_lights
              - type: custom:decluttering-card
                template: tunable_light
                variables:
                  - name: Mini Lamps
                  - icon: lamps
                  - entity: light.minilamps_lights
 

[kinghat]

thanks for your request. i will move it to where i put them for future consideration.

[Mariusthvdb]

+1 to this request.

especially valid since the card-mod resource was briefly updated to 3.5.0 (and now retracted again....) but showing this is in serious development taking out the mod-card functionality, and with that, robbing us from the options it offered to mod the tabbed-card tab bar.

my one standing config was:

card:
  type: custom:tabbed-card
  card_mod:
    style:
      tabbed-card:
        $:
          .: |
            mwc-tab:hover {
              --mdc-theme-primary: var(--power-color);
              --mdc-tab-color-default: var(--power-color);
            }
            mwc-tab-bar {
              background: {{'var(--lovelace-background)'
                            if is_state('binary_sensor.donker_thema','on')
                            else 'var(--primary-color)'}};
            }
          mwc-tab:
            $:
              mwc-tab-indicator $: |
               .mdc-tab-indicator__content--underline {
                  border-color: var(--active-color);
                }

              .: |
                .mdc-tab {
                  min-width: 80px;
                }
                .material-icons {
                  display: contents !important;
                }

                .mdc-tab--active {
                  --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
                  /*background: var(--text-color-off) !important;*/
                }

  styles:
    --mdc-tab-horizontal-padding: 4px;
    --mdc-theme-primary: var(--active-color)
#     --mdc-theme-secondary: var(--text-color-off) # not functional
    --mdc-tab-color-default: var(--text-color-off)
  tabs:
    '[[tabs]]'

still using 3.5.0 (so losing the mod-card) there is no way we can modify the mwc-tab-bar anymore, losing all of its settings we so carefully adjusted......

please make tabbed-card adhere to the new HA frontend card specifics (hui-card) and preferably use several theme variables too? for background at least if possible

with 3.5.0 we were supposed to modify directly on card itself, so if you'd make that possible, we are good to go ;-)

thanks for any development you could throw at us, glad to help in anyway. testing or you name it!

edit/update

fwiw, I've managed to bring back the above modifications in card_mod 3.5.0 with

# tabbed-card style
style:
  .: |
    mwc-tab:hover {
      --mdc-theme-primary: var(--power-color);
      --mdc-tab-color-default: var(--power-color);
    }
    mwc-tab-bar {
      background: {{'var(--lovelace-background)'
                    if is_state('binary_sensor.donker_thema','on')
                    else 'var(--primary-color)'}};
    }

  mwc-tab:
    $:
      mwc-tab-indicator $: |
       .mdc-tab-indicator__content--underline {
          border-color: var(--active-color);
        }

      .: |
        .mdc-tab {
          min-width: 80px;
        }
        .material-icons {
          display: contents !important;
        }

        .mdc-tab--active {
          --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
          /*background: var(--text-color-off) !important;*/
        }