intable 0.0.9 → 0.0.10
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.
- package/LICENSE +21 -21
- package/README.md +378 -378
- package/dist/__uno.css +1 -1
- package/dist/hooks/index.d.ts +2 -1
- package/dist/hooks/index.js +98 -81
- package/dist/index.js +17 -17
- package/dist/plugins/CellSelectionPlugin.js +15 -12
- package/dist/plugins/DiffPlugin.js +1 -0
- package/dist/plugins/DragPlugin.js +1 -0
- package/dist/plugins/RowGroupPlugin.js +1 -0
- package/dist/style.css +2 -2
- package/dist/theme/antd.scss +42 -42
- package/dist/theme/dark.scss +46 -46
- package/dist/theme/element-plus.scss +38 -38
- package/dist/theme/github.scss +80 -80
- package/dist/theme/material.scss +73 -73
- package/dist/theme/shadcn.scss +66 -66
- package/dist/theme/stripe.scss +57 -57
- package/package.json +1 -1
package/dist/theme/dark.scss
CHANGED
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* intable — Dark (OLED) Theme
|
|
3
|
-
* Deep black background, high contrast, WCAG AAA compliant
|
|
4
|
-
* Best for: developer tools, night mode, coding platforms
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
.data-table {
|
|
8
|
-
--bg: #0d1117;
|
|
9
|
-
--c-primary: #388bfd;
|
|
10
|
-
|
|
11
|
-
--menu-bg: #161b22;
|
|
12
|
-
--li-hover-bg: rgba(177, 186, 196, 0.12);
|
|
13
|
-
|
|
14
|
-
--table-b: 1px solid var(--table-b-c);
|
|
15
|
-
--table-b-c: #30363d;
|
|
16
|
-
--table-c: #e6edf3;
|
|
17
|
-
--table-bg: #0d1117;
|
|
18
|
-
|
|
19
|
-
--table-header-c: #8b949e;
|
|
20
|
-
--table-header-bg: #161b22;
|
|
21
|
-
|
|
22
|
-
--table-row-hover-bg: #161b22;
|
|
23
|
-
|
|
24
|
-
--select-area-bg: #388bfd1f;
|
|
25
|
-
|
|
26
|
-
color-scheme: dark;
|
|
27
|
-
font-size: 13px;
|
|
28
|
-
|
|
29
|
-
th, td {
|
|
30
|
-
padding: 8px 12px;
|
|
31
|
-
line-height: 20px;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
&--small {
|
|
35
|
-
font-size: 12px;
|
|
36
|
-
|
|
37
|
-
th, td {
|
|
38
|
-
padding: 4px 8px;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
thead th {
|
|
43
|
-
font-weight: 600;
|
|
44
|
-
letter-spacing: 0.01em;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* intable — Dark (OLED) Theme
|
|
3
|
+
* Deep black background, high contrast, WCAG AAA compliant
|
|
4
|
+
* Best for: developer tools, night mode, coding platforms
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
.data-table {
|
|
8
|
+
--bg: #0d1117;
|
|
9
|
+
--c-primary: #388bfd;
|
|
10
|
+
|
|
11
|
+
--menu-bg: #161b22;
|
|
12
|
+
--li-hover-bg: rgba(177, 186, 196, 0.12);
|
|
13
|
+
|
|
14
|
+
--table-b: 1px solid var(--table-b-c);
|
|
15
|
+
--table-b-c: #30363d;
|
|
16
|
+
--table-c: #e6edf3;
|
|
17
|
+
--table-bg: #0d1117;
|
|
18
|
+
|
|
19
|
+
--table-header-c: #8b949e;
|
|
20
|
+
--table-header-bg: #161b22;
|
|
21
|
+
|
|
22
|
+
--table-row-hover-bg: #161b22;
|
|
23
|
+
|
|
24
|
+
--select-area-bg: #388bfd1f;
|
|
25
|
+
|
|
26
|
+
color-scheme: dark;
|
|
27
|
+
font-size: 13px;
|
|
28
|
+
|
|
29
|
+
th, td {
|
|
30
|
+
padding: 8px 12px;
|
|
31
|
+
line-height: 20px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&--small {
|
|
35
|
+
font-size: 12px;
|
|
36
|
+
|
|
37
|
+
th, td {
|
|
38
|
+
padding: 4px 8px;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
thead th {
|
|
43
|
+
font-weight: 600;
|
|
44
|
+
letter-spacing: 0.01em;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
.data-table {
|
|
2
|
-
--bg: var(--el-bg-color, #fff);
|
|
3
|
-
|
|
4
|
-
--menu-bg: var(--el-bg-color-overlay, #fff);
|
|
5
|
-
--li-hover-bg: var(--el-fill-color-light, #f5f7fa);
|
|
6
|
-
|
|
7
|
-
--table-b: 1px solid var(--table-b-c);
|
|
8
|
-
--table-b-c: var(--el-table-border-color, #ebeef5);
|
|
9
|
-
--table-c: var(--el-table-text-color, #606266);
|
|
10
|
-
--table-bg: var(--el-table-tr-bg-color, #fff);
|
|
11
|
-
|
|
12
|
-
--table-header-c: var(--el-table-header-text-color, #909399);
|
|
13
|
-
--table-header-bg: var(--table-bg);
|
|
14
|
-
|
|
15
|
-
--table-row-hover-bg: var(--el-table-row-hover-bg-color, #f5f7fa);
|
|
16
|
-
|
|
17
|
-
line-height: 23px;
|
|
18
|
-
font-size: 14px;
|
|
19
|
-
|
|
20
|
-
thead th {
|
|
21
|
-
font-weight: 600;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
th, td {
|
|
25
|
-
padding: 8px 12px;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.row-selection {
|
|
29
|
-
width: 45px;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
&--small {
|
|
33
|
-
font-size: 12px;
|
|
34
|
-
|
|
35
|
-
th, td {
|
|
36
|
-
padding: 4px 8px;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
1
|
+
.data-table {
|
|
2
|
+
--bg: var(--el-bg-color, #fff);
|
|
3
|
+
|
|
4
|
+
--menu-bg: var(--el-bg-color-overlay, #fff);
|
|
5
|
+
--li-hover-bg: var(--el-fill-color-light, #f5f7fa);
|
|
6
|
+
|
|
7
|
+
--table-b: 1px solid var(--table-b-c);
|
|
8
|
+
--table-b-c: var(--el-table-border-color, #ebeef5);
|
|
9
|
+
--table-c: var(--el-table-text-color, #606266);
|
|
10
|
+
--table-bg: var(--el-table-tr-bg-color, #fff);
|
|
11
|
+
|
|
12
|
+
--table-header-c: var(--el-table-header-text-color, #909399);
|
|
13
|
+
--table-header-bg: var(--table-bg);
|
|
14
|
+
|
|
15
|
+
--table-row-hover-bg: var(--el-table-row-hover-bg-color, #f5f7fa);
|
|
16
|
+
|
|
17
|
+
line-height: 23px;
|
|
18
|
+
font-size: 14px;
|
|
19
|
+
|
|
20
|
+
thead th {
|
|
21
|
+
font-weight: 600;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
th, td {
|
|
25
|
+
padding: 8px 12px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.row-selection {
|
|
29
|
+
width: 45px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&--small {
|
|
33
|
+
font-size: 12px;
|
|
34
|
+
|
|
35
|
+
th, td {
|
|
36
|
+
padding: 4px 8px;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
39
|
}
|
package/dist/theme/github.scss
CHANGED
|
@@ -1,80 +1,80 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* intable — GitHub Theme
|
|
3
|
-
* Matches GitHub's Primer design system — light & dark surfaces
|
|
4
|
-
* Best for: developer tools, docs sites, code-adjacent UIs
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
.data-table {
|
|
8
|
-
--bg: #ffffff;
|
|
9
|
-
--c-primary: #0969da;
|
|
10
|
-
|
|
11
|
-
--menu-bg: #ffffff;
|
|
12
|
-
--li-hover-bg: #f3f4f6;
|
|
13
|
-
|
|
14
|
-
--table-b: 1px solid var(--table-b-c);
|
|
15
|
-
--table-b-c: #d0d7de;
|
|
16
|
-
--table-c: #1f2328;
|
|
17
|
-
--table-bg: #ffffff;
|
|
18
|
-
|
|
19
|
-
--table-header-c: #636c76;
|
|
20
|
-
--table-header-bg: #f6f8fa;
|
|
21
|
-
|
|
22
|
-
--table-row-hover-bg: #f6f8fa;
|
|
23
|
-
|
|
24
|
-
--select-area-bg: #0969da1a;
|
|
25
|
-
|
|
26
|
-
font-size: 14px;
|
|
27
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
|
|
28
|
-
|
|
29
|
-
th, td {
|
|
30
|
-
padding: 8px 12px;
|
|
31
|
-
line-height: 1.5;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
thead th {
|
|
35
|
-
font-weight: 600;
|
|
36
|
-
white-space: nowrap;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
tbody tr:nth-child(even) td {
|
|
40
|
-
background-color: #f6f8fa;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
tbody tr:nth-child(even):hover td {
|
|
44
|
-
background-color: var(--table-row-hover-bg);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
&--small {
|
|
48
|
-
font-size: 12px;
|
|
49
|
-
|
|
50
|
-
th, td {
|
|
51
|
-
padding: 4px 8px;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
// Dark (GitHub Dark Default)
|
|
56
|
-
&.dark, [data-theme="dark"] & {
|
|
57
|
-
--bg: #0d1117;
|
|
58
|
-
--c-primary: #388bfd;
|
|
59
|
-
|
|
60
|
-
--menu-bg: #161b22;
|
|
61
|
-
--li-hover-bg: rgba(177, 186, 196, 0.12);
|
|
62
|
-
|
|
63
|
-
--table-b-c: #30363d;
|
|
64
|
-
--table-c: #e6edf3;
|
|
65
|
-
--table-bg: #0d1117;
|
|
66
|
-
|
|
67
|
-
--table-header-c: #8b949e;
|
|
68
|
-
--table-header-bg: #161b22;
|
|
69
|
-
|
|
70
|
-
--table-row-hover-bg: #161b22;
|
|
71
|
-
|
|
72
|
-
--select-area-bg: #388bfd1f;
|
|
73
|
-
|
|
74
|
-
color-scheme: dark;
|
|
75
|
-
|
|
76
|
-
tbody tr:nth-child(even) td {
|
|
77
|
-
background-color: #161b22;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* intable — GitHub Theme
|
|
3
|
+
* Matches GitHub's Primer design system — light & dark surfaces
|
|
4
|
+
* Best for: developer tools, docs sites, code-adjacent UIs
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
.data-table {
|
|
8
|
+
--bg: #ffffff;
|
|
9
|
+
--c-primary: #0969da;
|
|
10
|
+
|
|
11
|
+
--menu-bg: #ffffff;
|
|
12
|
+
--li-hover-bg: #f3f4f6;
|
|
13
|
+
|
|
14
|
+
--table-b: 1px solid var(--table-b-c);
|
|
15
|
+
--table-b-c: #d0d7de;
|
|
16
|
+
--table-c: #1f2328;
|
|
17
|
+
--table-bg: #ffffff;
|
|
18
|
+
|
|
19
|
+
--table-header-c: #636c76;
|
|
20
|
+
--table-header-bg: #f6f8fa;
|
|
21
|
+
|
|
22
|
+
--table-row-hover-bg: #f6f8fa;
|
|
23
|
+
|
|
24
|
+
--select-area-bg: #0969da1a;
|
|
25
|
+
|
|
26
|
+
font-size: 14px;
|
|
27
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
|
|
28
|
+
|
|
29
|
+
th, td {
|
|
30
|
+
padding: 8px 12px;
|
|
31
|
+
line-height: 1.5;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
thead th {
|
|
35
|
+
font-weight: 600;
|
|
36
|
+
white-space: nowrap;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
tbody tr:nth-child(even) td {
|
|
40
|
+
background-color: #f6f8fa;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
tbody tr:nth-child(even):hover td {
|
|
44
|
+
background-color: var(--table-row-hover-bg);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&--small {
|
|
48
|
+
font-size: 12px;
|
|
49
|
+
|
|
50
|
+
th, td {
|
|
51
|
+
padding: 4px 8px;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// Dark (GitHub Dark Default)
|
|
56
|
+
&.dark, [data-theme="dark"] & {
|
|
57
|
+
--bg: #0d1117;
|
|
58
|
+
--c-primary: #388bfd;
|
|
59
|
+
|
|
60
|
+
--menu-bg: #161b22;
|
|
61
|
+
--li-hover-bg: rgba(177, 186, 196, 0.12);
|
|
62
|
+
|
|
63
|
+
--table-b-c: #30363d;
|
|
64
|
+
--table-c: #e6edf3;
|
|
65
|
+
--table-bg: #0d1117;
|
|
66
|
+
|
|
67
|
+
--table-header-c: #8b949e;
|
|
68
|
+
--table-header-bg: #161b22;
|
|
69
|
+
|
|
70
|
+
--table-row-hover-bg: #161b22;
|
|
71
|
+
|
|
72
|
+
--select-area-bg: #388bfd1f;
|
|
73
|
+
|
|
74
|
+
color-scheme: dark;
|
|
75
|
+
|
|
76
|
+
tbody tr:nth-child(even) td {
|
|
77
|
+
background-color: #161b22;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
package/dist/theme/material.scss
CHANGED
|
@@ -1,73 +1,73 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* intable — Material Design 3 Theme
|
|
3
|
-
* Google Material You / M3 surface tones and typography
|
|
4
|
-
* Best for: Android-style web apps, admin panels, data management UIs
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
.data-table {
|
|
8
|
-
--bg: #fffbfe;
|
|
9
|
-
--c-primary: #6750a4;
|
|
10
|
-
|
|
11
|
-
--menu-bg: #ece6f0;
|
|
12
|
-
--li-hover-bg: rgba(103, 80, 164, 0.08);
|
|
13
|
-
|
|
14
|
-
--table-b: 1px solid var(--table-b-c);
|
|
15
|
-
--table-b-c: #cac4d0;
|
|
16
|
-
--table-c: #1c1b1f;
|
|
17
|
-
--table-bg: #fffbfe;
|
|
18
|
-
|
|
19
|
-
--table-header-c: #49454f;
|
|
20
|
-
--table-header-bg: #fffbfe;
|
|
21
|
-
|
|
22
|
-
--table-row-hover-bg: rgba(103, 80, 164, 0.08);
|
|
23
|
-
|
|
24
|
-
--select-area-bg: rgba(103, 80, 164, 0.12);
|
|
25
|
-
|
|
26
|
-
font-size: 14px;
|
|
27
|
-
font-family: 'Roboto', sans-serif;
|
|
28
|
-
|
|
29
|
-
th, td {
|
|
30
|
-
padding: 10px 16px;
|
|
31
|
-
line-height: 20px;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
thead th {
|
|
35
|
-
font-size: 12px;
|
|
36
|
-
font-weight: 500;
|
|
37
|
-
letter-spacing: 0.02em;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
tr:not(:last-child) td {
|
|
41
|
-
border-bottom: 1px solid var(--table-b-c);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
&--small {
|
|
45
|
-
font-size: 12px;
|
|
46
|
-
|
|
47
|
-
th, td {
|
|
48
|
-
padding: 6px 12px;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
// Dark variant (M3 dark)
|
|
53
|
-
&.dark, [data-theme="dark"] & {
|
|
54
|
-
--bg: #1c1b1f;
|
|
55
|
-
--c-primary: #d0bcff;
|
|
56
|
-
|
|
57
|
-
--menu-bg: #2b2930;
|
|
58
|
-
--li-hover-bg: rgba(208, 188, 255, 0.08);
|
|
59
|
-
|
|
60
|
-
--table-b-c: #49454f;
|
|
61
|
-
--table-c: #e6e1e5;
|
|
62
|
-
--table-bg: #1c1b1f;
|
|
63
|
-
|
|
64
|
-
--table-header-c: #cac4d0;
|
|
65
|
-
--table-header-bg: #1c1b1f;
|
|
66
|
-
|
|
67
|
-
--table-row-hover-bg: rgba(208, 188, 255, 0.08);
|
|
68
|
-
|
|
69
|
-
--select-area-bg: rgba(208, 188, 255, 0.12);
|
|
70
|
-
|
|
71
|
-
color-scheme: dark;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* intable — Material Design 3 Theme
|
|
3
|
+
* Google Material You / M3 surface tones and typography
|
|
4
|
+
* Best for: Android-style web apps, admin panels, data management UIs
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
.data-table {
|
|
8
|
+
--bg: #fffbfe;
|
|
9
|
+
--c-primary: #6750a4;
|
|
10
|
+
|
|
11
|
+
--menu-bg: #ece6f0;
|
|
12
|
+
--li-hover-bg: rgba(103, 80, 164, 0.08);
|
|
13
|
+
|
|
14
|
+
--table-b: 1px solid var(--table-b-c);
|
|
15
|
+
--table-b-c: #cac4d0;
|
|
16
|
+
--table-c: #1c1b1f;
|
|
17
|
+
--table-bg: #fffbfe;
|
|
18
|
+
|
|
19
|
+
--table-header-c: #49454f;
|
|
20
|
+
--table-header-bg: #fffbfe;
|
|
21
|
+
|
|
22
|
+
--table-row-hover-bg: rgba(103, 80, 164, 0.08);
|
|
23
|
+
|
|
24
|
+
--select-area-bg: rgba(103, 80, 164, 0.12);
|
|
25
|
+
|
|
26
|
+
font-size: 14px;
|
|
27
|
+
font-family: 'Roboto', sans-serif;
|
|
28
|
+
|
|
29
|
+
th, td {
|
|
30
|
+
padding: 10px 16px;
|
|
31
|
+
line-height: 20px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
thead th {
|
|
35
|
+
font-size: 12px;
|
|
36
|
+
font-weight: 500;
|
|
37
|
+
letter-spacing: 0.02em;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
tr:not(:last-child) td {
|
|
41
|
+
border-bottom: 1px solid var(--table-b-c);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&--small {
|
|
45
|
+
font-size: 12px;
|
|
46
|
+
|
|
47
|
+
th, td {
|
|
48
|
+
padding: 6px 12px;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// Dark variant (M3 dark)
|
|
53
|
+
&.dark, [data-theme="dark"] & {
|
|
54
|
+
--bg: #1c1b1f;
|
|
55
|
+
--c-primary: #d0bcff;
|
|
56
|
+
|
|
57
|
+
--menu-bg: #2b2930;
|
|
58
|
+
--li-hover-bg: rgba(208, 188, 255, 0.08);
|
|
59
|
+
|
|
60
|
+
--table-b-c: #49454f;
|
|
61
|
+
--table-c: #e6e1e5;
|
|
62
|
+
--table-bg: #1c1b1f;
|
|
63
|
+
|
|
64
|
+
--table-header-c: #cac4d0;
|
|
65
|
+
--table-header-bg: #1c1b1f;
|
|
66
|
+
|
|
67
|
+
--table-row-hover-bg: rgba(208, 188, 255, 0.08);
|
|
68
|
+
|
|
69
|
+
--select-area-bg: rgba(208, 188, 255, 0.12);
|
|
70
|
+
|
|
71
|
+
color-scheme: dark;
|
|
72
|
+
}
|
|
73
|
+
}
|
package/dist/theme/shadcn.scss
CHANGED
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* intable — Shadcn/Zinc Theme
|
|
3
|
-
* Neutral zinc/slate tones, clean minimal, matches shadcn/ui palette
|
|
4
|
-
* Best for: modern SaaS dashboards, admin panels, clean productivity tools
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
.data-table {
|
|
8
|
-
--bg: #ffffff;
|
|
9
|
-
--c-primary: #18181b;
|
|
10
|
-
|
|
11
|
-
--menu-bg: #ffffff;
|
|
12
|
-
--li-hover-bg: #f4f4f5;
|
|
13
|
-
|
|
14
|
-
--table-b: 1px solid var(--table-b-c);
|
|
15
|
-
--table-b-c: #e4e4e7;
|
|
16
|
-
--table-c: #09090b;
|
|
17
|
-
--table-bg: #ffffff;
|
|
18
|
-
|
|
19
|
-
--table-header-c: #71717a;
|
|
20
|
-
--table-header-bg: #ffffff;
|
|
21
|
-
|
|
22
|
-
--table-row-hover-bg: #fafafa;
|
|
23
|
-
|
|
24
|
-
--select-area-bg: #18181b14;
|
|
25
|
-
|
|
26
|
-
font-size: 14px;
|
|
27
|
-
|
|
28
|
-
th, td {
|
|
29
|
-
padding: 10px 12px;
|
|
30
|
-
line-height: 20px;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
thead th {
|
|
34
|
-
font-weight: 500;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&--small {
|
|
38
|
-
font-size: 13px;
|
|
39
|
-
|
|
40
|
-
th, td {
|
|
41
|
-
padding: 6px 10px;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
// Dark mode variant
|
|
46
|
-
&.dark, [data-theme="dark"] & {
|
|
47
|
-
--bg: #09090b;
|
|
48
|
-
--c-primary: #fafafa;
|
|
49
|
-
|
|
50
|
-
--menu-bg: #09090b;
|
|
51
|
-
--li-hover-bg: #27272a;
|
|
52
|
-
|
|
53
|
-
--table-b-c: #27272a;
|
|
54
|
-
--table-c: #fafafa;
|
|
55
|
-
--table-bg: #09090b;
|
|
56
|
-
|
|
57
|
-
--table-header-c: #71717a;
|
|
58
|
-
--table-header-bg: #09090b;
|
|
59
|
-
|
|
60
|
-
--table-row-hover-bg: #18181b;
|
|
61
|
-
|
|
62
|
-
--select-area-bg: #ffffff14;
|
|
63
|
-
|
|
64
|
-
color-scheme: dark;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* intable — Shadcn/Zinc Theme
|
|
3
|
+
* Neutral zinc/slate tones, clean minimal, matches shadcn/ui palette
|
|
4
|
+
* Best for: modern SaaS dashboards, admin panels, clean productivity tools
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
.data-table {
|
|
8
|
+
--bg: #ffffff;
|
|
9
|
+
--c-primary: #18181b;
|
|
10
|
+
|
|
11
|
+
--menu-bg: #ffffff;
|
|
12
|
+
--li-hover-bg: #f4f4f5;
|
|
13
|
+
|
|
14
|
+
--table-b: 1px solid var(--table-b-c);
|
|
15
|
+
--table-b-c: #e4e4e7;
|
|
16
|
+
--table-c: #09090b;
|
|
17
|
+
--table-bg: #ffffff;
|
|
18
|
+
|
|
19
|
+
--table-header-c: #71717a;
|
|
20
|
+
--table-header-bg: #ffffff;
|
|
21
|
+
|
|
22
|
+
--table-row-hover-bg: #fafafa;
|
|
23
|
+
|
|
24
|
+
--select-area-bg: #18181b14;
|
|
25
|
+
|
|
26
|
+
font-size: 14px;
|
|
27
|
+
|
|
28
|
+
th, td {
|
|
29
|
+
padding: 10px 12px;
|
|
30
|
+
line-height: 20px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
thead th {
|
|
34
|
+
font-weight: 500;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&--small {
|
|
38
|
+
font-size: 13px;
|
|
39
|
+
|
|
40
|
+
th, td {
|
|
41
|
+
padding: 6px 10px;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Dark mode variant
|
|
46
|
+
&.dark, [data-theme="dark"] & {
|
|
47
|
+
--bg: #09090b;
|
|
48
|
+
--c-primary: #fafafa;
|
|
49
|
+
|
|
50
|
+
--menu-bg: #09090b;
|
|
51
|
+
--li-hover-bg: #27272a;
|
|
52
|
+
|
|
53
|
+
--table-b-c: #27272a;
|
|
54
|
+
--table-c: #fafafa;
|
|
55
|
+
--table-bg: #09090b;
|
|
56
|
+
|
|
57
|
+
--table-header-c: #71717a;
|
|
58
|
+
--table-header-bg: #09090b;
|
|
59
|
+
|
|
60
|
+
--table-row-hover-bg: #18181b;
|
|
61
|
+
|
|
62
|
+
--select-area-bg: #ffffff14;
|
|
63
|
+
|
|
64
|
+
color-scheme: dark;
|
|
65
|
+
}
|
|
66
|
+
}
|