@opensumi/ide-theme 2.21.13 → 2.22.0

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

@@ -0,0 +1,106 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor } from '../../utils';
+import {
+  listHoverBackground,
+  listHoverForeground,
+  listInactiveSelectionForeground,
+  listInactiveSelectionBackground,
+  listActiveSelectionForeground,
+  listActiveSelectionBackground,
+  listInvalidItemForeground,
+  listFocusForeground,
+  listFocusBackground,
+} from '../list-tree';
+
+export const treeHoverBackground = registerColor(
+  'kt.tree.hoverBackground',
+  { dark: listHoverBackground, light: listHoverBackground, hcDark: listHoverBackground, hcLight: listHoverBackground },
+  localize('treeHoverBackground', 'Tree background when hovering over items using the mouse.'),
+);
+export const treeHoverForeground = registerColor(
+  'kt.tree.hoverForeground',
+  { dark: listHoverForeground, light: listHoverForeground, hcDark: listHoverForeground, hcLight: listHoverForeground },
+  localize('treeHoverForeground', 'Tree foreground when hovering over items using the mouse.'),
+);
+export const treeFocusForeground = registerColor(
+  'kt.tree.focusForeground',
+  { dark: listFocusForeground, light: listFocusForeground, hcDark: listFocusForeground, hcLight: listFocusForeground },
+  localize(
+    'treeFocusForeground',
+    '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 treeFocusBackground = registerColor(
+  'kt.tree.focusBackground',
+  { dark: listFocusBackground, light: listFocusBackground, hcDark: listFocusBackground, hcLight: listFocusBackground },
+  localize(
+    'treeFocusBackground',
+    '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 treeInactiveSelectionForeground = registerColor(
+  'kt.tree.inactiveSelectionForeground',
+  {
+    dark: listInactiveSelectionForeground,
+    light: listInactiveSelectionForeground,
+    hcDark: listInactiveSelectionForeground,
+    hcLight: listInactiveSelectionForeground,
+  },
+  localize(
+    'treeInactiveSelectionForeground',
+    '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 treeInactiveSelectionBackground = registerColor(
+  'kt.tree.inactiveSelectionBackground',
+  {
+    dark: listInactiveSelectionBackground,
+    light: listInactiveSelectionBackground,
+    hcDark: listInactiveSelectionBackground,
+    hcLight: listInactiveSelectionBackground,
+  },
+  localize(
+    'treeInactiveSelectionBackground',
+    '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 treeActiveSelectionForeground = registerColor(
+  'kt.tree.activeSelectionForeground',
+  {
+    dark: listActiveSelectionForeground,
+    light: listActiveSelectionForeground,
+    hcDark: listActiveSelectionForeground,
+    hcLight: listActiveSelectionForeground,
+  },
+  localize(
+    'treeActiveSelectionForeground',
+    '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 treeActiveSelectionBackground = registerColor(
+  'kt.tree.activeSelectionBackground',
+  {
+    dark: listActiveSelectionBackground,
+    light: listActiveSelectionBackground,
+    hcDark: listActiveSelectionBackground,
+    hcLight: listActiveSelectionBackground,
+  },
+  localize(
+    'treeActiveSelectionBackground',
+    '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 treeInvalidItemForeground = registerColor(
+  'kt.tree.invalidItemForeground',
+  {
+    dark: listInvalidItemForeground,
+    light: listInvalidItemForeground,
+    hcDark: listInvalidItemForeground,
+    hcLight: listInvalidItemForeground,
+  },
+  localize(
+    'treeInvalidItemForeground',
+    'Tree foreground color for invalid items, for example an unresolved root in explorer.',
+  ),
+);

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

@@ -0,0 +1,103 @@
+import { registerColor } from '../utils';
+
+import { foreground, errorForeground } from './base';
+import { editorInfoForeground, editorWarningForeground } from './editor';
+
+export const debugTokenExpressionName = registerColor(
+  'debugTokenExpression.name',
+  { dark: '#c586c0', light: '#9b46b0', hcDark: foreground, hcLight: foreground },
+  'Foreground color for the token names shown in the debug views (ie. the Variables or Watch view).',
+);
+export const debugTokenExpressionValue = registerColor(
+  'debugTokenExpression.value',
+  { dark: '#cccccc99', light: '#6c6c6ccc', hcDark: foreground, hcLight: foreground },
+  'Foreground color for the token values shown in the debug views (ie. the Variables or Watch view).',
+);
+export const debugTokenExpressionString = registerColor(
+  'debugTokenExpression.string',
+  { dark: '#ce9178', light: '#a31515', hcDark: '#f48771', hcLight: '#a31515' },
+  'Foreground color for strings in the debug views (ie. the Variables or Watch view).',
+);
+export const debugTokenExpressionBoolean = registerColor(
+  'debugTokenExpression.boolean',
+  { dark: '#4e94ce', light: '#0000ff', hcDark: '#75bdfe', hcLight: '#0000ff' },
+  'Foreground color for booleans in the debug views (ie. the Variables or Watch view).',
+);
+export const debugTokenExpressionNumber = registerColor(
+  'debugTokenExpression.number',
+  { dark: '#b5cea8', light: '#098658', hcDark: '#89d185', hcLight: '#098658' },
+  'Foreground color for numbers in the debug views (ie. the Variables or Watch view).',
+);
+export const debugTokenExpressionError = registerColor(
+  'debugTokenExpression.error',
+  { dark: '#f48771', light: '#e51400', hcDark: '#f48771', hcLight: '#e51400' },
+  'Foreground color for expression errors in the debug views (ie. the Variables or Watch view) and for error logs shown in the debug console.',
+);
+
+export const debugViewExceptionLabelForeground = registerColor(
+  'debugView.exceptionLabelForeground',
+  { dark: foreground, light: '#FFF', hcDark: foreground, hcLight: foreground },
+  'Foreground color for a label shown in the CALL STACK view when the debugger breaks on an exception.',
+);
+export const debugViewExceptionLabelBackground = registerColor(
+  'debugView.exceptionLabelBackground',
+  { dark: '#6C2022', light: '#A31515', hcDark: '#6C2022', hcLight: '#A31515' },
+  'Background color for a label shown in the CALL STACK view when the debugger breaks on an exception.',
+);
+export const debugExceptionWidgetBorder = registerColor(
+  'debugExceptionWidget.border',
+  { dark: '#a31515', light: '#a31515', hcDark: '#a31515', hcLight: '#a31515' },
+  'Exception widget border color.',
+);
+export const debugExceptionWidgetBackground = registerColor(
+  'debugExceptionWidget.background',
+  { dark: '#420b0d', light: '#f1dfde', hcDark: '#420b0d', hcLight: '#f1dfde' },
+  'Exception widget background color.',
+);
+
+export const debugViewStateLabelForeground = registerColor(
+  'debugView.stateLabelForeground',
+  { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground },
+  "Foreground color for a label in the CALL STACK view showing the current session's or thread's state.",
+);
+export const debugViewStateLabelBackground = registerColor(
+  'debugView.stateLabelBackground',
+  { dark: '#88888844', light: '#88888844', hcDark: '#88888844', hcLight: '#88888844' },
+  "Background color for a label in the CALL STACK view showing the current session's or thread's state.",
+);
+export const debugViewValueChangedHighlight = registerColor(
+  'debugView.valueChangedHighlight',
+  { dark: '#569CD6', light: '#569CD6', hcDark: '#569CD6', hcLight: '#569CD6' },
+  'Color used to highlight value changes in the debug views (ie. in the Variables view).',
+);
+
+export const debugConsoleInfoForeground = registerColor(
+  'debugConsole.infoForeground',
+  { dark: editorInfoForeground, light: editorInfoForeground, hcDark: foreground, hcLight: foreground },
+  'Foreground color for info messages in debug REPL console.',
+);
+export const debugConsoleWarningForeground = registerColor(
+  'debugConsole.warningForeground',
+  {
+    dark: editorWarningForeground,
+    light: editorWarningForeground,
+    hcDark: '#008000',
+    hcLight: editorWarningForeground,
+  },
+  'Foreground color for warning messages in debug REPL console.',
+);
+export const debugConsoleErrorForeground = registerColor(
+  'debugConsole.errorForeground',
+  { dark: errorForeground, light: errorForeground, hcDark: errorForeground, hcLight: errorForeground },
+  'Foreground color for error messages in debug REPL console.',
+);
+export const debugConsoleSourceForeground = registerColor(
+  'debugConsole.sourceForeground',
+  { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground },
+  'Foreground color for source filenames in debug REPL console.',
+);
+export const debugConsoleInputIconForeground = registerColor(
+  'debugConsoleInputIcon.foreground',
+  { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground },
+  'Foreground color for debug console input marker icon.',
+);

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

@@ -0,0 +1,134 @@
+import { registerColor } from '../utils';
+
+// ref: https://github.com/Microsoft/vscode/blob/b07d19a768b42af2aa8f78f8b1b68978f14f9bd9/src%2Fvs%2Fworkbench%2Fcontrib%2Fdebug%2Fbrowser%2FdebugToolBar.ts
+export const debugToolBarBackground = registerColor(
+  'debugToolBar.background',
+  {
+    dark: '#333333',
+    light: '#F3F3F3',
+    hcDark: '#000000',
+    hcLight: '#FFFFFF',
+  },
+  'Debug toolbar background color.',
+);
+
+export const debugToolBarBorder = registerColor(
+  'debugToolBar.border',
+  {
+    dark: null,
+    light: null,
+    hcDark: null,
+    hcLight: null,
+  },
+  'Debug toolbar border color.',
+);
+
+export const debugIconStartForeground = registerColor(
+  'debugIcon.startForeground',
+  {
+    dark: '#89D185',
+    light: '#388A34',
+    hcDark: '#89D185',
+    hcLight: '#388A34',
+  },
+  'Debug toolbar icon for start debugging.',
+);
+
+export const debugIconPauseForeground = registerColor(
+  'debugIcon.pauseForeground',
+  {
+    dark: '#75BEFF',
+    light: '#007ACC',
+    hcDark: '#75BEFF',
+    hcLight: '#007ACC',
+  },
+  'Debug toolbar icon for pause.',
+);
+
+export const debugIconStopForeground = registerColor(
+  'debugIcon.stopForeground',
+  {
+    dark: '#F48771',
+    light: '#A1260D',
+    hcDark: '#F48771',
+    hcLight: '#A1260D',
+  },
+  'Debug toolbar icon for stop.',
+);
+
+export const debugIconDisconnectForeground = registerColor(
+  'debugIcon.disconnectForeground',
+  {
+    dark: '#F48771',
+    light: '#A1260D',
+    hcDark: '#F48771',
+    hcLight: '#A1260D',
+  },
+  'Debug toolbar icon for disconnect.',
+);
+
+export const debugIconRestartForeground = registerColor(
+  'debugIcon.restartForeground',
+  {
+    dark: '#89D185',
+    light: '#388A34',
+    hcDark: '#89D185',
+    hcLight: '#388A34',
+  },
+  'Debug toolbar icon for restart.',
+);
+
+export const debugIconStepOverForeground = registerColor(
+  'debugIcon.stepOverForeground',
+  {
+    dark: '#75BEFF',
+    light: '#007ACC',
+    hcDark: '#75BEFF',
+    hcLight: '#007ACC',
+  },
+  'Debug toolbar icon for step over.',
+);
+
+export const debugIconStepIntoForeground = registerColor(
+  'debugIcon.stepIntoForeground',
+  {
+    dark: '#75BEFF',
+    light: '#007ACC',
+    hcDark: '#75BEFF',
+    hcLight: '#007ACC',
+  },
+  'Debug toolbar icon for step into.',
+);
+
+export const debugIconStepOutForeground = registerColor(
+  'debugIcon.stepOutForeground',
+  {
+    dark: '#75BEFF',
+    light: '#007ACC',
+    hcDark: '#75BEFF',
+    hcLight: '#007ACC',
+  },
+  'Debug toolbar icon for step over.',
+);
+
+export const debugIconContinueForeground = registerColor(
+  'debugIcon.continueForeground',
+  {
+    dark: '#75BEFF',
+    light: '#007ACC',
+    hcDark: '#75BEFF',
+    hcLight: '#007ACC',
+  },
+  'Debug toolbar icon for continue.',
+);
+
+export const debugIconStepBackForeground = registerColor(
+  'debugIcon.stepBackForeground',
+  {
+    dark: '#75BEFF',
+    light: '#007ACC',
+    hcDark: '#75BEFF',
+    hcLight: '#007ACC',
+  },
+  'Debug toolbar icon for step back.',
+);

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

@@ -0,0 +1,27 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color } from '../../common/color';
+import { registerColor } from '../utils';
+
+import { contrastBorder, foreground } from './base';
+
+export const selectBackground = registerColor(
+  'dropdown.background',
+  { dark: '#3C3C3C', light: Color.white, hcDark: Color.black, hcLight: Color.white },
+  localize('dropdownBackground', 'Dropdown background.'),
+);
+export const selectListBackground = registerColor(
+  'dropdown.listBackground',
+  { dark: null, light: null, hcDark: Color.black, hcLight: Color.white },
+  localize('dropdownListBackground', 'Dropdown list background.'),
+);
+export const selectForeground = registerColor(
+  'dropdown.foreground',
+  { dark: '#F0F0F0', light: null, hcDark: Color.white, hcLight: foreground },
+  localize('dropdownForeground', 'Dropdown foreground.'),
+);
+export const selectBorder = registerColor(
+  'dropdown.border',
+  { dark: selectBackground, light: '#CECECE', hcDark: contrastBorder, hcLight: contrastBorder },
+  localize('dropdownBorder', 'Dropdown border.'),
+);