theming: fix decoration color theming

Fixes #6839

The following commit fixes the following problems:
- fixes the `DecorationOptions#color` to accept `ids` of color variables.
- fixes the decorations provided by `scm` (additions, modifications, removals).
- fixes the color variables for `scm`, aligning the values with vscode.
- fixes the decorations provided by the `siw` (search-in-workspace).

Signed-off-by: Vincent Fugnitto <vincent.fugnitto@ericsson.com>

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 {

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

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.'
             }
         );

packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx

@@ -761,7 +761,9 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
                     },
                     options: {
                         overviewRuler: {
-                            color: this.colorRegistry.getCurrentColor('editor.findMatchHighlightBackground') || '',
+                            color: {
+                                id: 'editor.findMatchHighlightBackground'
+                            },
                             position: OverviewRulerLane.Center
                         },
                         className: res.selected ? 'current-search-in-workspace-editor-match' : 'search-in-workspace-editor-match',