@dashadmin/dash-styles 0.0.0 → 1.3.16

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.
Files changed (66) hide show
  1. package/package.json +20 -5
  2. package/.editorconfig +0 -12
  3. package/.eslintignore +0 -0
  4. package/.eslintrc.json +0 -7
  5. package/.prettierignore +0 -5
  6. package/.prettierrc.cjs +0 -3
  7. package/commitlint.config.cjs +0 -40
  8. package/dist/README.md +0 -1
  9. package/dist/index.d.ts +0 -3
  10. package/dist/package.json +0 -34
  11. package/src/assets/fonts/Montserrat-Black.ttf +0 -0
  12. package/src/assets/fonts/Montserrat-Bold.ttf +0 -0
  13. package/src/assets/fonts/Montserrat-Medium.ttf +0 -0
  14. package/src/assets/fonts/Montserrat-Regular.ttf +0 -0
  15. package/src/assets/fonts/Montserrat-SemiBold.ttf +0 -0
  16. package/src/dash-css-transformer.less +0 -766
  17. package/src/dash-variables.less +0 -10
  18. package/src/dash.less +0 -38
  19. package/src/helpers/getAllCssVariablesFromStyleSheets.tsx +0 -46
  20. package/src/index.tsx.suffixed +0 -680
  21. package/src/styles/button.less +0 -120
  22. package/src/styles/buttons.less +0 -10
  23. package/src/styles/card.less +0 -337
  24. package/src/styles/common.less +0 -62
  25. package/src/styles/components/notfound.less +0 -50
  26. package/src/styles/extra.less +0 -25
  27. package/src/styles/filters.less +0 -7
  28. package/src/styles/forms.less +0 -41
  29. package/src/styles/framed.less +0 -45
  30. package/src/styles/header.less +0 -879
  31. package/src/styles/input.copy.less +0 -223
  32. package/src/styles/input.less +0 -223
  33. package/src/styles/layout.less +0 -296
  34. package/src/styles/links.less +0 -28
  35. package/src/styles/loader.less +0 -20
  36. package/src/styles/login.less +0 -331
  37. package/src/styles/modal.less +0 -0
  38. package/src/styles/module.less +0 -29
  39. package/src/styles/mui-overrides.less +0 -62
  40. package/src/styles/notification.less +0 -46
  41. package/src/styles/pages/profile.less +0 -139
  42. package/src/styles/pagination.less +0 -90
  43. package/src/styles/popover.less +0 -21
  44. package/src/styles/react-admin/common.less +0 -184
  45. package/src/styles/react-admin/toolbar.less +0 -22
  46. package/src/styles/root.less +0 -13
  47. package/src/styles/sidebar.less +0 -705
  48. package/src/styles/splash.less +0 -44
  49. package/src/styles/static.less +0 -59
  50. package/src/styles/stats.less +0 -5
  51. package/src/styles/svg.less +0 -30
  52. package/src/styles/switch.less +0 -7
  53. package/src/styles/table.less +0 -196
  54. package/src/styles/tabs.less +0 -173
  55. package/src/styles/tags.less +0 -97
  56. package/src/styles/toast.less +0 -83
  57. package/src/styles/toolbar.less +0 -90
  58. package/src/styles/transition.less +0 -226
  59. package/src/styles/uploader.less +0 -38
  60. package/src/variables/breakpoints.less +0 -35
  61. package/src/variables/colors.less +0 -205
  62. package/src/variables/dash-colors.less +0 -52
  63. package/src/variables/sizes.less +0 -150
  64. package/tsconfig.eslint.json +0 -12
  65. package/tsconfig.json +0 -22
  66. package/vite.config.mts +0 -7
@@ -1,766 +0,0 @@
1
-
2
- :root {
3
-
4
- // =============================================
5
- // LIGHT MODE VARIABLES
6
- // =============================================
7
-
8
- // Primary & Secondary
9
- --primary-color--light: #c3c3c3;
10
- --primary-contrast--light: #f1f1f1;
11
- --secondary-color--light: #e8e8e8;
12
-
13
- // Body Backgrounds
14
- --bodybg-primary--light: #ffffffff;
15
- --bodybg-secondary--light: #ecececff;
16
-
17
- // Highlights
18
- --highlight-color--light: #49a000;
19
- --highlight-color-contrast--light: #333333;
20
-
21
- // Module
22
- --module-bg--light: rgba(214, 214, 214, 1);
23
- --module-border--light: #4f4f4f;
24
-
25
- // Text
26
- --text-color--light: #000000;
27
- --text-contrast--light: #595959;
28
- --text-light--light: #4b4b4b;
29
- --text-header--light: #ffffff;
30
- --heading-color--light: #535353;
31
-
32
- // Body & Layout
33
- --body-bg--light: #2e2e2e;
34
- --framed_layout-bg--light: #ffffff;
35
- --link-color--light: #171d3d;
36
- --nav-bg--light: rgba(64, 64, 64, 0.5);
37
-
38
- // Components
39
- --component-bg--light: #ffffff;
40
- --component-border--light: #999;
41
- --component-text--light: #333333;
42
- --component-shadow--light: 0 2px 4px rgba(0, 0, 0, 0.1);
43
- --component-hover-bg--light: #f8f8f8;
44
- --component-active-bg--light: #e6e6e6;
45
-
46
- // Borders
47
- --component-border-base--light: #999;
48
- --component-border-split--light: #999;
49
- --border-color--light: #999;
50
-
51
- // Links
52
- --link-hover--light: #999999;
53
- --link-active--light: #666666;
54
-
55
- // Disabled
56
- --disabled-color--light: #808080;
57
- --disabled-bg--light: #eeeeee;
58
- --disabled-border--light: #eeeeee;
59
-
60
- // Scroll
61
- --scroll_track--light: #808080;
62
- --scroll_thumb-color--light: #333;
63
-
64
- // Header
65
- --header-bg--light: #ffffff;
66
- --header-font--light: #333333;
67
- --header-badge--light: #999999;
68
- --header-badge-hover--light: #F1F1F1;
69
- --header-input-bg--light: #2b2b2b;
70
-
71
- // Sidebar
72
- --sidebar-bg--light: rgba(255, 255, 255, 0);
73
- --sidebar-bg-hover--light: rgba(255, 255, 255, 0.5);
74
- --sidebar--light: rgba(60, 60, 60, 0.5);
75
- --sidebar-active--light: rgba(60, 60, 60, 0.5);
76
- --sidebar_icon--light: #ffffff;
77
- --sidebar_icon-active--light: #ffffff;
78
-
79
- --sidebar-primary--light: #000000;
80
- --sidebar-contrast--light: #3d3d3d;
81
- --sidebar_icon-primary--light: #ffffff;
82
- --sidebar_icon-secondary--light: #f0f0f0;
83
- --sidebar-bg-primary--light: rgba(0, 0, 0, 0);
84
- --sidebar-bg-contrast--light: rgba(62, 62, 62, 0.5);
85
- --sidebar_submenu-bg-primary--light: rgba(0, 0, 0, 0.05);
86
- --sidebar_submenu-bg-contrast--light: rgba(64, 64, 64, 0.5);
87
- --sidebar_submenu-color-primary--light: #010101;
88
- --sidebar_submenu-color-contrast--light: #383838;
89
- --sidebar-handle-primary--light: rgba(64, 64, 64, 0.2);
90
- --sidebar-handle-contrast--light: rgba(61, 61, 61, 0.5);
91
-
92
- // Alerts (light)
93
- --alert-info-bg--light: #0065fd;
94
- --alert-info-border--light: #CCE0FF;
95
- --alert-info-color--light: #121857;
96
- --alert-info-title--light: #121857;
97
- --alert-info-link--light: rgba(18, 24, 87, 0.4);
98
- --alert-error-bg--light: #DD7373;
99
- --alert-error-border--light: #DD7373;
100
- --alert-error-color--light: #535353;
101
- --alert-error-title--light: #535353;
102
- --alert-error-link--light: rgba(18, 24, 87, 0.4);
103
- --alert-warning-bg--light: #FFCB2F;
104
- --alert-warning-border--light: #FFCB2F;
105
- --alert-warning-color--light: #121857;
106
- --alert-warning-title--light: #121857;
107
- --alert-warning-link--light: rgba(18, 24, 87, 0.4);
108
- --alert-success-bg--light: #99F4BD;
109
- --alert-success-border--light: #99F4BD;
110
- --alert-success-color--light: #121857;
111
- --alert-success-title--light: #121857;
112
- --alert-success-link--light: rgba(18, 24, 87, 0.4);
113
-
114
- // Buttons (light)
115
- --btn-bg--light: #34831b;
116
- --btn-color--light: #ffffff;
117
- --btn-border-color--light: #808080;
118
- --btn-hover-bg--light: #666666;
119
- --btn-active-bg--light: #4D4D4D;
120
- --btn-disabled-bg--light: #999999;
121
- --btn-disabled-color--light: #ffffff;
122
- --btn-secondary-bg--light: #666666;
123
- --btn-secondary-color--light: #ffffff;
124
- --btn-success-bg--light: #808080;
125
- --btn-success-color--light: #ffffff;
126
- --btn-danger-bg--light: #808080;
127
- --btn-danger-color--light: #ffffff;
128
- --btn-warning-bg--light: #999999;
129
- --btn-warning-color--light: #333333;
130
- --btn-info-bg--light: #666666;
131
- --btn-info-color--light: #ffffff;
132
- --btn-light-bg--light: #f8f8f8;
133
- --btn-light-color--light: #333333;
134
-
135
- // Tab (light)
136
- --tab-selected-bg--light: #dcdcdc;
137
-
138
-
139
- // =============================================
140
- // DARK MODE VARIABLES
141
- // =============================================
142
-
143
- // Primary & Secondary
144
- --primary-color--dark: #343434;
145
- --primary-contrast--dark: #191919;
146
- --secondary-color--dark: #202020;
147
-
148
- // Module
149
- --module-bg--dark: #252526;
150
- --module-border--dark: #404040;
151
-
152
- // Body Backgrounds
153
- --bodybg-primary--dark: #101010;
154
- --bodybg-secondary--dark: rgba(36, 36, 36, 1);
155
-
156
- // Highlights
157
- --highlight-color--dark: #fbfbfb;
158
- --highlight-color-contrast--dark: #000000;
159
-
160
- // Text
161
- --text-color--dark: #f2f2f2;
162
- --text-contrast--dark: #cccccc;
163
- --text-light--dark: #ffffff;
164
- --text-header--dark: #FFFFFF;
165
- --heading-color--dark: #e0e0e0;
166
-
167
- // Body & Layout
168
- --framed_layout-bg--dark: #363636;
169
- --main-bg--dark: #3b3b3b;
170
- --link-color--dark: #2eac19;
171
- --nav-bg--dark: #252526;
172
-
173
- // Components
174
- --component-bg--dark: #252526;
175
- --component-border--dark:#ffffff2e;
176
- --component-text--dark: #d4d4d4;
177
- --component-shadow--dark: 0 2px 4px rgba(0, 0, 0, 0.4);
178
- --component-hover-bg--dark: #2d2d2d;
179
- --component-active-bg--dark: #37373d;
180
-
181
- // Borders
182
- --component-border-base--dark: #404040;
183
- --component-border-split--dark: #ffffff4d;
184
- --border-color--dark: #ffffff4d;
185
-
186
- // Links
187
- --link-hover--dark: #9cdcfe;
188
- --link-active--dark: #007acc;
189
-
190
- // Disabled
191
- --disabled-color--dark: #6c6c6c;
192
- --disabled-bg--dark: #2d2d2d;
193
- --disabled-border--dark: #404040;
194
-
195
- // Scroll
196
- --scroll_track--dark: #1e1e1e;
197
- --scroll_thumb-color--dark: #424242;
198
-
199
- // Header
200
- --header-bg--dark: #252526;
201
- --header-font--dark: #d4d4d4;
202
- --header-badge--dark: #007acc;
203
- --header-badge-hover--dark: #1e8ad2;
204
- --header-input-bg--dark: #3c3c3c;
205
-
206
- // Sidebar
207
- --sidebar-bg--dark: rgba(0, 0, 0, 0);
208
- --sidebar-bg-hover--dark: #00000061;
209
- --sidebar--dark: #d4d4d4;
210
- --sidebar-active--dark: #ffffff;
211
- --sidebar_icon--dark: #d4d4d4;
212
- --sidebar_icon-active--dark: #ffffff;
213
-
214
- --sidebar-primary--dark: #ffffff;
215
- --sidebar-contrast--dark: #cccccc;
216
- --sidebar_icon-primary--dark: #d4d4d4;
217
- --sidebar_icon-secondary--dark: #858585;
218
- --sidebar-bg-primary--dark: transparent00;
219
- --sidebar-bg-contrast--dark: #2d2d2d;
220
- --sidebar_submenu-bg-primary--dark: #12121229;
221
- --sidebar_submenu-bg-contrast--dark: #2d2d2d;
222
- --sidebar_submenu-color-primary--dark: #d4d4d4;
223
- --sidebar_submenu-color-contrast--dark: #cccccc;
224
- --sidebar-handle-primary--dark: rgba(65, 65, 65, 0.4);
225
- --sidebar-handle-contrast--dark: rgba(85, 85, 85, 0.6);
226
-
227
- // Alerts (dark)
228
- --alert-info-bg--dark: #0058ef;
229
- --alert-info-border--dark: #063b49;
230
- --alert-info-color--dark: #9cdcfe;
231
- --alert-info-title--dark: #9cdcfe;
232
- --alert-info-link--dark: rgba(156, 220, 254, 0.6);
233
- --alert-error-bg--dark: #49060f;
234
- --alert-error-border--dark: #49060f;
235
- --alert-error-color--dark: #f48771;
236
- --alert-error-title--dark: #f48771;
237
- --alert-error-link--dark: rgba(244, 135, 113, 0.6);
238
- --alert-warning-bg--dark: #352a06;
239
- --alert-warning-border--dark: #352a06;
240
- --alert-warning-color--dark: #dcdcaa;
241
- --alert-warning-title--dark: #dcdcaa;
242
- --alert-warning-link--dark: rgba(220, 220, 170, 0.6);
243
- --alert-success-bg--dark: #063b1d;
244
- --alert-success-border--dark: #063b1d;
245
- --alert-success-color--dark: #6a9955;
246
- --alert-success-title--dark: #6a9955;
247
- --alert-success-link--dark: rgba(106, 153, 85, 0.6);
248
-
249
- // Buttons (dark)
250
- --btn-bg--dark: #38a222;
251
- --btn-color--dark: #ffffff;
252
- --btn-border-color--dark: #37373d;
253
- --btn-hover-bg--dark: #45454d;
254
- --btn-active-bg--dark: #242424;
255
- --btn-disabled-bg--dark: #2d2d2d;
256
- --btn-disabled-color--dark: #6c6c6c;
257
- --btn-secondary-bg--dark: #1c1c1c;
258
- --btn-secondary-color--dark: #d4d4d4;
259
- --btn-success-bg--dark: #2f5534;
260
- --btn-success-color--dark: #d4d4d4;
261
- --btn-danger-bg--dark: #a1260d;
262
- --btn-danger-color--dark: #d4d4d4;
263
- --btn-warning-bg--dark: #8c8c35;
264
- --btn-warning-color--dark: #d4d4d4;
265
- --btn-info-bg--dark: #0e639c;
266
- --btn-info-color--dark: #d4d4d4;
267
- --btn-light-bg--dark: #252526;
268
- --btn-light-color--dark: #d4d4d4;
269
-
270
- // Tab (dark)
271
- --tab-selected-bg--dark: #505050;
272
-
273
-
274
- // =============================================
275
- // TABLE HEADER
276
- // =============================================
277
-
278
- --table-header-color--light: #000000;
279
- --table-header-color--dark: #ffffff;
280
-
281
- --table-header-bg--light: #69de00;
282
- --table-header-bg--dark: #3aaa00;
283
-
284
-
285
- // =============================================
286
- // BASE / STATIC COLORS
287
- // =============================================
288
- --black: #000000;
289
-
290
- --dash-scroll-width: 6px;
291
-
292
- // =============================================
293
- // SIZES & DIMENSIONS
294
- // =============================================
295
- --size-8: 8px;
296
- --size-10: 10px;
297
- --size-20: 20px;
298
- --size-30: 30px;
299
- --size-36: 36px;
300
- --size-40: 40px;
301
- --size-50: 50px;
302
- --size-60: 60px;
303
- --size-80: 80px;
304
- --size-100: 100px;
305
- --size-120: 120px;
306
- --size-150: 150px;
307
- --size-175: 175px;
308
- --size-200: 200px;
309
-
310
- // Layout
311
- --layout-header-height: 72px;
312
- --layout-header-height-res: 50px;
313
- --layout-header-padding: 0 32px;
314
- --layout-header-padding-res: 0 15px;
315
- --layout-footer-padding: 14px 32px;
316
- --layout-footer-padding-res: 14px 15px;
317
- --layout-trigger-height: 30px;
318
- --layout-zero-trigger-width: 36px;
319
- --layout-zero-trigger-height: 28px;
320
- --layout-main-content-padding: 32px;
321
- --layout-main-content-padding-res: 15px;
322
-
323
- // Typography
324
- --font-size-base: 14px;
325
- --font-size-lg: 16px;
326
- --font-size-sm: 12px;
327
- --line-height-base: 1.3;
328
- --h1-font-size: 22px;
329
- --h2-font-size: 20px;
330
- --h3-font-size: 18px;
331
- --h4-font-size: 16px;
332
- --h5-font-size: 14px;
333
- --h6-font-size: 12px;
334
- --headings-font-weight: 400;
335
- --headings-line-height: 1.2;
336
- --font-weight-light: 300;
337
- --font-weight-normal: 400;
338
- --font-weight-medium: 500;
339
- --font-weight-semi-bold: 600;
340
- --font-weight-bold: 700;
341
- --font-weight-heavy: 900;
342
- --letter-spacing-base: 3px;
343
- --letter-spacing-lg: 6px;
344
- --letter-spacing-xl: 8px;
345
-
346
- // Menu
347
- --menu-inline-toplevel-item-height: 42px;
348
- --menu-item-height: 42px;
349
- --menu-expanded-width: 97px;
350
-
351
- // Form
352
- --form-item-margin-bottom: 20px;
353
- --form-vertical-label-padding: 0 0 8px;
354
- --form-vertical-label-margin: 0;
355
-
356
- // Border
357
- --border-width-base: 1px;
358
- --border-style-base: solid;
359
-
360
- // Drag & Drop
361
- --dragndrop-paddding-tb: 24px;
362
- --dragndrop-paddding-lr: 16px;
363
-
364
- // Customizer
365
- --dash-customizer-width: 370px;
366
- --dash-customizer-base: 20px;
367
-
368
- // Framed Layout
369
- --framed-layout-base: 30px;
370
-
371
- // Padding & Margins
372
- --custom-padding: 10px;
373
- --content-horizontal-padding: 10px;
374
- --sidebar-padding-lr: 25px;
375
-
376
- // Widths
377
- --min-body-width: 575px;
378
- --sidebar-mini-drawer-width: 100px;
379
- --sidebar-large-width: 255px;
380
- --sidebar-small-width: 60px;
381
- --sidebar-horizontal-height: 120px;
382
-
383
- --app-sidebar-width: 230px;
384
- --app-chat-sidebar-width: 315px;
385
-
386
- // Scroll
387
- --scroll-bar-margin: 19px;
388
- --scroll-bar-expanded-margin: 5px;
389
- --sidebar_submenu-padding: 40px;
390
-
391
- // Card
392
- --card-head-padding: 16px;
393
- --card-inner-head-padding: 12px;
394
- --card-padding-base: 24px;
395
- --card-padding-wider: 24px;
396
- --dash-card-padding-base: 24px;
397
- --dash-card-padding-sm: 14px;
398
- --dash-card-margin-base: 32px;
399
- --dash-card-margin-base-res: 20px;
400
-
401
- // Grid
402
- --grid-gutter-width: 32px;
403
-
404
- // Border Radius
405
- --border-radius-xxl: 30px;
406
- --border-radius-circle: 50%;
407
-
408
- // Input
409
- --input-height-base: 36px;
410
- --input-height-lg: 40px;
411
- --input-height-sm: 24px;
412
- --input-height-base-sm: 28px;
413
-
414
- // Button Dimensions
415
- --btn-height-base: 36px;
416
- --btn-height-lg: 40px;
417
- --btn-height-sm: 24px;
418
- --btn-height-base-sm: 28px;
419
- --btn-font-size-lg: 16px;
420
- --btn-font-size-sm: 12px;
421
- --btn-font-size-xs: 10px;
422
- --btn-padding-xs: 0 6px;
423
- --btn-border-radius-base: 4px;
424
- --btn-border-radius-sm: 4px;
425
- --btn-padding-base: 0 15px;
426
- --btn-padding-lg: 0 15px;
427
- --btn-padding-sm: 0 7px;
428
-
429
- // Border Radius
430
- --border-radius-base: 6px;
431
- --border-radius-sm: 4px;
432
- --border-radius-lg: 10px;
433
-
434
-
435
- // =============================================
436
- // "dash-" PREFIXED VARIABLES (from CSS import)
437
- // =============================================
438
-
439
- // Body & Background
440
- --body-background--dark: #005a32;
441
- --body-background--light: #41ab5d;
442
- --body-bg--dark: #505050;
443
- --body-bg--light: #2e2e2e;
444
- --border-color-base--dark: #000;
445
- --border-color-base--light: #c7e9c0;
446
- --border-color-split--dark: #000;
447
- --border-color-split--light: #c7e9c0;
448
-
449
- // Button Primary
450
- --btn-primary-bg--dark: #238b45;
451
- --btn-primary-bg--light: #367800;
452
- --btn-primary-color--dark: #f7fcf5;
453
- --btn-primary-color--light: #fff;
454
-
455
- // Component
456
- --component-active-background--dark: #005a32;
457
- --component-active-background--light: #e6e6e6;
458
- --component-background--dark: rgba(0, 0, 0, 0.6);
459
- --component-background--light: #f8f8f8;
460
- --component-border-color--dark: #000;
461
- --component-border-color--light: #c7e9c0;
462
- --component-hover-background--dark: #145429;
463
- --component-hover-background--light: #f8f8f8;
464
- --component-text-color--dark: #f7fcf5;
465
- --component-text-color--light: #000;
466
-
467
- // Dash Alerts
468
- --dash-alert-error-bg--dark: #ff0022;
469
- --dash-alert-error-bg--light: #DD7373;
470
- --dash-alert-error-border--dark: #49060f;
471
- --dash-alert-error-border--light: #DD7373;
472
- --dash-alert-error-color--dark: #f48771;
473
- --dash-alert-error-color--light: #535353;
474
- --dash-alert-error-link--dark: rgba(244, 135, 113, 0.6);
475
- --dash-alert-error-link--light: rgba(18, 24, 87, 0.4);
476
- --dash-alert-error-title--dark: #f48771;
477
- --dash-alert-error-title--light: #535353;
478
- --dash-alert-info-bg--dark: #063b49;
479
- --dash-alert-info-bg--light: #CCE0FF;
480
- --dash-alert-info-border--dark: #063b49;
481
- --dash-alert-info-border--light: #CCE0FF;
482
- --dash-alert-info-color--dark: #9cdcfe;
483
- --dash-alert-info-color--light: #121857;
484
- --dash-alert-info-link--dark: rgba(156, 220, 254, 0.6);
485
- --dash-alert-info-link--light: rgba(18, 24, 87, 0.4);
486
- --dash-alert-info-title--dark: #9cdcfe;
487
- --dash-alert-info-title--light: #121857;
488
- --dash-alert-success-bg--dark: #063b1d;
489
- --dash-alert-success-bg--light: #99F4BD;
490
- --dash-alert-success-border--dark: #063b1d;
491
- --dash-alert-success-border--light: #99F4BD;
492
- --dash-alert-success-color--dark: #6a9955;
493
- --dash-alert-success-color--light: #121857;
494
- --dash-alert-success-link--dark: rgba(106, 153, 85, 0.6);
495
- --dash-alert-success-link--light: rgba(18, 24, 87, 0.4);
496
- --dash-alert-success-title--dark: #6a9955;
497
- --dash-alert-success-title--light: #121857;
498
- --dash-alert-warning-bg--dark: #db9900;
499
- --dash-alert-warning-bg--light: #FFCB2F;
500
- --dash-alert-warning-border--dark: #352a06;
501
- --dash-alert-warning-border--light: #FFCB2F;
502
- --dash-alert-warning-color--dark: #dcdcaa;
503
- --dash-alert-warning-color--light: #121857;
504
- --dash-alert-warning-link--dark: rgba(220, 220, 170, 0.6);
505
- --dash-alert-warning-link--light: rgba(18, 24, 87, 0.4);
506
- --dash-alert-warning-title--dark: #dcdcaa;
507
- --dash-alert-warning-title--light: #121857;
508
-
509
- // Dash Border & Layout
510
- --dash-border-color--dark: #000;
511
- --dash-border-color--light: #c7e9c0;
512
- --dash-framed-layout-background--dark: #41ab5d;
513
- --dash-framed-layout-background--light: #ffffff;
514
- --dash-link-color--dark: #74c476;
515
- --dash-link-color--light: #005a32;
516
- --dash-main-background--dark: #005a32;
517
- --dash-main-background--light: #ffffff;
518
-
519
- // Dash Scroll
520
- --dash-scroll-thumb-color--dark: #41ab5d;
521
- --dash-scroll-thumb-color--light: #74c476;
522
- --dash-scroll-track-color--dark: #005a32;
523
- --dash-scroll-track-color--light: #e5f5e0;
524
-
525
- // Dash Sidebar
526
- --dash-sidebar-bg--dark: #005a32;
527
- --dash-sidebar-bg--light: #41ab5d;
528
- --dash-sidebar-bg-contrast--dark: #238b45;
529
- --dash-sidebar-bg-contrast--light: #005a32;
530
- --dash-sidebar-bg-hover--dark: #238b45;
531
- --dash-sidebar-bg-hover--light: #005a32;
532
- --dash-sidebar-bg-primary--dark: #005a32;
533
- --dash-sidebar-bg-primary--light: #41ab5d;
534
- --dash-sidebar-color--dark: #238b45;
535
- --dash-sidebar-color--light: #fff;
536
- --dash-sidebar-color-active--dark: #f7fcf5;
537
- --dash-sidebar-color-active--light: #e5f5e0;
538
- --dash-sidebar-color-contrast--dark: #a1d99b;
539
- --dash-sidebar-color-contrast--light: #e5f5e0;
540
- --dash-sidebar-color-primary--dark: #238b45;
541
- --dash-sidebar-color-primary--light: #fff;
542
- --dash-sidebar-handle-contrast--dark: rgba(35, 139, 69, 0.6);
543
- --dash-sidebar-handle-contrast--light: rgba(255, 255, 255, 0.5);
544
- --dash-sidebar-handle-primary--dark: rgba(65, 171, 93, 0.4);
545
- --dash-sidebar-handle-primary--light: rgba(255, 255, 255, 0.2);
546
- --dash-sidebar-icon-color--dark: #f7fcf5;
547
- --dash-sidebar-icon-color--light: #41ab5d;
548
- --dash-sidebar-icon-color-active--dark: #41ab5d;
549
- --dash-sidebar-icon-color-active--light: #e5f5e0;
550
- --dash-sidebar-icon-color-primary--dark: #f7fcf5;
551
- --dash-sidebar-icon-color-primary--light: #41ab5d;
552
- --dash-sidebar-icon-color-secondary--dark: #41ab5d;
553
- --dash-sidebar-icon-color-secondary--light: #e5f5e0;
554
- --dash-sidebar-submenu-bg-contrast--dark: #238b45;
555
- --dash-sidebar-submenu-bg-contrast--light: #005a32;
556
- --dash-sidebar-submenu-bg-primary--dark: #238b45;
557
- --dash-sidebar-submenu-bg-primary--light: #e5f5e0;
558
- --dash-sidebar-submenu-color-contrast--dark: #a1d99b;
559
- --dash-sidebar-submenu-color-contrast--light: #e5f5e0;
560
- --dash-sidebar-submenu-color-primary--dark: #f7fcf5;
561
- --dash-sidebar-submenu-color-primary--light: #41ab5d;
562
-
563
- // Header
564
- --header-background--dark: rgba(0, 0, 0, 0.6);
565
- --header-background--light: #f8f8f8;
566
- --header-font-color--dark: #f7fcf5;
567
- --header-font-color--light: #000;
568
- --header-input-background--dark: rgba(0, 0, 0, 0.6);
569
- --header-input-background--light: #f8f8f8;
570
-
571
- // Link
572
- --link-active-color--dark: #238b45;
573
- --link-active-color--light: #005a32;
574
- --link-hover-color--dark: #a1d99b;
575
- --link-hover-color--light: #41ab5d;
576
-
577
- // Module
578
- --module-background--dark: rgba(5, 60, 0, 1);
579
- --module-background--light: #f8f8f8;
580
-
581
- // Contrast
582
- --primary-contrast-color--dark: #005a32;
583
- --primary-contrast-color--light: #005a32;
584
-
585
- // Text Variants
586
- --text-contrast-color--dark: #cccccc;
587
- --text-contrast-color--light: #595959;
588
- --text-light-color--dark: #ffffff;
589
- --text-light-color--light: #6c6c6c;
590
-
591
-
592
- /* =============================================
593
- ANT TABLE – DARK THEME MAPPING
594
- ============================================= */
595
-
596
- // Global antd color tokens
597
- --ant-color-bg-container: var(--component-bg);
598
- --ant-color-bg-elevated: var(--module-bg);
599
- --ant-color-bg-layout: var(--bodybg-primary);
600
- --ant-color-text: var(--text-color);
601
- --ant-color-text-secondary: var(--text-light-color);
602
- --ant-color-border: var(--border-color);
603
- --ant-color-border-secondary: var(--border-color);
604
- --ant-color-split: var(--component-border-split);
605
- --ant-color-primary: var(--btn-bg);
606
-
607
- // Table-specific tokens
608
- --ant-table-header-bg: var(--table-header-bg);
609
- --ant-table-header-color: var(--table-header-color);
610
-
611
- --ant-table-header-sort-active-bg: var(--component-active-bg);
612
- --ant-table-header-sort-hover-bg: var(--component-hover-bg);
613
- --ant-table-body-sort-bg: var(--component-bg);
614
-
615
- --ant-table-row-hover-bg: var(--component-hover-bg);
616
- --ant-table-row-selected-bg: var(--component-active-bg);
617
- --ant-table-row-selected-hover-bg: var(--component-hover-bg);
618
- --ant-table-row-expanded-bg: var(--component-bg);
619
-
620
- --ant-table-border-color: var(--border-color);
621
- --ant-table-header-split-color: var(--component-border-split);
622
- --ant-table-fixed-header-sort-active-bg: var(--component-active-bg);
623
-
624
- --ant-table-header-filter-hover-bg: var(--component-hover-bg);
625
- --ant-table-filter-dropdown-menu-bg: var(--component-bg);
626
- --ant-table-filter-dropdown-bg: var(--component-bg);
627
-
628
- --ant-table-expand-icon-bg: var(--component-bg);
629
-
630
- --ant-table-footer-bg: var(--component-bg);
631
- --ant-table-footer-color: var(--text-color);
632
-
633
- --ant-table-header-icon-color: var(--text-contrast);
634
- --ant-table-header-icon-hover-color: var(--text-color);
635
-
636
- --ant-table-sticky-scroll-bar-bg: var(--scroll_thumb-color);
637
-
638
- // Pagination tokens
639
- --ant-pagination-item-bg: var(--component-bg);
640
- --ant-pagination-item-active-bg: var(--btn-bg);
641
- --ant-pagination-item-active-color: var(--btn-color);
642
-
643
-
644
- }
645
-
646
- // =============================================
647
- // ANT DESIGN COMPONENT OVERRIDES
648
- // Antd v6 CSS-in-JS generates CSS variables scoped to wrapper classes
649
- // (e.g. .ant-table-css-var), which override :root variables.
650
- // We must target these classes directly for our overrides to win.
651
- // =============================================
652
-
653
- .ant-table-css-var {
654
- --ant-table-header-bg: var(--table-header-bg) !important;
655
- --ant-table-header-color: var(--table-header-color) !important;
656
- --ant-table-header-sort-active-bg: var(--component-active-bg) !important;
657
- --ant-table-header-sort-hover-bg: var(--component-hover-bg) !important;
658
- --ant-table-body-sort-bg: var(--component-bg) !important;
659
- --ant-table-row-hover-bg: var(--component-hover-bg) !important;
660
- --ant-table-row-selected-bg: var(--component-active-bg) !important;
661
- --ant-table-row-selected-hover-bg: var(--component-hover-bg) !important;
662
- --ant-table-row-expanded-bg: var(--component-bg) !important;
663
- --ant-table-border-color: var(--border-color) !important;
664
- --ant-table-header-split-color: var(--component-border-split) !important;
665
- --ant-table-fixed-header-sort-active-bg: var(--component-active-bg) !important;
666
- --ant-table-header-filter-hover-bg: var(--component-hover-bg) !important;
667
- --ant-table-filter-dropdown-menu-bg: var(--component-bg) !important;
668
- --ant-table-filter-dropdown-bg: var(--component-bg) !important;
669
- --ant-table-expand-icon-bg: var(--component-bg) !important;
670
- --ant-table-footer-bg: var(--component-bg) !important;
671
- --ant-table-footer-color: var(--text-color) !important;
672
- --ant-table-header-icon-color: var(--text-contrast) !important;
673
- --ant-table-header-icon-hover-color: var(--text-color) !important;
674
- --ant-table-sticky-scroll-bar-bg: var(--scroll_thumb-color) !important;
675
- }
676
-
677
- // Override global antd CSS variables on any antd component wrapper
678
- .css-var-root {
679
- --ant-color-bg-container: var(--component-bg) !important;
680
- --ant-color-bg-elevated: var(--module-bg) !important;
681
- --ant-color-bg-layout: var(--bodybg-primary) !important;
682
- --ant-color-text: var(--text-color) !important;
683
- --ant-color-text-secondary: var(--text-light-color) !important;
684
- --ant-color-border: var(--border-color) !important;
685
- --ant-color-border-secondary: var(--border-color) !important;
686
- --ant-color-split: var(--component-border-split) !important;
687
- --ant-color-primary: var(--btn-bg) !important;
688
- }
689
-
690
- // Pagination overrides – use table header bg/color for active state
691
- .ant-pagination-css-var {
692
- --ant-pagination-item-bg: var(--component-bg) !important;
693
- --ant-pagination-item-active-bg: var(--table-header-bg) !important;
694
- --ant-pagination-item-active-color: var(--table-header-color) !important;
695
- --ant-pagination-item-active-color-disabled: var(--disabled-color) !important;
696
- --ant-pagination-item-link-bg: var(--component-bg) !important;
697
- --ant-pagination-item-input-bg: var(--component-bg) !important;
698
- }
699
-
700
- // Direct styling for pagination items (numbers, arrows, size changer)
701
- .ant-pagination {
702
- .ant-pagination-item {
703
- background: var(--component-bg);
704
- border-color: var(--border-color);
705
-
706
- a {
707
- color: var(--text-color);
708
- }
709
-
710
- &:hover {
711
- border-color: var(--table-header-bg);
712
- a {
713
- color: var(--table-header-bg);
714
- }
715
- }
716
-
717
- &.ant-pagination-item-active {
718
- background: var(--table-header-bg);
719
- border-color: var(--table-header-bg);
720
-
721
- a {
722
- color: var(--table-header-color);
723
- }
724
-
725
- &:hover {
726
- border-color: var(--table-header-bg);
727
- a {
728
- color: var(--table-header-color);
729
- }
730
- }
731
- }
732
- }
733
-
734
- .ant-pagination-prev,
735
- .ant-pagination-next {
736
- .ant-pagination-item-link {
737
- color: var(--text-color);
738
- }
739
-
740
- &:hover .ant-pagination-item-link {
741
- color: var(--table-header-bg);
742
- }
743
-
744
- &.ant-pagination-disabled .ant-pagination-item-link {
745
- color: var(--disabled-color);
746
- }
747
- }
748
-
749
- .ant-pagination-jump-prev,
750
- .ant-pagination-jump-next {
751
- .ant-pagination-item-ellipsis {
752
- color: var(--text-color);
753
- }
754
- .ant-pagination-item-link-icon {
755
- color: var(--table-header-bg);
756
- }
757
- }
758
-
759
- .ant-pagination-options {
760
- .ant-select-selector {
761
- background: var(--component-bg) !important;
762
- border-color: var(--border-color) !important;
763
- color: var(--text-color) !important;
764
- }
765
- }
766
- }