@dashadmin/dash-styles 1.3.73 → 1.3.74-srcfree.2

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 (57) hide show
  1. package/dist/helpers/getAllCssVariablesFromStyleSheets.d.ts +2 -0
  2. package/dist/index.d.ts +6 -9
  3. package/package.json +5 -5
  4. package/src/assets/fonts/Montserrat-Black.ttf +0 -0
  5. package/src/assets/fonts/Montserrat-Bold.ttf +0 -0
  6. package/src/assets/fonts/Montserrat-Medium.ttf +0 -0
  7. package/src/assets/fonts/Montserrat-Regular.ttf +0 -0
  8. package/src/assets/fonts/Montserrat-SemiBold.ttf +0 -0
  9. package/src/dash-css-transformer.less +0 -769
  10. package/src/dash-variables.less +0 -10
  11. package/src/dash.less +0 -38
  12. package/src/helpers/getAllCssVariablesFromStyleSheets.tsx +0 -46
  13. package/src/index.tsx +0 -1089
  14. package/src/index.tsx.suffixed +0 -680
  15. package/src/styles/button.less +0 -120
  16. package/src/styles/buttons.less +0 -10
  17. package/src/styles/card.less +0 -361
  18. package/src/styles/common.less +0 -62
  19. package/src/styles/components/notfound.less +0 -50
  20. package/src/styles/extra.less +0 -25
  21. package/src/styles/filters.less +0 -7
  22. package/src/styles/forms.less +0 -41
  23. package/src/styles/framed.less +0 -45
  24. package/src/styles/header.less +0 -882
  25. package/src/styles/input.copy.less +0 -223
  26. package/src/styles/input.less +0 -223
  27. package/src/styles/layout.less +0 -298
  28. package/src/styles/links.less +0 -28
  29. package/src/styles/loader.less +0 -20
  30. package/src/styles/login.less +0 -331
  31. package/src/styles/modal.less +0 -127
  32. package/src/styles/module.less +0 -29
  33. package/src/styles/mui-overrides.less +0 -62
  34. package/src/styles/notification.less +0 -46
  35. package/src/styles/pages/profile.less +0 -139
  36. package/src/styles/pagination.less +0 -90
  37. package/src/styles/popover.less +0 -21
  38. package/src/styles/react-admin/common.less +0 -184
  39. package/src/styles/react-admin/toolbar.less +0 -22
  40. package/src/styles/root.less +0 -13
  41. package/src/styles/sidebar.less +0 -1015
  42. package/src/styles/splash.less +0 -44
  43. package/src/styles/static.less +0 -59
  44. package/src/styles/stats.less +0 -5
  45. package/src/styles/svg.less +0 -30
  46. package/src/styles/switch.less +0 -7
  47. package/src/styles/table.less +0 -196
  48. package/src/styles/tabs.less +0 -181
  49. package/src/styles/tags.less +0 -97
  50. package/src/styles/toast.less +0 -83
  51. package/src/styles/toolbar.less +0 -90
  52. package/src/styles/transition.less +0 -226
  53. package/src/styles/uploader.less +0 -38
  54. package/src/variables/breakpoints.less +0 -35
  55. package/src/variables/colors.less +0 -205
  56. package/src/variables/dash-colors.less +0 -52
  57. package/src/variables/sizes.less +0 -150
package/src/index.tsx DELETED
@@ -1,1089 +0,0 @@
1
- import { defaultTheme } from 'react-admin';
2
- import { deepmerge } from '@mui/utils';
3
- import { theme as antdTheme } from 'antd';
4
-
5
- const getAllCssVariablesFromStyleSheets = (selector: string) => {
6
- const cssVariables = {};
7
-
8
- for (let i = 0; i < document.styleSheets.length; i++) {
9
- try {
10
- const styleSheet = document.styleSheets[i];
11
- // Skip our dynamic theme style element to read only compiled/static defaults.
12
- // This ensures _color() fallback reads from compiled LESS CSS, not stale tenant values.
13
- if ((styleSheet.ownerNode as HTMLElement)?.id === 'dash-theme-variables') continue;
14
- if (!styleSheet.cssRules) continue;
15
-
16
- for (let j = 0; j < styleSheet.cssRules.length; j++) {
17
- const rule = styleSheet.cssRules[j];
18
-
19
- /* @ts-ignore */
20
- if (rule.selectorText === selector) {
21
- /* @ts-ignore */
22
- const style = rule.style;
23
-
24
- for (let k = 0; k < style.length; k++) {
25
- const prop = style[k];
26
- if (prop.startsWith('--')) {
27
- cssVariables[prop] = style.getPropertyValue(prop).trim();
28
- }
29
- }
30
- }
31
- }
32
- } catch (e) {
33
- console.warn('Could not access stylesheet:', e);
34
- }
35
- }
36
-
37
- return cssVariables;
38
- };
39
-
40
- export const defaultOptions = (options) => {
41
- const { tenantSettings, colors, ...otherOptions } = options || {};
42
- const currentTheme = document.documentElement.getAttribute('data-theme') || 'dark';
43
- const cssVars = getAllCssVariablesFromStyleSheets(":root");
44
-
45
- // Mirrors getAntTheme()'s resolve(): a tenant's saved `colors` object can be
46
- // PARTIAL (only the base swatches, not every derived key this palette needs).
47
- // Previously, a truthy `colors` object short-circuited straight to `{}` for any
48
- // key it didn't contain, skipping the compiled-CSS fallback entirely — so once
49
- // the tenant's real (partial) colors started flowing through here, every
50
- // missing key silently fell back to MUI's own stock palette (blue/magenta)
51
- // instead of the compiled LESS defaults. Chain through both sources instead.
52
- const _color = (key, colorKey, mode = null) => {
53
- const suffix = `${colorKey}--${mode || currentTheme}`;
54
- const colorValue = colors?.[suffix] || cssVars[`--${suffix}`];
55
- return colorValue ? { [key]: colorValue } : {};
56
- };
57
-
58
- const createPalette = (mode = 'light') => {
59
-
60
- const palette = {
61
- mode,
62
- background: {
63
- ..._color('default', 'module-bg', mode),
64
- ..._color('paper', 'module-bg', mode)
65
- },
66
- primary: {
67
- //..._color('main', 'primary-color', mode),
68
- //..._color('main', 'highlight-color', mode),
69
- ..._color('main', 'btn-bg', mode),
70
- // No explicit contrastText: MUI's palette augmentation derives it via
71
- // getContrastText(main) when omitted, guaranteeing legible button text
72
- // regardless of what --primary-contrast happens to be set to (it's also
73
- // used standalone as a gradient stop elsewhere, so was never guaranteed
74
- // to be a valid contrast color — see vanexa-system, 2026-08-03).
75
- //..._color('contrastText', 'primary-contrast', mode)
76
- },
77
- secondary: {
78
- ..._color('main', 'secondary-color', mode)
79
- },
80
- text: {
81
- ..._color('primary', 'text-color', mode),
82
- ..._color('secondary', 'text-light', mode),
83
- ..._color('disabled', 'disabled-color', mode)
84
- },
85
- action: {
86
- ..._color('active', 'component-active-bg', mode),
87
- ..._color('hover', 'component-hover-bg', mode),
88
- ..._color('disabled', 'disabled-color', mode),
89
- ..._color('disabledBackground', 'disabled-bg', mode)
90
- },
91
- //..._color('divider', 'component-border-split', mode),
92
- ..._color('border', 'border-color', mode),
93
- error: {
94
- ..._color('main', 'alert-error-bg', mode),
95
- ..._color('contrastText', 'alert-error-title', mode)
96
- },
97
- warning: {
98
- ..._color('main', 'alert-warning-bg', mode),
99
- ..._color('contrastText', 'alert-warning-title', mode)
100
- },
101
- info: {
102
- ..._color('main', 'alert-info-bg', mode),
103
- ..._color('contrastText', 'alert-info-title', mode)
104
- },
105
- success: {
106
- ..._color('main', 'alert-success-bg', mode),
107
- ..._color('contrastText', 'alert-success-title', mode)
108
- },
109
- common: {
110
- ..._color('black', 'text-color', mode),
111
- ..._color('white', 'text-contrast', mode)
112
- },
113
- variant: {
114
- ..._color('containedBg', 'btn-bg', mode),
115
-
116
- }
117
- };
118
-
119
- // Filter out empty objects and undefined values
120
- const filtered = Object.fromEntries(
121
- Object.entries(palette).filter(([_, value]) => {
122
- if (typeof value === 'object' && value !== null) {
123
- return Object.keys(value).length > 0;
124
- }
125
- return value !== undefined;
126
- })
127
- );
128
-
129
- return filtered;
130
- };
131
-
132
- return {
133
- cssVariables: {
134
- cssVarPrefix: 'dash', // Your custom prefix
135
- colorSchemeSelector: 'data-theme', // Tell MUI to use data attributes
136
- colorSchemeStorageKey: 'theme', // Use same key as dashStorage for consistency
137
- },
138
- // Enable both light and dark color schemes - NO 'system' to force light/dark only
139
- colorSchemes: {
140
- light: {
141
- palette: createPalette('light')
142
- },
143
- dark: {
144
- palette: createPalette('dark')
145
- },
146
- },
147
-
148
- defaultColorScheme: currentTheme || 'dark',
149
-
150
-
151
- palette: createPalette(currentTheme),
152
-
153
-
154
- // Don't put your custom CSS variables in the palette
155
- // Instead, use them directly in component overrides
156
- typography: {
157
- allVariants: {
158
- //color: 'var(--text-color)', // Keep using your CSS variables here
159
- },
160
- },
161
- components: {
162
- // Override ALL color usage in component overrides
163
- MuiCssBaseline: {
164
- styleOverrides: {
165
- body: {
166
- //background: 'linear-gradient(to bottom, var(--bodybg-primary), var(--bodybg-secondary))',
167
- //color: 'var(--text-color)',
168
- },
169
- },
170
- },
171
-
172
-
173
- /* MuiIconButton: {
174
- styleOverrides: {
175
- root: {
176
- backgroundColor: 'var(--btn-bg)',
177
- color: 'var(--btn-color)',
178
-
179
- '&.MuiIconButton-containedPrimary': {
180
- backgroundColor: 'var(--primary-color)',
181
- color: 'var(--btn-color)',
182
- '&:hover': {
183
- backgroundColor: 'var(--highlight-color)',
184
- },
185
- },
186
- '&.MuiIconButton-containedSecondary': {
187
- backgroundColor: 'var(--secondary-color)',
188
- color: 'var(--btn-color)',
189
- '&:hover': {
190
- backgroundColor: 'var(--highlight-color)',
191
- },
192
- },
193
- '&.MuiIconButton-outlinedPrimary': {
194
- backgroundColor: 'inherit',
195
- borderColor: 'var(--primary-color)',
196
- color: 'var(--text-color)',
197
- '&:hover': {
198
- borderColor: 'var(--highlight-color)',
199
- },
200
- },
201
- '&.MuiIconButton-outlinedSecondary': {
202
- backgroundColor: 'inherit',
203
- borderColor: 'var(--primary-color)',
204
- color: 'var(--text-color)',
205
- '&:hover': {
206
- borderColor: 'var(--highlight-color)',
207
- },
208
- },
209
- },
210
- },
211
- },*/
212
-
213
-
214
- /*MuiToolbar: {
215
- styleOverrides: {
216
- root: {
217
- backgroundColor: 'var(--table-header-bg)',
218
- }
219
- }
220
- },*/
221
-
222
-
223
- /*MuiButtonBase: {
224
- styleOverrides: {
225
- root: {
226
- backgroundColor: 'var(--btn-bg)',
227
- color: 'var(--btn-color)',
228
-
229
- '&.MuiButton-containedPrimary': {
230
- backgroundColor: 'var(--btn-primary-bg)',
231
- color: 'var(--btn-primary-color)',
232
- '&:hover': {
233
- backgroundColor: 'var(--highlight-color)',
234
- },
235
- },
236
- '&.MuiButton-containedSecondary': {
237
- backgroundColor: 'var(--btn-secondary-bg)',
238
- color: 'var(--btn-secondary-color)',
239
- '&:hover': {
240
- backgroundColor: 'var(--btn-secondary-color)',
241
- },
242
- },
243
- '&.MuiButton-outlinedPrimary': {
244
- backgroundColor: 'inherit',
245
- borderColor: 'var(--btn-primary-bg)',
246
- color: 'var(--text-color)',
247
- '&:hover': {
248
- borderColor: 'var(--highlight-color)',
249
- color: 'var(--highlight-color-contrast)',
250
- },
251
- },
252
- '&.MuiButton-outlinedSecondary': {
253
- backgroundColor: 'inherit',
254
- borderColor: 'var(--btn-primary-bg)',
255
- color: 'var(--text-color)',
256
- '&:hover': {
257
- borderColor: 'var(--highlight-color)',
258
- color: 'var(--highlight-color-contrast)',
259
- },
260
- },
261
- '&.MuiButton-textPrimary': {
262
- color: 'var(--link-color)',
263
- background: 'none',
264
- '&:hover': {
265
- color: 'var(--highlight-color)',
266
- textDecoration: 'underline',
267
- background: 'none',
268
- },
269
- },
270
- '&.MuiButton-textSecondary': {
271
- color: 'var(--text-light)',
272
- background: 'none',
273
- '&:hover': {
274
- color: 'var(--text-color)',
275
- textDecoration: 'underline',
276
- background: 'none',
277
- },
278
- },
279
- },
280
- },
281
- },*/
282
-
283
-
284
- MuiButton: {
285
- styleOverrides: {
286
- root: {
287
- backgroundColor: 'var(--btn-bg)',
288
- color: 'var(--btn-color)',
289
-
290
- "&.MuiButton-contained.MuiButton-colorPrimary": {
291
- backgroundColor: 'var(--btn-primary-bg)',
292
- color: 'var(--btn-primary-color)',
293
- '&:hover': {
294
- backgroundColor: 'var(--highlight-color)',
295
- },
296
- },
297
- "&.MuiButton-contained.MuiButton-colorSecondary": {
298
- backgroundColor: 'var(--btn-secondary-bg)',
299
- color: 'var(--btn-secondary-color)',
300
- '&:hover': {
301
- backgroundColor: 'var(--btn-secondary-color)',
302
- },
303
- },
304
- "&.MuiButton-outlined.MuiButton-colorPrimary": {
305
- backgroundColor: 'inherit',
306
- borderColor: 'var(--btn-primary-bg)',
307
- color: 'var(--text-color)',
308
- '&:hover': {
309
- borderColor: 'var(--highlight-color)',
310
- color: 'var(--highlight-color-contrast)',
311
- },
312
- },
313
- "&.MuiButton-outlined.MuiButton-colorSecondary": {
314
- backgroundColor: 'inherit',
315
- borderColor: 'var(--btn-primary-bg)',
316
- color: 'var(--text-color)',
317
- '&:hover': {
318
- borderColor: 'var(--highlight-color)',
319
- color: 'var(--highlight-color-contrast)',
320
- },
321
- },
322
- "&.MuiButton-text.MuiButton-colorPrimary": {
323
- color: 'var(--link-color)',
324
- background: 'none',
325
- '&:hover': {
326
- color: 'var(--highlight-color)',
327
- textDecoration: 'underline',
328
- background: 'none',
329
- },
330
- },
331
- "&.MuiButton-text.MuiButton-colorSecondary": {
332
- color: 'var(--text-light)',
333
- background: 'none',
334
- '&:hover': {
335
- color: 'var(--text-color)',
336
- textDecoration: 'underline',
337
- background: 'none',
338
- },
339
- },
340
- },
341
- },
342
- },
343
- MuiDialog: {
344
- styleOverrides: {
345
- root: {
346
- zIndex: 100
347
- }
348
- }
349
- },
350
- MuiDialogTitle: {
351
- styleOverrides: {
352
- root: {
353
-
354
- '& svg': {
355
- color: 'var(--text-color)',
356
- },
357
- }
358
- }
359
- },
360
- MuiTooltip: {
361
- styleOverrides: {
362
- tooltip: {
363
- backgroundColor: 'var(--module-bg)',
364
- color: 'var(--text-color)',
365
- border: '1px solid var(--border-color)',
366
- fontSize: '0.75rem',
367
- maxWidth: 300,
368
- '& .MuiTooltip-arrow': {
369
- color: 'var(--module-bg)',
370
- '&::before': {
371
- border: '1px solid var(--border-color)',
372
- },
373
- },
374
- },
375
- popper: {
376
- '&[data-popper-placement*="bottom"] .MuiTooltip-tooltip': {
377
- marginTop: '8px',
378
- },
379
- '&[data-popper-placement*="top"] .MuiTooltip-tooltip': {
380
- marginBottom: '8px',
381
- },
382
- '&[data-popper-placement*="right"] .MuiTooltip-tooltip': {
383
- marginLeft: '8px',
384
- },
385
- '&[data-popper-placement*="left"] .MuiTooltip-tooltip': {
386
- marginRight: '8px',
387
- },
388
- },
389
- },
390
- },
391
- MuiTabs: {
392
- styleOverrides: {
393
- indicator: {
394
- backgroundColor: 'var(--highlight-color)',
395
- },
396
- },
397
- },
398
-
399
- MuiListItemIcon: {
400
- styleOverrides: {
401
- root: {
402
- color: 'var(--sidebar-icon)',
403
- '& svg': {
404
- color: 'var(--sidebar-icon)',
405
- },
406
- },
407
- },
408
-
409
- },
410
-
411
- RaReferenceField: {
412
- styleOverrides: {
413
- root: {
414
- '& .RaReferenceField-link>*': {
415
- color: 'var(--text-color)',
416
- },
417
- },
418
- },
419
- },
420
- RaSingleFieldList: {
421
- styleOverrides: {
422
- root: {
423
- '& .RaSingleFieldList-link>*': {
424
- color: 'var(--text-color)',
425
- },
426
- },
427
- },
428
- },
429
- /*MuiInputAdornment: {
430
- styleOverrides: {
431
- root: {
432
- '& svg': {
433
- color: 'var(--highlight-color)',
434
- },
435
- },
436
- },
437
- },*/
438
- MuiTab: {
439
- styleOverrides: {
440
- root: {
441
- '&.MuiButtonBase-root': {
442
- '&.Mui-selected': {
443
- color: 'var(--highlight-color)',
444
- backgroundColor: 'var(--tab-selected-bg)',
445
- },
446
- '&.MuiTab-textColorPrimary': {
447
- color: 'var(--table-color)',
448
- },
449
- },
450
- },
451
- },
452
- },
453
- MuiAlert: {
454
- styleOverrides: {
455
- root: {
456
- "&.MuiAlert-standard.MuiAlert-colorInfo": {
457
- backgroundColor: 'var(--module-bg)',
458
- color: 'var(--text-color)',
459
- '& .MuiAlert-icon': {
460
- color: 'var(--highlight-color)',
461
- },
462
- '& .MuiAlertTitle-root': {
463
- color: 'var(--text-color)',
464
- },
465
- },
466
- "&.MuiAlert-standard.MuiAlert-colorError": {
467
- backgroundColor: 'var(--dash-alert-error-bg)',
468
- color: 'var(--dash-alert-error-title)',
469
- },
470
- "&.MuiAlert-standard.MuiAlert-colorWarning": {
471
- backgroundColor: 'var(--dash-alert-warning-bg)',
472
- color: 'var(--dash-alert-warning-title)',
473
- },
474
- "&.MuiAlert-standard.MuiAlert-colorSuccess": {
475
- backgroundColor: 'var(--dash-alert-success-bg)',
476
- color: 'var(--dash-alert-success-title)',
477
- },
478
- },
479
- },
480
- },
481
- MuiAccordion: {
482
- styleOverrides: {
483
- root: {
484
- backgroundColor: 'var(--module-bg)',
485
- '&.MuiPaper-root': {
486
- backgroundColor: 'var(--module-bg)',
487
- },
488
- },
489
- },
490
- },
491
- MuiAccordionSummary: {
492
- styleOverrides: {
493
- expandIconWrapper: {
494
- color: 'inherit',
495
- '& .MuiSvgIcon-root': {
496
- color: 'inherit',
497
- },
498
- },
499
- },
500
- },
501
- MuiBox: {
502
- styleOverrides: {
503
- root: {
504
- display: 'flex !important',
505
- },
506
- },
507
- },
508
-
509
-
510
- /* MuiCard: {
511
- styleOverrides: {
512
- root: {
513
- backgroundColor: 'var(--module-bg)',
514
- },
515
- },
516
- },
517
- MuiPaper: {
518
- styleOverrides: {
519
- root: {
520
- marginBottom: 8,
521
- backgroundColor: 'var(--module-bg)', // Use the correct variable name
522
- color: 'var(--text-color)',
523
- },
524
- },
525
- },
526
- */
527
-
528
- MuiPaper: {
529
- styleOverrides: {
530
- root: {
531
- backgroundColor: 'var(--module-bg)', // Use the correct variable name
532
- color: 'var(--text-color)',
533
- },
534
- },
535
- },
536
-
537
- MuiAppBar: {
538
- styleOverrides: {
539
- root: {
540
- backgroundColor: 'var(--primary-color)',
541
- color: 'var(--text-contrast-color)',
542
- },
543
- },
544
- },
545
- /*MuiChip: {
546
- styleOverrides: {
547
- root: {
548
- '&.MuiChip-colorPrimary': {
549
- backgroundColor: 'var(--primary-color)',
550
- color: 'var(--text-light-color)',
551
- },
552
- '&.MuiChip-colorSecondary': {
553
- backgroundColor: 'var(--secondary-color)',
554
- color: 'var(--text-light-color)',
555
- },
556
- },
557
- },
558
- },*/
559
-
560
-
561
- MuiInputBase: {
562
- styleOverrides: {
563
- input: {
564
- '& .MuiOutlinedInput-root': {
565
-
566
- border: 1,
567
- },
568
- },
569
-
570
- /*input: {
571
- '&::placeholder': {
572
- color: 'var(--highlight-color)',
573
- opacity: 1,
574
- },
575
- // For WebKit browsers
576
- '&::-webkit-input-placeholder': {
577
- color: 'var(--highlight-color)',
578
- opacity: 1,
579
- },
580
- },*/
581
- colorPrimary: {
582
- color: 'var(--text-color)',
583
- },
584
- },
585
- },
586
- MuiOutlinedInput: {
587
- styleOverrides: {
588
- root: {
589
- color: 'var(--text-color)',
590
- '& .MuiOutlinedInput-notchedOutline': {
591
- borderColor: 'var(--border-color)',
592
- },
593
- '&:hover .MuiOutlinedInput-notchedOutline': {
594
- borderColor: 'var(--primary-color)',
595
- },
596
- '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
597
- borderColor: 'var(--primary-color)',
598
- },
599
- },
600
- },
601
- },
602
- MuiInputLabel: {
603
- styleOverrides: {
604
- root: {
605
- color: 'var(--text-color)',
606
- '&.Mui-focused': {
607
- color: 'var(--primary-color)',
608
- },
609
- },
610
- },
611
- },
612
- MuiSelect: {
613
- styleOverrides: {
614
- select: {
615
- color: 'var(--text-color)',
616
- },
617
- icon: {
618
- color: 'var(--text-color)',
619
- },
620
- },
621
- },
622
- MuiTextField: {
623
- styleOverrides: {
624
- root: {
625
- '& .MuiOutlinedInput-root': {
626
- '& fieldset': {
627
- borderColor: 'var(--border-color)',
628
- },
629
- '&:hover fieldset': {
630
- borderColor: 'var(--primary-color)',
631
- },
632
- '&.Mui-focused fieldset': {
633
- borderColor: 'var(--primary-color)',
634
- },
635
- },
636
- '& .MuiInputLabel-root': {
637
- color: 'var(--text-light-color)',
638
- '&.Mui-focused': {
639
- color: 'var(--primary-color)',
640
- },
641
- },
642
- /* '& .MuiInputBase-input': {
643
- color: 'var(--text-color)',
644
- // Add placeholder styling here
645
- '&::placeholder': {
646
- color: 'var(--highlight-color)',
647
- opacity: 0.7,
648
- },
649
- '&::-webkit-input-placeholder': {
650
- color: 'var(--highlight-color)',
651
- opacity: 0.7,
652
- },
653
- '&::-moz-placeholder': {
654
- color: 'var(--highlight-color)',
655
- opacity: 0.7,
656
- },
657
- '&:-ms-input-placeholder': {
658
- color: 'var(--highlight-color)',
659
- opacity: 0.7,
660
- },
661
- '&:-moz-placeholder': {
662
- color: 'var(--highlight-color)',
663
- opacity: 0.7,
664
- },
665
- },*/
666
- },
667
- },
668
- },
669
- // Add more component overrides as needed for other elements that use primary/secondary colors
670
- MuiIconButton: {
671
- styleOverrides: {
672
- root: {
673
- height: 30,
674
- width: 30,
675
- color: 'var(--text-color)',
676
- backgroundColor: 'var(--secondary-color)',
677
- '&:hover': {
678
- '& svg': {
679
- color: 'var(--highlight-color-contrast)',
680
- fill: 'var(--highlight-color-contrast)',
681
- },
682
- color: 'var(--highlight-color-contrast)',
683
- backgroundColor: 'var(--highlight-color)',
684
- },
685
- },
686
- },
687
- },
688
- MuiAvatar: {
689
- styleOverrides: {
690
- root: {
691
-
692
- color: 'var(--text-color)',
693
- backgroundColor: 'var(--secondary-color)',
694
- '&:hover': {
695
- '& svg': {
696
- color: 'var(--highlight-color-contrast)',
697
- fill: 'var(--highlight-color-contrast)',
698
- },
699
- color: 'var(--highlight-color-contrast)',
700
- backgroundColor: 'var(--highlight-color)',
701
- },
702
- },
703
- },
704
- },
705
- MuiTable: {
706
- styleOverrides: {
707
- root: {
708
- backgroundColor: 'var(--component-bg)',
709
- color: 'var(--text-color)',
710
- },
711
- },
712
- },
713
-
714
- MuiTableHead: {
715
- styleOverrides: {
716
- root: {
717
- backgroundColor: 'var(--table-header-bg) !important',
718
- color: 'var(--table-header-color) !important',
719
- },
720
- },
721
- },
722
- MuiTableRow: {
723
- styleOverrides: {
724
- root: {
725
- '&:hover': {
726
- backgroundColor: 'var(--component-hover-bg)',
727
- },
728
- '&.MuiTableRow-head': {
729
- backgroundColor: 'var(--table-header-bg) !important',
730
- color: 'var(--table-header-color) !important',
731
- },
732
- },
733
- },
734
- },
735
- MuiTableCell: {
736
- styleOverrides: {
737
- root: {
738
- textWrapMode: 'nowrap',
739
- borderColor: 'var(--border-color-split)',
740
- color: 'var(--text-color)',
741
- //borderBottom: '1px solid var(--border-color)',
742
- '& .MuiTableSortLabel-root, & .MuiTableSortLabel-icon': {
743
- color: 'var(--table-header-color) !important',
744
- },
745
- },
746
- head: {
747
- fontWeight: 600,
748
- color: 'var(--table-header-color) !important',
749
- backgroundColor: 'var(--table-header-bg) !important',
750
- },
751
- },
752
- },
753
- MuiDataGrid: {
754
- styleOverrides: {
755
- root: {
756
-
757
- backgroundColor: 'var(--component-bg)',
758
- color: 'var(--text-color)',
759
- border: '1px solid var(--border-color)',
760
- '& .MuiDataGrid-main': {
761
- backgroundColor: 'var(--component-bg)',
762
- },
763
- '& .MuiDataGrid-overlay': {
764
- backgroundColor: 'var(--component-bg)',
765
- color: 'var(--text-color)',
766
- },
767
- // Add this to target the header row specifically
768
- '& .MuiDataGrid-columnHeaderRow': {
769
- color: 'var(--table-header-color) !important',
770
- backgroundColor: 'var(--table-header-bg) !important',
771
- },
772
- // Also target the container that holds the header
773
- '& .MuiDataGrid-container--top [role=row]': {
774
- color: 'var(--table-header-color) !important',
775
- backgroundColor: 'var(--table-header-bg) !important',
776
- },
777
- },
778
- columnHeader: {
779
- color: 'var(--table-header-color) !important',
780
- backgroundColor: 'var(--table-header-bg) !important',
781
- '& .MuiSvgIcon-root': {
782
- color: 'var(--highlight-color) !important',
783
-
784
- },
785
-
786
- },
787
- columnHeaders: {
788
- backgroundColor: 'var(--primary-contrast)',
789
- color: 'var(--btn-primary-color)',
790
- borderBottom: '1px solid var(--border-color)',
791
- '& .MuiDataGrid-columnHeaderTitle': {
792
- color: 'var(--btn-primary-color)',
793
- fontWeight: 600,
794
- },
795
- '& .MuiDataGrid-iconSeparator': {
796
- color: 'var(--btn-primary-color)',
797
- },
798
- '& .MuiDataGrid-sortIcon': {
799
- color: 'var(--btn-primary-color)',
800
- },
801
- '& .MuiDataGrid-menuIcon': {
802
- color: 'var(--btn-primary-color)',
803
- },
804
- },
805
- // Add this new selector for the column header row
806
- columnHeaderRow: {
807
- color: 'var(--table-header-color) !important',
808
- backgroundColor: 'var(--table-header-bg) !important',
809
- },
810
- cell: {
811
- borderBottom: '1px solid var(--border-color)',
812
- color: 'var(--text-color)',
813
- '&:focus': {
814
- outline: '1px solid var(--primary-color)',
815
- },
816
- '&.MuiDataGrid-cell--editing': {
817
- backgroundColor: 'var(--component-active-bg)',
818
- },
819
- },
820
- row: {
821
- backgroundColor: 'var(--component-bg)',
822
- '&:hover': {
823
- backgroundColor: 'var(--component-hover-bg)',
824
- },
825
- '&.Mui-selected': {
826
- backgroundColor: 'var(--component-active-bg)',
827
- '&:hover': {
828
- backgroundColor: 'var(--component-hover-bg)',
829
- },
830
- },
831
- '&.MuiDataGrid-row': {
832
- backgroundColor: 'var(--bodybg-primary)',
833
- },
834
- '&.MuiDataGrid-row--odd': {
835
- backgroundColor: 'var(--bodybg-secondary)',
836
- },
837
- },
838
- footerContainer: {
839
- backgroundColor: 'var(--component-bg)',
840
- borderTop: '1px solid var(--border-color-split)',
841
- color: 'var(--text-color)',
842
- },
843
- toolbarContainer: {
844
- backgroundColor: 'var(--component-bg)',
845
- borderBottom: '1px solid var(--border-color-split)',
846
- color: 'var(--text-color)',
847
- '& .MuiButton-root': {
848
- color: 'var(--btn-color)',
849
- '&:hover': {
850
- backgroundColor: 'var(--btn-hover-bg)',
851
- },
852
- },
853
- },
854
- filterForm: {
855
- backgroundColor: 'var(--component-bg)',
856
- color: 'var(--text-color)',
857
- },
858
- panel: {
859
- backgroundColor: 'var(--component-bg)',
860
- color: 'var(--text-color)',
861
- border: '1px solid var(--border-color)',
862
- },
863
- panelHeader: {
864
- backgroundColor: 'var(--primary-contrast)',
865
- borderBottom: '1px solid var(--border-color-split)',
866
- },
867
- panelContent: {
868
- backgroundColor: 'var(--component-bg)',
869
- },
870
- columnMenu: {
871
- backgroundColor: 'var(--component-bg)',
872
- color: 'var(--text-color)',
873
- '& .MuiMenuItem-root': {
874
- color: 'var(--text-color)',
875
- '&:hover': {
876
- backgroundColor: 'var(--component-hover-bg)',
877
- },
878
- },
879
- },
880
- },
881
- },
882
- },
883
- };
884
-
885
-
886
- };
887
-
888
- /**
889
- * Returns only the static component/typography overrides from defaultOptions.
890
- * These use CSS var() references that resolve at runtime, so they are
891
- * theme-agnostic and safe to memoize once (no stale palette values).
892
- *
893
- * Use this in the public app's DashThemeProviderLight to avoid
894
- * passing stale palette/colorSchemes that would overwrite the fresh
895
- * palette computed by the provider on theme switch.
896
- */
897
- export const defaultComponentOverrides = (options?: any) => {
898
- const full = defaultOptions(options || {});
899
- // Extract only the keys that are safe to memoize (no palette/colorSchemes)
900
- const { palette, colorSchemes, defaultColorScheme, cssVariables, ...safeOptions } = full;
901
- return safeOptions;
902
- };
903
-
904
- export const appTheme = (muiThemeOptions?: any, options?: {
905
- tenantSettings?: any;
906
- colors?: any;
907
- [key: string]: any;
908
- }) => {
909
- const { tenantSettings, colors, ...otherOptions } = options || {};
910
-
911
- // cssVariables/colorSchemes/defaultColorScheme are deliberately dropped here.
912
- // MUI's CSS-vars mode resolves colors via CSS custom properties scoped by
913
- // `colorSchemeSelector` (`data-theme` here), which emits a `:root` rule
914
- // (default scheme) alongside a `[data-theme="dark"]` rule — both at equal
915
- // (0,1,0) specificity. When the `:root` rule lands later in the generated
916
- // stylesheet it wins the tie even with data-theme="dark" set on <html>,
917
- // silently falling back to MUI's own default (near-white) palette instead
918
- // of ours — this was the root cause of the production-only white
919
- // MuiPaper/"Panel de Control" card bug (confirmed via DevTools: the
920
- // correct `var(--dash-palette-background-paper)` declaration was present
921
- // but struck through/overridden). We already rebuild the whole theme via
922
- // appTheme() on every mode/tenant-color change (see
923
- // DashThemeContext.recreateTheme's MutationObserver on data-theme), so
924
- // CSS-vars-driven runtime switching buys nothing and only adds this
925
- // failure mode. DASHAdmin.tsx already strips these same 3 keys before
926
- // handing the theme to react-admin (for a related v9 createThemeWithVars
927
- // bug) — this makes the outer DashThemeProvider's own theme consistent
928
- // with that, instead of only the inner (react-admin) one.
929
- const { colorSchemes: _colorSchemes, defaultColorScheme: _defaultColorScheme, cssVariables: _cssVariables, ...restDefaultOptions } = defaultOptions(options);
930
-
931
- const baseTheme = {
932
- ...restDefaultOptions,
933
- };
934
-
935
- const theme = muiThemeOptions
936
- ? deepmerge(deepmerge(defaultTheme, baseTheme), muiThemeOptions)
937
- : deepmerge(defaultTheme, baseTheme);
938
-
939
- return theme;
940
- };
941
-
942
- export const getAntTheme = (options?: {
943
- tenantSettings?: any;
944
- colors?: any;
945
- [key: string]: any;
946
- }): Record<string, any> => {
947
- const { colors } = options || {};
948
- const currentTheme =
949
- document.documentElement.getAttribute('data-theme') || 'dark';
950
- const cssVars = getAllCssVariablesFromStyleSheets(':root');
951
-
952
-
953
- // Resolve a CSS variable key to its computed hex value for the current theme.
954
- // Mirrors the _color() helper used by defaultOptions() for MUI palette.
955
- const resolve = (colorKey: string): string | undefined => {
956
- const suffixed = `--${colorKey}--${currentTheme}`;
957
- // 1. Tenant color overrides take priority
958
- if (colors?.[`${colorKey}--${currentTheme}`]) {
959
- return colors[`${colorKey}--${currentTheme}`];
960
- }
961
- // 2. Compiled LESS defaults from stylesheets
962
- if (cssVars[suffixed]) {
963
- return cssVars[suffixed];
964
- }
965
- // 3. Try the base key (no suffix) as last resort
966
- if (cssVars[`--${colorKey}`]) {
967
- return cssVars[`--${colorKey}`];
968
- }
969
- return undefined;
970
- };
971
-
972
- // Build a token object, filtering out undefined values
973
- const token: Record<string, any> = {
974
- // Core
975
- colorPrimary: resolve('btn-bg'),
976
- colorSuccess: resolve('alert-success-bg'),
977
- colorWarning: resolve('alert-warning-bg'),
978
- colorError: resolve('alert-error-bg'),
979
- colorInfo: resolve('alert-info-bg'),
980
-
981
- // Text
982
- colorText: resolve('text-color'),
983
- colorTextSecondary: resolve('text-light-color'),
984
- colorTextDisabled: resolve('disabled-color'),
985
-
986
- // Background
987
- colorBgBase: resolve('bodybg-primary'),
988
- colorBgContainer: resolve('component-bg'),
989
- colorBgElevated: resolve('module-bg'),
990
- colorBgLayout: resolve('body-bg'),
991
-
992
- // Borders
993
- colorBorder: resolve('border-color'),
994
- colorSplit: resolve('border-color-split'),
995
-
996
- // Typography
997
- fontSize: 14,
998
- borderRadius: 6,
999
- };
1000
-
1001
- // Remove undefined entries so antd uses its own defaults for missing values
1002
- Object.keys(token).forEach(k => { if (token[k] === undefined) delete token[k]; });
1003
-
1004
-
1005
- return {
1006
- cssVar: true,
1007
- hashed: false,
1008
- algorithm: currentTheme === 'dark' ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
1009
-
1010
- token,
1011
-
1012
- components: {
1013
- Table: {
1014
- headerBg: resolve('table-header-bg'),
1015
- headerColor: resolve('table-header-color'),
1016
- rowHoverBg: resolve('component-hover-bg'),
1017
- rowSelectedBg: resolve('component-active-bg'),
1018
- borderColor: resolve('border-color'),
1019
- footerBg: resolve('component-bg'),
1020
- },
1021
-
1022
- Button: {
1023
- colorPrimary: resolve('btn-bg'),
1024
- colorPrimaryHover: resolve('highlight-color'),
1025
- colorPrimaryActive: resolve('btn-active-bg'),
1026
- defaultBg: resolve('secondary-color'),
1027
- defaultColor: resolve('text-color'),
1028
- defaultBorderColor: resolve('border-color'),
1029
- },
1030
-
1031
- Input: {
1032
- colorBgContainer: resolve('component-bg'),
1033
- colorBorder: resolve('border-color'),
1034
- colorText: resolve('text-color'),
1035
- activeBorderColor: resolve('primary-color'),
1036
- hoverBorderColor: resolve('primary-color'),
1037
- },
1038
-
1039
- Select: {
1040
- colorBgContainer: resolve('component-bg'),
1041
- colorBorder: resolve('border-color'),
1042
- colorText: resolve('text-color'),
1043
- },
1044
-
1045
- Dropdown: {
1046
- colorBgElevated: resolve('component-bg'),
1047
- colorText: resolve('text-color'),
1048
- },
1049
-
1050
- Modal: {
1051
- contentBg: resolve('component-bg'),
1052
- headerBg: resolve('component-bg'),
1053
- titleColor: resolve('text-color'),
1054
- },
1055
-
1056
- Layout: {
1057
- headerBg: resolve('primary-color'),
1058
- bodyBg: resolve('bodybg-primary'),
1059
- siderBg: resolve('sidebar-bg'),
1060
- },
1061
-
1062
- Menu: {
1063
- itemBg: 'transparent',
1064
- itemColor: resolve('text-color'),
1065
- itemHoverBg: resolve('component-hover-bg'),
1066
- itemSelectedBg: resolve('component-active-bg'),
1067
- itemSelectedColor: resolve('highlight-color'),
1068
- },
1069
-
1070
- Card: {
1071
- colorBgContainer: resolve('component-bg'),
1072
- colorBorderSecondary: resolve('border-color'),
1073
- },
1074
-
1075
- Tooltip: {
1076
- colorBgSpotlight: resolve('module-bg'),
1077
- colorTextLightSolid: resolve('text-color'),
1078
- },
1079
-
1080
- Tabs: {
1081
- itemColor: resolve('text-color'),
1082
- itemSelectedColor: resolve('highlight-color'),
1083
- inkBarColor: resolve('highlight-color'),
1084
- },
1085
- },
1086
- };
1087
- };
1088
-
1089
- export default appTheme;