@infinite-table/infinite-vue 0.0.1

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 (12) hide show
  1. package/LICENSE.md +838 -0
  2. package/README.md +126 -0
  3. package/index.css +1 -0
  4. package/index.d.ts +5716 -0
  5. package/index.js +28 -0
  6. package/index.mjs +28 -0
  7. package/package.json +32 -0
  8. package/theme/balsam.css +143 -0
  9. package/theme/default.css +703 -0
  10. package/theme/minimalist.css +165 -0
  11. package/theme/ocean.css +169 -0
  12. package/theme/shadcn.css +117 -0
package/theme/minimalist.css ADDED
@@ -0,0 +1,165 @@
1
+ /* vanilla-extract-css-ns:src/components/InfiniteTable/theme-minimalist.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2YwYrbMBCG73kKQaDsQhWStGWLeyl0u7SPIVvjWESWhCQngbLvXqSYxJvYspx4CwUfAsGa+WckjecbvGAiZ4JZwLaAErAgJWBcMsFKwpmxiZbSfkSLHjP0Z4YQxierAggFjTPgHKdSu/+abQqbICEFfOszbjXLGbegMVBmpcYpybYbLStBE7Qj+qFhqOUeS0obJo8dESWX+srdP+3waEZtSdFvYYBqzokpmNiEdkOyDITt8a9USMJUWQbG9GhQuRchFdBa6naNEkTVte/TkbQ6BeJ1X5/3ZBZKTJkhKQca0rmI0y1GMst20FdZhdy9KYRuPaXBmHBuMYJcEopLYrbYwsHedmJnjaG35DJshrSaCKOIBmEvLJ2FcoVkpeQpCb6i3Zme+0uCzv2l1aiUFBLEXV+5WG9G3hfMXr2nx0OYr58/PX3+2rLjt+0jtGt/3QYU0cTKU0uZ/3x+Wb88tbWHuh1aqRK0UgdkJGc0wkETyiqToGWoe0a0p1qOQ97ejeN6dtNqz6gtErRUhwuj+oXytkxQlvkjYsKATdBaHfz+659z/YAWv2vfX35XP4BzjxaEfO37a8ilLhNUKQU6I8YnhlAuhcV7OOabSk6PjzlYxwyjSMbEJkHLxfILlG7tdfY6u6SaKyiMfUENWLpkYd/6NU0b4r2kDXqPK3wF+YD8fd6hvKfJYpospslimiymyWKaLP7zyYISvY1fGWuucNrvR3+vPjF6YvTE6InR/57Rrv0EED1fkVW+Tjsg3UrGUSDdiv8QpHsdJkiPDunvJVBG0IPSkIOuGyQ2mSuvY2U9+uh9ZBzyjXwgJ6NJOSorb6FlLC+HE/N+Zo5DzXG4eSM572HnyPQcn5/vQNBxGHoPRYdwdCySRrK0l6YxPO0h6lCmDqPqDVyNI+sgtkbSNZavkYS9i7FhyvZytpO0IdY62nri/gUVKqaubR4AAA== */
2
+ @layer infinite-table {
3
+ .infinite-theme-name--minimalist:root,
4
+ .infinite-theme-name--minimalist {
5
+ --infinite-header-cell-border-right: none;
6
+ --infinite-header-cell-border: none;
7
+ --infinite-filter-editor-background: var(--infinite-row-odd-background);
8
+ --infinite-header-color: var(--infinite-color);
9
+ --infinite-header-background: none;
10
+ --infinite-cell-color: var(--infinite-color);
11
+ --infinite-flashing-background: var(--infinite-accent-color);
12
+ --infinite-flashing-up-background: var(--infinite-success-color);
13
+ --infinite-flashing-down-background: var(--infinite-error-color);
14
+ --infinite-menu-color: var(--infinite-cell-color);
15
+ --infinite-menu-background: var(--infinite-background);
16
+ --infinite-menu-item-disabled-background: var(--infinite-menu-background);
17
+ --infinite-menu-item-active-background: var(--infinite-row-hover-background);
18
+ --infinite-menu-item-pressed-background: var(--infinite-row-hover-background);
19
+ --infinite-load-mask-text-background: var(--infinite-background);
20
+ --infinite-load-mask-color: var(--infinite-cell-color);
21
+ --infinite-row-background: transparent;
22
+ --infinite-grouping-toolbar-background: var(--infinite-background);
23
+ --infinite-theme-name: minimalist;
24
+ --infinite-theme-mode: light;
25
+ --infinite-background: white;
26
+ --infinite-color: #2D3748;
27
+ --infinite-row-odd-background: transparent;
28
+ --infinite-menu-separator-color: #EDF2F7;
29
+ --infinite-cell-border-top: 1px solid #EDF2F7;
30
+ --infinite-cell-border-radius: 0;
31
+ --infinite-header-cell-background: none;
32
+ --infinite-cell-border-left: none;
33
+ --infinite-cell-border-right: none;
34
+ --infinite-cell-border-width: 0px;
35
+ --infinite-active-cell-indicator-inset: 2px 1px 1px 1px;
36
+ & .InfiniteHeaderCell {
37
+ text-transform: uppercase;
38
+ font-weight: bold;
39
+ letter-spacing: 0.05em;
40
+ }
41
+ }
42
+ .infinite-theme-mode--light.infinite-theme-mode--light.infinite-theme-name--minimalist.infinite-theme-name--minimalist,
43
+ .infinite-theme-mode--light .infinite-theme-name--minimalist,
44
+ .infinite-theme-mode--light.infinite-theme-mode--light .infinite-theme-name--minimalist,
45
+ .infinite-theme-name--minimalist .infinite-theme-mode--light,
46
+ .infinite-theme-name--minimalist .infinite-theme-mode--light.infinite-theme-mode--light {
47
+ --infinite-header-cell-border-right: none;
48
+ --infinite-header-cell-border: none;
49
+ --infinite-filter-editor-background: var(--infinite-row-odd-background);
50
+ --infinite-header-color: var(--infinite-color);
51
+ --infinite-header-background: none;
52
+ --infinite-cell-color: var(--infinite-color);
53
+ --infinite-flashing-background: var(--infinite-accent-color);
54
+ --infinite-flashing-up-background: var(--infinite-success-color);
55
+ --infinite-flashing-down-background: var(--infinite-error-color);
56
+ --infinite-menu-color: var(--infinite-cell-color);
57
+ --infinite-menu-background: var(--infinite-background);
58
+ --infinite-menu-item-disabled-background: var(--infinite-menu-background);
59
+ --infinite-menu-item-active-background: var(--infinite-row-hover-background);
60
+ --infinite-menu-item-pressed-background: var(--infinite-row-hover-background);
61
+ --infinite-load-mask-text-background: var(--infinite-background);
62
+ --infinite-load-mask-color: var(--infinite-cell-color);
63
+ --infinite-row-background: transparent;
64
+ --infinite-grouping-toolbar-background: var(--infinite-background);
65
+ --infinite-theme-name: minimalist;
66
+ --infinite-theme-mode: light;
67
+ --infinite-background: white;
68
+ --infinite-color: #2D3748;
69
+ --infinite-row-odd-background: transparent;
70
+ --infinite-menu-separator-color: #EDF2F7;
71
+ --infinite-cell-border-top: 1px solid #EDF2F7;
72
+ --infinite-cell-border-radius: 0;
73
+ --infinite-header-cell-background: none;
74
+ --infinite-cell-border-left: none;
75
+ --infinite-cell-border-right: none;
76
+ --infinite-cell-border-width: 0px;
77
+ --infinite-active-cell-indicator-inset: 2px 1px 1px 1px;
78
+ & .InfiniteHeaderCell {
79
+ text-transform: uppercase;
80
+ font-weight: bold;
81
+ letter-spacing: 0.05em;
82
+ }
83
+ }
84
+ .infinite-theme-mode--dark.infinite-theme-mode--dark.infinite-theme-name--minimalist.infinite-theme-name--minimalist,
85
+ .infinite-theme-mode--dark .infinite-theme-name--minimalist,
86
+ .infinite-theme-name--minimalist .infinite-theme-mode--dark {
87
+ --infinite-header-cell-border-right: none;
88
+ --infinite-header-cell-border: none;
89
+ --infinite-filter-editor-background: var(--infinite-row-odd-background);
90
+ --infinite-header-color: var(--infinite-color);
91
+ --infinite-header-background: none;
92
+ --infinite-cell-color: var(--infinite-color);
93
+ --infinite-flashing-background: var(--infinite-accent-color);
94
+ --infinite-flashing-up-background: var(--infinite-success-color);
95
+ --infinite-flashing-down-background: var(--infinite-error-color);
96
+ --infinite-menu-color: var(--infinite-cell-color);
97
+ --infinite-menu-background: var(--infinite-background);
98
+ --infinite-menu-item-disabled-background: var(--infinite-menu-background);
99
+ --infinite-menu-item-active-background: var(--infinite-row-hover-background);
100
+ --infinite-menu-item-pressed-background: var(--infinite-row-hover-background);
101
+ --infinite-load-mask-text-background: var(--infinite-background);
102
+ --infinite-load-mask-color: var(--infinite-cell-color);
103
+ --infinite-row-background: transparent;
104
+ --infinite-grouping-toolbar-background: var(--infinite-background);
105
+ --infinite-theme-name: minimalist;
106
+ --infinite-theme-mode: dark;
107
+ --infinite-background: #1a1f2b;
108
+ --infinite-color: #EDF2F7;
109
+ --infinite-row-odd-background: transparent;
110
+ --infinite-menu-separator-color: #2D3748;
111
+ --infinite-cell-border-top: 1px solid #2D3748;
112
+ --infinite-cell-border-radius: 0;
113
+ --infinite-header-cell-background: none;
114
+ --infinite-cell-border-left: none;
115
+ --infinite-cell-border-right: none;
116
+ --infinite-cell-border-width: 0px;
117
+ --infinite-active-cell-indicator-inset: 2px 1px 1px 1px;
118
+ & .InfiniteHeaderCell {
119
+ text-transform: uppercase;
120
+ font-weight: bold;
121
+ letter-spacing: 0.05em;
122
+ }
123
+ }
124
+ @media (prefers-color-scheme: dark) {
125
+ .infinite-theme-name--minimalist:root,
126
+ .infinite-theme-name--minimalist {
127
+ --infinite-header-cell-border-right: none;
128
+ --infinite-header-cell-border: none;
129
+ --infinite-filter-editor-background: var(--infinite-row-odd-background);
130
+ --infinite-header-color: var(--infinite-color);
131
+ --infinite-header-background: none;
132
+ --infinite-cell-color: var(--infinite-color);
133
+ --infinite-flashing-background: var(--infinite-accent-color);
134
+ --infinite-flashing-up-background: var(--infinite-success-color);
135
+ --infinite-flashing-down-background: var(--infinite-error-color);
136
+ --infinite-menu-color: var(--infinite-cell-color);
137
+ --infinite-menu-background: var(--infinite-background);
138
+ --infinite-menu-item-disabled-background: var(--infinite-menu-background);
139
+ --infinite-menu-item-active-background: var(--infinite-row-hover-background);
140
+ --infinite-menu-item-pressed-background: var(--infinite-row-hover-background);
141
+ --infinite-load-mask-text-background: var(--infinite-background);
142
+ --infinite-load-mask-color: var(--infinite-cell-color);
143
+ --infinite-row-background: transparent;
144
+ --infinite-grouping-toolbar-background: var(--infinite-background);
145
+ --infinite-theme-name: minimalist;
146
+ --infinite-theme-mode: dark;
147
+ --infinite-background: #1a1f2b;
148
+ --infinite-color: #EDF2F7;
149
+ --infinite-row-odd-background: transparent;
150
+ --infinite-menu-separator-color: #2D3748;
151
+ --infinite-cell-border-top: 1px solid #2D3748;
152
+ --infinite-cell-border-radius: 0;
153
+ --infinite-header-cell-background: none;
154
+ --infinite-cell-border-left: none;
155
+ --infinite-cell-border-right: none;
156
+ --infinite-cell-border-width: 0px;
157
+ --infinite-active-cell-indicator-inset: 2px 1px 1px 1px;
158
+ & .InfiniteHeaderCell {
159
+ text-transform: uppercase;
160
+ font-weight: bold;
161
+ letter-spacing: 0.05em;
162
+ }
163
+ }
164
+ }
165
+ }
package/theme/ocean.css ADDED
@@ -0,0 +1,169 @@
1
+ /* vanilla-extract-css-ns:src/components/InfiniteTable/theme-ocean.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+3Z3Y7iIBQA4HufgsRsMpPIxGrtuN2bfRUKp0qmhQZwNNn47pt2zVj7Q6tlZi6WCxMjhwOlcPgSX7hIueAGsNlDDliQHDCWFIiIlZRmgV76I9CfGUIYfwTsgTBQmEKW4USq8rviu72JUVCckJYZZ4jKTCqc89MTF0irXbJARhGhC6JAmAV6J+qplrIKf0bh8sfzr6HB4lbna1uzd8ozAwoD40YqnBD6tlPyIFgrh5JHLBmrhfRNpJxpewrV/Lt7WEatP9xevt8EN7NVQXeMnmZE77nY2cYnlIIwA/0PhS2FPlAKWg/kYPIobFlAKam6c+QgDn3P/bEknZ1GLnz/kldZuIEcM65JkgGz5WyM2Z+MUMPfYWg3Du2Ha75Cgdb2ufWnySRhOCf6DRs4mak57n1P5YM+NGT5a1HuLCNllhDrKevPci11MapKXWd7LhnEKCtLXKO9fn5iNN8mG5pGjZj6xOYsgG1Kmyf70n0ZrtZr1mi8OV8xmkchhShsBNWOT4zmKY020cZWR+tTemVs3ZqSrTDFaL7eJizddhWoy31gZDH9Ngjat0F9jAxSEyMhBViCLhfTQNSRM7OP0bI4tV5wdVSrWC4Yp6S8R7jQYGK0Kk7VM14+HVv79kaJu9ah4+TX9usCHffcAFq1l6KrRjxY58pUGjKgxl5F7rmubnK25zluJTomZVuSqiRqKIiqXtPlPEzZfOdZ00VlMcC4KgZ3NNU0ZWlqK6yW0iY0a0dnOesktCR9uKNtop6gnqCeoJ6gnqCeoJ6gnqCeoIyot/Et0wBaZnRtxSqnZ51nnWedZ91/zbqyEk5V3XK9omHao7qfEVkSMqC64DUKg1er6jYQhEETfr2q67TkgOqWqyBdN93oUHXX7eJpV3OMl93giriBXWv/nWe/c2CcoKdCQQrqch6xpmWB+FcbnismWYQ18i/cL6bWVGw55dYj4HJNrvvRNZ1dbuDlhl4P4ssVvxwDzD3BnCHMDcOmQGwCxVxhbJhjgyAbR7IxKBtg2UiYjaLZvTh7jGdfCLSRRBuLtJFMmwS1T6eaU6x9Dte+BWxfQTaEzrPzX0lMGv1RJwAA */
2
+ @layer infinite-table {
3
+ .infinite-theme-name--ocean:root,
4
+ .infinite-theme-name--ocean {
5
+ --infinite-header-cell-border-right: 1px solid color-mix(in srgb, transparent, var(--infinite-color) 40%);
6
+ --infinite-header-cell-border: var(--infinite-cell-border);
7
+ --infinite-filter-editor-background: var(--infinite-row-odd-background);
8
+ --infinite-header-color: var(--infinite-color);
9
+ --infinite-header-background: var(--infinite-header-cell-hover-background);
10
+ --infinite-cell-color: var(--infinite-color);
11
+ --infinite-flashing-background: var(--infinite-accent-color);
12
+ --infinite-flashing-up-background: var(--infinite-success-color);
13
+ --infinite-flashing-down-background: var(--infinite-error-color);
14
+ --infinite-menu-color: var(--infinite-cell-color);
15
+ --infinite-menu-background: var(--infinite-header-cell-background);
16
+ --infinite-menu-item-disabled-background: var(--infinite-menu-background);
17
+ --infinite-menu-item-active-background: var(--infinite-row-hover-background);
18
+ --infinite-menu-item-pressed-background: var(--infinite-background);
19
+ --infinite-load-mask-text-background: var(--infinite-background);
20
+ --infinite-load-mask-color: var(--infinite-cell-color);
21
+ --infinite-row-background: var(--infinite-background);
22
+ --infinite-grouping-toolbar-background: var(--infinite-background);
23
+ --infinite-theme-name: ocean;
24
+ --infinite-theme-mode: light;
25
+ --infinite-accent-color: #8b5cf6;
26
+ --infinite-background: #d1e8fc;
27
+ --infinite-color: #04233d;
28
+ --infinite-success-color: #64ce64;
29
+ --infinite-error-color: #fc6565;
30
+ --infinite-header-cell-background: #7dd3fc;
31
+ --infinite-header-cell-hover-background: #38bdf8;
32
+ --infinite-cell-border-top: 1px solid color-mix(in srgb, transparent, var(--infinite-color) 10%);
33
+ --infinite-cell-border-left: none;
34
+ --infinite-cell-border-right: none;
35
+ --infinite-cell-border-width: 0px;
36
+ --infinite-active-cell-indicator-inset: 2px 1px 1px 1px;
37
+ --infinite-row-odd-background: color-mix(in srgb, var(--infinite-row-background), white 20%);
38
+ --infinite-row-hover-background: var(--infinite-header-cell-background);
39
+ --infinite-row-selected-background: var(--infinite-header-cell-hover-background);
40
+ --infinite-row-selected-hover-background: color-mix(in srgb, var(--infinite-row-selected-background), white 20%);
41
+ --infinite-menu-separator-color: color-mix(in srgb, transparent, var(--infinite-color) 10%);
42
+ }
43
+ .infinite-theme-mode--light.infinite-theme-mode--light.infinite-theme-name--ocean.infinite-theme-name--ocean,
44
+ .infinite-theme-mode--light .infinite-theme-name--ocean,
45
+ .infinite-theme-mode--light.infinite-theme-mode--light .infinite-theme-name--ocean,
46
+ .infinite-theme-name--ocean .infinite-theme-mode--light,
47
+ .infinite-theme-name--ocean .infinite-theme-mode--light.infinite-theme-mode--light {
48
+ --infinite-header-cell-border-right: 1px solid color-mix(in srgb, transparent, var(--infinite-color) 40%);
49
+ --infinite-header-cell-border: var(--infinite-cell-border);
50
+ --infinite-filter-editor-background: var(--infinite-row-odd-background);
51
+ --infinite-header-color: var(--infinite-color);
52
+ --infinite-header-background: var(--infinite-header-cell-hover-background);
53
+ --infinite-cell-color: var(--infinite-color);
54
+ --infinite-flashing-background: var(--infinite-accent-color);
55
+ --infinite-flashing-up-background: var(--infinite-success-color);
56
+ --infinite-flashing-down-background: var(--infinite-error-color);
57
+ --infinite-menu-color: var(--infinite-cell-color);
58
+ --infinite-menu-background: var(--infinite-header-cell-background);
59
+ --infinite-menu-item-disabled-background: var(--infinite-menu-background);
60
+ --infinite-menu-item-active-background: var(--infinite-row-hover-background);
61
+ --infinite-menu-item-pressed-background: var(--infinite-background);
62
+ --infinite-load-mask-text-background: var(--infinite-background);
63
+ --infinite-load-mask-color: var(--infinite-cell-color);
64
+ --infinite-row-background: var(--infinite-background);
65
+ --infinite-grouping-toolbar-background: var(--infinite-background);
66
+ --infinite-theme-name: ocean;
67
+ --infinite-theme-mode: light;
68
+ --infinite-accent-color: #8b5cf6;
69
+ --infinite-background: #d1e8fc;
70
+ --infinite-color: #04233d;
71
+ --infinite-success-color: #64ce64;
72
+ --infinite-error-color: #fc6565;
73
+ --infinite-header-cell-background: #7dd3fc;
74
+ --infinite-header-cell-hover-background: #38bdf8;
75
+ --infinite-cell-border-top: 1px solid color-mix(in srgb, transparent, var(--infinite-color) 10%);
76
+ --infinite-cell-border-left: none;
77
+ --infinite-cell-border-right: none;
78
+ --infinite-cell-border-width: 0px;
79
+ --infinite-active-cell-indicator-inset: 2px 1px 1px 1px;
80
+ --infinite-row-odd-background: color-mix(in srgb, var(--infinite-row-background), white 20%);
81
+ --infinite-row-hover-background: var(--infinite-header-cell-background);
82
+ --infinite-row-selected-background: var(--infinite-header-cell-hover-background);
83
+ --infinite-row-selected-hover-background: color-mix(in srgb, var(--infinite-row-selected-background), white 20%);
84
+ --infinite-menu-separator-color: color-mix(in srgb, transparent, var(--infinite-color) 10%);
85
+ }
86
+ .infinite-theme-mode--dark.infinite-theme-mode--dark.infinite-theme-name--ocean.infinite-theme-name--ocean,
87
+ .infinite-theme-mode--dark .infinite-theme-name--ocean,
88
+ .infinite-theme-name--ocean .infinite-theme-mode--dark {
89
+ --infinite-header-cell-border-right: 1px solid color-mix(in srgb, transparent, var(--infinite-color) 40%);
90
+ --infinite-header-cell-border: var(--infinite-cell-border);
91
+ --infinite-filter-editor-background: var(--infinite-row-odd-background);
92
+ --infinite-header-color: var(--infinite-color);
93
+ --infinite-header-background: var(--infinite-header-cell-hover-background);
94
+ --infinite-cell-color: var(--infinite-color);
95
+ --infinite-flashing-background: var(--infinite-accent-color);
96
+ --infinite-flashing-up-background: var(--infinite-success-color);
97
+ --infinite-flashing-down-background: var(--infinite-error-color);
98
+ --infinite-menu-color: var(--infinite-cell-color);
99
+ --infinite-menu-background: var(--infinite-header-cell-background);
100
+ --infinite-menu-item-disabled-background: var(--infinite-menu-background);
101
+ --infinite-menu-item-active-background: var(--infinite-row-hover-background);
102
+ --infinite-menu-item-pressed-background: var(--infinite-background);
103
+ --infinite-load-mask-text-background: var(--infinite-background);
104
+ --infinite-load-mask-color: var(--infinite-cell-color);
105
+ --infinite-row-background: var(--infinite-background);
106
+ --infinite-grouping-toolbar-background: var(--infinite-background);
107
+ --infinite-theme-name: ocean;
108
+ --infinite-theme-mode: dark;
109
+ --infinite-accent-color: #8b5cf6;
110
+ --infinite-background: #032c4f;
111
+ --infinite-color: #96a0aa;
112
+ --infinite-success-color: #176417;
113
+ --infinite-error-color: #5e1414;
114
+ --infinite-header-cell-background: #04233d;
115
+ --infinite-header-cell-hover-background: #021f35;
116
+ --infinite-cell-border-top: 1px solid color-mix(in srgb, transparent, var(--infinite-cell-color) 10%);
117
+ --infinite-cell-border-left: none;
118
+ --infinite-cell-border-right: none;
119
+ --infinite-cell-border-width: 0px;
120
+ --infinite-active-cell-indicator-inset: 2px 1px 1px 1px;
121
+ --infinite-row-odd-background: color-mix(in srgb, var(--infinite-row-background), white 2%);
122
+ --infinite-row-hover-background: var(--infinite-header-cell-background);
123
+ --infinite-row-selected-background: var(--infinite-header-cell-hover-background);
124
+ --infinite-row-selected-hover-background: color-mix(in srgb, var(--infinite-row-selected-background), white 2%);
125
+ --infinite-menu-separator-color: color-mix(in srgb, transparent, var(--infinite-cell-color) 10%);
126
+ }
127
+ @media (prefers-color-scheme: dark) {
128
+ .infinite-theme-name--ocean:root,
129
+ .infinite-theme-name--ocean {
130
+ --infinite-header-cell-border-right: 1px solid color-mix(in srgb, transparent, var(--infinite-color) 40%);
131
+ --infinite-header-cell-border: var(--infinite-cell-border);
132
+ --infinite-filter-editor-background: var(--infinite-row-odd-background);
133
+ --infinite-header-color: var(--infinite-color);
134
+ --infinite-header-background: var(--infinite-header-cell-hover-background);
135
+ --infinite-cell-color: var(--infinite-color);
136
+ --infinite-flashing-background: var(--infinite-accent-color);
137
+ --infinite-flashing-up-background: var(--infinite-success-color);
138
+ --infinite-flashing-down-background: var(--infinite-error-color);
139
+ --infinite-menu-color: var(--infinite-cell-color);
140
+ --infinite-menu-background: var(--infinite-header-cell-background);
141
+ --infinite-menu-item-disabled-background: var(--infinite-menu-background);
142
+ --infinite-menu-item-active-background: var(--infinite-row-hover-background);
143
+ --infinite-menu-item-pressed-background: var(--infinite-background);
144
+ --infinite-load-mask-text-background: var(--infinite-background);
145
+ --infinite-load-mask-color: var(--infinite-cell-color);
146
+ --infinite-row-background: var(--infinite-background);
147
+ --infinite-grouping-toolbar-background: var(--infinite-background);
148
+ --infinite-theme-name: ocean;
149
+ --infinite-theme-mode: dark;
150
+ --infinite-accent-color: #8b5cf6;
151
+ --infinite-background: #032c4f;
152
+ --infinite-color: #96a0aa;
153
+ --infinite-success-color: #176417;
154
+ --infinite-error-color: #5e1414;
155
+ --infinite-header-cell-background: #04233d;
156
+ --infinite-header-cell-hover-background: #021f35;
157
+ --infinite-cell-border-top: 1px solid color-mix(in srgb, transparent, var(--infinite-cell-color) 10%);
158
+ --infinite-cell-border-left: none;
159
+ --infinite-cell-border-right: none;
160
+ --infinite-cell-border-width: 0px;
161
+ --infinite-active-cell-indicator-inset: 2px 1px 1px 1px;
162
+ --infinite-row-odd-background: color-mix(in srgb, var(--infinite-row-background), white 2%);
163
+ --infinite-row-hover-background: var(--infinite-header-cell-background);
164
+ --infinite-row-selected-background: var(--infinite-header-cell-hover-background);
165
+ --infinite-row-selected-hover-background: color-mix(in srgb, var(--infinite-row-selected-background), white 2%);
166
+ --infinite-menu-separator-color: color-mix(in srgb, transparent, var(--infinite-cell-color) 10%);
167
+ }
168
+ }
169
+ }
package/theme/shadcn.css ADDED
@@ -0,0 +1,117 @@
1
+ /* vanilla-extract-css-ns:src/components/InfiniteTable/theme-shadcn.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+1YTU/jMBC991fMBQQSrlokDhsue9z9BXt24wmx6tjW2IGyiP++stvSNB9OKJxWOUSq4jdvJuP5eOpS6kJq6ZH5EitkmlfImCu5yHVGxvg7WCYg8LYAYOwDUSIXSCxHpdjGUPhN8qn0GWij8XEM3AsrpPJIDIX0htiG59snMrUWGTxzumkAybwwI0QDcjvg0ShDR/Oq9ihYYQiTNgm/w/7ip515Ox2Ft218obgrpX5KeeN5jtqP2Nc2ReHqPEfnRjiEedEpFiQy1M9Roa7Pv9saa56REnmONhdlOVpKjxUT0vGNQnHG44lrZzmh9oOGPPfyGceKq4yfMCUQS+hcK4494f762pbKcMEq7rbM485floYTx0DFfRRj2zJ820Uuw1sbasUbozb8wi45jZUM9mOlF1AZgRmoME5a512viZZs5ma4Gs9a5KOISVacXtvYRiMckQKdpzoWVRvd7N8R4rMBOamimxbtau3cSD99pzjQyb/ISq6FwnHS3gJr7gNvbAZruwNnlBTH+4pn3VTFrozWUguZ87ABpHboM7i3u0hzeBKmp2gZV7bkGayW6xR+H+iUGxpwI7DgtfIZRA5Wyd2N1GC2Ki/vWoSwXl3dNW8UfqyuUvlTWPSv02lLt4l6kcKXGaw62etu0k+0c9+kTGUiLuBbeGjn4aGbh0DtUGHue2frnillM1q+Ax4mrBxjeS79ayiu+4C+huXvA/xXbLQ/xK1FipIJ4HAFG+O9qfpn9alhonuA6yzGf2AAaFRc/8gfXFoA74vwvC/a6i5MWcbilP3EUVMTps66arJBmlSaScvvIz0Ttwnayy1Tsc5qelbTs5qe1fSspmc1PavpWU3Pavq/UNOC03b6yVe1dOD8ftUbWd+GN0k4f1y8L35WKCSHG0tYIB1GPnN5gO5Rt5EmFcLUP55HgolX8g/JRxlA4RYAAA== */
2
+ @layer infinite-table {
3
+ .infinite-theme-name--shadcn:root,
4
+ .infinite-theme-name--shadcn {
5
+ --infinite-header-cell-border-right: none;
6
+ --infinite-header-cell-border: none;
7
+ --infinite-filter-editor-background: var(--infinite-row-odd-background);
8
+ --infinite-header-color: var(--muted-foreground);
9
+ --infinite-header-background: var(--infinite-background);
10
+ --infinite-cell-color: var(--infinite-color);
11
+ --infinite-flashing-background: var(--infinite-accent-color);
12
+ --infinite-flashing-up-background: var(--infinite-success-color);
13
+ --infinite-flashing-down-background: var(--infinite-error-color);
14
+ --infinite-menu-color: var(--popover-foreground);
15
+ --infinite-menu-background: var(--infinite-background);
16
+ --infinite-menu-item-disabled-background: transparent;
17
+ --infinite-menu-item-active-background: var(--infinite-row-hover-background);
18
+ --infinite-menu-item-pressed-background: var(--accent);
19
+ --infinite-load-mask-text-background: var(--infinite-background);
20
+ --infinite-load-mask-color: var(--infinite-cell-color);
21
+ --infinite-row-background: var(--infinite-background);
22
+ --infinite-grouping-toolbar-background: var(--infinite-background);
23
+ --infinite-theme-name: shadcn;
24
+ --infinite-theme-mode: light;
25
+ --infinite-background: var(--background);
26
+ --infinite-color: var(--foreground);
27
+ --infinite-success-color: var(--primary);
28
+ --infinite-error-color: var(--destructive);
29
+ --infinite-accent-color: var(--primary);
30
+ --infinite-header-cell-background: transparent;
31
+ --infinite-header-cell-hover-background: var(--infinite-header-cell-background);
32
+ --infinite-resize-handle-hover-background: var(--infinite-color);
33
+ --infinite-cell-border-top: 1px solid var(--border);
34
+ --infinite-active-cell-indicator-inset: 2px 1px 1px 1px;
35
+ --infinite-active-cell-background-alpha: 0.1;
36
+ --infinite-active-cell-border-color: var(--primary);
37
+ --infinite-active-cell-background-default: color-mix(in oklch, var(--primary) 10%, transparent 90%);
38
+ --infinite-cell-border-left: none;
39
+ --infinite-cell-border-right: none;
40
+ --infinite-cell-border-width: 0px;
41
+ --infinite-row-odd-background: var(--infinite-background);
42
+ --infinite-row-hover-background: color-mix(in oklch, var(--muted) 50%, transparent 50%);
43
+ --infinite-row-selected-background: var(--muted);
44
+ --infinite-row-selected-hover-background: var(--infinite-row-selected-background);
45
+ --infinite-menu-item-disabled-opacity: 0.2;
46
+ & .InfiniteHeaderWrapper {
47
+ border-bottom: var(--infinite-cell-border-top);
48
+ &:hover {
49
+ background-color: var(--infinite-row-hover-background);
50
+ }
51
+ }
52
+ }
53
+ .infinite-theme-mode--light.infinite-theme-mode--light.infinite-theme-name--shadcn.infinite-theme-name--shadcn,
54
+ .infinite-theme-mode--light .infinite-theme-name--shadcn,
55
+ .infinite-theme-mode--light.infinite-theme-mode--light .infinite-theme-name--shadcn,
56
+ .infinite-theme-name--shadcn .infinite-theme-mode--light,
57
+ .infinite-theme-name--shadcn .infinite-theme-mode--light.infinite-theme-mode--light {
58
+ --infinite-header-cell-border-right: none;
59
+ --infinite-header-cell-border: none;
60
+ --infinite-filter-editor-background: var(--infinite-row-odd-background);
61
+ --infinite-header-color: var(--muted-foreground);
62
+ --infinite-header-background: var(--infinite-background);
63
+ --infinite-cell-color: var(--infinite-color);
64
+ --infinite-flashing-background: var(--infinite-accent-color);
65
+ --infinite-flashing-up-background: var(--infinite-success-color);
66
+ --infinite-flashing-down-background: var(--infinite-error-color);
67
+ --infinite-menu-color: var(--popover-foreground);
68
+ --infinite-menu-background: var(--infinite-background);
69
+ --infinite-menu-item-disabled-background: transparent;
70
+ --infinite-menu-item-active-background: var(--infinite-row-hover-background);
71
+ --infinite-menu-item-pressed-background: var(--accent);
72
+ --infinite-load-mask-text-background: var(--infinite-background);
73
+ --infinite-load-mask-color: var(--infinite-cell-color);
74
+ --infinite-row-background: var(--infinite-background);
75
+ --infinite-grouping-toolbar-background: var(--infinite-background);
76
+ --infinite-theme-name: shadcn;
77
+ --infinite-theme-mode: light;
78
+ --infinite-background: var(--background);
79
+ --infinite-color: var(--foreground);
80
+ --infinite-success-color: var(--primary);
81
+ --infinite-error-color: var(--destructive);
82
+ --infinite-accent-color: var(--primary);
83
+ --infinite-header-cell-background: transparent;
84
+ --infinite-header-cell-hover-background: var(--infinite-header-cell-background);
85
+ --infinite-resize-handle-hover-background: var(--infinite-color);
86
+ --infinite-cell-border-top: 1px solid var(--border);
87
+ --infinite-active-cell-indicator-inset: 2px 1px 1px 1px;
88
+ --infinite-active-cell-background-alpha: 0.1;
89
+ --infinite-active-cell-border-color: var(--primary);
90
+ --infinite-active-cell-background-default: color-mix(in oklch, var(--primary) 10%, transparent 90%);
91
+ --infinite-cell-border-left: none;
92
+ --infinite-cell-border-right: none;
93
+ --infinite-cell-border-width: 0px;
94
+ --infinite-row-odd-background: var(--infinite-background);
95
+ --infinite-row-hover-background: color-mix(in oklch, var(--muted) 50%, transparent 50%);
96
+ --infinite-row-selected-background: var(--muted);
97
+ --infinite-row-selected-hover-background: var(--infinite-row-selected-background);
98
+ --infinite-menu-item-disabled-opacity: 0.2;
99
+ & .InfiniteHeaderWrapper {
100
+ border-bottom: var(--infinite-cell-border-top);
101
+ &:hover {
102
+ background-color: var(--infinite-row-hover-background);
103
+ }
104
+ }
105
+ }
106
+ .infinite-theme-mode--dark.infinite-theme-mode--dark.infinite-theme-name--shadcn.infinite-theme-name--shadcn,
107
+ .infinite-theme-mode--dark .infinite-theme-name--shadcn,
108
+ .infinite-theme-name--shadcn .infinite-theme-mode--dark {
109
+ --infinite-theme-mode: dark;
110
+ }
111
+ @media (prefers-color-scheme: dark) {
112
+ .infinite-theme-name--shadcn:root,
113
+ .infinite-theme-name--shadcn {
114
+ --infinite-theme-mode: dark;
115
+ }
116
+ }
117
+ }