use new (2025.8) ha-button to showcase theme options

[Mariusthvdb]

new color schemes introduced in HA 2025.8 can disrupt our themes when used outside of default theme.

used theme variables:

# https://github.com/home-assistant/frontend/blob/dev/src/resources/theme/color/wa.globals.ts#L21
  ha-color-on-primary-loud: '#e4e6e9' #text accent
#   ha-color-on-primary-normal: green text filled, plain
#   ha-color-on-primary-quiet: yellow text outlined

# Brand color palette
  ha-color-primary-30: '#494d55'    # background accent hover
  ha-color-primary-40: '#636b75'    # background accent, text filled , text plain
  ha-color-primary-50: '#636b75'    # text outlined
  ha-color-primary-80: '#cdd1d4'    # background filled hover
  ha-color-primary-90: '#e4e6e9'    # background filled
  ha-color-primary-95: '#e4e6e9'    # background outlined hover, plain hover

Adjusting those new colors is not very straightforward. With this overview, you can immediately see your results:

title: Themed ha-button
path: themed_ha_button
subview: true
max_columns: 1
sections:
  - cards:
      - type: vertical-stack
        cards:
          - type: tile
            card_mod: !include /config/dashboard/card_mods/tile_input_select.yaml
            entity: input_select.theme
            features:
              - type: select-options
            features_position: inline
#             hide_state: true
            vertical: false
            tap_action:
              action: perform-action
              perform_action: frontend.reload_themes

          - type: heading
            heading: Brand
          - type: horizontal-stack
            cards:
              - type: custom:button-card
#                 template: styles_action_button
                name: >
                  <ha-button variant="brand" appearance="accent">Accent</ha-button>
                <<: &styles_action_button
                  styles:
                    card:
                      - border-top-color: var(--divider-color) # rgba(0, 0, 0, 0.12)
                      - border-top-style: solid
                      - border-top-width: 1px
                      - padding: 8px 0px
                      - --mdc-ripple-press-opacity: 0
                <<: &tap
                  tap_action:
                    anything: |
                      [[[ return window.history.back(); ]]]
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="brand" appearance="filled">Filled</ha-button>
                <<: *tap
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="brand" appearance="outlined">Outlined</ha-button>
                <<: *tap
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="brand" appearance="plain">Plain</ha-button>
                <<: *tap

          - type: heading
            heading: Neutral
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="neutral" appearance="accent">Accent</ha-button>
                <<: *tap
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="neutral" appearance="filled">Filled</ha-button>
                <<: *tap
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="neutral" appearance="outlined">Outlined</ha-button>
                <<: *tap
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="neutral" appearance="plain">Plain</ha-button>
                <<: *tap

          - type: heading
            heading: Danger
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="danger" appearance="accent">Accent</ha-button>
                <<: *tap
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="danger" appearance="filled">Filled</ha-button>
                <<: *tap
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="danger" appearance="outlined">Outlined</ha-button>
                <<: *tap
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="danger" appearance="plain">Plain</ha-button>
                <<: *tap

          - type: heading
            heading: Warning
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="warning" appearance="accent">Accent</ha-button>
                <<: *tap
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="warning" appearance="filled">Filled</ha-button>
                <<: *tap
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="warning" appearance="outlined">Outlined</ha-button>
                <<: *tap
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="warning" appearance="plain">Plain</ha-button>
                <<: *tap

          - type: heading
            heading: Success
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="success" appearance="accent">Accent</ha-button>
                <<: *tap
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="success" appearance="filled">Filled</ha-button>
                <<: *tap
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="success" appearance="outlined">Outlined</ha-button>
                <<: *tap
              - type: custom:button-card
                <<: *styles_action_button
                name: >
                  <ha-button variant="success" appearance="plain">Plain</ha-button>
                <<: *tap

[dcapslock]

Nice reosurce @Mariusthvdb

[Mariusthvdb]

just a note for updating to v5
javascript action is now fully and officially supported, and should be in this syntax, and only this syntax:

                <<: &tap
                  tap_action:
                    action: javascript
                    javascript: |
                      [[[ return window.history.back(); ]]]