base and activity bar

Signed-off-by: Jan Bicker <[email protected]>
eclipse-theia · Dec 9, 2019 · 1e8463d · 1e8463d
1 parent 0fdf165
commit 1e8463d
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 22 deletions.
diff --git a/packages/core/src/browser/common-frontend-contribution.ts b/packages/core/src/browser/common-frontend-contribution.ts
@@ -39,6 +39,8 @@ import { QuickViewService } from './quick-view-service';
 import { PrefixQuickOpenService, QuickOpenItem, QuickOpenMode, QuickOpenService } from './quick-open';
 import { environment } from '@theia/application-package/lib/environment';
 import { IconThemeService } from './icon-theme-service';
+import { ColorContribution } from './color-application-contribution';
+import { ColorRegistry } from './color-registry';
 
 export namespace CommonMenus {
 
@@ -217,7 +219,7 @@ export const supportPaste = browser.isNative || (!browser.isChrome && document.q
 export const RECENT_COMMANDS_STORAGE_KEY = 'commands';
 
 @injectable()
-export class CommonFrontendContribution implements FrontendApplicationContribution, MenuContribution, CommandContribution, KeybindingContribution {
+export class CommonFrontendContribution implements FrontendApplicationContribution, MenuContribution, CommandContribution, KeybindingContribution, ColorContribution {
 
     constructor(
         @inject(ApplicationShell) protected readonly shell: ApplicationShell,
@@ -723,14 +725,30 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
         this.quickOpenService.open({
             onType: (_, accept) => accept(items)
         }, {
-                placeholder: 'Select File Icon Theme',
-                fuzzyMatchLabel: true,
-                selectIndex: () => items.findIndex(item => item.id === this.iconThemes.current),
-                onClose: () => {
-                    if (resetTo) {
-                        this.iconThemes.current = resetTo;
-                    }
+            placeholder: 'Select File Icon Theme',
+            fuzzyMatchLabel: true,
+            selectIndex: () => items.findIndex(item => item.id === this.iconThemes.current),
+            onClose: () => {
+                if (resetTo) {
+                    this.iconThemes.current = resetTo;
                 }
-            });
+            }
+        });
+    }
+
+    registerColors(colors: ColorRegistry): void {
+        colors.register(
+            // Base Colors
+            { id: 'selection.background', defaults: { dark: '#217daf', light: '#c0dbf1' }, description: 'Overall border color for focused elements. This color is only used if not overridden by a component.' },
+            { id: 'icon.foreground', defaults: { dark: '#C5C5C5', light: '#424242', hc: '#FFFFFF' }, description: 'The default color for icons in the workbench.' },
+
+            // Activity Bar
+            { id: 'activityBar.background', defaults: { dark: '#333333', light: '#2C2C2C', hc: '#000000' }, description: 'Activity bar background color. The activity bar is showing on the far left or right and allows to switch between views of the side bar.' },
+            { id: 'activityBar.border', defaults: { hc: '#6FC3DF' }, description: 'Activity bar border color separating to the side bar. The activity bar is showing on the far left or right and allows to switch between views of the side bar.' },
+            { id: 'activityBar.activeBorder', defaults: { dark: '#FFFFFF', light: '#FFFFFF', hc: '#FFFFFF' }, description: 'Activity bar border color for the active item. The activity bar is showing on the far left or right and allows to switch between views of the side bar.' },
+            { id: 'activityBar.foreground', defaults: { dark: '#FFFFFF', light: '#FFFFFF', hc: '#FFFFFF' }, description: 'Activity bar item foreground color when it is active. The activity bar is showing on the far left or right and allows to switch between views of the side bar.' },
+            { id: 'activityBar.inactiveForeground', defaults: { dark: '#FFFFFF', light: '#FFFFFF', hc: '#FFFFFF' }, description: 'Activity bar item foreground color when it is active. The activity bar is showing on the far left or right and allows to switch between views of the side bar.' },
+            // { id: '', defaults: { dark: '', light: '', hc: '' }, description: '' },
+        );
     }
 }
diff --git a/packages/core/src/browser/frontend-application-module.ts b/packages/core/src/browser/frontend-application-module.ts
@@ -203,7 +203,7 @@ export const frontendApplicationModule = new ContainerModule((bind, unbind, isBo
 
     bind(ResourceContextKey).toSelf().inSingletonScope();
     bind(CommonFrontendContribution).toSelf().inSingletonScope();
-    [FrontendApplicationContribution, CommandContribution, KeybindingContribution, MenuContribution].forEach(serviceIdentifier =>
+    [FrontendApplicationContribution, CommandContribution, KeybindingContribution, MenuContribution, ColorContribution].forEach(serviceIdentifier =>
         bind(serviceIdentifier).toService(CommonFrontendContribution)
     );
 

diff --git a/packages/core/src/browser/style/index.css b/packages/core/src/browser/style/index.css
@@ -111,11 +111,11 @@ body {
     outline-style: solid;
     outline-offset: -1px;
     opacity: 1 !important;
-    outline-color: var(--theia-accent-color3);
+    outline-color: var(--theia-focusBorder);
 }
 
 ::selection {
-    background: var(--theia-selected-text-background);
+    background: var(--theia-selection-background);
 }
 
 .p-Widget:focus {

diff --git a/packages/core/src/browser/style/sidepanel.css b/packages/core/src/browser/style/sidepanel.css
@@ -34,7 +34,7 @@
 .p-TabBar.theia-app-sides {
   display: block;
   color: var(--theia-tab-font-color);
-  background: var(--theia-layout-color2);
+  background: var(--theia-activityBar-background);
   font-size: var(--theia-ui-font-size1);
   min-width: var(--theia-private-sidebar-tab-width);
   max-width: var(--theia-private-sidebar-tab-width);
@@ -47,7 +47,7 @@
 .p-TabBar.theia-app-sides .p-TabBar-tab {
   position: relative;
   padding: 11px 10px;
-  background: var(--theia-layout-color2);
+  background: var(--theia-activityBar-background);
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -56,12 +56,12 @@
 }
 
 .p-TabBar.theia-app-left .p-TabBar-tab {
-  border-left: var(--theia-panel-border-width) solid var(--theia-layout-color2);
+  border-left: var(--theia-panel-border-width) solid var(--theia-activityBar-border);
   margin-right: var(--theia-panel-border-width);
 }
 
 .p-TabBar.theia-app-right .p-TabBar-tab {
-  border-right: var(--theia-panel-border-width) solid var(--theia-layout-color2);
+  border-right: var(--theia-panel-border-width) solid var(--theia-activityBar-border);
   margin-left: var(--theia-panel-border-width);
 }
 
@@ -74,13 +74,13 @@
   border-top: none;
 }
 
-.p-TabBar.theia-app-left .p-TabBar-tab.p-mod-current.theia-mod-active {
-  border-left-color: var(--theia-accent-color2);
+.p-TabBar.theia-app-left .p-TabBar-tab.p-mod-current {
+  border-left: var(--theia-panel-border-width) solid var(--theia-activityBar-activeBorder);
   border-top-color: transparent;
 }
 
-.p-TabBar.theia-app-right .p-TabBar-tab.p-mod-current.theia-mod-active {
-  border-right-color: var(--theia-accent-color2);
+.p-TabBar.theia-app-right .p-TabBar-tab.p-mod-current {
+  border-right-color: var(--theia-panel-border-width) solid var(--theia-activityBar-activeBorder);
   border-top-color: transparent;
 }
 
@@ -92,7 +92,7 @@
 .p-TabBar.theia-app-sides .p-TabBar-tabIcon {
   width: var(--theia-private-sidebar-icon-size);
   height: var(--theia-private-sidebar-icon-size);
-  background-color: var(--theia-tab-icon-color);
+  background-color: var(--theia-activityBar-inactiveForeground);
   opacity: 0.6;
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
@@ -105,6 +105,7 @@
 .p-TabBar.theia-app-sides .p-mod-current .file-icon.p-TabBar-tabIcon,
 .p-TabBar.theia-app-sides .fa.p-TabBar-tabIcon:hover,
 .p-TabBar.theia-app-sides .p-mod-current .fa.p-TabBar-tabIcon {
+  background-color: var(--theia-activityBar-foreground);
   opacity: 1.0;
   background: none;
 }

diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
@@ -73,7 +73,7 @@
 }
 
 .t-siw-search-container .searchHeader .search-field-container.focused {
-    border-color: var(--theia-accent-color3);
+    border-color: var(--theia-focusBorder);
 }
 
 .t-siw-search-container .searchHeader .search-field {