Setup Storybook for testing UI components
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
Родитель
da9065101f
Коммит
6018ebaca9
|
|
@ -124,6 +124,14 @@
|
|||
"outFiles": [
|
||||
"${workspaceRoot}/extensions/ql-vscode/out/**/*.js",
|
||||
],
|
||||
},
|
||||
{
|
||||
"name": "Launch Storybook",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"cwd": "${workspaceFolder}/extensions/ql-vscode",
|
||||
"runtimeExecutable": "npm",
|
||||
"runtimeArgs": ["run-script", "storybook"]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
### 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
|
||||
|
||||
Unit tests and many integration tests do not require a copy of the CodeQL CLI.
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
legacy-peer-deps=true
|
||||
|
|
@ -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"
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { addons } from '@storybook/addons';
|
||||
import { themes } from '@storybook/theming';
|
||||
|
||||
addons.setConfig({
|
||||
theme: themes.dark,
|
||||
enableShortcuts: false,
|
||||
});
|
||||
|
|
@ -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'],
|
||||
},
|
||||
},
|
||||
};
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -1191,7 +1191,9 @@
|
|||
"update-vscode": "node ./node_modules/vscode/bin/install",
|
||||
"format": "tsfmt -r && eslint src test --ext .ts,.tsx --fix",
|
||||
"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": {
|
||||
"@octokit/plugin-retry": "^3.0.9",
|
||||
|
|
@ -1233,6 +1235,15 @@
|
|||
"zip-a-folder": "~1.1.3"
|
||||
},
|
||||
"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-as-promised": "~7.1.2",
|
||||
"@types/child-process-promise": "^2.2.1",
|
||||
|
|
@ -1272,12 +1283,14 @@
|
|||
"@typescript-eslint/parser": "^4.26.0",
|
||||
"ansi-colors": "^4.1.1",
|
||||
"applicationinsights": "^1.8.7",
|
||||
"babel-loader": "^8.2.5",
|
||||
"chai": "^4.2.0",
|
||||
"chai-as-promised": "~7.1.1",
|
||||
"css-loader": "~3.1.0",
|
||||
"del": "^6.0.0",
|
||||
"eslint": "~6.8.0",
|
||||
"eslint-plugin-react": "~7.19.0",
|
||||
"eslint-plugin-storybook": "^0.6.4",
|
||||
"file-loader": "^6.2.0",
|
||||
"glob": "^7.1.4",
|
||||
"gulp": "^4.0.2",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
module.exports = {
|
||||
env: {
|
||||
browser: true
|
||||
},
|
||||
extends: [
|
||||
"plugin:react/recommended",
|
||||
"plugin:storybook/recommended",
|
||||
],
|
||||
settings: {
|
||||
react: {
|
||||
version: 'detect'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
};
|
||||
|
|
@ -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',
|
||||
};
|
||||
|
|
@ -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',
|
||||
};
|
||||
|
|
@ -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 />;
|
||||
|
||||
|
|
@ -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,
|
||||
};
|
||||
|
|
@ -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
|
||||
};
|
||||
|
|
@ -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} />
|
||||
);
|
||||
};
|
||||
|
|
@ -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,
|
||||
};
|
||||
|
|
@ -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',
|
||||
};
|
||||
|
|
@ -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"]
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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',
|
||||
};
|
||||
|
|
@ -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/).
|
||||
Загрузка…
Ссылка в новой задаче