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