@xeplr/ui-utils 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "xeplr-default",
3
- "description": "Brand-neutral DEFAULT design theme for the @xeplr UI packages (upstream NO consumer branding). The `chart` section IS a ChartOptions styling object (see @xeplr/ui-charts type.js): camelCase keys, CSS-value strings, Style.background/Style.border, Positioning so theme→ChartOptions is a plain deep-merge, no remapping. It carries styling/chrome only (no data, no axis.labels, no title.text, no chartType those are per-chart) plus two theme extras ChartOptions consumes: `palette` ( option.color) and `marks` (per-type series defaults). The `table` section holds @xeplr/ui-table tokens. Consumers pass overrides to resolveTheme(); overrides win, rest falls through. Sizes are CSS values; rem scales with the container.",
3
+ "description": "Brand-neutral DEFAULT design theme for the @xeplr UI packages (upstream \u2014 NO consumer branding). The `chart` section IS a ChartOptions styling object (see @xeplr/ui-charts type.js): camelCase keys, CSS-value strings, Style.background/Style.border, Positioning \u2014 so theme\u2192ChartOptions is a plain deep-merge, no remapping. It carries styling/chrome only (no data, no axis.labels, no title.text, no chartType \u2014 those are per-chart) plus two theme extras ChartOptions consumes: `palette` (\u2192 option.color) and `marks` (per-type series defaults). The `table` section holds @xeplr/ui-table tokens. Consumers pass overrides to resolveTheme(); overrides win, rest falls through. Sizes are CSS values; rem scales with the container. The `input` section carries one styling object PER CONTROL (text, select, number, date) \u2014 separate so a dropdown can differ from a textbox, identical by default so it need not; assign the same object to all four to keep them in step. Consumed via inputStyleVars().",
4
4
  "default": "light",
5
5
  "font": {
6
6
  "family": "system-ui, -apple-system, \"Segoe UI\", sans-serif"
@@ -9,168 +9,924 @@
9
9
  "light": {
10
10
  "chart": {
11
11
  "title": {
12
- "positioning": { "position": "top", "align": "start" },
13
- "font": { "size": "1rem", "weight": 600, "color": "#0b0b0b", "align": "left" }
12
+ "positioning": {
13
+ "position": "top",
14
+ "align": "start"
15
+ },
16
+ "font": {
17
+ "size": "1rem",
18
+ "weight": 600,
19
+ "color": "#0b0b0b",
20
+ "align": "left"
21
+ }
14
22
  },
15
23
  "axes": {
16
24
  "x": {
17
- "line": { "show": true, "color": "#c3c2b7", "width": "1px" },
18
- "grid": { "show": false, "color": "#e1e0d9", "width": "1px" },
19
- "ticks": { "show": true, "length": "0", "color": "#898781", "font": { "size": "0.8rem", "color": "#898781" } },
20
- "title": { "font": { "size": "0.9rem", "weight": 600, "color": "#52514e" } }
25
+ "line": {
26
+ "show": true,
27
+ "color": "#c3c2b7",
28
+ "width": "1px"
29
+ },
30
+ "grid": {
31
+ "show": false,
32
+ "color": "#e1e0d9",
33
+ "width": "1px"
34
+ },
35
+ "ticks": {
36
+ "show": true,
37
+ "length": "0",
38
+ "color": "#898781",
39
+ "font": {
40
+ "size": "0.8rem",
41
+ "color": "#898781"
42
+ }
43
+ },
44
+ "title": {
45
+ "font": {
46
+ "size": "0.9rem",
47
+ "weight": 600,
48
+ "color": "#52514e"
49
+ }
50
+ }
21
51
  },
22
52
  "y": {
23
- "line": { "show": true, "color": "#c3c2b7", "width": "1px" },
24
- "grid": { "show": true, "color": "#e1e0d9", "width": "1px" },
25
- "ticks": { "show": true, "length": "0", "color": "#898781", "font": { "size": "0.8rem", "color": "#898781" } },
26
- "title": { "font": { "size": "0.9rem", "weight": 600, "color": "#52514e" } }
53
+ "line": {
54
+ "show": true,
55
+ "color": "#c3c2b7",
56
+ "width": "1px"
57
+ },
58
+ "grid": {
59
+ "show": true,
60
+ "color": "#e1e0d9",
61
+ "width": "1px"
62
+ },
63
+ "ticks": {
64
+ "show": true,
65
+ "length": "0",
66
+ "color": "#898781",
67
+ "font": {
68
+ "size": "0.8rem",
69
+ "color": "#898781"
70
+ }
71
+ },
72
+ "title": {
73
+ "font": {
74
+ "size": "0.9rem",
75
+ "weight": 600,
76
+ "color": "#52514e"
77
+ }
78
+ }
27
79
  }
28
80
  },
29
81
  "legend": {
30
82
  "show": true,
31
- "positioning": { "position": "bottom", "align": "center" },
32
- "font": { "size": "0.85rem", "color": "#52514e" }
83
+ "positioning": {
84
+ "position": "bottom",
85
+ "align": "center"
86
+ },
87
+ "font": {
88
+ "size": "0.85rem",
89
+ "color": "#52514e"
90
+ }
33
91
  },
34
92
  "tooltip": {
35
93
  "show": true,
36
- "font": { "size": "0.8rem", "color": "#0b0b0b" },
94
+ "font": {
95
+ "size": "0.8rem",
96
+ "color": "#0b0b0b"
97
+ },
37
98
  "style": {
38
- "background": { "color": "#fcfcfb" },
39
- "border": { "color": "#e1e0d9", "width": "1px" }
99
+ "background": {
100
+ "color": "#fcfcfb"
101
+ },
102
+ "border": {
103
+ "color": "#e1e0d9",
104
+ "width": "1px"
105
+ }
40
106
  }
41
107
  },
42
108
  "dataLabel": {
43
109
  "show": false,
44
- "positioning": { "position": "top" },
45
- "font": { "size": "0.75rem", "color": "#52514e" }
110
+ "positioning": {
111
+ "position": "top"
112
+ },
113
+ "font": {
114
+ "size": "0.75rem",
115
+ "color": "#52514e"
116
+ }
46
117
  },
47
118
  "chartArea": {
48
- "margin": { "top": "8px", "right": "12px", "bottom": "8px", "left": "8px" },
49
- "style": { "background": { "color": "transparent" } }
119
+ "margin": {
120
+ "top": "24px",
121
+ "right": "12px",
122
+ "bottom": "8px",
123
+ "left": "8px"
124
+ },
125
+ "style": {
126
+ "background": {
127
+ "color": "transparent"
128
+ }
129
+ }
50
130
  },
51
- "palette": ["#2a78d6", "#1baf7a", "#eda100", "#008300", "#4a3aa7", "#e34948", "#e87ba4", "#eb6834"],
131
+ "palette": [
132
+ "#2a78d6",
133
+ "#1baf7a",
134
+ "#eda100",
135
+ "#008300",
136
+ "#4a3aa7",
137
+ "#e34948",
138
+ "#e87ba4",
139
+ "#eb6834"
140
+ ],
52
141
  "marks": {
53
- "line": { "width": "2px", "symbol": "circle", "symbolSize": 8, "smooth": false },
54
- "bar": { "border": { "radius": "4px" }, "gap": { "color": "#fcfcfb", "width": "2px" } },
55
- "scatter": { "symbolSize": 10 },
56
- "pie": { "border": { "color": "#fcfcfb", "width": "2px" }, "label": { "font": { "color": "#52514e" } } }
142
+ "line": {
143
+ "width": "2px",
144
+ "symbol": "circle",
145
+ "symbolSize": 8,
146
+ "smooth": false
147
+ },
148
+ "bar": {
149
+ "border": {
150
+ "radius": "4px"
151
+ },
152
+ "gap": {
153
+ "color": "#fcfcfb",
154
+ "width": "2px"
155
+ }
156
+ },
157
+ "scatter": {
158
+ "symbolSize": 10
159
+ },
160
+ "pie": {
161
+ "border": {
162
+ "color": "#fcfcfb",
163
+ "width": "2px"
164
+ },
165
+ "label": {
166
+ "font": {
167
+ "color": "#52514e"
168
+ }
169
+ }
170
+ }
57
171
  }
58
172
  },
59
173
  "table": {
60
174
  "container": {
61
- "colors": { "background": "#ffffff", "color": "#0b0b0b" },
62
- "border": { "color": "#e1e0d9", "width": "1px", "radius": "8px" }
175
+ "colors": {
176
+ "background": "#ffffff",
177
+ "color": "#0b0b0b"
178
+ },
179
+ "border": {
180
+ "color": "#e1e0d9",
181
+ "width": "1px",
182
+ "radius": "8px"
183
+ }
184
+ },
185
+ "toolbar": {
186
+ "colors": {
187
+ "background": "#f4f4f2",
188
+ "border_bottom": "#e1e0d9"
189
+ }
63
190
  },
64
- "toolbar": { "colors": { "background": "#f4f4f2", "border_bottom": "#e1e0d9" } },
65
191
  "header": {
66
- "colors": { "background": "#f4f4f2", "color": "#52514e", "sort_active": "#2a78d6" },
67
- "font": { "size": "0.875rem", "weight": "600", "text_align": "left", "text_transform": "none" },
68
- "border": { "bottom": { "color": "#c3c2b7", "width": "2px" } },
69
- "padding": { "top": "10px", "right": "12px", "bottom": "10px", "left": "12px" }
192
+ "colors": {
193
+ "background": "#f4f4f2",
194
+ "color": "#52514e",
195
+ "sort_active": "#2a78d6"
196
+ },
197
+ "font": {
198
+ "size": "0.875rem",
199
+ "weight": "600",
200
+ "text_align": "left",
201
+ "text_transform": "none"
202
+ },
203
+ "border": {
204
+ "bottom": {
205
+ "color": "#c3c2b7",
206
+ "width": "2px"
207
+ }
208
+ },
209
+ "padding": {
210
+ "top": "10px",
211
+ "right": "12px",
212
+ "bottom": "10px",
213
+ "left": "12px"
214
+ }
70
215
  },
71
216
  "body": {
72
217
  "row": {
73
- "colors": { "background": "#ffffff", "hover_background": "#f5f5ff", "selected_background": "#eaf1fb", "stripe_background": "#fbfbfa" },
74
- "status": { "new": "#1baf7a", "edited": "#eda100" }
218
+ "colors": {
219
+ "background": "#ffffff",
220
+ "hover_background": "#f5f5ff",
221
+ "selected_background": "#eaf1fb",
222
+ "stripe_background": "#fbfbfa"
223
+ },
224
+ "status": {
225
+ "new": "#1baf7a",
226
+ "edited": "#eda100"
227
+ }
75
228
  },
76
229
  "cell": {
77
- "font": { "size": "0.875rem", "color": "#0b0b0b", "weight": "normal" },
78
- "border": { "bottom": { "color": "#eeeeea", "width": "1px" } },
79
- "padding": { "top": "8px", "right": "12px", "bottom": "8px", "left": "12px" }
230
+ "font": {
231
+ "size": "0.875rem",
232
+ "color": "#0b0b0b",
233
+ "weight": "normal"
234
+ },
235
+ "border": {
236
+ "bottom": {
237
+ "color": "#eeeeea",
238
+ "width": "1px"
239
+ }
240
+ },
241
+ "padding": {
242
+ "top": "8px",
243
+ "right": "12px",
244
+ "bottom": "8px",
245
+ "left": "12px"
246
+ }
80
247
  }
81
248
  },
82
- "accent": { "default": "#2a78d6", "hover": "#1f5fb0", "soft": "#eaf1fb" },
249
+ "accent": {
250
+ "default": "#2a78d6",
251
+ "hover": "#1f5fb0",
252
+ "soft": "#eaf1fb"
253
+ },
83
254
  "pagination": {
84
- "colors": { "background": "#f4f4f2", "border_top": "#e1e0d9", "color": "#52514e" },
85
- "font": { "size": "0.8rem" }
255
+ "colors": {
256
+ "background": "#f4f4f2",
257
+ "border_top": "#e1e0d9",
258
+ "color": "#52514e"
259
+ },
260
+ "font": {
261
+ "size": "0.8rem"
262
+ }
86
263
  },
87
264
  "overlay": {
88
- "colors": { "background": "rgba(0,0,0,0.3)" },
89
- "panel": { "background": "#ffffff", "border": "#c3c2b7", "radius": "10px", "shadow": "0 12px 40px rgba(0,0,0,0.15)" }
265
+ "colors": {
266
+ "background": "rgba(0,0,0,0.3)"
267
+ },
268
+ "panel": {
269
+ "background": "#ffffff",
270
+ "border": "#c3c2b7",
271
+ "radius": "10px",
272
+ "shadow": "0 12px 40px rgba(0,0,0,0.15)"
273
+ }
274
+ }
275
+ },
276
+ "input": {
277
+ "text": {
278
+ "border": {
279
+ "top": true,
280
+ "right": true,
281
+ "bottom": true,
282
+ "left": true,
283
+ "color": "#e2e1d9",
284
+ "hover": "#b6b4a8",
285
+ "focus": "#2563eb",
286
+ "style": "solid",
287
+ "width": "1px",
288
+ "radius": "6px"
289
+ },
290
+ "padding": "7px 9px",
291
+ "background": "#ffffff",
292
+ "font": {
293
+ "size": "12.5px",
294
+ "color": "#1a1a19",
295
+ "placeholder": "#9d9b92"
296
+ },
297
+ "label": {
298
+ "size": "11px",
299
+ "weight": 600,
300
+ "style": "normal",
301
+ "variant": "normal",
302
+ "color": "#6b6a63",
303
+ "lineHeight": "1.3",
304
+ "letterSpacing": ".03em",
305
+ "align": "left",
306
+ "transform": "uppercase",
307
+ "decoration": "none"
308
+ },
309
+ "help": {
310
+ "size": "11px",
311
+ "color": "#8a887f",
312
+ "style": "normal",
313
+ "decoration": "none"
314
+ },
315
+ "focusRing": {
316
+ "width": "3px",
317
+ "color": "rgba(37, 99, 235, .15)"
318
+ },
319
+ "invalid": {
320
+ "color": "#c2372e",
321
+ "ring": "rgba(194, 55, 46, .15)"
322
+ },
323
+ "gap": "12px"
324
+ },
325
+ "select": {
326
+ "border": {
327
+ "top": true,
328
+ "right": true,
329
+ "bottom": true,
330
+ "left": true,
331
+ "color": "#e2e1d9",
332
+ "hover": "#b6b4a8",
333
+ "focus": "#2563eb",
334
+ "style": "solid",
335
+ "width": "1px",
336
+ "radius": "6px"
337
+ },
338
+ "padding": "7px 9px",
339
+ "background": "#ffffff",
340
+ "font": {
341
+ "size": "12.5px",
342
+ "color": "#1a1a19",
343
+ "placeholder": "#9d9b92"
344
+ },
345
+ "label": {
346
+ "size": "11px",
347
+ "weight": 600,
348
+ "style": "normal",
349
+ "variant": "normal",
350
+ "color": "#6b6a63",
351
+ "lineHeight": "1.3",
352
+ "letterSpacing": ".03em",
353
+ "align": "left",
354
+ "transform": "uppercase",
355
+ "decoration": "none"
356
+ },
357
+ "help": {
358
+ "size": "11px",
359
+ "color": "#8a887f",
360
+ "style": "normal",
361
+ "decoration": "none"
362
+ },
363
+ "focusRing": {
364
+ "width": "3px",
365
+ "color": "rgba(37, 99, 235, .15)"
366
+ },
367
+ "invalid": {
368
+ "color": "#c2372e",
369
+ "ring": "rgba(194, 55, 46, .15)"
370
+ },
371
+ "gap": "12px"
372
+ },
373
+ "number": {
374
+ "border": {
375
+ "top": true,
376
+ "right": true,
377
+ "bottom": true,
378
+ "left": true,
379
+ "color": "#e2e1d9",
380
+ "hover": "#b6b4a8",
381
+ "focus": "#2563eb",
382
+ "style": "solid",
383
+ "width": "1px",
384
+ "radius": "6px"
385
+ },
386
+ "padding": "7px 9px",
387
+ "background": "#ffffff",
388
+ "font": {
389
+ "size": "12.5px",
390
+ "color": "#1a1a19",
391
+ "placeholder": "#9d9b92"
392
+ },
393
+ "label": {
394
+ "size": "11px",
395
+ "weight": 600,
396
+ "style": "normal",
397
+ "variant": "normal",
398
+ "color": "#6b6a63",
399
+ "lineHeight": "1.3",
400
+ "letterSpacing": ".03em",
401
+ "align": "left",
402
+ "transform": "uppercase",
403
+ "decoration": "none"
404
+ },
405
+ "help": {
406
+ "size": "11px",
407
+ "color": "#8a887f",
408
+ "style": "normal",
409
+ "decoration": "none"
410
+ },
411
+ "focusRing": {
412
+ "width": "3px",
413
+ "color": "rgba(37, 99, 235, .15)"
414
+ },
415
+ "invalid": {
416
+ "color": "#c2372e",
417
+ "ring": "rgba(194, 55, 46, .15)"
418
+ },
419
+ "gap": "12px"
420
+ },
421
+ "date": {
422
+ "border": {
423
+ "top": true,
424
+ "right": true,
425
+ "bottom": true,
426
+ "left": true,
427
+ "color": "#e2e1d9",
428
+ "hover": "#b6b4a8",
429
+ "focus": "#2563eb",
430
+ "style": "solid",
431
+ "width": "1px",
432
+ "radius": "6px"
433
+ },
434
+ "padding": "7px 9px",
435
+ "background": "#ffffff",
436
+ "font": {
437
+ "size": "12.5px",
438
+ "color": "#1a1a19",
439
+ "placeholder": "#9d9b92"
440
+ },
441
+ "label": {
442
+ "size": "11px",
443
+ "weight": 600,
444
+ "style": "normal",
445
+ "variant": "normal",
446
+ "color": "#6b6a63",
447
+ "lineHeight": "1.3",
448
+ "letterSpacing": ".03em",
449
+ "align": "left",
450
+ "transform": "uppercase",
451
+ "decoration": "none"
452
+ },
453
+ "help": {
454
+ "size": "11px",
455
+ "color": "#8a887f",
456
+ "style": "normal",
457
+ "decoration": "none"
458
+ },
459
+ "focusRing": {
460
+ "width": "3px",
461
+ "color": "rgba(37, 99, 235, .15)"
462
+ },
463
+ "invalid": {
464
+ "color": "#c2372e",
465
+ "ring": "rgba(194, 55, 46, .15)"
466
+ },
467
+ "gap": "12px"
90
468
  }
91
469
  }
92
470
  },
93
471
  "dark": {
94
472
  "chart": {
95
473
  "title": {
96
- "positioning": { "position": "top", "align": "start" },
97
- "font": { "size": "1rem", "weight": 600, "color": "#ffffff", "align": "left" }
474
+ "positioning": {
475
+ "position": "top",
476
+ "align": "start"
477
+ },
478
+ "font": {
479
+ "size": "1rem",
480
+ "weight": 600,
481
+ "color": "#ffffff",
482
+ "align": "left"
483
+ }
98
484
  },
99
485
  "axes": {
100
486
  "x": {
101
- "line": { "show": true, "color": "#383835", "width": "1px" },
102
- "grid": { "show": false, "color": "#2c2c2a", "width": "1px" },
103
- "ticks": { "show": true, "length": "0", "color": "#898781", "font": { "size": "0.8rem", "color": "#898781" } },
104
- "title": { "font": { "size": "0.9rem", "weight": 600, "color": "#c3c2b7" } }
487
+ "line": {
488
+ "show": true,
489
+ "color": "#383835",
490
+ "width": "1px"
491
+ },
492
+ "grid": {
493
+ "show": false,
494
+ "color": "#2c2c2a",
495
+ "width": "1px"
496
+ },
497
+ "ticks": {
498
+ "show": true,
499
+ "length": "0",
500
+ "color": "#898781",
501
+ "font": {
502
+ "size": "0.8rem",
503
+ "color": "#898781"
504
+ }
505
+ },
506
+ "title": {
507
+ "font": {
508
+ "size": "0.9rem",
509
+ "weight": 600,
510
+ "color": "#c3c2b7"
511
+ }
512
+ }
105
513
  },
106
514
  "y": {
107
- "line": { "show": true, "color": "#383835", "width": "1px" },
108
- "grid": { "show": true, "color": "#2c2c2a", "width": "1px" },
109
- "ticks": { "show": true, "length": "0", "color": "#898781", "font": { "size": "0.8rem", "color": "#898781" } },
110
- "title": { "font": { "size": "0.9rem", "weight": 600, "color": "#c3c2b7" } }
515
+ "line": {
516
+ "show": true,
517
+ "color": "#383835",
518
+ "width": "1px"
519
+ },
520
+ "grid": {
521
+ "show": true,
522
+ "color": "#2c2c2a",
523
+ "width": "1px"
524
+ },
525
+ "ticks": {
526
+ "show": true,
527
+ "length": "0",
528
+ "color": "#898781",
529
+ "font": {
530
+ "size": "0.8rem",
531
+ "color": "#898781"
532
+ }
533
+ },
534
+ "title": {
535
+ "font": {
536
+ "size": "0.9rem",
537
+ "weight": 600,
538
+ "color": "#c3c2b7"
539
+ }
540
+ }
111
541
  }
112
542
  },
113
543
  "legend": {
114
544
  "show": true,
115
- "positioning": { "position": "bottom", "align": "center" },
116
- "font": { "size": "0.85rem", "color": "#c3c2b7" }
545
+ "positioning": {
546
+ "position": "bottom",
547
+ "align": "center"
548
+ },
549
+ "font": {
550
+ "size": "0.85rem",
551
+ "color": "#c3c2b7"
552
+ }
117
553
  },
118
554
  "tooltip": {
119
555
  "show": true,
120
- "font": { "size": "0.8rem", "color": "#ffffff" },
556
+ "font": {
557
+ "size": "0.8rem",
558
+ "color": "#ffffff"
559
+ },
121
560
  "style": {
122
- "background": { "color": "#1a1a19" },
123
- "border": { "color": "#2c2c2a", "width": "1px" }
561
+ "background": {
562
+ "color": "#1a1a19"
563
+ },
564
+ "border": {
565
+ "color": "#2c2c2a",
566
+ "width": "1px"
567
+ }
124
568
  }
125
569
  },
126
570
  "dataLabel": {
127
571
  "show": false,
128
- "positioning": { "position": "top" },
129
- "font": { "size": "0.75rem", "color": "#c3c2b7" }
572
+ "positioning": {
573
+ "position": "top"
574
+ },
575
+ "font": {
576
+ "size": "0.75rem",
577
+ "color": "#c3c2b7"
578
+ }
130
579
  },
131
580
  "chartArea": {
132
- "margin": { "top": "8px", "right": "12px", "bottom": "8px", "left": "8px" },
133
- "style": { "background": { "color": "transparent" } }
581
+ "margin": {
582
+ "top": "24px",
583
+ "right": "12px",
584
+ "bottom": "8px",
585
+ "left": "8px"
586
+ },
587
+ "style": {
588
+ "background": {
589
+ "color": "transparent"
590
+ }
591
+ }
134
592
  },
135
- "palette": ["#3987e5", "#199e70", "#c98500", "#008300", "#9085e9", "#e66767", "#d55181", "#d95926"],
593
+ "palette": [
594
+ "#3987e5",
595
+ "#199e70",
596
+ "#c98500",
597
+ "#008300",
598
+ "#9085e9",
599
+ "#e66767",
600
+ "#d55181",
601
+ "#d95926"
602
+ ],
136
603
  "marks": {
137
- "line": { "width": "2px", "symbol": "circle", "symbolSize": 8, "smooth": false },
138
- "bar": { "border": { "radius": "4px" }, "gap": { "color": "#1a1a19", "width": "2px" } },
139
- "scatter": { "symbolSize": 10 },
140
- "pie": { "border": { "color": "#1a1a19", "width": "2px" }, "label": { "font": { "color": "#c3c2b7" } } }
604
+ "line": {
605
+ "width": "2px",
606
+ "symbol": "circle",
607
+ "symbolSize": 8,
608
+ "smooth": false
609
+ },
610
+ "bar": {
611
+ "border": {
612
+ "radius": "4px"
613
+ },
614
+ "gap": {
615
+ "color": "#1a1a19",
616
+ "width": "2px"
617
+ }
618
+ },
619
+ "scatter": {
620
+ "symbolSize": 10
621
+ },
622
+ "pie": {
623
+ "border": {
624
+ "color": "#1a1a19",
625
+ "width": "2px"
626
+ },
627
+ "label": {
628
+ "font": {
629
+ "color": "#c3c2b7"
630
+ }
631
+ }
632
+ }
141
633
  }
142
634
  },
143
635
  "table": {
144
636
  "container": {
145
- "colors": { "background": "#1a1a19", "color": "#c3c2b7" },
146
- "border": { "color": "#2c2c2a", "width": "1px", "radius": "8px" }
637
+ "colors": {
638
+ "background": "#1a1a19",
639
+ "color": "#c3c2b7"
640
+ },
641
+ "border": {
642
+ "color": "#2c2c2a",
643
+ "width": "1px",
644
+ "radius": "8px"
645
+ }
646
+ },
647
+ "toolbar": {
648
+ "colors": {
649
+ "background": "#141413",
650
+ "border_bottom": "#2c2c2a"
651
+ }
147
652
  },
148
- "toolbar": { "colors": { "background": "#141413", "border_bottom": "#2c2c2a" } },
149
653
  "header": {
150
- "colors": { "background": "#141413", "color": "#898781", "sort_active": "#3987e5" },
151
- "font": { "size": "0.875rem", "weight": "600", "text_align": "left", "text_transform": "none" },
152
- "border": { "bottom": { "color": "#383835", "width": "2px" } },
153
- "padding": { "top": "10px", "right": "12px", "bottom": "10px", "left": "12px" }
654
+ "colors": {
655
+ "background": "#141413",
656
+ "color": "#898781",
657
+ "sort_active": "#3987e5"
658
+ },
659
+ "font": {
660
+ "size": "0.875rem",
661
+ "weight": "600",
662
+ "text_align": "left",
663
+ "text_transform": "none"
664
+ },
665
+ "border": {
666
+ "bottom": {
667
+ "color": "#383835",
668
+ "width": "2px"
669
+ }
670
+ },
671
+ "padding": {
672
+ "top": "10px",
673
+ "right": "12px",
674
+ "bottom": "10px",
675
+ "left": "12px"
676
+ }
154
677
  },
155
678
  "body": {
156
679
  "row": {
157
- "colors": { "background": "#1a1a19", "hover_background": "#242422", "selected_background": "#1f2b3a", "stripe_background": "#1d1d1b" },
158
- "status": { "new": "#199e70", "edited": "#c98500" }
680
+ "colors": {
681
+ "background": "#1a1a19",
682
+ "hover_background": "#242422",
683
+ "selected_background": "#1f2b3a",
684
+ "stripe_background": "#1d1d1b"
685
+ },
686
+ "status": {
687
+ "new": "#199e70",
688
+ "edited": "#c98500"
689
+ }
159
690
  },
160
691
  "cell": {
161
- "font": { "size": "0.875rem", "color": "#c3c2b7", "weight": "normal" },
162
- "border": { "bottom": { "color": "#2c2c2a", "width": "1px" } },
163
- "padding": { "top": "8px", "right": "12px", "bottom": "8px", "left": "12px" }
692
+ "font": {
693
+ "size": "0.875rem",
694
+ "color": "#c3c2b7",
695
+ "weight": "normal"
696
+ },
697
+ "border": {
698
+ "bottom": {
699
+ "color": "#2c2c2a",
700
+ "width": "1px"
701
+ }
702
+ },
703
+ "padding": {
704
+ "top": "8px",
705
+ "right": "12px",
706
+ "bottom": "8px",
707
+ "left": "12px"
708
+ }
164
709
  }
165
710
  },
166
- "accent": { "default": "#3987e5", "hover": "#5ba0ee", "soft": "#1f2b3a" },
711
+ "accent": {
712
+ "default": "#3987e5",
713
+ "hover": "#5ba0ee",
714
+ "soft": "#1f2b3a"
715
+ },
167
716
  "pagination": {
168
- "colors": { "background": "#141413", "border_top": "#2c2c2a", "color": "#c3c2b7" },
169
- "font": { "size": "0.8rem" }
717
+ "colors": {
718
+ "background": "#141413",
719
+ "border_top": "#2c2c2a",
720
+ "color": "#c3c2b7"
721
+ },
722
+ "font": {
723
+ "size": "0.8rem"
724
+ }
170
725
  },
171
726
  "overlay": {
172
- "colors": { "background": "rgba(0,0,0,0.6)" },
173
- "panel": { "background": "#242422", "border": "#383835", "radius": "10px", "shadow": "0 12px 40px rgba(0,0,0,0.5)" }
727
+ "colors": {
728
+ "background": "rgba(0,0,0,0.6)"
729
+ },
730
+ "panel": {
731
+ "background": "#242422",
732
+ "border": "#383835",
733
+ "radius": "10px",
734
+ "shadow": "0 12px 40px rgba(0,0,0,0.5)"
735
+ }
736
+ }
737
+ },
738
+ "input": {
739
+ "text": {
740
+ "border": {
741
+ "top": true,
742
+ "right": true,
743
+ "bottom": true,
744
+ "left": true,
745
+ "color": "#3a3a37",
746
+ "hover": "#55554f",
747
+ "focus": "#2563eb",
748
+ "style": "solid",
749
+ "width": "1px",
750
+ "radius": "6px"
751
+ },
752
+ "padding": "7px 9px",
753
+ "background": "#1f1f1e",
754
+ "font": {
755
+ "size": "12.5px",
756
+ "color": "#f2f1ec",
757
+ "placeholder": "#7a786f"
758
+ },
759
+ "label": {
760
+ "size": "11px",
761
+ "weight": 600,
762
+ "style": "normal",
763
+ "variant": "normal",
764
+ "color": "#c3c2b7",
765
+ "lineHeight": "1.3",
766
+ "letterSpacing": ".03em",
767
+ "align": "left",
768
+ "transform": "uppercase",
769
+ "decoration": "none"
770
+ },
771
+ "help": {
772
+ "size": "11px",
773
+ "color": "#8f8d84",
774
+ "style": "normal",
775
+ "decoration": "none"
776
+ },
777
+ "focusRing": {
778
+ "width": "3px",
779
+ "color": "rgba(37, 99, 235, .15)"
780
+ },
781
+ "invalid": {
782
+ "color": "#c2372e",
783
+ "ring": "rgba(194, 55, 46, .15)"
784
+ },
785
+ "gap": "12px"
786
+ },
787
+ "select": {
788
+ "border": {
789
+ "top": true,
790
+ "right": true,
791
+ "bottom": true,
792
+ "left": true,
793
+ "color": "#3a3a37",
794
+ "hover": "#55554f",
795
+ "focus": "#2563eb",
796
+ "style": "solid",
797
+ "width": "1px",
798
+ "radius": "6px"
799
+ },
800
+ "padding": "7px 9px",
801
+ "background": "#1f1f1e",
802
+ "font": {
803
+ "size": "12.5px",
804
+ "color": "#f2f1ec",
805
+ "placeholder": "#7a786f"
806
+ },
807
+ "label": {
808
+ "size": "11px",
809
+ "weight": 600,
810
+ "style": "normal",
811
+ "variant": "normal",
812
+ "color": "#c3c2b7",
813
+ "lineHeight": "1.3",
814
+ "letterSpacing": ".03em",
815
+ "align": "left",
816
+ "transform": "uppercase",
817
+ "decoration": "none"
818
+ },
819
+ "help": {
820
+ "size": "11px",
821
+ "color": "#8f8d84",
822
+ "style": "normal",
823
+ "decoration": "none"
824
+ },
825
+ "focusRing": {
826
+ "width": "3px",
827
+ "color": "rgba(37, 99, 235, .15)"
828
+ },
829
+ "invalid": {
830
+ "color": "#c2372e",
831
+ "ring": "rgba(194, 55, 46, .15)"
832
+ },
833
+ "gap": "12px"
834
+ },
835
+ "number": {
836
+ "border": {
837
+ "top": true,
838
+ "right": true,
839
+ "bottom": true,
840
+ "left": true,
841
+ "color": "#3a3a37",
842
+ "hover": "#55554f",
843
+ "focus": "#2563eb",
844
+ "style": "solid",
845
+ "width": "1px",
846
+ "radius": "6px"
847
+ },
848
+ "padding": "7px 9px",
849
+ "background": "#1f1f1e",
850
+ "font": {
851
+ "size": "12.5px",
852
+ "color": "#f2f1ec",
853
+ "placeholder": "#7a786f"
854
+ },
855
+ "label": {
856
+ "size": "11px",
857
+ "weight": 600,
858
+ "style": "normal",
859
+ "variant": "normal",
860
+ "color": "#c3c2b7",
861
+ "lineHeight": "1.3",
862
+ "letterSpacing": ".03em",
863
+ "align": "left",
864
+ "transform": "uppercase",
865
+ "decoration": "none"
866
+ },
867
+ "help": {
868
+ "size": "11px",
869
+ "color": "#8f8d84",
870
+ "style": "normal",
871
+ "decoration": "none"
872
+ },
873
+ "focusRing": {
874
+ "width": "3px",
875
+ "color": "rgba(37, 99, 235, .15)"
876
+ },
877
+ "invalid": {
878
+ "color": "#c2372e",
879
+ "ring": "rgba(194, 55, 46, .15)"
880
+ },
881
+ "gap": "12px"
882
+ },
883
+ "date": {
884
+ "border": {
885
+ "top": true,
886
+ "right": true,
887
+ "bottom": true,
888
+ "left": true,
889
+ "color": "#3a3a37",
890
+ "hover": "#55554f",
891
+ "focus": "#2563eb",
892
+ "style": "solid",
893
+ "width": "1px",
894
+ "radius": "6px"
895
+ },
896
+ "padding": "7px 9px",
897
+ "background": "#1f1f1e",
898
+ "font": {
899
+ "size": "12.5px",
900
+ "color": "#f2f1ec",
901
+ "placeholder": "#7a786f"
902
+ },
903
+ "label": {
904
+ "size": "11px",
905
+ "weight": 600,
906
+ "style": "normal",
907
+ "variant": "normal",
908
+ "color": "#c3c2b7",
909
+ "lineHeight": "1.3",
910
+ "letterSpacing": ".03em",
911
+ "align": "left",
912
+ "transform": "uppercase",
913
+ "decoration": "none"
914
+ },
915
+ "help": {
916
+ "size": "11px",
917
+ "color": "#8f8d84",
918
+ "style": "normal",
919
+ "decoration": "none"
920
+ },
921
+ "focusRing": {
922
+ "width": "3px",
923
+ "color": "rgba(37, 99, 235, .15)"
924
+ },
925
+ "invalid": {
926
+ "color": "#c2372e",
927
+ "ring": "rgba(194, 55, 46, .15)"
928
+ },
929
+ "gap": "12px"
174
930
  }
175
931
  }
176
932
  }