1import { ColorToken, FontWeightToken, NumberToken } from "../tokens";
2import { withOpacity } from "../utils/color";
3
4export interface SyntaxHighlightStyle {
5 color: ColorToken;
6 weight: FontWeightToken;
7}
8
9export interface Player {
10 baseColor: ColorToken;
11 cursorColor: ColorToken;
12 selectionColor: ColorToken;
13 borderColor: ColorToken;
14}
15export function buildPlayer(
16 color: ColorToken,
17 cursorOpacity?: number,
18 selectionOpacity?: number,
19 borderOpacity?: number
20) {
21 return {
22 baseColor: color,
23 cursorColor: withOpacity(color, cursorOpacity || 1.0),
24 selectionColor: withOpacity(color, selectionOpacity || 0.24),
25 borderColor: withOpacity(color, borderOpacity || 0.8),
26 }
27}
28
29export interface BackgroundColorSet {
30 base: ColorToken;
31 hovered: ColorToken;
32 active: ColorToken;
33 focused: ColorToken;
34}
35
36export interface Syntax {
37 primary: SyntaxHighlightStyle;
38 comment: SyntaxHighlightStyle;
39 punctuation: SyntaxHighlightStyle;
40 constant: SyntaxHighlightStyle;
41 keyword: SyntaxHighlightStyle;
42 function: SyntaxHighlightStyle;
43 type: SyntaxHighlightStyle;
44 variant: SyntaxHighlightStyle;
45 property: SyntaxHighlightStyle;
46 enum: SyntaxHighlightStyle;
47 operator: SyntaxHighlightStyle;
48 string: SyntaxHighlightStyle;
49 number: SyntaxHighlightStyle;
50 boolean: SyntaxHighlightStyle;
51 predictive: SyntaxHighlightStyle;
52 // TODO: Either move the following or rename
53 title: SyntaxHighlightStyle;
54 emphasis: SyntaxHighlightStyle;
55 emphasisStrong: SyntaxHighlightStyle;
56 linkUrl: SyntaxHighlightStyle;
57 linkText: SyntaxHighlightStyle;
58};
59
60export default interface Theme {
61 name: string;
62 backgroundColor: {
63 100: BackgroundColorSet;
64 300: BackgroundColorSet;
65 500: BackgroundColorSet;
66 on300: BackgroundColorSet;
67 on500: BackgroundColorSet;
68 ok: BackgroundColorSet;
69 error: BackgroundColorSet;
70 warning: BackgroundColorSet;
71 info: BackgroundColorSet;
72 };
73 borderColor: {
74 primary: ColorToken;
75 secondary: ColorToken;
76 muted: ColorToken;
77 focused: ColorToken;
78 active: ColorToken;
79 ok: ColorToken;
80 error: ColorToken;
81 warning: ColorToken;
82 info: ColorToken;
83 };
84 textColor: {
85 primary: ColorToken;
86 secondary: ColorToken;
87 muted: ColorToken;
88 placeholder: ColorToken;
89 active: ColorToken;
90 feature: ColorToken;
91 ok: ColorToken;
92 error: ColorToken;
93 warning: ColorToken;
94 info: ColorToken;
95 };
96 iconColor: {
97 primary: ColorToken;
98 secondary: ColorToken;
99 muted: ColorToken;
100 placeholder: ColorToken;
101 active: ColorToken;
102 feature: ColorToken;
103 ok: ColorToken;
104 error: ColorToken;
105 warning: ColorToken;
106 info: ColorToken;
107 };
108 editor: {
109 background: ColorToken;
110 indent_guide: ColorToken;
111 indent_guide_active: ColorToken;
112 line: {
113 active: ColorToken;
114 highlighted: ColorToken;
115 inserted: ColorToken;
116 deleted: ColorToken;
117 modified: ColorToken;
118 };
119 highlight: {
120 selection: ColorToken;
121 occurrence: ColorToken;
122 activeOccurrence: ColorToken;
123 matchingBracket: ColorToken;
124 match: ColorToken;
125 activeMatch: ColorToken;
126 related: ColorToken;
127 };
128 gutter: {
129 primary: ColorToken;
130 active: ColorToken;
131 };
132 };
133
134 syntax: Syntax,
135
136 player: {
137 1: Player;
138 2: Player;
139 3: Player;
140 4: Player;
141 5: Player;
142 6: Player;
143 7: Player;
144 8: Player;
145 };
146 shadowAlpha: NumberToken;
147}