feat: update high contrast theme (#1728)

* feat: update high contrast theme * chore: update icon theme type * chore: update test
opensumi · Oct 9, 2022 · 568b04a · 568b04a
1 parent 94ac126
commit 568b04a
Show file tree

Hide file tree

Showing 82 changed files with 2,046 additions and 752 deletions.
diff --git a/packages/editor/src/browser/decoration-applier.ts b/packages/editor/src/browser/decoration-applier.ts
@@ -173,7 +173,7 @@ export class MonacoEditorDecorationApplier extends Disposable {
 function assignModelDecorationOptions(
   target: monaco.editor.IModelDecorationOptions,
   property: IDynamicModelDecorationProperty,
-  currentTheme: undefined | 'dark' | 'light' | 'hc',
+  currentTheme: undefined | 'dark' | 'light' | 'hcDark' | 'hcLight',
 ) {
   if (property.overviewRulerLane) {
     if (!target.overviewRuler) {

diff --git a/packages/extension/__tests__/hosted/api/vscode/ext.host.theming.test.ts b/packages/extension/__tests__/hosted/api/vscode/ext.host.theming.test.ts
@@ -8,7 +8,6 @@ import { IThemeService, ThemeType } from '@opensumi/ide-theme';
 
 import { createBrowserInjector } from '../../../../../../tools/dev-tool/src/injector-helper';
 
-
 const emitterA = new Emitter<any>();
 const emitterB = new Emitter<any>();
 
@@ -62,6 +61,6 @@ describe('vscode extHostTheming Test', () => {
       expect(e.kind).toEqual(ColorThemeKind.HighContrast);
       done();
     });
-    themeChangeEmitter.fire({ type: 'hc' });
+    themeChangeEmitter.fire({ type: 'hcDark' });
   });
 });
diff --git a/packages/extension/__tests__/node/merge-contributes.test.ts b/packages/extension/__tests__/node/merge-contributes.test.ts
@@ -108,6 +108,7 @@ describe('mergeContributes', () => {
       dark: '#FFFFFF13',
       light: '#0000000C',
       highContrast: '#FFFFFF13',
+      highContrastLight: '#FFFFFF13',
     },
   };
 
@@ -118,6 +119,7 @@ describe('mergeContributes', () => {
       dark: '#BEBEBE',
       light: '#747474',
       highContrast: '#BEBEBE',
+      highContrastLight: '#BEBEBE',
     },
   };
 

diff --git a/packages/extension/src/browser/vscode/api/main.thread.api.webview.ts b/packages/extension/src/browser/vscode/api/main.thread.api.webview.ts
@@ -405,7 +405,7 @@ export class MainThreadWebview extends Disposable implements IMainThreadWebview
     this._persistWebviewPanelMeta(id);
   }
 
-  $setIconPath(id: string, value: { light: string; dark: string; hc: string } | undefined): void {
+  $setIconPath(id: string, value: { light: string; dark: string } | undefined): void {
     const webviewPanel = this.getWebviewPanel(id);
     if (!webviewPanel.editorWebview) {
       return;

diff --git a/packages/extension/src/browser/vscode/contributes/color.ts b/packages/extension/src/browser/vscode/contributes/color.ts
@@ -51,7 +51,15 @@ export class ColorsContributionPoint extends VSCodeContributePoint<ColorsSchema>
             highContrast: {
               description: localize(
                 'contributes.defaults.highContrast',
-                'The default color for high contrast themes. Either a color value in hex (#RRGGBB[AA]) or the identifier of a themable color which provides the default.',
+                'The default color for high contrast dark themes. Either a color value in hex (#RRGGBB[AA]) or the identifier of a themable color which provides the default. If not provided, the `dark` color is used as default for high contrast dark themes.',
+              ),
+              type: 'string',
+              anyOf: [{ type: 'string', format: 'color-hex' }],
+            },
+            highContrastLight: {
+              description: localize(
+                'contributes.defaults.highContrastLight',
+                'The default color for high contrast light themes. Either a color value in hex (#RRGGBB[AA]) or the identifier of a themable color which provides the default. If not provided, the `light` color is used as default for high contrast light themes.',
               ),
               type: 'string',
               anyOf: [{ type: 'string', format: 'color-hex' }],

diff --git a/packages/extension/src/common/vscode/ext-types.ts b/packages/extension/src/common/vscode/ext-types.ts
@@ -2656,6 +2656,7 @@ export enum ColorThemeKind {
   Light = 1,
   Dark = 2,
   HighContrast = 3,
+  HighContrastLight = 4,
 }
 
 export enum SymbolTag {

diff --git a/packages/extension/src/common/vscode/extension.ts b/packages/extension/src/common/vscode/extension.ts
@@ -88,7 +88,7 @@ export interface IView {
 export interface IColor {
   id: string;
   description: string;
-  defaults: { light: string; dark: string; highContrast: string };
+  defaults: { light: string; dark: string; highContrast: string; highContrastLight: string };
 }
 
 export interface IExtensionContributions {

diff --git a/packages/extension/src/common/vscode/webview.ts b/packages/extension/src/common/vscode/webview.ts
@@ -41,7 +41,7 @@ export interface IMainThreadWebview {
   $disposeWebview(id: string): void;
   $reveal(id: string, showOptions: WebviewPanelShowOptions): void;
   $setTitle(id: string, value: string): void;
-  $setIconPath(id: string, value?: { light: string; dark: string; hc: string } | string): void;
+  $setIconPath(id: string, value?: { light: string; dark: string } | string): void;
 
   $setHtml(id: string, value: string): void;
   $setOptions(id: string, options: IWebviewOptions): void;

diff --git a/packages/extension/src/hosted/api/vscode/ext.host.api.webview.ts b/packages/extension/src/hosted/api/vscode/ext.host.api.webview.ts
@@ -200,12 +200,15 @@ export class ExtHostWebviewPanel implements WebviewPanel {
     this.assertNotDisposed();
     if (this._iconPath !== value) {
       this._iconPath = value;
-      let param: { light: string; dark: string; hc: string } = { light: '', dark: '', hc: '' };
+      let param: { light: string; dark: string } = {
+        light: '',
+        dark: '',
+      };
       if (Uri.isUri(value)) {
-        param = { light: value.toString(), dark: value.toString(), hc: value.toString() };
+        param = { light: value.toString(), dark: value.toString() };
       } else {
         const v = value as { light: Uri; dark: Uri };
-        param = { light: v.light.toString(), dark: v.dark.toString(), hc: '' };
+        param = { light: v.light.toString(), dark: v.dark.toString() };
       }
       this._proxy.$setIconPath(this._handle, param);
     }

diff --git a/packages/extension/src/hosted/api/vscode/ext.host.theming.ts b/packages/extension/src/hosted/api/vscode/ext.host.theming.ts
@@ -20,8 +20,23 @@ export class ExtHostTheming implements IExtHostTheming {
   }
 
   $onColorThemeChange(type: string): void {
-    const kind =
-      type === 'light' ? ColorThemeKind.Light : type === 'dark' ? ColorThemeKind.Dark : ColorThemeKind.HighContrast;
+    let kind: ColorThemeKind;
+    switch (type) {
+      case 'light':
+        kind = ColorThemeKind.Light;
+        break;
+      case 'dark':
+        kind = ColorThemeKind.Dark;
+        break;
+      case 'hcDark':
+        kind = ColorThemeKind.HighContrast;
+        break;
+      case 'hcLight':
+        kind = ColorThemeKind.HighContrastLight;
+        break;
+      default:
+        kind = ColorThemeKind.Dark;
+    }
     this._actual = new ColorTheme(kind);
     this._onDidChangeActiveColorTheme.fire(this._actual);
   }

diff --git a/packages/i18n/src/common/en-US.lang.ts b/packages/i18n/src/common/en-US.lang.ts
@@ -693,7 +693,7 @@ export const localizationBundle = {
 
     'theme.base.vs': 'Light Theme',
     'theme.base.vs-dark': 'Dark Theme',
-    'theme.base.hc-black': 'High Contrast Theme',
+    'theme.base.hc': 'High Contrast Themes',
     'theme.quickopen.plh': 'Select Color Theme（Up/Down Keys to Preview）',
     'icon.quickopen.plh': 'Select Icon Theme（Up/Down Keys to Preview）',
 

diff --git a/packages/i18n/src/common/zh-CN.lang.ts b/packages/i18n/src/common/zh-CN.lang.ts
@@ -726,7 +726,7 @@ export const localizationBundle = {
 
     'theme.base.vs': '浅色主题',
     'theme.base.vs-dark': '深色主题',
-    'theme.base.hc-black': '高对比度主题',
+    'theme.base.hc': '高对比度主题',
     'theme.quickopen.plh': '选择主题（上下移动光标预览）',
     'icon.quickopen.plh': '选择图标主题（上下移动光标预览）',
 

diff --git a/packages/markers/src/browser/markers-seriverty-icon.ts b/packages/markers/src/browser/markers-seriverty-icon.ts
@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 
 import { MarkerSeverity } from '@opensumi/ide-core-browser';
-import { Color, DARK, LIGHT, ThemeType, HIGH_CONTRAST } from '@opensumi/ide-theme';
+import { Color, DARK, LIGHT, ThemeType, HIGH_CONTRAST_LIGHT, HIGH_CONTRAST_DARK } from '@opensumi/ide-theme';
 
 const errorStart = encodeURIComponent(
   '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.58318 2.02842C9.96435 2.16331 11.2561 2.77279 12.2383 3.75307C13.3643 4.87923 13.9978 6.40584 14 7.99829C14.0004 9.38617 13.5196 10.7313 12.6396 11.8045C11.7595 12.8778 10.5345 13.6127 9.17333 13.8841C7.81215 14.1556 6.39895 13.9467 5.1745 13.2931C3.95005 12.6394 2.99008 11.5815 2.45814 10.2995C1.92619 9.0175 1.85517 7.59072 2.25717 6.26222C2.65917 4.93373 3.50933 3.7857 4.66282 3.0137C5.8163 2.24171 7.20177 1.89351 8.58318 2.02842ZM8.68038 1.03316C10.292 1.19055 11.7993 1.90184 12.9453 3.04585C14.2587 4.35938 14.9976 6.14013 15 7.99764C15.0005 9.61695 14.4396 11.1864 13.4129 12.4385C12.3861 13.6907 10.9569 14.5482 9.36889 14.8648C7.78084 15.1815 6.13211 14.9378 4.70359 14.1752C3.27506 13.4127 2.1551 12.1784 1.53449 10.6828C0.913887 9.18708 0.831027 7.52251 1.30003 5.97259C1.76903 4.42268 2.76089 3.08331 4.10662 2.18265C5.45236 1.28199 7.06873 0.875761 8.68038 1.03316ZM5.52498 5L8.00004 7.47506L10.4751 5L11.1822 5.70711L8.70714 8.18217L11.1818 10.6569L10.4747 11.364L8.00004 8.88927L5.52535 11.364L4.81824 10.6569L7.29293 8.18217L4.81787 5.70711L5.52498 5Z" fill="',
@@ -70,7 +70,7 @@ function getIconStyle(severity: MarkerSeverity, theme: ThemeType): CSSProperties
   };
 }
 
-export { DARK, LIGHT, HIGH_CONTRAST, ThemeType } from '@opensumi/ide-theme';
+export { DARK, LIGHT, HIGH_CONTRAST_LIGHT, HIGH_CONTRAST_DARK, ThemeType } from '@opensumi/ide-theme';
 
 export const SeverityIconStyle = {
   [LIGHT]: {
@@ -85,10 +85,16 @@ export const SeverityIconStyle = {
     [MarkerSeverity.Warning]: getIconStyle(MarkerSeverity.Warning, DARK),
     [MarkerSeverity.Error]: getIconStyle(MarkerSeverity.Error, DARK),
   },
-  [HIGH_CONTRAST]: {
-    [MarkerSeverity.Hint]: getIconStyle(MarkerSeverity.Hint, DARK),
-    [MarkerSeverity.Info]: getIconStyle(MarkerSeverity.Info, DARK),
-    [MarkerSeverity.Warning]: getIconStyle(MarkerSeverity.Warning, DARK),
-    [MarkerSeverity.Error]: getIconStyle(MarkerSeverity.Error, DARK),
+  [HIGH_CONTRAST_DARK]: {
+    [MarkerSeverity.Hint]: getIconStyle(MarkerSeverity.Hint, HIGH_CONTRAST_DARK),
+    [MarkerSeverity.Info]: getIconStyle(MarkerSeverity.Info, HIGH_CONTRAST_DARK),
+    [MarkerSeverity.Warning]: getIconStyle(MarkerSeverity.Warning, HIGH_CONTRAST_DARK),
+    [MarkerSeverity.Error]: getIconStyle(MarkerSeverity.Error, HIGH_CONTRAST_DARK),
+  },
+  [HIGH_CONTRAST_LIGHT]: {
+    [MarkerSeverity.Hint]: getIconStyle(MarkerSeverity.Hint, HIGH_CONTRAST_LIGHT),
+    [MarkerSeverity.Info]: getIconStyle(MarkerSeverity.Info, HIGH_CONTRAST_LIGHT),
+    [MarkerSeverity.Warning]: getIconStyle(MarkerSeverity.Warning, HIGH_CONTRAST_LIGHT),
+    [MarkerSeverity.Error]: getIconStyle(MarkerSeverity.Error, HIGH_CONTRAST_LIGHT),
   },
 };
diff --git a/packages/scm/src/browser/scm-color.ts b/packages/scm/src/browser/scm-color.ts
@@ -8,7 +8,8 @@ export const editorGutterModifiedBackground = registerColor(
   {
     dark: new Color(new RGBA(12, 125, 157)),
     light: new Color(new RGBA(102, 175, 224)),
-    hc: new Color(new RGBA(0, 73, 122)),
+    hcDark: new Color(new RGBA(0, 73, 122)),
+    hcLight: new Color(new RGBA(32, 144, 211)),
   },
   localize('editorGutterModifiedBackground', 'Editor gutter background color for lines that are modified.'),
 );
@@ -18,7 +19,8 @@ export const editorGutterAddedBackground = registerColor(
   {
     dark: new Color(new RGBA(88, 124, 12)),
     light: new Color(new RGBA(129, 184, 139)),
-    hc: new Color(new RGBA(27, 82, 37)),
+    hcDark: new Color(new RGBA(27, 82, 37)),
+    hcLight: new Color(new RGBA(72, 152, 93)),
   },
   localize('editorGutterAddedBackground', 'Editor gutter background color for lines that are added.'),
 );
@@ -28,7 +30,8 @@ export const editorGutterDeletedBackground = registerColor(
   {
     dark: new Color(new RGBA(148, 21, 27)),
     light: new Color(new RGBA(202, 75, 81)),
-    hc: new Color(new RGBA(141, 14, 20)),
+    hcDark: new Color(new RGBA(141, 14, 20)),
+    hcLight: new Color(new RGBA(181, 32, 13)),
   },
   localize('editorGutterDeletedBackground', 'Editor gutter background color for lines that are deleted.'),
 );
@@ -40,7 +43,8 @@ export const overviewRulerModifiedForeground = registerColor(
   {
     dark: overviewRulerDefault,
     light: overviewRulerDefault,
-    hc: overviewRulerDefault,
+    hcDark: overviewRulerDefault,
+    hcLight: overviewRulerDefault,
   },
   localize('overviewRulerModifiedForeground', 'Overview ruler marker color for modified content.'),
 );
@@ -50,7 +54,8 @@ export const overviewRulerAddedForeground = registerColor(
   {
     dark: overviewRulerDefault,
     light: overviewRulerDefault,
-    hc: overviewRulerDefault,
+    hcDark: overviewRulerDefault,
+    hcLight: overviewRulerDefault,
   },
   localize('overviewRulerAddedForeground', 'Overview ruler marker color for added content.'),
 );
@@ -60,7 +65,8 @@ export const overviewRulerDeletedForeground = registerColor(
   {
     dark: overviewRulerDefault,
     light: overviewRulerDefault,
-    hc: overviewRulerDefault,
+    hcDark: overviewRulerDefault,
+    hcLight: overviewRulerDefault,
   },
   localize('overviewRulerDeletedForeground', 'Overview ruler marker color for deleted content.'),
 );