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