fix(a11y): reduced-motion for spinner/call-avatar; tap-to-skip boot; AA accent contrast
- SendingSpinClass and CallAvatarAnimation respect prefers-reduced-motion (static opacity fallback), matching MsgAppearClass. - Terminal boot overlay dismisses on click/tap and is aria-hidden. - Primary.Main: Midnight #6b7ca8 -> #6f80aa (4.29 -> 4.51:1), Lotus Terminal Light #c44e00 -> #ba4a00 (4.14 -> 4.52:1), hue preserved. Fixes #84 Fixes #86 Fixes #52 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
This commit is contained in:
@@ -36,25 +36,46 @@ const glowPulse = keyframes({
|
||||
},
|
||||
});
|
||||
|
||||
// Wobble/glow/spin only run under the same no-preference guard as
|
||||
// MsgAppearClass below; prefers-reduced-motion users get a static state.
|
||||
export const WobbleAnimation = style({
|
||||
animation: `${wobble} 2000ms ease-in-out`,
|
||||
animationIterationCount: 'infinite',
|
||||
'@media': {
|
||||
'(prefers-reduced-motion: no-preference)': {
|
||||
animation: `${wobble} 2000ms ease-in-out`,
|
||||
animationIterationCount: 'infinite',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const GlowAnimation = style({
|
||||
animation: `${glowPulse} 2000ms ease-out`,
|
||||
animationIterationCount: 'infinite',
|
||||
'@media': {
|
||||
'(prefers-reduced-motion: no-preference)': {
|
||||
animation: `${glowPulse} 2000ms ease-out`,
|
||||
animationIterationCount: 'infinite',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const CallAvatarAnimation = style({
|
||||
animation: `${wobble} 2000ms ease-in-out, ${glowPulse} 2000ms ease-out`,
|
||||
animationIterationCount: 'infinite',
|
||||
'@media': {
|
||||
'(prefers-reduced-motion: no-preference)': {
|
||||
animation: `${wobble} 2000ms ease-in-out, ${glowPulse} 2000ms ease-out`,
|
||||
animationIterationCount: 'infinite',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const SendingSpinClass = style({
|
||||
display: 'inline-block',
|
||||
animation: `${spin} 900ms linear infinite`,
|
||||
transformOrigin: 'center',
|
||||
// Static fallback: dim instead of spinning when motion is reduced.
|
||||
opacity: 0.6,
|
||||
'@media': {
|
||||
'(prefers-reduced-motion: no-preference)': {
|
||||
animation: `${spin} 900ms linear infinite`,
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const msgAppearKeyframe = keyframes({
|
||||
|
||||
Reference in New Issue
Block a user