1import { ColorToken, FontWeightToken, NumberToken } from "../tokens";
2import { withOpacity } from "../utils/color";
3
4export interface SyntaxHighlightStyle {
5 color: ColorToken;
6 weight?: FontWeightToken;
7 underline?: boolean,
8 italic?: boolean,
9}
10
11export interface Player {
12 baseColor: ColorToken;
13 cursorColor: ColorToken;
14 selectionColor: ColorToken;
15 borderColor: ColorToken;
16}
17export function buildPlayer(
18 color: ColorToken,
19 cursorOpacity?: number,
20 selectionOpacity?: number,
21 borderOpacity?: number
22) {
23 return {
24 baseColor: color,
25 cursorColor: withOpacity(color, cursorOpacity || 1.0),
26 selectionColor: withOpacity(color, selectionOpacity || 0.24),
27 borderColor: withOpacity(color, borderOpacity || 0.8),
28 }
29}
30
31export interface BackgroundColorSet {
32 base: ColorToken;
33 hovered: ColorToken;
34 active: ColorToken;
35 focused: ColorToken;
36}
37
38export interface Syntax {
39 primary: SyntaxHighlightStyle;
40 comment: SyntaxHighlightStyle;
41 punctuation: SyntaxHighlightStyle;
42 constant: SyntaxHighlightStyle;
43 keyword: SyntaxHighlightStyle;
44 function: SyntaxHighlightStyle;
45 type: SyntaxHighlightStyle;
46 variant: SyntaxHighlightStyle;
47 property: SyntaxHighlightStyle;
48 enum: SyntaxHighlightStyle;
49 operator: SyntaxHighlightStyle;
50 string: SyntaxHighlightStyle;
51 number: SyntaxHighlightStyle;
52 boolean: SyntaxHighlightStyle;
53 predictive: SyntaxHighlightStyle;
54 title: SyntaxHighlightStyle;
55 emphasis: SyntaxHighlightStyle;
56 linkUri: SyntaxHighlightStyle;
57 linkText: SyntaxHighlightStyle;
58
59 [key: string]: SyntaxHighlightStyle;
60};
61
62export default interface Theme {
63 name: string;
64 backgroundColor: {
65 // Basically just Title Bar
66 // Lowest background level
67 100: BackgroundColorSet;
68 // Tab bars, panels, popovers
69 // Mid-ground
70 300: BackgroundColorSet;
71 // The editor
72 // Foreground
73 500: BackgroundColorSet;
74 // Hacks for elements on top of the midground
75 // Buttons in a panel, tab bar, or panel
76 on300: BackgroundColorSet;
77 // Hacks for elements on top of the editor
78 on500: BackgroundColorSet;
79 ok: BackgroundColorSet;
80 error: BackgroundColorSet;
81 warning: BackgroundColorSet;
82 info: BackgroundColorSet;
83 };
84 borderColor: {
85 primary: ColorToken;
86 secondary: ColorToken;
87 muted: ColorToken;
88 focused: ColorToken;
89 active: ColorToken;
90 /**
91 * Used for rendering borders on top of media like avatars, images, video, etc.
92 */
93 onMedia: ColorToken;
94 ok: ColorToken;
95 error: ColorToken;
96 warning: ColorToken;
97 info: ColorToken;
98 };
99 textColor: {
100 primary: ColorToken;
101 secondary: ColorToken;
102 muted: ColorToken;
103 placeholder: ColorToken;
104 active: ColorToken;
105 feature: ColorToken;
106 ok: ColorToken;
107 error: ColorToken;
108 warning: ColorToken;
109 info: ColorToken;
110 };
111 iconColor: {
112 primary: ColorToken;
113 secondary: ColorToken;
114 muted: ColorToken;
115 placeholder: ColorToken;
116 active: ColorToken;
117 feature: ColorToken;
118 ok: ColorToken;
119 error: ColorToken;
120 warning: ColorToken;
121 info: ColorToken;
122 };
123 editor: {
124 background: ColorToken;
125 indent_guide: ColorToken;
126 indent_guide_active: ColorToken;
127 line: {
128 active: ColorToken;
129 highlighted: ColorToken;
130 inserted: ColorToken;
131 deleted: ColorToken;
132 modified: ColorToken;
133 };
134 highlight: {
135 selection: ColorToken;
136 occurrence: ColorToken;
137 activeOccurrence: ColorToken;
138 matchingBracket: ColorToken;
139 match: ColorToken;
140 activeMatch: ColorToken;
141 related: ColorToken;
142 };
143 gutter: {
144 primary: ColorToken;
145 active: ColorToken;
146 };
147 };
148
149 syntax: Syntax,
150
151 player: {
152 1: Player;
153 2: Player;
154 3: Player;
155 4: Player;
156 5: Player;
157 6: Player;
158 7: Player;
159 8: Player;
160 };
161 shadowAlpha: NumberToken;
162}