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>

platform/app/src/routes/Debug.tsx

@@ -7,7 +7,7 @@ function Debug() {
   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"
@@ -17,7 +17,7 @@ function Debug() {
             <div className="flex flex-col items-center justify-center">
               <p className="text-primary mt-4 text-xl font-semibold">Debug Information</p>
               <div className="mt-4 flex items-center space-x-2">
-                <p className="text-md text-white">Cross Origin Isolated (COOP/COEP)</p>
+                <p className="text-md text-foreground">Cross Origin Isolated (COOP/COEP)</p>
                 <Icons.ByName
                   name={
                     window.crossOriginIsolated ? 'notifications-success' : 'notifications-error'

platform/app/src/routes/index.tsx

@@ -19,7 +19,7 @@ const NotFoundServer = ({
   message = 'Unable to query for studies at this time. Check your data source configuration or network connection',
 }) => {
   return (
-    <div className="absolute flex h-full w-full items-center justify-center text-white">
+    <div className="text-foreground absolute flex h-full w-full items-center justify-center">
       <div>
         <h4>{message}</h4>
       </div>
@@ -36,7 +36,7 @@ const NotFoundStudy = () => {
   const { showStudyList } = appConfig;
 
   return (
-    <div className="absolute flex h-full w-full items-center justify-center text-white">
+    <div className="text-foreground absolute flex h-full w-full items-center justify-center">
       <div>
         <h4 data-cy="study-not-found-message">
           One or more of the requested studies are not available at this time.
@@ -48,7 +48,7 @@ const NotFoundStudy = () => {
           >
             Return to the{' '}
             <Link
-              className="text-primary-light"
+              className="text-highlight"
               to="/"
             >
               study list

platform/ui-next/src/assets/styles.css

@@ -26,12 +26,12 @@
 
 .ohif-scrollbar::-webkit-scrollbar-thumb {
   @apply rounded;
-  @apply bg-secondary-dark;
+  @apply bg-popover;
   background-color: #041c4a;
 }
 
 .ohif-scrollbar::-webkit-scrollbar-thumb:window-inactive {
-  @apply bg-secondary-dark;
+  @apply bg-popover;
   background-color: #041c4a;
 }
 

platform/ui-next/src/components/Button/Button.tsx

@@ -9,11 +9,11 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary/60 text-primary-foreground hover:bg-primary/100',
+        default: 'bg-primary/85 text-primary-foreground hover:bg-primary/100',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
           'border border-primary/25 bg-background hover:bg-primary/25 text-primary hover:text-primary',
-        secondary: 'bg-primary/40 text-secondary-foreground hover:bg-primary/60',
+        secondary: 'bg-secondary/85 text-secondary-foreground hover:bg-secondary/100',
         ghost: 'font-normal text-primary hover:bg-primary/25',
         link: 'font-normal text-primary underline-offset-4 hover:underline',
       },

platform/ui-next/src/components/DataRow/DataRow.tsx

@@ -501,7 +501,7 @@ const StatusError: React.FC<{ tooltip?: string }> = ({ tooltip }) => (
 const StatusInfo: React.FC<{ tooltip?: string }> = ({ tooltip }) => (
   <StatusIndicator
     tooltip={tooltip}
-    icon={<Icons.Info className="h-4 w-4 text-blue-500" />}
+    icon={<Icons.Info className="text-primary h-4 w-4" />}
     defaultTooltip="Info"
   />
 );

platform/ui-next/src/components/DateRange/DateRange.tsx

@@ -83,7 +83,7 @@ export function DatePickerWithRange({
       <Popover.Popover>
         <Popover.PopoverTrigger asChild>
           <div className="relative w-full">
-            <CalendarIcon className="absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 transform text-white" />
+            <CalendarIcon className="text-foreground absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 transform" />
             <input
               id={`${id}-start`}
               type="text"
@@ -92,7 +92,7 @@ export function DatePickerWithRange({
               value={start}
               onChange={e => handleInputChange(e, 'start')}
               className={cn(
-                'border-inputfield-main focus:border-inputfield-focus h-[32px] w-full justify-start rounded border bg-black py-[6.5px] pl-[6.5px] pr-[6.5px] text-left text-base font-normal hover:bg-black hover:text-white',
+                'border-inputfield-main focus:border-inputfield-focus hover:text-foreground h-[32px] w-full justify-start rounded border bg-black py-[6.5px] pl-[6.5px] pr-[6.5px] text-left text-base font-normal hover:bg-black',
                 !start && 'text-muted-foreground'
               )}
               data-cy="input-date-range-start"
@@ -120,7 +120,7 @@ export function DatePickerWithRange({
       >
         <Popover.PopoverTrigger asChild>
           <div className="relative w-full">
-            <CalendarIcon className="absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 transform text-white" />
+            <CalendarIcon className="text-foreground absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 transform" />
             <input
               id={`${id}-end`}
               type="text"
@@ -129,7 +129,7 @@ export function DatePickerWithRange({
               value={end}
               onChange={e => handleInputChange(e, 'end')}
               className={cn(
-                'border-inputfield-main focus:border-inputfield-focus h-full w-full justify-start rounded border bg-black py-[6.5px] pl-[6.5px] pr-[6.5px] text-left text-base font-normal hover:bg-black hover:text-white',
+                'border-inputfield-main focus:border-inputfield-focus hover:text-foreground h-full w-full justify-start rounded border bg-black py-[6.5px] pl-[6.5px] pr-[6.5px] text-left text-base font-normal hover:bg-black',
                 !end && 'text-muted-foreground'
               )}
               data-cy="input-date-range-end"

platform/ui-next/src/components/Dialog/Dialog.tsx

@@ -162,7 +162,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn('text-primary-light text-xl font-normal leading-none tracking-tight', className)}
+    className={cn('text-highlight text-xl font-normal leading-none tracking-tight', className)}
     {...props}
   />
 ));

platform/ui-next/src/components/DisplaySetMessageListTooltip/DisplaySetMessageListTooltip.tsx

@@ -23,9 +23,9 @@ const DisplaySetMessageListTooltip = ({ messages, id }): React.ReactNode => {
             />
           </TooltipTrigger>
           <TooltipContent side="right">
-            <div className="max-w-68 text-left text-lg text-white">
+            <div className="max-w-68 text-foreground text-left text-base">
               <div
-                className="break-normal text-lg font-semibold text-blue-300"
+                className="text-muted-foreground break-normal text-base font-semibold"
                 style={{
                   marginLeft: '4px',
                   marginTop: '4px',

platform/ui-next/src/components/Header/Header.tsx

@@ -82,16 +82,16 @@ function Header({
           </div>
           <div className="absolute right-0 top-1/2 flex -translate-y-1/2 select-none items-center">
             {UndoRedo}
-            <div className="border-primary-dark mx-1.5 h-[25px] border-r"></div>
+            <div className="border-muted mx-1.5 h-[25px] border-r"></div>
             {PatientInfo}
-            <div className="border-primary-dark mx-1.5 h-[25px] border-r"></div>
+            <div className="border-muted mx-1.5 h-[25px] border-r"></div>
             <div className="flex-shrink-0">
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
                     variant="ghost"
                     size="icon"
-                    className="text-primary hover:bg-primary-dark mt-2 h-full w-full"
+                    className="text-primary hover:bg-muted mt-2 h-full w-full"
                   >
                     <Icons.GearSettings />
                   </Button>

platform/ui-next/src/components/InvestigationalUseDialog/InvestigationalUseDialog.tsx

@@ -65,17 +65,17 @@ const InvestigationalUseDialog = ({
 
   return (
     <div className="fixed bottom-2 z-50 flex h-[86px] w-full justify-center">
-      <div className="bg-secondary-dark border-primary-dark flex w-[90%] items-center justify-between rounded-lg border-2 pl-[22px] pr-[22px] pt-[10px] pb-[10px] shadow-lg">
+      <div className="bg-popover border-muted flex w-[90%] items-center justify-between rounded-lg border-2 pl-[22px] pr-[22px] pt-[10px] pb-[10px] shadow-lg">
         <div className="flex items-center gap-4">
           <Icons.InvestigationalUse className="h-18 w-18" />
           <div className="flex flex-col">
-            <div className="text-[19px] text-white">
+            <div className="text-foreground text-[19px]">
               OHIF Viewer is{' '}
-              <span className="text-primary-light">{t('for investigational use only')}</span>
+              <span className="text-highlight">{t('for investigational use only')}</span>
             </div>
-            <div className="text-[13px] text-white">
+            <div className="text-foreground text-[13px]">
               <span
-                className="text-primary-active cursor-pointer"
+                className="text-primary cursor-pointer"
                 onClick={() => window.open('https://ohif.org/', '_blank')}
               >
                 {t('Learn more about OHIF Viewer')}
@@ -85,7 +85,6 @@ const InvestigationalUseDialog = ({
         </div>
         <Button
           onClick={handleConfirmAndHide}
-          className="bg-primary-main"
           dataCY="confirm-and-hide-button"
         >
           {t('Confirm and hide')}

platform/ui-next/src/components/LayoutSelector/LayoutSelector.tsx

@@ -131,7 +131,7 @@ const Trigger = ({
       className={cn(
         'inline-flex h-10 w-10 items-center justify-center !rounded-lg',
         disabled
-          ? 'text-common-bright hover:bg-primary-dark hover:text-primary-light cursor-not-allowed opacity-40'
+          ? 'text-foreground/80 hover:bg-muted hover:text-highlight cursor-not-allowed opacity-40'
           : isOpen
             ? 'bg-background text-foreground/80'
             : 'text-foreground/80 hover:bg-background hover:text-highlight bg-transparent',
@@ -320,7 +320,7 @@ const GridSelector = ({ rows = 3, columns = 4, className }: GridSelectorProps) =
       {Array.from(Array(rows * columns).keys()).map(index => (
         <div
           key={index}
-          className={cn('cursor-pointer', isHovered(index) ? 'bg-primary-active' : 'bg-[#04225b]')}
+          className={cn('cursor-pointer', isHovered(index) ? 'bg-primary' : 'bg-[#04225b]')}
           data-cy={`Layout-${index % columns}-${Math.floor(index / columns)}`}
           onClick={() => handleSelection(index)}
           onMouseEnter={() => setHoveredIndex(index)}

platform/ui-next/src/components/LineChart/LineChart.tsx

@@ -84,7 +84,7 @@ const LineChart = ({
   return (
     <div
       className={classnames(
-        'LineChart text-white',
+        'LineChart text-foreground',
         {
           [`w-[${widthProp}px]`]: !!widthProp,
           [`h-[${heightProp}px]`]: !!heightProp,

platform/ui-next/src/components/LoadingIndicatorProgress/LoadingIndicatorProgress.tsx

@@ -17,7 +17,7 @@ function LoadingIndicatorProgress({ className, textBlock, progress }) {
         className
       )}
     >
-      <Icons.LoadingOHIFMark className="h-12 w-12 text-white" />
+      <Icons.LoadingOHIFMark className="text-foreground h-12 w-12" />
       <div className="w-48">
         <ProgressLoadingBar progress={progress} />
       </div>

platform/ui-next/src/components/LoadingIndicatorTotalPercent/LoadingIndicatorTotalPercent.tsx

@@ -28,11 +28,11 @@ function LoadingIndicatorTotalPercent({
 
   const textBlock =
     !totalNumbers && percentComplete === null ? (
-      <div className="text-sm text-white">{loadingText}</div>
+      <div className="text-foreground text-sm">{loadingText}</div>
     ) : !totalNumbers && percentComplete !== null ? (
-      <div className="text-sm text-white">Loaded {percentComplete}%</div>
+      <div className="text-foreground text-sm">Loaded {percentComplete}%</div>
     ) : (
-      <div className="text-sm text-white">
+      <div className="text-foreground text-sm">
         Loaded {numTargetsLoadedText} of {totalNumbersText} {targetText}
       </div>
     );

platform/ui-next/src/components/MeasurementTable/MeasurementTable.tsx

@@ -40,7 +40,7 @@ const MeasurementTable = ({
       <PanelSection defaultOpen={true}>
         <PanelSection.Header
           key="measurementTableHeader"
-          className="bg-secondary-dark"
+          className="bg-popover"
         >
           <span>{`${t(title)} (${amount})`}</span>
         </PanelSection.Header>
@@ -59,7 +59,7 @@ const Body = () => {
 
   if (!data || data.length === 0) {
     return (
-      <div className="text-primary-light mb-1 flex flex-1 items-center px-2 py-2 text-base">
+      <div className="text-highlight mb-1 flex flex-1 items-center px-2 py-2 text-base">
         {useTranslation('MeasurementTable').t('No tracked measurements')}
       </div>
     );
@@ -125,9 +125,7 @@ const Row = ({ item, index }: RowProps) => {
       isVisible={item.isVisible}
       isLocked={item.isLocked}
     >
-      {item.isUnmapped && (
-        <DataRow.Status.Warning tooltip={item.statusTooltip} />
-      )}
+      {item.isUnmapped && <DataRow.Status.Warning tooltip={item.statusTooltip} />}
     </DataRow>
   );
 };

platform/ui-next/src/components/NavBar/NavBar.tsx

@@ -17,7 +17,7 @@ const NavBar = ({
   return (
     <div
       className={classnames(
-        'bg-secondary-dark z-20 border-black px-1',
+        'bg-popover z-20 border-black px-1',
         isSticky && stickyClasses,
         !isSticky && notStickyClasses,
         className

platform/ui-next/src/components/OHIFDialogs/PresetDialog.tsx

@@ -26,7 +26,7 @@ function PresetBody({ children, className }: PresetBodyProps) {
     <div
       className={cn(
         // Adjust these classes for your desired look
-        'flex min-h-0 flex-1 flex-col rounded-md border border-white/10 bg-black p-2',
+        'border-foreground/10 flex min-h-0 flex-1 flex-col rounded-md border bg-black p-2',
         className
       )}
     >

platform/ui-next/src/components/OHIFPanels/WindowLevel.tsx

@@ -138,7 +138,7 @@ const WindowLevel = ({
         {showOpacitySlider && (
           <div className="mt-2">
             <div className="flex items-center justify-between gap-2 text-base">
-              <div className="text-xs text-white">Opacity</div>
+              <div className="text-foreground text-xs">Opacity</div>
               <div className="flex-1">
                 <Numeric.Container
                   mode="singleRange"

platform/ui-next/src/components/OHIFToolbox/ToolboxUI.tsx

@@ -78,7 +78,7 @@ function ToolboxUI(props: ToolboxProps) {
             })}
           </div>
         </div>
-        <div className="bg-primary-dark h-auto px-2">
+        <div className="bg-muted h-auto px-2">
           {activeToolOptions && <ToolSettings options={activeToolOptions} />}
         </div>
       </>

platform/ui-next/src/components/Onboarding/Onboarding.css

@@ -23,7 +23,7 @@
 }
 
 .shepherd-button {
-  @apply !inline-flex !h-[36px] !min-w-[62px] !flex-row !items-center !justify-center !gap-[5px] !whitespace-nowrap !rounded !bg-[#348cfd] !px-[10px] !text-center !font-sans !text-[14px] !leading-[1.2] !text-white !outline-none !transition !duration-300 !ease-in-out focus:!outline-none;
+  @apply !text-foreground !inline-flex !h-[36px] !min-w-[62px] !flex-row !items-center !justify-center !gap-[5px] !whitespace-nowrap !rounded !bg-[#348cfd] !px-[10px] !text-center !font-sans !text-[14px] !leading-[1.2] !outline-none !transition !duration-300 !ease-in-out focus:!outline-none;
 }
 
 .shepherd-button.shepherd-button-secondary {

platform/ui-next/src/components/PanelSection/PanelSection.tsx

@@ -50,7 +50,7 @@ export const PanelSection: React.FC<PanelSectionProps> & {
 PanelSection.Header = ({ children, className }) => (
   <AccordionTrigger
     className={cn(
-      'bg-secondary-dark hover:bg-accent text-aqua-pale',
+      'bg-popover hover:bg-accent text-muted-foreground',
       'my-0.5 flex h-7 w-full items-center justify-between rounded py-2 pr-1 pl-2.5 text-[13px]',
       className
     )}

platform/ui-next/src/components/ProgressDropdown/ProgressDiscreteBar.tsx

@@ -11,8 +11,8 @@ const ProgressDiscreteBar = ({ options }: { options: ProgressDropdownOption[] })
           key={i}
           className={classnames('mr-1 h-1 grow first:rounded-l-sm last:mr-0 last:rounded-r-sm', {
             'bg-black': !option.activated && !option.completed,
-            'bg-primary-main': option.activated && !option.completed,
-            'bg-primary-light': option.completed,
+            'bg-primary/40': option.activated && !option.completed,
+            'bg-highlight': option.completed,
           })}
         />
       ))}

platform/ui-next/src/components/ProgressDropdown/ProgressDropdown.tsx

@@ -94,12 +94,12 @@ const ProgressDropdown = ({
   return (
     <div
       ref={element}
-      className="relative grow select-none text-[0px] text-white"
+      className="text-foreground relative grow select-none text-[0px]"
     >
       <div>
         <div className="mb-1.5 flex h-[26px]">
           <div
-            className="bg-secondary-dark border-primary-main flex grow cursor-pointer rounded border"
+            className="bg-popover border-primary/40 flex grow cursor-pointer rounded border"
             style={{ width: `${dropDownWidth}px` }}
             onClick={toggleOpen}
           >
@@ -108,18 +108,18 @@ const ProgressDropdown = ({
 
               {!selectedOption && <div className="ml-1 grow text-base leading-6">{children}</div>}
             </div>
-            <Icons.ChevronDown className="text-primary-active mt-1.5 ml-1 mr-2" />
+            <Icons.ChevronDown className="text-primary mt-1.5 ml-1 mr-2" />
           </div>
           <button
             className={classnames('ml-1.5 w-[26px] rounded text-base', {
-              'bg-primary-main': canMoveNext,
-              'bg-primary-dark pointer-events-none': !canMoveNext,
+              'bg-primary/60 hover:bg-primary/80': canMoveNext,
+              'bg-popover pointer-events-none': !canMoveNext,
             })}
           >
             <Icons.ArrowRight
-              className={classnames('relative left-0.5 h-6 w-6 text-white', {
-                'text-white': canMoveNext,
-                'text-secondary-light': !canMoveNext,
+              className={classnames('text-foreground relative left-0.5 h-6 w-6', {
+                'text-foreground': canMoveNext,
+                'text-': !canMoveNext,
               })}
               onClick={handleNextButtonClick}
             />
@@ -128,8 +128,9 @@ const ProgressDropdown = ({
         <div
           className={classnames(
             'absolute top-7 left-0 right-8 z-10 mt-0.5 origin-top',
-            'bg-primary-dark overflow-hidden transition-[max-height] duration-300',
-            'border-secondary-main rounded border shadow',
+            'bg-popover overflow-hidden transition-[max-height] duration-300',
+            'border-input/50 rounded border shadow',
+            'py-1',
             {
               hidden: !open,
               'max-h-[500px]': open,

platform/ui-next/src/components/ProgressDropdown/ProgressItem.tsx

@@ -15,7 +15,7 @@ const ProgressItem = ({
   return (
     <div
       key={value}
-      className={'hover:bg-secondary-main flex cursor-pointer py-1 transition duration-1000'}
+      className={'hover:bg-accent mx-1 flex cursor-pointer rounded-sm py-1'}
       onClick={() => onSelect(option)}
     >
       <ProgressItemDetail option={option} />

platform/ui-next/src/components/ProgressDropdown/ProgressItemDetail.tsx

@@ -4,7 +4,7 @@ import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '../Too
 import { ProgressDropdownOption, ProgressDropdownOptionPropType } from './types';
 
 const MAX_TOOLTIP_LENGTH = 150;
-const iconClassNames = 'grow-0 text-primary-light h-4 w-4 mt-1 mr-2 mb-0 ml-1';
+const iconClassNames = 'grow-0 text-highlight h-4 w-4 mt-1 mr-2 mb-0 ml-1';
 
 const ProgressItemDetail = ({ option }: { option: ProgressDropdownOption }): ReactElement => {
   const { label, info, completed } = option;
@@ -33,7 +33,7 @@ const ProgressItemDetail = ({ option }: { option: ProgressDropdownOption }): Rea
       <>
         {info.slice(0, MAX_TOOLTIP_LENGTH)}
         <button
-          className="text-primary-active font-bold"
+          className="text-primary font-bold"
           onClick={handleReadMoreClick}
         >
           &nbsp;Read more...

platform/ui-next/src/components/ProgressLoadingBar/ProgressLoadingBar.tsx

@@ -15,10 +15,10 @@ function ProgressLoadingBar({ progress }: ProgressLoadingBarProps): ReactElement
   return (
     <div className="loading">
       {progress === undefined || progress === null ? (
-        <div className="infinite-loading-bar bg-primary-light"></div>
+        <div className="infinite-loading-bar bg-highlight"></div>
       ) : (
         <div
-          className="bg-primary-light"
+          className="bg-highlight"
           style={{
             width: `${progress}%`,
             height: '8px',

platform/ui-next/src/components/SegmentationTable/AddSegmentationRow.tsx

@@ -43,7 +43,7 @@ export const AddSegmentationRow: React.FC<{ children?: React.ReactNode }> = ({
       }
     >
       {children}
-      <div className="text-primary group-hover:bg-secondary-dark flex items-center rounded-[4px] pl-1 group-hover:cursor-pointer">
+      <div className="text-primary group-hover:bg-popover flex items-center rounded-[4px] pl-1 group-hover:cursor-pointer">
         <div className="grid h-[28px] w-[28px] place-items-center">
           {disabled ? <Icons.Info /> : <Icons.Add />}
         </div>

platform/ui-next/src/components/SegmentationTable/SegmentStatistics.tsx

@@ -43,7 +43,7 @@ const DefaultStatsList = () => {
           >
             <div>{label}</div>
             <div>
-              <span className="text-white">{handleNumber(value)}</span>{' '}
+              <span className="text-foreground">{handleNumber(value)}</span>{' '}
               <span className="">{unit && unit !== 'none' ? unit : ''}</span>
             </div>
           </div>

platform/ui-next/src/components/SegmentationTable/SegmentationCollapsed.tsx

@@ -24,7 +24,7 @@ import {
 // Main header component
 const SegmentationCollapsedHeader = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="bg-primary-dark flex h-10 w-full items-center space-x-1 rounded-t px-1.5">
+    <div className="bg-muted flex h-10 w-full items-center space-x-1 rounded-t px-1.5">
       {children}
     </div>
   );

platform/ui-next/src/components/SegmentationTable/SegmentationExpanded.tsx

@@ -105,7 +105,7 @@ const SegmentationExpandedRoot = ({ children }) => {
 
   return (
     <ScrollArea
-      className={`bg-bkg-low space-y-px`}
+      className={`bg-background space-y-px`}
       showArrows={true}
     >
       <div

platform/ui-next/src/components/SegmentationTable/SegmentationSegments.tsx

@@ -91,7 +91,7 @@ export const SegmentationSegments = ({ children = null }: { children?: React.Rea
   return (
     <div ref={scrollableContainerRef}>
       <ScrollArea
-        className={`bg-bkg-low space-y-px`}
+        className={`bg-background space-y-px`}
         showArrows={
           scrollableContainerRef?.current
             ? scrollableContainerRef?.current?.offsetHeight >= parseFloat(maxHeight)

platform/ui-next/src/components/SegmentationTable/SegmentationTableConfig.tsx

@@ -36,7 +36,7 @@ export const SegmentationTableConfig: React.FC<{ children?: React.ReactNode }> =
   return (
     <div className="bg-muted mb-0.5 space-y-2 rounded-b px-1.5 pt-0.5 pb-3">
       <div className="my-1 flex items-center justify-between">
-        <span className="text-aqua-pale text-xs">
+        <span className="text-muted-foreground text-xs">
           {t('Show')}:{' '}
           {renderFill && renderOutline
             ? t('Fill & Outline')

platform/ui-next/src/components/SidePanel/SidePanel.tsx

@@ -111,7 +111,7 @@ const getTabClassNames = (
   isActiveTab: boolean,
   isTabDisabled: boolean
 ) =>
-  classnames('h-[28px] mb-[2px] cursor-pointer text-white bg-black', {
+  classnames('h-[28px] mb-[2px] cursor-pointer text-foreground bg-primary/10 hover:bg-primary/20', {
     'hover:text-primary': !isActiveTab && !isTabDisabled,
     'rounded-l': tabIndex % numColumns === 0,
     'rounded-r': (tabIndex + 1) % numColumns === 0 || tabIndex === numTabs - 1,
@@ -125,7 +125,7 @@ const getTabStyle = (numTabs: number) => {
 
 const getTabIconClassNames = (numTabs: number, isActiveTab: boolean) => {
   return classnames('h-full w-full flex items-center justify-center', {
-    'bg-customblue-40': isActiveTab,
+    'bg-primary/20': isActiveTab,
     rounded: isActiveTab,
   });
 };
@@ -162,7 +162,9 @@ const getToolTipContent = (label: string, disabled: boolean) => {
   return (
     <>
       <div>{label}</div>
-      {disabled && <div className="text-white">{'Not available based on current context'}</div>}
+      {disabled && (
+        <div className="text-foreground">{'Not available based on current context'}</div>
+      )}
     </>
   );
 };
@@ -285,7 +287,7 @@ const SidePanel = ({
       <>
         <div
           className={classnames(
-            'bg-secondary-dark flex h-[28px] w-full cursor-pointer items-center rounded-md',
+            'bg-popover flex h-[28px] w-full cursor-pointer items-center rounded-md',
             side === 'left' ? 'justify-end pr-2' : 'justify-start pl-2'
           )}
           onClick={() => {
@@ -365,19 +367,16 @@ const SidePanel = ({
       <>
         {getCloseIcon()}
         <div className={classnames('flex grow justify-center')}>
-          <div className={classnames('bg-primary-dark text-primary flex flex-wrap')}>
+          <div className={classnames('bg-muted text-primary flex flex-wrap')}>
             {tabs.map((tab, tabIndex) => {
               const { disabled } = tab;
               return (
                 <React.Fragment key={tabIndex}>
                   {tabIndex % numCols !== 0 && (
                     <div
-                      className={classnames(
-                        'flex h-[28px] w-[2px] items-center bg-black',
-                        tabSpacerWidth
-                      )}
+                      className={classnames('flex h-[28px] w-[2px] items-center', tabSpacerWidth)}
                     >
-                      <div className="bg-primary-dark h-[20px] w-full"></div>
+                      <div className="bg-muted h-[20px] w-full"></div>
                     </div>
                   )}
                   <Tooltip key={tabIndex}>
@@ -443,7 +442,7 @@ const SidePanel = ({
   const getOpenStateComponent = () => {
     return (
       <>
-        <div className="bg-bkg-med flex h-[40px] flex-shrink-0 select-none rounded-t p-2">
+        <div className="bg-muted flex h-[40px] flex-shrink-0 select-none rounded-t p-2">
           {tabs.length === 1 ? getOneTabComponent() : getTabGridComponent()}
         </div>
         <Separator

platform/ui-next/src/components/StudyBrowser/StudyBrowser.tsx

@@ -62,12 +62,12 @@ const StudyBrowser = ({
   return (
     <ScrollArea>
       <div
-        className="bg-bkg-low flex flex-1 flex-col gap-[4px]"
+        className="bg-background flex flex-1 flex-col gap-[4px]"
         data-cy={'studyBrowser-panel'}
       >
         <div className="flex flex-col gap-[4px]">
           {showSettings && (
-            <div className="w-100 bg-bkg-low flex h-[48px] items-center justify-center gap-[10px] px-[8px] py-[10px]">
+            <div className="w-100 bg-background flex h-[48px] items-center justify-center gap-[10px] px-[8px] py-[10px]">
               <>
                 <StudyBrowserViewOptions
                   tabs={tabs}

platform/ui-next/src/components/StudyBrowserSort/StudyBrowserSort.tsx

@@ -55,7 +55,7 @@ export function StudyBrowserSort({ servicesManager }: withAppTypes) {
       <DropdownMenu>
         <Tooltip>
           <TooltipTrigger className="w-full overflow-hidden">
-            <DropdownMenuTrigger className="border-inputfield-main focus:border-inputfield-main flex h-[26px] w-full items-center justify-start overflow-hidden whitespace-nowrap rounded border bg-black p-2 text-base text-white">
+            <DropdownMenuTrigger className="border-input focus:border-input text-foreground flex h-[26px] w-full items-center justify-start overflow-hidden whitespace-nowrap rounded border bg-black p-2 text-base">
               {selectedSort.label}
             </DropdownMenuTrigger>
           </TooltipTrigger>
@@ -65,7 +65,7 @@ export function StudyBrowserSort({ servicesManager }: withAppTypes) {
           {sortFunctions.map(sort => (
             <DropdownMenuItem
               key={sort.label}
-              className="text-white"
+              className="text-foreground"
               onClick={() => handleSortChange(sort)}
             >
               {sort.label}
@@ -80,9 +80,9 @@ export function StudyBrowserSort({ servicesManager }: withAppTypes) {
             className="flex h-[26px] items-center justify-center bg-black"
           >
             {sortDirection === 'ascending' ? (
-              <Icons.SortingAscending className="text-primary-main w-2" />
+              <Icons.SortingAscending className="text-primary w-2" />
             ) : (
-              <Icons.SortingDescending className="text-primary-main w-2" />
+              <Icons.SortingDescending className="text-primary w-2" />
             )}
           </button>
         </TooltipTrigger>

platform/ui-next/src/components/StudyBrowserViewOptions/StudyBrowserViewOptions.tsx

@@ -18,7 +18,7 @@ export function StudyBrowserViewOptions({ tabs, onSelectTab, activeTabName }: wi
     <DropdownMenu>
       <Tooltip>
         <TooltipTrigger className="w-full w-[50%] overflow-hidden">
-          <DropdownMenuTrigger className="border-inputfield-main focus:border-inputfield-main flex h-[26px] w-full items-center justify-start rounded border bg-black p-2 text-base text-white">
+          <DropdownMenuTrigger className="border-input focus:border-input text-foreground flex h-[26px] w-full items-center justify-start rounded border bg-black p-2 text-base">
             {activeTab?.label}
           </DropdownMenuTrigger>
         </TooltipTrigger>
@@ -37,7 +37,7 @@ export function StudyBrowserViewOptions({ tabs, onSelectTab, activeTabName }: wi
           return (
             <DropdownMenuItem
               key={name}
-              className={`text-white ${isActive ? 'font-bold' : ''}`}
+              className={`text-foreground ${isActive ? 'font-bold' : ''}`}
               onClick={() => handleTabChange(name)}
             >
               {label}

platform/ui-next/src/components/StudyItem/StudyItem.tsx

@@ -45,7 +45,7 @@ const StudyItem = ({
                     className="w-full"
                     asChild
                   >
-                    <div className="h-[18px] w-full max-w-[160px] overflow-hidden truncate whitespace-nowrap text-left text-white">
+                    <div className="text-foreground h-[18px] w-full max-w-[160px] overflow-hidden truncate whitespace-nowrap text-left">
                       {date}
                     </div>
                   </TooltipTrigger>

platform/ui-next/src/components/Thumbnail/Thumbnail.tsx

@@ -89,7 +89,7 @@ const Thumbnail = ({
                 )}
               ></div>
               <div
-                className="text-[11px] font-semibold text-white"
+                className="text-foreground text-[11px] font-semibold"
                 data-cy="series-modality-label"
               >
                 {modality}
@@ -106,9 +106,9 @@ const Thumbnail = ({
                 <Tooltip>
                   <TooltipTrigger>
                     <div className="group">
-                      <Icons.StatusTracking className="text-primary-light h-[15px] w-[15px] group-hover:hidden" />
+                      <Icons.StatusTracking className="text-highlight h-[15px] w-[15px] group-hover:hidden" />
                       <Icons.Cancel
-                        className="text-primary-light hidden h-[15px] w-[15px] group-hover:block"
+                        className="text-highlight hidden h-[15px] w-[15px] group-hover:block"
                         onClick={onClickUntrack}
                       />
                     </div>
@@ -120,7 +120,7 @@ const Thumbnail = ({
                       </div>
                       <div className="flex flex-1 flex-col">
                         <span>
-                          <span className="text-white">
+                          <span className="text-foreground">
                             {isTracked ? 'Series is tracked' : 'Series is untracked'}
                           </span>
                         </span>
@@ -145,7 +145,7 @@ const Thumbnail = ({
             <TooltipContent>{description}</TooltipContent>
             <TooltipTrigger>
               <div
-                className="min-h-[18px] w-[128px] overflow-hidden text-ellipsis whitespace-nowrap pb-0.5 pl-1 text-left text-[12px] font-normal leading-4 text-white"
+                className="text-foreground min-h-[18px] w-[128px] overflow-hidden text-ellipsis whitespace-nowrap pb-0.5 pl-1 text-left text-[12px] font-normal leading-4"
                 data-cy="series-description-label"
               >
                 {description}
@@ -189,7 +189,7 @@ const Thumbnail = ({
           <div className="flex h-full w-[calc(100%-12px)] flex-col justify-start">
             <div className="flex items-center gap-[7px]">
               <div
-                className="text-[13px] font-semibold text-white"
+                className="text-foreground text-[13px] font-semibold"
                 data-cy="series-modality-label"
               >
                 {modality}
@@ -198,7 +198,7 @@ const Thumbnail = ({
                 <TooltipContent>{description}</TooltipContent>
                 <TooltipTrigger className="w-full overflow-hidden">
                   <div
-                    className="max-w-[160px] overflow-hidden overflow-ellipsis whitespace-nowrap text-left text-[13px] font-normal text-white"
+                    className="text-foreground max-w-[160px] overflow-hidden overflow-ellipsis whitespace-nowrap text-left text-[13px] font-normal"
                     data-cy="series-description-label"
                   >
                     {description}
@@ -232,9 +232,9 @@ const Thumbnail = ({
             <Tooltip>
               <TooltipTrigger>
                 <div className="group">
-                  <Icons.StatusTracking className="text-primary-light h-[20px] w-[15px] group-hover:hidden" />
+                  <Icons.StatusTracking className="text-highlight h-[20px] w-[15px] group-hover:hidden" />
                   <Icons.Cancel
-                    className="text-primary-light hidden h-[15px] w-[15px] group-hover:block"
+                    className="text-highlight hidden h-[15px] w-[15px] group-hover:block"
                     onClick={onClickUntrack}
                   />
                 </div>
@@ -246,7 +246,7 @@ const Thumbnail = ({
                   </div>
                   <div className="flex flex-1 flex-col">
                     <span>
-                      <span className="text-white">
+                      <span className="text-foreground">
                         {isTracked ? 'Series is tracked' : 'Series is untracked'}
                       </span>
                     </span>

platform/ui-next/src/components/ThumbnailList/ThumbnailList.tsx

@@ -34,7 +34,7 @@ const ThumbnailList = ({
         {thumbnailItems.length > 0 && (
           <div
             id="ohif-thumbnail-list"
-            className="bg-bkg-low grid grid-cols-[repeat(auto-fit,_minmax(0,135px))] place-items-start gap-[4px]"
+            className="bg-background grid grid-cols-[repeat(auto-fit,_minmax(0,135px))] place-items-start gap-[4px]"
           >
             {thumbnailItems.map(item => {
               const { displaySetInstanceUID, componentType, numInstances, ...rest } = item;
@@ -62,7 +62,7 @@ const ThumbnailList = ({
         {listItems.length > 0 && (
           <div
             id="ohif-thumbnail-list"
-            className="bg-bkg-low grid grid-cols-[repeat(auto-fit,_minmax(0,275px))] place-items-start gap-[2px]"
+            className="bg-background grid grid-cols-[repeat(auto-fit,_minmax(0,275px))] place-items-start gap-[2px]"
           >
             {listItems.map(item => {
               const { displaySetInstanceUID, componentType, numInstances, ...rest } = item;

platform/ui-next/src/components/ToolButton/ToolButton.tsx

@@ -9,7 +9,7 @@ const baseClasses = '!rounded-lg inline-flex items-center justify-center';
 const defaultClasses = 'bg-transparent text-foreground/80 hover:bg-background hover:text-highlight';
 const activeClasses = 'bg-highlight text-background hover:!bg-highlight/80';
 const disabledClasses =
-  'text-common-bright hover:bg-primary-dark hover:text-primary-light opacity-40 cursor-not-allowed';
+  'text-foreground hover:bg-muted hover:text-highlight opacity-40 cursor-not-allowed';
 
 const sizeClasses = {
   default: {

platform/ui-next/src/components/Tooltip/Tooltip.tsx

@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'bg-primary-dark border-secondary-light text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded border px-2 py-1.5 text-sm',
+        'bg-muted border-input text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded border px-2 py-1.5 text-sm',
         className
       )}
       {...props}

platform/ui-next/src/components/Viewport/PatientInfo.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '../../components';
 
 const classes = {
-  infoHeader: 'text-base text-primary-light',
+  infoHeader: 'text-base text-highlight',
   infoText: 'text-base text-white max-w-24 truncate',
   firstRow: 'flex flex-col',
   row: 'flex flex-col ml-4',
@@ -37,7 +37,7 @@ function PatientInfo({
     <div ref={showPatientInfoRef}>
       <Tooltip>
         <TooltipTrigger asChild>
-          <Icons.Info className="hover:text-primary-light cursor-pointer text-white" />
+          <Icons.Info className="hover:text-highlight cursor-pointer text-white" />
         </TooltipTrigger>
         {isOpen && (
           <TooltipContent

platform/ui-next/src/components/Viewport/ViewportActionArrows.tsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { Icons } from '@ohif/ui-next';
 
 const arrowClasses =
-  'cursor-pointer flex items-center justify-center shrink-0 text-highlight active:text-foreground hover:bg-primary/30 rounded';
+  'cursor-pointer flex items-center justify-center shrink-0 text-primary active:text-foreground hover:bg-primary/30 rounded';
 
 /**
  * A small set of left/right arrow icons for stepping through slices or series.

platform/ui-next/src/components/Viewport/ViewportActionBar.tsx

@@ -64,7 +64,7 @@ function ViewportActionBar({
       onDoubleClick={onDoubleClick}
     >
       {getStatusComponent()}
-      {!!label?.length && <span className="text-aqua-pale text-large ml-1">{label}</span>}
+      {!!label?.length && <span className="text-muted-foreground text-large ml-1">{label}</span>}
       <div className="border-secondary-light mx-2 border-l py-2"></div>
       <span
         data-cy="studyDate"
@@ -73,15 +73,17 @@ function ViewportActionBar({
         {studyDate}
       </span>
       <div className="border-secondary-light mx-2 border-l py-2"></div>
-      <span className="text-aqua-pale mr-1 overflow-hidden text-ellipsis">{seriesDescription}</span>
+      <span className="text-muted-foreground mr-1 overflow-hidden text-ellipsis">
+        {seriesDescription}
+      </span>
       {/* Prev/Next icons */}
       <Icons.ByName
-        className="hover:text-primary-light ml-auto mr-2 cursor-pointer text-white"
+        className="hover:text-highlight ml-auto mr-2 cursor-pointer text-white"
         name="chevron-prev"
         onClick={() => onArrowsClick('left')}
       />
       <Icons.ByName
-        className="hover:text-primary-light mr-2 cursor-pointer text-white"
+        className="hover:text-highlight mr-2 cursor-pointer text-white"
         name="chevron-next"
         onClick={() => onArrowsClick('right')}
       />

platform/ui-next/src/components/Viewport/ViewportActionButton.tsx

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 function ViewportActionButton({ onInteraction, commands, id, children }) {
   return (
     <div
-      className="bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
+      className="bg-primary/60 hover:bg-primary/80 ml-1 cursor-pointer rounded px-1.5"
       // Using onMouseUp because onClick wasn't firing if pointer-events are none.
       onMouseUp={() => {
         onInteraction({

platform/ui-next/src/components/Viewport/ViewportPane.tsx

@@ -70,7 +70,7 @@ function ViewportPane({
         className={classNames('pointer-events-none absolute inset-0 rounded-md border', {
           'border-highlight': isActive,
           'group-hover/pane:border-highlight/50 border-transparent': !isActive,
-          '!border-secondary-light border-dashed': isHighlighted,
+          '!border-input border-dashed': isHighlighted,
         })}
       />
     </div>

platform/ui-next/src/components/ViewportDialog/ViewportDialog.tsx

@@ -69,7 +69,7 @@ const ViewportDialog: React.FC<ViewportDialogProps> = ({
     },
     info: {
       icon: 'notifications-info',
-      color: 'text-primary-main',
+      color: 'text-primary/60',
     },
     success: {
       icon: 'info',

platform/ui-next/src/tailwind.css

@@ -20,7 +20,7 @@
     --popover-foreground: 0 0% 98%;
     --primary: 214 98% 60%;
     --primary-foreground: 0 0% 98%;
-    --secondary: 214 66% 48%;
+    --secondary: 214 65% 36%;
     --secondary-foreground: 200 50% 84%;
     --muted: 234 64% 10%;
     --muted-foreground: 200 46% 65%;
@@ -220,11 +220,11 @@
 }
 
 h2.section-header {
-  @apply py-4 text-2xl font-normal text-white;
+  @apply text-foreground py-4 text-2xl font-normal;
 }
 
 h3.section-header {
-  @apply py-3 text-xl text-white;
+  @apply text-foreground py-3 text-xl;
 }
 
 .row {

platform/ui-next/src/utils/getToggledClassName.tsx

@@ -1,7 +1,5 @@
 const getToggledClassName = isToggled => {
-  return isToggled
-    ? '!text-primary'
-    : '!text-common-bright hover:!bg-primary-dark hover:text-primary-light';
+  return isToggled ? '!text-primary' : '!text-foreground/80 hover:!bg-muted hover:text-highlight';
 };
 
 export { getToggledClassName };