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