diff --git a/src/template.yaml b/src/template.yaml index 101721b..be94720 100644 --- a/src/template.yaml +++ b/src/template.yaml @@ -200,21 +200,21 @@ mdc-ripple-hover-opacity: var(--token-opacity-ripple-hover) # .............................................................................. # Text Fields an Dropdown input-background-color: var(--token-color-background-input-base) -input-background-token-color-disabled: rgba(var(--input-background-color), 0.5) +input-background-token-color-disabled: color-mix(in srgb, var(--input-background-color) 50%, transparent) input-fill-color: var(--input-background-color) input-ink-color: var(--token-color-text-primary) input-label-ink-color: var(--token-color-text-primary) input-disabled-fill-color: var(--input-background-token-color-disabled) input-disabled-ink-color: var(--disabled-text-color) input-disabled-label-ink-color: var(--disabled-text-color) -input-idle-line-color: var(--background-color) +input-idle-line-color: var(--primary-background-color) input-dropdown-icon-color: var(--secondary-text-color) input-hover-line-color: var(--primary-color) input-disabled-line-color: var(--disabled-color) mdc-select-fill-color: var(--input-fill-color) mdc-select-ink-color: var(--input-ink-color) mdc-select-label-ink-color: var(--input-label-ink-color) -mdc-select-idle-line-color: var(--token-color-background-base) +mdc-select-idle-line-color: var(--divider-color) mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color) mdc-select-hover-line-color: var(--input-hover-line-color) mdc-text-field-fill-color: var(--input-fill-color) @@ -226,6 +226,18 @@ input-outlined-idle-border-color: var(--divider-color) input-outlined-hover-border-color: var(--primary-color) input-outlined-disabled-border-color: var(--disabled-color) paper-input-container-focus-color: var(--primary-color) +# HA 2026.3+ Web Awesome / semantic color variables +ha-color-form-background: var(--token-color-background-input-base) +ha-color-form-background-hover: var(--token-color-background-input-base) +ha-color-form-background-disabled: var(--token-color-background-input-disabled) +wa-color-surface-raised: var(--token-color-background-card) +# Dropdown/menu item hover fills (light defaults are near-white; override for dark themes) +ha-color-fill-neutral-quiet-resting: var(--token-color-background-card) +ha-color-fill-neutral-quiet-hover: var(--token-color-background-input-base) +ha-color-fill-neutral-quiet-active: var(--token-color-background-card) +ha-color-fill-neutral-normal-resting: var(--token-color-background-secondary) +ha-color-fill-neutral-normal-hover: var(--token-color-background-card) +ha-color-fill-neutral-normal-active: var(--token-color-background-secondary) # .............................................................................. # Markdown markdown-code-background-color: var(--code-editor-background-color) diff --git a/src/template_eink.yaml b/src/template_eink.yaml index a2f96b3..f6d783a 100644 --- a/src/template_eink.yaml +++ b/src/template_eink.yaml @@ -186,7 +186,7 @@ mdc-ripple-hover-opacity: var(--token-opacity-ripple-hover) # .............................................................................. # Text Fields an Dropdown input-background-color: var(--token-color-background-input-base) -input-background-token-color-disabled: rgba(var(--input-background-color), 0.5) +input-background-token-color-disabled: color-mix(in srgb, var(--input-background-color) 50%, transparent) input-fill-color: var(--input-background-color) input-ink-color: var(--token-color-text-primary) input-label-ink-color: var(--token-color-text-primary) @@ -212,6 +212,11 @@ input-outlined-idle-border-color: var(--divider-color) input-outlined-hover-border-color: var(--primary-color) input-outlined-disabled-border-color: var(--disabled-color) paper-input-container-focus-color: var(--primary-color) +# HA 2026.3+ Web Awesome / semantic color variables +ha-color-form-background: var(--token-color-background-input-base) +ha-color-form-background-hover: var(--token-color-background-input-base) +ha-color-form-background-disabled: var(--token-color-background-input-disabled) +wa-color-surface-raised: var(--token-color-background-card) # .............................................................................. # Markdown markdown-code-background-color: var(--code-editor-background-color) diff --git a/themes/graphite-auto.yaml b/themes/graphite-auto.yaml index f93b3f9..0bdaac1 100644 --- a/themes/graphite-auto.yaml +++ b/themes/graphite-auto.yaml @@ -11,7 +11,7 @@ Graphite Auto: # https://github.com/TilmanGriesel/graphite #------------------------------------------------------ - # This file was generated at 2026-02-08 15:08:56 + # This file was generated at 2026-04-16 11:54:13 #------------------------------------------------------ @@ -347,21 +347,21 @@ Graphite Auto: # .............................................................................. # Text Fields an Dropdown input-background-color: var(--token-color-background-input-base) - input-background-token-color-disabled: rgba(var(--input-background-color), 0.5) + input-background-token-color-disabled: color-mix(in srgb, var(--input-background-color) 50%, transparent) input-fill-color: var(--input-background-color) input-ink-color: var(--token-color-text-primary) input-label-ink-color: var(--token-color-text-primary) input-disabled-fill-color: var(--input-background-token-color-disabled) input-disabled-ink-color: var(--disabled-text-color) input-disabled-label-ink-color: var(--disabled-text-color) - input-idle-line-color: var(--background-color) + input-idle-line-color: var(--primary-background-color) input-dropdown-icon-color: var(--secondary-text-color) input-hover-line-color: var(--primary-color) input-disabled-line-color: var(--disabled-color) mdc-select-fill-color: var(--input-fill-color) mdc-select-ink-color: var(--input-ink-color) mdc-select-label-ink-color: var(--input-label-ink-color) - mdc-select-idle-line-color: var(--token-color-background-base) + mdc-select-idle-line-color: var(--divider-color) mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color) mdc-select-hover-line-color: var(--input-hover-line-color) mdc-text-field-fill-color: var(--input-fill-color) @@ -373,6 +373,18 @@ Graphite Auto: input-outlined-hover-border-color: var(--primary-color) input-outlined-disabled-border-color: var(--disabled-color) paper-input-container-focus-color: var(--primary-color) + # HA 2026.3+ Web Awesome / semantic color variables + ha-color-form-background: var(--token-color-background-input-base) + ha-color-form-background-hover: var(--token-color-background-input-base) + ha-color-form-background-disabled: var(--token-color-background-input-disabled) + wa-color-surface-raised: var(--token-color-background-card) + # Dropdown/menu item hover fills (light defaults are near-white; override for dark themes) + ha-color-fill-neutral-quiet-resting: var(--token-color-background-card) + ha-color-fill-neutral-quiet-hover: var(--token-color-background-input-base) + ha-color-fill-neutral-quiet-active: var(--token-color-background-card) + ha-color-fill-neutral-normal-resting: var(--token-color-background-secondary) + ha-color-fill-neutral-normal-hover: var(--token-color-background-card) + ha-color-fill-neutral-normal-active: var(--token-color-background-secondary) # .............................................................................. # Markdown markdown-code-background-color: var(--code-editor-background-color) @@ -570,7 +582,7 @@ Graphite Auto: # https://github.com/TilmanGriesel/graphite #------------------------------------------------------ - # This file was generated at 2026-02-08 15:08:56 + # This file was generated at 2026-04-16 11:54:13 #------------------------------------------------------ @@ -906,21 +918,21 @@ Graphite Auto: # .............................................................................. # Text Fields an Dropdown input-background-color: var(--token-color-background-input-base) - input-background-token-color-disabled: rgba(var(--input-background-color), 0.5) + input-background-token-color-disabled: color-mix(in srgb, var(--input-background-color) 50%, transparent) input-fill-color: var(--input-background-color) input-ink-color: var(--token-color-text-primary) input-label-ink-color: var(--token-color-text-primary) input-disabled-fill-color: var(--input-background-token-color-disabled) input-disabled-ink-color: var(--disabled-text-color) input-disabled-label-ink-color: var(--disabled-text-color) - input-idle-line-color: var(--background-color) + input-idle-line-color: var(--primary-background-color) input-dropdown-icon-color: var(--secondary-text-color) input-hover-line-color: var(--primary-color) input-disabled-line-color: var(--disabled-color) mdc-select-fill-color: var(--input-fill-color) mdc-select-ink-color: var(--input-ink-color) mdc-select-label-ink-color: var(--input-label-ink-color) - mdc-select-idle-line-color: var(--token-color-background-base) + mdc-select-idle-line-color: var(--divider-color) mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color) mdc-select-hover-line-color: var(--input-hover-line-color) mdc-text-field-fill-color: var(--input-fill-color) @@ -932,6 +944,18 @@ Graphite Auto: input-outlined-hover-border-color: var(--primary-color) input-outlined-disabled-border-color: var(--disabled-color) paper-input-container-focus-color: var(--primary-color) + # HA 2026.3+ Web Awesome / semantic color variables + ha-color-form-background: var(--token-color-background-input-base) + ha-color-form-background-hover: var(--token-color-background-input-base) + ha-color-form-background-disabled: var(--token-color-background-input-disabled) + wa-color-surface-raised: var(--token-color-background-card) + # Dropdown/menu item hover fills (light defaults are near-white; override for dark themes) + ha-color-fill-neutral-quiet-resting: var(--token-color-background-card) + ha-color-fill-neutral-quiet-hover: var(--token-color-background-input-base) + ha-color-fill-neutral-quiet-active: var(--token-color-background-card) + ha-color-fill-neutral-normal-resting: var(--token-color-background-secondary) + ha-color-fill-neutral-normal-hover: var(--token-color-background-card) + ha-color-fill-neutral-normal-active: var(--token-color-background-secondary) # .............................................................................. # Markdown markdown-code-background-color: var(--code-editor-background-color) diff --git a/themes/graphite-eink-dark.yaml b/themes/graphite-eink-dark.yaml index 9018a22..ca94b18 100644 --- a/themes/graphite-eink-dark.yaml +++ b/themes/graphite-eink-dark.yaml @@ -8,7 +8,7 @@ Graphite E-ink Dark: # https://github.com/TilmanGriesel/graphite #------------------------------------------------------ - # This file was generated at 2026-02-08 15:08:56 + # This file was generated at 2026-04-16 11:54:13 #------------------------------------------------------ card-mod-theme: Graphite E-ink Dark @@ -343,7 +343,7 @@ Graphite E-ink Dark: # .............................................................................. # Text Fields an Dropdown input-background-color: var(--token-color-background-input-base) - input-background-token-color-disabled: rgba(var(--input-background-color), 0.5) + input-background-token-color-disabled: color-mix(in srgb, var(--input-background-color) 50%, transparent) input-fill-color: var(--input-background-color) input-ink-color: var(--token-color-text-primary) input-label-ink-color: var(--token-color-text-primary) @@ -369,6 +369,11 @@ Graphite E-ink Dark: input-outlined-hover-border-color: var(--primary-color) input-outlined-disabled-border-color: var(--disabled-color) paper-input-container-focus-color: var(--primary-color) + # HA 2026.3+ Web Awesome / semantic color variables + ha-color-form-background: var(--token-color-background-input-base) + ha-color-form-background-hover: var(--token-color-background-input-base) + ha-color-form-background-disabled: var(--token-color-background-input-disabled) + wa-color-surface-raised: var(--token-color-background-card) # .............................................................................. # Markdown markdown-code-background-color: var(--code-editor-background-color) diff --git a/themes/graphite-eink-light.yaml b/themes/graphite-eink-light.yaml index 1988692..d6222c0 100644 --- a/themes/graphite-eink-light.yaml +++ b/themes/graphite-eink-light.yaml @@ -8,7 +8,7 @@ Graphite E-ink Light: # https://github.com/TilmanGriesel/graphite #------------------------------------------------------ - # This file was generated at 2026-02-08 15:08:56 + # This file was generated at 2026-04-16 11:54:13 #------------------------------------------------------ card-mod-theme: Graphite E-ink Light @@ -343,7 +343,7 @@ Graphite E-ink Light: # .............................................................................. # Text Fields an Dropdown input-background-color: var(--token-color-background-input-base) - input-background-token-color-disabled: rgba(var(--input-background-color), 0.5) + input-background-token-color-disabled: color-mix(in srgb, var(--input-background-color) 50%, transparent) input-fill-color: var(--input-background-color) input-ink-color: var(--token-color-text-primary) input-label-ink-color: var(--token-color-text-primary) @@ -369,6 +369,11 @@ Graphite E-ink Light: input-outlined-hover-border-color: var(--primary-color) input-outlined-disabled-border-color: var(--disabled-color) paper-input-container-focus-color: var(--primary-color) + # HA 2026.3+ Web Awesome / semantic color variables + ha-color-form-background: var(--token-color-background-input-base) + ha-color-form-background-hover: var(--token-color-background-input-base) + ha-color-form-background-disabled: var(--token-color-background-input-disabled) + wa-color-surface-raised: var(--token-color-background-card) # .............................................................................. # Markdown markdown-code-background-color: var(--code-editor-background-color) diff --git a/themes/graphite-light.yaml b/themes/graphite-light.yaml index 797ca2b..df23543 100644 --- a/themes/graphite-light.yaml +++ b/themes/graphite-light.yaml @@ -8,7 +8,7 @@ Graphite Light: # https://github.com/TilmanGriesel/graphite #------------------------------------------------------ - # This file was generated at 2026-02-08 15:08:56 + # This file was generated at 2026-04-16 11:54:13 #------------------------------------------------------ card-mod-theme: Graphite Light @@ -345,21 +345,21 @@ Graphite Light: # .............................................................................. # Text Fields an Dropdown input-background-color: var(--token-color-background-input-base) - input-background-token-color-disabled: rgba(var(--input-background-color), 0.5) + input-background-token-color-disabled: color-mix(in srgb, var(--input-background-color) 50%, transparent) input-fill-color: var(--input-background-color) input-ink-color: var(--token-color-text-primary) input-label-ink-color: var(--token-color-text-primary) input-disabled-fill-color: var(--input-background-token-color-disabled) input-disabled-ink-color: var(--disabled-text-color) input-disabled-label-ink-color: var(--disabled-text-color) - input-idle-line-color: var(--background-color) + input-idle-line-color: var(--primary-background-color) input-dropdown-icon-color: var(--secondary-text-color) input-hover-line-color: var(--primary-color) input-disabled-line-color: var(--disabled-color) mdc-select-fill-color: var(--input-fill-color) mdc-select-ink-color: var(--input-ink-color) mdc-select-label-ink-color: var(--input-label-ink-color) - mdc-select-idle-line-color: var(--token-color-background-base) + mdc-select-idle-line-color: var(--divider-color) mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color) mdc-select-hover-line-color: var(--input-hover-line-color) mdc-text-field-fill-color: var(--input-fill-color) @@ -371,6 +371,18 @@ Graphite Light: input-outlined-hover-border-color: var(--primary-color) input-outlined-disabled-border-color: var(--disabled-color) paper-input-container-focus-color: var(--primary-color) + # HA 2026.3+ Web Awesome / semantic color variables + ha-color-form-background: var(--token-color-background-input-base) + ha-color-form-background-hover: var(--token-color-background-input-base) + ha-color-form-background-disabled: var(--token-color-background-input-disabled) + wa-color-surface-raised: var(--token-color-background-card) + # Dropdown/menu item hover fills (light defaults are near-white; override for dark themes) + ha-color-fill-neutral-quiet-resting: var(--token-color-background-card) + ha-color-fill-neutral-quiet-hover: var(--token-color-background-input-base) + ha-color-fill-neutral-quiet-active: var(--token-color-background-card) + ha-color-fill-neutral-normal-resting: var(--token-color-background-secondary) + ha-color-fill-neutral-normal-hover: var(--token-color-background-card) + ha-color-fill-neutral-normal-active: var(--token-color-background-secondary) # .............................................................................. # Markdown markdown-code-background-color: var(--code-editor-background-color) diff --git a/themes/graphite.yaml b/themes/graphite.yaml index 85adca2..0505157 100644 --- a/themes/graphite.yaml +++ b/themes/graphite.yaml @@ -8,7 +8,7 @@ Graphite: # https://github.com/TilmanGriesel/graphite #------------------------------------------------------ - # This file was generated at 2026-02-08 15:08:56 + # This file was generated at 2026-04-16 11:54:13 #------------------------------------------------------ card-mod-theme: Graphite @@ -345,21 +345,21 @@ Graphite: # .............................................................................. # Text Fields an Dropdown input-background-color: var(--token-color-background-input-base) - input-background-token-color-disabled: rgba(var(--input-background-color), 0.5) + input-background-token-color-disabled: color-mix(in srgb, var(--input-background-color) 50%, transparent) input-fill-color: var(--input-background-color) input-ink-color: var(--token-color-text-primary) input-label-ink-color: var(--token-color-text-primary) input-disabled-fill-color: var(--input-background-token-color-disabled) input-disabled-ink-color: var(--disabled-text-color) input-disabled-label-ink-color: var(--disabled-text-color) - input-idle-line-color: var(--background-color) + input-idle-line-color: var(--primary-background-color) input-dropdown-icon-color: var(--secondary-text-color) input-hover-line-color: var(--primary-color) input-disabled-line-color: var(--disabled-color) mdc-select-fill-color: var(--input-fill-color) mdc-select-ink-color: var(--input-ink-color) mdc-select-label-ink-color: var(--input-label-ink-color) - mdc-select-idle-line-color: var(--token-color-background-base) + mdc-select-idle-line-color: var(--divider-color) mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color) mdc-select-hover-line-color: var(--input-hover-line-color) mdc-text-field-fill-color: var(--input-fill-color) @@ -371,6 +371,18 @@ Graphite: input-outlined-hover-border-color: var(--primary-color) input-outlined-disabled-border-color: var(--disabled-color) paper-input-container-focus-color: var(--primary-color) + # HA 2026.3+ Web Awesome / semantic color variables + ha-color-form-background: var(--token-color-background-input-base) + ha-color-form-background-hover: var(--token-color-background-input-base) + ha-color-form-background-disabled: var(--token-color-background-input-disabled) + wa-color-surface-raised: var(--token-color-background-card) + # Dropdown/menu item hover fills (light defaults are near-white; override for dark themes) + ha-color-fill-neutral-quiet-resting: var(--token-color-background-card) + ha-color-fill-neutral-quiet-hover: var(--token-color-background-input-base) + ha-color-fill-neutral-quiet-active: var(--token-color-background-card) + ha-color-fill-neutral-normal-resting: var(--token-color-background-secondary) + ha-color-fill-neutral-normal-hover: var(--token-color-background-card) + ha-color-fill-neutral-normal-active: var(--token-color-background-secondary) # .............................................................................. # Markdown markdown-code-background-color: var(--code-editor-background-color)