♻️(frontend) refactor pulse_mic into pulse_background

Make the keyframe more generic with an explicit naming.

src/frontend/panda.config.ts

@@ -116,10 +116,10 @@ const config: Config = {
         '80%': { transform: 'rotate(20deg)' },
         '100%': { transform: 'rotate(0)' },
       },
-      pulse_mic: {
+      pulse_background: {
-        '0%': { color: 'primary', opacity: '1' },
+        '0%': { opacity: '1' },
-        '50%': { color: 'primary', opacity: '0.8' },
+        '50%': { opacity: '0.65' },
-        '100%': { color: 'primary', opacity: '1' },
+        '100%': { opacity: '1' },
       },
     },
     tokens: defineTokens({

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx

@@ -84,9 +84,12 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
           <RiMicOffFill color={'gray'} />
         ) : (
           <RiMicFill
-            style={{
+            className={css({
-              animation: isSpeaking ? 'pulse_mic 800ms infinite' : undefined,
+              color: isSpeaking ? 'primaryDark.300' : 'primaryDark.50',
-            }}
+              animation: isSpeaking
+                ? 'pulse_background 800ms infinite'
+                : undefined,
+            })}
           />
         )}
       </Button>