@opensumi/ide-theme 2.21.13 → 2.22.0

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

@@ -0,0 +1,35 @@
+export * from './activity-bar';
+export * from './badge';
+export * from './base';
+export * from './breadcrumb';
+export * from './button';
+export * from './dropdown';
+export * from './editor';
+export * from './input';
+export * from './checkbox';
+export * from './list-tree';
+export * from './menu-bar';
+export * from './menu';
+export * from './merge-conflict';
+export * from './notification';
+export * from './panel';
+export * from './picker';
+export * from './progress-bar';
+export * from './quick-input';
+export * from './scrollbar';
+export * from './settings';
+export * from './sidebar';
+export * from './snippet';
+export * from './status-bar';
+export * from './tab';
+export * from './text';
+export * from './title-bar';
+export * from './welcome-page';
+export * from './pick-view';
+export * from './debug';
+export * from './debugToolbar';
+export * from './charts';
+export * from './minimap';
+export * from './testing';
+
+export * from './custom';

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

@@ -0,0 +1,105 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color } from '../../common/color';
+import { registerColor, transparent } from '../utils';
+
+import { contrastBorder, focusBorder, foreground } from './base';
+import { secondaryForegroundColor } from './basic-color';
+
+export const inputBorder = registerColor(
+  'input.border',
+  { dark: '#00000000', light: '#00000000', hcDark: contrastBorder, hcLight: contrastBorder },
+  localize('inputBoxBorder', 'Input box border.'),
+);
+export const inputBackground = registerColor(
+  'input.background',
+  { dark: '#00000040', light: Color.white, hcDark: Color.black, hcLight: Color.white },
+  localize('inputBoxBackground', 'Input box background.'),
+);
+export const inputForeground = registerColor(
+  'input.foreground',
+  { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground },
+  localize('inputBoxForeground', 'Input box foreground.'),
+);
+export const inputPlaceholderForeground = registerColor(
+  'input.placeholderForeground',
+  {
+    light: transparent(foreground, 0.5),
+    dark: transparent(foreground, 0.5),
+    hcDark: transparent(foreground, 0.7),
+    hcLight: transparent(foreground, 0.7),
+  },
+  localize('inputPlaceholderForeground', 'Input box foreground color for placeholder text.'),
+);
+
+export const inputActiveOptionBorder = registerColor(
+  'inputOption.activeBorder',
+  { dark: '#007ACC', light: '#007ACC', hcDark: contrastBorder, hcLight: contrastBorder },
+  localize('inputBoxActiveOptionBorder', 'Border color of activated options in input fields.'),
+);
+export const inputActiveOptionHoverBackground = registerColor(
+  'inputOption.hoverBackground',
+  { dark: '#5a5d5e80', light: '#b8b8b850', hcDark: null, hcLight: null },
+  localize('inputOption.hoverBackground', 'Background color of activated options in input fields.'),
+);
+export const inputActiveOptionBackground = registerColor(
+  'inputOption.activeBackground',
+  {
+    dark: transparent(focusBorder, 0.4),
+    light: transparent(focusBorder, 0.2),
+    hcDark: Color.transparent,
+    hcLight: Color.transparent,
+  },
+  localize('inputOption.activeBackground', 'Background hover color of options in input fields.'),
+);
+export const inputActiveOptionForeground = registerColor(
+  'inputOption.activeForeground',
+  { dark: Color.white, light: Color.black, hcDark: null, hcLight: foreground },
+  localize('inputOption.activeForeground', 'Foreground color of activated options in input fields.'),
+);
+
+export const inputValidationInfoBackground = registerColor(
+  'inputValidation.infoBackground',
+  { dark: '#063B49', light: '#D6ECF2', hcDark: Color.black, hcLight: Color.white },
+  localize('inputValidationInfoBackground', 'Input validation background color for information severity.'),
+);
+export const inputValidationInfoForeground = registerColor(
+  'inputValidation.infoForeground',
+  { dark: null, light: null, hcDark: null, hcLight: foreground },
+  localize('inputValidationInfoForeground', 'Input validation foreground color for information severity.'),
+);
+export const inputValidationInfoBorder = registerColor(
+  'inputValidation.infoBorder',
+  { dark: '#007acc', light: '#007acc', hcDark: contrastBorder, hcLight: contrastBorder },
+  localize('inputValidationInfoBorder', 'Input validation border color for information severity.'),
+);
+export const inputValidationWarningBackground = registerColor(
+  'inputValidation.warningBackground',
+  { dark: '#352A05', light: '#F6F5D2', hcDark: Color.black, hcLight: Color.white },
+  localize('inputValidationWarningBackground', 'Input validation background color for warning severity.'),
+);
+export const inputValidationWarningForeground = registerColor(
+  'inputValidation.warningForeground',
+  { dark: null, light: null, hcDark: null, hcLight: foreground },
+  localize('inputValidationWarningForeground', 'Input validation foreground color for warning severity.'),
+);
+export const inputValidationWarningBorder = registerColor(
+  'inputValidation.warningBorder',
+  { dark: '#B89500', light: '#B89500', hcDark: contrastBorder, hcLight: contrastBorder },
+  localize('inputValidationWarningBorder', 'Input validation border color for warning severity.'),
+);
+export const inputValidationErrorBackground = registerColor(
+  'inputValidation.errorBackground',
+  { dark: '#5A1D1D', light: '#F2DEDE', hcDark: Color.black, hcLight: Color.white },
+  localize('inputValidationErrorBackground', 'Input validation background color for error severity.'),
+);
+export const inputValidationErrorForeground = registerColor(
+  'inputValidation.errorForeground',
+  { dark: null, light: null, hcDark: null, hcLight: foreground },
+  localize('inputValidationErrorForeground', 'Input validation foreground color for error severity.'),
+);
+export const inputValidationErrorBorder = registerColor(
+  'inputValidation.errorBorder',
+  { dark: '#BE1100', light: '#BE1100', hcDark: contrastBorder, hcLight: contrastBorder },
+  localize('inputValidationErrorBorder', 'Input validation border color for error severity.'),
+);

package/src/common/color-tokens/list-tree.ts

@@ -0,0 +1,205 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color } from '../../common/color';
+import { darken, lighten, registerColor, transparent } from '../utils';
+
+import { activeContrastBorder, contrastBorder, focusBorder, foreground, widgetShadow } from './base';
+import { editorFindMatchHighlight, editorFindMatchHighlightBorder, editorWidgetBackground } from './editor';
+
+export const listFocusBackground = registerColor(
+  'list.focusBackground',
+  { dark: '#062F4A', light: '#D6EBFF', hcDark: null, hcLight: null },
+  localize(
+    'listFocusBackground',
+    'List/Tree background color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.',
+  ),
+);
+export const listFocusForeground = registerColor(
+  'list.focusForeground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize(
+    'listFocusForeground',
+    'List/Tree foreground color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.',
+  ),
+);
+export const listFocusAndSelectionOutline = registerColor(
+  'list.focusAndSelectionOutline',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize(
+    'listFocusAndSelectionOutline',
+    'List/Tree outline color for the focused item when the list/tree is active and selected. An active list/tree has keyboard focus, an inactive does not.',
+  ),
+);
+export const listActiveSelectionBackground = registerColor(
+  'list.activeSelectionBackground',
+  { dark: '#04395E', light: '#0060C0', hcDark: null, hcLight: Color.fromHex('#0F4A85').transparent(0.1) },
+  localize(
+    'listActiveSelectionBackground',
+    'List/Tree background color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.',
+  ),
+);
+export const listActiveSelectionForeground = registerColor(
+  'list.activeSelectionForeground',
+  { dark: Color.white, light: Color.white, hcDark: null, hcLight: null },
+  localize(
+    'listActiveSelectionForeground',
+    'List/Tree foreground color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.',
+  ),
+);
+export const listActiveSelectionIconForeground = registerColor(
+  'list.activeSelectionIconForeground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize(
+    'listActiveSelectionIconForeground',
+    'List/Tree icon foreground color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.',
+  ),
+);
+export const listInactiveSelectionBackground = registerColor(
+  'list.inactiveSelectionBackground',
+  { dark: '#37373D', light: '#E4E6F1', hcDark: null, hcLight: Color.fromHex('#0F4A85').transparent(0.1) },
+  localize(
+    'listInactiveSelectionBackground',
+    'List/Tree background color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.',
+  ),
+);
+export const listInactiveSelectionForeground = registerColor(
+  'list.inactiveSelectionForeground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize(
+    'listInactiveSelectionForeground',
+    'List/Tree foreground color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.',
+  ),
+);
+export const listInactiveSelectionIconForeground = registerColor(
+  'list.inactiveSelectionIconForeground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize(
+    'listInactiveSelectionIconForeground',
+    'List/Tree icon foreground color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.',
+  ),
+);
+export const listInactiveFocusBackground = registerColor(
+  'list.inactiveFocusBackground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize(
+    'listInactiveFocusBackground',
+    'List/Tree background color for the focused item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.',
+  ),
+);
+export const listInactiveFocusOutline = registerColor(
+  'list.inactiveFocusOutline',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize(
+    'listInactiveFocusOutline',
+    'List/Tree outline color for the focused item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.',
+  ),
+);
+export const listHoverBackground = registerColor(
+  'list.hoverBackground',
+  { dark: '#2A2D2E', light: '#F0F0F0', hcDark: '#2A2D2E', hcLight: Color.fromHex('#0F4A85').transparent(0.1) },
+  localize('listHoverBackground', 'List/Tree background when hovering over items using the mouse.'),
+);
+export const listHoverForeground = registerColor(
+  'list.hoverForeground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('listHoverForeground', 'List/Tree foreground when hovering over items using the mouse.'),
+);
+export const listDropBackground = registerColor(
+  'list.dropBackground',
+  { dark: '#062F4A', light: '#D6EBFF', hcDark: null, hcLight: null },
+  localize('listDropBackground', 'List/Tree drag and drop background when moving items around using the mouse.'),
+);
+export const listHighlightForeground = registerColor(
+  'list.highlightForeground',
+  { dark: '#2AAAFF', light: '#0066BF', hcDark: focusBorder, hcLight: focusBorder },
+  localize('highlight', 'List/Tree foreground color of the match highlights when searching inside the list/tree.'),
+);
+export const listInvalidItemForeground = registerColor(
+  'list.invalidItemForeground',
+  { dark: '#B89500', light: '#B89500', hcDark: '#B89500', hcLight: '#B5200D' },
+  localize(
+    'invalidItemForeground',
+    'List/Tree foreground color for invalid items, for example an unresolved root in explorer.',
+  ),
+);
+export const listErrorForeground = registerColor(
+  'list.errorForeground',
+  { dark: '#F88070', light: '#B01011', hcDark: null, hcLight: null },
+  localize('listErrorForeground', 'Foreground color of list items containing errors.'),
+);
+export const listWarningForeground = registerColor(
+  'list.warningForeground',
+  { dark: '#CCA700', light: '#855F00', hcDark: null, hcLight: null },
+  localize('listWarningForeground', 'Foreground color of list items containing warnings.'),
+);
+export const listFilterWidgetBackground = registerColor(
+  'listFilterWidget.background',
+  {
+    light: darken(editorWidgetBackground, 0),
+    dark: lighten(editorWidgetBackground, 0),
+    hcDark: editorWidgetBackground,
+    hcLight: editorWidgetBackground,
+  },
+  localize('listFilterWidgetBackground', 'Background color of the type filter widget in lists and trees.'),
+);
+export const listFilterWidgetOutline = registerColor(
+  'listFilterWidget.outline',
+  { dark: Color.transparent, light: Color.transparent, hcDark: '#f38518', hcLight: '#007ACC' },
+  localize('listFilterWidgetOutline', 'Outline color of the type filter widget in lists and trees.'),
+);
+export const listFilterWidgetNoMatchesOutline = registerColor(
+  'listFilterWidget.noMatchesOutline',
+  { dark: '#BE1100', light: '#BE1100', hcDark: contrastBorder, hcLight: contrastBorder },
+  localize(
+    'listFilterWidgetNoMatchesOutline',
+    'Outline color of the type filter widget in lists and trees, when there are no matches.',
+  ),
+);
+export const listFilterWidgetShadow = registerColor(
+  'listFilterWidget.shadow',
+  { dark: widgetShadow, light: widgetShadow, hcDark: widgetShadow, hcLight: widgetShadow },
+  localize('listFilterWidgetShadow', 'Shadown color of the type filter widget in lists and trees.'),
+);
+export const listFilterMatchHighlight = registerColor(
+  'list.filterMatchBackground',
+  { dark: editorFindMatchHighlight, light: editorFindMatchHighlight, hcDark: null, hcLight: null },
+  localize('listFilterMatchHighlight', 'Background color of the filtered match.'),
+);
+export const listFilterMatchHighlightBorder = registerColor(
+  'list.filterMatchBorder',
+  {
+    dark: editorFindMatchHighlightBorder,
+    light: editorFindMatchHighlightBorder,
+    hcDark: contrastBorder,
+    hcLight: activeContrastBorder,
+  },
+  localize('listFilterMatchHighlightBorder', 'Border color of the filtered match.'),
+);
+export const treeIndentGuidesStroke = registerColor(
+  'tree.indentGuidesStroke',
+  { dark: '#585858', light: '#a9a9a9', hcDark: '#a9a9a9', hcLight: '#a5a5a5' },
+  localize('treeIndentGuidesStroke', 'Tree stroke color for the indentation guides.'),
+);
+export const listFocusOutline = registerColor(
+  'list.focusOutline',
+  { dark: focusBorder, light: focusBorder, hcDark: activeContrastBorder, hcLight: activeContrastBorder },
+  localize(
+    'listFocusOutline',
+    'List/Tree outline color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.',
+  ),
+);
+export const tableColumnsBorder = registerColor(
+  'tree.tableColumnsBorder',
+  { dark: '#CCCCCC20', light: '#61616120', hcDark: null, hcLight: null },
+  localize('tableColumnsBorder', 'Table border color between columns.'),
+);
+export const tableOddRowsBackgroundColor = registerColor(
+  'tree.tableOddRowsBackground',
+  { dark: transparent(foreground, 0.04), light: transparent(foreground, 0.04), hcDark: null, hcLight: null },
+  localize('tableOddRowsBackgroundColor', 'Background color for odd table rows.'),
+);
+export const listDeemphasizedForeground = registerColor(
+  'list.deemphasizedForeground',
+  { dark: '#8C8C8C', light: '#8E8E90', hcDark: '#A7A8A9', hcLight: '#666666' },
+  localize('listDeemphasizedForeground', 'List/Tree foreground color for items that are deemphasized. '),
+);

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

@@ -0,0 +1,43 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color } from '../../common/color';
+import { transparent, registerColor } from '../utils';
+
+import { activeContrastBorder } from './base';
+import { TITLE_BAR_ACTIVE_FOREGROUND } from './title-bar';
+import { toolbarHoverBackground } from './toolbar';
+
+// < --- Menubar --- >
+
+export const MENUBAR_SELECTION_FOREGROUND = registerColor(
+  'menubar.selectionForeground',
+  {
+    dark: TITLE_BAR_ACTIVE_FOREGROUND,
+    light: TITLE_BAR_ACTIVE_FOREGROUND,
+    hcDark: TITLE_BAR_ACTIVE_FOREGROUND,
+    hcLight: TITLE_BAR_ACTIVE_FOREGROUND,
+  },
+  localize('menubarSelectionForeground', 'Foreground color of the selected menu item in the menubar.'),
+);
+
+export const MENUBAR_SELECTION_BACKGROUND = registerColor(
+  'menubar.selectionBackground',
+  {
+    dark: toolbarHoverBackground,
+    light: toolbarHoverBackground,
+    hcDark: null,
+    hcLight: null,
+  },
+  localize('menubarSelectionBackground', 'Background color of the selected menu item in the menubar.'),
+);
+
+export const MENUBAR_SELECTION_BORDER = registerColor(
+  'menubar.selectionBorder',
+  {
+    dark: null,
+    light: null,
+    hcDark: activeContrastBorder,
+    hcLight: activeContrastBorder,
+  },
+  localize('menubarSelectionBorder', 'Border color of the selected menu item in the menubar.'),
+);

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

@@ -0,0 +1,53 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor } from '../utils';
+
+import { contrastBorder, activeContrastBorder, foreground } from './base';
+import { selectBackground, selectForeground } from './dropdown';
+import { listActiveSelectionForeground, listActiveSelectionBackground } from './list-tree';
+
+export const menuBorder = registerColor(
+  'menu.border',
+  { dark: null, light: null, hcDark: contrastBorder, hcLight: contrastBorder },
+  localize('menuBorder', 'Border color of menus.'),
+);
+export const menuForeground = registerColor(
+  'menu.foreground',
+  { dark: selectForeground, light: foreground, hcDark: selectForeground, hcLight: selectForeground },
+  localize('menuForeground', 'Foreground color of menu items.'),
+);
+export const menuBackground = registerColor(
+  'menu.background',
+  { dark: selectBackground, light: selectBackground, hcDark: selectBackground, hcLight: selectBackground },
+  localize('menuBackground', 'Background color of menu items.'),
+);
+export const menuSelectionForeground = registerColor(
+  'menu.selectionForeground',
+  {
+    dark: listActiveSelectionForeground,
+    light: listActiveSelectionForeground,
+    hcDark: listActiveSelectionForeground,
+    hcLight: listActiveSelectionForeground,
+  },
+  localize('menuSelectionForeground', 'Foreground color of the selected menu item in menus.'),
+);
+export const menuSelectionBackground = registerColor(
+  'menu.selectionBackground',
+  {
+    dark: listActiveSelectionBackground,
+    light: listActiveSelectionBackground,
+    hcDark: listActiveSelectionBackground,
+    hcLight: listActiveSelectionBackground,
+  },
+  localize('menuSelectionBackground', 'Background color of the selected menu item in menus.'),
+);
+export const menuSelectionBorder = registerColor(
+  'menu.selectionBorder',
+  { dark: null, light: null, hcDark: activeContrastBorder, hcLight: activeContrastBorder },
+  localize('menuSelectionBorder', 'Border color of the selected menu item in menus.'),
+);
+export const menuSeparatorBackground = registerColor(
+  'menu.separatorBackground',
+  { dark: '#606060', light: '#D4D4D4', hcDark: contrastBorder, hcLight: contrastBorder },
+  localize('menuSeparatorBackground', 'Color of a separator menu item in menus.'),
+);

package/src/common/color-tokens/merge-conflict.ts

@@ -0,0 +1,145 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color } from '../../common/color';
+import { transparent, registerColor } from '../utils';
+
+/**
+ * Merge-conflict colors
+ */
+
+const headerTransparency = 0.5;
+const currentBaseColor = Color.fromHex('#40C8AE').transparent(headerTransparency);
+const incomingBaseColor = Color.fromHex('#40A6FF').transparent(headerTransparency);
+const commonBaseColor = Color.fromHex('#606060').transparent(0.4);
+const contentTransparency = 0.4;
+const rulerTransparency = 1;
+
+export const mergeCurrentHeaderBackground = registerColor(
+  'merge.currentHeaderBackground',
+  { dark: currentBaseColor, light: currentBaseColor, hcDark: null, hcLight: null },
+  localize(
+    'mergeCurrentHeaderBackground',
+    'Current header background in inline merge-conflicts. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+export const mergeCurrentContentBackground = registerColor(
+  'merge.currentContentBackground',
+  {
+    dark: transparent(mergeCurrentHeaderBackground, contentTransparency),
+    light: transparent(mergeCurrentHeaderBackground, contentTransparency),
+    hcDark: transparent(mergeCurrentHeaderBackground, contentTransparency),
+    hcLight: transparent(mergeCurrentHeaderBackground, contentTransparency),
+  },
+  localize(
+    'mergeCurrentContentBackground',
+    'Current content background in inline merge-conflicts. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+export const mergeIncomingHeaderBackground = registerColor(
+  'merge.incomingHeaderBackground',
+  { dark: incomingBaseColor, light: incomingBaseColor, hcDark: null, hcLight: null },
+  localize(
+    'mergeIncomingHeaderBackground',
+    'Incoming header background in inline merge-conflicts. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+export const mergeIncomingContentBackground = registerColor(
+  'merge.incomingContentBackground',
+  {
+    dark: transparent(mergeIncomingHeaderBackground, contentTransparency),
+    light: transparent(mergeIncomingHeaderBackground, contentTransparency),
+    hcDark: transparent(mergeIncomingHeaderBackground, contentTransparency),
+    hcLight: transparent(mergeIncomingHeaderBackground, contentTransparency),
+  },
+  localize(
+    'mergeIncomingContentBackground',
+    'Incoming content background in inline merge-conflicts. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+export const mergeCommonHeaderBackground = registerColor(
+  'merge.commonHeaderBackground',
+  { dark: commonBaseColor, light: commonBaseColor, hcDark: null, hcLight: null },
+  localize(
+    'mergeCommonHeaderBackground',
+    'Common ancestor header background in inline merge-conflicts. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+export const mergeCommonContentBackground = registerColor(
+  'merge.commonContentBackground',
+  {
+    dark: transparent(mergeCommonHeaderBackground, contentTransparency),
+    light: transparent(mergeCommonHeaderBackground, contentTransparency),
+    hcDark: transparent(mergeCommonHeaderBackground, contentTransparency),
+    hcLight: transparent(mergeCommonHeaderBackground, contentTransparency),
+  },
+  localize(
+    'mergeCommonContentBackground',
+    'Common ancestor content background in inline merge-conflicts. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+
+export const mergeBorder = registerColor(
+  'merge.border',
+  { dark: null, light: null, hcDark: '#C3DF6F', hcLight: '#007ACC' },
+  localize('mergeBorder', 'Border color on headers and the splitter in inline merge-conflicts.'),
+);
+
+export const overviewRulerCurrentContentForeground = registerColor(
+  'editorOverviewRuler.currentContentForeground',
+  {
+    dark: transparent(mergeCurrentHeaderBackground, rulerTransparency),
+    light: transparent(mergeCurrentHeaderBackground, rulerTransparency),
+    hcDark: mergeBorder,
+    hcLight: mergeBorder,
+  },
+  localize('overviewRulerCurrentContentForeground', 'Current overview ruler foreground for inline merge-conflicts.'),
+);
+export const overviewRulerIncomingContentForeground = registerColor(
+  'editorOverviewRuler.incomingContentForeground',
+  {
+    dark: transparent(mergeIncomingHeaderBackground, rulerTransparency),
+    light: transparent(mergeIncomingHeaderBackground, rulerTransparency),
+    hcDark: mergeBorder,
+    hcLight: mergeBorder,
+  },
+  localize('overviewRulerIncomingContentForeground', 'Incoming overview ruler foreground for inline merge-conflicts.'),
+);
+export const overviewRulerCommonContentForeground = registerColor(
+  'editorOverviewRuler.commonContentForeground',
+  {
+    dark: transparent(mergeCommonHeaderBackground, rulerTransparency),
+    light: transparent(mergeCommonHeaderBackground, rulerTransparency),
+    hcDark: mergeBorder,
+    hcLight: mergeBorder,
+  },
+  localize(
+    'overviewRulerCommonContentForeground',
+    'Common ancestor overview ruler foreground for inline merge-conflicts.',
+  ),
+);
+
+export const overviewRulerFindMatchForeground = registerColor(
+  'editorOverviewRuler.findMatchForeground',
+  { dark: '#d186167e', light: '#d186167e', hcDark: '#AB5A00', hcLight: null },
+  localize(
+    'overviewRulerFindMatchForeground',
+    'Overview ruler marker color for find matches. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+
+export const overviewRulerSelectionHighlightForeground = registerColor(
+  'editorOverviewRuler.selectionHighlightForeground',
+  { dark: '#A0A0A0CC', light: '#A0A0A0CC', hcDark: '#A0A0A0CC', hcLight: '#A0A0A0CC' },
+  localize(
+    'overviewRulerSelectionHighlightForeground',
+    'Overview ruler marker color for selection highlights. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);