@askrjs/themes 0.2.0 → 0.2.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 (20) hide show
  1. package/THEMING.md +1 -1
  2. package/dist/components/_internal/block-layout.d.ts +1 -0
  3. package/dist/components/_internal/block-layout.js +2 -0
  4. package/dist/components/_internal/block-layout.js.map +1 -1
  5. package/dist/components/catalog.d.ts +33 -15
  6. package/dist/components/catalog.js +58 -74
  7. package/dist/components/catalog.js.map +1 -1
  8. package/dist/components.d.ts +2 -2
  9. package/dist/themes/default/index.css +71 -70
  10. package/package.json +2 -1
  11. package/src/components/_internal/block-layout.ts +3 -0
  12. package/src/components/catalog.tsx +183 -53
  13. package/src/themes/default/styles/base/reset.css +4 -0
  14. package/src/themes/default/styles/display/table.css +32 -31
  15. package/src/themes/default/styles/display/virtual-table.css +21 -9
  16. package/src/themes/default/styles/shell/navbar.css +29 -25
  17. package/templates/theme/styles/base/reset.css +4 -0
  18. package/templates/theme/styles/display/table.css +32 -31
  19. package/templates/theme/styles/display/virtual-table.css +21 -9
  20. package/templates/theme/styles/shell/navbar.css +29 -25
package/templates/theme/styles/base/reset.css CHANGED
@@ -22,6 +22,10 @@
22
22
  display: block;
23
23
  }
24
24
 
25
+ :where([data-askr-native-control="true"]) {
26
+ font: inherit;
27
+ }
28
+
25
29
  ::selection {
26
30
  background: color-mix(in srgb, var(--ak-color-primary-soft) 84%, transparent);
27
31
  color: var(--ak-color-text);
package/templates/theme/styles/display/table.css CHANGED
@@ -3,13 +3,12 @@
3
3
  min-inline-size: 0;
4
4
  border-collapse: collapse;
5
5
  border-spacing: 0;
6
- table-layout: fixed;
6
+ table-layout: auto;
7
7
  border: 0;
8
8
  border-radius: 0;
9
9
  background: transparent;
10
10
  color: var(--ak-color-text);
11
11
  box-shadow: none;
12
- overflow: hidden;
13
12
  }
14
13
 
15
14
  :where([data-slot="data-table"]) {
@@ -19,16 +18,16 @@
19
18
  }
20
19
 
21
20
  :where([data-slot="table-caption"]) {
22
- padding: 0 0 var(--ak-space-sm);
21
+ padding-block-start: var(--ak-space-md);
23
22
  color: var(--ak-color-text-muted);
24
23
  font-size: var(--ak-font-size-sm);
25
24
  line-height: var(--ak-line-height-normal);
26
25
  text-align: start;
27
- caption-side: top;
26
+ caption-side: bottom;
28
27
  }
29
28
 
30
29
  :where([data-slot="table-head"]) {
31
- background: var(--ak-color-surface-muted);
30
+ background: transparent;
32
31
  }
33
32
 
34
33
  :where([data-slot="table-body"]) {
@@ -36,58 +35,60 @@
36
35
  }
37
36
 
38
37
  :where([data-slot="table-foot"]) {
39
- background: transparent;
38
+ border-block-start: 1px solid var(--ak-color-border);
39
+ background: color-mix(in srgb, var(--ak-color-surface-muted) 50%, transparent);
40
+ font-weight: var(--ak-font-weight-medium);
40
41
  }
41
42
 
42
43
  :where([data-slot="table-row"]) {
43
44
  background: inherit;
45
+ border-block-end: 1px solid var(--ak-color-border);
44
46
  transition: background var(--ak-duration-fast) var(--ak-ease-standard);
45
47
  }
46
48
 
47
- :where([data-slot="table-row"]:hover) {
48
- background: var(--ak-color-hover);
49
+ :where(
50
+ [data-slot="table-row"]:hover,
51
+ [data-slot="table-row"][aria-expanded="true"],
52
+ [data-slot="table-row"][data-state="selected"]
53
+ ) {
54
+ background: color-mix(in srgb, var(--ak-color-surface-muted) 50%, transparent);
49
55
  }
50
56
 
51
57
  :where([data-slot="table-header-cell"]),
52
58
  :where([data-slot="table-cell"]) {
53
- padding: var(--ak-space-sm);
54
- border-block-end: 1px solid var(--ak-color-border);
59
+ padding: var(--ak-space-sm) var(--ak-space-xs);
55
60
  color: var(--ak-color-text);
56
61
  font-size: var(--ak-font-size-sm);
57
62
  line-height: var(--ak-line-height-normal);
58
63
  text-align: start;
59
- vertical-align: top;
60
- overflow-wrap: anywhere;
64
+ vertical-align: middle;
65
+ white-space: normal;
61
66
  }
62
67
 
63
- :where([data-slot="table-body"] [data-slot="table-row"]:last-child [data-slot="table-cell"]) {
68
+ :where([data-slot="table-body"] [data-slot="table-row"]:last-child),
69
+ :where([data-slot="table-foot"] [data-slot="table-row"]:last-child) {
64
70
  border-block-end: 0;
65
71
  }
66
72
 
67
73
  :where([data-slot="table-header-cell"]) {
68
- color: var(--ak-color-text-muted);
69
- font-weight: var(--ak-font-weight-semibold);
70
- letter-spacing: 0;
71
- overflow-wrap: normal;
72
- text-transform: none;
73
- word-break: normal;
74
- white-space: normal;
74
+ block-size: 2.5rem;
75
+ font-weight: var(--ak-font-weight-medium);
75
76
  }
76
77
 
77
78
  :where([data-slot="table-cell"]) {
78
79
  font-weight: var(--ak-font-weight-regular);
79
80
  }
80
81
 
81
- @media (max-width: 30rem) {
82
- :where([data-slot="table-header-cell"]),
83
- :where([data-slot="table-cell"]) {
84
- padding: var(--ak-space-sm) var(--ak-space-xs);
85
- font-size: var(--ak-font-size-xs);
86
- line-height: var(--ak-line-height-tight);
87
- }
82
+ :where(
83
+ [data-slot="table-header-cell"]:has([role="checkbox"]),
84
+ [data-slot="table-cell"]:has([role="checkbox"])
85
+ ) {
86
+ padding-inline-end: 0;
87
+ }
88
88
 
89
- :where([data-slot="table-header-cell"]) {
90
- letter-spacing: 0;
91
- overflow-wrap: anywhere;
92
- }
89
+ :where(
90
+ [data-slot="table-header-cell"] > [role="checkbox"],
91
+ [data-slot="table-cell"] > [role="checkbox"]
92
+ ) {
93
+ transform: translateY(2px);
93
94
  }
package/templates/theme/styles/display/virtual-table.css CHANGED
@@ -30,11 +30,11 @@
30
30
  }
31
31
 
32
32
  :where([data-slot="virtual-table-head"]) {
33
- background: var(--ak-color-surface-muted);
33
+ background: var(--ak-color-surface);
34
34
  }
35
35
 
36
36
  :where([data-slot="virtual-table-header-row"]) {
37
- background: inherit;
37
+ background: var(--ak-color-surface);
38
38
  }
39
39
 
40
40
  :where([data-slot="virtual-table-body"]) {
@@ -42,7 +42,7 @@
42
42
  }
43
43
 
44
44
  :where([data-slot="virtual-table-header-cell"], [data-slot="virtual-table-cell"]) {
45
- padding: var(--ak-space-sm);
45
+ padding: var(--ak-space-sm) var(--ak-space-xs);
46
46
  border-block-end: 1px solid var(--ak-color-border);
47
47
  color: var(--ak-color-text);
48
48
  font-size: var(--ak-font-size-sm);
@@ -55,10 +55,8 @@
55
55
  }
56
56
 
57
57
  :where([data-slot="virtual-table-header-cell"]) {
58
- color: var(--ak-color-text-muted);
59
- font-weight: var(--ak-font-weight-semibold);
60
- letter-spacing: 0;
61
- text-transform: none;
58
+ block-size: 2.5rem;
59
+ font-weight: var(--ak-font-weight-medium);
62
60
  }
63
61
 
64
62
  :where([data-slot="virtual-table-row"]) {
@@ -69,11 +67,11 @@
69
67
  }
70
68
 
71
69
  :where([data-slot="virtual-table-row"]:hover) {
72
- background: var(--ak-color-hover);
70
+ background: color-mix(in srgb, var(--ak-color-surface-muted) 50%, transparent);
73
71
  }
74
72
 
75
73
  :where([data-slot="virtual-table-row"][data-selected="true"]) {
76
- background: var(--ak-color-selected);
74
+ background: color-mix(in srgb, var(--ak-color-surface-muted) 50%, transparent);
77
75
  color: var(--ak-color-text);
78
76
  }
79
77
 
@@ -81,6 +79,20 @@
81
79
  background: transparent;
82
80
  }
83
81
 
82
+ :where(
83
+ [data-slot="virtual-table-header-cell"]:has([role="checkbox"]),
84
+ [data-slot="virtual-table-cell"]:has([role="checkbox"])
85
+ ) {
86
+ padding-inline-end: 0;
87
+ }
88
+
89
+ :where(
90
+ [data-slot="virtual-table-header-cell"] > [role="checkbox"],
91
+ [data-slot="virtual-table-cell"] > [role="checkbox"]
92
+ ) {
93
+ transform: translateY(2px);
94
+ }
95
+
84
96
  @media (max-width: 30rem) {
85
97
  :where([data-slot="virtual-table-header-cell"], [data-slot="virtual-table-cell"]) {
86
98
  padding: var(--ak-space-sm) var(--ak-space-xs);
package/templates/theme/styles/shell/navbar.css CHANGED
@@ -18,7 +18,7 @@
18
18
  align-items: stretch;
19
19
  }
20
20
 
21
- :where([data-slot="navbar"] > [data-slot="nav-group"]:not([data-align="end"])) {
21
+ :where([data-slot="navbar"] [data-slot="nav-group"]:not([data-align="end"])) {
22
22
  grid-column: 2;
23
23
  justify-self: center;
24
24
  }
@@ -187,14 +187,15 @@
187
187
  }
188
188
 
189
189
  @media (min-width: 40rem) {
190
+ :where([data-slot="navbar"][data-collapse-at="sm"]) :where([data-slot="navbar-collapse"]) {
191
+ display: block;
192
+ grid-column: 2 / -1;
193
+ width: 100%;
194
+ }
195
+
190
196
  :where([data-slot="navbar"][data-collapse-at="sm"]) :where([data-slot="navbar-content"]) {
191
197
  display: flex;
192
- grid-column: 2;
193
- justify-self: center;
194
- flex-basis: auto;
195
- flex-direction: row;
196
- align-items: center;
197
- width: auto;
198
+ width: 100%;
198
199
  }
199
200
 
200
201
  :where([data-slot="navbar"][data-collapse-at="sm"])
@@ -214,14 +215,15 @@
214
215
  }
215
216
 
216
217
  @media (min-width: 48rem) {
218
+ :where([data-slot="navbar"][data-collapse-at="md"]) :where([data-slot="navbar-collapse"]) {
219
+ display: block;
220
+ grid-column: 2 / -1;
221
+ width: 100%;
222
+ }
223
+
217
224
  :where([data-slot="navbar"][data-collapse-at="md"]) :where([data-slot="navbar-content"]) {
218
225
  display: flex;
219
- grid-column: 2;
220
- justify-self: center;
221
- flex-basis: auto;
222
- flex-direction: row;
223
- align-items: center;
224
- width: auto;
226
+ width: 100%;
225
227
  }
226
228
 
227
229
  :where([data-slot="navbar"][data-collapse-at="md"])
@@ -241,14 +243,15 @@
241
243
  }
242
244
 
243
245
  @media (min-width: 64rem) {
246
+ :where([data-slot="navbar"][data-collapse-at="lg"]) :where([data-slot="navbar-collapse"]) {
247
+ display: block;
248
+ grid-column: 2 / -1;
249
+ width: 100%;
250
+ }
251
+
244
252
  :where([data-slot="navbar"][data-collapse-at="lg"]) :where([data-slot="navbar-content"]) {
245
253
  display: flex;
246
- grid-column: 2;
247
- justify-self: center;
248
- flex-basis: auto;
249
- flex-direction: row;
250
- align-items: center;
251
- width: auto;
254
+ width: 100%;
252
255
  }
253
256
 
254
257
  :where([data-slot="navbar"][data-collapse-at="lg"])
@@ -268,14 +271,15 @@
268
271
  }
269
272
 
270
273
  @media (min-width: 80rem) {
274
+ :where([data-slot="navbar"][data-collapse-at="xl"]) :where([data-slot="navbar-collapse"]) {
275
+ display: block;
276
+ grid-column: 2 / -1;
277
+ width: 100%;
278
+ }
279
+
271
280
  :where([data-slot="navbar"][data-collapse-at="xl"]) :where([data-slot="navbar-content"]) {
272
281
  display: flex;
273
- grid-column: 2;
274
- justify-self: center;
275
- flex-basis: auto;
276
- flex-direction: row;
277
- align-items: center;
278
- width: auto;
282
+ width: 100%;
279
283
  }
280
284
 
281
285
  :where([data-slot="navbar"][data-collapse-at="xl"])