diff --git a/CHANGELOG.md b/CHANGELOG.md index df2badd77..110af4fd1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) ## [Unreleased] +## Changed + - **Table**: The column resizing algorithm has been rewritten. Columns can now push each other. +- **Button**, **SingleSelect**, **MultiSelect**, **Textfield**, **Textarea**: Use 4px border radius. +- **SingleSelect**, **MultiSelect**: Updated dropdown styles to align with the VSCode UI. ## [2.4.0] - 2025-12-26 diff --git a/src/includes/vscode-select/styles.ts b/src/includes/vscode-select/styles.ts index aac691639..1758d9f3a 100644 --- a/src/includes/vscode-select/styles.ts +++ b/src/includes/vscode-select/styles.ts @@ -20,7 +20,7 @@ export default [ .combobox-face { background-color: var(--vscode-settings-dropdownBackground, #313131); border-color: var(--vscode-settings-dropdownBorder, #3c3c3c); - border-radius: 2px; + border-radius: 4px; border-style: solid; border-width: 1px; box-sizing: border-box; @@ -87,10 +87,16 @@ export default [ :host(:focus) .combobox-face, :host([focused]) .select-face, :host([focused]) .combobox-face { - border-color: var(--vscode-focusBorder, #0078d4); outline: none; } + :host(:focus:not([open])) .select-face, + :host(:focus:not([open])) .combobox-face, + :host([focused]:not([open])) .select-face, + :host([focused]:not([open])) .combobox-face { + border-color: var(--vscode-focusBorder, #0078d4); + } + .combobox-input { background-color: transparent; box-sizing: border-box; @@ -162,16 +168,14 @@ export default [ .dropdown { background-color: var(--vscode-settings-dropdownBackground, #313131); border-color: var(--vscode-settings-dropdownListBorder, #454545); - border-radius: 0 0 3px 3px; + border-radius: 4px; border-style: solid; border-width: 1px; bottom: unset; + box-shadow: 0 2px 8px var(--vscode-widget-shadow, rgba(0, 0, 0, 0.36)); box-sizing: border-box; display: none; - padding-bottom: 2px; - padding-left: 0; - padding-right: 0; - padding-top: 0; + padding: 0; right: unset; } @@ -180,22 +184,16 @@ export default [ } :host([position='above']) .dropdown { - border-radius: 3px 3px 0 0; bottom: 26px; padding-bottom: 0; padding-top: 2px; top: unset; } - :host(:focus) .dropdown, - :host([focused]) .dropdown { - border-color: var(--vscode-focusBorder, #0078d4); - } - .scrollable { display: block; max-height: 222px; - margin: 1px; + margin: 0; outline: none; overflow: hidden; } diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts index a0edd4eb7..a2e3c20c8 100644 --- a/src/vscode-button/vscode-button.styles.ts +++ b/src/vscode-button/vscode-button.styles.ts @@ -21,15 +21,15 @@ const styles: CSSResultGroup = [ .base { align-items: center; background-color: var(--vscode-button-background, #0078d4); - border-bottom-left-radius: var(--vsc-border-left-radius, 2px); - border-bottom-right-radius: var(--vsc-border-right-radius, 2px); + border-bottom-left-radius: var(--vsc-border-left-radius, 4px); + border-bottom-right-radius: var(--vsc-border-right-radius, 4px); border-bottom-width: 1px; border-color: var(--vscode-button-border, transparent); border-left-width: var(--vsc-border-left-width, 1px); border-right-width: var(--vsc-border-right-width, 1px); border-style: solid; - border-top-left-radius: var(--vsc-border-left-radius, 2px); - border-top-right-radius: var(--vsc-border-right-radius, 2px); + border-top-left-radius: var(--vsc-border-left-radius, 4px); + border-top-right-radius: var(--vsc-border-right-radius, 4px); border-top-width: 1px; box-sizing: border-box; color: var(--vscode-button-foreground, #ffffff); diff --git a/src/vscode-textarea/vscode-textarea.styles.ts b/src/vscode-textarea/vscode-textarea.styles.ts index 4e4af22a1..76a15e00a 100644 --- a/src/vscode-textarea/vscode-textarea.styles.ts +++ b/src/vscode-textarea/vscode-textarea.styles.ts @@ -36,7 +36,7 @@ const styles: CSSResultGroup = [ textarea { background-color: var(--vscode-settings-textInputBackground, #313131); border-color: var(--vscode-settings-textInputBorder, transparent); - border-radius: 2px; + border-radius: 4px; border-style: solid; border-width: 1px; box-sizing: border-box; diff --git a/src/vscode-textfield/vscode-textfield.styles.ts b/src/vscode-textfield/vscode-textfield.styles.ts index b84aeebf4..b9bc81bca 100644 --- a/src/vscode-textfield/vscode-textfield.styles.ts +++ b/src/vscode-textfield/vscode-textfield.styles.ts @@ -19,7 +19,7 @@ const styles: CSSResultGroup = [ --vscode-settings-textInputBorder, var(--vscode-settings-textInputBackground, #3c3c3c) ); - border-radius: 2px; + border-radius: 4px; border-style: solid; border-width: 1px; box-sizing: border-box;