Skip to content

Commit 7c0d5d8

Browse files
giladgraygiladgray
authored
Merge pull request #3 from giladgray/ui-colors
UI colors for editor
2 parents 33b5519 + d334b28 commit 7c0d5d8

File tree

5 files changed

+287
-48
lines changed

5 files changed

+287
-48
lines changed

‎src/index.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { writeFileSync } from "fs";
22

33
import * as Scopes from "./scopes";
4-
import settings from "./settings";
4+
import uiColors from "./uiColors";
55

66
interface IRule {
77
name?: string;
@@ -26,7 +26,8 @@ const fontStyles = Object.keys(Scopes.fontStyles).map<IRule>(fontStyle => ({
2626
const themeJson = {
2727
name: "Blueprint",
2828
type: "dark",
29-
tokenColors: [{ settings }, ...foregrounds, ...fontStyles],
29+
colors: uiColors,
30+
tokenColors: [...foregrounds, ...fontStyles],
3031
};
3132

3233
writeFileSync("themes/Blueprint-color-theme.json", JSON.stringify(themeJson, null, 2));

‎src/scopes.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export const fontStyles: Record<string, string[]> = {
109109
"entity.name.type.interface", // interface [IProps]
110110
"meta.interface entity.other.inherited-class", // extends [IProps]
111111
],
112-
normal: [
112+
"": [
113113
// revert a few special cases in type signatures
114114
"meta.type keyword.control", // [export] type
115115
"meta.type storage.type.type", // export [type]

‎src/settings.ts‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎src/uiColors.ts‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
import { COMMENT, PUNCTUATION, TEXT } from "./aliases";
2+
import * as Colors from "./colors";
3+
4+
/** Set alpha channel of 6-digit hex string. */
5+
const hexA = (hex: string, alpha: number) => hex + Math.round(alpha * 255).toString(16);
6+
/** Color with some alpha, suitable for background use. */
7+
const bg = (hex: string) => hexA(hex, 0.3);
8+
/** Color with less alpha, suitable for _emphasized_ background use. */
9+
const bgBright = (hex: string) => hexA(hex, 0.6);
10+
11+
// background colors
12+
const BACKGROUND = Colors.DARK_GRAY1;
13+
const BACKGROUND_LIGHT = Colors.DARK_GRAY2;
14+
const BACKGROUND_BRIGHT = Colors.DARK_GRAY3;
15+
16+
// primary color, used for focus and selection
17+
const PRIMARY_DARK = Colors.BLUE1;
18+
const PRIMARY = Colors.BLUE3;
19+
const PRIMARY_LIGHT = Colors.BLUE4;
20+
21+
// other intents
22+
const ERROR = Colors.RED3;
23+
const WARNING = Colors.ORANGE3;
24+
25+
// diff colors
26+
const ADDED = Colors.GREEN2;
27+
const CHANGED = Colors.ORANGE2;
28+
const REMOVED = Colors.RED2;
29+
30+
// editor states
31+
const MATCH = Colors.FOREST1;
32+
const HOVER = Colors.DARK_GRAY5;
33+
34+
// border colors
35+
const BORDER = Colors.DARK_GRAY4;
36+
const BORDER_DARK = Colors.DARK_GRAY3;
37+
const DIVIDER_BLACK = bg(Colors.BLACK);
38+
39+
const { BLACK, WHITE } = Colors;
40+
41+
export default {
42+
// Base Colors
43+
// Overall border color for focused elements. This color is only used if not overridden by a component.
44+
focusBorder: Colors.BLUE2,
45+
// Overall foreground color. This color is only used if not overridden by a component.
46+
foreground: TEXT,
47+
// Shadow color of widgets such as Find/Replace inside the editor.
48+
"widget.shadow": BLACK,
49+
// Background color of text selections in the workbench (for input fields or text areas, does not apply to selections within the editor and the terminal).
50+
"selection.background": PRIMARY_LIGHT,
51+
// Foreground color for description text providing additional information, for example for a label.
52+
descriptionForeground: TEXT,
53+
// Overall foreground color for error messages (this color is only used if not overridden by a component).
54+
errorForeground: ERROR,
55+
"badge.background": PRIMARY,
56+
57+
// button
58+
"button.background": PRIMARY,
59+
"button.foreground": WHITE,
60+
"button.hoverBackground": PRIMARY_LIGHT,
61+
62+
// input
63+
"input.background": DIVIDER_BLACK,
64+
"input.border": BORDER,
65+
"input.placeholderForeground": "#bfccd680",
66+
"inputOption.activeBorder": PRIMARY_LIGHT,
67+
"inputValidation.errorBorder": ERROR,
68+
"inputValidation.infoBorder": PRIMARY,
69+
"inputValidation.warningBorder": WARNING,
70+
71+
// lists/trees
72+
"list.activeSelectionForeground": WHITE,
73+
"list.activeSelectionBackground": PRIMARY_DARK,
74+
"list.hoverBackground": BACKGROUND_LIGHT,
75+
"list.inactiveSelectionBackground": bg(PRIMARY_DARK),
76+
77+
// scrollbar
78+
"scrollbar.shadow": BLACK,
79+
"scrollbarSlider.background": hexA(COMMENT, 0.2),
80+
"scrollbarSlider.hoverBackground": hexA(COMMENT, 0.4),
81+
"scrollbarSlider.activeBackground": hexA(COMMENT, 0.6),
82+
83+
// activity bar (far left)
84+
"activityBar.background": BACKGROUND_BRIGHT,
85+
86+
// sidebar (near left)
87+
"sideBar.background": BACKGROUND,
88+
"sideBar.border": BORDER,
89+
"sideBarSectionHeader.background": BACKGROUND_LIGHT,
90+
91+
// tabs (up top)
92+
"editorGroupHeader.tabsBackground": BACKGROUND,
93+
"tab.inactiveBackground": BACKGROUND_LIGHT,
94+
"tab.activeBackground": BACKGROUND_BRIGHT,
95+
"tab.activeBorder": PRIMARY,
96+
"tab.border": BORDER,
97+
"editorGroupHeader.tabsBorder": BORDER,
98+
99+
// panels (bottom)
100+
"panel.border": BORDER,
101+
"panelTitle.activeBorder": PRIMARY,
102+
103+
// Status bar (along bottom edge)
104+
"statusBar.background": PRIMARY,
105+
"statusBar.foreground": WHITE,
106+
"statusBar.debuggingBackground": Colors.ROSE3,
107+
"statusBar.noFolderBackground": Colors.INDIGO3,
108+
// Status Bar prominent items background color.
109+
// Prominent items stand out from other Status Bar entries to indicate importance. Change mode Toggle Tab Key Moves Focus from command palette to see an example.
110+
"statusBarItem.prominentBackground": WARNING,
111+
"statusBarItem.prominentHoverBackground": Colors.ORANGE4,
112+
113+
// editor
114+
"editor.background": BLACK,
115+
"editor.lineHighlightBackground": BACKGROUND_LIGHT,
116+
"editor.selectionBackground": bgBright(PRIMARY),
117+
"editor.selectionHighlightBackground": bg(PRIMARY),
118+
"editorIndentGuide.background": BORDER_DARK,
119+
"editorRuler.foreground": BORDER_DARK,
120+
"editorCursor.foreground": PUNCTUATION,
121+
"editorLineNumber.foreground": Colors.DARK_GRAY5,
122+
"editorLink.activeForeground": PRIMARY_LIGHT,
123+
124+
// Find matches: orange
125+
// Color of the current search match.
126+
"editor.findMatchBackground": MATCH,
127+
// Color of the other search matches. The color must not be opaque to not hide underlying decorations.
128+
"editor.findMatchHighlightBackground": bg(MATCH),
129+
// Background color of editor widgets, such as Find/Replace.
130+
"editorWidget.background": BLACK,
131+
"editorWidget.border": bgBright(MATCH),
132+
133+
// Suggestions: indigo
134+
// Background color of the suggestion widget.
135+
"editorSuggestWidget.background": BLACK,
136+
// Border color of the suggestion widget.
137+
"editorSuggestWidget.border": Colors.INDIGO1,
138+
// Color of the match highlights in the suggestion widget.
139+
"editorSuggestWidget.highlightForeground": Colors.INDIGO3,
140+
// Background color of the selected entry in the suggestion widget.
141+
"editorSuggestWidget.selectedBackground": bg(PRIMARY_DARK),
142+
143+
// Background of hovered word, and border of hover tooltip
144+
"editor.hoverHighlightBackground": HOVER,
145+
"editorHoverWidget.border": HOVER,
146+
147+
// Color for matching brackets boxes.
148+
"editorBracketMatch.border": PRIMARY,
149+
150+
// Git Colors
151+
// Background color for text that got inserted.
152+
"diffEditor.insertedTextBackground": bg(ADDED),
153+
// Background color for text that got removed.
154+
"diffEditor.removedTextBackground": bg(REMOVED),
155+
156+
// Foreground color of editor squiggles
157+
"editorError.foreground": ERROR,
158+
"editorWarning.foreground": WARNING,
159+
"editorInfo.foreground": PRIMARY,
160+
161+
// Three lanes under the scrollbar
162+
"editorOverviewRuler.border": BORDER,
163+
"editorOverviewRuler.addedForeground": ADDED,
164+
"editorOverviewRuler.deletedForeground": REMOVED,
165+
"editorOverviewRuler.errorForeground": ERROR,
166+
"editorOverviewRuler.warningForeground": WARNING,
167+
"editorOverviewRuler.infoForeground": PRIMARY,
168+
169+
// Editor gutter background color (next to line numbers)
170+
"editorGutter.modifiedBackground": PRIMARY,
171+
"editorGutter.addedBackground": ADDED,
172+
"editorGutter.deletedBackground": REMOVED,
173+
174+
// Color for git resources in file tree and source control.
175+
"gitDecoration.modifiedResourceForeground": Colors.ORANGE4,
176+
"gitDecoration.deletedResourceForeground": Colors.RED4,
177+
"gitDecoration.untrackedResourceForeground": Colors.GREEN4,
178+
"gitDecoration.ignoredResourceForeground": Colors.GRAY3,
179+
"gitDecoration.conflictingResourceForeground": Colors.INDIGO4,
180+
181+
"debugToolBar.background": bgBright(Colors.ROSE1),
182+
183+
"welcomePage.buttonBackground": BACKGROUND,
184+
"welcomePage.buttonHoverBackground": BACKGROUND_LIGHT,
185+
};
186+
187+
// UNSTYLED:
188+
// peek view
189+
// merge ranges
190+
// status bar
191+
// title bar (macOS)
192+
// notifications
193+
// quick picker
194+
// extensions
195+
// terminal

‎themes/Blueprint-color-theme.json‎

Lines changed: 88 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,94 @@
11
{
22
"name": "Blueprint",
33
"type": "dark",
4+
"colors": {
5+
"focusBorder": "#106BA3",
6+
"foreground": "#BFCCD6",
7+
"widget.shadow": "#10161A",
8+
"selection.background": "#2B95D6",
9+
"descriptionForeground": "#BFCCD6",
10+
"errorForeground": "#DB3737",
11+
"badge.background": "#137CBD",
12+
"button.background": "#137CBD",
13+
"button.foreground": "#FFFFFF",
14+
"button.hoverBackground": "#2B95D6",
15+
"input.background": "#10161A4d",
16+
"input.border": "#30404D",
17+
"input.placeholderForeground": "#bfccd680",
18+
"inputOption.activeBorder": "#2B95D6",
19+
"inputValidation.errorBorder": "#DB3737",
20+
"inputValidation.infoBorder": "#137CBD",
21+
"inputValidation.warningBorder": "#D9822B",
22+
"list.activeSelectionForeground": "#FFFFFF",
23+
"list.activeSelectionBackground": "#0E5A8A",
24+
"list.hoverBackground": "#202B33",
25+
"list.inactiveSelectionBackground": "#0E5A8A4d",
26+
"scrollbar.shadow": "#10161A",
27+
"scrollbarSlider.background": "#73869433",
28+
"scrollbarSlider.hoverBackground": "#73869466",
29+
"scrollbarSlider.activeBackground": "#73869499",
30+
"activityBar.background": "#293742",
31+
"sideBar.background": "#182026",
32+
"sideBar.border": "#30404D",
33+
"sideBarSectionHeader.background": "#202B33",
34+
"editorGroupHeader.tabsBackground": "#182026",
35+
"tab.inactiveBackground": "#202B33",
36+
"tab.activeBackground": "#293742",
37+
"tab.activeBorder": "#137CBD",
38+
"tab.border": "#30404D",
39+
"editorGroupHeader.tabsBorder": "#30404D",
40+
"panel.border": "#30404D",
41+
"panelTitle.activeBorder": "#137CBD",
42+
"editor.background": "#10161A",
43+
"editor.lineHighlightBackground": "#202B33",
44+
"editor.selectionBackground": "#137CBD99",
45+
"editor.selectionHighlightBackground": "#137CBD4d",
46+
"editorIndentGuide.background": "#293742",
47+
"editorRuler.foreground": "#293742",
48+
"editorCursor.foreground": "#F5F8FA",
49+
"editorLineNumber.foreground": "#394B59",
50+
"editorLink.activeForeground": "#2B95D6",
51+
"editor.findMatchBackground": "#1D7324",
52+
"editor.findMatchHighlightBackground": "#1D73244d",
53+
"editorWidget.background": "#10161A",
54+
"editorWidget.border": "#1D732499",
55+
"editorSuggestWidget.background": "#10161A",
56+
"editorSuggestWidget.border": "#5642A6",
57+
"editorSuggestWidget.highlightForeground": "#7157D9",
58+
"editorSuggestWidget.selectedBackground": "#0E5A8A4d",
59+
"editor.hoverHighlightBackground": "#394B59",
60+
"editorHoverWidget.border": "#394B59",
61+
"editorBracketMatch.border": "#137CBD",
62+
"diffEditor.insertedTextBackground": "#0D80504d",
63+
"diffEditor.removedTextBackground": "#C230304d",
64+
"editorError.foreground": "#DB3737",
65+
"editorWarning.foreground": "#D9822B",
66+
"editorInfo.foreground": "#137CBD",
67+
"editorOverviewRuler.border": "#30404D",
68+
"editorOverviewRuler.addedForeground": "#0D8050",
69+
"editorOverviewRuler.deletedForeground": "#C23030",
70+
"editorOverviewRuler.errorForeground": "#DB3737",
71+
"editorOverviewRuler.warningForeground": "#D9822B",
72+
"editorOverviewRuler.infoForeground": "#137CBD",
73+
"editorGutter.modifiedBackground": "#137CBD",
74+
"editorGutter.addedBackground": "#0D8050",
75+
"editorGutter.deletedBackground": "#C23030",
76+
"gitDecoration.modifiedResourceForeground": "#F29D49",
77+
"gitDecoration.deletedResourceForeground": "#F55656",
78+
"gitDecoration.untrackedResourceForeground": "#15B371",
79+
"gitDecoration.ignoredResourceForeground": "#8A9BA8",
80+
"gitDecoration.conflictingResourceForeground": "#9179F2",
81+
"debugToolBar.background": "#A8225599",
82+
"welcomePage.buttonBackground": "#182026",
83+
"welcomePage.buttonHoverBackground": "#202B33",
84+
"statusBar.background": "#137CBD",
85+
"statusBar.foreground": "#FFFFFF",
86+
"statusBar.debuggingBackground": "#DB2C6F",
87+
"statusBar.noFolderBackground": "#7157D9",
88+
"statusBarItem.prominentBackground": "#D9822B",
89+
"statusBarItem.prominentHoverBackground": "#F29D49"
90+
},
491
"tokenColors": [
5-
{
6-
"settings": {
7-
"background": "#182026",
8-
"caret": "#F5F8FA",
9-
"foreground": "#BFCCD6",
10-
"invisibles": "#394B59",
11-
"lineHighlight": "#293742",
12-
"selection": "#106BA3",
13-
"findHighlight": "#FFE792",
14-
"findHighlightForeground": "#10161A",
15-
"selectionBorder": "#222218",
16-
"activeGuide": "#9D550FB0",
17-
"bracketsForeground": "#48AFF0",
18-
"bracketsOptions": "underline",
19-
"bracketContentsForeground": "#48AFF0",
20-
"bracketContentsOptions": "underline",
21-
"tagsOptions": "stippled_underline"
22-
}
23-
},
2492
{
2593
"scope": [
2694
"punctuation.definition",
@@ -205,7 +273,7 @@
205273
"meta.type storage.type.type"
206274
],
207275
"settings": {
208-
"fontStyle": "normal"
276+
"fontStyle": ""
209277
}
210278
}
211279
]

0 commit comments

Comments
 (0)