From e5fb0e21ec0430ce6f11621ee8a7843e96cbd31f Mon Sep 17 00:00:00 2001 From: Petar Petrov Date: Tue, 17 Feb 2026 14:42:00 +0100 Subject: [PATCH] Update animation duration variable names in copilot instructions (#29692) The old `--ha-animation-base-duration` variable was split into three separate variables: `--ha-animation-duration-fast` (150ms), `--ha-animation-duration-normal` (250ms), and `--ha-animation-duration-slow` (350ms). --- .github/copilot-instructions.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 8c1dfc307c..7e1ab8844b 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -194,13 +194,13 @@ The View Transitions API creates smooth animations between DOM state changes. Wh - **Utility wrapper**: `src/common/util/view-transition.ts` - `withViewTransition()` function with graceful fallback - **Real-world example**: `src/util/launch-screen.ts` - Launch screen fade pattern with browser support detection - **Animation keyframes**: `src/resources/theme/animations.globals.ts` - Global `fade-in`, `fade-out`, `scale` animations -- **Animation duration**: `src/resources/theme/core.globals.ts` - `--ha-animation-base-duration` (350ms, respects `prefers-reduced-motion`) +- **Animation duration**: `src/resources/theme/core.globals.ts` - `--ha-animation-duration-fast` (150ms), `--ha-animation-duration-normal` (250ms), `--ha-animation-duration-slow` (350ms) (all respect `prefers-reduced-motion`) **Implementation Guidelines:** 1. Always use `withViewTransition()` wrapper for automatic fallback 2. Keep transitions simple (subtle crossfades and fades work best) -3. Use `--ha-animation-base-duration` CSS variable for consistent timing +3. Use `--ha-animation-duration-*` CSS variables for consistent timing (`fast`, `normal`, `slow`) 4. Assign unique `view-transition-name` to elements (must be unique at any given time) 5. For Lit components: Override `performUpdate()` or use `::part()` for internal elements