@opensumi/ide-theme 2.21.13 → 2.22.0

package/src/common/color-tokens/custom/base.ts

@@ -0,0 +1,111 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { transparent, registerColor } from '../../utils';
+import { iconForeground, foreground } from '../base';
+import { editorWarningForeground, editorErrorForeground, editorInfoForeground } from '../editor';
+
+// base custom colors
+// 强调色
+export const accentForeground = registerColor(
+  'kt.accentForeground',
+  { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground },
+  localize('accentForeground', 'Accent foreground color. This color is only used if not overridden by a component.'),
+);
+
+export const disableForeground = registerColor(
+  'kt.disableForeground',
+  {
+    light: transparent(foreground, 0.3),
+    dark: transparent(foreground, 0.3),
+    hcDark: transparent(foreground, 0.3),
+    hcLight: transparent(foreground, 0.3),
+  },
+  localize('disableForeground', 'Foreground color for text providing disabled information'),
+);
+
+export const iconSecondaryForeground = registerColor(
+  'kt.icon.secondaryForeground',
+  { dark: iconForeground, light: iconForeground, hcDark: iconForeground, hcLight: iconForeground },
+  localize('secondaryForeground', 'The secondary color for icons in the workbench.'),
+);
+
+export const errorIconForeground = registerColor(
+  'kt.errorIconForeground',
+  {
+    dark: editorErrorForeground,
+    light: editorErrorForeground,
+    hcDark: editorErrorForeground,
+    hcLight: editorErrorForeground,
+  },
+  localize('errorIconForeground', 'Foreground color for error icon'),
+);
+
+export const errorBackground = registerColor(
+  'kt.errorBackground',
+  { dark: '#D21F2840', light: '#FF787540', hcDark: null, hcLight: null },
+  localize('errorBackground', 'Background color for error text'),
+);
+
+/**
+ * 备注: 为保障对 vscode theme 插件的最大程度兼容
+ * 这里 [warning/error/info]IconForeground
+ * 皆 fallback 到 vscode token 中 notificationsIcon 相关的默认值
+ * 即全部 fallback 搭配 editorForeground 色值
+ */
+export const warningIconForeground = registerColor(
+  'kt.warningIconForeground',
+  {
+    dark: editorWarningForeground,
+    light: editorWarningForeground,
+    hcDark: editorWarningForeground,
+    hcLight: editorWarningForeground,
+  },
+  localize('warningIconForeground', 'Foreground color for warning icon'),
+);
+
+export const warningBackground = registerColor(
+  'kt.warningBackground',
+  { dark: '#D7951340', light: '#FFD66640', hcDark: null, hcLight: null },
+  localize('warningBackground', 'Background color for warning text'),
+);
+
+export const succesIconForeground = registerColor(
+  'kt.successIconForeground',
+  { dark: '#DBA936', light: '#73D13D', hcDark: iconForeground, hcLight: iconForeground },
+  localize('successIconForeground', 'Foreground color for success icon'),
+);
+
+export const successBackground = registerColor(
+  'kt.successBackground',
+  { dark: '#D7951340', light: '#95DE6440', hcDark: null, hcLight: null },
+  localize('successBackground', 'Background color for success text'),
+);
+
+export const infoIconForeground = registerColor(
+  'kt.infoIconForeground',
+  {
+    dark: editorInfoForeground,
+    light: editorInfoForeground,
+    hcDark: editorInfoForeground,
+    hcLight: editorInfoForeground,
+  },
+  localize('infoIconForeground', 'Foreground color for info icon'),
+);
+
+export const infoBackground = registerColor(
+  'kt.infoBackground',
+  { dark: '#167CDB40', light: '#6EB6FA40', hcDark: null, hcLight: null },
+  localize('infoBackground', 'Background color for info text'),
+);
+
+export const hintIconForeground = registerColor(
+  'kt.hintIconForeground',
+  { dark: '#868C91', light: '#999999', hcDark: iconForeground, hcLight: iconForeground },
+  localize('hintIconForeground', 'Foreground color for hint icon'),
+);
+
+export const hintBackground = registerColor(
+  'kt.hintBackground',
+  { dark: '#5F656B40', light: '#CCCCCC40', hcDark: null, hcLight: null },
+  localize('hintBackground', 'Background color for hint text'),
+);

package/src/common/color-tokens/custom/button.ts

@@ -0,0 +1,359 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { RGBA, Color } from '../../color';
+import { registerColor, darken, lighten } from '../../utils';
+import { foreground } from '../base';
+import {
+  buttonBackground,
+  buttonForeground,
+  buttonHoverBackground,
+  buttonSecondaryBackground,
+  buttonSecondaryHoverBackground,
+  buttonSecondaryForeground,
+  buttonBorder,
+} from '../button';
+
+/* disable button */
+export const ktButtonDisableForeground = registerColor(
+  'kt.button.disableForeground',
+  { dark: '#5F656B', light: '#5F656B', hcDark: null, hcLight: null },
+  localize('buttonDisableForeground', 'Button Disable Foreground color'),
+);
+export const ktButtonDisableBackground = registerColor(
+  'kt.button.disableBackground',
+  {
+    dark: new Color(new RGBA(95, 101, 107, 0.25)),
+    light: new Color(new RGBA(95, 101, 107, 0.25)),
+    hcDark: null,
+    hcLight: null,
+  },
+  localize('buttonDisableBackground', 'Button Disable Background color'),
+);
+export const ktButtonDisableBorder = registerColor(
+  'kt.button.disableBorder',
+  {
+    dark: new Color(new RGBA(95, 101, 107, 0.5)),
+    light: new Color(new RGBA(95, 101, 107, 0.5)),
+    hcDark: null,
+    hcLight: null,
+  },
+  localize('buttonDisableBorder', 'Button Disable Border color.'),
+);
+
+/* primary button */
+export const ktPrimaryButtonForeground = registerColor(
+  'kt.primaryButton.foreground',
+  { dark: buttonForeground, light: buttonForeground, hcDark: Color.white, hcLight: Color.white },
+  localize('primaryButtonForground', 'Primary Button Forground color.'),
+);
+export const ktPrimaryButtonBackground = registerColor(
+  'kt.primaryButton.background',
+  { dark: buttonBackground, light: buttonBackground, hcDark: null, hcLight: null },
+  localize('primaryButtonBackground', 'Primary Button Background color.'),
+);
+export const ktPrimaryButtonBorder = registerColor(
+  'kt.primaryButton.border',
+  { dark: buttonBorder, light: buttonBorder, hcDark: buttonBorder, hcLight: buttonBorder },
+  localize('primaryButtonBorder', 'Primary Button Border color.'),
+);
+export const ktPrimaryButtonHoverBackground = registerColor(
+  'kt.primaryButton.hoverBackground',
+  { dark: buttonHoverBackground, light: buttonHoverBackground, hcDark: null, hcLight: null },
+  localize('primaryButtonHoverBackground', 'Primary Button Hover Background color'),
+);
+export const ktPrimaryButtonClickBackground = registerColor(
+  'kt.primaryButton.clickBackground',
+  { dark: buttonHoverBackground, light: buttonHoverBackground, hcDark: null, hcLight: null },
+  localize('primaryButtonClickBackground', 'Primary Button Click Background color'),
+);
+
+/* primary ghost button */
+export const ktPrimaryGhostButtonForeground = registerColor(
+  'kt.primaryGhostButton.foreground',
+  // Light 模式下使用 `ktPrimaryButtonBackground` 能兼容更多主题下展示效果
+  // 已达到 https://github.com/opensumi/core/wiki/Button-%E6%8C%89%E9%92%AE#%E5%9B%BE%E4%BE%8B 规范
+  { dark: ktPrimaryButtonForeground, light: ktPrimaryButtonBackground, hcDark: Color.white, hcLight: Color.white },
+  localize('ktPrimaryGhostButtonForeground', 'Primary Ghost Button Foreground color.'),
+);
+export const ktPrimaryGhostButtonBackground = registerColor(
+  'kt.primaryGhostButton.background',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('ktPrimaryGhostButtonBackground', 'Primary Ghost Button Background color.'),
+);
+export const ktPrimaryGhostButtonBorder = registerColor(
+  'kt.primaryGhostButton.border',
+  {
+    dark: ktPrimaryButtonForeground,
+    light: ktPrimaryButtonBackground,
+    hcDark: ktPrimaryButtonForeground,
+    hcLight: ktPrimaryButtonBackground,
+  },
+  localize('ktPrimaryGhostButtonBorder', 'Primary Ghost Button Border color.'),
+);
+export const ktPrimaryGhostButtonClickForeground = registerColor(
+  'kt.primaryGhostButton.clickForeground',
+  {
+    dark: lighten(ktPrimaryGhostButtonForeground, 0.2),
+    light: darken(ktPrimaryGhostButtonForeground, 0.2),
+    hcDark: ktPrimaryGhostButtonForeground,
+    hcLight: ktPrimaryGhostButtonForeground,
+  },
+  localize('ktPrimaryGhostButtonClickForeground', 'Primary Ghost Button Click Foreground color.'),
+);
+export const ktPrimaryGhostButtonClickBorder = registerColor(
+  'kt.primaryGhostButton.clickBorder',
+  {
+    dark: lighten(ktPrimaryGhostButtonBorder, 0.2),
+    light: darken(ktPrimaryGhostButtonBorder, 0.2),
+    hcDark: ktPrimaryGhostButtonBorder,
+    hcLight: ktPrimaryGhostButtonBorder,
+  },
+  localize('ktPrimaryGhostButtonClickBorder', 'Primary Ghost Button Click Border color.'),
+);
+
+/* secondary button */
+export const ktSecondaryButtonForeground = registerColor(
+  'kt.secondaryButton.foreground',
+  {
+    dark: buttonSecondaryForeground,
+    light: buttonSecondaryBackground,
+    hcDark: buttonSecondaryForeground,
+    hcLight: buttonSecondaryBackground,
+  },
+  localize('ktSecondaryButtonForeground', 'Secondary Button Foreground color.'),
+);
+export const ktSecondaryButtonBackground = registerColor(
+  'kt.secondaryButton.background',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('ktSecondaryButtonBackground', 'Secondary Button Background color.'),
+);
+export const ktSecondaryButtonBorder = registerColor(
+  'kt.secondaryButton.border',
+  {
+    dark: buttonSecondaryForeground,
+    light: buttonSecondaryBackground,
+    hcDark: buttonSecondaryForeground,
+    hcLight: buttonSecondaryBackground,
+  },
+  localize('ktSecondaryButtonForeground', 'Secondary Button Foreground color.'),
+);
+export const ktSecondaryButtonHoverBackground = registerColor(
+  'kt.secondaryButton.hoverBackground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('ktSecondaryButtonHoverBackground', 'Secondary Button Hover Background color'),
+);
+export const ktSecondaryButtonHoverForeground = registerColor(
+  'kt.secondaryButton.hoverForeground',
+  { dark: buttonSecondaryHoverBackground, light: buttonSecondaryHoverBackground, hcDark: null, hcLight: null },
+  localize('ktSecondaryButtonHoverForeground', 'Secondary Button Hover Foreground color'),
+);
+export const ktSecondaryButtonHoverBorder = registerColor(
+  'kt.secondaryButton.hoverBorder',
+  {
+    dark: buttonSecondaryHoverBackground,
+    light: buttonSecondaryHoverBackground,
+    hcDark: buttonSecondaryHoverBackground,
+    hcLight: buttonSecondaryHoverBackground,
+  },
+  localize('ktSecondaryButtonHoverBorder', 'Secondary Button Hover Border color'),
+);
+export const ktSecondaryButtonClickForeground = registerColor(
+  'kt.secondaryButton.clickForeground',
+  {
+    dark: ktSecondaryButtonHoverForeground,
+    light: ktSecondaryButtonHoverForeground,
+    hcDark: ktSecondaryButtonHoverForeground,
+    hcLight: ktSecondaryButtonHoverForeground,
+  },
+  localize('ktSecondaryButtonClickForeground', 'Secondary Button Click Foreground color'),
+);
+export const ktSecondaryButtonClickBackground = registerColor(
+  'kt.secondaryButton.clickBackground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('ktSecondaryButtonClickBackground', 'Secondary Button Click Background color'),
+);
+export const ktSecondaryButtonClickBorder = registerColor(
+  'kt.secondaryButton.clickBorder',
+  {
+    dark: ktSecondaryButtonHoverBorder,
+    light: ktSecondaryButtonHoverBorder,
+    hcDark: ktSecondaryButtonHoverBorder,
+    hcLight: ktSecondaryButtonHoverBorder,
+  },
+  localize('ktSecondaryButtonClickBorder', 'Secondary Button Click Border color'),
+);
+
+/* secondary ghost button */
+export const ktWhiteGhostButtonForeground = registerColor(
+  'kt.whiteGhostButton.foreground',
+  { dark: '#FFFFFF', light: foreground, hcDark: null, hcLight: null },
+  localize('ktWhiteGhostButtonForeground', 'White Ghost Button Foreground color.'),
+);
+export const ktWhiteGhostButtonBackground = registerColor(
+  'kt.whiteGhostButton.background',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('ktWhiteGhostButtonBackground', 'White Ghost Button Background color.'),
+);
+export const ktWhiteGhostButtonBorder = registerColor(
+  'kt.whiteGhostButton.border',
+  { dark: '#FFFFFF', light: foreground, hcDark: null, hcLight: null },
+  localize('ktWhiteGhostButtonBorder', 'White Ghost Button Border color.'),
+);
+export const ktWhiteGhostButtonClickForeground = registerColor(
+  'kt.whiteGhostButton.clickForeground',
+  { dark: '#FFFFFFA6', light: '#FFFFFFA6', hcDark: null, hcLight: null },
+  localize('ktWhiteGhostButtonClickForeground', 'White Ghost Button Click Foreground color.'),
+);
+export const ktWhiteGhostButtonClickBorder = registerColor(
+  'kt.whiteGhostButton.clickBorder',
+  { dark: '#FFFFFFA6', light: '#FFFFFFA6', hcDark: null, hcLight: null },
+  localize('ktWhiteGhostButtonClickBorder', 'White Ghost Button Click Border color.'),
+);
+export const ktWhiteGhostButtonDisableForeground = registerColor(
+  'kt.whiteGhostButton.disableForeground',
+  { dark: '#FFFFFF40', light: '#FFFFFF40', hcDark: null, hcLight: null },
+  localize('ktWhiteGhostButtonDisableForeground', 'White Ghost Button Disable Foreground color.'),
+);
+
+/* link button */
+export const ktLinkButtonForeground = registerColor(
+  'kt.linkButton.foreground',
+  { dark: '#3895EB', light: '#3895EB', hcDark: null, hcLight: null },
+  localize('ktLinkButtonForeground', 'Link Button Foreground color.'),
+);
+export const ktLinkButtonHoverForeground = registerColor(
+  'kt.linkButton.hoverForeground',
+  { dark: '#67ABEB', light: '#67ABEB', hcDark: null, hcLight: null },
+  localize('ktLinkButtonHoverForeground', 'Link Button Hover Foreground color'),
+);
+export const ktLinkButtonClickForeground = registerColor(
+  'kt.linkButton.clickForeground',
+  { dark: '#167CDB', light: '#167CDB', hcDark: null, hcLight: null },
+  localize('ktLinkButtonClickForeground', 'Link Button Click Foreground color'),
+);
+export const ktLinkButtonDisableForeground = registerColor(
+  'kt.linkButton.disableForeground',
+  { dark: '#5F656B', light: '#5F656B', hcDark: null, hcLight: null },
+  localize('ktLinkButtonDisableForeground', 'Link Button Disable Foreground color'),
+);
+
+/* danger button */
+export const ktDangerButtonForeground = registerColor(
+  'kt.dangerButton.foreground',
+  { dark: Color.white, light: Color.white, hcDark: Color.white, hcLight: Color.white },
+  localize('ktDangerButtonForground', 'Danger Button Forground color.'),
+);
+export const ktDangerButtonBackground = registerColor(
+  'kt.dangerButton.background',
+  { dark: '#DB4345', light: '#DB4345', hcDark: null, hcLight: null },
+  localize('ktDangerButtonBackground', 'Danger Button Background color.'),
+);
+export const ktDangerButtonHoverBackground = registerColor(
+  'kt.dangerButton.hoverBackground',
+  { dark: '#F37370', light: '#F37370', hcDark: null, hcLight: null },
+  localize('ktDangerButtonHoverBackground', 'Danger Button Hover Background color'),
+);
+export const ktDangerButtonClickBackground = registerColor(
+  'kt.dangerButton.clickBackground',
+  { dark: '#D21F28', light: '#D21F28', hcDark: null, hcLight: null },
+  localize('ktDangerButtonClickBackground', 'Danger Button Click Background color'),
+);
+
+/* danger ghost button */
+export const ktDangerGhostButtonForeground = registerColor(
+  'kt.dangerGhostButton.foreground',
+  { dark: '#DB4345', light: '#DB4345', hcDark: null, hcLight: null },
+  localize('ktDangerGhostButtonForeground', 'Danger Ghost Button Foreground color.'),
+);
+export const ktDangerGhostButtonBackground = registerColor(
+  'kt.dangerGhostButton.background',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('ktDangerGhostButtonBackground', 'Danger Ghost Button Background color.'),
+);
+export const ktDangerGhostButtonBorder = registerColor(
+  'kt.dangerGhostButton.border',
+  { dark: '#DB4345', light: '#DB4345', hcDark: null, hcLight: null },
+  localize('ktDangerGhostButtonBorder', 'Danger Ghost Button Border color.'),
+);
+export const ktDangerGhostButtonHoverForeground = registerColor(
+  'kt.dangerGhostButton.hoverForeground',
+  { dark: '#F37370', light: '#F37370', hcDark: null, hcLight: null },
+  localize('ktDangerGhostButtonHoverForeground', 'Danger Ghost Button Hover Foreground color.'),
+);
+export const ktDangerGhostButtonHoverBorder = registerColor(
+  'kt.dangerGhostButton.hoverBorder',
+  { dark: '#F37370', light: '#F37370', hcDark: null, hcLight: null },
+  localize('ktDangerGhostButtonHoverBorder', 'Danger Ghost Button Hover Border color.'),
+);
+export const ktDangerGhostButtonClickForeground = registerColor(
+  'kt.dangerGhostButton.clickForeground',
+  { dark: '#D21F28', light: '#D21F28', hcDark: null, hcLight: null },
+  localize('ktDangerGhostButtonClickForeground', 'Danger Ghost Button Click Foreground color.'),
+);
+export const ktDangerGhostButtonClickBorder = registerColor(
+  'kt.dangerGhostButton.clickBorder',
+  { dark: '#D21F28', light: '#D21F28', hcDark: null, hcLight: null },
+  localize('ktDangerGhostButtonClickBorder', 'Danger Ghost Button Click Border color.'),
+);
+
+/* default button */
+export const ktDefaultButtonForeground = registerColor(
+  'kt.defaultButton.foreground',
+  { dark: buttonForeground, light: buttonForeground, hcDark: buttonBackground, hcLight: buttonBackground },
+  localize('ktDefaultButtonForeground', 'Default Button Foreground color.'),
+);
+export const ktDefaultButtonBackground = registerColor(
+  'kt.defaultButton.background',
+  { dark: buttonBackground, light: buttonBackground, hcDark: buttonBackground, hcLight: buttonBackground },
+  localize('ktDefaultButtonBackground', 'Default Button Background color.'),
+);
+export const ktDefaultButtonBorder = registerColor(
+  'kt.defaultButton.border',
+  { dark: buttonBorder, light: buttonBorder, hcDark: buttonBorder, hcLight: buttonBorder },
+  localize('ktDefaultButtonBorder', 'Default Button Border color.'),
+);
+export const ktDefaultButtonHoverBackground = registerColor(
+  'kt.defaultButton.hoverBackground',
+  {
+    dark: buttonHoverBackground,
+    light: buttonHoverBackground,
+    hcDark: buttonHoverBackground,
+    hcLight: buttonHoverBackground,
+  },
+  localize('ktDefaultButtonHoverBackground', 'Default Button Hover Background color.'),
+);
+export const ktDefaultButtonHoverForeground = registerColor(
+  'kt.defaultButton.hoverForeground',
+  { dark: buttonForeground, light: buttonForeground, hcDark: buttonForeground, hcLight: buttonForeground },
+  localize('ktDefaultButtonHoverForeground', 'Default Button Hover Foreground color.'),
+);
+export const ktDefaultButtonHoverBorder = registerColor(
+  'kt.defaultButton.hoverBorder',
+  {
+    dark: buttonHoverBackground,
+    light: buttonHoverBackground,
+    hcDark: buttonHoverBackground,
+    hcLight: buttonHoverBackground,
+  },
+  localize('ktDefaultButtonHoverBorder', 'Default Button Hover Border color.'),
+);
+export const ktDefaultButtonClickBackground = registerColor(
+  'kt.defaultButton.clickBackground',
+  {
+    dark: buttonHoverBackground,
+    light: buttonHoverBackground,
+    hcDark: buttonHoverBackground,
+    hcLight: buttonHoverBackground,
+  },
+  localize('ktDefaultButtonClickBackground', 'Default Button Click Background color.'),
+);
+export const ktDefaultButtonClickBorder = registerColor(
+  'kt.defaultButton.clickBorder',
+  {
+    dark: buttonHoverBackground,
+    light: buttonHoverBackground,
+    hcDark: buttonHoverBackground,
+    hcLight: buttonHoverBackground,
+  },
+  localize('ktDangerGhostButtonClickBorder', 'Default Button Click Border color.'),
+);

package/src/common/color-tokens/custom/checkbox.ts

@@ -0,0 +1,36 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor } from '../../utils';
+
+export const ktCheckboxHoverBackground = registerColor(
+  'kt.checkbox.hoverBackground',
+  { dark: '#00000040', light: '#FFFFFF', hcDark: null, hcLight: null },
+  localize('ktCheckboxHoverBackground', 'Checkbox Hover Background color.'),
+);
+export const ktCheckboxHoverBorder = registerColor(
+  'kt.checkbox.hoverBorder',
+  { dark: '#167CDB', light: '#167CDB', hcDark: null, hcLight: null },
+  localize('ktCheckboxHoverBorder', 'Checkbox Hover Border color.'),
+);
+
+export const ktCheckboxSelectionForeground = registerColor(
+  'kt.checkbox.selectionForeground',
+  { dark: '#FFFFFF', light: '#FFFFFF', hcDark: null, hcLight: null },
+  localize('ktCheckboxSelectionForeground', 'Checkbox Selection Foreground color.'),
+);
+export const ktCheckboxSelectionBackground = registerColor(
+  'kt.checkbox.selectionBackground',
+  { dark: '#167CDB', light: '#167CDB', hcDark: null, hcLight: null },
+  localize('ktCheckboxSelectionBackground', 'Checkbox Selection Background color.'),
+);
+
+export const ktCheckboxDisableForeground = registerColor(
+  'kt.checkbox.disableForeground',
+  { dark: '#5F656B', light: '#5F656B', hcDark: null, hcLight: null },
+  localize('ktCheckboxDisableForeground', 'Checkbox Disable Foreground color.'),
+);
+export const ktCheckboxDisableBackground = registerColor(
+  'kt.checkbox.disableBackground',
+  { dark: '#5F656B40', light: '#5F656B40', hcDark: null, hcLight: null },
+  localize('ktCheckboxDisableBackground', 'Checkbox Disable Background color.'),
+);

package/src/common/color-tokens/custom/decoration.ts

@@ -0,0 +1,71 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor } from '../../utils';
+
+// https://github.com/microsoft/vscode/blob/master/extensions/git/package.json#L1696
+// 将 vscode git 插件的颜色变量复制一份，应对不存在 git 插件的场景，比如 web scm/文件树/变更树等场景
+export const addedResourceDecorationForeground = registerColor(
+  'kt.decoration.addedResourceForeground',
+  {
+    light: '#587c0c',
+    dark: '#81b88b',
+    hcDark: '#1b5225',
+    hcLight: null,
+  },
+  localize('addedResourceDecorationForeground', 'Color for added resources.'),
+);
+
+export const modifiedResourceForeground = registerColor(
+  'kt.decoration.modifiedResourceForeground',
+  {
+    light: '#895503',
+    dark: '#E2C08D',
+    hcDark: '#E2C08D',
+    hcLight: null,
+  },
+  localize('modifiedResourceForeground', 'Color for modified resources.'),
+);
+
+export const deletedResourceForeground = registerColor(
+  'kt.decoration.deletedResourceForeground',
+  {
+    light: '#ad0707',
+    dark: '#c74e39',
+    hcDark: '#c74e39',
+    hcLight: null,
+  },
+  localize('deletedResourceForeground', 'Color for deleted resources.'),
+);
+
+export const untrackedResourceForeground = registerColor(
+  'kt.decoration.untrackedResourceForeground',
+  {
+    light: '#007100',
+    dark: '#73C991',
+    hcDark: '#73C991',
+    hcLight: null,
+  },
+  localize('untrackedResourceForeground', 'Color for untracked resources.'),
+);
+
+export const ignoredResourceForeground = registerColor(
+  'kt.decoration.ignoredResourceForeground',
+  {
+    light: '#8E8E90',
+    dark: '#8C8C8C',
+    hcDark: '#A7A8A9',
+    hcLight: null,
+  },
+  localize('ignoredResourceForeground', 'Color for ignored resources.'),
+);
+
+export const conflictingResourceForeground = registerColor(
+  'kt.decoration.conflictingResourceForeground',
+  {
+    light: '#6c6cc4',
+    dark: '#6c6cc4',
+    hcDark: '#6c6cc4',
+    hcLight: null,
+  },
+  localize('conflictingResourceForeground', 'Color for resources with conflicts.'),
+);

package/src/common/color-tokens/custom/editor.ts

@@ -0,0 +1,27 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor } from '../../utils';
+import { foreground } from '../base';
+import { TAB_BORDER } from '../tab';
+
+export const ktEditorBreadcrumbBorderDown = registerColor(
+  'kt.editorBreadcrumb.borderDown',
+  {
+    dark: '#2C3033',
+    light: '#F2F2F2',
+    hcDark: TAB_BORDER,
+    hcLight: TAB_BORDER,
+  },
+  localize('kt.editorBreadcrumb.borderDown', "editor Breadcrumb's bottom border color."),
+);
+
+export const ktDirtyDotForeground = registerColor(
+  'kt.dirtyDot.foreground',
+  {
+    dark: '#868C91',
+    light: '#999999',
+    hcDark: foreground,
+    hcLight: foreground,
+  },
+  localize('kt.dirtyDot.foreground', 'color for dirty mark.'),
+);

package/src/common/color-tokens/custom/extension.ts

@@ -0,0 +1,9 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor } from '../../utils';
+
+export const ktStatusBarExtensionDebugginBackground = registerColor(
+  'kt.statusBar.extensionDebuggingBackground',
+  { dark: '#CC6633', light: '#CC6633', hcDark: '#CC6633', hcLight: null },
+  localize('Background of StatusBar while extension is debugging.'),
+);

package/src/common/color-tokens/custom/icon.ts

@@ -0,0 +1,30 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor, transparent } from '../../utils';
+import { foreground } from '../base';
+
+export const ktIconForeground = registerColor(
+  'kt.icon.foreground',
+  { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground },
+  localize('ktIconForeground', 'Icon Foreground color.'),
+);
+export const ktIconHoverForeground = registerColor(
+  'kt.icon.hoverForeground',
+  { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground },
+  localize('ktIconHoverForeground', 'Icon Hover Foreground color.'),
+);
+export const ktIconHoverBackground = registerColor(
+  'kt.icon.hoverBackground',
+  { dark: '#5a5d5e4f', light: '#b8b8b84f', hcDark: null, hcLight: null },
+  localize('Icon Hover Background color.'),
+);
+export const ktIconClickHoverForeground = registerColor(
+  'kt.icon.clickForeground',
+  { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground },
+  localize('Icon Click Foreground color.'),
+);
+export const ktIconDisableForeground = registerColor(
+  'kt.icon.disableForeground',
+  { dark: transparent(ktIconForeground, 0.5), light: transparent(ktIconForeground, 0.5), hcDark: null, hcLight: null },
+  localize('ktIconDisableForeground', 'Icon Disabled Foreground color.'),
+);

package/src/common/color-tokens/custom/index.ts

@@ -0,0 +1,26 @@
+// base
+export * from './base';
+
+export * from './actionbar';
+export * from './activity-bar';
+export * from './badge';
+export * from './button';
+export * from './checkbox';
+export * from './decoration';
+export * from './editor';
+export * from './icon';
+export * from './input';
+export * from './menu';
+export * from './modal';
+export * from './notification';
+export * from './panel';
+export * from './select';
+export * from './settings';
+export * from './statusbar';
+export * from './tab';
+export * from './tooltip';
+export * from './tree';
+export * from './popover';
+export * from './extension';
+
+// WARNING: 自定义颜色请放到独立文件中作为 namespace，不要继续往这个文件添加了