@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/frosted.css CHANGED
@@ -48,21 +48,21 @@
48
48
 
49
49
  [data-style='frosted'] [data-button][data-style='default'][data-variant='accent'],
50
50
  [data-style='frosted'] [data-button]:not([data-style])[data-variant='accent'] {
51
- 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);
51
+ 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);
52
52
  border-color: rgba(255, 255, 255, 0.25);
53
53
  box-shadow:
54
54
  inset 0 1px 0 rgba(255, 255, 255, 0.25),
55
55
  0 2px 8px rgba(0, 0, 0, 0.12);
56
- }[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);}
56
+ }
57
57
 
58
58
  [data-style='frosted'] [data-button][data-style='default'][data-variant='danger'],
59
59
  [data-style='frosted'] [data-button]:not([data-style])[data-variant='danger'] {
60
- 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);
60
+ 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);
61
61
  border-color: rgba(255, 255, 255, 0.25);
62
62
  box-shadow:
63
63
  inset 0 1px 0 rgba(255, 255, 255, 0.25),
64
64
  0 2px 8px rgba(0, 0, 0, 0.12);
65
- }[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);}
65
+ }
66
66
 
67
67
  /* =============================================================================
68
68
  Outline Style
@@ -130,7 +130,15 @@
130
130
 
131
131
  [data-style='frosted'] [data-button][data-style='gradient'][data-variant='default'],
132
132
  [data-style='frosted'] [data-button][data-style='gradient']:not([data-variant]) {
133
- --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);
133
+ /* paper-* are named-token shortcuts, not wind3 colors, so they silently drop as
134
+ gradient stops under @apply (unlike primary/accent/danger below). Write the
135
+ translucent gradient directly. See rokkit/button.css for the same workaround. */
136
+ background: linear-gradient(
137
+ to bottom right,
138
+ color-mix(in oklch, var(--paper-mute) 70%, transparent),
139
+ color-mix(in oklch, var(--paper-soft) 50%, transparent)
140
+ );
141
+ --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);
134
142
  border-color: rgba(255, 255, 255, 0.2);
135
143
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
136
144
  }
@@ -148,16 +156,16 @@
148
156
  }
149
157
 
150
158
  [data-style='frosted'] [data-button][data-style='gradient'][data-variant='accent'] {
151
- --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);
159
+ --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);
152
160
  border-color: rgba(255, 255, 255, 0.25);
153
161
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
154
- }[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);}
162
+ }
155
163
 
156
164
  [data-style='frosted'] [data-button][data-style='gradient'][data-variant='danger'] {
157
- --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);
165
+ --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);
158
166
  border-color: rgba(255, 255, 255, 0.25);
159
167
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
160
- }[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);}
168
+ }
161
169
 
162
170
  [data-style='frosted']
163
171
  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
@@ -480,7 +488,7 @@
480
488
  ============================================================================= */
481
489
 
482
490
  [data-style='frosted'] [data-tabs-trigger] {
483
- background-color:transparent;color:var(--ink-soft);
491
+ background-color:transparent;color:var(--ink-mute);
484
492
  }
485
493
 
486
494
  [data-style='frosted'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
@@ -498,7 +506,7 @@
498
506
  ============================================================================= */
499
507
 
500
508
  [data-style='frosted'] [data-tabs-trigger] [data-tabs-icon] {
501
- color:var(--ink-soft);
509
+ color:var(--ink-mute);
502
510
  }
503
511
 
504
512
  [data-style='frosted'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
@@ -538,7 +546,7 @@
538
546
  ============================================================================= */
539
547
 
540
548
  [data-style='frosted'] [data-toggle-option] {
541
- color:var(--ink-soft);
549
+ color:var(--ink-mute);
542
550
  }
543
551
 
544
552
  [data-style='frosted'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -557,7 +565,7 @@
557
565
  ============================================================================= */
558
566
 
559
567
  [data-style='frosted'] [data-toggle-option] [data-toggle-icon] {
560
- color:var(--ink-soft);
568
+ color:var(--ink-mute);
561
569
  }
562
570
 
563
571
  [data-style='frosted'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -577,7 +585,7 @@
577
585
  ============================================================================= */
578
586
 
579
587
  [data-style='frosted'] [data-toggle][data-toggle-variant='button'] {
580
- border-color:transparent;background-color:transparent;color:var(--ink-soft);
588
+ border-color:transparent;background-color:transparent;color:var(--ink-mute);
581
589
  background-image: none;
582
590
  }
583
591
 
@@ -587,7 +595,7 @@
587
595
  }
588
596
 
589
597
  [data-style='frosted'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
590
- color:var(--ink-soft);
598
+ color:var(--ink-mute);
591
599
  }
592
600
 
593
601
  [data-style='frosted'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
@@ -696,7 +704,7 @@
696
704
  ============================================================================= */
697
705
 
698
706
  [data-style='frosted'] [data-list] [data-list-item] [data-item-icon] {
699
- color:var(--ink-soft);
707
+ color:var(--ink-mute);
700
708
  }
701
709
 
702
710
  [data-style='frosted'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
@@ -710,7 +718,7 @@
710
718
 
711
719
  /* Literal / kanji icons */
712
720
  [data-style='frosted'] [data-list] [data-list-item] [data-item-icon-literal] {
713
- color:var(--ink-soft);
721
+ color:var(--ink-mute);
714
722
  }
715
723
 
716
724
  [data-style='frosted'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
@@ -734,7 +742,7 @@
734
742
  }
735
743
 
736
744
  [data-style='frosted'] [data-list] [data-list-item] [data-item-description] {
737
- color:var(--ink-soft);
745
+ color:var(--ink-mute);
738
746
  }
739
747
 
740
748
  [data-style='frosted'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
@@ -742,7 +750,7 @@
742
750
  }
743
751
 
744
752
  [data-style='frosted'] [data-list] [data-list-item] [data-item-badge] {
745
- background-image:none;color:var(--ink-soft);
753
+ background-image:none;color:var(--ink-mute);
746
754
  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
747
755
  }
748
756
 
@@ -755,7 +763,7 @@
755
763
  ============================================================================= */
756
764
 
757
765
  [data-style='frosted'] [data-list] [data-list-group] {
758
- color:var(--ink-soft);
766
+ color:var(--ink-mute);
759
767
  }
760
768
 
761
769
  [data-style='frosted'] [data-list] [data-list-group]:hover:not(:disabled),
@@ -799,6 +807,17 @@
799
807
  * Glassmorphism styling with blur and transparency.
800
808
  */
801
809
 
810
+ /* =============================================================================
811
+ Connector Lines — hairline tone (mode-aware), not currentColor (which
812
+ renders white in dark mode and greyish in light).
813
+ ============================================================================= */
814
+
815
+ [data-style='frosted'] [data-tree]:not([data-line-style='none']) [data-connector-v],
816
+ [data-style='frosted'] [data-tree]:not([data-line-style='none']) [data-connector-h],
817
+ [data-style='frosted'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
818
+ border-color:var(--paper-edge);
819
+ }
820
+
802
821
  /* =============================================================================
803
822
  Tree Container
804
823
  ============================================================================= */
@@ -813,7 +832,7 @@
813
832
  ============================================================================= */
814
833
 
815
834
  [data-style='frosted'] [data-tree-toggle-btn] {
816
- color:var(--ink-soft);
835
+ color:var(--ink-mute);
817
836
  }
818
837
 
819
838
  [data-style='frosted'] [data-tree-toggle-btn]:hover {
@@ -855,7 +874,7 @@
855
874
  ============================================================================= */
856
875
 
857
876
  [data-style='frosted'] [data-tree-item-content] [data-item-icon] {
858
- color:var(--ink-soft);
877
+ color:var(--ink-mute);
859
878
  }
860
879
 
861
880
  [data-style='frosted'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
@@ -867,7 +886,7 @@
867
886
  }
868
887
 
869
888
  [data-style='frosted'] [data-tree-item-content] [data-item-description] {
870
- color:var(--ink-soft);
889
+ color:var(--ink-mute);
871
890
  }
872
891
 
873
892
  [data-style='frosted'] [data-tree-item-content][data-active='true'] [data-item-description] {
@@ -875,7 +894,7 @@
875
894
  }
876
895
 
877
896
  [data-style='frosted'] [data-tree-item-content] [data-item-badge] {
878
- color:var(--ink-soft);
897
+ color:var(--ink-mute);
879
898
  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
880
899
  }
881
900
 
@@ -953,7 +972,7 @@
953
972
  ============================================================================= */
954
973
 
955
974
  [data-style='frosted'] [data-select-placeholder] {
956
- color:var(--ink-soft);
975
+ color:var(--ink-mute);
957
976
  }
958
977
 
959
978
  /* =============================================================================
@@ -961,7 +980,7 @@
961
980
  ============================================================================= */
962
981
 
963
982
  [data-style='frosted'] [data-select-arrow] {
964
- color:var(--ink-soft);
983
+ color:var(--ink-mute);
965
984
  }
966
985
 
967
986
  [data-style='frosted'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
@@ -978,7 +997,7 @@
978
997
  }
979
998
 
980
999
  [data-style='frosted'] [data-select-tag-remove] {
981
- color:var(--ink-soft);
1000
+ color:var(--ink-mute);
982
1001
  }
983
1002
 
984
1003
  [data-style='frosted'] [data-select-tag-remove]:hover {
@@ -1040,7 +1059,7 @@
1040
1059
 
1041
1060
  /* Item elements */
1042
1061
  [data-style='frosted'] [data-select-option] [data-item-icon] {
1043
- color:var(--ink-soft);
1062
+ color:var(--ink-mute);
1044
1063
  }
1045
1064
 
1046
1065
  [data-style='frosted'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
@@ -1052,7 +1071,7 @@
1052
1071
  }
1053
1072
 
1054
1073
  [data-style='frosted'] [data-select-option] [data-item-description] {
1055
- color:var(--ink-soft);
1074
+ color:var(--ink-mute);
1056
1075
  }
1057
1076
 
1058
1077
  [data-style='frosted'] [data-select-option][data-selected='true'] [data-item-description] {
@@ -1064,7 +1083,7 @@
1064
1083
  ============================================================================= */
1065
1084
 
1066
1085
  [data-style='frosted'] [data-select-group-label] {
1067
- color:var(--ink-soft);
1086
+ color:var(--ink-mute);
1068
1087
  }
1069
1088
 
1070
1089
  /* =============================================================================
@@ -1095,11 +1114,11 @@
1095
1114
  }
1096
1115
 
1097
1116
  [data-style='frosted'] [data-select-filter-input]::placeholder {
1098
- color:var(--ink-soft);
1117
+ color:var(--ink-mute);
1099
1118
  }
1100
1119
 
1101
1120
  [data-style='frosted'] [data-select-empty] {
1102
- color:var(--ink-soft);
1121
+ color:var(--ink-mute);
1103
1122
  }
1104
1123
 
1105
1124
  /**
@@ -1137,7 +1156,7 @@
1137
1156
 
1138
1157
  /* Trigger elements */
1139
1158
  [data-style='frosted'] [data-menu-trigger] [data-menu-icon] {
1140
- color:var(--ink-soft);
1159
+ color:var(--ink-mute);
1141
1160
  }
1142
1161
 
1143
1162
  [data-style='frosted'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
@@ -1145,7 +1164,7 @@
1145
1164
  }
1146
1165
 
1147
1166
  [data-style='frosted'] [data-menu-trigger] [data-menu-arrow] {
1148
- color:var(--ink-soft);
1167
+ color:var(--ink-mute);
1149
1168
  }
1150
1169
 
1151
1170
  /* =============================================================================
@@ -1182,7 +1201,7 @@
1182
1201
 
1183
1202
  /* Item elements */
1184
1203
  [data-style='frosted'] [data-menu-item] [data-item-icon] {
1185
- color:var(--ink-soft);
1204
+ color:var(--ink-mute);
1186
1205
  }
1187
1206
 
1188
1207
  [data-style='frosted'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
@@ -1190,7 +1209,7 @@
1190
1209
  }
1191
1210
 
1192
1211
  [data-style='frosted'] [data-menu-item] [data-item-description] {
1193
- color:var(--ink-soft);
1212
+ color:var(--ink-mute);
1194
1213
  }
1195
1214
 
1196
1215
  /* =============================================================================
@@ -1198,7 +1217,7 @@
1198
1217
  ============================================================================= */
1199
1218
 
1200
1219
  [data-style='frosted'] [data-menu-group] {
1201
- color:var(--ink-soft);
1220
+ color:var(--ink-mute);
1202
1221
  }
1203
1222
 
1204
1223
  /* =============================================================================
@@ -1240,11 +1259,11 @@
1240
1259
  }
1241
1260
 
1242
1261
  [data-style='frosted'] [data-dropdown-trigger] [data-dropdown-icon] {
1243
- color:var(--ink-soft);
1262
+ color:var(--ink-mute);
1244
1263
  }
1245
1264
 
1246
1265
  [data-style='frosted'] [data-dropdown-trigger] [data-dropdown-arrow] {
1247
- color:var(--ink-soft);
1266
+ color:var(--ink-mute);
1248
1267
  }
1249
1268
 
1250
1269
  [data-style='frosted'] [data-dropdown-panel] {
@@ -1353,7 +1372,7 @@
1353
1372
  ============================================================================= */
1354
1373
 
1355
1374
  [data-style='frosted'] [data-table-header] th {
1356
- 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);
1375
+ 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);
1357
1376
  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
1358
1377
  background-color: color-mix(in oklch, var(--paper-mute) 80%, transparent);
1359
1378
  }
@@ -1368,7 +1387,7 @@
1368
1387
  }
1369
1388
 
1370
1389
  [data-style='frosted'] [data-table-sort-icon] {
1371
- color:var(--ink-soft);
1390
+ color:var(--ink-mute);
1372
1391
  }
1373
1392
 
1374
1393
  [data-style='frosted'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
@@ -1429,7 +1448,7 @@
1429
1448
  ============================================================================= */
1430
1449
 
1431
1450
  [data-style='frosted'] [data-table-empty] {
1432
- color:var(--ink-soft);
1451
+ color:var(--ink-mute);
1433
1452
  }
1434
1453
 
1435
1454
  /* =============================================================================
@@ -1437,7 +1456,7 @@
1437
1456
  ============================================================================= */
1438
1457
 
1439
1458
  [data-style='frosted'] [data-table-cell] [data-cell-icon] {
1440
- color:var(--ink-soft);
1459
+ color:var(--ink-mute);
1441
1460
  }
1442
1461
 
1443
1462
  [data-style='frosted'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -1456,7 +1475,7 @@
1456
1475
  }
1457
1476
 
1458
1477
  [data-style='frosted'] [data-table-responsive] [data-table-cell]::before {
1459
- color:var(--ink-soft);
1478
+ color:var(--ink-mute);
1460
1479
  }
1461
1480
 
1462
1481
  /* Disable striped alternating bg in card layout */
@@ -1639,7 +1658,7 @@
1639
1658
  }
1640
1659
 
1641
1660
  [data-style='frosted'] [data-timeline-item][data-active] [data-timeline-circle] {
1642
- 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);
1661
+ 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);
1643
1662
  }
1644
1663
 
1645
1664
  /* =============================================================================
@@ -1866,8 +1885,8 @@
1866
1885
  }
1867
1886
 
1868
1887
  [data-style='frosted'] [data-card][data-variant='primary'] [data-card-body] {
1869
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
1870
- }[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);}
1888
+ color:rgb(22 22 22 / 0.8);
1889
+ }
1871
1890
 
1872
1891
  /* Secondary — tinted secondary glass */
1873
1892
  [data-style='frosted'] [data-card][data-variant='secondary'] {
@@ -1884,8 +1903,8 @@
1884
1903
  }
1885
1904
 
1886
1905
  [data-style='frosted'] [data-card][data-variant='secondary'] [data-card-body] {
1887
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
1888
- }[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);}
1906
+ color:rgb(22 22 22 / 0.8);
1907
+ }
1889
1908
 
1890
1909
  /* Tertiary — barely-there frosted glass */
1891
1910
  [data-style='frosted'] [data-card][data-variant='tertiary'] {
@@ -1952,7 +1971,7 @@
1952
1971
 
1953
1972
  [data-style='frosted'] [data-message-root][data-type='error'] {
1954
1973
  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);
1955
- background-color: color-mix(in oklch, var(--error-soft) 50%, transparent);
1974
+ background-color: var(--error-soft);
1956
1975
  }
1957
1976
  [data-style='frosted'] [data-message-root][data-type='error'] [data-message-icon],
1958
1977
  [data-style='frosted'] [data-message-root][data-type='error'] [data-message-dismiss] {
@@ -1961,7 +1980,7 @@
1961
1980
 
1962
1981
  [data-style='frosted'] [data-message-root][data-type='warning'] {
1963
1982
  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);
1964
- background-color: color-mix(in oklch, var(--warning-soft) 50%, transparent);
1983
+ background-color: var(--warning-soft);
1965
1984
  }
1966
1985
  [data-style='frosted'] [data-message-root][data-type='warning'] [data-message-icon],
1967
1986
  [data-style='frosted'] [data-message-root][data-type='warning'] [data-message-dismiss] {
@@ -1970,7 +1989,7 @@
1970
1989
 
1971
1990
  [data-style='frosted'] [data-message-root][data-type='info'] {
1972
1991
  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);
1973
- background-color: color-mix(in oklch, var(--info-soft) 50%, transparent);
1992
+ background-color: var(--info-soft);
1974
1993
  }
1975
1994
  [data-style='frosted'] [data-message-root][data-type='info'] [data-message-icon],
1976
1995
  [data-style='frosted'] [data-message-root][data-type='info'] [data-message-dismiss] {
@@ -1979,7 +1998,7 @@
1979
1998
 
1980
1999
  [data-style='frosted'] [data-message-root][data-type='success'] {
1981
2000
  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);
1982
- background-color: color-mix(in oklch, var(--success-soft) 50%, transparent);
2001
+ background-color: var(--success-soft);
1983
2002
  }
1984
2003
  [data-style='frosted'] [data-message-root][data-type='success'] [data-message-icon],
1985
2004
  [data-style='frosted'] [data-message-root][data-type='success'] [data-message-dismiss] {