From cad5470b2ec4cd81e004628390c9152913e6ce00 Mon Sep 17 00:00:00 2001 From: bendera Date: Sun, 2 Mar 2025 01:11:27 +0100 Subject: [PATCH 1/2] Add Select fallback styles --- src/includes/vscode-select/styles.ts | 96 ++++++++++++++-------------- 1 file changed, 48 insertions(+), 48 deletions(-) diff --git a/src/includes/vscode-select/styles.ts b/src/includes/vscode-select/styles.ts index ab219738d..ed82f3d04 100644 --- a/src/includes/vscode-select/styles.ts +++ b/src/includes/vscode-select/styles.ts @@ -18,16 +18,16 @@ export default [ .select-face, .combobox-face { - background-color: var(--vscode-settings-dropdownBackground); - border-color: var(--vscode-settings-dropdownBorder); + background-color: var(--vscode-settings-dropdownBackground, #313131); + border-color: var(--vscode-settings-dropdownBorder, #3c3c3c); border-radius: 2px; border-style: solid; border-width: 1px; box-sizing: border-box; - color: var(--vscode-settings-dropdownForeground); - font-family: var(--vscode-font-family); - font-size: var(--vscode-font-size); - font-weight: var(--vscode-font-weight); + color: var(--vscode-settings-dropdownForeground, #cccccc); + font-family: var(--vscode-font-family, sans-serif); + font-size: var(--vscode-font-size, 13px); + font-weight: var(--vscode-font-weight, normal); line-height: 18px; position: relative; user-select: none; @@ -38,7 +38,7 @@ export default [ :host(:invalid) .select-face, :host([invalid]) .combobox-face, :host(:invalid) .combobox-face { - background-color: var(--vscode-inputValidation-errorBackground); + background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d); border-color: var(--vscode-inputValidation-errorBorder, #be1100); } @@ -59,9 +59,9 @@ export default [ } .select-face-badge { - background-color: var(--vscode-badge-background); + background-color: var(--vscode-badge-background, #616161); border-radius: 2px; - color: var(--vscode-badge-foreground); + color: var(--vscode-badge-foreground, #f8f8f8); display: inline-block; flex-shrink: 0; font-size: 11px; @@ -85,7 +85,7 @@ export default [ :host(:focus) .combobox-face, :host([focused]) .select-face, :host([focused]) .combobox-face { - border-color: var(--vscode-focusBorder); + border-color: var(--vscode-focusBorder, #0078d4); outline: none; } @@ -93,10 +93,10 @@ export default [ background-color: transparent; box-sizing: border-box; border: 0; - color: var(--vscode-foreground); + color: var(--vscode-foreground, #cccccc); display: block; - font-family: var(--vscode-font-family); - font-size: var(--vscode-font-size); + font-family: var(--vscode-font-family, sans-serif); + font-size: var(--vscode-font-size, 13px); line-height: 16px; padding: 4px; width: 100%; @@ -109,7 +109,7 @@ export default [ .combobox-button { background-color: transparent; border: 0; - color: var(--vscode-foreground); + color: var(--vscode-foreground, #cccccc); cursor: pointer; flex-shrink: 0; height: 24px; @@ -120,7 +120,7 @@ export default [ .combobox-button:focus, .combobox-button:hover { - background-color: var(--vscode-list-hoverBackground); + background-color: var(--vscode-list-hoverBackground, #2a2d2e); } .combobox-button:focus { @@ -128,7 +128,7 @@ export default [ } .icon { - color: var(--vscode-foreground); + color: var(--vscode-foreground, #cccccc); display: block; height: 14px; pointer-events: none; @@ -139,14 +139,14 @@ export default [ } .icon svg { - color: var(--vscode-foreground); + color: var(--vscode-foreground, #cccccc); height: 100%; width: 100%; } .dropdown { - background-color: var(--vscode-settings-dropdownBackground); - border-color: var(--vscode-settings-dropdownListBorder); + background-color: var(--vscode-settings-dropdownBackground, #313131); + border-color: var(--vscode-settings-dropdownListBorder, #454545); border-radius: 0 0 3px 3px; border-style: solid; border-width: 1px; @@ -169,7 +169,7 @@ export default [ :host(:focus) .dropdown, :host([focused]) .dropdown { - border-color: var(--vscode-focusBorder); + border-color: var(--vscode-focusBorder, #0078d4); } .options { @@ -184,12 +184,12 @@ export default [ .option { align-items: center; - color: var(--vscode-foreground); + color: var(--vscode-foreground, #cccccc); cursor: pointer; display: flex; - font-family: var(--vscode-font-family); - font-size: var(--vscode-font-size); - font-weight: var(--vscode-font-weight); + font-family: var(--vscode-font-family, sans-serif); + font-size: var(--vscode-font-size, 13px); + font-weight: var(--vscode-font-weight, normal); line-height: 18px; min-height: calc(var(--vscode-font-size) * 1.3); padding: 1px 3px; @@ -200,16 +200,16 @@ export default [ } .option b { - color: var(--vscode-list-highlightForeground); + color: var(--vscode-list-highlightForeground, #2aaaff); } .option.active b { - color: var(--vscode-list-focusHighlightForeground); + color: var(--vscode-list-focusHighlightForeground, #2aaaff); } .option:not(.disabled):hover { - background-color: var(--vscode-list-hoverBackground); - color: var(--vscode-list-hoverForeground); + background-color: var(--vscode-list-hoverBackground, #2a2d2e); + color: var(--vscode-list-hoverForeground, #ffffff); } :host-context(body[data-vscode-theme-kind='vscode-high-contrast']) @@ -217,7 +217,7 @@ export default [ :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light']) .option:hover { border-style: dotted; - border-color: var(--vscode-list-focusOutline); + border-color: var(--vscode-list-focusOutline, #0078d4); } .option.disabled { @@ -227,9 +227,9 @@ export default [ .option.active, .option.active:hover { - background-color: var(--vscode-list-activeSelectionBackground); - color: var(--vscode-list-activeSelectionForeground); - border-color: var(--vscode-list-activeSelectionBackground); + background-color: var(--vscode-list-activeSelectionBackground, #04395e); + color: var(--vscode-list-activeSelectionForeground, #ffffff); + border-color: var(--vscode-list-activeSelectionBackground, #04395e); border-style: solid; border-width: 1px; } @@ -238,7 +238,7 @@ export default [ .option.active, :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light']) .option.active:hover { - border-color: var(--vscode-list-focusOutline); + border-color: var(--vscode-list-focusOutline, #0078d4); border-style: dashed; } @@ -249,18 +249,18 @@ export default [ } .dropdown.multiple .option.selected { - background-color: var(--vscode-list-hoverBackground); - border-color: var(--vscode-list-hoverBackground); + background-color: var(--vscode-list-hoverBackground, #2a2d2e); + border-color: var(--vscode-list-hoverBackground, #2a2d2e); } .dropdown.multiple .option.selected.active { - background-color: var(--vscode-list-activeSelectionBackground); - color: var(--vscode-list-activeSelectionForeground); - border-color: var(--vscode-list-activeSelectionBackground); + background-color: var(--vscode-list-activeSelectionBackground, #04395e); + color: var(--vscode-list-activeSelectionForeground, #ffffff); + border-color: var(--vscode-list-activeSelectionBackground, #04395e); } .checkbox-icon { - background-color: var(--vscode-settings-checkboxBackground); + background-color: var(--vscode-settings-checkboxBackground, #313131); border: 1px solid currentColor; border-radius: 2px; box-sizing: border-box; @@ -282,13 +282,13 @@ export default [ } .checkbox-icon.checked:before { - background-color: var(--vscode-foreground); + background-color: var(--vscode-foreground, #cccccc); left: 1px; top: 2.5px; } .checkbox-icon.checked:after { - background-color: var(--vscode-settings-checkboxBackground); + background-color: var(--vscode-settings-checkboxBackground, #313131); left: 1px; top: -0.5px; } @@ -307,7 +307,7 @@ export default [ align-items: center; background-color: transparent; border: 0; - color: var(--vscode-foreground); + color: var(--vscode-foreground, #cccccc); cursor: pointer; display: flex; height: 24px; @@ -321,18 +321,18 @@ export default [ } .action-icon:focus-visible { - outline: 1px solid var(--vscode-focusBorder); + outline: 1px solid var(--vscode-focusBorder, #0078d4); outline-offset: -1px; } .description { - border-color: var(--vscode-settings-dropdownBorder); + border-color: var(--vscode-settings-dropdownBorder, #3c3c3c); border-style: solid; border-width: 1px 0 0; - color: var(--vscode-foreground); - font-family: var(--vscode-font-family); - font-size: var(--vscode-font-size); - font-weight: var(--vscode-font-weight); + color: var(--vscode-foreground, #cccccc); + font-family: var(--vscode-font-family, sans-serif); + font-size: var(--vscode-font-size, 13px); + font-weight: var(--vscode-font-weight, normal); line-height: 1.3; padding: 6px 4px; word-wrap: break-word; From 5d896ddeb044d14fc58d6cea3259a7b315be4334 Mon Sep 17 00:00:00 2001 From: bendera Date: Sun, 2 Mar 2025 23:44:02 +0100 Subject: [PATCH 2/2] Add fallback styles to Select components --- CHANGELOG.md | 3 +- dev/vscode-multi-select/fallback-styles.html | 31 ++++++++++++++ .../vscode-multi-select.ts | 42 +++++++++---------- .../vscode-single-select.ts | 42 ++++++++++--------- 4 files changed, 76 insertions(+), 42 deletions(-) create mode 100644 dev/vscode-multi-select/fallback-styles.html diff --git a/CHANGELOG.md b/CHANGELOG.md index 7d69883d1..d9d3b733b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,7 +14,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) ### Added -- Added fallback styles to **Textarea**, **Collapsible**, **Checkbox**, **Radio**. +- Added fallback styles to **Textarea**, **Collapsible**, **Checkbox**, **Radio**, **SingleSelect**, + **MultiSelect**. - Added support for handling multiple versions of registered custom elements. If a tag name is already registered in the CustomElementRegistry, the browser error is prevented, and a warning is displayed. This warning can be suppressed. diff --git a/dev/vscode-multi-select/fallback-styles.html b/dev/vscode-multi-select/fallback-styles.html new file mode 100644 index 000000000..8ffc1bfe3 --- /dev/null +++ b/dev/vscode-multi-select/fallback-styles.html @@ -0,0 +1,31 @@ + + + + + + VSCode Elements + + + + + + +
+ + Lorem + Ipsum + Dolor + +
+ + diff --git a/src/vscode-multi-select/vscode-multi-select.ts b/src/vscode-multi-select/vscode-multi-select.ts index 6647518a2..b871cd1dd 100644 --- a/src/vscode-multi-select/vscode-multi-select.ts +++ b/src/vscode-multi-select/vscode-multi-select.ts @@ -22,27 +22,27 @@ import {highlightRanges} from '../includes/vscode-select/helpers.js'; * @attr name - Name which is used as a variable name in the data of the form-container. * * @cssprop [--dropdown-z-index=2] - * @cssprop --vscode-badge-background - * @cssprop --vscode-badge-foreground - * @cssprop --vscode-settings-dropdownBorder - * @cssprop --vscode-settings-checkboxBackground - * @cssprop --vscode-settings-dropdownBackground - * @cssprop --vscode-settings-dropdownListBorder - * @cssprop --vscode-focusBorder - * @cssprop --vscode-foreground - * @cssprop --vscode-font-family - * @cssprop --vscode-font-size - * @cssprop --vscode-font-weight - * @cssprop --vscode-list-activeSelectionBackground - * @cssprop --vscode-list-activeSelectionForeground - * @cssprop --vscode-list-focusOutline - * @cssprop --vscode-list-focusHighlightForeground - * @cssprop --vscode-list-highlightForeground - * @cssprop --vscode-list-hoverBackground - * @cssprop --vscode-list-hoverForeground - * @cssprop --vscode-list-hoverBackground - * @cssprop --vscode-settings-textInputBackground - * @cssprop --vscode-list-hoverBackground + * @cssprop [--vscode-badge-background=#616161] + * @cssprop [--vscode-badge-foreground=#f8f8f8] + * @cssprop [--vscode-settings-dropdownBorder=#3c3c3c] + * @cssprop [--vscode-settings-checkboxBackground=#313131] + * @cssprop [--vscode-settings-dropdownBackground=#313131] + * @cssprop [--vscode-settings-dropdownForeground=#cccccc] + * @cssprop [--vscode-settings-dropdownListBorder=#454545] + * @cssprop [--vscode-focusBorder=#0078d4] + * @cssprop [--vscode-foreground=#cccccc] + * @cssprop [--vscode-font-family=sans-serif] + * @cssprop [--vscode-font-size=13px] + * @cssprop [--vscode-font-weight=normal] + * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d] + * @cssprop [--vscode-inputValidation-errorBorder=#be1100] + * @cssprop [--vscode-list-activeSelectionBackground=#04395e] + * @cssprop [--vscode-list-activeSelectionForeground=#ffffff] + * @cssprop [--vscode-list-focusOutline=#0078d4] + * @cssprop [--vscode-list-focusHighlightForeground=#2aaaff] + * @cssprop [--vscode-list-highlightForeground=#2aaaff] + * @cssprop [--vscode-list-hoverBackground=#2a2d2e] + * @cssprop [--vscode-list-hoverForeground=#ffffff] */ @customElement('vscode-multi-select') export class VscodeMultiSelect diff --git a/src/vscode-single-select/vscode-single-select.ts b/src/vscode-single-select/vscode-single-select.ts index df69dac42..d4ffd74fc 100644 --- a/src/vscode-single-select/vscode-single-select.ts +++ b/src/vscode-single-select/vscode-single-select.ts @@ -30,27 +30,29 @@ import {highlightRanges} from '../includes/vscode-select/helpers.js'; * @prop {boolean} invalid * @attr {boolean} invalid * @attr name - Name which is used as a variable name in the data of the form-container. + * * @cssprop [--dropdown-z-index=2] - * @cssprop --vscode-badge-background - * @cssprop --vscode-badge-foreground - * @cssprop --vscode-settings-dropdownBorder - * @cssprop --vscode-settings-checkboxBackground - * @cssprop --vscode-settings-dropdownBackground - * @cssprop --vscode-settings-dropdownListBorder - * @cssprop --vscode-focusBorder - * @cssprop --vscode-foreground - * @cssprop --vscode-font-family - * @cssprop --vscode-font-size - * @cssprop --vscode-font-weight - * @cssprop --vscode-list-activeSelectionBackground - * @cssprop --vscode-list-activeSelectionForeground - * @cssprop --vscode-list-focusOutline - * @cssprop --vscode-list-highlightForeground - * @cssprop --vscode-list-focusHighlightForeground - * @cssprop --vscode-list-hoverBackground - * @cssprop --vscode-list-hoverForeground - * @cssprop --vscode-list-hoverBackground - * @cssprop --vscode-settings-textInputBackground + * @cssprop [--vscode-badge-background=#616161] + * @cssprop [--vscode-badge-foreground=#f8f8f8] + * @cssprop [--vscode-settings-dropdownBorder=#3c3c3c] + * @cssprop [--vscode-settings-checkboxBackground=#313131] + * @cssprop [--vscode-settings-dropdownBackground=#313131] + * @cssprop [--vscode-settings-dropdownForeground=#cccccc] + * @cssprop [--vscode-settings-dropdownListBorder=#454545] + * @cssprop [--vscode-focusBorder=#0078d4] + * @cssprop [--vscode-foreground=#cccccc] + * @cssprop [--vscode-font-family=sans-serif] + * @cssprop [--vscode-font-size=13px] + * @cssprop [--vscode-font-weight=normal] + * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d] + * @cssprop [--vscode-inputValidation-errorBorder=#be1100] + * @cssprop [--vscode-list-activeSelectionBackground=#04395e] + * @cssprop [--vscode-list-activeSelectionForeground=#ffffff] + * @cssprop [--vscode-list-focusOutline=#0078d4] + * @cssprop [--vscode-list-focusHighlightForeground=#2aaaff] + * @cssprop [--vscode-list-highlightForeground=#2aaaff] + * @cssprop [--vscode-list-hoverBackground=#2a2d2e] + * @cssprop [--vscode-list-hoverForeground=#ffffff] */ @customElement('vscode-single-select') export class VscodeSingleSelect