1import { Scale } from "chroma-js";
2import { FontWeight } from "../../common";
3import { withOpacity } from "../../utils/color";
4
5export interface SyntaxHighlightStyle {
6 color: string;
7 weight?: FontWeight;
8 underline?: boolean;
9 italic?: boolean;
10}
11
12export interface Player {
13 baseColor: string;
14 cursorColor: string;
15 selectionColor: string;
16 borderColor: string;
17}
18export function buildPlayer(
19 color: string,
20 cursorOpacity?: number,
21 selectionOpacity?: number,
22 borderOpacity?: number
23) {
24 return {
25 baseColor: color,
26 cursorColor: withOpacity(color, cursorOpacity || 1.0),
27 selectionColor: withOpacity(color, selectionOpacity || 0.24),
28 borderColor: withOpacity(color, borderOpacity || 0.8),
29 };
30}
31
32export interface BackgroundColorSet {
33 base: string;
34 hovered: string;
35 active: string;
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 isLight: boolean;
65 backgroundColor: {
66 // Basically just Title Bar
67 // Lowest background level
68 100: BackgroundColorSet;
69 // Tab bars, panels, popovers
70 // Mid-ground
71 300: BackgroundColorSet;
72 // The editor
73 // Foreground
74 500: BackgroundColorSet;
75 // Hacks for elements on top of the midground
76 // Buttons in a panel, tab bar, or panel
77 on300: BackgroundColorSet;
78 // Hacks for elements on top of the editor
79 on500: BackgroundColorSet;
80 ok: BackgroundColorSet;
81 error: BackgroundColorSet;
82 on500Error: BackgroundColorSet;
83 warning: BackgroundColorSet;
84 on500Warning: BackgroundColorSet;
85 info: BackgroundColorSet;
86 on500Info: BackgroundColorSet;
87 };
88 borderColor: {
89 primary: string;
90 secondary: string;
91 muted: string;
92 active: string;
93 /**
94 * Used for rendering borders on top of media like avatars, images, video, etc.
95 */
96 onMedia: string;
97 ok: string;
98 error: string;
99 warning: string;
100 info: string;
101 };
102 textColor: {
103 primary: string;
104 secondary: string;
105 muted: string;
106 placeholder: string;
107 active: string;
108 feature: string;
109 ok: string;
110 error: string;
111 warning: string;
112 info: string;
113 onMedia: string;
114 };
115 iconColor: {
116 primary: string;
117 secondary: string;
118 muted: string;
119 placeholder: string;
120 active: string;
121 feature: string;
122 ok: string;
123 error: string;
124 warning: string;
125 info: string;
126 };
127 editor: {
128 background: string;
129 indent_guide: string;
130 indent_guide_active: string;
131 line: {
132 active: string;
133 highlighted: string;
134 };
135 highlight: {
136 selection: string;
137 occurrence: string;
138 activeOccurrence: string;
139 matchingBracket: string;
140 match: string;
141 activeMatch: string;
142 related: string;
143 };
144 gutter: {
145 primary: string;
146 active: string;
147 };
148 };
149
150 syntax: Syntax;
151
152 player: {
153 1: Player;
154 2: Player;
155 3: Player;
156 4: Player;
157 5: Player;
158 6: Player;
159 7: Player;
160 8: Player;
161 };
162 shadow: string;
163 ramps: { [rampName: string]: Scale };
164}