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