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 onMedia: ColorToken;
109 };
110 iconColor: {
111 primary: ColorToken;
112 secondary: ColorToken;
113 muted: ColorToken;
114 placeholder: ColorToken;
115 active: ColorToken;
116 feature: ColorToken;
117 ok: ColorToken;
118 error: ColorToken;
119 warning: ColorToken;
120 info: ColorToken;
121 };
122 editor: {
123 background: ColorToken;
124 indent_guide: ColorToken;
125 indent_guide_active: ColorToken;
126 line: {
127 active: ColorToken;
128 highlighted: ColorToken;
129 };
130 highlight: {
131 selection: ColorToken;
132 occurrence: ColorToken;
133 activeOccurrence: ColorToken;
134 matchingBracket: ColorToken;
135 match: ColorToken;
136 activeMatch: ColorToken;
137 related: ColorToken;
138 };
139 gutter: {
140 primary: ColorToken;
141 active: ColorToken;
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 shadowAlpha: NumberToken;
158}