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/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>
               ) : (