From 86e873524f4c8dd4f403a17b90b90aef3043bfab Mon Sep 17 00:00:00 2001 From: Kevin Latka Date: Thu, 15 May 2025 08:42:21 +0200 Subject: [PATCH 1/2] Use relative colors to support themes [Relative colors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors) --- src/tabbed-card.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/tabbed-card.ts b/src/tabbed-card.ts index d998566..58fdf57 100644 --- a/src/tabbed-card.ts +++ b/src/tabbed-card.ts @@ -56,9 +56,8 @@ export class TabbedCard extends LitElement { @state() private _tabs!: Tab[]; @property() protected _styles = { "--mdc-theme-primary": "var(--primary-text-color)", // Color of the activated tab's text, indicator, and ripple. - "--mdc-tab-text-label-color-default": - "rgba(var(--rgb-primary-text-color), 0.8)", // Color of an unactivated tab label. - "--mdc-tab-color-default": "rgba(var(--rgb-primary-text-color), 0.7)", // Color of an unactivated icon. + "--mdc-tab-text-label-color-default: rgba(from var(--primary-text-color) r g b / 0.8)", // Color of an unactivated tab label. + "--mdc-tab-color-default: rgba(from var(--primary-text-color) r g b / 0.7)", // Color of an unactivated icon. "--mdc-typography-button-font-size": "14px", }; From e66aaa97ffb508f1e2d386c6664f90bbb3f631af Mon Sep 17 00:00:00 2001 From: Kevin Latka Date: Thu, 15 May 2025 09:53:04 +0200 Subject: [PATCH 2/2] Update tabbed-card.ts --- src/tabbed-card.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tabbed-card.ts b/src/tabbed-card.ts index 58fdf57..1449d7d 100644 --- a/src/tabbed-card.ts +++ b/src/tabbed-card.ts @@ -56,8 +56,8 @@ export class TabbedCard extends LitElement { @state() private _tabs!: Tab[]; @property() protected _styles = { "--mdc-theme-primary": "var(--primary-text-color)", // Color of the activated tab's text, indicator, and ripple. - "--mdc-tab-text-label-color-default: rgba(from var(--primary-text-color) r g b / 0.8)", // Color of an unactivated tab label. - "--mdc-tab-color-default: rgba(from var(--primary-text-color) r g b / 0.7)", // Color of an unactivated icon. + "--mdc-tab-text-label-color-default": "rgba(from var(--primary-text-color) r g b / 0.8)", // Color of an unactivated tab label. + "--mdc-tab-color-default": "rgba(from var(--primary-text-color) r g b / 0.7)", // Color of an unactivated icon. "--mdc-typography-button-font-size": "14px", };