Removed old color keys for output, dialogs, statusbar, menu, scrollbar

and adapted respective css Signed-off-by: Jan Bicker <[email protected]>
eclipse-theia · Dec 13, 2019 · bb8f0be · bb8f0be
1 parent 0150420
commit bb8f0be
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 91 deletions.
diff --git a/packages/core/src/browser/common-frontend-contribution.ts b/packages/core/src/browser/common-frontend-contribution.ts
@@ -756,7 +756,6 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
             // if not yet contributed by Monaco, check runtime css variables to learn
             { 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.' },
-            { id: 'contrastBorder', defaults: { hc: '#6FC3DF' }, description: 'An extra border around elements to separate them from others for greater contrast.' },
 
             // Window border colors should be aligned with https://code.visualstudio.com/api/references/theme-color#window-border
             {
@@ -1360,52 +1359,52 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
             // Theia defaults
             // Buttons
             {
-                id: 'button.secondary.foreground',
+                id: 'secondaryButton.foreground',
                 defaults: {
-                    dark: Color.white,
-                    light: Color.white,
-                    hc: Color.white
+                    dark: 'button.foreground',
+                    light: 'button.foreground',
+                    hc: 'button.foreground'
                 }, description: 'Foreground color of secondary buttons.'
             },
             {
-                id: 'button.secondary.disabled.foreground',
+                id: 'secondaryButton.disabledForeground',
                 defaults: {
-                    dark: Color.white,
-                    light: Color.white,
-                    hc: Color.white
+                    dark: Color.transparent('secondaryButton.foreground', 0.5),
+                    light: Color.transparent('secondaryButton.foreground', 0.5),
+                    hc: Color.transparent('secondaryButton.foreground', 0.5),
                 }, description: 'Foreground color of secondary buttons.'
             },
             {
-                id: 'button.secondary.background',
+                id: 'secondaryButton.background',
                 defaults: {
                     dark: Color.lighten('button.background', 0.5),
                     light: Color.lighten('button.background', 0.5)
                 }, description: 'Background color of secondary buttons.'
             },
             {
-                id: 'button.secondary.hoverBackground',
+                id: 'secondaryButton.hoverBackground',
                 defaults: {
                     dark: Color.lighten('button.secondary.background', 0.2),
                     light: Color.lighten('button.secondary.background', 0.2)
                 }, description: 'Background color when hovering secondary buttons.'
             },
             {
-                id: 'button.secondary.disabled.background',
+                id: 'secondaryButton.disabledBackground',
                 defaults: {
                     dark: Color.transparent('button.secondary.background', 0.6),
                     light: Color.transparent('button.secondary.background', 0.6)
                 }, description: 'Background color when hovering secondary buttons.'
             },
             {
-                id: 'button.disabled.foreground',
+                id: 'button.disabledForeground',
                 defaults: {
                     dark: Color.transparent('button.foreground', 0.5),
                     light: Color.transparent('button.foreground', 0.5),
                     hc: Color.transparent('button.foreground', 0.5)
                 }, description: 'Foreground color of secondary buttons.'
             },
             {
-                id: 'button.disabled.background',
+                id: 'button.disabledBackground',
                 defaults: {
                     dark: Color.transparent('button.background', 0.5),
                     light: Color.transparent('button.background', 0.5)

diff --git a/packages/core/src/browser/style/index.css b/packages/core/src/browser/style/index.css
@@ -26,7 +26,7 @@ body {
   padding: 0;
   overflow: hidden;
   font-family: var(--theia-ui-font-family);
-  background: var(--theia-layout-color0);
+  background: var(--theia-editor-background);
   color: var(--theia-foreground);
   border: 1px solid var(--theia-window-activeBorder);
 }
@@ -75,7 +75,7 @@ blockquote {
     width: auto !important;
     height: auto !important;
     z-index: 255 !important;
-    background: var(--theia-layout-color0);
+    background: var(--theia-editor-background);
 }
 
 .theia-ApplicationShell {
@@ -84,7 +84,7 @@ blockquote {
   left: 0;
   right: 0;
   bottom: 0;
-  background: var(--theia-layout-color0);
+  background: var(--theia-editor-background);
 }
 
 .theia-preload {
@@ -182,24 +182,24 @@ button.theia-button:hover, .theia-button:hover, .theia-button:focus {
 }
 
 button.secondary, .theia-button.secondary {
-  color: var(--theia-button-secondary-foreground);
-  background-color: var(--theia-button-secondary-background);
+  color: var(--theia-secondaryButton-foreground);
+  background-color: var(--theia-secondaryButton-background);
 }
 
 button.secondary:hover, .theia-button.secondary:hover {
-  background-color: var(--theia-button-secondary-hoverBackground);
+  background-color: var(--theia-secondaryButton-hoverBackground);
 }
 
 button.theia-button[disabled], .theia-button[disabled] {
   opacity: 0.6;
-  color: var(--theia-button-disabled-foreground);
-  background-color: var(--theia-button-disabled-background);
+  color: var(--theia-button-disabledForeground);
+  background-color: var(--theia-button-disabledBackground);
   cursor: default;
 }
 
 button.secondary[disabled], .theia-button.secondary[disabled] {
-    color: var(--theia-button-secondary-disabled-foreground);
-    background-color: var(--theia-button-secondary-disabled-background);
+    color: var(--theia-secondaryButton-disabledForeground);
+    background-color: var(--theia-secondaryButton-disabledBackground);
 }
 
 select {

diff --git a/packages/core/src/browser/style/scrollbars.css b/packages/core/src/browser/style/scrollbars.css
@@ -19,15 +19,15 @@
 ::-webkit-scrollbar {
     height: var(--theia-scrollbar-width);
     width: var(--theia-scrollbar-width);
-    background: var(--theia-scrollbar-rail-color);
+    background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
     background: var(--theia-scrollbarSlider-background);
 }
 
 ::-webkit-scrollbar:hover {
-    background: var(--theia-scrollbar-active-rail-color);
+    background: transparent;
 }
 
 ::-webkit-scrollbar-thumb:hover {
@@ -50,7 +50,6 @@
 #theia-app-shell .ps__rail-x,
 #theia-dialog-shell .ps__rail-x {
     height: var(--theia-scrollbar-rail-width);
-    background: var(--theia-scrollbar-rail-color);
 }
 
 #theia-app-shell .ps__rail-x > .ps__thumb-x,
@@ -80,7 +79,6 @@
 #theia-app-shell .ps__rail-y,
 #theia-dialog-shell .ps__rail-y {
     width: var(--theia-scrollbar-rail-width);
-    background: var(--theia-scrollbar-rail-color);
 }
 
 #theia-app-shell .ps__rail-y > .ps__thumb-y,
@@ -108,15 +106,6 @@
     width: var(--theia-scrollbar-width);
 }
 
-#theia-app-shell .ps [class^='ps__rail']:hover,
-#theia-app-shell .ps [class^='ps__rail']:focus,
-#theia-app-shell .ps [class^='ps__rail'].ps--clicking,
-#theia-dialog-shell .ps [class^='ps__rail']:hover,
-#theia-dialog-shell .ps [class^='ps__rail']:focus,
-#theia-dialog-shell .ps [class^='ps__rail'].ps--clicking {
-    background-color: var(--theia-scrollbar-active-rail-color);
-}
-
 #theia-app-shell .ps [class^='ps__rail'].ps--clicking > [class^='ps__thumb'],
 #theia-dialog-shell .ps [class^='ps__rail'].ps--clicking > [class^='ps__thumb']{
     background-color: var(--theia-scrollbarSlider-activeBackground);
@@ -151,22 +140,11 @@
 |----------------------------------------------------------------------------*/
 
 /* Make horizontal scrollbar, decorations overview ruler and vertical scrollbar arrows opaque */
-.vs .monaco-scrollable-element > .scrollbar,
-.vs-dark .monaco-scrollable-element > .scrollbar,
-.decorationsOverviewRuler {
-    background: var(--theia-scrollbar-rail-color);
-}
-
 .vs .monaco-scrollable-element > .scrollbar > .slider,
 .vs-dark .monaco-scrollable-element > .scrollbar > .slider {
     background: var(--theia-scrollbarSlider-background) !important;
 }
 
-.vs .monaco-scrollable-element > .scrollbar:hover,
-.vs-dark .monaco-scrollable-element > .scrollbar:hover {
-    background: var(--theia-scrollbar-active-rail-color);
-}
-
 .monaco-scrollable-element > .visible.scrollbar.vertical > .slider:hover,
 .vs .monaco-scrollable-element > .scrollbar > .slider:hover,
 .vs-dark .monaco-scrollable-element > .scrollbar > .slider:hover {

diff --git a/packages/core/src/browser/style/sidepanel.css b/packages/core/src/browser/style/sidepanel.css
@@ -183,7 +183,7 @@
   z-index: 1000;
 }
 
-.p-TabBar.theia-app-sides > .ps__rail-y  >.ps__thumb-y {
+#theia-app-shell .p-TabBar.theia-app-sides > .ps__rail-y  >.ps__thumb-y {
   width: var(--theia-private-sidebar-scrollbar-width);
   right: calc((var(--theia-private-sidebar-scrollbar-rail-width) - var(--theia-private-sidebar-scrollbar-width)) / 2);
 }

diff --git a/packages/core/src/browser/style/variables-bright.useable.css b/packages/core/src/browser/style/variables-bright.useable.css
@@ -194,29 +194,10 @@ is not optimized for dense, information rich UIs.
   /* Scrollbars */
   --theia-scrollbar-width: 10px;
   --theia-scrollbar-rail-width: 10px;
-  --theia-scrollbar-thumb-color: hsla(0,0%,61%,.4);
-  --theia-scrollbar-rail-color: transparent;
-  --theia-scrollbar-active-thumb-color: hsla(0,0%,39%,.4);
-  --theia-scrollbar-active-rail-color: transparent;
-  --theia-scrollbar-box-shadow-color: #DDD;
-
-  /* Menu */
-  --theia-menu-color0: var(--theia-layout-color3);
-  --theia-menu-color1: var(--theia-layout-color0);
-  --theia-menu-color2: var(--theia-layout-color3);
 
   /* Statusbar */
-  --theia-statusbar-color: var(--theia-brand-color0);
-  --theia-statusBar-font-color: var(--theia-inverse-ui-font-color0);
   --theia-statusBar-font-size: 12px;
-
-  /* Dialogs */
-  --theia-ui-dialog-header-color: var(--theia-brand-color1);
-  --theia-ui-dialog-header-font-color: var(--theia-inverse-ui-font-color0);
-
-  /* Output */
-  --theia-output-font-color: var(--theia-ui-font-color1);
-
+
   /* Opacity for disabled mod  */
   --theia-mod-disabled-opacity: 0.4;
 }
diff --git a/packages/core/src/browser/style/variables-dark.useable.css b/packages/core/src/browser/style/variables-dark.useable.css
@@ -194,29 +194,10 @@ is not optimized for dense, information rich UIs.
   /* Scrollbars */
   --theia-scrollbar-width: 10px;
   --theia-scrollbar-rail-width: 10px;
-  --theia-scrollbar-thumb-color: hsla(0,0%,39%,.4);
-  --theia-scrollbar-rail-color: transparent;
-  --theia-scrollbar-active-thumb-color: hsla(0,0%,61%,.4);
-  --theia-scrollbar-active-rail-color: transparent;
-  --theia-scrollbar-box-shadow-color: #000;
-
-  /* Menu */
-  --theia-menu-color0: var(--theia-layout-color4);
-  --theia-menu-color1: var(--theia-layout-color4);
-  --theia-menu-color2: var(--theia-layout-color1);
 
   /* Statusbar */
-  --theia-statusbar-color: var(--theia-brand-color0);
-  --theia-statusBar-font-color: var(--theia-ui-font-color0);
   --theia-statusBar-font-size: 12px;
 
-  /* Dialogs */
-  --theia-ui-dialog-header-color: var(--theia-brand-color0);
-  --theia-ui-dialog-header-font-color: var(--theia-ui-font-color1);
-
-  /* Output */
-  --theia-output-font-color: var(--theia-ui-font-color1);
-
   /* Opacity for disabled mod  */
   --theia-mod-disabled-opacity: 0.4;
 }
diff --git a/packages/messages/src/browser/style/notifications.css b/packages/messages/src/browser/style/notifications.css
@@ -271,7 +271,6 @@
 
 .theia-notification-list-scroll-container .ps__rail-y {
     width: var(--theia-scrollbar-rail-width);
-    background: var(--theia-scrollbar-rail-color);
 }
 
 .theia-notification-list-scroll-container .ps__rail-y:hover > .ps__thumb-y,
@@ -284,6 +283,6 @@
 .theia-notification-list-scroll-container .ps__rail-y > .ps__thumb-y {
     width: var(--theia-scrollbar-width);
     right: calc((var(--theia-scrollbar-rail-width) - var(--theia-scrollbar-width)) / 2);
-    background: var(--theia-scrollbar-thumb-color);
+    background: var(--theia-scrollbarSlider-background);
     border-radius: 0px;
 }
diff --git a/packages/output/src/browser/style/output.css b/packages/output/src/browser/style/output.css
@@ -16,7 +16,6 @@
 
  #outputView {
 	font-size: var(--theia-ui-font-size1);
-    color: var(--theia-output-font-color);
 }
 
 #outputView #outputContents {