🎨(frontend) replace hardcoded hex values with design tokens

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

@@ -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}' },

src/frontend/src/components/FeedbackBanner.tsx

@@ -14,8 +14,8 @@ export const FeedbackBanner = () => {
     <div
       className={css({
         width: '100%',
-        backgroundColor: '#E8EDFF',
+        backgroundColor: 'primary.50',
-        color: '#0063CB',
+        color: 'primary.600',
         display: { base: 'none', sm: 'flex' },
         justifyContent: 'center',
         padding: '0.5rem 0',

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',
       },
     },
   },

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={{
+          className={css({
-            backgroundColor: '#d9e5ff',
+            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')}

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%',

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' },

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={{
+          className={css({
-            color: '#60a5fa',
+            color: 'primary.300',
             marginLeft: '0.5rem',
-          }}
+          })}
           onPress={() => handleDismiss()}
         >
           {t('dismiss')}

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={{
+            className={css({
-              color: '#60a5fa',
+              color: 'primary.300',
-            }}
+            })}
             onPress={(e) => {
               toggleParticipants()
               closeButtonProps.onPress?.(e)

src/frontend/src/features/notifications/components/WaitingParticipantNotification.tsx

@@ -124,9 +124,9 @@ export const WaitingParticipantNotification = () => {
               <Button
                 size="sm"
                 variant="text"
-                style={{
+                className={css({
-                  color: '#60a5fa',
+                  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={{
+                className={css({
-                  color: '#60a5fa',
+                  color: 'primary.300',
-                }}
+                })}
                 onPress={() => {
                   toggleParticipants()
                   setShowQuickActionsMessage(false)
@@ -207,9 +207,9 @@ export const WaitingParticipantNotification = () => {
               <Button
                 size="sm"
                 variant="text"
-                style={{
+                className={css({
-                  color: '#60a5fa',
+                  color: 'primary.300',
-                }}
+                })}
                 onPress={() => {
                   toggleParticipants()
                 }}

src/frontend/src/features/rooms/components/ActiveSpeaker.tsx

@@ -19,8 +19,8 @@ const StyledContainer = styled('div', {
         width: '58px',
         borderLeftRadius: 8,
         borderRightRadius: 0,
-        backgroundColor: '#dbeafe',
+        backgroundColor: 'primary.200',
-        border: '1px solid #3b82f6',
+        border: '1px solid primary.500',
         gap: '3px',
       },
     },

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={{
+              className={css({
-                backgroundColor: '#d9e5ff',
+                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')}

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

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>
   )
 }

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}

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',
           })}
         />
       )}

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',

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',
         })}

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,

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>