@opensumi/ide-theme 2.21.13 → 2.22.0

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

@@ -0,0 +1,126 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color, RGBA } from '../../common/color';
+import { registerColor, transparent } from '../utils';
+
+import { checkboxBackground, checkboxBorder, checkboxForeground } from './checkbox';
+import { selectBackground, selectForeground, selectBorder } from './dropdown';
+import { editorWidgetBorder } from './editor';
+import { inputBackground, inputForeground, inputBorder } from './input';
+import { listHoverBackground } from './list-tree';
+import { PANEL_BORDER } from './panel';
+
+// Enum control colors
+export const settingsSelectBackground = registerColor(
+  'settings.dropdownBackground',
+  { dark: selectBackground, light: selectBackground, hcDark: selectBackground, hcLight: selectBackground },
+  localize('settingsDropdownBackground', 'Settings editor dropdown background.'),
+);
+export const settingsSelectForeground = registerColor(
+  'settings.dropdownForeground',
+  { dark: selectForeground, light: selectForeground, hcDark: selectForeground, hcLight: selectForeground },
+  localize('settingsDropdownForeground', 'Settings editor dropdown foreground.'),
+);
+export const settingsSelectBorder = registerColor(
+  'settings.dropdownBorder',
+  { dark: selectBorder, light: selectBorder, hcDark: selectBorder, hcLight: selectBorder },
+  localize('settingsDropdownBorder', 'Settings editor dropdown border.'),
+);
+export const settingsSelectListBorder = registerColor(
+  'settings.dropdownListBorder',
+  { dark: editorWidgetBorder, light: editorWidgetBorder, hcDark: editorWidgetBorder, hcLight: editorWidgetBorder },
+  localize(
+    'settingsDropdownListBorder',
+    'Settings editor dropdown list border. This surrounds the options and separates the options from the description.',
+  ),
+);
+
+// Bool control colors
+export const settingsCheckboxBackground = registerColor(
+  'settings.checkboxBackground',
+  { dark: checkboxBackground, light: checkboxBackground, hcDark: checkboxBackground, hcLight: checkboxBackground },
+  localize('settingsCheckboxBackground', 'Settings editor checkbox background.'),
+);
+export const settingsCheckboxForeground = registerColor(
+  'settings.checkboxForeground',
+  { dark: checkboxForeground, light: checkboxForeground, hcDark: checkboxForeground, hcLight: checkboxForeground },
+  localize('settingsCheckboxForeground', 'Settings editor checkbox foreground.'),
+);
+export const settingsCheckboxBorder = registerColor(
+  'settings.checkboxBorder',
+  { dark: checkboxBorder, light: checkboxBorder, hcDark: checkboxBorder, hcLight: checkboxBorder },
+  localize('settingsCheckboxBorder', 'Settings editor checkbox border.'),
+);
+
+// Text control colors
+export const settingsTextInputBackground = registerColor(
+  'settings.textInputBackground',
+  { dark: inputBackground, light: inputBackground, hcDark: inputBackground, hcLight: inputBackground },
+  localize('textInputBoxBackground', 'Settings editor text input box background.'),
+);
+export const settingsTextInputForeground = registerColor(
+  'settings.textInputForeground',
+  { dark: inputForeground, light: inputForeground, hcDark: inputForeground, hcLight: inputForeground },
+  localize('textInputBoxForeground', 'Settings editor text input box foreground.'),
+);
+export const settingsTextInputBorder = registerColor(
+  'settings.textInputBorder',
+  { dark: inputBorder, light: inputBorder, hcDark: inputBorder, hcLight: inputBorder },
+  localize('textInputBoxBorder', 'Settings editor text input box border.'),
+);
+
+// Number control colors
+export const settingsNumberInputBackground = registerColor(
+  'settings.numberInputBackground',
+  { dark: inputBackground, light: inputBackground, hcDark: inputBackground, hcLight: inputBackground },
+  localize('numberInputBoxBackground', 'Settings editor number input box background.'),
+);
+export const settingsNumberInputForeground = registerColor(
+  'settings.numberInputForeground',
+  { dark: inputForeground, light: inputForeground, hcDark: inputForeground, hcLight: inputForeground },
+  localize('numberInputBoxForeground', 'Settings editor number input box foreground.'),
+);
+export const settingsNumberInputBorder = registerColor(
+  'settings.numberInputBorder',
+  { dark: inputBorder, light: inputBorder, hcDark: inputBorder, hcLight: inputBorder },
+  localize('numberInputBoxBorder', 'Settings editor number input box border.'),
+);
+
+export const focusedRowBackground = registerColor(
+  'settings.focusedRowBackground',
+  {
+    dark: transparent(listHoverBackground, 0.6),
+    light: transparent(listHoverBackground, 0.6),
+    hcDark: null,
+    hcLight: null,
+  },
+  localize('focusedRowBackground', 'The background color of a settings row when focused.'),
+);
+
+export const settingsHeaderForeground = registerColor(
+  'settings.headerForeground',
+  { light: '#444444', dark: '#e7e7e7', hcDark: '#ffffff', hcLight: '#292929' },
+  localize('headerForeground', 'The foreground color for a section header or active title.'),
+);
+
+export const modifiedItemIndicator = registerColor(
+  'settings.modifiedItemIndicator',
+  {
+    light: new Color(new RGBA(102, 175, 224)),
+    dark: new Color(new RGBA(12, 125, 157)),
+    hcDark: new Color(new RGBA(0, 73, 122)),
+    hcLight: new Color(new RGBA(102, 175, 224)),
+  },
+  localize('modifiedItemForeground', 'The color of the modified setting indicator.'),
+);
+
+export const settingsHeaderBorder = registerColor(
+  'settings.headerBorder',
+  { dark: PANEL_BORDER, light: PANEL_BORDER, hcDark: PANEL_BORDER, hcLight: PANEL_BORDER },
+  localize('settingsHeaderBorder', 'The color of the header container border.'),
+);
+export const settingsSashBorder = registerColor(
+  'settings.sashBorder',
+  { dark: PANEL_BORDER, light: PANEL_BORDER, hcDark: PANEL_BORDER, hcLight: PANEL_BORDER },
+  localize('settingsSashBorder', 'The color of the Settings editor splitview sash border.'),
+);

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

@@ -0,0 +1,121 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color } from '../../common/color';
+import { registerColor } from '../utils';
+
+import { contrastBorder } from './base';
+import { EDITOR_DRAG_AND_DROP_BACKGROUND } from './editor';
+
+// < --- Side Bar --- >
+
+export const SIDE_BAR_BACKGROUND = registerColor(
+  'sideBar.background',
+  {
+    dark: '#252526',
+    light: '#F3F3F3',
+    hcDark: '#000000',
+    hcLight: '#FFFFFF',
+  },
+  localize(
+    'sideBarBackground',
+    'Side bar background color. The side bar is the container for views like explorer and search.',
+  ),
+);
+
+export const SIDE_BAR_FOREGROUND = registerColor(
+  'sideBar.foreground',
+  {
+    dark: null,
+    light: null,
+    hcDark: null,
+    hcLight: null,
+  },
+  localize(
+    'sideBarForeground',
+    'Side bar foreground color. The side bar is the container for views like explorer and search.',
+  ),
+);
+
+export const SIDE_BAR_BORDER = registerColor(
+  'sideBar.border',
+  {
+    dark: null,
+    light: null,
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'sideBarBorder',
+    'Side bar border color on the side separating to the editor. The side bar is the container for views like explorer and search.',
+  ),
+);
+
+export const SIDE_BAR_TITLE_FOREGROUND = registerColor(
+  'sideBarTitle.foreground',
+  {
+    dark: SIDE_BAR_FOREGROUND,
+    light: SIDE_BAR_FOREGROUND,
+    hcDark: SIDE_BAR_FOREGROUND,
+    hcLight: SIDE_BAR_FOREGROUND,
+  },
+  localize(
+    'sideBarTitleForeground',
+    'Side bar title foreground color. The side bar is the container for views like explorer and search.',
+  ),
+);
+
+export const SIDE_BAR_DRAG_AND_DROP_BACKGROUND = registerColor(
+  'sideBar.dropBackground',
+  {
+    dark: EDITOR_DRAG_AND_DROP_BACKGROUND,
+    light: EDITOR_DRAG_AND_DROP_BACKGROUND,
+    hcDark: EDITOR_DRAG_AND_DROP_BACKGROUND,
+    hcLight: EDITOR_DRAG_AND_DROP_BACKGROUND,
+  },
+  localize(
+    'sideBarDragAndDropBackground',
+    'Drag and drop feedback color for the side bar sections. The color should have transparency so that the side bar sections can still shine through. The side bar is the container for views like explorer and search. Side bar sections are views nested within the side bar.',
+  ),
+);
+
+export const SIDE_BAR_SECTION_HEADER_BACKGROUND = registerColor(
+  'sideBarSectionHeader.background',
+  {
+    dark: Color.fromHex('#808080').transparent(0.2),
+    light: Color.fromHex('#808080').transparent(0.2),
+    hcDark: null,
+    hcLight: null,
+  },
+  localize(
+    'sideBarSectionHeaderBackground',
+    'Side bar section header background color. The side bar is the container for views like explorer and search. Side bar sections are views nested within the side bar.',
+  ),
+);
+
+export const SIDE_BAR_SECTION_HEADER_FOREGROUND = registerColor(
+  'sideBarSectionHeader.foreground',
+  {
+    dark: SIDE_BAR_FOREGROUND,
+    light: SIDE_BAR_FOREGROUND,
+    hcDark: SIDE_BAR_FOREGROUND,
+    hcLight: SIDE_BAR_FOREGROUND,
+  },
+  localize(
+    'sideBarSectionHeaderForeground',
+    'Side bar section header foreground color. The side bar is the container for views like explorer and search. Side bar sections are views nested within the side bar.',
+  ),
+);
+
+export const SIDE_BAR_SECTION_HEADER_BORDER = registerColor(
+  'sideBarSectionHeader.border',
+  {
+    dark: contrastBorder,
+    light: contrastBorder,
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'sideBarSectionHeaderBorder',
+    'Side bar section header border color. The side bar is the container for views like explorer and search. Side bar sections are views nested within the side bar.',
+  ),
+);

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

@@ -0,0 +1,33 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color, RGBA } from '../../common/color';
+import { registerColor } from '../utils';
+
+/**
+ * Snippet placeholder colors
+ */
+export const snippetTabstopHighlightBackground = registerColor(
+  'editor.snippetTabstopHighlightBackground',
+  {
+    dark: new Color(new RGBA(124, 124, 124, 0.3)),
+    light: new Color(new RGBA(10, 50, 100, 0.2)),
+    hcDark: new Color(new RGBA(124, 124, 124, 0.3)),
+    hcLight: new Color(new RGBA(10, 50, 100, 0.2)),
+  },
+  localize('snippetTabstopHighlightBackground', 'Highlight background color of a snippet tabstop.'),
+);
+export const snippetTabstopHighlightBorder = registerColor(
+  'editor.snippetTabstopHighlightBorder',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('snippetTabstopHighlightBorder', 'Highlight border color of a snippet tabstop.'),
+);
+export const snippetFinalTabstopHighlightBackground = registerColor(
+  'editor.snippetFinalTabstopHighlightBackground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('snippetFinalTabstopHighlightBackground', 'Highlight background color of the final tabstop of a snippet.'),
+);
+export const snippetFinalTabstopHighlightBorder = registerColor(
+  'editor.snippetFinalTabstopHighlightBorder',
+  { dark: '#525252', light: new Color(new RGBA(10, 50, 100, 0.5)), hcDark: '#525252', hcLight: '#292929' },
+  localize('snippetFinalTabstopHighlightBorder', 'Highlight border color of the final tabstop of a snippet.'),
+);

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

@@ -0,0 +1,350 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color } from '../../common/color';
+import { darken, registerColor } from '../utils';
+
+import { ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND } from './activity-bar';
+import { activeContrastBorder, contrastBorder, errorForeground } from './base';
+import { editorForeground, editorWarningForeground } from './editor';
+
+// < --- Status --- >
+
+export const STATUS_BAR_FOREGROUND = registerColor(
+  'statusBar.foreground',
+  {
+    dark: '#FFFFFF',
+    light: '#FFFFFF',
+    hcDark: '#FFFFFF',
+    hcLight: editorForeground,
+  },
+  localize(
+    'statusBarForeground',
+    'Status bar foreground color when a workspace or folder is opened. The status bar is shown in the bottom of the window.',
+  ),
+);
+
+export const STATUS_BAR_NO_FOLDER_FOREGROUND = registerColor(
+  'statusBar.noFolderForeground',
+  {
+    dark: STATUS_BAR_FOREGROUND,
+    light: STATUS_BAR_FOREGROUND,
+    hcDark: STATUS_BAR_FOREGROUND,
+    hcLight: STATUS_BAR_FOREGROUND,
+  },
+  localize(
+    'statusBarNoFolderForeground',
+    'Status bar foreground color when no folder is opened. The status bar is shown in the bottom of the window.',
+  ),
+);
+
+export const STATUS_BAR_BACKGROUND = registerColor(
+  'statusBar.background',
+  {
+    dark: '#007ACC',
+    light: '#007ACC',
+    hcDark: null,
+    hcLight: null,
+  },
+  localize(
+    'statusBarBackground',
+    'Status bar background color when a workspace or folder is opened. The status bar is shown in the bottom of the window.',
+  ),
+);
+
+export const STATUS_BAR_NO_FOLDER_BACKGROUND = registerColor(
+  'statusBar.noFolderBackground',
+  {
+    dark: '#68217A',
+    light: '#68217A',
+    hcDark: null,
+    hcLight: null,
+  },
+  localize(
+    'statusBarNoFolderBackground',
+    'Status bar background color when no folder is opened. The status bar is shown in the bottom of the window.',
+  ),
+);
+
+export const STATUS_BAR_BORDER = registerColor(
+  'statusBar.border',
+  {
+    dark: null,
+    light: null,
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'statusBarBorder',
+    'Status bar border color separating to the sidebar and editor. The status bar is shown in the bottom of the window.',
+  ),
+);
+
+export const STATUS_BAR_FOCUS_BORDER = registerColor(
+  'statusBar.focusBorder',
+  {
+    dark: STATUS_BAR_FOREGROUND,
+    light: STATUS_BAR_FOREGROUND,
+    hcDark: null,
+    hcLight: STATUS_BAR_FOREGROUND,
+  },
+  localize(
+    'statusBarFocusBorder',
+    'Status bar border color when focused on keyboard navigation. The status bar is shown in the bottom of the window.',
+  ),
+);
+
+export const STATUS_BAR_NO_FOLDER_BORDER = registerColor(
+  'statusBar.noFolderBorder',
+  {
+    dark: STATUS_BAR_BORDER,
+    light: STATUS_BAR_BORDER,
+    hcDark: STATUS_BAR_BORDER,
+    hcLight: STATUS_BAR_BORDER,
+  },
+  localize(
+    'statusBarNoFolderBorder',
+    'Status bar border color separating to the sidebar and editor when no folder is opened. The status bar is shown in the bottom of the window.',
+  ),
+);
+
+export const STATUS_BAR_ITEM_ACTIVE_BACKGROUND = registerColor(
+  'statusBarItem.activeBackground',
+  {
+    dark: Color.white.transparent(0.18),
+    light: Color.white.transparent(0.18),
+    hcDark: Color.white.transparent(0.18),
+    hcLight: Color.black.transparent(0.18),
+  },
+  localize(
+    'statusBarItemActiveBackground',
+    'Status bar item background color when clicking. The status bar is shown in the bottom of the window.',
+  ),
+);
+
+export const STATUS_BAR_ITEM_FOCUS_BORDER = registerColor(
+  'statusBarItem.focusBorder',
+  {
+    dark: STATUS_BAR_FOREGROUND,
+    light: STATUS_BAR_FOREGROUND,
+    hcDark: null,
+    hcLight: activeContrastBorder,
+  },
+  localize(
+    'statusBarItemFocusBorder',
+    'Status bar item border color when focused on keyboard navigation. The status bar is shown in the bottom of the window.',
+  ),
+);
+
+export const STATUS_BAR_ITEM_HOVER_BACKGROUND = registerColor(
+  'statusBarItem.hoverBackground',
+  {
+    dark: Color.white.transparent(0.12),
+    light: Color.white.transparent(0.12),
+    hcDark: Color.white.transparent(0.12),
+    hcLight: Color.black.transparent(0.12),
+  },
+  localize(
+    'statusBarItemHoverBackground',
+    'Status bar item background color when hovering. The status bar is shown in the bottom of the window.',
+  ),
+);
+
+export const STATUS_BAR_ITEM_COMPACT_HOVER_BACKGROUND = registerColor(
+  'statusBarItem.compactHoverBackground',
+  {
+    dark: Color.white.transparent(0.2),
+    light: Color.white.transparent(0.2),
+    hcDark: Color.white.transparent(0.2),
+    hcLight: Color.black.transparent(0.2),
+  },
+  localize(
+    'statusBarItemCompactHoverBackground',
+    'Status bar item background color when hovering an item that contains two hovers. The status bar is shown in the bottom of the window.',
+  ),
+);
+
+export const STATUS_BAR_PROMINENT_ITEM_FOREGROUND = registerColor(
+  'statusBarItem.prominentForeground',
+  {
+    dark: STATUS_BAR_FOREGROUND,
+    light: STATUS_BAR_FOREGROUND,
+    hcDark: STATUS_BAR_FOREGROUND,
+    hcLight: STATUS_BAR_FOREGROUND,
+  },
+  localize(
+    'statusBarProminentItemForeground',
+    'Status bar prominent items foreground color. Prominent items stand out from other status bar entries to indicate importance. Change mode `Toggle Tab Key Moves Focus` from command palette to see an example. The status bar is shown in the bottom of the window.',
+  ),
+);
+
+export const STATUS_BAR_PROMINENT_ITEM_BACKGROUND = registerColor(
+  'statusBarItem.prominentBackground',
+  {
+    dark: Color.black.transparent(0.5),
+    light: Color.black.transparent(0.5),
+    hcDark: Color.black.transparent(0.5),
+    hcLight: Color.black.transparent(0.5),
+  },
+  localize(
+    'statusBarProminentItemBackground',
+    'Status bar prominent items background color. Prominent items stand out from other status bar entries to indicate importance. Change mode `Toggle Tab Key Moves Focus` from command palette to see an example. The status bar is shown in the bottom of the window.',
+  ),
+);
+
+export const STATUS_BAR_PROMINENT_ITEM_HOVER_BACKGROUND = registerColor(
+  'statusBarItem.prominentHoverBackground',
+  {
+    dark: Color.black.transparent(0.3),
+    light: Color.black.transparent(0.3),
+    hcDark: Color.black.transparent(0.3),
+    hcLight: null,
+  },
+  localize(
+    'statusBarProminentItemHoverBackground',
+    'Status bar prominent items background color when hovering. Prominent items stand out from other status bar entries to indicate importance. Change mode `Toggle Tab Key Moves Focus` from command palette to see an example. The status bar is shown in the bottom of the window.',
+  ),
+);
+
+export const STATUS_BAR_ERROR_ITEM_BACKGROUND = registerColor(
+  'statusBarItem.errorBackground',
+  {
+    dark: darken(errorForeground, 0.4),
+    light: darken(errorForeground, 0.4),
+    hcDark: null,
+    hcLight: '#B5200D',
+  },
+  localize(
+    'statusBarErrorItemBackground',
+    'Status bar error items background color. Error items stand out from other status bar entries to indicate error conditions. The status bar is shown in the bottom of the window.',
+  ),
+);
+
+export const STATUS_BAR_ERROR_ITEM_FOREGROUND = registerColor(
+  'statusBarItem.errorForeground',
+  {
+    dark: Color.white,
+    light: Color.white,
+    hcDark: Color.white,
+    hcLight: Color.white,
+  },
+  localize(
+    'statusBarErrorItemForeground',
+    'Status bar error items foreground color. Error items stand out from other status bar entries to indicate error conditions. The status bar is shown in the bottom of the window.',
+  ),
+);
+
+export const STATUS_BAR_WARNING_ITEM_BACKGROUND = registerColor(
+  'statusBarItem.warningBackground',
+  {
+    dark: darken(editorWarningForeground, 0.4),
+    light: darken(editorWarningForeground, 0.4),
+    hcDark: null,
+    hcLight: '#895503',
+  },
+  localize(
+    'statusBarWarningItemBackground',
+    'Status bar warning items background color. Warning items stand out from other status bar entries to indicate warning conditions. The status bar is shown in the bottom of the window.',
+  ),
+);
+
+export const STATUS_BAR_WARNING_ITEM_FOREGROUND = registerColor(
+  'statusBarItem.warningForeground',
+  {
+    dark: Color.white,
+    light: Color.white,
+    hcDark: Color.white,
+    hcLight: Color.white,
+  },
+  localize(
+    'statusBarWarningItemForeground',
+    'Status bar warning items foreground color. Warning items stand out from other status bar entries to indicate warning conditions. The status bar is shown in the bottom of the window.',
+  ),
+);
+
+// < --- Remote --- >
+
+export const STATUS_BAR_HOST_NAME_BACKGROUND = registerColor(
+  'statusBarItem.remoteBackground',
+  {
+    dark: ACTIVITY_BAR_BADGE_BACKGROUND,
+    light: ACTIVITY_BAR_BADGE_BACKGROUND,
+    hcDark: ACTIVITY_BAR_BADGE_BACKGROUND,
+    hcLight: ACTIVITY_BAR_BADGE_BACKGROUND,
+  },
+  localize('statusBarItemHostBackground', 'Background color for the remote indicator on the status bar.'),
+);
+
+export const STATUS_BAR_HOST_NAME_FOREGROUND = registerColor(
+  'statusBarItem.remoteForeground',
+  {
+    dark: ACTIVITY_BAR_BADGE_FOREGROUND,
+    light: ACTIVITY_BAR_BADGE_FOREGROUND,
+    hcDark: ACTIVITY_BAR_BADGE_FOREGROUND,
+    hcLight: ACTIVITY_BAR_BADGE_FOREGROUND,
+  },
+  localize('statusBarItemHostForeground', 'Foreground color for the remote indicator on the status bar.'),
+);
+
+export const EXTENSION_BADGE_REMOTE_BACKGROUND = registerColor(
+  'extensionBadge.remoteBackground',
+  {
+    dark: ACTIVITY_BAR_BADGE_BACKGROUND,
+    light: ACTIVITY_BAR_BADGE_BACKGROUND,
+    hcDark: ACTIVITY_BAR_BADGE_BACKGROUND,
+    hcLight: ACTIVITY_BAR_BADGE_BACKGROUND,
+  },
+  localize('extensionBadge.remoteBackground', 'Background color for the remote badge in the extensions view.'),
+);
+
+export const EXTENSION_BADGE_REMOTE_FOREGROUND = registerColor(
+  'extensionBadge.remoteForeground',
+  {
+    dark: ACTIVITY_BAR_BADGE_FOREGROUND,
+    light: ACTIVITY_BAR_BADGE_FOREGROUND,
+    hcDark: ACTIVITY_BAR_BADGE_FOREGROUND,
+    hcLight: ACTIVITY_BAR_BADGE_FOREGROUND,
+  },
+  localize('extensionBadge.remoteForeground', 'Foreground color for the remote badge in the extensions view.'),
+);
+
+export const STATUS_BAR_DEBUGGING_BACKGROUND = registerColor(
+  'statusBar.debuggingBackground',
+  {
+    dark: '#CC6633',
+    light: '#CC6633',
+    hcDark: '#BA592C',
+    hcLight: '#B5200D',
+  },
+  localize(
+    'statusBarDebuggingBackground',
+    'Status bar background color when a program is being debugged. The status bar is shown in the bottom of the window',
+  ),
+);
+
+export const STATUS_BAR_DEBUGGING_FOREGROUND = registerColor(
+  'statusBar.debuggingForeground',
+  {
+    dark: STATUS_BAR_FOREGROUND,
+    light: STATUS_BAR_FOREGROUND,
+    hcDark: STATUS_BAR_FOREGROUND,
+    hcLight: '#FFFFFF',
+  },
+  localize(
+    'statusBarDebuggingForeground',
+    'Status bar foreground color when a program is being debugged. The status bar is shown in the bottom of the window',
+  ),
+);
+
+export const STATUS_BAR_DEBUGGING_BORDER = registerColor(
+  'statusBar.debuggingBorder',
+  {
+    dark: STATUS_BAR_BORDER,
+    light: STATUS_BAR_BORDER,
+    hcDark: STATUS_BAR_BORDER,
+    hcLight: STATUS_BAR_BORDER,
+  },
+  localize(
+    'statusBarDebuggingBorder',
+    'Status bar border color separating to the sidebar and editor when a program is being debugged. The status bar is shown in the bottom of the window',
+  ),
+);