UNPKG

handsontable

Version:

Handsontable is a JavaScript Data Grid available for React, Angular and Vue.

handsontable.com

handsontable/handsontable

328 lines (324 loc) • 21.7 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
.ht-theme-main, .ht-theme-main-dark, .ht-theme-main-dark-auto { --ht-sizing-size-0: 0px; --ht-sizing-size-0-5: 2px; --ht-sizing-size-1: 4px; --ht-sizing-size-2: 8px; --ht-sizing-size-1-5: 6px; --ht-sizing-size-3: 12px; --ht-sizing-size-4: 16px; --ht-sizing-size-5: 20px; --ht-sizing-size-6: 24px; --ht-sizing-size-7: 28px; --ht-sizing-size-8: 32px; --ht-sizing-size-9: 36px; --ht-sizing-size-10: 40px; --ht-sizing-size-0-25: 1px; --ht-density-cell-vertical: var(--ht-sizing-size-1); --ht-density-cell-horizontal: var(--ht-sizing-size-2); --ht-density-bars-horizontal: var(--ht-sizing-size-4); --ht-density-bars-vertical: var(--ht-sizing-size-2); --ht-density-gap: var(--ht-sizing-size-1); --ht-density-button-horizontal: var(--ht-sizing-size-3); --ht-density-button-vertical: var(--ht-sizing-size-1-5); --ht-density-dialog-horizontal: var(--ht-sizing-size-2); --ht-density-dialog-vertical: var(--ht-sizing-size-2); --ht-density-input-horizontal: var(--ht-sizing-size-3); --ht-density-input-vertical: var(--ht-sizing-size-1-5); --ht-density-menu-vertical: var(--ht-sizing-size-2); --ht-density-menu-horizontal: var(--ht-sizing-size-0); --ht-density-menu-item-vertical: var(--ht-sizing-size-1); --ht-density-menu-item-horizontal: var(--ht-sizing-size-3); --ht-colors-white: #ffffffff; --ht-colors-black: #000000ff; --ht-colors-primary-100: #6180ffff; --ht-colors-primary-200: #5573f0ff; --ht-colors-primary-300: #4669f6ff; --ht-colors-primary-400: #2e56fcff; --ht-colors-primary-500: #1a42e8ff; --ht-colors-primary-600: #1535bcff; --ht-colors-palette-50: #f7f7f9ff; --ht-colors-palette-100: #e7e7e9ff; --ht-colors-palette-200: #b9b9bbff; --ht-colors-palette-300: #a3a3a3ff; --ht-colors-palette-400: #68696cff; --ht-colors-palette-500: #404144ff; --ht-colors-palette-600: #313132ff; --ht-colors-palette-700: #282829ff; --ht-colors-palette-800: #222222ff; --ht-colors-palette-900: #1e1e1fff; --ht-colors-palette-950: #050506ff; --ht-colors-transparent: #ffffff00; --ht-font-family: Inter; --ht-font-size: 14px; --ht-font-size-small: 12px; --ht-line-height: 20px; --ht-line-height-small: 18px; --ht-font-weight: 400; --ht-letter-spacing: 0px; --ht-border-color: light-dark(var(--ht-colors-palette-100), var(--ht-colors-palette-700)); --ht-accent-color: light-dark(var(--ht-colors-primary-500), var(--ht-colors-primary-300)); --ht-foreground-color: light-dark(var(--ht-colors-palette-800), var(--ht-colors-palette-200)); --ht-foreground-secondary-color: light-dark(var(--ht-colors-palette-400), var(--ht-colors-palette-300)); --ht-background-color: light-dark(var(--ht-colors-white), var(--ht-colors-palette-950)); --ht-background-secondary-color: light-dark(var(--ht-colors-palette-50), var(--ht-colors-palette-900)); --ht-placeholder-color: light-dark(var(--ht-colors-palette-300), var(--ht-colors-palette-400)); --ht-read-only-color: light-dark(var(--ht-colors-palette-400), var(--ht-colors-palette-300)); --ht-disabled-color: light-dark(var(--ht-colors-palette-300), var(--ht-colors-palette-400)); --ht-gap-size: var(--ht-density-gap); --ht-icon-size: var(--ht-sizing-size-4); --ht-table-transition: 0.15s; --ht-wrapper-border-width: 0px; --ht-wrapper-border-radius: var(--ht-sizing-size-1); --ht-wrapper-border-color: var(--ht-border-color); --ht-bar-foreground-color: var(--ht-foreground-color); --ht-bar-background-color: var(--ht-background-secondary-color); --ht-bar-horizontal-padding: var(--ht-density-bars-horizontal); --ht-bar-vertical-padding: var(--ht-density-bars-vertical); --ht-shadow-color: light-dark(var(--ht-colors-palette-800), var(--ht-colors-palette-200)); --ht-shadow-x: var(--ht-sizing-size-0); --ht-shadow-y: var(--ht-sizing-size-2); --ht-shadow-blur: var(--ht-sizing-size-4); --ht-shadow-opacity: 8%; --ht-cell-horizontal-padding: var(--ht-density-cell-horizontal); --ht-cell-vertical-padding: var(--ht-density-cell-vertical); --ht-cell-horizontal-border-color: var(--ht-border-color); --ht-cell-vertical-border-color: var(--ht-border-color); --ht-cell-selection-border-color: var(--ht-accent-color); --ht-cell-selection-background-color: light-dark(var(--ht-colors-primary-400), var(--ht-colors-primary-200)); --ht-cell-success-background-color: #37bc6c33; --ht-cell-error-background-color: #fa4d3233; --ht-cell-read-only-background-color: var(--ht-background-secondary-color); --ht-cell-autofill-size: var(--ht-sizing-size-1-5); --ht-cell-autofill-hit-area-size: var(--ht-sizing-size-3); --ht-cell-autofill-border-width: var(--ht-sizing-size-0-25); --ht-cell-autofill-border-radius: var(--ht-sizing-size-1); --ht-cell-autofill-border-color: var(--ht-background-color); --ht-cell-autofill-background-color: var(--ht-accent-color); --ht-cell-autofill-fill-border-color: var(--ht-foreground-color); --ht-cell-editor-border-width: 2px; --ht-cell-editor-border-color: var(--ht-accent-color); --ht-cell-editor-foreground-color: light-dark(var(--ht-colors-palette-950), var(--ht-colors-white)); --ht-cell-editor-background-color: var(--ht-background-color); --ht-cell-editor-shadow-blur-radius: 0px; --ht-cell-editor-shadow-color: var(--ht-accent-color); --ht-cell-mobile-handle-size: var(--ht-sizing-size-3); --ht-cell-mobile-handle-border-width: var(--ht-sizing-size-0-25); --ht-cell-mobile-handle-border-radius: var(--ht-sizing-size-3); --ht-cell-mobile-handle-border-color: var(--ht-accent-color); --ht-cell-mobile-handle-background-color: var(--ht-accent-color); --ht-cell-mobile-handle-background-opacity: 40%; --ht-header-font-weight: var(--ht-font-weight); --ht-header-foreground-color: var(--ht-foreground-color); --ht-header-background-color: var(--ht-background-secondary-color); --ht-header-highlighted-shadow-size: 0px; --ht-header-highlighted-foreground-color: light-dark(var(--ht-colors-palette-950), var(--ht-colors-white)); --ht-header-highlighted-background-color: light-dark(var(--ht-colors-palette-100), var(--ht-colors-palette-700)); --ht-header-active-border-color: light-dark(var(--ht-colors-primary-400), var(--ht-colors-primary-200)); --ht-header-active-foreground-color: var(--ht-colors-white); --ht-header-active-background-color: var(--ht-accent-color); --ht-header-filter-background-color: var(--ht-cell-success-background-color); --ht-header-row-foreground-color: var(--ht-foreground-color); --ht-header-row-background-color: var(--ht-background-secondary-color); --ht-header-row-highlighted-foreground-color: light-dark(var(--ht-colors-palette-950), var(--ht-colors-white)); --ht-header-row-highlighted-background-color: light-dark(var(--ht-colors-palette-100), var(--ht-colors-palette-700)); --ht-header-row-active-foreground-color: var(--ht-colors-white); --ht-header-row-active-background-color: var(--ht-accent-color); --ht-row-header-odd-background-color: var(--ht-background-secondary-color); --ht-row-header-even-background-color: var(--ht-background-secondary-color); --ht-row-cell-odd-background-color: var(--ht-background-color); --ht-row-cell-even-background-color: var(--ht-background-color); --ht-button-border-radius: var(--ht-sizing-size-1); --ht-button-horizontal-padding: var(--ht-density-button-horizontal); --ht-button-vertical-padding: var(--ht-density-button-vertical); --ht-primary-button-border-color: var(--ht-colors-transparent); --ht-primary-button-foreground-color: var(--ht-colors-white); --ht-primary-button-background-color: var(--ht-accent-color); --ht-primary-button-disabled-border-color: var(--ht-colors-transparent); --ht-primary-button-disabled-foreground-color: var(--ht-disabled-color); --ht-primary-button-disabled-background-color: light-dark(var(--ht-colors-palette-100), var(--ht-colors-palette-700)); --ht-primary-button-hover-border-color: var(--ht-colors-transparent); --ht-primary-button-hover-foreground-color: var(--ht-background-color); --ht-primary-button-hover-background-color: light-dark(var(--ht-colors-primary-600), var(--ht-colors-primary-100)); --ht-primary-button-focus-border-color: var(--ht-background-color); --ht-primary-button-focus-foreground-color: var(--ht-background-color); --ht-primary-button-focus-background-color: var(--ht-accent-color); --ht-secondary-button-border-color: var(--ht-border-color); --ht-secondary-button-foreground-color: var(--ht-foreground-color); --ht-secondary-button-background-color: var(--ht-background-color); --ht-secondary-button-disabled-border-color: var(--ht-border-color); --ht-secondary-button-disabled-foreground-color: var(--ht-disabled-color); --ht-secondary-button-disabled-background-color: light-dark(var(--ht-colors-palette-100), var(--ht-colors-palette-700)); --ht-secondary-button-hover-border-color: var(--ht-border-color); --ht-secondary-button-hover-foreground-color: var(--ht-foreground-color); --ht-secondary-button-hover-background-color: light-dark(var(--ht-colors-palette-100), var(--ht-colors-palette-700)); --ht-secondary-button-focus-border-color: var(--ht-border-color); --ht-secondary-button-focus-foreground-color: var(--ht-foreground-color); --ht-secondary-button-focus-background-color: var(--ht-background-color); --ht-icon-button-border-radius: var(--ht-sizing-size-0-5); --ht-icon-button-large-border-radius: var(--ht-sizing-size-1); --ht-icon-button-large-padding: var(--ht-sizing-size-1); --ht-icon-button-border-color: light-dark(var(--ht-colors-palette-50), var(--ht-colors-palette-900)); --ht-icon-button-background-color: var(--ht-background-secondary-color); --ht-icon-button-icon-color: light-dark(var(--ht-colors-palette-300), var(--ht-colors-palette-400)); --ht-icon-button-hover-border-color: light-dark(var(--ht-colors-palette-100), var(--ht-colors-palette-700)); --ht-icon-button-hover-background-color: light-dark(var(--ht-colors-palette-100), var(--ht-colors-palette-700)); --ht-icon-button-hover-icon-color: light-dark(var(--ht-colors-palette-300), var(--ht-colors-palette-400)); --ht-icon-button-active-border-color: light-dark(var(--ht-colors-primary-400), var(--ht-colors-primary-200)); --ht-icon-button-active-background-color: var(--ht-accent-color); --ht-icon-button-active-icon-color: var(--ht-colors-white); --ht-icon-button-active-hover-border-color: light-dark(var(--ht-colors-primary-400), var(--ht-colors-primary-200)); --ht-icon-button-active-hover-background-color: light-dark(var(--ht-colors-primary-400), var(--ht-colors-primary-200)); --ht-icon-button-active-hover-icon-color: var(--ht-colors-white); --ht-collapse-button-border-radius: var(--ht-sizing-size-1); --ht-collapse-button-open-border-color: light-dark(var(--ht-colors-palette-200), var(--ht-colors-palette-500)); --ht-collapse-button-open-background-color: light-dark(var(--ht-colors-white), var(--ht-colors-palette-950)); --ht-collapse-button-open-icon-color: light-dark(var(--ht-colors-palette-400), var(--ht-colors-palette-300)); --ht-collapse-button-open-icon-active-color: light-dark(var(--ht-colors-palette-400), var(--ht-colors-palette-300)); --ht-collapse-button-open-hover-border-color: light-dark(var(--ht-colors-palette-200), var(--ht-colors-palette-500)); --ht-collapse-button-open-hover-background-color: light-dark(var(--ht-colors-palette-50), var(--ht-colors-palette-900)); --ht-collapse-button-open-hover-icon-color: light-dark(var(--ht-colors-palette-400), var(--ht-colors-palette-300)); --ht-collapse-button-open-hover-icon-active-color: light-dark(var(--ht-colors-palette-400), var(--ht-colors-palette-300)); --ht-collapse-button-close-border-color: light-dark(var(--ht-colors-palette-200), var(--ht-colors-palette-500)); --ht-collapse-button-close-background-color: light-dark(var(--ht-colors-palette-100), var(--ht-colors-palette-700)); --ht-collapse-button-close-icon-color: light-dark(var(--ht-colors-palette-400), var(--ht-colors-palette-300)); --ht-collapse-button-close-icon-active-color: light-dark(var(--ht-colors-palette-400), var(--ht-colors-palette-300)); --ht-collapse-button-close-hover-border-color: light-dark(var(--ht-colors-palette-200), var(--ht-colors-palette-500)); --ht-collapse-button-close-hover-background-color: light-dark(var(--ht-colors-palette-100), var(--ht-colors-palette-700)); --ht-collapse-button-close-hover-icon-color: light-dark(var(--ht-colors-palette-400), var(--ht-colors-palette-300)); --ht-collapse-button-close-hover-icon-active-color: light-dark(var(--ht-colors-palette-400), var(--ht-colors-palette-300)); --ht-link-color: light-dark(var(--ht-colors-primary-600), var(--ht-colors-primary-100)); --ht-link-hover-color: var(--ht-accent-color); --ht-input-border-width: 1px; --ht-input-border-radius: var(--ht-sizing-size-1); --ht-input-horizontal-padding: var(--ht-density-input-horizontal); --ht-input-vertical-padding: var(--ht-density-input-vertical); --ht-input-border-color: var(--ht-border-color); --ht-input-foreground-color: var(--ht-foreground-color); --ht-input-background-color: var(--ht-background-secondary-color); --ht-input-hover-border-color: var(--ht-border-color); --ht-input-hover-foreground-color: var(--ht-foreground-color); --ht-input-hover-background-color: var(--ht-background-color); --ht-input-disabled-border-color: var(--ht-border-color); --ht-input-disabled-foreground-color: var(--ht-disabled-color); --ht-input-disabled-background-color: light-dark(var(--ht-colors-palette-200), var(--ht-colors-palette-500)); --ht-input-focus-border-color: var(--ht-accent-color); --ht-input-focus-foreground-color: var(--ht-foreground-color); --ht-input-focus-background-color: var(--ht-background-color); --ht-checkbox-size: var(--ht-icon-size); --ht-checkbox-border-radius: var(--ht-sizing-size-1); --ht-checkbox-border-color: light-dark(var(--ht-colors-palette-200), var(--ht-colors-palette-500)); --ht-checkbox-background-color: var(--ht-background-color); --ht-checkbox-icon-color: var(--ht-colors-transparent); --ht-checkbox-focus-border-color: light-dark(var(--ht-colors-palette-200), var(--ht-colors-palette-500)); --ht-checkbox-focus-background-color: var(--ht-background-color); --ht-checkbox-focus-icon-color: var(--ht-colors-transparent); --ht-checkbox-focus-ring-color: var(--ht-accent-color); --ht-checkbox-disabled-border-color: light-dark(var(--ht-colors-palette-200), var(--ht-colors-palette-500)); --ht-checkbox-disabled-background-color: light-dark(var(--ht-colors-palette-100), var(--ht-colors-palette-700)); --ht-checkbox-disabled-icon-color: var(--ht-colors-transparent); --ht-checkbox-checked-border-color: light-dark(var(--ht-colors-primary-400), var(--ht-colors-primary-200)); --ht-checkbox-checked-background-color: var(--ht-accent-color); --ht-checkbox-checked-icon-color: var(--ht-colors-white); --ht-checkbox-checked-focus-border-color: var(--ht-background-color); --ht-checkbox-checked-focus-background-color: var(--ht-accent-color); --ht-checkbox-checked-focus-icon-color: var(--ht-colors-white); --ht-checkbox-checked-disabled-border-color: light-dark(var(--ht-colors-palette-200), var(--ht-colors-palette-500)); --ht-checkbox-checked-disabled-background-color: light-dark(var(--ht-colors-palette-100), var(--ht-colors-palette-700)); --ht-checkbox-checked-disabled-icon-color: var(--ht-disabled-color); --ht-checkbox-indeterminate-border-color: light-dark(var(--ht-colors-primary-400), var(--ht-colors-primary-200)); --ht-checkbox-indeterminate-background-color: var(--ht-accent-color); --ht-checkbox-indeterminate-icon-color: var(--ht-colors-white); --ht-checkbox-indeterminate-focus-border-color: var(--ht-background-color); --ht-checkbox-indeterminate-focus-background-color: var(--ht-accent-color); --ht-checkbox-indeterminate-focus-icon-color: var(--ht-colors-white); --ht-checkbox-indeterminate-disabled-border-color: light-dark(var(--ht-colors-palette-200), var(--ht-colors-palette-600)); --ht-checkbox-indeterminate-disabled-background-color: light-dark(var(--ht-colors-palette-200), var(--ht-colors-palette-500)); --ht-checkbox-indeterminate-disabled-icon-color: var(--ht-disabled-color); --ht-radio-size: var(--ht-icon-size); --ht-radio-border-color: light-dark(var(--ht-colors-palette-200), var(--ht-colors-palette-500)); --ht-radio-background-color: var(--ht-background-color); --ht-radio-icon-color: var(--ht-colors-transparent); --ht-radio-focus-border-color: var(--ht-border-color); --ht-radio-focus-background-color: var(--ht-background-color); --ht-radio-focus-icon-color: var(--ht-colors-transparent); --ht-radio-focus-ring-color: var(--ht-accent-color); --ht-radio-disabled-border-color: light-dark(var(--ht-colors-palette-200), var(--ht-colors-palette-500)); --ht-radio-disabled-background-color: light-dark(var(--ht-colors-palette-100), var(--ht-colors-palette-700)); --ht-radio-disabled-icon-color: var(--ht-colors-transparent); --ht-radio-checked-border-color: var(--ht-accent-color); --ht-radio-checked-background-color: var(--ht-background-color); --ht-radio-checked-icon-color: var(--ht-accent-color); --ht-radio-checked-focus-border-color: light-dark(var(--ht-colors-primary-400), var(--ht-colors-primary-200)); --ht-radio-checked-focus-background-color: var(--ht-background-color); --ht-radio-checked-focus-icon-color: light-dark(var(--ht-colors-primary-400), var(--ht-colors-primary-200)); --ht-radio-checked-disabled-border-color: light-dark(var(--ht-colors-palette-200), var(--ht-colors-palette-500)); --ht-radio-checked-disabled-background-color: light-dark(var(--ht-colors-palette-100), var(--ht-colors-palette-700)); --ht-radio-checked-disabled-icon-color: var(--ht-disabled-color); --ht-move-backlight-color: light-dark(var(--ht-colors-palette-800), var(--ht-colors-palette-200)); --ht-move-backlight-opacity: 8%; --ht-move-indicator-color: var(--ht-accent-color); --ht-resize-indicator-color: light-dark(var(--ht-colors-palette-300), var(--ht-colors-palette-400)); --ht-hidden-indicator-color: light-dark(var(--ht-colors-palette-300), var(--ht-colors-palette-400)); --ht-menu-border-width: 1px; --ht-menu-border-radius: var(--ht-sizing-size-1); --ht-menu-horizontal-padding: var(--ht-density-menu-horizontal); --ht-menu-vertical-padding: var(--ht-density-menu-vertical); --ht-menu-item-horizontal-padding: var(--ht-density-menu-item-horizontal); --ht-menu-item-vertical-padding: var(--ht-density-menu-item-vertical); --ht-menu-border-color: var(--ht-border-color); --ht-menu-shadow-x: var(--ht-shadow-x); --ht-menu-shadow-y: var(--ht-shadow-y); --ht-menu-shadow-blur: var(--ht-shadow-blur); --ht-menu-shadow-color: light-dark(var(--ht-colors-palette-950), var(--ht-colors-white)); --ht-menu-shadow-opacity: 8%; --ht-menu-item-hover-color: light-dark(var(--ht-colors-palette-800), var(--ht-colors-palette-200)); --ht-menu-item-hover-color-opacity: 4%; --ht-menu-item-active-color: var(--ht-accent-color); --ht-menu-item-active-color-opacity: 8%; --ht-comments-textarea-horizontal-padding: var(--ht-density-cell-horizontal); --ht-comments-textarea-vertical-padding: var(--ht-density-cell-vertical); --ht-comments-textarea-border-width: 1px; --ht-comments-textarea-border-color: var(--ht-colors-transparent); --ht-comments-textarea-foreground-color: var(--ht-foreground-color); --ht-comments-textarea-background-color: var(--ht-background-secondary-color); --ht-comments-textarea-focus-border-width: 1px; --ht-comments-textarea-focus-border-color: var(--ht-accent-color); --ht-comments-textarea-focus-foreground-color: var(--ht-foreground-color); --ht-comments-textarea-focus-background-color: var(--ht-background-color); --ht-comments-indicator-size: var(--ht-sizing-size-1-5); --ht-comments-indicator-color: var(--ht-accent-color); --ht-license-horizontal-padding: var(--ht-bar-horizontal-padding); --ht-license-vertical-padding: var(--ht-bar-vertical-padding); --ht-license-foreground-color: var(--ht-bar-foreground-color); --ht-license-background-color: var(--ht-bar-background-color); --ht-pagination-bar-foreground-color: var(--ht-bar-foreground-color); --ht-pagination-bar-background-color: var(--ht-bar-background-color); --ht-pagination-bar-horizontal-padding: var(--ht-bar-horizontal-padding); --ht-pagination-bar-vertical-padding: var(--ht-bar-vertical-padding); --ht-dialog-semi-transparent-background-color: light-dark(var(--ht-colors-white), var(--ht-colors-palette-950)); --ht-dialog-semi-transparent-background-opacity: 80%; --ht-dialog-solid-background-color: light-dark(var(--ht-colors-white), var(--ht-colors-palette-950)); --ht-dialog-content-padding-horizontal: var(--ht-density-dialog-horizontal); --ht-dialog-content-padding-vertical: var(--ht-density-dialog-vertical); --ht-dialog-content-border-radius: var(--ht-sizing-size-2); --ht-dialog-content-background-color: var(--ht-background-secondary-color); --ht-chip-background: var(--ht-background-secondary-color); --ht-chip-border-radius: var(--ht-sizing-size-0-5); --ht-chip-vertical-padding: var(--ht-sizing-size-0); --ht-chip-horizontal-padding: var(--ht-sizing-size-0-5); --ht-chip-gap: var(--ht-sizing-size-1); --ht-scrollbar-border-radius: var(--ht-sizing-size-2); --ht-scrollbar-track-color: var(--ht-background-secondary-color); --ht-scrollbar-thumb-color: light-dark(var(--ht-colors-palette-300), var(--ht-colors-palette-400)); } .ht-theme-main { color-scheme: light; } .ht-theme-main-dark { color-scheme: dark; } .ht-theme-main-dark-auto { color-scheme: light dark; }