Skip to content

Commit 8e57409

Browse files
author
Miguel Solorio
committed
Add color tokens for active activity bar elements
1 parent ab0eb6d commit 8e57409

5 files changed

Lines changed: 68 additions & 9 deletions

File tree

‎src/vs/workbench/browser/parts/activitybar/activitybarActions.ts‎

Lines changed: 42 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { ActivityAction, ActivityActionViewItem, ICompositeBar, ICompositeBarCol
2222
import { ViewletDescriptor } from 'vs/workbench/browser/viewlet';
2323
import { Extensions as ActionExtensions, IWorkbenchActionRegistry } from 'vs/workbench/common/actions';
2424
import { IActivity } from 'vs/workbench/common/activity';
25-
import { ACTIVITY_BAR_FOREGROUND } from 'vs/workbench/common/theme';
25+
import { ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_ACTIVE_BACKGROUND } from 'vs/workbench/common/theme';
2626
import { IActivityBarService } from 'vs/workbench/services/activityBar/browser/activityBarService';
2727
import { IWorkbenchLayoutService, Parts } from 'vs/workbench/services/layout/browser/layoutService';
2828
import { IViewletService } from 'vs/workbench/services/viewlet/browser/viewlet';
@@ -278,16 +278,54 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
278278
`);
279279
}
280280

281+
const activeBorderColor = theme.getColor(ACTIVITY_BAR_ACTIVE_BORDER);
282+
if (activeBorderColor) {
283+
collector.addRule(`
284+
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked:before {
285+
content: "";
286+
position: absolute;
287+
z-index: 1;
288+
top: 0;
289+
bottom: 0;
290+
margin: auto;
291+
left: 0;
292+
width: 100%;
293+
height: calc(100% - 10px);
294+
margin-left: 1px;
295+
border-left: 2px solid ${activeBorderColor};
296+
}
297+
`);
298+
}
299+
300+
const activeBackgroundColor = theme.getColor(ACTIVITY_BAR_ACTIVE_BACKGROUND);
301+
if (activeForegroundColor) {
302+
collector.addRule(`
303+
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked:after {
304+
content: "";
305+
position: absolute;
306+
top: 0;
307+
bottom: 0;
308+
margin: auto;
309+
width: 100%;
310+
height: calc(100% - 10px);
311+
margin-left: 1px;
312+
background-color: ${activeBackgroundColor};
313+
}
314+
`);
315+
}
316+
281317
// Styling with Outline color (e.g. high contrast theme)
282318
const outline = theme.getColor(activeContrastBorder);
283319
if (outline) {
284320
collector.addRule(`
285321
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:before {
286322
content: "";
287323
position: absolute;
288-
top: 9px;
289-
left: 9px;
290-
height: 32px;
324+
top: 0;
325+
bottom: 0;
326+
left: 0;
327+
margin: auto;
328+
height: calc(100% - 10px);
291329
width: 32px;
292330
}
293331

‎src/vs/workbench/browser/parts/activitybar/activitybarPart.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
1818
import { IDisposable, toDisposable, DisposableStore } from 'vs/base/common/lifecycle';
1919
import { ToggleActivityBarVisibilityAction } from 'vs/workbench/browser/actions/layoutActions';
2020
import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
21-
import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER, ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND, ACTIVITY_BAR_INACTIVE_FOREGROUND } from 'vs/workbench/common/theme';
21+
import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER, ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND, ACTIVITY_BAR_INACTIVE_FOREGROUND, ACTIVITY_BAR_ACTIVE_BACKGROUND } from 'vs/workbench/common/theme';
2222
import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
2323
import { CompositeBar, ICompositeBarItem } from 'vs/workbench/browser/parts/compositeBar';
2424
import { Dimension, addClass, removeNode } from 'vs/base/browser/dom';
@@ -275,6 +275,8 @@ export class ActivitybarPart extends Part implements IActivityBarService {
275275
return {
276276
activeForegroundColor: theme.getColor(ACTIVITY_BAR_FOREGROUND),
277277
inactiveForegroundColor: theme.getColor(ACTIVITY_BAR_INACTIVE_FOREGROUND),
278+
activeBorderColor: theme.getColor(ACTIVITY_BAR_ACTIVE_BORDER),
279+
activeBackground: theme.getColor(ACTIVITY_BAR_ACTIVE_BACKGROUND),
278280
badgeBackground: theme.getColor(ACTIVITY_BAR_BADGE_BACKGROUND),
279281
badgeForeground: theme.getColor(ACTIVITY_BAR_BADGE_FOREGROUND),
280282
dragAndDropBackground: theme.getColor(ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND),

‎src/vs/workbench/browser/parts/activitybar/media/activityaction.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
}
1111

1212
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label {
13+
position: relative;
14+
z-index: 1;
1315
display: flex;
1416
overflow: hidden;
1517
height: 40px;
@@ -23,8 +25,11 @@
2325
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus:before {
2426
content: "";
2527
position: absolute;
26-
top: 9px;
27-
height: 32px;
28+
top: 0;
29+
bottom: 0;
30+
left: 0;
31+
margin: auto;
32+
height: calc(100% - 10px);
2833
width: 0;
2934
border-left: 2px solid;
3035
}

‎src/vs/workbench/browser/parts/compositeBarActions.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,8 @@ export class ActivityAction extends Action {
110110
export interface ICompositeBarColors {
111111
activeBackgroundColor?: Color;
112112
inactiveBackgroundColor?: Color;
113+
activeBorderColor?: Color;
114+
activeBackground?: Color;
113115
activeBorderBottomColor?: Color;
114116
activeForegroundColor?: Color;
115117
inactiveForegroundColor?: Color;

‎src/vs/workbench/common/theme.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -335,8 +335,8 @@ export const ACTIVITY_BAR_FOREGROUND = registerColor('activityBar.foreground', {
335335
}, nls.localize('activityBarForeground', "Activity bar item foreground color when it is active. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
336336

337337
export const ACTIVITY_BAR_INACTIVE_FOREGROUND = registerColor('activityBar.inactiveForeground', {
338-
dark: transparent(ACTIVITY_BAR_FOREGROUND, 0.6),
339-
light: transparent(ACTIVITY_BAR_FOREGROUND, 0.6),
338+
dark: transparent(ACTIVITY_BAR_FOREGROUND, 0.4),
339+
light: transparent(ACTIVITY_BAR_FOREGROUND, 0.4),
340340
hc: Color.white
341341
}, nls.localize('activityBarInActiveForeground', "Activity bar item foreground color when it is inactive. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
342342

@@ -346,6 +346,18 @@ export const ACTIVITY_BAR_BORDER = registerColor('activityBar.border', {
346346
hc: contrastBorder
347347
}, nls.localize('activityBarBorder', "Activity bar border color separating to the side bar. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
348348

349+
export const ACTIVITY_BAR_ACTIVE_BORDER = registerColor('activityBar.activeBorder', {
350+
dark: ACTIVITY_BAR_FOREGROUND,
351+
light: ACTIVITY_BAR_FOREGROUND,
352+
hc: ACTIVITY_BAR_FOREGROUND
353+
}, nls.localize('activityBarActiveBorder', "Activity bar border for active items. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
354+
355+
export const ACTIVITY_BAR_ACTIVE_BACKGROUND = registerColor('activityBar.activeBackground', {
356+
dark: transparent(ACTIVITY_BAR_FOREGROUND, 0.1),
357+
light: transparent(ACTIVITY_BAR_FOREGROUND, 0.1),
358+
hc: null
359+
}, nls.localize('activityBarActiveBorder', "Activity bar border for active items. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
360+
349361
export const ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND = registerColor('activityBar.dropBackground', {
350362
dark: Color.white.transparent(0.12),
351363
light: Color.white.transparent(0.12),

0 commit comments

Comments
 (0)