@opensumi/ide-theme 2.21.13 → 2.22.0

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

@@ -0,0 +1,346 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color } from '../../common/color';
+import { transparent, registerColor } from '../utils';
+
+import { contrastBorder } from './base';
+import { hcActiveBorderColor, hcBorderColor } from './basic-color';
+import { editorBackground } from './editor';
+import { treeIndentGuidesStroke } from './list-tree';
+
+// < --- Tabs --- >
+
+export const TAB_ACTIVE_BACKGROUND = registerColor(
+  'tab.activeBackground',
+  {
+    dark: editorBackground,
+    light: editorBackground,
+    hcDark: editorBackground,
+    hcLight: editorBackground,
+  },
+  localize(
+    'tabActiveBackground',
+    'Active tab background color in an active group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_UNFOCUSED_ACTIVE_BACKGROUND = registerColor(
+  'tab.unfocusedActiveBackground',
+  {
+    dark: TAB_ACTIVE_BACKGROUND,
+    light: TAB_ACTIVE_BACKGROUND,
+    hcDark: TAB_ACTIVE_BACKGROUND,
+    hcLight: TAB_ACTIVE_BACKGROUND,
+  },
+  localize(
+    'tabUnfocusedActiveBackground',
+    'Active tab background color in an unfocused group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_INACTIVE_BACKGROUND = registerColor(
+  'tab.inactiveBackground',
+  {
+    dark: '#2D2D2D',
+    light: '#ECECEC',
+    hcDark: TAB_UNFOCUSED_ACTIVE_BACKGROUND,
+    hcLight: TAB_UNFOCUSED_ACTIVE_BACKGROUND,
+  },
+  localize(
+    'tabInactiveBackground',
+    'Inactive tab background color in an active group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_UNFOCUSED_INACTIVE_BACKGROUND = registerColor(
+  'tab.unfocusedInactiveBackground',
+  {
+    dark: TAB_INACTIVE_BACKGROUND,
+    light: TAB_INACTIVE_BACKGROUND,
+    hcDark: TAB_INACTIVE_BACKGROUND,
+    hcLight: TAB_INACTIVE_BACKGROUND,
+  },
+  localize(
+    'tabUnfocusedInactiveBackground',
+    'Inactive tab background color in an unfocused group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_HOVER_BACKGROUND = registerColor(
+  'tab.hoverBackground',
+  {
+    dark: null,
+    light: null,
+    hcDark: null,
+    hcLight: null,
+  },
+  localize(
+    'tabHoverBackground',
+    'Tab background color when hovering. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_UNFOCUSED_HOVER_BACKGROUND = registerColor(
+  'tab.unfocusedHoverBackground',
+  {
+    dark: transparent(TAB_HOVER_BACKGROUND, 0.5),
+    light: transparent(TAB_HOVER_BACKGROUND, 0.7),
+    hcDark: null,
+    hcLight: null,
+  },
+  localize(
+    'tabUnfocusedHoverBackground',
+    'Tab background color in an unfocused group when hovering. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_HOVER_FOREGROUND = registerColor(
+  'tab.hoverForeground',
+  {
+    dark: null,
+    light: null,
+    hcDark: null,
+    hcLight: null,
+  },
+  localize(
+    'tabHoverForeground',
+    'Tab foreground color when hovering. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_UNFOCUSED_HOVER_FOREGROUND = registerColor(
+  'tab.unfocusedHoverForeground',
+  {
+    dark: transparent(TAB_HOVER_FOREGROUND, 0.5),
+    light: transparent(TAB_HOVER_FOREGROUND, 0.5),
+    hcDark: null,
+    hcLight: null,
+  },
+  localize(
+    'tabUnfocusedHoverForeground',
+    'Tab foreground color in an unfocused group when hovering. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_BORDER = registerColor(
+  'tab.border',
+  {
+    dark: '#252526',
+    light: '#F3F3F3',
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'tabBorder',
+    'Border to separate tabs from each other. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_LAST_PINNED_BORDER = registerColor(
+  'tab.lastPinnedBorder',
+  {
+    dark: treeIndentGuidesStroke,
+    light: treeIndentGuidesStroke,
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'lastPinnedTabBorder',
+    'Border to separate pinned tabs from other tabs. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_ACTIVE_BORDER = registerColor(
+  'tab.activeBorder',
+  {
+    dark: null,
+    light: null,
+    hcDark: null,
+    hcLight: null,
+  },
+  localize(
+    'tabActiveBorder',
+    'Border on the bottom of an active tab. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_UNFOCUSED_ACTIVE_BORDER = registerColor(
+  'tab.unfocusedActiveBorder',
+  {
+    dark: transparent(TAB_ACTIVE_BORDER, 0.5),
+    light: transparent(TAB_ACTIVE_BORDER, 0.7),
+    hcDark: null,
+    hcLight: null,
+  },
+  localize(
+    'tabActiveUnfocusedBorder',
+    'Border on the bottom of an active tab in an unfocused group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_ACTIVE_BORDER_TOP = registerColor(
+  'tab.activeBorderTop',
+  {
+    dark: null,
+    light: null,
+    hcDark: null,
+    hcLight: '#B5200D',
+  },
+  localize(
+    'tabActiveBorderTop',
+    'Border to the top of an active tab. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_UNFOCUSED_ACTIVE_BORDER_TOP = registerColor(
+  'tab.unfocusedActiveBorderTop',
+  {
+    dark: transparent(TAB_ACTIVE_BORDER_TOP, 0.5),
+    light: transparent(TAB_ACTIVE_BORDER_TOP, 0.7),
+    hcDark: null,
+    hcLight: '#B5200D',
+  },
+  localize(
+    'tabActiveUnfocusedBorderTop',
+    'Border to the top of an active tab in an unfocused group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_ACTIVE_MODIFIED_BORDER = registerColor(
+  'tab.activeModifiedBorder',
+  {
+    dark: '#3399CC',
+    light: '#33AAEE',
+    hcDark: null,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'tabActiveModifiedBorder',
+    'Border on the top of modified active tabs in an active group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_INACTIVE_MODIFIED_BORDER = registerColor(
+  'tab.inactiveModifiedBorder',
+  {
+    dark: transparent(TAB_ACTIVE_MODIFIED_BORDER, 0.5),
+    light: transparent(TAB_ACTIVE_MODIFIED_BORDER, 0.5),
+    hcDark: Color.white,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'tabInactiveModifiedBorder',
+    'Border on the top of modified inactive tabs in an active group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_UNFOCUSED_ACTIVE_MODIFIED_BORDER = registerColor(
+  'tab.unfocusedActiveModifiedBorder',
+  {
+    dark: transparent(TAB_ACTIVE_MODIFIED_BORDER, 0.5),
+    light: transparent(TAB_ACTIVE_MODIFIED_BORDER, 0.7),
+    hcDark: Color.white,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'unfocusedActiveModifiedBorder',
+    'Border on the top of modified active tabs in an unfocused group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_UNFOCUSED_INACTIVE_MODIFIED_BORDER = registerColor(
+  'tab.unfocusedInactiveModifiedBorder',
+  {
+    dark: transparent(TAB_INACTIVE_MODIFIED_BORDER, 0.5),
+    light: transparent(TAB_INACTIVE_MODIFIED_BORDER, 0.5),
+    hcDark: Color.white,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'unfocusedINactiveModifiedBorder',
+    'Border on the top of modified inactive tabs in an unfocused group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+export const TAB_HOVER_BORDER = registerColor(
+  'tab.hoverBorder',
+  {
+    dark: null,
+    light: null,
+    hcDark: null,
+    hcLight: null,
+  },
+  localize(
+    'tabHoverBorder',
+    'Border to highlight tabs when hovering. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_UNFOCUSED_HOVER_BORDER = registerColor(
+  'tab.unfocusedHoverBorder',
+  {
+    dark: transparent(TAB_HOVER_BORDER, 0.5),
+    light: transparent(TAB_HOVER_BORDER, 0.7),
+    hcDark: null,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'tabUnfocusedHoverBorder',
+    'Border to highlight tabs in an unfocused group when hovering. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_ACTIVE_FOREGROUND = registerColor(
+  'tab.activeForeground',
+  {
+    dark: Color.white,
+    light: '#333333',
+    hcDark: hcActiveBorderColor,
+    hcLight: hcActiveBorderColor,
+  },
+  localize(
+    'tabActiveForeground',
+    'Active tab foreground color in an active group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_INACTIVE_FOREGROUND = registerColor(
+  'tab.inactiveForeground',
+  {
+    dark: transparent(TAB_ACTIVE_FOREGROUND, 0.5),
+    light: transparent(TAB_ACTIVE_FOREGROUND, 0.7),
+    hcDark: Color.white,
+    hcLight: '#292929',
+  },
+  localize(
+    'tabInactiveForeground',
+    'Inactive tab foreground color in an active group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_UNFOCUSED_ACTIVE_FOREGROUND = registerColor(
+  'tab.unfocusedActiveForeground',
+  {
+    dark: transparent(TAB_ACTIVE_FOREGROUND, 0.5),
+    light: transparent(TAB_ACTIVE_FOREGROUND, 0.7),
+    hcDark: Color.white,
+    hcLight: '#292929',
+  },
+  localize(
+    'tabUnfocusedActiveForeground',
+    'Active tab foreground color in an unfocused group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);
+
+export const TAB_UNFOCUSED_INACTIVE_FOREGROUND = registerColor(
+  'tab.unfocusedInactiveForeground',
+  {
+    dark: transparent(TAB_INACTIVE_FOREGROUND, 0.5),
+    light: transparent(TAB_INACTIVE_FOREGROUND, 0.5),
+    hcDark: Color.white,
+    hcLight: '#292929',
+  },
+  localize(
+    'tabUnfocusedInactiveForeground',
+    'Inactive tab foreground color in an unfocused group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.',
+  ),
+);

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

@@ -0,0 +1,105 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { transparent, registerColor } from '../utils';
+
+import { contrastBorder } from './base';
+import { editorErrorForeground } from './editor';
+
+export const testingColorIconFailed = registerColor(
+  'testing.iconFailed',
+  {
+    dark: '#f14c4c',
+    light: '#f14c4c',
+    hcDark: '#f14c4c',
+    hcLight: '#B5200D',
+  },
+  localize('testing.iconFailed', "Color for the 'failed' icon in the test explorer."),
+);
+
+export const testingColorIconErrored = registerColor(
+  'testing.iconErrored',
+  {
+    dark: '#f14c4c',
+    light: '#f14c4c',
+    hcDark: '#f14c4c',
+    hcLight: '#B5200D',
+  },
+  localize('testing.iconErrored', "Color for the 'Errored' icon in the test explorer."),
+);
+
+export const testingColorIconPassed = registerColor(
+  'testing.iconPassed',
+  {
+    dark: '#73c991',
+    light: '#73c991',
+    hcDark: '#73c991',
+    hcLight: '#007100',
+  },
+  localize('testing.iconPassed', "Color for the 'passed' icon in the test explorer."),
+);
+
+export const testingColorRunAction = registerColor(
+  'testing.runAction',
+  {
+    dark: testingColorIconPassed,
+    light: testingColorIconPassed,
+    hcDark: testingColorIconPassed,
+    hcLight: testingColorIconPassed,
+  },
+  localize('testing.runAction', "Color for 'run' icons in the editor."),
+);
+
+export const testingColorIconQueued = registerColor(
+  'testing.iconQueued',
+  {
+    dark: '#cca700',
+    light: '#cca700',
+    hcDark: '#cca700',
+    hcLight: '#cca700',
+  },
+  localize('testing.iconQueued', "Color for the 'Queued' icon in the test explorer."),
+);
+
+export const testingColorIconUnset = registerColor(
+  'testing.iconUnset',
+  {
+    dark: '#848484',
+    light: '#848484',
+    hcDark: '#848484',
+    hcLight: '#848484',
+  },
+  localize('testing.iconUnset', "Color for the 'Unset' icon in the test explorer."),
+);
+
+export const testingColorIconSkipped = registerColor(
+  'testing.iconSkipped',
+  {
+    dark: '#848484',
+    light: '#848484',
+    hcDark: '#848484',
+    hcLight: '#848484',
+  },
+  localize('testing.iconSkipped', "Color for the 'Skipped' icon in the test explorer."),
+);
+
+export const testingPeekBorder = registerColor(
+  'testing.peekBorder',
+  {
+    dark: editorErrorForeground,
+    light: editorErrorForeground,
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize('testing.peekBorder', 'Color of the peek view borders and arrow.'),
+);
+
+export const testingPeekHeaderBackground = registerColor(
+  'testing.peekHeaderBackground',
+  {
+    dark: transparent(editorErrorForeground, 0.1),
+    light: transparent(editorErrorForeground, 0.1),
+    hcDark: null,
+    hcLight: null,
+  },
+  localize('testing.peekBorder', 'Color of the peek view borders and arrow.'),
+);

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

@@ -0,0 +1,41 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color } from '../../common/color';
+import { registerColor } from '../utils';
+
+// ------ text colors
+export const textSeparatorForeground = registerColor(
+  'textSeparator.foreground',
+  { light: '#0000002e', dark: '#ffffff2e', hcDark: Color.black, hcLight: '#292929' },
+  localize('textSeparatorForeground', 'Color for text separators.'),
+);
+export const textLinkForeground = registerColor(
+  'textLink.foreground',
+  { light: '#006AB1', dark: '#3794FF', hcDark: '#3794FF', hcLight: '#0F4A85' },
+  localize('textLinkForeground', 'Foreground color for links in text.'),
+);
+export const textLinkActiveForeground = registerColor(
+  'textLink.activeForeground',
+  { light: '#006AB1', dark: '#3794FF', hcDark: '#3794FF', hcLight: '#0F4A85' },
+  localize('textLinkActiveForeground', 'Foreground color for links in text when clicked on and on mouse hover.'),
+);
+export const textPreformatForeground = registerColor(
+  'textPreformat.foreground',
+  { light: '#A31515', dark: '#D7BA7D', hcDark: '#D7BA7D', hcLight: '#292929' },
+  localize('textPreformatForeground', 'Foreground color for preformatted text segments.'),
+);
+export const textBlockQuoteBackground = registerColor(
+  'textBlockQuote.background',
+  { light: '#7f7f7f1a', dark: '#7f7f7f1a', hcDark: null, hcLight: '#F2F2F2' },
+  localize('textBlockQuoteBackground', 'Background color for block quotes in text.'),
+);
+export const textBlockQuoteBorder = registerColor(
+  'textBlockQuote.border',
+  { light: '#007acc80', dark: '#007acc80', hcDark: Color.white, hcLight: '#292929' },
+  localize('textBlockQuoteBorder', 'Border color for block quotes in text.'),
+);
+export const textCodeBlockBackground = registerColor(
+  'textCodeBlock.background',
+  { light: '#dcdcdc66', dark: '#0a0a0a66', hcDark: Color.black, hcLight: '#F2F2F2' },
+  localize('textCodeBlockBackground', 'Background color for code blocks in text.'),
+);

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

@@ -0,0 +1,62 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { transparent, registerColor } from '../utils';
+
+import { contrastBorder } from './base';
+
+// < --- Title Bar --- >
+
+export const TITLE_BAR_ACTIVE_FOREGROUND = registerColor(
+  'titleBar.activeForeground',
+  {
+    dark: '#CCCCCC',
+    light: '#333333',
+    hcDark: '#FFFFFF',
+    hcLight: '#292929',
+  },
+  localize('titleBarActiveForeground', 'Title bar foreground when the window is active.'),
+);
+
+export const TITLE_BAR_INACTIVE_FOREGROUND = registerColor(
+  'titleBar.inactiveForeground',
+  {
+    dark: transparent(TITLE_BAR_ACTIVE_FOREGROUND, 0.6),
+    light: transparent(TITLE_BAR_ACTIVE_FOREGROUND, 0.6),
+    hcDark: null,
+    hcLight: '#292929',
+  },
+  localize('titleBarInactiveForeground', 'Title bar foreground when the window is inactive.'),
+);
+
+export const TITLE_BAR_ACTIVE_BACKGROUND = registerColor(
+  'titleBar.activeBackground',
+  {
+    dark: '#3C3C3C',
+    light: '#DDDDDD',
+    hcDark: '#000000',
+    hcLight: '#FFFFFF',
+  },
+  localize('titleBarActiveBackground', 'Title bar background when the window is active.'),
+);
+
+export const TITLE_BAR_INACTIVE_BACKGROUND = registerColor(
+  'titleBar.inactiveBackground',
+  {
+    dark: transparent(TITLE_BAR_ACTIVE_BACKGROUND, 0.6),
+    light: transparent(TITLE_BAR_ACTIVE_BACKGROUND, 0.6),
+    hcDark: null,
+    hcLight: null,
+  },
+  localize('titleBarInactiveBackground', 'Title bar background when the window is inactive.'),
+);
+
+export const TITLE_BAR_BORDER = registerColor(
+  'titleBar.border',
+  {
+    dark: null,
+    light: null,
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize('titleBarBorder', 'Title bar border color.'),
+);

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

@@ -0,0 +1,28 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { darken, lighten, registerColor } from '../utils';
+
+import { activeContrastBorder } from './base';
+/**
+ * Toolbar colors
+ */
+export const toolbarHoverBackground = registerColor(
+  'toolbar.hoverBackground',
+  { dark: '#5a5d5e50', light: '#b8b8b850', hcDark: null, hcLight: null },
+  localize('toolbarHoverBackground', 'Toolbar background when hovering over actions using the mouse'),
+);
+export const toolbarHoverOutline = registerColor(
+  'toolbar.hoverOutline',
+  { dark: null, light: null, hcDark: activeContrastBorder, hcLight: activeContrastBorder },
+  localize('toolbarHoverOutline', 'Toolbar outline when hovering over actions using the mouse'),
+);
+export const toolbarActiveBackground = registerColor(
+  'toolbar.activeBackground',
+  {
+    dark: lighten(toolbarHoverBackground, 0.1),
+    light: darken(toolbarHoverBackground, 0.1),
+    hcDark: null,
+    hcLight: null,
+  },
+  localize('toolbarActiveBackground', 'Toolbar background when holding the mouse over actions'),
+);

package/src/common/color-tokens/welcome-page.ts

@@ -0,0 +1,27 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor } from '../utils';
+
+export const welcomePagebtnBackground = registerColor(
+  'welcomePage.buttonBackground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('welcomePage.buttonBackground', 'Background color for the buttons on the Welcome page.'),
+);
+export const welcomePageBtnHoverBackground = registerColor(
+  'welcomePage.buttonHoverBackground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('welcomePage.buttonHoverBackground', 'Hover background color for the buttons on the Welcome page.'),
+);
+export const welcomePageBackground = registerColor(
+  'welcomePage.background',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('welcomePage.background', 'Background color for the Welcome page.'),
+);
+export const embeddedEditorBackground = registerColor(
+  'walkThrough.embeddedEditorBackground',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize(
+    'walkThrough.embeddedEditorBackground',
+    'Background color for the embedded editors on the Interactive Playground.',
+  ),
+);