fix(colors): Replace hardcoded black with background color token (#5815)

* Update all black to background

* remove --canvas token, keep intentional bg-black

* Move bg-black from grid container to individual viewport panes

---------

Co-authored-by: Alireza <ar.sedghi@gmail.com>

platform/app/src/routes/Local/Local.tsx

@@ -111,9 +111,9 @@ function Local({ modePath }: LocalProps) {
 
   // Set body style
   useEffect(() => {
-    document.body.classList.add('bg-black');
+    document.body.classList.add('bg-background');
     return () => {
-      document.body.classList.remove('bg-black');
+      document.body.classList.remove('bg-background');
     };
   }, []);
 
@@ -139,7 +139,7 @@ function Local({ modePath }: LocalProps) {
               <div className="space-y-2 py-6 text-center">
                 {dropInitiated ? (
                   <div className="flex flex-col items-center justify-center pt-12">
-                    <LoadingIndicatorProgress className={'h-full w-full bg-black'} />
+                    <LoadingIndicatorProgress className={'h-full w-full bg-background'} />
                   </div>
                 ) : (
                   <div className="space-y-2">

platform/app/src/routes/NotFound/NotFound.tsx

@@ -13,7 +13,7 @@ const NotFound = ({
   const navigate = useNavigate();
 
   return (
-    <div className="absolute flex h-full w-full items-center justify-center bg-black">
+    <div className="absolute flex h-full w-full items-center justify-center bg-background">
       <div className="flex flex-col">
         <div className="bg-background flex items-center justify-center rounded-t-2xl p-6">
           <Icons.IllustrationNotFound />

platform/docs/src/pages/colors-and-type.tsx

@@ -131,7 +131,7 @@ export default function ComponentShowcase() {
       title="Colors and Typography"
       description="Colors and Typography"
     >
-      <div className="text-foreground min-h-screen bg-black">
+      <div className="text-foreground min-h-screen bg-background">
         <div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
           {/* Navigation cards */}
           <div className="mb-8 grid grid-cols-1 gap-5 md:grid-cols-3">
@@ -396,7 +396,7 @@ function ShowcaseRow({ title, description, children, code }: ShowcaseRowProps) {
         </div>
       </div>
       {showCode && (
-        <pre className="border-input mt-4 overflow-x-auto rounded-md border bg-black p-4 text-sm">
+        <pre className="border-input mt-4 overflow-x-auto rounded-md border bg-background p-4 text-sm">
           <code>{code}</code>
         </pre>
       )}
@@ -425,7 +425,7 @@ function ShowcaseRow({ title, description, children, code }: ShowcaseRowProps) {
 //       </div>
 //       <div className="showcase-content mb-4">{children}</div>
 //       {showCode && (
-//         <pre className="mt-4 overflow-x-auto rounded-md bg-black p-4 text-sm">
+//         <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-sm">
 //           <code>{code}</code>
 //         </pre>
 //       )}

platform/docs/src/pages/components-list.tsx

@@ -50,7 +50,7 @@ export default function ComponentsList() {
 
           return (
             <TooltipProvider>
-              <div className="text-foreground min-h-screen bg-black">
+              <div className="text-foreground min-h-screen bg-background">
                 <div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
                   {/* Navigation cards */}
                   <div className="mb-8 grid grid-cols-1 gap-5 md:grid-cols-3">

platform/docs/src/pages/components.tsx

@@ -131,7 +131,7 @@ export default function ComponentShowcase() {
       title="OHIF Viewer Design System"
       description="OHIF Viewer Design System"
     >
-      <div className="text-foreground min-h-screen bg-black">
+      <div className="text-foreground min-h-screen bg-background">
         <div className="mx-auto my-4 max-w-5xl pt-6 pb-3">
           <div className="grid grid-cols-1 gap-5 md:grid-cols-3">
             <a
@@ -227,7 +227,7 @@ function ShowcaseRow({ title, description, children, code }: ShowcaseRowProps) {
 
       {/* Code Section */}
       {showCode && (
-        <pre className="mt-4 overflow-x-auto rounded-md bg-black p-4 text-sm">
+        <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-sm">
           <code>{code}</code>
         </pre>
       )}
@@ -256,7 +256,7 @@ function ShowcaseRow({ title, description, children, code }: ShowcaseRowProps) {
 //       </div>
 //       <div className="showcase-content mb-4">{children}</div>
 //       {showCode && (
-//         <pre className="mt-4 overflow-x-auto rounded-md bg-black p-4 text-sm">
+//         <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-sm">
 //           <code>{code}</code>
 //         </pre>
 //       )}

platform/docs/src/pages/components/AllinOneMenuShowcase.tsx

@@ -58,7 +58,7 @@ export default function AllinOneMenuShowcase() {
       description="A structured menu that consolidates controls and actions."
       code={`<IconMenu icon="viewport-window-level" menuStyle={{ width: 212, maxHeight: 500 }}>…</IconMenu>`}
     >
-      <div className="border-input/70 relative flex h-12 items-center rounded border bg-black px-4">
+      <div className="border-input/70 relative flex h-12 items-center rounded border bg-background px-4">
         <IconMenu
           icon="viewport-window-level"
           iconClassName="text-xl text-highlight hover:bg-primary/30 cursor-pointer rounded"

platform/docs/src/pages/components/ShowcaseRow.tsx

@@ -40,7 +40,7 @@ export default function ShowcaseRow({ title, description, children, code }: Show
         </div>
       </div>
       {showCode && (
-        <pre className="border-input mt-4 overflow-x-auto rounded-md border bg-black p-4 text-sm">
+        <pre className="border-input mt-4 overflow-x-auto rounded-md border bg-background p-4 text-sm">
           <code>{code}</code>
         </pre>
       )}

platform/docs/src/pages/patterns.tsx

@@ -26,7 +26,7 @@ export default function ComponentShowcase() {
       title="Patterns"
       description="Patterns and example layouts"
     >
-      <div className="text-foreground min-h-screen bg-black">
+      <div className="text-foreground min-h-screen bg-background">
         <div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
           {/* Navigation cards */}
           <div className="mb-8 grid grid-cols-1 gap-5 md:grid-cols-3">
@@ -172,7 +172,7 @@ function ShowcaseRow({ title, description, children, code }: ShowcaseRowProps) {
         </div>
       </div>
       {showCode && (
-        <pre className="border-input mt-4 overflow-x-auto rounded-md border bg-black p-4 text-sm">
+        <pre className="border-input mt-4 overflow-x-auto rounded-md border bg-background p-4 text-sm">
           <code>{code}</code>
         </pre>
       )}
@@ -201,7 +201,7 @@ function ShowcaseRow({ title, description, children, code }: ShowcaseRowProps) {
 //       </div>
 //       <div className="showcase-content mb-4">{children}</div>
 //       {showCode && (
-//         <pre className="mt-4 overflow-x-auto rounded-md bg-black p-4 text-sm">
+//         <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-sm">
 //           <code>{code}</code>
 //         </pre>
 //       )}

platform/docs/src/pages/patterns/patterns-measurements.tsx

@@ -49,7 +49,7 @@ export default function Measurements() {
   return (
     <BrowserOnly>
       {() => (
-        <div className="px-auto my-4 flex min-h-screen w-full justify-center bg-black py-12">
+        <div className="px-auto my-4 flex min-h-screen w-full justify-center bg-background py-12">
           <TooltipProvider>
             {/* Simulated Panel List for "Segmentation" */}
             <div className="w-64 space-y-0">

platform/docs/src/pages/patterns/patterns-segmentation.tsx

@@ -241,7 +241,7 @@ export default function SegmentationPanel() {
   };
 
   return (
-    <div className="px-auto flex min-h-screen w-full justify-center bg-black py-12">
+    <div className="px-auto flex min-h-screen w-full justify-center bg-background py-12">
       <div className="w-64 space-y-0">
         <TooltipProvider>
           <Accordion

platform/docs/src/pages/patterns/patterns-tmtv.tsx

@@ -76,7 +76,7 @@ export default function TMTVPatterns() {
   return (
     <BrowserOnly>
       {() => (
-        <div className="px-auto my-4 flex min-h-screen w-full justify-center bg-black py-12">
+        <div className="px-auto my-4 flex min-h-screen w-full justify-center bg-background py-12">
           <div className="w-64 space-y-0">
             <Accordion
               type="multiple"

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

@@ -255,7 +255,7 @@ const DataRowComponent = React.forwardRef<HTMLDivElement, DataRowProps>(
           {/* Number Box */}
           {number !== null && (
             <div
-              className={`flex h-7 max-h-7 w-7 flex-shrink-0 items-center justify-center rounded-l border-r border-black text-base ${
+              className={`flex h-7 max-h-7 w-7 flex-shrink-0 items-center justify-center rounded-l border-r border-background text-base ${
                 isSelected ? 'bg-highlight text-black' : 'bg-muted text-muted-foreground'
               } overflow-hidden`}
             >

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

@@ -92,7 +92,7 @@ export function DatePickerWithRange({
               value={start}
               onChange={e => handleInputChange(e, 'start')}
               className={cn(
-                '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',
+                'border-inputfield-main focus:border-inputfield-focus hover:text-foreground h-[32px] w-full justify-start rounded border bg-background py-[6.5px] pl-[6.5px] pr-[6.5px] text-left text-base font-normal hover:bg-background',
                 !start && 'text-muted-foreground'
               )}
               data-cy="input-date-range-start"
@@ -129,7 +129,7 @@ export function DatePickerWithRange({
               value={end}
               onChange={e => handleInputChange(e, 'end')}
               className={cn(
-                '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',
+                'border-inputfield-main focus:border-inputfield-focus hover:text-foreground h-full w-full justify-start rounded border bg-background py-[6.5px] pl-[6.5px] pr-[6.5px] text-left text-base font-normal hover:bg-background',
                 !end && 'text-muted-foreground'
               )}
               data-cy="input-date-range-end"

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

@@ -54,7 +54,7 @@ const DialogOverlay = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-40 bg-black/60',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-40 bg-background/60',
       className
     )}
     {...props}

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

@@ -332,7 +332,7 @@ const GridSelector = ({ rows = 3, columns = 4, className }: GridSelectorProps) =
 };
 
 const Divider = ({ className }: { className?: string }) => (
-  <div className={cn('h-px bg-black', className)}></div>
+  <div className={cn('h-px bg-background', className)}></div>
 );
 
 const HelpText = ({ children, className }: { children: React.ReactNode; className?: string }) => (

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

@@ -17,7 +17,7 @@ const NavBar = ({
   return (
     <div
       className={classnames(
-        'bg-popover z-20 border-black px-1',
+        'bg-popover z-20 border-background 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
-        'border-foreground/10 flex min-h-0 flex-1 flex-col rounded-md border bg-black p-2',
+        'border-foreground/10 flex min-h-0 flex-1 flex-col rounded-md border bg-background p-2',
         className
       )}
     >

platform/ui-next/src/components/OHIFModals/ImageModal.tsx

@@ -41,7 +41,7 @@ function ImageVisual({ children, className }: ImageVisualProps) {
   return (
     <div
       className={cn(
-        'flex-1 items-center justify-center rounded-2xl bg-black/80 p-4 sm:flex-[7]',
+        'flex-1 items-center justify-center rounded-2xl bg-background/80 p-4 sm:flex-[7]',
         'flex', // ensure the container is a flex box
         className
       )}

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

@@ -10,7 +10,7 @@ const ProgressDiscreteBar = ({ options }: { options: ProgressDropdownOption[] })
         <div
           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-background': !option.activated && !option.completed,
             'bg-primary/40': option.activated && !option.completed,
             'bg-highlight': option.completed,
           })}

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

@@ -58,7 +58,7 @@ const closeIconWidth = 30;
 const gridHorizontalPadding = 10;
 const tabSpacerWidth = 2;
 
-const baseClasses = 'bg-black border-black justify-start box-content flex flex-col';
+const baseClasses = 'bg-background border-background justify-start box-content flex flex-col';
 
 const openStateIconName = {
   left: 'SidePanelCloseLeft',
@@ -447,7 +447,7 @@ const SidePanel = ({
         </div>
         <Separator
           orientation="horizontal"
-          className="bg-black"
+          className="bg-background"
           thickness="2px"
         />
       </>

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

@@ -55,13 +55,13 @@ export function StudyBrowserSort({ servicesManager }: withAppTypes) {
       <DropdownMenu>
         <Tooltip>
           <TooltipTrigger className="w-full overflow-hidden">
-            <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">
+            <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-background p-2 text-base">
               {selectedSort.label}
             </DropdownMenuTrigger>
           </TooltipTrigger>
           <TooltipContent>{selectedSort.label}</TooltipContent>
         </Tooltip>
-        <DropdownMenuContent className="bg-black">
+        <DropdownMenuContent className="bg-background">
           {sortFunctions.map(sort => (
             <DropdownMenuItem
               key={sort.label}
@@ -77,7 +77,7 @@ export function StudyBrowserSort({ servicesManager }: withAppTypes) {
         <TooltipTrigger>
           <button
             onClick={toggleSortDirection}
-            className="flex h-[26px] items-center justify-center bg-black"
+            className="flex h-[26px] items-center justify-center bg-background"
           >
             {sortDirection === 'ascending' ? (
               <Icons.SortingAscending className="text-primary w-2" />

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

@@ -18,13 +18,13 @@ export function StudyBrowserViewOptions({ tabs, onSelectTab, activeTabName }: wi
     <DropdownMenu>
       <Tooltip>
         <TooltipTrigger className="w-full w-[50%] overflow-hidden">
-          <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">
+          <DropdownMenuTrigger className="border-input focus:border-input text-foreground flex h-[26px] w-full items-center justify-start rounded border bg-background p-2 text-base">
             {activeTab?.label}
           </DropdownMenuTrigger>
         </TooltipTrigger>
         <TooltipContent>{activeTab?.label}</TooltipContent>
       </Tooltip>
-      <DropdownMenuContent className="bg-black">
+      <DropdownMenuContent className="bg-background">
         {tabs.map(tab => {
           const { name, label, studies } = tab;
           const isActive = activeTabName === name;

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

@@ -67,7 +67,7 @@ const Thumbnail = ({
         )}
       >
         <div className="h-[114px] w-[128px]">
-          <div className="relative bg-black">
+          <div className="relative bg-background">
             {imageSrc ? (
               <img
                 src={imageSrc}

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

@@ -58,7 +58,7 @@ function ViewportPane({
       onScroll={onInteractionHandler}
       onWheel={onInteractionHandler}
       className={classNames(
-        'group/pane relative h-full w-full overflow-hidden transition duration-300',
+        'group/pane relative h-full w-full overflow-hidden bg-black transition duration-300',
         className
       )}
       style={customStyle}

platform/ui-next/src/tailwind.css

@@ -12,7 +12,7 @@
     --neutral: 213 22% 59%;
     --neutral-light: 214 69% 81%;
     --neutral-dark: 214 16% 21%;
-    --background: 236 62% 5%;
+    --background: 0 0% 0%;
     --foreground: 0 0% 98%;
     --card: 234 64% 10%;
     --card-foreground: 0 0% 98%;
@@ -215,7 +215,7 @@
   }
 
   body {
-    @apply !bg-black;
+    @apply !bg-background;
   }
 }