@opensumi/ide-theme 2.21.13 → 2.22.0

package/src/common/color-registry.ts

@@ -0,0 +1,52 @@
+/* ---------------------------------------------------------------------------------------------
+ *  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 '../common/color';
+import { ITheme } from '../common/theme.service';
+
+import {
+  IColorRegistry,
+  registerColor,
+  getColorRegistry,
+  transparent,
+  darken,
+  lighten,
+  lessProminent,
+  resolveColorValue,
+} from './utils';
+
+//  ------ API types
+
+// color registry
+export const Extensions = {
+  ColorContribution: 'base.contributions.colors',
+};
+
+// < --- Workbench (not customizable) --- >
+
+export function WORKBENCH_BACKGROUND(theme: ITheme): Color {
+  switch (theme.type) {
+    case 'dark':
+      return Color.fromHex('#252526');
+    case 'light':
+      return Color.fromHex('#F3F3F3');
+    default:
+      return Color.fromHex('#000000');
+  }
+}
+
+export {
+  lighten,
+  darken,
+  transparent,
+  lessProminent,
+  resolveColorValue,
+  IColorRegistry,
+  registerColor,
+  getColorRegistry,
+};
+
+// 导出所有的 color token
+export * from './color-tokens';

package/src/common/color-tokens/activity-bar.ts

@@ -0,0 +1,122 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color } from '../../common/color';
+import { transparent, registerColor } from '../utils';
+
+import { contrastBorder } from './base';
+import { editorForeground } from './editor';
+import { SIDE_BAR_BORDER } from './sidebar';
+
+// < --- Activity Bar --- >
+
+export const ACTIVITY_BAR_BACKGROUND = registerColor(
+  'activityBar.background',
+  {
+    dark: '#333333',
+    light: '#2C2C2C',
+    hcDark: '#000000',
+    hcLight: '#FFFFFF',
+  },
+  localize(
+    'activityBarBackground',
+    'Activity bar background color. The activity bar is showing on the far left or right and allows to switch between views of the side bar.',
+  ),
+);
+
+export const ACTIVITY_BAR_FOREGROUND = registerColor(
+  'activityBar.foreground',
+  {
+    dark: Color.white,
+    light: Color.white,
+    hcDark: Color.white,
+    hcLight: editorForeground,
+  },
+  localize(
+    'activityBarForeground',
+    'Activity bar item foreground color when it is active. The activity bar is showing on the far left or right and allows to switch between views of the side bar.',
+  ),
+);
+
+export const ACTIVITY_BAR_INACTIVE_FOREGROUND = registerColor(
+  'activityBar.inactiveForeground',
+  {
+    dark: transparent(ACTIVITY_BAR_FOREGROUND, 0.6),
+    light: transparent(ACTIVITY_BAR_FOREGROUND, 0.6),
+    hcDark: Color.white,
+    hcLight: editorForeground,
+  },
+  localize(
+    'activityBarInActiveForeground',
+    'Activity bar item foreground color when it is inactive. The activity bar is showing on the far left or right and allows to switch between views of the side bar.',
+  ),
+);
+
+export const ACTIVITY_BAR_BORDER = registerColor(
+  'activityBar.border',
+  {
+    dark: SIDE_BAR_BORDER,
+    light: SIDE_BAR_BORDER,
+    hcDark: SIDE_BAR_BORDER,
+    hcLight: SIDE_BAR_BORDER,
+  },
+  localize(
+    'activityBarBorder',
+    'Activity bar border color separating to the side bar. The activity bar is showing on the far left or right and allows to switch between views of the side bar.',
+  ),
+);
+
+export const ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND = registerColor(
+  'activityBar.dropBackground',
+  {
+    dark: Color.white.transparent(0.12),
+    light: Color.white.transparent(0.12),
+    hcDark: Color.white.transparent(0.12),
+    hcLight: Color.white.transparent(0.12),
+  },
+  localize(
+    'activityBarDragAndDropBackground',
+    'Drag and drop feedback color for the activity bar items. The color should have transparency so that the activity bar entries can still shine through. The activity bar is showing on the far left or right and allows to switch between views of the side bar.',
+  ),
+);
+
+export const ACTIVITY_BAR_BADGE_BACKGROUND = registerColor(
+  'activityBarBadge.background',
+  {
+    dark: '#007ACC',
+    light: '#007ACC',
+    hcDark: '#000000',
+    hcLight: '#0F4A85',
+  },
+  localize(
+    'activityBarBadgeBackground',
+    'Activity notification badge background color. The activity bar is showing on the far left or right and allows to switch between views of the side bar.',
+  ),
+);
+
+export const ACTIVITY_BAR_BADGE_FOREGROUND = registerColor(
+  'activityBarBadge.foreground',
+  {
+    dark: Color.white,
+    light: Color.white,
+    hcDark: Color.white,
+    hcLight: Color.white,
+  },
+  localize(
+    'activityBarBadgeForeground',
+    'Activity notification badge foreground color. The activity bar is showing on the far left or right and allows to switch between views of the side bar.',
+  ),
+);
+
+export const ACTIVITY_BAR_ACTIVE_BORDER = registerColor(
+  'activityBar.activeBorder',
+  {
+    dark: ACTIVITY_BAR_FOREGROUND,
+    light: ACTIVITY_BAR_FOREGROUND,
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'activityBarActiveBorder',
+    'Activity bar border color for the active item. The activity bar is showing on the far left or right and allows to switch between views of the side bar.',
+  ),
+);

package/src/common/color-tokens/badge.ts

@@ -0,0 +1,31 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color } from '../../common/color';
+import { registerColor } from '../utils';
+
+export const badgeBackground = registerColor(
+  'badge.background',
+  {
+    dark: '#4D4D4D',
+    light: '#C4C4C4',
+    hcDark: Color.black,
+    hcLight: '#0F4A85',
+  },
+  localize(
+    'badgeBackground',
+    'Badge background color. Badges are small information labels, e.g. for search results count.',
+  ),
+);
+export const badgeForeground = registerColor(
+  'badge.foreground',
+  {
+    dark: Color.white,
+    light: '#333',
+    hcDark: Color.white,
+    hcLight: Color.white,
+  },
+  localize(
+    'badgeForeground',
+    'Badge foreground color. Badges are small information labels, e.g. for search results count.',
+  ),
+);

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

@@ -0,0 +1,90 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { transparent, registerColor } from '../utils';
+
+import { hcBorderColor } from './basic-color';
+
+// base colors
+export const foreground = registerColor(
+  'foreground',
+  { dark: '#CCCCCC', light: '#616161', hcDark: '#FFFFFF', hcLight: '#292929' },
+  localize('foreground', 'Overall foreground color. This color is only used if not overridden by a component.'),
+);
+export const errorForeground = registerColor(
+  'errorForeground',
+  { dark: '#F48771', light: '#A1260D', hcDark: '#F48771', hcLight: '#B5200D' },
+  localize(
+    'errorForeground',
+    'Overall foreground color for error messages. This color is only used if not overridden by a component.',
+  ),
+);
+export const descriptionForeground = registerColor(
+  'descriptionForeground',
+  {
+    light: '#717171',
+    dark: transparent(foreground, 0.7),
+    hcDark: transparent(foreground, 0.7),
+    hcLight: transparent(foreground, 0.7),
+  },
+  localize(
+    'descriptionForeground',
+    'Foreground color for description text providing additional information, for example for a label.',
+  ),
+);
+export const iconForeground = registerColor(
+  'icon.foreground',
+  { dark: '#C5C5C5', light: '#424242', hcDark: '#FFFFFF', hcLight: '#292929' },
+  localize('iconForeground', 'The default color for icons in the workbench.'),
+);
+
+export const focusBorder = registerColor(
+  'focusBorder',
+  { dark: '#007FD4', light: '#0090F1', hcDark: '#F38518', hcLight: '#0F4A85' },
+  localize(
+    'focusBorder',
+    'Overall border color for focused elements. This color is only used if not overridden by a component.',
+  ),
+);
+export const sashHoverBorder = registerColor(
+  'sash.hoverBorder',
+  { dark: focusBorder, light: focusBorder, hcDark: focusBorder, hcLight: focusBorder },
+  localize('sashActiveBorder', 'Border color of active sashes.'),
+);
+
+export const contrastBorder = registerColor(
+  'contrastBorder',
+  { light: null, dark: null, hcDark: '#6FC3DF', hcLight: '#0F4A85' },
+  localize('contrastBorder', 'An extra border around elements to separate them from others for greater contrast.'),
+);
+export const activeContrastBorder = registerColor(
+  'contrastActiveBorder',
+  { light: null, dark: null, hcDark: focusBorder, hcLight: focusBorder },
+  localize(
+    'activeContrastBorder',
+    'An extra border around active elements to separate them from others for greater contrast.',
+  ),
+);
+
+export const selectionBackground = registerColor(
+  'selection.background',
+  { light: null, dark: null, hcDark: null, hcLight: null },
+  localize(
+    'selectionBackground',
+    'The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor.',
+  ),
+);
+
+export const widgetShadow = registerColor(
+  'widget.shadow',
+  { dark: '#000000', light: '#A8A8A8', hcDark: '#A5A5A5', hcLight: '#7F7F7F' },
+  localize('widgetShadow', 'Shadow color of widgets such as find/replace inside the editor.'),
+);
+
+export const disabledForeground = registerColor(
+  'disabledForeground',
+  { dark: '#CCCCCC80', light: '#61616180', hcDark: '#A5A5A5', hcLight: '#7F7F7F' },
+  localize(
+    'disabledForeground',
+    'Overall foreground for disabled elements. This color is only used if not overridden by a component.',
+  ),
+);

package/src/common/color-tokens/basic-color.ts

@@ -0,0 +1,9 @@
+import { RGBA, Color } from '../color';
+import { transparent } from '../utils';
+
+export const foregroundColor = Color.white;
+export const secondaryForegroundColor = transparent(foregroundColor, 0.7);
+export const backgroundColor = Color.black;
+
+export const hcBorderColor = new Color(new RGBA(111, 195, 223, 1));
+export const hcActiveBorderColor = new Color(new RGBA(243, 133, 24, 1));

package/src/common/color-tokens/breadcrumb.ts

@@ -0,0 +1,60 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { transparent, registerColor, lighten, darken } from '../utils';
+
+import { foreground } from './base';
+import { editorBackground, editorWidgetBackground } from './editor';
+
+/**
+ * Breadcrumb colors
+ */
+export const breadcrumbsForeground = registerColor(
+  'breadcrumb.foreground',
+  {
+    light: transparent(foreground, 0.8),
+    dark: transparent(foreground, 0.8),
+    hcDark: transparent(foreground, 0.8),
+    hcLight: transparent(foreground, 0.8),
+  },
+  localize('breadcrumbsFocusForeground', 'Color of focused breadcrumb items.'),
+);
+export const breadcrumbsBackground = registerColor(
+  'breadcrumb.background',
+  {
+    light: editorBackground,
+    dark: editorBackground,
+    hcDark: editorBackground,
+    hcLight: editorBackground,
+  },
+  localize('breadcrumbsBackground', 'Background color of breadcrumb items.'),
+);
+export const breadcrumbsFocusForeground = registerColor(
+  'breadcrumb.focusForeground',
+  {
+    light: darken(foreground, 0.2),
+    dark: lighten(foreground, 0.1),
+    hcDark: lighten(foreground, 0.1),
+    hcLight: lighten(foreground, 0.1),
+  },
+  localize('breadcrumbsFocusForeground', 'Color of focused breadcrumb items.'),
+);
+export const breadcrumbsActiveSelectionForeground = registerColor(
+  'breadcrumb.activeSelectionForeground',
+  {
+    light: darken(foreground, 0.2),
+    dark: lighten(foreground, 0.1),
+    hcDark: lighten(foreground, 0.1),
+    hcLight: lighten(foreground, 0.1),
+  },
+  localize('breadcrumbsSelectedForegound', 'Color of selected breadcrumb items.'),
+);
+export const breadcrumbsPickerBackground = registerColor(
+  'breadcrumbPicker.background',
+  {
+    light: editorWidgetBackground,
+    dark: editorWidgetBackground,
+    hcDark: editorWidgetBackground,
+    hcLight: editorWidgetBackground,
+  },
+  localize('breadcrumbsSelectedBackground', 'Background color of breadcrumb item picker.'),
+);

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

@@ -0,0 +1,69 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color } from '../color';
+import { registerColor, darken, lighten } from '../utils';
+
+import { contrastBorder, foreground } from './base';
+
+/** default button */
+export const buttonForeground = registerColor(
+  'button.foreground',
+  {
+    dark: Color.white,
+    light: Color.white,
+    hcDark: Color.white,
+    hcLight: Color.white,
+  },
+  localize('buttonForeground', 'Button foreground color.'),
+);
+export const buttonBackground = registerColor(
+  'button.background',
+  { dark: '#0E639C', light: '#007ACC', hcDark: null, hcLight: '#0F4A85' },
+  localize('buttonBackground', 'Button background color.'),
+);
+export const buttonHoverBackground = registerColor(
+  'button.hoverBackground',
+  {
+    dark: lighten(buttonBackground, 0.2),
+    light: darken(buttonBackground, 0.2),
+    hcDark: null,
+    hcLight: null,
+  },
+  localize('buttonHoverBackground', 'Button background color when hovering.'),
+);
+export const buttonBorder = registerColor(
+  'button.border',
+  {
+    dark: contrastBorder,
+    light: contrastBorder,
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize('buttonBorderBackground', 'Button border color'),
+);
+/** secondary button */
+export const buttonSecondaryForeground = registerColor(
+  'button.foreground',
+  {
+    dark: Color.white,
+    light: Color.white,
+    hcDark: Color.white,
+    hcLight: foreground,
+  },
+  localize('buttonSecondaryForeground', 'Button Secondary foreground color.'),
+);
+export const buttonSecondaryBackground = registerColor(
+  'button.background',
+  { dark: '#3A3D41', light: '#5F6A79', hcDark: null, hcLight: null },
+  localize('buttonSecondaryForeground', 'Button Secondary background color.'),
+);
+export const buttonSecondaryHoverBackground = registerColor(
+  'button.hoverBackground',
+  {
+    dark: lighten(buttonSecondaryBackground, 0.2),
+    light: darken(buttonSecondaryBackground, 0.2),
+    hcDark: null,
+    hcLight: null,
+  },
+  localize('buttonSecondaryForeground', 'Button Secondary background color when hovering.'),
+);

package/src/common/color-tokens/charts.ts

@@ -0,0 +1,68 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { transparent, registerColor } from '../utils';
+
+import { foreground } from './base';
+import { editorErrorForeground, editorInfoForeground, editorWarningForeground } from './editor';
+import { minimapFindMatch } from './minimap';
+
+export const chartsForeground = registerColor(
+  'charts.foreground',
+  { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground },
+  localize('chartsForeground', 'The foreground color used in charts.'),
+);
+export const chartsLines = registerColor(
+  'charts.lines',
+  {
+    dark: transparent(foreground, 0.5),
+    light: transparent(foreground, 0.5),
+    hcDark: transparent(foreground, 0.5),
+    hcLight: transparent(foreground, 0.5),
+  },
+  localize('chartsLines', 'The color used for horizontal lines in charts.'),
+);
+export const chartsRed = registerColor(
+  'charts.red',
+  {
+    dark: editorErrorForeground,
+    light: editorErrorForeground,
+    hcDark: editorErrorForeground,
+    hcLight: editorErrorForeground,
+  },
+  localize('chartsRed', 'The red color used in chart visualizations.'),
+);
+export const chartsBlue = registerColor(
+  'charts.blue',
+  {
+    dark: editorInfoForeground,
+    light: editorInfoForeground,
+    hcDark: editorInfoForeground,
+    hcLight: editorInfoForeground,
+  },
+  localize('chartsBlue', 'The blue color used in chart visualizations.'),
+);
+export const chartsYellow = registerColor(
+  'charts.yellow',
+  {
+    dark: editorWarningForeground,
+    light: editorWarningForeground,
+    hcDark: editorWarningForeground,
+    hcLight: editorWarningForeground,
+  },
+  localize('chartsYellow', 'The yellow color used in chart visualizations.'),
+);
+export const chartsOrange = registerColor(
+  'charts.orange',
+  { dark: minimapFindMatch, light: minimapFindMatch, hcDark: minimapFindMatch, hcLight: minimapFindMatch },
+  localize('chartsOrange', 'The orange color used in chart visualizations.'),
+);
+export const chartsGreen = registerColor(
+  'charts.green',
+  { dark: '#89D185', light: '#388A34', hcDark: '#89D185', hcLight: '#374e06' },
+  localize('chartsGreen', 'The green color used in chart visualizations.'),
+);
+export const chartsPurple = registerColor(
+  'charts.purple',
+  { dark: '#B180D7', light: '#652D90', hcDark: '#B180D7', hcLight: '#652D90' },
+  localize('chartsPurple', 'The purple color used in chart visualizations.'),
+);

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

@@ -0,0 +1,23 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color } from '../color';
+import { registerColor } from '../utils';
+
+import { contrastBorder, foreground } from './base';
+import { selectBackground, selectBorder, selectForeground } from './dropdown';
+
+export const checkboxBorder = registerColor(
+  'checkbox.border',
+  { dark: selectBorder, light: selectBorder, hcDark: selectBorder, hcLight: selectBorder },
+  localize('checkbox.border', 'Border color of checkbox widget.'),
+);
+export const checkboxBackground = registerColor(
+  'checkbox.background',
+  { dark: selectBackground, light: selectBackground, hcDark: selectBackground, hcLight: selectBackground },
+  localize('checkbox.background', 'Background color of checkbox widget.'),
+);
+export const checkboxForeground = registerColor(
+  'checkbox.foreground',
+  { dark: selectForeground, light: selectForeground, hcDark: selectForeground, hcLight: selectForeground },
+  localize('checkbox.foreground', 'Foreground color of checkbox widget.'),
+);

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

@@ -0,0 +1,51 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { transparent, registerColor } from '../../utils';
+import { foreground } from '../base';
+import { inputActiveOptionBorder, inputActiveOptionBackground } from '../input';
+
+// action bar
+export const actionbarForeground = registerColor(
+  'kt.actionbar.foreground',
+  { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground },
+  localize('actionbarForeground', 'Foreground color of icon in actionbar'),
+);
+
+export const actionbarDisableForeground = registerColor(
+  'kt.actionbar.disableForeground',
+  {
+    dark: transparent(foreground, 0.3),
+    light: transparent(foreground, 0.3),
+    hcDark: transparent(foreground, 0.3),
+    hcLight: transparent(foreground, 0.3),
+  },
+  localize('actionbarDisableForeground', 'Foreground color of disabled icon in actionbar'),
+);
+
+export const actionBarSeparatorBg = registerColor(
+  'kt.actionbar.separatorBackground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('actionbarSeparatorBackground', 'Separator background color of actionbar'),
+);
+
+export const actionbarSelectionBackground = registerColor(
+  'kt.actionbar.selectionBackground',
+  {
+    dark: inputActiveOptionBackground,
+    light: inputActiveOptionBackground,
+    hcDark: inputActiveOptionBackground,
+    hcLight: inputActiveOptionBackground,
+  },
+  localize('actionbarSelectionBackground', 'Bacjground color of selected icon in actionbar'),
+);
+
+export const actionbarSelectionBorder = registerColor(
+  'kt.actionbar.selectionBorder',
+  {
+    dark: inputActiveOptionBorder,
+    light: inputActiveOptionBorder,
+    hcDark: inputActiveOptionBorder,
+    hcLight: inputActiveOptionBorder,
+  },
+  localize('actionbarSelectionBorder', 'Border color of selected icon in actionbar'),
+);

package/src/common/color-tokens/custom/activity-bar.ts

@@ -0,0 +1,16 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor } from '../../utils';
+import { ACTIVITY_BAR_BACKGROUND } from '../activity-bar';
+
+/* --- activity bar --- */
+export const ktActivityBarDropUpBackground = registerColor(
+  'kt.activityBar.dropUpBackground',
+  {
+    dark: ACTIVITY_BAR_BACKGROUND,
+    light: ACTIVITY_BAR_BACKGROUND,
+    hcDark: ACTIVITY_BAR_BACKGROUND,
+    hcLight: ACTIVITY_BAR_BACKGROUND,
+  },
+  localize('activityBar.dropUpBackground', 'dragging item background color'),
+);

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

@@ -0,0 +1,30 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor } from '../../utils';
+import { badgeBackground } from '../badge';
+import { contrastBorder } from '../base';
+
+export const ActivityBarBadgeBorder = registerColor(
+  'kt.activityBarBadge.border',
+  {
+    dark: null,
+    light: null,
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'activityBarBadgeBorder',
+    'Activity notification badge border color. The activity bar is showing on the far left or right and allows to switch between views of the side bar.',
+  ),
+);
+
+export const BadgeBorder = registerColor(
+  'kt.badge.border',
+  {
+    dark: badgeBackground,
+    light: badgeBackground,
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize('badgeBorder', 'Badge border color. Badges are small information labels, e.g. for search results count.'),
+);