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>
2026-02-12 08:48:05 -05:00 · 2026-02-12 08:48:05 -05:00 · 9a2691a71f
commit 9a2691a71f
parent 4dfd80f1fd
87 changed files with 201 additions and 204 deletions
--- a/extensions/cornerstone-dicom-seg/src/components/LogicalContourOperationsOptions.tsx
+++ b/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>
--- a/extensions/cornerstone-dicom-sr/src/components/OHIFCornerstoneSRTextViewport.tsx
+++ b/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} />
--- a/extensions/cornerstone-dynamic-volume/src/panels/DynamicDataPanel.tsx
+++ b/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
--- a/extensions/cornerstone-dynamic-volume/src/panels/WorkflowPanel.tsx
+++ b/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>
--- a/extensions/cornerstone/src/Viewport/Overlays/ViewportImageSliceLoadingIndicator.tsx
+++ b/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>
    );
--- a/extensions/cornerstone/src/components/AccordionGroup/AccordionGroup.tsx
+++ b/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]) => {
--- a/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx
+++ b/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} ${
--- a/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx
+++ b/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>
--- a/extensions/cornerstone/src/components/ModalityLoadBadge/ModalityLoadBadge.tsx
+++ b/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>
--- a/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx
+++ b/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"
--- a/extensions/cornerstone/src/panels/PanelMeasurement.tsx
+++ b/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>
    );
  }

--- a/extensions/default/src/Components/DataSourceConfigurationComponent.tsx
+++ b/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}
--- a/extensions/default/src/Components/DataSourceConfigurationModalComponent.tsx
+++ b/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>
              ) : (
--- a/extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx
+++ b/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>
          )}
--- a/extensions/default/src/DicomTagBrowser/DicomTagTable.tsx
+++ b/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>
--- a/extensions/default/src/Panels/DataSourceSelector.tsx
+++ b/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
--- a/extensions/default/src/Panels/StudyBrowser/PanelStudyBrowserHeader.tsx
+++ b/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>
--- a/extensions/default/src/ViewerLayout/HeaderPatientInfo/HeaderPatientInfo.tsx
+++ b/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>
--- a/extensions/default/src/ViewerLayout/ViewerHeader.tsx
+++ b/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');
            }}
--- a/extensions/default/src/utils/Toolbox.tsx
+++ b/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>
        )}
--- a/extensions/dicom-microscopy/src/components/ViewportOverlay/ViewportOverlay.css
+++ b/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;
--- a/extensions/dicom-microscopy/src/components/ViewportOverlay/index.tsx
+++ b/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 (
--- a/extensions/dicom-microscopy/src/index.tsx
+++ b/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
--- a/extensions/dicom-pdf/src/viewports/OHIFCornerstonePdfViewport.tsx
+++ b/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}
    >
--- a/extensions/tmtv/src/Panels/PanelPetSUV.tsx
+++ b/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
--- a/extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/PanelROIThresholdExport.tsx
+++ b/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>
--- a/extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/ROIThresholdConfiguration.tsx
+++ b/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.
--- a/extensions/usAnnotation/src/panels/MultiLabelInput.tsx
+++ b/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)}
            >
              ×
--- a/extensions/usAnnotation/src/panels/USAnnotationPanel.tsx
+++ b/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 */}
--- a/platform/app/src/routes/Debug.tsx
+++ b/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'
--- a/platform/app/src/routes/index.tsx
+++ b/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
--- a/platform/ui-next/src/assets/styles.css
+++ b/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;
 }

--- a/platform/ui-next/src/components/Button/Button.tsx
+++ b/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',
      },
--- a/platform/ui-next/src/components/DataRow/DataRow.tsx
+++ b/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"
  />
 );
--- a/platform/ui-next/src/components/DateRange/DateRange.tsx
+++ b/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"
--- a/platform/ui-next/src/components/Dialog/Dialog.tsx
+++ b/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}
  />
 ));
--- a/platform/ui-next/src/components/DisplaySetMessageListTooltip/DisplaySetMessageListTooltip.tsx
+++ b/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',
--- a/platform/ui-next/src/components/Header/Header.tsx
+++ b/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>
--- a/platform/ui-next/src/components/InvestigationalUseDialog/InvestigationalUseDialog.tsx
+++ b/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')}
--- a/platform/ui-next/src/components/LayoutSelector/LayoutSelector.tsx
+++ b/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)}
--- a/platform/ui-next/src/components/LineChart/LineChart.tsx
+++ b/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,
--- a/platform/ui-next/src/components/LoadingIndicatorProgress/LoadingIndicatorProgress.tsx
+++ b/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>
--- a/platform/ui-next/src/components/LoadingIndicatorTotalPercent/LoadingIndicatorTotalPercent.tsx
+++ b/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>
    );
--- a/platform/ui-next/src/components/MeasurementTable/MeasurementTable.tsx
+++ b/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>
  );
 };
--- a/platform/ui-next/src/components/NavBar/NavBar.tsx
+++ b/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
--- a/platform/ui-next/src/components/OHIFDialogs/PresetDialog.tsx
+++ b/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
      )}
    >
--- a/platform/ui-next/src/components/OHIFPanels/WindowLevel.tsx
+++ b/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"
--- a/platform/ui-next/src/components/OHIFToolbox/ToolboxUI.tsx
+++ b/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>
      </>
--- a/platform/ui-next/src/components/Onboarding/Onboarding.css
+++ b/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 {
--- a/platform/ui-next/src/components/PanelSection/PanelSection.tsx
+++ b/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
    )}
--- a/platform/ui-next/src/components/ProgressDropdown/ProgressDiscreteBar.tsx
+++ b/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,
          })}
        />
      ))}
--- a/platform/ui-next/src/components/ProgressDropdown/ProgressDropdown.tsx
+++ b/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,
--- a/platform/ui-next/src/components/ProgressDropdown/ProgressItem.tsx
+++ b/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} />
--- a/platform/ui-next/src/components/ProgressDropdown/ProgressItemDetail.tsx
+++ b/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...
--- a/platform/ui-next/src/components/ProgressLoadingBar/ProgressLoadingBar.tsx
+++ b/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',
--- a/platform/ui-next/src/components/SegmentationTable/AddSegmentationRow.tsx
+++ b/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>
--- a/platform/ui-next/src/components/SegmentationTable/SegmentStatistics.tsx
+++ b/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>
--- a/platform/ui-next/src/components/SegmentationTable/SegmentationCollapsed.tsx
+++ b/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>
  );
--- a/platform/ui-next/src/components/SegmentationTable/SegmentationExpanded.tsx
+++ b/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
--- a/platform/ui-next/src/components/SegmentationTable/SegmentationSegments.tsx
+++ b/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)
--- a/platform/ui-next/src/components/SegmentationTable/SegmentationTableConfig.tsx
+++ b/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')
--- a/platform/ui-next/src/components/SidePanel/SidePanel.tsx
+++ b/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
--- a/platform/ui-next/src/components/StudyBrowser/StudyBrowser.tsx
+++ b/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}
--- a/platform/ui-next/src/components/StudyBrowserSort/StudyBrowserSort.tsx
+++ b/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>
--- a/platform/ui-next/src/components/StudyBrowserViewOptions/StudyBrowserViewOptions.tsx
+++ b/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}
--- a/platform/ui-next/src/components/StudyItem/StudyItem.tsx
+++ b/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>
--- a/platform/ui-next/src/components/Thumbnail/Thumbnail.tsx
+++ b/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>
--- a/platform/ui-next/src/components/ThumbnailList/ThumbnailList.tsx
+++ b/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;
--- a/platform/ui-next/src/components/ToolButton/ToolButton.tsx
+++ b/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: {
--- a/platform/ui-next/src/components/Tooltip/Tooltip.tsx
+++ b/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}
--- a/platform/ui-next/src/components/Viewport/PatientInfo.tsx
+++ b/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
--- a/platform/ui-next/src/components/Viewport/ViewportActionArrows.tsx
+++ b/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.
--- a/platform/ui-next/src/components/Viewport/ViewportActionBar.tsx
+++ b/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')}
      />
--- a/platform/ui-next/src/components/Viewport/ViewportActionButton.tsx
+++ b/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({
--- a/platform/ui-next/src/components/Viewport/ViewportPane.tsx
+++ b/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>
--- a/platform/ui-next/src/components/ViewportDialog/ViewportDialog.tsx
+++ b/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',
--- a/platform/ui-next/src/tailwind.css
+++ b/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 {
--- a/platform/ui-next/src/utils/getToggledClassName.tsx
+++ b/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 };
--- a/tests/SRHydrationThenReload.spec.ts
+++ b/tests/SRHydrationThenReload.spec.ts
@ -1,4 +1,4 @@
-import { checkForScreenshot, screenShotPaths, test, visitStudy } from './utils';
+import { expect, test, visitStudy } from './utils';

 test.beforeEach(async ({ page }) => {
  const studyInstanceUID = '1.3.6.1.4.1.14519.5.2.1.7310.5101.860473186348887719777907797922';
@ -20,17 +20,18 @@ test('should properly reload SR series after hydration', async ({
  await DOMOverlayPageObject.viewport.segmentationHydration.yes.click();
  await page.waitForTimeout(2000);

-  await checkForScreenshot(page, page, screenShotPaths.srHydrationThenReload.srAfterHydration);
+  const measurementCountAfterFirstLoad =
+    await rightPanelPageObject.measurementsPanel.panel.getMeasurementCount();
+  expect(measurementCountAfterFirstLoad).toBeGreaterThan(0);

-  const measurementCount = await rightPanelPageObject.measurementsPanel.panel.getMeasurementCount();
-
-  if (measurementCount > 1) {
-    await rightPanelPageObject.measurementsPanel.panel.nthMeasurement(1).click();
-    await page.waitForTimeout(1000);
-  }
+  await rightPanelPageObject.measurementsPanel.panel.nthMeasurement(1).click();
+  await page.waitForTimeout(1000);

  await leftPanelPageObject.loadSeriesByModality('SR');
  await page.waitForTimeout(2000);

-  await checkForScreenshot(page, page, screenShotPaths.srHydrationThenReload.srAfterReload);
+  const measurementCountAfterSecondLoad =
+    await rightPanelPageObject.measurementsPanel.panel.getMeasurementCount();
+
+  expect(measurementCountAfterSecondLoad).toBe(measurementCountAfterFirstLoad);
 });
--- a/tests/screenshots/chromium/DicomTagBrowser.spec.ts/dicomTagBrowserDisplayedCorrectly.png
+++ b/tests/screenshots/chromium/DicomTagBrowser.spec.ts/dicomTagBrowserDisplayedCorrectly.png
--- a/tests/screenshots/chromium/DicomTagBrowser.spec.ts/scrollBarRenderedProperly.png
+++ b/tests/screenshots/chromium/DicomTagBrowser.spec.ts/scrollBarRenderedProperly.png
--- a/tests/screenshots/chromium/MPRThenSEGOverlayNoHydration.spec.ts/mprPostSEGOverlayNoHydration.png
+++ b/tests/screenshots/chromium/MPRThenSEGOverlayNoHydration.spec.ts/mprPostSEGOverlayNoHydration.png
--- a/tests/screenshots/chromium/RTNoHydrationThenMPR.spec.ts/rtNoHydrationPreMpr.png
+++ b/tests/screenshots/chromium/RTNoHydrationThenMPR.spec.ts/rtNoHydrationPreMpr.png
--- a/tests/screenshots/chromium/SEGDataOverlayNoHydrationThenMPR.spec.ts/segDataOverlayNoHydrationPostMpr.png
+++ b/tests/screenshots/chromium/SEGDataOverlayNoHydrationThenMPR.spec.ts/segDataOverlayNoHydrationPostMpr.png
--- a/tests/screenshots/chromium/SRHydrationThenReload.spec.ts/srAfterHydration.png
+++ b/tests/screenshots/chromium/SRHydrationThenReload.spec.ts/srAfterHydration.png
--- a/tests/screenshots/chromium/SRHydrationThenReload.spec.ts/srAfterReload.png
+++ b/tests/screenshots/chromium/SRHydrationThenReload.spec.ts/srAfterReload.png
--- a/tests/utils/screenShotPaths.ts
+++ b/tests/utils/screenShotPaths.ts
@ -124,10 +124,6 @@ const screenShotPaths = {
    srPreHydration: 'srPreHydration.png',
    srJumpToMeasurement: 'srJumpToMeasurement.png',
  },
-  srHydrationThenReload: {
-    srAfterHydration: 'srAfterHydration.png',
-    srAfterReload: 'srAfterReload.png',
-  },
  segHydration: {
    segPostHydration: 'segPostHydration.png',
    segPreHydration: 'segPreHydration.png',