Align border-radius with vscode (#12252)

eclipse-theia · Jun 28, 2023 · 6a13e1f · 6a13e1f
1 parent 507bdc8
commit 6a13e1f
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 17 deletions.
diff --git a/packages/core/src/browser/common-frontend-contribution.ts b/packages/core/src/browser/common-frontend-contribution.ts
@@ -1826,8 +1826,8 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
             },
             {
                 id: 'menubar.selectionBackground', defaults: {
-                    dark: Color.transparent('#ffffff', 0.1),
-                    light: Color.transparent('#000000', 0.1)
+                    dark: 'toolbar.hoverBackground',
+                    light: 'toolbar.hoverBackground'
                 }, description: 'Background color of the selected menu item in the menubar.'
             },
             {

diff --git a/packages/core/src/browser/dialogs.ts b/packages/core/src/browser/dialogs.ts
@@ -180,7 +180,7 @@ export abstract class AbstractDialog<T> extends BaseWidget {
         titleContentNode.appendChild(this.titleNode);
 
         this.closeCrossNode = this.node.ownerDocument.createElement('i');
-        this.closeCrossNode.classList.add(...codiconArray('close'));
+        this.closeCrossNode.classList.add(...codiconArray('close', true));
         this.closeCrossNode.classList.add('closeButton');
         titleContentNode.appendChild(this.closeCrossNode);
 

diff --git a/packages/core/src/browser/style/alert-messages.css b/packages/core/src/browser/style/alert-messages.css
@@ -36,6 +36,7 @@
   background-color: var(--theia-inputValidation-infoBackground);
   border: var(--theia-border-width) solid
     var(--theia-inputValidation-infoBorder);
+  border-radius: 4px;
   color: var(--theia-inputValidation-infoForeground);
   padding: 10px;
 }
@@ -45,6 +46,7 @@
   background-color: var(--theia-inputValidation-warningBackground);
   border: var(--theia-border-width) solid
     var(--theia-inputValidation-warningBorder);
+  border-radius: 4px;
   color: var(--theia-inputValidation-warningForeground);
   padding: 10px;
 }
@@ -54,6 +56,7 @@
   background-color: var(--theia-inputValidation-errorBackground);
   border: var(--theia-border-width) solid
     var(--theia-inputValidation-errorBorder);
+  border-radius: 4px;
   color: var(--theia-inputValidation-errorForeground);
   padding: 10px;
 }
diff --git a/packages/core/src/browser/style/dialog.css b/packages/core/src/browser/style/dialog.css
@@ -33,9 +33,12 @@
   display: flex;
   flex-direction: column;
   min-width: 400px;
+  min-height: 150px;
   color: var(--theia-editorWidget-foreground);
   background-color: var(--theia-editorWidget-background);
   border: 1px solid var(--theia-contrastBorder);
+  border-radius: 4px;
+  overflow: hidden;
   box-shadow: 0 0px 8px var(--theia-widget-shadow);
 }
 .p-Widget.dialogOverlay .dialogTitle {

diff --git a/packages/core/src/browser/style/index.css b/packages/core/src/browser/style/index.css
@@ -118,6 +118,7 @@ blockquote {
   font-size: var(--theia-ui-font-size1);
   line-height: var(--theia-content-line-height);
   padding-left: 5px;
+  border-radius: 2px;
 }
 
 .theia-input[type="text"] {
@@ -263,6 +264,7 @@ blockquote {
   cursor: pointer;
   padding: 4px 9px;
   margin-left: calc(var(--theia-ui-padding) * 2);
+  border-radius: 2px;
 }
 
 .theia-button:focus {
@@ -290,7 +292,7 @@ button.secondary[disabled],
 .theia-select {
   color: var(--dropdown-foreground);
   font-size: var(--theia-ui-font-size1);
-  border-radius: 0;
+  border-radius: 2px;
   border: 1px solid var(--theia-dropdown-border);
   background: var(--theia-dropdown-background);
   outline: none;

diff --git a/packages/core/src/browser/style/menus.css b/packages/core/src/browser/style/menus.css
@@ -29,6 +29,8 @@
 |----------------------------------------------------------------------------*/
 
 .p-Widget.p-MenuBar {
+  display: flex;
+  align-items: center; 
   padding-left: 5px;
   font-size: var(--theia-ui-font-size1);
 }
@@ -37,9 +39,15 @@
   transform: translateY(calc(-2 * var(--theia-border-width)));
 }
 
+.p-MenuBar-content {
+  display: flex;
+  align-items: center; 
+}
+
 .p-MenuBar-item {
   padding: 0px 8px;
-  line-height: var(--theia-private-menubar-height);
+  line-height: var(--theia-content-line-height);
+  border-radius: 4px;
 }
 
 .p-MenuBar-item .p-MenuBar-itemLabel {
@@ -96,12 +104,13 @@
 
 .p-Menu {
   z-index: var(--theia-menu-z-index);
-  padding: 4px 0px;
+  padding: 4px;
   background: var(--theia-menu-background);
   color: var(--theia-menu-foreground);
   font-size: var(--theia-ui-font-size1);
   box-shadow: 0px 1px 6px var(--theia-widget-shadow);
   border: 1px solid var(--theia-menu-border);
+  border-radius: 5px;
 }
 
 .p-Menu:focus {
@@ -113,16 +122,35 @@
   max-height: var(--theia-private-menu-item-height);
   padding: 0px;
   line-height: var(--theia-private-menu-item-height);
+  overflow: hidden;
 }
 
 .p-Menu-item.p-mod-active {
-  background: var(--theia-menu-selectionBackground);
   color: var(--theia-menu-selectionForeground);
   border: thin solid var(--theia-menu-selectionBorder);
   opacity: 1;
   cursor: pointer;
 }
 
+/** 
+ * We cannot apply border-radius on items with `display: table-row` 
+ * So we apply it to its first and last child
+ */
+
+.p-Menu-item.p-mod-active > div {
+  background: var(--theia-menu-selectionBackground);
+}
+
+.p-Menu-item.p-mod-active > div:first-child {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.p-Menu-item.p-mod-active > div:last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
 .p-Menu-item.p-mod-disabled {
   opacity: var(--theia-mod-disabled-opacity);
 }
@@ -165,12 +193,12 @@
     var(--theia-menu-separatorBackground);
 }
 
-.p-Menu-item[data-type="separator"] > div.p-Menu-itemIcon::after {
-  margin-left: 12px;
+.p-Menu-item[data-type="separator"] > div:first-child:after {
+  margin-left: -4px;
 }
 
-.p-Menu-item[data-type="separator"] > div.p-Menu-itemSubmenuIcon::after {
-  margin-right: 12px;
+.p-Menu-item[data-type="separator"] > div:last-child::after {
+  margin-right: -4px;
 }
 
 .p-Menu-itemIcon::before,

diff --git a/packages/core/src/browser/style/select-component.css b/packages/core/src/browser/style/select-component.css
@@ -25,6 +25,7 @@
   display: flex;
   align-items: center;
   user-select: none;
+  border-radius: 2px;
 }
 
 .theia-select-component .theia-select-component-label {
@@ -48,6 +49,7 @@
   outline-offset: -1px;
   user-select: none;
   overflow: auto;
+  border-radius: 2px;
 }
 
 .theia-select-component-dropdown .theia-select-component-option {

diff --git a/packages/keymaps/src/browser/keybindings-widget.tsx b/packages/keymaps/src/browser/keybindings-widget.tsx
@@ -399,7 +399,7 @@ export class KeybindingWidget extends ReactWidget implements StatefulWidget {
         return <a title='Edit Keybinding' href='#' onClick={e => {
             e.preventDefault();
             this.editKeybinding(item);
-        }}><i className={`${codicon('edit')} kb-action-item`}></i></a>;
+        }}><i className={`${codicon('edit', true)} kb-action-item`}></i></a>;
     }
 
     /**
@@ -412,7 +412,7 @@ export class KeybindingWidget extends ReactWidget implements StatefulWidget {
             ? <a title='Reset Keybinding' href='#' onClick={e => {
                 e.preventDefault();
                 this.resetKeybinding(item);
-            }}><i className={`${codicon('discard')} kb-action-item`}></i></a> : '';
+            }}><i className={`${codicon('discard', true)} kb-action-item`}></i></a> : '';
     }
 
     /**

diff --git a/packages/messages/src/browser/style/notifications.css b/packages/messages/src/browser/style/notifications.css
@@ -37,22 +37,24 @@
 
 /* Toasts */
 
-.theia-notifications-container.theia-notification-toasts
-  .theia-notification-list-item-container {
+.theia-notifications-container.theia-notification-toasts .theia-notification-list-item-container {
+  border-radius: 4px;
   margin-top: 6px;
 }
 
-.theia-notifications-container.theia-notification-toasts
-  .theia-notification-list-item {
+.theia-notifications-container.theia-notification-toasts .theia-notification-list-item {
   box-shadow: 0px 0px 4px 0px var(--theia-widget-shadow);
   border: 1px solid var(--theia-notificationToast-border);
+  border-radius: 4px;
 }
 
 /* Center */
 
 .theia-notifications-container.theia-notification-center {
   background-color: var(--theia-notifications-background);
   border: 1px solid var(--theia-notificationCenter-border);
+  border-radius: 4px;
+  overflow: hidden;
   box-shadow: 0px 0px 6px 0px var(--theia-widget-shadow);
 }
 
@@ -85,6 +87,8 @@
 .theia-notification-list-scroll-container {
   max-height: 300px;
   overflow: auto;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 .theia-notification-list {

diff --git a/packages/monaco/data/monaco-themes/vscode/dark_vs.json b/packages/monaco/data/monaco-themes/vscode/dark_vs.json
@@ -14,6 +14,7 @@
 		"input.placeholderForeground": "#A6A6A6",
 		"menu.background": "#252526",
 		"menu.foreground": "#CCCCCC",
+		"menu.border": "#454545",
 		"statusBarItem.remoteForeground": "#FFF",
 		"statusBarItem.remoteBackground": "#16825D",
 		"ports.iconRunningProcessForeground": "#369432",

diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
@@ -66,6 +66,7 @@
   border-style: solid;
   border-width: var(--theia-border-width);
   border-color: var(--theia-input-background);
+  border-radius: 2px;
 }
 
 .t-siw-search-container .searchHeader .search-field-container.focused {