scm: fix theming colors for add, mod, del

Fixes #6839 This commit fixes the following problems: - `overviewRuler` colors were not applied properly for the `scm` extension - `minimap` colors were not applied properly for the `scm` extension - colors (`overviewRuler`) are updated to align with vscode Signed-off-by: Vincent Fugnitto <vincent.fugnitto@ericsson.com>
eclipse-theia · Apr 24, 2020 · d5aa2e1 · d5aa2e1
1 parent e049248
commit d5aa2e1
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 14 deletions.
diff --git a/packages/editor/src/browser/decorations/editor-decoration.ts b/packages/editor/src/browser/decorations/editor-decoration.ts
@@ -88,7 +88,7 @@ export interface DecorationOptions {
      * color of the decoration in the overview ruler.
      * use `rgba` values to play well with other decorations.
      */
-    color: string;
+    color: string | { id: string };
 }
 
 export enum MinimapPosition {

diff --git a/packages/scm/src/browser/dirty-diff/dirty-diff-decorator.ts b/packages/scm/src/browser/dirty-diff/dirty-diff-decorator.ts
@@ -36,11 +36,15 @@ export enum DirtyDiffDecorationType {
 const AddedLineDecoration = <EditorDecorationOptions>{
     linesDecorationsClassName: 'dirty-diff-glyph dirty-diff-added-line',
     overviewRuler: {
-        color: 'editorOverviewRuler.addedForeground',
+        color: {
+            id: 'editorOverviewRuler.addedForeground'
+        },
         position: OverviewRulerLane.Left,
     },
     minimap: {
-        color: 'minimapGutter.addedBackground',
+        color: {
+            id: 'minimapGutter.addedBackground'
+        },
         position: MinimapPosition.Gutter
     },
     isWholeLine: true
@@ -49,11 +53,15 @@ const AddedLineDecoration = <EditorDecorationOptions>{
 const RemovedLineDecoration = <EditorDecorationOptions>{
     linesDecorationsClassName: 'dirty-diff-glyph dirty-diff-removed-line',
     overviewRuler: {
-        color: 'editorOverviewRuler.deletedForeground',
+        color: {
+            id: 'editorOverviewRuler.deletedForeground'
+        },
         position: OverviewRulerLane.Left,
     },
     minimap: {
-        color: 'minimapGutter.deletedBackground',
+        color: {
+            id: 'minimapGutter.deletedBackground'
+        },
         position: MinimapPosition.Gutter
     },
     isWholeLine: false
@@ -62,11 +70,15 @@ const RemovedLineDecoration = <EditorDecorationOptions>{
 const ModifiedLineDecoration = <EditorDecorationOptions>{
     linesDecorationsClassName: 'dirty-diff-glyph dirty-diff-modified-line',
     overviewRuler: {
-        color: 'editorOverviewRuler.modifiedForeground',
+        color: {
+            id: 'editorOverviewRuler.modifiedForeground'
+        },
         position: OverviewRulerLane.Left,
     },
     minimap: {
-        color: 'minimapGutter.modifiedBackground',
+        color: {
+            id: 'minimapGutter.modifiedBackground'
+        },
         position: MinimapPosition.Gutter
     },
     isWholeLine: true

diff --git a/packages/scm/src/browser/scm-contribution.ts b/packages/scm/src/browser/scm-contribution.ts
@@ -53,6 +53,12 @@ export namespace SCM_COMMANDS {
     };
 }
 
+export namespace ScmColors {
+    export const editorGutterModifiedBackground = 'editorGutter.modifiedBackground';
+    export const editorGutterAddedBackground = 'editorGutter.addedBackground';
+    export const editorGutterDeletedBackground = 'editorGutter.deletedBackground';
+}
+
 @injectable()
 export class ScmContribution extends AbstractViewContribution<ScmWidget> implements FrontendApplicationContribution, ColorContribution {
 
@@ -186,24 +192,23 @@ export class ScmContribution extends AbstractViewContribution<ScmWidget> impleme
      * It should be aligned with https://github.com/microsoft/vscode/blob/0dfa355b3ad185a6289ba28a99c141ab9e72d2be/src/vs/workbench/contrib/scm/browser/dirtydiffDecorator.ts#L808
      */
     registerColors(colors: ColorRegistry): void {
-        const overviewRulerDefault = Color.rgba(0, 122, 204, 0.6);
         colors.register(
             {
-                id: 'editorGutter.modifiedBackground', defaults: {
+                id: ScmColors.editorGutterModifiedBackground, defaults: {
                     dark: Color.rgba(12, 125, 157),
                     light: Color.rgba(102, 175, 224),
                     hc: Color.rgba(0, 155, 249)
                 }, description: 'Editor gutter background color for lines that are modified.'
             },
             {
-                id: 'editorGutter.addedBackground', defaults: {
+                id: ScmColors.editorGutterAddedBackground, defaults: {
                     dark: Color.rgba(88, 124, 12),
                     light: Color.rgba(129, 184, 139),
                     hc: Color.rgba(51, 171, 78)
                 }, description: 'Editor gutter background color for lines that are added.'
             },
             {
-                id: 'editorGutter.deletedBackground', defaults: {
+                id: ScmColors.editorGutterDeletedBackground, defaults: {
                     dark: Color.rgba(148, 21, 27),
                     light: Color.rgba(202, 75, 81),
                     hc: Color.rgba(252, 93, 109)
@@ -233,17 +238,23 @@ export class ScmContribution extends AbstractViewContribution<ScmWidget> impleme
             },
             {
                 id: 'editorOverviewRuler.modifiedForeground', defaults: {
-                    dark: overviewRulerDefault, light: overviewRulerDefault, hc: overviewRulerDefault
+                    dark: Color.transparent(ScmColors.editorGutterModifiedBackground, 0.6),
+                    light: Color.transparent(ScmColors.editorGutterModifiedBackground, 0.6),
+                    hc: Color.transparent(ScmColors.editorGutterModifiedBackground, 0.6)
                 }, description: 'Overview ruler marker color for modified content.'
             },
             {
                 id: 'editorOverviewRuler.addedForeground', defaults: {
-                    dark: overviewRulerDefault, light: overviewRulerDefault, hc: overviewRulerDefault
+                    dark: Color.transparent(ScmColors.editorGutterAddedBackground, 0.6),
+                    light: Color.transparent(ScmColors.editorGutterAddedBackground, 0.6),
+                    hc: Color.transparent(ScmColors.editorGutterAddedBackground, 0.6)
                 }, description: 'Overview ruler marker color for added content.'
             },
             {
                 id: 'editorOverviewRuler.deletedForeground', defaults: {
-                    dark: overviewRulerDefault, light: overviewRulerDefault, hc: overviewRulerDefault
+                    dark: Color.transparent(ScmColors.editorGutterDeletedBackground, 0.6),
+                    light: Color.transparent(ScmColors.editorGutterDeletedBackground, 0.6),
+                    hc: Color.transparent(ScmColors.editorGutterDeletedBackground, 0.6)
                 }, description: 'Overview ruler marker color for deleted content.'
             }
         );