@opensumi/ide-theme 2.21.13 → 2.22.0

package/src/common/theme.service.ts

@@ -0,0 +1,363 @@
+import { IRawThemeSetting } from 'vscode-textmate';
+
+import { Event, URI, IDisposable, IThemeColor, Deferred } from '@opensumi/ide-core-common';
+
+import { Color } from './color';
+import { vs, vs_dark, hc_black, hc_light } from './default-themes';
+
+export const ThemeServicePath = 'themeServicePath';
+
+export const DEFAULT_THEME_ID = 'ide-dark';
+// from vscode
+export const colorIdPattern = '^\\w+[.\\w+]*$';
+
+export interface IIconTheme {
+  hasFileIcons: boolean;
+  hasFolderIcons: boolean;
+  hidesExplorerArrows: boolean;
+  styleSheetContent: string;
+  load(location?: URI): Promise<string>;
+}
+
+export const IIconService = Symbol('IIconTheme');
+
+export enum IconType {
+  Mask = 'mask',
+  Background = 'background',
+  Base64 = 'base64',
+}
+
+export enum IconShape {
+  Circle,
+  Square,
+}
+
+export interface IIconService {
+  currentThemeId: string;
+  currentTheme: IIconTheme;
+  iconThemeLoaded: Deferred<void>;
+
+  onThemeChange: Event<IIconTheme>;
+  /**
+   * 应用主题（外部需要改主题请直接修改preference）
+   * @param themeId 主题ID
+   * */
+  applyTheme(themeId: string): Promise<void>;
+  /**
+   * 将 Base64 路径进行转义，便于在 `background: url("${iconPath}")` 结构中使用
+   * @param iconPath Base64 路径
+   */
+  encodeBase64Path(iconPath: string): string;
+  /**
+   * 将 codicon 的 id 转换为 codicon 的 class
+   * @param str codicon id eg. $(add), $(add~sync)
+   */
+  fromString(str: string): string | undefined;
+  /**
+   * 将一个url地址或插件主题url转换为icon的class
+   * @param basePath 路径前缀
+   * @param icon iconUrl地址，可以是直接的字符串，或者和主题类型有关的 object 字符串对象
+   * @param type 选择采用Mask或者Background的方式渲染icon资源, 默认值为IconType.Mask
+   * @returns icon的className
+   */
+  fromIcon(
+    basePath: string,
+    icon?: { [index in IconThemeType]: string } | string,
+    type?: IconType,
+    shape?: IconShape,
+    fromExtension?: boolean,
+  ): string | undefined;
+  registerIconThemes(iconThemesContribution: ThemeContribution[], extPath: URI): void;
+
+  /**
+   * 注册来自插件的字体图标
+   */
+  registerFontIcons(definitions: FontIconDefinition[], iconFontFamilies: IconFontFamily[]): void;
+  getAvailableThemeInfos(): IconThemeInfo[];
+}
+
+export interface IThemeData extends IStandaloneThemeData {
+  name: string;
+  id: string;
+  colorMap: IColorMap;
+  themeSettings: IRawThemeSetting[];
+  settings: IRawThemeSetting[];
+  initializeFromData(data): void;
+  initializeThemeData(id, name, base, themeLocation: URI): Promise<void>;
+}
+
+export interface FontIconDefinition {
+  id: string;
+  content: string;
+  fontFamily: string;
+}
+
+export interface IconFontFamily {
+  source: string;
+  fontFamily: string;
+  format: string;
+  display: string;
+}
+
+export interface IThemeService {
+  currentThemeId: string;
+  colorThemeLoaded: Deferred<void>;
+  onThemeChange: Event<ITheme>;
+  registerThemes(themeContributions: ThemeContribution[], extPath: URI): IDisposable;
+  /**
+   * 应用主题（外部需要改主题请直接修改preference）
+   * @param id 主题ID
+   */
+  applyTheme(id: string): Promise<void>;
+  getAvailableThemeInfos(): ThemeInfo[];
+  getCurrentTheme(): Promise<ITheme>;
+  getCurrentThemeSync(): ITheme;
+  getColor(id: string | IThemeColor | undefined): string | undefined;
+  getColorVar(id: string | IThemeColor | undefined): string | undefined;
+  /**
+   * 获取指定 color token 的 className
+   */
+  getColorClassNameByColorToken(colorId: string | IThemeColor | undefined): string | undefined;
+  registerColor(contribution: ExtColorContribution): void;
+}
+
+export const IThemeService = Symbol('IThemeService');
+
+export interface ITokenColorizationRule {
+  name?: string;
+  scope?: string | string[];
+  settings: ITokenColorizationSetting;
+}
+
+export interface ITokenColorizationSetting {
+  foreground?: string;
+  background?: string;
+  fontStyle?: string; // italic, underline, bold
+}
+
+export interface ISemanticTokenColorizationSetting {
+  foreground?: string;
+  fontStyle?: string /* [italic|underline|bold] */;
+  bold?: boolean;
+  underline?: boolean;
+  italic?: boolean;
+}
+
+export interface IColorMap {
+  [id: string]: Color;
+}
+
+/**
+ * Color scheme used by the OS and by color themes.
+ */
+export enum ColorScheme {
+  DARK = 'dark',
+  LIGHT = 'light',
+  HIGH_CONTRAST_DARK = 'hcDark',
+  HIGH_CONTRAST_LIGHT = 'hcLight',
+}
+
+export type BuiltinTheme = 'vs' | 'vs-dark' | 'hc-black' | 'hc-light';
+
+export function getThemeTypeName(base: BuiltinTheme) {
+  const map = {
+    vs: 'theme.base.vs',
+    'vs-dark': 'theme.base.vs-dark',
+    'hc-black': 'theme.base.hc',
+    'hc-light': 'theme.base.hc',
+  };
+  return map[base];
+}
+
+export enum BuiltinThemeComparator {
+  'vs',
+  'vs-dark',
+  'hc-black',
+  'hc-light',
+}
+
+export interface IStandaloneThemeData {
+  base: BuiltinTheme;
+  inherit: boolean;
+  rules: ITokenThemeRule[];
+  encodedTokensColors?: string[];
+  colors: IColors;
+}
+
+export interface IColors {
+  [colorId: string]: string;
+}
+
+export interface ITokenThemeRule {
+  token: string;
+  foreground?: string;
+  background?: string;
+  fontStyle?: string;
+}
+
+export interface ITokenColorCustomizations {
+  [groupIdOrThemeSettingsId: string]:
+    | string
+    | ITokenColorizationSetting
+    | ITokenColorCustomizations
+    | undefined
+    | ITokenColorizationRule[];
+  comments?: string | ITokenColorizationSetting;
+  strings?: string | ITokenColorizationSetting;
+  numbers?: string | ITokenColorizationSetting;
+  keywords?: string | ITokenColorizationSetting;
+  types?: string | ITokenColorizationSetting;
+  functions?: string | ITokenColorizationSetting;
+  variables?: string | ITokenColorizationSetting;
+  textMateRules?: ITokenColorizationRule[];
+}
+
+export const VS_LIGHT_THEME_NAME = 'vs';
+export const VS_DARK_THEME_NAME = 'vs-dark';
+export const HC_BLACK_THEME_NAME = 'hc-black';
+export const HC_LIGHT_THEME_NAME = 'hc-light';
+export interface ThemeContribution {
+  id?: string;
+  label: string;
+  // default to be vs
+  uiTheme?: BuiltinTheme;
+  path: string;
+}
+
+// base themes
+export const DARK: ThemeType = 'dark';
+export const LIGHT: ThemeType = 'light';
+export const HIGH_CONTRAST_DARK: ThemeType = 'hcDark';
+export const HIGH_CONTRAST_LIGHT: ThemeType = 'hcLight';
+export type ThemeType = 'light' | 'dark' | 'hcDark' | 'hcLight';
+
+export type IconThemeType = 'light' | 'dark';
+
+export function getBuiltinRules(builtinTheme: BuiltinTheme): IStandaloneThemeData {
+  switch (builtinTheme) {
+    case VS_LIGHT_THEME_NAME:
+      return vs;
+    case VS_DARK_THEME_NAME:
+      return vs_dark;
+    case HC_BLACK_THEME_NAME:
+      return hc_black;
+    case HC_LIGHT_THEME_NAME:
+      return hc_light;
+  }
+}
+
+export function getThemeTypeSelector(type: ThemeType): string {
+  switch (type) {
+    case DARK:
+      return 'vs-dark';
+    case HIGH_CONTRAST_DARK:
+      return 'hc-black';
+    case HIGH_CONTRAST_LIGHT:
+      return 'hc-light';
+    default:
+      return 'vs';
+  }
+}
+
+export function getThemeType(base: BuiltinTheme): ThemeType {
+  switch (base) {
+    case VS_LIGHT_THEME_NAME:
+      return LIGHT;
+    case VS_DARK_THEME_NAME:
+      return DARK;
+    case HC_BLACK_THEME_NAME:
+      return HIGH_CONTRAST_DARK;
+    case HC_LIGHT_THEME_NAME:
+      return HIGH_CONTRAST_LIGHT;
+  }
+}
+
+export type ColorIdentifier = string;
+
+export interface ITheme {
+  readonly type: ThemeType;
+  readonly themeData: IThemeData;
+
+  /**
+   * Resolves the color of the given color identifier. If the theme does not
+   * specify the color, the default color is returned unless <code>useDefault</code> is set to false.
+   * @param color the id of the color
+   * @param useDefault specifies if the default color should be used. If not set, the default is used.
+   */
+  getColor(color: ColorIdentifier, useDefault?: boolean): Color | undefined;
+
+  /**
+   * Returns whether the theme defines a value for the color. If not, that means the
+   * default color will be used.
+   */
+  defines(color: ColorIdentifier): boolean;
+}
+
+export interface IColorCustomizations {
+  [colorIdOrThemeSettingsId: string]: string | IColorCustomizations;
+}
+
+export interface ColorContribution {
+  readonly id: ColorIdentifier;
+  readonly description: string;
+  readonly defaults: ColorDefaults | null;
+  readonly needsTransparency: boolean;
+  readonly deprecationMessage: string | undefined;
+}
+
+export interface ExtColorContribution {
+  id: string;
+  description: string;
+  defaults: { light: string; dark: string; highContrast: string; highContrastLight?: string };
+}
+
+export type ColorFunction = (theme: ITheme) => Color | undefined;
+
+export interface ColorDefaults {
+  light: ColorValue | null;
+  dark: ColorValue | null;
+  hcDark: ColorValue | null;
+  hcLight: ColorValue | null;
+}
+
+/**
+ * A Color Value is either a color literal, a refence to other color or a derived color
+ */
+export type ColorValue = Color | string | ColorIdentifier | ColorFunction;
+
+export interface ThemeInfo {
+  name: string;
+  base: BuiltinTheme;
+  themeId: string;
+  inherit?: boolean;
+}
+
+export interface IconThemeInfo {
+  name: string;
+  themeId: string;
+}
+
+export function themeColorFromId(id: ColorIdentifier) {
+  return { id };
+}
+
+export function getThemeId(contribution: ThemeContribution) {
+  if (contribution.id) {
+    return contribution.id;
+  }
+  return `${contribution.uiTheme || 'vs-dark'} ${toCSSSelector('vscode-theme', contribution.path)}`;
+}
+
+function toCSSSelector(extensionId: string, path: string) {
+  if (path.indexOf('./') === 0) {
+    path = path.substr(2);
+  }
+  let str = `${extensionId}-${path}`;
+
+  // remove all characters that are not allowed in css
+  str = str.replace(/[^_\-a-zA-Z0-9]/g, '-');
+  if (str.charAt(0).match(/[0-9\-]/)) {
+    str = '_' + str;
+  }
+  return str;
+}

package/src/common/themeCompatibility.ts

@@ -0,0 +1,95 @@
+/* ---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Color } from './color';
+import * as colorRegistry from './color-registry';
+import { ITokenColorizationRule, IColorMap } from './theme.service';
+
+const settingToColorIdMapping: { [settingId: string]: string[] } = {};
+function addSettingMapping(settingId: string, colorId: string) {
+  let colorIds = settingToColorIdMapping[settingId];
+  if (!colorIds) {
+    settingToColorIdMapping[settingId] = colorIds = [];
+  }
+  colorIds.push(colorId);
+}
+
+// 旧的settings和新的ITokenColorizationRule的转换（主要是一些key的映射）
+// tslint:disable
+export function convertSettings(
+  oldSettings: ITokenColorizationRule[],
+  resultRules: ITokenColorizationRule[],
+  resultColors: IColorMap,
+): void {
+  for (const rule of oldSettings) {
+    resultRules.push(rule);
+    if (!rule.scope) {
+      const settings = rule.settings;
+      if (!settings) {
+        rule.settings = {};
+      } else {
+        // eslint-disable-next-line guard-for-in
+        for (const key in settings) {
+          const mappings = settingToColorIdMapping[key];
+          if (mappings) {
+            const colorHex = settings[key];
+            if (typeof colorHex === 'string') {
+              const color = Color.fromHex(colorHex);
+              for (const colorId of mappings) {
+                resultColors[colorId] = color;
+              }
+            }
+          }
+          if (key !== 'foreground' && key !== 'background' && key !== 'fontStyle') {
+            delete settings[key];
+          }
+        }
+      }
+    }
+  }
+}
+
+addSettingMapping('background', colorRegistry.editorBackground);
+addSettingMapping('foreground', colorRegistry.editorForeground);
+addSettingMapping('selection', colorRegistry.editorSelectionBackground);
+addSettingMapping('inactiveSelection', colorRegistry.editorInactiveSelection);
+addSettingMapping('selectionHighlightColor', colorRegistry.editorSelectionHighlight);
+addSettingMapping('findMatchHighlight', colorRegistry.editorFindMatchHighlight);
+addSettingMapping('currentFindMatchHighlight', colorRegistry.editorFindMatch);
+addSettingMapping('hoverHighlight', colorRegistry.editorHoverHighlight);
+addSettingMapping('wordHighlight', 'editor.wordHighlightBackground'); // inlined to avoid editor/contrib dependenies
+addSettingMapping('wordHighlightStrong', 'editor.wordHighlightStrongBackground');
+addSettingMapping('findRangeHighlight', colorRegistry.editorFindRangeHighlight);
+addSettingMapping('findMatchHighlight', 'peekViewResult.matchHighlightBackground');
+addSettingMapping('referenceHighlight', 'peekViewEditor.matchHighlightBackground');
+addSettingMapping('lineHighlight', colorRegistry.editorLineHighlight);
+addSettingMapping('rangeHighlight', colorRegistry.editorRangeHighlight);
+addSettingMapping('caret', colorRegistry.editorCursorForeground);
+addSettingMapping('invisibles', colorRegistry.editorWhitespaces);
+addSettingMapping('guide', colorRegistry.editorIndentGuides);
+addSettingMapping('activeGuide', colorRegistry.editorActiveIndentGuides);
+
+const ansiColorMap = [
+  'ansiBlack',
+  'ansiRed',
+  'ansiGreen',
+  'ansiYellow',
+  'ansiBlue',
+  'ansiMagenta',
+  'ansiCyan',
+  'ansiWhite',
+  'ansiBrightBlack',
+  'ansiBrightRed',
+  'ansiBrightGreen',
+  'ansiBrightYellow',
+  'ansiBrightBlue',
+  'ansiBrightMagenta',
+  'ansiBrightCyan',
+  'ansiBrightWhite',
+];
+
+for (const color of ansiColorMap) {
+  addSettingMapping(color, 'terminal.' + color);
+}

package/src/common/utils.ts

@@ -0,0 +1,195 @@
+import { Emitter, Event } from '@opensumi/ide-core-common';
+
+import { Color } from './color';
+import { ColorValue, ColorFunction, ITheme, ColorContribution, ColorDefaults, ColorIdentifier } from './theme.service';
+
+// color registry
+export const Extensions = {
+  ColorContribution: 'base.contributions.colors',
+};
+
+export interface IColorRegistry {
+  /**
+   * Register a color to the registry.
+   * @param id The color id as used in theme description files
+   * @param defaults The default values
+   * @description the description
+   */
+  registerColor(id: string, defaults: ColorDefaults, description: string): ColorIdentifier;
+
+  /**
+   * Register a color to the registry.
+   */
+  deregisterColor(id: string): void;
+
+  /**
+   * Get all color contributions
+   */
+  getColors(): ColorContribution[];
+
+  /**
+   * Gets the default color of the given id
+   */
+  resolveDefaultColor(id: ColorIdentifier, theme: ITheme): Color | undefined;
+
+  onDidColorChangedEvent: Event<void>;
+}
+
+class ColorRegistry implements IColorRegistry {
+  private colorsById: { [key: string]: ColorContribution };
+
+  private onDidColorChanged: Emitter<void> = new Emitter();
+
+  onDidColorChangedEvent: Event<void> = Event.debounce(this.onDidColorChanged.event, () => {}, 500);
+
+  constructor() {
+    this.colorsById = {};
+  }
+
+  public registerColor(
+    id: string,
+    defaults: ColorDefaults | null,
+    description: string,
+    needsTransparency = false,
+    deprecationMessage?: string,
+  ): ColorIdentifier {
+    const colorContribution: ColorContribution = { id, description, defaults, needsTransparency, deprecationMessage };
+    this.colorsById[id] = colorContribution;
+    this.onDidColorChanged.fire();
+    return id;
+  }
+
+  public deregisterColor(id: string): void {
+    delete this.colorsById[id];
+  }
+
+  public getColors(): ColorContribution[] {
+    return Object.keys(this.colorsById).map((id) => this.colorsById[id]);
+  }
+
+  public resolveDefaultColor(id: ColorIdentifier, theme: ITheme): Color | undefined {
+    const colorDesc = this.colorsById[id];
+    if (colorDesc && colorDesc.defaults) {
+      const colorValue = colorDesc.defaults[theme.type];
+      return resolveColorValue(colorValue, theme);
+    }
+    return undefined;
+  }
+
+  public toString() {
+    const sorter = (a: string, b: string) => {
+      const cat1 = a.indexOf('.') === -1 ? 0 : 1;
+      const cat2 = b.indexOf('.') === -1 ? 0 : 1;
+      if (cat1 !== cat2) {
+        return cat1 - cat2;
+      }
+      return a.localeCompare(b);
+    };
+
+    return Object.keys(this.colorsById)
+      .sort(sorter)
+      .map((k) => `- \`${k}\`: ${this.colorsById[k].description}`)
+      .join('\n');
+  }
+}
+
+const colorRegistry = new ColorRegistry();
+
+export function getColorRegistry(): IColorRegistry {
+  return colorRegistry;
+}
+
+export function registerColor(
+  id: string,
+  defaults: ColorDefaults | null,
+  description: string,
+  needsTransparency?: boolean,
+  deprecationMessage?: string,
+): ColorIdentifier {
+  return colorRegistry.registerColor(id, defaults, description, needsTransparency, deprecationMessage);
+}
+
+export function darken(colorValue: ColorValue, factor: number): ColorFunction {
+  return (theme) => {
+    const color = resolveColorValue(colorValue, theme);
+    if (color) {
+      return color.darken(factor);
+    }
+    return undefined;
+  };
+}
+
+export function lighten(colorValue: ColorValue, factor: number): ColorFunction {
+  return (theme) => {
+    const color = resolveColorValue(colorValue, theme);
+    if (color) {
+      return color.lighten(factor);
+    }
+    return undefined;
+  };
+}
+
+export function transparent(colorValue: ColorValue, factor: number): ColorFunction {
+  return (theme) => {
+    const color = resolveColorValue(colorValue, theme);
+    if (color) {
+      return color.transparent(factor);
+    }
+    return undefined;
+  };
+}
+
+export function oneOf(...colorValues: ColorValue[]): ColorFunction {
+  return (theme) => {
+    for (const colorValue of colorValues) {
+      const color = resolveColorValue(colorValue, theme);
+      if (color) {
+        return color;
+      }
+    }
+    return undefined;
+  };
+}
+
+export function lessProminent(
+  colorValue: ColorValue,
+  backgroundColorValue: ColorValue,
+  factor: number,
+  transparency: number,
+): ColorFunction {
+  return (theme) => {
+    const from = resolveColorValue(colorValue, theme);
+    if (from) {
+      const backgroundColor = resolveColorValue(backgroundColorValue, theme);
+      if (backgroundColor) {
+        if (from.isDarkerThan(backgroundColor)) {
+          return Color.getLighterColor(from, backgroundColor, factor).transparent(transparency);
+        }
+        return Color.getDarkerColor(from, backgroundColor, factor).transparent(transparency);
+      }
+      return from.transparent(factor * transparency);
+    }
+    return undefined;
+  };
+}
+
+/**
+ * @param colorValue Resolve a color value in the context of a theme
+ */
+export function resolveColorValue(colorValue: ColorValue | null, theme: ITheme): Color | undefined {
+  if (colorValue === null) {
+    return undefined;
+  } else if (colorValue === 'transparent') {
+    return Color.fromHex('#00000000');
+  } else if (typeof colorValue === 'string') {
+    if (colorValue[0] === '#') {
+      return Color.fromHex(colorValue);
+    }
+    return theme.getColor(colorValue);
+  } else if (colorValue instanceof Color) {
+    return colorValue;
+  } else if (typeof colorValue === 'function') {
+    return colorValue(theme) as Color;
+  }
+  return undefined;
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './common';