1import { ColorToken, FontWeightToken, NumberToken } from "../tokens";
2import { withOpacity } from "../utils/color";
3
4export interface SyntaxHighlightStyle {
5 color: ColorToken;
6 weight: FontWeightToken;
7}
8
9export interface Player {
10 baseColor: ColorToken;
11 cursorColor: ColorToken;
12 selectionColor: ColorToken;
13 borderColor: ColorToken;
14}
15export function buildPlayer(
16 color: ColorToken,
17 cursorOpacity?: number,
18 selectionOpacity?: number,
19 borderOpacity?: number
20) {
21 return {
22 baseColor: color,
23 cursorColor: withOpacity(color, cursorOpacity || 1.0),
24 selectionColor: withOpacity(color, selectionOpacity || 0.24),
25 borderColor: withOpacity(color, borderOpacity || 0.8),
26 }
27}
28
29export interface BackgroundColorSet {
30 base: ColorToken;
31 hovered: ColorToken;
32 active: ColorToken;
33 focused: ColorToken;
34}
35
36export interface Syntax {
37 primary: SyntaxHighlightStyle;
38 comment: SyntaxHighlightStyle;
39 punctuation: SyntaxHighlightStyle;
40 constant: SyntaxHighlightStyle;
41 keyword: SyntaxHighlightStyle;
42 function: SyntaxHighlightStyle;
43 type: SyntaxHighlightStyle;
44 variant: SyntaxHighlightStyle;
45 property: SyntaxHighlightStyle;
46 enum: SyntaxHighlightStyle;
47 operator: SyntaxHighlightStyle;
48 string: SyntaxHighlightStyle;
49 number: SyntaxHighlightStyle;
50 boolean: SyntaxHighlightStyle;
51 predictive: SyntaxHighlightStyle;
52 // TODO: Either move the following or rename
53 title: SyntaxHighlightStyle;
54 emphasis: SyntaxHighlightStyle;
55 emphasisStrong: SyntaxHighlightStyle;
56 linkUrl: SyntaxHighlightStyle;
57 linkText: SyntaxHighlightStyle;
58};
59
60export default interface Theme {
61 name: string;
62 backgroundColor: {
63 100: BackgroundColorSet;
64 300: BackgroundColorSet;
65 500: BackgroundColorSet;
66 ok: BackgroundColorSet;
67 error: BackgroundColorSet;
68 warning: BackgroundColorSet;
69 info: BackgroundColorSet;
70 };
71 borderColor: {
72 primary: ColorToken;
73 secondary: ColorToken;
74 muted: ColorToken;
75 focused: ColorToken;
76 active: ColorToken;
77 ok: ColorToken;
78 error: ColorToken;
79 warning: ColorToken;
80 info: ColorToken;
81 };
82 textColor: {
83 primary: ColorToken;
84 secondary: ColorToken;
85 muted: ColorToken;
86 placeholder: ColorToken;
87 active: ColorToken;
88 feature: ColorToken;
89 ok: ColorToken;
90 error: ColorToken;
91 warning: ColorToken;
92 info: ColorToken;
93 };
94 iconColor: {
95 primary: ColorToken;
96 secondary: ColorToken;
97 muted: ColorToken;
98 placeholder: ColorToken;
99 active: ColorToken;
100 feature: ColorToken;
101 ok: ColorToken;
102 error: ColorToken;
103 warning: ColorToken;
104 info: ColorToken;
105 };
106 editor: {
107 background: ColorToken;
108 indent_guide: ColorToken;
109 indent_guide_active: ColorToken;
110 line: {
111 active: ColorToken;
112 highlighted: ColorToken;
113 inserted: ColorToken;
114 deleted: ColorToken;
115 modified: ColorToken;
116 };
117 highlight: {
118 selection: ColorToken;
119 occurrence: ColorToken;
120 activeOccurrence: ColorToken;
121 matchingBracket: ColorToken;
122 match: ColorToken;
123 activeMatch: ColorToken;
124 related: ColorToken;
125 };
126 gutter: {
127 primary: ColorToken;
128 active: ColorToken;
129 };
130 };
131
132 syntax: Syntax,
133
134 player: {
135 1: Player;
136 2: Player;
137 3: Player;
138 4: Player;
139 5: Player;
140 6: Player;
141 7: Player;
142 8: Player;
143 };
144 shadowAlpha: NumberToken;
145}