Add Reduce Animation Setting

src/app/components/dropdown/dropdown.scss

@@ -2,40 +2,36 @@
 @use "sass:color";
 @use "styles/library" as library;
 
-$dropdown_bg: oklch(1 0 0); // #FFFFFF
-$dropdown_border_color: oklch(0 0 0 / 20%);
-$dropdown_hover: oklch(0.9702 0 0); // #F5F5F5
+$default_bg: oklch(1 0 0); // #FFFFFF
+$border_color: oklch(0 0 0 / 20%);
+$hover_bg: oklch(0.9702 0 0); // #F5F5F5
 
-$dropdown_height: 40px;
-$dropdown_border_radius: 8px;
+$height: 40px;
+$border_radius: 8px;
 
-$dropdown_animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
-$dropdown_animation_duration: 0.2s;
+$animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
+$default_animation_duration: 0.2s;
 
 :host {
   display: inline-block;
   position: relative;
 
+  --animation-duration: calc(#{$default_animation_duration} * var(--motion-duration-multiplier));
   padding: 0; margin: 0;
 
-  background-color: $dropdown_bg;
-  border-radius: $dropdown_border_radius;
-  box-shadow: 0 0 0 1px $dropdown_border_color inset;
+  background-color: $default_bg;
+  border-radius: $border_radius;
+  box-shadow: 0 0 0 1px $border_color inset;
   cursor: pointer;
 
   max-width: 100%;
-  --dropdown-duration: #{$dropdown_animation_duration};
-
-  &.reduce-motion {
-    --dropdown-duration: 0s;
-  }
 }
 
 .dropdown-box {
   display: flex;
   align-items: center;
   padding: 0 10px;
-  height: $dropdown_height;
+  height: $height;
   box-sizing: border-box;
   gap: 8px;
 
@@ -60,7 +56,7 @@ $dropdown_animation_duration: 0.2s;
   .chevron {
     width: 24px; height: 24px;
     flex-shrink: 0;
-    transition: transform var(--dropdown-duration) $dropdown_animation_timing;
+    transition: transform var(--dropdown-duration) $animation_timing;
     user-select: none;
 
     &.open {
@@ -77,20 +73,20 @@ $dropdown_animation_duration: 0.2s;
   padding: 0;
   margin: 0;
   list-style: none;
-  background-color: $dropdown_bg;
-  border-radius: $dropdown_border_radius;
+  background-color: $default_bg;
+  border-radius: $border_radius;
   z-index: 1000;
   max-height: 240px;
   overflow-y: auto;
   box-shadow: 0 4px 12px oklch(0 0 0 / 10%); // rgba(0, 0, 0, 0.1)
-  animation: slideIn var(--dropdown-duration) $dropdown_animation_timing;
+  animation: slideIn var(--animation-duration) $animation_timing;
 
   &::after {
     content: "";
     position: absolute;
     top: 0; left: 0; right: 0; bottom: 0;
-    border-radius: $dropdown_border_radius;
-    box-shadow: 0 0 0 1px $dropdown_border_color inset;
+    border-radius: $border_radius;
+    box-shadow: 0 0 0 1px $border_color inset;
     pointer-events: none;
     z-index: 1001;
   }
@@ -108,10 +104,10 @@ $dropdown_animation_duration: 0.2s;
   padding: 0 16px;
   position: relative;
   align-content: center;
-  transition: background-color var(--dropdown-duration) $dropdown_animation_timing;
+  transition: background-color var(--animation-duration) $animation_timing;
 
   &:hover, &.focused {
-    background-color: $dropdown_hover;
+    background-color: $hover_bg;
   }
 
   &.selected {

src/app/components/dropdown/dropdown.ts

@@ -22,7 +22,6 @@ export interface DropdownOption {
       "isOpen() && focusedIndex() >= 0 ? dropdownId + '-option-' + focusedIndex() : null",
     '[attr.aria-label]': 'ariaLabel()',
     '[class.open]': 'isOpen()',
-    '[class.reduce-motion]': 'reduceMotion()',
     tabindex: '0',
     '(click)': 'toggle()',
     '(keydown.enter)': 'onEnter($event)',
@@ -47,12 +46,6 @@ export class Dropdown implements OnInit {
   private static nextId = 0;
   dropdownId = `dropdown-${Dropdown.nextId++}`;
 
-  reduceMotion = input<boolean>(
-    typeof window !== 'undefined'
-      ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
-      : false,
-  );
-
   constructor(private el: ElementRef) {}
 
   ngOnInit() {

src/app/components/popup/popup.scss

@@ -26,8 +26,8 @@
   overflow: visible;
   animation: popup-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 
-  border: oklch(0 0 0 / 20%) 2px solid;
-  gap: 15px;
+  outline: oklch(0 0 0 / 20%) 2px solid;
+  gap: 16px;
 
   &.variant-glass {
     background-color: oklch(1 0 0 / 60%);
@@ -61,7 +61,7 @@
   align-items: center;
   padding: 0 12px;
   height: 40px;
-  border-bottom: 1px solid oklch(0 0 0 / 5%);
+  box-shadow: 0 1px 0 oklch(0 0 0 / 20%);
 
   .header-left {
     display: flex;

src/app/components/switch/switch.scss

@@ -2,32 +2,32 @@
 @use "sass:list";
 @use "styles/library" as library;
 
-$switch_off_bg: oklch(0.683 0 0); // #999999
+$off_bg: oklch(0.683 0 0); // #999999
 
-$switch_dimension: (57px, 30px);
-$switch_slider_dimension: (24px, 24px);
-$switch_padding: (3px, 3px);
-$switch_border_radius: 15px;
-$switch_border_color: oklch(0 0 0 / 20%);
+$dimension: (57px, 30px);
+$knob_dimension: (24px, 24px);
+$internal_padding: (3px, 3px);
+$border_radius: 15px;
+$border_color: oklch(0 0 0 / 20%);
 
-$switch_animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
-$switch_animation_duration: 0.2s;
+$animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
+$default_animation_duration: 0.2s;
 
 :host {
   display: inline-block;
-  width: list.nth($switch_dimension, 1); height: list.nth($switch_dimension, 2);
-  border-radius: $switch_border_radius;
-  background-color: $switch_off_bg;
+  width: list.nth($dimension, 1); height: list.nth($dimension, 2);
+  border-radius: $border_radius;
+  background-color: $off_bg;
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  box-shadow: 0 0 0 1px $switch_border_color inset;
+  box-shadow: 0 0 0 1px $border_color inset;
 
-  --switch-duration: #{$switch_animation_duration};
-  transition: background-color var(--switch-duration) $switch_animation_timing;
+  --animation-duration: calc(#{$default_animation_duration} * var(--motion-duration-multiplier));
+  transition: background-color var(--animation-duration) $animation_timing;
 
   &.reduce-motion {
-    --switch-duration: 0s;
+    --animation-duration: 0s;
   }
 
   &:hover, &:focus-within {
@@ -41,8 +41,8 @@ $switch_animation_duration: 0.2s;
 
     .switch-knob {
       transform: translate(
-          list.nth($switch_dimension, 1) - list.nth($switch_slider_dimension, 1) - list.nth($switch_padding, 1) * 2,
-          list.nth($switch_dimension, 2) - list.nth($switch_slider_dimension, 2) - list.nth($switch_padding, 2) * 2
+          list.nth($dimension, 1) - list.nth($knob_dimension, 1) - list.nth($internal_padding, 1) * 2,
+          list.nth($dimension, 2) - list.nth($knob_dimension, 2) - list.nth($internal_padding, 2) * 2
       );
     }
   }
@@ -50,10 +50,10 @@ $switch_animation_duration: 0.2s;
 
 .switch-knob {
   position: absolute;
-  width: list.nth($switch_slider_dimension, 1); height: list.nth($switch_slider_dimension, 2);
-  left: list.nth($switch_padding, 1); top: list.nth($switch_padding, 2);
+  width: list.nth($knob_dimension, 1); height: list.nth($knob_dimension, 2);
+  left: list.nth($internal_padding, 1); top: list.nth($internal_padding, 2);
   background-color: white;
   border-radius: 50%;
   user-select: none;
-  transition: transform var(--switch-duration) $switch_animation_timing;
+  transition: transform var(--animation-duration) $animation_timing;
 }

src/app/components/switch/switch.ts

@@ -10,7 +10,6 @@ import { Component, input, model, output } from '@angular/core';
     tabindex: '0',
     '[attr.aria-checked]': 'isActive()',
     '[class.active]': 'isActive()',
-    '[class.reduce-motion]': 'reduceMotion()',
     '(click)': 'onClick()',
     '(keydown.enter)': 'onClick()',
     '(keydown.space)': 'onSpaceDown($event)',
@@ -20,12 +19,6 @@ export class Switch {
   isActive = model<boolean>(false);
   toggle = output<boolean>();
 
-  reduceMotion = input<boolean>(
-    typeof window !== 'undefined'
-      ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
-      : false,
-  );
-
   onClick(): void {
     this.isActive.update((value) => !value);
     this.onToggle();