[Workers] Use correct diagram component for isolates

Author: KianNH

src/components/WorkersIsolateDiagram.astro

@@ -262,20 +262,20 @@ let range = (n: number) => [...Array(n).keys()];
 		right: 0;
 		bottom: 0;
 		left: 0;
-		background: rgba(var(--sl-color-text-accent), 0.25);
+		background: color-mix(in srgb, var(--sl-color-accent-high) 25%, transparent);
 	}
 
 	.ArchitectureDiagram--user-code {
 		position: relative;
 		z-index: 1;
 		width: var(--user-code-size);
 		height: var(--user-code-size);
-		background: rgba(var(--accent-color-rgb), 0.9);
+		background: color-mix(in srgb, var(--sl-color-accent-high) 90%, transparent);
 	}
 
 	.ArchitectureDiagram--process-overhead-background,
 	.ArchitectureDiagram--user-code {
-		--box-shadow: inset 0 0 0 1px rgb(var(--background-color-rgb));
+		--box-shadow: inset 0 0 0 1px var(--sl-color-bg);
 		box-shadow: var(--box-shadow);
 	}
 
@@ -288,7 +288,7 @@ let range = (n: number) => [...Array(n).keys()];
 		height: 100%;
 		width: 100%;
 		text-align: center;
-		color: rgba(var(--background-color-rgb), 0.7);
+		color: color-mix(in srgb, var(--sl-color-bg) 70%, transparent);
 	}
 
 	.ArchitectureDiagram--key-user-code {

src/content/docs/workers/reference/how-workers-works.mdx

@@ -7,7 +7,7 @@ description: The difference between the Workers runtime versus traditional
 
 ---
 
-import { Render, NetworkMap, WorkersArchitectureDiagram } from "~/components"
+import { Render, NetworkMap, WorkersIsolateDiagram } from "~/components"
 
 Though Cloudflare Workers behave similarly to [JavaScript](https://www.cloudflare.com/learning/serverless/serverless-javascript/) in the browser or in Node.js, there are a few differences in how you have to think about your code. Under the hood, the Workers runtime uses the [V8 engine](https://www.cloudflare.com/learning/serverless/glossary/what-is-chrome-v8/) — the same engine used by Chromium and Node.js. The Workers runtime also implements many of the standard [APIs](/workers/runtime-apis/) available in most modern browsers.
 
@@ -27,7 +27,7 @@ The three largest differences are: Isolates, Compute per Request, and Distribute
 
 <Render file="isolate-description" />
 
-<WorkersArchitectureDiagram/>
+<WorkersIsolateDiagram/>
 
 A given isolate has its own scope, but isolates are not necessarily long-lived. An isolate may be spun down and evicted for a number of reasons: