@rokkit/themes 1.1.16 → 1.1.18

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 (297) hide show
  1. package/build.mjs +29 -1
  2. package/dist/base/alert-list.css +91 -0
  3. package/dist/base/avatar.css +82 -0
  4. package/dist/base/badge.css +41 -0
  5. package/dist/base/breadcrumbs.css +47 -0
  6. package/dist/base/button.css +254 -0
  7. package/dist/base/card.css +39 -0
  8. package/dist/base/carousel.css +128 -0
  9. package/dist/base/chart.css +94 -0
  10. package/dist/base/code-block.css +76 -0
  11. package/dist/base/command-palette.css +35 -0
  12. package/dist/base/connector.css +92 -0
  13. package/dist/base/density.css +60 -0
  14. package/dist/base/display.css +99 -0
  15. package/dist/base/divider.css +49 -0
  16. package/dist/base/dropdown.css +167 -0
  17. package/dist/base/floating-action.css +388 -0
  18. package/dist/base/floating-navigation.css +405 -0
  19. package/dist/base/frame.css +36 -0
  20. package/dist/base/gradient-border.css +32 -0
  21. package/dist/base/graph-paper.css +83 -0
  22. package/dist/base/grid.css +93 -0
  23. package/dist/base/input.css +342 -0
  24. package/dist/base/item.css +91 -0
  25. package/dist/base/layout.css +17 -0
  26. package/dist/base/list.css +188 -0
  27. package/dist/base/menu.css +277 -0
  28. package/dist/base/message.css +62 -0
  29. package/dist/base/nav-content.css +48 -0
  30. package/dist/base/palette-manager.css +244 -0
  31. package/dist/base/pill.css +61 -0
  32. package/dist/base/progress.css +34 -0
  33. package/dist/base/radius.css +41 -0
  34. package/dist/base/range.css +122 -0
  35. package/dist/base/rating.css +42 -0
  36. package/dist/base/responsive-grid.css +8 -0
  37. package/dist/base/reveal.css +37 -0
  38. package/dist/base/search-filter.css +132 -0
  39. package/dist/base/select.css +413 -0
  40. package/dist/base/shine.css +14 -0
  41. package/dist/base/stack.css +76 -0
  42. package/dist/base/status-list.css +19 -0
  43. package/dist/base/step-indicator.css +74 -0
  44. package/dist/base/stepper.css +154 -0
  45. package/dist/base/swatch.css +85 -0
  46. package/dist/base/switch.css +168 -0
  47. package/dist/base/table.css +313 -0
  48. package/dist/base/tabs.css +184 -0
  49. package/dist/base/tilt.css +14 -0
  50. package/dist/base/timeline.css +84 -0
  51. package/dist/base/toc.css +50 -0
  52. package/dist/base/toggle.css +190 -0
  53. package/dist/base/toolbar.css +341 -0
  54. package/dist/base/tooltip.css +64 -0
  55. package/dist/base/tree.css +235 -0
  56. package/dist/base/typography.css +50 -0
  57. package/dist/base/upload-progress.css +155 -0
  58. package/dist/base/upload-target.css +77 -0
  59. package/dist/base.css +20 -6
  60. package/dist/frosted/button.css +228 -0
  61. package/dist/frosted/card.css +128 -0
  62. package/dist/frosted/chart.css +38 -0
  63. package/dist/frosted/code-block.css +33 -0
  64. package/dist/frosted/command-palette.css +43 -0
  65. package/dist/frosted/dropdown.css +64 -0
  66. package/dist/frosted/floating-action.css +66 -0
  67. package/dist/frosted/floating-navigation.css +78 -0
  68. package/dist/frosted/frame.css +17 -0
  69. package/dist/frosted/grid.css +26 -0
  70. package/dist/frosted/input.css +135 -0
  71. package/dist/frosted/list.css +153 -0
  72. package/dist/frosted/menu.css +107 -0
  73. package/dist/frosted/message.css +39 -0
  74. package/dist/frosted/palette-manager.css +97 -0
  75. package/dist/frosted/pill.css +17 -0
  76. package/dist/frosted/progress.css +13 -0
  77. package/dist/frosted/range.css +64 -0
  78. package/dist/frosted/rating.css +13 -0
  79. package/dist/frosted/search-filter.css +53 -0
  80. package/dist/frosted/select.css +192 -0
  81. package/dist/frosted/status-list.css +67 -0
  82. package/dist/frosted/step-indicator.css +43 -0
  83. package/dist/frosted/swatch.css +21 -0
  84. package/dist/frosted/switch.css +43 -0
  85. package/dist/frosted/table.css +122 -0
  86. package/dist/frosted/tabs.css +61 -0
  87. package/dist/frosted/timeline.css +46 -0
  88. package/dist/frosted/toc.css +19 -0
  89. package/dist/frosted/toggle.css +77 -0
  90. package/dist/frosted/toolbar.css +92 -0
  91. package/dist/frosted/tooltip.css +7 -0
  92. package/dist/frosted/tree.css +126 -0
  93. package/dist/frosted.css +72 -53
  94. package/dist/index.css +446 -307
  95. package/dist/material/button.css +182 -0
  96. package/dist/material/card.css +99 -0
  97. package/dist/material/chart.css +38 -0
  98. package/dist/material/code-block.css +33 -0
  99. package/dist/material/command-palette.css +37 -0
  100. package/dist/material/dropdown.css +50 -0
  101. package/dist/material/floating-action.css +64 -0
  102. package/dist/material/floating-navigation.css +74 -0
  103. package/dist/material/frame.css +17 -0
  104. package/dist/material/grid.css +26 -0
  105. package/dist/material/input.css +164 -0
  106. package/dist/material/list.css +140 -0
  107. package/dist/material/menu.css +92 -0
  108. package/dist/material/message.css +35 -0
  109. package/dist/material/palette-manager.css +97 -0
  110. package/dist/material/pill.css +17 -0
  111. package/dist/material/progress.css +13 -0
  112. package/dist/material/range.css +62 -0
  113. package/dist/material/rating.css +13 -0
  114. package/dist/material/search-filter.css +49 -0
  115. package/dist/material/select.css +177 -0
  116. package/dist/material/status-list.css +66 -0
  117. package/dist/material/step-indicator.css +40 -0
  118. package/dist/material/swatch.css +21 -0
  119. package/dist/material/switch.css +28 -0
  120. package/dist/material/table.css +120 -0
  121. package/dist/material/tabs.css +89 -0
  122. package/dist/material/timeline.css +46 -0
  123. package/dist/material/toc.css +18 -0
  124. package/dist/material/toggle.css +75 -0
  125. package/dist/material/toolbar.css +85 -0
  126. package/dist/material/tooltip.css +7 -0
  127. package/dist/material/tree.css +145 -0
  128. package/dist/material.css +68 -50
  129. package/dist/minimal/button.css +180 -0
  130. package/dist/minimal/card.css +99 -0
  131. package/dist/minimal/chart.css +38 -0
  132. package/dist/minimal/code-block.css +33 -0
  133. package/dist/minimal/command-palette.css +37 -0
  134. package/dist/minimal/dropdown.css +50 -0
  135. package/dist/minimal/floating-action.css +63 -0
  136. package/dist/minimal/floating-navigation.css +70 -0
  137. package/dist/minimal/frame.css +17 -0
  138. package/dist/minimal/grid.css +26 -0
  139. package/dist/minimal/input.css +171 -0
  140. package/dist/minimal/list.css +168 -0
  141. package/dist/minimal/menu.css +88 -0
  142. package/dist/minimal/message.css +35 -0
  143. package/dist/minimal/palette-manager.css +97 -0
  144. package/dist/minimal/pill.css +17 -0
  145. package/dist/minimal/progress.css +13 -0
  146. package/dist/minimal/range.css +61 -0
  147. package/dist/minimal/rating.css +13 -0
  148. package/dist/minimal/search-filter.css +49 -0
  149. package/dist/minimal/select.css +158 -0
  150. package/dist/minimal/status-list.css +66 -0
  151. package/dist/minimal/step-indicator.css +40 -0
  152. package/dist/minimal/swatch.css +21 -0
  153. package/dist/minimal/switch.css +32 -0
  154. package/dist/minimal/table.css +118 -0
  155. package/dist/minimal/tabs.css +151 -0
  156. package/dist/minimal/timeline.css +45 -0
  157. package/dist/minimal/toc.css +18 -0
  158. package/dist/minimal/toggle.css +74 -0
  159. package/dist/minimal/toolbar.css +85 -0
  160. package/dist/minimal/tooltip.css +7 -0
  161. package/dist/minimal/tree.css +152 -0
  162. package/dist/minimal.css +73 -58
  163. package/dist/rokkit/avatar.css +29 -0
  164. package/dist/rokkit/badge.css +29 -0
  165. package/dist/rokkit/button.css +308 -0
  166. package/dist/rokkit/card.css +102 -0
  167. package/dist/rokkit/chart.css +38 -0
  168. package/dist/rokkit/code-block.css +33 -0
  169. package/dist/rokkit/command-palette.css +37 -0
  170. package/dist/rokkit/connector.css +11 -0
  171. package/dist/rokkit/divider.css +26 -0
  172. package/dist/rokkit/dropdown.css +70 -0
  173. package/dist/rokkit/floating-action.css +65 -0
  174. package/dist/rokkit/floating-navigation.css +83 -0
  175. package/dist/rokkit/frame.css +17 -0
  176. package/dist/rokkit/grid.css +46 -0
  177. package/dist/rokkit/input.css +134 -0
  178. package/dist/rokkit/list.css +202 -0
  179. package/dist/rokkit/menu.css +93 -0
  180. package/dist/rokkit/message.css +44 -0
  181. package/dist/rokkit/palette-manager.css +97 -0
  182. package/dist/rokkit/pill.css +17 -0
  183. package/dist/rokkit/progress.css +13 -0
  184. package/dist/rokkit/range.css +62 -0
  185. package/dist/rokkit/rating.css +13 -0
  186. package/dist/rokkit/search-filter.css +49 -0
  187. package/dist/rokkit/select.css +201 -0
  188. package/dist/rokkit/status-list.css +68 -0
  189. package/dist/rokkit/step-indicator.css +40 -0
  190. package/dist/rokkit/swatch.css +20 -0
  191. package/dist/rokkit/switch.css +29 -0
  192. package/dist/rokkit/table.css +118 -0
  193. package/dist/rokkit/tabs.css +114 -0
  194. package/dist/rokkit/timeline.css +46 -0
  195. package/dist/rokkit/toc.css +18 -0
  196. package/dist/rokkit/toggle.css +85 -0
  197. package/dist/rokkit/toolbar.css +90 -0
  198. package/dist/rokkit/tooltip.css +7 -0
  199. package/dist/rokkit/tree.css +160 -0
  200. package/dist/rokkit/upload-progress.css +102 -0
  201. package/dist/rokkit/upload-target.css +50 -0
  202. package/dist/rokkit.css +89 -66
  203. package/dist/zen-sumi/button.css +184 -0
  204. package/dist/zen-sumi/card.css +104 -0
  205. package/dist/zen-sumi/chart.css +41 -0
  206. package/dist/zen-sumi/code-block.css +35 -0
  207. package/dist/zen-sumi/command-palette.css +39 -0
  208. package/dist/zen-sumi/divider.css +29 -0
  209. package/dist/zen-sumi/dropdown.css +53 -0
  210. package/dist/zen-sumi/floating-action.css +68 -0
  211. package/dist/zen-sumi/floating-navigation.css +74 -0
  212. package/dist/zen-sumi/frame.css +20 -0
  213. package/dist/zen-sumi/grid.css +26 -0
  214. package/dist/zen-sumi/input.css +171 -0
  215. package/dist/zen-sumi/list.css +128 -0
  216. package/dist/zen-sumi/menu.css +91 -0
  217. package/dist/zen-sumi/message.css +37 -0
  218. package/dist/zen-sumi/palette-manager.css +97 -0
  219. package/dist/zen-sumi/pill.css +17 -0
  220. package/dist/zen-sumi/progress.css +13 -0
  221. package/dist/zen-sumi/range.css +62 -0
  222. package/dist/zen-sumi/rating.css +13 -0
  223. package/dist/zen-sumi/search-filter.css +49 -0
  224. package/dist/zen-sumi/select.css +160 -0
  225. package/dist/zen-sumi/status-list.css +66 -0
  226. package/dist/zen-sumi/step-indicator.css +40 -0
  227. package/dist/zen-sumi/swatch.css +21 -0
  228. package/dist/zen-sumi/switch.css +34 -0
  229. package/dist/zen-sumi/table.css +128 -0
  230. package/dist/zen-sumi/tabs.css +78 -0
  231. package/dist/zen-sumi/timeline.css +46 -0
  232. package/dist/zen-sumi/toc.css +22 -0
  233. package/dist/zen-sumi/toggle.css +86 -0
  234. package/dist/zen-sumi/toolbar.css +86 -0
  235. package/dist/zen-sumi/tooltip.css +7 -0
  236. package/dist/zen-sumi/tree.css +148 -0
  237. package/dist/zen-sumi.css +124 -74
  238. package/package.json +15 -15
  239. package/src/base/stepper.css +11 -5
  240. package/src/base/table.css +4 -1
  241. package/src/base/toggle.css +5 -0
  242. package/src/frosted/button.css +9 -1
  243. package/src/frosted/dropdown.css +2 -2
  244. package/src/frosted/list.css +5 -5
  245. package/src/frosted/menu.css +5 -5
  246. package/src/frosted/message.css +4 -4
  247. package/src/frosted/select.css +8 -8
  248. package/src/frosted/table.css +5 -5
  249. package/src/frosted/tabs.css +2 -2
  250. package/src/frosted/timeline.css +1 -1
  251. package/src/frosted/toggle.css +4 -4
  252. package/src/frosted/tree.css +15 -4
  253. package/src/material/button.css +8 -4
  254. package/src/material/dropdown.css +2 -2
  255. package/src/material/list.css +5 -5
  256. package/src/material/menu.css +5 -5
  257. package/src/material/select.css +8 -8
  258. package/src/material/table.css +5 -5
  259. package/src/material/tabs.css +4 -3
  260. package/src/material/timeline.css +4 -3
  261. package/src/material/toggle.css +6 -5
  262. package/src/material/tree.css +15 -4
  263. package/src/minimal/button.css +8 -4
  264. package/src/minimal/dropdown.css +2 -2
  265. package/src/minimal/list.css +8 -8
  266. package/src/minimal/menu.css +6 -6
  267. package/src/minimal/select.css +8 -8
  268. package/src/minimal/table.css +5 -5
  269. package/src/minimal/tabs.css +2 -2
  270. package/src/minimal/timeline.css +3 -3
  271. package/src/minimal/toggle.css +4 -4
  272. package/src/minimal/tree.css +17 -6
  273. package/src/rokkit/avatar.css +1 -1
  274. package/src/rokkit/badge.css +1 -1
  275. package/src/rokkit/button.css +1 -1
  276. package/src/rokkit/divider.css +1 -1
  277. package/src/rokkit/dropdown.css +2 -2
  278. package/src/rokkit/list.css +5 -5
  279. package/src/rokkit/menu.css +5 -5
  280. package/src/rokkit/select.css +24 -13
  281. package/src/rokkit/table.css +5 -5
  282. package/src/rokkit/tabs.css +1 -1
  283. package/src/rokkit/timeline.css +4 -3
  284. package/src/rokkit/toggle.css +4 -4
  285. package/src/rokkit/tree.css +17 -6
  286. package/src/zen-sumi/button.css +16 -8
  287. package/src/zen-sumi/divider.css +29 -0
  288. package/src/zen-sumi/dropdown.css +4 -4
  289. package/src/zen-sumi/index.css +1 -0
  290. package/src/zen-sumi/list.css +9 -9
  291. package/src/zen-sumi/menu.css +9 -9
  292. package/src/zen-sumi/select.css +11 -11
  293. package/src/zen-sumi/table.css +6 -6
  294. package/src/zen-sumi/tabs.css +3 -3
  295. package/src/zen-sumi/timeline.css +3 -3
  296. package/src/zen-sumi/toggle.css +6 -5
  297. package/src/zen-sumi/tree.css +19 -8
package/src/material/table.css CHANGED
@@ -9,7 +9,7 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='material'] [data-table-header] th {
12
- @apply text-ink-soft bg-paper-mute border-paper-edge border-b font-medium;
12
+ @apply text-ink-mute bg-paper-mute border-paper-edge border-b font-medium;
13
13
  }
14
14
 
15
15
  [data-style='material'] [data-table-header-cell][data-sortable='true']:hover {
@@ -22,7 +22,7 @@
22
22
  }
23
23
 
24
24
  [data-style='material'] [data-table-sort-icon] {
25
- @apply text-ink-soft;
25
+ @apply text-ink-mute;
26
26
  }
27
27
 
28
28
  [data-style='material']
@@ -85,7 +85,7 @@
85
85
  ============================================================================= */
86
86
 
87
87
  [data-style='material'] [data-table-empty] {
88
- @apply text-ink-soft;
88
+ @apply text-ink-mute;
89
89
  }
90
90
 
91
91
  /* =============================================================================
@@ -93,7 +93,7 @@
93
93
  ============================================================================= */
94
94
 
95
95
  [data-style='material'] [data-table-cell] [data-cell-icon] {
96
- @apply text-ink-soft;
96
+ @apply text-ink-mute;
97
97
  }
98
98
 
99
99
  [data-style='material'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -110,7 +110,7 @@
110
110
  }
111
111
 
112
112
  [data-style='material'] [data-table-responsive] [data-table-cell]::before {
113
- @apply text-ink-soft;
113
+ @apply text-ink-mute;
114
114
  }
115
115
 
116
116
  /* Disable striped alternating bg in card layout */
package/src/material/tabs.css CHANGED
@@ -21,7 +21,7 @@
21
21
  ============================================================================= */
22
22
 
23
23
  [data-style='material'] [data-tabs-trigger] {
24
- @apply text-ink-soft rounded-t-lg bg-transparent;
24
+ @apply text-ink-mute rounded-t-lg bg-transparent;
25
25
  }
26
26
 
27
27
  [data-style='material'] [data-tabs][data-position='after'] [data-tabs-trigger] {
@@ -34,7 +34,8 @@
34
34
 
35
35
  /* Selected state */
36
36
  [data-style='material'] [data-tabs-trigger][data-selected] {
37
- @apply bg-primary text-on-primary shadow-md;
37
+ @apply text-on-primary shadow-md;
38
+ background-color: var(--primary);
38
39
  }
39
40
 
40
41
  /* Reset rokkit gradients bleeding in from body[data-style='rokkit'] ancestor */
@@ -68,7 +69,7 @@
68
69
  ============================================================================= */
69
70
 
70
71
  [data-style='material'] [data-tabs-trigger] [data-tabs-icon] {
71
- @apply text-ink-soft;
72
+ @apply text-ink-mute;
72
73
  }
73
74
 
74
75
  [data-style='material'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
package/src/material/timeline.css CHANGED
@@ -13,11 +13,12 @@
13
13
  }
14
14
 
15
15
  [data-style='material'] [data-timeline-item][data-completed] [data-timeline-circle] {
16
- @apply bg-primary border-primary text-on-primary shadow-sm;
16
+ @apply border-primary text-on-primary shadow-sm;
17
+ background-color: var(--primary);
17
18
  }
18
19
 
19
20
  [data-style='material'] [data-timeline-item][data-active] [data-timeline-circle] {
20
- @apply border-primary text-primary ring-3 ring-primary/25;
21
+ @apply border-primary text-ink ring-3 ring-primary/25;
21
22
  }
22
23
 
23
24
  /* =============================================================================
@@ -29,7 +30,7 @@
29
30
  }
30
31
 
31
32
  [data-style='material'] [data-timeline-item][data-completed] [data-timeline-connector] {
32
- @apply bg-primary;
33
+ background-color: var(--primary);
33
34
  }
34
35
 
35
36
  /* =============================================================================
package/src/material/toggle.css CHANGED
@@ -17,7 +17,7 @@
17
17
  ============================================================================= */
18
18
 
19
19
  [data-style='material'] [data-toggle-option] {
20
- @apply text-ink-soft rounded-full;
20
+ @apply text-ink-mute rounded-full;
21
21
  }
22
22
 
23
23
  [data-style='material'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -27,7 +27,8 @@
27
27
 
28
28
  /* Selected state */
29
29
  [data-style='material'] [data-toggle-option][data-selected='true'] {
30
- @apply bg-primary bg-none text-on-primary shadow-md;
30
+ @apply bg-none text-on-primary shadow-md;
31
+ background-color: var(--primary);
31
32
  }
32
33
 
33
34
  /* =============================================================================
@@ -35,7 +36,7 @@
35
36
  ============================================================================= */
36
37
 
37
38
  [data-style='material'] [data-toggle-option] [data-toggle-icon] {
38
- @apply text-ink-soft;
39
+ @apply text-ink-mute;
39
40
  }
40
41
 
41
42
  [data-style='material'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -55,7 +56,7 @@
55
56
  ============================================================================= */
56
57
 
57
58
  [data-style='material'] [data-toggle][data-toggle-variant='button'] {
58
- @apply border-transparent bg-transparent text-ink-soft;
59
+ @apply border-transparent bg-transparent text-ink-mute;
59
60
  background-image: none;
60
61
  }
61
62
 
@@ -65,7 +66,7 @@
65
66
  }
66
67
 
67
68
  [data-style='material'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
68
- @apply text-ink-soft;
69
+ @apply text-ink-mute;
69
70
  }
70
71
 
71
72
  [data-style='material'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
package/src/material/tree.css CHANGED
@@ -4,6 +4,17 @@
4
4
  * Material Design inspired with subtle elevation.
5
5
  */
6
6
 
7
+ /* =============================================================================
8
+ Connector Lines — hairline tone (mode-aware), not currentColor (which
9
+ renders white in dark mode and greyish in light).
10
+ ============================================================================= */
11
+
12
+ [data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-v],
13
+ [data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-h],
14
+ [data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
15
+ @apply border-paper-edge;
16
+ }
17
+
7
18
  /* =============================================================================
8
19
  Tree Container
9
20
  ============================================================================= */
@@ -17,7 +28,7 @@
17
28
  ============================================================================= */
18
29
 
19
30
  [data-style='material'] [data-tree-toggle-btn] {
20
- @apply text-ink-soft rounded-full;
31
+ @apply text-ink-mute rounded-full;
21
32
  }
22
33
 
23
34
  [data-style='material'] [data-tree-toggle-btn]:hover {
@@ -73,7 +84,7 @@
73
84
  ============================================================================= */
74
85
 
75
86
  [data-style='material'] [data-tree-item-content] [data-item-icon] {
76
- @apply text-ink-soft;
87
+ @apply text-ink-mute;
77
88
  }
78
89
 
79
90
  [data-style='material'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
@@ -85,7 +96,7 @@
85
96
  }
86
97
 
87
98
  [data-style='material'] [data-tree-item-content] [data-item-description] {
88
- @apply text-ink-soft;
99
+ @apply text-ink-mute;
89
100
  }
90
101
 
91
102
  [data-style='material'] [data-tree-item-content][data-active='true'] [data-item-description] {
@@ -93,7 +104,7 @@
93
104
  }
94
105
 
95
106
  [data-style='material'] [data-tree-item-content] [data-item-badge] {
96
- @apply text-ink-soft bg-paper-mute rounded-full bg-none;
107
+ @apply text-ink-mute bg-paper-mute rounded-full bg-none;
97
108
  }
98
109
 
99
110
  [data-style='material'] [data-tree-item-content][data-active='true'] [data-item-badge] {
package/src/minimal/button.css CHANGED
@@ -17,22 +17,26 @@
17
17
 
18
18
  [data-style='minimal'] [data-button][data-style='default'][data-variant='primary'],
19
19
  [data-style='minimal'] [data-button]:not([data-style])[data-variant='primary'] {
20
- @apply bg-primary text-on-primary border-transparent bg-none;
20
+ @apply text-on-primary border-transparent bg-none;
21
+ background-color: var(--primary);
21
22
  }
22
23
 
23
24
  [data-style='minimal'] [data-button][data-style='default'][data-variant='secondary'],
24
25
  [data-style='minimal'] [data-button]:not([data-style])[data-variant='secondary'] {
25
- @apply bg-accent text-on-primary border-transparent bg-none;
26
+ @apply text-on-primary border-transparent bg-none;
27
+ background-color: var(--accent);
26
28
  }
27
29
 
28
30
  [data-style='minimal'] [data-button][data-style='default'][data-variant='accent'],
29
31
  [data-style='minimal'] [data-button]:not([data-style])[data-variant='accent'] {
30
- @apply bg-accent text-on-accent border-transparent bg-none;
32
+ @apply text-on-accent border-transparent bg-none;
33
+ background-color: var(--accent);
31
34
  }
32
35
 
33
36
  [data-style='minimal'] [data-button][data-style='default'][data-variant='danger'],
34
37
  [data-style='minimal'] [data-button]:not([data-style])[data-variant='danger'] {
35
- @apply bg-danger text-on-danger border-transparent bg-none;
38
+ @apply text-on-danger border-transparent bg-none;
39
+ background-color: var(--danger);
36
40
  }
37
41
 
38
42
  /* =============================================================================
package/src/minimal/dropdown.css CHANGED
@@ -21,11 +21,11 @@
21
21
  }
22
22
 
23
23
  [data-style='minimal'] [data-dropdown-trigger] [data-dropdown-icon] {
24
- @apply text-ink-soft;
24
+ @apply text-ink-mute;
25
25
  }
26
26
 
27
27
  [data-style='minimal'] [data-dropdown-trigger] [data-dropdown-arrow] {
28
- @apply text-paper-edge;
28
+ @apply text-ink-mute;
29
29
  }
30
30
 
31
31
  [data-style='minimal'] [data-dropdown-panel] {
package/src/minimal/list.css CHANGED
@@ -43,7 +43,7 @@
43
43
 
44
44
  [data-style='minimal'] [data-list] a[data-list-item],
45
45
  [data-style='minimal'] [data-list] button[data-list-item] {
46
- @apply text-ink-soft;
46
+ @apply text-ink-mute;
47
47
  }
48
48
 
49
49
  /* Hover and focus — text brightening only, no border */
@@ -81,12 +81,12 @@
81
81
  ============================================================================= */
82
82
 
83
83
  [data-style='minimal'] [data-list] [data-list-item] [data-item-icon] {
84
- @apply text-ink-soft;
84
+ @apply text-ink-mute;
85
85
  }
86
86
 
87
87
  [data-style='minimal'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
88
88
  [data-style='minimal'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon] {
89
- @apply text-ink-soft;
89
+ @apply text-ink-mute;
90
90
  }
91
91
 
92
92
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
@@ -95,12 +95,12 @@
95
95
 
96
96
  /* Literal / kanji icons */
97
97
  [data-style='minimal'] [data-list] [data-list-item] [data-item-icon-literal] {
98
- @apply text-ink-soft;
98
+ @apply text-ink-mute;
99
99
  }
100
100
 
101
101
  [data-style='minimal'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
102
102
  [data-style='minimal'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon-literal] {
103
- @apply text-ink-soft;
103
+ @apply text-ink-mute;
104
104
  }
105
105
 
106
106
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-icon-literal] {
@@ -108,7 +108,7 @@
108
108
  }
109
109
 
110
110
  [data-style='minimal'] [data-list] [data-list-item] [data-item-description] {
111
- @apply text-ink-soft;
111
+ @apply text-ink-mute;
112
112
  }
113
113
 
114
114
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
@@ -116,7 +116,7 @@
116
116
  }
117
117
 
118
118
  [data-style='minimal'] [data-list] [data-list-item] [data-item-badge] {
119
- @apply text-ink-soft border-paper-edge border bg-transparent bg-none;
119
+ @apply text-ink-mute border-paper-edge border bg-transparent bg-none;
120
120
  }
121
121
 
122
122
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
@@ -128,7 +128,7 @@
128
128
  ============================================================================= */
129
129
 
130
130
  [data-style='minimal'] [data-list] [data-list-group] {
131
- @apply text-ink-soft;
131
+ @apply text-ink-mute;
132
132
  }
133
133
 
134
134
  /* Group hover — text-only, no border */
package/src/minimal/menu.css CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
  /* Trigger elements */
28
28
  [data-style='minimal'] [data-menu-trigger] [data-menu-icon] {
29
- @apply text-ink-soft;
29
+ @apply text-ink-mute;
30
30
  }
31
31
 
32
32
  [data-style='minimal'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
@@ -34,7 +34,7 @@
34
34
  }
35
35
 
36
36
  [data-style='minimal'] [data-menu-trigger] [data-menu-arrow] {
37
- @apply text-paper-edge;
37
+ @apply text-ink-mute;
38
38
  }
39
39
 
40
40
  /* =============================================================================
@@ -60,15 +60,15 @@
60
60
 
61
61
  /* Item elements */
62
62
  [data-style='minimal'] [data-menu-item] [data-item-icon] {
63
- @apply text-ink-soft;
63
+ @apply text-ink-mute;
64
64
  }
65
65
 
66
66
  [data-style='minimal'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
67
- @apply text-ink-soft;
67
+ @apply text-ink-mute;
68
68
  }
69
69
 
70
70
  [data-style='minimal'] [data-menu-item] [data-item-description] {
71
- @apply text-ink-soft;
71
+ @apply text-ink-mute;
72
72
  }
73
73
 
74
74
  /* =============================================================================
@@ -76,7 +76,7 @@
76
76
  ============================================================================= */
77
77
 
78
78
  [data-style='minimal'] [data-menu-group] {
79
- @apply text-ink-soft;
79
+ @apply text-ink-mute;
80
80
  }
81
81
 
82
82
  /* =============================================================================
package/src/minimal/select.css CHANGED
@@ -29,7 +29,7 @@
29
29
  ============================================================================= */
30
30
 
31
31
  [data-style='minimal'] [data-select-placeholder] {
32
- @apply text-ink-soft;
32
+ @apply text-ink-mute;
33
33
  }
34
34
 
35
35
  /* =============================================================================
@@ -37,11 +37,11 @@
37
37
  ============================================================================= */
38
38
 
39
39
  [data-style='minimal'] [data-select-arrow] {
40
- @apply text-ink-soft;
40
+ @apply text-ink-mute;
41
41
  }
42
42
 
43
43
  [data-style='minimal'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
44
- @apply text-ink-soft;
44
+ @apply text-ink-mute;
45
45
  }
46
46
 
47
47
  /* =============================================================================
@@ -53,7 +53,7 @@
53
53
  }
54
54
 
55
55
  [data-style='minimal'] [data-select-tag-remove] {
56
- @apply text-ink-soft;
56
+ @apply text-ink-mute;
57
57
  }
58
58
 
59
59
  [data-style='minimal'] [data-select-tag-remove]:hover {
@@ -110,7 +110,7 @@
110
110
 
111
111
  /* Item elements */
112
112
  [data-style='minimal'] [data-select-option] [data-item-description] {
113
- @apply text-ink-soft;
113
+ @apply text-ink-mute;
114
114
  }
115
115
 
116
116
  [data-style='minimal'] [data-select-option][data-selected='true'] [data-item-description] {
@@ -122,7 +122,7 @@
122
122
  ============================================================================= */
123
123
 
124
124
  [data-style='minimal'] [data-select-group-label] {
125
- @apply text-ink-soft;
125
+ @apply text-ink-mute;
126
126
  }
127
127
 
128
128
  /* =============================================================================
@@ -150,9 +150,9 @@
150
150
  }
151
151
 
152
152
  [data-style='minimal'] [data-select-filter-input]::placeholder {
153
- @apply text-ink-soft;
153
+ @apply text-ink-mute;
154
154
  }
155
155
 
156
156
  [data-style='minimal'] [data-select-empty] {
157
- @apply text-ink-soft;
157
+ @apply text-ink-mute;
158
158
  }
package/src/minimal/table.css CHANGED
@@ -9,7 +9,7 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='minimal'] [data-table-header] th {
12
- @apply text-ink-soft border-paper-edge border-b bg-paper-mute;
12
+ @apply text-ink-mute border-paper-edge border-b bg-paper-mute;
13
13
  }
14
14
 
15
15
  [data-style='minimal'] [data-table-header-cell][data-sortable='true']:hover {
@@ -22,7 +22,7 @@
22
22
  }
23
23
 
24
24
  [data-style='minimal'] [data-table-sort-icon] {
25
- @apply text-ink-soft;
25
+ @apply text-ink-mute;
26
26
  }
27
27
 
28
28
  [data-style='minimal'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
@@ -83,7 +83,7 @@
83
83
  ============================================================================= */
84
84
 
85
85
  [data-style='minimal'] [data-table-empty] {
86
- @apply text-ink-soft;
86
+ @apply text-ink-mute;
87
87
  }
88
88
 
89
89
  /* =============================================================================
@@ -91,7 +91,7 @@
91
91
  ============================================================================= */
92
92
 
93
93
  [data-style='minimal'] [data-table-cell] [data-cell-icon] {
94
- @apply text-ink-soft;
94
+ @apply text-ink-mute;
95
95
  }
96
96
 
97
97
  [data-style='minimal'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -108,7 +108,7 @@
108
108
  }
109
109
 
110
110
  [data-style='minimal'] [data-table-responsive] [data-table-cell]::before {
111
- @apply text-ink-soft;
111
+ @apply text-ink-mute;
112
112
  }
113
113
 
114
114
  /* Disable striped alternating bg in card layout */
package/src/minimal/tabs.css CHANGED
@@ -32,7 +32,7 @@
32
32
  ============================================================================= */
33
33
 
34
34
  [data-style='minimal'] [data-tabs-trigger] {
35
- @apply text-ink-soft border-b-[3px] border-b-transparent bg-transparent;
35
+ @apply text-ink-mute border-b-[3px] border-b-transparent bg-transparent;
36
36
  font-weight: 400;
37
37
  transition:
38
38
  color 150ms ease,
@@ -135,7 +135,7 @@
135
135
  }
136
136
 
137
137
  [data-style='minimal'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
138
- @apply text-ink-soft;
138
+ @apply text-ink-mute;
139
139
  }
140
140
 
141
141
  [data-style='minimal'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
package/src/minimal/timeline.css CHANGED
@@ -13,11 +13,11 @@
13
13
  }
14
14
 
15
15
  [data-style='minimal'] [data-timeline-item][data-completed] [data-timeline-circle] {
16
- @apply border-primary text-primary;
16
+ @apply border-primary text-ink;
17
17
  }
18
18
 
19
19
  [data-style='minimal'] [data-timeline-item][data-active] [data-timeline-circle] {
20
- @apply border-primary text-primary border-b-2;
20
+ @apply border-primary text-ink border-b-2;
21
21
  }
22
22
 
23
23
  /* =============================================================================
@@ -29,7 +29,7 @@
29
29
  }
30
30
 
31
31
  [data-style='minimal'] [data-timeline-item][data-completed] [data-timeline-connector] {
32
- @apply bg-primary;
32
+ background-color: var(--primary);
33
33
  }
34
34
 
35
35
  /* =============================================================================
package/src/minimal/toggle.css CHANGED
@@ -17,7 +17,7 @@
17
17
  ============================================================================= */
18
18
 
19
19
  [data-style='minimal'] [data-toggle-option] {
20
- @apply text-ink-soft border-0 border-solid border-transparent;
20
+ @apply text-ink-mute border-0 border-solid border-transparent;
21
21
  }
22
22
 
23
23
  [data-style='minimal'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -35,7 +35,7 @@
35
35
  ============================================================================= */
36
36
 
37
37
  [data-style='minimal'] [data-toggle-option] [data-toggle-icon] {
38
- @apply text-ink-soft;
38
+ @apply text-ink-mute;
39
39
  }
40
40
 
41
41
  [data-style='minimal'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -55,7 +55,7 @@
55
55
  ============================================================================= */
56
56
 
57
57
  [data-style='minimal'] [data-toggle][data-toggle-variant='button'] {
58
- @apply border-transparent bg-transparent text-ink-soft;
58
+ @apply border-transparent bg-transparent text-ink-mute;
59
59
  background-image: none;
60
60
  }
61
61
 
@@ -65,7 +65,7 @@
65
65
  }
66
66
 
67
67
  [data-style='minimal'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
68
- @apply text-ink-soft;
68
+ @apply text-ink-mute;
69
69
  }
70
70
 
71
71
  [data-style='minimal'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
package/src/minimal/tree.css CHANGED
@@ -4,6 +4,17 @@
4
4
  * Clean, understated tree with subtle borders.
5
5
  */
6
6
 
7
+ /* =============================================================================
8
+ Connector Lines — hairline tone (mode-aware), not currentColor (which
9
+ renders white in dark mode and greyish in light).
10
+ ============================================================================= */
11
+
12
+ [data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-v],
13
+ [data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-h],
14
+ [data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
15
+ @apply border-paper-edge;
16
+ }
17
+
7
18
  /* =============================================================================
8
19
  Tree Container
9
20
  ============================================================================= */
@@ -17,11 +28,11 @@
17
28
  ============================================================================= */
18
29
 
19
30
  [data-style='minimal'] [data-tree-toggle-btn] {
20
- @apply text-paper-edge;
31
+ @apply text-ink-mute;
21
32
  }
22
33
 
23
34
  [data-style='minimal'] [data-tree-toggle-btn]:hover {
24
- @apply text-ink-soft bg-none;
35
+ @apply text-ink-mute bg-none;
25
36
  }
26
37
 
27
38
  /* =============================================================================
@@ -75,11 +86,11 @@
75
86
  ============================================================================= */
76
87
 
77
88
  [data-style='minimal'] [data-tree-item-content] [data-item-icon] {
78
- @apply text-ink-soft;
89
+ @apply text-ink-mute;
79
90
  }
80
91
 
81
92
  [data-style='minimal'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
82
- @apply text-ink-soft;
93
+ @apply text-ink-mute;
83
94
  }
84
95
 
85
96
  [data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-icon] {
@@ -87,7 +98,7 @@
87
98
  }
88
99
 
89
100
  [data-style='minimal'] [data-tree-item-content] [data-item-description] {
90
- @apply text-ink-soft;
101
+ @apply text-ink-mute;
91
102
  }
92
103
 
93
104
  [data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-description] {
@@ -95,7 +106,7 @@
95
106
  }
96
107
 
97
108
  [data-style='minimal'] [data-tree-item-content] [data-item-badge] {
98
- @apply text-ink-soft border-paper-edge border bg-transparent bg-none;
109
+ @apply text-ink-mute border-paper-edge border bg-transparent bg-none;
99
110
  }
100
111
 
101
112
  [data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-badge] {
package/src/rokkit/avatar.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  [data-style='rokkit'] [data-avatar] {
6
- @apply bg-paper-edge text-ink-mute;
6
+ @apply bg-paper-edge text-ink;
7
7
  }
8
8
 
9
9
  /* Status dot colors */
package/src/rokkit/badge.css CHANGED
@@ -5,7 +5,7 @@
5
5
  /* Default variant */
6
6
  [data-style='rokkit'] [data-badge][data-variant='default'],
7
7
  [data-style='rokkit'] [data-badge]:not([data-variant]) {
8
- @apply bg-ink-soft text-paper-soft;
8
+ @apply bg-ink-mute text-paper-soft;
9
9
  }
10
10
 
11
11
  /* Primary */
package/src/rokkit/button.css CHANGED
@@ -235,7 +235,7 @@
235
235
  [data-button][data-style='ghost']:hover:not(:disabled):not(
236
236
  [data-disabled]
237
237
  )[data-variant='primary'] {
238
- @apply bg-primary;
238
+ background-color: var(--primary);
239
239
  }
240
240
 
241
241
  [data-style='rokkit']
package/src/rokkit/divider.css CHANGED
@@ -22,5 +22,5 @@
22
22
  }
23
23
 
24
24
  [data-style='rokkit'] [data-divider-label] {
25
- @apply text-ink-soft;
25
+ @apply text-ink-mute;
26
26
  }
package/src/rokkit/dropdown.css CHANGED
@@ -25,7 +25,7 @@
25
25
  }
26
26
 
27
27
  [data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-icon] {
28
- @apply text-ink-soft;
28
+ @apply text-ink-mute;
29
29
  }
30
30
 
31
31
  [data-style='rokkit'] [data-dropdown-trigger]:hover:not(:disabled) [data-dropdown-icon] {
@@ -33,7 +33,7 @@
33
33
  }
34
34
 
35
35
  [data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-arrow] {
36
- @apply text-ink-soft;
36
+ @apply text-ink-mute;
37
37
  }
38
38
 
39
39
  /* =============================================================================