feat: longer animate time

Author: subframe7536

src/style-settings/basic.ts

@@ -6,7 +6,7 @@ export default Settings.create('maple-basic', 'Maple Basic').children([
     {
       title: { en: 'Animation Duration (ms)', zh: '动画持续时间（毫秒）' },
     },
-    { default: 200, min: 0, max: 500, step: 50, format: 'ms' },
+    { default: 500, min: 0, max: 1000, step: 50, format: 'ms' },
   ),
   Settings.of().addVarNumSlider(
     'setting-item-line-height',

src/variable.scss

@@ -55,10 +55,10 @@ body {
     inset 0 -0.125px 1px 0px var(--color-base-40),
     0 0.75px 2px 0.5px var(--color-base-50);
 
-  --animation: var(--setting-animation-time, 200ms) var(--anim-motion-smooth);
-  --animation-slow: calc(var(--setting-animation-time, 200ms) * 2)
-    var(--anim-motion-smooth);
-  --animation-delay: calc(4 * var(--setting-animation-time, 150ms));
+  --animation-dur: var(--setting-animation-time, 500ms);
+  --animation: var(--animation-dur) var(--anim-motion-smooth);
+  --animation-fast: calc(var(--animation-dur) / 2) var(--anim-motion-smooth);
+  --animation-delay: calc(4 * var(--animation-dur));
   --block-outline-width: var(--size-2-1);
 
   --divider-color: var(--color-base-30);

src/workspace/modal.scss

@@ -65,7 +65,7 @@ body:not(.is-mobile) {
           var(--color-base-20),
         inset 0 0 0 calc(var(--slider-thumb-width) / 2) var(--accent-active),
         var(--input-shadow);
-      transition: box-shadow var(--animation);
+      transition: box-shadow var(--animation-fast);
       border-width: 0;
       &:is(:hover, :active, :focus) {
         --slider-thumb-ring-factor: 6;
@@ -103,7 +103,7 @@ body:not(.is-mobile) {
     .checkbox-container {
       --toggle-radius: var(--radius-m);
       height: var(--size-4-4);
-      transition: var(--animation-slow);
+      transition: var(--animation-fast);
       border: var(--toggle-border-width) solid var(--text-faint);
 
       &:focus-within {
@@ -130,7 +130,7 @@ body:not(.is-mobile) {
       border-radius: calc(var(--toggle-width) / 2);
       border: var(--toggle-border-width) solid var(--text-faint);
       margin: 0;
-      transition: var(--animation-slow);
+      transition: var(--animation-fast);
     }
 
     :is(&:hover, &:focus-within)::after {
@@ -161,7 +161,7 @@ body:not(.is-mobile) {
       border: var(--toggle-border-width) solid var(--text-faint);
       width: 20%;
       margin: 0;
-      transition: var(--animation-slow);
+      transition: var(--animation-fast);
     }
 
     :is(&:hover, &:focus-within)::after {