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