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/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" />