mrva/vscode-codeql
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Setup Storybook for testing UI components

Browse Source 
This sets up Storybook for testing of React components. It adds stories
for some of the MRVA components. It does not add stories for the main
MRVA views since those are not independent of VSCode and need to be run
from within VSCode.
This commit is contained in:
Koen Vlaswinkel
2022-09-06 10:55:54 +02:00
parent da9065101f
commit 6018ebaca9
22 changed files with 32868 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.vscode/launch.json vendored
View File

@@ -124,6 +124,14 @@
"outFiles": [ "outFiles": [
"${workspaceRoot}/extensions/ql-vscode/out/**/*.js", "${workspaceRoot}/extensions/ql-vscode/out/**/*.js",
], ],
},
{
"name": "Launch Storybook",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}/extensions/ql-vscode",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "storybook"]
} }
] ]
} }

12
CONTRIBUTING.md
View File

@@ -77,6 +77,18 @@ $ vscode/scripts/code-cli.sh --install-extension dist/vscode-codeql-*.vsix # if
You can use VS Code to debug the extension without explicitly installing it. Just open this directory as a workspace in VS Code, and hit `F5` to start a debugging session. You can use VS Code to debug the extension without explicitly installing it. Just open this directory as a workspace in VS Code, and hit `F5` to start a debugging session.
### Storybook
You can use [Storybook](https://storybook.js.org/) to preview React components outside VSCode. Inside the `extensions/ql-vscode` directory, run:
```shell
npm run storybook
```
Your browser should automatically open to the Storybook UI. Stories live in the `src/stories` directory.
Alternatively, you can start Storybook inside of VSCode. There is a VSCode launch configuration for starting Storybook. It can be found in the debug view.
### Running the unit tests and integration tests that do not require a CLI instance ### Running the unit tests and integration tests that do not require a CLI instance
Unit tests and many integration tests do not require a copy of the CodeQL CLI. Unit tests and many integration tests do not require a copy of the CodeQL CLI.

1
extensions/ql-vscode/.npmrc Normal file
View File

@@ -0,0 +1 @@
legacy-peer-deps=true

15
extensions/ql-vscode/.storybook/main.js Normal file
View File

@@ -0,0 +1,15 @@
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions"
],
"framework": "@storybook/react",
"core": {
"builder": "@storybook/builder-webpack5"
}
};

7
extensions/ql-vscode/.storybook/manager.js Normal file
View File

@@ -0,0 +1,7 @@
import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';
addons.setConfig({
theme: themes.dark,
enableShortcuts: false,
});

33
extensions/ql-vscode/.storybook/preview.js Normal file
View File

@@ -0,0 +1,33 @@
import { themes } from '@storybook/theming';
// Allow all stories/components to use Codicons
import '@vscode/codicons/dist/codicon.css';
import '../src/stories/vscode-theme.css';
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
docs: {
theme: themes.dark,
},
backgrounds: {
default: 'dark',
values: [
{
name: 'dark',
value: '#1e1e1e',
},
],
},
options: {
storySort: {
order: ['WebView UI Toolkit', 'MRVA'],
},
},
};

32249
extensions/ql-vscode/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
extensions/ql-vscode/package.json
View File

@@ -1191,7 +1191,9 @@
"update-vscode": "node ./node_modules/vscode/bin/install", "update-vscode": "node ./node_modules/vscode/bin/install",
"format": "tsfmt -r && eslint src test --ext .ts,.tsx --fix", "format": "tsfmt -r && eslint src test --ext .ts,.tsx --fix",
"lint": "eslint src test --ext .ts,.tsx --max-warnings=0", "lint": "eslint src test --ext .ts,.tsx --max-warnings=0",
"format-staged": "lint-staged" "format-staged": "lint-staged",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
}, },
"dependencies": { "dependencies": {
"@octokit/plugin-retry": "^3.0.9", "@octokit/plugin-retry": "^3.0.9",
@@ -1233,6 +1235,15 @@
"zip-a-folder": "~1.1.3" "zip-a-folder": "~1.1.3"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.18.13",
"@storybook/addon-actions": "^6.5.10",
"@storybook/addon-essentials": "^6.5.10",
"@storybook/addon-interactions": "^6.5.10",
"@storybook/addon-links": "^6.5.10",
"@storybook/builder-webpack5": "^6.5.10",
"@storybook/manager-webpack5": "^6.5.10",
"@storybook/react": "^6.5.10",
"@storybook/testing-library": "^0.0.13",
"@types/chai": "^4.1.7", "@types/chai": "^4.1.7",
"@types/chai-as-promised": "~7.1.2", "@types/chai-as-promised": "~7.1.2",
"@types/child-process-promise": "^2.2.1", "@types/child-process-promise": "^2.2.1",
@@ -1272,12 +1283,14 @@
"@typescript-eslint/parser": "^4.26.0", "@typescript-eslint/parser": "^4.26.0",
"ansi-colors": "^4.1.1", "ansi-colors": "^4.1.1",
"applicationinsights": "^1.8.7", "applicationinsights": "^1.8.7",
"babel-loader": "^8.2.5",
"chai": "^4.2.0", "chai": "^4.2.0",
"chai-as-promised": "~7.1.1", "chai-as-promised": "~7.1.1",
"css-loader": "~3.1.0", "css-loader": "~3.1.0",
"del": "^6.0.0", "del": "^6.0.0",
"eslint": "~6.8.0", "eslint": "~6.8.0",
"eslint-plugin-react": "~7.19.0", "eslint-plugin-react": "~7.19.0",
"eslint-plugin-storybook": "^0.6.4",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"glob": "^7.1.4", "glob": "^7.1.4",
"gulp": "^4.0.2", "gulp": "^4.0.2",

14
extensions/ql-vscode/src/stories/.eslintrc.js Normal file
View File

@@ -0,0 +1,14 @@
module.exports = {
env: {
browser: true
},
extends: [
"plugin:react/recommended",
"plugin:storybook/recommended",
],
settings: {
react: {
version: 'detect'
}
}
}

50
extensions/ql-vscode/src/stories/remote-queries/AnalysisAlertResult.stories.tsx Normal file
View File

@@ -0,0 +1,50 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import AnalysisAlertResult from '../../view/remote-queries/AnalysisAlertResult';
import type { AnalysisAlert } from '../../remote-queries/shared/analysis-result';
export default {
title: 'MRVA/Analysis Alert Result',
component: AnalysisAlertResult,
} as ComponentMeta<typeof AnalysisAlertResult>;
const Template: ComponentStory<typeof AnalysisAlertResult> = (args) => (
<AnalysisAlertResult {...args} />
);
export const Warning = Template.bind({});
const warningAlert: AnalysisAlert = {
message: {
tokens: [
{
t: 'text',
text: 'This is an empty block.'
}
]
},
shortDescription: 'This is an empty block.',
fileLink: {
fileLinkPrefix: 'https://github.com/expressjs/express/blob/33e8dc303af9277f8a7e4f46abfdcb5e72f6797b',
filePath: 'test/app.options.js'
},
severity: 'Warning',
codeSnippet: {
startLine: 10,
endLine: 14,
text: ' app.del(\'/\', function(){});\n app.get(\'/users\', function(req, res){});\n app.put(\'/users\', function(req, res){});\n\n request(app)\n'
},
highlightedRegion: {
startLine: 12,
startColumn: 41,
endLine: 12,
endColumn: 43
},
codeFlows: []
};
Warning.args = {
alert: warningAlert,
};

121
extensions/ql-vscode/src/stories/remote-queries/CodePaths.stories.tsx Normal file
View File

@@ -0,0 +1,121 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { ThemeProvider } from '@primer/react';
import CodePaths from '../../view/remote-queries/CodePaths';
import type { CodeFlow } from '../../remote-queries/shared/analysis-result';
export default {
title: 'MRVA/Code Paths',
component: CodePaths,
decorators: [
(Story) => (
<ThemeProvider colorMode="auto">
<Story />
</ThemeProvider>
)
]
} as ComponentMeta<typeof CodePaths>;
const Template: ComponentStory<typeof CodePaths> = (args) => (
<CodePaths {...args} />
);
export const PowerShell = Template.bind({});
const codeFlows: CodeFlow[] = [
{
'threadFlows': [
{
fileLink: {
fileLinkPrefix: 'https://github.com/PowerShell/PowerShell/blob/450d884668ca477c6581ce597958f021fac30bff',
filePath: 'src/System.Management.Automation/help/UpdatableHelpSystem.cs'
},
codeSnippet: {
startLine: 1260,
endLine: 1260,
text: ' string extractPath = Path.Combine(destination, entry.FullName);'
},
highlightedRegion: {
startLine: 1260,
startColumn: 72,
endLine: 1260,
endColumn: 86,
},
message: {
tokens: [
{
t: 'text',
text: 'access to property FullName : String'
}
]
}
},
{
fileLink: {
fileLinkPrefix: 'https://github.com/PowerShell/PowerShell/blob/450d884668ca477c6581ce597958f021fac30bff',
filePath: 'src/System.Management.Automation/help/UpdatableHelpSystem.cs'
},
codeSnippet: {
startLine: 1260,
endLine: 1260,
text: ' string extractPath = Path.Combine(destination, entry.FullName);'
},
highlightedRegion: {
startLine: 1260,
startColumn: 46,
endLine: 1260,
endColumn: 87,
},
message: {
tokens: [
{
t: 'text',
text: 'call to method Combine : String'
}
]
}
},
{
fileLink: {
fileLinkPrefix: 'https://github.com/PowerShell/PowerShell/blob/450d884668ca477c6581ce597958f021fac30bff',
filePath: 'src/System.Management.Automation/help/UpdatableHelpSystem.cs'
},
codeSnippet: {
startLine: 1261,
endLine: 1261,
text: ' entry.ExtractToFile(extractPath);'
},
highlightedRegion: {
startLine: 1261,
startColumn: 45,
endLine: 1261,
endColumn: 56,
},
message: {
tokens: [
{
t: 'text',
text: 'access to local variable extractPath'
}
]
}
}
]
}
];
PowerShell.args = {
codeFlows: codeFlows,
ruleDescription: 'ZipSlip vulnerability',
message: {
tokens: [
{
type: 'text',
t: 'This zip file may have a dangerous path'
}
]
},
severity: 'Warning',
};

27
extensions/ql-vscode/src/stories/remote-queries/DownloadButton.stories.tsx Normal file
View File

@@ -0,0 +1,27 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import DownloadButtonComponent from '../../view/remote-queries/DownloadButton';
export default {
title: 'MRVA/Download Button',
component: DownloadButtonComponent,
argTypes: {
onClick: {
action: 'clicked',
table: {
disable: true,
},
},
}
} as ComponentMeta<typeof DownloadButtonComponent>;
const Template: ComponentStory<typeof DownloadButtonComponent> = (args) => (
<DownloadButtonComponent {...args} />
);
export const DownloadButton = Template.bind({});
DownloadButton.args = {
text: 'Download',
};

13
extensions/ql-vscode/src/stories/remote-queries/DownloadSpinner.stories.tsx Normal file
View File

@@ -0,0 +1,13 @@
import React from 'react';
import { ComponentMeta } from '@storybook/react';
import DownloadSpinnerComponent from '../../view/remote-queries/DownloadSpinner';
export default {
title: 'MRVA/Download Spinner',
component: DownloadSpinnerComponent,
} as ComponentMeta<typeof DownloadSpinnerComponent>;
export const DownloadSpinner = <DownloadSpinnerComponent />;

48
extensions/ql-vscode/src/stories/remote-queries/FileCodeSnippet.stories.tsx Normal file
View File

@@ -0,0 +1,48 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import FileCodeSnippet from '../../view/remote-queries/FileCodeSnippet';
export default {
title: 'MRVA/File Code Snippet',
component: FileCodeSnippet
} as ComponentMeta<typeof FileCodeSnippet>;
const Template: ComponentStory<typeof FileCodeSnippet> = (args) => (
<FileCodeSnippet {...args} />
);
export const WithCodeSnippet = Template.bind({});
WithCodeSnippet.args = {
fileLink: {
fileLinkPrefix: 'https://github.com/PowerShell/PowerShell/blob/450d884668ca477c6581ce597958f021fac30bff',
filePath: 'src/System.Management.Automation/help/UpdatableHelpSystem.cs'
},
codeSnippet: {
startLine: 1261,
endLine: 1261,
text: ' entry.ExtractToFile(extractPath);'
},
highlightedRegion: {
startLine: 1261,
startColumn: 45,
endLine: 1261,
endColumn: 56,
},
message: {
tokens: [
{
t: 'text',
text: 'access to local variable extractPath'
}
]
},
severity: 'Warning',
};
export const WithoutCodeSnippet = Template.bind({});
WithoutCodeSnippet.args = {
...WithCodeSnippet.args,
codeSnippet: undefined,
};

20
extensions/ql-vscode/src/stories/remote-queries/LastUpdated.stories.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import LastUpdatedComponent from '../../view/remote-queries/LastUpdated';
export default {
title: 'MRVA/Last Updated',
component: LastUpdatedComponent,
} as ComponentMeta<typeof LastUpdatedComponent>;
const Template: ComponentStory<typeof LastUpdatedComponent> = (args) => (
<LastUpdatedComponent {...args} />
);
export const LastUpdated = Template.bind({});
LastUpdated.args = {
lastUpdated: -3_600_000, // 1 hour ago
};

25
extensions/ql-vscode/src/stories/remote-queries/RepositoriesSearch.stories.tsx Normal file
View File

@@ -0,0 +1,25 @@
import React, { useState } from 'react';
import { ComponentMeta } from '@storybook/react';
import RepositoriesSearchComponent from '../../view/remote-queries/RepositoriesSearch';
export default {
title: 'MRVA/Repositories Search',
component: RepositoriesSearchComponent,
argTypes: {
filterValue: {
control: {
disable: true,
},
},
}
} as ComponentMeta<typeof RepositoriesSearchComponent>;
export const RepositoriesSearch = () => {
const [filterValue, setFilterValue] = useState('');
return (
<RepositoriesSearchComponent filterValue={filterValue} setFilterValue={setFilterValue} />
);
};

34
extensions/ql-vscode/src/stories/remote-queries/StarCount.stories.tsx Normal file
View File

@@ -0,0 +1,34 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import StarCountComponent from '../../view/remote-queries/StarCount';
export default {
title: 'MRVA/Star Count',
component: StarCountComponent,
} as ComponentMeta<typeof StarCountComponent>;
const Template: ComponentStory<typeof StarCountComponent> = (args) => (
<StarCountComponent {...args} />
);
export const LessThan1000 = Template.bind({});
LessThan1000.args = {
starCount: 100,
};
export const MoreThan1000 = Template.bind({});
MoreThan1000.args = {
starCount: 7532,
};
export const MoreThan10000 = Template.bind({});
MoreThan10000.args = {
starCount: 65287,
};
export const MoreThan100000 = Template.bind({});
MoreThan100000.args = {
starCount: 1234234,
};

29
extensions/ql-vscode/src/stories/remote-queries/TextButton.stories.tsx Normal file
View File

@@ -0,0 +1,29 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import TextButtonComponent from '../../view/remote-queries/TextButton';
export default {
title: 'MRVA/Text Button',
component: TextButtonComponent,
argTypes: {
onClick: {
action: 'clicked',
table: {
disable: true,
},
},
}
} as ComponentMeta<typeof TextButtonComponent>;
const Template: ComponentStory<typeof TextButtonComponent> = (args) => (
<TextButtonComponent {...args} />
);
export const TextButton = Template.bind({});
TextButton.args = {
children: 'Show more',
size: 'x-small',
};

18
extensions/ql-vscode/src/stories/tsconfig.json Normal file
View File

@@ -0,0 +1,18 @@
{
"compilerOptions": {
"module": "esnext",
"moduleResolution": "node",
"target": "es6",
"outDir": "out",
"lib": ["ES2021", "dom"],
"jsx": "react",
"sourceMap": true,
"rootDir": "..",
"strict": true,
"noUnusedLocals": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"experimentalDecorators": true
},
"exclude": ["node_modules"]
}

630
extensions/ql-vscode/src/stories/vscode-theme.css Normal file
View File

@@ -0,0 +1,630 @@
/*
* These were copied from VSCode Dark+ theme.
*
* To update these, open a webview in VSCode, open the webview developer tools and find the
* iframe hosting the webview. The <html> element will have a style attribute that contains
* the CSS variables. Copy these to this file.
*/
:root {
--vscode-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
--vscode-font-weight: normal;
--vscode-font-size: 13px;
--vscode-editor-font-family: Menlo, Monaco, "Courier New", monospace;
--vscode-editor-font-weight: normal;
--vscode-editor-font-size: 12px;
--vscode-foreground: #cccccc;
--vscode-disabledForeground: rgba(204, 204, 204, 0.5);
--vscode-errorForeground: #f48771;
--vscode-descriptionForeground: rgba(204, 204, 204, 0.7);
--vscode-icon-foreground: #c5c5c5;
--vscode-focusBorder: #007fd4;
--vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18);
--vscode-textLink-foreground: #3794ff;
--vscode-textLink-activeForeground: #3794ff;
--vscode-textPreformat-foreground: #d7ba7d;
--vscode-textBlockQuote-background: rgba(127, 127, 127, 0.1);
--vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
--vscode-textCodeBlock-background: rgba(10, 10, 10, 0.4);
--vscode-widget-shadow: rgba(0, 0, 0, 0.36);
--vscode-input-background: #3c3c3c;
--vscode-input-foreground: #cccccc;
--vscode-inputOption-activeBorder: rgba(0, 122, 204, 0);
--vscode-inputOption-hoverBackground: rgba(90, 93, 94, 0.5);
--vscode-inputOption-activeBackground: rgba(0, 127, 212, 0.4);
--vscode-inputOption-activeForeground: #ffffff;
--vscode-input-placeholderForeground: #a6a6a6;
--vscode-inputValidation-infoBackground: #063b49;
--vscode-inputValidation-infoBorder: #007acc;
--vscode-inputValidation-warningBackground: #352a05;
--vscode-inputValidation-warningBorder: #b89500;
--vscode-inputValidation-errorBackground: #5a1d1d;
--vscode-inputValidation-errorBorder: #be1100;
--vscode-dropdown-background: #3c3c3c;
--vscode-dropdown-foreground: #f0f0f0;
--vscode-dropdown-border: #3c3c3c;
--vscode-checkbox-background: #3c3c3c;
--vscode-checkbox-foreground: #f0f0f0;
--vscode-checkbox-border: #3c3c3c;
--vscode-button-foreground: #ffffff;
--vscode-button-separator: rgba(255, 255, 255, 0.4);
--vscode-button-background: #0e639c;
--vscode-button-hoverBackground: #1177bb;
--vscode-button-secondaryForeground: #ffffff;
--vscode-button-secondaryBackground: #3a3d41;
--vscode-button-secondaryHoverBackground: #45494e;
--vscode-badge-background: #4d4d4d;
--vscode-badge-foreground: #ffffff;
--vscode-scrollbar-shadow: #000000;
--vscode-scrollbarSlider-background: rgba(121, 121, 121, 0.4);
--vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
--vscode-scrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
--vscode-progressBar-background: #0e70c0;
--vscode-editorError-foreground: #f14c4c;
--vscode-editorWarning-foreground: #cca700;
--vscode-editorInfo-foreground: #3794ff;
--vscode-editorHint-foreground: rgba(238, 238, 238, 0.7);
--vscode-sash-hoverBorder: #007fd4;
--vscode-editor-background: #1e1e1e;
--vscode-editor-foreground: #d4d4d4;
--vscode-editorStickyScroll-background: #1e1e1e;
--vscode-editorStickyScrollHover-background: #2a2d2e;
--vscode-editorWidget-background: #252526;
--vscode-editorWidget-foreground: #cccccc;
--vscode-editorWidget-border: #454545;
--vscode-quickInput-background: #252526;
--vscode-quickInput-foreground: #cccccc;
--vscode-quickInputTitle-background: rgba(255, 255, 255, 0.1);
--vscode-pickerGroup-foreground: #3794ff;
--vscode-pickerGroup-border: #3f3f46;
--vscode-keybindingLabel-background: rgba(128, 128, 128, 0.17);
--vscode-keybindingLabel-foreground: #cccccc;
--vscode-keybindingLabel-border: rgba(51, 51, 51, 0.6);
--vscode-keybindingLabel-bottomBorder: rgba(68, 68, 68, 0.6);
--vscode-editor-selectionBackground: #264f78;
--vscode-editor-inactiveSelectionBackground: #3a3d41;
--vscode-editor-selectionHighlightBackground: rgba(173, 214, 255, 0.15);
--vscode-editor-findMatchBackground: #515c6a;
--vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
--vscode-editor-findRangeHighlightBackground: rgba(58, 61, 65, 0.4);
--vscode-searchEditor-findMatchBackground: rgba(234, 92, 0, 0.22);
--vscode-editor-hoverHighlightBackground: rgba(38, 79, 120, 0.25);
--vscode-editorHoverWidget-background: #252526;
--vscode-editorHoverWidget-foreground: #cccccc;
--vscode-editorHoverWidget-border: #454545;
--vscode-editorHoverWidget-statusBarBackground: #2c2c2d;
--vscode-editorLink-activeForeground: #4e94ce;
--vscode-editorInlayHint-foreground: rgba(255, 255, 255, 0.8);
--vscode-editorInlayHint-background: rgba(77, 77, 77, 0.6);
--vscode-editorInlayHint-typeForeground: rgba(255, 255, 255, 0.8);
--vscode-editorInlayHint-typeBackground: rgba(77, 77, 77, 0.6);
--vscode-editorInlayHint-parameterForeground: rgba(255, 255, 255, 0.8);
--vscode-editorInlayHint-parameterBackground: rgba(77, 77, 77, 0.6);
--vscode-editorLightBulb-foreground: #ffcc00;
--vscode-editorLightBulbAutoFix-foreground: #75beff;
--vscode-diffEditor-insertedTextBackground: rgba(156, 204, 44, 0.2);
--vscode-diffEditor-removedTextBackground: rgba(255, 0, 0, 0.4);
--vscode-diffEditor-insertedLineBackground: rgba(155, 185, 85, 0.2);
--vscode-diffEditor-removedLineBackground: rgba(255, 0, 0, 0.2);
--vscode-diffEditor-diagonalFill: rgba(204, 204, 204, 0.2);
--vscode-list-focusOutline: #007fd4;
--vscode-list-activeSelectionBackground: #04395e;
--vscode-list-activeSelectionForeground: #ffffff;
--vscode-list-activeSelectionIconForeground: #ffffff;
--vscode-list-inactiveSelectionBackground: #37373d;
--vscode-list-hoverBackground: #2a2d2e;
--vscode-list-dropBackground: #383b3d;
--vscode-list-highlightForeground: #2aaaff;
--vscode-list-focusHighlightForeground: #2aaaff;
--vscode-list-invalidItemForeground: #b89500;
--vscode-list-errorForeground: #f88070;
--vscode-list-warningForeground: #cca700;
--vscode-listFilterWidget-background: #252526;
--vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);
--vscode-listFilterWidget-noMatchesOutline: #be1100;
--vscode-listFilterWidget-shadow: rgba(0, 0, 0, 0.36);
--vscode-list-filterMatchBackground: rgba(234, 92, 0, 0.33);
--vscode-tree-indentGuidesStroke: #585858;
--vscode-tree-tableColumnsBorder: rgba(204, 204, 204, 0.13);
--vscode-tree-tableOddRowsBackground: rgba(204, 204, 204, 0.04);
--vscode-list-deemphasizedForeground: #8c8c8c;
--vscode-quickInputList-focusForeground: #ffffff;
--vscode-quickInputList-focusIconForeground: #ffffff;
--vscode-quickInputList-focusBackground: #04395e;
--vscode-menu-foreground: #cccccc;
--vscode-menu-background: #303031;
--vscode-menu-selectionForeground: #ffffff;
--vscode-menu-selectionBackground: #04395e;
--vscode-menu-separatorBackground: #606060;
--vscode-toolbar-hoverBackground: rgba(90, 93, 94, 0.31);
--vscode-toolbar-activeBackground: rgba(99, 102, 103, 0.31);
--vscode-editor-snippetTabstopHighlightBackground: rgba(124, 124, 124, 0.3);
--vscode-editor-snippetFinalTabstopHighlightBorder: #525252;
--vscode-breadcrumb-foreground: rgba(204, 204, 204, 0.8);
--vscode-breadcrumb-background: #1e1e1e;
--vscode-breadcrumb-focusForeground: #e0e0e0;
--vscode-breadcrumb-activeSelectionForeground: #e0e0e0;
--vscode-breadcrumbPicker-background: #252526;
--vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
--vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);
--vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
--vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
--vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
--vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);
--vscode-editorOverviewRuler-currentContentForeground: rgba(
64,
200,
174,
0.5
);
--vscode-editorOverviewRuler-incomingContentForeground: rgba(
64,
166,
255,
0.5
);
--vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
--vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
--vscode-editorOverviewRuler-selectionHighlightForeground: rgba(
160,
160,
160,
0.8
);
--vscode-minimap-findMatchHighlight: #d18616;
--vscode-minimap-selectionOccurrenceHighlight: #676767;
--vscode-minimap-selectionHighlight: #264f78;
--vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7);
--vscode-minimap-warningHighlight: #cca700;
--vscode-minimap-foregroundOpacity: #000000;
--vscode-minimapSlider-background: rgba(121, 121, 121, 0.2);
--vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, 0.35);
--vscode-minimapSlider-activeBackground: rgba(191, 191, 191, 0.2);
--vscode-problemsErrorIcon-foreground: #f14c4c;
--vscode-problemsWarningIcon-foreground: #cca700;
--vscode-problemsInfoIcon-foreground: #3794ff;
--vscode-charts-foreground: #cccccc;
--vscode-charts-lines: rgba(204, 204, 204, 0.5);
--vscode-charts-red: #f14c4c;
--vscode-charts-blue: #3794ff;
--vscode-charts-yellow: #cca700;
--vscode-charts-orange: #d18616;
--vscode-charts-green: #89d185;
--vscode-charts-purple: #b180d7;
--vscode-editor-lineHighlightBorder: #282828;
--vscode-editor-rangeHighlightBackground: rgba(255, 255, 255, 0.04);
--vscode-editor-symbolHighlightBackground: rgba(234, 92, 0, 0.33);
--vscode-editorCursor-foreground: #aeafad;
--vscode-editorWhitespace-foreground: rgba(227, 228, 226, 0.16);
--vscode-editorIndentGuide-background: #404040;
--vscode-editorIndentGuide-activeBackground: #707070;
--vscode-editorLineNumber-foreground: #858585;
--vscode-editorActiveLineNumber-foreground: #c6c6c6;
--vscode-editorLineNumber-activeForeground: #c6c6c6;
--vscode-editorRuler-foreground: #5a5a5a;
--vscode-editorCodeLens-foreground: #999999;
--vscode-editorBracketMatch-background: rgba(0, 100, 0, 0.1);
--vscode-editorBracketMatch-border: #888888;
--vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3);
--vscode-editorGutter-background: #1e1e1e;
--vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.67);
--vscode-editorGhostText-foreground: rgba(255, 255, 255, 0.34);
--vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
--vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
--vscode-editorOverviewRuler-warningForeground: #cca700;
--vscode-editorOverviewRuler-infoForeground: #3794ff;
--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-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-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-editorUnicodeHighlight-border: #bd9b03;
--vscode-editorUnicodeHighlight-background: rgba(189, 155, 3, 0.15);
--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-editorHoverWidget-highlightForeground: #2aaaff;
--vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;
--vscode-editor-foldBackground: rgba(38, 79, 120, 0.3);
--vscode-editorGutter-foldingControlForeground: #c5c5c5;
--vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3);
--vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.72);
--vscode-editor-wordHighlightStrongBackground: rgba(0, 73, 114, 0.72);
--vscode-editorOverviewRuler-wordHighlightForeground: rgba(
160,
160,
160,
0.8
);
--vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(
192,
160,
192,
0.8
);
--vscode-peekViewTitle-background: rgba(55, 148, 255, 0.1);
--vscode-peekViewTitleLabel-foreground: #ffffff;
--vscode-peekViewTitleDescription-foreground: rgba(204, 204, 204, 0.7);
--vscode-peekView-border: #3794ff;
--vscode-peekViewResult-background: #252526;
--vscode-peekViewResult-lineForeground: #bbbbbb;
--vscode-peekViewResult-fileForeground: #ffffff;
--vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);
--vscode-peekViewResult-selectionForeground: #ffffff;
--vscode-peekViewEditor-background: #001f33;
--vscode-peekViewEditorGutter-background: #001f33;
--vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3);
--vscode-peekViewEditor-matchHighlightBackground: rgba(255, 143, 0, 0.6);
--vscode-editorMarkerNavigationError-background: #f14c4c;
--vscode-editorMarkerNavigationError-headerBackground: rgba(241, 76, 76, 0.1);
--vscode-editorMarkerNavigationWarning-background: #cca700;
--vscode-editorMarkerNavigationWarning-headerBackground: rgba(
204,
167,
0,
0.1
);
--vscode-editorMarkerNavigationInfo-background: #3794ff;
--vscode-editorMarkerNavigationInfo-headerBackground: rgba(55, 148, 255, 0.1);
--vscode-editorMarkerNavigation-background: #1e1e1e;
--vscode-editorSuggestWidget-background: #252526;
--vscode-editorSuggestWidget-border: #454545;
--vscode-editorSuggestWidget-foreground: #d4d4d4;
--vscode-editorSuggestWidget-selectedForeground: #ffffff;
--vscode-editorSuggestWidget-selectedIconForeground: #ffffff;
--vscode-editorSuggestWidget-selectedBackground: #04395e;
--vscode-editorSuggestWidget-highlightForeground: #2aaaff;
--vscode-editorSuggestWidget-focusHighlightForeground: #2aaaff;
--vscode-editorSuggestWidgetStatus-foreground: rgba(212, 212, 212, 0.5);
--vscode-tab-activeBackground: #1e1e1e;
--vscode-tab-unfocusedActiveBackground: #1e1e1e;
--vscode-tab-inactiveBackground: #2d2d2d;
--vscode-tab-unfocusedInactiveBackground: #2d2d2d;
--vscode-tab-activeForeground: #ffffff;
--vscode-tab-inactiveForeground: rgba(255, 255, 255, 0.5);
--vscode-tab-unfocusedActiveForeground: rgba(255, 255, 255, 0.5);
--vscode-tab-unfocusedInactiveForeground: rgba(255, 255, 255, 0.25);
--vscode-tab-border: #252526;
--vscode-tab-lastPinnedBorder: rgba(204, 204, 204, 0.2);
--vscode-tab-activeModifiedBorder: #3399cc;
--vscode-tab-inactiveModifiedBorder: rgba(51, 153, 204, 0.5);
--vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 153, 204, 0.5);
--vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 153, 204, 0.25);
--vscode-editorPane-background: #1e1e1e;
--vscode-editorGroupHeader-tabsBackground: #252526;
--vscode-editorGroupHeader-noTabsBackground: #1e1e1e;
--vscode-editorGroup-border: #444444;
--vscode-editorGroup-dropBackground: rgba(83, 89, 93, 0.5);
--vscode-editorGroup-dropIntoPromptForeground: #cccccc;
--vscode-editorGroup-dropIntoPromptBackground: #252526;
--vscode-sideBySideEditor-horizontalBorder: #444444;
--vscode-sideBySideEditor-verticalBorder: #444444;
--vscode-panel-background: #1e1e1e;
--vscode-panel-border: rgba(128, 128, 128, 0.35);
--vscode-panelTitle-activeForeground: #e7e7e7;
--vscode-panelTitle-inactiveForeground: rgba(231, 231, 231, 0.6);
--vscode-panelTitle-activeBorder: #e7e7e7;
--vscode-panel-dropBorder: #e7e7e7;
--vscode-panelSection-dropBackground: rgba(83, 89, 93, 0.5);
--vscode-panelSectionHeader-background: rgba(128, 128, 128, 0.2);
--vscode-panelSection-border: rgba(128, 128, 128, 0.35);
--vscode-banner-background: #04395e;
--vscode-banner-foreground: #ffffff;
--vscode-banner-iconForeground: #3794ff;
--vscode-statusBar-foreground: #ffffff;
--vscode-statusBar-noFolderForeground: #ffffff;
--vscode-statusBar-background: #007acc;
--vscode-statusBar-noFolderBackground: #68217a;
--vscode-statusBar-focusBorder: #ffffff;
--vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);
--vscode-statusBarItem-focusBorder: #ffffff;
--vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12);
--vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2);
--vscode-statusBarItem-prominentForeground: #ffffff;
--vscode-statusBarItem-prominentBackground: rgba(0, 0, 0, 0.5);
--vscode-statusBarItem-prominentHoverBackground: rgba(0, 0, 0, 0.3);
--vscode-statusBarItem-errorBackground: #c72e0f;
--vscode-statusBarItem-errorForeground: #ffffff;
--vscode-statusBarItem-warningBackground: #7a6400;
--vscode-statusBarItem-warningForeground: #ffffff;
--vscode-activityBar-background: #333333;
--vscode-activityBar-foreground: #ffffff;
--vscode-activityBar-inactiveForeground: rgba(255, 255, 255, 0.4);
--vscode-activityBar-activeBorder: #ffffff;
--vscode-activityBar-dropBorder: #ffffff;
--vscode-activityBarBadge-background: #007acc;
--vscode-activityBarBadge-foreground: #ffffff;
--vscode-statusBarItem-remoteBackground: #16825d;
--vscode-statusBarItem-remoteForeground: #ffffff;
--vscode-extensionBadge-remoteBackground: #007acc;
--vscode-extensionBadge-remoteForeground: #ffffff;
--vscode-sideBar-background: #252526;
--vscode-sideBarTitle-foreground: #bbbbbb;
--vscode-sideBar-dropBackground: rgba(83, 89, 93, 0.5);
--vscode-sideBarSectionHeader-background: rgba(0, 0, 0, 0);
--vscode-sideBarSectionHeader-border: rgba(204, 204, 204, 0.2);
--vscode-titleBar-activeForeground: #cccccc;
--vscode-titleBar-inactiveForeground: rgba(204, 204, 204, 0.6);
--vscode-titleBar-activeBackground: #3c3c3c;
--vscode-titleBar-inactiveBackground: rgba(60, 60, 60, 0.6);
--vscode-menubar-selectionForeground: #cccccc;
--vscode-menubar-selectionBackground: rgba(90, 93, 94, 0.31);
--vscode-notifications-foreground: #cccccc;
--vscode-notifications-background: #252526;
--vscode-notificationLink-foreground: #3794ff;
--vscode-notificationCenterHeader-background: #303031;
--vscode-notifications-border: #303031;
--vscode-notificationsErrorIcon-foreground: #f14c4c;
--vscode-notificationsWarningIcon-foreground: #cca700;
--vscode-notificationsInfoIcon-foreground: #3794ff;
--vscode-commandCenter-foreground: #cccccc;
--vscode-commandCenter-activeForeground: #cccccc;
--vscode-commandCenter-activeBackground: rgba(90, 93, 94, 0.31);
--vscode-commandCenter-border: rgba(128, 128, 128, 0.35);
--vscode-editorCommentsWidget-resolvedBorder: rgba(204, 204, 204, 0.5);
--vscode-editorCommentsWidget-unresolvedBorder: #3794ff;
--vscode-editorCommentsWidget-rangeBackground: rgba(55, 148, 255, 0.1);
--vscode-editorCommentsWidget-rangeBorder: rgba(55, 148, 255, 0.4);
--vscode-editorCommentsWidget-rangeActiveBackground: rgba(55, 148, 255, 0.1);
--vscode-editorCommentsWidget-rangeActiveBorder: rgba(55, 148, 255, 0.4);
--vscode-editorGutter-commentRangeForeground: #37373d;
--vscode-debugToolBar-background: #333333;
--vscode-debugIcon-startForeground: #89d185;
--vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 0, 0.2);
--vscode-editor-focusedStackFrameHighlightBackground: rgba(
122,
189,
122,
0.3
);
--vscode-mergeEditor-change\.background: rgba(155, 185, 85, 0.2);
--vscode-mergeEditor-change\.word\.background: rgba(156, 204, 44, 0.2);
--vscode-mergeEditor-conflict\.unhandledUnfocused\.border: rgba(
255,
166,
0,
0.48
);
--vscode-mergeEditor-conflict\.unhandledFocused\.border: #ffa600;
--vscode-mergeEditor-conflict\.handledUnfocused\.border: rgba(
134,
134,
134,
0.29
);
--vscode-mergeEditor-conflict\.handledFocused\.border: rgba(
193,
193,
193,
0.8
);
--vscode-mergeEditor-conflict\.handled\.minimapOverViewRuler: rgba(
173,
172,
168,
0.93
);
--vscode-mergeEditor-conflict\.unhandled\.minimapOverViewRuler: #fcba03;
--vscode-mergeEditor-conflictingLines\.background: rgba(255, 234, 0, 0.28);
--vscode-settings-headerForeground: #e7e7e7;
--vscode-settings-modifiedItemIndicator: #0c7d9d;
--vscode-settings-headerBorder: rgba(128, 128, 128, 0.35);
--vscode-settings-sashBorder: rgba(128, 128, 128, 0.35);
--vscode-settings-dropdownBackground: #3c3c3c;
--vscode-settings-dropdownForeground: #f0f0f0;
--vscode-settings-dropdownBorder: #3c3c3c;
--vscode-settings-dropdownListBorder: #454545;
--vscode-settings-checkboxBackground: #3c3c3c;
--vscode-settings-checkboxForeground: #f0f0f0;
--vscode-settings-checkboxBorder: #3c3c3c;
--vscode-settings-textInputBackground: #3c3c3c;
--vscode-settings-textInputForeground: #cccccc;
--vscode-settings-numberInputBackground: #3c3c3c;
--vscode-settings-numberInputForeground: #cccccc;
--vscode-settings-focusedRowBackground: rgba(42, 45, 46, 0.6);
--vscode-settings-rowHoverBackground: rgba(42, 45, 46, 0.3);
--vscode-settings-focusedRowBorder: rgba(255, 255, 255, 0.12);
--vscode-terminal-foreground: #cccccc;
--vscode-terminal-selectionBackground: #264f78;
--vscode-terminal-inactiveSelectionBackground: #3a3d41;
--vscode-terminalCommandDecoration-defaultBackground: rgba(
255,
255,
255,
0.25
);
--vscode-terminalCommandDecoration-successBackground: #1b81a8;
--vscode-terminalCommandDecoration-errorBackground: #f14c4c;
--vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);
--vscode-terminal-border: rgba(128, 128, 128, 0.35);
--vscode-terminal-findMatchBackground: #515c6a;
--vscode-terminal-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
--vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
--vscode-terminal-dropBackground: rgba(83, 89, 93, 0.5);
--vscode-testing-iconFailed: #f14c4c;
--vscode-testing-iconErrored: #f14c4c;
--vscode-testing-iconPassed: #73c991;
--vscode-testing-runAction: #73c991;
--vscode-testing-iconQueued: #cca700;
--vscode-testing-iconUnset: #848484;
--vscode-testing-iconSkipped: #848484;
--vscode-testing-peekBorder: #f14c4c;
--vscode-testing-peekHeaderBackground: rgba(241, 76, 76, 0.1);
--vscode-testing-message\.error\.decorationForeground: #f14c4c;
--vscode-testing-message\.error\.lineBackground: rgba(255, 0, 0, 0.2);
--vscode-testing-message\.info\.decorationForeground: rgba(
212,
212,
212,
0.5
);
--vscode-welcomePage-tileBackground: #252526;
--vscode-welcomePage-tileHoverBackground: #2c2c2d;
--vscode-welcomePage-tileShadow: rgba(0, 0, 0, 0.36);
--vscode-welcomePage-progress\.background: #3c3c3c;
--vscode-welcomePage-progress\.foreground: #3794ff;
--vscode-debugExceptionWidget-border: #a31515;
--vscode-debugExceptionWidget-background: #420b0d;
--vscode-ports-iconRunningProcessForeground: #369432;
--vscode-statusBar-debuggingBackground: #cc6633;
--vscode-statusBar-debuggingForeground: #ffffff;
--vscode-editor-inlineValuesForeground: rgba(255, 255, 255, 0.5);
--vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);
--vscode-editorGutter-modifiedBackground: #1b81a8;
--vscode-editorGutter-addedBackground: #487e02;
--vscode-editorGutter-deletedBackground: #f14c4c;
--vscode-minimapGutter-modifiedBackground: #1b81a8;
--vscode-minimapGutter-addedBackground: #487e02;
--vscode-minimapGutter-deletedBackground: #f14c4c;
--vscode-editorOverviewRuler-modifiedForeground: rgba(27, 129, 168, 0.6);
--vscode-editorOverviewRuler-addedForeground: rgba(72, 126, 2, 0.6);
--vscode-editorOverviewRuler-deletedForeground: rgba(241, 76, 76, 0.6);
--vscode-debugIcon-breakpointForeground: #e51400;
--vscode-debugIcon-breakpointDisabledForeground: #848484;
--vscode-debugIcon-breakpointUnverifiedForeground: #848484;
--vscode-debugIcon-breakpointCurrentStackframeForeground: #ffcc00;
--vscode-debugIcon-breakpointStackframeForeground: #89d185;
--vscode-notebook-cellBorderColor: #37373d;
--vscode-notebook-focusedEditorBorder: #007fd4;
--vscode-notebookStatusSuccessIcon-foreground: #89d185;
--vscode-notebookStatusErrorIcon-foreground: #f48771;
--vscode-notebookStatusRunningIcon-foreground: #cccccc;
--vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);
--vscode-notebook-selectedCellBackground: #37373d;
--vscode-notebook-selectedCellBorder: #37373d;
--vscode-notebook-focusedCellBorder: #007fd4;
--vscode-notebook-inactiveFocusedCellBorder: #37373d;
--vscode-notebook-cellStatusBarItemHoverBackground: rgba(255, 255, 255, 0.15);
--vscode-notebook-cellInsertionIndicator: #007fd4;
--vscode-notebookScrollbarSlider-background: rgba(121, 121, 121, 0.4);
--vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
--vscode-notebookScrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
--vscode-notebook-symbolHighlightBackground: rgba(255, 255, 255, 0.04);
--vscode-notebook-cellEditorBackground: #252526;
--vscode-notebook-editorBackground: #1e1e1e;
--vscode-keybindingTable-headerBackground: rgba(204, 204, 204, 0.04);
--vscode-keybindingTable-rowsBackground: rgba(204, 204, 204, 0.04);
--vscode-scm-providerBorder: #454545;
--vscode-debugTokenExpression-name: #c586c0;
--vscode-debugTokenExpression-value: rgba(204, 204, 204, 0.6);
--vscode-debugTokenExpression-string: #ce9178;
--vscode-debugTokenExpression-boolean: #4e94ce;
--vscode-debugTokenExpression-number: #b5cea8;
--vscode-debugTokenExpression-error: #f48771;
--vscode-debugView-exceptionLabelForeground: #cccccc;
--vscode-debugView-exceptionLabelBackground: #6c2022;
--vscode-debugView-stateLabelForeground: #cccccc;
--vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);
--vscode-debugView-valueChangedHighlight: #569cd6;
--vscode-debugConsole-infoForeground: #3794ff;
--vscode-debugConsole-warningForeground: #cca700;
--vscode-debugConsole-errorForeground: #f48771;
--vscode-debugConsole-sourceForeground: #cccccc;
--vscode-debugConsoleInputIcon-foreground: #cccccc;
--vscode-debugIcon-pauseForeground: #75beff;
--vscode-debugIcon-stopForeground: #f48771;
--vscode-debugIcon-disconnectForeground: #f48771;
--vscode-debugIcon-restartForeground: #89d185;
--vscode-debugIcon-stepOverForeground: #75beff;
--vscode-debugIcon-stepIntoForeground: #75beff;
--vscode-debugIcon-stepOutForeground: #75beff;
--vscode-debugIcon-continueForeground: #75beff;
--vscode-debugIcon-stepBackForeground: #75beff;
--vscode-extensionButton-prominentBackground: #0e639c;
--vscode-extensionButton-prominentForeground: #ffffff;
--vscode-extensionButton-prominentHoverBackground: #1177bb;
--vscode-extensionIcon-starForeground: #ff8e00;
--vscode-extensionIcon-verifiedForeground: #3794ff;
--vscode-extensionIcon-preReleaseForeground: #1d9271;
--vscode-extensionIcon-sponsorForeground: #d758b3;
--vscode-terminal-ansiBlack: #000000;
--vscode-terminal-ansiRed: #cd3131;
--vscode-terminal-ansiGreen: #0dbc79;
--vscode-terminal-ansiYellow: #e5e510;
--vscode-terminal-ansiBlue: #2472c8;
--vscode-terminal-ansiMagenta: #bc3fbc;
--vscode-terminal-ansiCyan: #11a8cd;
--vscode-terminal-ansiWhite: #e5e5e5;
--vscode-terminal-ansiBrightBlack: #666666;
--vscode-terminal-ansiBrightRed: #f14c4c;
--vscode-terminal-ansiBrightGreen: #23d18b;
--vscode-terminal-ansiBrightYellow: #f5f543;
--vscode-terminal-ansiBrightBlue: #3b8eea;
--vscode-terminal-ansiBrightMagenta: #d670d6;
--vscode-terminal-ansiBrightCyan: #29b8db;
--vscode-terminal-ansiBrightWhite: #e5e5e5;
--vscode-interactive-activeCodeBorder: #3794ff;
--vscode-interactive-inactiveCodeBorder: #37373d;
--vscode-gitDecoration-addedResourceForeground: #81b88b;
--vscode-gitDecoration-modifiedResourceForeground: #e2c08d;
--vscode-gitDecoration-deletedResourceForeground: #c74e39;
--vscode-gitDecoration-renamedResourceForeground: #73c991;
--vscode-gitDecoration-untrackedResourceForeground: #73c991;
--vscode-gitDecoration-ignoredResourceForeground: #8c8c8c;
--vscode-gitDecoration-stageModifiedResourceForeground: #e2c08d;
--vscode-gitDecoration-stageDeletedResourceForeground: #c74e39;
--vscode-gitDecoration-conflictingResourceForeground: #e4676b;
--vscode-gitDecoration-submoduleResourceForeground: #8db9e2;
--vscode-testExplorer-errorDecorationBackground: #5a1d1d;
}
/**
* This is copied in the same way, but from the <body> element
*/
body {
background-color: transparent;
color: var(--vscode-editor-foreground);
font-family: var(--vscode-font-family);
font-weight: var(--vscode-font-weight);
font-size: var(--vscode-font-size);
margin: 0;
padding: 0 20px;
}

42
extensions/ql-vscode/src/stories/vscode-webview-ui-toolkit/Button.stories.tsx Normal file
View File

@@ -0,0 +1,42 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
export default {
title: 'WebView UI Toolkit/Button',
component: VSCodeButton,
argTypes: {
children: { control: 'text' },
appearance: {
control: {
type: 'select',
options: ['primary', 'secondary', 'icon'],
},
},
onClick: {
action: 'clicked',
table: {
disable: true,
},
},
},
} as ComponentMeta<typeof VSCodeButton>;
const Template: ComponentStory<typeof VSCodeButton> = (args) => (
<VSCodeButton {...args} />
);
export const Default: any = Template.bind({});
Default.args = {
children: 'Button',
onClick: action('button-clicked'),
};
export const Secondary = Template.bind({});
Secondary.args = {
...Default.args,
appearance: 'secondary',
};

9
extensions/ql-vscode/src/stories/vscode-webview-ui-toolkit/Overview.stories.mdx Normal file
View File

@@ -0,0 +1,9 @@
<!-- Checkbox.stories.mdx -->
import { Canvas, Meta, Story } from "@storybook/addon-docs";
<Meta title="WebView UI Toolkit/Overview" />
The stories in this directory are examples of how to use the [WebView UI Toolkit](https://github.com/microsoft/vscode-webview-ui-toolkit).
They are not meant to be used as a reference for the WebView UI Toolkit. For a full reference and Storybook documentation,
please see the [WebView UI Toolkit Storybook](https://microsoft.github.io/vscode-webview-ui-toolkit/).