oops (#117)

Rich-Harris · web-flow · commit 9e4672fbec90 · 2024-09-25T19:43:42.000-04:00
diff --git a/apps/svelte.dev/content/tutorial/+assets/src/app.html b/apps/svelte.dev/content/tutorial/+assets/src/app.html
@@ -244,7 +244,7 @@
 				opacity: 1;
 			}
 
-			body.dark {
+			html.dark {
 				--bg-1: hsl(0, 0%, 18%);
 				--bg-2: hsl(0, 0%, 30%);
 				--bg-3: hsl(0, 0%, 40%);
diff --git a/apps/svelte.dev/scripts/create-tutorial-zip/common/src/app.html b/apps/svelte.dev/scripts/create-tutorial-zip/common/src/app.html
@@ -244,7 +244,7 @@
 				opacity: 1;
 			}
 
-			body.dark {
+			html.dark {
 				--bg-1: hsl(0, 0%, 18%);
 				--bg-2: hsl(0, 0%, 30%);
 				--bg-3: hsl(0, 0%, 40%);
diff --git a/apps/svelte.dev/src/routes/_home/Deployment.svelte b/apps/svelte.dev/src/routes/_home/Deployment.svelte
@@ -287,11 +287,11 @@
 		}
 	}
 
-	:global(body.dark) .platforms .invert img {
+	:global(html.dark) .platforms .invert img {
 		--invert: 1;
 	}
 
-	:global(body.dark) .platforms .invert-hover img {
+	:global(html.dark) .platforms .invert-hover img {
 		--invert-hover: 1;
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/_home/Hero.svelte b/apps/svelte.dev/src/routes/_home/Hero.svelte
@@ -164,7 +164,7 @@
 		}
 	}
 
-	:global(body.dark) .hero {
+	:global(html.dark) .hero {
 		background: radial-gradient(
 				64.14% 72.25% at 47.58% 31.75%,
 				hsl(209deg 6% 47% / 52%) 0%,
@@ -179,7 +179,7 @@
 			linear-gradient(0deg, hsl(204, 38%, 20%), hsl(204, 10%, 90%));
 	}
 
-	:global(body.dark) .logotype {
+	:global(html.dark) .logotype {
 		filter: invert(4) brightness(1.2);
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte b/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte
@@ -142,21 +142,21 @@
 			mix-blend-mode: screen;
 		}
 
-		:global(body.light) .hero {
+		:global(html.light) .hero {
 			background: var(--gradient);
 		}
 
-		:global(body.light) .hero-text :global(svg) {
+		:global(html.light) .hero-text :global(svg) {
 			mix-blend-mode: initial;
 		}
 	}
 
-	:global(body.dark) .hero {
+	:global(html.dark) .hero {
 		background: hsl(210, 7%, 20%);
 		background: var(--dark-gradient);
 	}
 
-	:global(body.dark) .hero-text :global(svg) {
+	:global(html.dark) .hero-text :global(svg) {
 		mix-blend-mode: screen;
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/_home/WhosUsingSvelte/index.svelte b/apps/svelte.dev/src/routes/_home/WhosUsingSvelte/index.svelte
@@ -95,7 +95,7 @@
 		}
 	}
 
-	:global(body.dark) .logos a {
+	:global(html.dark) .logos a {
 		--invert: 1;
 		filter: grayscale(1) contrast(4) opacity(0.7) invert(var(--invert, 0));
 	}
diff --git a/apps/svelte.dev/src/routes/_home/common.css b/apps/svelte.dev/src/routes/_home/common.css
@@ -41,13 +41,13 @@
 		--background-2: #444;
 	}
 
-	body.light .home {
+	html.light .home {
 		--background-1: radial-gradient(circle at top right, rgb(230, 233, 236), rgb(244, 245, 247));
 		--background-2: var(--sk-theme-2);
 	}
 }
 
-body.dark .home {
+html.dark .home {
 	/* --background-1: radial-gradient(circle at top right, rgb(49, 49, 49), rgb(77, 77, 77)); */
 	--background-1: #222;
 	--background-2: #444;
diff --git a/apps/svelte.dev/src/routes/_home/svelte-kit-logotype.svg.svelte b/apps/svelte.dev/src/routes/_home/svelte-kit-logotype.svg.svelte
@@ -27,20 +27,20 @@
 			fill: #8d8d93;
 		}
 
-		:global(body.light) .svelte {
+		:global(html.light) .svelte {
 			fill: hsl(0, 0%, 27%);
 		}
 
-		:global(body.light) .kit {
+		:global(html.light) .kit {
 			fill: #8d8d93;
 		}
 	}
 
-	:global(body.dark) .svelte {
+	:global(html.dark) .svelte {
 		fill: hsl(0, 0%, 80%);
 	}
 
-	:global(body.dark) .kit {
+	:global(html.dark) .kit {
 		fill: #8d8d93;
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
@@ -143,7 +143,7 @@
 		--color: rgba(255, 0, 0, 0.1);
 	}
 
-	:global(body.dark) .text :global(pre) :global(.highlight.remove) {
+	:global(html.dark) .text :global(pre) :global(.highlight.remove) {
 		--color: rgba(255, 0, 0, 0.27);
 	}
 
diff --git a/packages/repl/src/lib/Output/srcdoc/index.html b/packages/repl/src/lib/Output/srcdoc/index.html
@@ -51,7 +51,7 @@
 				padding: 0;
 			}
 
-			body.dark {
+			html.dark {
 				color-scheme: dark;
 				--bg-1: hsl(0, 0%, 18%);
 				--bg-2: hsl(0, 0%, 30%);
diff --git a/packages/site-kit/src/lib/home/TrySection.svelte b/packages/site-kit/src/lib/home/TrySection.svelte
@@ -35,7 +35,7 @@
 		--background-2: var(--sk-back-4);
 	}
 
-	:global(body.dark .try-container) {
+	:global(html.dark .try-container) {
 		--background-2: #444;
 	}
 
@@ -44,7 +44,7 @@
 			--background-2: #444;
 		}
 
-		:global(body.light .try-container) {
+		:global(html.light .try-container) {
 			--background-2: var(--sk-back-4) !important;
 		}
 	}
diff --git a/packages/site-kit/src/lib/styles/code.css b/packages/site-kit/src/lib/styles/code.css
@@ -1,8 +1,8 @@
 @import './base.css';
 
 body,
-body.light,
-body.dark {
+html.light,
+html.dark {
 	--shiki-color-text: var(--sk-code-base);
 	--shiki-color-background: hsl(var(--sk-back-3-hsl));
 	--shiki-token-constant: var(--sk-code-base);

Original file line number	Diff line number	Diff line change
`@@ -244,7 +244,7 @@`
`244`	`244`	`opacity: 1;`
`245`	`245`	`}`
`246`	`246`
`247`		`- body.dark {`
	`247`	`+ html.dark {`
`248`	`248`	`--bg-1: hsl(0, 0%, 18%);`
`249`	`249`	`--bg-2: hsl(0, 0%, 30%);`
`250`	`250`	`--bg-3: hsl(0, 0%, 40%);`
Original file line number	Diff line number	Diff line change
`@@ -287,11 +287,11 @@`
`287`	`287`	`}`
`288`	`288`	`}`
`289`	`289`
`290`		`- :global(body.dark) .platforms .invert img {`
	`290`	`+ :global(html.dark) .platforms .invert img {`
`291`	`291`	`--invert: 1;`
`292`	`292`	`}`
`293`	`293`
`294`		`- :global(body.dark) .platforms .invert-hover img {`
	`294`	`+ :global(html.dark) .platforms .invert-hover img {`
`295`	`295`	`--invert-hover: 1;`
`296`	`296`	`}`
`297`	`297`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -164,7 +164,7 @@`
`164`	`164`	`}`
`165`	`165`	`}`
`166`	`166`
`167`		`- :global(body.dark) .hero {`
	`167`	`+ :global(html.dark) .hero {`
`168`	`168`	`background: radial-gradient(`
`169`	`169`	`64.14% 72.25% at 47.58% 31.75%,`
`170`	`170`	`hsl(209deg 6% 47% / 52%) 0%,`
`@@ -179,7 +179,7 @@`
`179`	`179`	`linear-gradient(0deg, hsl(204, 38%, 20%), hsl(204, 10%, 90%));`
`180`	`180`	`}`
`181`	`181`
`182`		`- :global(body.dark) .logotype {`
	`182`	`+ :global(html.dark) .logotype {`
`183`	`183`	`filter: invert(4) brightness(1.2);`
`184`	`184`	`}`
`185`	`185`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -142,21 +142,21 @@`
`142`	`142`	`mix-blend-mode: screen;`
`143`	`143`	`}`
`144`	`144`
`145`		`- :global(body.light) .hero {`
	`145`	`+ :global(html.light) .hero {`
`146`	`146`	`background: var(--gradient);`
`147`	`147`	`}`
`148`	`148`
`149`		`- :global(body.light) .hero-text :global(svg) {`
	`149`	`+ :global(html.light) .hero-text :global(svg) {`
`150`	`150`	`mix-blend-mode: initial;`
`151`	`151`	`}`
`152`	`152`	`}`
`153`	`153`
`154`		`- :global(body.dark) .hero {`
	`154`	`+ :global(html.dark) .hero {`
`155`	`155`	`background: hsl(210, 7%, 20%);`
`156`	`156`	`background: var(--dark-gradient);`
`157`	`157`	`}`
`158`	`158`
`159`		`- :global(body.dark) .hero-text :global(svg) {`
	`159`	`+ :global(html.dark) .hero-text :global(svg) {`
`160`	`160`	`mix-blend-mode: screen;`
`161`	`161`	`}`
`162`	`162`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -95,7 +95,7 @@`
`95`	`95`	`}`
`96`	`96`	`}`
`97`	`97`
`98`		`- :global(body.dark) .logos a {`
	`98`	`+ :global(html.dark) .logos a {`
`99`	`99`	`--invert: 1;`
`100`	`100`	`filter: grayscale(1) contrast(4) opacity(0.7) invert(var(--invert, 0));`
`101`	`101`	`}`
Original file line number	Diff line number	Diff line change
`@@ -41,13 +41,13 @@`
`41`	`41`	`--background-2: #444;`
`42`	`42`	`}`
`43`	`43`
`44`		`- body.light .home {`
	`44`	`+ html.light .home {`
`45`	`45`	`--background-1: radial-gradient(circle at top right, rgb(230, 233, 236), rgb(244, 245, 247));`
`46`	`46`	`--background-2: var(--sk-theme-2);`
`47`	`47`	`}`
`48`	`48`	`}`
`49`	`49`
`50`		`-body.dark .home {`
	`50`	`+html.dark .home {`
`51`	`51`	`/* --background-1: radial-gradient(circle at top right, rgb(49, 49, 49), rgb(77, 77, 77)); */`
`52`	`52`	`--background-1: #222;`
`53`	`53`	`--background-2: #444;`
Original file line number	Diff line number	Diff line change
`@@ -27,20 +27,20 @@`
`27`	`27`	`fill: #8d8d93;`
`28`	`28`	`}`
`29`	`29`
`30`		`- :global(body.light) .svelte {`
	`30`	`+ :global(html.light) .svelte {`
`31`	`31`	`fill: hsl(0, 0%, 27%);`
`32`	`32`	`}`
`33`	`33`
`34`		`- :global(body.light) .kit {`
	`34`	`+ :global(html.light) .kit {`
`35`	`35`	`fill: #8d8d93;`
`36`	`36`	`}`
`37`	`37`	`}`
`38`	`38`
`39`		`- :global(body.dark) .svelte {`
	`39`	`+ :global(html.dark) .svelte {`
`40`	`40`	`fill: hsl(0, 0%, 80%);`
`41`	`41`	`}`
`42`	`42`
`43`		`- :global(body.dark) .kit {`
	`43`	`+ :global(html.dark) .kit {`
`44`	`44`	`fill: #8d8d93;`
`45`	`45`	`}`
`46`	`46`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -143,7 +143,7 @@`
`143`	`143`	`--color: rgba(255, 0, 0, 0.1);`
`144`	`144`	`}`
`145`	`145`
`146`		`- :global(body.dark) .text :global(pre) :global(.highlight.remove) {`
	`146`	`+ :global(html.dark) .text :global(pre) :global(.highlight.remove) {`
`147`	`147`	`--color: rgba(255, 0, 0, 0.27);`
`148`	`148`	`}`
`149`	`149`
Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,7 @@`
`51`	`51`	`padding: 0;`
`52`	`52`	`}`
`53`	`53`
`54`		`- body.dark {`
	`54`	`+ html.dark {`
`55`	`55`	`color-scheme: dark;`
`56`	`56`	`--bg-1: hsl(0, 0%, 18%);`
`57`	`57`	`--bg-2: hsl(0, 0%, 30%);`