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