BarVisualizer

Author: thomasyuill-livekit

components/livekit/audio-visualizer/audio-bar-visualizer/audio-bar-visualizer.tsx

@@ -27,7 +27,6 @@ const getSequencerInterval = (
   if (interval) {
     switch (state) {
       case 'connecting':
-        // case 'thinking':
         interval /= barCount;
         break;
 
@@ -54,9 +53,7 @@ export const audioBarVisualizerVariants = cva(['relative flex items-center justi
 });
 
 export const audioBarVisualizerBarVariants = cva(
-  [
-    'bg-muted rounded-full transition-colors duration-250 ease-linear data-[lk-highlighted=true]:bg-foreground',
-  ],
+  [' rounded-full transition-colors duration-250 ease-linear '],
   {
     variants: {
       size: {
@@ -120,9 +117,13 @@ export function AudioBarVisualizer({
       {bands.map((band, idx) => (
         <div
           key={idx}
-          data-lk-bar-index={idx}
-          data-lk-highlighted={highlightedIndices.includes(idx)}
-          className={cn(audioBarVisualizerBarVariants({ size }), barClassName)}
+          className={cn(
+            audioBarVisualizerBarVariants({ size }),
+            highlightedIndices.includes(idx)
+              ? 'bg-(--audio-visualizer-active)'
+              : 'bg-(--audio-visualizer-idle)',
+            barClassName
+          )}
           style={{ height: `${band * 100}%` }}
         />
       ))}

styles/globals.css

@@ -111,6 +111,10 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  /* LiveKit UI tokens */
+  --audio-visualizer-idle: var(--color-muted);
+  --audio-visualizer-active: var(--color-foreground);
 }
 
 @layer base {