fix(colors): Replaces legacy colors with ui-next colors (#5351)

* Update playwright screenshots and fix broken tests.

---------

Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>

extensions/cornerstone-dicom-seg/src/components/LogicalContourOperationsOptions.tsx

@@ -189,7 +189,7 @@ function LogicalContourOperationOptions() {
           </Tabs>
           <div>{t(operation.label)}</div>
         </div>
-        <div className="bg-primary-dark flex h-[62px] w-[88px] items-center justify-center rounded-lg">
+        <div className="bg-muted flex h-[62px] w-[88px] items-center justify-center rounded-lg">
           <Icons.ByName name={operation.helperIcon}></Icons.ByName>
         </div>
       </div>

extensions/cornerstone-dicom-sr/src/components/OHIFCornerstoneSRTextViewport.tsx

@@ -9,7 +9,7 @@ function OHIFCornerstoneSRTextViewport(props: withAppTypes) {
   const instance = displaySet.instances[0];
 
   return (
-    <div className="relative flex h-full w-full flex-col overflow-auto p-4 text-white">
+    <div className="text-foreground relative flex h-full w-full flex-col overflow-auto p-4">
       <div>
         {/* The root level is always a container */}
         <OHIFCornerstoneSRContainer container={instance} />

extensions/cornerstone-dynamic-volume/src/panels/DynamicDataPanel.tsx

@@ -5,7 +5,7 @@ function DynamicDataPanel({ servicesManager, commandsManager, tab }: withAppType
   return (
     <>
       <div
-        className="flex flex-col text-white"
+        className="text-foreground flex flex-col"
         data-cy={'dynamic-volume-panel'}
       >
         <PanelGenerateImage

extensions/cornerstone-dynamic-volume/src/panels/WorkflowPanel.tsx

@@ -10,7 +10,7 @@ function WorkflowPanel({ servicesManager }: { servicesManager: ServicesManager }
   return (
     <div
       data-cy={'workflow-panel'}
-      className="bg-secondary-dark mb-1 px-3 py-4"
+      className="bg-popover mb-1 px-3 py-4"
     >
       <div className="mb-1">Workflow</div>
       <div>

extensions/cornerstone/src/Viewport/Overlays/ViewportImageSliceLoadingIndicator.tsx

@@ -51,7 +51,7 @@ function ViewportImageSliceLoadingIndicator({ viewportData, element }) {
       <>
         <div className="absolute top-0 left-0 h-full w-full bg-black opacity-50">
           <div className="transparent flex h-full w-full items-center justify-center">
-            <p className="text-primary-light text-xl font-light">
+            <p className="text-highlight text-xl font-light">
               <h4>Error Loading Image</h4>
               <p>An error has occurred.</p>
               <p>{error}</p>
@@ -68,7 +68,7 @@ function ViewportImageSliceLoadingIndicator({ viewportData, element }) {
       // interacting with the mouse, since scrolling should propagate to the viewport underneath
       <div className="pointer-events-none absolute top-0 left-0 h-full w-full bg-black opacity-50">
         <div className="transparent flex h-full w-full items-center justify-center">
-          <p className="text-primary-light text-xl font-light">Loading...</p>
+          <p className="text-highlight text-xl font-light">Loading...</p>
         </div>
       </div>
     );

extensions/cornerstone/src/components/AccordionGroup/AccordionGroup.tsx

@@ -91,14 +91,14 @@ function DefaultAccordion(props) {
     return null;
   }
 
-  if (Boolean(asChild)) {
+  if (asChild) {
     return React.cloneElement(props.children, props);
   }
 
   return (
     <Accordion
       type={grouping.type || 'multiple'}
-      className="text-white"
+      className="text-foreground"
       defaultValue={defaultValue}
     >
       {[...groups.entries()].map(([key, group]) => {

extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx

@@ -276,7 +276,7 @@ function DicomUploadProgress({
 
   const getNumCompletedAndTimeRemainingComponent = (): ReactElement => {
     return (
-      <div className="bg-muted flex h-14 items-center px-1 pb-4 text-lg text-white">
+      <div className="bg-muted text-foreground flex h-14 items-center px-1 pb-4 text-lg">
         {numFilesCompleted === dicomFileUploaderArr.length ? (
           <>
             <span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>{`${dicomFileUploaderArr.length} ${

extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx

@@ -75,7 +75,7 @@ const DicomUploadProgressItem = memo(
         <div className="self-top flex w-0 shrink grow flex-col gap-1">
           <div className="flex gap-4">
             <div className="flex w-6 shrink-0 items-center justify-center">{getStatusIcon()}</div>
-            <div className="overflow-hidden text-ellipsis whitespace-nowrap text-white">
+            <div className="text-foreground overflow-hidden text-ellipsis whitespace-nowrap">
               {dicomFileUploader.getFileName()}
             </div>
           </div>

extensions/cornerstone/src/components/ModalityLoadBadge/ModalityLoadBadge.tsx

@@ -122,9 +122,9 @@ function ModalityLoadBadge({ viewportId }: { viewportId: string }) {
       return (
         <div
           data-cy={`ModalityLoadBadge-${viewportId}`}
-          className="flex h-6 cursor-default text-sm leading-6 text-white"
+          className="text-foreground flex h-6 cursor-default text-sm leading-6"
         >
-          <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
+          <div className="bg-popover flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
             <StatusIcon />
             <span className="ml-1">{statusInfo.type}</span>
           </div>

extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx

@@ -203,7 +203,7 @@ function ViewportOrientationMenu({
           <div className="flex-1 text-left">Acquisition</div>
         </Button>
         {/* Divider */}
-        <div className="mx-1 my-2 border-t border-white/20" />
+        <div className="border-input mx-1 my-2 border-t" />
         <Button
           variant="ghost"
           className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"

extensions/cornerstone/src/panels/PanelMeasurement.tsx

@@ -65,7 +65,7 @@ export default function PanelMeasurement(props): React.ReactNode {
     return EmptyComponent ? (
       <EmptyComponent items={displayMeasurements} />
     ) : (
-      <span className="text-white">No Measurements</span>
+      <span className="text-foreground">No Measurements</span>
     );
   }
 

extensions/default/src/Components/DataSourceConfigurationComponent.tsx

@@ -87,7 +87,7 @@ function DataSourceConfigurationComponent({
   }, [configurationAPI, configuredItems, showConfigurationModal]);
 
   return configuredItems ? (
-    <div className="text-aqua-pale flex items-center overflow-hidden">
+    <div className="text-muted-foreground flex items-center overflow-hidden">
       <Icons.Settings
         className="mr-2.5 h-3.5 w-3.5 shrink-0 cursor-pointer"
         onClick={showConfigurationModal}

extensions/default/src/Components/DataSourceConfigurationModalComponent.tsx

@@ -101,24 +101,24 @@ function DataSourceConfigurationModalComponent({
     itemIndex < selectedItems.length
       ? classNames(
           'bg-black/[.4]',
-          itemIndex !== itemLabels.length - 1 ? 'hover:bg-transparent active:bg-secondary-dark' : ''
+          itemIndex !== itemLabels.length - 1 ? 'hover:bg-transparent active:bg-popover' : ''
         )
       : 'bg-transparent';
 
   const getSelectedItemBorderClasses = itemIndex =>
     itemIndex === currentSelectedItemIndex + 1
-      ? classNames('border-2', 'border-solid', 'border-primary-light')
+      ? classNames('border-2', 'border-solid', 'border-highlight')
       : itemIndex < selectedItems.length
-        ? 'border border-solid border-primary-active hover:border-primary-light active:border-white'
-        : 'border border-dashed border-secondary-light';
+        ? 'border border-solid border-primary hover:border-highlight active:border-white'
+        : 'border border-dashed border-input';
 
   const getSelectedItemTextClasses = itemIndex =>
-    itemIndex <= selectedItems.length ? 'text-primary-light' : 'text-primary';
+    itemIndex <= selectedItems.length ? 'text-highlight' : 'text-primary';
 
   const getErrorComponent = (): ReactElement => {
     return (
       <div className="flex min-h-[1px] grow flex-col gap-4">
-        <div className="text-primary-light text-[20px]">
+        <div className="text-highlight text-[20px]">
           {t(`Error fetching ${itemLabels[selectedItems.length]} list`)}
         </div>
         <div className="grow bg-black p-4 text-[14px]">{errorMessage}</div>
@@ -159,7 +159,12 @@ function DataSourceConfigurationModalComponent({
                 <div className={classNames(NO_WRAP_ELLIPSIS_CLASS_NAMES)}>{t(itemLabel)}</div>
               </div>
               {itemLabelIndex < selectedItems.length ? (
-                <div className={classNames('text-[14px] text-white', NO_WRAP_ELLIPSIS_CLASS_NAMES)}>
+                <div
+                  className={classNames(
+                    'text-foreground text-[14px]',
+                    NO_WRAP_ELLIPSIS_CLASS_NAMES
+                  )}
+                >
                   {selectedItems[itemLabelIndex].name}
                 </div>
               ) : (

extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx

@@ -126,7 +126,7 @@ const DicomTagBrowser = ({
   return (
     <div className="dicom-tag-browser-content bg-muted">
       <div className="mb-6 flex flex-row items-start pl-1">
-        <div className="flex w-full flex-row items-start gap-4">
+        <div className="flex w-full flex-row items-start gap-6">
           <div className="flex w-1/3 flex-col">
             <span className="text-muted-foreground flex h-6 items-center pb-2 text-base">
               Series
@@ -167,7 +167,7 @@ const DicomTagBrowser = ({
                 min={1}
                 max={activeDisplaySet?.images?.length}
                 step={1}
-                className="pt-4"
+                className="pt-3"
               />
             </div>
           )}

extensions/default/src/DicomTagBrowser/DicomTagTable.tsx

@@ -39,7 +39,7 @@ const RowComponent = ({
     <div
       style={{ ...style, ...rowStyle }}
       className={classNames(
-        'hover:bg-secondary-main border-secondary-light text-foreground flex w-full flex-row items-center break-all bg-black text-base transition duration-300',
+        'hover:bg-primary/25 border-input text-foreground flex w-full flex-row items-center break-all bg-black text-base',
         lineHeightClassName
       )}
       key={keyPrefix}
@@ -74,15 +74,13 @@ const RowComponent = ({
 function ColumnHeaders({ tagRef, vrRef, keywordRef, valueRef }) {
   return (
     <div
-      className={classNames(
-        'bg-secondary-dark ohif-scrollbar flex w-full flex-row overflow-y-scroll'
-      )}
+      className={classNames('bg-popover ohif-scrollbar flex w-full flex-row overflow-y-scroll')}
       style={rowVerticalPaddingStyle}
     >
       <div className="w-4/24 px-3">
         <label
           ref={tagRef}
-          className="flex flex-1 select-none flex-col pl-1 text-lg text-white"
+          className="text-foreground flex flex-1 select-none flex-col pl-1 text-lg"
         >
           <span className="flex flex-row items-center focus:outline-none">Tag</span>
         </label>
@@ -90,7 +88,7 @@ function ColumnHeaders({ tagRef, vrRef, keywordRef, valueRef }) {
       <div className="w-2/24 px-3">
         <label
           ref={vrRef}
-          className="flex flex-1 select-none flex-col pl-1 text-lg text-white"
+          className="text-foreground flex flex-1 select-none flex-col pl-1 text-lg"
         >
           <span className="flex flex-row items-center focus:outline-none">VR</span>
         </label>
@@ -98,7 +96,7 @@ function ColumnHeaders({ tagRef, vrRef, keywordRef, valueRef }) {
       <div className="w-6/24 px-3">
         <label
           ref={keywordRef}
-          className="flex flex-1 select-none flex-col pl-1 text-lg text-white"
+          className="text-foreground flex flex-1 select-none flex-col pl-1 text-lg"
         >
           <span className="flex flex-row items-center focus:outline-none">Keyword</span>
         </label>
@@ -106,7 +104,7 @@ function ColumnHeaders({ tagRef, vrRef, keywordRef, valueRef }) {
       <div className="w-5/24 grow px-3">
         <label
           ref={valueRef}
-          className="flex flex-1 select-none flex-col pl-1 text-lg text-white"
+          className="text-foreground flex flex-1 select-none flex-col pl-1 text-lg"
         >
           <span className="flex flex-row items-center focus:outline-none">Value</span>
         </label>

extensions/default/src/Panels/DataSourceSelector.tsx

@@ -16,7 +16,7 @@ function DataSourceSelector() {
   return (
     <div style={{ width: '100%', height: '100%' }}>
       <div className="flex h-screen w-screen items-center justify-center">
-        <div className="bg-secondary-dark mx-auto space-y-2 rounded-lg py-8 px-8 drop-shadow-md">
+        <div className="bg-popover mx-auto space-y-2 rounded-lg py-8 px-8 drop-shadow-md">
           <img
             className="mx-auto block h-14"
             src="./ohif-logo.svg"
@@ -27,7 +27,7 @@ function DataSourceSelector() {
               .filter(it => it.sourceName !== 'dicomjson' && it.sourceName !== 'dicomlocal')
               .map(ds => (
                 <div key={ds.sourceName}>
-                  <h1 className="text-white">
+                  <h1 className="text-foreground">
                     {ds.configuration?.friendlyName || ds.friendlyName}
                   </h1>
                   <Button

extensions/default/src/Panels/StudyBrowser/PanelStudyBrowserHeader.tsx

@@ -45,7 +45,7 @@ function PanelStudyBrowserHeader({
                     key={index}
                     aria-label={viewPreset.id}
                     value={viewPreset.id}
-                    className="text-actions-primary"
+                    className="text-primary"
                   >
                     {React.createElement(Icons[viewPreset.iconName] || Icons.MissingIcon)}
                   </ToggleGroupItem>

extensions/default/src/ViewerLayout/HeaderPatientInfo/HeaderPatientInfo.tsx

@@ -40,7 +40,7 @@ function HeaderPatientInfo({ servicesManager, appConfig }: withAppTypes) {
 
   return (
     <div
-      className="hover:bg-primary-dark flex cursor-pointer items-center justify-center gap-1 rounded-lg"
+      className="hover:bg-muted flex cursor-pointer items-center justify-center gap-1 rounded-lg"
       onClick={handleOnClick}
     >
       {isMixedPatients ? (
@@ -51,10 +51,10 @@ function HeaderPatientInfo({ servicesManager, appConfig }: withAppTypes) {
       <div className="flex flex-col justify-center">
         {expanded ? (
           <>
-            <div className="self-start text-[13px] font-bold text-white">
+            <div className="text-foreground self-start text-[13px] font-bold">
               {formattedPatientName}
             </div>
-            <div className="text-aqua-pale flex gap-2 text-[11px]">
+            <div className="text-muted-foreground flex gap-2 text-[11px]">
               <div>{formattedPatientID}</div>
               <div>{patientInfo.PatientSex}</div>
               <div>{patientInfo.PatientDOB}</div>

extensions/default/src/ViewerLayout/ViewerHeader.tsx

@@ -100,7 +100,7 @@ function ViewerHeader({ appConfig }: withAppTypes<{ appConfig: AppTypes.Config }
         <div className="text-primary flex cursor-pointer items-center">
           <Button
             variant="ghost"
-            className="hover:bg-primary-dark"
+            className="hover:bg-muted"
             onClick={() => {
               commandsManager.run('undo');
             }}
@@ -109,7 +109,7 @@ function ViewerHeader({ appConfig }: withAppTypes<{ appConfig: AppTypes.Config }
           </Button>
           <Button
             variant="ghost"
-            className="hover:bg-primary-dark"
+            className="hover:bg-muted"
             onClick={() => {
               commandsManager.run('redo');
             }}

extensions/default/src/utils/Toolbox.tsx

@@ -113,7 +113,7 @@ export function Toolbox({ buttonSectionId, title }: ToolboxProps) {
           );
         })}
         {activeToolOptions && (
-          <div className="bg-primary-dark mt-1 h-auto px-2">
+          <div className="bg-muted mt-1 h-auto px-2">
             <ToolSettings options={activeToolOptions} />
           </div>
         )}

extensions/dicom-microscopy/src/components/ViewportOverlay/ViewportOverlay.css

@@ -5,13 +5,13 @@
   pointer-events: none !important;
 }
 
-.DicomMicroscopyViewer .text-primary-light {
+.DicomMicroscopyViewer .text-highlight {
   font-size: 14px;
   color: yellow;
   font-weight: normal;
 }
 
-.DicomMicroscopyViewer .text-primary-light span {
+.DicomMicroscopyViewer .text-highlight span {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

extensions/dicom-microscopy/src/components/ViewportOverlay/index.tsx

@@ -37,10 +37,10 @@ export const generateFromConfig = ({ config, overlayData, ...props }) => {
     bottomLeft?: OverlayItem[];
     bottomRight?: OverlayItem[];
   } = overlayData ?? {};
-  const topLeftClass = 'top-viewport left-viewport text-primary-light';
-  const topRightClass = 'top-viewport right-viewport-scrollbar text-primary-light';
-  const bottomRightClass = 'bottom-viewport right-viewport-scrollbar text-primary-light';
-  const bottomLeftClass = 'bottom-viewport left-viewport text-primary-light';
+  const topLeftClass = 'top-viewport left-viewport text-highlight';
+  const topRightClass = 'top-viewport right-viewport-scrollbar text-highlight';
+  const bottomRightClass = 'bottom-viewport right-viewport-scrollbar text-highlight';
+  const bottomLeftClass = 'bottom-viewport left-viewport text-highlight';
   const overlay = 'absolute pointer-events-none microscopy-viewport-overlay';
 
   return (

extensions/dicom-microscopy/src/index.tsx

@@ -137,8 +137,8 @@ const extension: Types.Extensions.Extension = {
           return {
             disabled: false,
             className: isPrimaryActive
-              ? '!text-black bg-primary-light'
-              : '!text-common-bright hover:!bg-primary-dark hover:!text-primary-light',
+              ? '!text-black bg-highlight'
+              : '!text-foreground/80 hover:!bg-muted hover:!text-highlight',
             // Todo: isActive right now is used for nested buttons where the primary
             // button needs to be fully rounded (vs partial rounded) when active
             // otherwise it does not have any other use

extensions/dicom-pdf/src/viewports/OHIFCornerstonePdfViewport.tsx

@@ -44,11 +44,13 @@ function OHIFCornerstonePdfViewport({ displaySets, viewportId = 'pdf-viewport' }
 
   return (
     <div
-      className="bg-primary-black h-full w-full text-white"
+      className="bg-primary-black text-foreground h-full w-full"
       onClick={makePdfScrollable}
       ref={el => {
         viewportElementRef.current = el;
-        if (el) viewportRef.register(el);
+        if (el) {
+          viewportRef.register(el);
+        }
       }}
       data-viewport-id={viewportId}
     >

extensions/tmtv/src/Panels/PanelPetSUV.tsx

@@ -167,7 +167,7 @@ export default function PanelPetSUV() {
           <PanelSection defaultOpen={true}>
             <PanelSection.Header>{t('Patient Information')}</PanelSection.Header>
             <PanelSection.Content>
-              <div className="bg-primary-dark flex flex-col gap-3 p-2">
+              <div className="bg-muted flex flex-col gap-3 p-2">
                 <InputRow>
                   <InputRow.Label>{t('Patient Sex')}</InputRow.Label>
                   <InputRow.Input

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/PanelROIThresholdExport.tsx

@@ -71,7 +71,7 @@ export default function PanelRoiThresholdSegmentation() {
   return (
     <div className="mb-1 flex flex-col">
       <div className="invisible-scrollbar overflow-y-auto overflow-x-hidden">
-        <div className="bg-secondary-dark flex items-baseline justify-between px-2 py-1">
+        <div className="bg-popover flex items-baseline justify-between px-2 py-1">
           <div className="py-1">
             <span className="text-muted-foreground text-base font-bold uppercase">{'TMTV: '}</span>
             <span className="text-foreground">{tmtvValue ? `${tmtvValue.toFixed(3)} mL` : ''}</span>
@@ -81,7 +81,6 @@ export default function PanelRoiThresholdSegmentation() {
               dataCY="exportTmtvCsvReport"
               size="sm"
               variant="ghost"
-              className="text-blue-500"
               onClick={handleExportCSV}
             >
               <span className="pl-1">CSV</span>

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/ROIThresholdConfiguration.tsx

@@ -36,7 +36,7 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
   };
 
   return (
-    <div className="bg-primary-dark flex flex-col space-y-4 p-px">
+    <div className="bg-muted flex flex-col space-y-4 p-px">
       <div className="flex items-end space-x-3">
         <div className="flex min-w-0 flex-1 flex-col">
           {/* The original panel design does not include "Strategy," but it was found in the code.

extensions/usAnnotation/src/panels/MultiLabelInput.tsx

@@ -94,11 +94,11 @@ const MultiLabelInput: React.FC<MultiLabelInputProps> = ({
         {internalLabels.map((label, index) => (
           <span
             key={index}
-            className="m-1 inline-flex items-center rounded-full bg-[#2a2a4a] px-4 py-1 text-white"
+            className="text-foreground m-1 inline-flex items-center rounded-full bg-[#2a2a4a] px-4 py-1"
           >
             {label}
             <button
-              className="ml-2.5 cursor-pointer rounded-full bg-blue-800 px-2 py-0.5 text-xs text-white transition-colors hover:bg-blue-600"
+              className="text-foreground ml-2.5 cursor-pointer rounded-full bg-blue-800 px-2 py-0.5 text-xs transition-colors hover:bg-blue-600"
               onClick={() => handleRemoveLabel(label)}
             >
               ×

extensions/usAnnotation/src/panels/USAnnotationPanel.tsx

@@ -155,7 +155,7 @@ export default function USAnnotationPanel() {
    * Render helpers so the JSX doesn’t become spaghetti.     */
   const renderWorkflowToggles = () => (
     <PanelSection.Content>
-      <div className="space-y-3 p-2 text-sm text-white">
+      <div className="text-foreground space-y-3 p-2 text-sm">
         <div className="flex items-center">
           <Switch
             id="depth-guide-switch"
@@ -260,15 +260,14 @@ export default function USAnnotationPanel() {
             id="show-overlay-switch"
             checked={showOverlay}
             onCheckedChange={() => setShowOverlayCommand(!showOverlay)}
-            className="data-[state=checked]:bg-blue-500"
           />
-          <label htmlFor="show-overlay-switch" className="cursor-pointer text-blue-300">
+          <label htmlFor="show-overlay-switch" className="text-muted-foreground cursor-pointer">
             {t('Show Overlay')}
           </label>
         </div>
 
         {/* Divider */}
-        <hr className="border-t border-gray-800" />
+        <hr className="border-input/50 border-t" />
       </div>
     </PanelSection.Content>
   );
@@ -297,11 +296,11 @@ export default function USAnnotationPanel() {
         <div className="w-full overflow-hidden">
           <table className="w-full border-collapse text-sm">
             <thead>
-              <tr className="border-b border-blue-900 text-blue-300">
+              <tr className="text-muted-foreground border-input/50 border-b">
                 <th></th>
-                <th className="py-2 px-3 text-left">{t('Frame')}</th>
-                <th className="py-2 px-3 text-center">{t('Pleura lines')}</th>
-                <th className="py-2 px-3 text-center">{t('B-lines')}</th>
+                <th className="py-2 px-2 text-left font-normal">{t('Frame')}</th>
+                <th className="py-2 px-2 text-center font-normal">{t('Pleura lines')}</th>
+                <th className="py-2 px-2 text-center font-normal">{t('B-lines')}</th>
                 <th className="w-10"></th>
               </tr>
             </thead>
@@ -309,23 +308,23 @@ export default function USAnnotationPanel() {
               {annotatedFrames.map(item => (
                 <tr
                   key={item.frame}
-                  className={`border-b border-blue-900 ${
+                  className={`border-input/50 border-b ${
                     item.frame === 5 ? 'bg-cyan-800 bg-opacity-30' : ''
                   }`}
                   onClick={() => handleRowClick(item)}
                   style={{ cursor: 'pointer' }}
                 >
-                  <td className="py-3 px-3">{item.index}</td>
-                  <td className="py-3 px-3">{item.frame + 1}</td>
-                  <td className="py-3 px-3 text-center">{item.pleura}</td>
-                  <td className="py-3 px-3 text-center">{item.bLine}</td>
-                  <td className="py-3 px-3 text-right">
+                  <td className="py-2 px-2">{item.index}</td>
+                  <td className="py-2 px-2">{item.frame + 1}</td>
+                  <td className="py-2 px-2 text-center">{item.pleura}</td>
+                  <td className="py-2 px-2 text-center">{item.bLine}</td>
+                  <td className="py-2 px-2 text-right">
                     {item.frame === 5 && (
                       <div className="flex items-center justify-end">
-                        <Button variant="ghost" className="p-0 text-blue-300">
+                        <Button variant="ghost" className="p-0">
                           <Icons.EyeVisible />
                         </Button>
-                        <Button variant="ghost" className="ml-2 p-0 text-blue-300">
+                        <Button variant="ghost" className="ml-2 p-0">
                           <Icons.More />
                         </Button>
                       </div>
@@ -396,7 +395,7 @@ export default function USAnnotationPanel() {
    *  🖼  Final Render                                      */
   return (
     <div
-      className="h-full bg-black text-white"
+      className="text-foreground h-full bg-black"
       style={{ minWidth: 240, maxWidth: 480, width: '100%' }}
     >
       {/* Workflow */}