From 383a57bad9988cbccdc08a16901eaab0aec8c5db Mon Sep 17 00:00:00 2001 From: troinine Date: Thu, 25 Dec 2025 22:31:12 +0200 Subject: [PATCH 1/4] feat: support for styling most aspects via hass themes --- src/components/animation/wfc-animation.css | 79 ++++++++++++++-------- src/weather-forecast-card.css | 79 ++++++++++++++++------ 2 files changed, 108 insertions(+), 50 deletions(-) diff --git a/src/components/animation/wfc-animation.css b/src/components/animation/wfc-animation.css index a435952..da0ca4f 100644 --- a/src/components/animation/wfc-animation.css +++ b/src/components/animation/wfc-animation.css @@ -1,11 +1,17 @@ :host { - --sun-size: var(--wfc-effects-sun-size, 140px); - --sun-spin-duration: var(--wfc-effects-sun-spin-duration, 100s); - --moon-size: var(--wfc-effects-moon-size, 80px); - --sky-visibility: var(--wfc-effects-sky-visibility, visible); + --sun-size: var(--weather-forecast-card-effects-sun-size, 140px); + --sun-spin-duration: var( + --weather-forecast-card-effects-sun-spin-duration, + 100s + ); + --moon-size: var(--weather-forecast-card-effects-moon-size, 80px); + --sky-visibility: var( + --weather-forecast-card-effects-sky-visibility, + visible + ); --drop-color-start: color-mix(in srgb, var(--rain-color), transparent 100%); --drop-color-end: color-mix(in srgb, var(--rain-color), transparent 40%); - --drop-height: var(--wfc-effects-drop-height, 20px); + --drop-height: var(--weather-forecast-card-effects-drop-height, 20px); --drop-start-pos-diff-y: 50px; --snow-glow-color: var(--snow-color); --container-height: 0px; /* Set dynamically in TS */ @@ -24,68 +30,83 @@ } :host(.light) { - --sun-color: var(--wfc-effects-sun-color, #facc15); - --sun-ray-color: var(--wfc-effects-sun-ray-color, rgba(253, 224, 71, 0.4)); + --sun-color: var(--weather-forecast-card-effects-sun-color, #facc15); + --sun-ray-color: var( + --weather-forecast-card-effects-sun-ray-color, + rgba(253, 224, 71, 0.4) + ); --sun-ray-opacity: 0.25; - --moon-color: var(--wfc-effects-moon-color, rgba(220, 220, 230, 1)); - --star-color: var(--wfc-effects-star-color, #ffffff); - --snow-color: var(--wfc-effects-snow-color, #cbd5e1); + --moon-color: var( + --weather-forecast-card-effects-moon-color, + rgba(220, 220, 230, 1) + ); + --star-color: var(--weather-forecast-card-effects-star-color, #ffffff); + --snow-color: var(--weather-forecast-card-effects-snow-color, #cbd5e1); --glow-intensity: 0.9; - --rain-color: var(--wfc-effects-rain-color, #2563eb); + --rain-color: var(--weather-forecast-card-effects-rain-color, #2563eb); --clear-sky-color: var( - --wfc-effects-clear-sky-color, + --weather-forecast-card-effects-clear-sky-color, rgba(30, 130, 230, 0.6) ); --clear-sky-accent: var( - --wfc-effects-clear-sky-accent, + --weather-forecast-card-effects-clear-sky-accent, rgba(100, 180, 240, 0.45) ); --clear-sky-horizon: var( - --wfc-effects-clear-sky-horizon, + --weather-forecast-card-effects-clear-sky-horizon, rgba(210, 235, 255, 0.3) ); --clear-night-sky-color: var( - --wfc-effects-clear-night-sky-color, + --weather-forecast-card-effects-clear-night-sky-color, rgba(49, 46, 129, 0.7) ); --clear-night-sky-accent: var( - --wfc-effects-clear-night-sky-accent, + --weather-forecast-card-effects-clear-night-sky-accent, rgba(88, 28, 135, 0.55) ); --clear-night-horizon: var( - --wfc-effects-clear-night-horizon, + --weather-forecast-card-effects-clear-night-horizon, rgba(236, 72, 153, 0.4) ); } :host(.dark) { - --sun-color: var(--wfc-effects-sun-color, #fbbf24); - --sun-ray-color: var(--wfc-effects-sun-ray-color, rgba(251, 191, 36, 0.5)); + --sun-color: var(--weather-forecast-card-effects-sun-color, #fbbf24); + --sun-ray-color: var( + --weather-forecast-card-effects-sun-ray-color, + rgba(251, 191, 36, 0.5) + ); --sun-ray-opacity: 0.15; - --moon-color: var(--wfc-effects-moon-color, rgba(220, 220, 230, 1)); - --star-color: var(--wfc-effects-star-color, #ffffff); - --snow-color: var(--wfc-effects-snow-color, #ffffff); + --moon-color: var( + --weather-forecast-card-effects-moon-color, + rgba(220, 220, 230, 1) + ); + --star-color: var(--weather-forecast-card-effects-star-color, #ffffff); + --snow-color: var(--weather-forecast-card-effects-snow-color, #ffffff); --glow-intensity: 0.6; - --rain-color: var(--wfc-effects-rain-color, #6cb4ee); - --clear-sky-color: var(--wfc-effects-clear-sky-color, rgba(3, 105, 161, 0.8)); + --rain-color: var(--weather-forecast-card-effects-rain-color, #6cb4ee); + --clear-sky-color: var( + --weather-forecast-card-effects-clear-sky-color, + rgba(3, 105, 161, 0.8) + ); --clear-sky-accent: var( - --wfc-effects-clear-sky-accent, + --weather-forecast-card-effects-clear-sky-accent, rgba(7, 89, 133, 0.6) ); --clear-sky-horizon: var( - --wfc-effects-clear-sky-horizon, + --weather-forecast-card-effects-clear-sky-horizon, rgba(12, 74, 110, 0.4) ); --clear-night-sky-color: var( - --wfc-effects-clear-night-sky-color, + --weather-forecast-card-effects-clear-night-sky-color, rgba(10, 15, 40, 0.85) ); --clear-night-sky-accent: var( - --wfc-effects-clear-night-sky-accent, + --weather-forecast-card-effects-clear-night-sky-accent, rgba(20, 30, 80, 0.6) ); --clear-night-horizon: var( - --wfc-effects-clear-night-horizon, + --weather-forecast-card-effects-clear-night-horizon, rgba(40, 25, 100, 0.4) ); } diff --git a/src/weather-forecast-card.css b/src/weather-forecast-card.css index fffb984..e28bd0e 100644 --- a/src/weather-forecast-card.css +++ b/src/weather-forecast-card.css @@ -1,27 +1,64 @@ :host { - --wfc-wind-low: var(--success-color, #43a047); - --wfc-wind-medium: var(--warning-color, #ffa600); - --wfc-wind-high: var(--error-color, #db4437); - --wfc-chart-temp-low-line-color: var(--secondary-color, #ffa600); - --wfc-chart-temp-high-line-color: var(--primary-color, #009ac7); - --wfc-chart-label-color: var(--primary-text-color, #000); - --wfc-chart-temp-high-label-color: var(--wfc-chart-label-color); - --wfc-chart-temp-low-label-color: var(--secondary-text-color, #9b9b9b); - --wfc-chart-precipitation-label-color: var(--wfc-chart-label-color); - --wfc-chart-grid-color: color-mix( - in srgb, - var(--primary-text-color, #000) 15%, - transparent + --wfc-wind-low: var( + --weather-forecast-card-wind-low-color, + var(--success-color, #43a047) ); - --wfc-precipitation-bar-color: color-mix( - in srgb, - var(--blue-color, #2196f3) 40%, - transparent + --wfc-wind-medium: var( + --weather-forecast-card-wind-medium-color, + var(--warning-color, #ffa600) + ); + --wfc-wind-high: var( + --weather-forecast-card-wind-high-color, + var(--error-color, #db4437) + ); + --wfc-chart-temp-low-line-color: var( + --weather-forecast-card-chart-temp-low-line-color, + var(--secondary-color, #ffa600) + ); + --wfc-chart-temp-high-line-color: var( + --weather-forecast-card-chart-temp-high-line-color, + var(--primary-color, #009ac7) + ); + --wfc-chart-label-color: var( + --weather-forecast-card-chart-label-color, + var(--primary-text-color, #000) + ); + --wfc-chart-temp-high-label-color: var( + --weather-forecast-card-chart-temp-high-label-color, + var(--wfc-chart-label-color) + ); + --wfc-chart-temp-low-label-color: var( + --weather-forecast-card-chart-temp-low-label-color, + var(--secondary-text-color, #9b9b9b) + ); + --wfc-chart-precipitation-label-color: var( + --weather-forecast-card-chart-precipitation-label-color, + var(--wfc-chart-label-color) + ); + --wfc-chart-grid-color: var( + --weather-forecast-card-chart-grid-color, + color-mix(in srgb, var(--primary-text-color, #000) 15%, transparent) + ); + --wfc-precipitation-bar-color: var( + --weather-forecast-card-precipitation-bar-color, + color-mix(in srgb, var(--blue-color, #2196f3) 40%, transparent) + ); + --wfc-sunrise-color: var( + --weather-forecast-card-sunrise-color, + var(--orange-color, #ff9800) + ); + --wfc-sunset-color: var( + --weather-forecast-card-sunset-color, + var(--purple-color, #926bc7) + ); + --wfc-day-indicator-color: var( + --weather-forecast-card-day-indicator-color, + #056bb8 + ); + --wfc-day-indicator-text-color: var( + --weather-forecast-card-day-indicator-text-color, + #ffffff ); - --wfc-sunrise-color: var(--orange-color, #ff9800); - --wfc-sunset-color: var(--purple-color, #926bc7); - --wfc-day-indicator-color: #056bb8; - --wfc-day-indicator-text-color: #ffffff; --forecast-item-width: 50px; /* Initial minimum value. Updated in JS */ --forecast-item-gap: 0px; /* Initial minimum value. Updated in JS */ --forecast-precipitation-bar-max-height: calc( From 0f4ff73fa86bbc2ac93ef4ad7f0f53cf92ed06f6 Mon Sep 17 00:00:00 2001 From: troinine Date: Thu, 25 Dec 2025 22:42:59 +0200 Subject: [PATCH 2/4] docs: updated README.md on styling --- README.md | 71 +++++++++++++++++++++++++++++++++++ src/weather-forecast-card.css | 7 +++- 2 files changed, 76 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 13289ae..cbba97d 100644 --- a/README.md +++ b/README.md @@ -241,6 +241,77 @@ icons_path: /local/img/weather-icons This will load icons from `/local/img/weather-icons/sunny.svg`, `/local/img/weather-icons/rainy.svg`, etc. +## Styling + +The card can be customized using Home Assistant theme variables. Most colors, sizes, and visual elements can be overridden by defining CSS variables in your theme configuration. + +### Theme Variables + +Add these variables to your Home Assistant theme to customize the card's appearance: + +| Variable Name | Description | +| :------------------------------------------------------ | :------------------------------------------ | +| `weather-forecast-card-wind-low-color` | Wind indicator color for low wind speeds | +| `weather-forecast-card-wind-medium-color` | Wind indicator color for medium wind speeds | +| `weather-forecast-card-wind-high-color` | Wind indicator color for high wind speeds | +| `weather-forecast-card-chart-temp-low-line-color` | Chart line color for low temperature | +| `weather-forecast-card-chart-temp-high-line-color` | Chart line color for high temperature | +| `weather-forecast-card-chart-label-color` | Default color for chart labels | +| `weather-forecast-card-chart-temp-high-label-color` | Chart label color for high temperature | +| `weather-forecast-card-chart-temp-low-label-color` | Chart label color for low temperature | +| `weather-forecast-card-chart-precipitation-label-color` | Chart label color for precipitation | +| `weather-forecast-card-chart-grid-color` | Chart grid line color | +| `weather-forecast-card-precipitation-bar-color` | Precipitation bar color | +| `weather-forecast-card-sunrise-color` | Sunrise time indicator color | +| `weather-forecast-card-sunset-color` | Sunset time indicator color | +| `weather-forecast-card-day-indicator-color` | Background color for day indicator badge | +| `weather-forecast-card-day-indicator-text-color` | Text color for day indicator badge | +| `weather-forecast-card-current-conditions-icon-size` | Size of the current weather condition icon | +| `weather-forecast-card-forecast-conditions-icon-size` | Size of forecast weather condition icons | + +### Weather Effects Variables + +Customize the appearance of animated weather effects when `show_condition_effects` is enabled: + +| Variable Name | Description | +| :----------------------------------------------------- | :----------------------------------------------------- | +| `weather-forecast-card-effects-sun-size` | Size of the animated sun | +| `weather-forecast-card-effects-sun-spin-duration` | Duration of the sun ray rotation animation | +| `weather-forecast-card-effects-sun-color` | Color of the sun | +| `weather-forecast-card-effects-sun-ray-color` | Color of the sun rays | +| `weather-forecast-card-effects-moon-size` | Size of the moon | +| `weather-forecast-card-effects-moon-color` | Color of the moon | +| `weather-forecast-card-effects-star-color` | Color of the stars in night sky | +| `weather-forecast-card-effects-snow-color` | Color of snowflakes | +| `weather-forecast-card-effects-rain-color` | Color of rain drops | +| `weather-forecast-card-effects-drop-height` | Height of individual rain drops | +| `weather-forecast-card-effects-sky-visibility` | Visibility of sky gradient background (visible/hidden) | +| `weather-forecast-card-effects-clear-sky-color` | Day clear sky gradient primary color | +| `weather-forecast-card-effects-clear-sky-accent` | Day clear sky gradient accent color | +| `weather-forecast-card-effects-clear-sky-horizon` | Day clear sky gradient horizon color | +| `weather-forecast-card-effects-clear-night-sky-color` | Night clear sky gradient primary color | +| `weather-forecast-card-effects-clear-night-sky-accent` | Night clear sky gradient accent color | +| `weather-forecast-card-effects-clear-night-horizon` | Night clear sky gradient horizon color | + +> [!NOTE] +> Weather effects variables support both light and dark themes. Colors automatically adjust based on your theme's dark mode setting, with separate default values optimized for each mode. + +### Example Theme Configuration + +Add any of the variables to your themes to customize the card: + +```yaml +my-custom-theme: + # Weather Forecast Card customization + weather-forecast-card-chart-temp-high-line-color: "#ff5722" + + # Weather Forecast Card effects customization + weather-forecast-card-effects-sun-color: "#fbbf24" +``` + +> [!NOTE] +> These variables are applied through Home Assistant's theme system. Make sure to reload your theme after making changes. + ## License This repo is [MIT Licensed](LICENSE) diff --git a/src/weather-forecast-card.css b/src/weather-forecast-card.css index e28bd0e..d168a29 100644 --- a/src/weather-forecast-card.css +++ b/src/weather-forecast-card.css @@ -66,10 +66,13 @@ ); --fade-width: 15px; --forecast-conditions-icon-size: var( - --wfc-forecast-conditions-icon-size, + --weather-forecast-card-forecast-conditions-icon-size, 28px ); - --current-conditions-icon-size: var(--wfc-current-conditions-icon-size, 64px); + --current-conditions-icon-size: var( + --weather-forecast-card-current-conditions-icon-size, + 64px + ); --indicator-width: 20px; } From 24b986570dffee2abff3ba1ff1ef47d225997748 Mon Sep 17 00:00:00 2001 From: troinine Date: Thu, 25 Dec 2025 23:37:58 +0200 Subject: [PATCH 3/4] test: added tests to verify theme variables are referenced correctly --- test/weather-forecast-card-styles.test.ts | 338 ++++++++++++++++++++++ 1 file changed, 338 insertions(+) create mode 100644 test/weather-forecast-card-styles.test.ts diff --git a/test/weather-forecast-card-styles.test.ts b/test/weather-forecast-card-styles.test.ts new file mode 100644 index 0000000..1c2f99e --- /dev/null +++ b/test/weather-forecast-card-styles.test.ts @@ -0,0 +1,338 @@ +import { beforeEach, describe, expect, it } from "vitest"; +import { readFileSync } from "fs"; +import { join } from "path"; + +describe("weather-forecast-card theme variables", () => { + let cssContent: string; + let animationCssContent: string; + + beforeEach(() => { + // Read CSS files for variable verification + cssContent = readFileSync( + join(__dirname, "../src/weather-forecast-card.css"), + "utf-8" + ); + animationCssContent = readFileSync( + join(__dirname, "../src/components/animation/wfc-animation.css"), + "utf-8" + ); + }); + + /** + * Helper function to test theme variable exists in CSS + */ + function testThemeVariableInCSS(themeVar: string, internalVar: string): void { + // Check that the internal variable is defined + expect(cssContent, `--${internalVar} should be defined in CSS`).toContain( + `--${internalVar}:` + ); + + // Check that it references the theme variable + expect( + cssContent, + `--${internalVar} should reference --${themeVar}` + ).toContain(`--${themeVar}`); + } + + /** + * Helper function to test theme variable exists in animation CSS + */ + function testEffectVariableInCSS( + themeVar: string, + internalVar: string + ): void { + // Check that the internal variable is defined + expect( + animationCssContent, + `--${internalVar} should be defined in animation CSS` + ).toContain(`--${internalVar}:`); + + // Check that it references the theme variable + expect( + animationCssContent, + `--${internalVar} should reference --${themeVar}` + ).toContain(`--${themeVar}`); + } + + describe("wind indicator theme variables", () => { + it("should support weather-forecast-card-wind-low-color", () => { + testThemeVariableInCSS( + "weather-forecast-card-wind-low-color", + "wfc-wind-low" + ); + }); + + it("should support weather-forecast-card-wind-medium-color", () => { + testThemeVariableInCSS( + "weather-forecast-card-wind-medium-color", + "wfc-wind-medium" + ); + }); + + it("should support weather-forecast-card-wind-high-color", () => { + testThemeVariableInCSS( + "weather-forecast-card-wind-high-color", + "wfc-wind-high" + ); + }); + }); + + describe("chart theme variables", () => { + it("should support weather-forecast-card-chart-temp-low-line-color", () => { + testThemeVariableInCSS( + "weather-forecast-card-chart-temp-low-line-color", + "wfc-chart-temp-low-line-color" + ); + }); + + it("should support weather-forecast-card-chart-temp-high-line-color", () => { + testThemeVariableInCSS( + "weather-forecast-card-chart-temp-high-line-color", + "wfc-chart-temp-high-line-color" + ); + }); + + it("should support weather-forecast-card-chart-label-color", () => { + testThemeVariableInCSS( + "weather-forecast-card-chart-label-color", + "wfc-chart-label-color" + ); + }); + + it("should support weather-forecast-card-chart-grid-color", () => { + testThemeVariableInCSS( + "weather-forecast-card-chart-grid-color", + "wfc-chart-grid-color" + ); + }); + + it("should support weather-forecast-card-precipitation-bar-color", () => { + testThemeVariableInCSS( + "weather-forecast-card-precipitation-bar-color", + "wfc-precipitation-bar-color" + ); + }); + }); + + describe("sunrise/sunset theme variables", () => { + it("should support weather-forecast-card-sunrise-color", () => { + testThemeVariableInCSS( + "weather-forecast-card-sunrise-color", + "wfc-sunrise-color" + ); + }); + + it("should support weather-forecast-card-sunset-color", () => { + testThemeVariableInCSS( + "weather-forecast-card-sunset-color", + "wfc-sunset-color" + ); + }); + }); + + describe("day indicator theme variables", () => { + it("should support weather-forecast-card-day-indicator-color", () => { + testThemeVariableInCSS( + "weather-forecast-card-day-indicator-color", + "wfc-day-indicator-color" + ); + }); + + it("should support weather-forecast-card-day-indicator-text-color", () => { + testThemeVariableInCSS( + "weather-forecast-card-day-indicator-text-color", + "wfc-day-indicator-text-color" + ); + }); + }); + + describe("icon size theme variables", () => { + it("should support weather-forecast-card-current-conditions-icon-size", () => { + testThemeVariableInCSS( + "weather-forecast-card-current-conditions-icon-size", + "current-conditions-icon-size" + ); + }); + + it("should support weather-forecast-card-forecast-conditions-icon-size", () => { + testThemeVariableInCSS( + "weather-forecast-card-forecast-conditions-icon-size", + "forecast-conditions-icon-size" + ); + }); + }); + + describe("weather effects theme variables", () => { + it("should support weather-forecast-card-effects-sun-color", () => { + testEffectVariableInCSS( + "weather-forecast-card-effects-sun-color", + "sun-color" + ); + }); + + it("should support weather-forecast-card-effects-sun-ray-color", () => { + testEffectVariableInCSS( + "weather-forecast-card-effects-sun-ray-color", + "sun-ray-color" + ); + }); + + it("should support weather-forecast-card-effects-sun-size", () => { + testEffectVariableInCSS( + "weather-forecast-card-effects-sun-size", + "sun-size" + ); + }); + + it("should support weather-forecast-card-effects-sun-spin-duration", () => { + testEffectVariableInCSS( + "weather-forecast-card-effects-sun-spin-duration", + "sun-spin-duration" + ); + }); + + it("should support weather-forecast-card-effects-moon-color", () => { + testEffectVariableInCSS( + "weather-forecast-card-effects-moon-color", + "moon-color" + ); + }); + + it("should support weather-forecast-card-effects-moon-size", () => { + testEffectVariableInCSS( + "weather-forecast-card-effects-moon-size", + "moon-size" + ); + }); + + it("should support weather-forecast-card-effects-star-color", () => { + testEffectVariableInCSS( + "weather-forecast-card-effects-star-color", + "star-color" + ); + }); + + it("should support weather-forecast-card-effects-snow-color", () => { + testEffectVariableInCSS( + "weather-forecast-card-effects-snow-color", + "snow-color" + ); + }); + + it("should support weather-forecast-card-effects-rain-color", () => { + testEffectVariableInCSS( + "weather-forecast-card-effects-rain-color", + "rain-color" + ); + }); + + it("should support weather-forecast-card-effects-drop-height", () => { + testEffectVariableInCSS( + "weather-forecast-card-effects-drop-height", + "drop-height" + ); + }); + + it("should support weather-forecast-card-effects-sky-visibility", () => { + testEffectVariableInCSS( + "weather-forecast-card-effects-sky-visibility", + "sky-visibility" + ); + }); + + it("should support weather-forecast-card-effects-clear-sky-color", () => { + testEffectVariableInCSS( + "weather-forecast-card-effects-clear-sky-color", + "clear-sky-color" + ); + }); + + it("should support weather-forecast-card-effects-clear-sky-accent", () => { + testEffectVariableInCSS( + "weather-forecast-card-effects-clear-sky-accent", + "clear-sky-accent" + ); + }); + + it("should support weather-forecast-card-effects-clear-sky-horizon", () => { + testEffectVariableInCSS( + "weather-forecast-card-effects-clear-sky-horizon", + "clear-sky-horizon" + ); + }); + + it("should support weather-forecast-card-effects-clear-night-sky-color", () => { + testEffectVariableInCSS( + "weather-forecast-card-effects-clear-night-sky-color", + "clear-night-sky-color" + ); + }); + + it("should support weather-forecast-card-effects-clear-night-sky-accent", () => { + testEffectVariableInCSS( + "weather-forecast-card-effects-clear-night-sky-accent", + "clear-night-sky-accent" + ); + }); + + it("should support weather-forecast-card-effects-clear-night-horizon", () => { + testEffectVariableInCSS( + "weather-forecast-card-effects-clear-night-horizon", + "clear-night-horizon" + ); + }); + }); + + describe("all theme variables coverage", () => { + it("should test all 14 main theme variables in CSS file", () => { + const allMainThemeVariables = [ + "weather-forecast-card-wind-low-color", + "weather-forecast-card-wind-medium-color", + "weather-forecast-card-wind-high-color", + "weather-forecast-card-chart-temp-low-line-color", + "weather-forecast-card-chart-temp-high-line-color", + "weather-forecast-card-chart-label-color", + "weather-forecast-card-chart-grid-color", + "weather-forecast-card-precipitation-bar-color", + "weather-forecast-card-sunrise-color", + "weather-forecast-card-sunset-color", + "weather-forecast-card-day-indicator-color", + "weather-forecast-card-day-indicator-text-color", + "weather-forecast-card-current-conditions-icon-size", + "weather-forecast-card-forecast-conditions-icon-size", + ]; + + expect( + allMainThemeVariables.length, + "Should have 14 main theme variables in CSS file" + ).toBe(14); + }); + + it("should test all 17 effects theme variables in animation CSS file", () => { + const allEffectsThemeVariables = [ + "weather-forecast-card-effects-sun-color", + "weather-forecast-card-effects-sun-ray-color", + "weather-forecast-card-effects-sun-size", + "weather-forecast-card-effects-sun-spin-duration", + "weather-forecast-card-effects-moon-color", + "weather-forecast-card-effects-moon-size", + "weather-forecast-card-effects-star-color", + "weather-forecast-card-effects-snow-color", + "weather-forecast-card-effects-rain-color", + "weather-forecast-card-effects-drop-height", + "weather-forecast-card-effects-sky-visibility", + "weather-forecast-card-effects-clear-sky-color", + "weather-forecast-card-effects-clear-sky-accent", + "weather-forecast-card-effects-clear-sky-horizon", + "weather-forecast-card-effects-clear-night-sky-color", + "weather-forecast-card-effects-clear-night-sky-accent", + "weather-forecast-card-effects-clear-night-horizon", + ]; + + expect( + allEffectsThemeVariables.length, + "Should have 17 effects theme variables in animation CSS file" + ).toBe(17); + }); + }); +}); From e874ec7e14068d87d40b7024c340e22f634315af Mon Sep 17 00:00:00 2001 From: troinine Date: Thu, 25 Dec 2025 23:47:47 +0200 Subject: [PATCH 4/4] fix: review fix --- test/weather-forecast-card-styles.test.ts | 34 +++++++++++++++++++---- 1 file changed, 29 insertions(+), 5 deletions(-) diff --git a/test/weather-forecast-card-styles.test.ts b/test/weather-forecast-card-styles.test.ts index 1c2f99e..17220fe 100644 --- a/test/weather-forecast-card-styles.test.ts +++ b/test/weather-forecast-card-styles.test.ts @@ -99,6 +99,27 @@ describe("weather-forecast-card theme variables", () => { ); }); + it("should support weather-forecast-card-chart-temp-high-label-color", () => { + testThemeVariableInCSS( + "weather-forecast-card-chart-temp-high-label-color", + "wfc-chart-temp-high-label-color" + ); + }); + + it("should support weather-forecast-card-chart-temp-low-label-color", () => { + testThemeVariableInCSS( + "weather-forecast-card-chart-temp-low-label-color", + "wfc-chart-temp-low-label-color" + ); + }); + + it("should support weather-forecast-card-chart-precipitation-label-color", () => { + testThemeVariableInCSS( + "weather-forecast-card-chart-precipitation-label-color", + "wfc-chart-precipitation-label-color" + ); + }); + it("should support weather-forecast-card-chart-grid-color", () => { testThemeVariableInCSS( "weather-forecast-card-chart-grid-color", @@ -284,14 +305,17 @@ describe("weather-forecast-card theme variables", () => { }); describe("all theme variables coverage", () => { - it("should test all 14 main theme variables in CSS file", () => { - const allMainThemeVariables = [ + it("should test all 17 main theme variables in CSS file", () => { + const allMainVariables = [ "weather-forecast-card-wind-low-color", "weather-forecast-card-wind-medium-color", "weather-forecast-card-wind-high-color", "weather-forecast-card-chart-temp-low-line-color", "weather-forecast-card-chart-temp-high-line-color", "weather-forecast-card-chart-label-color", + "weather-forecast-card-chart-temp-high-label-color", + "weather-forecast-card-chart-temp-low-label-color", + "weather-forecast-card-chart-precipitation-label-color", "weather-forecast-card-chart-grid-color", "weather-forecast-card-precipitation-bar-color", "weather-forecast-card-sunrise-color", @@ -303,9 +327,9 @@ describe("weather-forecast-card theme variables", () => { ]; expect( - allMainThemeVariables.length, - "Should have 14 main theme variables in CSS file" - ).toBe(14); + allMainVariables.length, + "Should have 17 main theme variables in CSS file" + ).toBe(17); }); it("should test all 17 effects theme variables in animation CSS file", () => {