From d2741f39f3d86a085689ccf02b76a2b97d17b6db Mon Sep 17 00:00:00 2001 From: sikongyue <3155157671@qq.com> Date: Mon, 3 Aug 2026 22:22:24 +0800 Subject: [PATCH] =?UTF-8?q?feat(canvas):=20=E5=8A=A8=E6=95=88=E7=B3=BB?= =?UTF-8?q?=E7=BB=9F=E4=B8=8E=E5=93=8D=E5=BA=94=E5=BC=8F=E9=80=82=E9=85=8D?= =?UTF-8?q?=20-=20token=E8=90=BD=E5=9C=B0+=E6=96=AD=E7=82=B9=E4=BD=93?= =?UTF-8?q?=E7=B3=BB+=E6=97=A0=E9=9A=9C=E7=A2=8D=20#99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 基于 Wayfinder #99 决议，完成动效/响应式/无障碍三大维度落地： 1. 动效 token 迁移（CSS 动画） - 33 处 easing 替换为 var(--motion-ease-out/in-out/linear) - 7 处有限动画 duration 替换为 var(--motion-dur-*-calc) （含 motion-scale 降级，自动联动 prefers-reduced-motion） - canvas-node batch 动画内联值替换为 token 2. aceternityMotion 对齐 + motion/react 硬编码替换 - 添加 JS↔CSS token 映射文档注释 - 3 处 motion/react 硬编码 duration 替换为 aceternityMotion.* 引用 3. infinite 装饰动画 reduced-motion 降级 - L1 (prefers-reduced-motion): 缩短至 0.01ms + 单次播放 - L2 (.no-motion): animation: none 完全禁用 - 覆盖 9 个 infinite 动画类（连线流光/边框流光/极光标题等） 4. 响应式断点体系 - @theme 新增 3 断点 token: --breakpoint-tablet(768)/desktop(1024)/wide(1440) - 修复 canvas-toolbar 外观面板缺 max-w 导致移动端溢出 5. 无障碍 - 画布页新增 skip-to-content 链接（键盘用户跳过侧栏直达画布） - 任务进度面板 aria-live="polite"（屏幕阅读器播报任务数变化） Closes #99 --- .../canvas/canvas-active-task-panel.tsx | 2 +- .../canvas/canvas-node-emotion-panel.tsx | 2 +- web/src/components/canvas/canvas-node.tsx | 2 +- web/src/components/canvas/canvas-toolbar.tsx | 2 +- web/src/lib/aceternity-motion.ts | 15 +++ .../pages/canvas/canvas-project-feedback.tsx | 2 +- web/src/pages/canvas/project.tsx | 5 +- web/src/styles/globals.css | 106 ++++++++++++------ 8 files changed, 93 insertions(+), 43 deletions(-) diff --git a/web/src/components/canvas/canvas-active-task-panel.tsx b/web/src/components/canvas/canvas-active-task-panel.tsx index 97a5cf10d..c6b2f83cc 100644 --- a/web/src/components/canvas/canvas-active-task-panel.tsx +++ b/web/src/components/canvas/canvas-active-task-panel.tsx @@ -62,7 +62,7 @@ export function CanvasActiveTaskPanel({ tasks }: { tasks: GenerationTask[] }) { 生成任务 - 当前画布 · {tasks.length} 个进行中 + 当前画布 · {tasks.length} 个进行中 diff --git a/web/src/components/canvas/canvas-node-emotion-panel.tsx b/web/src/components/canvas/canvas-node-emotion-panel.tsx index 63ed7d949..9b5988e47 100644 --- a/web/src/components/canvas/canvas-node-emotion-panel.tsx +++ b/web/src/components/canvas/canvas-node-emotion-panel.tsx @@ -202,7 +202,7 @@ function EmotionHeadPreview({ preset }: { preset: CanvasEmotionPreset }) {
- 实时预览 · {preset.label} + 实时预览 · {preset.label}
); diff --git a/web/src/components/canvas/canvas-node.tsx b/web/src/components/canvas/canvas-node.tsx index c8d27555d..7c0f2b26c 100644 --- a/web/src/components/canvas/canvas-node.tsx +++ b/web/src/components/canvas/canvas-node.tsx @@ -380,7 +380,7 @@ export const CanvasNode = React.memo(function CanvasNode({ "--batch-from-x": `${batchMotion?.x || 0}px`, "--batch-from-y": `${batchMotion?.y || 0}px`, "--batch-from-rotate": `${6 + (batchMotion?.index || 0) * 4}deg`, - animation: data.metadata?.batchRootId ? (batchClosing ? "canvas-batch-child-out 260ms cubic-bezier(.4,0,.2,1) both" : "canvas-batch-child-in 340ms cubic-bezier(.2,.85,.18,1) both") : undefined, + animation: data.metadata?.batchRootId ? (batchClosing ? `canvas-batch-child-out var(--motion-dur-base-calc) var(--motion-ease-in-out) both` : `canvas-batch-child-in var(--motion-dur-slow-calc) var(--motion-ease-out) both`) : undefined, animationDelay: data.metadata?.batchRootId ? `${batchClosing ? 0 : 45 + (batchMotion?.index || 0) * 24}ms` : undefined, } as React.CSSProperties } diff --git a/web/src/components/canvas/canvas-toolbar.tsx b/web/src/components/canvas/canvas-toolbar.tsx index ff09cf754..df454f0ed 100644 --- a/web/src/components/canvas/canvas-toolbar.tsx +++ b/web/src/components/canvas/canvas-toolbar.tsx @@ -142,7 +142,7 @@ export function CanvasToolbar({ {appearanceOpen ? ( - + event.stopPropagation()}> } title="画布外观" subtitle="调整整个创作空间" theme={theme} />
主题模式
diff --git a/web/src/lib/aceternity-motion.ts b/web/src/lib/aceternity-motion.ts index a7f377888..bc16bcc44 100644 --- a/web/src/lib/aceternity-motion.ts +++ b/web/src/lib/aceternity-motion.ts @@ -1,3 +1,18 @@ +/** + * 动效配置（对应 #99 动效系统） + * + * JS 侧 duration（秒）与 CSS token（毫秒）映射关系： + * instant 0.12s ≈ --motion-dur-fast (150ms) + * state 0.20s ≈ --motion-dur-fast (150ms) + * panel 0.32s ≈ --motion-dur-base (250ms) + * + * easing 与 CSS token 映射： + * enter [0.2, 0.85, 0.18, 1] ≈ --motion-ease-out + * exit [0.4, 0, 1, 1] ≈ --motion-ease-in + * + * prefers-reduced-motion 由组件层 useReducedMotion() 控制， + * CSS 层由 --motion-scale 联动（L0=1 / L1=0.3 / L2=0）。 + */ export const aceternityMotion = { duration: { instant: 0.12, diff --git a/web/src/pages/canvas/canvas-project-feedback.tsx b/web/src/pages/canvas/canvas-project-feedback.tsx index 44c5ec6b5..b694fff4e 100644 --- a/web/src/pages/canvas/canvas-project-feedback.tsx +++ b/web/src/pages/canvas/canvas-project-feedback.tsx @@ -34,7 +34,7 @@ export function CanvasUploadStatusToast({ status, theme }: { status: CanvasUploa >
- + {status.error ? : status.done ? : } diff --git a/web/src/pages/canvas/project.tsx b/web/src/pages/canvas/project.tsx index 7decdc583..23bf60733 100644 --- a/web/src/pages/canvas/project.tsx +++ b/web/src/pages/canvas/project.tsx @@ -1350,7 +1350,9 @@ function InfiniteCanvasPage() { if (!projectLoaded) return ; return ( -
+ <> + 跳转到画布主内容 +
{currentProject?.projectId ? openProjectAssets()} /> : null}
) : null}
+ ); } diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css index dd25cca29..fb2a80f4f 100644 --- a/web/src/styles/globals.css +++ b/web/src/styles/globals.css @@ -164,6 +164,33 @@ --motion-scale: 0; } +/* infinite 装饰动画在 reduced-motion / no-motion 下降级（对应 #99 三级降级）*/ +@media (prefers-reduced-motion: reduce) { + .canvas-connection-flow, + .canvas-connection-draft, + .canvas-generation-border-flow, + .canvas-task-progress-shimmer, + .ai-title-aurora, + .creation-intro-mark, + .creation-intro-word, + .creation-intro-signal, + .creation-intro-emphasis { + animation-duration: 0.01ms; + animation-iteration-count: 1; + } +} +.no-motion .canvas-connection-flow, +.no-motion .canvas-connection-draft, +.no-motion .canvas-generation-border-flow, +.no-motion .canvas-task-progress-shimmer, +.no-motion .ai-title-aurora, +.no-motion .creation-intro-mark, +.no-motion .creation-intro-word, +.no-motion .creation-intro-signal, +.no-motion .creation-intro-emphasis { + animation: none; +} + /* 动效计算函数（实际 duration = base * motion-scale）*/ :root { --motion-dur-instant-calc: calc(var(--motion-dur-instant) * var(--motion-scale)); @@ -174,6 +201,11 @@ } @theme inline { + /* 响应式断点（对应 #99 四断点体系：mobile/tablet/desktop/wide）*/ + --breakpoint-tablet: 768px; + --breakpoint-desktop: 1024px; + --breakpoint-wide: 1440px; + --color-background: var(--background); --color-foreground: var(--foreground); --color-border: var(--border); @@ -259,7 +291,7 @@ --motion-instant: 120ms; --motion-state: 180ms; --motion-panel: 240ms; - --ease-aceternity: cubic-bezier(0.2, 0.85, 0.18, 1); + --ease-aceternity: var(--motion-ease-out); --ease-product-enter: cubic-bezier(0.16, 1, 0.3, 1); --workspace-canvas: #ffffff; --workspace-surface: rgba(255, 255, 255, 0.82); @@ -1209,7 +1241,7 @@ .creation-empty-composer { width: 100%; - animation: creation-workbench-enter 420ms cubic-bezier(.16, 1, .3, 1) both; + animation: creation-workbench-enter var(--motion-dur-slow-calc) var(--motion-ease-out) both; } .creation-composer { @@ -1275,7 +1307,7 @@ background: color-mix(in srgb, var(--creation-surface-muted) 80%, transparent); color: var(--creation-muted); transform: rotate(-7deg); - transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(.16, 1, .3, 1); + transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms var(--motion-ease-out); } .creation-reference-tile:hover:not(:disabled) { @@ -1521,7 +1553,7 @@ width: 13px; height: 13px; color: var(--creation-muted); - transition: transform 160ms cubic-bezier(.16, 1, .3, 1); + transition: transform 160ms var(--motion-ease-out); } .creation-chip > svg:last-child.is-open { @@ -1634,7 +1666,7 @@ box-shadow: inset 0 1px 0 color-mix(in srgb, white 52%, transparent); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); - transition: border-color 160ms ease, background-color 160ms ease, transform 160ms cubic-bezier(.16, 1, .3, 1); + transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--motion-ease-out); } .creation-inspiration-strip button:hover { @@ -1680,7 +1712,7 @@ .creation-results { width: 100%; - animation: creation-results-enter 280ms cubic-bezier(.16, 1, .3, 1) both; + animation: creation-results-enter var(--motion-dur-base-calc) var(--motion-ease-out) both; } .creation-thread-composer { @@ -1728,7 +1760,7 @@ padding: 0 !important; backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%); - animation: creation-popover-enter 180ms cubic-bezier(.16, 1, .3, 1) both; + animation: creation-popover-enter var(--motion-dur-fast-calc) var(--motion-ease-out) both; } .dark .creation-control-popover-surface, @@ -2174,7 +2206,7 @@ border-radius: 26px; background: var(--creation-surface); box-shadow: 0 28px 70px rgba(0, 0, 0, .18); - animation: creation-workbench-enter 360ms cubic-bezier(.16, 1, .3, 1) both; + animation: creation-workbench-enter var(--motion-dur-slow-calc) var(--motion-ease-out) both; } html:not(.dark) .creation-studio-composer { @@ -2208,7 +2240,7 @@ background: #1c1f25; color: #c8cdd5; transform: rotate(-7deg); - transition: transform 180ms cubic-bezier(.16, 1, .3, 1), border-color 180ms ease, background-color 180ms ease; + transition: transform 180ms var(--motion-ease-out), border-color 180ms ease, background-color 180ms ease; } html:not(.dark) .creation-studio-reference { @@ -2316,7 +2348,7 @@ font-weight: 600; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055); - transition: transform 150ms cubic-bezier(.16, 1, .3, 1), border-color 150ms ease, background-color 150ms ease; + transition: transform 150ms var(--motion-ease-out), border-color 150ms ease, background-color 150ms ease; } html:not(.dark) .creation-studio-control, @@ -2344,7 +2376,7 @@ .creation-studio-control:active { transform: scale(.98); } .creation-studio-control.is-mode { border-color: rgba(6, 182, 212, .36) !important; background: rgba(4, 73, 89, .28) !important; color: #18c2e1 !important; } .creation-studio-control > svg { width: 19px; height: 19px; flex: 0 0 auto; } - .creation-studio-control > svg:last-child { width: 17px; height: 17px; color: var(--creation-muted); transition: transform 160ms cubic-bezier(.16, 1, .3, 1); } + .creation-studio-control > svg:last-child { width: 17px; height: 17px; color: var(--creation-muted); transition: transform 160ms var(--motion-ease-out); } .creation-studio-control > svg:last-child.is-open { transform: rotate(180deg); } .creation-model-picker.canvas-composer-model-picker { @@ -2365,7 +2397,7 @@ background: #383d47; color: #e5e8ec; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13); - transition: transform 150ms cubic-bezier(.16, 1, .3, 1), background-color 150ms ease, color 150ms ease; + transition: transform 150ms var(--motion-ease-out), background-color 150ms ease, color 150ms ease; } .creation-studio-submit:hover:not(:disabled) { background: #f4f5f6; color: #111317; transform: translateY(-1px); } .creation-studio-submit:active:not(:disabled) { transform: scale(.96); } @@ -2396,7 +2428,7 @@ border-radius: 10px; background: rgba(255, 255, 255, .055); color: var(--creation-accent); - animation: creation-intro-mark 2.8s cubic-bezier(.16, 1, .3, 1) infinite; + animation: creation-intro-mark 2.8s var(--motion-ease-out) infinite; } .creation-chat-intro-mark svg { width: 16px; height: 16px; } .creation-chat-headline { @@ -2407,7 +2439,7 @@ line-height: 1.25; text-align: center; } - .creation-chat-headline span { display: inline-block; margin-left: 4px; color: var(--creation-accent); animation: creation-intro-word 2.8s cubic-bezier(.16, 1, .3, 1) infinite; } + .creation-chat-headline span { display: inline-block; margin-left: 4px; color: var(--creation-accent); animation: creation-intro-word 2.8s var(--motion-ease-out) infinite; } .creation-chat-intro p { margin: 8px 0 0; color: var(--creation-muted); font-size: 12px; } .creation-chat-composer { @@ -2444,7 +2476,7 @@ background: #242730; color: #eef1f4; box-shadow: none; - transition: transform 140ms cubic-bezier(.16, 1, .3, 1), background-color 140ms ease, border-color 140ms ease; + transition: transform 140ms var(--motion-ease-out), background-color 140ms ease, border-color 140ms ease; } .creation-chat-reference:hover:not(:disabled) { @@ -2527,7 +2559,7 @@ font-weight: 600; white-space: nowrap; box-shadow: none; - transition: border-color 140ms ease, background-color 140ms ease, transform 140ms cubic-bezier(.16, 1, .3, 1); + transition: border-color 140ms ease, background-color 140ms ease, transform 140ms var(--motion-ease-out); } .creation-chat-control:hover, .creation-chat-control[aria-expanded="true"], @@ -2536,7 +2568,7 @@ .creation-chat-control:active { transform: scale(.98); } .creation-chat-control.is-mode { border-color: rgba(6, 182, 212, .36) !important; background: rgba(5, 80, 98, .24) !important; color: #17c4e2 !important; } .creation-chat-control > svg { width: 15px; height: 15px; flex: 0 0 auto; } - .creation-chat-control > svg:last-child { width: 14px; height: 14px; color: var(--creation-muted); transition: transform 160ms cubic-bezier(.16, 1, .3, 1); } + .creation-chat-control > svg:last-child { width: 14px; height: 14px; color: var(--creation-muted); transition: transform 160ms var(--motion-ease-out); } .creation-chat-control > svg:last-child.is-open { transform: rotate(180deg); } .creation-chat-composer .creation-model-picker.canvas-composer-model-picker { width: min(196px, 26vw) !important; justify-content: flex-start; } .creation-chat-composer .creation-model-picker .canvas-model-picker-trigger-icon { width: 19px; height: 19px; border-radius: 5px; } @@ -2556,7 +2588,7 @@ border-radius: 50%; background: #303540; color: #f1f3f5; - transition: background-color 140ms ease, color 140ms ease, transform 140ms cubic-bezier(.16, 1, .3, 1); + transition: background-color 140ms ease, color 140ms ease, transform 140ms var(--motion-ease-out); } .creation-chat-submit:hover:not(:disabled) { background: #f3f4f6; color: #121417; transform: translateY(-1px); } .creation-chat-submit:active:not(:disabled) { transform: scale(.96); } @@ -3590,7 +3622,7 @@ -webkit-background-clip: text; background-clip: text; color: transparent; - animation: ai-title-aurora 7s ease-in-out infinite; + animation: ai-title-aurora 7s var(--motion-ease-in-out) infinite; } .dark .ai-title-aurora { @@ -4219,7 +4251,7 @@ .canvas-floating-dock, .canvas-floating-panel, .canvas-node-toolbar { - animation: canvas-panel-in 180ms cubic-bezier(0.2, 0.85, 0.18, 1) both; + animation: canvas-panel-in var(--motion-dur-fast-calc) var(--motion-ease-out) both; } /* 覆盖工具栏与节点之间的视觉留白，避免鼠标途中被相邻节点抢走悬浮状态。 */ @@ -4271,7 +4303,7 @@ color 140ms ease, opacity 140ms ease, box-shadow 140ms ease, - transform 160ms cubic-bezier(0.2, 0.85, 0.18, 1); + transform 160ms var(--motion-ease-out); } .canvas-connection-handle { @@ -4307,7 +4339,7 @@ .canvas-menu-item-icon, .canvas-node-tool-icon { - transition: transform 160ms cubic-bezier(0.2, 0.85, 0.18, 1); + transition: transform 160ms var(--motion-ease-out); } .canvas-node-shell { @@ -4389,7 +4421,7 @@ content: ""; filter: drop-shadow(0 0 3px rgba(96, 165, 250, 0.2)); pointer-events: none; - animation: canvas-generation-border-flow 2.4s linear infinite; + animation: canvas-generation-border-flow 2.4s var(--motion-ease-linear) infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); @@ -4402,11 +4434,11 @@ } .canvas-connection-flow { - animation: canvas-connection-flow 1.25s linear infinite; + animation: canvas-connection-flow 1.25s var(--motion-ease-linear) infinite; } .canvas-connection-draft { - animation: canvas-connection-flow 0.9s linear infinite; + animation: canvas-connection-flow 0.9s var(--motion-ease-linear) infinite; } @keyframes canvas-panel-in { @@ -4635,7 +4667,7 @@ html:not(.dark) .creation-home { .creation-empty-composer { width: 100%; margin: 0; - animation: creation-composer-arrive 360ms cubic-bezier(.16, 1, .3, 1) both; + animation: creation-composer-arrive var(--motion-dur-slow-calc) var(--motion-ease-out) both; } .creation-chat-composer { @@ -4675,7 +4707,7 @@ html:not(.dark) .creation-chat-composer { color: var(--creation-muted); box-shadow: none; transform: none; - transition: color 140ms ease, background-color 140ms ease, transform 140ms cubic-bezier(.16, 1, .3, 1); + transition: color 140ms ease, background-color 140ms ease, transform 140ms var(--motion-ease-out); } .creation-chat-reference svg, @@ -4751,7 +4783,7 @@ html:not(.dark) .creation-chat-reference:hover:not(:disabled) { background: rgba font-size: 11px; font-weight: 500; box-shadow: none !important; - transition: color 140ms ease, background-color 140ms ease, transform 140ms cubic-bezier(.16, 1, .3, 1); + transition: color 140ms ease, background-color 140ms ease, transform 140ms var(--motion-ease-out); } .creation-chat-control:hover, @@ -4790,7 +4822,7 @@ html:not(.dark) .creation-chat-composer .creation-model-picker.canvas-composer-m border-radius: 9px; background: #f3f4f5; color: #1b1d21; - transition: transform 140ms cubic-bezier(.16, 1, .3, 1), background-color 140ms ease; + transition: transform 140ms var(--motion-ease-out), background-color 140ms ease; } .creation-chat-submit:hover:not(:disabled) { background: #fff; transform: translateY(-1px); } @@ -4950,7 +4982,7 @@ html:not(.dark) .app-workspace-shell.is-creation-workspace .app-workspace-stage align-items: center; margin: 0 0 24px; text-align: center; - animation: creation-intro-arrive 420ms cubic-bezier(.16, 1, .3, 1) both; + animation: creation-intro-arrive var(--motion-dur-slow-calc) var(--motion-ease-out) both; } .creation-chat-intro p { @@ -4977,7 +5009,7 @@ html:not(.dark) .app-workspace-shell.is-creation-workspace .app-workspace-stage width: 16px; height: 1px; background: linear-gradient(90deg, transparent, rgba(227, 231, 235, .88), transparent); - animation: creation-intro-signal 2.8s cubic-bezier(.16, 1, .3, 1) infinite; + animation: creation-intro-signal 2.8s var(--motion-ease-out) infinite; } .creation-chat-reference.is-paper { @@ -5121,7 +5153,7 @@ html:not(.dark) .creation-home .creation-chat-composer .creation-model-picker.ca font-size: 1.25em; font-weight: 760; text-shadow: 0 0 24px rgba(89, 202, 232, .24); - animation: creation-intro-emphasis 2.6s cubic-bezier(.16, 1, .3, 1) infinite; + animation: creation-intro-emphasis 2.6s var(--motion-ease-out) infinite; } .creation-thread-stage, @@ -5187,7 +5219,7 @@ html:not(.dark) .creation-user-message-reference { background: rgba(28, 32, 37, .creation-media-result { max-width: 860px; padding: 14px 0 0 34px; } .creation-image-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .creation-image-result { position: relative; aspect-ratio: 1; overflow: hidden; border: 0; border-radius: 9px; background: #181a1e; } -.creation-image-result img { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms cubic-bezier(.16, 1, .3, 1); } +.creation-image-result img { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms var(--motion-ease-out); } .creation-image-result span, .creation-video-result > span { position: absolute; right: 8px; bottom: 8px; display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; background: rgba(13, 14, 16, .62); color: #fff; opacity: 0; transition: opacity 160ms ease; backdrop-filter: blur(8px); } .creation-image-result span svg, .creation-video-result span svg { width: 14px; height: 14px; } .creation-image-result:hover img { transform: scale(1.025); } @@ -5450,7 +5482,7 @@ html:not(.dark) .creation-message-content code { background: rgba(28, 32, 37, .0 color: var(--creation-muted) !important; font-size: 11px !important; font-weight: 500; - transition: background-color 160ms cubic-bezier(.16, 1, .3, 1), color 160ms cubic-bezier(.16, 1, .3, 1), transform 160ms cubic-bezier(.16, 1, .3, 1) !important; + transition: background-color 160ms var(--motion-ease-out), color 160ms var(--motion-ease-out), transform 160ms var(--motion-ease-out) !important; } .creation-choice-grid button:hover { @@ -5490,7 +5522,7 @@ html:not(.dark) .creation-message-content code { background: rgba(28, 32, 37, .0 padding: 0 2px !important; color: var(--creation-muted) !important; font-size: 10px !important; - transition: color 160ms cubic-bezier(.16, 1, .3, 1), background-color 160ms cubic-bezier(.16, 1, .3, 1) !important; + transition: color 160ms var(--motion-ease-out), background-color 160ms var(--motion-ease-out) !important; } .creation-custom-trigger svg { width: 12px; height: 12px; } @@ -5566,7 +5598,7 @@ html:not(.dark) .creation-message-content code { background: rgba(28, 32, 37, .0 color: var(--creation-muted) !important; font-size: 11px !important; font-weight: 500; - transition: background-color 160ms cubic-bezier(.16, 1, .3, 1), color 160ms cubic-bezier(.16, 1, .3, 1) !important; + transition: background-color 160ms var(--motion-ease-out), color 160ms var(--motion-ease-out) !important; } .creation-duration-choices button:hover { background: rgba(255, 255, 255, .055) !important; color: var(--creation-text) !important; } @@ -5600,7 +5632,7 @@ html:not(.dark) .creation-custom-value { background: rgba(28, 32, 37, .055) !imp border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--creation-muted); - transition: background-color 150ms ease, color 150ms ease, transform 150ms cubic-bezier(.16, 1, .3, 1); + transition: background-color 150ms ease, color 150ms ease, transform 150ms var(--motion-ease-out); } .creation-top-action svg { width: 16px; height: 16px; }