Add accent color picker animation

Author: pchalamet

CHANGELOG.md

@@ -4,6 +4,7 @@ All notable changes to Forge are documented in this file.
 
 ## [Unreleased]
 
+- Added an expand and collapse animation for the accent color picker.
 - Fixed packaged macOS builds loading a blank window by using relative renderer asset paths.
 
 ## [0.0.3]

src/styles.css

@@ -492,17 +492,26 @@ input {
   box-shadow: 0 12px 40px var(--toast-shadow);
   opacity: 0;
   pointer-events: none;
-  transform: translateY(-4px);
+  transform: translate3d(0, -10px, 0) scale(0.68);
+  transform-origin: calc(100% - 15px) -15px;
   transition:
-    opacity 120ms ease,
-    transform 120ms ease;
+    opacity 150ms ease,
+    transform 190ms cubic-bezier(0.18, 0.89, 0.32, 1.12);
+  will-change: opacity, transform;
   -webkit-app-region: no-drag;
 }
 
 .theme-accent-control:hover .accent-picker {
   opacity: 1;
   pointer-events: auto;
-  transform: translateY(0);
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .accent-picker {
+    transform: translate3d(0, 0, 0) scale(1);
+    transition: none;
+  }
 }
 
 .accent-swatch {