@opensumi/ide-theme 2.21.13 → 2.22.0

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

@@ -0,0 +1,945 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color, RGBA } from '../../common/color';
+import { registerColor, transparent, lighten, darken, lessProminent } from '../utils';
+
+import { badgeBackground, badgeForeground } from './badge';
+import { contrastBorder, activeContrastBorder, focusBorder, foreground } from './base';
+import { listInactiveSelectionBackground } from './list-tree';
+
+// TODO COLOR 此处vscode内的editor error warning info颜色都有做修改
+export const editorErrorBackground = registerColor(
+  'editorError.background',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize(
+    'editorError.background',
+    'Background color of error text in the editor. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+
+export const editorErrorForeground = registerColor(
+  'editorError.foreground',
+  { dark: '#F14C4C', light: '#E51400', hcDark: '#F48771', hcLight: '#B5200D' },
+  localize('editorError.foreground', 'Foreground color of error squigglies in the editor.'),
+);
+export const editorErrorBorder = registerColor(
+  'editorError.border',
+  {
+    dark: null,
+    light: null,
+    hcDark: Color.fromHex('#E47777').transparent(0.8),
+    hcLight: '#B5200D',
+  },
+  localize('errorBorder', 'Border color of error boxes in the editor.'),
+);
+export const editorWarningBackground = registerColor(
+  'editorWarning.background',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize(
+    'editorWarning.background',
+    'Background color of warning text in the editor. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+
+export const editorWarningForeground = registerColor(
+  'editorWarning.foreground',
+  { dark: '#CCA700', light: '#BF8803', hcDark: '#FFD37', hcLight: '#895503' },
+  localize('editorWarning.foreground', 'Foreground color of warning squigglies in the editor.'),
+);
+export const editorWarningBorder = registerColor(
+  'editorWarning.border',
+  {
+    dark: null,
+    light: null,
+    hcDark: Color.fromHex('#FFCC00').transparent(0.8),
+    hcLight: '#',
+  },
+  localize('warningBorder', 'Border color of warning boxes in the editor.'),
+);
+
+export const editorInfoForeground = registerColor(
+  'editorInfo.foreground',
+  { dark: '#3794FF', light: '#1a85ff', hcDark: '#3794FF', hcLight: '#1a85ff' },
+  localize('editorInfo.foreground', 'Foreground color of info squigglies in the editor.'),
+);
+export const editorInfoBorder = registerColor(
+  'editorInfo.border',
+  {
+    dark: null,
+    light: null,
+    hcDark: Color.fromHex('#3794FF').transparent(0.8),
+    hcLight: '#292929',
+  },
+  localize('infoBorder', 'Border color of info boxes in the editor.'),
+);
+export const editorInfoBackground = registerColor(
+  'editorInfo.background',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize(
+    'editorInfo.background',
+    'Background color of info text in the editor. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+
+export const editorHintForeground = registerColor(
+  'editorHint.foreground',
+  { dark: Color.fromHex('#eeeeee').transparent(0.7), light: '#6c6c6c', hcDark: null, hcLight: null },
+  localize('editorHint.foreground', 'Foreground color of hint squigglies in the editor.'),
+);
+export const editorHintBorder = registerColor(
+  'editorHint.border',
+  { dark: null, light: null, hcDark: Color.fromHex('#eeeeee').transparent(0.8), hcLight: '#292929' },
+  localize('hintBorder', 'Border color of hint boxes in the editor.'),
+);
+
+export const editorBackground = registerColor(
+  'editor.background',
+  { light: '#ffffff', dark: '#1E1E1E', hcDark: Color.black, hcLight: Color.white },
+  localize('editorBackground', 'Editor background color.'),
+);
+
+/**
+ * Editor foreground color.
+ */
+export const editorForeground = registerColor(
+  'editor.foreground',
+  { light: '#333333', dark: '#BBBBBB', hcDark: Color.white, hcLight: foreground },
+  localize('editorForeground', 'Editor default foreground color.'),
+);
+
+/**
+ * Editor widgets
+ */
+export const editorWidgetForeground = registerColor(
+  'editorWidget.foreground',
+  { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground },
+  localize('editorWidgetForeground', 'Foreground color of editor widgets, such as find/replace.'),
+);
+export const editorWidgetBackground = registerColor(
+  'editorWidget.background',
+  { dark: '#252526', light: '#F3F3F3', hcDark: '#0C141F', hcLight: Color.white },
+  localize('editorWidgetBackground', 'Background color of editor widgets, such as find/replace.'),
+);
+export const editorWidgetBorder = registerColor(
+  'editorWidget.border',
+  { dark: '#454545', light: '#C8C8C8', hcDark: contrastBorder, hcLight: contrastBorder },
+  localize(
+    'editorWidgetBorder',
+    'Border color of editor widgets. The color is only used if the widget chooses to have a border and if the color is not overridden by a widget.',
+  ),
+);
+
+export const editorWidgetResizeBorder = registerColor(
+  'editorWidget.resizeBorder',
+  { light: null, dark: null, hcDark: null, hcLight: null },
+  localize(
+    'editorWidgetResizeBorder',
+    'Border color of the resize bar of editor widgets. The color is only used if the widget chooses to have a resize border and if the color is not overridden by a widget.',
+  ),
+);
+
+/**
+ * Editor selection colors.
+ */
+export const editorSelectionBackground = registerColor(
+  'editor.selectionBackground',
+  { light: '#ADD6FF', dark: '#264F78', hcDark: '#f3f518', hcLight: '#0F4A85' },
+  localize('editorSelectionBackground', 'Color of the editor selection.'),
+);
+export const editorSelectionForeground = registerColor(
+  'editor.selectionForeground',
+  { light: null, dark: null, hcDark: '#000000', hcLight: Color.white },
+  localize('editorSelectionForeground', 'Color of the selected text for high contrast.'),
+);
+export const editorInactiveSelection = registerColor(
+  'editor.inactiveSelectionBackground',
+  {
+    light: transparent(editorSelectionBackground, 0.5),
+    dark: transparent(editorSelectionBackground, 0.5),
+    hcDark: transparent(editorSelectionBackground, 0.7),
+    hcLight: transparent(editorSelectionBackground, 0.5),
+  },
+  localize(
+    'editorInactiveSelection',
+    'Color of the selection in an inactive editor. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+export const editorSelectionHighlight = registerColor(
+  'editor.selectionHighlightBackground',
+  {
+    light: lessProminent(editorSelectionBackground, editorBackground, 0.3, 0.6),
+    dark: lessProminent(editorSelectionBackground, editorBackground, 0.3, 0.6),
+    hcDark: null,
+    hcLight: null,
+  },
+  localize(
+    'editorSelectionHighlight',
+    'Color for regions with the same content as the selection. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+export const editorSelectionHighlightBorder = registerColor(
+  'editor.selectionHighlightBorder',
+  { light: null, dark: null, hcDark: activeContrastBorder, hcLight: activeContrastBorder },
+  localize('editorSelectionHighlightBorder', 'Border color for regions with the same content as the selection.'),
+);
+
+/**
+ * Editor find match colors.
+ */
+export const editorFindMatch = registerColor(
+  'editor.findMatchBackground',
+  { light: '#A8AC94', dark: '#515C6A', hcDark: null, hcLight: null },
+  localize('editorFindMatch', 'Color of the current search match.'),
+);
+export const editorFindMatchHighlight = registerColor(
+  'editor.findMatchHighlightBackground',
+  { light: '#EA5C0055', dark: '#EA5C0055', hcDark: '#EA5C0055', hcLight: '#EA5C0055' },
+  localize(
+    'findMatchHighlight',
+    'Color of the other search matches. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+export const editorFindRangeHighlight = registerColor(
+  'editor.findRangeHighlightBackground',
+  { dark: '#3a3d4166', light: '#b4b4b44d', hcDark: null, hcLight: null },
+  localize(
+    'findRangeHighlight',
+    'Color of the range limiting the search. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+export const editorFindMatchBorder = registerColor(
+  'editor.findMatchBorder',
+  { light: null, dark: null, hcDark: activeContrastBorder, hcLight: activeContrastBorder },
+  localize('editorFindMatchBorder', 'Border color of the current search match.'),
+);
+export const editorFindMatchHighlightBorder = registerColor(
+  'editor.findMatchHighlightBorder',
+  { light: null, dark: null, hcDark: activeContrastBorder, hcLight: activeContrastBorder },
+  localize('findMatchHighlightBorder', 'Border color of the other search matches.'),
+);
+export const editorFindRangeHighlightBorder = registerColor(
+  'editor.findRangeHighlightBorder',
+  {
+    dark: null,
+    light: null,
+    hcDark: transparent(activeContrastBorder, 0.4),
+    hcLight: transparent(activeContrastBorder, 0.4),
+  },
+  localize(
+    'findRangeHighlightBorder',
+    'Border color of the range limiting the search. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+/**
+ * Search Editor query match colors.
+ *
+ * Distinct from normal editor find match to allow for better differentiation
+ */
+export const searchEditorFindMatch = registerColor(
+  'searchEditor.findMatchBackground',
+  {
+    light: transparent(editorFindMatchHighlight, 0.66),
+    dark: transparent(editorFindMatchHighlight, 0.66),
+    hcDark: editorFindMatchHighlight,
+    hcLight: editorFindMatchHighlight,
+  },
+  localize('searchEditor.queryMatch', 'Color of the Search Editor query matches.'),
+);
+export const searchEditorFindMatchBorder = registerColor(
+  'searchEditor.findMatchBorder',
+  {
+    light: transparent(editorFindMatchHighlightBorder, 0.66),
+    dark: transparent(editorFindMatchHighlightBorder, 0.66),
+    hcDark: editorFindMatchHighlightBorder,
+    hcLight: editorFindMatchHighlightBorder,
+  },
+  localize('searchEditor.editorFindMatchBorder', 'Border color of the Search Editor query matches.'),
+);
+
+/**
+ * Editor hover
+ */
+export const editorHoverHighlight = registerColor(
+  'editor.hoverHighlightBackground',
+  { light: '#ADD6FF26', dark: '#264f7840', hcDark: '#ADD6FF26', hcLight: null },
+  localize(
+    'hoverHighlight',
+    'Highlight below the word for which a hover is shown. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+export const editorHoverBackground = registerColor(
+  'editorHoverWidget.background',
+  {
+    light: editorWidgetBackground,
+    dark: editorWidgetBackground,
+    hcDark: editorWidgetBackground,
+    hcLight: editorWidgetBackground,
+  },
+  localize('hoverBackground', 'Background color of the editor hover.'),
+);
+export const editorHoverForeground = registerColor(
+  'editorHoverWidget.foreground',
+  {
+    light: editorWidgetForeground,
+    dark: editorWidgetForeground,
+    hcDark: editorWidgetForeground,
+    hcLight: editorWidgetForeground,
+  },
+  localize('hoverForeground', 'Foreground color of the editor hover.'),
+);
+
+export const editorHoverBorder = registerColor(
+  'editorHoverWidget.border',
+  { light: editorWidgetBorder, dark: editorWidgetBorder, hcDark: editorWidgetBorder, hcLight: editorWidgetBorder },
+  localize('hoverBorder', 'Border color of the editor hover.'),
+);
+export const editorHoverStatusBarBackground = registerColor(
+  'editorHoverWidget.statusBarBackground',
+  {
+    dark: lighten(editorHoverBackground, 0.2),
+    light: darken(editorHoverBackground, 0.05),
+    hcDark: editorWidgetBackground,
+    hcLight: editorWidgetBackground,
+  },
+  localize('statusBarBackground', 'Background color of the editor hover status bar.'),
+);
+
+/**
+ * Editor link colors
+ */
+export const editorActiveLinkForeground = registerColor(
+  'editorLink.activeForeground',
+  { dark: '#4E94CE', light: Color.blue, hcDark: Color.cyan, hcLight: '#292929' },
+  localize('activeLinkForeground', 'Color of active links.'),
+);
+
+/**
+ * Diff Editor Colors
+ */
+export const defaultInsertColor = new Color(new RGBA(155, 185, 85, 0.2));
+export const defaultRemoveColor = new Color(new RGBA(255, 0, 0, 0.2));
+export const diffInserted = registerColor(
+  'diffEditor.insertedTextBackground',
+  { dark: defaultInsertColor, light: defaultInsertColor, hcDark: null, hcLight: null },
+  localize(
+    'diffEditorInserted',
+    'Background color for text that got inserted. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+export const diffRemoved = registerColor(
+  'diffEditor.removedTextBackground',
+  { dark: '#ff000066', light: '#ff00004d', hcDark: null, hcLight: null },
+  localize(
+    'diffEditorRemoved',
+    'Background color for text that got removed. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+
+export const diffInsertedLine = registerColor(
+  'diffEditor.insertedLineBackground',
+  { dark: defaultInsertColor, light: defaultInsertColor, hcDark: null, hcLight: null },
+  localize(
+    'diffEditorInsertedLines',
+    'Background color for lines that got inserted. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+export const diffRemovedLine = registerColor(
+  'diffEditor.removedLineBackground',
+  { dark: defaultRemoveColor, light: defaultRemoveColor, hcDark: null, hcLight: null },
+  localize(
+    'diffEditorRemovedLines',
+    'Background color for lines that got removed. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+
+export const diffInsertedLineGutter = registerColor(
+  'diffEditorGutter.insertedLineBackground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('diffEditorInsertedLineGutter', 'Background color for the margin where lines got inserted.'),
+);
+export const diffRemovedLineGutter = registerColor(
+  'diffEditorGutter.removedLineBackground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('diffEditorRemovedLineGutter', 'Background color for the margin where lines got removed.'),
+);
+
+export const diffOverviewRulerInserted = registerColor(
+  'diffEditorOverview.insertedForeground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('diffEditorOverviewInserted', 'Diff overview ruler foreground for inserted content.'),
+);
+export const diffOverviewRulerRemoved = registerColor(
+  'diffEditorOverview.removedForeground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('diffEditorOverviewRemoved', 'Diff overview ruler foreground for removed content.'),
+);
+
+export const diffInsertedOutline = registerColor(
+  'diffEditor.insertedTextBorder',
+  { dark: null, light: null, hcDark: '#33ff2eff', hcLight: '#374E06' },
+  localize('diffEditorInsertedOutline', 'Outline color for the text that got inserted.'),
+);
+export const diffRemovedOutline = registerColor(
+  'diffEditor.removedTextBorder',
+  { dark: null, light: null, hcDark: '#FF008F', hcLight: '#AD0707' },
+  localize('diffEditorRemovedOutline', 'Outline color for text that got removed.'),
+);
+
+export const diffBorder = registerColor(
+  'diffEditor.border',
+  { dark: null, light: null, hcDark: contrastBorder, hcLight: contrastBorder },
+  localize('diffEditorBorder', 'Border color between the two text editors.'),
+);
+export const diffDiagonalFill = registerColor(
+  'diffEditor.diagonalFill',
+  { dark: '#cccccc33', light: '#22222233', hcDark: null, hcLight: null },
+  localize(
+    'diffDiagonalFill',
+    "Color of the diff editor's diagonal fill. The diagonal fill is used in side-by-side diff views.",
+  ),
+);
+
+/**
+ * Merge Editor Colors
+ */
+export const defaultMergeEditorInsertColor = new Color(new RGBA(122, 255, 31, 0.12));
+export const defaultMergeEditorRemoveColor = new Color(new RGBA(255, 21, 33, 0.12));
+export const defaultMergeEditorModifyColor = new Color(new RGBA(255, 186, 29, 0.12));
+export const mergeEditorInserted = registerColor(
+  'mergeEditor.insertedBackground',
+  { dark: defaultMergeEditorInsertColor, light: defaultMergeEditorInsertColor, hcDark: null, hcLight: null },
+  '',
+  true,
+);
+export const mergeEditorRemoved = registerColor(
+  'mergeEditor.removedBackground',
+  { dark: defaultMergeEditorRemoveColor, light: defaultMergeEditorRemoveColor, hcDark: null, hcLight: null },
+  '',
+  true,
+);
+export const mergeEditorModify = registerColor(
+  'mergeEditor.modifyBackground',
+  { dark: defaultMergeEditorModifyColor, light: defaultMergeEditorModifyColor, hcDark: null, hcLight: null },
+  '',
+  true,
+);
+export const mergeEditorInnerCharInserted = registerColor(
+  'mergeEditor.insertedInnerCharColor',
+  {
+    dark: transparent(defaultMergeEditorInsertColor, 1),
+    light: transparent(defaultMergeEditorInsertColor, 1),
+    hcDark: null,
+    hcLight: null,
+  },
+  '',
+  true,
+);
+export const mergeEditorInnerCharRemoved = registerColor(
+  'mergeEditor.removedInnerCharColor',
+  {
+    dark: transparent(defaultMergeEditorRemoveColor, 1),
+    light: transparent(defaultMergeEditorRemoveColor, 1),
+    hcDark: null,
+    hcLight: null,
+  },
+  '',
+  true,
+);
+export const mergeEditorInnerCharModify = registerColor(
+  'mergeEditor.modifyInnerCharColor',
+  {
+    dark: transparent(defaultMergeEditorModifyColor, 1),
+    light: transparent(defaultMergeEditorModifyColor, 1),
+    hcDark: null,
+    hcLight: null,
+  },
+  '',
+  true,
+);
+
+/**
+ * Editor View Colors from editorColorRegistry
+ */
+export const editorLineHighlight = registerColor(
+  'editor.lineHighlightBackground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('lineHighlight', 'Background color for the highlight of line at the cursor position.'),
+);
+export const editorLineHighlightBorder = registerColor(
+  'editor.lineHighlightBorder',
+  { dark: '#282828', light: '#eeeeee', hcDark: '#f38518', hcLight: contrastBorder },
+  localize('lineHighlightBorderBox', 'Background color for the border around the line at the cursor position.'),
+);
+export const editorRangeHighlight = registerColor(
+  'editor.rangeHighlightBackground',
+  { dark: '#ffffff0b', light: '#fdff0033', hcDark: null, hcLight: null },
+  localize(
+    'rangeHighlight',
+    'Background color of highlighted ranges, like by quick open and find features. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+export const editorRangeHighlightBorder = registerColor(
+  'editor.rangeHighlightBorder',
+  { dark: null, light: null, hcDark: activeContrastBorder, hcLight: activeContrastBorder },
+  localize('rangeHighlightBorder', 'Background color of the border around highlighted ranges.'),
+  true,
+);
+export const editorSymbolHighlight = registerColor(
+  'editor.symbolHighlightBackground',
+  { dark: editorFindMatchHighlight, light: editorFindMatchHighlight, hcDark: null, hcLight: null },
+  localize(
+    'symbolHighlight',
+    'Background color of highlighted symbol, like for go to definition or go next/previous symbol. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+export const editorSymbolHighlightBorder = registerColor(
+  'editor.symbolHighlightBorder',
+  { dark: null, light: null, hcDark: activeContrastBorder, hcLight: activeContrastBorder },
+  localize('symbolHighlightBorder', 'Background color of the border around highlighted symbols.'),
+  true,
+);
+
+export const editorCursorForeground = registerColor(
+  'editorCursor.foreground',
+  { dark: '#AEAFAD', light: Color.black, hcDark: Color.white, hcLight: '#0F4A85' },
+  localize('caret', 'Color of the editor cursor.'),
+);
+export const editorCursorBackground = registerColor(
+  'editorCursor.background',
+  null,
+  localize(
+    'editorCursorBackground',
+    'The background color of the editor cursor. Allows customizing the color of a character overlapped by a block cursor.',
+  ),
+);
+export const editorWhitespaces = registerColor(
+  'editorWhitespace.foreground',
+  { dark: '#e3e4e229', light: '#33333333', hcDark: '#e3e4e229', hcLight: '#CCCCCC' },
+  localize('editorWhitespaces', 'Color of whitespace characters in the editor.'),
+);
+export const editorIndentGuides = registerColor(
+  'editorIndentGuide.background',
+  { dark: editorWhitespaces, light: editorWhitespaces, hcDark: editorWhitespaces, hcLight: editorWhitespaces },
+  localize('editorIndentGuides', 'Color of the editor indentation guides.'),
+);
+export const editorActiveIndentGuides = registerColor(
+  'editorIndentGuide.activeBackground',
+  { dark: editorWhitespaces, light: editorWhitespaces, hcDark: editorWhitespaces, hcLight: editorWhitespaces },
+  localize('editorActiveIndentGuide', 'Color of the active editor indentation guides.'),
+);
+export const editorLineNumbers = registerColor(
+  'editorLineNumber.foreground',
+  { dark: '#858585', light: '#237893', hcDark: Color.white, hcLight: '#292929' },
+  localize('editorLineNumbers', 'Color of editor line numbers.'),
+);
+
+const deprecatedEditorActiveLineNumber = registerColor(
+  'editorActiveLineNumber.foreground',
+  { dark: '#c6c6c6', light: '#0B216F', hcDark: activeContrastBorder, hcLight: activeContrastBorder },
+  localize('editorActiveLineNumber', 'Color of editor active line number'),
+  false,
+  localize('deprecatedEditorActiveLineNumber', "Id is deprecated. Use 'editorLineNumber.activeForeground' instead."),
+);
+export const editorActiveLineNumber = registerColor(
+  'editorLineNumber.activeForeground',
+  {
+    dark: deprecatedEditorActiveLineNumber,
+    light: deprecatedEditorActiveLineNumber,
+    hcDark: deprecatedEditorActiveLineNumber,
+    hcLight: deprecatedEditorActiveLineNumber,
+  },
+  localize('editorActiveLineNumber', 'Color of editor active line number'),
+);
+
+export const editorRuler = registerColor(
+  'editorRuler.foreground',
+  { dark: '#5A5A5A', light: Color.lightgrey, hcDark: Color.white, hcLight: '#292929' },
+  localize('editorRuler', 'Color of the editor rulers.'),
+);
+
+export const editorCodeLensForeground = registerColor(
+  'editorCodeLens.foreground',
+  { dark: '#999999', light: '#919191', hcDark: '#999999', hcLight: '#292929' },
+  localize('editorCodeLensForeground', 'Foreground color of editor CodeLens'),
+);
+
+export const editorBracketMatchBackground = registerColor(
+  'editorBracketMatch.background',
+  { dark: '#0064001a', light: '#0064001a', hcDark: '#0064001a', hcLight: '#0000' },
+  localize('editorBracketMatchBackground', 'Background color behind matching brackets'),
+);
+export const editorBracketMatchBorder = registerColor(
+  'editorBracketMatch.border',
+  { dark: '#888', light: '#B9B9B9', hcDark: contrastBorder, hcLight: contrastBorder },
+  localize('editorBracketMatchBorder', 'Color for matching brackets boxes'),
+);
+
+export const editorOverviewRulerBorder = registerColor(
+  'editorOverviewRuler.border',
+  { dark: '#7f7f7f4d', light: '#7f7f7f4d', hcDark: '#7f7f7f4d', hcLight: '#666666' },
+  localize('editorOverviewRulerBorder', 'Color of the overview ruler border.'),
+);
+export const editorOverviewRulerBackground = registerColor(
+  'editorOverviewRuler.background',
+  null,
+  localize(
+    'editorOverviewRulerBackground',
+    'Background color of the editor overview ruler. Only used when the minimap is enabled and placed on the right side of the editor.',
+  ),
+);
+
+export const editorGutter = registerColor(
+  'editorGutter.background',
+  { dark: editorBackground, light: editorBackground, hcDark: editorBackground, hcLight: editorBackground },
+  localize(
+    'editorGutter',
+    'Background color of the editor gutter. The gutter contains the glyph margins and the line numbers.',
+  ),
+);
+export const overviewRulerCommentingRangeForeground = registerColor(
+  'editorGutter.commentRangeForeground',
+  {
+    dark: listInactiveSelectionBackground,
+    light: darken(listInactiveSelectionBackground, 0.05),
+    hcDark: Color.white,
+    hcLight: Color.black,
+  },
+  localize('editorGutterCommentRangeForeground', 'Editor gutter decoration color for commenting ranges.'),
+);
+export const editorUnnecessaryCodeBorder = registerColor(
+  'editorUnnecessaryCode.border',
+  { dark: null, light: null, hcDark: Color.fromHex('#fff').transparent(0.8), hcLight: contrastBorder },
+  localize('unnecessaryCodeBorder', 'Border color of unnecessary (unused) source code in the editor.'),
+);
+export const editorUnnecessaryCodeOpacity = registerColor(
+  'editorUnnecessaryCode.opacity',
+  { dark: Color.fromHex('#000a'), light: Color.fromHex('#0007'), hcDark: null, hcLight: null },
+  localize(
+    'unnecessaryCodeOpacity',
+    'Opacity of unnecessary (unused) source code in the editor. For example, "#000000c0" will render the code with 75% opacity. For high contrast themes, use the  \'editorUnnecessaryCode.border\' theme color to underline unnecessary code instead of fading it out.',
+  ),
+);
+
+const rulerRangeDefault = new Color(new RGBA(0, 122, 204, 0.6));
+export const overviewRulerRangeHighlight = registerColor(
+  'editorOverviewRuler.rangeHighlightForeground',
+  { dark: rulerRangeDefault, light: rulerRangeDefault, hcDark: rulerRangeDefault, hcLight: rulerRangeDefault },
+  localize(
+    'overviewRulerRangeHighlight',
+    'Overview ruler marker color for range highlights. The color must not be opaque so as not to hide underlying decorations.',
+  ),
+  true,
+);
+export const overviewRulerError = registerColor(
+  'editorOverviewRuler.errorForeground',
+  {
+    dark: new Color(new RGBA(255, 18, 18, 0.7)),
+    light: new Color(new RGBA(255, 18, 18, 0.7)),
+    hcDark: new Color(new RGBA(255, 50, 50, 1)),
+    hcLight: '#B5200D',
+  },
+  localize('overviewRuleError', 'Overview ruler marker color for errors.'),
+);
+export const overviewRulerWarning = registerColor(
+  'editorOverviewRuler.warningForeground',
+  {
+    dark: editorWarningForeground,
+    light: editorWarningForeground,
+    hcDark: editorWarningBorder,
+    hcLight: editorWarningBorder,
+  },
+  localize('overviewRuleWarning', 'Overview ruler marker color for warnings.'),
+);
+export const overviewRulerInfo = registerColor(
+  'editorOverviewRuler.infoForeground',
+  { dark: editorInfoForeground, light: editorInfoForeground, hcDark: editorInfoBorder, hcLight: editorInfoBorder },
+  localize('overviewRuleInfo', 'Overview ruler marker color for infos.'),
+);
+
+// < --- Editors --- >
+
+export const EDITOR_PANE_BACKGROUND = registerColor(
+  'editorPane.background',
+  {
+    dark: editorBackground,
+    light: editorBackground,
+    hcDark: editorBackground,
+    hcLight: editorBackground,
+  },
+  localize(
+    'editorPaneBackground',
+    'Background color of the editor pane visible on the left and right side of the centered editor layout.',
+  ),
+);
+
+export const EDITOR_GROUP_EMPTY_BACKGROUND = registerColor(
+  'editorGroup.emptyBackground',
+  {
+    dark: null,
+    light: null,
+    hcDark: null,
+    hcLight: null,
+  },
+  localize(
+    'editorGroupEmptyBackground',
+    'Background color of an empty editor group. Editor groups are the containers of editors.',
+  ),
+);
+
+export const EDITOR_GROUP_FOCUSED_EMPTY_BORDER = registerColor(
+  'editorGroup.focusedEmptyBorder',
+  {
+    dark: null,
+    light: null,
+    hcDark: focusBorder,
+    hcLight: focusBorder,
+  },
+  localize(
+    'editorGroupFocusedEmptyBorder',
+    'Border color of an empty editor group that is focused. Editor groups are the containers of editors.',
+  ),
+);
+
+export const EDITOR_GROUP_HEADER_TABS_BACKGROUND = registerColor(
+  'editorGroupHeader.tabsBackground',
+  {
+    dark: '#252526',
+    light: '#F3F3F3',
+    hcDark: '#000000',
+    hcLight: '#ffffff',
+  },
+  localize(
+    'tabsContainerBackground',
+    'Background color of the editor group title header when tabs are enabled. Editor groups are the containers of editors.',
+  ),
+);
+
+export const EDITOR_GROUP_HEADER_TABS_BORDER = registerColor(
+  'editorGroupHeader.tabsBorder',
+  {
+    dark: null,
+    light: null,
+    hcDark: null,
+    hcLight: null,
+  },
+  localize(
+    'tabsContainerBorder',
+    'Border color of the editor group title header when tabs are enabled. Editor groups are the containers of editors.',
+  ),
+);
+
+export const EDITOR_GROUP_HEADER_NO_TABS_BACKGROUND = registerColor(
+  'editorGroupHeader.noTabsBackground',
+  {
+    dark: editorBackground,
+    light: editorBackground,
+    hcDark: editorBackground,
+    hcLight: editorBackground,
+  },
+  localize(
+    'editorGroupHeaderBackground',
+    'Background color of the editor group title header when tabs are disabled (`"workbench.editor.showTabs": false`). Editor groups are the containers of editors.',
+  ),
+);
+
+export const EDITOR_GROUP_HEADER_BORDER = registerColor(
+  'editorGroupHeader.border',
+  {
+    dark: null,
+    light: null,
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'editorTitleContainerBorder',
+    'Border color of the editor group title header. Editor groups are the containers of editors.',
+  ),
+);
+
+export const EDITOR_GROUP_BORDER = registerColor(
+  'editorGroup.border',
+  {
+    dark: '#444444',
+    light: '#E7E7E7',
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'editorGroupBorder',
+    'Color to separate multiple editor groups from each other. Editor groups are the containers of editors.',
+  ),
+);
+
+export const EDITOR_DRAG_AND_DROP_BACKGROUND = registerColor(
+  'editorGroup.dropBackground',
+  {
+    dark: Color.fromHex('#53595D').transparent(0.5),
+    light: Color.fromHex('#2677CB').transparent(0.18),
+    hcDark: null,
+    hcLight: Color.fromHex('#0F4A85').transparent(0.5),
+  },
+  localize(
+    'editorDragAndDropBackground',
+    'Background color when dragging editors around. The color should have transparency so that the editor contents can still shine through.',
+  ),
+);
+
+export const EDITOR_DROP_INTO_PROMPT_FOREGROUND = registerColor(
+  'editorGroup.dropIntoPromptForeground',
+  {
+    dark: editorWidgetForeground,
+    light: editorWidgetForeground,
+    hcDark: editorWidgetForeground,
+    hcLight: editorWidgetForeground,
+  },
+  localize(
+    'editorDropIntoPromptForeground',
+    'Foreground color of text shown over editors when dragging files. This text informs the user that they can hold shift to drop into the editor.',
+  ),
+);
+
+export const EDITOR_DROP_INTO_PROMPT_BACKGROUND = registerColor(
+  'editorGroup.dropIntoPromptBackground',
+  {
+    dark: editorWidgetBackground,
+    light: editorWidgetBackground,
+    hcDark: editorWidgetBackground,
+    hcLight: editorWidgetBackground,
+  },
+  localize(
+    'editorDropIntoPromptBackground',
+    'Background color of text shown over editors when dragging files. This text informs the user that they can hold shift to drop into the editor.',
+  ),
+);
+
+export const EDITOR_DROP_INTO_PROMPT_BORDER = registerColor(
+  'editorGroup.dropIntoPromptBorder',
+  {
+    dark: null,
+    light: null,
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'editorDropIntoPromptBorder',
+    'Border color of text shown over editors when dragging files. This text informs the user that they can hold shift to drop into the editor.',
+  ),
+);
+
+export const SIDE_BY_SIDE_EDITOR_HORIZONTAL_BORDER = registerColor(
+  'sideBySideEditor.horizontalBorder',
+  {
+    dark: EDITOR_GROUP_BORDER,
+    light: EDITOR_GROUP_BORDER,
+    hcDark: EDITOR_GROUP_BORDER,
+    hcLight: EDITOR_GROUP_BORDER,
+  },
+  localize(
+    'sideBySideEditor.horizontalBorder',
+    'Color to separate two editors from each other when shown side by side in an editor group from top to bottom.',
+  ),
+);
+
+export const SIDE_BY_SIDE_EDITOR_VERTICAL_BORDER = registerColor(
+  'sideBySideEditor.verticalBorder',
+  {
+    dark: EDITOR_GROUP_BORDER,
+    light: EDITOR_GROUP_BORDER,
+    hcDark: EDITOR_GROUP_BORDER,
+    hcLight: EDITOR_GROUP_BORDER,
+  },
+  localize(
+    'sideBySideEditor.verticalBorder',
+    'Color to separate two editors from each other when shown side by side in an editor group from left to right.',
+  ),
+);
+
+/**
+ * Inline hints
+ */
+export const editorInlayHintForeground = registerColor(
+  'editorInlayHint.foreground',
+  {
+    dark: transparent(badgeForeground, 0.8),
+    light: transparent(badgeForeground, 0.8),
+    hcDark: badgeForeground,
+    hcLight: badgeForeground,
+  },
+  localize('editorInlayHintForeground', 'Foreground color of inline hints'),
+);
+export const editorInlayHintBackground = registerColor(
+  'editorInlayHint.background',
+  {
+    dark: transparent(badgeBackground, 0.6),
+    light: transparent(badgeBackground, 0.3),
+    hcDark: badgeBackground,
+    hcLight: badgeBackground,
+  },
+  localize('editorInlayHintBackground', 'Background color of inline hints'),
+);
+export const editorInlayHintTypeForeground = registerColor(
+  'editorInlayHint.typeForeground',
+  {
+    dark: editorInlayHintForeground,
+    light: editorInlayHintForeground,
+    hcDark: editorInlayHintForeground,
+    hcLight: editorInlayHintForeground,
+  },
+  localize('editorInlayHintForegroundTypes', 'Foreground color of inline hints for types'),
+);
+export const editorInlayHintTypeBackground = registerColor(
+  'editorInlayHint.typeBackground',
+  {
+    dark: editorInlayHintBackground,
+    light: editorInlayHintBackground,
+    hcDark: editorInlayHintBackground,
+    hcLight: editorInlayHintBackground,
+  },
+  localize('editorInlayHintBackgroundTypes', 'Background color of inline hints for types'),
+);
+export const editorInlayHintParameterForeground = registerColor(
+  'editorInlayHint.parameterForeground',
+  {
+    dark: editorInlayHintForeground,
+    light: editorInlayHintForeground,
+    hcDark: editorInlayHintForeground,
+    hcLight: editorInlayHintForeground,
+  },
+  localize('editorInlayHintForegroundParameter', 'Foreground color of inline hints for parameters'),
+);
+export const editorInlayHintParameterBackground = registerColor(
+  'editorInlayHint.parameterBackground',
+  {
+    dark: editorInlayHintBackground,
+    light: editorInlayHintBackground,
+    hcDark: editorInlayHintBackground,
+    hcLight: editorInlayHintBackground,
+  },
+  localize('editorInlayHintBackgroundParameter', 'Background color of inline hints for parameters'),
+);
+
+export const editorImagePreviewBackground = registerColor(
+  'editorImagePreview.background',
+  {
+    dark: new Color(new RGBA(20, 20, 20)),
+    light: new Color(new RGBA(230, 230, 230)),
+    hcLight: new Color(new RGBA(230, 230, 230)),
+    hcDark: new Color(new RGBA(20, 20, 20)),
+  },
+  localize('editorImagePreviewBackground', 'Background color of image preview editor.'),
+);