@opensumi/ide-theme 2.21.13 → 2.22.0

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

@@ -0,0 +1,99 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { RGBA, Color } from '../color';
+import { registerColor, transparent } from '../utils';
+
+import { editorWarningForeground, editorWarningBorder } from './editor';
+import {
+  scrollbarSliderActiveBackground,
+  scrollbarSliderBackground,
+  scrollbarSliderHoverBackground,
+} from './scrollbar';
+
+export const minimapFindMatch = registerColor(
+  'minimap.findMatchHighlight',
+  { light: '#d18616', dark: '#d18616', hcDark: '#AB5A00', hcLight: '#0F4A85' },
+  localize('minimapFindMatchHighlight', 'Minimap marker color for find matches.'),
+  true,
+);
+export const minimapSelectionOccurrenceHighlight = registerColor(
+  'minimap.selectionOccurrenceHighlight',
+  { light: '#c9c9c9', dark: '#676767', hcDark: '#ffffff', hcLight: '#0F4A85' },
+  localize('minimapSelectionOccurrenceHighlight', 'Minimap marker color for repeating editor selections.'),
+  true,
+);
+export const minimapSelection = registerColor(
+  'minimap.selectionHighlight',
+  { light: '#ADD6FF', dark: '#264F78', hcDark: '#ffffff', hcLight: '#0F4A85' },
+  localize('minimapSelectionHighlight', 'Minimap marker color for the editor selection.'),
+  true,
+);
+export const minimapError = registerColor(
+  'minimap.errorHighlight',
+  {
+    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('minimapError', 'Minimap marker color for errors.'),
+);
+export const minimapWarning = registerColor(
+  'minimap.warningHighlight',
+  {
+    dark: editorWarningForeground,
+    light: editorWarningForeground,
+    hcDark: editorWarningBorder,
+    hcLight: editorWarningBorder,
+  },
+  localize('overviewRuleWarning', 'Minimap marker color for warnings.'),
+);
+export const minimapBackground = registerColor(
+  'minimap.background',
+  { dark: null, light: null, hcDark: null, hcLight: null },
+  localize('minimapBackground', 'Minimap background color.'),
+);
+export const minimapForegroundOpacity = registerColor(
+  'minimap.foregroundOpacity',
+  {
+    dark: Color.fromHex('#000f'),
+    light: Color.fromHex('#000f'),
+    hcDark: Color.fromHex('#000f'),
+    hcLight: Color.fromHex('#000f'),
+  },
+  localize(
+    'minimapForegroundOpacity',
+    'Opacity of foreground elements rendered in the minimap. For example, "#000000c0" will render the elements with 75% opacity.',
+  ),
+);
+
+export const minimapSliderBackground = registerColor(
+  'minimapSlider.background',
+  {
+    light: transparent(scrollbarSliderBackground, 0.5),
+    dark: transparent(scrollbarSliderBackground, 0.5),
+    hcDark: transparent(scrollbarSliderBackground, 0.5),
+    hcLight: transparent(scrollbarSliderBackground, 0.5),
+  },
+  localize('minimapSliderBackground', 'Minimap slider background color.'),
+);
+export const minimapSliderHoverBackground = registerColor(
+  'minimapSlider.hoverBackground',
+  {
+    light: transparent(scrollbarSliderHoverBackground, 0.5),
+    dark: transparent(scrollbarSliderHoverBackground, 0.5),
+    hcDark: transparent(scrollbarSliderHoverBackground, 0.5),
+    hcLight: transparent(scrollbarSliderHoverBackground, 0.5),
+  },
+  localize('minimapSliderHoverBackground', 'Minimap slider background color when hovering.'),
+);
+export const minimapSliderActiveBackground = registerColor(
+  'minimapSlider.activeBackground',
+  {
+    light: transparent(scrollbarSliderActiveBackground, 0.5),
+    dark: transparent(scrollbarSliderActiveBackground, 0.5),
+    hcDark: transparent(scrollbarSliderActiveBackground, 0.5),
+    hcLight: transparent(scrollbarSliderActiveBackground, 0.5),
+  },
+  localize('minimapSliderActiveBackground', 'Minimap slider background color when clicked on.'),
+);

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

@@ -0,0 +1,169 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { registerColor, lighten, darken } from '../utils';
+
+import { contrastBorder } from './base';
+import {
+  editorWidgetBackground,
+  editorWidgetForeground,
+  editorErrorForeground,
+  editorWarningForeground,
+  editorInfoForeground,
+} from './editor';
+import { textLinkForeground } from './text';
+
+// < --- Notifications --- >
+
+export const NOTIFICATIONS_CENTER_BORDER = registerColor(
+  'notificationCenter.border',
+  {
+    dark: null,
+    light: null,
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'notificationCenterBorder',
+    'Notifications center border color. Notifications slide in from the bottom right of the window.',
+  ),
+);
+
+export const NOTIFICATIONS_TOAST_BORDER = registerColor(
+  'notificationToast.border',
+  {
+    dark: null,
+    light: null,
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'notificationToastBorder',
+    'Notification toast border color. Notifications slide in from the bottom right of the window.',
+  ),
+);
+
+export const NOTIFICATIONS_FOREGROUND = registerColor(
+  'notifications.foreground',
+  {
+    dark: editorWidgetForeground,
+    light: editorWidgetForeground,
+    hcDark: editorWidgetForeground,
+    hcLight: editorWidgetForeground,
+  },
+  localize(
+    'notificationsForeground',
+    'Notifications foreground color. Notifications slide in from the bottom right of the window.',
+  ),
+);
+
+export const NOTIFICATIONS_BACKGROUND = registerColor(
+  'notifications.background',
+  {
+    dark: editorWidgetBackground,
+    light: editorWidgetBackground,
+    hcDark: editorWidgetBackground,
+    hcLight: editorWidgetBackground,
+  },
+  localize(
+    'notificationsBackground',
+    'Notifications background color. Notifications slide in from the bottom right of the window.',
+  ),
+);
+
+export const NOTIFICATIONS_LINKS = registerColor(
+  'notificationLink.foreground',
+  {
+    dark: textLinkForeground,
+    light: textLinkForeground,
+    hcDark: textLinkForeground,
+    hcLight: textLinkForeground,
+  },
+  localize(
+    'notificationsLink',
+    'Notification links foreground color. Notifications slide in from the bottom right of the window.',
+  ),
+);
+
+export const NOTIFICATIONS_CENTER_HEADER_FOREGROUND = registerColor(
+  'notificationCenterHeader.foreground',
+  {
+    dark: null,
+    light: null,
+    hcDark: null,
+    hcLight: null,
+  },
+  localize(
+    'notificationCenterHeaderForeground',
+    'Notifications center header foreground color. Notifications slide in from the bottom right of the window.',
+  ),
+);
+
+export const NOTIFICATIONS_CENTER_HEADER_BACKGROUND = registerColor(
+  'notificationCenterHeader.background',
+  {
+    dark: lighten(NOTIFICATIONS_BACKGROUND, 0.3),
+    light: darken(NOTIFICATIONS_BACKGROUND, 0.05),
+    hcDark: NOTIFICATIONS_BACKGROUND,
+    hcLight: NOTIFICATIONS_BACKGROUND,
+  },
+  localize(
+    'notificationCenterHeaderBackground',
+    'Notifications center header background color. Notifications slide in from the bottom right of the window.',
+  ),
+);
+
+export const NOTIFICATIONS_BORDER = registerColor(
+  'notifications.border',
+  {
+    dark: NOTIFICATIONS_CENTER_HEADER_BACKGROUND,
+    light: NOTIFICATIONS_CENTER_HEADER_BACKGROUND,
+    hcDark: NOTIFICATIONS_CENTER_HEADER_BACKGROUND,
+    hcLight: NOTIFICATIONS_CENTER_HEADER_BACKGROUND,
+  },
+  localize(
+    'notificationsBorder',
+    'Notifications border color separating from other notifications in the notifications center. Notifications slide in from the bottom right of the window.',
+  ),
+);
+
+export const NOTIFICATIONS_ERROR_ICON_FOREGROUND = registerColor(
+  'notificationsErrorIcon.foreground',
+  {
+    dark: editorErrorForeground,
+    light: editorErrorForeground,
+    hcDark: editorErrorForeground,
+    hcLight: editorErrorForeground,
+  },
+  localize(
+    'notificationsErrorIconForeground',
+    'The color used for the icon of error notifications. Notifications slide in from the bottom right of the window.',
+  ),
+);
+
+export const NOTIFICATIONS_WARNING_ICON_FOREGROUND = registerColor(
+  'notificationsWarningIcon.foreground',
+  {
+    dark: editorWarningForeground,
+    light: editorWarningForeground,
+    hcDark: editorWarningForeground,
+    hcLight: editorWarningForeground,
+  },
+  localize(
+    'notificationsWarningIconForeground',
+    'The color used for the icon of warning notifications. Notifications slide in from the bottom right of the window.',
+  ),
+);
+
+export const NOTIFICATIONS_INFO_ICON_FOREGROUND = registerColor(
+  'notificationsInfoIcon.foreground',
+  {
+    dark: editorInfoForeground,
+    light: editorInfoForeground,
+    hcDark: editorInfoForeground,
+    hcLight: editorInfoForeground,
+  },
+  localize(
+    'notificationsInfoIconForeground',
+    'The color used for the icon of info notifications. Notifications slide in from the bottom right of the window.',
+  ),
+);

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

@@ -0,0 +1,177 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color } from '../../common/color';
+import { transparent, registerColor } from '../utils';
+
+import { contrastBorder } from './base';
+import { editorBackground, editorForeground, EDITOR_DRAG_AND_DROP_BACKGROUND } from './editor';
+import { textLinkActiveForeground } from './text';
+
+// < --- Panels --- >
+export const PANEL_BACKGROUND = registerColor(
+  'panel.background',
+  {
+    dark: editorBackground,
+    light: editorBackground,
+    hcDark: editorBackground,
+    hcLight: editorBackground,
+  },
+  localize(
+    'panelBackground',
+    'Panel background color. Panels are shown below the editor area and contain views like output and integrated terminal.',
+  ),
+);
+
+export const PANEL_BORDER = registerColor(
+  'panel.border',
+  {
+    dark: Color.fromHex('#808080').transparent(0.35),
+    light: Color.fromHex('#808080').transparent(0.35),
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'panelBorder',
+    'Panel border color to separate the panel from the editor. Panels are shown below the editor area and contain views like output and integrated terminal.',
+  ),
+);
+
+export const PANEL_ACTIVE_TITLE_FOREGROUND = registerColor(
+  'panelTitle.activeForeground',
+  {
+    dark: '#E7E7E7',
+    light: '#424242',
+    hcDark: Color.white,
+    hcLight: editorForeground,
+  },
+  localize(
+    'panelActiveTitleForeground',
+    'Title color for the active panel. Panels are shown below the editor area and contain views like output and integrated terminal.',
+  ),
+);
+
+export const PANEL_INACTIVE_TITLE_FOREGROUND = registerColor(
+  'panelTitle.inactiveForeground',
+  {
+    dark: transparent(PANEL_ACTIVE_TITLE_FOREGROUND, 0.6),
+    light: transparent(PANEL_ACTIVE_TITLE_FOREGROUND, 0.75),
+    hcDark: Color.white,
+    hcLight: editorForeground,
+  },
+  localize(
+    'panelInactiveTitleForeground',
+    'Title color for the inactive panel. Panels are shown below the editor area and contain views like output and integrated terminal.',
+  ),
+);
+
+export const PANEL_ACTIVE_TITLE_BORDER = registerColor(
+  'panelTitle.activeBorder',
+  {
+    dark: PANEL_ACTIVE_TITLE_FOREGROUND,
+    light: PANEL_ACTIVE_TITLE_FOREGROUND,
+    hcDark: contrastBorder,
+    hcLight: '#B5200D',
+  },
+  localize(
+    'panelActiveTitleBorder',
+    'Border color for the active panel title. Panels are shown below the editor area and contain views like output and integrated terminal.',
+  ),
+);
+
+export const PANEL_DRAG_AND_DROP_BACKGROUND = registerColor(
+  'panel.dropBackground',
+  {
+    dark: Color.white.transparent(0.12),
+    light: Color.fromHex('#2677CB').transparent(0.18),
+    hcDark: Color.white.transparent(0.12),
+    hcLight: Color.fromHex('#2677CB').transparent(0.18),
+  },
+  localize(
+    'panelDragAndDropBackground',
+    'Drag and drop feedback color for the panel title items. The color should have transparency so that the panel entries can still shine through. Panels are shown below the editor area and contain views like output and integrated terminal.',
+  ),
+);
+
+export const PANEL_DRAG_AND_DROP_BORDER = registerColor(
+  'panel.dropBorder',
+  {
+    dark: PANEL_ACTIVE_TITLE_FOREGROUND,
+    light: PANEL_ACTIVE_TITLE_FOREGROUND,
+    hcDark: PANEL_ACTIVE_TITLE_FOREGROUND,
+    hcLight: PANEL_ACTIVE_TITLE_FOREGROUND,
+  },
+  localize(
+    'panelDragAndDropBorder',
+    'Drag and drop feedback color for the panel titles. Panels are shown below the editor area and contain views like output and integrated terminal.',
+  ),
+);
+
+export const PANEL_SECTION_DRAG_AND_DROP_BACKGROUND = registerColor(
+  'panelSection.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(
+    'panelSectionDragAndDropBackground',
+    'Drag and drop feedback color for the panel sections. The color should have transparency so that the panel sections can still shine through. Panels are shown below the editor area and contain views like output and integrated terminal. Panel sections are views nested within the panels.',
+  ),
+);
+
+export const PANEL_SECTION_HEADER_BACKGROUND = registerColor(
+  'panelSectionHeader.background',
+  {
+    dark: Color.fromHex('#808080').transparent(0.2),
+    light: Color.fromHex('#808080').transparent(0.2),
+    hcDark: null,
+    hcLight: null,
+  },
+  localize(
+    'panelSectionHeaderBackground',
+    'Panel section header background color. Panels are shown below the editor area and contain views like output and integrated terminal. Panel sections are views nested within the panels.',
+  ),
+);
+
+export const PANEL_SECTION_HEADER_FOREGROUND = registerColor(
+  'panelSectionHeader.foreground',
+  {
+    dark: null,
+    light: null,
+    hcDark: null,
+    hcLight: null,
+  },
+  localize(
+    'panelSectionHeaderForeground',
+    'Panel section header foreground color. Panels are shown below the editor area and contain views like output and integrated terminal. Panel sections are views nested within the panels.',
+  ),
+);
+
+export const PANEL_SECTION_HEADER_BORDER = registerColor(
+  'panelSectionHeader.border',
+  {
+    dark: contrastBorder,
+    light: contrastBorder,
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize(
+    'panelSectionHeaderBorder',
+    'Panel section header border color used when multiple views are stacked vertically in the panel. Panels are shown below the editor area and contain views like output and integrated terminal. Panel sections are views nested within the panels.',
+  ),
+);
+
+export const PANEL_SECTION_BORDER = registerColor(
+  'panelSection.border',
+  {
+    dark: PANEL_BORDER,
+    light: PANEL_BORDER,
+    hcDark: PANEL_BORDER,
+    hcLight: PANEL_BORDER,
+  },
+  localize(
+    'panelSectionBorder',
+    'Panel section border color used when multiple views are stacked horizontally in the panel. Panels are shown below the editor area and contain views like output and integrated terminal. Panel sections are views nested within the panels.',
+  ),
+);

package/src/common/color-tokens/pick-view.ts

@@ -0,0 +1,96 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color } from '../color';
+import { registerColor, transparent } from '../utils';
+
+import { activeContrastBorder, contrastBorder } from './base';
+import { editorForeground, editorInfoForeground } from './editor';
+
+export const peekViewTitleBackground = registerColor(
+  'peekViewTitle.background',
+  {
+    dark: transparent(editorInfoForeground, 0.1),
+    light: transparent(editorInfoForeground, 0.1),
+    hcDark: null,
+    hcLight: null,
+  },
+  localize('peekViewTitleBackground', 'Background color of the peek view title area.'),
+);
+export const peekViewTitleForeground = registerColor(
+  'peekViewTitleLabel.foreground',
+  { dark: Color.white, light: Color.black, hcDark: Color.white, hcLight: editorForeground },
+  localize('peekViewTitleForeground', 'Color of the peek view title.'),
+);
+export const peekViewTitleInfoForeground = registerColor(
+  'peekViewTitleDescription.foreground',
+  { dark: '#ccccccb3', light: '#616161', hcDark: '#FFFFFF99', hcLight: '#292929' },
+  localize('peekViewTitleInfoForeground', 'Color of the peek view title info.'),
+);
+export const peekViewBorder = registerColor(
+  'peekView.border',
+  { dark: editorInfoForeground, light: editorInfoForeground, hcDark: contrastBorder, hcLight: contrastBorder },
+  localize('peekViewBorder', 'Color of the peek view borders and arrow.'),
+);
+
+export const peekViewResultsBackground = registerColor(
+  'peekViewResult.background',
+  { dark: '#252526', light: '#F3F3F3', hcDark: Color.black, hcLight: Color.white },
+  localize('peekViewResultsBackground', 'Background color of the peek view result list.'),
+);
+export const peekViewResultsMatchForeground = registerColor(
+  'peekViewResult.lineForeground',
+  { dark: '#bbbbbb', light: '#646465', hcDark: Color.white, hcLight: editorForeground },
+  localize('peekViewResultsMatchForeground', 'Foreground color for line nodes in the peek view result list.'),
+);
+export const peekViewResultsFileForeground = registerColor(
+  'peekViewResult.fileForeground',
+  { dark: Color.white, light: '#1E1E1E', hcDark: Color.white, hcLight: editorForeground },
+  localize('peekViewResultsFileForeground', 'Foreground color for file nodes in the peek view result list.'),
+);
+export const peekViewResultsSelectionBackground = registerColor(
+  'peekViewResult.selectionBackground',
+  { dark: '#3399ff33', light: '#3399ff33', hcDark: null, hcLight: null },
+  localize(
+    'peekViewResultsSelectionBackground',
+    'Background color of the selected entry in the peek view result list.',
+  ),
+);
+export const peekViewResultsSelectionForeground = registerColor(
+  'peekViewResult.selectionForeground',
+  { dark: Color.white, light: '#6C6C6C', hcDark: Color.white, hcLight: editorForeground },
+  localize(
+    'peekViewResultsSelectionForeground',
+    'Foreground color of the selected entry in the peek view result list.',
+  ),
+);
+export const peekViewEditorBackground = registerColor(
+  'peekViewEditor.background',
+  { dark: '#001F33', light: '#F2F8FC', hcDark: Color.black, hcLight: Color.white },
+  localize('peekViewEditorBackground', 'Background color of the peek view editor.'),
+);
+export const peekViewEditorGutterBackground = registerColor(
+  'peekViewEditorGutter.background',
+  {
+    dark: peekViewEditorBackground,
+    light: peekViewEditorBackground,
+    hcDark: peekViewEditorBackground,
+    hcLight: peekViewEditorBackground,
+  },
+  localize('peekViewEditorGutterBackground', 'Background color of the gutter in the peek view editor.'),
+);
+
+export const peekViewResultsMatchHighlight = registerColor(
+  'peekViewResult.matchHighlightBackground',
+  { dark: '#ea5c004d', light: '#ea5c004d', hcDark: null, hcLight: null },
+  localize('peekViewResultsMatchHighlight', 'Match highlight color in the peek view result list.'),
+);
+export const peekViewEditorMatchHighlight = registerColor(
+  'peekViewEditor.matchHighlightBackground',
+  { dark: '#ff8f0099', light: '#f5d802de', hcDark: null, hcLight: null },
+  localize('peekViewEditorMatchHighlight', 'Match highlight color in the peek view editor.'),
+);
+export const peekViewEditorMatchHighlightBorder = registerColor(
+  'peekViewEditor.matchHighlightBorder',
+  { dark: null, light: null, hcDark: activeContrastBorder, hcLight: activeContrastBorder },
+  localize('peekViewEditorMatchHighlightBorder', 'Match highlight border in the peek view editor.'),
+);

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

@@ -0,0 +1,15 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color } from '../../common/color';
+import { registerColor } from '../utils';
+
+export const pickerGroupForeground = registerColor(
+  'pickerGroup.foreground',
+  { dark: '#3794FF', light: '#0066BF', hcDark: Color.white, hcLight: '#0F4A85' },
+  localize('pickerGroupForeground', 'Quick picker color for grouping labels.'),
+);
+export const pickerGroupBorder = registerColor(
+  'pickerGroup.border',
+  { dark: '#3F3F46', light: '#CCCEDB', hcDark: Color.white, hcLight: '#0F4A85' },
+  localize('pickerGroupBorder', 'Quick picker color for grouping borders.'),
+);

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

@@ -0,0 +1,12 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color } from '../../common/color';
+import { registerColor } from '../utils';
+
+import { contrastBorder } from './base';
+
+export const progressBarBackground = registerColor(
+  'progressBar.background',
+  { dark: Color.fromHex('#0E70C0'), light: Color.fromHex('#0E70C0'), hcDark: contrastBorder, hcLight: contrastBorder },
+  localize('progressBarBackground', 'Background color of the progress bar that can show for long running operations.'),
+);

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

@@ -0,0 +1,57 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color, RGBA } from '../color';
+import { registerColor } from '../utils';
+
+import { editorWidgetBackground, editorWidgetForeground } from './editor';
+
+export const quickInputBackground = registerColor(
+  'quickInput.background',
+  {
+    dark: editorWidgetBackground,
+    light: editorWidgetBackground,
+    hcDark: editorWidgetBackground,
+    hcLight: editorWidgetBackground,
+  },
+  localize(
+    'pickerBackground',
+    'Quick picker background color. The quick picker widget is the container for pickers like the command palette.',
+  ),
+);
+export const quickInputForeground = registerColor(
+  'quickInput.foreground',
+  {
+    dark: editorWidgetForeground,
+    light: editorWidgetForeground,
+    hcDark: editorWidgetForeground,
+    hcLight: editorWidgetForeground,
+  },
+  localize(
+    'pickerForeground',
+    'Quick picker foreground color. The quick picker widget is the container for pickers like the command palette.',
+  ),
+);
+export const quickInputTitleBackground = registerColor(
+  'quickInputTitle.background',
+  {
+    dark: new Color(new RGBA(255, 255, 255, 0.105)),
+    light: new Color(new RGBA(0, 0, 0, 0.06)),
+    hcDark: '#000000',
+    hcLight: Color.white,
+  },
+  localize(
+    'pickerTitleBackground',
+    'Quick picker title background color. The quick picker widget is the container for pickers like the command palette.',
+  ),
+);
+
+export const TITLE_BAR_BACKGROUND = registerColor(
+  'titlebar.background',
+  {
+    dark: '#383838',
+    light: '#383838',
+    hcDark: '#383838',
+    hcLight: '#383838',
+  },
+  localize('titlebarBackgound', 'Titlebar background color.'),
+);

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

@@ -0,0 +1,42 @@
+import { localize } from '@opensumi/ide-core-common';
+
+import { Color } from '../../common/color';
+import { registerColor, transparent } from '../utils';
+
+import { contrastBorder } from './base';
+
+export const scrollbarShadow = registerColor(
+  'scrollbar.shadow',
+  { dark: '#000000', light: '#DDDDDD', hcDark: null, hcLight: null },
+  localize('scrollbarShadow', 'Scrollbar shadow to indicate that the view is scrolled.'),
+);
+export const scrollbarSliderBackground = registerColor(
+  'scrollbarSlider.background',
+  {
+    dark: Color.fromHex('#797979').transparent(0.4),
+    light: Color.fromHex('#646464').transparent(0.4),
+    hcDark: transparent(contrastBorder, 0.6),
+    hcLight: transparent(contrastBorder, 0.4),
+  },
+  localize('scrollbarSliderBackground', 'Scrollbar slider background color.'),
+);
+export const scrollbarSliderHoverBackground = registerColor(
+  'scrollbarSlider.hoverBackground',
+  {
+    dark: Color.fromHex('#646464').transparent(0.7),
+    light: Color.fromHex('#646464').transparent(0.7),
+    hcDark: transparent(contrastBorder, 0.8),
+    hcLight: transparent(contrastBorder, 0.8),
+  },
+  localize('scrollbarSliderHoverBackground', 'Scrollbar slider background color when hovering.'),
+);
+export const scrollbarSliderActiveBackground = registerColor(
+  'scrollbarSlider.activeBackground',
+  {
+    dark: Color.fromHex('#BFBFBF').transparent(0.4),
+    light: Color.fromHex('#000000').transparent(0.6),
+    hcDark: contrastBorder,
+    hcLight: contrastBorder,
+  },
+  localize('scrollbarSliderActiveBackground', 'Scrollbar slider background color when clicked on.'),
+);