@opensumi/ide-theme 2.21.13 → 2.22.0

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

@@ -0,0 +1,48 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor } from '../../utils';
+import { contrastBorder, selectionBackground } from '../base';
+import { inputBorder, inputActiveOptionBorder } from '../input';
+
+export const ktInputBorder = registerColor(
+  'kt.input.border',
+  { dark: inputBorder, light: inputBorder, hcDark: contrastBorder, hcLight: contrastBorder },
+  localize('ktInputBoxBorder', 'Input box border.'),
+);
+export const ktInputDisableForeground = registerColor(
+  'kt.input.disableForeground',
+  { dark: '#5F656B', light: '#5F656B', hcDark: null, hcLight: null },
+  localize('ktInputDisableForeground', 'Input box disabled foreground color.'),
+);
+export const ktInputDisableBackground = registerColor(
+  'kt.input.disableBackground',
+  { dark: '#5F656B40', light: '#5F656B40', hcDark: null, hcLight: null },
+  localize('ktInputDisableBackground', 'Input box disabled background color.'),
+);
+export const ktInputSelectionBackground = registerColor(
+  'kt.input.selectionBackground',
+  { dark: selectionBackground, light: selectionBackground, hcDark: selectionBackground, hcLight: selectionBackground },
+  localize('Input Selection background color.'),
+);
+
+export const ktInputValidationWarningTextForeground = registerColor(
+  'kt.inputValidation.warningTextForeground',
+  { dark: '#D77915', light: '#D77915', hcDark: null, hcLight: null },
+  localize('Input Validation warning Text foreground color.'),
+);
+export const ktInputValidationErrorTextForeground = registerColor(
+  'kt.inputValidation.errorTextForeground',
+  { dark: '#D21F28', light: '#D21F28', hcDark: null, hcLight: null },
+  localize('Input Validation Error Text foreground color.'),
+);
+
+export const ktInputOptionHoverBorder = registerColor(
+  'kt.inputOption.hoverBorder',
+  {
+    dark: inputActiveOptionBorder,
+    light: inputActiveOptionBorder,
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize('inputOptionHoverBorder', 'Border color of hovering options in input fields.'),
+);

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

@@ -0,0 +1,61 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { transparent, registerColor } from '../../utils';
+import { ACTIVITY_BAR_BORDER } from '../activity-bar';
+import { widgetShadow, foreground, descriptionForeground } from '../base';
+import { editorBackground } from '../editor';
+import { menuForeground } from '../menu';
+
+/* ---  menu --- */
+export const menuDescriptionForeground = registerColor(
+  'kt.menu.descriptionForeground',
+  {
+    dark: descriptionForeground,
+    light: descriptionForeground,
+    hcDark: descriptionForeground,
+    hcLight: descriptionForeground,
+  },
+  localize('menuDescriptionForeground', 'Description foreground color of menu items.'),
+);
+
+export const menuDisableForeground = registerColor(
+  'kt.menu.disableForeground',
+  {
+    dark: transparent(menuForeground, 0.3),
+    light: transparent(menuForeground, 0.3),
+    hcDark: transparent(menuForeground, 0.3),
+    hcLight: transparent(menuForeground, 0.3),
+  },
+  localize('menuDisableForeground', 'Foreground color of disabled menu items.'),
+);
+
+export const menuShadow = registerColor(
+  'kt.menu.shadow',
+  { dark: widgetShadow, light: widgetShadow, hcDark: widgetShadow, hcLight: widgetShadow },
+  localize('menuShadow', 'Box shadow color of menu.'),
+);
+
+/* --- menubar --- */
+export const menubarForeground = registerColor(
+  'kt.menubar.foreground',
+  { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground },
+  localize('menubarForeground', 'Foreground color of menu bar.'),
+);
+
+export const menubarBackground = registerColor(
+  'kt.menubar.background',
+  { dark: editorBackground, light: editorBackground, hcDark: editorBackground, hcLight: editorBackground },
+  localize('menubarBackground', 'Background color of menu bar.'),
+);
+
+export const menubarSeparatorBackground = registerColor(
+  'kt.menubar.separatorBackground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('menubarSeparatorBackground', 'Separator background of menu bar.'),
+);
+
+export const menubarBorder = registerColor(
+  'kt.menubar.border',
+  { dark: ACTIVITY_BAR_BORDER, light: ACTIVITY_BAR_BORDER, hcDark: ACTIVITY_BAR_BORDER, hcLight: ACTIVITY_BAR_BORDER },
+  localize('menubarBorder', 'Border color of menu bar.'),
+);

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

@@ -0,0 +1,57 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor } from '../../utils';
+import {
+  NOTIFICATIONS_BACKGROUND,
+  NOTIFICATIONS_ERROR_ICON_FOREGROUND,
+  NOTIFICATIONS_FOREGROUND,
+  NOTIFICATIONS_INFO_ICON_FOREGROUND,
+  NOTIFICATIONS_WARNING_ICON_FOREGROUND,
+} from '../notification';
+
+export const ktModalForeground = registerColor(
+  'kt.modal.foreground',
+  { light: NOTIFICATIONS_FOREGROUND, dark: NOTIFICATIONS_FOREGROUND, hcDark: null, hcLight: null },
+  localize('ktModalForeground', 'Modal Foreground color.'),
+);
+export const ktModalBackground = registerColor(
+  'kt.modal.background',
+  { light: NOTIFICATIONS_BACKGROUND, dark: NOTIFICATIONS_BACKGROUND, hcDark: null, hcLight: null },
+  localize('ktModalBackground', 'Modal Background color.'),
+);
+
+export const ktModalSeparatorBackground = registerColor(
+  'kt.modal.separatorBackground',
+  { light: '#2C3033', dark: '#2C3033', hcDark: null, hcLight: null },
+  localize('ktModalSeparatorBackground', 'Modal Separator Background color'),
+);
+export const ktModalErrorIconForeground = registerColor(
+  'kt.modalErrorIcon.foreground',
+  {
+    light: NOTIFICATIONS_ERROR_ICON_FOREGROUND,
+    dark: NOTIFICATIONS_ERROR_ICON_FOREGROUND,
+    hcDark: null,
+    hcLight: null,
+  },
+  localize('ktModalErrorIconForeground', 'Modal Error Icon Foreground Color.'),
+);
+export const ktModalWarningIconForeground = registerColor(
+  'kt.modalWarningIcon.foreground',
+  {
+    light: NOTIFICATIONS_WARNING_ICON_FOREGROUND,
+    dark: NOTIFICATIONS_WARNING_ICON_FOREGROUND,
+    hcDark: null,
+    hcLight: null,
+  },
+  localize('ktModalWarningIconForeground', 'Modal Warning Icon Foreground Color.'),
+);
+export const ktModalInfoIconForeground = registerColor(
+  'kt.modalInfoIcon.foreground',
+  { light: NOTIFICATIONS_INFO_ICON_FOREGROUND, dark: NOTIFICATIONS_INFO_ICON_FOREGROUND, hcDark: null, hcLight: null },
+  localize('ktModalInfoIconForeground', 'Modal Info Icon Foreground Color.'),
+);
+export const ktModalSuccessIconForeground = registerColor(
+  'kt.modalSuccessIcon.foreground',
+  { light: '#64B436', dark: '#64B436', hcDark: null, hcLight: null },
+  localize('ktModalSuccessIconForeground', 'Modal Success Icon Foreground Color.'),
+);

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

@@ -0,0 +1,16 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor } from '../../utils';
+import { NOTIFICATIONS_FOREGROUND } from '../notification';
+
+/* --- notification --- */
+export const ktNotificationsCloseIconForeground = registerColor(
+  'kt.notificationsCloseIcon.foreground',
+  {
+    dark: NOTIFICATIONS_FOREGROUND,
+    light: NOTIFICATIONS_FOREGROUND,
+    hcDark: NOTIFICATIONS_FOREGROUND,
+    hcLight: NOTIFICATIONS_FOREGROUND,
+  },
+  localize('notificationsCloseIconForeground', 'Notifications close icon foreground.'),
+);

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

@@ -0,0 +1,112 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor, transparent, lighten, darken } from '../../utils';
+import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER } from '../activity-bar';
+import { foreground } from '../base';
+import { EDITOR_GROUP_HEADER_TABS_BACKGROUND } from '../editor';
+import { PANEL_BACKGROUND, PANEL_INACTIVE_TITLE_FOREGROUND } from '../panel';
+import { TAB_INACTIVE_BACKGROUND } from '../tab';
+import { textLinkActiveForeground } from '../text';
+
+/* --- panel --- */
+export const ktPanelTitleBackground = registerColor(
+  'kt.panelTitle.background',
+  {
+    dark: EDITOR_GROUP_HEADER_TABS_BACKGROUND,
+    light: EDITOR_GROUP_HEADER_TABS_BACKGROUND,
+    hcDark: EDITOR_GROUP_HEADER_TABS_BACKGROUND,
+    hcLight: EDITOR_GROUP_HEADER_TABS_BACKGROUND,
+  },
+  localize(
+    'panelTitle.background',
+    'Panel title background color. Panels are shown below the editor area and contain views like output and integrated terminal.',
+  ),
+);
+
+export const ktPanelTabInactiveForeground = registerColor(
+  'kt.panelTab.inactiveForeground',
+  {
+    dark: transparent(foreground, 0.8),
+    light: transparent(foreground, 0.8),
+    hcDark: transparent(foreground, 0.8),
+    hcLight: transparent(foreground, 0.8),
+  },
+  localize('panelTab.inactiveForeground', 'Panel tab inactive forground color.'),
+);
+
+export const ktPanelTabActiveForeground = registerColor(
+  'kt.panelTab.activeForeground',
+  {
+    dark: textLinkActiveForeground,
+    light: textLinkActiveForeground,
+    hcDark: textLinkActiveForeground,
+    hcLight: textLinkActiveForeground,
+  },
+  localize('panelTab.activeForeground', 'Panel tab active forground color.'),
+);
+
+export const ktPanelTabInactiveBackground = registerColor(
+  'kt.panelTab.inactiveBackground',
+  {
+    dark: TAB_INACTIVE_BACKGROUND,
+    light: TAB_INACTIVE_BACKGROUND,
+    hcDark: TAB_INACTIVE_BACKGROUND,
+    hcLight: TAB_INACTIVE_BACKGROUND,
+  },
+  localize('panelTab.inactiveBackground', 'Panel tab background color.'),
+);
+
+export const ktPanelTabActiveBackground = registerColor(
+  'kt.panelTab.activeBackground',
+  {
+    dark: PANEL_BACKGROUND,
+    light: PANEL_BACKGROUND,
+    hcDark: PANEL_BACKGROUND,
+    hcLight: PANEL_BACKGROUND,
+  },
+  localize('panelTab.activeBackground', 'Panel tab active background color.'),
+);
+
+export const ktPanelTabActionIconForeground = registerColor(
+  'kt.panelTabActionIcon.foreground',
+  {
+    dark: foreground,
+    light: foreground,
+    hcDark: foreground,
+    hcLight: foreground,
+  },
+  localize('panelTabActionIcon.foreground', 'Panel tab close icon color.'),
+);
+
+export const ktPanelTabActiveBorder = registerColor(
+  'kt.panelTab.activeBorder',
+  {
+    dark: lighten(ACTIVITY_BAR_BACKGROUND, 0.2),
+    light: lighten(ACTIVITY_BAR_BACKGROUND, 0.2),
+    hcDark: lighten(ACTIVITY_BAR_BACKGROUND, 0.2),
+    hcLight: lighten(ACTIVITY_BAR_BACKGROUND, 0.2),
+  },
+  localize('panelTab.border', 'Panel tab border color.'),
+);
+
+export const ktPanelTabBorder = registerColor(
+  'kt.panelTab.border',
+  {
+    dark: darken(ACTIVITY_BAR_BORDER, 0.1),
+    light: darken(ACTIVITY_BAR_BORDER, 0.1),
+    hcDark: darken(ACTIVITY_BAR_BORDER, 0.1),
+    hcLight: darken(ACTIVITY_BAR_BORDER, 0.1),
+  },
+  localize('panelTab.border', 'Panel tab border color.'),
+);
+
+export const ktPanelSecondaryForeground = registerColor(
+  'kt.panel.secondaryForeground',
+  {
+    dark: lighten(PANEL_INACTIVE_TITLE_FOREGROUND, 0.2),
+    light: lighten(PANEL_INACTIVE_TITLE_FOREGROUND, 0.2),
+    hcDark: lighten(PANEL_INACTIVE_TITLE_FOREGROUND, 0.2),
+    hcLight: lighten(PANEL_INACTIVE_TITLE_FOREGROUND, 0.2),
+  },
+  localize('panel.secondaryForeground', 'Panel secondary foreground color.'),
+);

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

@@ -0,0 +1,28 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor } from '../../utils';
+import { NOTIFICATIONS_FOREGROUND, NOTIFICATIONS_BACKGROUND } from '../notification';
+
+export const ktPopoverForground = registerColor(
+  'kt.popover.foreground',
+  { dark: '#D7DBDE', light: '#4D4D4D', hcDark: NOTIFICATIONS_FOREGROUND, hcLight: NOTIFICATIONS_FOREGROUND },
+  localize('Popover foreground color. Popover when hover a icon or link to show some informations'),
+);
+
+export const ktPopoverBackground = registerColor(
+  'kt.popover.background',
+  { dark: '#35393D', light: '#FFFFFF', hcDark: NOTIFICATIONS_BACKGROUND, hcLight: NOTIFICATIONS_BACKGROUND },
+  localize('Popover background color. Popover when hover a icon or link to show some informations'),
+);
+
+export const ktPopoverBorder = registerColor(
+  'kt.popover.border',
+  { dark: '#2c3033', light: '#E0E0E0', hcDark: NOTIFICATIONS_BACKGROUND, hcLight: NOTIFICATIONS_BACKGROUND },
+  localize('Popover border color.'),
+);
+
+export const ktPopoverProminentBackground = registerColor(
+  'kt.popover.prominentBackground',
+  { dark: '#2C3033', light: '#F2F2F2', hcDark: NOTIFICATIONS_BACKGROUND, hcLight: NOTIFICATIONS_BACKGROUND },
+  localize('Popover prominent background color.'),
+);

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

@@ -0,0 +1,155 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { darken, lighten, registerColor } from '../../utils';
+import { selectBackground, selectBorder, selectForeground } from '../dropdown';
+import {
+  inputForeground,
+  inputBackground,
+  inputPlaceholderForeground,
+  inputActiveOptionBorder,
+  inputActiveOptionBackground,
+} from '../input';
+import {
+  listActiveSelectionBackground,
+  listActiveSelectionForeground,
+  listErrorForeground,
+  listHoverBackground,
+  listInactiveSelectionBackground,
+  listInactiveSelectionForeground,
+  listWarningForeground,
+} from '../list-tree';
+import { settingsSelectBorder } from '../settings';
+
+export const ktSelectForeground = registerColor(
+  'kt.select.foreground',
+  { dark: inputForeground, light: inputForeground, hcDark: inputForeground, hcLight: inputForeground },
+  localize('ktSelectForeground', 'Select Foreground color.'),
+);
+export const ktSelectBackground = registerColor(
+  'kt.select.background',
+  { dark: inputBackground, light: inputBackground, hcDark: inputBackground, hcLight: inputBackground },
+  localize('ktSelectBackground', 'Select Background color.'),
+);
+export const ktSelectBorder = registerColor(
+  'kt.select.border',
+  { dark: settingsSelectBorder, light: settingsSelectBorder, hcDark: selectBorder, hcLight: selectBorder },
+  localize('ktSelectBorder', 'Select Border color.'),
+);
+export const ktSelectPlaceholderForeground = registerColor(
+  'kt.select.placeholderForeground',
+  {
+    dark: inputPlaceholderForeground,
+    light: inputPlaceholderForeground,
+    hcDark: inputPlaceholderForeground,
+    hcLight: inputPlaceholderForeground,
+  },
+  localize('ktSelectPlaceholder', 'Select Placeholder Foreground color.'),
+);
+export const ktSelectDisableBackground = registerColor(
+  'kt.select.disableBackground',
+  {
+    dark: listInactiveSelectionBackground,
+    light: listInactiveSelectionBackground,
+    hcDark: listInactiveSelectionBackground,
+    hcLight: listInactiveSelectionBackground,
+  },
+  localize('ktSelectDisableBackground', 'Select Disable Background color.'),
+);
+export const ktSelectDisableForeground = registerColor(
+  'kt.select.disableForeground',
+  {
+    dark: listInactiveSelectionForeground,
+    light: listInactiveSelectionForeground,
+    hcDark: listInactiveSelectionForeground,
+    hcLight: listInactiveSelectionForeground,
+  },
+  localize('ktSelectDisableForeground', 'Select Disable Foreground color.'),
+);
+export const ktSelectWarningForeground = registerColor(
+  'kt.select.warningForeground',
+  {
+    dark: listWarningForeground,
+    light: listWarningForeground,
+    hcDark: listWarningForeground,
+    hcLight: listWarningForeground,
+  },
+  localize('ktSelectWarningForeground', 'Select Warning Foreground.'),
+);
+export const ktSelectErrorForeground = registerColor(
+  'kt.select.warningForeground',
+  { dark: listErrorForeground, light: listErrorForeground, hcDark: listErrorForeground, hcLight: listErrorForeground },
+  localize('ktSelectDisableForeground', 'Select Disable Foreground color.'),
+);
+export const ktSelectWarningColor = registerColor(
+  'kt.select.warningColor',
+  { dark: '#D77915', light: '#D77915', hcDark: null, hcLight: null },
+  localize('ktSelectWarningColor', 'Select Warning Color.'),
+);
+
+export const ktSelectOptionActiveBackground = registerColor(
+  'selectOption.activeBackground',
+  {
+    dark: inputActiveOptionBackground,
+    light: inputActiveOptionBackground,
+    hcDark: inputActiveOptionBackground,
+    hcLight: inputActiveOptionBackground,
+  },
+  localize('ktSelectOptionActiveBackground', 'Select Option Active Background color.'),
+);
+export const ktSelectOptionActiveBorder = registerColor(
+  'kt.selectOption.activeBorder',
+  {
+    dark: inputActiveOptionBorder,
+    light: inputActiveOptionBorder,
+    hcDark: inputActiveOptionBorder,
+    hcLight: inputActiveOptionBorder,
+  },
+  localize('ktSelectOptionActiveBorder', 'Select Option Active Border color.'),
+);
+
+/* select dropdown */
+export const ktSelectDropdownForeground = registerColor(
+  'kt.selectDropdown.foreground',
+  { dark: selectForeground, light: selectForeground, hcDark: selectForeground, hcLight: selectForeground },
+  localize('ktSelectDropdownForeground', 'Select Dropdown Foreground color.'),
+);
+export const ktSelectDropdownBackground = registerColor(
+  'kt.selectDropdown.background',
+  { dark: selectBackground, light: selectBackground, hcDark: selectBackground, hcLight: selectBackground },
+  localize('ktSelectDropdownBackground', 'Select Dropdown Background color.'),
+);
+export const ktSelectDropdownHoverBackground = registerColor(
+  'kt.selectDropdown.hoverBackground',
+  { dark: listHoverBackground, light: listHoverBackground, hcDark: listHoverBackground, hcLight: listHoverBackground },
+  localize('ktSelectDropdownHoverBackground', 'Select Dropdown Hover Background color.'),
+);
+export const ktSelectDropdownSelectionBackground = registerColor(
+  'kt.selectDropdown.selectionBackground',
+  {
+    dark: listActiveSelectionBackground,
+    light: listActiveSelectionBackground,
+    hcDark: listActiveSelectionBackground,
+    hcLight: listActiveSelectionBackground,
+  },
+  localize('ktSelectDropdownSelectionBackground', 'Select Dropdown Selection Background color.'),
+);
+export const ktSelectDropdownSelectionForeground = registerColor(
+  'kt.selectDropdown.selectionForeground',
+  {
+    dark: listActiveSelectionForeground,
+    light: listActiveSelectionForeground,
+    hcDark: listActiveSelectionForeground,
+    hcLight: listActiveSelectionForeground,
+  },
+  localize('ktSelectDropdownSelectionForeground', 'Select Dropdown Selection Foreground color.'),
+);
+export const ktSelectDropdownTeamForeground = registerColor(
+  'kt.selectDropdown.teamForeground',
+  {
+    dark: darken(ktSelectDropdownForeground, 0.2),
+    light: lighten(ktSelectDropdownForeground, 0.2),
+    hcDark: null,
+    hcLight: null,
+  },
+  localize('ktSelectDropdownSelectionBackground', 'Select Dropdown Selection Background color.'),
+);

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

@@ -0,0 +1,32 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor } from '../../utils';
+import { PANEL_ACTIVE_TITLE_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND } from '../panel';
+
+export const settingTabActiveBorder = registerColor(
+  'kt.settings.tabActiveBorder',
+  {
+    dark: PANEL_ACTIVE_TITLE_BORDER,
+    light: PANEL_ACTIVE_TITLE_BORDER,
+    hcDark: PANEL_ACTIVE_TITLE_BORDER,
+    hcLight: PANEL_ACTIVE_TITLE_BORDER,
+  },
+  localize(
+    'settingsTabActiveBorder',
+    'Border on the bottom of an active tab in settings. There can be multiple preference scopes in settings page.',
+  ),
+);
+
+export const settingTabActiveForeground = registerColor(
+  'kt.settings.tabActiveForeground',
+  {
+    dark: PANEL_ACTIVE_TITLE_FOREGROUND,
+    light: PANEL_ACTIVE_TITLE_FOREGROUND,
+    hcDark: PANEL_ACTIVE_TITLE_FOREGROUND,
+    hcLight: PANEL_ACTIVE_TITLE_FOREGROUND,
+  },
+  localize(
+    'settingsTabActiveForeground',
+    'Active tab foreground color in an active group in settings. There can be multiple preference scopes in settings page.',
+  ),
+);

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

@@ -0,0 +1,16 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor } from '../../utils';
+
+// 断网是状态栏用的颜色
+// 没有很好的 backup token，先写死这个色值
+export const ktStatusBarOfflineBackground = registerColor(
+  'kt.statusbar.offline.background',
+  {
+    dark: '#D21F28',
+    light: '#D21F28',
+    hcDark: '#D21F28',
+    hcLight: '#D21F28',
+  },
+  localize('statusBarOfflineBackground', 'StatusBar background color when app is offline'),
+);

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

@@ -0,0 +1,31 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { transparent, registerColor } from '../../utils';
+import { foreground } from '../base';
+import { hcBorderColor } from '../basic-color';
+
+export const ktTabBarBorderDown = registerColor(
+  'kt.tab.borderDown',
+  { dark: '#5F656B40', light: '#5F656B40', hcDark: null, hcLight: null },
+  localize('Activity Bar Border bottom color.'),
+);
+export const ktTabActiveForeground = registerColor(
+  'kt.tab.activeForeground',
+  { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground },
+  localize('Tab Active foreground color.'),
+);
+export const ktTabInactiveForeground = registerColor(
+  'kt.tab.inactiveForeground',
+  {
+    dark: transparent(foreground, 0.8),
+    light: transparent(foreground, 0.8),
+    hcDark: transparent(foreground, 0.8),
+    hcLight: transparent(foreground, 0.8),
+  },
+  localize('Tab inactive foreground color.'),
+);
+export const ktTabActiveBorder = registerColor(
+  'kt.tab.activeBorder',
+  { dark: '#167cDB', light: '#167cDB', hcDark: hcBorderColor, hcLight: hcBorderColor },
+  localize('Tab Active border color.'),
+);

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

@@ -0,0 +1,55 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor } from '../../utils';
+import { NOTIFICATIONS_FOREGROUND, NOTIFICATIONS_BACKGROUND } from '../notification';
+
+/* --- kt tooltip --- */
+export const ktTooltipForeground = registerColor(
+  'kt.tooltip.foreground',
+  {
+    dark: '#D7DBDE',
+    light: '#4D4D4D',
+    hcDark: NOTIFICATIONS_FOREGROUND,
+    hcLight: NOTIFICATIONS_FOREGROUND,
+  },
+  localize(
+    'tooltipForeground',
+    'Tooltip foreground color. Tooltips when hover a icon or link to show some informations',
+  ),
+);
+
+export const ktTooltipBackground = registerColor(
+  'kt.tooltip.background',
+  {
+    dark: '#35393D',
+    light: '#FFFFFF',
+    hcDark: NOTIFICATIONS_BACKGROUND,
+    hcLight: NOTIFICATIONS_BACKGROUND,
+  },
+  localize(
+    'tooltipBackground',
+    'Tooltip background color. Tooltips when hover a icon or link to show some informations',
+  ),
+);
+
+export const ktEditorActionToolTipBackground = registerColor(
+  'kt.editorActionToolTip.background',
+  {
+    dark: ktTooltipBackground,
+    light: ktTooltipBackground,
+    hcDark: ktTooltipBackground,
+    hcLight: ktTooltipBackground,
+  },
+  localize('editorActionTooltipBackground', 'Tooltip background color for Editor Actions Tip'),
+);
+
+export const ktEditorActionToolTipForeground = registerColor(
+  'kt.editorActionToolTip.foreground',
+  {
+    dark: ktTooltipForeground,
+    light: ktTooltipForeground,
+    hcDark: ktTooltipForeground,
+    hcLight: ktTooltipForeground,
+  },
+  localize('editorActionTooltipForeground', 'Tooltip Foreground color for Editor Actions Tip'),
+);