From d32ce590a3be19944ecf5713e1f389c2b9205a22 Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Tue, 2 Nov 2021 14:42:34 -0700 Subject: [PATCH 01/16] Adjust applyTheme util function logic to fix button theming bug when high contrast theme is used --- src/utilities/theme/applyTheme.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/utilities/theme/applyTheme.ts b/src/utilities/theme/applyTheme.ts index 2f440a0c..61c0b0b8 100644 --- a/src/utilities/theme/applyTheme.ts +++ b/src/utilities/theme/applyTheme.ts @@ -30,7 +30,17 @@ function applyCurrentTheme() { for (const vscodeTokenName in tokenMappings) { const toolkitTokenName = tokenMappings[vscodeTokenName]; const body = document.querySelector('body'); - const value = styles.getPropertyValue(vscodeTokenName).toString(); + let value = styles.getPropertyValue(vscodeTokenName).toString(); + + // When the VS Code high contrast theme is set, button background color CSS variables + // do not exist and will default to the toolkit design token default color values (i.e. + // VS Code dark theme). + // + // This is incorrect theme behavior, so instead, we manually set these color values to + // be transparent. + if (vscodeTokenName.includes('button') && value.length <= 0) { + value = 'transparent'; + } if (body) { toolkitTokenName.setValueFor(body, value); From 34aeedc5379dfee72eed1c8b7f51bf2533760e80 Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 19 Jan 2022 17:36:16 -0800 Subject: [PATCH 02/16] Add prettier-ignore command which fixes a bug where base button focus outlines were not being rendered due to incorrect CSS selector formatting --- src/button/button.styles.ts | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/button/button.styles.ts b/src/button/button.styles.ts index 9865a5c0..e246e799 100644 --- a/src/button/button.styles.ts +++ b/src/button/button.styles.ts @@ -36,8 +36,24 @@ import { } from '../design-tokens'; /** + * Developer note: + * + * The prettier-ignore command is used on this block of code because when removed the + * '.control:${focusVisible}' CSS selector will be automatically reformatted to + * '.control: ${focusVisible}' (note the space between the colon and dollar sign). + * + * This results in non-valid CSS that will not render a focus outline on base buttons. + * + * Additionally, this prettier command must be declared on the entire code block and not + * directly above the CSS selector line because the below code block is template literal + * string which will end up being used directly in the final component CSS. + * + * Thus having '// prettier-ignore' directly in the final CSS will also break the component + * styling. + * * @internal */ +// prettier-ignore const BaseButtonStyles = css` ${display('inline-flex')} :host { outline: none; @@ -76,7 +92,7 @@ const BaseButtonStyles = css` :host(:active) { background: ${buttonPrimaryBackground}; } - .control: ${focusVisible} { + .control:${focusVisible} { outline: calc(${borderWidth} * 1px) solid ${focusBorder}; outline-offset: calc(${borderWidth} * 2px); } From ddd06656fde7d771de5ec5d3cfe0ccfca9bbef6c Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 19 Jan 2022 17:39:50 -0800 Subject: [PATCH 03/16] Fix comment typo --- src/button/button.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/button/button.styles.ts b/src/button/button.styles.ts index e246e799..890004b6 100644 --- a/src/button/button.styles.ts +++ b/src/button/button.styles.ts @@ -45,7 +45,7 @@ import { * This results in non-valid CSS that will not render a focus outline on base buttons. * * Additionally, this prettier command must be declared on the entire code block and not - * directly above the CSS selector line because the below code block is template literal + * directly above the CSS selector line because the below code block is a template literal * string which will end up being used directly in the final component CSS. * * Thus having '// prettier-ignore' directly in the final CSS will also break the component From 7c541ef023be8d251e67821a4da4185d2afa874e Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Thu, 20 Jan 2022 14:38:17 -0800 Subject: [PATCH 04/16] Format file --- src/button/button.styles.ts | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/button/button.styles.ts b/src/button/button.styles.ts index 890004b6..0f949b0b 100644 --- a/src/button/button.styles.ts +++ b/src/button/button.styles.ts @@ -36,19 +36,19 @@ import { } from '../design-tokens'; /** - * Developer note: - * + * Developer note: + * * The prettier-ignore command is used on this block of code because when removed the - * '.control:${focusVisible}' CSS selector will be automatically reformatted to - * '.control: ${focusVisible}' (note the space between the colon and dollar sign). - * + * '.control:${focusVisible}' CSS selector will be automatically reformatted to + * '.control: ${focusVisible}' (note the space between the colon and dollar sign). + * * This results in non-valid CSS that will not render a focus outline on base buttons. - * - * Additionally, this prettier command must be declared on the entire code block and not - * directly above the CSS selector line because the below code block is a template literal + * + * Additionally, this prettier command must be declared on the entire code block and not + * directly above the CSS selector line because the below code block is a template literal * string which will end up being used directly in the final component CSS. - * - * Thus having '// prettier-ignore' directly in the final CSS will also break the component + * + * Thus having '// prettier-ignore' directly in the final CSS will also break the component * styling. * * @internal From 86aea493bd6749da5b71ade2ffd3f4b4a55a9362 Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Thu, 20 Jan 2022 14:46:22 -0800 Subject: [PATCH 05/16] Clean up setup webview test env script a bit --- scripts/setup-webview-test-env.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/scripts/setup-webview-test-env.js b/scripts/setup-webview-test-env.js index 69e8d01d..da49810b 100644 --- a/scripts/setup-webview-test-env.js +++ b/scripts/setup-webview-test-env.js @@ -6,7 +6,7 @@ const path = require('path'); const process = require('process'); const util = require('util'); -const execPromise = util.promisify(exec); +const execShellCommand = util.promisify(exec); async function main() { // Empty print line to pretty-ify command line output @@ -51,10 +51,6 @@ async function main() { console.log(); } -async function execShellCommand(command) { - return await execPromise(command); -} - function delDir(path) { if (fs.existsSync(path) && fs.lstatSync(path).isDirectory()) { fs.readdirSync(path).forEach(function (file, index) { From 46f0888a40eaed92a97cb05eff254e0fd396c519 Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Thu, 20 Jan 2022 16:19:27 -0800 Subject: [PATCH 06/16] Revamp apply theme utilities to handle high contrast theme styling edge case --- src/utilities/design-tokens/create.ts | 4 +-- src/utilities/theme/applyTheme.ts | 52 ++++++++++++++++----------- 2 files changed, 33 insertions(+), 23 deletions(-) diff --git a/src/utilities/design-tokens/create.ts b/src/utilities/design-tokens/create.ts index cb9647c8..b74af3ed 100644 --- a/src/utilities/design-tokens/create.ts +++ b/src/utilities/design-tokens/create.ts @@ -18,7 +18,7 @@ export type T = * A mapping of all the Visual Studio Code theme CSS variables mapped to the * toolkit design tokens. */ -export const tokenMappings: {[index: string]: CSSDesignToken} = {}; +export const tokenMappings: Map> = new Map(); /** * Boolean flag that ensures the VS Code theme listener is initialized once. @@ -43,7 +43,7 @@ export function create(name: string, vscodeThemeVar?: string) { const designToken = DesignToken.create(name); if (vscodeThemeVar) { - tokenMappings[vscodeThemeVar] = designToken; + tokenMappings.set(vscodeThemeVar, designToken); } if (!isThemeListenerInitialized) { initThemeChangeListener(tokenMappings); diff --git a/src/utilities/theme/applyTheme.ts b/src/utilities/theme/applyTheme.ts index e5825b78..0f6fce31 100644 --- a/src/utilities/theme/applyTheme.ts +++ b/src/utilities/theme/applyTheme.ts @@ -8,9 +8,9 @@ import type {T} from '../design-tokens/create'; * Configures a MutationObserver to watch for Visual Studio Code theme changes and * applies the current Visual Studio Code theme to the toolkit components. */ -export function initThemeChangeListener(tokenMappings: { - [index: string]: CSSDesignToken; -}) { +export function initThemeChangeListener( + tokenMappings: Map> +) { window.addEventListener('load', () => { const observer = new MutationObserver(() => { applyCurrentTheme(tokenMappings); @@ -27,31 +27,41 @@ export function initThemeChangeListener(tokenMappings: { /** * Applies the current Visual Studio Code theme to the toolkit components. */ -function applyCurrentTheme(tokenMappings: { - [index: string]: CSSDesignToken; -}) { +function applyCurrentTheme(tokenMappings: Map>) { // Get all the styles applied to the tag in the webview HTML // Importantly this includes all the CSS variables associated with the // current Visual Studio Code theme const styles = getComputedStyle(document.body); + const body = document.querySelector('body'); - for (const vscodeTokenName in tokenMappings) { - const toolkitTokenName = tokenMappings[vscodeTokenName]; - const body = document.querySelector('body'); - let value = styles.getPropertyValue(vscodeTokenName).toString(); + if (body) { + const themeKind = body.getAttribute('data-vscode-theme-kind'); + for (const [vscodeTokenName, toolkitToken] of tokenMappings) { + let value = styles.getPropertyValue(vscodeTokenName).toString(); - // When the VS Code high contrast theme is set, button background color CSS variables - // do not exist and will default to the toolkit design token default color values (i.e. - // VS Code dark theme). - // - // This is incorrect theme behavior, so instead, we manually set these color values to - // be transparent. - if (vscodeTokenName.includes('button') && value.length <= 0) { - value = 'transparent'; - } + // Handle a couple of styling edge cases when a high contrast theme is applied + if (themeKind === 'vscode-high-contrast') { + // Developer note: + // + // There a handful of VS Code theme tokens that have no value when a high + // contrast theme is applied. + // + // This is an issue because when no value is set the toolkit tokens will fall + // back to their default color values (aka the VS Code dark theme color palette). + // This results in the backgrounds of a couple of components having default dark + // theme colors––thus breaking the high contrast theme. + // + // The below code, catches these tokens which have no value and are also background + // tokens, then overrides their value to be transparent. + if ( + value.length === 0 && + toolkitToken.name.includes('background') + ) { + value = 'transparent'; + } + } - if (body) { - toolkitTokenName.setValueFor(body, value); + toolkitToken.setValueFor(body, value); } } } From 15194d9ebf2caf175a51fb445162176fdaae2327 Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Thu, 20 Jan 2022 16:21:01 -0800 Subject: [PATCH 07/16] Switch out design tokens to address a themeing bug in the data grid row sticky header --- src/data-grid/data-grid-row.styles.ts | 8 ++------ src/design-tokens.ts | 2 +- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/data-grid/data-grid-row.styles.ts b/src/data-grid/data-grid-row.styles.ts index 3aa1d922..b33fe15f 100644 --- a/src/data-grid/data-grid-row.styles.ts +++ b/src/data-grid/data-grid-row.styles.ts @@ -6,11 +6,7 @@ import { ElementDefinitionContext, FoundationElementDefinition, } from '@microsoft/fast-foundation'; -import { - designUnit, - listHoverBackground, - quickInputBackground, -} from '../design-tokens'; +import {background, designUnit, listHoverBackground} from '../design-tokens'; export const dataGridRowStyles = ( context: ElementDefinitionContext, @@ -26,7 +22,7 @@ export const dataGridRowStyles = ( :host(.header) { } :host(.sticky-header) { - background: ${quickInputBackground}; + background: ${background}; position: sticky; top: 0; } diff --git a/src/design-tokens.ts b/src/design-tokens.ts index 1a182dd1..fa41e14a 100644 --- a/src/design-tokens.ts +++ b/src/design-tokens.ts @@ -7,6 +7,7 @@ import {create} from './utilities/design-tokens/create'; * Global design tokens. */ +export const background = create('background', '--vscode-editor-background').withDefault('#1e1e1e'); export const borderWidth = create('border-width').withDefault(1); export const contrastActiveBorder = create('contrast-active-border', '--vscode-contrastActiveBorder').withDefault('#f38518'); export const contrastBorder = create('contrast-border', '--vscode-contrastBorder').withDefault('#6fc3df'); @@ -73,7 +74,6 @@ export const checkboxForeground = create('checkbox-foreground', '--vscod export const listActiveSelectionBackground = create('list-active-selection-background', '--vscode-list-activeSelectionBackground').withDefault('#094771'); export const listActiveSelectionForeground = create('list-active-selection-foreground', '--vscode-list-activeSelectionForeground').withDefault('#ffffff'); export const listHoverBackground = create('list-hover-background', '--vscode-list-hoverBackground').withDefault('#2a2d2e'); -export const quickInputBackground = create('quick-input-background', '--vscode-quickInput-background').withDefault('#252526'); /** * Divider design tokens. From a3894c4143c91aab869457ad0e5dce83e12dfbf3 Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Tue, 25 Jan 2022 11:20:33 -0800 Subject: [PATCH 08/16] Add todo comment --- src/utilities/theme/applyTheme.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/utilities/theme/applyTheme.ts b/src/utilities/theme/applyTheme.ts index 0f6fce31..4121797b 100644 --- a/src/utilities/theme/applyTheme.ts +++ b/src/utilities/theme/applyTheme.ts @@ -59,6 +59,13 @@ function applyCurrentTheme(tokenMappings: Map>) { ) { value = 'transparent'; } + + // Apply high-contrast-theme-specifc styling to data grid + // row outlines and icon button outlines + // + // Data grid outline: + // outline: 1px dotted #f38518; ${contrast-active-border} + // outline-offset: -1px; } toolkitToken.setValueFor(body, value); From 636fc1f8abe62e4ad06e6fb9252e1e3785c5e127 Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 2 Feb 2022 15:40:18 -0800 Subject: [PATCH 09/16] Update data grid styles to include a hover outline in high contrast mode --- src/data-grid/data-grid-row.styles.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/data-grid/data-grid-row.styles.ts b/src/data-grid/data-grid-row.styles.ts index b33fe15f..e4ad4b5c 100644 --- a/src/data-grid/data-grid-row.styles.ts +++ b/src/data-grid/data-grid-row.styles.ts @@ -6,7 +6,12 @@ import { ElementDefinitionContext, FoundationElementDefinition, } from '@microsoft/fast-foundation'; -import {background, designUnit, listHoverBackground} from '../design-tokens'; +import { + background, + contrastActiveBorder, + designUnit, + listHoverBackground, +} from '../design-tokens'; export const dataGridRowStyles = ( context: ElementDefinitionContext, @@ -28,5 +33,7 @@ export const dataGridRowStyles = ( } :host(:hover) { background: ${listHoverBackground}; + outline: 1px dotted ${contrastActiveBorder}; + outline-offset: -1px; } `; From 9380aec6ddd4e1b50e61f15df5186cba4fc40981 Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 2 Feb 2022 15:40:48 -0800 Subject: [PATCH 10/16] Update icon button styles to fix a high contrast theme bug --- src/button/button.styles.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/button/button.styles.ts b/src/button/button.styles.ts index 0f949b0b..a054dd32 100644 --- a/src/button/button.styles.ts +++ b/src/button/button.styles.ts @@ -25,6 +25,7 @@ import { buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground, + contrastActiveBorder, cornerRadius, designUnit, disabledOpacity, @@ -177,9 +178,12 @@ const IconButtonStyles = css` } :host([appearance='icon']:hover) { background: ${buttonIconHoverBackground}; + outline: 1px dotted ${contrastActiveBorder}; + outline-offset: -1px; } :host([appearance='icon']) .control { padding: ${buttonIconPadding}; + border: calc(${borderWidth} * 1px) solid transparent; } :host([appearance='icon']:active) .control:active { background: ${buttonIconHoverBackground}; From d88ada0f6b1f6fd342f872de4ea5de22e4c8e5fb Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 2 Feb 2022 15:41:20 -0800 Subject: [PATCH 11/16] Create a new design token to help with fixing the icon button high contrast theme bug --- src/design-tokens.ts | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/design-tokens.ts b/src/design-tokens.ts index fa41e14a..40223c8a 100644 --- a/src/design-tokens.ts +++ b/src/design-tokens.ts @@ -3,6 +3,23 @@ import {create} from './utilities/design-tokens/create'; +/** + * A note about `--fake-vscode-token` usage: + * + * There are some tokens defined in this file that make use of `--fake-vscode-token`. This is + * done when a toolkit token should be added to the tokenMappings map (and subsequently altered + * in the applyTheme function) but does not have a corresponding VS Code token that can be used. + * + * An example is buttonIconHoverBackground token which does not have a corresponding VS Code token + * at this time (it's a hardcoded value in VS Code), but needs to be adjusted to transparent when a + * high contrast theme is applied. + * + * As a rule of thumb, if there are special cases where a token needs to be adjusted based on the + * VS Code theme and does not have a corresponding VS Code token, the `--fake-vscode-token` can be used + * to indicate that it should be added to the tokenMappings map and thus make it accessible to the + * applyTheme function where it can be adjusted. + */ + /** * Global design tokens. */ @@ -47,7 +64,8 @@ export const buttonBorder = create('button-border', '--vscode-button-bor export const buttonIconBackground = create('button-icon-background').withDefault('transparent'); export const buttonIconCornerRadius = create('button-icon-corner-radius').withDefault('5px'); export const buttonIconFocusBorderOffset = create('button-icon-outline-offset').withDefault(0); -export const buttonIconHoverBackground = create('button-icon-hover-background').withDefault('rgba(90, 93, 94, 0.31)'); +// Note usage of `--fake-vscode-token` (refer to doc comment at top of file for explanation). +export const buttonIconHoverBackground = create('button-icon-hover-background', '--fake-vscode-token').withDefault('rgba(90, 93, 94, 0.31)'); export const buttonIconPadding = create('button-icon-padding').withDefault('3px'); export const buttonPrimaryBackground = create('button-primary-background', '--vscode-button-background').withDefault('#0e639c'); export const buttonPrimaryForeground = create('button-primary-foreground', '--vscode-button-foreground').withDefault('#ffffff'); From 7aa21ca36b79a6540427d8e3fb6b9299311e6d5d Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 2 Feb 2022 15:42:09 -0800 Subject: [PATCH 12/16] Update applyTheme and create token logic in order fix high contrast theme bugs in the data grid and icon button components --- src/utilities/design-tokens/create.ts | 6 ++++++ src/utilities/theme/applyTheme.ts | 17 ++++++++++------- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/utilities/design-tokens/create.ts b/src/utilities/design-tokens/create.ts index b74af3ed..66b6327d 100644 --- a/src/utilities/design-tokens/create.ts +++ b/src/utilities/design-tokens/create.ts @@ -43,6 +43,12 @@ export function create(name: string, vscodeThemeVar?: string) { const designToken = DesignToken.create(name); if (vscodeThemeVar) { + // If the fake vscode token is passed in, attach a unique ID to it so that it can + // be added to the tokenMappings map without overriding a previous fake token value + if (vscodeThemeVar.includes('--fake-vscode-token')) { + const uniqueId = 'id' + Math.random().toString(16).slice(2); + vscodeThemeVar = `${vscodeThemeVar}-${uniqueId}`; + } tokenMappings.set(vscodeThemeVar, designToken); } if (!isThemeListenerInitialized) { diff --git a/src/utilities/theme/applyTheme.ts b/src/utilities/theme/applyTheme.ts index 4121797b..7e2fba0f 100644 --- a/src/utilities/theme/applyTheme.ts +++ b/src/utilities/theme/applyTheme.ts @@ -43,7 +43,7 @@ function applyCurrentTheme(tokenMappings: Map>) { if (themeKind === 'vscode-high-contrast') { // Developer note: // - // There a handful of VS Code theme tokens that have no value when a high + // There are a handful of VS Code theme tokens that have no value when a high // contrast theme is applied. // // This is an issue because when no value is set the toolkit tokens will fall @@ -60,12 +60,15 @@ function applyCurrentTheme(tokenMappings: Map>) { value = 'transparent'; } - // Apply high-contrast-theme-specifc styling to data grid - // row outlines and icon button outlines - // - // Data grid outline: - // outline: 1px dotted #f38518; ${contrast-active-border} - // outline-offset: -1px; + // Set icon button hover to be transparent when in high contrast mode + if (toolkitToken.name === 'button-icon-hover-background') { + value = 'transparent'; + } + } else { + // Set contrast-active-border token to be transparent in non-high-contrast mode + if (toolkitToken.name === 'contrast-active-border') { + value = 'transparent'; + } } toolkitToken.setValueFor(body, value); From 7a6025fedad458f754069530c4832cabe60eab3b Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 2 Feb 2022 15:49:20 -0800 Subject: [PATCH 13/16] Update dev comment in design tokens file --- src/design-tokens.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/design-tokens.ts b/src/design-tokens.ts index 40223c8a..7d2b191a 100644 --- a/src/design-tokens.ts +++ b/src/design-tokens.ts @@ -4,20 +4,20 @@ import {create} from './utilities/design-tokens/create'; /** - * A note about `--fake-vscode-token` usage: + * Developer note: * * There are some tokens defined in this file that make use of `--fake-vscode-token`. This is * done when a toolkit token should be added to the tokenMappings map (and subsequently altered * in the applyTheme function) but does not have a corresponding VS Code token that can be used. * * An example is buttonIconHoverBackground token which does not have a corresponding VS Code token - * at this time (it's a hardcoded value in VS Code), but needs to be adjusted to transparent when a + * at this time (it's a hardcoded value in VS Code), but needs to be adjusted to be transparent when a * high contrast theme is applied. * * As a rule of thumb, if there are special cases where a token needs to be adjusted based on the - * VS Code theme and does not have a corresponding VS Code token, the `--fake-vscode-token` can be used + * VS Code theme and does not have a corresponding VS Code token, `--fake-vscode-token` can be used * to indicate that it should be added to the tokenMappings map and thus make it accessible to the - * applyTheme function where it can be adjusted. + * applyTheme function where it can be dynamically adjusted. */ /** From c5d7e23731f32061e74db2718ff9ea7a52afca1e Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 2 Feb 2022 15:52:30 -0800 Subject: [PATCH 14/16] Update code comments --- src/utilities/theme/applyTheme.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utilities/theme/applyTheme.ts b/src/utilities/theme/applyTheme.ts index 7e2fba0f..8496d4a7 100644 --- a/src/utilities/theme/applyTheme.ts +++ b/src/utilities/theme/applyTheme.ts @@ -60,12 +60,12 @@ function applyCurrentTheme(tokenMappings: Map>) { value = 'transparent'; } - // Set icon button hover to be transparent when in high contrast mode + // Set icon button hover to be transparent when in high contrast themes if (toolkitToken.name === 'button-icon-hover-background') { value = 'transparent'; } } else { - // Set contrast-active-border token to be transparent in non-high-contrast mode + // Set contrast-active-border token to be transparent in non-high-contrast themes if (toolkitToken.name === 'contrast-active-border') { value = 'transparent'; } From 3cf33640e006b5e58eb1386fa8044208f37e2610 Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 2 Feb 2022 15:52:54 -0800 Subject: [PATCH 15/16] Update code comments --- src/utilities/theme/applyTheme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utilities/theme/applyTheme.ts b/src/utilities/theme/applyTheme.ts index 8496d4a7..66bfb03f 100644 --- a/src/utilities/theme/applyTheme.ts +++ b/src/utilities/theme/applyTheme.ts @@ -60,7 +60,7 @@ function applyCurrentTheme(tokenMappings: Map>) { value = 'transparent'; } - // Set icon button hover to be transparent when in high contrast themes + // Set icon button hover to be transparent in high contrast themes if (toolkitToken.name === 'button-icon-hover-background') { value = 'transparent'; } From d439a98c3cb44eb562600ac795c5513312a3d1d6 Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Thu, 3 Feb 2022 13:23:18 -0800 Subject: [PATCH 16/16] Fix test script sample extension install path --- scripts/setup-webview-test-env.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/setup-webview-test-env.js b/scripts/setup-webview-test-env.js index eb6eabb6..1e95f371 100644 --- a/scripts/setup-webview-test-env.js +++ b/scripts/setup-webview-test-env.js @@ -14,7 +14,7 @@ async function main() { if (!fs.existsSync('./test-webview')) { try { console.log(color(['dim'], 'Copying webview test environment locally...')); - await execShellCommand('npx degit microsoft/vscode-webview-ui-toolkit-samples/all-components test-webview'); + await execShellCommand('npx degit microsoft/vscode-webview-ui-toolkit-samples/default/all-components test-webview'); } catch (err) { console.log(`${color(['red'], 'Error: Could not copy webview test environment locally')}\n ${err}`); process.exit();