From fb8653241fc413edb379637186a20704010948cf Mon Sep 17 00:00:00 2001
From: Artem Zatsarynnyi <azatsary@redhat.com>
Date: Tue, 24 Mar 2020 09:06:46 +0200
Subject: [PATCH] Update Che Theia CSS styling to respect the VS Code theming
 approach (#656) (#684)

* Update Che Theia CSS styling to respect the VS Code theming approach

Signed-off-by: Artem Zatsarynnyi <azatsary@redhat.com>
---
 .../src/browser/about-che-theia-dialog.tsx    |  2 +-
 .../src/browser/style/che-theia-about.css     |  8 ---
 .../src/browser/che-devfile-main.ts           |  2 +-
 .../plugin/che-plugin-view-toolbar.tsx        |  4 +-
 .../src/browser/style/che-plugins-caching.css |  2 +-
 .../style/che-plugins-notification.css        |  6 +-
 .../src/browser/style/che-plugins.css         | 56 ++++++++++---------
 .../resources/preview-urls-view.css           | 14 ++---
 8 files changed, 44 insertions(+), 50 deletions(-)

diff --git a/extensions/eclipse-che-theia-about/src/browser/about-che-theia-dialog.tsx b/extensions/eclipse-che-theia-about/src/browser/about-che-theia-dialog.tsx
index 36fd589fc..01bf7aa65 100644
--- a/extensions/eclipse-che-theia-about/src/browser/about-che-theia-dialog.tsx
+++ b/extensions/eclipse-che-theia-about/src/browser/about-che-theia-dialog.tsx
@@ -91,7 +91,7 @@ export class AboutCheTheiaDialog extends AboutDialog {
             fontWeight: 400
         };
         const linkStyle: React.CSSProperties = {
-            color: 'var(--theia-ui-dialog-font-color)'
+            color: 'var(--theia-editorWidget-foreground)'
         };
         return <h4 style={style}>
             Che-Theia@
diff --git a/extensions/eclipse-che-theia-about/src/browser/style/che-theia-about.css b/extensions/eclipse-che-theia-about/src/browser/style/che-theia-about.css
index a96c6573d..6e069f95f 100644
--- a/extensions/eclipse-che-theia-about/src/browser/style/che-theia-about.css
+++ b/extensions/eclipse-che-theia-about/src/browser/style/che-theia-about.css
@@ -31,11 +31,3 @@
     margin-right: 10px;
     height: 80px;
 }
-
-.che-theia-about-product-name {
-    display: flex;
-    align-items: center;
-    font-weight: 400;
-    color: var(--theia-ui-font-color0);
-    font-size: 45px;
-}
diff --git a/extensions/eclipse-che-theia-plugin-ext/src/browser/che-devfile-main.ts b/extensions/eclipse-che-theia-plugin-ext/src/browser/che-devfile-main.ts
index 97dec1646..050f48b64 100644
--- a/extensions/eclipse-che-theia-plugin-ext/src/browser/che-devfile-main.ts
+++ b/extensions/eclipse-che-theia-plugin-ext/src/browser/che-devfile-main.ts
@@ -88,7 +88,7 @@ class OpenFactoryLinkDialog extends AbstractDialog<string> {
 
         this.link = document.createElement('a');
         this.link.target = '_blank';
-        this.link.setAttribute('style', 'color: var(--theia-ui-dialog-font-color);');
+        this.link.setAttribute('style', 'color: var(--theia-editorWidget-foreground);');
         message.appendChild(this.link);
 
         this.appendCloseButton();
diff --git a/extensions/eclipse-che-theia-plugin-ext/src/browser/plugin/che-plugin-view-toolbar.tsx b/extensions/eclipse-che-theia-plugin-ext/src/browser/plugin/che-plugin-view-toolbar.tsx
index 4216a9813..baca0d7fb 100644
--- a/extensions/eclipse-che-theia-plugin-ext/src/browser/plugin/che-plugin-view-toolbar.tsx
+++ b/extensions/eclipse-che-theia-plugin-ext/src/browser/plugin/che-plugin-view-toolbar.tsx
@@ -61,7 +61,7 @@ export class ChePluginViewToolbar extends React.Component<ToolbarProps, ToolbarS
 
         if (this.isDisabled()) {
             return <input
-                className='search'
+                className='theia-input search'
                 type='text'
                 value={value}
                 onChange={this.onInputChanged}
@@ -69,7 +69,7 @@ export class ChePluginViewToolbar extends React.Component<ToolbarProps, ToolbarS
             />;
         } else {
             return <input
-                className='search'
+                className='theia-input search'
                 type='text'
                 value={value}
                 onChange={this.onInputChanged}
diff --git a/extensions/eclipse-che-theia-plugin-ext/src/browser/style/che-plugins-caching.css b/extensions/eclipse-che-theia-plugin-ext/src/browser/style/che-plugins-caching.css
index 0f1fc14a6..c90871f41 100644
--- a/extensions/eclipse-che-theia-plugin-ext/src/browser/style/che-plugins-caching.css
+++ b/extensions/eclipse-che-theia-plugin-ext/src/browser/style/che-plugins-caching.css
@@ -39,5 +39,5 @@
 }
 
 .che-plugins-caching-progress-status b {
-    color: var(--theia-success-color2);
+    color: var(--theia-badge-foreground);
 }
diff --git a/extensions/eclipse-che-theia-plugin-ext/src/browser/style/che-plugins-notification.css b/extensions/eclipse-che-theia-plugin-ext/src/browser/style/che-plugins-notification.css
index 79174f6fb..b5e790625 100644
--- a/extensions/eclipse-che-theia-plugin-ext/src/browser/style/che-plugins-notification.css
+++ b/extensions/eclipse-che-theia-plugin-ext/src/browser/style/che-plugins-notification.css
@@ -32,16 +32,16 @@
     margin-left: 1px;
     overflow: hidden;
     transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 500ms ease-in-out 0ms;
-    background-color: var(--theia-success-color0);
+    background-color: var(--theia-successBackground);
     color: #FFFFFF;
 }
 
 .che-plugins-notification .notification-button-panel:hover {
-    background-color: var(--theia-success-color1);
+    background-color: var(--theia-button-hover-background);
 }
 
 .che-plugins-notification .notification-button-panel:active {
-    box-shadow: 0px 0px 2px 0px var(--theia-success-color2);
+    box-shadow: 0px 0px 2px 0px var(--theia-button-background);
     outline: none;
 }
 
diff --git a/extensions/eclipse-che-theia-plugin-ext/src/browser/style/che-plugins.css b/extensions/eclipse-che-theia-plugin-ext/src/browser/style/che-plugins.css
index 9513f8eec..c123f40a9 100644
--- a/extensions/eclipse-che-theia-plugin-ext/src/browser/style/che-plugins.css
+++ b/extensions/eclipse-che-theia-plugin-ext/src/browser/style/che-plugins.css
@@ -53,11 +53,11 @@
 }
 
 .che-plugin-control-panel .search:focus {
-    border-color: var(--theia-accent-color3);
+    border-color: var(--theia-focusBorder);
 }
 
 .che-plugin-control-panel .search[disabled] {
-    color: var(--theia-ui-font-color2);
+    color: var(--theia-descriptionForeground);
 }
 
 /*-----------------------------------------------------------------------------
@@ -80,23 +80,23 @@
 
 .che-plugin-control-panel .menu-button {
     cursor: pointer;
-    color: var(--theia-ui-font-color2);
+    color: var(--theia-descriptionForeground);
 }
 
 .che-plugin-control-panel .menu-button:hover {
-    color: var(--theia-ui-font-color1);
+    color: var(--theia-button-foreground);
 }
 
 .che-plugin-control-panel .menu-button-active {
-    color: var(--theia-ui-font-color1);
+    color: var(--theia-button-foreground);
     border: none;
-    background: var(--theia-menu-color1);
+    background: var(--theia-menubar-selectionBackground);
     box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
 }
 
 .che-plugin-control-panel .menu-button-disabled {
     outline: none;
-    color: var(--theia-ui-font-color3);
+    color: var(--theia-badge-background);
 }
 
 /*-----------------------------------------------------------------------------
@@ -124,7 +124,7 @@
     top: 0px;
     height: 100%;
     right: 4px;
-    border-bottom: 1px solid var(--theia-layout-color4);
+    border-bottom: 1px solid var(--theia-editorHoverWidget-border);
     box-sizing: border-box;
 }
 
@@ -163,7 +163,7 @@
 }
 
 .che-plugin-list .highlighted {
-    background: var(--theia-word-highlight-match-color1);
+    background: var(--theia-editor-findMatchHighlightBackground);
 }
 
 .che-plugin-list .che-plugin-title {
@@ -184,13 +184,14 @@
 .che-plugin-list .che-plugin-name {
     font-size: var(--theia-ui-font-size0);
     font-weight: bold;
-    color: var(--theia-ui-font-color2);
+    color: var(--theia-descriptionForeground);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
 .che-plugin-list .che-plugin-version {
+    color: var(--theia-dropdown-listBackground);
     height: 20px;
     background-color: transparent;
     border-color: transparent;
@@ -199,7 +200,7 @@
 }
 
 .che-plugin-list .che-plugin-version option {
-    background-color: var(--theia-layout-color2);
+    background-color: var(--theia-dropdown-background);
     border-color: transparent;
 }
 
@@ -210,7 +211,7 @@
     right: 4px;
     height: 26px;
     font-size: var(--theia-ui-font-size0);
-    color: var(--theia-ui-font-color1);
+    color: var(--theia-editor-foreground);
     display: block;
     overflow: hidden;
 }
@@ -228,7 +229,7 @@
 
 .che-plugin-list .che-plugin-publisher {
     position: absolute;
-    color: var(--theia-ui-font-color2);
+    color: var(--theia-descriptionForeground);
     font-size: var(--theia-ui-font-size0);
     font-weight: bold;
     left: 0px;
@@ -250,8 +251,8 @@
     box-sizing: border-box;
     padding-top: 1px;
     padding-bottom: 1px;
-    background-color: var(--theia-disabled-color0);
-    color: var(--theia-disabled-color3);
+    color: var(--theia-editor-foreground);
+    background-color: var(--theia-secondaryButton-disabledBackground);
 }
 
 /*-----------------------------------------------------------------------------
@@ -279,40 +280,41 @@
 
 .che-plugin-list .che-plugin-action-add {
     cursor: pointer;
-    color: var(--theia-ui-button-font-color);
-    background-color: var(--theia-ui-button-color);
+    color: var(--theia-button-foreground);
+    background-color: var(--theia-button-background);
 }
 
 .che-plugin-list .che-plugin-action-add:hover {
-    background-color: var(--theia-ui-button-color-hover);
+    background-color: var(--theia-button-hoverBackground);
 }
 
 .che-plugin-list .che-plugin-action-add:active {
-    box-shadow: 0px 0px 1px 1px var(--theia-ui-button-color-hover);
+    box-shadow: 0px 0px 1px 1px var(--theia-button-hoverBackground);
     outline: none;
 }
 
 .che-plugin-list .che-plugin-action-remove {
     cursor: pointer;
-    color: var(--theia-success-font-color0);
-    background-color: var(--theia-success-color0);
+    color: var(--theia-inputValidation-warningBackground);
+    background-color: var(--theia-successBackground);
 }
 
 .che-plugin-list .che-plugin-action-remove:hover {
-    background-color: var(--theia-success-color1);
+    color: var(--theia-secondaryButton-foreground);
+    background-color: var(--theia-secondaryButton-hoverBackground);
 }
 
 .che-plugin-list .che-plugin-action-remove:active {
-    box-shadow: 0px 0px 1px 1px var(--theia-success-color0);
+    box-shadow: 0px 0px 1px 1px var(--theia-successBackground);
     outline: none;
 }
 
 .che-plugin-list .che-plugin-action-installing {
-    color: var(--theia-ui-button-font-color-secondary-disabled);
-    background-color: var(--theia-ui-button-color-secondary-disabled);
+    color: var(--theia-secondaryButton-disabledForeground);
+    background-color: var(--theia-secondaryButton-disabledBackground);
 }
 
 .che-plugin-list .che-plugin-action-removing {
-    color: var(--theia-ui-button-font-color-secondary-disabled);
-    background-color: var(--theia-ui-button-color-secondary-disabled);
+    color: var(--theia-secondaryButton-disabledForeground);
+    background-color: var(--theia-secondaryButton-disabledBackground);
 }
diff --git a/plugins/task-plugin/resources/preview-urls-view.css b/plugins/task-plugin/resources/preview-urls-view.css
index 7a3afa2ff..f5bf7d027 100644
--- a/plugins/task-plugin/resources/preview-urls-view.css
+++ b/plugins/task-plugin/resources/preview-urls-view.css
@@ -288,7 +288,7 @@
 
 html, body {
     font-family: var(--theia-ui-font-family);
-    background: var(--theia-layout-color0);
+    background: var(--theia-editor-background);
 }
 
 .previews-container {
@@ -300,7 +300,7 @@ html, body {
     left: 50%;
     position: absolute;
     transform: translate(-50%, -50%);
-    color: var(--theia-ui-font-color1);
+    color: var(--theia-descriptionForeground);
     font-size: var(--theia-ui-font-size1);
 }
 
@@ -325,8 +325,8 @@ html, body {
 }
 
 .button {
-    background-color: var(--theia-ui-button-color);
-    color: var(--theia-ui-button-font-color);
+    background-color: var(--theia-button-background);
+    color: var(--theia-button-foreground);
     border: none;
     border-radius: 0px;
     align-self: center;
@@ -342,17 +342,17 @@ html, body {
 .server-label {
     margin-left: 10px;
     margin-right: 10px;
-    color: var(--theia-ui-font-color1);
+    color: var(--theia-descriptionForeground);
     font-size: var(--theia-ui-font-size1);
 }
 
 .task-label {
     margin-left: 10px;
     margin-right: 10px;
-    color: var(--theia-ui-font-color2);
+    color: var(--theia-descriptionForeground);
     font-size: var(--theia-ui-font-size1);
 }
 
 .task-link {
-    color: var(--theia-accent-color1)
+    color: var(--theia-notificationLink-foreground)
 }