595-update-vscode-ui-styles

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
 

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;
     }

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);

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;

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;