Clean up workbench color definitions

This commit is contained in:
Daniel Imms
2017-05-04 09:00:38 -07:00
parent 60ac743f16
commit 46adbaa10e
2 changed files with 28 additions and 17 deletions

View File

@@ -27,6 +27,17 @@ export function darken(color: string, amount: number): string {
return lighten(color, -amount); return lighten(color, -amount);
} }
export function addAlpha(color: string, alpha: number): string {
if (color.length !== 7) {
throw new Error('addAlpha only supports adding to #rrggbb format colors');
}
let alphaHex = Math.round(alpha * 255).toString(16);
if (alphaHex.length === 1) {
alphaHex = '0' + alphaHex;
}
return color + alphaHex;
}
export function generateFallbackColorSet(s: IBaseColorSet): IColorSet { export function generateFallbackColorSet(s: IBaseColorSet): IColorSet {
return { return {
base: { base: {

View File

@@ -1,5 +1,5 @@
import { IColorSet, IThemeGenerator, IBaseColorSet } from './interfaces' import { IColorSet, IThemeGenerator, IBaseColorSet } from './interfaces'
import { darken, lighten, generateFallbackColorSet } from './color'; import { darken, lighten, generateFallbackColorSet, addAlpha } from './color';
import { tokenRules, terminalRules, colorRules, globalRules, IVscodeJsonThemeSetting } from './rules'; import { tokenRules, terminalRules, colorRules, globalRules, IVscodeJsonThemeSetting } from './rules';
export interface IVscodeJsonTheme { export interface IVscodeJsonTheme {
@@ -70,7 +70,7 @@ export class VscodeThemeGenerator implements IThemeGenerator {
theme.colors['activityBar.background'] = background4; theme.colors['activityBar.background'] = background4;
theme.colors['activityBar.badge.background'] = colorSet.base.color1; theme.colors['activityBar.badge.background'] = colorSet.base.color1;
theme.colors['debugToolBar.background'] = background4; theme.colors['debugToolBar.background'] = background4;
theme.colors['sideBarSectionHeader.background'] = theme.colors['activityBar.background']; theme.colors['sideBarSectionHeader.background'] = background4;
theme.colors['input.background'] = background5; theme.colors['input.background'] = background5;
theme.colors['dropdown.background'] = background5; theme.colors['dropdown.background'] = background5;
theme.colors['titleBar.activeBackground'] = background1; theme.colors['titleBar.activeBackground'] = background1;
@@ -87,26 +87,26 @@ export class VscodeThemeGenerator implements IThemeGenerator {
theme.colors['editorMarkerNavigation.background'] = background3; theme.colors['editorMarkerNavigation.background'] = background3;
// Transparent white to leverage underlying background color // Transparent white to leverage underlying background color
theme.colors['list.activeSelectionBackground'] = colorSet.base.color1 + '80'; theme.colors['list.activeSelectionBackground'] = addAlpha(colorSet.base.color1, 0.5);
theme.colors['list.dropBackground'] = colorSet.base.color1 + '80'; theme.colors['list.dropBackground'] = addAlpha(colorSet.base.color1, 0.5);
theme.colors['list.focusBackground'] = colorSet.base.color1 + '80'; theme.colors['list.focusBackground'] = addAlpha(colorSet.base.color1, 0.5);
theme.colors['list.hoverBackground'] = '#FFFFFF1A'; theme.colors['list.hoverBackground'] = addAlpha('#FFFFFF', 0.1);
theme.colors['list.inactiveSelectionBackground'] = '#FFFFFF33'; theme.colors['list.inactiveSelectionBackground'] = addAlpha('#FFFFFF', 0.2);
theme.colors['editor.lineHighlightBorder'] = '#FFFFFF1A'; theme.colors['editor.lineHighlightBorder'] = addAlpha('#FFFFFF', 0.1);
theme.colors['editor.rangeHighlightBackground'] = '#FFFFFF0D'; theme.colors['editor.rangeHighlightBackground'] = addAlpha('#FFFFFF', 0.5);
// TODO: Support editorLineHighlight // TODO: Support editorLineHighlight
theme.colors['editorGroup.dropBackground'] = colorSet.base.color1 + '80'; theme.colors['editorGroup.dropBackground'] = addAlpha(colorSet.base.color1, 0.5);
theme.colors['activityBar.dropBackground'] = colorSet.base.color1 + '80'; theme.colors['activityBar.dropBackground'] = addAlpha(colorSet.base.color1, 0.5);
theme.colors['panelTitle.activeBorder'] = colorSet.base.color1; theme.colors['panelTitle.activeBorder'] = colorSet.base.color1;
theme.colors['inputOption.activeBorder'] = colorSet.base.color1; theme.colors['inputOption.activeBorder'] = colorSet.base.color1;
theme.colors['statusBarItem.hoverBackground'] = '#FFFFFF1A'; theme.colors['statusBarItem.hoverBackground'] = addAlpha('#FFFFFF', 0.1);
theme.colors['statusBarItem.activeBackground'] = colorSet.base.color1 + '80'; theme.colors['statusBarItem.activeBackground'] = addAlpha(colorSet.base.color1, 0.5);
theme.colors['pickerGroup.border'] = '#FFFFFF1A'; theme.colors['pickerGroup.border'] = addAlpha('#FFFFFF', 0.1);
theme.colors['panel.border'] = '#FFFFFF1A'; theme.colors['panel.border'] = addAlpha('#FFFFFF', 0.1);
theme.colors['tab.border'] = '#00000033'; theme.colors['tab.border'] = addAlpha('#000000', 0.2);
theme.colors['editorLineNumber.foreground'] = '#FFFFFF4D'; theme.colors['editorLineNumber.foreground'] = addAlpha('#FFFFFF', 0.3);
return JSON.stringify(theme, null, 2); return JSON.stringify(theme, null, 2);
} }