From 7172091159390f7e8d5606c8b9c16a63d5e544f4 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sun, 1 Mar 2026 23:36:10 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Phase=203=20Aether=20Drift=20=E2=80=94?=
 =?UTF-8?q?=20voice=20&=20video=20component=20token=20migration?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Migrate all 10 voice/video components from Discord visual language to
Aether Drift design system. Zero discord-* classes or hardcoded hex
values remain in components/voice/.

Key changes:
- Status indicators use pastel accents: mint (connected/speaking),
  amber (connecting/idle), rose (muted/deafened/error)
- VoiceControlBar converted to frosted glass-bubble material
- ConnectionInfoPopover and ScreenShareSettingsPopover use glass popovers
- Speaking ring glow changed from Discord green to mint (#86efac)
- Slider accents use lavender instead of blurple
- All bg/text/border tokens mapped to surface-*/txt-*/interactive-* system
---
 .../voice/ConnectionInfoPopover.tsx           | 52 +++++++++----------
 .../components/voice/IncomingCallModal.tsx    | 18 +++----
 .../src/components/voice/PictureInPicture.tsx | 12 ++---
 .../voice/ScreenShareSettingsPopover.tsx      | 28 +++++-----
 .../web/src/components/voice/StreamTile.tsx   | 50 +++++++++---------
 .../web/src/components/voice/VoiceChannel.tsx | 16 +++---
 .../src/components/voice/VoiceChatPanel.tsx   |  6 +--
 .../src/components/voice/VoiceControlBar.tsx  | 18 +++----
 .../web/src/components/voice/VoiceGrid.tsx    |  6 +--
 .../web/src/components/voice/VoiceUser.tsx    | 22 ++++----
 10 files changed, 114 insertions(+), 114 deletions(-)

diff --git a/packages/web/src/components/voice/ConnectionInfoPopover.tsx b/packages/web/src/components/voice/ConnectionInfoPopover.tsx
index 6ac20936..765a9da5 100644
--- a/packages/web/src/components/voice/ConnectionInfoPopover.tsx
+++ b/packages/web/src/components/voice/ConnectionInfoPopover.tsx
@@ -13,21 +13,21 @@ function formatBitrate(kbps: number): string {
 }
 
 function pingColor(ms: number): string {
-  if (ms <= 80) return 'text-discord-green';
-  if (ms <= 200) return 'text-discord-yellow';
-  return 'text-discord-red';
+  if (ms <= 80) return 'text-status-online';
+  if (ms <= 200) return 'text-status-idle';
+  return 'text-txt-danger';
 }
 
 function lossColor(pct: number): string {
-  if (pct <= 1) return 'text-discord-green';
-  if (pct <= 5) return 'text-discord-yellow';
-  return 'text-discord-red';
+  if (pct <= 1) return 'text-status-online';
+  if (pct <= 5) return 'text-status-idle';
+  return 'text-txt-danger';
 }
 
 function jitterColor(ms: number): string {
-  if (ms <= 30) return 'text-discord-green';
-  if (ms <= 80) return 'text-discord-yellow';
-  return 'text-discord-red';
+  if (ms <= 30) return 'text-status-online';
+  if (ms <= 80) return 'text-status-idle';
+  return 'text-txt-danger';
 }
 
 function sourceLabel(source: string): string {
@@ -51,15 +51,15 @@ function trackLabel(direction: 'send' | 'recv', source: string, participantName:
 
 const Row = ({ label, value, colorClass }: { label: string; value: string; colorClass?: string }) => (
   <div className="flex items-center justify-between py-[3px]">
-    <span className="text-[12px] text-discord-text-muted">{label}</span>
-    <span className={`text-[12px] font-medium ${colorClass ?? 'text-discord-text-secondary'}`}>{value}</span>
+    <span className="text-[12px] text-txt-tertiary">{label}</span>
+    <span className={`text-[12px] font-medium ${colorClass ?? 'text-txt-secondary'}`}>{value}</span>
   </div>
 );
 
-const Divider = () => <div className="border-t border-[#2b2d31] my-1" />;
+const Divider = () => <div className="border-t border-border-soft my-1" />;
 
 const SectionHeader = ({ title }: { title: string }) => (
-  <div className="text-[10px] font-bold text-discord-text-muted uppercase tracking-wider pt-1 pb-[2px]">
+  <div className="text-[10px] font-bold text-txt-tertiary uppercase tracking-wider pt-1 pb-[2px]">
     {title}
   </div>
 );
@@ -68,10 +68,10 @@ function AudioTrackRow({ track }: { track: AudioTrackStat }) {
   const label = trackLabel(track.direction, track.source, track.participantName);
   return (
     <div className="flex items-center justify-between py-[3px]">
-      <span className="text-[12px] text-discord-text-muted truncate mr-2">{label}</span>
-      <span className="text-[12px] font-medium text-discord-text-secondary whitespace-nowrap">
+      <span className="text-[12px] text-txt-tertiary truncate mr-2">{label}</span>
+      <span className="text-[12px] font-medium text-txt-secondary whitespace-nowrap">
         {formatBitrate(track.bitrate)}
-        {track.codec && <span className="text-discord-text-muted ml-2">{track.codec}</span>}
+        {track.codec && <span className="text-txt-tertiary ml-2">{track.codec}</span>}
       </span>
     </div>
   );
@@ -84,19 +84,19 @@ function VideoTrackRow({ track }: { track: VideoTrackStat }) {
   return (
     <div className="py-[3px]">
       <div className="flex items-center justify-between">
-        <span className="text-[12px] text-discord-text-muted truncate mr-2">{label}</span>
-        <span className="text-[12px] font-medium text-discord-text-secondary whitespace-nowrap">
+        <span className="text-[12px] text-txt-tertiary truncate mr-2">{label}</span>
+        <span className="text-[12px] font-medium text-txt-secondary whitespace-nowrap">
           {formatBitrate(track.bitrate)}
-          {track.codec && <span className="text-discord-text-muted ml-2">{track.codec}</span>}
+          {track.codec && <span className="text-txt-tertiary ml-2">{track.codec}</span>}
         </span>
       </div>
       {(resolution || track.fps !== null || track.qualityLimitation || track.simulcastLayer) && (
         <div className="flex items-center justify-between pl-3">
-          <span className="text-[11px] text-discord-text-muted">
+          <span className="text-[11px] text-txt-tertiary">
             {resolution && `${resolution}`}
             {track.fps !== null && ` @${track.fps}`}
           </span>
-          <span className="text-[11px] text-discord-text-muted">
+          <span className="text-[11px] text-txt-tertiary">
             {track.direction === 'send' && track.qualityLimitation && track.qualityLimitation !== 'none'
               ? track.qualityLimitation
               : ''}
@@ -133,17 +133,17 @@ export function ConnectionInfoPopover({ open, onClose }: ConnectionInfoPopoverPr
   return (
     <div
       ref={popoverRef}
-      className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-[300px] bg-[#1e1f22] rounded-lg shadow-lg border border-[#111214] z-50 overflow-hidden"
+      className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-[300px] glass rounded-lg z-50 overflow-hidden"
     >
-      <div className="px-3 py-2 border-b border-[#111214]">
-        <span className="text-[14px] font-bold text-discord-text-primary">Connection Info</span>
+      <div className="px-3 py-2 border-b border-border-hard">
+        <span className="text-[14px] font-bold text-txt-primary">Connection Info</span>
       </div>
 
       <div className="px-3 py-2">
         {!room ? (
-          <div className="text-[12px] text-discord-text-muted py-2 text-center">Not connected</div>
+          <div className="text-[12px] text-txt-tertiary py-2 text-center">Not connected</div>
         ) : !stats ? (
-          <div className="text-[12px] text-discord-text-muted py-2 text-center">Gathering stats...</div>
+          <div className="text-[12px] text-txt-tertiary py-2 text-center">Gathering stats...</div>
         ) : (
           <>
             {/* Network */}
diff --git a/packages/web/src/components/voice/IncomingCallModal.tsx b/packages/web/src/components/voice/IncomingCallModal.tsx
index 981576f2..6a83d9d9 100644
--- a/packages/web/src/components/voice/IncomingCallModal.tsx
+++ b/packages/web/src/components/voice/IncomingCallModal.tsx
@@ -43,22 +43,22 @@ export function IncomingCallModal() {
       <div className="absolute inset-0 bg-black/60" />
 
       {/* Call card */}
-      <div className="relative bg-[#1e1f22] rounded-lg shadow-2xl w-[340px] overflow-hidden">
+      <div className="relative bg-surface-channel rounded-lg shadow-2xl w-[340px] overflow-hidden">
         {/* Ring animation background */}
         <div className="absolute inset-0 overflow-hidden">
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[200px] h-[200px] rounded-full bg-discord-green/5 animate-ping" style={{ animationDuration: '2s' }} />
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[150px] h-[150px] rounded-full bg-discord-green/10 animate-ping" style={{ animationDuration: '2s', animationDelay: '0.5s' }} />
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[200px] h-[200px] rounded-full bg-status-online/5 animate-ping" style={{ animationDuration: '2s' }} />
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[150px] h-[150px] rounded-full bg-status-online/10 animate-ping" style={{ animationDuration: '2s', animationDelay: '0.5s' }} />
         </div>
 
         {/* Content */}
         <div className="relative p-8 flex flex-col items-center gap-4">
           {/* Caller avatar */}
           <div className="relative">
-            <div className="w-20 h-20 rounded-full bg-discord-blurple flex items-center justify-center text-white text-3xl font-bold">
+            <div className="w-20 h-20 rounded-full bg-accent-primary flex items-center justify-center text-white text-3xl font-bold">
               {incomingCall.callerName.charAt(0).toUpperCase()}
             </div>
             {/* Ringing phone icon */}
-            <div className="absolute -bottom-1 -right-1 w-7 h-7 rounded-full bg-discord-green flex items-center justify-center">
+            <div className="absolute -bottom-1 -right-1 w-7 h-7 rounded-full bg-status-online flex items-center justify-center">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="white">
                 <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" />
               </svg>
@@ -67,8 +67,8 @@ export function IncomingCallModal() {
 
           {/* Caller info */}
           <div className="text-center">
-            <h3 className="text-[20px] font-bold text-discord-text-header">{incomingCall.callerName}</h3>
-            <p className="text-[14px] text-discord-text-muted mt-1">Incoming Voice Call...</p>
+            <h3 className="text-[20px] font-bold text-txt-primary">{incomingCall.callerName}</h3>
+            <p className="text-[14px] text-txt-tertiary mt-1">Incoming Voice Call...</p>
           </div>
 
           {/* Action buttons */}
@@ -76,7 +76,7 @@ export function IncomingCallModal() {
             {/* Decline */}
             <button
               onClick={handleDecline}
-              className="w-14 h-14 rounded-full bg-discord-red hover:bg-discord-red/80 flex items-center justify-center transition-colors group"
+              className="w-14 h-14 rounded-full bg-accent-rose hover:bg-accent-rose/80 flex items-center justify-center transition-colors group"
               title="Decline"
             >
               <svg width="28" height="28" viewBox="0 0 24 24" fill="white" className="group-hover:scale-110 transition-transform">
@@ -87,7 +87,7 @@ export function IncomingCallModal() {
             {/* Accept */}
             <button
               onClick={handleAccept}
-              className="w-14 h-14 rounded-full bg-discord-green hover:bg-discord-green/80 flex items-center justify-center transition-colors group"
+              className="w-14 h-14 rounded-full bg-status-online hover:bg-status-online/80 flex items-center justify-center transition-colors group"
               title="Accept"
             >
               <svg width="28" height="28" viewBox="0 0 24 24" fill="white" className="group-hover:scale-110 transition-transform">
diff --git a/packages/web/src/components/voice/PictureInPicture.tsx b/packages/web/src/components/voice/PictureInPicture.tsx
index 43955f58..d5433597 100644
--- a/packages/web/src/components/voice/PictureInPicture.tsx
+++ b/packages/web/src/components/voice/PictureInPicture.tsx
@@ -237,7 +237,7 @@ export function PictureInPicture() {
   return (
     <div
       ref={containerRef}
-      className={`fixed z-[40] overflow-hidden rounded-lg shadow-2xl ring-1 ring-white/10 bg-[#080a0b] select-none ${
+      className={`fixed z-[40] overflow-hidden rounded-lg shadow-2xl ring-1 ring-white/10 bg-surface-base select-none ${
         isDragging ? 'cursor-grabbing' : 'cursor-grab'
       }`}
       style={{
@@ -263,7 +263,7 @@ export function PictureInPicture() {
           style={{ imageRendering: 'auto' }}
         />
       ) : (
-        <div className="w-full h-full flex items-center justify-center bg-[#1e1f22]">
+        <div className="w-full h-full flex items-center justify-center bg-surface-channel">
           {displayParticipant ? (
             <div className="relative">
               <Avatar
@@ -271,11 +271,11 @@ export function PictureInPicture() {
                 size={64}
               />
               {speakingParticipantIds.has(displayParticipant.identity) && (
-                <div className="absolute -inset-1 rounded-full ring-2 ring-discord-green animate-pulse" />
+                <div className="absolute -inset-1 rounded-full ring-2 ring-status-online animate-pulse" />
               )}
             </div>
           ) : (
-            <div className="flex items-center gap-2 text-discord-text-muted">
+            <div className="flex items-center gap-2 text-txt-tertiary">
               <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                 <path d="M11 5L6 9H2V15H6L11 19V5ZM15.54 8.46C16.48 9.4 17 10.67 17 12S16.48 14.6 15.54 15.54L14.12 14.12C14.69 13.55 15 12.79 15 12S14.69 10.45 14.12 9.88L15.54 8.46Z" />
               </svg>
@@ -287,7 +287,7 @@ export function PictureInPicture() {
 
       {/* LIVE badge */}
       {isScreen && (
-        <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-discord-red rounded text-[11px] font-bold text-white uppercase tracking-wide">
+        <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-accent-rose rounded text-[11px] font-bold text-white uppercase tracking-wide">
           LIVE
         </div>
       )}
@@ -308,7 +308,7 @@ export function PictureInPicture() {
         <div className="flex items-center gap-1.5">
           <span className="text-white text-xs font-semibold truncate">{displayName}</span>
           {displayParticipant && speakingParticipantIds.has(displayParticipant.identity) && (
-            <div className="w-2 h-2 rounded-full bg-discord-green flex-shrink-0 animate-pulse" />
+            <div className="w-2 h-2 rounded-full bg-status-online flex-shrink-0 animate-pulse" />
           )}
         </div>
         <div className="text-white/50 text-[10px] truncate">{channelName}</div>
diff --git a/packages/web/src/components/voice/ScreenShareSettingsPopover.tsx b/packages/web/src/components/voice/ScreenShareSettingsPopover.tsx
index 0acaa92f..85efbbd1 100644
--- a/packages/web/src/components/voice/ScreenShareSettingsPopover.tsx
+++ b/packages/web/src/components/voice/ScreenShareSettingsPopover.tsx
@@ -101,22 +101,22 @@ export function ScreenShareSettingsPopover({ open, onClose }: ScreenShareSetting
   const result = buildScreenShareOptions(config);
 
   const pillBase = 'px-3 py-1.5 rounded-full text-[13px] font-medium transition-colors cursor-pointer select-none';
-  const pillSelected = 'bg-discord-blurple text-white';
-  const pillUnselected = 'bg-[#2b2d31] text-discord-text-secondary hover:bg-[#35373c]';
+  const pillSelected = 'bg-accent-primary text-white';
+  const pillUnselected = 'bg-surface-elevated text-txt-secondary hover:bg-interactive-hover';
 
   return (
     <div
       ref={popoverRef}
-      className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-[260px] bg-[#1e1f22] rounded-lg shadow-lg border border-[#111214] z-50 overflow-hidden"
+      className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-[260px] glass rounded-lg z-50 overflow-hidden"
     >
-      <div className="px-3 py-2 border-b border-[#111214]">
-        <span className="text-[14px] font-bold text-discord-text-primary">Stream Settings</span>
+      <div className="px-3 py-2 border-b border-border-hard">
+        <span className="text-[14px] font-bold text-txt-primary">Stream Settings</span>
       </div>
 
       <div className="px-3 py-3 flex flex-col gap-3">
         {/* Resolution */}
         <div>
-          <div className="text-[11px] text-discord-text-muted font-semibold uppercase tracking-wider mb-1.5">
+          <div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
             Resolution
           </div>
           <div className="flex gap-1.5">
@@ -134,7 +134,7 @@ export function ScreenShareSettingsPopover({ open, onClose }: ScreenShareSetting
 
         {/* Frame Rate */}
         <div>
-          <div className="text-[11px] text-discord-text-muted font-semibold uppercase tracking-wider mb-1.5">
+          <div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
             Frame Rate
           </div>
           <div className="flex gap-1.5">
@@ -152,7 +152,7 @@ export function ScreenShareSettingsPopover({ open, onClose }: ScreenShareSetting
 
         {/* Content Mode */}
         <div>
-          <div className="text-[11px] text-discord-text-muted font-semibold uppercase tracking-wider mb-1.5">
+          <div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
             Content Mode
           </div>
           <div className="flex gap-1.5">
@@ -171,13 +171,13 @@ export function ScreenShareSettingsPopover({ open, onClose }: ScreenShareSetting
         {/* Bitrate Override */}
         <div>
           <div className="flex items-center justify-between mb-1.5">
-            <div className="text-[11px] text-discord-text-muted font-semibold uppercase tracking-wider">
+            <div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider">
               Bitrate
             </div>
             {config.customBitrateKbps != null && (
               <button
                 onClick={() => setConfig({ customBitrateKbps: null })}
-                className="text-[11px] text-discord-blurple hover:text-[#7983f5] font-medium transition-colors"
+                className="text-[11px] text-accent-primary hover:text-accent-lavender font-medium transition-colors"
               >
                 Reset to Auto
               </button>
@@ -191,7 +191,7 @@ export function ScreenShareSettingsPopover({ open, onClose }: ScreenShareSetting
               step={BITRATE_STEP}
               value={config.customBitrateKbps ?? Math.round(result.publish.videoEncoding.maxBitrate / 1000)}
               onChange={(e) => setConfig({ customBitrateKbps: Number(e.target.value) })}
-              className="flex-1 h-1.5 accent-discord-blurple cursor-pointer appearance-none bg-[#4e5058] rounded-full
+              className="flex-1 h-1.5 accent-accent-primary cursor-pointer appearance-none bg-interactive-muted rounded-full
                 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5
                 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md
                 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-0
@@ -199,7 +199,7 @@ export function ScreenShareSettingsPopover({ open, onClose }: ScreenShareSetting
                 [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer"
             />
             <span className={`text-[12px] font-medium min-w-[64px] text-right ${
-              config.customBitrateKbps != null ? 'text-discord-text-primary' : 'text-discord-text-muted'
+              config.customBitrateKbps != null ? 'text-txt-primary' : 'text-txt-tertiary'
             }`}>
               {config.customBitrateKbps != null
                 ? formatKbps(config.customBitrateKbps)
@@ -210,8 +210,8 @@ export function ScreenShareSettingsPopover({ open, onClose }: ScreenShareSetting
       </div>
 
       {/* Footer — computed stats */}
-      <div className="px-3 py-2 border-t border-[#111214]">
-        <span className="text-[12px] text-discord-text-muted">
+      <div className="px-3 py-2 border-t border-border-hard">
+        <span className="text-[12px] text-txt-tertiary">
           {formatBitrate(result.publish.videoEncoding.maxBitrate)} · {formatDegradation(result.overdrive.degradationPreference)}
         </span>
       </div>
diff --git a/packages/web/src/components/voice/StreamTile.tsx b/packages/web/src/components/voice/StreamTile.tsx
index b4236887..2f2ba951 100644
--- a/packages/web/src/components/voice/StreamTile.tsx
+++ b/packages/web/src/components/voice/StreamTile.tsx
@@ -130,7 +130,7 @@ export function StreamTile({ tile, large }: StreamTileProps) {
 
   return (
     <div
-      className={`relative bg-[#111214] rounded-xl overflow-hidden flex items-center justify-center group transition-all duration-200 ring-1 ring-white/[0.06] hover:ring-white/10 ${
+      className={`relative bg-surface-base rounded-xl overflow-hidden flex items-center justify-center group transition-all duration-200 ring-1 ring-white/[0.06] hover:ring-white/10 ${
         large ? 'h-full w-full' : 'h-full aspect-video'
       }`}
       onContextMenu={handleContextMenu}
@@ -144,18 +144,18 @@ export function StreamTile({ tile, large }: StreamTileProps) {
           className="w-full h-full object-contain bg-black"
         />
       ) : (
-        <div className="w-full h-full flex flex-col items-center justify-center gap-3 bg-[#1e1f22]">
+        <div className="w-full h-full flex flex-col items-center justify-center gap-3 bg-surface-channel">
           <div className="relative">
             <Avatar src={null} name={participant.username} size={large ? 80 : 48} />
           </div>
           <div className="text-center px-4">
-            <p className="text-discord-text-primary text-sm font-semibold">
+            <p className="text-txt-primary text-sm font-semibold">
               {participant.username} is streaming
             </p>
             {!isLocal && (
               <button
                 onClick={handleWatch}
-                className="mt-2 px-4 py-1.5 bg-discord-blurple hover:bg-discord-blurple/80 rounded text-white text-xs font-semibold transition-colors"
+                className="mt-2 px-4 py-1.5 bg-accent-primary hover:bg-accent-primary/80 rounded text-white text-xs font-semibold transition-colors"
               >
                 Watch Stream
               </button>
@@ -165,7 +165,7 @@ export function StreamTile({ tile, large }: StreamTileProps) {
       )}
 
       {/* LIVE badge — top left */}
-      <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-discord-red rounded text-[11px] font-bold text-white uppercase tracking-wide">
+      <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-accent-rose rounded text-[11px] font-bold text-white uppercase tracking-wide">
         LIVE
       </div>
 
@@ -203,7 +203,7 @@ export function StreamTile({ tile, large }: StreamTileProps) {
       {/* Context Menu */}
       {contextMenu && (
         <div
-          className="fixed z-[60] bg-[#111214] rounded-lg shadow-2xl p-2 min-w-[220px] border border-white/[0.06]"
+          className="fixed z-[60] bg-surface-base rounded-lg shadow-2xl p-2 min-w-[220px] border border-white/[0.06]"
           style={{ left: contextMenu.x, top: contextMenu.y }}
           onClick={(e) => e.stopPropagation()}
         >
@@ -215,7 +215,7 @@ export function StreamTile({ tile, large }: StreamTileProps) {
                   handleStopStreaming();
                   setContextMenu(null);
                 }}
-                className="w-full flex items-center gap-2 px-3 py-2 text-discord-red hover:bg-discord-red/10 rounded text-sm transition-colors"
+                className="w-full flex items-center gap-2 px-3 py-2 text-txt-danger hover:bg-accent-rose/10 rounded text-sm transition-colors"
               >
                 <svg
                   width="16"
@@ -240,7 +240,7 @@ export function StreamTile({ tile, large }: StreamTileProps) {
                   handleChangeStream();
                   setContextMenu(null);
                 }}
-                className="w-full flex items-center gap-2 px-3 py-2 text-discord-text-secondary hover:bg-discord-modifier-hover rounded text-sm transition-colors"
+                className="w-full flex items-center gap-2 px-3 py-2 text-txt-secondary hover:bg-interactive-hover rounded text-sm transition-colors"
               >
                 <svg
                   width="16"
@@ -254,13 +254,13 @@ export function StreamTile({ tile, large }: StreamTileProps) {
               </button>
               <div className="border-t border-white/[0.06] my-1" />
               <div className="px-3 py-1">
-                <div className="text-xs text-discord-text-muted mb-1 font-medium uppercase tracking-wider">
+                <div className="text-xs text-txt-tertiary mb-1 font-medium uppercase tracking-wider">
                   Stream Quality
                 </div>
                 <div className="relative">
                   <button
                     onClick={() => setQualityPopoverOpen(!qualityPopoverOpen)}
-                    className="w-full flex items-center justify-between px-2 py-1.5 text-sm text-discord-text-secondary hover:bg-discord-modifier-hover rounded transition-colors"
+                    className="w-full flex items-center justify-between px-2 py-1.5 text-sm text-txt-secondary hover:bg-interactive-hover rounded transition-colors"
                   >
                     <span>{`${useVoiceStore.getState().screenShareConfig.height}p ${useVoiceStore.getState().screenShareConfig.fps}fps`}</span>
                     <svg
@@ -290,7 +290,7 @@ export function StreamTile({ tile, large }: StreamTileProps) {
                     handleUnwatch();
                     setContextMenu(null);
                   }}
-                  className="w-full flex items-center gap-2 px-3 py-2 text-discord-text-secondary hover:bg-discord-modifier-hover rounded text-sm transition-colors"
+                  className="w-full flex items-center gap-2 px-3 py-2 text-txt-secondary hover:bg-interactive-hover rounded text-sm transition-colors"
                 >
                   <svg
                     width="16"
@@ -308,7 +308,7 @@ export function StreamTile({ tile, large }: StreamTileProps) {
                     handleWatch();
                     setContextMenu(null);
                   }}
-                  className="w-full flex items-center gap-2 px-3 py-2 text-discord-text-secondary hover:bg-discord-modifier-hover rounded text-sm transition-colors"
+                  className="w-full flex items-center gap-2 px-3 py-2 text-txt-secondary hover:bg-interactive-hover rounded text-sm transition-colors"
                 >
                   <svg
                     width="16"
@@ -327,14 +327,14 @@ export function StreamTile({ tile, large }: StreamTileProps) {
                 onClick={() => {
                   setStreamMuteAction(userId, !isStreamMuted);
                 }}
-                className="w-full flex items-center justify-between px-3 py-2 text-discord-text-secondary hover:bg-discord-modifier-hover rounded text-sm transition-colors"
+                className="w-full flex items-center justify-between px-3 py-2 text-txt-secondary hover:bg-interactive-hover rounded text-sm transition-colors"
               >
                 <span>Mute Stream</span>
                 <div
                   className={`w-4 h-4 rounded border flex items-center justify-center transition-colors ${
                     isStreamMuted
-                      ? 'bg-discord-blurple border-discord-blurple'
-                      : 'border-discord-text-muted'
+                      ? 'bg-accent-primary border-accent-primary'
+                      : 'border-txt-tertiary'
                   }`}
                 >
                   {isStreamMuted && (
@@ -351,7 +351,7 @@ export function StreamTile({ tile, large }: StreamTileProps) {
               </button>
               {/* Stream Volume slider */}
               <div className="px-3 py-2">
-                <div className="text-xs text-discord-text-muted mb-2 font-medium uppercase tracking-wider">
+                <div className="text-xs text-txt-tertiary mb-2 font-medium uppercase tracking-wider">
                   Stream Volume
                 </div>
                 <div className="flex items-center gap-2">
@@ -360,7 +360,7 @@ export function StreamTile({ tile, large }: StreamTileProps) {
                     height="16"
                     viewBox="0 0 24 24"
                     fill="currentColor"
-                    className="text-discord-text-muted flex-shrink-0"
+                    className="text-txt-tertiary flex-shrink-0"
                   >
                     <path d="M3 9v6h4l5 5V4L7 9H3z" />
                   </svg>
@@ -372,9 +372,9 @@ export function StreamTile({ tile, large }: StreamTileProps) {
                     onChange={(e) =>
                       setStreamVolumeAction(userId, parseInt(e.target.value))
                     }
-                    className="flex-1 accent-discord-blurple h-1"
+                    className="flex-1 accent-accent-primary h-1"
                   />
-                  <span className="text-xs text-discord-text-secondary min-w-[32px] text-right">
+                  <span className="text-xs text-txt-secondary min-w-[32px] text-right">
                     {streamVolume}%
                   </span>
                 </div>
@@ -385,14 +385,14 @@ export function StreamTile({ tile, large }: StreamTileProps) {
                 onClick={() =>
                   setAttenuationEnabled(!streamAttenuationEnabled)
                 }
-                className="w-full flex items-center justify-between px-3 py-2 text-discord-text-secondary hover:bg-discord-modifier-hover rounded text-sm transition-colors"
+                className="w-full flex items-center justify-between px-3 py-2 text-txt-secondary hover:bg-interactive-hover rounded text-sm transition-colors"
               >
                 <span>Stream Attenuation</span>
                 <div
                   className={`w-4 h-4 rounded border flex items-center justify-center transition-colors ${
                     streamAttenuationEnabled
-                      ? 'bg-discord-blurple border-discord-blurple'
-                      : 'border-discord-text-muted'
+                      ? 'bg-accent-primary border-accent-primary'
+                      : 'border-txt-tertiary'
                   }`}
                 >
                   {streamAttenuationEnabled && (
@@ -410,7 +410,7 @@ export function StreamTile({ tile, large }: StreamTileProps) {
               {/* Attenuation Strength slider */}
               {streamAttenuationEnabled && (
                 <div className="px-3 py-2">
-                  <div className="text-xs text-discord-text-muted mb-2 font-medium uppercase tracking-wider">
+                  <div className="text-xs text-txt-tertiary mb-2 font-medium uppercase tracking-wider">
                     Attenuation Strength
                   </div>
                   <div className="flex items-center gap-2">
@@ -422,9 +422,9 @@ export function StreamTile({ tile, large }: StreamTileProps) {
                       onChange={(e) =>
                         setAttenuationStrength(parseInt(e.target.value))
                       }
-                      className="flex-1 accent-discord-blurple h-1"
+                      className="flex-1 accent-accent-primary h-1"
                     />
-                    <span className="text-xs text-discord-text-secondary min-w-[32px] text-right">
+                    <span className="text-xs text-txt-secondary min-w-[32px] text-right">
                       {streamAttenuationStrength}%
                     </span>
                   </div>
diff --git a/packages/web/src/components/voice/VoiceChannel.tsx b/packages/web/src/components/voice/VoiceChannel.tsx
index bbaf4b75..e66c9ba2 100644
--- a/packages/web/src/components/voice/VoiceChannel.tsx
+++ b/packages/web/src/components/voice/VoiceChannel.tsx
@@ -29,8 +29,8 @@ export function VoiceChannel({ channelId, channelName, onClick }: VoiceChannelPr
         onClick={onClick}
         className={`w-full flex items-center gap-1.5 px-2 h-8 rounded-[4px] group transition-colors ${
           isActive
-            ? 'bg-discord-modifier-selected text-white'
-            : 'text-discord-text-muted hover:text-discord-text-secondary hover:bg-discord-modifier-hover'
+            ? 'bg-interactive-selected text-white'
+            : 'text-txt-tertiary hover:text-txt-secondary hover:bg-interactive-hover'
         }`}
       >
         <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" className="flex-shrink-0 opacity-60">
@@ -61,36 +61,36 @@ export function VoiceChannel({ channelId, channelName, onClick }: VoiceChannelPr
             const isScreenSharing = participant?.isScreenSharing ?? wsStatus?.isScreenSharing ?? false;
 
             return (
-              <div key={userId} className="flex items-center gap-2 px-2 py-0.5 rounded hover:bg-discord-modifier-hover transition-colors">
+              <div key={userId} className="flex items-center gap-2 px-2 py-0.5 rounded hover:bg-interactive-hover transition-colors">
                 <Avatar
                   src={avatar}
                   name={displayName}
                   size={20}
                   status={status}
                 />
-                <span className="text-[13px] text-discord-text-secondary truncate flex-1 min-w-0">{displayName}</span>
+                <span className="text-[13px] text-txt-secondary truncate flex-1 min-w-0">{displayName}</span>
                 {/* Status badges */}
                 <div className="flex items-center gap-1 flex-shrink-0">
                   {isMuted && (
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-discord-red">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-txt-danger">
                       <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z" />
                       <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z" />
                       <line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
                     </svg>
                   )}
                   {isParticipantDeafened && (
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-discord-red">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-txt-danger">
                       <path d="M12 3c-4.97 0-9 4.03-9 9v7c0 1.1.9 2 2 2h2v-7H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-2v7h2c1.1 0 2-.9 2-2v-7c0-4.97-4.03-9-9-9z" />
                       <line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
                     </svg>
                   )}
                   {hasCamera && (
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-discord-text-muted">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary">
                       <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" />
                     </svg>
                   )}
                   {isScreenSharing && (
-                    <span className="bg-discord-red text-white text-[9px] font-bold px-1 rounded leading-[14px]">LIVE</span>
+                    <span className="bg-accent-rose text-white text-[9px] font-bold px-1 rounded leading-[14px]">LIVE</span>
                   )}
                 </div>
               </div>
diff --git a/packages/web/src/components/voice/VoiceChatPanel.tsx b/packages/web/src/components/voice/VoiceChatPanel.tsx
index 4d5e88ab..243b63f0 100644
--- a/packages/web/src/components/voice/VoiceChatPanel.tsx
+++ b/packages/web/src/components/voice/VoiceChatPanel.tsx
@@ -13,13 +13,13 @@ export function VoiceChatPanel({ channelId, channelName }: VoiceChatPanelProps)
   const toggleVoiceChat = useUIStore((s) => s.toggleVoiceChat);
 
   return (
-    <div className="w-[340px] flex-shrink-0 bg-discord-bg-primary flex flex-col border-l border-[#2b2d31]">
+    <div className="w-[340px] flex-shrink-0 bg-surface-chat flex flex-col border-l border-border-soft">
       {/* Chat header */}
       <div className="h-12 px-4 flex items-center justify-between shadow-header flex-shrink-0">
-        <span className="font-bold text-discord-text-primary text-[16px]">Chat</span>
+        <span className="font-bold text-txt-primary text-[16px]">Chat</span>
         <button
           onClick={toggleVoiceChat}
-          className="w-7 h-7 flex items-center justify-center text-discord-text-muted hover:text-discord-text-primary transition-colors rounded"
+          className="w-7 h-7 flex items-center justify-center text-txt-tertiary hover:text-txt-primary transition-colors rounded"
           title="Close Chat"
         >
           <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
diff --git a/packages/web/src/components/voice/VoiceControlBar.tsx b/packages/web/src/components/voice/VoiceControlBar.tsx
index f11394cd..fc6c56f5 100644
--- a/packages/web/src/components/voice/VoiceControlBar.tsx
+++ b/packages/web/src/components/voice/VoiceControlBar.tsx
@@ -7,9 +7,9 @@ import { ScreenShareSettingsPopover } from './ScreenShareSettingsPopover';
 import { CAMERA_PRESET, startScreenShare, stopScreenShare } from '../../utils/screenShare';
 
 const btnBase = 'w-10 h-10 flex items-center justify-center rounded-full transition-colors';
-const btnDefault = `${btnBase} bg-[#1e1f22] text-discord-text-secondary hover:bg-[#2b2d31] hover:text-discord-text-primary`;
+const btnDefault = `${btnBase} bg-surface-channel text-txt-secondary hover:bg-surface-elevated hover:text-txt-primary`;
 const btnActive = (color: string) => `${btnBase} bg-${color}/20 text-${color} hover:bg-${color}/30`;
-const btnGreen = `${btnBase} bg-[#1e1f22] text-discord-green hover:bg-[#2b2d31]`;
+const btnGreen = `${btnBase} bg-surface-channel text-status-online hover:bg-surface-elevated`;
 
 export function VoiceControlBar() {
   const isMuted = useVoiceStore((s) => s.isMuted);
@@ -141,12 +141,12 @@ export function VoiceControlBar() {
 
   return (
     <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-20 opacity-0 translate-y-4 group-hover/voice:opacity-100 group-hover/voice:translate-y-0 transition-all duration-300 ease-out">
-      <div className="flex items-center gap-1.5 rounded-full px-3 py-2 bg-[#111214]/90 backdrop-blur-md ring-1 ring-white/[0.06] shadow-[0_8px_32px_rgba(0,0,0,0.5)]">
+      <div className="flex items-center gap-1.5 rounded-full px-3 py-2 glass-bubble">
         {/* Mute */}
         <button
           onClick={handleMute}
           className={isMuted || isDeafened
-            ? `${btnBase} bg-discord-red/20 text-discord-red hover:bg-discord-red/30`
+            ? `${btnBase} bg-accent-rose/20 text-txt-danger hover:bg-accent-rose/30`
             : btnDefault
           }
           title={isMuted ? 'Unmute (M)' : 'Mute (M)'}
@@ -162,7 +162,7 @@ export function VoiceControlBar() {
         <button
           onClick={handleDeafen}
           className={isDeafened
-            ? `${btnBase} bg-discord-red/20 text-discord-red hover:bg-discord-red/30`
+            ? `${btnBase} bg-accent-rose/20 text-txt-danger hover:bg-accent-rose/30`
             : btnDefault
           }
           title={isDeafened ? 'Undeafen (D)' : 'Deafen (D)'}
@@ -208,7 +208,7 @@ export function VoiceControlBar() {
           <button
             onClick={() => setQualityOpen(!qualityOpen)}
             className={qualityOpen
-              ? `${btnBase} bg-[#1e1f22] text-discord-text-primary`
+              ? `${btnBase} bg-surface-channel text-txt-primary`
               : btnDefault
             }
             title="Video Quality"
@@ -227,7 +227,7 @@ export function VoiceControlBar() {
         <button
           onClick={toggleVoiceChat}
           className={voiceChatOpen
-            ? `${btnBase} bg-[#1e1f22] text-discord-text-primary`
+            ? `${btnBase} bg-surface-channel text-txt-primary`
             : btnDefault
           }
           title="Toggle Chat"
@@ -241,7 +241,7 @@ export function VoiceControlBar() {
         <button
           onClick={handleFullscreen}
           className={voiceFullscreen
-            ? `${btnBase} bg-[#1e1f22] text-discord-text-primary`
+            ? `${btnBase} bg-surface-channel text-txt-primary`
             : btnDefault
           }
           title={voiceFullscreen ? 'Exit Fullscreen (Esc)' : 'Fullscreen'}
@@ -263,7 +263,7 @@ export function VoiceControlBar() {
         {/* Disconnect */}
         <button
           onClick={handleDisconnect}
-          className={`${btnBase} bg-discord-red hover:bg-discord-red-hover text-white`}
+          className={`${btnBase} bg-accent-rose hover:bg-accent-rose/80 text-white`}
           title="Disconnect"
         >
           <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
diff --git a/packages/web/src/components/voice/VoiceGrid.tsx b/packages/web/src/components/voice/VoiceGrid.tsx
index c1a919a2..6c294368 100644
--- a/packages/web/src/components/voice/VoiceGrid.tsx
+++ b/packages/web/src/components/voice/VoiceGrid.tsx
@@ -50,11 +50,11 @@ export function VoiceGrid({ participants }: VoiceGridProps) {
             height="48"
             viewBox="0 0 24 24"
             fill="currentColor"
-            className="text-discord-text-muted/40 mx-auto mb-3"
+            className="text-txt-tertiary/40 mx-auto mb-3"
           >
             <path d="M11 5L6 9H2V15H6L11 19V5ZM15.54 8.46C16.48 9.4 17 10.67 17 12S16.48 14.6 15.54 15.54L14.12 14.12C14.69 13.55 15 12.79 15 12S14.69 10.45 14.12 9.88L15.54 8.46Z" />
           </svg>
-          <p className="text-discord-text-muted text-sm">
+          <p className="text-txt-tertiary text-sm">
             Waiting for others to join...
           </p>
         </div>
@@ -134,7 +134,7 @@ export function VoiceGrid({ participants }: VoiceGridProps) {
 
         {/* Bottom strip of other tiles */}
         {!stripHidden && otherTiles.length > 0 && (
-          <div className="h-[120px] flex-shrink-0 flex items-center justify-center gap-2 p-2 bg-[#111214]/50 overflow-x-auto no-scrollbar">
+          <div className="h-[120px] flex-shrink-0 flex items-center justify-center gap-2 p-2 bg-surface-base/50 overflow-x-auto no-scrollbar">
             {otherTiles.map((t) => (
               <div
                 key={t.key}
diff --git a/packages/web/src/components/voice/VoiceUser.tsx b/packages/web/src/components/voice/VoiceUser.tsx
index 85a25f34..f32618f8 100644
--- a/packages/web/src/components/voice/VoiceUser.tsx
+++ b/packages/web/src/components/voice/VoiceUser.tsx
@@ -73,9 +73,9 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {
 
   return (
     <div
-      className={`relative bg-[#111214] rounded-xl overflow-hidden flex items-center justify-center group transition-all duration-200 ${
+      className={`relative bg-surface-base rounded-xl overflow-hidden flex items-center justify-center group transition-all duration-200 ${
         isSpeaking
-          ? 'ring-[3px] ring-discord-green shadow-[0_0_12px_rgba(35,165,90,0.25)]'
+          ? 'ring-[3px] ring-status-online shadow-[0_0_12px_rgba(134,239,172,0.25)]'
           : 'ring-1 ring-white/[0.06] hover:ring-white/10'
       } ${large ? 'h-full w-full' : 'h-full aspect-video'}`}
       onContextMenu={handleContextMenu}
@@ -89,7 +89,7 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {
           className={`w-full h-full ${large ? 'object-contain bg-black' : 'object-cover'}`}
         />
       ) : (
-        <div className="w-full h-full flex flex-col items-center justify-center gap-3 bg-[#1e1f22]">
+        <div className="w-full h-full flex flex-col items-center justify-center gap-3 bg-surface-channel">
           <div className="relative">
             <Avatar
               src={null}
@@ -97,7 +97,7 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {
               size={large ? 100 : 64}
             />
             {isSpeaking && (
-              <div className="absolute -inset-1.5 rounded-full ring-[3px] ring-discord-green animate-pulse" />
+              <div className="absolute -inset-1.5 rounded-full ring-[3px] ring-status-online animate-pulse" />
             )}
           </div>
         </div>
@@ -119,7 +119,7 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {
           </div>
           <div className="flex items-center gap-1 flex-shrink-0">
             {participant.isMuted && (
-              <div className="w-5 h-5 bg-discord-red/90 rounded-full flex items-center justify-center">
+              <div className="w-5 h-5 bg-accent-rose/90 rounded-full flex items-center justify-center">
                 <svg width="12" height="12" viewBox="0 0 24 24" fill="white">
                   <path d="M12 2C10.9 2 10 2.9 10 4V12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12V4C14 2.9 13.1 2 12 2Z" />
                   <line
@@ -134,7 +134,7 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {
               </div>
             )}
             {(isLocal ? isDeafened : participant.isDeafened) && (
-              <div className="w-5 h-5 bg-discord-red/90 rounded-full flex items-center justify-center">
+              <div className="w-5 h-5 bg-accent-rose/90 rounded-full flex items-center justify-center">
                 <svg width="12" height="12" viewBox="0 0 24 24" fill="white">
                   <path d="M12 3c-4.97 0-9 4.03-9 9v7c0 1.1.9 2 2 2h2v-7H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-2v7h2c1.1 0 2-.9 2-2v-7c0-4.97-4.03-9-9-9z" />
                   <line
@@ -154,11 +154,11 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {
 
       {volumeMenu && !isLocal && (
         <div
-          className="fixed z-[60] bg-[#111214] rounded-lg shadow-2xl p-3 min-w-[200px] border border-white/[0.06]"
+          className="fixed z-[60] bg-surface-base rounded-lg shadow-2xl p-3 min-w-[200px] border border-white/[0.06]"
           style={{ left: volumeMenu.x, top: volumeMenu.y }}
           onClick={(e) => e.stopPropagation()}
         >
-          <div className="text-xs text-discord-text-muted mb-2 font-medium uppercase tracking-wider">
+          <div className="text-xs text-txt-tertiary mb-2 font-medium uppercase tracking-wider">
             User Volume
           </div>
           <div className="flex items-center gap-2">
@@ -167,7 +167,7 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {
               height="16"
               viewBox="0 0 24 24"
               fill="currentColor"
-              className="text-discord-text-muted flex-shrink-0"
+              className="text-txt-tertiary flex-shrink-0"
             >
               <path d="M3 9v6h4l5 5V4L7 9H3z" />
             </svg>
@@ -182,9 +182,9 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {
                   parseInt(e.target.value),
                 )
               }
-              className="flex-1 accent-discord-blurple h-1"
+              className="flex-1 accent-accent-primary h-1"
             />
-            <span className="text-xs text-discord-text-secondary min-w-[32px] text-right">
+            <span className="text-xs text-txt-secondary min-w-[32px] text-right">
               {perUserVolume}%
             </span>
           </div>