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',
                 }}