♻️(refactor) apply caption color customization to subtitles

Use captionFontColor and captionBackgroundColor in Transcription component.

src/frontend/src/features/subtitle/component/Subtitles.tsx

@@ -12,6 +12,8 @@ import { useSnapshot } from 'valtio'
 import {
   accessibilityStore,
   CAPTION_TEXT_SIZE_OPTIONS,
+  CAPTION_FONT_COLOR_VALUES,
+  CAPTION_BACKGROUND_COLOR_VALUES,
   type CaptionTextSize,
 } from '@/stores/accessibility'
 
@@ -92,10 +94,14 @@ const useTranscriptionState = () => {
 }
 
 const Transcription = ({ row }: { row: TranscriptionRow }) => {
-  const { captionTextSize } = useSnapshot(accessibilityStore)
+  const { captionTextSize, captionFontColor, captionBackgroundColor } =
+    useSnapshot(accessibilityStore)
   const participantColor = getParticipantColor(row.participant)
   const participantName = getParticipantName(row.participant)
   const { fontSize, lineHeight } = CAPTION_FONT_SIZES[captionTextSize]
+  const fontColor = CAPTION_FONT_COLOR_VALUES[captionFontColor]
+  const backgroundColor =
+    CAPTION_BACKGROUND_COLOR_VALUES[captionBackgroundColor]
 
   const getDisplayText = (row: TranscriptionRow): string => {
     return row.segments
@@ -128,9 +134,9 @@ const Transcription = ({ row }: { row: TranscriptionRow }) => {
         />
         <div
           className={css({
-            color: 'white',
             width: '100%',
           })}
+          style={{ color: fontColor }}
         >
           <Text variant="h3" margin={false}>
             {participantName}
@@ -138,8 +144,10 @@ const Transcription = ({ row }: { row: TranscriptionRow }) => {
           <p
             className={css({
               fontWeight: '400',
+              borderRadius: '4px',
+              padding: '0.125rem 0.25rem',
             })}
-            style={{ fontSize, lineHeight }}
+            style={{ fontSize, lineHeight, backgroundColor }}
           >
             {displayText}
           </p>