Align border-radius with vscode

eclipse-theia · Mar 2, 2023 · 8c0bbf7 · 8c0bbf7
1 parent f7ef6b5
commit 8c0bbf7
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 12 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
@@ -175,7 +175,7 @@ export abstract class AbstractDialog<T> extends BaseWidget {
         titleContentNode.appendChild(this.titleNode);
 
         this.closeCrossNode = document.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/dialog.css b/packages/core/src/browser/style/dialog.css
@@ -37,6 +37,8 @@
     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
@@ -108,6 +108,7 @@ blockquote {
     background: var(--theia-input-background);
     color: var(--theia-input-foreground);
     border: var(--theia-border-width) solid var(--theia-input-border);
+    border-radius: 2px;
     font-family: var(--theia-ui-font-family);
     font-size: var(--theia-ui-font-size1);
     line-height: var(--theia-content-line-height);
@@ -248,6 +249,7 @@ blockquote {
   cursor: pointer;
   padding: 4px 9px;
   margin-left: calc(var(--theia-ui-padding)*2);
+  border-radius: 2px;
 }
 
 .theia-button:focus {

diff --git a/packages/core/src/browser/style/menus.css b/packages/core/src/browser/style/menus.css
@@ -32,6 +32,8 @@
 
 
 .p-Widget.p-MenuBar {
+  display: flex;
+  align-items: center; 
   padding-left: 5px;
   font-size: var(--theia-ui-font-size1);
 }
@@ -41,10 +43,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 {
@@ -105,12 +112,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 {
@@ -122,17 +130,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);
@@ -182,12 +208,12 @@
   border-top: var(--theia-border-width) solid 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/keymaps/src/browser/keybindings-widget.tsx b/packages/keymaps/src/browser/keybindings-widget.tsx
@@ -398,7 +398,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>;
     }
 
     /**
@@ -411,7 +411,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
@@ -38,19 +38,23 @@
 /* Toasts */
 
 .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 {
     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);
 }
 
@@ -83,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 {