Update Extension Utilities (#56)

Update the VSCode extension utility functions to correctly apply VSCode themes to all of the components.

Also, add some new design tokens and clean up the Badge Storybook stories.

.prettierrc

@@ -9,5 +9,13 @@
 	"trailingComma": "es5",
 	"bracketSpacing": false,
 	"jsxBracketSameLine": true,
-	"arrowParens": "avoid"
+	"arrowParens": "avoid",
+	"overrides": [
+		{
+			"files": "tokensToAttributes.ts",
+			"options": {
+				"printWidth": 100
+			}
+		}
+	]
 }

docs/api-report.md

@@ -144,6 +144,9 @@ export class VSCodeDataGridRow extends DataGridRow {
 
 // @public
 export interface VSCodeDesignSystem {
+    badgeBackgroundColor: string;
+    // (undocumented)
+    badgeForegroundColor: string;
     baseHeightMultiplier: number;
     // (undocumented)
     baseHorizontalSpacingMultiplier: number;
@@ -154,6 +157,12 @@ export interface VSCodeDesignSystem {
     breadcrumbItemForegroundColor: string;
     // (undocumented)
     breadcrumbItemForegroundHoverColor: string;
+    // (undocumented)
+    buttonInstallBackgroundColor: string;
+    // (undocumented)
+    buttonInstallForegroundColor: string;
+    // (undocumented)
+    buttonInstallHoverBackgroundColor: string;
     buttonPrimaryBackgroundColor: string;
     // (undocumented)
     buttonPrimaryForegroundColor: string;
@@ -184,13 +193,31 @@ export interface VSCodeDesignSystem {
     focusBorderColor: string;
     // (undocumented)
     focusBorderWidth: number;
+    inputBackgroundColor: string;
+    // (undocumented)
+    inputBorderColor: string;
+    // (undocumented)
+    inputForegroundColor: string;
+    // (undocumented)
+    inputPlaceholderForegroundColor: string;
+    optionBackgroundFocusColor: string;
+    progressBackgroundColor: string;
     selectBackgroundColor: string;
     // (undocumented)
     selectBorderColor: string;
     // (undocumented)
     selectCornerRadius: number;
     // (undocumented)
     selectForegroundColor: string;
+    // (undocumented)
+    tabActiveBorderColor: string;
+    // (undocumented)
+    tabActiveForegroundColor: string;
+    // (undocumented)
+    tabForegroundColor: string;
+    tabPanelBackgroundColor: string;
+    // (undocumented)
+    tabPanelBorderColor: string;
     textLinkForegroundColor: string;
     // (undocumented)
     typeRampBaseFontSize: string;
@@ -234,12 +261,17 @@ 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;
@@ -256,10 +288,21 @@ export class VSCodeDesignSystemProvider extends DesignSystemProvider implements
     disabledOpacity: number;
     focusBorderColor: string;
     focusBorderWidth: number;
+    inputBackgroundColor: string;
+    inputBorderColor: string;
+    inputForegroundColor: string;
+    inputPlaceholderForegroundColor: string;
+    optionBackgroundFocusColor: string;
+    progressBackgroundColor: string;
     selectBackgroundColor: string;
     selectBorderColor: string;
     selectCornerRadius: number;
     selectForegroundColor: string;
+    tabActiveBorderColor: string;
+    tabActiveForegroundColor: string;
+    tabForegroundColor: string;
+    tabPanelBackgroundColor: string;
+    tabPanelBorderColor: string;
     textLinkForegroundColor: string;
     typeRampBaseFontSize: string;
     typeRampBaseLineHeight: string;

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vscode-webview-toolkit",
-	"version": "0.0.27",
+	"version": "0.0.31",
 	"description": "A component library for creating webview-based extensions in Visual Studio Code.",
 	"homepage": "https://github.com/microsoft/vscode-webview-toolkit#readme",
 	"license": "MIT",
@@ -52,6 +52,7 @@
 		"@storybook/html": "^6.1.18",
 		"@storybook/theming": "^6.1.18",
 		"@types/jest": "^26.0.20",
+		"@types/vscode": "^1.54.0",
 		"babel-jest": "^26.6.3",
 		"babel-loader": "^8.2.2",
 		"babel-plugin-transform-class-properties": "^6.24.1",

src/badge/badge.stories.ts

@@ -40,15 +40,14 @@ Default.parameters = {
 
 export const WithFill: any = Template.bind({});
 WithFill.args = {
-	label: '1 UNSAVED',
-	fill: '#4d4d4d',
+	...Default.args,
+	fill: '#007aac',
 	textColor: '#ffffff',
-	isCircular: false,
 };
 WithFill.parameters = {
 	docs: {
 		source: {
-			code: `vscode-badge {\n\t--badge-fill-foo: #4d4d4d;\n\t--badge-color-bar: #ffffff;\n}\n<vscode-badge fill="foo" color="bar">1 UNSAVED</vscode-badge>`,
+			code: `vscode-badge {\n\t--badge-fill-foo: #007aac;\n\t--badge-color-bar: #ffffff;\n}\n<vscode-badge fill="foo" color="bar">Badge Text</vscode-badge>`,
 		},
 	},
 };
@@ -63,7 +62,7 @@ WithCircular.args = {
 WithCircular.parameters = {
 	docs: {
 		source: {
-			code: `vscode-badge {\n\t--badge-fill-foo: #007aac;\n\t--badge-color-bar: #ffffff;\n}\n<vscode-badge fill="foo" color="bar" circular="true">1</vscode-badge>`,
+			code: `vscode-badge {\n\t--badge-fill-foo: #007aac;\n\t--badge-color-bar: #ffffff;\n}\n<vscode-badge fill="foo" color="bar" circular>1</vscode-badge>`,
 		},
 	},
 };

src/badge/badge.styles.ts

@@ -12,10 +12,8 @@ export const BadgeStyles = css`
 	.control {
 		border-radius: 2px;
 		padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px);
-		color: #cccccc;
-		font-weight: 600;
-	}
-	.control[style] {
+		color: var(--badge-foreground-color);
+		background-color: var(--badge-background-color);
 		font-weight: 400;
 	}
 	:host([circular]) .control {

src/badge/fixtures/createBadge.ts

@@ -27,7 +27,7 @@ export function createBadge({label, fill, textColor, isCircular}: BadgeArgs) {
 		badge.setAttribute('color', 'bar');
 	}
 	if (isCircular) {
-		badge.setAttribute('circular', isCircular.toString());
+		badge.setAttribute('circular', '');
 	}
 
 	return badge;

src/button/button.styles.ts

@@ -139,25 +139,25 @@ const SecondaryButtonStyles = css`
  */
 const InstallButtonStyles = css`
 	:host([appearance='install']) {
-		background: var(--button-primary-background-color);
-		color: var(--button-primary-foreground-color);
+		background: var(--button-install-background-color);
+		color: var(--button-install-foreground-color);
 	}
 	:host([appearance='install']:hover) {
-		background: var(--button-primary-hover-background-color);
+		background: var(--button-install-hover-background-color);
 	}
 	:host([appearance='install']) .control {
 		padding: 2px 6px;
 	}
 	:host([appearance='install']:active) .control:active {
-		background: var(--button-primary-background-color);
+		background: var(--button-install-background-color);
 	}
 	:host([appearance='install']) .control:${focusVisible} {
 		outline: calc(var(--focus-border-width) * 1px) solid
-			var(--button-primary-hover-background-color);
+			var(--button-install-hover-background-color);
 		outline-offset: calc(var(--focus-border-width) * 1px);
 	}
 	:host([appearance='install'][disabled]) {
-		background: var(--button-primary-background-color);
+		background: var(--button-install-background-color);
 	}
 `;