Fix Color Animation Implementation

src/app/components/dropdown/dropdown.scss

@@ -13,6 +13,18 @@ $border_radius: 8px;
 $animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
 $default_animation_duration: 0.2s;
 
+@property --hover-state {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --selected-state {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
 :host {
   display: inline-block;
   position: relative;
@@ -113,15 +125,27 @@ $default_animation_duration: 0.2s;
   padding: 0 16px;
   position: relative;
   align-content: center;
-  transition: background-color var(--animation-duration) $animation_timing;
+  transition: --hover-state var(--animation-duration) $animation_timing, --selected-state var(--animation-duration) $animation_timing;
   font-size: 16px;
 
+  background-color: color-mix(
+  in oklch,
+    color-mix(
+      in oklch,
+      transparent,
+      light-dark($hover_bg, $hover_dark_bg)
+      calc(var(--hover-state) * 100%)
+    ),
+    light-dark(list.nth(library.$brand_palette, 1), list.nth(library.$brand_palette, 11))
+    calc(var(--selected-state) * 100%)
+  );
+
   &:hover, &.focused {
-    background-color: light-dark($hover_bg, $hover_dark_bg);
+    --hover-state: 1;
   }
 
   &.selected {
-    background-color: light-dark(list.nth(library.$brand_palette, 1), list.nth(library.$brand_palette, 11));
+    --selected-state: 1;
     color: list.nth(library.$brand_palette, 5);
     font-weight: 600;
   }

src/app/components/popup/popup.scss

@@ -1,6 +1,12 @@
 $animation_timing: cubic-bezier(0.16, 1, 0.3, 1);
 $default_animation_duration: 0.2s;
 
+@property --close-hover-state {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
 :host {
   display: block;
   --animation-duration: calc(#{$default_animation_duration} * var(--motion-duration-multiplier));
@@ -77,17 +83,29 @@ $default_animation_duration: 0.2s;
 
   .header-right {
     .close-btn {
-      background: none;
+      --close-hover-state: 0;
       border: none;
       padding: 4px;
       cursor: pointer;
       border-radius: 50%;
-      color: oklch(0.4 0 0);
-      transition: background-color 0.2s, color 0.2s;
+
+      background: color-mix(
+        in oklch,
+        transparent,
+        light-dark(oklch(0 0 0 / 5%), oklch(1 0 0 / 5%))
+        calc(var(--close-hover-state) * 100%)
+      );
+
+      color: color-mix(
+        in oklch,
+        light-dark(oklch(0.4 0 0), oklch(0.6 0 0)),
+        light-dark(oklch(0 0 0), oklch(1 0 0))
+        calc(var(--close-hover-state) * 100%)
+      );
+      transition: --close-hover-state 0.2s;
 
       &:hover {
-        background-color: oklch(0 0 0 / 5%);
-        color: oklch(0 0 0);
+        --close-hover-state: 1;
       }
     }
   }

src/app/components/switch/switch.scss

@@ -16,16 +16,35 @@ $border_dark_color: oklch(1 0 0 / 40%);
 $animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
 $default_animation_duration: 0.2s;
 
+@property --animation-state {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
 :host {
   display: inline-block;
   width: list.nth($dimension, 1); height: list.nth($dimension, 2);
   border-radius: $border_radius;
 
-  background-color: light-dark($off_bg, $off_dark_bg);
-  box-shadow: 0 0 0 1px light-dark($border_color, $border_dark_color) inset;
+  background-color: color-mix(
+    in oklch,
+    light-dark($off_bg, $off_dark_bg),
+    light-dark(list.nth(library.$brand_palette, 5), list.nth(library.$brand_palette, 8))
+    calc(var(--animation-state) * 100%)
+  );
 
+  box-shadow: 0 0 0 1px color-mix(
+    in oklch,
+    light-dark($border_color, $border_dark_color),
+    light-dark($border_color, list.nth(library.$brand_palette, 10))
+    calc(var(--animation-state) * 100%)
+  ) inset;
+
+  --animation-state: 0;
   --animation-duration: calc(#{$default_animation_duration} * var(--motion-duration-multiplier));
-  transition: background-color var(--animation-duration) $animation_timing, box-shadow var(--animation-duration) $animation_timing;
+  // transition: background-color var(--animation-duration) $animation_timing, box-shadow var(--animation-duration) $animation_timing;
+  transition: --animation-state var(--animation-duration) $animation_timing;
 
   cursor: pointer;
   position: relative;
@@ -38,8 +57,7 @@ $default_animation_duration: 0.2s;
   }
 
   &.active {
-    background-color: light-dark(list.nth(library.$brand_palette, 5), list.nth(library.$brand_palette, 9));
-    box-shadow: var(--if-dark, 0 0 0 1px list.nth(library.$brand_palette, 10) inset);
+    --animation-state: 1;
 
     .switch-knob {
       transform: translate(