@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/dist/index.css CHANGED
@@ -2279,8 +2279,11 @@
2279
2279
  padding-inline: 0.375rem;
2280
2280
  }
2281
2281
 
2282
+ /* Icon-only options are square — min-width matches the height (same treatment
2283
+ the `button` variant gets), so a lone icon sits in a square, not a portrait box. */
2282
2284
  [data-toggle][data-toggle-size='sm']:not([data-toggle-labels='true']) [data-toggle-option] {
2283
2285
  padding-inline: 0.25rem;
2286
+ min-width: var(--control-h-sm);
2284
2287
  }
2285
2288
 
2286
2289
  [data-toggle][data-toggle-size='sm'] [data-toggle-icon] {
@@ -2303,6 +2306,7 @@
2303
2306
  [data-toggle][data-toggle-size='md']:not([data-toggle-labels='true']) [data-toggle-option],
2304
2307
  [data-toggle]:not([data-toggle-size]):not([data-toggle-labels='true']) [data-toggle-option] {
2305
2308
  padding-inline: 0.375rem;
2309
+ min-width: var(--control-h-md);
2306
2310
  }
2307
2311
 
2308
2312
  [data-toggle][data-toggle-size='md'] [data-toggle-icon],
@@ -2323,6 +2327,7 @@
2323
2327
 
2324
2328
  [data-toggle][data-toggle-size='lg']:not([data-toggle-labels='true']) [data-toggle-option] {
2325
2329
  padding-inline: 0.5rem;
2330
+ min-width: var(--control-h-lg);
2326
2331
  }
2327
2332
 
2328
2333
  [data-toggle][data-toggle-size='lg'] [data-toggle-icon] {
@@ -4289,9 +4294,10 @@ a[data-card] {
4289
4294
  }
4290
4295
 
4291
4296
  [data-stepper-step][data-completed] [data-stepper-circle] {
4297
+ /* solid brand fill + on-primary text (dark, reads on the bright 500). */
4292
4298
  background-color: var(--primary);
4293
4299
  border-color: var(--primary);
4294
- color: var(--paper);
4300
+ color: var(--on-primary);
4295
4301
  }
4296
4302
 
4297
4303
  /* Check glyph inside a completed circle follows the circle's color
@@ -4302,7 +4308,9 @@ a[data-card] {
4302
4308
 
4303
4309
  [data-stepper-step][data-active] [data-stepper-circle] {
4304
4310
  border-color: var(--primary);
4305
- color: var(--primary);
4311
+ /* ink number (not saffron) so it reads on the page; the saffron border + ring
4312
+ keep the active accent */
4313
+ color: var(--ink);
4306
4314
  --un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:color-mix(in srgb, var(--color-primary) calc(0.2 * 100%), transparent);
4307
4315
  }
4308
4316
 
@@ -4313,9 +4321,12 @@ a[data-card] {
4313
4321
  flex: 1;
4314
4322
  height: 2px;
4315
4323
  min-width: 2rem;
4316
- align-self: center;
4317
- /* Vertically center with the circle (half of 2.5rem) */
4318
- margin-top: 1.25rem;
4324
+ /* Align to the circle's vertical center, NOT the full step height. The step
4325
+ is `circle + label below`, so `align-self: center` drops the line into the
4326
+ label gap (reads as bottom-aligned). Pin to the top and offset by the
4327
+ circle's radius (1.25rem) minus half the line height. */
4328
+ align-self: flex-start;
4329
+ margin-top: calc(1.25rem - 1px);
4319
4330
  transition: background-color 0.2s ease;
4320
4331
  }
4321
4332
 
@@ -4626,7 +4637,10 @@ a[data-card] {
4626
4637
  display: inline-block;
4627
4638
  vertical-align: middle;
4628
4639
  margin-left: 0.25rem;
4629
- opacity: 0.4;
4640
+ /* Unsorted hint — visible enough to read as "sortable" against a tinted
4641
+ header, but still clearly secondary to the active (sorted) state below.
4642
+ 0.4 was too faint (the glyph all but vanished on dark headers). */
4643
+ opacity: 0.65;
4630
4644
  transition: opacity 150ms ease;
4631
4645
  }
4632
4646
 
@@ -7261,16 +7275,16 @@ button[data-step-number] {
7261
7275
  /* Accent variant */
7262
7276
  [data-style='rokkit'] [data-button][data-style='default'][data-variant='accent'],
7263
7277
  [data-style='rokkit'] [data-button]:not([data-style])[data-variant='accent'] {
7264
- border-width:1px;--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);border-color:var(--accent);
7278
+ border-width:1px;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));border-color:var(--accent);
7265
7279
  background: linear-gradient(to bottom, var(--accent), var(--accent));
7266
- }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style])[data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button]:not([data-style])[data-variant="accent"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);}
7280
+ }
7267
7281
 
7268
7282
  /* Danger variant */
7269
7283
  [data-style='rokkit'] [data-button][data-style='default'][data-variant='danger'],
7270
7284
  [data-style='rokkit'] [data-button]:not([data-style])[data-variant='danger'] {
7271
- border-width:1px;--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);border-color:var(--danger);
7285
+ border-width:1px;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));border-color:var(--danger);
7272
7286
  background: linear-gradient(to bottom, var(--danger), var(--danger));
7273
- }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style])[data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button]:not([data-style])[data-variant="danger"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);}
7287
+ }
7274
7288
 
7275
7289
  /* =============================================================================
7276
7290
  Outline Style
@@ -7344,12 +7358,12 @@ button[data-step-number] {
7344
7358
  }
7345
7359
 
7346
7360
  [data-style='rokkit'] [data-button][data-style='gradient'][data-variant='accent'] {
7347
- --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);
7348
- }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="gradient"][data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="gradient"][data-variant="accent"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);}
7361
+ --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
7362
+ }
7349
7363
 
7350
7364
  [data-style='rokkit'] [data-button][data-style='gradient'][data-variant='danger'] {
7351
- --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);
7352
- }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="gradient"][data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="gradient"][data-variant="danger"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);}
7365
+ --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
7366
+ }
7353
7367
 
7354
7368
  [data-style='rokkit']
7355
7369
  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
@@ -7449,7 +7463,7 @@ button[data-step-number] {
7449
7463
  [data-button][data-style='ghost']:hover:not(:disabled):not(
7450
7464
  [data-disabled]
7451
7465
  )[data-variant='primary'] {
7452
- background-color:var(--primary);
7466
+ background-color: var(--primary);
7453
7467
  }
7454
7468
 
7455
7469
  [data-style='rokkit']
@@ -7708,7 +7722,7 @@ button[data-step-number] {
7708
7722
  ============================================================================= */
7709
7723
 
7710
7724
  [data-style='rokkit'] [data-tabs-trigger] [data-tabs-icon] {
7711
- color:var(--ink-soft);
7725
+ color:var(--ink-mute);
7712
7726
  }
7713
7727
 
7714
7728
  [data-style='rokkit'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
@@ -7752,7 +7766,7 @@ button[data-step-number] {
7752
7766
  ============================================================================= */
7753
7767
 
7754
7768
  [data-style='rokkit'] [data-toggle-option] {
7755
- color:var(--ink-soft);
7769
+ color:var(--ink-mute);
7756
7770
  }
7757
7771
 
7758
7772
  /* Hover applies only to UNSELECTED options so the branded selected
@@ -7775,7 +7789,7 @@ button[data-step-number] {
7775
7789
  ============================================================================= */
7776
7790
 
7777
7791
  [data-style='rokkit'] [data-toggle-option] [data-toggle-icon] {
7778
- color:var(--ink-soft);
7792
+ color:var(--ink-mute);
7779
7793
  }
7780
7794
 
7781
7795
  [data-style='rokkit'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -7795,7 +7809,7 @@ button[data-step-number] {
7795
7809
  ============================================================================= */
7796
7810
 
7797
7811
  [data-style='rokkit'] [data-toggle][data-toggle-variant='button'] {
7798
- border-color:transparent;background-color:transparent;color:var(--ink-soft);
7812
+ border-color:transparent;background-color:transparent;color:var(--ink-mute);
7799
7813
  background-image: none;
7800
7814
  }
7801
7815
 
@@ -7805,7 +7819,7 @@ button[data-step-number] {
7805
7819
  }
7806
7820
 
7807
7821
  [data-style='rokkit'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
7808
- color:var(--ink-soft);
7822
+ color:var(--ink-mute);
7809
7823
  }
7810
7824
 
7811
7825
  [data-style='rokkit'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
@@ -7899,7 +7913,7 @@ button[data-step-number] {
7899
7913
 
7900
7914
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-icon] {
7901
7915
  font-size: 1rem;
7902
- color:var(--ink-soft);
7916
+ color:var(--ink-mute);
7903
7917
  }
7904
7918
 
7905
7919
  [data-style='rokkit'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
@@ -7924,7 +7938,7 @@ button[data-step-number] {
7924
7938
 
7925
7939
  /* Literal / kanji icons */
7926
7940
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-icon-literal] {
7927
- color:var(--ink-soft);
7941
+ color:var(--ink-mute);
7928
7942
  }
7929
7943
 
7930
7944
  [data-style='rokkit'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
@@ -7949,7 +7963,7 @@ button[data-step-number] {
7949
7963
 
7950
7964
  /* Item description */
7951
7965
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-description] {
7952
- color:var(--ink-soft);
7966
+ color:var(--ink-mute);
7953
7967
  }
7954
7968
 
7955
7969
  [data-style='rokkit'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
@@ -7969,7 +7983,7 @@ button[data-step-number] {
7969
7983
 
7970
7984
  /* Item badge */
7971
7985
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-badge] {
7972
- border-width:1px;--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink-soft);border-color:var(--paper-edge);
7986
+ border-width:1px;--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink-mute);border-color:var(--paper-edge);
7973
7987
  }
7974
7988
 
7975
7989
  [data-style='rokkit'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
@@ -8002,7 +8016,7 @@ button[data-step-number] {
8002
8016
  ============================================================================= */
8003
8017
 
8004
8018
  [data-style='rokkit'] [data-list] [data-list-group] {
8005
- margin-top:0.5rem;color:var(--ink-soft);
8019
+ margin-top:0.5rem;color:var(--ink-mute);
8006
8020
  }
8007
8021
 
8008
8022
  [data-style='rokkit'] [data-list] [data-list-group]:first-child {
@@ -8052,6 +8066,17 @@ button[data-step-number] {
8052
8066
  * Rich gradients and glowing borders.
8053
8067
  */
8054
8068
 
8069
+ /* =============================================================================
8070
+ Connector Lines — hairline tone (mode-aware), not currentColor (which
8071
+ renders white in dark mode and greyish in light).
8072
+ ============================================================================= */
8073
+
8074
+ [data-style='rokkit'] [data-tree]:not([data-line-style='none']) [data-connector-v],
8075
+ [data-style='rokkit'] [data-tree]:not([data-line-style='none']) [data-connector-h],
8076
+ [data-style='rokkit'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
8077
+ border-color:var(--paper-edge);
8078
+ }
8079
+
8055
8080
  /* =============================================================================
8056
8081
  Tree Container
8057
8082
  ============================================================================= */
@@ -8065,7 +8090,7 @@ button[data-step-number] {
8065
8090
  ============================================================================= */
8066
8091
 
8067
8092
  [data-style='rokkit'] [data-tree-toggle-btn] {
8068
- color:var(--ink-soft);
8093
+ color:var(--ink-mute);
8069
8094
  }
8070
8095
 
8071
8096
  [data-style='rokkit'] [data-tree-toggle-btn]:hover {
@@ -8111,7 +8136,7 @@ button[data-step-number] {
8111
8136
  ============================================================================= */
8112
8137
 
8113
8138
  [data-style='rokkit'] [data-tree-item-content] [data-item-icon] {
8114
- color:var(--ink-soft);
8139
+ color:var(--ink-mute);
8115
8140
  }
8116
8141
 
8117
8142
  [data-style='rokkit'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
@@ -8129,12 +8154,12 @@ button[data-step-number] {
8129
8154
  [data-tree]:not(:focus-within)
8130
8155
  [data-tree-item-content][data-active='true']
8131
8156
  [data-item-icon] {
8132
- color:var(--ink-soft);
8157
+ color:var(--ink-mute);
8133
8158
  }
8134
8159
 
8135
8160
  /* Item description */
8136
8161
  [data-style='rokkit'] [data-tree-item-content] [data-item-description] {
8137
- color:var(--ink-soft);
8162
+ color:var(--ink-mute);
8138
8163
  }
8139
8164
 
8140
8165
  [data-style='rokkit']
@@ -8148,12 +8173,12 @@ button[data-step-number] {
8148
8173
  [data-tree]:not(:focus-within)
8149
8174
  [data-tree-item-content][data-active='true']
8150
8175
  [data-item-description] {
8151
- color:var(--ink-soft);
8176
+ color:var(--ink-mute);
8152
8177
  }
8153
8178
 
8154
8179
  /* Item badge */
8155
8180
  [data-style='rokkit'] [data-tree-item-content] [data-item-badge] {
8156
- border-width:1px;--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink-soft);border-color:var(--paper-edge);
8181
+ border-width:1px;--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink-mute);border-color:var(--paper-edge);
8157
8182
  }
8158
8183
 
8159
8184
  [data-style='rokkit']
@@ -8239,7 +8264,7 @@ button[data-step-number] {
8239
8264
  ============================================================================= */
8240
8265
 
8241
8266
  [data-style='rokkit'] [data-select-placeholder] {
8242
- color:var(--ink-soft);
8267
+ color:var(--ink-mute);
8243
8268
  }
8244
8269
 
8245
8270
  /* =============================================================================
@@ -8247,7 +8272,7 @@ button[data-step-number] {
8247
8272
  ============================================================================= */
8248
8273
 
8249
8274
  [data-style='rokkit'] [data-select-arrow] {
8250
- color:var(--ink-soft);
8275
+ color:var(--ink-mute);
8251
8276
  }
8252
8277
 
8253
8278
  [data-style='rokkit'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
@@ -8263,7 +8288,7 @@ button[data-step-number] {
8263
8288
  }
8264
8289
 
8265
8290
  [data-style='rokkit'] [data-select-tag-remove] {
8266
- color:var(--ink-soft);
8291
+ color:var(--ink-mute);
8267
8292
  }
8268
8293
 
8269
8294
  [data-style='rokkit'] [data-select-tag-remove]:hover {
@@ -8297,11 +8322,12 @@ button[data-step-number] {
8297
8322
  border-left-width:2px;background-color:var(--paper-mute);color:var(--primary);border-left-color:var(--primary);
8298
8323
  }
8299
8324
 
8300
- /* Selected state — full gradient when dropdown has focus */
8325
+ /* Selected state — full gradient when dropdown has focus. The option now has a
8326
+ primary→accent FILL, so its text must be on-primary (teal-on-teal otherwise). */
8301
8327
  [data-style='rokkit']
8302
8328
  [data-select-dropdown]:focus-within
8303
8329
  [data-select-option][data-selected='true'] {
8304
- border-left-width:2px;--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--primary);border-left-color:var(--primary);
8330
+ border-left-width:2px;--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--on-primary);border-left-color:var(--primary);
8305
8331
  }
8306
8332
 
8307
8333
  /* Selected + hover */
@@ -8325,7 +8351,7 @@ button[data-step-number] {
8325
8351
 
8326
8352
  /* Item elements */
8327
8353
  [data-style='rokkit'] [data-select-option] [data-item-icon] {
8328
- color:var(--ink-soft);
8354
+ color:var(--ink-mute);
8329
8355
  }
8330
8356
 
8331
8357
  [data-style='rokkit'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
@@ -8340,23 +8366,33 @@ button[data-step-number] {
8340
8366
  [data-select-dropdown]:focus-within
8341
8367
  [data-select-option][data-selected='true']
8342
8368
  [data-item-icon] {
8343
- color:var(--primary);
8369
+ color:var(--on-primary);
8344
8370
  }
8345
8371
 
8346
8372
  [data-style='rokkit'] [data-select-option] [data-item-description] {
8347
- color:var(--ink-soft);
8373
+ color:var(--ink-mute);
8348
8374
  }
8349
8375
 
8350
8376
  [data-style='rokkit'] [data-select-option][data-selected='true'] [data-item-description] {
8351
8377
  color:var(--primary);
8352
8378
  }
8353
8379
 
8380
+ /* Description also rides the primary fill when the dropdown has focus. */
8381
+ [data-style='rokkit']
8382
+ [data-select-dropdown]:focus-within
8383
+ [data-select-option][data-selected='true']
8384
+ [data-item-description] {
8385
+ color:var(--on-primary);
8386
+ }
8387
+
8354
8388
  [data-style='rokkit'] [data-select-option] [data-item-badge] {
8355
- color:var(--ink-soft);background-color:var(--paper-mute);
8389
+ color:var(--ink-mute);background-color:var(--paper-mute);
8356
8390
  }
8357
8391
 
8392
+ /* Selected badge sits on a primary fill → on-primary text (not text-primary,
8393
+ which would be primary-on-primary). */
8358
8394
  [data-style='rokkit'] [data-select-option][data-selected='true'] [data-item-badge] {
8359
- color:var(--primary);background-color:var(--primary);
8395
+ color:var(--on-primary);background-color:var(--primary);
8360
8396
  }
8361
8397
 
8362
8398
  /* =============================================================================
@@ -8364,7 +8400,7 @@ button[data-step-number] {
8364
8400
  ============================================================================= */
8365
8401
 
8366
8402
  [data-style='rokkit'] [data-select-group-label] {
8367
- color:var(--ink-soft);
8403
+ color:var(--ink-mute);
8368
8404
  }
8369
8405
 
8370
8406
  /* =============================================================================
@@ -8392,11 +8428,11 @@ button[data-step-number] {
8392
8428
  }
8393
8429
 
8394
8430
  [data-style='rokkit'] [data-select-filter-input]::placeholder {
8395
- color:var(--ink-soft);
8431
+ color:var(--ink-mute);
8396
8432
  }
8397
8433
 
8398
8434
  [data-style='rokkit'] [data-select-empty] {
8399
- color:var(--ink-soft);
8435
+ color:var(--ink-mute);
8400
8436
  }
8401
8437
 
8402
8438
  /**
@@ -8427,7 +8463,7 @@ button[data-step-number] {
8427
8463
 
8428
8464
  /* Trigger elements */
8429
8465
  [data-style='rokkit'] [data-menu-trigger] [data-menu-icon] {
8430
- color:var(--ink-soft);
8466
+ color:var(--ink-mute);
8431
8467
  }
8432
8468
 
8433
8469
  [data-style='rokkit'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
@@ -8435,7 +8471,7 @@ button[data-step-number] {
8435
8471
  }
8436
8472
 
8437
8473
  [data-style='rokkit'] [data-menu-trigger] [data-menu-arrow] {
8438
- color:var(--ink-soft);
8474
+ color:var(--ink-mute);
8439
8475
  }
8440
8476
 
8441
8477
  /* =============================================================================
@@ -8465,7 +8501,7 @@ button[data-step-number] {
8465
8501
 
8466
8502
  /* Item elements */
8467
8503
  [data-style='rokkit'] [data-menu-item] [data-item-icon] {
8468
- color:var(--ink-soft);
8504
+ color:var(--ink-mute);
8469
8505
  }
8470
8506
 
8471
8507
  [data-style='rokkit'] [data-menu-item]:hover:not(:disabled) [data-item-icon],
@@ -8474,7 +8510,7 @@ button[data-step-number] {
8474
8510
  }
8475
8511
 
8476
8512
  [data-style='rokkit'] [data-menu-item] [data-item-description] {
8477
- color:var(--ink-soft);
8513
+ color:var(--ink-mute);
8478
8514
  }
8479
8515
 
8480
8516
  /* =============================================================================
@@ -8482,7 +8518,7 @@ button[data-step-number] {
8482
8518
  ============================================================================= */
8483
8519
 
8484
8520
  [data-style='rokkit'] [data-menu-group] {
8485
- color:var(--ink-soft);
8521
+ color:var(--ink-mute);
8486
8522
  }
8487
8523
 
8488
8524
  /* =============================================================================
@@ -8520,7 +8556,7 @@ button[data-step-number] {
8520
8556
  }
8521
8557
 
8522
8558
  [data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-icon] {
8523
- color:var(--ink-soft);
8559
+ color:var(--ink-mute);
8524
8560
  }
8525
8561
 
8526
8562
  [data-style='rokkit'] [data-dropdown-trigger]:hover:not(:disabled) [data-dropdown-icon] {
@@ -8528,7 +8564,7 @@ button[data-step-number] {
8528
8564
  }
8529
8565
 
8530
8566
  [data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-arrow] {
8531
- color:var(--ink-soft);
8567
+ color:var(--ink-mute);
8532
8568
  }
8533
8569
 
8534
8570
  /* =============================================================================
@@ -8776,7 +8812,7 @@ button[data-step-number] {
8776
8812
  ============================================================================= */
8777
8813
 
8778
8814
  [data-style='rokkit'] [data-table-header] th {
8779
- border-bottom-width:1px;color:var(--ink-soft);border-color:var(--paper-edge);background-color:var(--paper-mute);
8815
+ border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-edge);background-color:var(--paper-mute);
8780
8816
  }
8781
8817
 
8782
8818
  [data-style='rokkit'] [data-table-header-cell][data-sortable='true']:hover {
@@ -8789,7 +8825,7 @@ button[data-step-number] {
8789
8825
  }
8790
8826
 
8791
8827
  [data-style='rokkit'] [data-table-sort-icon] {
8792
- color:var(--ink-soft);
8828
+ color:var(--ink-mute);
8793
8829
  }
8794
8830
 
8795
8831
  [data-style='rokkit'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
@@ -8850,7 +8886,7 @@ button[data-step-number] {
8850
8886
  ============================================================================= */
8851
8887
 
8852
8888
  [data-style='rokkit'] [data-table-empty] {
8853
- color:var(--ink-soft);
8889
+ color:var(--ink-mute);
8854
8890
  }
8855
8891
 
8856
8892
  /* =============================================================================
@@ -8858,7 +8894,7 @@ button[data-step-number] {
8858
8894
  ============================================================================= */
8859
8895
 
8860
8896
  [data-style='rokkit'] [data-table-cell] [data-cell-icon] {
8861
- color:var(--ink-soft);
8897
+ color:var(--ink-mute);
8862
8898
  }
8863
8899
 
8864
8900
  [data-style='rokkit'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -8875,7 +8911,7 @@ button[data-step-number] {
8875
8911
  }
8876
8912
 
8877
8913
  [data-style='rokkit'] [data-table-responsive] [data-table-cell]::before {
8878
- color:var(--ink-soft);
8914
+ color:var(--ink-mute);
8879
8915
  }
8880
8916
 
8881
8917
  /* Disable striped alternating bg in card layout */
@@ -9012,11 +9048,12 @@ button[data-step-number] {
9012
9048
  }
9013
9049
 
9014
9050
  [data-style='rokkit'] [data-timeline-item][data-completed] [data-timeline-circle] {
9015
- background-color:var(--primary);border-color:var(--primary);color:var(--on-primary);
9051
+ border-color:var(--primary);color:var(--on-primary);
9052
+ background-color: var(--primary);
9016
9053
  }
9017
9054
 
9018
9055
  [data-style='rokkit'] [data-timeline-item][data-active] [data-timeline-circle] {
9019
- --un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:color-mix(in srgb, var(--color-primary) calc(0.2 * 100%), transparent);border-color:var(--primary);color:var(--primary);
9056
+ --un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:color-mix(in srgb, var(--color-primary) calc(0.2 * 100%), transparent);border-color:var(--primary);color:var(--ink);
9020
9057
  }
9021
9058
 
9022
9059
  /* =============================================================================
@@ -9028,7 +9065,7 @@ button[data-step-number] {
9028
9065
  }
9029
9066
 
9030
9067
  [data-style='rokkit'] [data-timeline-item][data-completed] [data-timeline-connector] {
9031
- background-color:var(--primary);
9068
+ background-color: var(--primary);
9032
9069
  }
9033
9070
 
9034
9071
  /* =============================================================================
@@ -9428,8 +9465,8 @@ button[data-step-number] {
9428
9465
  }
9429
9466
 
9430
9467
  [data-style='rokkit'] [data-card][data-variant='primary'] [data-card-body] {
9431
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
9432
- }[data-mode="dark"][data-style="rokkit"] [data-card][data-variant="primary"] [data-card-body],[data-mode="dark"] [data-style="rokkit"] [data-card][data-variant="primary"] [data-card-body]{color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);}
9468
+ color:rgb(22 22 22 / 0.8);
9469
+ }
9433
9470
 
9434
9471
  /* Secondary — muted secondary surface */
9435
9472
  [data-style='rokkit'] [data-card][data-variant='secondary'] {
@@ -9442,8 +9479,8 @@ button[data-step-number] {
9442
9479
  }
9443
9480
 
9444
9481
  [data-style='rokkit'] [data-card][data-variant='secondary'] [data-card-body] {
9445
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
9446
- }[data-mode="dark"][data-style="rokkit"] [data-card][data-variant="secondary"] [data-card-body],[data-mode="dark"] [data-style="rokkit"] [data-card][data-variant="secondary"] [data-card-body]{color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);}
9482
+ color:rgb(22 22 22 / 0.8);
9483
+ }
9447
9484
 
9448
9485
  /* Tertiary — elevated surface, no color accent */
9449
9486
  [data-style='rokkit'] [data-card][data-variant='tertiary'] {
@@ -9885,7 +9922,7 @@ button[data-step-number] {
9885
9922
  }
9886
9923
 
9887
9924
  [data-style='rokkit'] [data-divider-label] {
9888
- color:var(--ink-soft);
9925
+ color:var(--ink-mute);
9889
9926
  }
9890
9927
 
9891
9928
  /**
@@ -9895,7 +9932,7 @@ button[data-step-number] {
9895
9932
  /* Default variant */
9896
9933
  [data-style='rokkit'] [data-badge][data-variant='default'],
9897
9934
  [data-style='rokkit'] [data-badge]:not([data-variant]) {
9898
- background-color:var(--ink-soft);color:var(--paper-soft);
9935
+ background-color:var(--ink-mute);color:var(--paper-soft);
9899
9936
  }
9900
9937
 
9901
9938
  /* Primary */
@@ -9905,25 +9942,25 @@ button[data-step-number] {
9905
9942
 
9906
9943
  /* Success */
9907
9944
  [data-style='rokkit'] [data-badge][data-variant='success'] {
9908
- --un-text-opacity:1;color:color-mix(in srgb, var(--color-success-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--success);
9909
- }[data-mode="dark"][data-style="rokkit"] [data-badge][data-variant="success"],[data-mode="dark"] [data-style="rokkit"] [data-badge][data-variant="success"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-success-50) calc(var(--un-text-opacity) * 100%), transparent);}
9945
+ --un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));background-color:var(--success);
9946
+ }
9910
9947
 
9911
9948
  /* Warning */
9912
9949
  [data-style='rokkit'] [data-badge][data-variant='warning'] {
9913
- --un-text-opacity:1;color:color-mix(in srgb, var(--color-warning-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--warning);
9914
- }[data-mode="dark"][data-style="rokkit"] [data-badge][data-variant="warning"],[data-mode="dark"] [data-style="rokkit"] [data-badge][data-variant="warning"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-warning-50) calc(var(--un-text-opacity) * 100%), transparent);}
9950
+ --un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));background-color:var(--warning);
9951
+ }
9915
9952
 
9916
9953
  /* Error */
9917
9954
  [data-style='rokkit'] [data-badge][data-variant='error'] {
9918
- --un-text-opacity:1;color:color-mix(in srgb, var(--color-error-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--error);
9919
- }[data-mode="dark"][data-style="rokkit"] [data-badge][data-variant="error"],[data-mode="dark"] [data-style="rokkit"] [data-badge][data-variant="error"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-error-50) calc(var(--un-text-opacity) * 100%), transparent);}
9955
+ --un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));background-color:var(--error);
9956
+ }
9920
9957
 
9921
9958
  /**
9922
9959
  * Avatar - Rokkit Theme Styles
9923
9960
  */
9924
9961
 
9925
9962
  [data-style='rokkit'] [data-avatar] {
9926
- background-color:var(--paper-edge);color:var(--ink-mute);
9963
+ background-color:var(--paper-edge);color:var(--ink);
9927
9964
  }
9928
9965
 
9929
9966
  /* Status dot colors */
@@ -10021,23 +10058,27 @@ button[data-step-number] {
10021
10058
 
10022
10059
  [data-style='minimal'] [data-button][data-style='default'][data-variant='primary'],
10023
10060
  [data-style='minimal'] [data-button]:not([data-style])[data-variant='primary'] {
10024
- border-color:transparent;background-image:none;background-color:var(--primary);color:var(--on-primary);
10061
+ border-color:transparent;background-image:none;color:var(--on-primary);
10062
+ background-color: var(--primary);
10025
10063
  }
10026
10064
 
10027
10065
  [data-style='minimal'] [data-button][data-style='default'][data-variant='secondary'],
10028
10066
  [data-style='minimal'] [data-button]:not([data-style])[data-variant='secondary'] {
10029
- border-color:transparent;background-image:none;background-color:var(--accent);color:var(--on-primary);
10067
+ border-color:transparent;background-image:none;color:var(--on-primary);
10068
+ background-color: var(--accent);
10030
10069
  }
10031
10070
 
10032
10071
  [data-style='minimal'] [data-button][data-style='default'][data-variant='accent'],
10033
10072
  [data-style='minimal'] [data-button]:not([data-style])[data-variant='accent'] {
10034
- border-color:transparent;background-image:none;--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--accent);
10035
- }[data-mode="dark"][data-style="minimal"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"] [data-style="minimal"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"][data-style="minimal"] [data-button]:not([data-style])[data-variant="accent"],[data-mode="dark"] [data-style="minimal"] [data-button]:not([data-style])[data-variant="accent"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);}
10073
+ border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
10074
+ background-color: var(--accent);
10075
+ }
10036
10076
 
10037
10077
  [data-style='minimal'] [data-button][data-style='default'][data-variant='danger'],
10038
10078
  [data-style='minimal'] [data-button]:not([data-style])[data-variant='danger'] {
10039
- border-color:transparent;background-image:none;--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--danger);
10040
- }[data-mode="dark"][data-style="minimal"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"] [data-style="minimal"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"][data-style="minimal"] [data-button]:not([data-style])[data-variant="danger"],[data-mode="dark"] [data-style="minimal"] [data-button]:not([data-style])[data-variant="danger"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);}
10079
+ border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
10080
+ background-color: var(--danger);
10081
+ }
10041
10082
 
10042
10083
  /* =============================================================================
10043
10084
  Outline Style
@@ -10111,12 +10152,12 @@ button[data-step-number] {
10111
10152
  }
10112
10153
 
10113
10154
  [data-style='minimal'] [data-button][data-style='gradient'][data-variant='accent'] {
10114
- --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);
10115
- }[data-mode="dark"][data-style="minimal"] [data-button][data-style="gradient"][data-variant="accent"],[data-mode="dark"] [data-style="minimal"] [data-button][data-style="gradient"][data-variant="accent"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);}
10155
+ --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
10156
+ }
10116
10157
 
10117
10158
  [data-style='minimal'] [data-button][data-style='gradient'][data-variant='danger'] {
10118
- --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);
10119
- }[data-mode="dark"][data-style="minimal"] [data-button][data-style="gradient"][data-variant="danger"],[data-mode="dark"] [data-style="minimal"] [data-button][data-style="gradient"][data-variant="danger"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);}
10159
+ --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
10160
+ }
10120
10161
 
10121
10162
  [data-style='minimal']
10122
10163
  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
@@ -10299,7 +10340,7 @@ button[data-step-number] {
10299
10340
  ============================================================================= */
10300
10341
 
10301
10342
  [data-style='minimal'] [data-tabs-trigger] {
10302
- border-bottom-width:3px;border-bottom-color:transparent;background-color:transparent;color:var(--ink-soft);
10343
+ border-bottom-width:3px;border-bottom-color:transparent;background-color:transparent;color:var(--ink-mute);
10303
10344
  font-weight: 400;
10304
10345
  transition:
10305
10346
  color 150ms ease,
@@ -10402,7 +10443,7 @@ button[data-step-number] {
10402
10443
  }
10403
10444
 
10404
10445
  [data-style='minimal'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
10405
- color:var(--ink-soft);
10446
+ color:var(--ink-mute);
10406
10447
  }
10407
10448
 
10408
10449
  [data-style='minimal'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
@@ -10436,7 +10477,7 @@ button[data-step-number] {
10436
10477
  ============================================================================= */
10437
10478
 
10438
10479
  [data-style='minimal'] [data-toggle-option] {
10439
- border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-soft);
10480
+ border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
10440
10481
  }
10441
10482
 
10442
10483
  [data-style='minimal'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -10454,7 +10495,7 @@ button[data-step-number] {
10454
10495
  ============================================================================= */
10455
10496
 
10456
10497
  [data-style='minimal'] [data-toggle-option] [data-toggle-icon] {
10457
- color:var(--ink-soft);
10498
+ color:var(--ink-mute);
10458
10499
  }
10459
10500
 
10460
10501
  [data-style='minimal'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -10474,7 +10515,7 @@ button[data-step-number] {
10474
10515
  ============================================================================= */
10475
10516
 
10476
10517
  [data-style='minimal'] [data-toggle][data-toggle-variant='button'] {
10477
- border-color:transparent;background-color:transparent;color:var(--ink-soft);
10518
+ border-color:transparent;background-color:transparent;color:var(--ink-mute);
10478
10519
  background-image: none;
10479
10520
  }
10480
10521
 
@@ -10484,7 +10525,7 @@ button[data-step-number] {
10484
10525
  }
10485
10526
 
10486
10527
  [data-style='minimal'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
10487
- color:var(--ink-soft);
10528
+ color:var(--ink-mute);
10488
10529
  }
10489
10530
 
10490
10531
  [data-style='minimal'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
@@ -10570,7 +10611,7 @@ button[data-step-number] {
10570
10611
 
10571
10612
  [data-style='minimal'] [data-list] a[data-list-item],
10572
10613
  [data-style='minimal'] [data-list] button[data-list-item] {
10573
- color:var(--ink-soft);
10614
+ color:var(--ink-mute);
10574
10615
  }
10575
10616
 
10576
10617
  /* Hover and focus — text brightening only, no border */
@@ -10608,12 +10649,12 @@ button[data-step-number] {
10608
10649
  ============================================================================= */
10609
10650
 
10610
10651
  [data-style='minimal'] [data-list] [data-list-item] [data-item-icon] {
10611
- color:var(--ink-soft);
10652
+ color:var(--ink-mute);
10612
10653
  }
10613
10654
 
10614
10655
  [data-style='minimal'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
10615
10656
  [data-style='minimal'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon] {
10616
- color:var(--ink-soft);
10657
+ color:var(--ink-mute);
10617
10658
  }
10618
10659
 
10619
10660
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
@@ -10622,12 +10663,12 @@ button[data-step-number] {
10622
10663
 
10623
10664
  /* Literal / kanji icons */
10624
10665
  [data-style='minimal'] [data-list] [data-list-item] [data-item-icon-literal] {
10625
- color:var(--ink-soft);
10666
+ color:var(--ink-mute);
10626
10667
  }
10627
10668
 
10628
10669
  [data-style='minimal'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
10629
10670
  [data-style='minimal'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon-literal] {
10630
- color:var(--ink-soft);
10671
+ color:var(--ink-mute);
10631
10672
  }
10632
10673
 
10633
10674
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-icon-literal] {
@@ -10635,7 +10676,7 @@ button[data-step-number] {
10635
10676
  }
10636
10677
 
10637
10678
  [data-style='minimal'] [data-list] [data-list-item] [data-item-description] {
10638
- color:var(--ink-soft);
10679
+ color:var(--ink-mute);
10639
10680
  }
10640
10681
 
10641
10682
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
@@ -10643,7 +10684,7 @@ button[data-step-number] {
10643
10684
  }
10644
10685
 
10645
10686
  [data-style='minimal'] [data-list] [data-list-item] [data-item-badge] {
10646
- border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-edge);
10687
+ border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-edge);
10647
10688
  }
10648
10689
 
10649
10690
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
@@ -10655,7 +10696,7 @@ button[data-step-number] {
10655
10696
  ============================================================================= */
10656
10697
 
10657
10698
  [data-style='minimal'] [data-list] [data-list-group] {
10658
- color:var(--ink-soft);
10699
+ color:var(--ink-mute);
10659
10700
  }
10660
10701
 
10661
10702
  /* Group hover — text-only, no border */
@@ -10700,6 +10741,17 @@ button[data-step-number] {
10700
10741
  * Clean, understated tree with subtle borders.
10701
10742
  */
10702
10743
 
10744
+ /* =============================================================================
10745
+ Connector Lines — hairline tone (mode-aware), not currentColor (which
10746
+ renders white in dark mode and greyish in light).
10747
+ ============================================================================= */
10748
+
10749
+ [data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-v],
10750
+ [data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-h],
10751
+ [data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
10752
+ border-color:var(--paper-edge);
10753
+ }
10754
+
10703
10755
  /* =============================================================================
10704
10756
  Tree Container
10705
10757
  ============================================================================= */
@@ -10713,11 +10765,11 @@ button[data-step-number] {
10713
10765
  ============================================================================= */
10714
10766
 
10715
10767
  [data-style='minimal'] [data-tree-toggle-btn] {
10716
- color:var(--paper-edge);
10768
+ color:var(--ink-mute);
10717
10769
  }
10718
10770
 
10719
10771
  [data-style='minimal'] [data-tree-toggle-btn]:hover {
10720
- background-image:none;color:var(--ink-soft);
10772
+ background-image:none;color:var(--ink-mute);
10721
10773
  }
10722
10774
 
10723
10775
  /* =============================================================================
@@ -10771,11 +10823,11 @@ button[data-step-number] {
10771
10823
  ============================================================================= */
10772
10824
 
10773
10825
  [data-style='minimal'] [data-tree-item-content] [data-item-icon] {
10774
- color:var(--ink-soft);
10826
+ color:var(--ink-mute);
10775
10827
  }
10776
10828
 
10777
10829
  [data-style='minimal'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
10778
- color:var(--ink-soft);
10830
+ color:var(--ink-mute);
10779
10831
  }
10780
10832
 
10781
10833
  [data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-icon] {
@@ -10783,7 +10835,7 @@ button[data-step-number] {
10783
10835
  }
10784
10836
 
10785
10837
  [data-style='minimal'] [data-tree-item-content] [data-item-description] {
10786
- color:var(--ink-soft);
10838
+ color:var(--ink-mute);
10787
10839
  }
10788
10840
 
10789
10841
  [data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-description] {
@@ -10791,7 +10843,7 @@ button[data-step-number] {
10791
10843
  }
10792
10844
 
10793
10845
  [data-style='minimal'] [data-tree-item-content] [data-item-badge] {
10794
- border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-edge);
10846
+ border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-edge);
10795
10847
  }
10796
10848
 
10797
10849
  [data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-badge] {
@@ -10867,7 +10919,7 @@ button[data-step-number] {
10867
10919
  ============================================================================= */
10868
10920
 
10869
10921
  [data-style='minimal'] [data-select-placeholder] {
10870
- color:var(--ink-soft);
10922
+ color:var(--ink-mute);
10871
10923
  }
10872
10924
 
10873
10925
  /* =============================================================================
@@ -10875,11 +10927,11 @@ button[data-step-number] {
10875
10927
  ============================================================================= */
10876
10928
 
10877
10929
  [data-style='minimal'] [data-select-arrow] {
10878
- color:var(--ink-soft);
10930
+ color:var(--ink-mute);
10879
10931
  }
10880
10932
 
10881
10933
  [data-style='minimal'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
10882
- color:var(--ink-soft);
10934
+ color:var(--ink-mute);
10883
10935
  }
10884
10936
 
10885
10937
  /* =============================================================================
@@ -10891,7 +10943,7 @@ button[data-step-number] {
10891
10943
  }
10892
10944
 
10893
10945
  [data-style='minimal'] [data-select-tag-remove] {
10894
- color:var(--ink-soft);
10946
+ color:var(--ink-mute);
10895
10947
  }
10896
10948
 
10897
10949
  [data-style='minimal'] [data-select-tag-remove]:hover {
@@ -10948,7 +11000,7 @@ button[data-step-number] {
10948
11000
 
10949
11001
  /* Item elements */
10950
11002
  [data-style='minimal'] [data-select-option] [data-item-description] {
10951
- color:var(--ink-soft);
11003
+ color:var(--ink-mute);
10952
11004
  }
10953
11005
 
10954
11006
  [data-style='minimal'] [data-select-option][data-selected='true'] [data-item-description] {
@@ -10960,7 +11012,7 @@ button[data-step-number] {
10960
11012
  ============================================================================= */
10961
11013
 
10962
11014
  [data-style='minimal'] [data-select-group-label] {
10963
- color:var(--ink-soft);
11015
+ color:var(--ink-mute);
10964
11016
  }
10965
11017
 
10966
11018
  /* =============================================================================
@@ -10988,11 +11040,11 @@ button[data-step-number] {
10988
11040
  }
10989
11041
 
10990
11042
  [data-style='minimal'] [data-select-filter-input]::placeholder {
10991
- color:var(--ink-soft);
11043
+ color:var(--ink-mute);
10992
11044
  }
10993
11045
 
10994
11046
  [data-style='minimal'] [data-select-empty] {
10995
- color:var(--ink-soft);
11047
+ color:var(--ink-mute);
10996
11048
  }
10997
11049
 
10998
11050
  /**
@@ -11023,7 +11075,7 @@ button[data-step-number] {
11023
11075
 
11024
11076
  /* Trigger elements */
11025
11077
  [data-style='minimal'] [data-menu-trigger] [data-menu-icon] {
11026
- color:var(--ink-soft);
11078
+ color:var(--ink-mute);
11027
11079
  }
11028
11080
 
11029
11081
  [data-style='minimal'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
@@ -11031,7 +11083,7 @@ button[data-step-number] {
11031
11083
  }
11032
11084
 
11033
11085
  [data-style='minimal'] [data-menu-trigger] [data-menu-arrow] {
11034
- color:var(--paper-edge);
11086
+ color:var(--ink-mute);
11035
11087
  }
11036
11088
 
11037
11089
  /* =============================================================================
@@ -11057,15 +11109,15 @@ button[data-step-number] {
11057
11109
 
11058
11110
  /* Item elements */
11059
11111
  [data-style='minimal'] [data-menu-item] [data-item-icon] {
11060
- color:var(--ink-soft);
11112
+ color:var(--ink-mute);
11061
11113
  }
11062
11114
 
11063
11115
  [data-style='minimal'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
11064
- color:var(--ink-soft);
11116
+ color:var(--ink-mute);
11065
11117
  }
11066
11118
 
11067
11119
  [data-style='minimal'] [data-menu-item] [data-item-description] {
11068
- color:var(--ink-soft);
11120
+ color:var(--ink-mute);
11069
11121
  }
11070
11122
 
11071
11123
  /* =============================================================================
@@ -11073,7 +11125,7 @@ button[data-step-number] {
11073
11125
  ============================================================================= */
11074
11126
 
11075
11127
  [data-style='minimal'] [data-menu-group] {
11076
- color:var(--ink-soft);
11128
+ color:var(--ink-mute);
11077
11129
  }
11078
11130
 
11079
11131
  /* =============================================================================
@@ -11107,11 +11159,11 @@ button[data-step-number] {
11107
11159
  }
11108
11160
 
11109
11161
  [data-style='minimal'] [data-dropdown-trigger] [data-dropdown-icon] {
11110
- color:var(--ink-soft);
11162
+ color:var(--ink-mute);
11111
11163
  }
11112
11164
 
11113
11165
  [data-style='minimal'] [data-dropdown-trigger] [data-dropdown-arrow] {
11114
- color:var(--paper-edge);
11166
+ color:var(--ink-mute);
11115
11167
  }
11116
11168
 
11117
11169
  [data-style='minimal'] [data-dropdown-panel] {
@@ -11382,7 +11434,7 @@ button[data-step-number] {
11382
11434
  ============================================================================= */
11383
11435
 
11384
11436
  [data-style='minimal'] [data-table-header] th {
11385
- border-bottom-width:1px;color:var(--ink-soft);border-color:var(--paper-edge);background-color:var(--paper-mute);
11437
+ border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-edge);background-color:var(--paper-mute);
11386
11438
  }
11387
11439
 
11388
11440
  [data-style='minimal'] [data-table-header-cell][data-sortable='true']:hover {
@@ -11395,7 +11447,7 @@ button[data-step-number] {
11395
11447
  }
11396
11448
 
11397
11449
  [data-style='minimal'] [data-table-sort-icon] {
11398
- color:var(--ink-soft);
11450
+ color:var(--ink-mute);
11399
11451
  }
11400
11452
 
11401
11453
  [data-style='minimal'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
@@ -11456,7 +11508,7 @@ button[data-step-number] {
11456
11508
  ============================================================================= */
11457
11509
 
11458
11510
  [data-style='minimal'] [data-table-empty] {
11459
- color:var(--ink-soft);
11511
+ color:var(--ink-mute);
11460
11512
  }
11461
11513
 
11462
11514
  /* =============================================================================
@@ -11464,7 +11516,7 @@ button[data-step-number] {
11464
11516
  ============================================================================= */
11465
11517
 
11466
11518
  [data-style='minimal'] [data-table-cell] [data-cell-icon] {
11467
- color:var(--ink-soft);
11519
+ color:var(--ink-mute);
11468
11520
  }
11469
11521
 
11470
11522
  [data-style='minimal'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -11481,7 +11533,7 @@ button[data-step-number] {
11481
11533
  }
11482
11534
 
11483
11535
  [data-style='minimal'] [data-table-responsive] [data-table-cell]::before {
11484
- color:var(--ink-soft);
11536
+ color:var(--ink-mute);
11485
11537
  }
11486
11538
 
11487
11539
  /* Disable striped alternating bg in card layout */
@@ -11652,11 +11704,11 @@ button[data-step-number] {
11652
11704
  }
11653
11705
 
11654
11706
  [data-style='minimal'] [data-timeline-item][data-completed] [data-timeline-circle] {
11655
- border-color:var(--primary);color:var(--primary);
11707
+ border-color:var(--primary);color:var(--ink);
11656
11708
  }
11657
11709
 
11658
11710
  [data-style='minimal'] [data-timeline-item][data-active] [data-timeline-circle] {
11659
- border-bottom-width:2px;border-color:var(--primary);color:var(--primary);
11711
+ border-bottom-width:2px;border-color:var(--primary);color:var(--ink);
11660
11712
  }
11661
11713
 
11662
11714
  /* =============================================================================
@@ -11668,7 +11720,7 @@ button[data-step-number] {
11668
11720
  }
11669
11721
 
11670
11722
  [data-style='minimal'] [data-timeline-item][data-completed] [data-timeline-connector] {
11671
- background-color:var(--primary);
11723
+ background-color: var(--primary);
11672
11724
  }
11673
11725
 
11674
11726
  /* =============================================================================
@@ -11851,8 +11903,8 @@ button[data-step-number] {
11851
11903
  }
11852
11904
 
11853
11905
  [data-style='minimal'] [data-card][data-variant='primary'] [data-card-body] {
11854
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
11855
- }[data-mode="dark"][data-style="minimal"] [data-card][data-variant="primary"] [data-card-body],[data-mode="dark"] [data-style="minimal"] [data-card][data-variant="primary"] [data-card-body]{color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);}
11906
+ color:rgb(22 22 22 / 0.8);
11907
+ }
11856
11908
 
11857
11909
  /* Secondary — solid secondary fill */
11858
11910
  [data-style='minimal'] [data-card][data-variant='secondary'] {
@@ -11865,8 +11917,8 @@ button[data-step-number] {
11865
11917
  }
11866
11918
 
11867
11919
  [data-style='minimal'] [data-card][data-variant='secondary'] [data-card-body] {
11868
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
11869
- }[data-mode="dark"][data-style="minimal"] [data-card][data-variant="secondary"] [data-card-body],[data-mode="dark"] [data-style="minimal"] [data-card][data-variant="secondary"] [data-card-body]{color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);}
11920
+ color:rgb(22 22 22 / 0.8);
11921
+ }
11870
11922
 
11871
11923
  /* Tertiary — recessed surface, lighter border */
11872
11924
  [data-style='minimal'] [data-card][data-variant='tertiary'] {
@@ -12339,23 +12391,27 @@ button[data-step-number] {
12339
12391
 
12340
12392
  [data-style='material'] [data-button][data-style='default'][data-variant='primary'],
12341
12393
  [data-style='material'] [data-button]:not([data-style])[data-variant='primary'] {
12342
- background-image:none;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--primary);color:var(--on-primary);
12394
+ background-image:none;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);color:var(--on-primary);
12395
+ background-color: var(--primary);
12343
12396
  }
12344
12397
 
12345
12398
  [data-style='material'] [data-button][data-style='default'][data-variant='secondary'],
12346
12399
  [data-style='material'] [data-button]:not([data-style])[data-variant='secondary'] {
12347
- background-image:none;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--accent);color:var(--on-primary);
12400
+ background-image:none;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);color:var(--on-primary);
12401
+ background-color: var(--accent);
12348
12402
  }
12349
12403
 
12350
12404
  [data-style='material'] [data-button][data-style='default'][data-variant='accent'],
12351
12405
  [data-style='material'] [data-button]:not([data-style])[data-variant='accent'] {
12352
- background-image:none;--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--accent);
12353
- }[data-mode="dark"][data-style="material"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"] [data-style="material"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"][data-style="material"] [data-button]:not([data-style])[data-variant="accent"],[data-mode="dark"] [data-style="material"] [data-button]:not([data-style])[data-variant="accent"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);}
12406
+ background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
12407
+ background-color: var(--accent);
12408
+ }
12354
12409
 
12355
12410
  [data-style='material'] [data-button][data-style='default'][data-variant='danger'],
12356
12411
  [data-style='material'] [data-button]:not([data-style])[data-variant='danger'] {
12357
- background-image:none;--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--danger);
12358
- }[data-mode="dark"][data-style="material"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"] [data-style="material"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"][data-style="material"] [data-button]:not([data-style])[data-variant="danger"],[data-mode="dark"] [data-style="material"] [data-button]:not([data-style])[data-variant="danger"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);}
12412
+ background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
12413
+ background-color: var(--danger);
12414
+ }
12359
12415
 
12360
12416
  /* =============================================================================
12361
12417
  Outline Style
@@ -12429,12 +12485,12 @@ button[data-step-number] {
12429
12485
  }
12430
12486
 
12431
12487
  [data-style='material'] [data-button][data-style='gradient'][data-variant='accent'] {
12432
- --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
12433
- }[data-mode="dark"][data-style="material"] [data-button][data-style="gradient"][data-variant="accent"],[data-mode="dark"] [data-style="material"] [data-button][data-style="gradient"][data-variant="accent"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);}
12488
+ --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
12489
+ }
12434
12490
 
12435
12491
  [data-style='material'] [data-button][data-style='gradient'][data-variant='danger'] {
12436
- --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
12437
- }[data-mode="dark"][data-style="material"] [data-button][data-style="gradient"][data-variant="danger"],[data-mode="dark"] [data-style="material"] [data-button][data-style="gradient"][data-variant="danger"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);}
12492
+ --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
12493
+ }
12438
12494
 
12439
12495
  [data-style='material']
12440
12496
  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
@@ -12773,7 +12829,7 @@ button[data-step-number] {
12773
12829
  ============================================================================= */
12774
12830
 
12775
12831
  [data-style='material'] [data-tabs-trigger] {
12776
- border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:transparent;color:var(--ink-soft);
12832
+ border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:transparent;color:var(--ink-mute);
12777
12833
  }
12778
12834
 
12779
12835
  [data-style='material'] [data-tabs][data-position='after'] [data-tabs-trigger] {
@@ -12786,7 +12842,8 @@ button[data-step-number] {
12786
12842
 
12787
12843
  /* Selected state */
12788
12844
  [data-style='material'] [data-tabs-trigger][data-selected] {
12789
- --un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--primary);color:var(--on-primary);
12845
+ --un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);color:var(--on-primary);
12846
+ background-color: var(--primary);
12790
12847
  }
12791
12848
 
12792
12849
  /* Reset rokkit gradients bleeding in from body[data-style='rokkit'] ancestor */
@@ -12820,7 +12877,7 @@ button[data-step-number] {
12820
12877
  ============================================================================= */
12821
12878
 
12822
12879
  [data-style='material'] [data-tabs-trigger] [data-tabs-icon] {
12823
- color:var(--ink-soft);
12880
+ color:var(--ink-mute);
12824
12881
  }
12825
12882
 
12826
12883
  [data-style='material'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
@@ -12858,7 +12915,7 @@ button[data-step-number] {
12858
12915
  ============================================================================= */
12859
12916
 
12860
12917
  [data-style='material'] [data-toggle-option] {
12861
- border-radius:9999px;color:var(--ink-soft);
12918
+ border-radius:9999px;color:var(--ink-mute);
12862
12919
  }
12863
12920
 
12864
12921
  [data-style='material'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -12868,7 +12925,8 @@ button[data-step-number] {
12868
12925
 
12869
12926
  /* Selected state */
12870
12927
  [data-style='material'] [data-toggle-option][data-selected='true'] {
12871
- background-image:none;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--primary);color:var(--on-primary);
12928
+ background-image:none;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);color:var(--on-primary);
12929
+ background-color: var(--primary);
12872
12930
  }
12873
12931
 
12874
12932
  /* =============================================================================
@@ -12876,7 +12934,7 @@ button[data-step-number] {
12876
12934
  ============================================================================= */
12877
12935
 
12878
12936
  [data-style='material'] [data-toggle-option] [data-toggle-icon] {
12879
- color:var(--ink-soft);
12937
+ color:var(--ink-mute);
12880
12938
  }
12881
12939
 
12882
12940
  [data-style='material'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -12896,7 +12954,7 @@ button[data-step-number] {
12896
12954
  ============================================================================= */
12897
12955
 
12898
12956
  [data-style='material'] [data-toggle][data-toggle-variant='button'] {
12899
- border-color:transparent;background-color:transparent;color:var(--ink-soft);
12957
+ border-color:transparent;background-color:transparent;color:var(--ink-mute);
12900
12958
  background-image: none;
12901
12959
  }
12902
12960
 
@@ -12906,7 +12964,7 @@ button[data-step-number] {
12906
12964
  }
12907
12965
 
12908
12966
  [data-style='material'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
12909
- color:var(--ink-soft);
12967
+ color:var(--ink-mute);
12910
12968
  }
12911
12969
 
12912
12970
  [data-style='material'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
@@ -13001,7 +13059,7 @@ button[data-step-number] {
13001
13059
  ============================================================================= */
13002
13060
 
13003
13061
  [data-style='material'] [data-list] [data-list-item] [data-item-icon] {
13004
- color:var(--ink-soft);
13062
+ color:var(--ink-mute);
13005
13063
  }
13006
13064
 
13007
13065
  [data-style='material'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
@@ -13015,7 +13073,7 @@ button[data-step-number] {
13015
13073
 
13016
13074
  /* Literal / kanji icons */
13017
13075
  [data-style='material'] [data-list] [data-list-item] [data-item-icon-literal] {
13018
- color:var(--ink-soft);
13076
+ color:var(--ink-mute);
13019
13077
  }
13020
13078
 
13021
13079
  [data-style='material'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
@@ -13028,7 +13086,7 @@ button[data-step-number] {
13028
13086
  }
13029
13087
 
13030
13088
  [data-style='material'] [data-list] [data-list-item] [data-item-description] {
13031
- color:var(--ink-soft);
13089
+ color:var(--ink-mute);
13032
13090
  }
13033
13091
 
13034
13092
  [data-style='material'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
@@ -13036,7 +13094,7 @@ button[data-step-number] {
13036
13094
  }
13037
13095
 
13038
13096
  [data-style='material'] [data-list] [data-list-item] [data-item-badge] {
13039
- border-radius:9999px;background-image:none;background-color:var(--paper-mute);color:var(--ink-soft);
13097
+ border-radius:9999px;background-image:none;background-color:var(--paper-mute);color:var(--ink-mute);
13040
13098
  }
13041
13099
 
13042
13100
  [data-style='material'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
@@ -13048,7 +13106,7 @@ button[data-step-number] {
13048
13106
  ============================================================================= */
13049
13107
 
13050
13108
  [data-style='material'] [data-list] [data-list-group] {
13051
- font-weight:500;color:var(--ink-soft);
13109
+ font-weight:500;color:var(--ink-mute);
13052
13110
  }
13053
13111
 
13054
13112
  [data-style='material'] [data-list] [data-list-group]:hover:not(:disabled),
@@ -13090,6 +13148,17 @@ button[data-step-number] {
13090
13148
  * Material Design inspired with subtle elevation.
13091
13149
  */
13092
13150
 
13151
+ /* =============================================================================
13152
+ Connector Lines — hairline tone (mode-aware), not currentColor (which
13153
+ renders white in dark mode and greyish in light).
13154
+ ============================================================================= */
13155
+
13156
+ [data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-v],
13157
+ [data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-h],
13158
+ [data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
13159
+ border-color:var(--paper-edge);
13160
+ }
13161
+
13093
13162
  /* =============================================================================
13094
13163
  Tree Container
13095
13164
  ============================================================================= */
@@ -13103,7 +13172,7 @@ button[data-step-number] {
13103
13172
  ============================================================================= */
13104
13173
 
13105
13174
  [data-style='material'] [data-tree-toggle-btn] {
13106
- border-radius:9999px;color:var(--ink-soft);
13175
+ border-radius:9999px;color:var(--ink-mute);
13107
13176
  }
13108
13177
 
13109
13178
  [data-style='material'] [data-tree-toggle-btn]:hover {
@@ -13159,7 +13228,7 @@ button[data-step-number] {
13159
13228
  ============================================================================= */
13160
13229
 
13161
13230
  [data-style='material'] [data-tree-item-content] [data-item-icon] {
13162
- color:var(--ink-soft);
13231
+ color:var(--ink-mute);
13163
13232
  }
13164
13233
 
13165
13234
  [data-style='material'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
@@ -13171,7 +13240,7 @@ button[data-step-number] {
13171
13240
  }
13172
13241
 
13173
13242
  [data-style='material'] [data-tree-item-content] [data-item-description] {
13174
- color:var(--ink-soft);
13243
+ color:var(--ink-mute);
13175
13244
  }
13176
13245
 
13177
13246
  [data-style='material'] [data-tree-item-content][data-active='true'] [data-item-description] {
@@ -13179,7 +13248,7 @@ button[data-step-number] {
13179
13248
  }
13180
13249
 
13181
13250
  [data-style='material'] [data-tree-item-content] [data-item-badge] {
13182
- border-radius:9999px;background-image:none;color:var(--ink-soft);background-color:var(--paper-mute);
13251
+ border-radius:9999px;background-image:none;color:var(--ink-mute);background-color:var(--paper-mute);
13183
13252
  }
13184
13253
 
13185
13254
  [data-style='material'] [data-tree-item-content][data-active='true'] [data-item-badge] {
@@ -13250,7 +13319,7 @@ button[data-step-number] {
13250
13319
  ============================================================================= */
13251
13320
 
13252
13321
  [data-style='material'] [data-select-placeholder] {
13253
- color:var(--ink-soft);
13322
+ color:var(--ink-mute);
13254
13323
  }
13255
13324
 
13256
13325
  /* =============================================================================
@@ -13258,7 +13327,7 @@ button[data-step-number] {
13258
13327
  ============================================================================= */
13259
13328
 
13260
13329
  [data-style='material'] [data-select-arrow] {
13261
- color:var(--ink-soft);
13330
+ color:var(--ink-mute);
13262
13331
  }
13263
13332
 
13264
13333
  [data-style='material'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
@@ -13274,7 +13343,7 @@ button[data-step-number] {
13274
13343
  }
13275
13344
 
13276
13345
  [data-style='material'] [data-select-tag-remove] {
13277
- border-radius:9999px;color:var(--ink-soft);
13346
+ border-radius:9999px;color:var(--ink-mute);
13278
13347
  }
13279
13348
 
13280
13349
  [data-style='material'] [data-select-tag-remove]:hover {
@@ -13338,7 +13407,7 @@ button[data-step-number] {
13338
13407
 
13339
13408
  /* Item elements */
13340
13409
  [data-style='material'] [data-select-option] [data-item-icon] {
13341
- color:var(--ink-soft);
13410
+ color:var(--ink-mute);
13342
13411
  }
13343
13412
 
13344
13413
  [data-style='material'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
@@ -13350,7 +13419,7 @@ button[data-step-number] {
13350
13419
  }
13351
13420
 
13352
13421
  [data-style='material'] [data-select-option] [data-item-description] {
13353
- color:var(--ink-soft);
13422
+ color:var(--ink-mute);
13354
13423
  }
13355
13424
 
13356
13425
  [data-style='material'] [data-select-option][data-selected='true'] [data-item-description] {
@@ -13362,7 +13431,7 @@ button[data-step-number] {
13362
13431
  ============================================================================= */
13363
13432
 
13364
13433
  [data-style='material'] [data-select-group-label] {
13365
- font-weight:500;color:var(--ink-soft);
13434
+ font-weight:500;color:var(--ink-mute);
13366
13435
  }
13367
13436
 
13368
13437
  /* =============================================================================
@@ -13390,11 +13459,11 @@ button[data-step-number] {
13390
13459
  }
13391
13460
 
13392
13461
  [data-style='material'] [data-select-filter-input]::placeholder {
13393
- color:var(--ink-soft);
13462
+ color:var(--ink-mute);
13394
13463
  }
13395
13464
 
13396
13465
  [data-style='material'] [data-select-empty] {
13397
- color:var(--ink-soft);
13466
+ color:var(--ink-mute);
13398
13467
  }
13399
13468
 
13400
13469
  /**
@@ -13425,7 +13494,7 @@ button[data-step-number] {
13425
13494
 
13426
13495
  /* Trigger elements */
13427
13496
  [data-style='material'] [data-menu-trigger] [data-menu-icon] {
13428
- color:var(--ink-soft);
13497
+ color:var(--ink-mute);
13429
13498
  }
13430
13499
 
13431
13500
  [data-style='material'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
@@ -13433,7 +13502,7 @@ button[data-step-number] {
13433
13502
  }
13434
13503
 
13435
13504
  [data-style='material'] [data-menu-trigger] [data-menu-arrow] {
13436
- color:var(--ink-soft);
13505
+ color:var(--ink-mute);
13437
13506
  }
13438
13507
 
13439
13508
  /* =============================================================================
@@ -13463,7 +13532,7 @@ button[data-step-number] {
13463
13532
 
13464
13533
  /* Item elements */
13465
13534
  [data-style='material'] [data-menu-item] [data-item-icon] {
13466
- color:var(--ink-soft);
13535
+ color:var(--ink-mute);
13467
13536
  }
13468
13537
 
13469
13538
  [data-style='material'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
@@ -13471,7 +13540,7 @@ button[data-step-number] {
13471
13540
  }
13472
13541
 
13473
13542
  [data-style='material'] [data-menu-item] [data-item-description] {
13474
- color:var(--ink-soft);
13543
+ color:var(--ink-mute);
13475
13544
  }
13476
13545
 
13477
13546
  /* =============================================================================
@@ -13479,7 +13548,7 @@ button[data-step-number] {
13479
13548
  ============================================================================= */
13480
13549
 
13481
13550
  [data-style='material'] [data-menu-group] {
13482
- font-weight:500;color:var(--ink-soft);
13551
+ font-weight:500;color:var(--ink-mute);
13483
13552
  }
13484
13553
 
13485
13554
  /* =============================================================================
@@ -13513,11 +13582,11 @@ button[data-step-number] {
13513
13582
  }
13514
13583
 
13515
13584
  [data-style='material'] [data-dropdown-trigger] [data-dropdown-icon] {
13516
- color:var(--ink-soft);
13585
+ color:var(--ink-mute);
13517
13586
  }
13518
13587
 
13519
13588
  [data-style='material'] [data-dropdown-trigger] [data-dropdown-arrow] {
13520
- color:var(--ink-soft);
13589
+ color:var(--ink-mute);
13521
13590
  }
13522
13591
 
13523
13592
  [data-style='material'] [data-dropdown-panel] {
@@ -13617,7 +13686,7 @@ button[data-step-number] {
13617
13686
  ============================================================================= */
13618
13687
 
13619
13688
  [data-style='material'] [data-table-header] th {
13620
- border-bottom-width:1px;font-weight:500;color:var(--ink-soft);background-color:var(--paper-mute);border-color:var(--paper-edge);
13689
+ border-bottom-width:1px;font-weight:500;color:var(--ink-mute);background-color:var(--paper-mute);border-color:var(--paper-edge);
13621
13690
  }
13622
13691
 
13623
13692
  [data-style='material'] [data-table-header-cell][data-sortable='true']:hover {
@@ -13630,7 +13699,7 @@ button[data-step-number] {
13630
13699
  }
13631
13700
 
13632
13701
  [data-style='material'] [data-table-sort-icon] {
13633
- color:var(--ink-soft);
13702
+ color:var(--ink-mute);
13634
13703
  }
13635
13704
 
13636
13705
  [data-style='material']
@@ -13693,7 +13762,7 @@ button[data-step-number] {
13693
13762
  ============================================================================= */
13694
13763
 
13695
13764
  [data-style='material'] [data-table-empty] {
13696
- color:var(--ink-soft);
13765
+ color:var(--ink-mute);
13697
13766
  }
13698
13767
 
13699
13768
  /* =============================================================================
@@ -13701,7 +13770,7 @@ button[data-step-number] {
13701
13770
  ============================================================================= */
13702
13771
 
13703
13772
  [data-style='material'] [data-table-cell] [data-cell-icon] {
13704
- color:var(--ink-soft);
13773
+ color:var(--ink-mute);
13705
13774
  }
13706
13775
 
13707
13776
  [data-style='material'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -13718,7 +13787,7 @@ button[data-step-number] {
13718
13787
  }
13719
13788
 
13720
13789
  [data-style='material'] [data-table-responsive] [data-table-cell]::before {
13721
- color:var(--ink-soft);
13790
+ color:var(--ink-mute);
13722
13791
  }
13723
13792
 
13724
13793
  /* Disable striped alternating bg in card layout */
@@ -13890,11 +13959,12 @@ button[data-step-number] {
13890
13959
  }
13891
13960
 
13892
13961
  [data-style='material'] [data-timeline-item][data-completed] [data-timeline-circle] {
13893
- --un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--primary);border-color:var(--primary);color:var(--on-primary);
13962
+ --un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);border-color:var(--primary);color:var(--on-primary);
13963
+ background-color: var(--primary);
13894
13964
  }
13895
13965
 
13896
13966
  [data-style='material'] [data-timeline-item][data-active] [data-timeline-circle] {
13897
- --un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:color-mix(in srgb, var(--color-primary) calc(0.25 * 100%), transparent);border-color:var(--primary);color:var(--primary);
13967
+ --un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:color-mix(in srgb, var(--color-primary) calc(0.25 * 100%), transparent);border-color:var(--primary);color:var(--ink);
13898
13968
  }
13899
13969
 
13900
13970
  /* =============================================================================
@@ -13906,7 +13976,7 @@ button[data-step-number] {
13906
13976
  }
13907
13977
 
13908
13978
  [data-style='material'] [data-timeline-item][data-completed] [data-timeline-connector] {
13909
- background-color:var(--primary);
13979
+ background-color: var(--primary);
13910
13980
  }
13911
13981
 
13912
13982
  /* =============================================================================
@@ -14605,21 +14675,21 @@ button[data-step-number] {
14605
14675
 
14606
14676
  [data-style='frosted'] [data-button][data-style='default'][data-variant='accent'],
14607
14677
  [data-style='frosted'] [data-button]:not([data-style])[data-variant='accent'] {
14608
- border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
14678
+ border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
14609
14679
  border-color: rgba(255, 255, 255, 0.25);
14610
14680
  box-shadow:
14611
14681
  inset 0 1px 0 rgba(255, 255, 255, 0.25),
14612
14682
  0 2px 8px rgba(0, 0, 0, 0.12);
14613
- }[data-mode="dark"][data-style="frosted"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"] [data-style="frosted"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"][data-style="frosted"] [data-button]:not([data-style])[data-variant="accent"],[data-mode="dark"] [data-style="frosted"] [data-button]:not([data-style])[data-variant="accent"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);}
14683
+ }
14614
14684
 
14615
14685
  [data-style='frosted'] [data-button][data-style='default'][data-variant='danger'],
14616
14686
  [data-style='frosted'] [data-button]:not([data-style])[data-variant='danger'] {
14617
- border-width:1px;background-color:color-mix(in srgb, var(--color-danger) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
14687
+ border-width:1px;background-color:color-mix(in srgb, var(--color-danger) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
14618
14688
  border-color: rgba(255, 255, 255, 0.25);
14619
14689
  box-shadow:
14620
14690
  inset 0 1px 0 rgba(255, 255, 255, 0.25),
14621
14691
  0 2px 8px rgba(0, 0, 0, 0.12);
14622
- }[data-mode="dark"][data-style="frosted"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"] [data-style="frosted"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"][data-style="frosted"] [data-button]:not([data-style])[data-variant="danger"],[data-mode="dark"] [data-style="frosted"] [data-button]:not([data-style])[data-variant="danger"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);}
14692
+ }
14623
14693
 
14624
14694
  /* =============================================================================
14625
14695
  Outline Style
@@ -14687,7 +14757,15 @@ button[data-step-number] {
14687
14757
 
14688
14758
  [data-style='frosted'] [data-button][data-style='gradient'][data-variant='default'],
14689
14759
  [data-style='frosted'] [data-button][data-style='gradient']:not([data-variant]) {
14690
- --un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
14760
+ /* paper-* are named-token shortcuts, not wind3 colors, so they silently drop as
14761
+ gradient stops under @apply (unlike primary/accent/danger below). Write the
14762
+ translucent gradient directly. See rokkit/button.css for the same workaround. */
14763
+ background: linear-gradient(
14764
+ to bottom right,
14765
+ color-mix(in oklch, var(--paper-mute) 70%, transparent),
14766
+ color-mix(in oklch, var(--paper-soft) 50%, transparent)
14767
+ );
14768
+ --un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
14691
14769
  border-color: rgba(255, 255, 255, 0.2);
14692
14770
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
14693
14771
  }
@@ -14705,16 +14783,16 @@ button[data-step-number] {
14705
14783
  }
14706
14784
 
14707
14785
  [data-style='frosted'] [data-button][data-style='gradient'][data-variant='accent'] {
14708
- --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(0.8 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
14786
+ --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(0.8 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
14709
14787
  border-color: rgba(255, 255, 255, 0.25);
14710
14788
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
14711
- }[data-mode="dark"][data-style="frosted"] [data-button][data-style="gradient"][data-variant="accent"],[data-mode="dark"] [data-style="frosted"] [data-button][data-style="gradient"][data-variant="accent"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);}
14789
+ }
14712
14790
 
14713
14791
  [data-style='frosted'] [data-button][data-style='gradient'][data-variant='danger'] {
14714
- --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(0.8 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-danger) calc(0.6 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
14792
+ --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(0.8 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-danger) calc(0.6 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
14715
14793
  border-color: rgba(255, 255, 255, 0.25);
14716
14794
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
14717
- }[data-mode="dark"][data-style="frosted"] [data-button][data-style="gradient"][data-variant="danger"],[data-mode="dark"] [data-style="frosted"] [data-button][data-style="gradient"][data-variant="danger"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);}
14795
+ }
14718
14796
 
14719
14797
  [data-style='frosted']
14720
14798
  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
@@ -15037,7 +15115,7 @@ button[data-step-number] {
15037
15115
  ============================================================================= */
15038
15116
 
15039
15117
  [data-style='frosted'] [data-tabs-trigger] {
15040
- background-color:transparent;color:var(--ink-soft);
15118
+ background-color:transparent;color:var(--ink-mute);
15041
15119
  }
15042
15120
 
15043
15121
  [data-style='frosted'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
@@ -15055,7 +15133,7 @@ button[data-step-number] {
15055
15133
  ============================================================================= */
15056
15134
 
15057
15135
  [data-style='frosted'] [data-tabs-trigger] [data-tabs-icon] {
15058
- color:var(--ink-soft);
15136
+ color:var(--ink-mute);
15059
15137
  }
15060
15138
 
15061
15139
  [data-style='frosted'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
@@ -15095,7 +15173,7 @@ button[data-step-number] {
15095
15173
  ============================================================================= */
15096
15174
 
15097
15175
  [data-style='frosted'] [data-toggle-option] {
15098
- color:var(--ink-soft);
15176
+ color:var(--ink-mute);
15099
15177
  }
15100
15178
 
15101
15179
  [data-style='frosted'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -15114,7 +15192,7 @@ button[data-step-number] {
15114
15192
  ============================================================================= */
15115
15193
 
15116
15194
  [data-style='frosted'] [data-toggle-option] [data-toggle-icon] {
15117
- color:var(--ink-soft);
15195
+ color:var(--ink-mute);
15118
15196
  }
15119
15197
 
15120
15198
  [data-style='frosted'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -15134,7 +15212,7 @@ button[data-step-number] {
15134
15212
  ============================================================================= */
15135
15213
 
15136
15214
  [data-style='frosted'] [data-toggle][data-toggle-variant='button'] {
15137
- border-color:transparent;background-color:transparent;color:var(--ink-soft);
15215
+ border-color:transparent;background-color:transparent;color:var(--ink-mute);
15138
15216
  background-image: none;
15139
15217
  }
15140
15218
 
@@ -15144,7 +15222,7 @@ button[data-step-number] {
15144
15222
  }
15145
15223
 
15146
15224
  [data-style='frosted'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
15147
- color:var(--ink-soft);
15225
+ color:var(--ink-mute);
15148
15226
  }
15149
15227
 
15150
15228
  [data-style='frosted'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
@@ -15253,7 +15331,7 @@ button[data-step-number] {
15253
15331
  ============================================================================= */
15254
15332
 
15255
15333
  [data-style='frosted'] [data-list] [data-list-item] [data-item-icon] {
15256
- color:var(--ink-soft);
15334
+ color:var(--ink-mute);
15257
15335
  }
15258
15336
 
15259
15337
  [data-style='frosted'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
@@ -15267,7 +15345,7 @@ button[data-step-number] {
15267
15345
 
15268
15346
  /* Literal / kanji icons */
15269
15347
  [data-style='frosted'] [data-list] [data-list-item] [data-item-icon-literal] {
15270
- color:var(--ink-soft);
15348
+ color:var(--ink-mute);
15271
15349
  }
15272
15350
 
15273
15351
  [data-style='frosted'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
@@ -15291,7 +15369,7 @@ button[data-step-number] {
15291
15369
  }
15292
15370
 
15293
15371
  [data-style='frosted'] [data-list] [data-list-item] [data-item-description] {
15294
- color:var(--ink-soft);
15372
+ color:var(--ink-mute);
15295
15373
  }
15296
15374
 
15297
15375
  [data-style='frosted'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
@@ -15299,7 +15377,7 @@ button[data-step-number] {
15299
15377
  }
15300
15378
 
15301
15379
  [data-style='frosted'] [data-list] [data-list-item] [data-item-badge] {
15302
- background-image:none;color:var(--ink-soft);
15380
+ background-image:none;color:var(--ink-mute);
15303
15381
  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
15304
15382
  }
15305
15383
 
@@ -15312,7 +15390,7 @@ button[data-step-number] {
15312
15390
  ============================================================================= */
15313
15391
 
15314
15392
  [data-style='frosted'] [data-list] [data-list-group] {
15315
- color:var(--ink-soft);
15393
+ color:var(--ink-mute);
15316
15394
  }
15317
15395
 
15318
15396
  [data-style='frosted'] [data-list] [data-list-group]:hover:not(:disabled),
@@ -15356,6 +15434,17 @@ button[data-step-number] {
15356
15434
  * Glassmorphism styling with blur and transparency.
15357
15435
  */
15358
15436
 
15437
+ /* =============================================================================
15438
+ Connector Lines — hairline tone (mode-aware), not currentColor (which
15439
+ renders white in dark mode and greyish in light).
15440
+ ============================================================================= */
15441
+
15442
+ [data-style='frosted'] [data-tree]:not([data-line-style='none']) [data-connector-v],
15443
+ [data-style='frosted'] [data-tree]:not([data-line-style='none']) [data-connector-h],
15444
+ [data-style='frosted'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
15445
+ border-color:var(--paper-edge);
15446
+ }
15447
+
15359
15448
  /* =============================================================================
15360
15449
  Tree Container
15361
15450
  ============================================================================= */
@@ -15370,7 +15459,7 @@ button[data-step-number] {
15370
15459
  ============================================================================= */
15371
15460
 
15372
15461
  [data-style='frosted'] [data-tree-toggle-btn] {
15373
- color:var(--ink-soft);
15462
+ color:var(--ink-mute);
15374
15463
  }
15375
15464
 
15376
15465
  [data-style='frosted'] [data-tree-toggle-btn]:hover {
@@ -15412,7 +15501,7 @@ button[data-step-number] {
15412
15501
  ============================================================================= */
15413
15502
 
15414
15503
  [data-style='frosted'] [data-tree-item-content] [data-item-icon] {
15415
- color:var(--ink-soft);
15504
+ color:var(--ink-mute);
15416
15505
  }
15417
15506
 
15418
15507
  [data-style='frosted'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
@@ -15424,7 +15513,7 @@ button[data-step-number] {
15424
15513
  }
15425
15514
 
15426
15515
  [data-style='frosted'] [data-tree-item-content] [data-item-description] {
15427
- color:var(--ink-soft);
15516
+ color:var(--ink-mute);
15428
15517
  }
15429
15518
 
15430
15519
  [data-style='frosted'] [data-tree-item-content][data-active='true'] [data-item-description] {
@@ -15432,7 +15521,7 @@ button[data-step-number] {
15432
15521
  }
15433
15522
 
15434
15523
  [data-style='frosted'] [data-tree-item-content] [data-item-badge] {
15435
- color:var(--ink-soft);
15524
+ color:var(--ink-mute);
15436
15525
  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
15437
15526
  }
15438
15527
 
@@ -15510,7 +15599,7 @@ button[data-step-number] {
15510
15599
  ============================================================================= */
15511
15600
 
15512
15601
  [data-style='frosted'] [data-select-placeholder] {
15513
- color:var(--ink-soft);
15602
+ color:var(--ink-mute);
15514
15603
  }
15515
15604
 
15516
15605
  /* =============================================================================
@@ -15518,7 +15607,7 @@ button[data-step-number] {
15518
15607
  ============================================================================= */
15519
15608
 
15520
15609
  [data-style='frosted'] [data-select-arrow] {
15521
- color:var(--ink-soft);
15610
+ color:var(--ink-mute);
15522
15611
  }
15523
15612
 
15524
15613
  [data-style='frosted'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
@@ -15535,7 +15624,7 @@ button[data-step-number] {
15535
15624
  }
15536
15625
 
15537
15626
  [data-style='frosted'] [data-select-tag-remove] {
15538
- color:var(--ink-soft);
15627
+ color:var(--ink-mute);
15539
15628
  }
15540
15629
 
15541
15630
  [data-style='frosted'] [data-select-tag-remove]:hover {
@@ -15597,7 +15686,7 @@ button[data-step-number] {
15597
15686
 
15598
15687
  /* Item elements */
15599
15688
  [data-style='frosted'] [data-select-option] [data-item-icon] {
15600
- color:var(--ink-soft);
15689
+ color:var(--ink-mute);
15601
15690
  }
15602
15691
 
15603
15692
  [data-style='frosted'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
@@ -15609,7 +15698,7 @@ button[data-step-number] {
15609
15698
  }
15610
15699
 
15611
15700
  [data-style='frosted'] [data-select-option] [data-item-description] {
15612
- color:var(--ink-soft);
15701
+ color:var(--ink-mute);
15613
15702
  }
15614
15703
 
15615
15704
  [data-style='frosted'] [data-select-option][data-selected='true'] [data-item-description] {
@@ -15621,7 +15710,7 @@ button[data-step-number] {
15621
15710
  ============================================================================= */
15622
15711
 
15623
15712
  [data-style='frosted'] [data-select-group-label] {
15624
- color:var(--ink-soft);
15713
+ color:var(--ink-mute);
15625
15714
  }
15626
15715
 
15627
15716
  /* =============================================================================
@@ -15652,11 +15741,11 @@ button[data-step-number] {
15652
15741
  }
15653
15742
 
15654
15743
  [data-style='frosted'] [data-select-filter-input]::placeholder {
15655
- color:var(--ink-soft);
15744
+ color:var(--ink-mute);
15656
15745
  }
15657
15746
 
15658
15747
  [data-style='frosted'] [data-select-empty] {
15659
- color:var(--ink-soft);
15748
+ color:var(--ink-mute);
15660
15749
  }
15661
15750
 
15662
15751
  /**
@@ -15694,7 +15783,7 @@ button[data-step-number] {
15694
15783
 
15695
15784
  /* Trigger elements */
15696
15785
  [data-style='frosted'] [data-menu-trigger] [data-menu-icon] {
15697
- color:var(--ink-soft);
15786
+ color:var(--ink-mute);
15698
15787
  }
15699
15788
 
15700
15789
  [data-style='frosted'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
@@ -15702,7 +15791,7 @@ button[data-step-number] {
15702
15791
  }
15703
15792
 
15704
15793
  [data-style='frosted'] [data-menu-trigger] [data-menu-arrow] {
15705
- color:var(--ink-soft);
15794
+ color:var(--ink-mute);
15706
15795
  }
15707
15796
 
15708
15797
  /* =============================================================================
@@ -15739,7 +15828,7 @@ button[data-step-number] {
15739
15828
 
15740
15829
  /* Item elements */
15741
15830
  [data-style='frosted'] [data-menu-item] [data-item-icon] {
15742
- color:var(--ink-soft);
15831
+ color:var(--ink-mute);
15743
15832
  }
15744
15833
 
15745
15834
  [data-style='frosted'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
@@ -15747,7 +15836,7 @@ button[data-step-number] {
15747
15836
  }
15748
15837
 
15749
15838
  [data-style='frosted'] [data-menu-item] [data-item-description] {
15750
- color:var(--ink-soft);
15839
+ color:var(--ink-mute);
15751
15840
  }
15752
15841
 
15753
15842
  /* =============================================================================
@@ -15755,7 +15844,7 @@ button[data-step-number] {
15755
15844
  ============================================================================= */
15756
15845
 
15757
15846
  [data-style='frosted'] [data-menu-group] {
15758
- color:var(--ink-soft);
15847
+ color:var(--ink-mute);
15759
15848
  }
15760
15849
 
15761
15850
  /* =============================================================================
@@ -15797,11 +15886,11 @@ button[data-step-number] {
15797
15886
  }
15798
15887
 
15799
15888
  [data-style='frosted'] [data-dropdown-trigger] [data-dropdown-icon] {
15800
- color:var(--ink-soft);
15889
+ color:var(--ink-mute);
15801
15890
  }
15802
15891
 
15803
15892
  [data-style='frosted'] [data-dropdown-trigger] [data-dropdown-arrow] {
15804
- color:var(--ink-soft);
15893
+ color:var(--ink-mute);
15805
15894
  }
15806
15895
 
15807
15896
  [data-style='frosted'] [data-dropdown-panel] {
@@ -15910,7 +15999,7 @@ button[data-step-number] {
15910
15999
  ============================================================================= */
15911
16000
 
15912
16001
  [data-style='frosted'] [data-table-header] th {
15913
- border-bottom-width:1px;--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink-soft);
16002
+ border-bottom-width:1px;--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink-mute);
15914
16003
  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
15915
16004
  background-color: color-mix(in oklch, var(--paper-mute) 80%, transparent);
15916
16005
  }
@@ -15925,7 +16014,7 @@ button[data-step-number] {
15925
16014
  }
15926
16015
 
15927
16016
  [data-style='frosted'] [data-table-sort-icon] {
15928
- color:var(--ink-soft);
16017
+ color:var(--ink-mute);
15929
16018
  }
15930
16019
 
15931
16020
  [data-style='frosted'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
@@ -15986,7 +16075,7 @@ button[data-step-number] {
15986
16075
  ============================================================================= */
15987
16076
 
15988
16077
  [data-style='frosted'] [data-table-empty] {
15989
- color:var(--ink-soft);
16078
+ color:var(--ink-mute);
15990
16079
  }
15991
16080
 
15992
16081
  /* =============================================================================
@@ -15994,7 +16083,7 @@ button[data-step-number] {
15994
16083
  ============================================================================= */
15995
16084
 
15996
16085
  [data-style='frosted'] [data-table-cell] [data-cell-icon] {
15997
- color:var(--ink-soft);
16086
+ color:var(--ink-mute);
15998
16087
  }
15999
16088
 
16000
16089
  [data-style='frosted'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -16013,7 +16102,7 @@ button[data-step-number] {
16013
16102
  }
16014
16103
 
16015
16104
  [data-style='frosted'] [data-table-responsive] [data-table-cell]::before {
16016
- color:var(--ink-soft);
16105
+ color:var(--ink-mute);
16017
16106
  }
16018
16107
 
16019
16108
  /* Disable striped alternating bg in card layout */
@@ -16196,7 +16285,7 @@ button[data-step-number] {
16196
16285
  }
16197
16286
 
16198
16287
  [data-style='frosted'] [data-timeline-item][data-active] [data-timeline-circle] {
16199
- border-color:color-mix(in srgb, var(--color-primary) calc(0.6 * 100%), transparent);--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:color-mix(in srgb, var(--color-primary) calc(0.15 * 100%), transparent);color:var(--primary);
16288
+ border-color:color-mix(in srgb, var(--color-primary) calc(0.6 * 100%), transparent);--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:color-mix(in srgb, var(--color-primary) calc(0.15 * 100%), transparent);color:var(--ink);
16200
16289
  }
16201
16290
 
16202
16291
  /* =============================================================================
@@ -16423,8 +16512,8 @@ button[data-step-number] {
16423
16512
  }
16424
16513
 
16425
16514
  [data-style='frosted'] [data-card][data-variant='primary'] [data-card-body] {
16426
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
16427
- }[data-mode="dark"][data-style="frosted"] [data-card][data-variant="primary"] [data-card-body],[data-mode="dark"] [data-style="frosted"] [data-card][data-variant="primary"] [data-card-body]{color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);}
16515
+ color:rgb(22 22 22 / 0.8);
16516
+ }
16428
16517
 
16429
16518
  /* Secondary — tinted secondary glass */
16430
16519
  [data-style='frosted'] [data-card][data-variant='secondary'] {
@@ -16441,8 +16530,8 @@ button[data-step-number] {
16441
16530
  }
16442
16531
 
16443
16532
  [data-style='frosted'] [data-card][data-variant='secondary'] [data-card-body] {
16444
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
16445
- }[data-mode="dark"][data-style="frosted"] [data-card][data-variant="secondary"] [data-card-body],[data-mode="dark"] [data-style="frosted"] [data-card][data-variant="secondary"] [data-card-body]{color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);}
16533
+ color:rgb(22 22 22 / 0.8);
16534
+ }
16446
16535
 
16447
16536
  /* Tertiary — barely-there frosted glass */
16448
16537
  [data-style='frosted'] [data-card][data-variant='tertiary'] {
@@ -16509,7 +16598,7 @@ button[data-step-number] {
16509
16598
 
16510
16599
  [data-style='frosted'] [data-message-root][data-type='error'] {
16511
16600
  border-color:color-mix(in srgb, var(--color-error) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--error);
16512
- background-color: color-mix(in oklch, var(--error-soft) 50%, transparent);
16601
+ background-color: var(--error-soft);
16513
16602
  }
16514
16603
  [data-style='frosted'] [data-message-root][data-type='error'] [data-message-icon],
16515
16604
  [data-style='frosted'] [data-message-root][data-type='error'] [data-message-dismiss] {
@@ -16518,7 +16607,7 @@ button[data-step-number] {
16518
16607
 
16519
16608
  [data-style='frosted'] [data-message-root][data-type='warning'] {
16520
16609
  border-color:color-mix(in srgb, var(--color-warning) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--warning);
16521
- background-color: color-mix(in oklch, var(--warning-soft) 50%, transparent);
16610
+ background-color: var(--warning-soft);
16522
16611
  }
16523
16612
  [data-style='frosted'] [data-message-root][data-type='warning'] [data-message-icon],
16524
16613
  [data-style='frosted'] [data-message-root][data-type='warning'] [data-message-dismiss] {
@@ -16527,7 +16616,7 @@ button[data-step-number] {
16527
16616
 
16528
16617
  [data-style='frosted'] [data-message-root][data-type='info'] {
16529
16618
  border-color:color-mix(in srgb, var(--color-info) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--info);
16530
- background-color: color-mix(in oklch, var(--info-soft) 50%, transparent);
16619
+ background-color: var(--info-soft);
16531
16620
  }
16532
16621
  [data-style='frosted'] [data-message-root][data-type='info'] [data-message-icon],
16533
16622
  [data-style='frosted'] [data-message-root][data-type='info'] [data-message-dismiss] {
@@ -16536,7 +16625,7 @@ button[data-step-number] {
16536
16625
 
16537
16626
  [data-style='frosted'] [data-message-root][data-type='success'] {
16538
16627
  border-color:color-mix(in srgb, var(--color-success) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--success);
16539
- background-color: color-mix(in oklch, var(--success-soft) 50%, transparent);
16628
+ background-color: var(--success-soft);
16540
16629
  }
16541
16630
  [data-style='frosted'] [data-message-root][data-type='success'] [data-message-icon],
16542
16631
  [data-style='frosted'] [data-message-root][data-type='success'] [data-message-dismiss] {
@@ -16943,23 +17032,27 @@ button[data-step-number] {
16943
17032
 
16944
17033
  [data-style='zen-sumi'] [data-button][data-style='default'][data-variant='primary'],
16945
17034
  [data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='primary'] {
16946
- border-color:transparent;background-image:none;background-color:var(--primary);color:var(--on-primary);
17035
+ border-color:transparent;background-image:none;color:var(--on-primary);
17036
+ background-color: var(--primary);
16947
17037
  }
16948
17038
 
16949
17039
  [data-style='zen-sumi'] [data-button][data-style='default'][data-variant='secondary'],
16950
17040
  [data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='secondary'] {
16951
- border-color:transparent;background-image:none;background-color:var(--accent);color:var(--on-primary);
17041
+ border-color:transparent;background-image:none;color:var(--on-primary);
17042
+ background-color: var(--accent);
16952
17043
  }
16953
17044
 
16954
17045
  [data-style='zen-sumi'] [data-button][data-style='default'][data-variant='accent'],
16955
17046
  [data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='accent'] {
16956
- border-color:transparent;background-image:none;--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--accent);
16957
- }[data-mode="dark"][data-style="zen-sumi"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"] [data-style="zen-sumi"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"][data-style="zen-sumi"] [data-button]:not([data-style])[data-variant="accent"],[data-mode="dark"] [data-style="zen-sumi"] [data-button]:not([data-style])[data-variant="accent"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);}
17047
+ border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
17048
+ background-color: var(--accent);
17049
+ }
16958
17050
 
16959
17051
  [data-style='zen-sumi'] [data-button][data-style='default'][data-variant='danger'],
16960
17052
  [data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='danger'] {
16961
- border-color:transparent;background-image:none;--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--danger);
16962
- }[data-mode="dark"][data-style="zen-sumi"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"] [data-style="zen-sumi"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"][data-style="zen-sumi"] [data-button]:not([data-style])[data-variant="danger"],[data-mode="dark"] [data-style="zen-sumi"] [data-button]:not([data-style])[data-variant="danger"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);}
17053
+ border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
17054
+ background-color: var(--danger);
17055
+ }
16963
17056
 
16964
17057
  /* =============================================================================
16965
17058
  Outline Style
@@ -17026,20 +17119,24 @@ button[data-step-number] {
17026
17119
  }
17027
17120
 
17028
17121
  [data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='primary'] {
17029
- background-image:none;background-color:var(--primary);color:var(--on-primary);
17122
+ background-image:none;color:var(--on-primary);
17123
+ background-color: var(--primary);
17030
17124
  }
17031
17125
 
17032
17126
  [data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='secondary'] {
17033
- background-image:none;background-color:var(--accent);color:var(--on-primary);
17127
+ background-image:none;color:var(--on-primary);
17128
+ background-color: var(--accent);
17034
17129
  }
17035
17130
 
17036
17131
  [data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='accent'] {
17037
- background-image:none;--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--accent);
17038
- }[data-mode="dark"][data-style="zen-sumi"] [data-button][data-style="gradient"][data-variant="accent"],[data-mode="dark"] [data-style="zen-sumi"] [data-button][data-style="gradient"][data-variant="accent"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);}
17132
+ background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
17133
+ background-color: var(--accent);
17134
+ }
17039
17135
 
17040
17136
  [data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='danger'] {
17041
- background-image:none;--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--danger);
17042
- }[data-mode="dark"][data-style="zen-sumi"] [data-button][data-style="gradient"][data-variant="danger"],[data-mode="dark"] [data-style="zen-sumi"] [data-button][data-style="gradient"][data-variant="danger"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);}
17137
+ background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
17138
+ background-color: var(--danger);
17139
+ }
17043
17140
 
17044
17141
  /* =============================================================================
17045
17142
  Link Style
@@ -17211,7 +17308,7 @@ button[data-step-number] {
17211
17308
  ============================================================================= */
17212
17309
 
17213
17310
  [data-style='zen-sumi'] [data-tabs-trigger] {
17214
- border-width:0px;background-color:transparent;color:var(--ink-soft);
17311
+ border-width:0px;background-color:transparent;color:var(--ink-mute);
17215
17312
  font-weight: 400;
17216
17313
  border-radius: var(--radius-sm, 0.125rem);
17217
17314
  transition:
@@ -17220,7 +17317,7 @@ button[data-step-number] {
17220
17317
  }
17221
17318
 
17222
17319
  [data-style='zen-sumi'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
17223
- background-color:var(--paper-mute);color:var(--ink-mute);
17320
+ background-color:var(--paper-mute);color:var(--ink);
17224
17321
  }
17225
17322
 
17226
17323
  [data-style='zen-sumi'] [data-tabs-trigger][data-selected] {
@@ -17249,7 +17346,7 @@ button[data-step-number] {
17249
17346
  }
17250
17347
 
17251
17348
  [data-style='zen-sumi'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
17252
- color:var(--ink-soft);
17349
+ color:var(--ink-mute);
17253
17350
  }
17254
17351
 
17255
17352
  [data-style='zen-sumi'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
@@ -17287,7 +17384,7 @@ button[data-step-number] {
17287
17384
  ============================================================================= */
17288
17385
 
17289
17386
  [data-style='zen-sumi'] [data-toggle-option] {
17290
- border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-soft);
17387
+ border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
17291
17388
  }
17292
17389
 
17293
17390
  [data-style='zen-sumi'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -17297,7 +17394,8 @@ button[data-step-number] {
17297
17394
 
17298
17395
  /* Selected state — primary (shu) fill */
17299
17396
  [data-style='zen-sumi'] [data-toggle-option][data-selected='true'] {
17300
- background-image:none;background-color:var(--primary);color:var(--on-primary);
17397
+ background-image:none;color:var(--on-primary);
17398
+ background-color: var(--primary);
17301
17399
  font-weight: 500;
17302
17400
  }
17303
17401
 
@@ -17312,7 +17410,7 @@ button[data-step-number] {
17312
17410
  * matches the option label, and `paper` for selected contrasts cleanly
17313
17411
  * against the ink fill. */
17314
17412
  [data-style='zen-sumi'] [data-toggle-option] [data-toggle-icon] {
17315
- color:var(--ink-soft);
17413
+ color:var(--ink-mute);
17316
17414
  }
17317
17415
 
17318
17416
  [data-style='zen-sumi'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -17332,7 +17430,7 @@ button[data-step-number] {
17332
17430
  ============================================================================= */
17333
17431
 
17334
17432
  [data-style='zen-sumi'] [data-toggle][data-toggle-variant='button'] {
17335
- border-color:transparent;background-color:transparent;color:var(--ink-soft);
17433
+ border-color:transparent;background-color:transparent;color:var(--ink-mute);
17336
17434
  background-image: none;
17337
17435
  }
17338
17436
 
@@ -17342,7 +17440,7 @@ button[data-step-number] {
17342
17440
  }
17343
17441
 
17344
17442
  [data-style='zen-sumi'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
17345
- color:var(--ink-soft);
17443
+ color:var(--ink-mute);
17346
17444
  }
17347
17445
 
17348
17446
  [data-style='zen-sumi'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
@@ -17406,12 +17504,12 @@ button[data-step-number] {
17406
17504
  ============================================================================= */
17407
17505
 
17408
17506
  [data-style='zen-sumi'] [data-list] [data-list-item] {
17409
- border-width:0px;border-color:transparent;border-style:solid;background-color:transparent;color:var(--ink-soft);
17507
+ border-width:0px;border-color:transparent;border-style:solid;background-color:transparent;color:var(--ink-mute);
17410
17508
  }
17411
17509
 
17412
17510
  [data-style='zen-sumi'] [data-list] a[data-list-item],
17413
17511
  [data-style='zen-sumi'] [data-list] button[data-list-item] {
17414
- color:var(--ink-soft);
17512
+ color:var(--ink-mute);
17415
17513
  }
17416
17514
 
17417
17515
  /* Hover and focus — subtle paper wash */
@@ -17445,12 +17543,12 @@ button[data-step-number] {
17445
17543
  ============================================================================= */
17446
17544
 
17447
17545
  [data-style='zen-sumi'] [data-list] [data-list-item] [data-item-icon] {
17448
- color:var(--paper-edge);
17546
+ color:var(--ink-mute);
17449
17547
  }
17450
17548
 
17451
17549
  [data-style='zen-sumi'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
17452
17550
  [data-style='zen-sumi'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon] {
17453
- color:var(--ink-soft);
17551
+ color:var(--ink-mute);
17454
17552
  }
17455
17553
 
17456
17554
  [data-style='zen-sumi'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
@@ -17458,15 +17556,15 @@ button[data-step-number] {
17458
17556
  }
17459
17557
 
17460
17558
  [data-style='zen-sumi'] [data-list] [data-list-item] [data-item-description] {
17461
- color:var(--paper-edge);
17559
+ color:var(--ink-mute);
17462
17560
  }
17463
17561
 
17464
17562
  [data-style='zen-sumi'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
17465
- color:var(--ink-soft);
17563
+ color:var(--ink-mute);
17466
17564
  }
17467
17565
 
17468
17566
  [data-style='zen-sumi'] [data-list] [data-list-item] [data-item-badge] {
17469
- border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-mute);
17567
+ border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-mute);
17470
17568
  }
17471
17569
 
17472
17570
  [data-style='zen-sumi'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
@@ -17478,12 +17576,12 @@ button[data-step-number] {
17478
17576
  ============================================================================= */
17479
17577
 
17480
17578
  [data-style='zen-sumi'] [data-list] [data-list-group] {
17481
- color:var(--paper-edge);
17579
+ color:var(--ink-mute);
17482
17580
  }
17483
17581
 
17484
17582
  [data-style='zen-sumi'] [data-list] [data-list-group]:hover:not(:disabled),
17485
17583
  [data-style='zen-sumi'] [data-list] [data-list-group]:focus:not(:disabled) {
17486
- background-image:none;color:var(--ink-soft);
17584
+ background-image:none;color:var(--ink-mute);
17487
17585
  }
17488
17586
 
17489
17587
  /* =============================================================================
@@ -17521,6 +17619,17 @@ button[data-step-number] {
17521
17619
  * No bg fill on active — ink is in typography weight + icon color only.
17522
17620
  */
17523
17621
 
17622
+ /* =============================================================================
17623
+ Connector Lines — hairline tone (mode-aware), not currentColor (which
17624
+ renders white in dark mode and greyish in light).
17625
+ ============================================================================= */
17626
+
17627
+ [data-style='zen-sumi'] [data-tree]:not([data-line-style='none']) [data-connector-v],
17628
+ [data-style='zen-sumi'] [data-tree]:not([data-line-style='none']) [data-connector-h],
17629
+ [data-style='zen-sumi'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
17630
+ border-color:var(--paper-edge);
17631
+ }
17632
+
17524
17633
  /* =============================================================================
17525
17634
  Tree Container
17526
17635
  ============================================================================= */
@@ -17534,11 +17643,11 @@ button[data-step-number] {
17534
17643
  ============================================================================= */
17535
17644
 
17536
17645
  [data-style='zen-sumi'] [data-tree-toggle-btn] {
17537
- color:var(--paper-edge);
17646
+ color:var(--ink-mute);
17538
17647
  }
17539
17648
 
17540
17649
  [data-style='zen-sumi'] [data-tree-toggle-btn]:hover {
17541
- background-image:none;color:var(--ink-soft);
17650
+ background-image:none;color:var(--ink-mute);
17542
17651
  }
17543
17652
 
17544
17653
  /* =============================================================================
@@ -17546,7 +17655,7 @@ button[data-step-number] {
17546
17655
  ============================================================================= */
17547
17656
 
17548
17657
  [data-style='zen-sumi'] [data-tree-item-content] {
17549
- color:var(--ink-soft);
17658
+ color:var(--ink-mute);
17550
17659
  }
17551
17660
 
17552
17661
  [data-style='zen-sumi'] [data-tree-item-content]:hover:not(:disabled),
@@ -17589,11 +17698,11 @@ button[data-step-number] {
17589
17698
  ============================================================================= */
17590
17699
 
17591
17700
  [data-style='zen-sumi'] [data-tree-item-content] [data-item-icon] {
17592
- color:var(--paper-edge);
17701
+ color:var(--ink-mute);
17593
17702
  }
17594
17703
 
17595
17704
  [data-style='zen-sumi'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
17596
- color:var(--ink-soft);
17705
+ color:var(--ink-mute);
17597
17706
  }
17598
17707
 
17599
17708
  [data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-icon] {
@@ -17601,15 +17710,15 @@ button[data-step-number] {
17601
17710
  }
17602
17711
 
17603
17712
  [data-style='zen-sumi'] [data-tree-item-content] [data-item-description] {
17604
- color:var(--paper-edge);
17713
+ color:var(--ink-mute);
17605
17714
  }
17606
17715
 
17607
17716
  [data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-description] {
17608
- color:var(--ink-soft);
17717
+ color:var(--ink-mute);
17609
17718
  }
17610
17719
 
17611
17720
  [data-style='zen-sumi'] [data-tree-item-content] [data-item-badge] {
17612
- border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-mute);
17721
+ border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-mute);
17613
17722
  }
17614
17723
 
17615
17724
  [data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-badge] {
@@ -17652,6 +17761,36 @@ button[data-step-number] {
17652
17761
  color:var(--primary);
17653
17762
  }
17654
17763
 
17764
+ /**
17765
+ * Divider - Zen-Sumi Theme Styles
17766
+ *
17767
+ * Hairline ink-on-paper rule. The base leaves the line uncolored, so without
17768
+ * this the divider is invisible — pin it to the paper-edge hairline tone.
17769
+ */
17770
+
17771
+ [data-style='zen-sumi'] [data-divider][data-orientation='horizontal']::before,
17772
+ [data-style='zen-sumi'] [data-divider][data-orientation='horizontal']::after {
17773
+ background-color:var(--paper-edge);
17774
+ }
17775
+
17776
+ [data-style='zen-sumi'] [data-divider][data-orientation='vertical']::before,
17777
+ [data-style='zen-sumi'] [data-divider][data-orientation='vertical']::after {
17778
+ background-color:var(--paper-edge);
17779
+ }
17780
+
17781
+ /* No-label divider — color the element itself (no ::before/::after spacers). */
17782
+ [data-style='zen-sumi'] [data-divider][data-orientation='horizontal']:not(:has([data-divider-label])) {
17783
+ background-color:var(--paper-edge);
17784
+ }
17785
+
17786
+ [data-style='zen-sumi'] [data-divider][data-orientation='vertical']:not(:has([data-divider-label])) {
17787
+ background-color:var(--paper-edge);
17788
+ }
17789
+
17790
+ [data-style='zen-sumi'] [data-divider-label] {
17791
+ color:var(--ink-mute);
17792
+ }
17793
+
17655
17794
  /**
17656
17795
  * Select - Zen-Sumi Theme Styles
17657
17796
  *
@@ -17665,7 +17804,7 @@ button[data-step-number] {
17665
17804
  ============================================================================= */
17666
17805
 
17667
17806
  [data-style='zen-sumi'] [data-select-trigger] {
17668
- border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-mute);
17807
+ border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-mute);
17669
17808
  }
17670
17809
 
17671
17810
  [data-style='zen-sumi'] [data-select-trigger]:hover:not(:disabled) {
@@ -17686,7 +17825,7 @@ button[data-step-number] {
17686
17825
  ============================================================================= */
17687
17826
 
17688
17827
  [data-style='zen-sumi'] [data-select-placeholder] {
17689
- color:var(--paper-edge);
17828
+ color:var(--ink-mute);
17690
17829
  }
17691
17830
 
17692
17831
  /* =============================================================================
@@ -17694,11 +17833,11 @@ button[data-step-number] {
17694
17833
  ============================================================================= */
17695
17834
 
17696
17835
  [data-style='zen-sumi'] [data-select-arrow] {
17697
- color:var(--paper-edge);
17836
+ color:var(--ink-mute);
17698
17837
  }
17699
17838
 
17700
17839
  [data-style='zen-sumi'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
17701
- color:var(--paper-edge);
17840
+ color:var(--ink-mute);
17702
17841
  }
17703
17842
 
17704
17843
  /* =============================================================================
@@ -17706,11 +17845,11 @@ button[data-step-number] {
17706
17845
  ============================================================================= */
17707
17846
 
17708
17847
  [data-style='zen-sumi'] [data-select-tag] {
17709
- border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-mute);
17848
+ border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-mute);
17710
17849
  }
17711
17850
 
17712
17851
  [data-style='zen-sumi'] [data-select-tag-remove] {
17713
- color:var(--paper-edge);
17852
+ color:var(--ink-mute);
17714
17853
  }
17715
17854
 
17716
17855
  [data-style='zen-sumi'] [data-select-tag-remove]:hover {
@@ -17731,7 +17870,7 @@ button[data-step-number] {
17731
17870
  ============================================================================= */
17732
17871
 
17733
17872
  [data-style='zen-sumi'] [data-select-option] {
17734
- border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-soft);
17873
+ border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
17735
17874
  }
17736
17875
 
17737
17876
  [data-style='zen-sumi'] [data-select-option]:hover:not(:disabled),
@@ -17766,7 +17905,7 @@ button[data-step-number] {
17766
17905
 
17767
17906
  /* Item elements */
17768
17907
  [data-style='zen-sumi'] [data-select-option] [data-item-description] {
17769
- color:var(--paper-edge);
17908
+ color:var(--ink-mute);
17770
17909
  }
17771
17910
 
17772
17911
  [data-style='zen-sumi'] [data-select-option][data-selected='true'] [data-item-description] {
@@ -17778,7 +17917,7 @@ button[data-step-number] {
17778
17917
  ============================================================================= */
17779
17918
 
17780
17919
  [data-style='zen-sumi'] [data-select-group-label] {
17781
- color:var(--paper-edge);
17920
+ color:var(--ink-mute);
17782
17921
  }
17783
17922
 
17784
17923
  /* =============================================================================
@@ -17806,11 +17945,11 @@ button[data-step-number] {
17806
17945
  }
17807
17946
 
17808
17947
  [data-style='zen-sumi'] [data-select-filter-input]::placeholder {
17809
- color:var(--ink-soft);
17948
+ color:var(--ink-mute);
17810
17949
  }
17811
17950
 
17812
17951
  [data-style='zen-sumi'] [data-select-empty] {
17813
- color:var(--paper-edge);
17952
+ color:var(--ink-mute);
17814
17953
  }
17815
17954
 
17816
17955
  /**
@@ -17825,7 +17964,7 @@ button[data-step-number] {
17825
17964
  ============================================================================= */
17826
17965
 
17827
17966
  [data-style='zen-sumi'] [data-menu-trigger] {
17828
- border-width:1px;background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--ink-soft);
17967
+ border-width:1px;background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--ink-mute);
17829
17968
  }
17830
17969
 
17831
17970
  [data-style='zen-sumi'] [data-menu-trigger]:hover:not(:disabled) {
@@ -17843,15 +17982,15 @@ button[data-step-number] {
17843
17982
 
17844
17983
  /* Trigger elements */
17845
17984
  [data-style='zen-sumi'] [data-menu-trigger] [data-menu-icon] {
17846
- color:var(--paper-edge);
17985
+ color:var(--ink-mute);
17847
17986
  }
17848
17987
 
17849
17988
  [data-style='zen-sumi'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
17850
- color:var(--ink-soft);
17989
+ color:var(--ink-mute);
17851
17990
  }
17852
17991
 
17853
17992
  [data-style='zen-sumi'] [data-menu-trigger] [data-menu-arrow] {
17854
- color:var(--paper-edge);
17993
+ color:var(--ink-mute);
17855
17994
  }
17856
17995
 
17857
17996
  /* =============================================================================
@@ -17868,7 +18007,7 @@ button[data-step-number] {
17868
18007
  ============================================================================= */
17869
18008
 
17870
18009
  [data-style='zen-sumi'] [data-menu-item] {
17871
- border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-soft);
18010
+ border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
17872
18011
  }
17873
18012
 
17874
18013
  [data-style='zen-sumi'] [data-menu-item]:hover:not(:disabled),
@@ -17878,15 +18017,15 @@ button[data-step-number] {
17878
18017
 
17879
18018
  /* Item elements */
17880
18019
  [data-style='zen-sumi'] [data-menu-item] [data-item-icon] {
17881
- color:var(--paper-edge);
18020
+ color:var(--ink-mute);
17882
18021
  }
17883
18022
 
17884
18023
  [data-style='zen-sumi'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
17885
- color:var(--ink-soft);
18024
+ color:var(--ink-mute);
17886
18025
  }
17887
18026
 
17888
18027
  [data-style='zen-sumi'] [data-menu-item] [data-item-description] {
17889
- color:var(--paper-edge);
18028
+ color:var(--ink-mute);
17890
18029
  }
17891
18030
 
17892
18031
  /* =============================================================================
@@ -17894,7 +18033,7 @@ button[data-step-number] {
17894
18033
  ============================================================================= */
17895
18034
 
17896
18035
  [data-style='zen-sumi'] [data-menu-group] {
17897
- color:var(--paper-edge);
18036
+ color:var(--ink-mute);
17898
18037
  }
17899
18038
 
17900
18039
  /* =============================================================================
@@ -17913,7 +18052,7 @@ button[data-step-number] {
17913
18052
  */
17914
18053
 
17915
18054
  [data-style='zen-sumi'] [data-dropdown-trigger] {
17916
- border-width:1px;background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--ink-soft);
18055
+ border-width:1px;background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--ink-mute);
17917
18056
  }
17918
18057
 
17919
18058
  [data-style='zen-sumi'] [data-dropdown-trigger]:hover:not(:disabled) {
@@ -17930,11 +18069,11 @@ button[data-step-number] {
17930
18069
  }
17931
18070
 
17932
18071
  [data-style='zen-sumi'] [data-dropdown-trigger] [data-dropdown-icon] {
17933
- color:var(--paper-edge);
18072
+ color:var(--ink-mute);
17934
18073
  }
17935
18074
 
17936
18075
  [data-style='zen-sumi'] [data-dropdown-trigger] [data-dropdown-arrow] {
17937
- color:var(--paper-edge);
18076
+ color:var(--ink-mute);
17938
18077
  }
17939
18078
 
17940
18079
  [data-style='zen-sumi'] [data-dropdown-panel] {
@@ -17943,7 +18082,7 @@ button[data-step-number] {
17943
18082
  }
17944
18083
 
17945
18084
  [data-style='zen-sumi'] [data-dropdown-option] {
17946
- color:var(--ink-soft);
18085
+ color:var(--ink-mute);
17947
18086
  }
17948
18087
 
17949
18088
  [data-style='zen-sumi'] [data-dropdown-option]:hover:not(:disabled),
@@ -18212,7 +18351,7 @@ button[data-step-number] {
18212
18351
  ============================================================================= */
18213
18352
 
18214
18353
  [data-style='zen-sumi'] [data-table-header] th {
18215
- border-bottom-width:1px;background-color:transparent;color:var(--ink-soft);border-color:var(--paper-mute);
18354
+ border-bottom-width:1px;background-color:transparent;color:var(--ink-mute);border-color:var(--paper-mute);
18216
18355
  font-size: 0.6875rem;
18217
18356
  font-weight: 600;
18218
18357
  letter-spacing: 0.05em;
@@ -18246,7 +18385,7 @@ button[data-step-number] {
18246
18385
  ============================================================================= */
18247
18386
 
18248
18387
  [data-style='zen-sumi'] [data-table-caption] {
18249
- color:var(--ink-soft);
18388
+ color:var(--ink-mute);
18250
18389
  }
18251
18390
 
18252
18391
  /* =============================================================================
@@ -18254,7 +18393,7 @@ button[data-step-number] {
18254
18393
  ============================================================================= */
18255
18394
 
18256
18395
  [data-style='zen-sumi'] [data-table-row] {
18257
- border-bottom-width:1px;color:var(--ink-soft);border-color:var(--paper-mute);
18396
+ border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-mute);
18258
18397
  }
18259
18398
 
18260
18399
  [data-style='zen-sumi'] [data-table-row]:hover {
@@ -18293,7 +18432,7 @@ button[data-step-number] {
18293
18432
  ============================================================================= */
18294
18433
 
18295
18434
  [data-style='zen-sumi'] [data-table-empty] {
18296
- color:var(--ink-soft);
18435
+ color:var(--ink-mute);
18297
18436
  }
18298
18437
 
18299
18438
  /* =============================================================================
@@ -18301,7 +18440,7 @@ button[data-step-number] {
18301
18440
  ============================================================================= */
18302
18441
 
18303
18442
  [data-style='zen-sumi'] [data-table-cell] [data-cell-icon] {
18304
- color:var(--ink-soft);
18443
+ color:var(--ink-mute);
18305
18444
  }
18306
18445
 
18307
18446
  [data-style='zen-sumi'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -18318,7 +18457,7 @@ button[data-step-number] {
18318
18457
  }
18319
18458
 
18320
18459
  [data-style='zen-sumi'] [data-table-responsive] [data-table-cell]::before {
18321
- color:var(--ink-soft);
18460
+ color:var(--ink-mute);
18322
18461
  }
18323
18462
 
18324
18463
  [data-style='zen-sumi']
@@ -18493,11 +18632,11 @@ button[data-step-number] {
18493
18632
  }
18494
18633
 
18495
18634
  [data-style='zen-sumi'] [data-timeline-item][data-completed] [data-timeline-circle] {
18496
- border-color:var(--primary);color:var(--primary);
18635
+ border-color:var(--primary);color:var(--ink);
18497
18636
  }
18498
18637
 
18499
18638
  [data-style='zen-sumi'] [data-timeline-item][data-active] [data-timeline-circle] {
18500
- border-color:var(--primary);color:var(--primary);
18639
+ border-color:var(--primary);color:var(--ink);
18501
18640
  }
18502
18641
 
18503
18642
  /* =============================================================================
@@ -18509,7 +18648,7 @@ button[data-step-number] {
18509
18648
  }
18510
18649
 
18511
18650
  [data-style='zen-sumi'] [data-timeline-item][data-completed] [data-timeline-connector] {
18512
- background-color:var(--primary);
18651
+ background-color: var(--primary);
18513
18652
  }
18514
18653
 
18515
18654
  /* =============================================================================
@@ -18703,8 +18842,8 @@ button[data-step-number] {
18703
18842
  }
18704
18843
 
18705
18844
  [data-style='zen-sumi'] [data-card][data-variant='primary'] [data-card-body] {
18706
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
18707
- }[data-mode="dark"][data-style="zen-sumi"] [data-card][data-variant="primary"] [data-card-body],[data-mode="dark"] [data-style="zen-sumi"] [data-card][data-variant="primary"] [data-card-body]{color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);}
18845
+ color:rgb(22 22 22 / 0.8);
18846
+ }
18708
18847
 
18709
18848
  /* Secondary */
18710
18849
  [data-style='zen-sumi'] [data-card][data-variant='secondary'] {
@@ -18718,8 +18857,8 @@ button[data-step-number] {
18718
18857
  }
18719
18858
 
18720
18859
  [data-style='zen-sumi'] [data-card][data-variant='secondary'] [data-card-body] {
18721
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
18722
- }[data-mode="dark"][data-style="zen-sumi"] [data-card][data-variant="secondary"] [data-card-body],[data-mode="dark"] [data-style="zen-sumi"] [data-card][data-variant="secondary"] [data-card-body]{color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);}
18860
+ color:rgb(22 22 22 / 0.8);
18861
+ }
18723
18862
 
18724
18863
  /* Tertiary — recessed surface, lighter border */
18725
18864
  [data-style='zen-sumi'] [data-card][data-variant='tertiary'] {