From 1b9af5bf6dfe594667db25776e3674cd44723532 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 6 Jun 2025 16:40:26 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8(frontend)=20replace=20hardcoded=20?=
 =?UTF-8?q?hex=20values=20with=20design=20tokens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Clean up fast-shipped features that broke design system by using proper
primary/semantic tokens instead of hardcoded colors. Enables better theme
customization for all implementations.
---
 src/frontend/panda.config.ts                   |  4 ++++
 src/frontend/src/components/FeedbackBanner.tsx |  4 ++--
 .../features/home/components/IntroSlider.tsx   |  4 ++--
 .../home/components/LaterMeetingDialog.tsx     | 14 ++++++++++----
 src/frontend/src/features/home/routes/Home.tsx |  2 +-
 .../notifications/components/Toast.tsx         |  2 +-
 .../components/ToastLowerHand.tsx              |  7 ++++---
 .../notifications/components/ToastRaised.tsx   |  7 ++++---
 .../WaitingParticipantNotification.tsx         | 18 +++++++++---------
 .../rooms/components/ActiveSpeaker.tsx         |  4 ++--
 .../features/rooms/components/InviteDialog.tsx | 14 ++++++++++----
 .../rooms/livekit/components/Admin.tsx         |  2 +-
 .../livekit/components/MutedMicIndicator.tsx   | 12 +++++++++---
 .../rooms/livekit/components/chat/Input.tsx    |  7 ++++---
 .../livekit/components/controls/ChatToggle.tsx |  5 +++--
 .../ParticipantsCollapsableList.tsx            |  8 +++++---
 .../controls/Participants/ParticipantsList.tsx |  2 +-
 .../effects/EffectsConfiguration.tsx           |  2 +-
 .../features/rooms/livekit/prefabs/Chat.tsx    |  7 ++++---
 19 files changed, 77 insertions(+), 48 deletions(-)

diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts
index ccf0d98b..e083b055 100644
--- a/src/frontend/panda.config.ts
+++ b/src/frontend/panda.config.ts
@@ -315,6 +315,10 @@ const config: Config = {
           'subtle-text': { value: '{colors.red.700}' },
           ...pandaPreset.theme.tokens.colors.red,
         },
+        alert: {
+          DEFAULT: { value: '{colors.blue.700}' },
+          notification: { value: '{colors.red.600}' },
+        },
         success: {
           DEFAULT: { value: '{colors.green.700}' },
           hover: { value: '{colors.green.800}' },
diff --git a/src/frontend/src/components/FeedbackBanner.tsx b/src/frontend/src/components/FeedbackBanner.tsx
index 15b581f7..ea27685a 100644
--- a/src/frontend/src/components/FeedbackBanner.tsx
+++ b/src/frontend/src/components/FeedbackBanner.tsx
@@ -14,8 +14,8 @@ export const FeedbackBanner = () => {
     <div
       className={css({
         width: '100%',
-        backgroundColor: '#E8EDFF',
-        color: '#0063CB',
+        backgroundColor: 'primary.50',
+        color: 'primary.600',
         display: { base: 'none', sm: 'flex' },
         justifyContent: 'center',
         padding: '0.5rem 0',
diff --git a/src/frontend/src/features/home/components/IntroSlider.tsx b/src/frontend/src/features/home/components/IntroSlider.tsx
index be2986b3..15e0f535 100644
--- a/src/frontend/src/features/home/components/IntroSlider.tsx
+++ b/src/frontend/src/features/home/components/IntroSlider.tsx
@@ -53,10 +53,10 @@ const Dot = styled('div', {
   variants: {
     selected: {
       true: {
-        backgroundColor: '#000091',
+        backgroundColor: 'primary.800',
       },
       false: {
-        backgroundColor: '#CACAFB',
+        backgroundColor: 'primary.300',
       },
     },
   },
diff --git a/src/frontend/src/features/home/components/LaterMeetingDialog.tsx b/src/frontend/src/features/home/components/LaterMeetingDialog.tsx
index 307bae31..e61b579b 100644
--- a/src/frontend/src/features/home/components/LaterMeetingDialog.tsx
+++ b/src/frontend/src/features/home/components/LaterMeetingDialog.tsx
@@ -4,6 +4,7 @@ import { getRouteUrl } from '@/navigation/getRouteUrl'
 import { Button, Dialog, type DialogProps, P, Text } from '@/primitives'
 import { HStack } from '@/styled-system/jsx'
 import { RiCheckLine, RiFileCopyLine, RiSpam2Fill } from '@remixicon/react'
+import { css } from '@/styled-system/css'
 
 // fixme - duplication with the InviteDialog
 export const LaterMeetingDialog = ({
@@ -76,14 +77,19 @@ export const LaterMeetingDialog = ({
       </Button>
       <HStack>
         <div
-          style={{
-            backgroundColor: '#d9e5ff',
+          className={css({
+            backgroundColor: 'primary.200',
             borderRadius: '50%',
             padding: '4px',
             marginTop: '1rem',
-          }}
+          })}
         >
-          <RiSpam2Fill size={22} style={{ fill: '#4c84fc' }} />
+          <RiSpam2Fill
+            size={22}
+            className={css({
+              fill: 'primary.500',
+            })}
+          />
         </div>
         <Text variant="sm" style={{ marginTop: '1rem' }}>
           {t('laterMeetingDialog.permissions')}
diff --git a/src/frontend/src/features/home/routes/Home.tsx b/src/frontend/src/features/home/routes/Home.tsx
index 861310bf..e7a7404f 100644
--- a/src/frontend/src/features/home/routes/Home.tsx
+++ b/src/frontend/src/features/home/routes/Home.tsx
@@ -111,7 +111,7 @@ const RightColumn = ({ children }: { children?: ReactNode }) => {
 const Separator = styled('div', {
   base: {
     borderBottom: '1px solid',
-    borderColor: '#747775',
+    borderColor: 'greyscale.500',
     marginTop: '2.5rem',
     maxWidth: '30rem',
     width: '100%',
diff --git a/src/frontend/src/features/notifications/components/Toast.tsx b/src/frontend/src/features/notifications/components/Toast.tsx
index 0ead5d19..3f5876eb 100644
--- a/src/frontend/src/features/notifications/components/Toast.tsx
+++ b/src/frontend/src/features/notifications/components/Toast.tsx
@@ -12,7 +12,7 @@ export const StyledToastContainer = styled('div', {
     margin: 0.5,
     boxShadow:
       'rgba(0, 0, 0, 0.5) 0px 4px 8px 0px, rgba(0, 0, 0, 0.3) 0px 6px 20px 4px',
-    backgroundColor: '#494c4f',
+    backgroundColor: 'greyscale.700',
     color: 'white',
     borderRadius: '8px',
     '&[data-entering]': { animation: 'fade 200ms' },
diff --git a/src/frontend/src/features/notifications/components/ToastLowerHand.tsx b/src/frontend/src/features/notifications/components/ToastLowerHand.tsx
index 45505fbc..4a3687a7 100644
--- a/src/frontend/src/features/notifications/components/ToastLowerHand.tsx
+++ b/src/frontend/src/features/notifications/components/ToastLowerHand.tsx
@@ -5,6 +5,7 @@ import { StyledToastContainer, ToastProps } from './Toast'
 import { HStack } from '@/styled-system/jsx'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/primitives'
+import { css } from '@/styled-system/css'
 
 export function ToastLowerHand({ state, ...props }: ToastProps) {
   const { t } = useTranslation('notifications', { keyPrefix: 'lowerHand' })
@@ -31,10 +32,10 @@ export function ToastLowerHand({ state, ...props }: ToastProps) {
         <Button
           size="sm"
           variant="text"
-          style={{
-            color: '#60a5fa',
+          className={css({
+            color: 'primary.300',
             marginLeft: '0.5rem',
-          }}
+          })}
           onPress={() => handleDismiss()}
         >
           {t('dismiss')}
diff --git a/src/frontend/src/features/notifications/components/ToastRaised.tsx b/src/frontend/src/features/notifications/components/ToastRaised.tsx
index 08e20489..7b78d0b6 100644
--- a/src/frontend/src/features/notifications/components/ToastRaised.tsx
+++ b/src/frontend/src/features/notifications/components/ToastRaised.tsx
@@ -7,6 +7,7 @@ import { Button, Div } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine, RiHand } from '@remixicon/react'
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
+import { css } from '@/styled-system/css'
 
 export function ToastRaised({ state, ...props }: ToastProps) {
   const { t } = useTranslation('notifications')
@@ -46,9 +47,9 @@ export function ToastRaised({ state, ...props }: ToastProps) {
           <Button
             size="sm"
             variant="text"
-            style={{
-              color: '#60a5fa',
-            }}
+            className={css({
+              color: 'primary.300',
+            })}
             onPress={(e) => {
               toggleParticipants()
               closeButtonProps.onPress?.(e)
diff --git a/src/frontend/src/features/notifications/components/WaitingParticipantNotification.tsx b/src/frontend/src/features/notifications/components/WaitingParticipantNotification.tsx
index 0e731d4e..bb4a1ec6 100644
--- a/src/frontend/src/features/notifications/components/WaitingParticipantNotification.tsx
+++ b/src/frontend/src/features/notifications/components/WaitingParticipantNotification.tsx
@@ -124,9 +124,9 @@ export const WaitingParticipantNotification = () => {
               <Button
                 size="sm"
                 variant="text"
-                style={{
-                  color: '#60a5fa',
-                }}
+                className={css({
+                  color: 'primary.300',
+                })}
                 onPress={async () => {
                   await handleParticipantEntry(waitingParticipants[0], true)
                   setShowQuickActionsMessage(false)
@@ -137,9 +137,9 @@ export const WaitingParticipantNotification = () => {
               <Button
                 size="sm"
                 variant="text"
-                style={{
-                  color: '#60a5fa',
-                }}
+                className={css({
+                  color: 'primary.300',
+                })}
                 onPress={() => {
                   toggleParticipants()
                   setShowQuickActionsMessage(false)
@@ -207,9 +207,9 @@ export const WaitingParticipantNotification = () => {
               <Button
                 size="sm"
                 variant="text"
-                style={{
-                  color: '#60a5fa',
-                }}
+                className={css({
+                  color: 'primary.300',
+                })}
                 onPress={() => {
                   toggleParticipants()
                 }}
diff --git a/src/frontend/src/features/rooms/components/ActiveSpeaker.tsx b/src/frontend/src/features/rooms/components/ActiveSpeaker.tsx
index db2d7baf..d681019f 100644
--- a/src/frontend/src/features/rooms/components/ActiveSpeaker.tsx
+++ b/src/frontend/src/features/rooms/components/ActiveSpeaker.tsx
@@ -19,8 +19,8 @@ const StyledContainer = styled('div', {
         width: '58px',
         borderLeftRadius: 8,
         borderRightRadius: 0,
-        backgroundColor: '#dbeafe',
-        border: '1px solid #3b82f6',
+        backgroundColor: 'primary.200',
+        border: '1px solid primary.500',
         gap: '3px',
       },
     },
diff --git a/src/frontend/src/features/rooms/components/InviteDialog.tsx b/src/frontend/src/features/rooms/components/InviteDialog.tsx
index 3cb83aa4..33a73ea2 100644
--- a/src/frontend/src/features/rooms/components/InviteDialog.tsx
+++ b/src/frontend/src/features/rooms/components/InviteDialog.tsx
@@ -11,6 +11,7 @@ import {
   RiSpam2Fill,
 } from '@remixicon/react'
 import { useEffect, useState } from 'react'
+import { css } from '@/styled-system/css'
 
 // fixme - extract in a proper primitive this dialog without overlay
 const StyledRACDialog = styled(Dialog, {
@@ -100,14 +101,19 @@ export const InviteDialog = ({
           </Button>
           <HStack>
             <div
-              style={{
-                backgroundColor: '#d9e5ff',
+              className={css({
+                backgroundColor: 'primary.200',
                 borderRadius: '50%',
                 padding: '4px',
                 marginTop: '1rem',
-              }}
+              })}
             >
-              <RiSpam2Fill size={22} style={{ fill: '#4c84fc' }} />
+              <RiSpam2Fill
+                size={22}
+                className={css({
+                  fill: 'primary.500',
+                })}
+              />
             </div>
             <Text variant="sm" style={{ marginTop: '1rem' }}>
               {t('shareDialog.permissions')}
diff --git a/src/frontend/src/features/rooms/livekit/components/Admin.tsx b/src/frontend/src/features/rooms/livekit/components/Admin.tsx
index c3d86dd9..744192e9 100644
--- a/src/frontend/src/features/rooms/livekit/components/Admin.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/Admin.tsx
@@ -52,7 +52,7 @@ export const Admin = () => {
           border: 'none',
           height: '1px',
           width: '100%',
-          background: '#dadce0',
+          background: 'greyscale.250',
         })}
       />
       <H
diff --git a/src/frontend/src/features/rooms/livekit/components/MutedMicIndicator.tsx b/src/frontend/src/features/rooms/livekit/components/MutedMicIndicator.tsx
index 16c9b062..338b263e 100644
--- a/src/frontend/src/features/rooms/livekit/components/MutedMicIndicator.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/MutedMicIndicator.tsx
@@ -1,8 +1,8 @@
 import { useTrackMutedIndicator } from '@livekit/components-react'
 import { Participant, Track } from 'livekit-client'
 import Source = Track.Source
-import { Div } from '@/primitives'
 import { RiMicOffFill } from '@remixicon/react'
+import { css } from '@/styled-system/css'
 
 export const MutedMicIndicator = ({
   participant,
@@ -19,8 +19,14 @@ export const MutedMicIndicator = ({
   }
 
   return (
-    <Div padding={0.25} backgroundColor="#E1000F" borderRadius="4px">
+    <div
+      className={css({
+        backgroundColor: 'red.600',
+        borderRadius: '4px',
+        padding: 0.25,
+      })}
+    >
       <RiMicOffFill size={16} color="white" />
-    </Div>
+    </div>
   )
 }
diff --git a/src/frontend/src/features/rooms/livekit/components/chat/Input.tsx b/src/frontend/src/features/rooms/livekit/components/chat/Input.tsx
index b04ca1c8..e6487bd6 100644
--- a/src/frontend/src/features/rooms/livekit/components/chat/Input.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/chat/Input.tsx
@@ -4,6 +4,7 @@ import { RiSendPlane2Fill } from '@remixicon/react'
 import { useState, useEffect } from 'react'
 import { RefObject } from 'react'
 import { useTranslation } from 'react-i18next'
+import { css } from '@/styled-system/css'
 
 const MAX_ROWS = 6
 
@@ -70,12 +71,12 @@ export const ChatInput = ({
 
   return (
     <HStack
-      style={{
+      className={css({
         margin: '0.75rem 0 1.5rem',
         padding: '0.5rem',
-        backgroundColor: '#f3f4f6',
+        backgroundColor: 'gray.100',
         borderRadius: 4,
-      }}
+      })}
     >
       <TextArea
         ref={inputRef}
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx
index d67e988d..37f8f360 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx
@@ -48,10 +48,11 @@ export const ChatToggle = ({
             right: '-.25rem',
             width: '1rem',
             height: '1rem',
-            backgroundColor: '#E1000F',
+            backgroundColor: 'alert.notification',
             borderRadius: '50%',
             zIndex: 1,
-            border: '2px solid #d1d5db',
+            border: '2px solid',
+            borderColor: 'greyscale.250',
           })}
         />
       )}
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsCollapsableList.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsCollapsableList.tsx
index 093559bf..8f835737 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsCollapsableList.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsCollapsableList.tsx
@@ -17,14 +17,15 @@ const ToggleHeader = styled(ToggleButton, {
     transition: 'background 200ms',
     borderTopRadius: '7px',
     '&[data-hovered]': {
-      backgroundColor: '#f5f5f5',
+      backgroundColor: 'greyscale.50',
     },
   },
 })
 
 const Container = styled('div', {
   base: {
-    border: '1px solid #dadce0',
+    border: '1px solid',
+    borderColor: 'greyscale.250',
     borderRadius: '8px',
     margin: '0 .625rem',
   },
@@ -32,7 +33,8 @@ const Container = styled('div', {
 
 const ListContainer = styled(VStack, {
   base: {
-    borderTop: '1px solid #dadce0',
+    borderTop: '1px solid',
+    borderTopColor: 'greyscale.250',
     alignItems: 'start',
     overflowY: 'scroll',
     overflowX: 'hidden',
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
index 61123fa7..7792e9b5 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
@@ -51,7 +51,7 @@ export const ParticipantsList = () => {
         className={css({
           fontSize: '0.875rem',
           fontWeight: 'bold',
-          color: '#5f6368',
+          color: 'greyscale.600',
           padding: '0 1.5rem',
           marginBottom: '0.83em',
         })}
diff --git a/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx b/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
index 1a82823a..e87ed39f 100644
--- a/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
@@ -230,7 +230,7 @@ export const EffectsConfiguration = ({
           layout === 'horizontal'
             ? {
                 md: {
-                  borderLeft: '1px solid #dadce0',
+                  borderLeft: '1px solid greyscale.250',
                   paddingLeft: '1.5rem',
                   width: '420px',
                   flexShrink: 0,
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/Chat.tsx b/src/frontend/src/features/rooms/livekit/prefabs/Chat.tsx
index 71f2ad20..d1483f93 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/Chat.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/Chat.tsx
@@ -14,6 +14,7 @@ import { ChatInput } from '../components/chat/Input'
 import { ChatEntry } from '../components/chat/Entry'
 import { useSidePanel } from '../hooks/useSidePanel'
 import { LocalParticipant, RemoteParticipant, RoomEvent } from 'livekit-client'
+import { css } from '@/styled-system/css'
 
 export interface ChatProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -122,12 +123,12 @@ export function Chat({ ...props }: ChatProps) {
     >
       <Text
         variant="sm"
-        style={{
+        className={css({
           padding: '0.75rem',
-          backgroundColor: '#f3f4f6',
+          backgroundColor: 'greyscale.50',
           borderRadius: 4,
           marginBottom: '0.75rem',
-        }}
+        })}
       >
         {t('disclaimer')}
       </Text>