feat(storybook): sync webview themes and default styles from real VS Code

Author: EhabY

.storybook/global.css

@@ -1,3 +1,6 @@
+/* Storybook-specific layout. VS Code's default webview stylesheet is
+   imported from ./themes/generated/default-styles.css. */
+
 html {
 	background: var(--vscode-sideBar-background);
 }
@@ -24,85 +27,3 @@ body {
 	/* arbitrary size choice for the rough VSCode sidebar size */
 	width: 300px;
 }
-
-img,
-video {
-	max-width: 100%;
-	max-height: 100%;
-}
-
-a,
-a code {
-	color: var(--vscode-textLink-foreground);
-}
-
-p > a {
-	text-decoration: var(--text-link-decoration);
-}
-
-a:hover {
-	color: var(--vscode-textLink-activeForeground);
-}
-
-a:focus,
-input:focus,
-select:focus,
-textarea:focus {
-	outline: 1px solid -webkit-focus-ring-color;
-	outline-offset: -1px;
-}
-
-code {
-	font-family: var(--monaco-monospace-font);
-	color: var(--vscode-textPreformat-foreground);
-	background-color: var(--vscode-textPreformat-background);
-	padding: 1px 3px;
-	border-radius: 4px;
-}
-
-pre code {
-	padding: 0;
-}
-
-blockquote {
-	background: var(--vscode-textBlockQuote-background);
-	border-color: var(--vscode-textBlockQuote-border);
-}
-
-kbd {
-	background-color: var(--vscode-keybindingLabel-background);
-	color: var(--vscode-keybindingLabel-foreground);
-	border-style: solid;
-	border-width: 1px;
-	border-radius: 3px;
-	border-color: var(--vscode-keybindingLabel-border);
-	border-bottom-color: var(--vscode-keybindingLabel-bottomBorder);
-	box-shadow: inset 0 -1px 0 var(--vscode-widget-shadow);
-	vertical-align: middle;
-	padding: 1px 3px;
-}
-
-::-webkit-scrollbar {
-	width: 10px;
-	height: 10px;
-}
-
-::-webkit-scrollbar-corner {
-	background-color: var(--vscode-editor-background);
-}
-
-::-webkit-scrollbar-thumb {
-	background-color: var(--vscode-scrollbarSlider-background);
-}
-::-webkit-scrollbar-thumb:hover {
-	background-color: var(--vscode-scrollbarSlider-hoverBackground);
-}
-::-webkit-scrollbar-thumb:active {
-	background-color: var(--vscode-scrollbarSlider-activeBackground);
-}
-::highlight(find-highlight) {
-	background-color: var(--vscode-editor-findMatchHighlightBackground);
-}
-::highlight(current-find-highlight) {
-	background-color: var(--vscode-editor-findMatchBackground);
-}

.storybook/playground-themes.d.ts

@@ -1,13 +1,14 @@
 /// <reference types="vite/client" />
 
 import codiconCssUrl from "@vscode/codicons/dist/codicon.css?url";
-import { theme as darkTheme } from "@vscode-elements/webview-playground/dist/themes/dark-v2.js";
-import { theme as hcDarkTheme } from "@vscode-elements/webview-playground/dist/themes/hc-dark.js";
-import { theme as hcLightTheme } from "@vscode-elements/webview-playground/dist/themes/hc-light.js";
-import { theme as lightTheme } from "@vscode-elements/webview-playground/dist/themes/light-v2.js";
 import { createElement, useEffect } from "react";
 
 import "./global.css";
+import darkTheme from "./themes/generated/dark.json";
+import "./themes/generated/default-styles.css";
+import hcLightTheme from "./themes/generated/high-contrast-light.json";
+import hcDarkTheme from "./themes/generated/high-contrast.json";
+import lightTheme from "./themes/generated/light.json";
 
 import type { Preview } from "@storybook/react-vite";
 import type { WebviewApi } from "vscode-webview";
@@ -44,22 +45,17 @@ if (
 	document.head.appendChild(link);
 }
 
-// VS Code injects --vscode-font-family at runtime, but the upstream
-// vscode-elements theme data omits it. Set a static default so
-// Storybook (and Chromatic) renders with a predictable sans-serif
-// stack instead of falling back to the browser default (Times).
-const VSCODE_FONT_FAMILY =
-	'"Segoe WPC", "Segoe UI", system-ui, "Ubuntu", "Droid Sans", sans-serif';
-
-const THEMES: Record<
-	string,
-	{ variables: Array<[string, string]>; kind: string }
-> = {
-	light: { variables: lightTheme, kind: "vscode-light" },
-	dark: { variables: darkTheme, kind: "vscode-dark" },
-	"high-contrast": { variables: hcDarkTheme, kind: "vscode-high-contrast" },
+// Theme variable dumps captured from a real VS Code instance.
+// Regenerate with `pnpm sync:vscode-themes`.
+const THEMES: Record<string, { variables: string[][]; kind: string }> = {
+	light: { variables: lightTheme.variables, kind: "vscode-light" },
+	dark: { variables: darkTheme.variables, kind: "vscode-dark" },
+	"high-contrast": {
+		variables: hcDarkTheme.variables,
+		kind: "vscode-high-contrast",
+	},
 	"high-contrast-light": {
-		variables: hcLightTheme,
+		variables: hcLightTheme.variables,
 		kind: "vscode-high-contrast-light",
 	},
 };
@@ -100,7 +96,6 @@ const preview: Preview = {
 
 			useEffect(() => {
 				const root = document.documentElement.style;
-				root.setProperty("--vscode-font-family", VSCODE_FONT_FAMILY);
 
 				// Mirror VS Code's body attribute so theme-aware hooks work in Storybook.
 				document.body.setAttribute("data-vscode-theme-kind", kind);
@@ -115,7 +110,6 @@ const preview: Preview = {
 					variables.forEach(([property]) => {
 						root.removeProperty(property);
 					});
-					root.removeProperty("--vscode-font-family");
 					document.body.removeAttribute("data-vscode-theme-kind");
 				};
 			}, [variables, kind]);