Adopt New FAST Design Token API (#88)
Adopted the new FAST Foundation Design Tokens API. - Created new `design-tokens.ts` file - Removed `design-system.ts` and Design System Provider code - Updated all components to consume new tokens - Updated `applyTheme.ts` utility to use new API
This commit is contained in:
Hawk Ticehurst
GitHub
Родитель
2f4d8c4b0b
Коммит
bb91c251dd
|
|
@ -1,7 +1,6 @@
|
|||
<style>
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,4 @@
|
|||
import {themes} from '@storybook/theming';
|
||||
import {addDecorator} from '@storybook/html';
|
||||
|
||||
// Add global decorator that wraps all stories in the
|
||||
// <vscode-design-system-provider> custom element
|
||||
addDecorator(story => {
|
||||
const storyContents = story();
|
||||
return createDesignProviderWrapper(storyContents);
|
||||
});
|
||||
|
||||
const createDesignProviderWrapper = story => {
|
||||
const designProvider = document.createElement(
|
||||
'vscode-design-system-provider'
|
||||
);
|
||||
designProvider.setAttribute('use-defaults', '');
|
||||
designProvider.appendChild(story);
|
||||
return designProvider;
|
||||
};
|
||||
|
||||
export const parameters = {
|
||||
actions: {argTypesRegex: '^on[A-Z].*'},
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
# Visual Studio Code Webview Toolkit
|
||||
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
[](https://github.com/microsoft/vscode-webview-toolkit)
|
||||
[](https://github.com/microsoft/vscode-webview-toolkit)
|
||||
[](https://www.typescriptlang.org/)
|
||||
|
||||
## Introduction
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ import { Checkbox } from '@microsoft/fast-foundation';
|
|||
import { DataGrid } from '@microsoft/fast-foundation';
|
||||
import { DataGridCell } from '@microsoft/fast-foundation';
|
||||
import { DataGridRow } from '@microsoft/fast-foundation';
|
||||
import { DesignSystemProvider } from '@microsoft/fast-foundation';
|
||||
import { Divider } from '@microsoft/fast-foundation';
|
||||
import { ListboxOption } from '@microsoft/fast-foundation';
|
||||
import { Menu } from '@microsoft/fast-foundation';
|
||||
|
|
@ -69,188 +68,6 @@ export class VSCodeDataGridCell extends DataGridCell {
|
|||
export class VSCodeDataGridRow extends DataGridRow {
|
||||
}
|
||||
|
||||
// @public
|
||||
export interface VSCodeDesignSystem {
|
||||
badgeBackgroundColor: string;
|
||||
// (undocumented)
|
||||
badgeForegroundColor: string;
|
||||
baseHeightMultiplier: number;
|
||||
// (undocumented)
|
||||
baseHorizontalSpacingMultiplier: number;
|
||||
// (undocumented)
|
||||
borderWidth: number;
|
||||
breadcrumbItemBackgroundColor: string;
|
||||
// (undocumented)
|
||||
breadcrumbItemForegroundColor: string;
|
||||
// (undocumented)
|
||||
breadcrumbItemForegroundHoverColor: string;
|
||||
// (undocumented)
|
||||
buttonInstallBackgroundColor: string;
|
||||
// (undocumented)
|
||||
buttonInstallForegroundColor: string;
|
||||
// (undocumented)
|
||||
buttonInstallHoverBackgroundColor: string;
|
||||
buttonPrimaryBackgroundColor: string;
|
||||
// (undocumented)
|
||||
buttonPrimaryForegroundColor: string;
|
||||
// (undocumented)
|
||||
buttonPrimaryHoverBackgroundColor: string;
|
||||
// (undocumented)
|
||||
buttonSecondaryBackgroundColor: string;
|
||||
// (undocumented)
|
||||
buttonSecondaryForegroundColor: string;
|
||||
// (undocumented)
|
||||
buttonSecondaryHoverBackgroundColor: string;
|
||||
checkboxBackgroundColor: string;
|
||||
// (undocumented)
|
||||
checkboxBorderColor: string;
|
||||
// (undocumented)
|
||||
checkboxCornerRadius: number;
|
||||
// (undocumented)
|
||||
checkboxForegroundColor: string;
|
||||
// (undocumented)
|
||||
cornerRadius: number;
|
||||
// (undocumented)
|
||||
density: number;
|
||||
// (undocumented)
|
||||
designUnit: number;
|
||||
// (undocumented)
|
||||
disabledOpacity: number;
|
||||
dropdownBackgroundColor: string;
|
||||
// (undocumented)
|
||||
dropdownBorderColor: string;
|
||||
// (undocumented)
|
||||
dropdownCornerRadius: number;
|
||||
// (undocumented)
|
||||
dropdownForegroundColor: string;
|
||||
// (undocumented)
|
||||
focusBorderColor: string;
|
||||
// (undocumented)
|
||||
focusBorderWidth: number;
|
||||
inputBackgroundColor: string;
|
||||
// (undocumented)
|
||||
inputBorderColor: string;
|
||||
// (undocumented)
|
||||
inputForegroundColor: string;
|
||||
// (undocumented)
|
||||
inputPlaceholderForegroundColor: string;
|
||||
optionBackgroundFocusColor: string;
|
||||
progressBackgroundColor: string;
|
||||
// (undocumented)
|
||||
tabActiveBorderColor: string;
|
||||
// (undocumented)
|
||||
tabActiveForegroundColor: string;
|
||||
// (undocumented)
|
||||
tabForegroundColor: string;
|
||||
tabPanelBackgroundColor: string;
|
||||
// (undocumented)
|
||||
tabPanelBorderColor: string;
|
||||
textLinkForegroundColor: string;
|
||||
// (undocumented)
|
||||
typeRampBaseFontSize: string;
|
||||
// (undocumented)
|
||||
typeRampBaseLineHeight: string;
|
||||
// (undocumented)
|
||||
typeRampMinus1FontSize: string;
|
||||
// (undocumented)
|
||||
typeRampMinus1LineHeight: string;
|
||||
typeRampMinus2FontSize: string;
|
||||
// (undocumented)
|
||||
typeRampMinus2LineHeight: string;
|
||||
// (undocumented)
|
||||
typeRampPlus1FontSize: string;
|
||||
// (undocumented)
|
||||
typeRampPlus1LineHeight: string;
|
||||
// (undocumented)
|
||||
typeRampPlus2FontSize: string;
|
||||
// (undocumented)
|
||||
typeRampPlus2LineHeight: string;
|
||||
// (undocumented)
|
||||
typeRampPlus3FontSize: string;
|
||||
// (undocumented)
|
||||
typeRampPlus3LineHeight: string;
|
||||
// (undocumented)
|
||||
typeRampPlus4FontSize: string;
|
||||
// (undocumented)
|
||||
typeRampPlus4LineHeight: string;
|
||||
// (undocumented)
|
||||
typeRampPlus5FontSize: string;
|
||||
// (undocumented)
|
||||
typeRampPlus5LineHeight: string;
|
||||
// (undocumented)
|
||||
typeRampPlus6FontSize: string;
|
||||
// (undocumented)
|
||||
typeRampPlus6LineHeight: string;
|
||||
}
|
||||
|
||||
// @public
|
||||
export const VSCodeDesignSystemDefaults: VSCodeDesignSystem;
|
||||
|
||||
// @public
|
||||
export class VSCodeDesignSystemProvider extends DesignSystemProvider implements VSCodeDesignSystem {
|
||||
badgeBackgroundColor: string;
|
||||
badgeForegroundColor: string;
|
||||
baseHeightMultiplier: number;
|
||||
baseHorizontalSpacingMultiplier: number;
|
||||
borderWidth: number;
|
||||
breadcrumbItemBackgroundColor: string;
|
||||
breadcrumbItemForegroundColor: string;
|
||||
breadcrumbItemForegroundHoverColor: string;
|
||||
buttonInstallBackgroundColor: string;
|
||||
buttonInstallForegroundColor: string;
|
||||
buttonInstallHoverBackgroundColor: string;
|
||||
buttonPrimaryBackgroundColor: string;
|
||||
buttonPrimaryForegroundColor: string;
|
||||
buttonPrimaryHoverBackgroundColor: string;
|
||||
buttonSecondaryBackgroundColor: string;
|
||||
buttonSecondaryForegroundColor: string;
|
||||
buttonSecondaryHoverBackgroundColor: string;
|
||||
checkboxBackgroundColor: string;
|
||||
checkboxBorderColor: string;
|
||||
checkboxCornerRadius: number;
|
||||
checkboxForegroundColor: string;
|
||||
cornerRadius: number;
|
||||
density: number;
|
||||
designUnit: number;
|
||||
disabledOpacity: number;
|
||||
dropdownBackgroundColor: string;
|
||||
dropdownBorderColor: string;
|
||||
dropdownCornerRadius: number;
|
||||
dropdownForegroundColor: string;
|
||||
focusBorderColor: string;
|
||||
focusBorderWidth: number;
|
||||
inputBackgroundColor: string;
|
||||
inputBorderColor: string;
|
||||
inputForegroundColor: string;
|
||||
inputPlaceholderForegroundColor: string;
|
||||
optionBackgroundFocusColor: string;
|
||||
progressBackgroundColor: string;
|
||||
tabActiveBorderColor: string;
|
||||
tabActiveForegroundColor: string;
|
||||
tabForegroundColor: string;
|
||||
tabPanelBackgroundColor: string;
|
||||
tabPanelBorderColor: string;
|
||||
textLinkForegroundColor: string;
|
||||
typeRampBaseFontSize: string;
|
||||
typeRampBaseLineHeight: string;
|
||||
typeRampMinus1FontSize: string;
|
||||
typeRampMinus1LineHeight: string;
|
||||
typeRampMinus2FontSize: string;
|
||||
typeRampMinus2LineHeight: string;
|
||||
typeRampPlus1FontSize: string;
|
||||
typeRampPlus1LineHeight: string;
|
||||
typeRampPlus2FontSize: string;
|
||||
typeRampPlus2LineHeight: string;
|
||||
typeRampPlus3FontSize: string;
|
||||
typeRampPlus3LineHeight: string;
|
||||
typeRampPlus4FontSize: string;
|
||||
typeRampPlus4LineHeight: string;
|
||||
typeRampPlus5FontSize: string;
|
||||
typeRampPlus5LineHeight: string;
|
||||
typeRampPlus6FontSize: string;
|
||||
typeRampPlus6LineHeight: string;
|
||||
}
|
||||
|
||||
// @public
|
||||
export class VSCodeDivider extends Divider {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
"version": "0.4.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@microsoft/fast-element": "^1.0.1",
|
||||
"@microsoft/fast-foundation": "^1.16.1",
|
||||
"@microsoft/fast-element": "^1.2.0",
|
||||
"@microsoft/fast-foundation": "^1.22.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"vscode-codicons": "0.0.15"
|
||||
},
|
||||
|
|
@ -2515,16 +2515,18 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@microsoft/fast-element": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/fast-element/-/fast-element-1.0.2.tgz",
|
||||
"integrity": "sha1-3EPti6z5brNcBtNEqd2tkTXJMH8="
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/fast-element/-/fast-element-1.2.0.tgz",
|
||||
"integrity": "sha1-95vA0GROzZ+OO108NvcLBmbaGZ4=",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@microsoft/fast-foundation": {
|
||||
"version": "1.20.0",
|
||||
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/fast-foundation/-/fast-foundation-1.20.0.tgz",
|
||||
"integrity": "sha1-BW0kEbIpEu9CpMbflSSQahqidtE=",
|
||||
"version": "1.22.0",
|
||||
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/fast-foundation/-/fast-foundation-1.22.0.tgz",
|
||||
"integrity": "sha1-NELZXhDIAN/NBEGJMqpuHVr1zoI=",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@microsoft/fast-element": "^1.0.2",
|
||||
"@microsoft/fast-element": "^1.2.0",
|
||||
"@microsoft/fast-web-utilities": "^4.7.3",
|
||||
"@microsoft/tsdoc-config": "^0.13.4",
|
||||
"tabbable": "^4.0.0",
|
||||
|
|
@ -2533,26 +2535,33 @@
|
|||
},
|
||||
"node_modules/@microsoft/fast-foundation/node_modules/tslib": {
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/tslib/-/tslib-1.14.1.tgz",
|
||||
"integrity": "sha1-zy04vcNKE0vK8QkcQfZhni9nLQA="
|
||||
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/tslib/-/tslib-1.14.1.tgz",
|
||||
"integrity": "sha1-zy04vcNKE0vK8QkcQfZhni9nLQA=",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/@microsoft/fast-web-utilities": {
|
||||
"version": "4.7.3",
|
||||
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/fast-web-utilities/-/fast-web-utilities-4.7.3.tgz",
|
||||
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/fast-web-utilities/-/fast-web-utilities-4.7.3.tgz",
|
||||
"integrity": "sha1-W76k1LGh4Y9bH57qsBvX8UlHljE=",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"exenv-es6": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"lodash-es": "^4.17.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@microsoft/tsdoc": {
|
||||
"version": "0.12.24",
|
||||
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/tsdoc/-/tsdoc-0.12.24.tgz",
|
||||
"integrity": "sha1-MHKONOvJA1HdOv9OGNA47tLD4Jg="
|
||||
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/tsdoc/-/tsdoc-0.12.24.tgz",
|
||||
"integrity": "sha1-MHKONOvJA1HdOv9OGNA47tLD4Jg=",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@microsoft/tsdoc-config": {
|
||||
"version": "0.13.9",
|
||||
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/tsdoc-config/-/tsdoc-config-0.13.9.tgz",
|
||||
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/tsdoc-config/-/tsdoc-config-0.13.9.tgz",
|
||||
"integrity": "sha1-2Mjoq3nKEdwUg4CQxGOQWuTBoi0=",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@microsoft/tsdoc": "0.12.24",
|
||||
"ajv": "~6.12.6",
|
||||
|
|
@ -10077,8 +10086,9 @@
|
|||
},
|
||||
"node_modules/exenv-es6": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/exenv-es6/-/exenv-es6-1.0.0.tgz",
|
||||
"integrity": "sha1-vUWRNjaa8XzzP5WbWvWIA9QGjIA="
|
||||
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/exenv-es6/-/exenv-es6-1.0.0.tgz",
|
||||
"integrity": "sha1-vUWRNjaa8XzzP5WbWvWIA9QGjIA=",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/exit": {
|
||||
"version": "0.1.2",
|
||||
|
|
@ -20404,8 +20414,9 @@
|
|||
},
|
||||
"node_modules/tabbable": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/tabbable/-/tabbable-4.0.0.tgz",
|
||||
"integrity": "sha1-W/8dETXfFILPDwIGQ08V6tvrkmE="
|
||||
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/tabbable/-/tabbable-4.0.0.tgz",
|
||||
"integrity": "sha1-W/8dETXfFILPDwIGQ08V6tvrkmE=",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/table": {
|
||||
"version": "5.4.6",
|
||||
|
|
@ -25036,16 +25047,16 @@
|
|||
}
|
||||
},
|
||||
"@microsoft/fast-element": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/fast-element/-/fast-element-1.0.2.tgz",
|
||||
"integrity": "sha1-3EPti6z5brNcBtNEqd2tkTXJMH8="
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/fast-element/-/fast-element-1.2.0.tgz",
|
||||
"integrity": "sha1-95vA0GROzZ+OO108NvcLBmbaGZ4="
|
||||
},
|
||||
"@microsoft/fast-foundation": {
|
||||
"version": "1.20.0",
|
||||
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/fast-foundation/-/fast-foundation-1.20.0.tgz",
|
||||
"integrity": "sha1-BW0kEbIpEu9CpMbflSSQahqidtE=",
|
||||
"version": "1.22.0",
|
||||
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/fast-foundation/-/fast-foundation-1.22.0.tgz",
|
||||
"integrity": "sha1-NELZXhDIAN/NBEGJMqpuHVr1zoI=",
|
||||
"requires": {
|
||||
"@microsoft/fast-element": "^1.0.2",
|
||||
"@microsoft/fast-element": "^1.2.0",
|
||||
"@microsoft/fast-web-utilities": "^4.7.3",
|
||||
"@microsoft/tsdoc-config": "^0.13.4",
|
||||
"tabbable": "^4.0.0",
|
||||
|
|
@ -25054,14 +25065,14 @@
|
|||
"dependencies": {
|
||||
"tslib": {
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/tslib/-/tslib-1.14.1.tgz",
|
||||
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/tslib/-/tslib-1.14.1.tgz",
|
||||
"integrity": "sha1-zy04vcNKE0vK8QkcQfZhni9nLQA="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@microsoft/fast-web-utilities": {
|
||||
"version": "4.7.3",
|
||||
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/fast-web-utilities/-/fast-web-utilities-4.7.3.tgz",
|
||||
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/fast-web-utilities/-/fast-web-utilities-4.7.3.tgz",
|
||||
"integrity": "sha1-W76k1LGh4Y9bH57qsBvX8UlHljE=",
|
||||
"requires": {
|
||||
"exenv-es6": "^1.0.0"
|
||||
|
|
@ -25069,12 +25080,12 @@
|
|||
},
|
||||
"@microsoft/tsdoc": {
|
||||
"version": "0.12.24",
|
||||
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/tsdoc/-/tsdoc-0.12.24.tgz",
|
||||
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/tsdoc/-/tsdoc-0.12.24.tgz",
|
||||
"integrity": "sha1-MHKONOvJA1HdOv9OGNA47tLD4Jg="
|
||||
},
|
||||
"@microsoft/tsdoc-config": {
|
||||
"version": "0.13.9",
|
||||
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/tsdoc-config/-/tsdoc-config-0.13.9.tgz",
|
||||
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/@microsoft/tsdoc-config/-/tsdoc-config-0.13.9.tgz",
|
||||
"integrity": "sha1-2Mjoq3nKEdwUg4CQxGOQWuTBoi0=",
|
||||
"requires": {
|
||||
"@microsoft/tsdoc": "0.12.24",
|
||||
|
|
@ -31609,7 +31620,7 @@
|
|||
},
|
||||
"exenv-es6": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/exenv-es6/-/exenv-es6-1.0.0.tgz",
|
||||
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/exenv-es6/-/exenv-es6-1.0.0.tgz",
|
||||
"integrity": "sha1-vUWRNjaa8XzzP5WbWvWIA9QGjIA="
|
||||
},
|
||||
"exit": {
|
||||
|
|
@ -40178,7 +40189,7 @@
|
|||
},
|
||||
"tabbable": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/tabbable/-/tabbable-4.0.0.tgz",
|
||||
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/tabbable/-/tabbable-4.0.0.tgz",
|
||||
"integrity": "sha1-W/8dETXfFILPDwIGQ08V6tvrkmE="
|
||||
},
|
||||
"table": {
|
||||
|
|
|
|||
|
|
@ -29,8 +29,8 @@
|
|||
"test:coverage": "jest --verbose --coverage"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/fast-element": "^1.0.1",
|
||||
"@microsoft/fast-foundation": "^1.16.1",
|
||||
"@microsoft/fast-element": "^1.2.0",
|
||||
"@microsoft/fast-foundation": "^1.22.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"vscode-codicons": "0.0.15"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {BadgeArgs, createBadge} from './fixtures/createBadge';
|
||||
import {VSCodeBadge} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodeBadge;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Badge',
|
||||
|
|
|
|||
|
|
@ -1,26 +1,33 @@
|
|||
import {css} from '@microsoft/fast-element';
|
||||
import {display} from '@microsoft/fast-foundation';
|
||||
import {heightNumber} from '../utilities/styles/size';
|
||||
import {
|
||||
badgeBackgroundColor,
|
||||
badgeForegroundColor,
|
||||
designUnit,
|
||||
typeRampMinus1FontSize,
|
||||
typeRampMinus1LineHeight,
|
||||
} from '../design-tokens';
|
||||
|
||||
export const BadgeStyles = css`
|
||||
${display('inline-block')} :host {
|
||||
box-sizing: border-box;
|
||||
font-family: var(--body-font);
|
||||
font-size: var(--type-ramp-minus-1-font-size);
|
||||
line-height: var(--type-ramp-minus-1-line-height);
|
||||
box-sizing: border-box;
|
||||
font-size: ${typeRampMinus1FontSize};
|
||||
line-height: ${typeRampMinus1LineHeight};
|
||||
}
|
||||
.control {
|
||||
border-radius: 2px;
|
||||
padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px);
|
||||
color: var(--badge-foreground-color);
|
||||
background-color: var(--badge-background-color);
|
||||
padding: calc(${designUnit} * 0.5px) calc(${designUnit} * 1px);
|
||||
color: ${badgeForegroundColor};
|
||||
background-color: ${badgeBackgroundColor};
|
||||
font-weight: 400;
|
||||
}
|
||||
:host([circular]) .control {
|
||||
border-radius: 100px;
|
||||
padding: 0 calc(var(--design-unit) * 1px);
|
||||
height: calc((${heightNumber} - (var(--design-unit) * 3)) * 1px);
|
||||
min-width: calc((${heightNumber} - (var(--design-unit) * 3)) * 1px);
|
||||
padding: 0 calc(${designUnit} * 1px);
|
||||
height: calc((${heightNumber} - (${designUnit} * 3)) * 1px);
|
||||
min-width: calc((${heightNumber} - (${designUnit} * 3)) * 1px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,7 @@
|
|||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {
|
||||
BreadcrumbItemArgs,
|
||||
createBreadcrumbItem,
|
||||
} from './fixtures/createBreadcrumbItem';
|
||||
import {VSCodeBreadcrumbItem} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodeBreadcrumbItem;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Breadcrumb Item',
|
||||
|
|
|
|||
|
|
@ -1,16 +1,23 @@
|
|||
import {css} from '@microsoft/fast-element';
|
||||
import {display, focusVisible} from '@microsoft/fast-foundation';
|
||||
import {heightNumber} from '../utilities/styles/size';
|
||||
import {
|
||||
breadcrumbItemForegroundColor,
|
||||
breadcrumbItemForegroundHoverColor,
|
||||
focusBorderWidth,
|
||||
typeRampBaseFontSize,
|
||||
typeRampBaseLineHeight,
|
||||
} from '../design-tokens';
|
||||
|
||||
export const BreadcrumbItemStyles = css`
|
||||
${display('inline-flex')} :host {
|
||||
background: transparent;
|
||||
color: var(--breadcrumb-item-foreground-color);
|
||||
color: ${breadcrumbItemForegroundColor};
|
||||
box-sizing: border-box;
|
||||
font-family: var(--body-font);
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
fill: currentColor;
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
line-height: ${typeRampBaseLineHeight};
|
||||
min-width: calc(${heightNumber} * 1px);
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -26,7 +33,7 @@ export const BreadcrumbItemStyles = css`
|
|||
.control {
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
color: var(--breadcrumb-item-foreground-color);
|
||||
color: ${breadcrumbItemForegroundColor};
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
fill: inherit;
|
||||
|
|
@ -35,10 +42,10 @@ export const BreadcrumbItemStyles = css`
|
|||
white-space: nowrap;
|
||||
}
|
||||
.control:hover {
|
||||
color: var(--breadcrumb-item-foreground-hover-color);
|
||||
color: ${breadcrumbItemForegroundHoverColor};
|
||||
}
|
||||
.control:active {
|
||||
color: var(--breadcrumb-item-foreground-hover-color);
|
||||
color: ${breadcrumbItemForegroundHoverColor};
|
||||
}
|
||||
.control .content {
|
||||
position: relative;
|
||||
|
|
@ -54,17 +61,17 @@ export const BreadcrumbItemStyles = css`
|
|||
width: 100%;
|
||||
}
|
||||
.control:hover .content::before {
|
||||
background: var(--breadcrumb-item-foreground-hover-color);
|
||||
background: ${breadcrumbItemForegroundHoverColor};
|
||||
}
|
||||
.control:active .content::before {
|
||||
background: var(--breadcrumb-item-foreground-hover-color);
|
||||
background: ${breadcrumbItemForegroundHoverColor};
|
||||
}
|
||||
.control:${focusVisible} .content::before {
|
||||
background: var(--breadcrumb-item-foreground-color);
|
||||
height: calc(var(--focus-border-width) * 1px);
|
||||
background: ${breadcrumbItemForegroundColor};
|
||||
height: calc(${focusBorderWidth} * 1px);
|
||||
}
|
||||
.control:not([href]) {
|
||||
color: var(--breadcrumb-item-foreground-color);
|
||||
color: ${breadcrumbItemForegroundColor};
|
||||
cursor: default;
|
||||
}
|
||||
.control:not([href]) .content::before {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {BreadcrumbArgs, createBreadcrumb} from './fixtures/createBreadcrumb';
|
||||
import {VSCodeBreadcrumb} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodeBreadcrumb;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Breadcrumb',
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import {css} from '@microsoft/fast-element';
|
||||
import {display} from '@microsoft/fast-foundation';
|
||||
import {typeRampBaseFontSize, typeRampBaseLineHeight} from '../design-tokens';
|
||||
|
||||
export const BreadcrumbStyles = css`
|
||||
${display('inline-block')} :host {
|
||||
box-sizing: border-box;
|
||||
font-family: var(--body-font);
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
line-height: ${typeRampBaseLineHeight};
|
||||
}
|
||||
.list {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
import {action} from '@storybook/addon-actions';
|
||||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {ButtonArgs, createButton} from './fixtures/createButton';
|
||||
import {VSCodeButton} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodeButton;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Button',
|
||||
|
|
|
|||
|
|
@ -4,6 +4,20 @@ import {
|
|||
display,
|
||||
focusVisible,
|
||||
} from '@microsoft/fast-foundation';
|
||||
import {
|
||||
borderWidth,
|
||||
buttonPrimaryBackgroundColor,
|
||||
buttonPrimaryForegroundColor,
|
||||
buttonPrimaryHoverBackgroundColor,
|
||||
buttonSecondaryBackgroundColor,
|
||||
buttonSecondaryForegroundColor,
|
||||
buttonSecondaryHoverBackgroundColor,
|
||||
cornerRadius,
|
||||
disabledOpacity,
|
||||
focusBorderWidth,
|
||||
typeRampBaseFontSize,
|
||||
typeRampBaseLineHeight,
|
||||
} from '../design-tokens';
|
||||
|
||||
/**
|
||||
* @internal
|
||||
|
|
@ -11,11 +25,12 @@ import {
|
|||
const BaseButtonStyles = css`
|
||||
${display('inline-flex')} :host {
|
||||
outline: none;
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
background: var(--button-primary-background-color);
|
||||
color: var(--button-primary-foreground-color);
|
||||
border-radius: calc(var(--corner-radius) * 1px);
|
||||
font-family: var(--body-font);
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
line-height: ${typeRampBaseLineHeight};
|
||||
background: ${buttonPrimaryBackgroundColor};
|
||||
color: ${buttonPrimaryForegroundColor};
|
||||
border-radius: calc(${cornerRadius} * 1px);
|
||||
fill: currentcolor;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -31,7 +46,7 @@ const BaseButtonStyles = css`
|
|||
white-space: nowrap;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
border: calc(var(--border-width) * 1px) solid transparent;
|
||||
border: calc(${borderWidth} * 1px) solid transparent;
|
||||
color: inherit;
|
||||
border-radius: inherit;
|
||||
fill: inherit;
|
||||
|
|
@ -39,22 +54,22 @@ const BaseButtonStyles = css`
|
|||
font-family: inherit;
|
||||
}
|
||||
:host(:hover) {
|
||||
background: var(--button-primary-hover-background-color);
|
||||
background: ${buttonPrimaryHoverBackgroundColor};
|
||||
}
|
||||
:host(:active) {
|
||||
background: var(--button-primary-background-color);
|
||||
background: ${buttonPrimaryBackgroundColor};
|
||||
}
|
||||
.control: ${focusVisible} {
|
||||
outline: calc(var(--focus-border-width) * 1px) solid
|
||||
var(--button-primary-hover-background-color);
|
||||
outline-offset: calc(var(--focus-border-width) * 1px);
|
||||
outline: calc(${focusBorderWidth} * 1px) solid
|
||||
${buttonPrimaryHoverBackgroundColor};
|
||||
outline-offset: calc(${focusBorderWidth} * 1px);
|
||||
}
|
||||
.control::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
:host([disabled]) {
|
||||
opacity: var(--disabled-opacity);
|
||||
background: var(--button-primary-background-color);
|
||||
opacity: ${disabledOpacity};
|
||||
background: ${buttonPrimaryBackgroundColor};
|
||||
cursor: ${disabledCursor};
|
||||
}
|
||||
.content {
|
||||
|
|
@ -86,25 +101,25 @@ const BaseButtonStyles = css`
|
|||
*/
|
||||
const PrimaryButtonStyles = css`
|
||||
:host([appearance='primary']) {
|
||||
background: var(--button-primary-background-color);
|
||||
color: var(--button-primary-foreground-color);
|
||||
background: ${buttonPrimaryBackgroundColor};
|
||||
color: ${buttonPrimaryForegroundColor};
|
||||
}
|
||||
:host([appearance='primary']:hover) {
|
||||
background: var(--button-primary-hover-background-color);
|
||||
background: ${buttonPrimaryHoverBackgroundColor};
|
||||
}
|
||||
:host([appearance='primary']) .control {
|
||||
padding: 6px 11px;
|
||||
}
|
||||
:host([appearance='primary']:active) .control:active {
|
||||
background: var(--button-primary-background-color);
|
||||
background: ${buttonPrimaryBackgroundColor};
|
||||
}
|
||||
:host([appearance='primary']) .control:${focusVisible} {
|
||||
outline: calc(var(--focus-border-width) * 1px) solid
|
||||
var(--button-primary-hover-background-color);
|
||||
outline-offset: calc(var(--focus-border-width) * 1px);
|
||||
outline: calc(${focusBorderWidth} * 1px) solid
|
||||
${buttonPrimaryHoverBackgroundColor};
|
||||
outline-offset: calc(${focusBorderWidth} * 1px);
|
||||
}
|
||||
:host([appearance='primary'][disabled]) {
|
||||
background: var(--button-primary-background-color);
|
||||
background: ${buttonPrimaryBackgroundColor};
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -113,25 +128,25 @@ const PrimaryButtonStyles = css`
|
|||
*/
|
||||
const SecondaryButtonStyles = css`
|
||||
:host([appearance='secondary']) {
|
||||
background: var(--button-secondary-background-color);
|
||||
color: var(--button-secondary-foreground-color);
|
||||
background: ${buttonSecondaryBackgroundColor};
|
||||
color: ${buttonSecondaryForegroundColor};
|
||||
}
|
||||
:host([appearance='secondary']:hover) {
|
||||
background: var(--button-secondary-hover-background-color);
|
||||
background: ${buttonSecondaryHoverBackgroundColor};
|
||||
}
|
||||
:host([appearance='secondary']) .control {
|
||||
padding: 6px 11px;
|
||||
}
|
||||
:host([appearance='secondary']:active) .control:active {
|
||||
background: var(--button-secondary-background-color);
|
||||
background: ${buttonSecondaryBackgroundColor};
|
||||
}
|
||||
:host([appearance='secondary']) .control:${focusVisible} {
|
||||
outline: calc(var(--focus-border-width) * 1px) solid
|
||||
var(--button-primary-hover-background-color);
|
||||
outline-offset: calc(var(--focus-border-width) * 1px);
|
||||
outline: calc(${focusBorderWidth} * 1px) solid
|
||||
${buttonPrimaryHoverBackgroundColor};
|
||||
outline-offset: calc(${focusBorderWidth} * 1px);
|
||||
}
|
||||
:host([appearance='secondary'][disabled]) {
|
||||
background: var(--button-secondary-background-color);
|
||||
background: ${buttonSecondaryBackgroundColor};
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -142,7 +157,7 @@ const IconButtonStyles = css`
|
|||
:host([appearance='icon']) {
|
||||
background: transparent;
|
||||
border-radius: 5px;
|
||||
color: var(--button-secondary-foreground-color);
|
||||
color: ${buttonSecondaryForegroundColor};
|
||||
}
|
||||
:host([appearance='icon']:hover) {
|
||||
background: rgba(90, 93, 94, 0.31);
|
||||
|
|
@ -154,9 +169,9 @@ const IconButtonStyles = css`
|
|||
background: rgba(90, 93, 94, 0.31);
|
||||
}
|
||||
:host([appearance='icon']) .control:${focusVisible} {
|
||||
outline: calc(var(--focus-border-width) * 1px) solid
|
||||
var(--button-primary-hover-background-color);
|
||||
outline-offset: calc(var(--focus-border-width) * 1px);
|
||||
outline: calc(${focusBorderWidth} * 1px) solid
|
||||
${buttonPrimaryHoverBackgroundColor};
|
||||
outline-offset: calc(${focusBorderWidth} * 1px);
|
||||
}
|
||||
:host([appearance='icon'][disabled]) {
|
||||
background: transparent;
|
||||
|
|
@ -166,6 +181,6 @@ const IconButtonStyles = css`
|
|||
export const ButtonStyles = css`
|
||||
${BaseButtonStyles}
|
||||
${PrimaryButtonStyles}
|
||||
${SecondaryButtonStyles}
|
||||
${IconButtonStyles}
|
||||
${SecondaryButtonStyles}
|
||||
${IconButtonStyles}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
import {action} from '@storybook/addon-actions';
|
||||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {CheckboxArgs, createCheckbox} from './fixtures/createCheckbox';
|
||||
import {VSCodeCheckbox} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodeCheckbox;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Checkbox',
|
||||
|
|
|
|||
|
|
@ -5,33 +5,46 @@ import {
|
|||
focusVisible,
|
||||
} from '@microsoft/fast-foundation';
|
||||
import {heightNumber} from '../utilities/styles/size';
|
||||
import {
|
||||
borderWidth,
|
||||
checkboxBackgroundColor,
|
||||
checkboxBorderColor,
|
||||
checkboxCornerRadius,
|
||||
checkboxForegroundColor,
|
||||
designUnit,
|
||||
disabledOpacity,
|
||||
focusBorderColor,
|
||||
focusBorderWidth,
|
||||
typeRampBaseFontSize,
|
||||
typeRampBaseLineHeight,
|
||||
} from '../design-tokens';
|
||||
|
||||
export const CheckboxStyles = css`
|
||||
${display('inline-flex')} :host {
|
||||
align-items: center;
|
||||
outline: none;
|
||||
margin: calc(var(--design-unit) * 1px) 0;
|
||||
margin: calc(${designUnit} * 1px) 0;
|
||||
user-select: none;
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
line-height: ${typeRampBaseLineHeight};
|
||||
}
|
||||
.control {
|
||||
position: relative;
|
||||
width: calc((${heightNumber} / 2 + var(--design-unit)) * 1px);
|
||||
height: calc((${heightNumber} / 2 + var(--design-unit)) * 1px);
|
||||
width: calc((${heightNumber} / 2 + ${designUnit}) * 1px);
|
||||
height: calc((${heightNumber} / 2 + ${designUnit}) * 1px);
|
||||
box-sizing: border-box;
|
||||
border-radius: calc(var(--checkbox-corner-radius) * 1px);
|
||||
border: calc(var(--border-width) * 1px) solid
|
||||
var(--checkbox-border-color);
|
||||
background: var(--checkbox-background-color);
|
||||
border-radius: calc(${checkboxCornerRadius} * 1px);
|
||||
border: calc(${borderWidth} * 1px) solid
|
||||
${checkboxBorderColor};
|
||||
background: ${checkboxBackgroundColor};
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.label {
|
||||
font-family: var(--body-font);
|
||||
color: var(--checkbox-foreground-color);
|
||||
padding-inline-start: calc(var(--design-unit) * 2px + 2px);
|
||||
margin-inline-end: calc(var(--design-unit) * 2px + 2px);
|
||||
color: ${checkboxForegroundColor};
|
||||
padding-inline-start: calc(${designUnit} * 2px + 2px);
|
||||
margin-inline-end: calc(${designUnit} * 2px + 2px);
|
||||
cursor: pointer;
|
||||
}
|
||||
.label__hidden {
|
||||
|
|
@ -42,13 +55,13 @@ export const CheckboxStyles = css`
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
fill: var(--checkbox-foreground-color);
|
||||
fill: ${checkboxForegroundColor};
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.indeterminate-indicator {
|
||||
border-radius: calc(var(--checkbox-corner-radius) * 1px);
|
||||
background: var(--checkbox-foreground-color);
|
||||
border-radius: calc(${checkboxCornerRadius} * 1px);
|
||||
background: ${checkboxForegroundColor};
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
|
@ -58,16 +71,16 @@ export const CheckboxStyles = css`
|
|||
opacity: 0;
|
||||
}
|
||||
:host(:enabled) .control:hover {
|
||||
background: var(--checkbox-background-color);
|
||||
border-color: var(--checkbox-background-color);
|
||||
background: ${checkboxBackgroundColor};
|
||||
border-color: ${checkboxBackgroundColor};
|
||||
}
|
||||
:host(:enabled) .control:active {
|
||||
background: var(--checkbox-background-color);
|
||||
border-color: var(--focus-border-color);
|
||||
background: ${checkboxBackgroundColor};
|
||||
border-color: ${focusBorderColor});
|
||||
}
|
||||
:host(:${focusVisible}) .control {
|
||||
border: calc(var(--focus-border-width) * 1px) solid
|
||||
var(--focus-border-color);
|
||||
border: calc(${focusBorderWidth} * 1px) solid
|
||||
${focusBorderColor});
|
||||
}
|
||||
:host(.disabled) .label,
|
||||
:host(.readonly) .label,
|
||||
|
|
@ -80,6 +93,6 @@ export const CheckboxStyles = css`
|
|||
opacity: 1;
|
||||
}
|
||||
:host(.disabled) {
|
||||
opacity: var(--disabled-opacity);
|
||||
opacity: ${disabledOpacity};
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,25 +1,33 @@
|
|||
import {css} from '@microsoft/fast-element';
|
||||
import {focusVisible} from '@microsoft/fast-foundation';
|
||||
import {
|
||||
borderWidth,
|
||||
cornerRadius,
|
||||
designUnit,
|
||||
focusBorderWidth,
|
||||
typeRampBaseFontSize,
|
||||
typeRampBaseLineHeight,
|
||||
} from '../design-tokens';
|
||||
|
||||
export const DataGridCellStyles = css`
|
||||
:host {
|
||||
padding: calc(var(--design-unit) * 1px) calc(var(--design-unit) * 3px);
|
||||
padding: calc(${designUnit} * 1px) calc(${designUnit} * 3px);
|
||||
color: #cccccc;
|
||||
box-sizing: border-box;
|
||||
font-family: var(--body-font);
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
line-height: ${typeRampBaseLineHeight};
|
||||
font-weight: 400;
|
||||
border: solid calc(var(--border-width) * 1px) transparent;
|
||||
border: solid calc(${borderWidth} * 1px) transparent;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border-radius: calc(var(--corner-radius) * 1px);
|
||||
border-radius: calc(${cornerRadius} * 1px);
|
||||
}
|
||||
:host(.column-header) {
|
||||
font-weight: 600;
|
||||
}
|
||||
:host(:${focusVisible}) {
|
||||
border: solid calc(var(--border-width) * 1px) var(--focus-border-width);
|
||||
border: solid calc(${borderWidth} * 1px) ${focusBorderWidth};
|
||||
color: #cccccc;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {createDataGrid, DataGridArgs} from './fixtures/createDataGrid';
|
||||
import {VSCodeDataGrid} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodeDataGrid;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Data Grid',
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
import {css} from '@microsoft/fast-element';
|
||||
import {display} from '@microsoft/fast-foundation';
|
||||
|
||||
export const DesignSystemProviderStyles = css`
|
||||
${display('block')};
|
||||
`;
|
||||
|
|
@ -1,982 +0,0 @@
|
|||
import {
|
||||
defineDesignSystemProvider,
|
||||
designSystemProperty,
|
||||
DesignSystemProvider,
|
||||
DesignSystemProviderTemplate as template,
|
||||
} from '@microsoft/fast-foundation';
|
||||
import {nullableNumberConverter} from '@microsoft/fast-element';
|
||||
import {
|
||||
VSCodeDesignSystem,
|
||||
VSCodeDesignSystemDefaults,
|
||||
} from '../vscode-design-system';
|
||||
import {DesignSystemProviderStyles as styles} from './design-system-provider.styles';
|
||||
|
||||
/**
|
||||
* The VS Code DesignSystemProvider element. Extends
|
||||
* {@link https://www.fast.design/docs/api/fast-foundation.designsystemprovider/ | DesignSystemProvider} and
|
||||
* {@link https://www.fast.design/docs/api/fast-foundation.designsystemprovidertemplate/ | DesignSystemProviderTemplate}.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Element: `<vscode-design-system-provider>`
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
@defineDesignSystemProvider({
|
||||
name: 'vscode-design-system-provider',
|
||||
template,
|
||||
styles,
|
||||
})
|
||||
export class VSCodeDesignSystemProvider
|
||||
extends DesignSystemProvider
|
||||
implements VSCodeDesignSystem {
|
||||
// ------------------------ Global Design Tokens ------------------------ //
|
||||
|
||||
/**
|
||||
* The number of designUnits used for component height at the base density.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `base-height-multiplier`
|
||||
*
|
||||
* CSS Custom Property: `--base-height-multiplier`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'base-height-multiplier',
|
||||
cssCustomProperty: 'base-height-multiplier',
|
||||
converter: nullableNumberConverter,
|
||||
default: VSCodeDesignSystemDefaults.baseHeightMultiplier,
|
||||
})
|
||||
public baseHeightMultiplier: number;
|
||||
|
||||
/**
|
||||
* The number of designUnits used for horizontal spacing at the base density.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `base-horizontal-spacing-multiplier`
|
||||
*
|
||||
* CSS Custom Property: `--base-horizontal-spacing-multiplier`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'base-horizontal-spacing-multiplier',
|
||||
cssCustomProperty: 'base-horizontal-spacing-multiplier',
|
||||
converter: nullableNumberConverter,
|
||||
default: VSCodeDesignSystemDefaults.baseHorizontalSpacingMultiplier,
|
||||
})
|
||||
public baseHorizontalSpacingMultiplier: number;
|
||||
|
||||
/**
|
||||
* The width of the standard component border in pixels.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `border-width`
|
||||
*
|
||||
* CSS Custom Property: `--border-width`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'border-width',
|
||||
cssCustomProperty: 'border-width',
|
||||
converter: nullableNumberConverter,
|
||||
default: VSCodeDesignSystemDefaults.borderWidth,
|
||||
})
|
||||
public borderWidth: number;
|
||||
|
||||
/**
|
||||
* The corner radius applied to controls.
|
||||
*
|
||||
* _Exception: Checkbox corner radii are defined with the `checkboxCornerRadius` property_.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `corner-radius`
|
||||
*
|
||||
* CSS Custom Property: `--corner-radius`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'corner-radius',
|
||||
cssCustomProperty: 'corner-radius',
|
||||
converter: nullableNumberConverter,
|
||||
default: VSCodeDesignSystemDefaults.cornerRadius,
|
||||
})
|
||||
public cornerRadius: number;
|
||||
|
||||
/**
|
||||
* The density offset, used with designUnit to calculate height and spacing.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `density`
|
||||
*
|
||||
* CSS Custom Property: `--density`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'density',
|
||||
cssCustomProperty: 'density',
|
||||
converter: nullableNumberConverter,
|
||||
default: VSCodeDesignSystemDefaults.density,
|
||||
})
|
||||
public density: number;
|
||||
|
||||
/**
|
||||
* The grid-unit that UI dimensions are derived from in pixels.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `design-unit`
|
||||
*
|
||||
* CSS Custom Property: `--design-unit`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'design-unit',
|
||||
cssCustomProperty: 'design-unit',
|
||||
converter: nullableNumberConverter,
|
||||
default: VSCodeDesignSystemDefaults.designUnit,
|
||||
})
|
||||
public designUnit: number;
|
||||
|
||||
/**
|
||||
* The opacity of a disabled control.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `disabled-opacity`
|
||||
*
|
||||
* CSS Custom Property: `--disabled-opacity`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'disabled-opacity',
|
||||
cssCustomProperty: 'disabled-opacity',
|
||||
converter: nullableNumberConverter,
|
||||
default: VSCodeDesignSystemDefaults.disabledOpacity,
|
||||
})
|
||||
public disabledOpacity: number;
|
||||
|
||||
/**
|
||||
* The color of the standard focus border.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `focus-border-color`
|
||||
*
|
||||
* CSS Custom Property: `--focus-border-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'focus-border-color',
|
||||
cssCustomProperty: 'focus-border-color',
|
||||
default: VSCodeDesignSystemDefaults.focusBorderColor,
|
||||
})
|
||||
public focusBorderColor: string;
|
||||
|
||||
/**
|
||||
* The width of the standard focus border in pixels.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `focus-border-width`
|
||||
*
|
||||
* CSS Custom Property: `--focus-border-width`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'focus-border-width',
|
||||
cssCustomProperty: 'focus-border-width',
|
||||
converter: nullableNumberConverter,
|
||||
default: VSCodeDesignSystemDefaults.focusBorderWidth,
|
||||
})
|
||||
public focusBorderWidth: number;
|
||||
|
||||
// ------------------------ Type Ramp Design Tokens ------------------------ //
|
||||
|
||||
/**
|
||||
* The font-size two steps below the base font-size.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `type-ramp-minus-2-font-size`
|
||||
*
|
||||
* CSS Custom Property: `--type-ramp-minus-2-font-size`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'type-ramp-minus-2-font-size',
|
||||
cssCustomProperty: 'type-ramp-minus-2-font-size',
|
||||
default: VSCodeDesignSystemDefaults.typeRampMinus2FontSize,
|
||||
})
|
||||
public typeRampMinus2FontSize: string;
|
||||
|
||||
/**
|
||||
* The line-height two steps below the base line-height.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `type-ramp-minus-2-line-height`
|
||||
*
|
||||
* CSS Custom Property: `--type-ramp-minus-2-line-height`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'type-ramp-minus-2-line-height',
|
||||
cssCustomProperty: 'type-ramp-minus-2-line-height',
|
||||
default: VSCodeDesignSystemDefaults.typeRampMinus2LineHeight,
|
||||
})
|
||||
public typeRampMinus2LineHeight: string;
|
||||
|
||||
/**
|
||||
* The font-size one step below the base font-size.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `type-ramp-minus-1-font-size`
|
||||
*
|
||||
* CSS Custom Property: `--type-ramp-minus-1-font-size`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'type-ramp-minus-1-font-size',
|
||||
cssCustomProperty: 'type-ramp-minus-1-font-size',
|
||||
default: VSCodeDesignSystemDefaults.typeRampMinus1FontSize,
|
||||
})
|
||||
public typeRampMinus1FontSize: string;
|
||||
|
||||
/**
|
||||
* The line-height one step below the base line-height.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `type-ramp-minus-1-line-height`
|
||||
*
|
||||
* CSS Custom Property: `--type-ramp-minus-1-line-height`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'type-ramp-minus-1-line-height',
|
||||
cssCustomProperty: 'type-ramp-minus-1-line-height',
|
||||
default: VSCodeDesignSystemDefaults.typeRampMinus1LineHeight,
|
||||
})
|
||||
public typeRampMinus1LineHeight: string;
|
||||
|
||||
/**
|
||||
* The base font-size of the relative type-ramp scale.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `type-ramp-base-font-size`
|
||||
*
|
||||
* CSS Custom Property: `--type-ramp-base-font-size`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'type-ramp-base-font-size',
|
||||
cssCustomProperty: 'type-ramp-base-font-size',
|
||||
default: VSCodeDesignSystemDefaults.typeRampBaseFontSize,
|
||||
})
|
||||
public typeRampBaseFontSize: string;
|
||||
|
||||
/**
|
||||
* The base line-height of the relative type-ramp scale.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `type-ramp-base-line-height`
|
||||
*
|
||||
* CSS Custom Property: `--type-ramp-base-line-height`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'type-ramp-base-line-height',
|
||||
cssCustomProperty: 'type-ramp-base-line-height',
|
||||
default: VSCodeDesignSystemDefaults.typeRampBaseLineHeight,
|
||||
})
|
||||
public typeRampBaseLineHeight: string;
|
||||
|
||||
/**
|
||||
* The font-size one step above the base font-size.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `type-ramp-plus-1-font-size`
|
||||
*
|
||||
* CSS Custom Property: `--type-ramp-plus-1-font-size`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'type-ramp-plus-1-font-size',
|
||||
cssCustomProperty: 'type-ramp-plus-1-font-size',
|
||||
default: VSCodeDesignSystemDefaults.typeRampPlus1FontSize,
|
||||
})
|
||||
public typeRampPlus1FontSize: string;
|
||||
|
||||
/**
|
||||
* The line-height one step above the base line-height.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `type-ramp-plus-1-line-height`
|
||||
*
|
||||
* CSS Custom Property: `--type-ramp-plus-1-line-height`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'type-ramp-plus-1-line-height',
|
||||
cssCustomProperty: 'type-ramp-plus-1-line-height',
|
||||
default: VSCodeDesignSystemDefaults.typeRampPlus1LineHeight,
|
||||
})
|
||||
public typeRampPlus1LineHeight: string;
|
||||
|
||||
/**
|
||||
* The font-size two steps above the base font-size.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `type-ramp-plus-2-font-size`
|
||||
*
|
||||
* CSS Custom Property: `--type-ramp-plus-2-font-size`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'type-ramp-plus-2-font-size',
|
||||
cssCustomProperty: 'type-ramp-plus-2-font-size',
|
||||
default: VSCodeDesignSystemDefaults.typeRampPlus2FontSize,
|
||||
})
|
||||
public typeRampPlus2FontSize: string;
|
||||
|
||||
/**
|
||||
* The line-height two steps above the base line-height.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `type-ramp-plus-2-line-height`
|
||||
*
|
||||
* CSS Custom Property: `--type-ramp-plus-2-line-height`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'type-ramp-plus-2-line-height',
|
||||
cssCustomProperty: 'type-ramp-plus-2-line-height',
|
||||
default: VSCodeDesignSystemDefaults.typeRampPlus2LineHeight,
|
||||
})
|
||||
public typeRampPlus2LineHeight: string;
|
||||
|
||||
/**
|
||||
* The font-size three steps above the base font-size.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `type-ramp-plus-3-font-size`
|
||||
*
|
||||
* CSS Custom Property: `--type-ramp-plus-3-font-size`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'type-ramp-plus-3-font-size',
|
||||
cssCustomProperty: 'type-ramp-plus-3-font-size',
|
||||
default: VSCodeDesignSystemDefaults.typeRampPlus3FontSize,
|
||||
})
|
||||
public typeRampPlus3FontSize: string;
|
||||
|
||||
/**
|
||||
* The line-height three steps above the base line-height.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `type-ramp-plus-3-line-height`
|
||||
*
|
||||
* CSS Custom Property: `--type-ramp-plus-3-line-height`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'type-ramp-plus-3-line-height',
|
||||
cssCustomProperty: 'type-ramp-plus-3-line-height',
|
||||
default: VSCodeDesignSystemDefaults.typeRampPlus3LineHeight,
|
||||
})
|
||||
public typeRampPlus3LineHeight: string;
|
||||
|
||||
/**
|
||||
* The font-size four steps above the base font-size.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `type-ramp-plus-4-font-size`
|
||||
*
|
||||
* CSS Custom Property: `--type-ramp-plus-4-font-size`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'type-ramp-plus-4-font-size',
|
||||
cssCustomProperty: 'type-ramp-plus-4-font-size',
|
||||
default: VSCodeDesignSystemDefaults.typeRampPlus4FontSize,
|
||||
})
|
||||
public typeRampPlus4FontSize: string;
|
||||
|
||||
/**
|
||||
* The line-height four steps above the base line-height.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `type-ramp-plus-4-line-height`
|
||||
*
|
||||
* CSS Custom Property: `--type-ramp-plus-4-line-height`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'type-ramp-plus-4-line-height',
|
||||
cssCustomProperty: 'type-ramp-plus-4-line-height',
|
||||
default: VSCodeDesignSystemDefaults.typeRampPlus4LineHeight,
|
||||
})
|
||||
public typeRampPlus4LineHeight: string;
|
||||
|
||||
/**
|
||||
* The font-size five steps above the base font-size.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `type-ramp-plus-5-font-size`
|
||||
*
|
||||
* CSS Custom Property: `--type-ramp-plus-5-font-size`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'type-ramp-plus-5-font-size',
|
||||
cssCustomProperty: 'type-ramp-plus-5-font-size',
|
||||
default: VSCodeDesignSystemDefaults.typeRampPlus5FontSize,
|
||||
})
|
||||
public typeRampPlus5FontSize: string;
|
||||
|
||||
/**
|
||||
* The line-height five steps above the base line-height.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `type-ramp-plus-5-line-height`
|
||||
*
|
||||
* CSS Custom Property: `--type-ramp-plus-5-line-height`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'type-ramp-plus-5-line-height',
|
||||
cssCustomProperty: 'type-ramp-plus-5-line-height',
|
||||
default: VSCodeDesignSystemDefaults.typeRampPlus5LineHeight,
|
||||
})
|
||||
public typeRampPlus5LineHeight: string;
|
||||
|
||||
/**
|
||||
* The font-size six steps above the base font-size.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `type-ramp-plus-6-font-size`
|
||||
*
|
||||
* CSS Custom Property: `--type-ramp-plus-6-font-size`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'type-ramp-plus-6-font-size',
|
||||
cssCustomProperty: 'type-ramp-plus-6-font-size',
|
||||
default: VSCodeDesignSystemDefaults.typeRampPlus6FontSize,
|
||||
})
|
||||
public typeRampPlus6FontSize: string;
|
||||
|
||||
/**
|
||||
* The line-height six steps above the base line-height.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `type-ramp-plus-6-line-height`
|
||||
*
|
||||
* CSS Custom Property: `--type-ramp-plus-6-line-height`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'type-ramp-plus-6-line-height',
|
||||
cssCustomProperty: 'type-ramp-plus-6-line-height',
|
||||
default: VSCodeDesignSystemDefaults.typeRampPlus6LineHeight,
|
||||
})
|
||||
public typeRampPlus6LineHeight: string;
|
||||
|
||||
// ------------------------ Button Design Tokens ------------------------ //
|
||||
|
||||
/**
|
||||
* The primary background color of a VS Code button component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `button-primary-background-color`
|
||||
*
|
||||
* CSS Custom Property: `--button-primary-background-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'button-primary-background-color',
|
||||
cssCustomProperty: 'button-primary-background-color',
|
||||
default: VSCodeDesignSystemDefaults.buttonPrimaryBackgroundColor,
|
||||
})
|
||||
public buttonPrimaryBackgroundColor: string;
|
||||
|
||||
/**
|
||||
* The primary foreground color of a VS Code button component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `button-primary-foreground-color`
|
||||
*
|
||||
* CSS Custom Property: `--button-primary-foreground-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'button-primary-foreground-color',
|
||||
cssCustomProperty: 'button-primary-foreground-color',
|
||||
default: VSCodeDesignSystemDefaults.buttonPrimaryForegroundColor,
|
||||
})
|
||||
public buttonPrimaryForegroundColor: string;
|
||||
|
||||
/**
|
||||
* The primary hover background color of a VS Code button component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `button-primary-hover-background-color`
|
||||
*
|
||||
* CSS Custom Property: `--button-primary-hover-background-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'button-primary-hover-background-color',
|
||||
cssCustomProperty: 'button-primary-hover-background-color',
|
||||
default: VSCodeDesignSystemDefaults.buttonPrimaryHoverBackgroundColor,
|
||||
})
|
||||
public buttonPrimaryHoverBackgroundColor: string;
|
||||
|
||||
/**
|
||||
* The secondary background color of a VS Code button component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `button-secondary-background-color`
|
||||
*
|
||||
* CSS Custom Property: `--button-secondary-background-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'button-secondary-background-color',
|
||||
cssCustomProperty: 'button-secondary-background-color',
|
||||
default: VSCodeDesignSystemDefaults.buttonSecondaryBackgroundColor,
|
||||
})
|
||||
public buttonSecondaryBackgroundColor: string;
|
||||
|
||||
/**
|
||||
* The secondary foreground color of a VS Code button component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `button-secondary-foreground-color`
|
||||
*
|
||||
* CSS Custom Property: `--button-secondary-foreground-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'button-secondary-foreground-color',
|
||||
cssCustomProperty: 'button-secondary-foreground-color',
|
||||
default: VSCodeDesignSystemDefaults.buttonSecondaryForegroundColor,
|
||||
})
|
||||
public buttonSecondaryForegroundColor: string;
|
||||
|
||||
/**
|
||||
* The secondary hover background color of a VS Code button component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `button-secondary-hover-background-color`
|
||||
*
|
||||
* CSS Custom Property: `--button-secondary-hover-background-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'button-secondary-hover-background-color',
|
||||
cssCustomProperty: 'button-secondary-hover-background-color',
|
||||
default: VSCodeDesignSystemDefaults.buttonSecondaryHoverBackgroundColor,
|
||||
})
|
||||
public buttonSecondaryHoverBackgroundColor: string;
|
||||
|
||||
/**
|
||||
* The install background color of a VS Code button component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `button-install-background-color`
|
||||
*
|
||||
* CSS Custom Property: `--button-install-background-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'button-install-background-color',
|
||||
cssCustomProperty: 'button-install-background-color',
|
||||
default: VSCodeDesignSystemDefaults.buttonInstallBackgroundColor,
|
||||
})
|
||||
public buttonInstallBackgroundColor: string;
|
||||
|
||||
/**
|
||||
* The install foreground color of a VS Code button component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `button-install-foreground-color`
|
||||
*
|
||||
* CSS Custom Property: `--button-install-foreground-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'button-install-foreground-color',
|
||||
cssCustomProperty: 'button-install-foreground-color',
|
||||
default: VSCodeDesignSystemDefaults.buttonInstallForegroundColor,
|
||||
})
|
||||
public buttonInstallForegroundColor: string;
|
||||
|
||||
/**
|
||||
* The install hover background color of a VS Code button component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `button-install-hover-background-color`
|
||||
*
|
||||
* CSS Custom Property: `--button-install-hover-background-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'button-install-hover-background-color',
|
||||
cssCustomProperty: 'button-install-hover-background-color',
|
||||
default: VSCodeDesignSystemDefaults.buttonInstallHoverBackgroundColor,
|
||||
})
|
||||
public buttonInstallHoverBackgroundColor: string;
|
||||
|
||||
// ------------------------ Text Link Design Tokens ------------------------ //
|
||||
|
||||
/**
|
||||
* The foreground color of a text link.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `text-link-foreground-color`
|
||||
*
|
||||
* CSS Custom Property: `--text-link-foreground-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'text-link-foreground-color',
|
||||
cssCustomProperty: 'text-link-foreground-color',
|
||||
default: VSCodeDesignSystemDefaults.textLinkForegroundColor,
|
||||
})
|
||||
public textLinkForegroundColor: string;
|
||||
|
||||
// ------------------------ Checkbox Design Tokens ------------------------ //
|
||||
|
||||
/**
|
||||
* The background color of a VS Code checkbox component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `checkbox-background-color`
|
||||
*
|
||||
* CSS Custom Property: `--checkbox-background-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'checkbox-background-color',
|
||||
cssCustomProperty: 'checkbox-background-color',
|
||||
default: VSCodeDesignSystemDefaults.checkboxBackgroundColor,
|
||||
})
|
||||
public checkboxBackgroundColor: string;
|
||||
|
||||
/**
|
||||
* The foreground color of a VS Code checkbox component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `checkbox-foreground-color`
|
||||
*
|
||||
* CSS Custom Property: `--checkbox-foreground-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'checkbox-foreground-color',
|
||||
cssCustomProperty: 'checkbox-foreground-color',
|
||||
default: VSCodeDesignSystemDefaults.checkboxForegroundColor,
|
||||
})
|
||||
public checkboxForegroundColor: string;
|
||||
|
||||
/**
|
||||
* The border color of a VS Code checkbox component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `checkbox-border-color`
|
||||
*
|
||||
* CSS Custom Property: `--checkbox-border-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'checkbox-border-color',
|
||||
cssCustomProperty: 'checkbox-border-color',
|
||||
default: VSCodeDesignSystemDefaults.checkboxBorderColor,
|
||||
})
|
||||
public checkboxBorderColor: string;
|
||||
|
||||
/**
|
||||
* The corner radius applied to checkbox controls.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `checkbox-corner-radius`
|
||||
*
|
||||
* CSS Custom Property: `--checkbox-corner-radius`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'checkbox-corner-radius',
|
||||
cssCustomProperty: 'checkbox-corner-radius',
|
||||
converter: nullableNumberConverter,
|
||||
default: VSCodeDesignSystemDefaults.checkboxCornerRadius,
|
||||
})
|
||||
public checkboxCornerRadius: number;
|
||||
|
||||
// ------------------------ Breadcrumb Item Design Tokens ------------------------ //
|
||||
|
||||
/**
|
||||
* The background color of a VS Code breadcrumb item component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `breadcrumb-item-background-color`
|
||||
*
|
||||
* CSS Custom Property: `--breadcrumb-item-background-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'breadcrumb-item-background-color',
|
||||
cssCustomProperty: 'breadcrumb-item-background-color',
|
||||
default: VSCodeDesignSystemDefaults.breadcrumbItemBackgroundColor,
|
||||
})
|
||||
public breadcrumbItemBackgroundColor: string;
|
||||
|
||||
/**
|
||||
* The foreground color of a VS Code breadcrumb item component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `breadcrumb-item-foreground-color`
|
||||
*
|
||||
* CSS Custom Property: `--breadcrumb-item-foreground-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'breadcrumb-item-foreground-color',
|
||||
cssCustomProperty: 'breadcrumb-item-foreground-color',
|
||||
default: VSCodeDesignSystemDefaults.breadcrumbItemForegroundColor,
|
||||
})
|
||||
public breadcrumbItemForegroundColor: string;
|
||||
|
||||
/**
|
||||
* The foreground hover color of a VS Code breadcrumb item component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `breadcrumb-item-foreground-hover-color`
|
||||
*
|
||||
* CSS Custom Property: `--breadcrumb-item-foreground-hover-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'breadcrumb-item-foreground-hover-color',
|
||||
cssCustomProperty: 'breadcrumb-item-foreground-hover-color',
|
||||
default: VSCodeDesignSystemDefaults.breadcrumbItemForegroundHoverColor,
|
||||
})
|
||||
public breadcrumbItemForegroundHoverColor: string;
|
||||
|
||||
// ------------------------ Dropdown Design Tokens ------------------------ //
|
||||
|
||||
/**
|
||||
* The background color of a VS Code dropdown component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `dropdown-background-color`
|
||||
*
|
||||
* CSS Custom Property: `--dropdown-background-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'dropdown-background-color',
|
||||
cssCustomProperty: 'dropdown-background-color',
|
||||
default: VSCodeDesignSystemDefaults.dropdownBackgroundColor,
|
||||
})
|
||||
public dropdownBackgroundColor: string;
|
||||
|
||||
/**
|
||||
* The foreground color of a VS Code dropdown component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `dropdown-foreground-color`
|
||||
*
|
||||
* CSS Custom Property: `--dropdown-foreground-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'dropdown-foreground-color',
|
||||
cssCustomProperty: 'dropdown-foreground-color',
|
||||
default: VSCodeDesignSystemDefaults.dropdownForegroundColor,
|
||||
})
|
||||
public dropdownForegroundColor: string;
|
||||
|
||||
/**
|
||||
* The border color of a VS Code dropdown component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `dropdown-border-color`
|
||||
*
|
||||
* CSS Custom Property: `--dropdown-border-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'dropdown-border-color',
|
||||
cssCustomProperty: 'dropdown-border-color',
|
||||
default: VSCodeDesignSystemDefaults.dropdownBorderColor,
|
||||
})
|
||||
public dropdownBorderColor: string;
|
||||
|
||||
/**
|
||||
* The corner radius applied to dropdown controls.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `dropdown-corner-radius-color`
|
||||
*
|
||||
* CSS Custom Property: `--dropdown-corner-radius-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'dropdown-corner-radius-color',
|
||||
cssCustomProperty: 'dropdown-corner-radius-color',
|
||||
converter: nullableNumberConverter,
|
||||
default: VSCodeDesignSystemDefaults.dropdownCornerRadius,
|
||||
})
|
||||
public dropdownCornerRadius: number;
|
||||
|
||||
// ------------------------ Option Design Tokens ------------------------ //
|
||||
|
||||
/**
|
||||
* The background focus color of a VS Code option component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `option-background-focus-color`
|
||||
*
|
||||
* CSS Custom Property: `--option-background-focus-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'option-background-focus-color',
|
||||
cssCustomProperty: 'option-background-focus-color',
|
||||
default: VSCodeDesignSystemDefaults.optionBackgroundFocusColor,
|
||||
})
|
||||
public optionBackgroundFocusColor: string;
|
||||
|
||||
// ------------------------ Badge Design Tokens ------------------------ //
|
||||
|
||||
/**
|
||||
* The background color of a VS Code badge component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `badge-background-color`
|
||||
*
|
||||
* CSS Custom Property: `--badge-background-radius-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'badge-background-color',
|
||||
cssCustomProperty: 'badge-background-color',
|
||||
default: VSCodeDesignSystemDefaults.badgeBackgroundColor,
|
||||
})
|
||||
public badgeBackgroundColor: string;
|
||||
|
||||
/**
|
||||
* The foreground color of a VS Code badge component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `badge-foreground-color`
|
||||
*
|
||||
* CSS Custom Property: `--badge-foreground-radius-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'badge-foreground-color',
|
||||
cssCustomProperty: 'badge-foreground-color',
|
||||
default: VSCodeDesignSystemDefaults.badgeForegroundColor,
|
||||
})
|
||||
public badgeForegroundColor: string;
|
||||
|
||||
// ------------------------ Text Field & Area Design Tokens ------------------------ //
|
||||
|
||||
/**
|
||||
* The background color of a VS Code text field and area components.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `input-background-color`
|
||||
*
|
||||
* CSS Custom Property: `--input-background-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'input-background-color',
|
||||
cssCustomProperty: 'input-background-color',
|
||||
default: VSCodeDesignSystemDefaults.inputBackgroundColor,
|
||||
})
|
||||
public inputBackgroundColor: string;
|
||||
|
||||
/**
|
||||
* The foreground color of a VS Code text field and area components.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `input-foreground-color`
|
||||
*
|
||||
* CSS Custom Property: `--input-foreground-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'input-foreground-color',
|
||||
cssCustomProperty: 'input-foreground-color',
|
||||
default: VSCodeDesignSystemDefaults.inputForegroundColor,
|
||||
})
|
||||
public inputForegroundColor: string;
|
||||
|
||||
/**
|
||||
* The placeholder foreground color of a VS Code text field and area components.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `input-placeholder-foreground-color`
|
||||
*
|
||||
* CSS Custom Property: `--input-placeholder-foreground-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'input-placeholder-foreground-color',
|
||||
cssCustomProperty: 'input-placeholder-foreground-color',
|
||||
default: VSCodeDesignSystemDefaults.inputPlaceholderForegroundColor,
|
||||
})
|
||||
public inputPlaceholderForegroundColor: string;
|
||||
|
||||
/**
|
||||
* The border color of a VS Code text field and area components.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `input-border-color`
|
||||
*
|
||||
* CSS Custom Property: `--input-border-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'input-border-color',
|
||||
cssCustomProperty: 'input-border-color',
|
||||
default: VSCodeDesignSystemDefaults.inputBorderColor,
|
||||
})
|
||||
public inputBorderColor: string;
|
||||
|
||||
// ------------------------ Progress Bar & Ring Design Tokens ------------------------ //
|
||||
|
||||
/**
|
||||
* The background color of a VS Code progress bar and ring components.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `progress-background-color`
|
||||
*
|
||||
* CSS Custom Property: `--progress-background-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'progress-background-color',
|
||||
cssCustomProperty: 'progress-background-color',
|
||||
default: VSCodeDesignSystemDefaults.progressBackgroundColor,
|
||||
})
|
||||
public progressBackgroundColor: string;
|
||||
|
||||
// ------------------------ Tabs Design Tokens ------------------------ //
|
||||
|
||||
/**
|
||||
* The background color of a VS Code tab panel component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `tab-panel-background-color`
|
||||
*
|
||||
* CSS Custom Property: `--tab-panel-background-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'tab-panel-background-color',
|
||||
cssCustomProperty: 'tab-panel-background-color',
|
||||
default: VSCodeDesignSystemDefaults.tabPanelBackgroundColor,
|
||||
})
|
||||
public tabPanelBackgroundColor: string;
|
||||
|
||||
/**
|
||||
* The border color of a VS Code tab panel component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `tab-panel-border-color`
|
||||
*
|
||||
* CSS Custom Property: `--tab-panel-border-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'tab-panel-border-color',
|
||||
cssCustomProperty: 'tab-panel-border-color',
|
||||
default: VSCodeDesignSystemDefaults.tabPanelBorderColor,
|
||||
})
|
||||
public tabPanelBorderColor: string;
|
||||
|
||||
/**
|
||||
* The foreground color of a VS Code tab component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `tab-foreground-color`
|
||||
*
|
||||
* CSS Custom Property: `--tab-foreground-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'tab-foreground-color',
|
||||
cssCustomProperty: 'tab-foreground-color',
|
||||
default: VSCodeDesignSystemDefaults.tabForegroundColor,
|
||||
})
|
||||
public tabForegroundColor: string;
|
||||
|
||||
/**
|
||||
* The active foreground color of a VS Code tab component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `tab-active-foreground-color`
|
||||
*
|
||||
* CSS Custom Property: `--tab-active-foreground-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'tab-active-foreground-color',
|
||||
cssCustomProperty: 'tab-active-foreground-color',
|
||||
default: VSCodeDesignSystemDefaults.tabActiveForegroundColor,
|
||||
})
|
||||
public tabActiveForegroundColor: string;
|
||||
|
||||
/**
|
||||
* The active border color of a VS Code tab component.
|
||||
*
|
||||
* @remarks
|
||||
* HTML Attribute: `tab-active-border-color`
|
||||
*
|
||||
* CSS Custom Property: `--tab-active-border-color`
|
||||
*/
|
||||
@designSystemProperty({
|
||||
attribute: 'tab-active-border-color',
|
||||
cssCustomProperty: 'tab-active-border-color',
|
||||
default: VSCodeDesignSystemDefaults.tabActiveBorderColor,
|
||||
})
|
||||
public tabActiveBorderColor: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,217 @@
|
|||
import {DesignToken} from '@microsoft/fast-foundation';
|
||||
|
||||
const {create} = DesignToken;
|
||||
|
||||
/**
|
||||
* Global design tokens.
|
||||
*/
|
||||
export const baseHeightMultiplier = create<number>(
|
||||
'base-height-multiplier'
|
||||
).withDefault(7);
|
||||
export const baseHorizontalSpacingMultiplier = create<number>(
|
||||
'base-horizontal-spacing-multiplier'
|
||||
).withDefault(3);
|
||||
export const borderWidth = create<number>('border-width').withDefault(1);
|
||||
export const cornerRadius = create<number>('corner-radius').withDefault(0);
|
||||
export const density = create<number>('density').withDefault(0);
|
||||
export const designUnit = create<number>('design-unit').withDefault(4);
|
||||
export const disabledOpacity = create<number>('disabled-opacity').withDefault(
|
||||
0.4
|
||||
);
|
||||
export const focusBorderColor = create<string>(
|
||||
'focus-border-color'
|
||||
).withDefault('#007fd4');
|
||||
export const focusBorderWidth = create<number>(
|
||||
'focus-border-width'
|
||||
).withDefault(1);
|
||||
|
||||
/**
|
||||
* Type-ramp font-size and line-height design tokens.
|
||||
*/
|
||||
export const typeRampBaseFontSize = create<string>(
|
||||
'type-ramp-base-font-size'
|
||||
).withDefault('13px');
|
||||
export const typeRampBaseLineHeight = create<string>(
|
||||
'type-ramp-base-line-height'
|
||||
).withDefault('normal');
|
||||
export const typeRampMinus1FontSize = create<string>(
|
||||
'type-ramp-minus1-font-size'
|
||||
).withDefault('11px');
|
||||
export const typeRampMinus1LineHeight = create<string>(
|
||||
'type-ramp-minus1-line-height'
|
||||
).withDefault('16px');
|
||||
export const typeRampMinus2FontSize = create<string>(
|
||||
'type-ramp-minus2-font-size'
|
||||
).withDefault('9px');
|
||||
export const typeRampMinus2LineHeight = create<string>(
|
||||
'type-ramp-minus2-line-height'
|
||||
).withDefault('16px');
|
||||
export const typeRampPlus1FontSize = create<string>(
|
||||
'type-ramp-plus1-font-size'
|
||||
).withDefault('16px');
|
||||
export const typeRampPlus1LineHeight = create<string>(
|
||||
'type-ramp-plus1-line-height'
|
||||
).withDefault('24px');
|
||||
export const typeRampPlus2FontSize = create<string>(
|
||||
'type-ramp-plus2-font-size'
|
||||
).withDefault('20px');
|
||||
export const typeRampPlus2LineHeight = create<string>(
|
||||
'type-ramp-plus2-line-height'
|
||||
).withDefault('28px');
|
||||
export const typeRampPlus3FontSize = create<string>(
|
||||
'type-ramp-plus3-font-size'
|
||||
).withDefault('28px');
|
||||
export const typeRampPlus3LineHeight = create<string>(
|
||||
'type-ramp-plus3-line-height'
|
||||
).withDefault('36px');
|
||||
export const typeRampPlus4FontSize = create<string>(
|
||||
'type-ramp-plus4-font-size'
|
||||
).withDefault('34px');
|
||||
export const typeRampPlus4LineHeight = create<string>(
|
||||
'type-ramp-plus4-line-height'
|
||||
).withDefault('44px');
|
||||
export const typeRampPlus5FontSize = create<string>(
|
||||
'type-ramp-plus5-font-size'
|
||||
).withDefault('46px');
|
||||
export const typeRampPlus5LineHeight = create<string>(
|
||||
'type-ramp-plus5-line-height'
|
||||
).withDefault('56px');
|
||||
export const typeRampPlus6FontSize = create<string>(
|
||||
'type-ramp-plus6-font-size'
|
||||
).withDefault('60px');
|
||||
export const typeRampPlus6LineHeight = create<string>(
|
||||
'type-ramp-plus6-line-height'
|
||||
).withDefault('72px');
|
||||
|
||||
/**
|
||||
* Button design tokens.
|
||||
*/
|
||||
export const buttonPrimaryBackgroundColor = create<string>(
|
||||
'button-primary-background-color'
|
||||
).withDefault('#0e639c');
|
||||
export const buttonPrimaryForegroundColor = create<string>(
|
||||
'button-primary-foreground-color'
|
||||
).withDefault('#ffffff');
|
||||
export const buttonPrimaryHoverBackgroundColor = create<string>(
|
||||
'button-primary-hover-background-color'
|
||||
).withDefault('#1177bb');
|
||||
export const buttonSecondaryBackgroundColor = create<string>(
|
||||
'button-secondary-background-color'
|
||||
).withDefault('#3a3d41');
|
||||
export const buttonSecondaryForegroundColor = create<string>(
|
||||
'button-secondary-foreground-color'
|
||||
).withDefault('#ffffff');
|
||||
export const buttonSecondaryHoverBackgroundColor = create<string>(
|
||||
'button-secondary-hover-background-color'
|
||||
).withDefault('#45494e');
|
||||
|
||||
/**
|
||||
* Text link design tokens.
|
||||
*/
|
||||
export const textLinkForegroundColor = create<string>(
|
||||
'text-link-foreground-color'
|
||||
).withDefault('#3794ff');
|
||||
|
||||
/**
|
||||
* Checkbox design tokens.
|
||||
*/
|
||||
export const checkboxBackgroundColor = create<string>(
|
||||
'checkbox-background-color'
|
||||
).withDefault('#3c3c3c');
|
||||
export const checkboxForegroundColor = create<string>(
|
||||
'checkbox-foreground-color'
|
||||
).withDefault('#f0f0f0');
|
||||
export const checkboxBorderColor = create<string>(
|
||||
'checkbox-border-color'
|
||||
).withDefault('#3c3c3c');
|
||||
export const checkboxCornerRadius = create<number>(
|
||||
'checkbox-corner-radius'
|
||||
).withDefault(3);
|
||||
|
||||
/**
|
||||
* Breadcrumb Item design tokens.
|
||||
*/
|
||||
export const breadcrumbItemBackgroundColor = create<string>(
|
||||
'breadcrumb-item-background-color'
|
||||
).withDefault('#1e1e1e');
|
||||
export const breadcrumbItemForegroundColor = create<string>(
|
||||
'breadcrumb-item-foreground-color'
|
||||
).withDefault('#cccccccc');
|
||||
export const breadcrumbItemForegroundHoverColor = create<string>(
|
||||
'breadcrumb-item-foreground-hover-color'
|
||||
).withDefault('#e0e0e0');
|
||||
|
||||
/**
|
||||
* Dropdown design tokens.
|
||||
*/
|
||||
export const dropdownBackgroundColor = create<string>(
|
||||
'dropdown-background-color'
|
||||
).withDefault('#3c3c3c');
|
||||
export const dropdownForegroundColor = create<string>(
|
||||
'dropdown-foreground-color'
|
||||
).withDefault('#f0f0f0');
|
||||
export const dropdownBorderColor = create<string>(
|
||||
'dropdown-border-color'
|
||||
).withDefault('#3c3c3c');
|
||||
export const dropdownCornerRadius = create<number>(
|
||||
'dropdown-corner-radius'
|
||||
).withDefault(5);
|
||||
|
||||
/**
|
||||
* Option design tokens.
|
||||
*/
|
||||
export const optionBackgroundFocusColor = create<string>(
|
||||
'option-background-focus-color'
|
||||
).withDefault('#062f4a');
|
||||
|
||||
/**
|
||||
* Badge design tokens.
|
||||
*/
|
||||
export const badgeBackgroundColor = create<string>(
|
||||
'badge-background-color'
|
||||
).withDefault('#4d4d4d');
|
||||
export const badgeForegroundColor = create<string>(
|
||||
'badge-foreground-color'
|
||||
).withDefault('#ffffff');
|
||||
|
||||
/**
|
||||
* Text Field & Area design tokens.
|
||||
*/
|
||||
export const inputBackgroundColor = create<string>(
|
||||
'input-background-color'
|
||||
).withDefault('#3c3c3c');
|
||||
export const inputForegroundColor = create<string>(
|
||||
'input-foreground-color'
|
||||
).withDefault('#cccccc');
|
||||
export const inputPlaceholderForegroundColor = create<string>(
|
||||
'input-placeholder-foreground-color'
|
||||
).withDefault('#cccccc');
|
||||
export const inputBorderColor = create<string>(
|
||||
'input-border-color'
|
||||
).withDefault('#3c3c3c');
|
||||
|
||||
/**
|
||||
* Progress Bar & Ring design tokens.
|
||||
*/
|
||||
export const progressBackgroundColor = create<string>(
|
||||
'progress-background-color'
|
||||
).withDefault('#0e70c0');
|
||||
|
||||
/**
|
||||
* Panels design tokens.
|
||||
*/
|
||||
export const panelViewBackgroundColor = create<string>(
|
||||
'panel-view-background-color'
|
||||
).withDefault('#1e1e1e');
|
||||
export const panelViewBorderColor = create<string>(
|
||||
'panel-view-border-color'
|
||||
).withDefault('#80808059');
|
||||
export const panelTabForegroundColor = create<string>(
|
||||
'panel-tab-foreground-color'
|
||||
).withDefault('#e7e7e799');
|
||||
export const panelTabActiveForegroundColor = create<string>(
|
||||
'panel-tab-active-foreground-color'
|
||||
).withDefault('#e7e7e7');
|
||||
export const panelTabActiveBorderColor = create<string>(
|
||||
'panel-tab-active-border-color'
|
||||
).withDefault('#e7e7e7');
|
||||
|
|
@ -1,10 +1,4 @@
|
|||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {createDivider, DividerArgs} from './fixtures/createDivider';
|
||||
import {VSCodeDivider} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodeDivider;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Divider',
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import {css} from '@microsoft/fast-element';
|
||||
import {display} from '@microsoft/fast-foundation';
|
||||
import {borderWidth, designUnit} from '../design-tokens';
|
||||
|
||||
export const DividerStyles = css`
|
||||
${display('block')} :host {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
margin: calc(var(--design-unit) * 1px) 0;
|
||||
margin: calc(${designUnit} * 1px) 0;
|
||||
border: none;
|
||||
border-top: solid calc(var(--border-width) * 1px) #454545;
|
||||
border-top: solid calc(${borderWidth} * 1px) #454545;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
import {action} from '@storybook/addon-actions';
|
||||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {createDropdown, DropdownArgs} from './fixtures/createDropdown';
|
||||
import {VSCodeDropdown} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodeDropdown;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Dropdown',
|
||||
|
|
|
|||
|
|
@ -5,15 +5,27 @@ import {
|
|||
focusVisible,
|
||||
} from '@microsoft/fast-foundation';
|
||||
import {heightNumber} from '../utilities/styles/size';
|
||||
import {
|
||||
borderWidth,
|
||||
designUnit,
|
||||
disabledOpacity,
|
||||
dropdownBackgroundColor,
|
||||
dropdownBorderColor,
|
||||
dropdownCornerRadius,
|
||||
dropdownForegroundColor,
|
||||
focusBorderColor,
|
||||
focusBorderWidth,
|
||||
typeRampBaseFontSize,
|
||||
typeRampBaseLineHeight,
|
||||
} from '../design-tokens';
|
||||
|
||||
export const DropdownStyles = css`
|
||||
${display('inline-flex')} :host {
|
||||
background: var(--dropdown-background-color);
|
||||
border-radius: calc(var(--dropdown-corner-radius-color) * 1px);
|
||||
border: calc(var(--border-width) * 1px) solid
|
||||
var(--dropdown-border-color);
|
||||
background: ${dropdownBackgroundColor};
|
||||
border-radius: calc(${dropdownCornerRadius} * 1px);
|
||||
border: calc(${borderWidth} * 1px) solid ${dropdownBorderColor};
|
||||
box-sizing: border-box;
|
||||
color: var(--dropdown-foreground-color);
|
||||
color: ${dropdownForegroundColor};
|
||||
contain: contents;
|
||||
height: calc(${heightNumber} * 1px);
|
||||
position: relative;
|
||||
|
|
@ -22,16 +34,15 @@ export const DropdownStyles = css`
|
|||
outline: none;
|
||||
}
|
||||
.listbox {
|
||||
background: var(--dropdown-background-color);
|
||||
border: calc(var(--border-width) * 1px) solid
|
||||
var(--dropdown-border-color);
|
||||
border-radius: calc(var(--dropdown-corner-radius-color) * 1px);
|
||||
background: ${dropdownBackgroundColor};
|
||||
border: calc(${borderWidth} * 1px) solid ${dropdownBorderColor};
|
||||
border-radius: calc(${dropdownCornerRadius} * 1px);
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
left: 0;
|
||||
max-height: calc(var(--max-height) - (${heightNumber} * 1px));
|
||||
padding: calc(var(--design-unit) * 1px) 0;
|
||||
padding: calc(${designUnit} * 1px) 0;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -45,52 +56,52 @@ export const DropdownStyles = css`
|
|||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
font: inherit;
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
padding: 0 calc(var(--design-unit) * 2.25px);
|
||||
line-height: ${typeRampBaseLineHeight};
|
||||
padding: 0 calc(${designUnit} * 2.25px);
|
||||
width: 100%;
|
||||
}
|
||||
:host(:not([disabled]):hover) {
|
||||
background: var(--dropdown-background-color);
|
||||
border-color: var(--dropdown-border-color);
|
||||
background: ${dropdownBackgroundColor};
|
||||
border-color: ${dropdownBorderColor};
|
||||
}
|
||||
:host(:focus) {
|
||||
border-color: var(--focus-border-color);
|
||||
border-color: ${focusBorderColor};
|
||||
}
|
||||
:host(:${focusVisible}) {
|
||||
border-color: var(--focus-border-color);
|
||||
border-color: ${focusBorderColor};
|
||||
}
|
||||
:host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]:not([disabled])) {
|
||||
box-shadow: 0 0 0 calc(var(--focus-border-width) * 1px) inset
|
||||
var(--focus-border-color);
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 calc(${focusBorderWidth} * 1px) inset
|
||||
${focusBorderColor};
|
||||
border-color: ${focusBorderColor};
|
||||
background: #094771;
|
||||
color: var(--dropdown-foreground-color);
|
||||
color: ${dropdownForegroundColor};
|
||||
}
|
||||
:host([disabled]) {
|
||||
cursor: ${disabledCursor};
|
||||
opacity: var(--disabled-opacity);
|
||||
opacity: ${disabledOpacity};
|
||||
}
|
||||
:host([disabled]) .control {
|
||||
cursor: ${disabledCursor};
|
||||
}
|
||||
:host([disabled]:hover) {
|
||||
background: var(--dropdown-background-color);
|
||||
color: var(--dropdown-foreground-color);
|
||||
background: ${dropdownBackgroundColor};
|
||||
color: ${dropdownForegroundColor};
|
||||
fill: currentcolor;
|
||||
}
|
||||
:host(:not([disabled])) .control:active {
|
||||
background: #094771;
|
||||
border-color: var(--dropdown-border-color);
|
||||
border-radius: calc(var(--dropdown-corner-radius-color) * 1px);
|
||||
border-color: ${dropdownBorderColor};
|
||||
border-radius: calc(${dropdownCornerRadius} * 1px);
|
||||
}
|
||||
:host([open]),
|
||||
:host([open]) .listbox {
|
||||
border: none;
|
||||
}
|
||||
:host([open]) .control {
|
||||
padding: 0 calc((var(--design-unit) * 2.25px) + 1px);
|
||||
padding: 0 calc((${designUnit} * 2.25px) + 1px);
|
||||
}
|
||||
:host([open][position='above']) .listbox,
|
||||
:host([open][position='below']) {
|
||||
|
|
@ -112,7 +123,7 @@ export const DropdownStyles = css`
|
|||
}
|
||||
.selected-value {
|
||||
font-family: var(--body-font);
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
flex: 1 1 auto;
|
||||
text-align: start;
|
||||
}
|
||||
|
|
@ -139,8 +150,8 @@ export const DropdownStyles = css`
|
|||
::slotted(span) {
|
||||
fill: currentcolor;
|
||||
height: 1em;
|
||||
min-height: calc(var(--design-unit) * 4px);
|
||||
min-width: calc(var(--design-unit) * 4px);
|
||||
min-height: calc(${designUnit} * 4px);
|
||||
min-width: calc(${designUnit} * 4px);
|
||||
width: 1em;
|
||||
}
|
||||
::slotted([role='option']),
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ export * from './breadcrumb-item/index';
|
|||
export * from './button/index';
|
||||
export * from './checkbox/index';
|
||||
export * from './data-grid/index';
|
||||
export * from './design-system-provider/index';
|
||||
export * from './divider/index';
|
||||
export * from './link/index';
|
||||
export * from './menu/index';
|
||||
|
|
@ -20,9 +19,5 @@ export * from './dropdown/index';
|
|||
export * from './text-area/index';
|
||||
export * from './text-field/index';
|
||||
|
||||
// Export styles and utility functions
|
||||
export {
|
||||
VSCodeDesignSystem,
|
||||
VSCodeDesignSystemDefaults,
|
||||
} from './vscode-design-system';
|
||||
// Export utility functions
|
||||
export * from './utilities/theme/applyTheme';
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {createLink, LinkArgs} from './fixtures/createLink';
|
||||
import {VSCodeLink} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodeLink;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Link',
|
||||
|
|
|
|||
|
|
@ -1,14 +1,24 @@
|
|||
import {css} from '@microsoft/fast-element';
|
||||
import {disabledCursor, display} from '@microsoft/fast-foundation';
|
||||
import {
|
||||
borderWidth,
|
||||
cornerRadius,
|
||||
disabledOpacity,
|
||||
focusBorderWidth,
|
||||
textLinkForegroundColor,
|
||||
typeRampBaseFontSize,
|
||||
typeRampBaseLineHeight,
|
||||
} from '../design-tokens';
|
||||
|
||||
export const LinkStyles = css`
|
||||
${display('inline-flex')} :host {
|
||||
outline: none;
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
font-family: var(--body-font);
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
line-height: ${typeRampBaseLineHeight};
|
||||
background: transparent;
|
||||
color: var(--text-link-foreground-color);
|
||||
border-radius: calc(var(--corner-radius) * 1px);
|
||||
color: ${textLinkForegroundColor};
|
||||
border-radius: calc(${cornerRadius} * 1px);
|
||||
fill: currentcolor;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -24,7 +34,7 @@ export const LinkStyles = css`
|
|||
white-space: nowrap;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
border: calc(var(--border-width) * 1px) solid transparent;
|
||||
border: calc(${borderWidth} * 1px) solid transparent;
|
||||
color: inherit;
|
||||
border-radius: inherit;
|
||||
fill: inherit;
|
||||
|
|
@ -41,12 +51,12 @@ export const LinkStyles = css`
|
|||
border: 0;
|
||||
}
|
||||
:host(:not([disabled])) .control:focus {
|
||||
outline: calc(var(--focus-border-width) * 1px) solid
|
||||
var(--text-link-foreground-color);
|
||||
outline-offset: calc(var(--focus-border-width) * 1px);
|
||||
outline: calc(${focusBorderWidth} * 1px) solid
|
||||
${textLinkForegroundColor};
|
||||
outline-offset: calc(${focusBorderWidth} * 1px);
|
||||
}
|
||||
:host([disabled]) {
|
||||
opacity: var(--disabled-opacity);
|
||||
opacity: ${disabledOpacity};
|
||||
text-decoration: none;
|
||||
background: transparent;
|
||||
cursor: ${disabledCursor};
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {createMenuItem, MenuItemArgs} from './fixtures/createMenuItem';
|
||||
import {VSCodeMenuItem} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodeMenuItem;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Menu Item',
|
||||
|
|
|
|||
|
|
@ -5,6 +5,15 @@ import {
|
|||
focusVisible,
|
||||
} from '@microsoft/fast-foundation';
|
||||
import {heightNumber} from '../utilities/styles/size';
|
||||
import {
|
||||
borderWidth,
|
||||
cornerRadius,
|
||||
designUnit,
|
||||
disabledOpacity,
|
||||
focusBorderWidth,
|
||||
typeRampBaseFontSize,
|
||||
typeRampBaseLineHeight,
|
||||
} from '../design-tokens';
|
||||
|
||||
export const MenuItemStyles = css`
|
||||
${display('grid')} :host {
|
||||
|
|
@ -19,15 +28,15 @@ export const MenuItemStyles = css`
|
|||
justify-items: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
margin: 0 calc(var(--design-unit) * 1px);
|
||||
margin: 0 calc(${designUnit} * 1px);
|
||||
white-space: nowrap;
|
||||
color: #cccccc;
|
||||
fill: currentcolor;
|
||||
cursor: pointer;
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
border-radius: calc(var(--corner-radius) * 1px);
|
||||
border: calc(var(--focus-outline-width) * 1px) solid transparent;
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
line-height: ${typeRampBaseLineHeight};
|
||||
border-radius: calc(${cornerRadius} * 1px);
|
||||
border: calc(${focusBorderWidth} * 1px) solid transparent;
|
||||
}
|
||||
:host(:${focusVisible}) {
|
||||
border-color: transparent;
|
||||
|
|
@ -46,7 +55,7 @@ export const MenuItemStyles = css`
|
|||
}
|
||||
:host([disabled]) {
|
||||
cursor: ${disabledCursor};
|
||||
opacity: var(--disabled-opacity);
|
||||
opacity: ${disabledOpacity};
|
||||
}
|
||||
:host([disabled]:hover) {
|
||||
color: #cccccc;
|
||||
|
|
@ -137,7 +146,7 @@ export const MenuItemStyles = css`
|
|||
}
|
||||
:host .checkbox,
|
||||
:host .radio {
|
||||
border: calc(var(--border-width) * 1px) solid transparent;
|
||||
border: calc(${borderWidth} * 1px) solid transparent;
|
||||
}
|
||||
:host([aria-checked='true']) .checkbox,
|
||||
:host([aria-checked='true']) .radio {
|
||||
|
|
@ -145,7 +154,7 @@ export const MenuItemStyles = css`
|
|||
border-color: red;
|
||||
}
|
||||
:host .checkbox {
|
||||
border-radius: calc(var(--corner-radius) * 1px);
|
||||
border-radius: calc(${cornerRadius} * 1px);
|
||||
}
|
||||
:host .radio {
|
||||
border-radius: 999px;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {createMenu, MenuArgs} from './fixtures/createMenu';
|
||||
import {VSCodeMenu} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodeMenu;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Menu',
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
import {css} from '@microsoft/fast-element';
|
||||
import {display} from '@microsoft/fast-foundation';
|
||||
import {borderWidth, cornerRadius, designUnit} from '../design-tokens';
|
||||
|
||||
export const MenuStyles = css`
|
||||
${display('block')} :host {
|
||||
--elevation: 11;
|
||||
background: #252526;
|
||||
border: calc(var(--outline-width) * 1px) solid transparent;
|
||||
border: calc(${borderWidth} * 1px) solid transparent;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||
margin: 0;
|
||||
border-radius: calc(var(--corner-radius) * 1px);
|
||||
padding: calc(var(--design-unit) * 1px) 0;
|
||||
border-radius: calc(${cornerRadius} * 1px);
|
||||
padding: calc(${designUnit} * 1px) 0;
|
||||
max-width: 368px;
|
||||
min-width: 64px;
|
||||
}
|
||||
:host([slot='submenu']) {
|
||||
width: max-content;
|
||||
margin: 0 calc(var(--design-unit) * 1px);
|
||||
margin: 0 calc(${designUnit} * 1px);
|
||||
}
|
||||
::slotted(hr) {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-top: solid calc(var(--border-width) * 1px)
|
||||
var(--neutral-divider-rest);
|
||||
border-top: solid calc(${borderWidth} * 1px) var(--neutral-divider-rest);
|
||||
}
|
||||
::slotted(vscode-divider) {
|
||||
width: 95%;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {createOption, OptionArgs} from './fixtures/createOption';
|
||||
import {VSCodeOption} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodeOption;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Option',
|
||||
|
|
|
|||
|
|
@ -4,50 +4,60 @@ import {
|
|||
display,
|
||||
focusVisible,
|
||||
} from '@microsoft/fast-foundation';
|
||||
import {
|
||||
designUnit,
|
||||
disabledOpacity,
|
||||
dropdownCornerRadius,
|
||||
dropdownForegroundColor,
|
||||
focusBorderColor,
|
||||
focusBorderWidth,
|
||||
optionBackgroundFocusColor,
|
||||
typeRampBaseFontSize,
|
||||
typeRampBaseLineHeight,
|
||||
} from '../design-tokens';
|
||||
|
||||
export const OptionStyles = css`
|
||||
${display('inline-flex')} :host {
|
||||
font-family: var(--body-font);
|
||||
border-radius: calc(var(--select-corner-radius-color) * 1px);
|
||||
border: calc(var(--focus-border-width) * 1px) solid transparent;
|
||||
border-radius: calc(${dropdownCornerRadius} * 1px);
|
||||
border: calc(${focusBorderWidth} * 1px) solid transparent;
|
||||
box-sizing: border-box;
|
||||
color: var(--select-foreground-color);
|
||||
color: ${dropdownForegroundColor};
|
||||
cursor: pointer;
|
||||
fill: currentcolor;
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
margin: 0 calc(var(--design-unit) * 1px);
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
line-height: ${typeRampBaseLineHeight};
|
||||
margin: 0 calc(${designUnit} * 1px);
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
padding: calc(var(--design-unit) * 1px);
|
||||
padding: calc(${designUnit} * 1px);
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
:host(:${focusVisible}) {
|
||||
border-color: var(--focus-border-color);
|
||||
background: var(--option-background-focus-color);
|
||||
color: var(--select-foreground-color);
|
||||
border-color: ${focusBorderColor};
|
||||
background: ${optionBackgroundFocusColor};
|
||||
color: ${dropdownForegroundColor};
|
||||
}
|
||||
:host([aria-selected='true']) {
|
||||
background: var(--option-background-focus-color);
|
||||
color: var(--select-foreground-color);
|
||||
background: ${optionBackgroundFocusColor};
|
||||
color: ${dropdownForegroundColor};
|
||||
}
|
||||
:host(:active) {
|
||||
background: var(--option-background-focus-color);
|
||||
color: var(--select-foreground-color);
|
||||
background: ${optionBackgroundFocusColor};
|
||||
color: ${dropdownForegroundColor};
|
||||
}
|
||||
:host(:not([aria-selected='true']):hover) {
|
||||
background: var(--option-background-focus-color);
|
||||
color: var(--select-foreground-color);
|
||||
background: ${optionBackgroundFocusColor};
|
||||
color: ${dropdownForegroundColor};
|
||||
}
|
||||
:host(:not([aria-selected='true']):active) {
|
||||
background: var(--option-background-focus-color);
|
||||
color: var(--select-foreground-color);
|
||||
background: ${optionBackgroundFocusColor};
|
||||
color: ${dropdownForegroundColor};
|
||||
}
|
||||
:host([disabled]) {
|
||||
cursor: ${disabledCursor};
|
||||
opacity: var(--disabled-opacity);
|
||||
opacity: ${disabledOpacity};
|
||||
}
|
||||
:host([disabled]:hover) {
|
||||
background-color: inherit;
|
||||
|
|
@ -66,8 +76,8 @@ export const OptionStyles = css`
|
|||
}
|
||||
::slotted(svg),
|
||||
::slotted(span) {
|
||||
height: calc(var(--design-unit) * 4px);
|
||||
width: calc(var(--design-unit) * 4px);
|
||||
height: calc(${designUnit} * 4px);
|
||||
width: calc(${designUnit} * 4px);
|
||||
}
|
||||
::slotted([slot='end']) {
|
||||
margin-inline-start: 6px;
|
||||
|
|
|
|||
|
|
@ -5,61 +5,71 @@ import {
|
|||
focusVisible,
|
||||
} from '@microsoft/fast-foundation';
|
||||
import {heightNumber} from '../utilities/styles/size';
|
||||
import {
|
||||
borderWidth,
|
||||
cornerRadius,
|
||||
designUnit,
|
||||
disabledOpacity,
|
||||
focusBorderColor,
|
||||
panelTabActiveBorderColor,
|
||||
panelTabActiveForegroundColor,
|
||||
panelTabForegroundColor,
|
||||
typeRampBaseFontSize,
|
||||
typeRampBaseLineHeight,
|
||||
} from '../design-tokens';
|
||||
|
||||
export const PanelTabStyles = css`
|
||||
${display('inline-flex')} :host {
|
||||
box-sizing: border-box;
|
||||
font-family: var(--body-font);
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
line-height: ${typeRampBaseLineHeight};
|
||||
height: calc(${heightNumber} * 1px);
|
||||
padding: calc(var(--design-unit) * 1px) 0;
|
||||
color: var(--tab-foreground-color);
|
||||
padding: calc(${designUnit} * 1px) 0;
|
||||
color: ${panelTabForegroundColor};
|
||||
fill: currentcolor;
|
||||
border-radius: calc(var(--corner-radius) * 1px);
|
||||
border: solid calc(var(--border-width) * 1px) transparent;
|
||||
border-radius: calc(${cornerRadius} * 1px);
|
||||
border: solid calc(${borderWidth} * 1px) transparent;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
grid-row: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
:host(:hover) {
|
||||
color: var(--tab-active-foreground-color);
|
||||
color: ${panelTabActiveForegroundColor};
|
||||
fill: currentcolor;
|
||||
}
|
||||
:host(:active) {
|
||||
color: var(--tab-active-foreground-color);
|
||||
color: ${panelTabActiveForegroundColor};
|
||||
fill: currentcolor;
|
||||
}
|
||||
:host([disabled]) {
|
||||
cursor: ${disabledCursor};
|
||||
opacity: var(--disabled-opacity);
|
||||
opacity: ${disabledOpacity};
|
||||
}
|
||||
:host([disabled]:hover) {
|
||||
color: var(--tab-active-foreground-color);
|
||||
color: ${panelTabActiveForegroundColor};
|
||||
background: transparent;
|
||||
}
|
||||
:host([aria-selected='true']) {
|
||||
background: transparent;
|
||||
color: var(--tab-active-foreground-color);
|
||||
color: ${panelTabActiveForegroundColor};
|
||||
fill: currentcolor;
|
||||
}
|
||||
:host([aria-selected='true']:hover) {
|
||||
background: transparent;
|
||||
color: var(--tab-active-foreground-color);
|
||||
color: ${panelTabActiveForegroundColor};
|
||||
fill: currentcolor;
|
||||
}
|
||||
:host([aria-selected='true']:active) {
|
||||
background: transparent;
|
||||
color: var(--tab-active-foreground-color);
|
||||
color: ${panelTabActiveForegroundColor};
|
||||
fill: currentcolor;
|
||||
}
|
||||
:host(:${focusVisible}) {
|
||||
outline: none;
|
||||
border: solid calc(var(--border-width) * 1px)
|
||||
var(--tab-active-border-color);
|
||||
box-shadow: 0 0 0
|
||||
calc((var(--focus-border-width) - var(--border-width)) * 1px)
|
||||
border: solid calc(${borderWidth} * 1px) ${panelTabActiveBorderColor};
|
||||
box-shadow: 0 0 0 calc((${focusBorderColor} - ${borderWidth}) * 1px)
|
||||
transparent;
|
||||
}
|
||||
:host(:focus) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
import {css} from '@microsoft/fast-element';
|
||||
import {display} from '@microsoft/fast-foundation';
|
||||
import {
|
||||
density,
|
||||
designUnit,
|
||||
typeRampBaseFontSize,
|
||||
typeRampBaseLineHeight,
|
||||
} from '../design-tokens';
|
||||
|
||||
export const PanelViewStyles = css`
|
||||
${display('flex')} :host {
|
||||
|
|
@ -7,9 +13,8 @@ export const PanelViewStyles = css`
|
|||
background-color: transparent;
|
||||
border: solid 1px transparent;
|
||||
box-sizing: border-box;
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
padding: 10px
|
||||
calc((6 + (var(--design-unit) * 2 * var(--density))) * 1px);
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
line-height: ${typeRampBaseLineHeight};
|
||||
padding: 10px calc((6 + (${designUnit} * 2 * ${density})) * 1px);
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,4 @@
|
|||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {createPanels, PanelsArgs} from './fixtures/createPanels';
|
||||
import {VSCodePanels, VSCodePanelTab, VSCodePanelView} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodePanels;
|
||||
VSCodePanelTab;
|
||||
VSCodePanelView;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Panels',
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
import {css} from '@microsoft/fast-element';
|
||||
import {display} from '@microsoft/fast-foundation';
|
||||
import {
|
||||
cornerRadius,
|
||||
designUnit,
|
||||
typeRampBaseFontSize,
|
||||
typeRampBaseLineHeight,
|
||||
} from '../design-tokens';
|
||||
|
||||
export const PanelsStyles = css`
|
||||
${display('grid')} :host {
|
||||
box-sizing: border-box;
|
||||
font-family: var(--body-font);
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
line-height: ${typeRampBaseLineHeight};
|
||||
color: #a0a0a0;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-rows: auto 1fr;
|
||||
|
|
@ -15,11 +21,11 @@ export const PanelsStyles = css`
|
|||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-columns: auto;
|
||||
column-gap: calc(var(--design-unit) * 8px);
|
||||
column-gap: calc(${designUnit} * 8px);
|
||||
position: relative;
|
||||
width: max-content;
|
||||
align-self: end;
|
||||
padding: calc(var(--design-unit) * 1px) calc(var(--design-unit) * 1px) 0;
|
||||
padding: calc(${designUnit} * 1px) calc(${designUnit} * 1px) 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.start,
|
||||
|
|
@ -34,7 +40,7 @@ export const PanelsStyles = css`
|
|||
justify-self: center;
|
||||
background: #ffffff;
|
||||
margin: 0;
|
||||
border-radius: calc(var(--corner-radius) * 1px);
|
||||
border-radius: calc(${cornerRadius} * 1px);
|
||||
}
|
||||
.activeIndicatorTransition {
|
||||
transition: transform 0.01s linear;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {createProgressBar, ProgressBarArgs} from './fixtures/createProgressBar';
|
||||
import {VSCodeProgressBar} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodeProgressBar;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Progress Bar',
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
import {css} from '@microsoft/fast-element';
|
||||
import {display} from '@microsoft/fast-foundation';
|
||||
import {cornerRadius, designUnit, progressBackgroundColor} from '../design-tokens';
|
||||
|
||||
export const ProgressBarStyles = css`
|
||||
${display('flex')} :host {
|
||||
align-items: center;
|
||||
outline: none;
|
||||
height: calc(var(--design-unit) * 1px);
|
||||
margin: calc(var(--design-unit) * 1px) 0;
|
||||
height: calc(${designUnit} * 1px);
|
||||
margin: calc(${designUnit} * 1px) 0;
|
||||
}
|
||||
.progress {
|
||||
background-color: transparent;
|
||||
border-radius: calc(var(--corner-radius) * 1px);
|
||||
border-radius: calc(${cornerRadius} * 1px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -18,15 +19,15 @@ export const ProgressBarStyles = css`
|
|||
position: relative;
|
||||
}
|
||||
.determinate {
|
||||
background-color: var(--progress-background-color);
|
||||
border-radius: calc(var(--corner-radius) * 1px);
|
||||
background-color: ${progressBackgroundColor};
|
||||
border-radius: calc(${cornerRadius} * 1px);
|
||||
height: 100%;
|
||||
transition: all 0.2s ease-in-out;
|
||||
display: flex;
|
||||
}
|
||||
.indeterminate {
|
||||
height: 100%;
|
||||
border-radius: calc(var(--corner-radius) * 1px);
|
||||
border-radius: calc(${cornerRadius} * 1px);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
|
@ -36,8 +37,8 @@ export const ProgressBarStyles = css`
|
|||
position: absolute;
|
||||
opacity: 0;
|
||||
height: 100%;
|
||||
background-color: var(--progress-background-color);
|
||||
border-radius: calc(var(--corner-radius) * 1px);
|
||||
background-color: ${progressBackgroundColor};
|
||||
border-radius: calc(${cornerRadius} * 1px);
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
|
||||
width: 40%;
|
||||
animation: indeterminate-1 2s infinite;
|
||||
|
|
@ -46,8 +47,8 @@ export const ProgressBarStyles = css`
|
|||
position: absolute;
|
||||
opacity: 0;
|
||||
height: 100%;
|
||||
background-color: var(--progress-background-color);
|
||||
border-radius: calc(var(--corner-radius) * 1px);
|
||||
background-color: ${progressBackgroundColor};
|
||||
border-radius: calc(${cornerRadius} * 1px);
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
|
||||
width: 60%;
|
||||
animation: indeterminate-2 2s infinite;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,7 @@
|
|||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {
|
||||
createProgressRing,
|
||||
ProgressRingArgs,
|
||||
} from './fixtures/createProgressRing';
|
||||
import {VSCodeProgressRing} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodeProgressRing;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Progress Ring',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import {css} from '@microsoft/fast-element';
|
||||
import {display} from '@microsoft/fast-foundation';
|
||||
import {heightNumber} from '../utilities/styles/size';
|
||||
import {progressBackgroundColor} from '../design-tokens';
|
||||
|
||||
export const ProgressRingStyles = css`
|
||||
${display('flex')} :host {
|
||||
|
|
@ -20,7 +21,7 @@ export const ProgressRingStyles = css`
|
|||
stroke-width: 2px;
|
||||
}
|
||||
.determinate {
|
||||
stroke: var(--progress-background-color);
|
||||
stroke: ${progressBackgroundColor};
|
||||
fill: none;
|
||||
stroke-width: 2px;
|
||||
stroke-linecap: square;
|
||||
|
|
@ -29,7 +30,7 @@ export const ProgressRingStyles = css`
|
|||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
.indeterminate-indicator-1 {
|
||||
stroke: var(--progress-background-color);
|
||||
stroke: ${progressBackgroundColor};
|
||||
fill: none;
|
||||
stroke-width: 2px;
|
||||
stroke-linecap: square;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,4 @@
|
|||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {VSCodeRadio} from '../radio/index';
|
||||
import {createRadioGroup, RadioGroupArgs} from './fixtures/createRadioGroup';
|
||||
import {VSCodeRadioGroup} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodeRadio;
|
||||
VSCodeRadioGroup;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Radio Group',
|
||||
|
|
|
|||
|
|
@ -1,10 +1,15 @@
|
|||
import {css} from '@microsoft/fast-element';
|
||||
import {display} from '@microsoft/fast-foundation';
|
||||
import {
|
||||
checkboxForegroundColor,
|
||||
designUnit,
|
||||
typeRampBaseFontSize,
|
||||
} from '../design-tokens';
|
||||
|
||||
export const RadioGroupStyles = css`
|
||||
${display('flex')} :host {
|
||||
align-items: flex-start;
|
||||
margin: calc(var(--design-unit) * 1px) 0;
|
||||
margin: calc(${designUnit} * 1px) 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
.positioning-region {
|
||||
|
|
@ -18,8 +23,8 @@ export const RadioGroupStyles = css`
|
|||
flex-direction: row;
|
||||
}
|
||||
::slotted([slot='label']) {
|
||||
color: var(--checkbox-foreground-color);
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
margin: calc(var(--design-unit) * 1px) 0;
|
||||
color: ${checkboxForegroundColor};
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
margin: calc(${designUnit} * 1px) 0;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
import {action} from '@storybook/addon-actions';
|
||||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {createRadio, RadioArgs} from './fixtures/createRadio';
|
||||
import {VSCodeRadio} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodeRadio;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Radio',
|
||||
|
|
|
|||
|
|
@ -5,37 +5,48 @@ import {
|
|||
focusVisible,
|
||||
} from '@microsoft/fast-foundation';
|
||||
import {heightNumber} from '../utilities/styles/size';
|
||||
import {
|
||||
borderWidth,
|
||||
checkboxBackgroundColor,
|
||||
checkboxBorderColor,
|
||||
checkboxForegroundColor,
|
||||
designUnit,
|
||||
disabledOpacity,
|
||||
focusBorderColor,
|
||||
focusBorderWidth,
|
||||
typeRampBaseFontSize,
|
||||
typeRampBaseLineHeight,
|
||||
} from '../design-tokens';
|
||||
|
||||
export const RadioStyles = css`
|
||||
${display('inline-flex')} :host {
|
||||
--input-size: calc((${heightNumber} / 2) + var(--design-unit));
|
||||
--input-size: calc((${heightNumber} / 2) + ${designUnit});
|
||||
align-items: center;
|
||||
outline: none;
|
||||
margin: calc(var(--design-unit) * 1px) 0;
|
||||
margin: calc(${designUnit} * 1px) 0;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
transition: all 0.2s ease-in-out;
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
line-height: ${typeRampBaseLineHeight};
|
||||
}
|
||||
.control {
|
||||
position: relative;
|
||||
width: calc((${heightNumber} / 2 + var(--design-unit)) * 1px);
|
||||
height: calc((${heightNumber} / 2 + var(--design-unit)) * 1px);
|
||||
width: calc((${heightNumber} / 2 + ${designUnit}) * 1px);
|
||||
height: calc((${heightNumber} / 2 + ${designUnit}) * 1px);
|
||||
box-sizing: border-box;
|
||||
border-radius: 999px;
|
||||
border: calc(var(--border-width) * 1px) solid
|
||||
var(--checkbox-border-color);
|
||||
background: var(--checkbox-background-color);
|
||||
border: calc(${borderWidth} * 1px) solid ${checkboxBorderColor};
|
||||
background: ${checkboxBackgroundColor};
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.label {
|
||||
font-family: var(--body-font);
|
||||
color: var(--checkbox-foreground-color);
|
||||
padding-inline-start: calc(var(--design-unit) * 2px + 2px);
|
||||
margin-inline-end: calc(var(--design-unit) * 2px + 2px);
|
||||
color: ${checkboxForegroundColor};
|
||||
padding-inline-start: calc(${designUnit} * 2px + 2px);
|
||||
margin-inline-end: calc(${designUnit} * 2px + 2px);
|
||||
cursor: pointer;
|
||||
}
|
||||
.label__hidden {
|
||||
|
|
@ -54,39 +65,35 @@ export const RadioStyles = css`
|
|||
bottom: 5px;
|
||||
border-radius: 999px;
|
||||
display: inline-block;
|
||||
background: var(--checkbox-foreground-color);
|
||||
background: ${checkboxForegroundColor};
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
:host(:not([disabled])) .control:hover {
|
||||
background: var(--checkbox-background-color);
|
||||
border-color: var(--checkbox-border-color);
|
||||
background: ${checkboxBackgroundColor};
|
||||
border-color: ${checkboxBorderColor};
|
||||
}
|
||||
:host(:not([disabled])) .control:active {
|
||||
background: var(--checkbox-background-color);
|
||||
border-color: var(--focus-border-color);
|
||||
background: ${checkboxBackgroundColor};
|
||||
border-color: ${focusBorderColor};
|
||||
}
|
||||
:host(:${focusVisible}) .control {
|
||||
border: calc(var(--focus-border-width) * 1px) solid
|
||||
var(--focus-border-color);
|
||||
border: calc(${focusBorderWidth} * 1px) solid ${focusBorderColor};
|
||||
}
|
||||
:host([aria-checked='true']) .control {
|
||||
background: var(--checkbox-background-color);
|
||||
border: calc(var(--border-width) * 1px) solid
|
||||
var(--checkbox-border-color);
|
||||
background: ${checkboxBackgroundColor};
|
||||
border: calc(${borderWidth} * 1px) solid ${checkboxBorderColor};
|
||||
}
|
||||
:host([aria-checked='true']:not([disabled])) .control:hover {
|
||||
background: var(--checkbox-background-color);
|
||||
border: calc(var(--border-width) * 1px) solid
|
||||
var(--checkbox-border-color);
|
||||
background: ${checkboxBackgroundColor};
|
||||
border: calc(${borderWidth} * 1px) solid ${checkboxBorderColor};
|
||||
}
|
||||
:host([aria-checked='true']:not([disabled])) .control:active {
|
||||
background: var(--checkbox-background-color);
|
||||
border: calc(var(--border-width) * 1px) solid var(--focus-border-color);
|
||||
background: ${checkboxBackgroundColor};
|
||||
border: calc(${borderWidth} * 1px) solid ${focusBorderColor};
|
||||
}
|
||||
:host([aria-checked="true"]:${focusVisible}:not([disabled])) .control {
|
||||
border: calc(var(--focus-border-width) * 1px) solid
|
||||
var(--focus-border-color);
|
||||
border: calc(${focusBorderWidth} * 1px) solid ${focusBorderColor};
|
||||
}
|
||||
:host([disabled]) .label,
|
||||
:host([readonly]) .label,
|
||||
|
|
@ -98,6 +105,6 @@ export const RadioStyles = css`
|
|||
opacity: 1;
|
||||
}
|
||||
:host([disabled]) {
|
||||
opacity: var(--disabled-opacity);
|
||||
opacity: ${disabledOpacity};
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {createTextArea, TextAreaArgs} from './fixtures/createTextArea';
|
||||
import {VSCodeTextArea} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodeTextArea;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Text Area',
|
||||
|
|
|
|||
|
|
@ -4,6 +4,19 @@ import {
|
|||
display,
|
||||
focusVisible,
|
||||
} from '@microsoft/fast-foundation';
|
||||
import {
|
||||
borderWidth,
|
||||
cornerRadius,
|
||||
designUnit,
|
||||
disabledOpacity,
|
||||
focusBorderWidth,
|
||||
inputBackgroundColor,
|
||||
inputBorderColor,
|
||||
inputForegroundColor,
|
||||
inputPlaceholderForegroundColor,
|
||||
typeRampBaseFontSize,
|
||||
typeRampBaseLineHeight,
|
||||
} from '../design-tokens';
|
||||
|
||||
export const TextAreaStyles = css`
|
||||
${display('inline-block')} :host {
|
||||
|
|
@ -14,24 +27,24 @@ export const TextAreaStyles = css`
|
|||
.control {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
color: var(--input-foreground-color);
|
||||
background: var(--input-background-color);
|
||||
border-radius: calc(var(--corner-radius) * 1px);
|
||||
border: calc(var(--border-width) * 1px) solid var(--input-border-color);
|
||||
color: ${inputForegroundColor};
|
||||
background: ${inputBackgroundColor};
|
||||
border-radius: calc(${cornerRadius} * 1px);
|
||||
border: calc(${borderWidth} * 1px) solid ${inputBorderColor};
|
||||
font: inherit;
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
padding: calc(var(--design-unit) * 2px + 1px);
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
line-height: ${typeRampBaseLineHeight};
|
||||
padding: calc(${designUnit} * 2px + 1px);
|
||||
width: 100%;
|
||||
resize: none;
|
||||
}
|
||||
.control:hover:enabled {
|
||||
background: var(--input-background-color);
|
||||
border-color: var(--input-border-color);
|
||||
background: ${inputBackgroundColor};
|
||||
border-color: ${inputBorderColor};
|
||||
}
|
||||
.control:active:enabled {
|
||||
background: var(--input-background-color);
|
||||
border-color: var(--focus-border-color);
|
||||
background: ${inputBackgroundColor};
|
||||
border-color: ${focusBorderWidth};
|
||||
}
|
||||
.control:hover,
|
||||
.control:${focusVisible},
|
||||
|
|
@ -40,8 +53,8 @@ export const TextAreaStyles = css`
|
|||
outline: none;
|
||||
}
|
||||
:host(:focus-within:not([disabled])) .control {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 1px var(--focus-border-color) inset;
|
||||
border-color: ${focusBorderWidth};
|
||||
box-shadow: 0 0 0 1px ${focusBorderWidth} inset;
|
||||
}
|
||||
:host([resize='both']) .control {
|
||||
resize: both;
|
||||
|
|
@ -54,10 +67,10 @@ export const TextAreaStyles = css`
|
|||
}
|
||||
.label {
|
||||
display: block;
|
||||
color: var(--input-placeholder-foreground-color);
|
||||
color: ${inputPlaceholderForegroundColor};
|
||||
cursor: pointer;
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
line-height: ${typeRampBaseLineHeight};
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.label__hidden {
|
||||
|
|
@ -71,9 +84,9 @@ export const TextAreaStyles = css`
|
|||
cursor: ${disabledCursor};
|
||||
}
|
||||
:host([disabled]) {
|
||||
opacity: var(--disabled-opacity);
|
||||
opacity: ${disabledOpacity};
|
||||
}
|
||||
:host([disabled]) .control {
|
||||
border-color: var(--input-border-color);
|
||||
border-color: ${inputBorderColor};
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
import {VSCodeDesignSystemProvider} from '../design-system-provider/index';
|
||||
import {createTextField, TextFieldArgs} from './fixtures/createTextField';
|
||||
import {VSCodeTextField} from './index';
|
||||
|
||||
// Prevent tree-shaking
|
||||
VSCodeTextField;
|
||||
VSCodeDesignSystemProvider;
|
||||
|
||||
export default {
|
||||
title: 'Library/Text Field',
|
||||
|
|
|
|||
|
|
@ -5,6 +5,19 @@ import {
|
|||
focusVisible,
|
||||
} from '@microsoft/fast-foundation';
|
||||
import {heightNumber} from '../utilities/styles/size';
|
||||
import {
|
||||
borderWidth,
|
||||
cornerRadius,
|
||||
designUnit,
|
||||
disabledOpacity,
|
||||
focusBorderWidth,
|
||||
inputBackgroundColor,
|
||||
inputBorderColor,
|
||||
inputForegroundColor,
|
||||
inputPlaceholderForegroundColor,
|
||||
typeRampBaseFontSize,
|
||||
typeRampBaseLineHeight,
|
||||
} from '../design-tokens';
|
||||
|
||||
export const TextFieldStyles = css`
|
||||
${display('inline-block')} :host {
|
||||
|
|
@ -17,10 +30,10 @@ export const TextFieldStyles = css`
|
|||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: var(--input-foreground-color);
|
||||
background: var(--input-background-color);
|
||||
border-radius: calc(var(--corner-radius) * 1px);
|
||||
border: calc(var(--border-width) * 1px) solid var(--input-border-color);
|
||||
color: ${inputForegroundColor};
|
||||
background: ${inputBackgroundColor};
|
||||
border-radius: calc(${cornerRadius} * 1px);
|
||||
border: calc(${borderWidth} * 1px) solid ${inputBorderColor};
|
||||
height: calc(${heightNumber} * 1px);
|
||||
}
|
||||
.control {
|
||||
|
|
@ -34,9 +47,9 @@ export const TextFieldStyles = css`
|
|||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
border: none;
|
||||
padding: 0 calc(var(--design-unit) * 2px + 1px);
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
padding: 0 calc(${designUnit} * 2px + 1px);
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
line-height: ${typeRampBaseLineHeight};
|
||||
}
|
||||
.control:hover,
|
||||
.control:${focusVisible},
|
||||
|
|
@ -46,10 +59,10 @@ export const TextFieldStyles = css`
|
|||
}
|
||||
.label {
|
||||
display: block;
|
||||
color: var(--input-placeholder-foreground-color);
|
||||
color: ${inputPlaceholderForegroundColor};
|
||||
cursor: pointer;
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
line-height: ${typeRampBaseLineHeight};
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.label__hidden {
|
||||
|
|
@ -74,16 +87,16 @@ export const TextFieldStyles = css`
|
|||
margin-inline-end: 11px;
|
||||
}
|
||||
:host(:hover:not([disabled])) .root {
|
||||
background: var(--input-background-color);
|
||||
border-color: var(--input-border-color);
|
||||
background: ${inputBackgroundColor};
|
||||
border-color: ${inputBorderColor};
|
||||
}
|
||||
:host(:active:not([disabled])) .root {
|
||||
background: var(--input-background-color);
|
||||
border-color: var(--focus-border-color);
|
||||
background: ${inputBackgroundColor};
|
||||
border-color: ${focusBorderWidth};
|
||||
}
|
||||
:host(:focus-within:not([disabled])) .root {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 1px var(--focus-border-color) inset;
|
||||
border-color: ${focusBorderWidth};
|
||||
box-shadow: 0 0 0 1px ${focusBorderWidth} inset;
|
||||
}
|
||||
:host([disabled]) .label,
|
||||
:host([readonly]) .label,
|
||||
|
|
@ -92,9 +105,9 @@ export const TextFieldStyles = css`
|
|||
cursor: ${disabledCursor};
|
||||
}
|
||||
:host([disabled]) {
|
||||
opacity: var(--disabled-opacity);
|
||||
opacity: ${disabledOpacity};
|
||||
}
|
||||
:host([disabled]) .control {
|
||||
border-color: var(--input-border-color);
|
||||
border-color: ${inputBorderColor};
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* applies the current VS Code theme to the VS Code Webview Toolkit components.
|
||||
*/
|
||||
|
||||
import {colorTokensToAttributeNames} from './tokensToAttributes';
|
||||
import {tokenMappings} from './tokenMappings';
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const observer = new MutationObserver(applyCurrentTheme);
|
||||
|
|
@ -20,22 +20,18 @@ window.addEventListener('load', () => {
|
|||
* components.
|
||||
*/
|
||||
function applyCurrentTheme() {
|
||||
const designProvider = document.querySelector(
|
||||
'vscode-design-system-provider'
|
||||
);
|
||||
// Get all the styles applied to the <body> tag in the webview HTML
|
||||
// Importantly this includes all the CSS variables associated with the
|
||||
// current VS Code theme
|
||||
const styles = getComputedStyle(document.body);
|
||||
|
||||
if (designProvider) {
|
||||
// Get all the styles applied to the <body> tag in the webview HTML
|
||||
// Importantly this includes all the CSS variables associated with the
|
||||
// current VS Code theme
|
||||
const styles = getComputedStyle(document.body);
|
||||
for (const vscodeColorToken in tokenMappings) {
|
||||
const toolkitToken = tokenMappings[vscodeColorToken];
|
||||
const color = styles.getPropertyValue(vscodeColorToken).toString();
|
||||
const body = document.querySelector('body');
|
||||
|
||||
for (const colorToken in colorTokensToAttributeNames) {
|
||||
const attributeName = colorTokensToAttributeNames[colorToken];
|
||||
const tokenValue = styles.getPropertyValue(colorToken).toString();
|
||||
// Set a given VS Code theme color to its respective
|
||||
// <vscode-design-system-provider> attribute
|
||||
designProvider.setAttribute(attributeName, tokenValue);
|
||||
if (body) {
|
||||
toolkitToken.setValueFor(body, color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,86 @@
|
|||
import {CSSDesignToken} from '@microsoft/fast-foundation';
|
||||
import {
|
||||
badgeBackgroundColor,
|
||||
badgeForegroundColor,
|
||||
breadcrumbItemBackgroundColor,
|
||||
breadcrumbItemForegroundColor,
|
||||
breadcrumbItemForegroundHoverColor,
|
||||
buttonPrimaryBackgroundColor,
|
||||
buttonPrimaryForegroundColor,
|
||||
buttonPrimaryHoverBackgroundColor,
|
||||
buttonSecondaryBackgroundColor,
|
||||
buttonSecondaryForegroundColor,
|
||||
buttonSecondaryHoverBackgroundColor,
|
||||
checkboxBackgroundColor,
|
||||
checkboxBorderColor,
|
||||
checkboxForegroundColor,
|
||||
dropdownBackgroundColor,
|
||||
dropdownBorderColor,
|
||||
dropdownForegroundColor,
|
||||
focusBorderColor,
|
||||
inputBackgroundColor,
|
||||
inputBorderColor,
|
||||
inputForegroundColor,
|
||||
inputPlaceholderForegroundColor,
|
||||
optionBackgroundFocusColor,
|
||||
panelTabActiveBorderColor,
|
||||
panelTabActiveForegroundColor,
|
||||
panelTabForegroundColor,
|
||||
panelViewBackgroundColor,
|
||||
panelViewBorderColor,
|
||||
progressBackgroundColor,
|
||||
textLinkForegroundColor,
|
||||
} from '../../design-tokens';
|
||||
|
||||
/**
|
||||
* A mapping of all the VS Code theme CSS variables mapped to the
|
||||
* toolkit design tokens.
|
||||
*/
|
||||
export const tokenMappings: {[index: string]: CSSDesignToken<string>} = {
|
||||
// ---- Base Colors ----
|
||||
'--vscode-focusBorder': focusBorderColor,
|
||||
// ---- Contrast Colors ----
|
||||
// ---- Buttons ----
|
||||
'--vscode-button-background': buttonPrimaryBackgroundColor,
|
||||
'--vscode-button-foreground': buttonPrimaryForegroundColor,
|
||||
'--vscode-button-hoverBackground': buttonPrimaryHoverBackgroundColor,
|
||||
'--vscode-button-secondaryBackground': buttonSecondaryBackgroundColor,
|
||||
'--vscode-button-secondaryForeground': buttonSecondaryForegroundColor,
|
||||
'--vscode-button-secondaryHoverBackground': buttonSecondaryHoverBackgroundColor,
|
||||
// ---- Links ----
|
||||
'--vscode-textLink-foreground': textLinkForegroundColor,
|
||||
// ---- Checkboxes ----
|
||||
'--vscode-checkbox-background': checkboxBackgroundColor,
|
||||
'--vscode-checkbox-foreground': checkboxForegroundColor,
|
||||
'--vscode-checkbox-border': checkboxBorderColor,
|
||||
// ---- Breadcrumbs ----
|
||||
'--vscode-breadcrumb-background': breadcrumbItemBackgroundColor,
|
||||
'--vscode-breadcrumb-foreground': breadcrumbItemForegroundColor,
|
||||
'--vscode-breadcrumb-focusForeground': breadcrumbItemForegroundHoverColor,
|
||||
// ---- Dropdowns ----
|
||||
'--vscode-dropdown-background': dropdownBackgroundColor,
|
||||
'--vscode-dropdown-foreground': dropdownForegroundColor,
|
||||
'--vscode-dropdown-border': dropdownBorderColor,
|
||||
// ---- Dropdown Options ----
|
||||
'--vscode-list-focusBackground': optionBackgroundFocusColor,
|
||||
// ---- Badges ----
|
||||
'--vscode-badge-background': badgeBackgroundColor,
|
||||
'--vscode-badge-foreground': badgeForegroundColor,
|
||||
// ---- Text Fields & Areas ----
|
||||
'--vscode-input-background': inputBackgroundColor,
|
||||
'--vscode-input-foreground': inputForegroundColor,
|
||||
'--vscode-input-border': inputBorderColor,
|
||||
'--vscode-input-placeholderForeground': inputPlaceholderForegroundColor,
|
||||
// ---- Progress Bars & Rings ----
|
||||
'--vscode-progressBar-background': progressBackgroundColor,
|
||||
// ---- Panels ----
|
||||
'--vscode-panelTitle-inactiveForeground': panelTabForegroundColor,
|
||||
'--vscode-panelTitle-activeForeground': panelTabActiveForegroundColor,
|
||||
'--vscode-panelTitle-activeBorder': panelTabActiveBorderColor,
|
||||
'--vscode-panel-background': panelViewBackgroundColor,
|
||||
'--vscode-panel-border': panelViewBorderColor,
|
||||
// "--vscode-panelSectionHeader-background": "?"
|
||||
// "--vscode-panelSectionHeader-foreground": "?"
|
||||
// "--vscode-panelSectionHeader-border": "?"
|
||||
// ---- Symbol & Debug Icons ----
|
||||
};
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
/**
|
||||
* A mapping of all the VS Code theme CSS variables mapped to the
|
||||
* associated attributes that the `vscode-design-system-provider` defines
|
||||
*/
|
||||
export const colorTokensToAttributeNames: any = {
|
||||
// ---- Base Colors ----
|
||||
'--vscode-focusBorder': 'focus-border-color',
|
||||
// ---- Contrast Colors ----
|
||||
// ---- Buttons ----
|
||||
'--vscode-button-background': 'button-primary-background-color',
|
||||
'--vscode-button-foreground': 'button-primary-foreground-color',
|
||||
'--vscode-button-hoverBackground': 'button-primary-hover-background-color',
|
||||
'--vscode-button-secondaryBackground': 'button-secondary-background-color',
|
||||
'--vscode-button-secondaryForeground': 'button-secondary-foreground-color',
|
||||
'--vscode-button-secondaryHoverBackground': 'button-secondary-hover-background-color',
|
||||
'--vscode-extensionButton-prominentForeground': 'button-install-foreground-color',
|
||||
'--vscode-extensionButton-prominentBackground': 'button-install-background-color',
|
||||
'--vscode-extensionButton-prominentHoverBackground': 'button-install-hover-background-color',
|
||||
// ---- Links ----
|
||||
'--vscode-textLink-foreground': 'text-link-foreground-color',
|
||||
// ---- Checkboxes ----
|
||||
'--vscode-checkbox-background': 'checkbox-background-color',
|
||||
'--vscode-checkbox-foreground': 'checkbox-foreground-color',
|
||||
'--vscode-checkbox-border': 'checkbox-border-color',
|
||||
// ---- Breadcrumbs ----
|
||||
'--vscode-breadcrumb-background': 'breadcrumb-item-background-color',
|
||||
'--vscode-breadcrumb-foreground': 'breadcrumb-item-foreground-color',
|
||||
'--vscode-breadcrumb-focusForeground': 'breadcrumb-item-foreground-hover-color',
|
||||
// ---- Dropdowns ----
|
||||
'--vscode-dropdown-background': 'select-background-color',
|
||||
'--vscode-dropdown-foreground': 'select-foreground-color',
|
||||
'--vscode-dropdown-border': 'select-border-color',
|
||||
// ---- Dropdown Options ----
|
||||
'--vscode-list-focusBackground': 'option-background-focus-color',
|
||||
// ---- Badges ----
|
||||
'--vscode-badge-background': 'badge-background-color',
|
||||
'--vscode-badge-foreground': 'badge-foreground-color',
|
||||
// ---- Text Fields & Areas ----
|
||||
'--vscode-input-background': 'input-background-color',
|
||||
'--vscode-input-foreground': 'input-foreground-color',
|
||||
'--vscode-input-border': 'input-border-color',
|
||||
'--vscode-input-placeholderForeground': 'input-placeholder-foreground-color',
|
||||
// ---- Progress Bars & Rings ----
|
||||
'--vscode-progressBar-background': 'progress-background-color',
|
||||
// ---- Tabs ----
|
||||
'--vscode-panel-background': 'tab-panel-background-color',
|
||||
'--vscode-panel-border': 'tab-panel-border-color',
|
||||
'--vscode-panelTitle-inactiveForeground': 'tab-foreground-color',
|
||||
'--vscode-panelTitle-activeForeground': 'tab-active-foreground-color',
|
||||
'--vscode-panelTitle-activeBorder': 'tab-active-border-color',
|
||||
// "--vscode-panelSectionHeader-background": "?"
|
||||
// "--vscode-panelSectionHeader-foreground": "?"
|
||||
// "--vscode-panelSectionHeader-border": "?"
|
||||
// ---- Symbol & Debug Icons ----
|
||||
};
|
||||
|
|
@ -1,229 +0,0 @@
|
|||
/**
|
||||
* Defines the properties in the VS Code Design System
|
||||
* @public
|
||||
*/
|
||||
export interface VSCodeDesignSystem {
|
||||
/**
|
||||
* Global design token defaults.
|
||||
*/
|
||||
baseHeightMultiplier: number;
|
||||
baseHorizontalSpacingMultiplier: number;
|
||||
borderWidth: number;
|
||||
cornerRadius: number;
|
||||
density: number;
|
||||
designUnit: number;
|
||||
disabledOpacity: number;
|
||||
focusBorderColor: string;
|
||||
focusBorderWidth: number;
|
||||
|
||||
/**
|
||||
* Type-ramp font-size and line-height design tokens.
|
||||
*/
|
||||
typeRampMinus2FontSize: string;
|
||||
typeRampMinus2LineHeight: string;
|
||||
typeRampMinus1FontSize: string;
|
||||
typeRampMinus1LineHeight: string;
|
||||
typeRampBaseFontSize: string;
|
||||
typeRampBaseLineHeight: string;
|
||||
typeRampPlus1FontSize: string;
|
||||
typeRampPlus1LineHeight: string;
|
||||
typeRampPlus2FontSize: string;
|
||||
typeRampPlus2LineHeight: string;
|
||||
typeRampPlus3FontSize: string;
|
||||
typeRampPlus3LineHeight: string;
|
||||
typeRampPlus4FontSize: string;
|
||||
typeRampPlus4LineHeight: string;
|
||||
typeRampPlus5FontSize: string;
|
||||
typeRampPlus5LineHeight: string;
|
||||
typeRampPlus6FontSize: string;
|
||||
typeRampPlus6LineHeight: string;
|
||||
|
||||
/**
|
||||
* Button design tokens.
|
||||
*/
|
||||
buttonPrimaryBackgroundColor: string;
|
||||
buttonPrimaryForegroundColor: string;
|
||||
buttonPrimaryHoverBackgroundColor: string;
|
||||
buttonSecondaryBackgroundColor: string;
|
||||
buttonSecondaryForegroundColor: string;
|
||||
buttonSecondaryHoverBackgroundColor: string;
|
||||
buttonInstallBackgroundColor: string;
|
||||
buttonInstallForegroundColor: string;
|
||||
buttonInstallHoverBackgroundColor: string;
|
||||
|
||||
/**
|
||||
* Text link colors.
|
||||
*/
|
||||
textLinkForegroundColor: string;
|
||||
|
||||
/**
|
||||
* Checkbox design tokens.
|
||||
*/
|
||||
checkboxBackgroundColor: string;
|
||||
checkboxForegroundColor: string;
|
||||
checkboxBorderColor: string;
|
||||
checkboxCornerRadius: number;
|
||||
|
||||
/**
|
||||
* Breadcrumb Item design token.
|
||||
*/
|
||||
breadcrumbItemBackgroundColor: string;
|
||||
breadcrumbItemForegroundColor: string;
|
||||
breadcrumbItemForegroundHoverColor: string;
|
||||
|
||||
/**
|
||||
* Dropdown design tokens.
|
||||
*/
|
||||
dropdownBackgroundColor: string;
|
||||
dropdownForegroundColor: string;
|
||||
dropdownBorderColor: string;
|
||||
dropdownCornerRadius: number;
|
||||
|
||||
/**
|
||||
* Option design tokens.
|
||||
*/
|
||||
optionBackgroundFocusColor: string;
|
||||
|
||||
/**
|
||||
* Badge design tokens.
|
||||
*/
|
||||
badgeBackgroundColor: string;
|
||||
badgeForegroundColor: string;
|
||||
|
||||
/**
|
||||
* Text Field & Area design tokens.
|
||||
*/
|
||||
inputBackgroundColor: string;
|
||||
inputForegroundColor: string;
|
||||
inputPlaceholderForegroundColor: string;
|
||||
inputBorderColor: string;
|
||||
|
||||
/**
|
||||
* Progress Bar & Ring design tokens.
|
||||
*/
|
||||
progressBackgroundColor: string;
|
||||
|
||||
/**
|
||||
* Tabs design tokens.
|
||||
*/
|
||||
tabPanelBackgroundColor: string;
|
||||
tabPanelBorderColor: string;
|
||||
tabForegroundColor: string;
|
||||
tabActiveForegroundColor: string;
|
||||
tabActiveBorderColor: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* The default values for {@link VSCodeDesignSystem}
|
||||
* @public
|
||||
*/
|
||||
export const VSCodeDesignSystemDefaults: VSCodeDesignSystem = {
|
||||
/**
|
||||
* Global design token defaults.
|
||||
*/
|
||||
baseHeightMultiplier: 7,
|
||||
baseHorizontalSpacingMultiplier: 3,
|
||||
borderWidth: 1,
|
||||
cornerRadius: 0,
|
||||
density: 0,
|
||||
designUnit: 4,
|
||||
disabledOpacity: 0.4,
|
||||
focusBorderColor: '#007fd4',
|
||||
focusBorderWidth: 1,
|
||||
|
||||
/**
|
||||
* Type-ramp font-size and line-height defaults.
|
||||
*/
|
||||
typeRampMinus2FontSize: '9px',
|
||||
typeRampMinus2LineHeight: '16px',
|
||||
typeRampMinus1FontSize: '11px',
|
||||
typeRampMinus1LineHeight: '16px',
|
||||
typeRampBaseFontSize: '13px',
|
||||
typeRampBaseLineHeight: 'normal',
|
||||
typeRampPlus1FontSize: '16px',
|
||||
typeRampPlus1LineHeight: '24px',
|
||||
typeRampPlus2FontSize: '20px',
|
||||
typeRampPlus2LineHeight: '28px',
|
||||
typeRampPlus3FontSize: '28px',
|
||||
typeRampPlus3LineHeight: '36px',
|
||||
typeRampPlus4FontSize: '34px',
|
||||
typeRampPlus4LineHeight: '44px',
|
||||
typeRampPlus5FontSize: '46px',
|
||||
typeRampPlus5LineHeight: '56px',
|
||||
typeRampPlus6FontSize: '60px',
|
||||
typeRampPlus6LineHeight: '72px',
|
||||
|
||||
/**
|
||||
* Button design token defaults.
|
||||
*/
|
||||
buttonPrimaryBackgroundColor: '#0e639c',
|
||||
buttonPrimaryForegroundColor: '#ffffff',
|
||||
buttonPrimaryHoverBackgroundColor: '#1177bb',
|
||||
buttonSecondaryBackgroundColor: '#3a3d41',
|
||||
buttonSecondaryForegroundColor: '#ffffff',
|
||||
buttonSecondaryHoverBackgroundColor: '#45494e',
|
||||
buttonInstallBackgroundColor: '#0e639c',
|
||||
buttonInstallForegroundColor: '#ffffff',
|
||||
buttonInstallHoverBackgroundColor: '#1177bb',
|
||||
|
||||
/**
|
||||
* Text link defaults.
|
||||
*/
|
||||
textLinkForegroundColor: '#3794ff',
|
||||
|
||||
/**
|
||||
* Checkbox design token defaults.
|
||||
*/
|
||||
checkboxBackgroundColor: '#3c3c3c',
|
||||
checkboxForegroundColor: '#f0f0f0',
|
||||
checkboxBorderColor: '#3c3c3c',
|
||||
checkboxCornerRadius: 3,
|
||||
|
||||
/**
|
||||
* Breadcrumb Item design token defaults.
|
||||
*/
|
||||
breadcrumbItemBackgroundColor: '#1e1e1e',
|
||||
breadcrumbItemForegroundColor: '#cccccccc',
|
||||
breadcrumbItemForegroundHoverColor: '#e0e0e0',
|
||||
|
||||
/**
|
||||
* Dropdown design token defaults.
|
||||
*/
|
||||
dropdownBackgroundColor: '#3c3c3c',
|
||||
dropdownForegroundColor: '#f0f0f0',
|
||||
dropdownBorderColor: '#3c3c3c',
|
||||
dropdownCornerRadius: 5,
|
||||
|
||||
/**
|
||||
* Option design token defaults.
|
||||
*/
|
||||
optionBackgroundFocusColor: '#062f4a',
|
||||
|
||||
/**
|
||||
* Badge design token defaults.
|
||||
*/
|
||||
badgeBackgroundColor: '#4d4d4d',
|
||||
badgeForegroundColor: '#ffffff',
|
||||
|
||||
/**
|
||||
* Text Field & Area design token defaults.
|
||||
*/
|
||||
inputBackgroundColor: '#3c3c3c',
|
||||
inputForegroundColor: '#cccccc',
|
||||
inputPlaceholderForegroundColor: '#cccccc',
|
||||
inputBorderColor: '#3c3c3c',
|
||||
|
||||
/**
|
||||
* Progress Bar & Ring design token defaults.
|
||||
*/
|
||||
progressBackgroundColor: '#0e70c0',
|
||||
|
||||
/**
|
||||
* Tabs design tokens.
|
||||
*/
|
||||
tabPanelBackgroundColor: '#1e1e1e',
|
||||
tabPanelBorderColor: '#80808059',
|
||||
tabForegroundColor: '#e7e7e799',
|
||||
tabActiveForegroundColor: '#e7e7e7',
|
||||
tabActiveBorderColor: '#e7e7e7',
|
||||
};
|
||||
Загрузка…
Ссылка в новой задаче