diff --git a/.storybook/playground-themes.d.ts b/.storybook/playground-themes.d.ts new file mode 100644 index 0000000000..a6d061ac37 --- /dev/null +++ b/.storybook/playground-themes.d.ts @@ -0,0 +1,4 @@ +// The playground publishes untyped ESM theme modules (JSDoc only). +declare module "@vscode-elements/webview-playground/dist/themes/*.js" { + export const theme: Array<[string, string]>; +} diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 349e0c4b50..1b7b7b57b8 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,11 +1,13 @@ /// 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/dark-v2"; -import { lightTheme } from "./themes/light-v2"; import type { Preview } from "@storybook/react-vite"; import type { WebviewApi } from "vscode-webview"; @@ -49,6 +51,19 @@ if ( 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" }, + "high-contrast-light": { + variables: hcLightTheme, + kind: "vscode-high-contrast-light", + }, +}; + const preview: Preview = { parameters: { layout: "centered", @@ -63,6 +78,16 @@ const preview: Preview = { items: [ { value: "light", icon: "circlehollow", title: "Light" }, { value: "dark", icon: "circle", title: "Dark" }, + { + value: "high-contrast", + icon: "contrast", + title: "High Contrast", + }, + { + value: "high-contrast-light", + icon: "sun", + title: "High Contrast Light", + }, ], dynamicTitle: true, }, @@ -70,26 +95,30 @@ const preview: Preview = { }, decorators: [ (Story, context) => { - const selectedTheme = - context.globals.theme === "light" ? lightTheme : darkTheme; + const { variables, kind } = + THEMES[context.globals.theme as string] ?? THEMES.dark; 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); + // Apply CSS custom properties to the document root - selectedTheme.forEach(([property, value]) => { + variables.forEach(([property, value]) => { root.setProperty(property, value); }); // Cleanup function to remove properties when unmounting return () => { - selectedTheme.forEach(([property]) => { + variables.forEach(([property]) => { root.removeProperty(property); }); root.removeProperty("--vscode-font-family"); + document.body.removeAttribute("data-vscode-theme-kind"); }; - }, [selectedTheme]); + }, [variables, kind]); return createElement("div", { id: "root" }, createElement(Story)); }, diff --git a/.storybook/themes/dark-v2.ts b/.storybook/themes/dark-v2.ts deleted file mode 100644 index a6d3c6829b..0000000000 --- a/.storybook/themes/dark-v2.ts +++ /dev/null @@ -1,959 +0,0 @@ -// Sourced from `vscode-elements/webview-playground`. -// https://github.com/vscode-elements/webview-playground/blob/f9a6f90413d0cc535839fb92445b7a5eebc540d7/dist/themes/dark-v2.js - -export const darkTheme: Array<[string, string]> = [ - ["--vscode-actionBar-toggledBackground", "#383a49"], - ["--vscode-activityBar-activeBorder", "#0078d4"], - ["--vscode-activityBar-background", "#181818"], - ["--vscode-activityBar-border", "#2b2b2b"], - ["--vscode-activityBar-dropBorder", "#d7d7d7"], - ["--vscode-activityBar-foreground", "#d7d7d7"], - ["--vscode-activityBar-inactiveForeground", "#868686"], - ["--vscode-activityBarBadge-background", "#0078d4"], - ["--vscode-activityBarBadge-foreground", "#ffffff"], - ["--vscode-activityBarTop-activeBorder", "#e7e7e7"], - ["--vscode-activityBarTop-dropBorder", "#e7e7e7"], - ["--vscode-activityBarTop-foreground", "#e7e7e7"], - ["--vscode-activityBarTop-inactiveForeground", "rgba(231, 231, 231, 0.6)"], - ["--vscode-activityErrorBadge-background", "#f14c4c"], - ["--vscode-activityErrorBadge-foreground", "#000000"], - ["--vscode-activityWarningBadge-background", "#b27c00"], - ["--vscode-activityWarningBadge-foreground", "#ffffff"], - ["--vscode-agentSessionReadIndicator-foreground", "rgba(204, 204, 204, 0.2)"], - ["--vscode-agentSessionSelectedBadge-border", "rgba(255, 255, 255, 0.3)"], - [ - "--vscode-agentSessionSelectedUnfocusedBadge-border", - "rgba(204, 204, 204, 0.3)", - ], - ["--vscode-agentStatusIndicator-background", "rgba(255, 255, 255, 0.05)"], - ["--vscode-aiCustomizationManagement-sashBorder", "#2b2b2b"], - ["--vscode-badge-background", "#616161"], - ["--vscode-badge-foreground", "#f8f8f8"], - ["--vscode-banner-background", "#04395e"], - ["--vscode-banner-foreground", "#ffffff"], - ["--vscode-banner-iconForeground", "#59a4f9"], - ["--vscode-bodyFontSize", "13px"], - ["--vscode-bodyFontSize-small", "12px"], - ["--vscode-bodyFontSize-xSmall", "11px"], - ["--vscode-breadcrumb-activeSelectionForeground", "#e0e0e0"], - ["--vscode-breadcrumb-background", "#1f1f1f"], - ["--vscode-breadcrumb-focusForeground", "#e0e0e0"], - ["--vscode-breadcrumb-foreground", "rgba(204, 204, 204, 0.8)"], - ["--vscode-breadcrumbPicker-background", "#202020"], - ["--vscode-browser-border", "#2b2b2b"], - ["--vscode-button-background", "#0078d4"], - ["--vscode-button-border", "rgba(255, 255, 255, 0.1)"], - ["--vscode-button-foreground", "#ffffff"], - ["--vscode-button-hoverBackground", "#026ec1"], - ["--vscode-button-secondaryBackground", "rgba(0, 0, 0, 0)"], - ["--vscode-button-secondaryForeground", "#cccccc"], - ["--vscode-button-secondaryHoverBackground", "#2b2b2b"], - ["--vscode-button-separator", "rgba(255, 255, 255, 0.4)"], - ["--vscode-chart-axis", "rgba(191, 191, 191, 0.4)"], - ["--vscode-chart-guide", "rgba(191, 191, 191, 0.2)"], - ["--vscode-chart-line", "#236b8e"], - ["--vscode-charts-blue", "#59a4f9"], - ["--vscode-charts-foreground", "#cccccc"], - ["--vscode-charts-green", "#89d185"], - ["--vscode-charts-lines", "rgba(204, 204, 204, 0.5)"], - ["--vscode-charts-orange", "rgba(234, 92, 0, 0.33)"], - ["--vscode-charts-purple", "#b180d7"], - ["--vscode-charts-red", "#f14c4c"], - ["--vscode-charts-yellow", "#cca700"], - ["--vscode-chat-avatarBackground", "#1f1f1f"], - ["--vscode-chat-avatarForeground", "#cccccc"], - ["--vscode-chat-checkpointSeparator", "#585858"], - ["--vscode-chat-editedFileForeground", "#e2c08d"], - ["--vscode-chat-linesAddedForeground", "#54b054"], - ["--vscode-chat-linesRemovedForeground", "#fc6a6a"], - ["--vscode-chat-requestBackground", "rgba(31, 31, 31, 0.62)"], - ["--vscode-chat-requestBorder", "rgba(255, 255, 255, 0.1)"], - ["--vscode-chat-requestBubbleBackground", "rgba(38, 79, 120, 0.3)"], - ["--vscode-chat-requestBubbleHoverBackground", "rgba(38, 79, 120, 0.6)"], - ["--vscode-chat-requestCodeBorder", "rgba(0, 73, 114, 0.72)"], - ["--vscode-chat-slashCommandBackground", "rgba(38, 71, 120, 0.4)"], - ["--vscode-chat-slashCommandForeground", "#85b6ff"], - ["--vscode-chat-thinkingShimmer", "#ffffff"], - ["--vscode-chatManagement-sashBorder", "#2b2b2b"], - ["--vscode-checkbox-background", "#313131"], - ["--vscode-checkbox-border", "#3c3c3c"], - ["--vscode-checkbox-disabled.background", "#646464"], - ["--vscode-checkbox-disabled.foreground", "#989898"], - ["--vscode-checkbox-foreground", "#cccccc"], - ["--vscode-checkbox-selectBackground", "#202020"], - ["--vscode-checkbox-selectBorder", "#cccccc"], - ["--vscode-codiconFontSize", "16px"], - ["--vscode-commandCenter-activeBackground", "rgba(255, 255, 255, 0.08)"], - ["--vscode-commandCenter-activeBorder", "rgba(204, 204, 204, 0.3)"], - ["--vscode-commandCenter-activeForeground", "#cccccc"], - ["--vscode-commandCenter-background", "rgba(255, 255, 255, 0.05)"], - ["--vscode-commandCenter-border", "rgba(204, 204, 204, 0.2)"], - ["--vscode-commandCenter-debuggingBackground", "rgba(0, 120, 212, 0.26)"], - ["--vscode-commandCenter-foreground", "#cccccc"], - ["--vscode-commandCenter-inactiveBorder", "rgba(157, 157, 157, 0.25)"], - ["--vscode-commandCenter-inactiveForeground", "#9d9d9d"], - ["--vscode-commentsView-resolvedIcon", "rgba(204, 204, 204, 0.5)"], - ["--vscode-commentsView-unresolvedIcon", "#0078d4"], - ["--vscode-cornerRadius-circle", "9999px"], - ["--vscode-cornerRadius-large", "8px"], - ["--vscode-cornerRadius-medium", "6px"], - ["--vscode-cornerRadius-small", "4px"], - ["--vscode-cornerRadius-xLarge", "12px"], - ["--vscode-cornerRadius-xSmall", "2px"], - ["--vscode-debugConsole-errorForeground", "#f85149"], - ["--vscode-debugConsole-infoForeground", "#59a4f9"], - ["--vscode-debugConsole-sourceForeground", "#cccccc"], - ["--vscode-debugConsole-warningForeground", "#cca700"], - ["--vscode-debugConsoleInputIcon-foreground", "#cccccc"], - ["--vscode-debugExceptionWidget-background", "#420b0d"], - ["--vscode-debugExceptionWidget-border", "#a31515"], - ["--vscode-debugIcon-breakpointCurrentStackframeForeground", "#ffcc00"], - ["--vscode-debugIcon-breakpointDisabledForeground", "#848484"], - ["--vscode-debugIcon-breakpointForeground", "#e51400"], - ["--vscode-debugIcon-breakpointStackframeForeground", "#89d185"], - ["--vscode-debugIcon-breakpointUnverifiedForeground", "#848484"], - ["--vscode-debugIcon-continueForeground", "#75beff"], - ["--vscode-debugIcon-disconnectForeground", "#f48771"], - ["--vscode-debugIcon-pauseForeground", "#75beff"], - ["--vscode-debugIcon-restartForeground", "#89d185"], - ["--vscode-debugIcon-startForeground", "#89d185"], - ["--vscode-debugIcon-stepBackForeground", "#75beff"], - ["--vscode-debugIcon-stepIntoForeground", "#75beff"], - ["--vscode-debugIcon-stepOutForeground", "#75beff"], - ["--vscode-debugIcon-stepOverForeground", "#75beff"], - ["--vscode-debugIcon-stopForeground", "#f48771"], - ["--vscode-debugTokenExpression-boolean", "#4e94ce"], - ["--vscode-debugTokenExpression-error", "#f48771"], - ["--vscode-debugTokenExpression-name", "#c586c0"], - ["--vscode-debugTokenExpression-number", "#b5cea8"], - ["--vscode-debugTokenExpression-string", "#ce9178"], - ["--vscode-debugTokenExpression-type", "#4a90e2"], - ["--vscode-debugTokenExpression-value", "rgba(204, 204, 204, 0.6)"], - ["--vscode-debugToolBar-background", "#181818"], - ["--vscode-debugView-exceptionLabelBackground", "#6c2022"], - ["--vscode-debugView-exceptionLabelForeground", "#cccccc"], - ["--vscode-debugView-stateLabelBackground", "rgba(136, 136, 136, 0.27)"], - ["--vscode-debugView-stateLabelForeground", "#cccccc"], - ["--vscode-debugView-valueChangedHighlight", "#569cd6"], - ["--vscode-descriptionForeground", "#9d9d9d"], - ["--vscode-diffEditor-diagonalFill", "rgba(204, 204, 204, 0.2)"], - ["--vscode-diffEditor-insertedLineBackground", "rgba(155, 185, 85, 0.2)"], - ["--vscode-diffEditor-insertedTextBackground", "rgba(156, 204, 44, 0.2)"], - ["--vscode-diffEditor-move.border", "rgba(139, 139, 139, 0.61)"], - ["--vscode-diffEditor-moveActive.border", "#ffa500"], - ["--vscode-diffEditor-removedLineBackground", "rgba(255, 0, 0, 0.2)"], - ["--vscode-diffEditor-removedTextBackground", "rgba(255, 0, 0, 0.2)"], - ["--vscode-diffEditor-unchangedCodeBackground", "rgba(116, 116, 116, 0.16)"], - ["--vscode-diffEditor-unchangedRegionBackground", "#181818"], - ["--vscode-diffEditor-unchangedRegionForeground", "#cccccc"], - ["--vscode-diffEditor-unchangedRegionShadow", "#000000"], - ["--vscode-disabledForeground", "rgba(204, 204, 204, 0.5)"], - ["--vscode-dropdown-background", "#313131"], - ["--vscode-dropdown-border", "#3c3c3c"], - ["--vscode-dropdown-foreground", "#cccccc"], - ["--vscode-dropdown-listBackground", "#1f1f1f"], - ["--vscode-editor-background", "#1f1f1f"], - ["--vscode-editor-compositionBorder", "#ffffff"], - ["--vscode-editor-findMatchBackground", "#9e6a03"], - ["--vscode-editor-findMatchHighlightBackground", "rgba(234, 92, 0, 0.33)"], - ["--vscode-editor-findRangeHighlightBackground", "rgba(58, 61, 65, 0.4)"], - [ - "--vscode-editor-focusedStackFrameHighlightBackground", - "rgba(122, 189, 122, 0.3)", - ], - ["--vscode-editor-foldBackground", "rgba(38, 79, 120, 0.3)"], - ["--vscode-editor-foldPlaceholderForeground", "#808080"], - ["--vscode-editor-font-feature-settings", '"liga" off, "calt" off'], - ["--vscode-editor-font-size", "14px"], - ["--vscode-editor-font-weight", "normal"], - ["--vscode-editor-foreground", "#cccccc"], - ["--vscode-editor-hoverHighlightBackground", "rgba(38, 79, 120, 0.25)"], - ["--vscode-editor-inactiveSelectionBackground", "#3a3d41"], - ["--vscode-editor-inlineValuesBackground", "rgba(255, 200, 0, 0.2)"], - ["--vscode-editor-inlineValuesForeground", "rgba(255, 255, 255, 0.5)"], - ["--vscode-editor-lineHighlightBorder", "#282828"], - ["--vscode-editor-linkedEditingBackground", "rgba(255, 0, 0, 0.3)"], - ["--vscode-editor-placeholder.foreground", "rgba(255, 255, 255, 0.34)"], - ["--vscode-editor-rangeHighlightBackground", "rgba(255, 255, 255, 0.04)"], - ["--vscode-editor-selectionBackground", "#264f78"], - ["--vscode-editor-selectionHighlightBackground", "rgba(173, 214, 255, 0.15)"], - ["--vscode-editor-snippetFinalTabstopHighlightBorder", "#525252"], - [ - "--vscode-editor-snippetTabstopHighlightBackground", - "rgba(124, 124, 124, 0.3)", - ], - ["--vscode-editor-stackFrameHighlightBackground", "rgba(255, 255, 0, 0.2)"], - ["--vscode-editor-symbolHighlightBackground", "rgba(234, 92, 0, 0.33)"], - ["--vscode-editor-wordHighlightBackground", "rgba(87, 87, 87, 0.72)"], - ["--vscode-editor-wordHighlightStrongBackground", "rgba(0, 73, 114, 0.72)"], - ["--vscode-editor-wordHighlightTextBackground", "rgba(87, 87, 87, 0.72)"], - ["--vscode-editorActionList-background", "#202020"], - ["--vscode-editorActionList-focusBackground", "#04395e"], - ["--vscode-editorActionList-focusForeground", "#ffffff"], - ["--vscode-editorActionList-foreground", "#cccccc"], - ["--vscode-editorActiveLineNumber-foreground", "#c6c6c6"], - ["--vscode-editorBracketHighlight-foreground1", "#ffd700"], - ["--vscode-editorBracketHighlight-foreground2", "#da70d6"], - ["--vscode-editorBracketHighlight-foreground3", "#179fff"], - ["--vscode-editorBracketHighlight-foreground4", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketHighlight-foreground5", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketHighlight-foreground6", "rgba(0, 0, 0, 0)"], - [ - "--vscode-editorBracketHighlight-unexpectedBracket.foreground", - "rgba(255, 18, 18, 0.8)", - ], - ["--vscode-editorBracketMatch-background", "rgba(0, 100, 0, 0.1)"], - ["--vscode-editorBracketMatch-border", "#888888"], - ["--vscode-editorBracketPairGuide-activeBackground1", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-activeBackground2", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-activeBackground3", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-activeBackground4", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-activeBackground5", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-activeBackground6", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-background1", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-background2", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-background3", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-background4", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-background5", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-background6", "rgba(0, 0, 0, 0)"], - ["--vscode-editorCodeLens-foreground", "#999999"], - [ - "--vscode-editorCommentsWidget-rangeActiveBackground", - "rgba(0, 120, 212, 0.1)", - ], - ["--vscode-editorCommentsWidget-rangeBackground", "rgba(0, 120, 212, 0.1)"], - ["--vscode-editorCommentsWidget-replyInputBackground", "#252526"], - ["--vscode-editorCommentsWidget-resolvedBorder", "rgba(204, 204, 204, 0.5)"], - ["--vscode-editorCommentsWidget-unresolvedBorder", "#0078d4"], - ["--vscode-editorCursor-foreground", "#aeafad"], - ["--vscode-editorError-foreground", "#f14c4c"], - ["--vscode-editorGhostText-foreground", "rgba(255, 255, 255, 0.34)"], - ["--vscode-editorGroup-border", "rgba(255, 255, 255, 0.09)"], - ["--vscode-editorGroup-dropBackground", "rgba(83, 89, 93, 0.5)"], - ["--vscode-editorGroup-dropIntoPromptBackground", "#202020"], - ["--vscode-editorGroup-dropIntoPromptForeground", "#cccccc"], - ["--vscode-editorGroupHeader-noTabsBackground", "#1f1f1f"], - ["--vscode-editorGroupHeader-tabsBackground", "#181818"], - ["--vscode-editorGroupHeader-tabsBorder", "#2b2b2b"], - ["--vscode-editorGutter-addedBackground", "#2ea043"], - ["--vscode-editorGutter-addedSecondaryBackground", "#175021"], - ["--vscode-editorGutter-background", "#1f1f1f"], - ["--vscode-editorGutter-commentDraftGlyphForeground", "#cccccc"], - ["--vscode-editorGutter-commentGlyphForeground", "#cccccc"], - ["--vscode-editorGutter-commentRangeForeground", "#37373d"], - ["--vscode-editorGutter-commentUnresolvedGlyphForeground", "#cccccc"], - ["--vscode-editorGutter-deletedBackground", "#f85149"], - ["--vscode-editorGutter-deletedSecondaryBackground", "#b91007"], - ["--vscode-editorGutter-foldingControlForeground", "#cccccc"], - ["--vscode-editorGutter-itemBackground", "#37373d"], - ["--vscode-editorGutter-itemGlyphForeground", "#cccccc"], - ["--vscode-editorGutter-modifiedBackground", "#0078d4"], - ["--vscode-editorGutter-modifiedSecondaryBackground", "#003c6a"], - ["--vscode-editorHint-foreground", "rgba(238, 238, 238, 0.7)"], - ["--vscode-editorHoverWidget-background", "#202020"], - ["--vscode-editorHoverWidget-border", "#454545"], - ["--vscode-editorHoverWidget-foreground", "#cccccc"], - ["--vscode-editorHoverWidget-highlightForeground", "#2aaaff"], - ["--vscode-editorHoverWidget-statusBarBackground", "#262626"], - ["--vscode-editorIndentGuide-activeBackground", "rgba(227, 228, 226, 0.16)"], - ["--vscode-editorIndentGuide-activeBackground1", "#707070"], - ["--vscode-editorIndentGuide-activeBackground2", "rgba(0, 0, 0, 0)"], - ["--vscode-editorIndentGuide-activeBackground3", "rgba(0, 0, 0, 0)"], - ["--vscode-editorIndentGuide-activeBackground4", "rgba(0, 0, 0, 0)"], - ["--vscode-editorIndentGuide-activeBackground5", "rgba(0, 0, 0, 0)"], - ["--vscode-editorIndentGuide-activeBackground6", "rgba(0, 0, 0, 0)"], - ["--vscode-editorIndentGuide-background", "rgba(227, 228, 226, 0.16)"], - ["--vscode-editorIndentGuide-background1", "#404040"], - ["--vscode-editorIndentGuide-background2", "rgba(0, 0, 0, 0)"], - ["--vscode-editorIndentGuide-background3", "rgba(0, 0, 0, 0)"], - ["--vscode-editorIndentGuide-background4", "rgba(0, 0, 0, 0)"], - ["--vscode-editorIndentGuide-background5", "rgba(0, 0, 0, 0)"], - ["--vscode-editorIndentGuide-background6", "rgba(0, 0, 0, 0)"], - ["--vscode-editorInfo-foreground", "#59a4f9"], - ["--vscode-editorInlayHint-background", "rgba(97, 97, 97, 0.1)"], - ["--vscode-editorInlayHint-foreground", "#969696"], - ["--vscode-editorInlayHint-parameterBackground", "rgba(97, 97, 97, 0.1)"], - ["--vscode-editorInlayHint-parameterForeground", "#969696"], - ["--vscode-editorInlayHint-typeBackground", "rgba(97, 97, 97, 0.1)"], - ["--vscode-editorInlayHint-typeForeground", "#969696"], - ["--vscode-editorLightBulb-foreground", "#ffcc00"], - ["--vscode-editorLightBulbAi-foreground", "#ffcc00"], - ["--vscode-editorLightBulbAutoFix-foreground", "#75beff"], - ["--vscode-editorLineNumber-activeForeground", "#cccccc"], - ["--vscode-editorLineNumber-foreground", "#6e7681"], - ["--vscode-editorLink-activeForeground", "#4e94ce"], - ["--vscode-editorMarkerNavigation-background", "#1f1f1f"], - ["--vscode-editorMarkerNavigationError-background", "#f14c4c"], - [ - "--vscode-editorMarkerNavigationError-headerBackground", - "rgba(241, 76, 76, 0.1)", - ], - ["--vscode-editorMarkerNavigationInfo-background", "#59a4f9"], - [ - "--vscode-editorMarkerNavigationInfo-headerBackground", - "rgba(89, 164, 249, 0.1)", - ], - ["--vscode-editorMarkerNavigationWarning-background", "#cca700"], - [ - "--vscode-editorMarkerNavigationWarning-headerBackground", - "rgba(204, 167, 0, 0.1)", - ], - ["--vscode-editorMinimap-inlineChatInserted", "rgba(156, 204, 44, 0.12)"], - ["--vscode-editorMultiCursor-primary.foreground", "#aeafad"], - ["--vscode-editorMultiCursor-secondary.foreground", "#aeafad"], - ["--vscode-editorOverviewRuler-addedForeground", "rgba(46, 160, 67, 0.6)"], - ["--vscode-editorOverviewRuler-border", "#010409"], - ["--vscode-editorOverviewRuler-bracketMatchForeground", "#a0a0a0"], - ["--vscode-editorOverviewRuler-commentDraftForeground", "#37373d"], - ["--vscode-editorOverviewRuler-commentForeground", "#37373d"], - ["--vscode-editorOverviewRuler-commentUnresolvedForeground", "#37373d"], - [ - "--vscode-editorOverviewRuler-commonContentForeground", - "rgba(96, 96, 96, 0.4)", - ], - [ - "--vscode-editorOverviewRuler-currentContentForeground", - "rgba(64, 200, 174, 0.5)", - ], - ["--vscode-editorOverviewRuler-deletedForeground", "rgba(248, 81, 73, 0.6)"], - ["--vscode-editorOverviewRuler-errorForeground", "rgba(255, 18, 18, 0.7)"], - [ - "--vscode-editorOverviewRuler-findMatchForeground", - "rgba(209, 134, 22, 0.49)", - ], - [ - "--vscode-editorOverviewRuler-incomingContentForeground", - "rgba(64, 166, 255, 0.5)", - ], - ["--vscode-editorOverviewRuler-infoForeground", "#59a4f9"], - [ - "--vscode-editorOverviewRuler-inlineChatInserted", - "rgba(156, 204, 44, 0.12)", - ], - ["--vscode-editorOverviewRuler-inlineChatRemoved", "rgba(255, 0, 0, 0.12)"], - ["--vscode-editorOverviewRuler-modifiedForeground", "rgba(0, 120, 212, 0.6)"], - [ - "--vscode-editorOverviewRuler-rangeHighlightForeground", - "rgba(0, 122, 204, 0.6)", - ], - [ - "--vscode-editorOverviewRuler-selectionHighlightForeground", - "rgba(160, 160, 160, 0.8)", - ], - ["--vscode-editorOverviewRuler-warningForeground", "#cca700"], - [ - "--vscode-editorOverviewRuler-wordHighlightForeground", - "rgba(160, 160, 160, 0.8)", - ], - [ - "--vscode-editorOverviewRuler-wordHighlightStrongForeground", - "rgba(192, 160, 192, 0.8)", - ], - [ - "--vscode-editorOverviewRuler-wordHighlightTextForeground", - "rgba(160, 160, 160, 0.8)", - ], - ["--vscode-editorPane-background", "#1f1f1f"], - ["--vscode-editorRuler-foreground", "#5a5a5a"], - ["--vscode-editorStickyScroll-background", "#1f1f1f"], - ["--vscode-editorStickyScroll-shadow", "#000000"], - ["--vscode-editorStickyScrollGutter-background", "#1f1f1f"], - ["--vscode-editorStickyScrollHover-background", "#2a2d2e"], - ["--vscode-editorSuggestWidget-background", "#202020"], - ["--vscode-editorSuggestWidget-border", "#454545"], - ["--vscode-editorSuggestWidget-focusHighlightForeground", "#2aaaff"], - ["--vscode-editorSuggestWidget-foreground", "#cccccc"], - ["--vscode-editorSuggestWidget-highlightForeground", "#2aaaff"], - ["--vscode-editorSuggestWidget-selectedBackground", "#04395e"], - ["--vscode-editorSuggestWidget-selectedForeground", "#ffffff"], - ["--vscode-editorSuggestWidget-selectedIconForeground", "#ffffff"], - ["--vscode-editorSuggestWidgetStatus-foreground", "rgba(204, 204, 204, 0.5)"], - ["--vscode-editorUnicodeHighlight-border", "#cca700"], - ["--vscode-editorUnnecessaryCode-opacity", "rgba(0, 0, 0, 0.67)"], - ["--vscode-editorWarning-foreground", "#cca700"], - ["--vscode-editorWhitespace-foreground", "rgba(227, 228, 226, 0.16)"], - ["--vscode-editorWidget-background", "#202020"], - ["--vscode-editorWidget-border", "#454545"], - ["--vscode-editorWidget-foreground", "#cccccc"], - ["--vscode-errorForeground", "#f85149"], - ["--vscode-extensionBadge-remoteBackground", "#0078d4"], - ["--vscode-extensionBadge-remoteForeground", "#ffffff"], - ["--vscode-extensionButton-background", "rgba(0, 0, 0, 0)"], - ["--vscode-extensionButton-border", "rgba(255, 255, 255, 0.1)"], - ["--vscode-extensionButton-foreground", "#cccccc"], - ["--vscode-extensionButton-hoverBackground", "#2b2b2b"], - ["--vscode-extensionButton-prominentBackground", "#0078d4"], - ["--vscode-extensionButton-prominentForeground", "#ffffff"], - ["--vscode-extensionButton-prominentHoverBackground", "#026ec1"], - ["--vscode-extensionButton-separator", "rgba(255, 255, 255, 0.4)"], - ["--vscode-extensionIcon-preReleaseForeground", "#1d9271"], - ["--vscode-extensionIcon-privateForeground", "rgba(255, 255, 255, 0.38)"], - ["--vscode-extensionIcon-sponsorForeground", "#d758b3"], - ["--vscode-extensionIcon-starForeground", "#ff8e00"], - ["--vscode-extensionIcon-verifiedForeground", "#4daafc"], - ["--vscode-focusBorder", "#0078d4"], - ["--vscode-font-size", "13px"], - ["--vscode-font-weight", "normal"], - ["--vscode-foreground", "#cccccc"], - ["--vscode-gauge-background", "rgba(0, 122, 204, 0.3)"], - ["--vscode-gauge-errorBackground", "rgba(190, 17, 0, 0.3)"], - ["--vscode-gauge-errorForeground", "#be1100"], - ["--vscode-gauge-foreground", "#007acc"], - ["--vscode-gauge-warningBackground", "rgba(184, 149, 0, 0.3)"], - ["--vscode-gauge-warningForeground", "#b89500"], - ["--vscode-icon-foreground", "#cccccc"], - ["--vscode-inlineChat-background", "#202020"], - ["--vscode-inlineChat-border", "#454545"], - ["--vscode-inlineChat-foreground", "#cccccc"], - ["--vscode-inlineChat-shadow", "rgba(0, 0, 0, 0.36)"], - ["--vscode-inlineChatDiff-inserted", "rgba(156, 204, 44, 0.1)"], - ["--vscode-inlineChatDiff-removed", "rgba(255, 0, 0, 0.1)"], - ["--vscode-inlineChatInput-background", "#313131"], - ["--vscode-inlineChatInput-border", "#454545"], - ["--vscode-inlineChatInput-focusBorder", "#0078d4"], - ["--vscode-inlineChatInput-placeholderForeground", "#989898"], - ["--vscode-inlineEdit-gutterIndicator.background", "rgba(24, 24, 24, 0.5)"], - [ - "--vscode-inlineEdit-gutterIndicator.primaryBackground", - "rgba(0, 120, 212, 0.4)", - ], - ["--vscode-inlineEdit-gutterIndicator.primaryBorder", "#0078d4"], - ["--vscode-inlineEdit-gutterIndicator.primaryForeground", "#ffffff"], - ["--vscode-inlineEdit-gutterIndicator.secondaryBackground", "#202020"], - ["--vscode-inlineEdit-gutterIndicator.secondaryBorder", "#454545"], - ["--vscode-inlineEdit-gutterIndicator.secondaryForeground", "#cccccc"], - ["--vscode-inlineEdit-gutterIndicator.successfulBackground", "#0078d4"], - ["--vscode-inlineEdit-gutterIndicator.successfulBorder", "#0078d4"], - ["--vscode-inlineEdit-gutterIndicator.successfulForeground", "#ffffff"], - ["--vscode-inlineEdit-modifiedBackground", "rgba(156, 204, 44, 0.06)"], - ["--vscode-inlineEdit-modifiedBorder", "rgba(156, 204, 44, 0.2)"], - [ - "--vscode-inlineEdit-modifiedChangedLineBackground", - "rgba(155, 185, 85, 0.14)", - ], - [ - "--vscode-inlineEdit-modifiedChangedTextBackground", - "rgba(156, 204, 44, 0.14)", - ], - ["--vscode-inlineEdit-originalBackground", "rgba(255, 0, 0, 0.04)"], - ["--vscode-inlineEdit-originalBorder", "rgba(255, 0, 0, 0.2)"], - [ - "--vscode-inlineEdit-originalChangedLineBackground", - "rgba(255, 0, 0, 0.16)", - ], - [ - "--vscode-inlineEdit-originalChangedTextBackground", - "rgba(255, 0, 0, 0.16)", - ], - [ - "--vscode-inlineEdit-tabWillAcceptModifiedBorder", - "rgba(156, 204, 44, 0.2)", - ], - ["--vscode-inlineEdit-tabWillAcceptOriginalBorder", "rgba(255, 0, 0, 0.2)"], - ["--vscode-input-background", "#313131"], - ["--vscode-input-border", "#3c3c3c"], - ["--vscode-input-foreground", "#cccccc"], - ["--vscode-input-placeholderForeground", "#989898"], - ["--vscode-inputOption-activeBackground", "rgba(36, 137, 219, 0.51)"], - ["--vscode-inputOption-activeBorder", "#2488db"], - ["--vscode-inputOption-activeForeground", "#ffffff"], - ["--vscode-inputOption-hoverBackground", "rgba(90, 93, 94, 0.5)"], - ["--vscode-inputValidation-errorBackground", "#5a1d1d"], - ["--vscode-inputValidation-errorBorder", "#be1100"], - ["--vscode-inputValidation-infoBackground", "#063b49"], - ["--vscode-inputValidation-infoBorder", "#007acc"], - ["--vscode-inputValidation-warningBackground", "#352a05"], - ["--vscode-inputValidation-warningBorder", "#b89500"], - ["--vscode-interactive-activeCodeBorder", "#007acc"], - ["--vscode-interactive-inactiveCodeBorder", "#37373d"], - ["--vscode-keybindingLabel-background", "rgba(128, 128, 128, 0.17)"], - ["--vscode-keybindingLabel-border", "rgba(51, 51, 51, 0.6)"], - ["--vscode-keybindingLabel-bottomBorder", "rgba(68, 68, 68, 0.6)"], - ["--vscode-keybindingLabel-foreground", "#cccccc"], - ["--vscode-keybindingTable-headerBackground", "rgba(204, 204, 204, 0.04)"], - ["--vscode-keybindingTable-rowsBackground", "rgba(204, 204, 204, 0.04)"], - ["--vscode-list-activeSelectionBackground", "#04395e"], - ["--vscode-list-activeSelectionForeground", "#ffffff"], - ["--vscode-list-activeSelectionIconForeground", "#ffffff"], - ["--vscode-list-deemphasizedForeground", "#8c8c8c"], - ["--vscode-list-dropBackground", "#383b3d"], - ["--vscode-list-dropBetweenBackground", "#cccccc"], - ["--vscode-list-errorForeground", "#f88070"], - ["--vscode-list-filterMatchBackground", "rgba(234, 92, 0, 0.33)"], - ["--vscode-list-focusHighlightForeground", "#2aaaff"], - ["--vscode-list-focusOutline", "#0078d4"], - ["--vscode-list-highlightForeground", "#2aaaff"], - ["--vscode-list-hoverBackground", "#2a2d2e"], - ["--vscode-list-inactiveSelectionBackground", "#37373d"], - ["--vscode-list-invalidItemForeground", "#b89500"], - ["--vscode-list-warningForeground", "#cca700"], - ["--vscode-listFilterWidget-background", "#202020"], - ["--vscode-listFilterWidget-noMatchesOutline", "#be1100"], - ["--vscode-listFilterWidget-outline", "rgba(0, 0, 0, 0)"], - ["--vscode-listFilterWidget-shadow", "rgba(0, 0, 0, 0.36)"], - ["--vscode-markdownAlert-caution.foreground", "#f14c4c"], - ["--vscode-markdownAlert-important.foreground", "#b180d7"], - ["--vscode-markdownAlert-note.foreground", "#59a4f9"], - ["--vscode-markdownAlert-tip.foreground", "#89d185"], - ["--vscode-markdownAlert-warning.foreground", "#cca700"], - ["--vscode-mcpIcon-starForeground", "#ff8e00"], - ["--vscode-menu-background", "#1f1f1f"], - ["--vscode-menu-border", "#454545"], - ["--vscode-menu-foreground", "#cccccc"], - ["--vscode-menu-selectionBackground", "#0078d4"], - ["--vscode-menu-selectionForeground", "#ffffff"], - ["--vscode-menu-separatorBackground", "#454545"], - ["--vscode-menubar-selectionBackground", "rgba(90, 93, 94, 0.31)"], - ["--vscode-menubar-selectionForeground", "#cccccc"], - ["--vscode-merge-commonContentBackground", "rgba(96, 96, 96, 0.16)"], - ["--vscode-merge-commonHeaderBackground", "rgba(96, 96, 96, 0.4)"], - ["--vscode-merge-currentContentBackground", "rgba(64, 200, 174, 0.2)"], - ["--vscode-merge-currentHeaderBackground", "rgba(64, 200, 174, 0.5)"], - ["--vscode-merge-incomingContentBackground", "rgba(64, 166, 255, 0.2)"], - ["--vscode-merge-incomingHeaderBackground", "rgba(64, 166, 255, 0.5)"], - ["--vscode-mergeEditor-change.background", "rgba(155, 185, 85, 0.2)"], - ["--vscode-mergeEditor-change.word.background", "rgba(156, 204, 44, 0.2)"], - ["--vscode-mergeEditor-changeBase.background", "#4b1818"], - ["--vscode-mergeEditor-changeBase.word.background", "#6f1313"], - [ - "--vscode-mergeEditor-conflict.handled.minimapOverViewRuler", - "rgba(173, 172, 168, 0.93)", - ], - [ - "--vscode-mergeEditor-conflict.handledFocused.border", - "rgba(193, 193, 193, 0.8)", - ], - [ - "--vscode-mergeEditor-conflict.handledUnfocused.border", - "rgba(134, 134, 134, 0.29)", - ], - [ - "--vscode-mergeEditor-conflict.input1.background", - "rgba(64, 200, 174, 0.2)", - ], - [ - "--vscode-mergeEditor-conflict.input2.background", - "rgba(64, 166, 255, 0.2)", - ], - ["--vscode-mergeEditor-conflict.unhandled.minimapOverViewRuler", "#fcba03"], - ["--vscode-mergeEditor-conflict.unhandledFocused.border", "#ffa600"], - [ - "--vscode-mergeEditor-conflict.unhandledUnfocused.border", - "rgba(255, 166, 0, 0.48)", - ], - [ - "--vscode-mergeEditor-conflictingLines.background", - "rgba(255, 234, 0, 0.28)", - ], - ["--vscode-minimap-chatEditHighlight", "rgba(31, 31, 31, 0.6)"], - ["--vscode-minimap-errorHighlight", "rgba(255, 18, 18, 0.7)"], - ["--vscode-minimap-findMatchHighlight", "rgba(234, 92, 0, 0.33)"], - ["--vscode-minimap-foregroundOpacity", "#000000"], - ["--vscode-minimap-infoHighlight", "#59a4f9"], - ["--vscode-minimap-selectionHighlight", "#264f78"], - [ - "--vscode-minimap-selectionOccurrenceHighlight", - "rgba(173, 214, 255, 0.15)", - ], - ["--vscode-minimap-warningHighlight", "#cca700"], - ["--vscode-minimapGutter-addedBackground", "#2ea043"], - ["--vscode-minimapGutter-deletedBackground", "#f85149"], - ["--vscode-minimapGutter-modifiedBackground", "#0078d4"], - ["--vscode-minimapSlider-activeBackground", "rgba(191, 191, 191, 0.2)"], - ["--vscode-minimapSlider-background", "rgba(121, 121, 121, 0.2)"], - ["--vscode-minimapSlider-hoverBackground", "rgba(100, 100, 100, 0.35)"], - ["--vscode-multiDiffEditor-background", "#1f1f1f"], - ["--vscode-multiDiffEditor-border", "#2b2b2b"], - ["--vscode-multiDiffEditor-headerBackground", "#262626"], - ["--vscode-notebook-cellBorderColor", "#37373d"], - ["--vscode-notebook-cellEditorBackground", "#181818"], - ["--vscode-notebook-cellInsertionIndicator", "#0078d4"], - [ - "--vscode-notebook-cellStatusBarItemHoverBackground", - "rgba(255, 255, 255, 0.15)", - ], - ["--vscode-notebook-cellToolbarSeparator", "rgba(128, 128, 128, 0.35)"], - ["--vscode-notebook-editorBackground", "#1f1f1f"], - ["--vscode-notebook-focusedCellBorder", "#0078d4"], - ["--vscode-notebook-focusedEditorBorder", "#0078d4"], - ["--vscode-notebook-inactiveFocusedCellBorder", "#37373d"], - ["--vscode-notebook-selectedCellBackground", "#37373d"], - ["--vscode-notebook-selectedCellBorder", "#37373d"], - ["--vscode-notebook-symbolHighlightBackground", "rgba(255, 255, 255, 0.04)"], - ["--vscode-notebookEditorOverviewRuler-runningCellForeground", "#89d185"], - [ - "--vscode-notebookScrollbarSlider-activeBackground", - "rgba(191, 191, 191, 0.4)", - ], - ["--vscode-notebookScrollbarSlider-background", "rgba(121, 121, 121, 0.4)"], - [ - "--vscode-notebookScrollbarSlider-hoverBackground", - "rgba(100, 100, 100, 0.7)", - ], - ["--vscode-notebookStatusErrorIcon-foreground", "#f85149"], - ["--vscode-notebookStatusRunningIcon-foreground", "#cccccc"], - ["--vscode-notebookStatusSuccessIcon-foreground", "#89d185"], - ["--vscode-notificationCenter-border", "#313131"], - ["--vscode-notificationCenterHeader-background", "#1f1f1f"], - ["--vscode-notificationCenterHeader-foreground", "#cccccc"], - ["--vscode-notificationLink-foreground", "#4daafc"], - ["--vscode-notifications-background", "#1f1f1f"], - ["--vscode-notifications-border", "#2b2b2b"], - ["--vscode-notifications-foreground", "#cccccc"], - ["--vscode-notificationsErrorIcon-foreground", "#f14c4c"], - ["--vscode-notificationsInfoIcon-foreground", "#59a4f9"], - ["--vscode-notificationsWarningIcon-foreground", "#cca700"], - ["--vscode-notificationToast-border", "#313131"], - ["--vscode-panel-background", "#181818"], - ["--vscode-panel-border", "#2b2b2b"], - ["--vscode-panel-dropBorder", "#cccccc"], - ["--vscode-panelInput-border", "#2b2b2b"], - ["--vscode-panelSection-border", "#2b2b2b"], - ["--vscode-panelSection-dropBackground", "rgba(83, 89, 93, 0.5)"], - ["--vscode-panelSectionHeader-background", "rgba(128, 128, 128, 0.2)"], - ["--vscode-panelStickyScroll-background", "#181818"], - ["--vscode-panelStickyScroll-shadow", "#000000"], - ["--vscode-panelTitle-activeBorder", "#0078d4"], - ["--vscode-panelTitle-activeForeground", "#cccccc"], - ["--vscode-panelTitle-inactiveForeground", "#9d9d9d"], - ["--vscode-panelTitleBadge-background", "#0078d4"], - ["--vscode-panelTitleBadge-foreground", "#ffffff"], - ["--vscode-peekView-border", "#59a4f9"], - ["--vscode-peekViewEditor-background", "#1f1f1f"], - [ - "--vscode-peekViewEditor-matchHighlightBackground", - "rgba(187, 128, 9, 0.4)", - ], - ["--vscode-peekViewEditorGutter-background", "#1f1f1f"], - ["--vscode-peekViewEditorStickyScroll-background", "#1f1f1f"], - ["--vscode-peekViewEditorStickyScrollGutter-background", "#1f1f1f"], - ["--vscode-peekViewResult-background", "#1f1f1f"], - ["--vscode-peekViewResult-fileForeground", "#ffffff"], - ["--vscode-peekViewResult-lineForeground", "#bbbbbb"], - [ - "--vscode-peekViewResult-matchHighlightBackground", - "rgba(187, 128, 9, 0.4)", - ], - ["--vscode-peekViewResult-selectionBackground", "rgba(51, 153, 255, 0.2)"], - ["--vscode-peekViewResult-selectionForeground", "#ffffff"], - ["--vscode-peekViewTitle-background", "#252526"], - ["--vscode-peekViewTitleDescription-foreground", "rgba(204, 204, 204, 0.7)"], - ["--vscode-peekViewTitleLabel-foreground", "#ffffff"], - ["--vscode-pickerGroup-border", "#3c3c3c"], - ["--vscode-pickerGroup-foreground", "#3794ff"], - ["--vscode-ports-iconRunningProcessForeground", "#369432"], - ["--vscode-problemsErrorIcon-foreground", "#f14c4c"], - ["--vscode-problemsInfoIcon-foreground", "#59a4f9"], - ["--vscode-problemsWarningIcon-foreground", "#cca700"], - ["--vscode-profileBadge-background", "#4d4d4d"], - ["--vscode-profileBadge-foreground", "#ffffff"], - ["--vscode-profiles-sashBorder", "#2b2b2b"], - ["--vscode-progressBar-background", "#0078d4"], - ["--vscode-quickInput-background", "#222222"], - ["--vscode-quickInput-foreground", "#cccccc"], - ["--vscode-quickInputList-focusBackground", "#04395e"], - ["--vscode-quickInputList-focusForeground", "#ffffff"], - ["--vscode-quickInputList-focusIconForeground", "#ffffff"], - ["--vscode-quickInputTitle-background", "rgba(255, 255, 255, 0.1)"], - ["--vscode-radio-activeBackground", "rgba(36, 137, 219, 0.51)"], - ["--vscode-radio-activeBorder", "#2488db"], - ["--vscode-radio-activeForeground", "#ffffff"], - ["--vscode-radio-inactiveBorder", "rgba(255, 255, 255, 0.2)"], - ["--vscode-radio-inactiveHoverBackground", "rgba(90, 93, 94, 0.5)"], - ["--vscode-remoteHub-decorations.addedForegroundColor", "#81b88b"], - ["--vscode-remoteHub-decorations.conflictForegroundColor", "#e4676b"], - ["--vscode-remoteHub-decorations.deletedForegroundColor", "#c74e39"], - ["--vscode-remoteHub-decorations.ignoredResourceForeground", "#8c8c8c"], - ["--vscode-remoteHub-decorations.incomingAddedForegroundColor", "#81b88b"], - ["--vscode-remoteHub-decorations.incomingDeletedForegroundColor", "#c74e39"], - ["--vscode-remoteHub-decorations.incomingModifiedForegroundColor", "#e2c08d"], - ["--vscode-remoteHub-decorations.incomingRenamedForegroundColor", "#73c991"], - ["--vscode-remoteHub-decorations.modifiedForegroundColor", "#e2c08d"], - ["--vscode-remoteHub-decorations.possibleConflictForegroundColor", "#cca700"], - ["--vscode-remoteHub-decorations.submoduleForegroundColor", "#8db9e2"], - [ - "--vscode-remoteHub-decorations.workspaceRepositoriesView.hasUncommittedChangesForegroundColor", - "#e2c08d", - ], - ["--vscode-sash-hoverBorder", "#0078d4"], - ["--vscode-scmGraph-foreground1", "#ffb000"], - ["--vscode-scmGraph-foreground2", "#dc267f"], - ["--vscode-scmGraph-foreground3", "#994f00"], - ["--vscode-scmGraph-foreground4", "#40b0a6"], - ["--vscode-scmGraph-foreground5", "#b66dff"], - ["--vscode-scmGraph-historyItemBaseRefColor", "#ea5c00"], - ["--vscode-scmGraph-historyItemHoverAdditionsForeground", "#81b88b"], - ["--vscode-scmGraph-historyItemHoverDefaultLabelBackground", "#616161"], - ["--vscode-scmGraph-historyItemHoverDefaultLabelForeground", "#cccccc"], - ["--vscode-scmGraph-historyItemHoverDeletionsForeground", "#c74e39"], - ["--vscode-scmGraph-historyItemHoverLabelForeground", "#181818"], - ["--vscode-scmGraph-historyItemRefColor", "#59a4f9"], - ["--vscode-scmGraph-historyItemRemoteRefColor", "#b180d7"], - ["--vscode-scrollbar-shadow", "#000000"], - ["--vscode-scrollbarSlider-activeBackground", "rgba(191, 191, 191, 0.4)"], - ["--vscode-scrollbarSlider-background", "rgba(121, 121, 121, 0.4)"], - ["--vscode-scrollbarSlider-hoverBackground", "rgba(100, 100, 100, 0.7)"], - ["--vscode-search-resultsInfoForeground", "rgba(204, 204, 204, 0.65)"], - ["--vscode-searchEditor-findMatchBackground", "rgba(234, 92, 0, 0.22)"], - ["--vscode-searchEditor-textInputBorder", "#3c3c3c"], - ["--vscode-settings-checkboxBackground", "#313131"], - ["--vscode-settings-checkboxBorder", "#3c3c3c"], - ["--vscode-settings-checkboxForeground", "#cccccc"], - ["--vscode-settings-dropdownBackground", "#313131"], - ["--vscode-settings-dropdownBorder", "#3c3c3c"], - ["--vscode-settings-dropdownForeground", "#cccccc"], - ["--vscode-settings-dropdownListBorder", "#454545"], - ["--vscode-settings-focusedRowBackground", "rgba(42, 45, 46, 0.6)"], - ["--vscode-settings-focusedRowBorder", "#0078d4"], - ["--vscode-settings-headerBorder", "#2b2b2b"], - ["--vscode-settings-headerForeground", "#ffffff"], - ["--vscode-settings-modifiedItemIndicator", "rgba(187, 128, 9, 0.4)"], - ["--vscode-settings-numberInputBackground", "#313131"], - ["--vscode-settings-numberInputBorder", "#3c3c3c"], - ["--vscode-settings-numberInputForeground", "#cccccc"], - ["--vscode-settings-rowHoverBackground", "rgba(42, 45, 46, 0.3)"], - ["--vscode-settings-sashBorder", "#2b2b2b"], - [ - "--vscode-settings-settingsHeaderHoverForeground", - "rgba(255, 255, 255, 0.7)", - ], - ["--vscode-settings-textInputBackground", "#313131"], - ["--vscode-settings-textInputBorder", "#3c3c3c"], - ["--vscode-settings-textInputForeground", "#cccccc"], - ["--vscode-sideBar-background", "#181818"], - ["--vscode-sideBar-border", "#2b2b2b"], - ["--vscode-sideBar-dropBackground", "rgba(83, 89, 93, 0.5)"], - ["--vscode-sideBar-foreground", "#cccccc"], - ["--vscode-sideBarActivityBarTop-border", "#2b2b2b"], - ["--vscode-sideBarSectionHeader-background", "#181818"], - ["--vscode-sideBarSectionHeader-border", "#2b2b2b"], - ["--vscode-sideBarSectionHeader-foreground", "#cccccc"], - ["--vscode-sideBarStickyScroll-background", "#181818"], - ["--vscode-sideBarStickyScroll-shadow", "#000000"], - ["--vscode-sideBarTitle-background", "#181818"], - ["--vscode-sideBarTitle-foreground", "#cccccc"], - ["--vscode-sideBySideEditor-horizontalBorder", "rgba(255, 255, 255, 0.09)"], - ["--vscode-sideBySideEditor-verticalBorder", "rgba(255, 255, 255, 0.09)"], - ["--vscode-simpleFindWidget-sashBorder", "#454545"], - ["--vscode-statusBar-background", "#181818"], - ["--vscode-statusBar-border", "#2b2b2b"], - ["--vscode-statusBar-debuggingBackground", "#0078d4"], - ["--vscode-statusBar-debuggingBorder", "#2b2b2b"], - ["--vscode-statusBar-debuggingForeground", "#ffffff"], - ["--vscode-statusBar-focusBorder", "#0078d4"], - ["--vscode-statusBar-foreground", "#cccccc"], - ["--vscode-statusBar-noFolderBackground", "#1f1f1f"], - ["--vscode-statusBar-noFolderBorder", "#2b2b2b"], - ["--vscode-statusBar-noFolderForeground", "#cccccc"], - ["--vscode-statusBarItem-activeBackground", "rgba(255, 255, 255, 0.18)"], - [ - "--vscode-statusBarItem-compactHoverBackground", - "rgba(255, 255, 255, 0.12)", - ], - ["--vscode-statusBarItem-errorBackground", "#b91007"], - ["--vscode-statusBarItem-errorForeground", "#ffffff"], - ["--vscode-statusBarItem-errorHoverBackground", "rgba(241, 241, 241, 0.2)"], - ["--vscode-statusBarItem-errorHoverForeground", "#ffffff"], - ["--vscode-statusBarItem-focusBorder", "#0078d4"], - ["--vscode-statusBarItem-hoverBackground", "rgba(241, 241, 241, 0.2)"], - ["--vscode-statusBarItem-hoverForeground", "#ffffff"], - ["--vscode-statusBarItem-offlineBackground", "#6c1717"], - ["--vscode-statusBarItem-offlineForeground", "#ffffff"], - ["--vscode-statusBarItem-offlineHoverBackground", "rgba(241, 241, 241, 0.2)"], - ["--vscode-statusBarItem-offlineHoverForeground", "#ffffff"], - ["--vscode-statusBarItem-prominentBackground", "rgba(110, 118, 129, 0.4)"], - ["--vscode-statusBarItem-prominentForeground", "#cccccc"], - [ - "--vscode-statusBarItem-prominentHoverBackground", - "rgba(241, 241, 241, 0.2)", - ], - ["--vscode-statusBarItem-prominentHoverForeground", "#ffffff"], - ["--vscode-statusBarItem-remoteBackground", "#0078d4"], - ["--vscode-statusBarItem-remoteForeground", "#ffffff"], - ["--vscode-statusBarItem-remoteHoverBackground", "rgba(241, 241, 241, 0.2)"], - ["--vscode-statusBarItem-remoteHoverForeground", "#ffffff"], - ["--vscode-statusBarItem-warningBackground", "#7a6400"], - ["--vscode-statusBarItem-warningForeground", "#ffffff"], - ["--vscode-statusBarItem-warningHoverBackground", "rgba(241, 241, 241, 0.2)"], - ["--vscode-statusBarItem-warningHoverForeground", "#ffffff"], - ["--vscode-strokeThickness", "1px"], - ["--vscode-symbolIcon-arrayForeground", "#cccccc"], - ["--vscode-symbolIcon-booleanForeground", "#cccccc"], - ["--vscode-symbolIcon-classForeground", "#ee9d28"], - ["--vscode-symbolIcon-colorForeground", "#cccccc"], - ["--vscode-symbolIcon-constantForeground", "#cccccc"], - ["--vscode-symbolIcon-constructorForeground", "#b180d7"], - ["--vscode-symbolIcon-enumeratorForeground", "#ee9d28"], - ["--vscode-symbolIcon-enumeratorMemberForeground", "#75beff"], - ["--vscode-symbolIcon-eventForeground", "#ee9d28"], - ["--vscode-symbolIcon-fieldForeground", "#75beff"], - ["--vscode-symbolIcon-fileForeground", "#cccccc"], - ["--vscode-symbolIcon-folderForeground", "#cccccc"], - ["--vscode-symbolIcon-functionForeground", "#b180d7"], - ["--vscode-symbolIcon-interfaceForeground", "#75beff"], - ["--vscode-symbolIcon-keyForeground", "#cccccc"], - ["--vscode-symbolIcon-keywordForeground", "#cccccc"], - ["--vscode-symbolIcon-methodForeground", "#b180d7"], - ["--vscode-symbolIcon-moduleForeground", "#cccccc"], - ["--vscode-symbolIcon-namespaceForeground", "#cccccc"], - ["--vscode-symbolIcon-nullForeground", "#cccccc"], - ["--vscode-symbolIcon-numberForeground", "#cccccc"], - ["--vscode-symbolIcon-objectForeground", "#cccccc"], - ["--vscode-symbolIcon-operatorForeground", "#cccccc"], - ["--vscode-symbolIcon-packageForeground", "#cccccc"], - ["--vscode-symbolIcon-propertyForeground", "#cccccc"], - ["--vscode-symbolIcon-referenceForeground", "#cccccc"], - ["--vscode-symbolIcon-snippetForeground", "#cccccc"], - ["--vscode-symbolIcon-stringForeground", "#cccccc"], - ["--vscode-symbolIcon-structForeground", "#cccccc"], - ["--vscode-symbolIcon-textForeground", "#cccccc"], - ["--vscode-symbolIcon-typeParameterForeground", "#cccccc"], - ["--vscode-symbolIcon-unitForeground", "#cccccc"], - ["--vscode-symbolIcon-variableForeground", "#75beff"], - ["--vscode-tab-activeBackground", "#1f1f1f"], - ["--vscode-tab-activeBorder", "#1f1f1f"], - ["--vscode-tab-activeBorderTop", "#0078d4"], - ["--vscode-tab-activeForeground", "#ffffff"], - ["--vscode-tab-activeModifiedBorder", "#3399cc"], - ["--vscode-tab-border", "#2b2b2b"], - ["--vscode-tab-dragAndDropBorder", "#ffffff"], - ["--vscode-tab-hoverBackground", "#1f1f1f"], - ["--vscode-tab-inactiveBackground", "#181818"], - ["--vscode-tab-inactiveForeground", "#9d9d9d"], - ["--vscode-tab-inactiveModifiedBorder", "rgba(51, 153, 204, 0.5)"], - ["--vscode-tab-lastPinnedBorder", "rgba(204, 204, 204, 0.2)"], - ["--vscode-tab-selectedBackground", "#222222"], - ["--vscode-tab-selectedBorderTop", "#6caddf"], - ["--vscode-tab-selectedForeground", "rgba(255, 255, 255, 0.63)"], - ["--vscode-tab-unfocusedActiveBackground", "#1f1f1f"], - ["--vscode-tab-unfocusedActiveBorder", "#1f1f1f"], - ["--vscode-tab-unfocusedActiveBorderTop", "#2b2b2b"], - ["--vscode-tab-unfocusedActiveForeground", "rgba(255, 255, 255, 0.5)"], - ["--vscode-tab-unfocusedActiveModifiedBorder", "rgba(51, 153, 204, 0.5)"], - ["--vscode-tab-unfocusedHoverBackground", "#1f1f1f"], - ["--vscode-tab-unfocusedInactiveBackground", "#181818"], - ["--vscode-tab-unfocusedInactiveForeground", "rgba(157, 157, 157, 0.5)"], - ["--vscode-tab-unfocusedInactiveModifiedBorder", "rgba(51, 153, 204, 0.25)"], - ["--vscode-terminal-ansiBlack", "#000000"], - ["--vscode-terminal-ansiBlue", "#2472c8"], - ["--vscode-terminal-ansiBrightBlack", "#666666"], - ["--vscode-terminal-ansiBrightBlue", "#3b8eea"], - ["--vscode-terminal-ansiBrightCyan", "#29b8db"], - ["--vscode-terminal-ansiBrightGreen", "#23d18b"], - ["--vscode-terminal-ansiBrightMagenta", "#d670d6"], - ["--vscode-terminal-ansiBrightRed", "#f14c4c"], - ["--vscode-terminal-ansiBrightWhite", "#e5e5e5"], - ["--vscode-terminal-ansiBrightYellow", "#f5f543"], - ["--vscode-terminal-ansiCyan", "#11a8cd"], - ["--vscode-terminal-ansiGreen", "#0dbc79"], - ["--vscode-terminal-ansiMagenta", "#bc3fbc"], - ["--vscode-terminal-ansiRed", "#cd3131"], - ["--vscode-terminal-ansiWhite", "#e5e5e5"], - ["--vscode-terminal-ansiYellow", "#e5e510"], - ["--vscode-terminal-border", "#2b2b2b"], - ["--vscode-terminal-dropBackground", "rgba(83, 89, 93, 0.5)"], - ["--vscode-terminal-findMatchBackground", "#9e6a03"], - ["--vscode-terminal-findMatchHighlightBackground", "rgba(234, 92, 0, 0.33)"], - ["--vscode-terminal-foreground", "#cccccc"], - ["--vscode-terminal-hoverHighlightBackground", "rgba(38, 79, 120, 0.13)"], - ["--vscode-terminal-inactiveSelectionBackground", "#3a3d41"], - ["--vscode-terminal-initialHintForeground", "rgba(255, 255, 255, 0.34)"], - ["--vscode-terminal-selectionBackground", "#264f78"], - ["--vscode-terminal-tab.activeBorder", "#0078d4"], - [ - "--vscode-terminalCommandDecoration-defaultBackground", - "rgba(255, 255, 255, 0.25)", - ], - ["--vscode-terminalCommandDecoration-errorBackground", "#f14c4c"], - ["--vscode-terminalCommandDecoration-successBackground", "#1b81a8"], - ["--vscode-terminalCommandGuide-foreground", "#37373d"], - ["--vscode-terminalOverviewRuler-border", "#010409"], - [ - "--vscode-terminalOverviewRuler-cursorForeground", - "rgba(160, 160, 160, 0.8)", - ], - [ - "--vscode-terminalOverviewRuler-findMatchForeground", - "rgba(209, 134, 22, 0.49)", - ], - ["--vscode-terminalStickyScrollHover-background", "#2a2d2e"], - ["--vscode-terminalSymbolIcon-aliasForeground", "#b180d7"], - ["--vscode-terminalSymbolIcon-argumentForeground", "#75beff"], - ["--vscode-terminalSymbolIcon-branchForeground", "#cccccc"], - ["--vscode-terminalSymbolIcon-commitForeground", "#cccccc"], - ["--vscode-terminalSymbolIcon-fileForeground", "#cccccc"], - ["--vscode-terminalSymbolIcon-flagForeground", "#ee9d28"], - ["--vscode-terminalSymbolIcon-folderForeground", "#cccccc"], - ["--vscode-terminalSymbolIcon-methodForeground", "#b180d7"], - ["--vscode-terminalSymbolIcon-optionForeground", "#ee9d28"], - ["--vscode-terminalSymbolIcon-optionValueForeground", "#75beff"], - ["--vscode-terminalSymbolIcon-pullRequestDoneForeground", "#cccccc"], - ["--vscode-terminalSymbolIcon-pullRequestForeground", "#cccccc"], - ["--vscode-terminalSymbolIcon-remoteForeground", "#cccccc"], - ["--vscode-terminalSymbolIcon-stashForeground", "#cccccc"], - ["--vscode-terminalSymbolIcon-symbolicLinkFileForeground", "#cccccc"], - ["--vscode-terminalSymbolIcon-symbolicLinkFolderForeground", "#cccccc"], - ["--vscode-terminalSymbolIcon-symbolText", "#cccccc"], - ["--vscode-terminalSymbolIcon-tagForeground", "#cccccc"], - ["--vscode-testing-coverCountBadgeBackground", "#616161"], - ["--vscode-testing-coverCountBadgeForeground", "#f8f8f8"], - ["--vscode-testing-coveredBackground", "rgba(156, 204, 44, 0.2)"], - ["--vscode-testing-coveredBorder", "rgba(156, 204, 44, 0.15)"], - ["--vscode-testing-coveredGutterBackground", "rgba(156, 204, 44, 0.12)"], - ["--vscode-testing-iconErrored", "#f14c4c"], - ["--vscode-testing-iconErrored.retired", "rgba(241, 76, 76, 0.7)"], - ["--vscode-testing-iconFailed", "#f14c4c"], - ["--vscode-testing-iconFailed.retired", "rgba(241, 76, 76, 0.7)"], - ["--vscode-testing-iconPassed", "#73c991"], - ["--vscode-testing-iconPassed.retired", "rgba(115, 201, 145, 0.7)"], - ["--vscode-testing-iconQueued", "#cca700"], - ["--vscode-testing-iconQueued.retired", "rgba(204, 167, 0, 0.7)"], - ["--vscode-testing-iconSkipped", "#848484"], - ["--vscode-testing-iconSkipped.retired", "rgba(132, 132, 132, 0.7)"], - ["--vscode-testing-iconUnset", "#848484"], - ["--vscode-testing-iconUnset.retired", "rgba(132, 132, 132, 0.7)"], - ["--vscode-testing-message.error.badgeBackground", "#f14c4c"], - ["--vscode-testing-message.error.badgeBorder", "#f14c4c"], - ["--vscode-testing-message.error.badgeForeground", "#000000"], - [ - "--vscode-testing-message.info.decorationForeground", - "rgba(204, 204, 204, 0.5)", - ], - ["--vscode-testing-messagePeekBorder", "#59a4f9"], - ["--vscode-testing-messagePeekHeaderBackground", "rgba(89, 164, 249, 0.1)"], - ["--vscode-testing-peekBorder", "#f14c4c"], - ["--vscode-testing-peekHeaderBackground", "rgba(241, 76, 76, 0.1)"], - ["--vscode-testing-runAction", "#73c991"], - ["--vscode-testing-uncoveredBackground", "rgba(255, 0, 0, 0.2)"], - ["--vscode-testing-uncoveredBorder", "rgba(255, 0, 0, 0.15)"], - ["--vscode-testing-uncoveredBranchBackground", "#781212"], - ["--vscode-testing-uncoveredGutterBackground", "rgba(255, 0, 0, 0.3)"], - ["--vscode-textBlockQuote-background", "#2b2b2b"], - ["--vscode-textBlockQuote-border", "#616161"], - ["--vscode-textCodeBlock-background", "#2b2b2b"], - ["--vscode-textLink-activeForeground", "#4daafc"], - ["--vscode-textLink-foreground", "#4daafc"], - ["--vscode-textPreformat-background", "#3c3c3c"], - ["--vscode-textPreformat-foreground", "#d0d0d0"], - ["--vscode-textSeparator-foreground", "#21262d"], - ["--vscode-titleBar-activeBackground", "#181818"], - ["--vscode-titleBar-activeForeground", "#cccccc"], - ["--vscode-titleBar-border", "#2b2b2b"], - ["--vscode-titleBar-inactiveBackground", "#1f1f1f"], - ["--vscode-titleBar-inactiveForeground", "#9d9d9d"], - ["--vscode-toolbar-activeBackground", "rgba(99, 102, 103, 0.31)"], - ["--vscode-toolbar-hoverBackground", "rgba(90, 93, 94, 0.31)"], - ["--vscode-tree-inactiveIndentGuidesStroke", "rgba(88, 88, 88, 0.4)"], - ["--vscode-tree-indentGuidesStroke", "#585858"], - ["--vscode-tree-tableColumnsBorder", "rgba(204, 204, 204, 0.13)"], - ["--vscode-tree-tableOddRowsBackground", "rgba(204, 204, 204, 0.04)"], - ["--vscode-walkThrough-embeddedEditorBackground", "rgba(0, 0, 0, 0.4)"], - ["--vscode-walkthrough-stepTitle.foreground", "#ffffff"], - ["--vscode-welcomePage-progress.background", "#313131"], - ["--vscode-welcomePage-progress.foreground", "#0078d4"], - ["--vscode-welcomePage-tileBackground", "#2b2b2b"], - ["--vscode-welcomePage-tileBorder", "rgba(255, 255, 255, 0.1)"], - ["--vscode-welcomePage-tileHoverBackground", "#262626"], - ["--vscode-widget-border", "#313131"], - ["--vscode-widget-shadow", "rgba(0, 0, 0, 0.36)"], -]; diff --git a/.storybook/themes/light-v2.ts b/.storybook/themes/light-v2.ts deleted file mode 100644 index 81bbc80400..0000000000 --- a/.storybook/themes/light-v2.ts +++ /dev/null @@ -1,943 +0,0 @@ -// Sourced from `vscode-elements/webview-playground`. -// https://github.com/vscode-elements/webview-playground/blob/f9a6f90413d0cc535839fb92445b7a5eebc540d7/dist/themes/light-v2.js - -export const lightTheme: Array<[string, string]> = [ - ["--vscode-actionBar-toggledBackground", "#dddddd"], - ["--vscode-activityBar-activeBorder", "#005fb8"], - ["--vscode-activityBar-background", "#f8f8f8"], - ["--vscode-activityBar-border", "#e5e5e5"], - ["--vscode-activityBar-dropBorder", "#1f1f1f"], - ["--vscode-activityBar-foreground", "#1f1f1f"], - ["--vscode-activityBar-inactiveForeground", "#616161"], - ["--vscode-activityBarBadge-background", "#005fb8"], - ["--vscode-activityBarBadge-foreground", "#ffffff"], - ["--vscode-activityBarTop-activeBorder", "#424242"], - ["--vscode-activityBarTop-dropBorder", "#424242"], - ["--vscode-activityBarTop-foreground", "#424242"], - ["--vscode-activityBarTop-inactiveForeground", "rgba(66, 66, 66, 0.75)"], - ["--vscode-activityErrorBadge-background", "#e51400"], - ["--vscode-activityErrorBadge-foreground", "#ffffff"], - ["--vscode-activityWarningBadge-background", "#b27c00"], - ["--vscode-activityWarningBadge-foreground", "#ffffff"], - ["--vscode-agentSessionReadIndicator-foreground", "rgba(59, 59, 59, 0.2)"], - ["--vscode-agentSessionSelectedBadge-border", "rgba(0, 0, 0, 0.3)"], - [ - "--vscode-agentSessionSelectedUnfocusedBadge-border", - "rgba(59, 59, 59, 0.3)", - ], - ["--vscode-agentStatusIndicator-background", "rgba(0, 0, 0, 0.05)"], - ["--vscode-aiCustomizationManagement-sashBorder", "#e5e5e5"], - ["--vscode-badge-background", "#cccccc"], - ["--vscode-badge-foreground", "#3b3b3b"], - ["--vscode-banner-background", "#a2a2a2"], - ["--vscode-banner-foreground", "#000000"], - ["--vscode-banner-iconForeground", "#0063d3"], - ["--vscode-bodyFontSize", "13px"], - ["--vscode-bodyFontSize-small", "12px"], - ["--vscode-bodyFontSize-xSmall", "11px"], - ["--vscode-breadcrumb-activeSelectionForeground", "#2f2f2f"], - ["--vscode-breadcrumb-background", "#ffffff"], - ["--vscode-breadcrumb-focusForeground", "#2f2f2f"], - ["--vscode-breadcrumb-foreground", "rgba(59, 59, 59, 0.8)"], - ["--vscode-breadcrumbPicker-background", "#f8f8f8"], - ["--vscode-browser-border", "#e5e5e5"], - ["--vscode-button-background", "#005fb8"], - ["--vscode-button-border", "rgba(0, 0, 0, 0.1)"], - ["--vscode-button-foreground", "#ffffff"], - ["--vscode-button-hoverBackground", "#0258a8"], - ["--vscode-button-secondaryBackground", "#e5e5e5"], - ["--vscode-button-secondaryForeground", "#3b3b3b"], - ["--vscode-button-secondaryHoverBackground", "#cccccc"], - ["--vscode-button-separator", "rgba(255, 255, 255, 0.4)"], - ["--vscode-chart-axis", "rgba(0, 0, 0, 0.6)"], - ["--vscode-chart-guide", "rgba(0, 0, 0, 0.2)"], - ["--vscode-chart-line", "#236b8e"], - ["--vscode-charts-blue", "#0063d3"], - ["--vscode-charts-foreground", "#3b3b3b"], - ["--vscode-charts-green", "#388a34"], - ["--vscode-charts-lines", "rgba(59, 59, 59, 0.5)"], - ["--vscode-charts-orange", "rgba(234, 92, 0, 0.33)"], - ["--vscode-charts-purple", "#652d90"], - ["--vscode-charts-red", "#e51400"], - ["--vscode-charts-yellow", "#bf8803"], - ["--vscode-chat-avatarBackground", "#f2f2f2"], - ["--vscode-chat-avatarForeground", "#3b3b3b"], - ["--vscode-chat-checkpointSeparator", "#a9a9a9"], - ["--vscode-chat-editedFileForeground", "#895503"], - ["--vscode-chat-linesAddedForeground", "#107c10"], - ["--vscode-chat-linesRemovedForeground", "#bc2f32"], - ["--vscode-chat-requestBackground", "rgba(255, 255, 255, 0.62)"], - ["--vscode-chat-requestBorder", "rgba(0, 0, 0, 0.1)"], - ["--vscode-chat-requestBubbleBackground", "rgba(173, 214, 255, 0.3)"], - ["--vscode-chat-requestBubbleHoverBackground", "rgba(173, 214, 255, 0.6)"], - ["--vscode-chat-requestCodeBorder", "rgba(14, 99, 156, 0.25)"], - ["--vscode-chat-slashCommandBackground", "rgba(173, 206, 255, 0.48)"], - ["--vscode-chat-slashCommandForeground", "#26569e"], - ["--vscode-chat-thinkingShimmer", "#000000"], - ["--vscode-chatManagement-sashBorder", "#e5e5e5"], - ["--vscode-checkbox-background", "#f8f8f8"], - ["--vscode-checkbox-border", "#cecece"], - ["--vscode-checkbox-disabled.background", "#b9b9b9"], - ["--vscode-checkbox-disabled.foreground", "#797979"], - ["--vscode-checkbox-foreground", "#3b3b3b"], - ["--vscode-checkbox-selectBackground", "#f8f8f8"], - ["--vscode-checkbox-selectBorder", "#3b3b3b"], - ["--vscode-codiconFontSize", "16px"], - ["--vscode-commandCenter-activeBackground", "rgba(0, 0, 0, 0.08)"], - ["--vscode-commandCenter-activeBorder", "rgba(30, 30, 30, 0.3)"], - ["--vscode-commandCenter-activeForeground", "#1e1e1e"], - ["--vscode-commandCenter-background", "rgba(0, 0, 0, 0.05)"], - ["--vscode-commandCenter-border", "rgba(30, 30, 30, 0.2)"], - ["--vscode-commandCenter-debuggingBackground", "rgba(253, 113, 108, 0.26)"], - ["--vscode-commandCenter-foreground", "#1e1e1e"], - ["--vscode-commandCenter-inactiveBorder", "rgba(139, 148, 158, 0.25)"], - ["--vscode-commandCenter-inactiveForeground", "#8b949e"], - ["--vscode-commentsView-resolvedIcon", "rgba(97, 97, 97, 0.5)"], - ["--vscode-commentsView-unresolvedIcon", "#005fb8"], - ["--vscode-cornerRadius-circle", "9999px"], - ["--vscode-cornerRadius-large", "8px"], - ["--vscode-cornerRadius-medium", "6px"], - ["--vscode-cornerRadius-small", "4px"], - ["--vscode-cornerRadius-xLarge", "12px"], - ["--vscode-cornerRadius-xSmall", "2px"], - ["--vscode-debugConsole-errorForeground", "#f85149"], - ["--vscode-debugConsole-infoForeground", "#0063d3"], - ["--vscode-debugConsole-sourceForeground", "#3b3b3b"], - ["--vscode-debugConsole-warningForeground", "#bf8803"], - ["--vscode-debugConsoleInputIcon-foreground", "#3b3b3b"], - ["--vscode-debugExceptionWidget-background", "#f1dfde"], - ["--vscode-debugExceptionWidget-border", "#a31515"], - ["--vscode-debugIcon-breakpointCurrentStackframeForeground", "#be8700"], - ["--vscode-debugIcon-breakpointDisabledForeground", "#848484"], - ["--vscode-debugIcon-breakpointForeground", "#e51400"], - ["--vscode-debugIcon-breakpointStackframeForeground", "#89d185"], - ["--vscode-debugIcon-breakpointUnverifiedForeground", "#848484"], - ["--vscode-debugIcon-continueForeground", "#007acc"], - ["--vscode-debugIcon-disconnectForeground", "#a1260d"], - ["--vscode-debugIcon-pauseForeground", "#007acc"], - ["--vscode-debugIcon-restartForeground", "#388a34"], - ["--vscode-debugIcon-startForeground", "#388a34"], - ["--vscode-debugIcon-stepBackForeground", "#007acc"], - ["--vscode-debugIcon-stepIntoForeground", "#007acc"], - ["--vscode-debugIcon-stepOutForeground", "#007acc"], - ["--vscode-debugIcon-stepOverForeground", "#007acc"], - ["--vscode-debugIcon-stopForeground", "#a1260d"], - ["--vscode-debugTokenExpression-boolean", "#0000ff"], - ["--vscode-debugTokenExpression-error", "#e51400"], - ["--vscode-debugTokenExpression-name", "#9b46b0"], - ["--vscode-debugTokenExpression-number", "#098658"], - ["--vscode-debugTokenExpression-string", "#a31515"], - ["--vscode-debugTokenExpression-type", "#4a90e2"], - ["--vscode-debugTokenExpression-value", "rgba(108, 108, 108, 0.8)"], - ["--vscode-debugToolBar-background", "#f3f3f3"], - ["--vscode-debugView-exceptionLabelBackground", "#a31515"], - ["--vscode-debugView-exceptionLabelForeground", "#ffffff"], - ["--vscode-debugView-stateLabelBackground", "rgba(136, 136, 136, 0.27)"], - ["--vscode-debugView-stateLabelForeground", "#3b3b3b"], - ["--vscode-debugView-valueChangedHighlight", "#569cd6"], - ["--vscode-descriptionForeground", "#3b3b3b"], - ["--vscode-diffEditor-diagonalFill", "rgba(34, 34, 34, 0.2)"], - ["--vscode-diffEditor-insertedLineBackground", "rgba(155, 185, 85, 0.2)"], - ["--vscode-diffEditor-insertedTextBackground", "rgba(156, 204, 44, 0.25)"], - ["--vscode-diffEditor-move.border", "rgba(139, 139, 139, 0.61)"], - ["--vscode-diffEditor-moveActive.border", "#ffa500"], - ["--vscode-diffEditor-removedLineBackground", "rgba(255, 0, 0, 0.2)"], - ["--vscode-diffEditor-removedTextBackground", "rgba(255, 0, 0, 0.2)"], - ["--vscode-diffEditor-unchangedCodeBackground", "rgba(184, 184, 184, 0.16)"], - ["--vscode-diffEditor-unchangedRegionBackground", "#f8f8f8"], - ["--vscode-diffEditor-unchangedRegionForeground", "#3b3b3b"], - ["--vscode-diffEditor-unchangedRegionShadow", "rgba(115, 115, 115, 0.75)"], - ["--vscode-disabledForeground", "rgba(97, 97, 97, 0.5)"], - ["--vscode-dropdown-background", "#ffffff"], - ["--vscode-dropdown-border", "#cecece"], - ["--vscode-dropdown-foreground", "#3b3b3b"], - ["--vscode-dropdown-listBackground", "#ffffff"], - ["--vscode-editor-background", "#ffffff"], - ["--vscode-editor-compositionBorder", "#000000"], - ["--vscode-editor-findMatchBackground", "#a8ac94"], - ["--vscode-editor-findMatchHighlightBackground", "rgba(234, 92, 0, 0.33)"], - ["--vscode-editor-findRangeHighlightBackground", "rgba(180, 180, 180, 0.3)"], - [ - "--vscode-editor-focusedStackFrameHighlightBackground", - "rgba(206, 231, 206, 0.45)", - ], - ["--vscode-editor-foldBackground", "rgba(173, 214, 255, 0.3)"], - ["--vscode-editor-foldPlaceholderForeground", "#808080"], - ["--vscode-editor-font-feature-settings", '"liga" off, "calt" off'], - ["--vscode-editor-font-size", "14px"], - ["--vscode-editor-font-weight", "normal"], - ["--vscode-editor-foreground", "#3b3b3b"], - ["--vscode-editor-hoverHighlightBackground", "rgba(173, 214, 255, 0.15)"], - ["--vscode-editor-inactiveSelectionBackground", "#e5ebf1"], - ["--vscode-editor-inlineValuesBackground", "rgba(255, 200, 0, 0.2)"], - ["--vscode-editor-inlineValuesForeground", "rgba(0, 0, 0, 0.5)"], - ["--vscode-editor-lineHighlightBorder", "#eeeeee"], - ["--vscode-editor-linkedEditingBackground", "rgba(255, 0, 0, 0.3)"], - ["--vscode-editor-placeholder.foreground", "rgba(0, 0, 0, 0.47)"], - ["--vscode-editor-rangeHighlightBackground", "rgba(253, 255, 0, 0.2)"], - ["--vscode-editor-selectionBackground", "#add6ff"], - ["--vscode-editor-selectionHighlightBackground", "rgba(173, 214, 255, 0.5)"], - [ - "--vscode-editor-snippetFinalTabstopHighlightBorder", - "rgba(10, 50, 100, 0.5)", - ], - [ - "--vscode-editor-snippetTabstopHighlightBackground", - "rgba(10, 50, 100, 0.2)", - ], - [ - "--vscode-editor-stackFrameHighlightBackground", - "rgba(255, 255, 102, 0.45)", - ], - ["--vscode-editor-symbolHighlightBackground", "rgba(234, 92, 0, 0.33)"], - ["--vscode-editor-wordHighlightBackground", "rgba(87, 87, 87, 0.25)"], - ["--vscode-editor-wordHighlightStrongBackground", "rgba(14, 99, 156, 0.25)"], - ["--vscode-editor-wordHighlightTextBackground", "rgba(87, 87, 87, 0.25)"], - ["--vscode-editorActionList-background", "#f8f8f8"], - ["--vscode-editorActionList-focusBackground", "#e8e8e8"], - ["--vscode-editorActionList-focusForeground", "#000000"], - ["--vscode-editorActionList-foreground", "#3b3b3b"], - ["--vscode-editorActiveLineNumber-foreground", "#0b216f"], - ["--vscode-editorBracketHighlight-foreground1", "#0431fa"], - ["--vscode-editorBracketHighlight-foreground2", "#319331"], - ["--vscode-editorBracketHighlight-foreground3", "#7b3814"], - ["--vscode-editorBracketHighlight-foreground4", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketHighlight-foreground5", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketHighlight-foreground6", "rgba(0, 0, 0, 0)"], - [ - "--vscode-editorBracketHighlight-unexpectedBracket.foreground", - "rgba(255, 18, 18, 0.8)", - ], - ["--vscode-editorBracketMatch-background", "rgba(0, 100, 0, 0.1)"], - ["--vscode-editorBracketMatch-border", "#b9b9b9"], - ["--vscode-editorBracketPairGuide-activeBackground1", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-activeBackground2", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-activeBackground3", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-activeBackground4", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-activeBackground5", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-activeBackground6", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-background1", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-background2", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-background3", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-background4", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-background5", "rgba(0, 0, 0, 0)"], - ["--vscode-editorBracketPairGuide-background6", "rgba(0, 0, 0, 0)"], - ["--vscode-editorCodeLens-foreground", "#919191"], - [ - "--vscode-editorCommentsWidget-rangeActiveBackground", - "rgba(0, 95, 184, 0.1)", - ], - ["--vscode-editorCommentsWidget-rangeBackground", "rgba(0, 95, 184, 0.1)"], - ["--vscode-editorCommentsWidget-replyInputBackground", "#f3f3f3"], - ["--vscode-editorCommentsWidget-resolvedBorder", "rgba(97, 97, 97, 0.5)"], - ["--vscode-editorCommentsWidget-unresolvedBorder", "#005fb8"], - ["--vscode-editorCursor-foreground", "#000000"], - ["--vscode-editorError-foreground", "#e51400"], - ["--vscode-editorGhostText-foreground", "rgba(0, 0, 0, 0.47)"], - ["--vscode-editorGroup-border", "#e5e5e5"], - ["--vscode-editorGroup-dropBackground", "rgba(38, 119, 203, 0.18)"], - ["--vscode-editorGroup-dropIntoPromptBackground", "#f8f8f8"], - ["--vscode-editorGroup-dropIntoPromptForeground", "#3b3b3b"], - ["--vscode-editorGroupHeader-noTabsBackground", "#ffffff"], - ["--vscode-editorGroupHeader-tabsBackground", "#f8f8f8"], - ["--vscode-editorGroupHeader-tabsBorder", "#e5e5e5"], - ["--vscode-editorGutter-addedBackground", "#2ea043"], - ["--vscode-editorGutter-addedSecondaryBackground", "#83db93"], - ["--vscode-editorGutter-background", "#ffffff"], - ["--vscode-editorGutter-commentDraftGlyphForeground", "#3b3b3b"], - ["--vscode-editorGutter-commentGlyphForeground", "#3b3b3b"], - ["--vscode-editorGutter-commentRangeForeground", "#d5d8e9"], - ["--vscode-editorGutter-commentUnresolvedGlyphForeground", "#3b3b3b"], - ["--vscode-editorGutter-deletedBackground", "#f85149"], - ["--vscode-editorGutter-deletedSecondaryBackground", "#fcaaa6"], - ["--vscode-editorGutter-foldingControlForeground", "#3b3b3b"], - ["--vscode-editorGutter-itemBackground", "#d5d8e9"], - ["--vscode-editorGutter-itemGlyphForeground", "#3b3b3b"], - ["--vscode-editorGutter-modifiedBackground", "#005fb8"], - ["--vscode-editorGutter-modifiedSecondaryBackground", "#3aa0ff"], - ["--vscode-editorHint-foreground", "#6c6c6c"], - ["--vscode-editorHoverWidget-background", "#f8f8f8"], - ["--vscode-editorHoverWidget-border", "#c8c8c8"], - ["--vscode-editorHoverWidget-foreground", "#3b3b3b"], - ["--vscode-editorHoverWidget-highlightForeground", "#0066bf"], - ["--vscode-editorHoverWidget-statusBarBackground", "#ececec"], - ["--vscode-editorIndentGuide-activeBackground", "rgba(51, 51, 51, 0.2)"], - ["--vscode-editorIndentGuide-activeBackground1", "#939393"], - ["--vscode-editorIndentGuide-activeBackground2", "rgba(0, 0, 0, 0)"], - ["--vscode-editorIndentGuide-activeBackground3", "rgba(0, 0, 0, 0)"], - ["--vscode-editorIndentGuide-activeBackground4", "rgba(0, 0, 0, 0)"], - ["--vscode-editorIndentGuide-activeBackground5", "rgba(0, 0, 0, 0)"], - ["--vscode-editorIndentGuide-activeBackground6", "rgba(0, 0, 0, 0)"], - ["--vscode-editorIndentGuide-background", "rgba(51, 51, 51, 0.2)"], - ["--vscode-editorIndentGuide-background1", "#d3d3d3"], - ["--vscode-editorIndentGuide-background2", "rgba(0, 0, 0, 0)"], - ["--vscode-editorIndentGuide-background3", "rgba(0, 0, 0, 0)"], - ["--vscode-editorIndentGuide-background4", "rgba(0, 0, 0, 0)"], - ["--vscode-editorIndentGuide-background5", "rgba(0, 0, 0, 0)"], - ["--vscode-editorIndentGuide-background6", "rgba(0, 0, 0, 0)"], - ["--vscode-editorInfo-foreground", "#0063d3"], - ["--vscode-editorInlayHint-background", "rgba(204, 204, 204, 0.1)"], - ["--vscode-editorInlayHint-foreground", "#969696"], - ["--vscode-editorInlayHint-parameterBackground", "rgba(204, 204, 204, 0.1)"], - ["--vscode-editorInlayHint-parameterForeground", "#969696"], - ["--vscode-editorInlayHint-typeBackground", "rgba(204, 204, 204, 0.1)"], - ["--vscode-editorInlayHint-typeForeground", "#969696"], - ["--vscode-editorLightBulb-foreground", "#ddb100"], - ["--vscode-editorLightBulbAi-foreground", "#ddb100"], - ["--vscode-editorLightBulbAutoFix-foreground", "#007acc"], - ["--vscode-editorLineNumber-activeForeground", "#171184"], - ["--vscode-editorLineNumber-foreground", "#6e7681"], - ["--vscode-editorLink-activeForeground", "#0000ff"], - ["--vscode-editorMarkerNavigation-background", "#ffffff"], - ["--vscode-editorMarkerNavigationError-background", "#e51400"], - [ - "--vscode-editorMarkerNavigationError-headerBackground", - "rgba(229, 20, 0, 0.1)", - ], - ["--vscode-editorMarkerNavigationInfo-background", "#0063d3"], - [ - "--vscode-editorMarkerNavigationInfo-headerBackground", - "rgba(0, 99, 211, 0.1)", - ], - ["--vscode-editorMarkerNavigationWarning-background", "#bf8803"], - [ - "--vscode-editorMarkerNavigationWarning-headerBackground", - "rgba(191, 136, 3, 0.1)", - ], - ["--vscode-editorMinimap-inlineChatInserted", "rgba(156, 204, 44, 0.2)"], - ["--vscode-editorMultiCursor-primary.foreground", "#000000"], - ["--vscode-editorMultiCursor-secondary.foreground", "#000000"], - ["--vscode-editorOverviewRuler-addedForeground", "rgba(46, 160, 67, 0.6)"], - ["--vscode-editorOverviewRuler-border", "#e5e5e5"], - ["--vscode-editorOverviewRuler-bracketMatchForeground", "#a0a0a0"], - ["--vscode-editorOverviewRuler-commentDraftForeground", "#d5d8e9"], - ["--vscode-editorOverviewRuler-commentForeground", "#d5d8e9"], - ["--vscode-editorOverviewRuler-commentUnresolvedForeground", "#d5d8e9"], - [ - "--vscode-editorOverviewRuler-commonContentForeground", - "rgba(96, 96, 96, 0.4)", - ], - [ - "--vscode-editorOverviewRuler-currentContentForeground", - "rgba(64, 200, 174, 0.5)", - ], - ["--vscode-editorOverviewRuler-deletedForeground", "rgba(248, 81, 73, 0.6)"], - ["--vscode-editorOverviewRuler-errorForeground", "rgba(255, 18, 18, 0.7)"], - [ - "--vscode-editorOverviewRuler-findMatchForeground", - "rgba(209, 134, 22, 0.49)", - ], - [ - "--vscode-editorOverviewRuler-incomingContentForeground", - "rgba(64, 166, 255, 0.5)", - ], - ["--vscode-editorOverviewRuler-infoForeground", "#0063d3"], - [ - "--vscode-editorOverviewRuler-inlineChatInserted", - "rgba(156, 204, 44, 0.2)", - ], - ["--vscode-editorOverviewRuler-inlineChatRemoved", "rgba(255, 0, 0, 0.16)"], - ["--vscode-editorOverviewRuler-modifiedForeground", "rgba(0, 95, 184, 0.6)"], - [ - "--vscode-editorOverviewRuler-rangeHighlightForeground", - "rgba(0, 122, 204, 0.6)", - ], - [ - "--vscode-editorOverviewRuler-selectionHighlightForeground", - "rgba(160, 160, 160, 0.8)", - ], - ["--vscode-editorOverviewRuler-warningForeground", "#bf8803"], - [ - "--vscode-editorOverviewRuler-wordHighlightForeground", - "rgba(160, 160, 160, 0.8)", - ], - [ - "--vscode-editorOverviewRuler-wordHighlightStrongForeground", - "rgba(192, 160, 192, 0.8)", - ], - [ - "--vscode-editorOverviewRuler-wordHighlightTextForeground", - "rgba(160, 160, 160, 0.8)", - ], - ["--vscode-editorPane-background", "#ffffff"], - ["--vscode-editorRuler-foreground", "#d3d3d3"], - ["--vscode-editorStickyScroll-background", "#ffffff"], - ["--vscode-editorStickyScroll-shadow", "#dddddd"], - ["--vscode-editorStickyScrollGutter-background", "#ffffff"], - ["--vscode-editorStickyScrollHover-background", "#f0f0f0"], - ["--vscode-editorSuggestWidget-background", "#f8f8f8"], - ["--vscode-editorSuggestWidget-border", "#c8c8c8"], - ["--vscode-editorSuggestWidget-focusHighlightForeground", "#0066bf"], - ["--vscode-editorSuggestWidget-foreground", "#3b3b3b"], - ["--vscode-editorSuggestWidget-highlightForeground", "#0066bf"], - ["--vscode-editorSuggestWidget-selectedBackground", "#e8e8e8"], - ["--vscode-editorSuggestWidget-selectedForeground", "#000000"], - ["--vscode-editorSuggestWidget-selectedIconForeground", "#000000"], - ["--vscode-editorSuggestWidgetStatus-foreground", "rgba(59, 59, 59, 0.5)"], - ["--vscode-editorUnicodeHighlight-border", "#bf8803"], - ["--vscode-editorUnnecessaryCode-opacity", "rgba(0, 0, 0, 0.47)"], - ["--vscode-editorWarning-foreground", "#bf8803"], - ["--vscode-editorWhitespace-foreground", "rgba(51, 51, 51, 0.2)"], - ["--vscode-editorWidget-background", "#f8f8f8"], - ["--vscode-editorWidget-border", "#c8c8c8"], - ["--vscode-editorWidget-foreground", "#3b3b3b"], - ["--vscode-errorForeground", "#f85149"], - ["--vscode-extensionBadge-remoteBackground", "#005fb8"], - ["--vscode-extensionBadge-remoteForeground", "#ffffff"], - ["--vscode-extensionButton-background", "#e5e5e5"], - ["--vscode-extensionButton-border", "rgba(0, 0, 0, 0.1)"], - ["--vscode-extensionButton-foreground", "#3b3b3b"], - ["--vscode-extensionButton-hoverBackground", "#cccccc"], - ["--vscode-extensionButton-prominentBackground", "#005fb8"], - ["--vscode-extensionButton-prominentForeground", "#ffffff"], - ["--vscode-extensionButton-prominentHoverBackground", "#0258a8"], - ["--vscode-extensionButton-separator", "rgba(255, 255, 255, 0.4)"], - ["--vscode-extensionIcon-preReleaseForeground", "#1d9271"], - ["--vscode-extensionIcon-privateForeground", "rgba(0, 0, 0, 0.38)"], - ["--vscode-extensionIcon-sponsorForeground", "#b51e78"], - ["--vscode-extensionIcon-starForeground", "#df6100"], - ["--vscode-extensionIcon-verifiedForeground", "#005fb8"], - ["--vscode-focusBorder", "#005fb8"], - ["--vscode-font-size", "13px"], - ["--vscode-font-weight", "normal"], - ["--vscode-foreground", "#3b3b3b"], - ["--vscode-gauge-background", "rgba(0, 122, 204, 0.3)"], - ["--vscode-gauge-errorBackground", "rgba(190, 17, 0, 0.3)"], - ["--vscode-gauge-errorForeground", "#be1100"], - ["--vscode-gauge-foreground", "#007acc"], - ["--vscode-gauge-warningBackground", "rgba(184, 149, 0, 0.3)"], - ["--vscode-gauge-warningForeground", "#b89500"], - ["--vscode-icon-foreground", "#3b3b3b"], - ["--vscode-inlineChat-background", "#f8f8f8"], - ["--vscode-inlineChat-border", "#c8c8c8"], - ["--vscode-inlineChat-foreground", "#3b3b3b"], - ["--vscode-inlineChat-shadow", "rgba(0, 0, 0, 0.16)"], - ["--vscode-inlineChatDiff-inserted", "rgba(156, 204, 44, 0.13)"], - ["--vscode-inlineChatDiff-removed", "rgba(255, 0, 0, 0.1)"], - ["--vscode-inlineChatInput-background", "#ffffff"], - ["--vscode-inlineChatInput-border", "#c8c8c8"], - ["--vscode-inlineChatInput-focusBorder", "#005fb8"], - ["--vscode-inlineChatInput-placeholderForeground", "#767676"], - ["--vscode-inlineEdit-gutterIndicator.background", "rgba(95, 95, 95, 0.09)"], - [ - "--vscode-inlineEdit-gutterIndicator.primaryBackground", - "rgba(0, 95, 184, 0.5)", - ], - ["--vscode-inlineEdit-gutterIndicator.primaryBorder", "#005fb8"], - ["--vscode-inlineEdit-gutterIndicator.primaryForeground", "#ffffff"], - ["--vscode-inlineEdit-gutterIndicator.secondaryBackground", "#f8f8f8"], - ["--vscode-inlineEdit-gutterIndicator.secondaryBorder", "#c8c8c8"], - ["--vscode-inlineEdit-gutterIndicator.secondaryForeground", "#3b3b3b"], - ["--vscode-inlineEdit-gutterIndicator.successfulBackground", "#005fb8"], - ["--vscode-inlineEdit-gutterIndicator.successfulBorder", "#005fb8"], - ["--vscode-inlineEdit-gutterIndicator.successfulForeground", "#ffffff"], - ["--vscode-inlineEdit-modifiedBackground", "rgba(156, 204, 44, 0.07)"], - ["--vscode-inlineEdit-modifiedBorder", "rgba(62, 81, 18, 0.25)"], - [ - "--vscode-inlineEdit-modifiedChangedLineBackground", - "rgba(155, 185, 85, 0.14)", - ], - [ - "--vscode-inlineEdit-modifiedChangedTextBackground", - "rgba(156, 204, 44, 0.18)", - ], - ["--vscode-inlineEdit-originalBackground", "rgba(255, 0, 0, 0.04)"], - ["--vscode-inlineEdit-originalBorder", "rgba(255, 0, 0, 0.2)"], - [ - "--vscode-inlineEdit-originalChangedLineBackground", - "rgba(255, 0, 0, 0.16)", - ], - [ - "--vscode-inlineEdit-originalChangedTextBackground", - "rgba(255, 0, 0, 0.16)", - ], - ["--vscode-inlineEdit-tabWillAcceptModifiedBorder", "rgba(62, 81, 18, 0.25)"], - ["--vscode-inlineEdit-tabWillAcceptOriginalBorder", "rgba(255, 0, 0, 0.2)"], - ["--vscode-input-background", "#ffffff"], - ["--vscode-input-border", "#cecece"], - ["--vscode-input-foreground", "#3b3b3b"], - ["--vscode-input-placeholderForeground", "#767676"], - ["--vscode-inputOption-activeBackground", "#bed6ed"], - ["--vscode-inputOption-activeBorder", "#005fb8"], - ["--vscode-inputOption-activeForeground", "#000000"], - ["--vscode-inputOption-hoverBackground", "rgba(184, 184, 184, 0.31)"], - ["--vscode-inputValidation-errorBackground", "#f2dede"], - ["--vscode-inputValidation-errorBorder", "#be1100"], - ["--vscode-inputValidation-infoBackground", "#d6ecf2"], - ["--vscode-inputValidation-infoBorder", "#007acc"], - ["--vscode-inputValidation-warningBackground", "#f6f5d2"], - ["--vscode-inputValidation-warningBorder", "#b89500"], - ["--vscode-interactive-activeCodeBorder", "#007acc"], - ["--vscode-interactive-inactiveCodeBorder", "#e4e6f1"], - ["--vscode-keybindingLabel-background", "rgba(221, 221, 221, 0.4)"], - ["--vscode-keybindingLabel-border", "rgba(204, 204, 204, 0.4)"], - ["--vscode-keybindingLabel-bottomBorder", "rgba(187, 187, 187, 0.4)"], - ["--vscode-keybindingLabel-foreground", "#3b3b3b"], - ["--vscode-keybindingTable-headerBackground", "rgba(59, 59, 59, 0.04)"], - ["--vscode-keybindingTable-rowsBackground", "rgba(59, 59, 59, 0.04)"], - ["--vscode-list-activeSelectionBackground", "#e8e8e8"], - ["--vscode-list-activeSelectionForeground", "#000000"], - ["--vscode-list-activeSelectionIconForeground", "#000000"], - ["--vscode-list-deemphasizedForeground", "#8e8e90"], - ["--vscode-list-dropBackground", "#d6ebff"], - ["--vscode-list-dropBetweenBackground", "#3b3b3b"], - ["--vscode-list-errorForeground", "#b01011"], - ["--vscode-list-filterMatchBackground", "rgba(234, 92, 0, 0.33)"], - ["--vscode-list-focusAndSelectionOutline", "#005fb8"], - ["--vscode-list-focusHighlightForeground", "#0066bf"], - ["--vscode-list-focusOutline", "#005fb8"], - ["--vscode-list-highlightForeground", "#0066bf"], - ["--vscode-list-hoverBackground", "#f2f2f2"], - ["--vscode-list-inactiveSelectionBackground", "#e4e6f1"], - ["--vscode-list-invalidItemForeground", "#b89500"], - ["--vscode-list-warningForeground", "#855f00"], - ["--vscode-listFilterWidget-background", "#f8f8f8"], - ["--vscode-listFilterWidget-noMatchesOutline", "#be1100"], - ["--vscode-listFilterWidget-outline", "rgba(0, 0, 0, 0)"], - ["--vscode-listFilterWidget-shadow", "rgba(0, 0, 0, 0.16)"], - ["--vscode-markdownAlert-caution.foreground", "#e51400"], - ["--vscode-markdownAlert-important.foreground", "#652d90"], - ["--vscode-markdownAlert-note.foreground", "#0063d3"], - ["--vscode-markdownAlert-tip.foreground", "#388a34"], - ["--vscode-markdownAlert-warning.foreground", "#bf8803"], - ["--vscode-mcpIcon-starForeground", "#df6100"], - ["--vscode-menu-background", "#ffffff"], - ["--vscode-menu-border", "#cecece"], - ["--vscode-menu-foreground", "#3b3b3b"], - ["--vscode-menu-selectionBackground", "#005fb8"], - ["--vscode-menu-selectionForeground", "#ffffff"], - ["--vscode-menu-separatorBackground", "#d4d4d4"], - ["--vscode-menubar-selectionBackground", "rgba(184, 184, 184, 0.31)"], - ["--vscode-menubar-selectionForeground", "#1e1e1e"], - ["--vscode-merge-commonContentBackground", "rgba(96, 96, 96, 0.16)"], - ["--vscode-merge-commonHeaderBackground", "rgba(96, 96, 96, 0.4)"], - ["--vscode-merge-currentContentBackground", "rgba(64, 200, 174, 0.2)"], - ["--vscode-merge-currentHeaderBackground", "rgba(64, 200, 174, 0.5)"], - ["--vscode-merge-incomingContentBackground", "rgba(64, 166, 255, 0.2)"], - ["--vscode-merge-incomingHeaderBackground", "rgba(64, 166, 255, 0.5)"], - ["--vscode-mergeEditor-change.background", "rgba(155, 185, 85, 0.2)"], - ["--vscode-mergeEditor-change.word.background", "rgba(156, 204, 44, 0.4)"], - ["--vscode-mergeEditor-changeBase.background", "#ffcccc"], - ["--vscode-mergeEditor-changeBase.word.background", "#ffa3a3"], - [ - "--vscode-mergeEditor-conflict.handled.minimapOverViewRuler", - "rgba(173, 172, 168, 0.93)", - ], - [ - "--vscode-mergeEditor-conflict.handledFocused.border", - "rgba(193, 193, 193, 0.8)", - ], - [ - "--vscode-mergeEditor-conflict.handledUnfocused.border", - "rgba(134, 134, 134, 0.29)", - ], - [ - "--vscode-mergeEditor-conflict.input1.background", - "rgba(64, 200, 174, 0.2)", - ], - [ - "--vscode-mergeEditor-conflict.input2.background", - "rgba(64, 166, 255, 0.2)", - ], - ["--vscode-mergeEditor-conflict.unhandled.minimapOverViewRuler", "#fcba03"], - ["--vscode-mergeEditor-conflict.unhandledFocused.border", "#ffa600"], - ["--vscode-mergeEditor-conflict.unhandledUnfocused.border", "#ffa600"], - [ - "--vscode-mergeEditor-conflictingLines.background", - "rgba(255, 234, 0, 0.28)", - ], - ["--vscode-minimap-chatEditHighlight", "rgba(255, 255, 255, 0.6)"], - ["--vscode-minimap-errorHighlight", "rgba(255, 18, 18, 0.7)"], - ["--vscode-minimap-findMatchHighlight", "rgba(234, 92, 0, 0.33)"], - ["--vscode-minimap-foregroundOpacity", "#000000"], - ["--vscode-minimap-infoHighlight", "#0063d3"], - ["--vscode-minimap-selectionHighlight", "#add6ff"], - ["--vscode-minimap-selectionOccurrenceHighlight", "rgba(173, 214, 255, 0.5)"], - ["--vscode-minimap-warningHighlight", "#bf8803"], - ["--vscode-minimapGutter-addedBackground", "#2ea043"], - ["--vscode-minimapGutter-deletedBackground", "#f85149"], - ["--vscode-minimapGutter-modifiedBackground", "#005fb8"], - ["--vscode-minimapSlider-activeBackground", "rgba(0, 0, 0, 0.3)"], - ["--vscode-minimapSlider-background", "rgba(100, 100, 100, 0.2)"], - ["--vscode-minimapSlider-hoverBackground", "rgba(100, 100, 100, 0.35)"], - ["--vscode-multiDiffEditor-background", "#ffffff"], - ["--vscode-multiDiffEditor-border", "#cccccc"], - ["--vscode-multiDiffEditor-headerBackground", "#f8f8f8"], - ["--vscode-notebook-cellBorderColor", "#e5e5e5"], - ["--vscode-notebook-cellEditorBackground", "#f8f8f8"], - ["--vscode-notebook-cellInsertionIndicator", "#005fb8"], - ["--vscode-notebook-cellStatusBarItemHoverBackground", "rgba(0, 0, 0, 0.08)"], - ["--vscode-notebook-cellToolbarSeparator", "rgba(128, 128, 128, 0.35)"], - ["--vscode-notebook-editorBackground", "#ffffff"], - ["--vscode-notebook-focusedCellBorder", "#005fb8"], - ["--vscode-notebook-focusedEditorBorder", "#005fb8"], - ["--vscode-notebook-inactiveFocusedCellBorder", "#e5e5e5"], - ["--vscode-notebook-selectedCellBackground", "rgba(200, 221, 241, 0.31)"], - ["--vscode-notebook-selectedCellBorder", "#e5e5e5"], - ["--vscode-notebook-symbolHighlightBackground", "rgba(253, 255, 0, 0.2)"], - ["--vscode-notebookEditorOverviewRuler-runningCellForeground", "#388a34"], - ["--vscode-notebookScrollbarSlider-activeBackground", "rgba(0, 0, 0, 0.6)"], - ["--vscode-notebookScrollbarSlider-background", "rgba(100, 100, 100, 0.4)"], - [ - "--vscode-notebookScrollbarSlider-hoverBackground", - "rgba(100, 100, 100, 0.7)", - ], - ["--vscode-notebookStatusErrorIcon-foreground", "#f85149"], - ["--vscode-notebookStatusRunningIcon-foreground", "#3b3b3b"], - ["--vscode-notebookStatusSuccessIcon-foreground", "#388a34"], - ["--vscode-notificationCenter-border", "#e5e5e5"], - ["--vscode-notificationCenterHeader-background", "#ffffff"], - ["--vscode-notificationCenterHeader-foreground", "#3b3b3b"], - ["--vscode-notificationLink-foreground", "#005fb8"], - ["--vscode-notifications-background", "#ffffff"], - ["--vscode-notifications-border", "#e5e5e5"], - ["--vscode-notifications-foreground", "#3b3b3b"], - ["--vscode-notificationsErrorIcon-foreground", "#e51400"], - ["--vscode-notificationsInfoIcon-foreground", "#0063d3"], - ["--vscode-notificationsWarningIcon-foreground", "#bf8803"], - ["--vscode-notificationToast-border", "#e5e5e5"], - ["--vscode-panel-background", "#f8f8f8"], - ["--vscode-panel-border", "#e5e5e5"], - ["--vscode-panel-dropBorder", "#3b3b3b"], - ["--vscode-panelInput-border", "#e5e5e5"], - ["--vscode-panelSection-border", "#e5e5e5"], - ["--vscode-panelSection-dropBackground", "rgba(38, 119, 203, 0.18)"], - ["--vscode-panelSectionHeader-background", "rgba(128, 128, 128, 0.2)"], - ["--vscode-panelStickyScroll-background", "#f8f8f8"], - ["--vscode-panelStickyScroll-shadow", "#dddddd"], - ["--vscode-panelTitle-activeBorder", "#005fb8"], - ["--vscode-panelTitle-activeForeground", "#3b3b3b"], - ["--vscode-panelTitle-inactiveForeground", "#3b3b3b"], - ["--vscode-panelTitleBadge-background", "#005fb8"], - ["--vscode-panelTitleBadge-foreground", "#ffffff"], - ["--vscode-peekView-border", "#0063d3"], - ["--vscode-peekViewEditor-background", "#f2f8fc"], - [ - "--vscode-peekViewEditor-matchHighlightBackground", - "rgba(187, 128, 9, 0.4)", - ], - ["--vscode-peekViewEditorGutter-background", "#f2f8fc"], - ["--vscode-peekViewEditorStickyScroll-background", "#f2f8fc"], - ["--vscode-peekViewEditorStickyScrollGutter-background", "#f2f8fc"], - ["--vscode-peekViewResult-background", "#ffffff"], - ["--vscode-peekViewResult-fileForeground", "#1e1e1e"], - ["--vscode-peekViewResult-lineForeground", "#646465"], - [ - "--vscode-peekViewResult-matchHighlightBackground", - "rgba(187, 128, 9, 0.4)", - ], - ["--vscode-peekViewResult-selectionBackground", "rgba(51, 153, 255, 0.2)"], - ["--vscode-peekViewResult-selectionForeground", "#6c6c6c"], - ["--vscode-peekViewTitle-background", "#f3f3f3"], - ["--vscode-peekViewTitleDescription-foreground", "#616161"], - ["--vscode-peekViewTitleLabel-foreground", "#000000"], - ["--vscode-pickerGroup-border", "#e5e5e5"], - ["--vscode-pickerGroup-foreground", "#8b949e"], - ["--vscode-ports-iconRunningProcessForeground", "#369432"], - ["--vscode-problemsErrorIcon-foreground", "#e51400"], - ["--vscode-problemsInfoIcon-foreground", "#0063d3"], - ["--vscode-problemsWarningIcon-foreground", "#bf8803"], - ["--vscode-profileBadge-background", "#c4c4c4"], - ["--vscode-profileBadge-foreground", "#333333"], - ["--vscode-profiles-sashBorder", "#e5e5e5"], - ["--vscode-progressBar-background", "#005fb8"], - ["--vscode-quickInput-background", "#f8f8f8"], - ["--vscode-quickInput-foreground", "#3b3b3b"], - ["--vscode-quickInputList-focusBackground", "#e8e8e8"], - ["--vscode-quickInputList-focusForeground", "#000000"], - ["--vscode-quickInputList-focusIconForeground", "#000000"], - ["--vscode-quickInputTitle-background", "rgba(0, 0, 0, 0.06)"], - ["--vscode-radio-activeBackground", "#bed6ed"], - ["--vscode-radio-activeBorder", "#005fb8"], - ["--vscode-radio-activeForeground", "#000000"], - ["--vscode-radio-inactiveBorder", "rgba(0, 0, 0, 0.2)"], - ["--vscode-radio-inactiveHoverBackground", "rgba(184, 184, 184, 0.31)"], - ["--vscode-remoteHub-decorations.addedForegroundColor", "#587c0c"], - ["--vscode-remoteHub-decorations.conflictForegroundColor", "#ad0707"], - ["--vscode-remoteHub-decorations.deletedForegroundColor", "#ad0707"], - ["--vscode-remoteHub-decorations.ignoredResourceForeground", "#8e8e90"], - ["--vscode-remoteHub-decorations.incomingAddedForegroundColor", "#587c0c"], - ["--vscode-remoteHub-decorations.incomingDeletedForegroundColor", "#ad0707"], - ["--vscode-remoteHub-decorations.incomingModifiedForegroundColor", "#895503"], - ["--vscode-remoteHub-decorations.incomingRenamedForegroundColor", "#007100"], - ["--vscode-remoteHub-decorations.modifiedForegroundColor", "#895503"], - ["--vscode-remoteHub-decorations.possibleConflictForegroundColor", "#855f00"], - ["--vscode-remoteHub-decorations.submoduleForegroundColor", "#1258a7"], - [ - "--vscode-remoteHub-decorations.workspaceRepositoriesView.hasUncommittedChangesForegroundColor", - "#895503", - ], - ["--vscode-sash-hoverBorder", "#005fb8"], - ["--vscode-scmGraph-foreground1", "#ffb000"], - ["--vscode-scmGraph-foreground2", "#dc267f"], - ["--vscode-scmGraph-foreground3", "#994f00"], - ["--vscode-scmGraph-foreground4", "#40b0a6"], - ["--vscode-scmGraph-foreground5", "#b66dff"], - ["--vscode-scmGraph-historyItemBaseRefColor", "#ea5c00"], - ["--vscode-scmGraph-historyItemHoverAdditionsForeground", "#587c0c"], - ["--vscode-scmGraph-historyItemHoverDefaultLabelBackground", "#cccccc"], - ["--vscode-scmGraph-historyItemHoverDefaultLabelForeground", "#3b3b3b"], - ["--vscode-scmGraph-historyItemHoverDeletionsForeground", "#ad0707"], - ["--vscode-scmGraph-historyItemHoverLabelForeground", "#f8f8f8"], - ["--vscode-scmGraph-historyItemRefColor", "#0063d3"], - ["--vscode-scmGraph-historyItemRemoteRefColor", "#652d90"], - ["--vscode-scrollbar-shadow", "#dddddd"], - ["--vscode-scrollbarSlider-activeBackground", "rgba(0, 0, 0, 0.6)"], - ["--vscode-scrollbarSlider-background", "rgba(100, 100, 100, 0.4)"], - ["--vscode-scrollbarSlider-hoverBackground", "rgba(100, 100, 100, 0.7)"], - ["--vscode-search-resultsInfoForeground", "#3b3b3b"], - ["--vscode-searchEditor-findMatchBackground", "rgba(234, 92, 0, 0.22)"], - ["--vscode-searchEditor-textInputBorder", "#cecece"], - ["--vscode-settings-checkboxBackground", "#f8f8f8"], - ["--vscode-settings-checkboxBorder", "#cecece"], - ["--vscode-settings-checkboxForeground", "#3b3b3b"], - ["--vscode-settings-dropdownBackground", "#ffffff"], - ["--vscode-settings-dropdownBorder", "#cecece"], - ["--vscode-settings-dropdownForeground", "#3b3b3b"], - ["--vscode-settings-dropdownListBorder", "#c8c8c8"], - ["--vscode-settings-focusedRowBackground", "rgba(242, 242, 242, 0.6)"], - ["--vscode-settings-focusedRowBorder", "#005fb8"], - ["--vscode-settings-headerBorder", "#e5e5e5"], - ["--vscode-settings-headerForeground", "#1f1f1f"], - ["--vscode-settings-modifiedItemIndicator", "rgba(187, 128, 9, 0.4)"], - ["--vscode-settings-numberInputBackground", "#ffffff"], - ["--vscode-settings-numberInputBorder", "#cecece"], - ["--vscode-settings-numberInputForeground", "#3b3b3b"], - ["--vscode-settings-rowHoverBackground", "rgba(242, 242, 242, 0.3)"], - ["--vscode-settings-sashBorder", "#e5e5e5"], - ["--vscode-settings-settingsHeaderHoverForeground", "rgba(31, 31, 31, 0.7)"], - ["--vscode-settings-textInputBackground", "#ffffff"], - ["--vscode-settings-textInputBorder", "#cecece"], - ["--vscode-settings-textInputForeground", "#3b3b3b"], - ["--vscode-sideBar-background", "#f8f8f8"], - ["--vscode-sideBar-border", "#e5e5e5"], - ["--vscode-sideBar-dropBackground", "rgba(38, 119, 203, 0.18)"], - ["--vscode-sideBar-foreground", "#3b3b3b"], - ["--vscode-sideBarActivityBarTop-border", "#e5e5e5"], - ["--vscode-sideBarSectionHeader-background", "#f8f8f8"], - ["--vscode-sideBarSectionHeader-border", "#e5e5e5"], - ["--vscode-sideBarSectionHeader-foreground", "#3b3b3b"], - ["--vscode-sideBarStickyScroll-background", "#f8f8f8"], - ["--vscode-sideBarStickyScroll-shadow", "#dddddd"], - ["--vscode-sideBarTitle-background", "#f8f8f8"], - ["--vscode-sideBarTitle-foreground", "#3b3b3b"], - ["--vscode-sideBySideEditor-horizontalBorder", "#e5e5e5"], - ["--vscode-sideBySideEditor-verticalBorder", "#e5e5e5"], - ["--vscode-simpleFindWidget-sashBorder", "#c8c8c8"], - ["--vscode-statusBar-background", "#f8f8f8"], - ["--vscode-statusBar-border", "#e5e5e5"], - ["--vscode-statusBar-debuggingBackground", "#fd716c"], - ["--vscode-statusBar-debuggingBorder", "#e5e5e5"], - ["--vscode-statusBar-debuggingForeground", "#000000"], - ["--vscode-statusBar-focusBorder", "#005fb8"], - ["--vscode-statusBar-foreground", "#3b3b3b"], - ["--vscode-statusBar-noFolderBackground", "#f8f8f8"], - ["--vscode-statusBar-noFolderBorder", "#e5e5e5"], - ["--vscode-statusBar-noFolderForeground", "#3b3b3b"], - ["--vscode-statusBarItem-activeBackground", "rgba(255, 255, 255, 0.18)"], - ["--vscode-statusBarItem-compactHoverBackground", "#cccccc"], - ["--vscode-statusBarItem-errorBackground", "#c72e0f"], - ["--vscode-statusBarItem-errorForeground", "#ffffff"], - ["--vscode-statusBarItem-errorHoverBackground", "rgba(31, 31, 31, 0.07)"], - ["--vscode-statusBarItem-errorHoverForeground", "#000000"], - ["--vscode-statusBarItem-focusBorder", "#005fb8"], - ["--vscode-statusBarItem-hoverBackground", "rgba(31, 31, 31, 0.07)"], - ["--vscode-statusBarItem-hoverForeground", "#000000"], - ["--vscode-statusBarItem-offlineBackground", "#6c1717"], - ["--vscode-statusBarItem-offlineForeground", "#ffffff"], - ["--vscode-statusBarItem-offlineHoverBackground", "rgba(31, 31, 31, 0.07)"], - ["--vscode-statusBarItem-offlineHoverForeground", "#000000"], - ["--vscode-statusBarItem-prominentBackground", "rgba(110, 118, 129, 0.4)"], - ["--vscode-statusBarItem-prominentForeground", "#3b3b3b"], - ["--vscode-statusBarItem-prominentHoverBackground", "rgba(31, 31, 31, 0.07)"], - ["--vscode-statusBarItem-prominentHoverForeground", "#000000"], - ["--vscode-statusBarItem-remoteBackground", "#005fb8"], - ["--vscode-statusBarItem-remoteForeground", "#ffffff"], - ["--vscode-statusBarItem-remoteHoverBackground", "rgba(31, 31, 31, 0.07)"], - ["--vscode-statusBarItem-remoteHoverForeground", "#000000"], - ["--vscode-statusBarItem-warningBackground", "#725102"], - ["--vscode-statusBarItem-warningForeground", "#ffffff"], - ["--vscode-statusBarItem-warningHoverBackground", "rgba(31, 31, 31, 0.07)"], - ["--vscode-statusBarItem-warningHoverForeground", "#000000"], - ["--vscode-strokeThickness", "1px"], - ["--vscode-symbolIcon-arrayForeground", "#3b3b3b"], - ["--vscode-symbolIcon-booleanForeground", "#3b3b3b"], - ["--vscode-symbolIcon-classForeground", "#d67e00"], - ["--vscode-symbolIcon-colorForeground", "#3b3b3b"], - ["--vscode-symbolIcon-constantForeground", "#3b3b3b"], - ["--vscode-symbolIcon-constructorForeground", "#652d90"], - ["--vscode-symbolIcon-enumeratorForeground", "#d67e00"], - ["--vscode-symbolIcon-enumeratorMemberForeground", "#007acc"], - ["--vscode-symbolIcon-eventForeground", "#d67e00"], - ["--vscode-symbolIcon-fieldForeground", "#007acc"], - ["--vscode-symbolIcon-fileForeground", "#3b3b3b"], - ["--vscode-symbolIcon-folderForeground", "#3b3b3b"], - ["--vscode-symbolIcon-functionForeground", "#652d90"], - ["--vscode-symbolIcon-interfaceForeground", "#007acc"], - ["--vscode-symbolIcon-keyForeground", "#3b3b3b"], - ["--vscode-symbolIcon-keywordForeground", "#3b3b3b"], - ["--vscode-symbolIcon-methodForeground", "#652d90"], - ["--vscode-symbolIcon-moduleForeground", "#3b3b3b"], - ["--vscode-symbolIcon-namespaceForeground", "#3b3b3b"], - ["--vscode-symbolIcon-nullForeground", "#3b3b3b"], - ["--vscode-symbolIcon-numberForeground", "#3b3b3b"], - ["--vscode-symbolIcon-objectForeground", "#3b3b3b"], - ["--vscode-symbolIcon-operatorForeground", "#3b3b3b"], - ["--vscode-symbolIcon-packageForeground", "#3b3b3b"], - ["--vscode-symbolIcon-propertyForeground", "#3b3b3b"], - ["--vscode-symbolIcon-referenceForeground", "#3b3b3b"], - ["--vscode-symbolIcon-snippetForeground", "#3b3b3b"], - ["--vscode-symbolIcon-stringForeground", "#3b3b3b"], - ["--vscode-symbolIcon-structForeground", "#3b3b3b"], - ["--vscode-symbolIcon-textForeground", "#3b3b3b"], - ["--vscode-symbolIcon-typeParameterForeground", "#3b3b3b"], - ["--vscode-symbolIcon-unitForeground", "#3b3b3b"], - ["--vscode-symbolIcon-variableForeground", "#007acc"], - ["--vscode-tab-activeBackground", "#ffffff"], - ["--vscode-tab-activeBorder", "#f8f8f8"], - ["--vscode-tab-activeBorderTop", "#005fb8"], - ["--vscode-tab-activeForeground", "#3b3b3b"], - ["--vscode-tab-activeModifiedBorder", "#33aaee"], - ["--vscode-tab-border", "#e5e5e5"], - ["--vscode-tab-dragAndDropBorder", "#3b3b3b"], - ["--vscode-tab-hoverBackground", "#ffffff"], - ["--vscode-tab-inactiveBackground", "#f8f8f8"], - ["--vscode-tab-inactiveForeground", "#868686"], - ["--vscode-tab-inactiveModifiedBorder", "rgba(51, 170, 238, 0.5)"], - ["--vscode-tab-lastPinnedBorder", "#d4d4d4"], - ["--vscode-tab-selectedBackground", "rgba(255, 255, 255, 0.65)"], - ["--vscode-tab-selectedBorderTop", "#68a3da"], - ["--vscode-tab-selectedForeground", "rgba(51, 51, 51, 0.7)"], - ["--vscode-tab-unfocusedActiveBackground", "#ffffff"], - ["--vscode-tab-unfocusedActiveBorder", "#f8f8f8"], - ["--vscode-tab-unfocusedActiveBorderTop", "#e5e5e5"], - ["--vscode-tab-unfocusedActiveForeground", "rgba(59, 59, 59, 0.7)"], - ["--vscode-tab-unfocusedActiveModifiedBorder", "rgba(51, 170, 238, 0.7)"], - ["--vscode-tab-unfocusedHoverBackground", "#f8f8f8"], - ["--vscode-tab-unfocusedInactiveBackground", "#f8f8f8"], - ["--vscode-tab-unfocusedInactiveForeground", "rgba(134, 134, 134, 0.5)"], - ["--vscode-tab-unfocusedInactiveModifiedBorder", "rgba(51, 170, 238, 0.25)"], - ["--vscode-terminal-ansiBlack", "#000000"], - ["--vscode-terminal-ansiBlue", "#0451a5"], - ["--vscode-terminal-ansiBrightBlack", "#666666"], - ["--vscode-terminal-ansiBrightBlue", "#0451a5"], - ["--vscode-terminal-ansiBrightCyan", "#0598bc"], - ["--vscode-terminal-ansiBrightGreen", "#14ce14"], - ["--vscode-terminal-ansiBrightMagenta", "#bc05bc"], - ["--vscode-terminal-ansiBrightRed", "#cd3131"], - ["--vscode-terminal-ansiBrightWhite", "#a5a5a5"], - ["--vscode-terminal-ansiBrightYellow", "#b5ba00"], - ["--vscode-terminal-ansiCyan", "#0598bc"], - ["--vscode-terminal-ansiGreen", "#107c10"], - ["--vscode-terminal-ansiMagenta", "#bc05bc"], - ["--vscode-terminal-ansiRed", "#cd3131"], - ["--vscode-terminal-ansiWhite", "#555555"], - ["--vscode-terminal-ansiYellow", "#949800"], - ["--vscode-terminal-border", "#e5e5e5"], - ["--vscode-terminal-dropBackground", "rgba(38, 119, 203, 0.18)"], - ["--vscode-terminal-findMatchBackground", "#a8ac94"], - ["--vscode-terminal-findMatchHighlightBackground", "rgba(234, 92, 0, 0.33)"], - ["--vscode-terminal-foreground", "#3b3b3b"], - ["--vscode-terminal-hoverHighlightBackground", "rgba(173, 214, 255, 0.07)"], - ["--vscode-terminal-inactiveSelectionBackground", "#e5ebf1"], - ["--vscode-terminal-initialHintForeground", "rgba(0, 0, 0, 0.47)"], - ["--vscode-terminal-selectionBackground", "#add6ff"], - ["--vscode-terminal-tab.activeBorder", "#005fb8"], - [ - "--vscode-terminalCommandDecoration-defaultBackground", - "rgba(0, 0, 0, 0.25)", - ], - ["--vscode-terminalCommandDecoration-errorBackground", "#e51400"], - ["--vscode-terminalCommandDecoration-successBackground", "#2090d3"], - ["--vscode-terminalCommandGuide-foreground", "#e4e6f1"], - ["--vscode-terminalCursor-foreground", "#005fb8"], - ["--vscode-terminalOverviewRuler-border", "#e5e5e5"], - [ - "--vscode-terminalOverviewRuler-cursorForeground", - "rgba(160, 160, 160, 0.8)", - ], - [ - "--vscode-terminalOverviewRuler-findMatchForeground", - "rgba(209, 134, 22, 0.49)", - ], - ["--vscode-terminalStickyScrollHover-background", "#f0f0f0"], - ["--vscode-terminalSymbolIcon-aliasForeground", "#652d90"], - ["--vscode-terminalSymbolIcon-argumentForeground", "#007acc"], - ["--vscode-terminalSymbolIcon-branchForeground", "#3b3b3b"], - ["--vscode-terminalSymbolIcon-commitForeground", "#3b3b3b"], - ["--vscode-terminalSymbolIcon-fileForeground", "#3b3b3b"], - ["--vscode-terminalSymbolIcon-flagForeground", "#d67e00"], - ["--vscode-terminalSymbolIcon-folderForeground", "#3b3b3b"], - ["--vscode-terminalSymbolIcon-methodForeground", "#652d90"], - ["--vscode-terminalSymbolIcon-optionForeground", "#d67e00"], - ["--vscode-terminalSymbolIcon-optionValueForeground", "#007acc"], - ["--vscode-terminalSymbolIcon-pullRequestDoneForeground", "#3b3b3b"], - ["--vscode-terminalSymbolIcon-pullRequestForeground", "#3b3b3b"], - ["--vscode-terminalSymbolIcon-remoteForeground", "#3b3b3b"], - ["--vscode-terminalSymbolIcon-stashForeground", "#3b3b3b"], - ["--vscode-terminalSymbolIcon-symbolicLinkFileForeground", "#3b3b3b"], - ["--vscode-terminalSymbolIcon-symbolicLinkFolderForeground", "#3b3b3b"], - ["--vscode-terminalSymbolIcon-symbolText", "#3b3b3b"], - ["--vscode-terminalSymbolIcon-tagForeground", "#3b3b3b"], - ["--vscode-testing-coverCountBadgeBackground", "#cccccc"], - ["--vscode-testing-coverCountBadgeForeground", "#3b3b3b"], - ["--vscode-testing-coveredBackground", "rgba(156, 204, 44, 0.25)"], - ["--vscode-testing-coveredBorder", "rgba(156, 204, 44, 0.19)"], - ["--vscode-testing-coveredGutterBackground", "rgba(156, 204, 44, 0.15)"], - ["--vscode-testing-iconErrored", "#f14c4c"], - ["--vscode-testing-iconErrored.retired", "rgba(241, 76, 76, 0.7)"], - ["--vscode-testing-iconFailed", "#f14c4c"], - ["--vscode-testing-iconFailed.retired", "rgba(241, 76, 76, 0.7)"], - ["--vscode-testing-iconPassed", "#73c991"], - ["--vscode-testing-iconPassed.retired", "rgba(115, 201, 145, 0.7)"], - ["--vscode-testing-iconQueued", "#cca700"], - ["--vscode-testing-iconQueued.retired", "rgba(204, 167, 0, 0.7)"], - ["--vscode-testing-iconSkipped", "#848484"], - ["--vscode-testing-iconSkipped.retired", "rgba(132, 132, 132, 0.7)"], - ["--vscode-testing-iconUnset", "#848484"], - ["--vscode-testing-iconUnset.retired", "rgba(132, 132, 132, 0.7)"], - ["--vscode-testing-message.error.badgeBackground", "#e51400"], - ["--vscode-testing-message.error.badgeBorder", "#e51400"], - ["--vscode-testing-message.error.badgeForeground", "#ffffff"], - [ - "--vscode-testing-message.info.decorationForeground", - "rgba(59, 59, 59, 0.5)", - ], - ["--vscode-testing-messagePeekBorder", "#0063d3"], - ["--vscode-testing-messagePeekHeaderBackground", "rgba(0, 99, 211, 0.1)"], - ["--vscode-testing-peekBorder", "#e51400"], - ["--vscode-testing-peekHeaderBackground", "rgba(229, 20, 0, 0.1)"], - ["--vscode-testing-runAction", "#73c991"], - ["--vscode-testing-uncoveredBackground", "rgba(255, 0, 0, 0.2)"], - ["--vscode-testing-uncoveredBorder", "rgba(255, 0, 0, 0.15)"], - ["--vscode-testing-uncoveredBranchBackground", "#ff9999"], - ["--vscode-testing-uncoveredGutterBackground", "rgba(255, 0, 0, 0.3)"], - ["--vscode-textBlockQuote-background", "#f8f8f8"], - ["--vscode-textBlockQuote-border", "#e5e5e5"], - ["--vscode-textCodeBlock-background", "#f8f8f8"], - ["--vscode-textLink-activeForeground", "#005fb8"], - ["--vscode-textLink-foreground", "#005fb8"], - ["--vscode-textPreformat-background", "rgba(0, 0, 0, 0.12)"], - ["--vscode-textPreformat-foreground", "#3b3b3b"], - ["--vscode-textSeparator-foreground", "#21262d"], - ["--vscode-titleBar-activeBackground", "#f8f8f8"], - ["--vscode-titleBar-activeForeground", "#1e1e1e"], - ["--vscode-titleBar-border", "#e5e5e5"], - ["--vscode-titleBar-inactiveBackground", "#f8f8f8"], - ["--vscode-titleBar-inactiveForeground", "#8b949e"], - ["--vscode-toolbar-activeBackground", "rgba(166, 166, 166, 0.31)"], - ["--vscode-toolbar-hoverBackground", "rgba(184, 184, 184, 0.31)"], - ["--vscode-tree-inactiveIndentGuidesStroke", "rgba(169, 169, 169, 0.4)"], - ["--vscode-tree-indentGuidesStroke", "#a9a9a9"], - ["--vscode-tree-tableColumnsBorder", "rgba(97, 97, 97, 0.13)"], - ["--vscode-tree-tableOddRowsBackground", "rgba(59, 59, 59, 0.04)"], - ["--vscode-walkThrough-embeddedEditorBackground", "#f4f4f4"], - ["--vscode-walkthrough-stepTitle.foreground", "#000000"], - ["--vscode-welcomePage-progress.background", "#ffffff"], - ["--vscode-welcomePage-progress.foreground", "#005fb8"], - ["--vscode-welcomePage-tileBackground", "#f3f3f3"], - ["--vscode-welcomePage-tileBorder", "rgba(0, 0, 0, 0.1)"], - ["--vscode-welcomePage-tileHoverBackground", "#dfdfdf"], - ["--vscode-widget-border", "#e5e5e5"], - ["--vscode-widget-shadow", "rgba(0, 0, 0, 0.16)"], -]; diff --git a/.storybook/tsconfig.json b/.storybook/tsconfig.json index 0d9ba5e8a6..1f39050aaf 100644 --- a/.storybook/tsconfig.json +++ b/.storybook/tsconfig.json @@ -6,6 +6,6 @@ "noEmit": true, "rootDir": ".." }, - "include": ["*.ts", "themes/**/*.ts", "../packages/*/storybook.preview.ts"], + "include": ["*.ts", "../packages/*/storybook.preview.ts"], "exclude": ["node_modules"] } diff --git a/package.json b/package.json index d8c4eb4ef1..e0df8feac5 100644 --- a/package.json +++ b/package.json @@ -789,6 +789,7 @@ "@typescript-eslint/parser": "^8.63.0", "@vitejs/plugin-react": "catalog:", "@vitest/coverage-v8": "^4.1.10", + "@vscode-elements/webview-playground": "catalog:", "@vscode/codicons": "catalog:", "@vscode/test-cli": "^0.0.15", "@vscode/test-electron": "^3.0.0", diff --git a/packages/ui/README.md b/packages/ui/README.md new file mode 100644 index 0000000000..04b76f5bfb --- /dev/null +++ b/packages/ui/README.md @@ -0,0 +1,36 @@ +# @repo/ui + +Generic component library for VS Code webviews. No workspace or task +knowledge — that lives in the consuming packages (`@repo/workspaces`, +`@repo/tasks`). + +## Theming + +`tokens.css` defines semantic `--ui-*` custom properties mapped to the +`--vscode-*` variables VS Code injects into every webview. Components +style against the semantic tokens only, so the VS Code mapping (including +high contrast) is adjusted in one place. Tokens whose underlying variable +may be absent (high contrast themes omit hover/selection fills) declare a +fallback, so every token always resolves. Import it once per webview +entry point: + +```ts +import "@repo/ui/tokens.css"; +``` + +`useVscodeTheme()` returns the active theme kind (`dark`, `light`, +`high-contrast`, `high-contrast-light`) and re-renders on theme changes. + +`codicon.css` re-exports the codicon font and classes. + +## Rules + +The package is shaped for a future standalone NPM split. Keep it that way: + +- No `workspace:*` runtime dependencies (no `@repo/shared`, + `@repo/webview-shared`). +- `react` stays a peer dependency. +- New entry points go in the `exports` map; consumers never deep-import + `src/`. +- New components define their VS Code mappings in `tokens.css`, not + inline `--vscode-*` references. diff --git a/packages/ui/package.json b/packages/ui/package.json new file mode 100644 index 0000000000..9e5fb4fed4 --- /dev/null +++ b/packages/ui/package.json @@ -0,0 +1,29 @@ +{ + "name": "@repo/ui", + "version": "1.0.0", + "description": "Shared component library for VS Code webviews", + "private": true, + "type": "module", + "exports": { + ".": { + "types": "./src/index.ts", + "default": "./src/index.ts" + }, + "./codicon.css": "./src/codicon.css", + "./tokens.css": "./src/tokens.css" + }, + "scripts": { + "typecheck": "tsc --noEmit" + }, + "dependencies": { + "@vscode/codicons": "catalog:" + }, + "peerDependencies": { + "react": "catalog:" + }, + "devDependencies": { + "@types/react": "catalog:", + "react": "catalog:", + "typescript": "catalog:" + } +} diff --git a/packages/ui/src/codicon.css b/packages/ui/src/codicon.css new file mode 100644 index 0000000000..10ecb75c7d --- /dev/null +++ b/packages/ui/src/codicon.css @@ -0,0 +1,2 @@ +/* Codicon assets re-exported so consumers only depend on this package. */ +@import "@vscode/codicons/dist/codicon.css"; diff --git a/packages/ui/src/css.d.ts b/packages/ui/src/css.d.ts new file mode 100644 index 0000000000..cbe652dbe0 --- /dev/null +++ b/packages/ui/src/css.d.ts @@ -0,0 +1 @@ +declare module "*.css"; diff --git a/packages/ui/src/foundations.stories.tsx b/packages/ui/src/foundations.stories.tsx new file mode 100644 index 0000000000..cbd5132fb1 --- /dev/null +++ b/packages/ui/src/foundations.stories.tsx @@ -0,0 +1,148 @@ +import { useEffect, useState } from "react"; + +import { useVscodeTheme } from "./useVscodeTheme"; + +import type { Meta, StoryObj } from "@storybook/react-vite"; + +/** All `--ui-*` tokens declared in loaded stylesheets, so the story stays in sync with tokens.css. */ +function uiTokens(): string[] { + const tokens = new Set(); + for (const sheet of Array.from(document.styleSheets)) { + let rules: CSSRuleList; + try { + rules = sheet.cssRules; + } catch { + continue; + } + for (const rule of Array.from(rules)) { + if (rule instanceof CSSStyleRule && rule.selectorText === ":root") { + for (const property of Array.from(rule.style)) { + if (property.startsWith("--ui-")) { + tokens.add(property); + } + } + } + } + } + return Array.from(tokens); +} + +/* Checkerboard so transparent and near-background swatches stay visible. */ +const swatchBackdrop: React.CSSProperties = { + width: "1rem", + height: "1rem", + flexShrink: 0, + border: "1px solid var(--ui-description-foreground)", + backgroundImage: + "linear-gradient(45deg, #999 25%, #0000 25% 75%, #999 75%), " + + "linear-gradient(45deg, #999 25%, #0000 25% 75%, #999 75%)", + backgroundSize: "8px 8px", + backgroundPosition: "0 0, 4px 4px", +}; + +const Foundations = (): React.JSX.Element => { + const theme = useVscodeTheme(); + const [values, setValues] = useState>( + () => new Map(), + ); + const tokens = uiTokens(); + const fontTokens = tokens.filter((token) => token.includes("font")); + const colorTokens = tokens.filter((token) => !token.includes("font")); + + useEffect(() => { + // The theme decorator applies --vscode-* variables in a parent effect + // that runs after this one; read the resolved values a frame later. + const frame = requestAnimationFrame(() => { + const styles = getComputedStyle(document.documentElement); + setValues( + new Map( + uiTokens().map((token) => [ + token, + styles.getPropertyValue(token).trim(), + ]), + ), + ); + }); + return (): void => { + cancelAnimationFrame(frame); + }; + }, [theme]); + + return ( +
+

+ Theme kind: {theme} +

+

+ This text is set with {fontTokens.join(", ")}. +

+
    + {colorTokens.map((token) => ( +
  • + + + + {token} + + {values.get(token) || "unset"} + +
    • + ))} +
+
+ ); +}; + +const meta: Meta = { + title: "UI/Foundations", + component: Foundations, + parameters: { + // Snapshot every theme; tokens are the single theming surface, so this + // is where theme regressions show up. + chromatic: { + modes: { + light: { theme: "light" }, + dark: { theme: "dark" }, + "high-contrast": { theme: "high-contrast" }, + "high-contrast-light": { theme: "high-contrast-light" }, + }, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Tokens: Story = {}; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts new file mode 100644 index 0000000000..fb38844dba --- /dev/null +++ b/packages/ui/src/index.ts @@ -0,0 +1 @@ +export { useVscodeTheme, type VscodeThemeKind } from "./useVscodeTheme"; diff --git a/packages/ui/src/tokens.css b/packages/ui/src/tokens.css new file mode 100644 index 0000000000..e0cae1cbb8 --- /dev/null +++ b/packages/ui/src/tokens.css @@ -0,0 +1,51 @@ +/* + * Semantic tokens mapped to the `--vscode-*` variables VS Code injects + * into webviews — the single place the library is theme-matched to + * VS Code. + */ +:root { + /* Typography */ + --ui-font-family: var(--vscode-font-family); + --ui-font-size: var(--vscode-font-size); + --ui-font-weight: var(--vscode-font-weight); + + /* Surfaces and text */ + --ui-foreground: var(--vscode-foreground); + --ui-background: var( + --vscode-sideBar-background, + var(--vscode-editor-background) + ); + --ui-description-foreground: var(--vscode-descriptionForeground); + --ui-icon-foreground: var(--vscode-icon-foreground); + --ui-border: var(--vscode-sideBar-border, transparent); + + /* Interaction. Hover/selection fills may be absent in high contrast + themes, which convey state through contrast borders instead. */ + --ui-focus-border: var(--vscode-focusBorder); + --ui-hover-background: var(--vscode-list-hoverBackground, transparent); + --ui-hover-foreground: var( + --vscode-list-hoverForeground, + var(--ui-foreground) + ); + --ui-active-selection-background: var( + --vscode-list-activeSelectionBackground, + transparent + ); + --ui-active-selection-foreground: var( + --vscode-list-activeSelectionForeground, + var(--ui-foreground) + ); + --ui-inactive-selection-background: var( + --vscode-list-inactiveSelectionBackground, + transparent + ); + --ui-link-foreground: var(--vscode-textLink-foreground); + + /* Feedback */ + --ui-error-foreground: var(--vscode-errorForeground); + --ui-warning-foreground: var(--vscode-editorWarning-foreground); + + /* Only defined by high contrast themes; transparent elsewhere */ + --ui-contrast-border: var(--vscode-contrastBorder, transparent); + --ui-contrast-active-border: var(--vscode-contrastActiveBorder, transparent); +} diff --git a/packages/ui/src/useVscodeTheme.ts b/packages/ui/src/useVscodeTheme.ts new file mode 100644 index 0000000000..cc0b2d7abe --- /dev/null +++ b/packages/ui/src/useVscodeTheme.ts @@ -0,0 +1,36 @@ +import { useSyncExternalStore } from "react"; + +/** Theme kinds VS Code reports via the `data-vscode-theme-kind` body attribute. */ +export type VscodeThemeKind = + "light" | "dark" | "high-contrast" | "high-contrast-light"; + +const THEME_KIND_ATTRIBUTE = "data-vscode-theme-kind"; + +function subscribe(onChange: () => void): () => void { + const observer = new MutationObserver(onChange); + observer.observe(document.body, { + attributes: true, + attributeFilter: [THEME_KIND_ATTRIBUTE], + }); + return (): void => { + observer.disconnect(); + }; +} + +function getSnapshot(): VscodeThemeKind { + switch (document.body.getAttribute(THEME_KIND_ATTRIBUTE)) { + case "vscode-light": + return "light"; + case "vscode-high-contrast": + return "high-contrast"; + case "vscode-high-contrast-light": + return "high-contrast-light"; + default: + return "dark"; + } +} + +/** The active VS Code theme kind; re-renders when the user switches themes. */ +export function useVscodeTheme(): VscodeThemeKind { + return useSyncExternalStore(subscribe, getSnapshot); +} diff --git a/packages/ui/storybook.preview.ts b/packages/ui/storybook.preview.ts new file mode 100644 index 0000000000..ba28405096 --- /dev/null +++ b/packages/ui/storybook.preview.ts @@ -0,0 +1 @@ +import "./src/tokens.css"; diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json new file mode 100644 index 0000000000..3817044aa5 --- /dev/null +++ b/packages/ui/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../tsconfig.packages.json", + "include": ["src", "storybook.preview.ts"] +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5b07d05ffc..9666dc1ec2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -37,6 +37,9 @@ catalogs: '@vscode-elements/react-elements': specifier: ^2.4.0 version: 2.4.0 + '@vscode-elements/webview-playground': + specifier: ^1.9.0 + version: 1.9.0 '@vscode/codicons': specifier: ^0.0.45 version: 0.0.45 @@ -86,7 +89,7 @@ importers: version: link:packages/shared axios: specifier: ^1.18.1 - version: 1.18.1 + version: 1.18.1(supports-color@8.1.1) date-fns: specifier: 'catalog:' version: 4.4.0 @@ -113,7 +116,7 @@ importers: version: 4.1.2 proxy-agent: specifier: ^8.0.2 - version: 8.0.2 + version: 8.0.2(supports-color@8.1.1) semver: specifier: ^7.8.5 version: 7.8.5 @@ -138,7 +141,7 @@ importers: version: 10.0.1(eslint@10.6.0) '@eslint/markdown': specifier: ^8.0.3 - version: 8.0.3 + version: 8.0.3(supports-color@8.1.1) '@repo/mocks': specifier: workspace:* version: link:packages/mocks @@ -201,13 +204,16 @@ importers: version: 8.63.0(@typescript-eslint/parser@8.63.0)(eslint@10.6.0)(typescript@6.0.3) '@typescript-eslint/parser': specifier: ^8.63.0 - version: 8.63.0(eslint@10.6.0)(typescript@6.0.3) + version: 8.63.0(eslint@10.6.0)(supports-color@8.1.1)(typescript@6.0.3) '@vitejs/plugin-react': specifier: 'catalog:' version: 6.0.3(@rolldown/plugin-babel@0.2.3)(babel-plugin-react-compiler@1.0.0)(vite@8.1.3) '@vitest/coverage-v8': specifier: ^4.1.10 version: 4.1.10(vitest@4.1.10) + '@vscode-elements/webview-playground': + specifier: 'catalog:' + version: 1.9.0 '@vscode/codicons': specifier: 'catalog:' version: 0.0.45 @@ -216,10 +222,10 @@ importers: version: 0.0.15 '@vscode/test-electron': specifier: ^3.0.0 - version: 3.0.0 + version: 3.0.0(supports-color@8.1.1) '@vscode/vsce': specifier: ^3.9.2 - version: 3.9.2 + version: 3.9.2(supports-color@8.1.1) babel-plugin-react-compiler: specifier: 'catalog:' version: 1.0.0 @@ -243,22 +249,22 @@ importers: version: 1.11.21 electron: specifier: 39.8.5 - version: 39.8.5 + version: 39.8.5(supports-color@8.1.1) esbuild: specifier: ^0.28.1 version: 0.28.1 eslint: specifier: ^10.6.0 - version: 10.6.0 + version: 10.6.0(supports-color@8.1.1) eslint-config-prettier: specifier: ^10.1.8 version: 10.1.8(eslint@10.6.0) eslint-import-resolver-typescript: specifier: ^4.4.5 - version: 4.4.5(eslint-plugin-import-x@4.17.1)(eslint@10.6.0) + version: 4.4.5(eslint-plugin-import-x@4.17.1)(eslint@10.6.0)(supports-color@8.1.1) eslint-plugin-import-x: specifier: ^4.17.1 - version: 4.17.1(@typescript-eslint/utils@8.63.0)(eslint@10.6.0) + version: 4.17.1(@typescript-eslint/utils@8.63.0)(eslint@10.6.0)(supports-color@8.1.1) eslint-plugin-package-json: specifier: ^1.5.0 version: 1.5.0(@types/estree@1.0.9)(eslint@10.6.0) @@ -430,6 +436,22 @@ importers: specifier: 'catalog:' version: 8.1.3(@types/node@22.20.0)(esbuild@0.28.1) + packages/ui: + dependencies: + '@vscode/codicons': + specifier: 'catalog:' + version: 0.0.45 + devDependencies: + '@types/react': + specifier: 'catalog:' + version: 19.2.17 + react: + specifier: 'catalog:' + version: 19.2.7 + typescript: + specifier: 'catalog:' + version: 6.0.3 + packages/webview-shared: dependencies: '@repo/shared': @@ -2192,6 +2214,9 @@ packages: react: 17 || 18 || 19 react-dom: 17 || 18 || 19 + '@vscode-elements/webview-playground@1.9.0': + resolution: {integrity: sha512-0VMzdeLisbmACMXSyNhtkgca/wLmBMrVq4T0T8MGzPhLg9uDcgEaCscTdVaNg2tPwfCtmSN2BU8KGTEH1iqdhA==} + '@vscode/codicons@0.0.45': resolution: {integrity: sha512-1KAZ7XCMagp5Gdrlr4bbbcAqgcIL623iO1wW6rfcSVGAVUQvR0WP7bQx1SbJ11gmV3fdQTSEFIJQ/5C+HuVasw==} @@ -5340,7 +5365,7 @@ snapshots: '@csstools/css-tokenizer@4.0.0': {} - '@electron/get@2.0.3': + '@electron/get@2.0.3(supports-color@8.1.1)': dependencies: debug: 4.4.3(supports-color@8.1.1) env-paths: 2.2.1 @@ -5348,7 +5373,7 @@ snapshots: got: 11.8.6 progress: 2.0.3 semver: 6.3.1 - sumchecker: 3.0.1 + sumchecker: 3.0.1(supports-color@8.1.1) optionalDependencies: global-agent: 3.0.0 transitivePeerDependencies: @@ -5479,7 +5504,7 @@ snapshots: '@eslint-community/eslint-utils@4.9.1(eslint@10.6.0)': dependencies: - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) eslint-visitor-keys: 3.4.3 '@eslint-community/regexpp@4.12.2': {} @@ -5487,9 +5512,9 @@ snapshots: '@eslint-react/ast@5.11.3(eslint@10.6.0)(typescript@6.0.3)': dependencies: '@typescript-eslint/types': 8.63.0 - '@typescript-eslint/typescript-estree': 8.63.0(typescript@6.0.3) + '@typescript-eslint/typescript-estree': 8.63.0(supports-color@8.1.1)(typescript@6.0.3) '@typescript-eslint/utils': 8.63.0(eslint@10.6.0)(typescript@6.0.3) - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) string-ts: 2.3.1 typescript: 6.0.3 transitivePeerDependencies: @@ -5505,7 +5530,7 @@ snapshots: '@typescript-eslint/scope-manager': 8.63.0 '@typescript-eslint/types': 8.63.0 '@typescript-eslint/utils': 8.63.0(eslint@10.6.0)(typescript@6.0.3) - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) ts-pattern: 5.9.0 typescript: 6.0.3 transitivePeerDependencies: @@ -5514,7 +5539,7 @@ snapshots: '@eslint-react/eslint-plugin@5.11.3(eslint@10.6.0)(typescript@6.0.3)': dependencies: '@eslint-react/shared': 5.11.3(eslint@10.6.0)(typescript@6.0.3) - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) eslint-plugin-react-dom: 5.11.3(eslint@10.6.0)(typescript@6.0.3) eslint-plugin-react-jsx: 5.11.3(eslint@10.6.0)(typescript@6.0.3) eslint-plugin-react-naming-convention: 5.11.3(eslint@10.6.0)(typescript@6.0.3) @@ -5528,7 +5553,7 @@ snapshots: '@eslint-react/eslint@5.11.3(eslint@10.6.0)(typescript@6.0.3)': dependencies: '@typescript-eslint/utils': 8.63.0(eslint@10.6.0)(typescript@6.0.3) - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) typescript: 6.0.3 transitivePeerDependencies: - supports-color @@ -5541,7 +5566,7 @@ snapshots: '@eslint-react/var': 5.11.3(eslint@10.6.0)(typescript@6.0.3) '@typescript-eslint/types': 8.63.0 '@typescript-eslint/utils': 8.63.0(eslint@10.6.0)(typescript@6.0.3) - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) ts-pattern: 5.9.0 typescript: 6.0.3 transitivePeerDependencies: @@ -5551,7 +5576,7 @@ snapshots: dependencies: '@eslint-react/eslint': 5.11.3(eslint@10.6.0)(typescript@6.0.3) '@typescript-eslint/utils': 8.63.0(eslint@10.6.0)(typescript@6.0.3) - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) ts-pattern: 5.9.0 typescript: 6.0.3 zod: 4.4.3 @@ -5565,13 +5590,13 @@ snapshots: '@typescript-eslint/scope-manager': 8.63.0 '@typescript-eslint/types': 8.63.0 '@typescript-eslint/utils': 8.63.0(eslint@10.6.0)(typescript@6.0.3) - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) ts-pattern: 5.9.0 typescript: 6.0.3 transitivePeerDependencies: - supports-color - '@eslint/config-array@0.23.5': + '@eslint/config-array@0.23.5(supports-color@8.1.1)': dependencies: '@eslint/object-schema': 3.0.5 debug: 4.4.3(supports-color@8.1.1) @@ -5589,14 +5614,14 @@ snapshots: '@eslint/js@10.0.1(eslint@10.6.0)': optionalDependencies: - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) - '@eslint/markdown@8.0.3': + '@eslint/markdown@8.0.3(supports-color@8.1.1)': dependencies: '@eslint/core': 1.2.1 '@eslint/plugin-kit': 0.7.2 github-slugger: 2.0.0 - mdast-util-from-markdown: 2.0.3 + mdast-util-from-markdown: 2.0.3(supports-color@8.1.1) mdast-util-frontmatter: 2.0.1 mdast-util-gfm: 3.1.0 mdast-util-math: 3.0.0 @@ -6532,12 +6557,12 @@ snapshots: '@typescript-eslint/eslint-plugin@8.63.0(@typescript-eslint/parser@8.63.0)(eslint@10.6.0)(typescript@6.0.3)': dependencies: '@eslint-community/regexpp': 4.12.2 - '@typescript-eslint/parser': 8.63.0(eslint@10.6.0)(typescript@6.0.3) + '@typescript-eslint/parser': 8.63.0(eslint@10.6.0)(supports-color@8.1.1)(typescript@6.0.3) '@typescript-eslint/scope-manager': 8.63.0 '@typescript-eslint/type-utils': 8.63.0(eslint@10.6.0)(typescript@6.0.3) '@typescript-eslint/utils': 8.63.0(eslint@10.6.0)(typescript@6.0.3) '@typescript-eslint/visitor-keys': 8.63.0 - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) ignore: 7.0.5 natural-compare: 1.4.0 ts-api-utils: 2.5.0(typescript@6.0.3) @@ -6545,19 +6570,19 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/parser@8.63.0(eslint@10.6.0)(typescript@6.0.3)': + '@typescript-eslint/parser@8.63.0(eslint@10.6.0)(supports-color@8.1.1)(typescript@6.0.3)': dependencies: '@typescript-eslint/scope-manager': 8.63.0 '@typescript-eslint/types': 8.63.0 - '@typescript-eslint/typescript-estree': 8.63.0(typescript@6.0.3) + '@typescript-eslint/typescript-estree': 8.63.0(supports-color@8.1.1)(typescript@6.0.3) '@typescript-eslint/visitor-keys': 8.63.0 debug: 4.4.3(supports-color@8.1.1) - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) typescript: 6.0.3 transitivePeerDependencies: - supports-color - '@typescript-eslint/project-service@8.63.0(typescript@6.0.3)': + '@typescript-eslint/project-service@8.63.0(supports-color@8.1.1)(typescript@6.0.3)': dependencies: '@typescript-eslint/tsconfig-utils': 8.63.0(typescript@6.0.3) '@typescript-eslint/types': 8.63.0 @@ -6578,10 +6603,10 @@ snapshots: '@typescript-eslint/type-utils@8.63.0(eslint@10.6.0)(typescript@6.0.3)': dependencies: '@typescript-eslint/types': 8.63.0 - '@typescript-eslint/typescript-estree': 8.63.0(typescript@6.0.3) + '@typescript-eslint/typescript-estree': 8.63.0(supports-color@8.1.1)(typescript@6.0.3) '@typescript-eslint/utils': 8.63.0(eslint@10.6.0)(typescript@6.0.3) debug: 4.4.3(supports-color@8.1.1) - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) ts-api-utils: 2.5.0(typescript@6.0.3) typescript: 6.0.3 transitivePeerDependencies: @@ -6589,9 +6614,9 @@ snapshots: '@typescript-eslint/types@8.63.0': {} - '@typescript-eslint/typescript-estree@8.63.0(typescript@6.0.3)': + '@typescript-eslint/typescript-estree@8.63.0(supports-color@8.1.1)(typescript@6.0.3)': dependencies: - '@typescript-eslint/project-service': 8.63.0(typescript@6.0.3) + '@typescript-eslint/project-service': 8.63.0(supports-color@8.1.1)(typescript@6.0.3) '@typescript-eslint/tsconfig-utils': 8.63.0(typescript@6.0.3) '@typescript-eslint/types': 8.63.0 '@typescript-eslint/visitor-keys': 8.63.0 @@ -6609,8 +6634,8 @@ snapshots: '@eslint-community/eslint-utils': 4.9.1(eslint@10.6.0) '@typescript-eslint/scope-manager': 8.63.0 '@typescript-eslint/types': 8.63.0 - '@typescript-eslint/typescript-estree': 8.63.0(typescript@6.0.3) - eslint: 10.6.0 + '@typescript-eslint/typescript-estree': 8.63.0(supports-color@8.1.1)(typescript@6.0.3) + eslint: 10.6.0(supports-color@8.1.1) typescript: 6.0.3 transitivePeerDependencies: - supports-color @@ -6622,8 +6647,8 @@ snapshots: '@typespec/ts-http-runtime@0.3.6': dependencies: - http-proxy-agent: 7.0.2 - https-proxy-agent: 7.0.6 + http-proxy-agent: 7.0.2(supports-color@8.1.1) + https-proxy-agent: 7.0.6(supports-color@8.1.1) tslib: 2.8.1 transitivePeerDependencies: - supports-color @@ -6799,6 +6824,8 @@ snapshots: - '@types/react' - '@vscode/codicons' + '@vscode-elements/webview-playground@1.9.0': {} + '@vscode/codicons@0.0.45': {} '@vscode/test-cli@0.0.15': @@ -6815,10 +6842,10 @@ snapshots: transitivePeerDependencies: - monocart-coverage-reports - '@vscode/test-electron@3.0.0': + '@vscode/test-electron@3.0.0(supports-color@8.1.1)': dependencies: - http-proxy-agent: 7.0.2 - https-proxy-agent: 7.0.6 + http-proxy-agent: 7.0.2(supports-color@8.1.1) + https-proxy-agent: 7.0.6(supports-color@8.1.1) jszip: 3.10.1 ora: 8.2.0 semver: 7.8.5 @@ -6864,7 +6891,7 @@ snapshots: '@vscode/vsce-sign-win32-arm64': 2.0.6 '@vscode/vsce-sign-win32-x64': 2.0.6 - '@vscode/vsce@3.9.2': + '@vscode/vsce@3.9.2(supports-color@8.1.1)': dependencies: '@azure/identity': 4.13.1 '@secretlint/node': 10.2.2 @@ -6887,7 +6914,7 @@ snapshots: minimatch: 10.2.5 parse-semver: 1.1.1 read: 1.0.7 - secretlint: 10.2.2 + secretlint: 10.2.2(supports-color@8.1.1) semver: 7.8.5 tmp: 0.2.7 typed-rest-client: 1.8.11 @@ -6908,7 +6935,7 @@ snapshots: acorn@8.17.0: {} - agent-base@6.0.2: + agent-base@6.0.2(supports-color@8.1.1): dependencies: debug: 4.4.3(supports-color@8.1.1) transitivePeerDependencies: @@ -6984,11 +7011,11 @@ snapshots: axe-core@4.12.1: {} - axios@1.18.1: + axios@1.18.1(supports-color@8.1.1): dependencies: follow-redirects: 1.16.0 form-data: 4.0.6 - https-proxy-agent: 5.0.1 + https-proxy-agent: 5.0.1(supports-color@8.1.1) proxy-from-env: 2.1.0 transitivePeerDependencies: - debug @@ -7401,11 +7428,11 @@ snapshots: electron-to-chromium@1.5.388: {} - electron@39.8.5: + electron@39.8.5(supports-color@8.1.1): dependencies: - '@electron/get': 2.0.3 + '@electron/get': 2.0.3(supports-color@8.1.1) '@types/node': 22.20.0 - extract-zip: 2.0.1 + extract-zip: 2.0.1(supports-color@8.1.1) transitivePeerDependencies: - supports-color @@ -7508,11 +7535,11 @@ snapshots: eslint-config-prettier@10.1.8(eslint@10.6.0): dependencies: - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) eslint-fix-utils@0.4.2(@types/estree@1.0.9)(eslint@10.6.0): dependencies: - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) optionalDependencies: '@types/estree': 1.0.9 @@ -7523,10 +7550,10 @@ snapshots: optionalDependencies: unrs-resolver: 1.12.2 - eslint-import-resolver-typescript@4.4.5(eslint-plugin-import-x@4.17.1)(eslint@10.6.0): + eslint-import-resolver-typescript@4.4.5(eslint-plugin-import-x@4.17.1)(eslint@10.6.0)(supports-color@8.1.1): dependencies: debug: 4.4.3(supports-color@8.1.1) - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) eslint-import-context: 0.1.9(unrs-resolver@1.12.2) get-tsconfig: 4.14.0 is-bun-module: 2.0.0 @@ -7534,22 +7561,22 @@ snapshots: tinyglobby: 0.2.17 unrs-resolver: 1.12.2 optionalDependencies: - eslint-plugin-import-x: 4.17.1(@typescript-eslint/utils@8.63.0)(eslint@10.6.0) + eslint-plugin-import-x: 4.17.1(@typescript-eslint/utils@8.63.0)(eslint@10.6.0)(supports-color@8.1.1) transitivePeerDependencies: - supports-color eslint-json-compat-utils@0.2.3(eslint@10.6.0)(jsonc-eslint-parser@3.1.0): dependencies: - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) esquery: 1.7.0 jsonc-eslint-parser: 3.1.0 - eslint-plugin-import-x@4.17.1(@typescript-eslint/utils@8.63.0)(eslint@10.6.0): + eslint-plugin-import-x@4.17.1(@typescript-eslint/utils@8.63.0)(eslint@10.6.0)(supports-color@8.1.1): dependencies: '@typescript-eslint/types': 8.63.0 comment-parser: 1.4.7 debug: 4.4.3(supports-color@8.1.1) - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) eslint-import-context: 0.1.9(unrs-resolver@1.12.2) is-glob: 4.0.3 minimatch: 10.2.5 @@ -7567,7 +7594,7 @@ snapshots: change-case: 5.4.4 detect-indent: 7.0.2 detect-newline: 4.0.1 - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) eslint-fix-utils: 0.4.2(@types/estree@1.0.9)(eslint@10.6.0) eslint-json-compat-utils: 0.2.3(eslint@10.6.0)(jsonc-eslint-parser@3.1.0) jsonc-eslint-parser: 3.1.0 @@ -7587,7 +7614,7 @@ snapshots: '@typescript-eslint/types': 8.63.0 '@typescript-eslint/utils': 8.63.0(eslint@10.6.0)(typescript@6.0.3) compare-versions: 6.1.1 - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) typescript: 6.0.3 transitivePeerDependencies: - supports-color @@ -7601,7 +7628,7 @@ snapshots: '@eslint-react/shared': 5.11.3(eslint@10.6.0)(typescript@6.0.3) '@typescript-eslint/types': 8.63.0 '@typescript-eslint/utils': 8.63.0(eslint@10.6.0)(typescript@6.0.3) - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) typescript: 6.0.3 transitivePeerDependencies: - supports-color @@ -7614,7 +7641,7 @@ snapshots: '@eslint-react/var': 5.11.3(eslint@10.6.0)(typescript@6.0.3) '@typescript-eslint/types': 8.63.0 '@typescript-eslint/utils': 8.63.0(eslint@10.6.0)(typescript@6.0.3) - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) ts-pattern: 5.9.0 typescript: 6.0.3 transitivePeerDependencies: @@ -7629,7 +7656,7 @@ snapshots: '@eslint-react/var': 5.11.3(eslint@10.6.0)(typescript@6.0.3) '@typescript-eslint/types': 8.63.0 '@typescript-eslint/utils': 8.63.0(eslint@10.6.0)(typescript@6.0.3) - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) typescript: 6.0.3 transitivePeerDependencies: - supports-color @@ -7644,7 +7671,7 @@ snapshots: '@typescript-eslint/types': 8.63.0 '@typescript-eslint/utils': 8.63.0(eslint@10.6.0)(typescript@6.0.3) birecord: 0.1.1 - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) ts-pattern: 5.9.0 typescript: 6.0.3 transitivePeerDependencies: @@ -7661,10 +7688,10 @@ snapshots: '@typescript-eslint/scope-manager': 8.63.0 '@typescript-eslint/type-utils': 8.63.0(eslint@10.6.0)(typescript@6.0.3) '@typescript-eslint/types': 8.63.0 - '@typescript-eslint/typescript-estree': 8.63.0(typescript@6.0.3) + '@typescript-eslint/typescript-estree': 8.63.0(supports-color@8.1.1)(typescript@6.0.3) '@typescript-eslint/utils': 8.63.0(eslint@10.6.0)(typescript@6.0.3) compare-versions: 6.1.1 - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) string-ts: 2.3.1 ts-api-utils: 2.5.0(typescript@6.0.3) ts-pattern: 5.9.0 @@ -7675,7 +7702,7 @@ snapshots: eslint-plugin-storybook@10.4.6(eslint@10.6.0)(storybook@10.4.6)(typescript@6.0.3): dependencies: '@typescript-eslint/utils': 8.63.0(eslint@10.6.0)(typescript@6.0.3) - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) storybook: 10.4.6(@testing-library/dom@10.4.1)(@types/react@19.2.17)(bufferutil@4.1.0)(prettier@3.9.4)(react@19.2.7)(utf-8-validate@6.0.6) transitivePeerDependencies: - supports-color @@ -7692,11 +7719,11 @@ snapshots: eslint-visitor-keys@5.0.1: {} - eslint@10.6.0: + eslint@10.6.0(supports-color@8.1.1): dependencies: '@eslint-community/eslint-utils': 4.9.1(eslint@10.6.0) '@eslint-community/regexpp': 4.12.2 - '@eslint/config-array': 0.23.5 + '@eslint/config-array': 0.23.5(supports-color@8.1.1) '@eslint/config-helpers': 0.6.0 '@eslint/core': 1.2.1 '@eslint/plugin-kit': 0.7.2 @@ -7764,7 +7791,7 @@ snapshots: expect-type@1.4.0: {} - extract-zip@2.0.1: + extract-zip@2.0.1(supports-color@8.1.1): dependencies: debug: 4.4.3(supports-color@8.1.1) get-stream: 5.2.0 @@ -7905,7 +7932,7 @@ snapshots: dependencies: resolve-pkg-maps: 1.0.0 - get-uri@8.0.1: + get-uri@8.0.1(supports-color@8.1.1): dependencies: basic-ftp: 5.3.1 data-uri-to-buffer: 8.0.0 @@ -8040,14 +8067,14 @@ snapshots: http-cache-semantics@4.2.0: {} - http-proxy-agent@7.0.2: + http-proxy-agent@7.0.2(supports-color@8.1.1): dependencies: agent-base: 7.1.4 debug: 4.4.3(supports-color@8.1.1) transitivePeerDependencies: - supports-color - http-proxy-agent@9.1.0: + http-proxy-agent@9.1.0(supports-color@8.1.1): dependencies: agent-base: 9.0.0 debug: 4.4.3(supports-color@8.1.1) @@ -8061,21 +8088,21 @@ snapshots: quick-lru: 5.1.1 resolve-alpn: 1.2.1 - https-proxy-agent@5.0.1: + https-proxy-agent@5.0.1(supports-color@8.1.1): dependencies: - agent-base: 6.0.2 + agent-base: 6.0.2(supports-color@8.1.1) debug: 4.4.3(supports-color@8.1.1) transitivePeerDependencies: - supports-color - https-proxy-agent@7.0.6: + https-proxy-agent@7.0.6(supports-color@8.1.1): dependencies: agent-base: 7.1.4 debug: 4.4.3(supports-color@8.1.1) transitivePeerDependencies: - supports-color - https-proxy-agent@9.1.0: + https-proxy-agent@9.1.0(supports-color@8.1.1): dependencies: agent-base: 9.0.0 debug: 4.4.3(supports-color@8.1.1) @@ -8472,14 +8499,14 @@ snapshots: unist-util-is: 6.0.1 unist-util-visit-parents: 6.0.2 - mdast-util-from-markdown@2.0.3: + mdast-util-from-markdown@2.0.3(supports-color@8.1.1): dependencies: '@types/mdast': 4.0.4 '@types/unist': 3.0.3 decode-named-character-reference: 1.3.0 devlop: 1.1.0 mdast-util-to-string: 4.0.0 - micromark: 4.0.2 + micromark: 4.0.2(supports-color@8.1.1) micromark-util-decode-numeric-character-reference: 2.0.2 micromark-util-decode-string: 2.0.1 micromark-util-normalize-identifier: 2.0.1 @@ -8494,7 +8521,7 @@ snapshots: '@types/mdast': 4.0.4 devlop: 1.1.0 escape-string-regexp: 5.0.0 - mdast-util-from-markdown: 2.0.3 + mdast-util-from-markdown: 2.0.3(supports-color@8.1.1) mdast-util-to-markdown: 2.1.2 micromark-extension-frontmatter: 2.0.0 transitivePeerDependencies: @@ -8512,7 +8539,7 @@ snapshots: dependencies: '@types/mdast': 4.0.4 devlop: 1.1.0 - mdast-util-from-markdown: 2.0.3 + mdast-util-from-markdown: 2.0.3(supports-color@8.1.1) mdast-util-to-markdown: 2.1.2 micromark-util-normalize-identifier: 2.0.1 transitivePeerDependencies: @@ -8521,7 +8548,7 @@ snapshots: mdast-util-gfm-strikethrough@2.0.0: dependencies: '@types/mdast': 4.0.4 - mdast-util-from-markdown: 2.0.3 + mdast-util-from-markdown: 2.0.3(supports-color@8.1.1) mdast-util-to-markdown: 2.1.2 transitivePeerDependencies: - supports-color @@ -8531,7 +8558,7 @@ snapshots: '@types/mdast': 4.0.4 devlop: 1.1.0 markdown-table: 3.0.4 - mdast-util-from-markdown: 2.0.3 + mdast-util-from-markdown: 2.0.3(supports-color@8.1.1) mdast-util-to-markdown: 2.1.2 transitivePeerDependencies: - supports-color @@ -8540,14 +8567,14 @@ snapshots: dependencies: '@types/mdast': 4.0.4 devlop: 1.1.0 - mdast-util-from-markdown: 2.0.3 + mdast-util-from-markdown: 2.0.3(supports-color@8.1.1) mdast-util-to-markdown: 2.1.2 transitivePeerDependencies: - supports-color mdast-util-gfm@3.1.0: dependencies: - mdast-util-from-markdown: 2.0.3 + mdast-util-from-markdown: 2.0.3(supports-color@8.1.1) mdast-util-gfm-autolink-literal: 2.0.1 mdast-util-gfm-footnote: 2.1.0 mdast-util-gfm-strikethrough: 2.0.0 @@ -8563,7 +8590,7 @@ snapshots: '@types/mdast': 4.0.4 devlop: 1.1.0 longest-streak: 3.1.0 - mdast-util-from-markdown: 2.0.3 + mdast-util-from-markdown: 2.0.3(supports-color@8.1.1) mdast-util-to-markdown: 2.1.2 unist-util-remove-position: 5.0.0 transitivePeerDependencies: @@ -8799,7 +8826,7 @@ snapshots: micromark-util-types@2.0.2: {} - micromark@4.0.2: + micromark@4.0.2(supports-color@8.1.1): dependencies: '@types/debug': 4.1.13 debug: 4.4.3(supports-color@8.1.1) @@ -9036,13 +9063,13 @@ snapshots: p-map@7.0.5: {} - pac-proxy-agent@9.1.0: + pac-proxy-agent@9.1.0(supports-color@8.1.1): dependencies: agent-base: 9.0.0 debug: 4.4.3(supports-color@8.1.1) - get-uri: 8.0.1 - http-proxy-agent: 9.1.0 - https-proxy-agent: 9.1.0 + get-uri: 8.0.1(supports-color@8.1.1) + http-proxy-agent: 9.1.0(supports-color@8.1.1) + https-proxy-agent: 9.1.0(supports-color@8.1.1) pac-resolver: 9.0.1(quickjs-wasi@2.2.0) quickjs-wasi: 2.2.0 socks-proxy-agent: 10.1.0 @@ -9176,14 +9203,14 @@ snapshots: proxy-agent-negotiate@1.1.0: {} - proxy-agent@8.0.2: + proxy-agent@8.0.2(supports-color@8.1.1): dependencies: agent-base: 9.0.0 debug: 4.4.3(supports-color@8.1.1) - http-proxy-agent: 9.1.0 - https-proxy-agent: 9.1.0 + http-proxy-agent: 9.1.0(supports-color@8.1.1) + https-proxy-agent: 9.1.0(supports-color@8.1.1) lru-cache: 7.18.3 - pac-proxy-agent: 9.1.0 + pac-proxy-agent: 9.1.0(supports-color@8.1.1) proxy-from-env: 2.1.0 socks-proxy-agent: 10.1.0 transitivePeerDependencies: @@ -9396,7 +9423,7 @@ snapshots: scheduler@0.27.0: {} - secretlint@10.2.2: + secretlint@10.2.2(supports-color@8.1.1): dependencies: '@secretlint/config-creator': 10.2.2 '@secretlint/formatter': 10.2.2 @@ -9624,7 +9651,7 @@ snapshots: dependencies: boundary: 2.0.0 - sumchecker@3.0.1: + sumchecker@3.0.1(supports-color@8.1.1): dependencies: debug: 4.4.3(supports-color@8.1.1) transitivePeerDependencies: @@ -9787,10 +9814,10 @@ snapshots: typescript-eslint@8.63.0(eslint@10.6.0)(typescript@6.0.3): dependencies: '@typescript-eslint/eslint-plugin': 8.63.0(@typescript-eslint/parser@8.63.0)(eslint@10.6.0)(typescript@6.0.3) - '@typescript-eslint/parser': 8.63.0(eslint@10.6.0)(typescript@6.0.3) - '@typescript-eslint/typescript-estree': 8.63.0(typescript@6.0.3) + '@typescript-eslint/parser': 8.63.0(eslint@10.6.0)(supports-color@8.1.1)(typescript@6.0.3) + '@typescript-eslint/typescript-estree': 8.63.0(supports-color@8.1.1)(typescript@6.0.3) '@typescript-eslint/utils': 8.63.0(eslint@10.6.0)(typescript@6.0.3) - eslint: 10.6.0 + eslint: 10.6.0(supports-color@8.1.1) typescript: 6.0.3 transitivePeerDependencies: - supports-color diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index d0398627a2..fd1f735b9d 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -12,6 +12,7 @@ catalog: "@types/vscode-webview": ^1.57.5 "@vitejs/plugin-react": ^6.0.3 "@vscode-elements/react-elements": ^2.4.0 + "@vscode-elements/webview-playground": ^1.9.0 "@vscode/codicons": ^0.0.45 babel-plugin-react-compiler: ^1.0.0 coder: github:coder/coder#v2.34.1 diff --git a/test/tsconfig.json b/test/tsconfig.json index 5bc005d0c1..864101a0b6 100644 --- a/test/tsconfig.json +++ b/test/tsconfig.json @@ -13,6 +13,8 @@ "@repo/webview-shared": ["../packages/webview-shared/src/index.ts"], "@repo/webview-shared/*": ["../packages/webview-shared/src/*"], "@repo/tasks/*": ["../packages/tasks/src/*"], + "@repo/ui": ["../packages/ui/src/index.ts"], + "@repo/ui/*": ["../packages/ui/src/*"], "@repo/netcheck/*": ["../packages/netcheck/src/*"], "@repo/speedtest/*": ["../packages/speedtest/src/*"] } diff --git a/test/webview/ui/useVscodeTheme.test.ts b/test/webview/ui/useVscodeTheme.test.ts new file mode 100644 index 0000000000..e83bbd4684 --- /dev/null +++ b/test/webview/ui/useVscodeTheme.test.ts @@ -0,0 +1,51 @@ +import { act, renderHook } from "@testing-library/react"; +import { afterEach, describe, expect, it } from "vitest"; + +import { useVscodeTheme } from "@repo/ui"; + +function setThemeKind(kind: string | undefined): void { + if (kind === undefined) { + document.body.removeAttribute("data-vscode-theme-kind"); + } else { + document.body.setAttribute("data-vscode-theme-kind", kind); + } +} + +afterEach(() => { + setThemeKind(undefined); +}); + +describe("useVscodeTheme", () => { + it.each([ + ["vscode-light", "light"], + ["vscode-dark", "dark"], + ["vscode-high-contrast", "high-contrast"], + ["vscode-high-contrast-light", "high-contrast-light"], + ])("returns %s as %s", (attribute, expected) => { + setThemeKind(attribute); + + const { result } = renderHook(() => useVscodeTheme()); + + expect(result.current).toBe(expected); + }); + + it("defaults to dark when the attribute is missing", () => { + const { result } = renderHook(() => useVscodeTheme()); + + expect(result.current).toBe("dark"); + }); + + it("updates when the theme changes", async () => { + setThemeKind("vscode-dark"); + + const { result } = renderHook(() => useVscodeTheme()); + expect(result.current).toBe("dark"); + + // MutationObserver callbacks are microtasks; flush them inside act. + await act(async () => { + setThemeKind("vscode-light"); + await Promise.resolve(); + }); + expect(result.current).toBe("light"); + }); +}); diff --git a/vitest.config.ts b/vitest.config.ts index fd29ab7a53..521ce24ea9 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -44,6 +44,7 @@ export default defineConfig({ alias: { "@repo/webview-shared": webviewSharedAlias, "@repo/tasks": path.resolve(__dirname, "packages/tasks/src"), + "@repo/ui": path.resolve(__dirname, "packages/ui/src"), "@repo/netcheck": path.resolve(__dirname, "packages/netcheck/src"), "@repo/speedtest": path.resolve( __dirname,