@urbicon-ui/table 6.1.8 → 6.3.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.
- package/dist/style/table-theme.css +20 -78
- package/package.json +4 -4
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
--color-filter-800: var(--color-cyan-800);
|
|
14
14
|
--color-filter-900: var(--color-cyan-900);
|
|
15
15
|
|
|
16
|
-
--color-filter: var(--color-filter-600);
|
|
17
|
-
--color-filter-hover: var(--color-filter-700);
|
|
18
|
-
--color-filter-active: var(--color-filter-800);
|
|
19
|
-
--color-filter-subtle: var(--color-filter-50);
|
|
20
|
-
--color-filter-emphasis: var(--color-filter-900);
|
|
16
|
+
--color-filter: light-dark(var(--color-filter-600), var(--color-filter-400));
|
|
17
|
+
--color-filter-hover: light-dark(var(--color-filter-700), var(--color-filter-300));
|
|
18
|
+
--color-filter-active: light-dark(var(--color-filter-800), var(--color-filter-200));
|
|
19
|
+
--color-filter-subtle: light-dark(var(--color-filter-50), var(--color-filter-900));
|
|
20
|
+
--color-filter-emphasis: light-dark(var(--color-filter-900), var(--color-filter-100));
|
|
21
21
|
|
|
22
22
|
/* Group Intent (Teal-based) */
|
|
23
23
|
--color-group-50: var(--color-teal-50);
|
|
@@ -31,11 +31,11 @@
|
|
|
31
31
|
--color-group-800: var(--color-teal-800);
|
|
32
32
|
--color-group-900: var(--color-teal-900);
|
|
33
33
|
|
|
34
|
-
--color-group: var(--color-group-600);
|
|
35
|
-
--color-group-hover: var(--color-group-700);
|
|
36
|
-
--color-group-active: var(--color-group-800);
|
|
37
|
-
--color-group-subtle: var(--color-group-50);
|
|
38
|
-
--color-group-emphasis: var(--color-group-900);
|
|
34
|
+
--color-group: light-dark(var(--color-group-600), var(--color-group-400));
|
|
35
|
+
--color-group-hover: light-dark(var(--color-group-700), var(--color-group-300));
|
|
36
|
+
--color-group-active: light-dark(var(--color-group-800), var(--color-group-200));
|
|
37
|
+
--color-group-subtle: light-dark(var(--color-group-50), var(--color-group-900));
|
|
38
|
+
--color-group-emphasis: light-dark(var(--color-group-900), var(--color-group-100));
|
|
39
39
|
|
|
40
40
|
/* Summary Intent (Emerald-based) */
|
|
41
41
|
--color-summary-50: var(--color-emerald-50);
|
|
@@ -49,11 +49,11 @@
|
|
|
49
49
|
--color-summary-800: var(--color-emerald-800);
|
|
50
50
|
--color-summary-900: var(--color-emerald-900);
|
|
51
51
|
|
|
52
|
-
--color-summary: var(--color-summary-600);
|
|
53
|
-
--color-summary-hover: var(--color-summary-700);
|
|
54
|
-
--color-summary-active: var(--color-summary-800);
|
|
55
|
-
--color-summary-subtle: var(--color-summary-50);
|
|
56
|
-
--color-summary-emphasis: var(--color-summary-900);
|
|
52
|
+
--color-summary: light-dark(var(--color-summary-600), var(--color-summary-400));
|
|
53
|
+
--color-summary-hover: light-dark(var(--color-summary-700), var(--color-summary-300));
|
|
54
|
+
--color-summary-active: light-dark(var(--color-summary-800), var(--color-summary-200));
|
|
55
|
+
--color-summary-subtle: light-dark(var(--color-summary-50), var(--color-summary-900));
|
|
56
|
+
--color-summary-emphasis: light-dark(var(--color-summary-900), var(--color-summary-100));
|
|
57
57
|
|
|
58
58
|
/* === TABLE-SPECIFIC DESIGN TOKENS === */
|
|
59
59
|
--table-header-height: 3rem;
|
|
@@ -66,66 +66,8 @@
|
|
|
66
66
|
--filter-bar-gap: 0.75rem;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
--color-filter-subtle: var(--color-filter-900);
|
|
75
|
-
--color-filter-emphasis: var(--color-filter-100);
|
|
76
|
-
|
|
77
|
-
--color-group: var(--color-group-400);
|
|
78
|
-
--color-group-hover: var(--color-group-300);
|
|
79
|
-
--color-group-active: var(--color-group-200);
|
|
80
|
-
--color-group-subtle: var(--color-group-900);
|
|
81
|
-
--color-group-emphasis: var(--color-group-100);
|
|
82
|
-
|
|
83
|
-
--color-summary: var(--color-summary-400);
|
|
84
|
-
--color-summary-hover: var(--color-summary-300);
|
|
85
|
-
--color-summary-active: var(--color-summary-200);
|
|
86
|
-
--color-summary-subtle: var(--color-summary-900);
|
|
87
|
-
--color-summary-emphasis: var(--color-summary-100);
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
/* Class-based dark mode (for manual theme toggle via .dark on <html>) */
|
|
92
|
-
:root.dark {
|
|
93
|
-
--color-filter: var(--color-filter-400);
|
|
94
|
-
--color-filter-hover: var(--color-filter-300);
|
|
95
|
-
--color-filter-active: var(--color-filter-200);
|
|
96
|
-
--color-filter-subtle: var(--color-filter-900);
|
|
97
|
-
--color-filter-emphasis: var(--color-filter-100);
|
|
98
|
-
|
|
99
|
-
--color-group: var(--color-group-400);
|
|
100
|
-
--color-group-hover: var(--color-group-300);
|
|
101
|
-
--color-group-active: var(--color-group-200);
|
|
102
|
-
--color-group-subtle: var(--color-group-900);
|
|
103
|
-
--color-group-emphasis: var(--color-group-100);
|
|
104
|
-
|
|
105
|
-
--color-summary: var(--color-summary-400);
|
|
106
|
-
--color-summary-hover: var(--color-summary-300);
|
|
107
|
-
--color-summary-active: var(--color-summary-200);
|
|
108
|
-
--color-summary-subtle: var(--color-summary-900);
|
|
109
|
-
--color-summary-emphasis: var(--color-summary-100);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
/* Class-based light mode override (forces light tokens when OS prefers dark) */
|
|
113
|
-
:root.light {
|
|
114
|
-
--color-filter: var(--color-filter-600);
|
|
115
|
-
--color-filter-hover: var(--color-filter-700);
|
|
116
|
-
--color-filter-active: var(--color-filter-800);
|
|
117
|
-
--color-filter-subtle: var(--color-filter-50);
|
|
118
|
-
--color-filter-emphasis: var(--color-filter-900);
|
|
119
|
-
|
|
120
|
-
--color-group: var(--color-group-600);
|
|
121
|
-
--color-group-hover: var(--color-group-700);
|
|
122
|
-
--color-group-active: var(--color-group-800);
|
|
123
|
-
--color-group-subtle: var(--color-group-50);
|
|
124
|
-
--color-group-emphasis: var(--color-group-900);
|
|
125
|
-
|
|
126
|
-
--color-summary: var(--color-summary-600);
|
|
127
|
-
--color-summary-hover: var(--color-summary-700);
|
|
128
|
-
--color-summary-active: var(--color-summary-800);
|
|
129
|
-
--color-summary-subtle: var(--color-summary-50);
|
|
130
|
-
--color-summary-emphasis: var(--color-summary-900);
|
|
131
|
-
}
|
|
69
|
+
/* Mode resolution lives in the `light-dark()` values in the @theme block above.
|
|
70
|
+
`color-scheme` — inherited from blocks' semantic.css, which sets it on `:root`
|
|
71
|
+
(light dark), `:root.light` and `:root.dark` — drives the OS preference AND
|
|
72
|
+
the ThemeSwitcher's manual override automatically. No `@media (prefers-color-
|
|
73
|
+
scheme)` or `:root.dark` / `:root.light` token duplication is needed here. */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@urbicon-ui/table",
|
|
3
|
-
"version": "6.1
|
|
3
|
+
"version": "6.3.1",
|
|
4
4
|
"description": "Data table for Svelte 5 — sorting, filtering, grouping, selection, keyboard navigation, virtualization and live updates",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -77,9 +77,9 @@
|
|
|
77
77
|
"@sveltejs/package": "^2.5.8",
|
|
78
78
|
"@sveltejs/vite-plugin-svelte": "^7.0.0",
|
|
79
79
|
"@tailwindcss/vite": "^4.3.1",
|
|
80
|
-
"@urbicon-ui/blocks": "6.1
|
|
81
|
-
"@urbicon-ui/i18n": "6.1
|
|
82
|
-
"@urbicon-ui/shared-types": "6.1
|
|
80
|
+
"@urbicon-ui/blocks": "6.3.1",
|
|
81
|
+
"@urbicon-ui/i18n": "6.3.1",
|
|
82
|
+
"@urbicon-ui/shared-types": "6.3.1",
|
|
83
83
|
"prettier": "^3.8.4",
|
|
84
84
|
"prettier-plugin-svelte": "^4.1.1",
|
|
85
85
|
"prettier-plugin-tailwindcss": "^0.8.0",
|