simple-table-core 1.8.5 → 1.8.7

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 (40) hide show
  1. package/dist/{Animate-86bd0e2f.js → Animate-33b73a7f.js} +2 -2
  2. package/dist/Animate-33b73a7f.js.map +1 -0
  3. package/dist/{DatePicker-018250b6.js → DatePicker-90d135e4.js} +2 -2
  4. package/dist/DatePicker-90d135e4.js.map +1 -0
  5. package/dist/cjs/{Animate-5d701b74.js → Animate-b61de94e.js} +2 -2
  6. package/dist/cjs/Animate-b61de94e.js.map +1 -0
  7. package/dist/cjs/{DatePicker-f7739753.js → DatePicker-4cd71e3e.js} +2 -2
  8. package/dist/cjs/DatePicker-4cd71e3e.js.map +1 -0
  9. package/dist/cjs/components/simple-table/SimpleTable.d.ts +2 -0
  10. package/dist/cjs/hooks/useSortableData.d.ts +3 -1
  11. package/dist/cjs/index-61d26e91.js +2 -0
  12. package/dist/cjs/index-61d26e91.js.map +1 -0
  13. package/dist/cjs/index.js +1 -1
  14. package/dist/cjs/styles.css +1 -1
  15. package/dist/cjs/types/CellRendererProps.d.ts +3 -0
  16. package/dist/cjs/types/HeaderObject.d.ts +3 -0
  17. package/dist/components/simple-table/SimpleTable.d.ts +2 -0
  18. package/dist/hooks/useSortableData.d.ts +3 -1
  19. package/dist/index-bda88aae.js +2 -0
  20. package/dist/index-bda88aae.js.map +1 -0
  21. package/dist/index.es.js +1 -1
  22. package/dist/styles.css +1 -1
  23. package/dist/types/CellRendererProps.d.ts +3 -0
  24. package/dist/types/HeaderObject.d.ts +3 -0
  25. package/package.json +1 -1
  26. package/src/styles/base.css +46 -2
  27. package/src/styles/themes/dark.css +47 -41
  28. package/src/styles/themes/frost.css +47 -41
  29. package/src/styles/themes/light.css +48 -42
  30. package/src/styles/themes/neutral.css +47 -41
  31. package/src/styles/themes/sky.css +47 -41
  32. package/src/styles/themes/violet.css +47 -41
  33. package/dist/Animate-86bd0e2f.js.map +0 -1
  34. package/dist/DatePicker-018250b6.js.map +0 -1
  35. package/dist/cjs/Animate-5d701b74.js.map +0 -1
  36. package/dist/cjs/DatePicker-f7739753.js.map +0 -1
  37. package/dist/cjs/index-80878586.js +0 -2
  38. package/dist/cjs/index-80878586.js.map +0 -1
  39. package/dist/index-a33b72db.js +0 -2
  40. package/dist/index-a33b72db.js.map +0 -1
package/src/styles/themes/frost.css CHANGED
@@ -14,43 +14,78 @@
14
14
  --st-scrollbar-width: thin;
15
15
  --st-scrollbar-thumb-border-radius: 4px;
16
16
 
17
- /* Color variables */
17
+ /* Base/Structural colors */
18
18
  --st-border-color: #e1e7ea;
19
+ --st-footer-background-color: #f8faff;
20
+ --st-last-group-row-separator-border-color: #c5d1dd;
21
+
22
+ /* Row colors */
19
23
  --st-odd-row-background-color: #ffffff;
20
24
  --st-even-row-background-color: #ffffff;
21
- --st-odd-column-background-color: #ffffff;
22
- --st-even-column-background-color: #ffffff;
23
25
  --st-hover-row-background-color: #e5effe;
24
26
  --st-selected-row-background-color: #d4e4fd;
27
+
28
+ /* Column colors */
29
+ --st-odd-column-background-color: #ffffff;
30
+ --st-even-column-background-color: #ffffff;
31
+
32
+ /* Header colors */
25
33
  --st-header-background-color: #f8faff;
26
34
  --st-sub-header-background-color: #e5effe;
27
35
  --st-sub-cell-background-color: #f8faff;
36
+ --st-sub-cell-hover-background-color: #d4e4fd;
28
37
  --st-header-label-color: #0b1215;
29
38
  --st-header-icon-color: #5a6c7d;
30
- --st-dragging-background-color: #d0dce8;
31
- --st-selected-cell-background-color: #c9dcfb;
32
- --st-selected-first-cell-background-color: #d4e4fd;
33
- --st-footer-background-color: #f8faff;
39
+
40
+ /* Cell colors */
34
41
  --st-cell-color: #0b1215;
35
42
  --st-cell-odd-row-color: #0b1215;
36
43
  --st-edit-cell-shadow: 0 1px 2px 0 rgba(11, 18, 21, 0.05);
44
+
45
+ /* Selection colors */
46
+ --st-selected-cell-background-color: #c9dcfb;
47
+ --st-selected-first-cell-background-color: #d4e4fd;
37
48
  --st-selected-cell-color: #0b1215;
38
49
  --st-selected-first-cell-color: #0b1215;
50
+ --st-selected-sub-cell-background-color: #c9dcfb;
51
+ --st-selected-sub-cell-color: #0b1215;
52
+ --st-dragging-background-color: #d0dce8;
53
+ --st-dragging-sub-header-background-color: #0d9488;
54
+
55
+ /* Interactive element colors */
39
56
  --st-resize-handle-color: #c5d1dd;
40
57
  --st-resize-handle-selected-color: #5a6c7d;
41
- --st-last-group-row-separator-border-color: #c5d1dd;
42
58
 
43
59
  /* Border colors */
44
60
  --st-selected-border-color: #5a9cf8;
45
61
  --st-editable-cell-focus-border-color: #5a9cf8;
46
62
 
47
- /* Component-specific colors */
63
+ /* Button colors */
64
+ --st-button-hover-background-color: #e5effe;
65
+ --st-button-active-background-color: #5a9cf8;
66
+ --st-next-prev-btn-color: #5a6c7d;
67
+ --st-next-prev-btn-disabled-color: #c5d1dd;
68
+ --st-page-btn-color: #5a6c7d;
69
+ --st-page-btn-hover-background-color: #e5effe;
70
+
71
+ /* Checkbox colors */
48
72
  --st-checkbox-checked-background-color: #5a9cf8;
49
73
  --st-checkbox-checked-border-color: #4a8ce8;
74
+ --st-checkbox-border-color: #e1e7ea;
75
+
76
+ /* Column editor colors */
50
77
  --st-column-editor-background-color: #ffffff;
51
78
  --st-column-editor-popout-background-color: #ffffff;
52
- --st-button-hover-background-color: #e5effe;
53
- --st-button-active-background-color: #5a9cf8;
79
+ --st-column-editor-text-color: #5a6c7d;
80
+
81
+ /* Form element colors */
82
+ --st-dropdown-group-label-color: #5a6c7d;
83
+ --st-datepicker-weekday-color: #5a6c7d;
84
+ --st-datepicker-other-month-color: #c5d1dd;
85
+ --st-filter-button-disabled-background-color: #e1e7ea;
86
+ --st-filter-button-disabled-text-color: #5a6c7d;
87
+
88
+ /* Flash/Animation colors */
54
89
  --st-cell-flash-color: #d0dce8;
55
90
  --st-copy-flash-color: #5a9cf8;
56
91
  --st-warning-flash-color: #f87171;
@@ -67,40 +102,11 @@
67
102
  --st-header-selected-background-color: #5a9cf8;
68
103
  --st-header-selected-label-color: #ffffff;
69
104
  --st-header-selected-icon-color: #ffffff;
70
-
71
- /* Header/selection highlight indicator colors */
72
105
  --st-header-highlight-indicator-color: #c9dcfb;
73
106
  --st-selection-highlight-indicator-color: #e1e7ea;
74
107
 
75
- /* Navigation button colors */
76
- --st-next-prev-btn-color: #5a6c7d;
77
- --st-next-prev-btn-disabled-color: #c5d1dd;
78
-
79
- /* Page button colors */
80
- --st-page-btn-color: #5a6c7d;
81
- --st-page-btn-hover-background-color: #e5effe;
82
-
83
- /* Column editor colors */
84
- --st-column-editor-text-color: #5a6c7d;
85
-
86
- /* Checkbox colors */
87
- --st-checkbox-border-color: #e1e7ea;
88
-
89
- /* Dropdown colors */
90
- --st-dropdown-group-label-color: #5a6c7d;
91
-
92
- /* Datepicker colors */
93
- --st-datepicker-weekday-color: #5a6c7d;
94
- --st-datepicker-other-month-color: #c5d1dd;
95
-
96
- /* Filter button disabled colors */
97
- --st-filter-button-disabled-background-color: #e1e7ea;
98
- --st-filter-button-disabled-text-color: #5a6c7d;
99
-
100
- /* Loading skeleton colors */
108
+ /* Utility colors */
101
109
  --st-loading-skeleton-bg-color: #e1e7ea;
102
-
103
- /* Chart colors */
104
110
  --st-chart-color: var(--st-blue-300);
105
111
  --st-chart-fill-color: var(--st-blue-300);
106
112
  }
package/src/styles/themes/light.css CHANGED
@@ -13,43 +13,78 @@
13
13
  --st-scrollbar-thumb-color: var(--st-slate-300);
14
14
  --st-scrollbar-width: thin;
15
15
 
16
- /* Color variables */
16
+ /* Base/Structural colors */
17
17
  --st-border-color: var(--st-slate-300);
18
+ --st-footer-background-color: var(--st-slate-50);
19
+ --st-last-group-row-separator-border-color: var(--st-slate-400);
20
+
21
+ /* Row colors */
18
22
  --st-odd-row-background-color: var(--st-white);
19
23
  --st-even-row-background-color: var(--st-slate-50);
20
- --st-odd-column-background-color: var(--st-slate-50);
21
- --st-even-column-background-color: var(--st-white);
22
24
  --st-hover-row-background-color: var(--st-slate-100);
23
25
  --st-selected-row-background-color: var(--st-blue-50);
26
+
27
+ /* Column colors */
28
+ --st-odd-column-background-color: var(--st-slate-50);
29
+ --st-even-column-background-color: var(--st-white);
30
+
31
+ /* Header colors */
24
32
  --st-header-background-color: var(--st-slate-100);
25
33
  --st-sub-header-background-color: var(--st-slate-200);
26
- --st-sub-cell-background-color: var(--st-slate-100);
27
34
  --st-header-label-color: var(--st-slate-900);
28
35
  --st-header-icon-color: var(--st-slate-500);
29
- --st-dragging-background-color: var(--st-slate-200);
30
- --st-selected-cell-background-color: var(--st-blue-100);
31
- --st-selected-first-cell-background-color: var(--st-blue-50);
32
- --st-footer-background-color: var(--st-slate-50);
36
+
37
+ /* Cell colors */
33
38
  --st-cell-color: var(--st-slate-900);
34
39
  --st-cell-odd-row-color: var(--st-slate-800);
35
40
  --st-edit-cell-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
41
+ --st-sub-cell-background-color: var(--st-slate-100);
42
+ --st-sub-cell-hover-background-color: var(--st-slate-200);
43
+
44
+ /* Selection colors */
45
+ --st-selected-cell-background-color: var(--st-blue-100);
46
+ --st-selected-first-cell-background-color: var(--st-blue-50);
36
47
  --st-selected-cell-color: var(--st-slate-900);
37
48
  --st-selected-first-cell-color: var(--st-slate-900);
49
+ --st-selected-sub-cell-background-color: var(--st-blue-200);
50
+ --st-selected-sub-cell-color: var(--st-slate-900);
51
+ --st-dragging-background-color: var(--st-slate-200);
52
+ --st-dragging-sub-header-background-color: var(--st-slate-300);
53
+
54
+ /* Interactive element colors */
38
55
  --st-resize-handle-color: var(--st-slate-400);
39
56
  --st-resize-handle-selected-color: var(--st-white);
40
- --st-last-group-row-separator-border-color: var(--st-slate-400);
41
57
 
42
58
  /* Border colors */
43
59
  --st-selected-border-color: var(--st-blue-500);
44
60
  --st-editable-cell-focus-border-color: var(--st-blue-500);
45
61
 
46
- /* Component-specific colors */
62
+ /* Button colors */
63
+ --st-button-hover-background-color: var(--st-slate-100);
64
+ --st-button-active-background-color: var(--st-blue-600);
65
+ --st-next-prev-btn-color: var(--st-slate-600);
66
+ --st-next-prev-btn-disabled-color: var(--st-slate-400);
67
+ --st-page-btn-color: var(--st-slate-600);
68
+ --st-page-btn-hover-background-color: var(--st-slate-100);
69
+
70
+ /* Checkbox colors */
47
71
  --st-checkbox-checked-background-color: var(--st-blue-600);
48
72
  --st-checkbox-checked-border-color: var(--st-blue-600);
73
+ --st-checkbox-border-color: var(--st-slate-300);
74
+
75
+ /* Column editor colors */
49
76
  --st-column-editor-background-color: var(--st-white);
50
77
  --st-column-editor-popout-background-color: var(--st-white);
51
- --st-button-hover-background-color: var(--st-slate-100);
52
- --st-button-active-background-color: var(--st-blue-600);
78
+ --st-column-editor-text-color: var(--st-slate-500);
79
+
80
+ /* Form element colors */
81
+ --st-dropdown-group-label-color: var(--st-slate-500);
82
+ --st-datepicker-weekday-color: var(--st-slate-500);
83
+ --st-datepicker-other-month-color: var(--st-slate-400);
84
+ --st-filter-button-disabled-background-color: var(--st-slate-300);
85
+ --st-filter-button-disabled-text-color: var(--st-slate-500);
86
+
87
+ /* Flash/Animation colors */
53
88
  --st-cell-flash-color: var(--st-slate-200);
54
89
  --st-copy-flash-color: var(--st-blue-500);
55
90
  --st-warning-flash-color: var(--st-red-300);
@@ -66,40 +101,11 @@
66
101
  --st-header-selected-background-color: var(--st-blue-600);
67
102
  --st-header-selected-label-color: var(--st-white);
68
103
  --st-header-selected-icon-color: var(--st-white);
69
-
70
- /* Header/selection highlight indicator colors */
71
104
  --st-header-highlight-indicator-color: var(--st-blue-100);
72
105
  --st-selection-highlight-indicator-color: var(--st-slate-300);
73
106
 
74
- /* Navigation button colors */
75
- --st-next-prev-btn-color: var(--st-slate-600);
76
- --st-next-prev-btn-disabled-color: var(--st-slate-400);
77
-
78
- /* Page button colors */
79
- --st-page-btn-color: var(--st-slate-600);
80
- --st-page-btn-hover-background-color: var(--st-slate-100);
81
-
82
- /* Column editor colors */
83
- --st-column-editor-text-color: var(--st-slate-500);
84
-
85
- /* Checkbox colors */
86
- --st-checkbox-border-color: var(--st-slate-300);
87
-
88
- /* Dropdown colors */
89
- --st-dropdown-group-label-color: var(--st-slate-500);
90
-
91
- /* Datepicker colors */
92
- --st-datepicker-weekday-color: var(--st-slate-500);
93
- --st-datepicker-other-month-color: var(--st-slate-400);
94
-
95
- /* Filter button disabled colors */
96
- --st-filter-button-disabled-background-color: var(--st-slate-300);
97
- --st-filter-button-disabled-text-color: var(--st-slate-500);
98
-
99
- /* Loading skeleton colors */
107
+ /* Utility colors */
100
108
  --st-loading-skeleton-bg-color: var(--st-slate-200);
101
-
102
- /* Chart colors */
103
109
  --st-chart-color: var(--st-blue-300);
104
110
  --st-chart-fill-color: var(--st-blue-300);
105
111
  }
package/src/styles/themes/neutral.css CHANGED
@@ -14,43 +14,78 @@
14
14
  --st-scrollbar-width: thin;
15
15
  --st-scrollbar-thumb-border-radius: 4px;
16
16
 
17
- /* Color variables */
17
+ /* Base/Structural colors */
18
18
  --st-border-color: var(--st-neutral-300);
19
+ --st-footer-background-color: var(--st-neutral-50);
20
+ --st-last-group-row-separator-border-color: var(--st-neutral-400);
21
+
22
+ /* Row colors */
19
23
  --st-odd-row-background-color: var(--st-neutral-50);
20
24
  --st-even-row-background-color: var(--st-neutral-100);
21
- --st-odd-column-background-color: var(--st-neutral-50);
22
- --st-even-column-background-color: var(--st-neutral-100);
23
25
  --st-hover-row-background-color: var(--st-neutral-200);
24
26
  --st-selected-row-background-color: var(--st-neutral-200);
27
+
28
+ /* Column colors */
29
+ --st-odd-column-background-color: var(--st-neutral-50);
30
+ --st-even-column-background-color: var(--st-neutral-100);
31
+
32
+ /* Header colors */
25
33
  --st-header-background-color: var(--st-neutral-200);
26
34
  --st-sub-header-background-color: var(--st-neutral-300);
27
35
  --st-sub-cell-background-color: var(--st-neutral-200);
36
+ --st-sub-cell-hover-background-color: var(--st-neutral-300);
28
37
  --st-header-label-color: var(--st-neutral-900);
29
38
  --st-header-icon-color: var(--st-neutral-500);
30
- --st-dragging-background-color: var(--st-neutral-300);
31
- --st-selected-cell-background-color: var(--st-neutral-400);
32
- --st-selected-first-cell-background-color: var(--st-neutral-300);
33
- --st-footer-background-color: var(--st-neutral-50);
39
+
40
+ /* Cell colors */
34
41
  --st-cell-color: var(--st-neutral-900);
35
42
  --st-cell-odd-row-color: var(--st-neutral-800);
36
43
  --st-edit-cell-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
44
+
45
+ /* Selection colors */
46
+ --st-selected-cell-background-color: var(--st-neutral-400);
47
+ --st-selected-first-cell-background-color: var(--st-neutral-300);
37
48
  --st-selected-cell-color: var(--st-neutral-900);
38
49
  --st-selected-first-cell-color: var(--st-neutral-900);
50
+ --st-selected-sub-cell-background-color: var(--st-neutral-400);
51
+ --st-selected-sub-cell-color: var(--st-neutral-900);
52
+ --st-dragging-background-color: var(--st-neutral-300);
53
+ --st-dragging-sub-header-background-color: var(--st-neutral-400);
54
+
55
+ /* Interactive element colors */
39
56
  --st-resize-handle-color: var(--st-neutral-400);
40
57
  --st-resize-handle-selected-color: var(--st-white);
41
- --st-last-group-row-separator-border-color: var(--st-neutral-400);
42
58
 
43
59
  /* Border colors */
44
60
  --st-selected-border-color: var(--st-neutral-600);
45
61
  --st-editable-cell-focus-border-color: var(--st-neutral-500);
46
62
 
47
- /* Component-specific colors */
63
+ /* Button colors */
64
+ --st-button-hover-background-color: var(--st-neutral-200);
65
+ --st-button-active-background-color: var(--st-neutral-600);
66
+ --st-next-prev-btn-color: var(--st-neutral-600);
67
+ --st-next-prev-btn-disabled-color: var(--st-neutral-400);
68
+ --st-page-btn-color: var(--st-neutral-600);
69
+ --st-page-btn-hover-background-color: var(--st-neutral-200);
70
+
71
+ /* Checkbox colors */
48
72
  --st-checkbox-checked-background-color: var(--st-neutral-600);
49
73
  --st-checkbox-checked-border-color: var(--st-neutral-600);
74
+ --st-checkbox-border-color: var(--st-neutral-300);
75
+
76
+ /* Column editor colors */
50
77
  --st-column-editor-background-color: var(--st-neutral-50);
51
78
  --st-column-editor-popout-background-color: var(--st-neutral-50);
52
- --st-button-hover-background-color: var(--st-neutral-200);
53
- --st-button-active-background-color: var(--st-neutral-600);
79
+ --st-column-editor-text-color: var(--st-neutral-500);
80
+
81
+ /* Form element colors */
82
+ --st-dropdown-group-label-color: var(--st-neutral-500);
83
+ --st-datepicker-weekday-color: var(--st-neutral-500);
84
+ --st-datepicker-other-month-color: var(--st-neutral-400);
85
+ --st-filter-button-disabled-background-color: var(--st-neutral-300);
86
+ --st-filter-button-disabled-text-color: var(--st-neutral-500);
87
+
88
+ /* Flash/Animation colors */
54
89
  --st-cell-flash-color: var(--st-neutral-400);
55
90
  --st-copy-flash-color: var(--st-neutral-600);
56
91
  --st-warning-flash-color: var(--st-red-400);
@@ -67,40 +102,11 @@
67
102
  --st-header-selected-background-color: var(--st-neutral-600);
68
103
  --st-header-selected-label-color: var(--st-white);
69
104
  --st-header-selected-icon-color: var(--st-white);
70
-
71
- /* Header/selection highlight indicator colors */
72
105
  --st-header-highlight-indicator-color: var(--st-neutral-400);
73
106
  --st-selection-highlight-indicator-color: var(--st-neutral-400);
74
107
 
75
- /* Navigation button colors */
76
- --st-next-prev-btn-color: var(--st-neutral-600);
77
- --st-next-prev-btn-disabled-color: var(--st-neutral-400);
78
-
79
- /* Page button colors */
80
- --st-page-btn-color: var(--st-neutral-600);
81
- --st-page-btn-hover-background-color: var(--st-neutral-200);
82
-
83
- /* Column editor colors */
84
- --st-column-editor-text-color: var(--st-neutral-500);
85
-
86
- /* Checkbox colors */
87
- --st-checkbox-border-color: var(--st-neutral-300);
88
-
89
- /* Dropdown colors */
90
- --st-dropdown-group-label-color: var(--st-neutral-500);
91
-
92
- /* Datepicker colors */
93
- --st-datepicker-weekday-color: var(--st-neutral-500);
94
- --st-datepicker-other-month-color: var(--st-neutral-400);
95
-
96
- /* Filter button disabled colors */
97
- --st-filter-button-disabled-background-color: var(--st-neutral-300);
98
- --st-filter-button-disabled-text-color: var(--st-neutral-500);
99
-
100
- /* Loading skeleton colors */
108
+ /* Utility colors */
101
109
  --st-loading-skeleton-bg-color: var(--st-neutral-200);
102
-
103
- /* Chart colors */
104
110
  --st-chart-color: var(--st-neutral-500);
105
111
  --st-chart-fill-color: var(--st-neutral-500);
106
112
  }
package/src/styles/themes/sky.css CHANGED
@@ -14,43 +14,78 @@
14
14
  --st-scrollbar-width: thin;
15
15
  --st-scrollbar-thumb-border-radius: 4px;
16
16
 
17
- /* Color variables */
17
+ /* Base/Structural colors */
18
18
  --st-border-color: var(--st-blue-300);
19
+ --st-footer-background-color: var(--st-blue-50);
20
+ --st-last-group-row-separator-border-color: var(--st-blue-400);
21
+
22
+ /* Row colors */
19
23
  --st-odd-row-background-color: var(--st-blue-50);
20
24
  --st-even-row-background-color: var(--st-blue-100);
21
- --st-odd-column-background-color: var(--st-blue-50);
22
- --st-even-column-background-color: var(--st-blue-100);
23
25
  --st-hover-row-background-color: var(--st-blue-200);
24
26
  --st-selected-row-background-color: var(--st-sky-100);
27
+
28
+ /* Column colors */
29
+ --st-odd-column-background-color: var(--st-blue-50);
30
+ --st-even-column-background-color: var(--st-blue-100);
31
+
32
+ /* Header colors */
25
33
  --st-header-background-color: var(--st-blue-200);
26
34
  --st-sub-header-background-color: var(--st-blue-300);
27
35
  --st-sub-cell-background-color: var(--st-sky-100);
36
+ --st-sub-cell-hover-background-color: var(--st-sky-200);
28
37
  --st-header-label-color: var(--st-blue-900);
29
38
  --st-header-icon-color: var(--st-blue-600);
30
- --st-dragging-background-color: var(--st-sky-200);
31
- --st-selected-cell-background-color: var(--st-blue-400);
32
- --st-selected-first-cell-background-color: var(--st-blue-300);
33
- --st-footer-background-color: var(--st-blue-50);
39
+
40
+ /* Cell colors */
34
41
  --st-cell-color: var(--st-blue-900);
35
42
  --st-cell-odd-row-color: var(--st-blue-800);
36
43
  --st-edit-cell-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
44
+
45
+ /* Selection colors */
46
+ --st-selected-cell-background-color: var(--st-blue-400);
47
+ --st-selected-first-cell-background-color: var(--st-blue-300);
37
48
  --st-selected-cell-color: var(--st-blue-900);
38
49
  --st-selected-first-cell-color: var(--st-blue-900);
50
+ --st-selected-sub-cell-background-color: var(--st-sky-300);
51
+ --st-selected-sub-cell-color: var(--st-blue-900);
52
+ --st-dragging-background-color: var(--st-sky-300);
53
+ --st-dragging-sub-header-background-color: var(--st-sky-400);
54
+
55
+ /* Interactive element colors */
39
56
  --st-resize-handle-color: var(--st-blue-400);
40
57
  --st-resize-handle-selected-color: var(--st-white);
41
- --st-last-group-row-separator-border-color: var(--st-blue-400);
42
58
 
43
59
  /* Border colors */
44
60
  --st-selected-border-color: var(--st-blue-600);
45
61
  --st-editable-cell-focus-border-color: var(--st-blue-500);
46
62
 
47
- /* Component-specific colors */
63
+ /* Button colors */
64
+ --st-button-hover-background-color: var(--st-blue-200);
65
+ --st-button-active-background-color: var(--st-blue-600);
66
+ --st-next-prev-btn-color: var(--st-blue-600);
67
+ --st-next-prev-btn-disabled-color: var(--st-blue-400);
68
+ --st-page-btn-color: var(--st-blue-600);
69
+ --st-page-btn-hover-background-color: var(--st-blue-200);
70
+
71
+ /* Checkbox colors */
48
72
  --st-checkbox-checked-background-color: var(--st-blue-600);
49
73
  --st-checkbox-checked-border-color: var(--st-blue-600);
74
+ --st-checkbox-border-color: var(--st-blue-300);
75
+
76
+ /* Column editor colors */
50
77
  --st-column-editor-background-color: var(--st-blue-50);
51
78
  --st-column-editor-popout-background-color: var(--st-blue-50);
52
- --st-button-hover-background-color: var(--st-blue-200);
53
- --st-button-active-background-color: var(--st-blue-600);
79
+ --st-column-editor-text-color: var(--st-blue-600);
80
+
81
+ /* Form element colors */
82
+ --st-dropdown-group-label-color: var(--st-blue-600);
83
+ --st-datepicker-weekday-color: var(--st-blue-600);
84
+ --st-datepicker-other-month-color: var(--st-blue-400);
85
+ --st-filter-button-disabled-background-color: var(--st-blue-300);
86
+ --st-filter-button-disabled-text-color: var(--st-blue-500);
87
+
88
+ /* Flash/Animation colors */
54
89
  --st-cell-flash-color: var(--st-sky-200);
55
90
  --st-copy-flash-color: var(--st-blue-600);
56
91
  --st-warning-flash-color: var(--st-orange-400);
@@ -67,40 +102,11 @@
67
102
  --st-header-selected-background-color: var(--st-blue-600);
68
103
  --st-header-selected-label-color: var(--st-white);
69
104
  --st-header-selected-icon-color: var(--st-white);
70
-
71
- /* Header/selection highlight indicator colors */
72
105
  --st-header-highlight-indicator-color: var(--st-blue-400);
73
106
  --st-selection-highlight-indicator-color: var(--st-blue-400);
74
107
 
75
- /* Navigation button colors */
76
- --st-next-prev-btn-color: var(--st-blue-600);
77
- --st-next-prev-btn-disabled-color: var(--st-blue-400);
78
-
79
- /* Page button colors */
80
- --st-page-btn-color: var(--st-blue-600);
81
- --st-page-btn-hover-background-color: var(--st-blue-200);
82
-
83
- /* Column editor colors */
84
- --st-column-editor-text-color: var(--st-blue-600);
85
-
86
- /* Checkbox colors */
87
- --st-checkbox-border-color: var(--st-blue-300);
88
-
89
- /* Dropdown colors */
90
- --st-dropdown-group-label-color: var(--st-blue-600);
91
-
92
- /* Datepicker colors */
93
- --st-datepicker-weekday-color: var(--st-blue-600);
94
- --st-datepicker-other-month-color: var(--st-blue-400);
95
-
96
- /* Filter button disabled colors */
97
- --st-filter-button-disabled-background-color: var(--st-blue-300);
98
- --st-filter-button-disabled-text-color: var(--st-blue-500);
99
-
100
- /* Loading skeleton colors */
108
+ /* Utility colors */
101
109
  --st-loading-skeleton-bg-color: var(--st-blue-200);
102
-
103
- /* Chart colors */
104
110
  --st-chart-color: var(--st-blue-900);
105
111
  --st-chart-fill-color: var(--st-blue-900);
106
112
  }
package/src/styles/themes/violet.css CHANGED
@@ -14,44 +14,79 @@
14
14
  --st-scrollbar-width: thin;
15
15
  --st-scrollbar-thumb-border-radius: 4px;
16
16
 
17
- /* Color variables */
17
+ /* Base/Structural colors */
18
18
  --st-border-color: var(--st-stone-200);
19
+ --st-footer-background-color: var(--st-stone-100);
20
+ --st-last-group-row-separator-border-color: var(--st-stone-300);
21
+
22
+ /* Row colors */
19
23
  --st-odd-row-background-color: var(--st-amber-50);
20
24
  --st-even-row-background-color: var(--st-amber-100);
21
- --st-odd-column-background-color: var(--st-violet-50);
22
- --st-even-column-background-color: var(--st-amber-50);
23
25
  --st-hover-row-background-color: var(--st-amber-200);
24
26
  --st-selected-row-background-color: var(--st-violet-100);
27
+
28
+ /* Column colors */
29
+ --st-odd-column-background-color: var(--st-violet-50);
30
+ --st-even-column-background-color: var(--st-amber-50);
31
+
32
+ /* Header colors */
25
33
  --st-header-background-color: var(--st-violet-600);
26
34
  --st-sub-header-background-color: var(--st-violet-500);
27
35
  --st-sub-cell-background-color: var(--st-violet-100);
36
+ --st-sub-cell-hover-background-color: var(--st-violet-200);
28
37
  --st-header-label-color: var(--st-white);
29
38
  --st-header-icon-color: var(--st-violet-200);
30
- --st-dragging-background-color: var(--st-violet-50);
31
- --st-selected-cell-background-color: var(--st-violet-50);
32
- --st-selected-first-cell-background-color: var(--st-violet-100);
33
- --st-footer-background-color: var(--st-stone-100);
39
+
40
+ /* Cell colors */
34
41
  --st-cell-color: var(--st-stone-700);
35
42
  --st-cell-odd-row-color: var(--st-stone-700);
36
43
  --st-edit-cell-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.1),
37
44
  0 2px 4px -1px rgba(124, 58, 237, 0.06);
45
+
46
+ /* Selection colors */
47
+ --st-selected-cell-background-color: var(--st-violet-50);
48
+ --st-selected-first-cell-background-color: var(--st-violet-100);
38
49
  --st-selected-cell-color: var(--st-violet-800);
39
50
  --st-selected-first-cell-color: var(--st-violet-800);
51
+ --st-selected-sub-cell-background-color: var(--st-violet-200);
52
+ --st-selected-sub-cell-color: var(--st-violet-800);
53
+ --st-dragging-background-color: var(--st-violet-200);
54
+ --st-dragging-sub-header-background-color: var(--st-violet-300);
55
+
56
+ /* Interactive element colors */
40
57
  --st-resize-handle-color: var(--st-violet-400);
41
58
  --st-resize-handle-selected-color: var(--st-white);
42
- --st-last-group-row-separator-border-color: var(--st-stone-300);
43
59
 
44
60
  /* Border colors */
45
61
  --st-selected-border-color: var(--st-violet-500);
46
62
  --st-editable-cell-focus-border-color: var(--st-violet-500);
47
63
 
48
- /* Component-specific colors */
64
+ /* Button colors */
65
+ --st-button-hover-background-color: var(--st-violet-50);
66
+ --st-button-active-background-color: var(--st-violet-600);
67
+ --st-next-prev-btn-color: var(--st-violet-600);
68
+ --st-next-prev-btn-disabled-color: var(--st-violet-400);
69
+ --st-page-btn-color: var(--st-violet-600);
70
+ --st-page-btn-hover-background-color: var(--st-violet-50);
71
+
72
+ /* Checkbox colors */
49
73
  --st-checkbox-checked-background-color: var(--st-violet-500);
50
74
  --st-checkbox-checked-border-color: var(--st-violet-600);
75
+ --st-checkbox-border-color: var(--st-stone-200);
76
+
77
+ /* Column editor colors */
51
78
  --st-column-editor-background-color: var(--st-white);
52
79
  --st-column-editor-popout-background-color: var(--st-white);
53
- --st-button-hover-background-color: var(--st-violet-50);
54
- --st-button-active-background-color: var(--st-violet-600);
80
+ --st-column-editor-text-color: var(--st-violet-600);
81
+
82
+ /* Form element colors */
83
+ --st-dropdown-group-label-color: var(--st-violet-600);
84
+ --st-datepicker-weekday-color: var(--st-violet-600);
85
+ --st-datepicker-other-month-color: var(--st-violet-400);
86
+ --st-filter-button-disabled-background-color: var(--st-stone-200);
87
+ --st-filter-button-disabled-text-color: var(--st-stone-500);
88
+
89
+ /* Flash/Animation colors */
55
90
  --st-cell-flash-color: var(--st-violet-200);
56
91
  --st-copy-flash-color: var(--st-violet-600);
57
92
  --st-warning-flash-color: var(--st-red-400);
@@ -68,40 +103,11 @@
68
103
  --st-header-selected-background-color: var(--st-violet-600);
69
104
  --st-header-selected-label-color: var(--st-white);
70
105
  --st-header-selected-icon-color: var(--st-white);
71
-
72
- /* Header/selection highlight indicator colors */
73
106
  --st-header-highlight-indicator-color: var(--st-violet-800);
74
107
  --st-selection-highlight-indicator-color: var(--st-stone-400);
75
108
 
76
- /* Navigation button colors */
77
- --st-next-prev-btn-color: var(--st-violet-600);
78
- --st-next-prev-btn-disabled-color: var(--st-violet-400);
79
-
80
- /* Page button colors */
81
- --st-page-btn-color: var(--st-violet-600);
82
- --st-page-btn-hover-background-color: var(--st-violet-50);
83
-
84
- /* Column editor colors */
85
- --st-column-editor-text-color: var(--st-violet-600);
86
-
87
- /* Checkbox colors */
88
- --st-checkbox-border-color: var(--st-stone-200);
89
-
90
- /* Dropdown colors */
91
- --st-dropdown-group-label-color: var(--st-violet-600);
92
-
93
- /* Datepicker colors */
94
- --st-datepicker-weekday-color: var(--st-violet-600);
95
- --st-datepicker-other-month-color: var(--st-violet-400);
96
-
97
- /* Filter button disabled colors */
98
- --st-filter-button-disabled-background-color: var(--st-stone-200);
99
- --st-filter-button-disabled-text-color: var(--st-stone-500);
100
-
101
- /* Loading skeleton colors */
109
+ /* Utility colors */
102
110
  --st-loading-skeleton-bg-color: var(--st-stone-200);
103
-
104
- /* Chart colors */
105
111
  --st-chart-color: var(--st-violet-400);
106
112
  --st-chart-fill-color: var(--st-violet-400);
107
113
  }
package/dist/Animate-86bd0e2f.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Animate-86bd0e2f.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
package/dist/DatePicker-018250b6.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"DatePicker-018250b6.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
package/dist/cjs/Animate-5d701b74.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Animate-5d701b74.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
package/dist/cjs/DatePicker-f7739753.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"DatePicker-f7739753.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}