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}
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: ColorToken;
85 secondary: ColorToken;
86 muted: ColorToken;
87 active: ColorToken;
88 /**
89 * Used for rendering borders on top of media like avatars, images, video, etc.
90 */
91 onMedia: ColorToken;
92 ok: ColorToken;
93 error: ColorToken;
94 warning: ColorToken;
95 info: ColorToken;
96 };
97 textColor: {
98 primary: ColorToken;
99 secondary: ColorToken;
100 muted: ColorToken;
101 placeholder: ColorToken;
102 active: ColorToken;
103 feature: ColorToken;
104 ok: ColorToken;
105 error: ColorToken;
106 warning: ColorToken;
107 info: ColorToken;
108 };
109 iconColor: {
110 primary: ColorToken;
111 secondary: ColorToken;
112 muted: ColorToken;
113 placeholder: ColorToken;
114 active: ColorToken;
115 feature: ColorToken;
116 ok: ColorToken;
117 error: ColorToken;
118 warning: ColorToken;
119 info: ColorToken;
120 };
121 editor: {
122 background: ColorToken;
123 indent_guide: ColorToken;
124 indent_guide_active: ColorToken;
125 line: {
126 active: ColorToken;
127 highlighted: ColorToken;
128 };
129 highlight: {
130 selection: ColorToken;
131 occurrence: ColorToken;
132 activeOccurrence: ColorToken;
133 matchingBracket: ColorToken;
134 match: ColorToken;
135 activeMatch: ColorToken;
136 related: ColorToken;
137 };
138 gutter: {
139 primary: ColorToken;
140 active: ColorToken;
141 };
142 };
143
144 syntax: Syntax,
145
146 player: {
147 1: Player;
148 2: Player;
149 3: Player;
150 4: Player;
151 5: Player;
152 6: Player;
153 7: Player;
154 8: Player;
155 };
156 shadowAlpha: NumberToken;
157}