@askrjs/themes 0.2.1 → 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 (12) hide show
  1. package/dist/components/catalog.d.ts +3 -2
  2. package/dist/components/catalog.js +51 -60
  3. package/dist/components/catalog.js.map +1 -1
  4. package/dist/themes/default/index.css +42 -45
  5. package/package.json +2 -1
  6. package/src/components/catalog.tsx +83 -26
  7. package/src/themes/default/styles/base/reset.css +4 -0
  8. package/src/themes/default/styles/display/table.css +32 -31
  9. package/src/themes/default/styles/display/virtual-table.css +21 -9
  10. package/templates/theme/styles/base/reset.css +4 -0
  11. package/templates/theme/styles/display/table.css +32 -31
  12. package/templates/theme/styles/display/virtual-table.css +21 -9
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);