jaredandClaude Opus 4.8
6cf18c3bd9
DP7: fix inverted Deafen/Undeafen aria-label on the sound button so it matches the action and tooltip. DP8: add aria-pressed to Sound/Video/ScreenShare toggles and align the Microphone toggle to the same "pressed = feature on/active" semantic. DP9: return focus to the trigger when the GifPicker closes and cap its fixed width to min(312px, calc(100vw - 16px)) so it can't overflow narrow viewports. DP10: drop redundant mouse-only clear onClick nested inside the search filter Chip buttons (parent chip/menu already performs the clear); the cross icons are now purely decorative. DP11: constrain the voice recorder widget and let the waveform shrink so it fits a narrow composer, and expose the live duration as a role="timer" snapshot instead of spamming a screen reader every 100ms. DP12: announce the live-call participant count via a visually-hidden role="status" region. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { keyframes, style } from '@vanilla-extract/css';
|
|
import { color, config, toRem } from 'folds';
|
|
|
|
export const LiveChipText = style({
|
|
color: color.Critical.Main,
|
|
});
|
|
|
|
export const SrOnly = style({
|
|
position: 'absolute',
|
|
width: 1,
|
|
height: 1,
|
|
padding: 0,
|
|
margin: -1,
|
|
overflow: 'hidden',
|
|
clip: 'rect(0, 0, 0, 0)',
|
|
whiteSpace: 'nowrap',
|
|
border: 0,
|
|
});
|
|
|
|
export const CallStatus = style([
|
|
{
|
|
padding: `${toRem(6)} ${config.space.S200}`,
|
|
borderTop: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
|
|
},
|
|
]);
|
|
|
|
export const ControlDivider = style({
|
|
height: toRem(16),
|
|
});
|
|
|
|
const speakerPulse = keyframes({
|
|
'0%': { boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}` },
|
|
'50%': { boxShadow: `0 0 0 ${toRem(4)} ${color.Success.ContainerActive}` },
|
|
'100%': { boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}` },
|
|
});
|
|
|
|
export const SpeakerAvatarOutline = style({
|
|
'@media': {
|
|
'(prefers-reduced-motion: no-preference)': {
|
|
animation: `${speakerPulse} 1200ms ease-in-out infinite`,
|
|
},
|
|
'(prefers-reduced-motion: reduce)': {
|
|
boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}`,
|
|
},
|
|
},
|
|
});
|