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>

extensions/cornerstone/src/components/DicomUpload/DicomUpload.tsx

@@ -16,7 +16,7 @@ type DicomUploadProps = {
 
 function DicomUpload({ dataSource, onComplete, onStarted }: DicomUploadProps): ReactElement {
   const baseClassNames =
-    'min-h-[375px] flex flex-col bg-black select-none rounded-lg overflow-hidden';
+    'min-h-[375px] flex flex-col bg-background select-none rounded-lg overflow-hidden';
   const [dicomFileUploaderArr, setDicomFileUploaderArr] = useState([]);
 
   const onDrop = useCallback(async acceptedFiles => {

extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx

@@ -372,7 +372,7 @@ function DicomUploadProgress({
   return (
     <div className="flex grow flex-col">
       {getNumCompletedAndTimeRemainingComponent()}
-      <div className="flex grow flex-col overflow-hidden bg-black text-lg">
+      <div className="flex grow flex-col overflow-hidden bg-background text-lg">
         {getPercentCompleteComponent()}
         <div className="ohif-scrollbar h-1 grow overflow-y-scroll px-2">
           {dicomFileUploaderArr

extensions/cornerstone/src/components/PanelAccordionTrigger.tsx

@@ -28,7 +28,7 @@ export default function PanelAccordionTrigger(props) {
       <div className={`inline-flex text-base ${isActive ? 'bg-popover' : 'bg-muted'} flex-grow`}>
         <button onClick={onClickDefault.bind(props)}>
           <span
-            className={`inline-flex rounded-l border-r border-black ${isActive ? 'bg-highlight' : 'bg-muted'}`}
+            className={`inline-flex rounded-l border-r border-background ${isActive ? 'bg-highlight' : 'bg-muted'}`}
           >
             {count !== undefined ? <span className="px-2">{count}</span> : null}
             {colorHex && <ColorCircle colorHex={colorHex} />}

extensions/cornerstone/src/components/SegmentationToolConfig.tsx

@@ -34,7 +34,7 @@ export default function SegmentationToolConfig() {
   };
 
   return (
-    <div className="bg-muted flex flex-col gap-2 border-b border-b-[2px] border-black px-2 py-3">
+    <div className="bg-muted flex flex-col gap-2 border-b border-b-[2px] border-background px-2 py-3">
       <div className="flex items-center gap-2">
         <Switch
           checked={previewEdits}

extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresetsContent.tsx

@@ -61,7 +61,7 @@ export function VolumeRenderingPresetsContent({ presets, viewportId, hide }: Pro
                 className={
                   selectedPreset?.name === preset.name
                     ? 'border-highlight h-[75px] w-[95px] max-w-none rounded border-2'
-                    : 'hover:border-highlight h-[75px] w-[95px] max-w-none rounded border-2 border-black'
+                    : 'hover:border-highlight h-[75px] w-[95px] max-w-none rounded border-2 border-background'
                 }
               />
               <label className="text-muted-foreground mt-1 text-left text-xs">

extensions/cornerstone/src/customizations/captureViewportModalCustomization.tsx

@@ -66,7 +66,7 @@ function ViewportDownloadFormNew({
           >
             {warningState.enabled && showWarningMessage && (
               <div
-                className="text-foreground absolute left-1/2 bottom-[5px] z-[1000] -translate-x-1/2 whitespace-nowrap rounded bg-black p-3 text-xs font-bold"
+                className="text-foreground absolute left-1/2 bottom-[5px] z-[1000] -translate-x-1/2 whitespace-nowrap rounded bg-background p-3 text-xs font-bold"
                 style={{
                   fontSize: '12px',
                 }}

extensions/default/src/Components/DataSourceConfigurationModalComponent.tsx

@@ -100,7 +100,7 @@ function DataSourceConfigurationModalComponent({
   const getSelectedItemBackgroundClasses = itemIndex =>
     itemIndex < selectedItems.length
       ? classNames(
-          'bg-black/[.4]',
+          'bg-background/[.4]',
           itemIndex !== itemLabels.length - 1 ? 'hover:bg-transparent active:bg-popover' : ''
         )
       : 'bg-transparent';
@@ -121,7 +121,7 @@ function DataSourceConfigurationModalComponent({
         <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>
+        <div className="grow bg-background p-4 text-[14px]">{errorMessage}</div>
       </div>
     );
   };
@@ -180,7 +180,7 @@ function DataSourceConfigurationModalComponent({
   return (
     <div className="flex h-[calc(100vh-300px)] select-none flex-col gap-4 pt-0.5">
       {getSelectedItemsComponent()}
-      <div className="h-0.5 w-full shrink-0 bg-black"></div>
+      <div className="h-0.5 w-full shrink-0 bg-background"></div>
       {errorMessage ? (
         getErrorComponent()
       ) : (

extensions/default/src/Components/ItemListComponent.tsx

@@ -44,7 +44,7 @@ function ItemListComponent({
           <InputFilter.ClearButton className="text-primary mr-0.5 p-0.5" />
         </InputFilter>
       </div>
-      <div className="relative flex min-h-[1px] grow flex-col bg-black text-[14px]">
+      <div className="relative flex min-h-[1px] grow flex-col bg-background text-[14px]">
         {itemList == null ? (
           <LoadingIndicatorProgress className={'h-full w-full'} />
         ) : itemList.length === 0 ? (

extensions/default/src/DicomTagBrowser/DicomTagTable.tsx

@@ -39,7 +39,7 @@ const RowComponent = ({
     <div
       style={{ ...style, ...rowStyle }}
       className={classNames(
-        'hover:bg-primary/25 border-input text-foreground flex w-full flex-row items-center break-all bg-black text-base',
+        'hover:bg-primary/25 border-input text-foreground flex w-full flex-row items-center break-all bg-background text-base',
         lineHeightClassName
       )}
       key={keyPrefix}
@@ -281,7 +281,7 @@ function DicomTagTable({ rows }: { rows: Row[] }) {
         valueRef={valueRef}
       />
       <div
-        className="relative m-auto border-2 border-black bg-black"
+        className="relative m-auto border-2 border-background bg-background"
         style={{ height: '32rem' }}
       >
         {isHeaderRendered() && (

extensions/default/src/Panels/StudyBrowser/PanelStudyBrowser.tsx

@@ -410,7 +410,7 @@ function PanelStudyBrowser({
         />
         <Separator
           orientation="horizontal"
-          className="bg-black"
+          className="bg-background"
           thickness="2px"
         />
       </>

extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx

@@ -176,7 +176,7 @@ function ToolbarLayoutSelectorWithServices({
           )}
 
           {/* Right Side - Grid Layout */}
-          <div className="bg-muted flex flex-col gap-2.5 border-l-2 border-solid border-black p-2">
+          <div className="bg-muted flex flex-col gap-2.5 border-l-2 border-solid border-background p-2">
             <div className="text-muted-foreground text-xs">{t('Custom')}</div>
             <LayoutSelector.GridSelector
               rows={rows}

extensions/default/src/ViewerLayout/index.tsx

@@ -9,7 +9,7 @@ import SidePanelWithServices from '../Components/SidePanelWithServices';
 import { Onboarding, ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@ohif/ui-next';
 import useResizablePanels from './ResizablePanelsHook';
 
-const resizableHandleClassName = 'mt-[1px] bg-black';
+const resizableHandleClassName = 'mt-[1px] bg-background';
 
 function ViewerLayout({
   // From Extension Module Params
@@ -79,11 +79,11 @@ function ViewerLayout({
    * is sized to our viewport.
    */
   useEffect(() => {
-    document.body.classList.add('bg-black');
+    document.body.classList.add('bg-background');
     document.body.classList.add('overflow-hidden');
 
     return () => {
-      document.body.classList.remove('bg-black');
+      document.body.classList.remove('bg-background');
       document.body.classList.remove('overflow-hidden');
     };
   }, []);
@@ -158,11 +158,11 @@ function ViewerLayout({
         appConfig={appConfig}
       />
       <div
-        className="relative flex w-full flex-row flex-nowrap items-stretch overflow-hidden bg-black"
+        className="relative flex w-full flex-row flex-nowrap items-stretch overflow-hidden bg-background"
         style={{ height: 'calc(100vh - 52px' }}
       >
         <React.Fragment>
-          {showLoadingIndicator && <LoadingIndicatorProgress className="h-full w-full bg-black" />}
+          {showLoadingIndicator && <LoadingIndicatorProgress className="h-full w-full bg-background" />}
           <ResizablePanelGroup {...resizablePanelGroupProps}>
             {/* LEFT SIDEPANELS */}
             {hasLeftPanels ? (
@@ -186,7 +186,7 @@ function ViewerLayout({
             <ResizablePanel {...resizableViewportGridPanelProps}>
               <div className="flex h-full flex-1 flex-col">
                 <div
-                  className="relative flex h-full flex-1 items-center justify-center overflow-hidden bg-black"
+                  className="relative flex h-full flex-1 items-center justify-center overflow-hidden bg-background"
                   onMouseEnter={handleMouseEnter}
                 >
                   <ViewportGridComp

extensions/tmtv/src/Panels/PanelPetSUV.tsx

@@ -163,7 +163,7 @@ export default function PanelPetSUV() {
   return (
     <>
       <div className="ohif-scrollbar flex min-h-0 flex-auto select-none flex-col justify-between overflow-auto">
-        <div className="flex min-h-0 flex-1 flex-col bg-black text-base">
+        <div className="flex min-h-0 flex-1 flex-col bg-background text-base">
           <PanelSection defaultOpen={true}>
             <PanelSection.Header>{t('Patient Information')}</PanelSection.Header>
             <PanelSection.Content>

extensions/usAnnotation/src/panels/USAnnotationPanel.tsx

@@ -395,7 +395,7 @@ export default function USAnnotationPanel() {
    *  🖼  Final Render                                      */
   return (
     <div
-      className="text-foreground h-full bg-black"
+      className="text-foreground h-full bg-background"
       style={{ minWidth: 240, maxWidth: 480, width: '100%' }}
     >
       {/* Workflow */}