@askrjs/themes 0.0.16 → 0.0.19

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 (179) hide show
  1. package/README.md +25 -0
  2. package/THEMING.md +6 -5
  3. package/dist/components/_internal/block-layout.d.ts +1 -0
  4. package/dist/components/_internal/block-layout.js +14 -11
  5. package/dist/components/_internal/block-layout.js.map +1 -1
  6. package/dist/components/_internal/classes.js +8 -1
  7. package/dist/components/_internal/classes.js.map +1 -1
  8. package/dist/components/_internal/jsx.js.map +1 -1
  9. package/dist/components/_internal/style.js +185 -28
  10. package/dist/components/_internal/style.js.map +1 -1
  11. package/dist/components/alert/alert.d.ts +1 -0
  12. package/dist/components/alert/alert.js.map +1 -1
  13. package/dist/components/alert/alert.types.d.ts +1 -0
  14. package/dist/components/aside/aside.d.ts +1 -0
  15. package/dist/components/aside/aside.js.map +1 -1
  16. package/dist/components/aspect-ratio/aspect-ratio.d.ts +1 -0
  17. package/dist/components/aspect-ratio/aspect-ratio.js.map +1 -1
  18. package/dist/components/aspect-ratio/aspect-ratio.types.d.ts +1 -0
  19. package/dist/components/badge/badge.d.ts +1 -0
  20. package/dist/components/badge/badge.js.map +1 -1
  21. package/dist/components/badge/badge.types.d.ts +1 -0
  22. package/dist/components/block/block.d.ts +1 -0
  23. package/dist/components/block/block.js +2 -2
  24. package/dist/components/block/block.js.map +1 -1
  25. package/dist/components/block/block.types.d.ts +1 -0
  26. package/dist/components/brand/brand.d.ts +1 -0
  27. package/dist/components/brand/brand.js +2 -2
  28. package/dist/components/brand/brand.js.map +1 -1
  29. package/dist/components/brand/brand.types.d.ts +1 -0
  30. package/dist/components/button-group/button-group.d.ts +1 -0
  31. package/dist/components/button-group/button-group.js.map +1 -1
  32. package/dist/components/button-group/button-group.types.d.ts +1 -0
  33. package/dist/components/card/card.d.ts +1 -0
  34. package/dist/components/card/card.js.map +1 -1
  35. package/dist/components/card/card.types.d.ts +1 -0
  36. package/dist/components/catalog.d.ts +1 -0
  37. package/dist/components/catalog.js +22 -13
  38. package/dist/components/catalog.js.map +1 -1
  39. package/dist/components/close/close.d.ts +1 -0
  40. package/dist/components/close/close.js.map +1 -1
  41. package/dist/components/container/container.d.ts +1 -0
  42. package/dist/components/container/container.js.map +1 -1
  43. package/dist/components/empty-state/empty-state.d.ts +1 -0
  44. package/dist/components/empty-state/empty-state.js.map +1 -1
  45. package/dist/components/field/field.d.ts +1 -0
  46. package/dist/components/field/field.js.map +1 -1
  47. package/dist/components/field/field.types.d.ts +1 -0
  48. package/dist/components/footer/footer.d.ts +1 -0
  49. package/dist/components/footer/footer.js.map +1 -1
  50. package/dist/components/footer/footer.types.d.ts +1 -0
  51. package/dist/components/grid/grid.d.ts +1 -0
  52. package/dist/components/grid/grid.js.map +1 -1
  53. package/dist/components/grid/grid.types.d.ts +1 -0
  54. package/dist/components/header/header.d.ts +1 -0
  55. package/dist/components/header/header.js.map +1 -1
  56. package/dist/components/input-group/input-group.d.ts +1 -0
  57. package/dist/components/input-group/input-group.js.map +1 -1
  58. package/dist/components/input-group/input-group.types.d.ts +1 -0
  59. package/dist/components/jsx-types.d.ts +12 -0
  60. package/dist/components/main/main.d.ts +1 -0
  61. package/dist/components/main/main.js.map +1 -1
  62. package/dist/components/nav/nav.d.ts +1 -0
  63. package/dist/components/nav/nav.js +6 -2
  64. package/dist/components/nav/nav.js.map +1 -1
  65. package/dist/components/nav/nav.types.d.ts +2 -0
  66. package/dist/components/navbar/navbar.d.ts +1 -0
  67. package/dist/components/navbar/navbar.js +15 -10
  68. package/dist/components/navbar/navbar.js.map +1 -1
  69. package/dist/components/overlays/dropdown-content.d.ts +1 -0
  70. package/dist/components/overlays/dropdown-content.js.map +1 -1
  71. package/dist/components/page/page.d.ts +1 -0
  72. package/dist/components/page/page.js.map +1 -1
  73. package/dist/components/page-header/page-header.d.ts +1 -0
  74. package/dist/components/page-header/page-header.js.map +1 -1
  75. package/dist/components/section/section.d.ts +1 -0
  76. package/dist/components/section/section.js.map +1 -1
  77. package/dist/components/separator/separator.d.ts +1 -0
  78. package/dist/components/separator/separator.js.map +1 -1
  79. package/dist/components/separator/separator.types.d.ts +1 -0
  80. package/dist/components/sidebar/index.d.ts +2 -2
  81. package/dist/components/sidebar/sidebar.d.ts +2 -1
  82. package/dist/components/sidebar/sidebar.js +39 -13
  83. package/dist/components/sidebar/sidebar.js.map +1 -1
  84. package/dist/components/sidebar/sidebar.types.d.ts +3 -1
  85. package/dist/components/skeleton/skeleton.d.ts +1 -0
  86. package/dist/components/skeleton/skeleton.js.map +1 -1
  87. package/dist/components/skeleton/skeleton.types.d.ts +1 -0
  88. package/dist/components/spinner/spinner.d.ts +1 -0
  89. package/dist/components/spinner/spinner.js.map +1 -1
  90. package/dist/components/stat/stat.d.ts +1 -0
  91. package/dist/components/stat/stat.js.map +1 -1
  92. package/dist/components/stat/stat.types.d.ts +1 -0
  93. package/dist/components/text/text.d.ts +1 -0
  94. package/dist/components/text/text.js.map +1 -1
  95. package/dist/components/text/text.types.d.ts +1 -0
  96. package/dist/components/theme/theme.d.ts +2 -0
  97. package/dist/components/theme/theme.js +58 -19
  98. package/dist/components/theme/theme.js.map +1 -1
  99. package/dist/components/toolbar/toolbar.d.ts +1 -0
  100. package/dist/components/toolbar/toolbar.js.map +1 -1
  101. package/dist/components.d.ts +6 -3
  102. package/dist/core.d.ts +2 -2
  103. package/dist/ssr.d.ts +18 -0
  104. package/dist/ssr.js +63 -0
  105. package/dist/ssr.js.map +1 -0
  106. package/dist/themes/default/index.css +43 -7
  107. package/package.json +7 -3
  108. package/src/components/_internal/block-layout.ts +27 -16
  109. package/src/components/_internal/classes.ts +15 -2
  110. package/src/components/_internal/jsx.ts +1 -1
  111. package/src/components/_internal/style.ts +248 -27
  112. package/src/components/alert/alert.tsx +1 -0
  113. package/src/components/alert/alert.types.ts +1 -0
  114. package/src/components/aside/aside.tsx +1 -0
  115. package/src/components/aspect-ratio/aspect-ratio.tsx +1 -0
  116. package/src/components/aspect-ratio/aspect-ratio.types.ts +1 -0
  117. package/src/components/badge/badge.tsx +1 -0
  118. package/src/components/badge/badge.types.ts +1 -0
  119. package/src/components/block/block.tsx +4 -1
  120. package/src/components/block/block.types.ts +1 -0
  121. package/src/components/brand/brand.tsx +6 -2
  122. package/src/components/brand/brand.types.ts +1 -0
  123. package/src/components/button-group/button-group.tsx +1 -0
  124. package/src/components/button-group/button-group.types.ts +1 -0
  125. package/src/components/card/card.tsx +1 -0
  126. package/src/components/card/card.types.ts +1 -0
  127. package/src/components/catalog.tsx +15 -4
  128. package/src/components/close/close.tsx +1 -0
  129. package/src/components/container/container.tsx +1 -0
  130. package/src/components/empty-state/empty-state.tsx +1 -0
  131. package/src/components/field/field.tsx +1 -0
  132. package/src/components/field/field.types.ts +1 -0
  133. package/src/components/footer/footer.tsx +1 -0
  134. package/src/components/footer/footer.types.ts +1 -0
  135. package/src/components/grid/grid.tsx +1 -0
  136. package/src/components/grid/grid.types.ts +1 -0
  137. package/src/components/header/header.tsx +1 -0
  138. package/src/components/input-group/input-group.tsx +1 -0
  139. package/src/components/input-group/input-group.types.ts +1 -0
  140. package/src/components/jsx-types.ts +16 -0
  141. package/src/components/main/main.tsx +1 -0
  142. package/src/components/nav/nav.tsx +16 -2
  143. package/src/components/nav/nav.types.ts +2 -0
  144. package/src/components/navbar/navbar.tsx +19 -8
  145. package/src/components/overlays/dropdown-content.tsx +1 -0
  146. package/src/components/page/page.tsx +1 -0
  147. package/src/components/page-header/page-header.tsx +1 -0
  148. package/src/components/section/section.tsx +1 -0
  149. package/src/components/separator/separator.tsx +1 -0
  150. package/src/components/separator/separator.types.ts +1 -0
  151. package/src/components/sidebar/index.ts +1 -0
  152. package/src/components/sidebar/sidebar.tsx +45 -20
  153. package/src/components/sidebar/sidebar.types.ts +3 -0
  154. package/src/components/skeleton/skeleton.tsx +1 -0
  155. package/src/components/skeleton/skeleton.types.ts +1 -0
  156. package/src/components/spinner/spinner.tsx +1 -0
  157. package/src/components/stat/stat.tsx +1 -0
  158. package/src/components/stat/stat.types.ts +1 -0
  159. package/src/components/text/text.tsx +1 -0
  160. package/src/components/text/text.types.ts +1 -0
  161. package/src/components/theme/theme.tsx +85 -14
  162. package/src/components/toolbar/toolbar.tsx +1 -0
  163. package/src/components.ts +9 -0
  164. package/src/ssr.ts +102 -0
  165. package/src/themes/default/styles/base/text.css +4 -4
  166. package/src/themes/default/styles/display/coverage.css +3 -1
  167. package/src/themes/default/styles/layout/block.css +4 -0
  168. package/src/themes/default/styles/layout/layout.css +108 -0
  169. package/src/themes/default/styles/shell/navbar.css +4 -1
  170. package/src/themes/default/tokens.css +1 -1
  171. package/src/themes/presets/ginger.css +3 -3
  172. package/templates/theme/styles/base/text.css +4 -4
  173. package/templates/theme/styles/display/progress-circle.css +2 -0
  174. package/templates/theme/styles/forms/input-group.css +2 -1
  175. package/templates/theme/styles/layout/layout.css +108 -0
  176. package/templates/theme/styles/overlays/toast.css +11 -0
  177. package/templates/theme/styles/shell/navbar.css +4 -1
  178. package/templates/theme/styles/shell/sidebar.css +18 -1
  179. package/templates/theme/tokens.css +1 -1
package/src/themes/default/styles/layout/block.css CHANGED
@@ -24,17 +24,21 @@
24
24
  }
25
25
 
26
26
  :where([data-slot="nav-group-label"]) {
27
+ max-inline-size: 100%;
27
28
  margin: 0;
28
29
  color: var(--ak-color-text-muted);
29
30
  font-size: var(--ak-font-size-xs);
30
31
  font-weight: var(--ak-font-weight-medium);
31
32
  line-height: var(--ak-line-height-tight);
33
+ overflow-wrap: anywhere;
32
34
  }
33
35
 
34
36
  :where([data-slot="nav-item"]) {
37
+ max-inline-size: 100%;
35
38
  min-block-size: 2rem;
36
39
  color: var(--ak-color-text-muted);
37
40
  text-decoration: none;
41
+ white-space: normal;
38
42
  transition:
39
43
  background var(--ak-duration-fast) var(--ak-ease-standard),
40
44
  color var(--ak-duration-fast) var(--ak-ease-standard);
package/src/themes/default/styles/layout/layout.css CHANGED
@@ -30,10 +30,12 @@
30
30
  --ak-flex-grow-sm: var(--ak-flex-grow-base);
31
31
  --ak-flex-grow-md: var(--ak-flex-grow-sm);
32
32
  --ak-flex-grow-lg: var(--ak-flex-grow-md);
33
+ --ak-flex-grow-xl: var(--ak-flex-grow-lg);
33
34
  --ak-flex-shrink-base: 1;
34
35
  --ak-flex-shrink-sm: var(--ak-flex-shrink-base);
35
36
  --ak-flex-shrink-md: var(--ak-flex-shrink-sm);
36
37
  --ak-flex-shrink-lg: var(--ak-flex-shrink-md);
38
+ --ak-flex-shrink-xl: var(--ak-flex-shrink-lg);
37
39
  --ak-flex-basis-base: auto;
38
40
  --ak-flex-basis-sm: var(--ak-flex-basis-base);
39
41
  --ak-flex-basis-md: var(--ak-flex-basis-sm);
@@ -42,24 +44,32 @@
42
44
  --ak-min-width-sm: var(--ak-min-width-base);
43
45
  --ak-min-width-md: var(--ak-min-width-sm);
44
46
  --ak-min-width-lg: var(--ak-min-width-md);
47
+ --ak-min-width-xl: var(--ak-min-width-lg);
45
48
  --ak-max-width-base: none;
46
49
  --ak-max-width-sm: var(--ak-max-width-base);
47
50
  --ak-max-width-md: var(--ak-max-width-sm);
48
51
  --ak-max-width-lg: var(--ak-max-width-md);
52
+ --ak-max-width-xl: var(--ak-max-width-lg);
49
53
  --ak-width-base: auto;
50
54
  --ak-width-sm: var(--ak-width-base);
51
55
  --ak-width-md: var(--ak-width-sm);
52
56
  --ak-width-lg: var(--ak-width-md);
57
+ --ak-width-xl: var(--ak-width-lg);
53
58
  --ak-min-height-base: auto;
54
59
  --ak-min-height-sm: var(--ak-min-height-base);
55
60
  --ak-min-height-md: var(--ak-min-height-sm);
56
61
  --ak-min-height-lg: var(--ak-min-height-md);
62
+ --ak-min-height-xl: var(--ak-min-height-lg);
57
63
  --ak-max-height-base: none;
58
64
  --ak-max-height-sm: var(--ak-max-height-base);
65
+ --ak-max-height-md: var(--ak-max-height-sm);
66
+ --ak-max-height-lg: var(--ak-max-height-md);
67
+ --ak-max-height-xl: var(--ak-max-height-lg);
59
68
  --ak-height-base: auto;
60
69
  --ak-height-sm: var(--ak-height-base);
61
70
  --ak-height-md: var(--ak-height-sm);
62
71
  --ak-height-lg: var(--ak-height-md);
72
+ --ak-height-xl: var(--ak-height-lg);
63
73
  --ak-m-base: 0;
64
74
  --ak-m-sm: var(--ak-m-base);
65
75
  --ak-m-md: var(--ak-m-sm);
@@ -114,6 +124,12 @@
114
124
  --ak-border-sm: var(--ak-border-base);
115
125
  --ak-border-md: var(--ak-border-sm);
116
126
  --ak-border-lg: var(--ak-border-md);
127
+ --ak-border-xl: var(--ak-border-lg);
128
+ --ak-border-top-base: var(--ak-border-base);
129
+ --ak-border-top-sm: var(--ak-border-top-base);
130
+ --ak-border-top-md: var(--ak-border-top-sm);
131
+ --ak-border-top-lg: var(--ak-border-top-md);
132
+ --ak-border-top-xl: var(--ak-border-top-lg);
117
133
  --ak-border-bottom-base: var(--ak-border-base);
118
134
  --ak-border-bottom-sm: var(--ak-border-bottom-base);
119
135
  --ak-border-bottom-md: var(--ak-border-bottom-sm);
@@ -122,6 +138,7 @@
122
138
  --ak-border-right-sm: var(--ak-border-right-base);
123
139
  --ak-border-right-md: var(--ak-border-right-sm);
124
140
  --ak-border-right-lg: var(--ak-border-right-md);
141
+ --ak-border-right-xl: var(--ak-border-right-lg);
125
142
  --ak-border-radius-base: 0;
126
143
  --ak-border-radius-sm: var(--ak-border-radius-base);
127
144
  --ak-border-radius-md: var(--ak-border-radius-sm);
@@ -130,10 +147,12 @@
130
147
  --ak-background-sm: var(--ak-background-base);
131
148
  --ak-background-md: var(--ak-background-sm);
132
149
  --ak-background-lg: var(--ak-background-md);
150
+ --ak-background-xl: var(--ak-background-lg);
133
151
  --ak-box-shadow-base: none;
134
152
  --ak-box-shadow-sm: var(--ak-box-shadow-base);
135
153
  --ak-box-shadow-md: var(--ak-box-shadow-sm);
136
154
  --ak-box-shadow-lg: var(--ak-box-shadow-md);
155
+ --ak-box-shadow-xl: var(--ak-box-shadow-lg);
137
156
 
138
157
  box-sizing: border-box;
139
158
  display: var(--ak-display-base, flex);
@@ -168,6 +187,7 @@
168
187
  overflow-x: var(--ak-overflow-x-base, var(--ak-overflow-base, visible));
169
188
  overflow-y: var(--ak-overflow-y-base, var(--ak-overflow-base, visible));
170
189
  border: var(--ak-border-base, 0 solid transparent);
190
+ border-top: var(--ak-border-top-base, var(--ak-border-base, 0 solid transparent));
171
191
  border-bottom: var(--ak-border-bottom-base, var(--ak-border-base, 0 solid transparent));
172
192
  border-right: var(--ak-border-right-base, var(--ak-border-base, 0 solid transparent));
173
193
  border-radius: var(--ak-border-radius-base, 0);
@@ -215,6 +235,10 @@
215
235
  var(--ak-overflow-y-base, var(--ak-overflow-sm, var(--ak-overflow-base, visible)))
216
236
  );
217
237
  border: var(--ak-border-sm, var(--ak-border-base, 0 solid transparent));
238
+ border-top: var(
239
+ --ak-border-top-sm,
240
+ var(--ak-border-top-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
241
+ );
218
242
  border-bottom: var(
219
243
  --ak-border-bottom-sm,
220
244
  var(--ak-border-bottom-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
@@ -251,6 +275,7 @@
251
275
  max-width: var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-base, none)));
252
276
  width: var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto)));
253
277
  min-height: var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto)));
278
+ max-height: var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-base, none)));
254
279
  height: var(--ak-height-md, var(--ak-height-sm, var(--ak-height-base, auto)));
255
280
  margin: var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0)));
256
281
  margin-inline: var(
@@ -274,6 +299,16 @@
274
299
  top: var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto)));
275
300
  z-index: var(--ak-z-index-md, var(--ak-z-index-sm, var(--ak-z-index-base, auto)));
276
301
  border: var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)));
302
+ border-top: var(
303
+ --ak-border-top-md,
304
+ var(
305
+ --ak-border-top-sm,
306
+ var(
307
+ --ak-border-top-base,
308
+ var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
309
+ )
310
+ )
311
+ );
277
312
  border-bottom: var(
278
313
  --ak-border-bottom-md,
279
314
  var(
@@ -411,6 +446,22 @@
411
446
  --ak-border-lg,
412
447
  var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
413
448
  );
449
+ border-top: var(
450
+ --ak-border-top-lg,
451
+ var(
452
+ --ak-border-top-md,
453
+ var(
454
+ --ak-border-top-sm,
455
+ var(
456
+ --ak-border-top-base,
457
+ var(
458
+ --ak-border-lg,
459
+ var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
460
+ )
461
+ )
462
+ )
463
+ )
464
+ );
414
465
  border-bottom: var(
415
466
  --ak-border-bottom-lg,
416
467
  var(
@@ -495,6 +546,27 @@
495
546
  --ak-gap-xl,
496
547
  var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, 0))))
497
548
  );
549
+ flex-grow: var(
550
+ --ak-flex-grow-xl,
551
+ var(
552
+ --ak-flex-grow-lg,
553
+ var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-base, 0)))
554
+ )
555
+ );
556
+ flex-shrink: var(
557
+ --ak-flex-shrink-xl,
558
+ var(
559
+ --ak-flex-shrink-lg,
560
+ var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-base, 1)))
561
+ )
562
+ );
563
+ min-width: var(
564
+ --ak-min-width-xl,
565
+ var(
566
+ --ak-min-width-lg,
567
+ var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, 0)))
568
+ )
569
+ );
498
570
  width: var(
499
571
  --ak-width-xl,
500
572
  var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto))))
@@ -513,6 +585,17 @@
513
585
  var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto)))
514
586
  )
515
587
  );
588
+ max-height: var(
589
+ --ak-max-height-xl,
590
+ var(
591
+ --ak-max-height-lg,
592
+ var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-base, none)))
593
+ )
594
+ );
595
+ height: var(
596
+ --ak-height-xl,
597
+ var(--ak-height-lg, var(--ak-height-md, var(--ak-height-sm, var(--ak-height-base, auto))))
598
+ );
516
599
  margin: var(--ak-m-xl, var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0)))));
517
600
  margin-inline: var(
518
601
  --ak-mx-xl,
@@ -601,6 +684,31 @@
601
684
  var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
602
685
  )
603
686
  );
687
+ border-top: var(
688
+ --ak-border-top-xl,
689
+ var(
690
+ --ak-border-top-lg,
691
+ var(
692
+ --ak-border-top-md,
693
+ var(
694
+ --ak-border-top-sm,
695
+ var(
696
+ --ak-border-top-base,
697
+ var(
698
+ --ak-border-xl,
699
+ var(
700
+ --ak-border-lg,
701
+ var(
702
+ --ak-border-md,
703
+ var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))
704
+ )
705
+ )
706
+ )
707
+ )
708
+ )
709
+ )
710
+ )
711
+ );
604
712
  border-bottom: var(
605
713
  --ak-border-bottom-xl,
606
714
  var(
package/src/themes/default/styles/shell/navbar.css CHANGED
@@ -145,7 +145,10 @@
145
145
  }
146
146
 
147
147
  :where([data-slot="navbar"][data-collapse-at])
148
- :where([data-slot="navbar-collapse"][open] [data-slot="navbar-content"]) {
148
+ :where(
149
+ [data-slot="navbar-collapse"] [data-slot="navbar-content"][data-state="open"],
150
+ [data-slot="navbar-collapse"][open] [data-slot="navbar-content"]
151
+ ) {
149
152
  display: flex;
150
153
  }
151
154
 
package/src/themes/default/tokens.css CHANGED
@@ -174,7 +174,7 @@
174
174
  --ak-dark-color-primary-hover: color-mix(in oklch, var(--ak-dark-color-primary) 90%, transparent);
175
175
  --ak-dark-color-primary-active: color-mix(in oklch, var(--ak-dark-color-primary) 84%, black);
176
176
  --ak-dark-color-primary-soft: oklch(0.269 0 0);
177
- --ak-dark-color-primary-ink: oklch(0.205 0 0);
177
+ --ak-dark-color-primary-ink: oklch(0.985 0 0);
178
178
 
179
179
  --ak-dark-color-text: oklch(0.985 0 0);
180
180
  --ak-dark-color-text-muted: oklch(0.708 0 0);
package/src/themes/presets/ginger.css CHANGED
@@ -1,7 +1,7 @@
1
1
  [data-theme="ginger"] {
2
- --ak-color-primary: #c65f1a;
3
- --ak-color-primary-hover: #a94c12;
4
- --ak-color-primary-active: #8f3d0d;
2
+ --ak-color-primary: #a8440e;
3
+ --ak-color-primary-hover: #8f3708;
4
+ --ak-color-primary-active: #763006;
5
5
  --ak-color-primary-soft: #ffe2c5;
6
6
  --ak-color-primary-ink: #74300c;
7
7
  --ak-color-text: #2e251f;
package/templates/theme/styles/base/text.css CHANGED
@@ -26,19 +26,19 @@
26
26
  }
27
27
 
28
28
  :where([data-slot="text"][data-tone="success"]) {
29
- color: var(--ak-color-success);
29
+ color: var(--ak-color-success-ink);
30
30
  }
31
31
 
32
32
  :where([data-slot="text"][data-tone="warning"]) {
33
- color: var(--ak-color-warning);
33
+ color: var(--ak-color-warning-ink);
34
34
  }
35
35
 
36
36
  :where([data-slot="text"][data-tone="danger"]) {
37
- color: var(--ak-color-danger);
37
+ color: var(--ak-color-danger-ink);
38
38
  }
39
39
 
40
40
  :where([data-slot="text"][data-tone="info"]) {
41
- color: var(--ak-color-info);
41
+ color: var(--ak-color-info-ink);
42
42
  }
43
43
 
44
44
  :where([data-slot="text"][data-weight="normal"]) {
package/templates/theme/styles/display/progress-circle.css CHANGED
@@ -12,6 +12,8 @@
12
12
  }
13
13
 
14
14
  :where([data-slot="progress-circle-indicator"]) {
15
+ display: grid;
16
+ place-items: center;
15
17
  inline-size: 1.9rem;
16
18
  block-size: 1.9rem;
17
19
  border-radius: 999px;
package/templates/theme/styles/forms/input-group.css CHANGED
@@ -1,7 +1,7 @@
1
1
  :where(.input-group, [data-slot="input-group"]) {
2
2
  display: flex;
3
3
  align-items: stretch;
4
- flex-wrap: wrap;
4
+ flex-wrap: nowrap;
5
5
  width: 100%;
6
6
  gap: 0;
7
7
  }
@@ -11,6 +11,7 @@
11
11
  }
12
12
 
13
13
  :where(.input-group[data-attached="false"], [data-slot="input-group"][data-attached="false"]) {
14
+ flex-wrap: wrap;
14
15
  gap: var(--ak-space-xs);
15
16
  }
16
17
 
package/templates/theme/styles/layout/layout.css CHANGED
@@ -30,10 +30,12 @@
30
30
  --ak-flex-grow-sm: var(--ak-flex-grow-base);
31
31
  --ak-flex-grow-md: var(--ak-flex-grow-sm);
32
32
  --ak-flex-grow-lg: var(--ak-flex-grow-md);
33
+ --ak-flex-grow-xl: var(--ak-flex-grow-lg);
33
34
  --ak-flex-shrink-base: 1;
34
35
  --ak-flex-shrink-sm: var(--ak-flex-shrink-base);
35
36
  --ak-flex-shrink-md: var(--ak-flex-shrink-sm);
36
37
  --ak-flex-shrink-lg: var(--ak-flex-shrink-md);
38
+ --ak-flex-shrink-xl: var(--ak-flex-shrink-lg);
37
39
  --ak-flex-basis-base: auto;
38
40
  --ak-flex-basis-sm: var(--ak-flex-basis-base);
39
41
  --ak-flex-basis-md: var(--ak-flex-basis-sm);
@@ -42,24 +44,32 @@
42
44
  --ak-min-width-sm: var(--ak-min-width-base);
43
45
  --ak-min-width-md: var(--ak-min-width-sm);
44
46
  --ak-min-width-lg: var(--ak-min-width-md);
47
+ --ak-min-width-xl: var(--ak-min-width-lg);
45
48
  --ak-max-width-base: none;
46
49
  --ak-max-width-sm: var(--ak-max-width-base);
47
50
  --ak-max-width-md: var(--ak-max-width-sm);
48
51
  --ak-max-width-lg: var(--ak-max-width-md);
52
+ --ak-max-width-xl: var(--ak-max-width-lg);
49
53
  --ak-width-base: auto;
50
54
  --ak-width-sm: var(--ak-width-base);
51
55
  --ak-width-md: var(--ak-width-sm);
52
56
  --ak-width-lg: var(--ak-width-md);
57
+ --ak-width-xl: var(--ak-width-lg);
53
58
  --ak-min-height-base: auto;
54
59
  --ak-min-height-sm: var(--ak-min-height-base);
55
60
  --ak-min-height-md: var(--ak-min-height-sm);
56
61
  --ak-min-height-lg: var(--ak-min-height-md);
62
+ --ak-min-height-xl: var(--ak-min-height-lg);
57
63
  --ak-max-height-base: none;
58
64
  --ak-max-height-sm: var(--ak-max-height-base);
65
+ --ak-max-height-md: var(--ak-max-height-sm);
66
+ --ak-max-height-lg: var(--ak-max-height-md);
67
+ --ak-max-height-xl: var(--ak-max-height-lg);
59
68
  --ak-height-base: auto;
60
69
  --ak-height-sm: var(--ak-height-base);
61
70
  --ak-height-md: var(--ak-height-sm);
62
71
  --ak-height-lg: var(--ak-height-md);
72
+ --ak-height-xl: var(--ak-height-lg);
63
73
  --ak-m-base: 0;
64
74
  --ak-m-sm: var(--ak-m-base);
65
75
  --ak-m-md: var(--ak-m-sm);
@@ -114,6 +124,12 @@
114
124
  --ak-border-sm: var(--ak-border-base);
115
125
  --ak-border-md: var(--ak-border-sm);
116
126
  --ak-border-lg: var(--ak-border-md);
127
+ --ak-border-xl: var(--ak-border-lg);
128
+ --ak-border-top-base: var(--ak-border-base);
129
+ --ak-border-top-sm: var(--ak-border-top-base);
130
+ --ak-border-top-md: var(--ak-border-top-sm);
131
+ --ak-border-top-lg: var(--ak-border-top-md);
132
+ --ak-border-top-xl: var(--ak-border-top-lg);
117
133
  --ak-border-bottom-base: var(--ak-border-base);
118
134
  --ak-border-bottom-sm: var(--ak-border-bottom-base);
119
135
  --ak-border-bottom-md: var(--ak-border-bottom-sm);
@@ -122,6 +138,7 @@
122
138
  --ak-border-right-sm: var(--ak-border-right-base);
123
139
  --ak-border-right-md: var(--ak-border-right-sm);
124
140
  --ak-border-right-lg: var(--ak-border-right-md);
141
+ --ak-border-right-xl: var(--ak-border-right-lg);
125
142
  --ak-border-radius-base: 0;
126
143
  --ak-border-radius-sm: var(--ak-border-radius-base);
127
144
  --ak-border-radius-md: var(--ak-border-radius-sm);
@@ -130,10 +147,12 @@
130
147
  --ak-background-sm: var(--ak-background-base);
131
148
  --ak-background-md: var(--ak-background-sm);
132
149
  --ak-background-lg: var(--ak-background-md);
150
+ --ak-background-xl: var(--ak-background-lg);
133
151
  --ak-box-shadow-base: none;
134
152
  --ak-box-shadow-sm: var(--ak-box-shadow-base);
135
153
  --ak-box-shadow-md: var(--ak-box-shadow-sm);
136
154
  --ak-box-shadow-lg: var(--ak-box-shadow-md);
155
+ --ak-box-shadow-xl: var(--ak-box-shadow-lg);
137
156
 
138
157
  box-sizing: border-box;
139
158
  display: var(--ak-display-base, flex);
@@ -168,6 +187,7 @@
168
187
  overflow-x: var(--ak-overflow-x-base, var(--ak-overflow-base, visible));
169
188
  overflow-y: var(--ak-overflow-y-base, var(--ak-overflow-base, visible));
170
189
  border: var(--ak-border-base, 0 solid transparent);
190
+ border-top: var(--ak-border-top-base, var(--ak-border-base, 0 solid transparent));
171
191
  border-bottom: var(--ak-border-bottom-base, var(--ak-border-base, 0 solid transparent));
172
192
  border-right: var(--ak-border-right-base, var(--ak-border-base, 0 solid transparent));
173
193
  border-radius: var(--ak-border-radius-base, 0);
@@ -215,6 +235,10 @@
215
235
  var(--ak-overflow-y-base, var(--ak-overflow-sm, var(--ak-overflow-base, visible)))
216
236
  );
217
237
  border: var(--ak-border-sm, var(--ak-border-base, 0 solid transparent));
238
+ border-top: var(
239
+ --ak-border-top-sm,
240
+ var(--ak-border-top-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
241
+ );
218
242
  border-bottom: var(
219
243
  --ak-border-bottom-sm,
220
244
  var(--ak-border-bottom-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
@@ -251,6 +275,7 @@
251
275
  max-width: var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-base, none)));
252
276
  width: var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto)));
253
277
  min-height: var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto)));
278
+ max-height: var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-base, none)));
254
279
  height: var(--ak-height-md, var(--ak-height-sm, var(--ak-height-base, auto)));
255
280
  margin: var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0)));
256
281
  margin-inline: var(
@@ -274,6 +299,16 @@
274
299
  top: var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto)));
275
300
  z-index: var(--ak-z-index-md, var(--ak-z-index-sm, var(--ak-z-index-base, auto)));
276
301
  border: var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)));
302
+ border-top: var(
303
+ --ak-border-top-md,
304
+ var(
305
+ --ak-border-top-sm,
306
+ var(
307
+ --ak-border-top-base,
308
+ var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
309
+ )
310
+ )
311
+ );
277
312
  border-bottom: var(
278
313
  --ak-border-bottom-md,
279
314
  var(
@@ -411,6 +446,22 @@
411
446
  --ak-border-lg,
412
447
  var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
413
448
  );
449
+ border-top: var(
450
+ --ak-border-top-lg,
451
+ var(
452
+ --ak-border-top-md,
453
+ var(
454
+ --ak-border-top-sm,
455
+ var(
456
+ --ak-border-top-base,
457
+ var(
458
+ --ak-border-lg,
459
+ var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
460
+ )
461
+ )
462
+ )
463
+ )
464
+ );
414
465
  border-bottom: var(
415
466
  --ak-border-bottom-lg,
416
467
  var(
@@ -495,6 +546,27 @@
495
546
  --ak-gap-xl,
496
547
  var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, 0))))
497
548
  );
549
+ flex-grow: var(
550
+ --ak-flex-grow-xl,
551
+ var(
552
+ --ak-flex-grow-lg,
553
+ var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-base, 0)))
554
+ )
555
+ );
556
+ flex-shrink: var(
557
+ --ak-flex-shrink-xl,
558
+ var(
559
+ --ak-flex-shrink-lg,
560
+ var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-base, 1)))
561
+ )
562
+ );
563
+ min-width: var(
564
+ --ak-min-width-xl,
565
+ var(
566
+ --ak-min-width-lg,
567
+ var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, 0)))
568
+ )
569
+ );
498
570
  width: var(
499
571
  --ak-width-xl,
500
572
  var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto))))
@@ -513,6 +585,17 @@
513
585
  var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto)))
514
586
  )
515
587
  );
588
+ max-height: var(
589
+ --ak-max-height-xl,
590
+ var(
591
+ --ak-max-height-lg,
592
+ var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-base, none)))
593
+ )
594
+ );
595
+ height: var(
596
+ --ak-height-xl,
597
+ var(--ak-height-lg, var(--ak-height-md, var(--ak-height-sm, var(--ak-height-base, auto))))
598
+ );
516
599
  margin: var(--ak-m-xl, var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0)))));
517
600
  margin-inline: var(
518
601
  --ak-mx-xl,
@@ -601,6 +684,31 @@
601
684
  var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
602
685
  )
603
686
  );
687
+ border-top: var(
688
+ --ak-border-top-xl,
689
+ var(
690
+ --ak-border-top-lg,
691
+ var(
692
+ --ak-border-top-md,
693
+ var(
694
+ --ak-border-top-sm,
695
+ var(
696
+ --ak-border-top-base,
697
+ var(
698
+ --ak-border-xl,
699
+ var(
700
+ --ak-border-lg,
701
+ var(
702
+ --ak-border-md,
703
+ var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))
704
+ )
705
+ )
706
+ )
707
+ )
708
+ )
709
+ )
710
+ )
711
+ );
604
712
  border-bottom: var(
605
713
  --ak-border-bottom-xl,
606
714
  var(
package/templates/theme/styles/overlays/toast.css CHANGED
@@ -133,6 +133,17 @@
133
133
  box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
134
134
  }
135
135
 
136
+ :where([data-slot="toast-action"]) {
137
+ grid-column: 1;
138
+ grid-row: 3;
139
+ justify-self: start;
140
+ margin-block-start: var(--ak-space-xs);
141
+ }
142
+
143
+ :where([data-slot="toast"]:has([data-slot="toast-icon"]) [data-slot="toast-action"]) {
144
+ grid-column: 2;
145
+ }
146
+
136
147
  :where([data-slot="toast-action"]:hover),
137
148
  :where([data-slot="toast-close"]:hover) {
138
149
  background: var(--ak-color-primary-hover);
package/templates/theme/styles/shell/navbar.css CHANGED
@@ -145,7 +145,10 @@
145
145
  }
146
146
 
147
147
  :where([data-slot="navbar"][data-collapse-at])
148
- :where([data-slot="navbar-collapse"][open] [data-slot="navbar-content"]) {
148
+ :where(
149
+ [data-slot="navbar-collapse"] [data-slot="navbar-content"][data-state="open"],
150
+ [data-slot="navbar-collapse"][open] [data-slot="navbar-content"]
151
+ ) {
149
152
  display: flex;
150
153
  }
151
154
 
package/templates/theme/styles/shell/sidebar.css CHANGED
@@ -41,11 +41,26 @@
41
41
  }
42
42
 
43
43
  :where([data-slot="sidebar-header"], [data-slot="sidebar-footer"]) {
44
- display: grid;
44
+ display: flex;
45
+ flex-direction: column;
46
+ align-items: stretch;
45
47
  gap: var(--ak-space-xs);
48
+ }
49
+
50
+ :where([data-slot="sidebar-header"]) {
46
51
  padding: var(--ak-space-sm);
47
52
  }
48
53
 
54
+ :where([data-slot="sidebar-footer"] [data-slot="sidebar-menu"]),
55
+ :where([data-slot="sidebar-footer"] [data-slot="sidebar-menu-item"]),
56
+ :where([data-slot="sidebar-footer"] [data-slot="block"]) {
57
+ inline-size: 100%;
58
+ }
59
+
60
+ :where([data-slot="sidebar-footer"] [data-slot="sidebar-menu-button"]) {
61
+ min-inline-size: var(--ak-density-control-height-sm);
62
+ }
63
+
49
64
  :where([data-slot="sidebar-content"]) {
50
65
  display: flex;
51
66
  flex: 1 1 auto;
@@ -79,6 +94,7 @@
79
94
  :where([data-slot="sidebar-menu"]) {
80
95
  display: grid;
81
96
  gap: var(--ak-space-xs);
97
+ inline-size: 100%;
82
98
  margin: 0;
83
99
  padding: 0;
84
100
  list-style: none;
@@ -86,6 +102,7 @@
86
102
 
87
103
  :where([data-slot="sidebar-menu-item"]) {
88
104
  position: relative;
105
+ inline-size: 100%;
89
106
  min-inline-size: 0;
90
107
  }
91
108
 
package/templates/theme/tokens.css CHANGED
@@ -174,7 +174,7 @@
174
174
  --ak-dark-color-primary-hover: color-mix(in oklch, var(--ak-dark-color-primary) 90%, transparent);
175
175
  --ak-dark-color-primary-active: color-mix(in oklch, var(--ak-dark-color-primary) 84%, black);
176
176
  --ak-dark-color-primary-soft: oklch(0.269 0 0);
177
- --ak-dark-color-primary-ink: oklch(0.205 0 0);
177
+ --ak-dark-color-primary-ink: oklch(0.985 0 0);
178
178
 
179
179
  --ak-dark-color-text: oklch(0.985 0 0);
180
180
  --ak-dark-color-text-muted: oklch(0.708 0 0);