@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/material.css CHANGED
@@ -24,23 +24,27 @@
24
24
 
25
25
  [data-style='material'] [data-button][data-style='default'][data-variant='primary'],
26
26
  [data-style='material'] [data-button]:not([data-style])[data-variant='primary'] {
27
- 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);
27
+ 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);
28
+ background-color: var(--primary);
28
29
  }
29
30
 
30
31
  [data-style='material'] [data-button][data-style='default'][data-variant='secondary'],
31
32
  [data-style='material'] [data-button]:not([data-style])[data-variant='secondary'] {
32
- 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);
33
+ 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);
34
+ background-color: var(--accent);
33
35
  }
34
36
 
35
37
  [data-style='material'] [data-button][data-style='default'][data-variant='accent'],
36
38
  [data-style='material'] [data-button]:not([data-style])[data-variant='accent'] {
37
- 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);
38
- }[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);}
39
+ 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);
40
+ background-color: var(--accent);
41
+ }
39
42
 
40
43
  [data-style='material'] [data-button][data-style='default'][data-variant='danger'],
41
44
  [data-style='material'] [data-button]:not([data-style])[data-variant='danger'] {
42
- 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);
43
- }[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);}
45
+ 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);
46
+ background-color: var(--danger);
47
+ }
44
48
 
45
49
  /* =============================================================================
46
50
  Outline Style
@@ -114,12 +118,12 @@
114
118
  }
115
119
 
116
120
  [data-style='material'] [data-button][data-style='gradient'][data-variant='accent'] {
117
- --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);
118
- }[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);}
121
+ --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);
122
+ }
119
123
 
120
124
  [data-style='material'] [data-button][data-style='gradient'][data-variant='danger'] {
121
- --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);
122
- }[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);}
125
+ --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);
126
+ }
123
127
 
124
128
  [data-style='material']
125
129
  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
@@ -458,7 +462,7 @@
458
462
  ============================================================================= */
459
463
 
460
464
  [data-style='material'] [data-tabs-trigger] {
461
- border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:transparent;color:var(--ink-soft);
465
+ border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:transparent;color:var(--ink-mute);
462
466
  }
463
467
 
464
468
  [data-style='material'] [data-tabs][data-position='after'] [data-tabs-trigger] {
@@ -471,7 +475,8 @@
471
475
 
472
476
  /* Selected state */
473
477
  [data-style='material'] [data-tabs-trigger][data-selected] {
474
- --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);
478
+ --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);
479
+ background-color: var(--primary);
475
480
  }
476
481
 
477
482
  /* Reset rokkit gradients bleeding in from body[data-style='rokkit'] ancestor */
@@ -505,7 +510,7 @@
505
510
  ============================================================================= */
506
511
 
507
512
  [data-style='material'] [data-tabs-trigger] [data-tabs-icon] {
508
- color:var(--ink-soft);
513
+ color:var(--ink-mute);
509
514
  }
510
515
 
511
516
  [data-style='material'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
@@ -543,7 +548,7 @@
543
548
  ============================================================================= */
544
549
 
545
550
  [data-style='material'] [data-toggle-option] {
546
- border-radius:9999px;color:var(--ink-soft);
551
+ border-radius:9999px;color:var(--ink-mute);
547
552
  }
548
553
 
549
554
  [data-style='material'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -553,7 +558,8 @@
553
558
 
554
559
  /* Selected state */
555
560
  [data-style='material'] [data-toggle-option][data-selected='true'] {
556
- 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);
561
+ 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);
562
+ background-color: var(--primary);
557
563
  }
558
564
 
559
565
  /* =============================================================================
@@ -561,7 +567,7 @@
561
567
  ============================================================================= */
562
568
 
563
569
  [data-style='material'] [data-toggle-option] [data-toggle-icon] {
564
- color:var(--ink-soft);
570
+ color:var(--ink-mute);
565
571
  }
566
572
 
567
573
  [data-style='material'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -581,7 +587,7 @@
581
587
  ============================================================================= */
582
588
 
583
589
  [data-style='material'] [data-toggle][data-toggle-variant='button'] {
584
- border-color:transparent;background-color:transparent;color:var(--ink-soft);
590
+ border-color:transparent;background-color:transparent;color:var(--ink-mute);
585
591
  background-image: none;
586
592
  }
587
593
 
@@ -591,7 +597,7 @@
591
597
  }
592
598
 
593
599
  [data-style='material'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
594
- color:var(--ink-soft);
600
+ color:var(--ink-mute);
595
601
  }
596
602
 
597
603
  [data-style='material'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
@@ -686,7 +692,7 @@
686
692
  ============================================================================= */
687
693
 
688
694
  [data-style='material'] [data-list] [data-list-item] [data-item-icon] {
689
- color:var(--ink-soft);
695
+ color:var(--ink-mute);
690
696
  }
691
697
 
692
698
  [data-style='material'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
@@ -700,7 +706,7 @@
700
706
 
701
707
  /* Literal / kanji icons */
702
708
  [data-style='material'] [data-list] [data-list-item] [data-item-icon-literal] {
703
- color:var(--ink-soft);
709
+ color:var(--ink-mute);
704
710
  }
705
711
 
706
712
  [data-style='material'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
@@ -713,7 +719,7 @@
713
719
  }
714
720
 
715
721
  [data-style='material'] [data-list] [data-list-item] [data-item-description] {
716
- color:var(--ink-soft);
722
+ color:var(--ink-mute);
717
723
  }
718
724
 
719
725
  [data-style='material'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
@@ -721,7 +727,7 @@
721
727
  }
722
728
 
723
729
  [data-style='material'] [data-list] [data-list-item] [data-item-badge] {
724
- border-radius:9999px;background-image:none;background-color:var(--paper-mute);color:var(--ink-soft);
730
+ border-radius:9999px;background-image:none;background-color:var(--paper-mute);color:var(--ink-mute);
725
731
  }
726
732
 
727
733
  [data-style='material'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
@@ -733,7 +739,7 @@
733
739
  ============================================================================= */
734
740
 
735
741
  [data-style='material'] [data-list] [data-list-group] {
736
- font-weight:500;color:var(--ink-soft);
742
+ font-weight:500;color:var(--ink-mute);
737
743
  }
738
744
 
739
745
  [data-style='material'] [data-list] [data-list-group]:hover:not(:disabled),
@@ -775,6 +781,17 @@
775
781
  * Material Design inspired with subtle elevation.
776
782
  */
777
783
 
784
+ /* =============================================================================
785
+ Connector Lines — hairline tone (mode-aware), not currentColor (which
786
+ renders white in dark mode and greyish in light).
787
+ ============================================================================= */
788
+
789
+ [data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-v],
790
+ [data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-h],
791
+ [data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
792
+ border-color:var(--paper-edge);
793
+ }
794
+
778
795
  /* =============================================================================
779
796
  Tree Container
780
797
  ============================================================================= */
@@ -788,7 +805,7 @@
788
805
  ============================================================================= */
789
806
 
790
807
  [data-style='material'] [data-tree-toggle-btn] {
791
- border-radius:9999px;color:var(--ink-soft);
808
+ border-radius:9999px;color:var(--ink-mute);
792
809
  }
793
810
 
794
811
  [data-style='material'] [data-tree-toggle-btn]:hover {
@@ -844,7 +861,7 @@
844
861
  ============================================================================= */
845
862
 
846
863
  [data-style='material'] [data-tree-item-content] [data-item-icon] {
847
- color:var(--ink-soft);
864
+ color:var(--ink-mute);
848
865
  }
849
866
 
850
867
  [data-style='material'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
@@ -856,7 +873,7 @@
856
873
  }
857
874
 
858
875
  [data-style='material'] [data-tree-item-content] [data-item-description] {
859
- color:var(--ink-soft);
876
+ color:var(--ink-mute);
860
877
  }
861
878
 
862
879
  [data-style='material'] [data-tree-item-content][data-active='true'] [data-item-description] {
@@ -864,7 +881,7 @@
864
881
  }
865
882
 
866
883
  [data-style='material'] [data-tree-item-content] [data-item-badge] {
867
- border-radius:9999px;background-image:none;color:var(--ink-soft);background-color:var(--paper-mute);
884
+ border-radius:9999px;background-image:none;color:var(--ink-mute);background-color:var(--paper-mute);
868
885
  }
869
886
 
870
887
  [data-style='material'] [data-tree-item-content][data-active='true'] [data-item-badge] {
@@ -935,7 +952,7 @@
935
952
  ============================================================================= */
936
953
 
937
954
  [data-style='material'] [data-select-placeholder] {
938
- color:var(--ink-soft);
955
+ color:var(--ink-mute);
939
956
  }
940
957
 
941
958
  /* =============================================================================
@@ -943,7 +960,7 @@
943
960
  ============================================================================= */
944
961
 
945
962
  [data-style='material'] [data-select-arrow] {
946
- color:var(--ink-soft);
963
+ color:var(--ink-mute);
947
964
  }
948
965
 
949
966
  [data-style='material'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
@@ -959,7 +976,7 @@
959
976
  }
960
977
 
961
978
  [data-style='material'] [data-select-tag-remove] {
962
- border-radius:9999px;color:var(--ink-soft);
979
+ border-radius:9999px;color:var(--ink-mute);
963
980
  }
964
981
 
965
982
  [data-style='material'] [data-select-tag-remove]:hover {
@@ -1023,7 +1040,7 @@
1023
1040
 
1024
1041
  /* Item elements */
1025
1042
  [data-style='material'] [data-select-option] [data-item-icon] {
1026
- color:var(--ink-soft);
1043
+ color:var(--ink-mute);
1027
1044
  }
1028
1045
 
1029
1046
  [data-style='material'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
@@ -1035,7 +1052,7 @@
1035
1052
  }
1036
1053
 
1037
1054
  [data-style='material'] [data-select-option] [data-item-description] {
1038
- color:var(--ink-soft);
1055
+ color:var(--ink-mute);
1039
1056
  }
1040
1057
 
1041
1058
  [data-style='material'] [data-select-option][data-selected='true'] [data-item-description] {
@@ -1047,7 +1064,7 @@
1047
1064
  ============================================================================= */
1048
1065
 
1049
1066
  [data-style='material'] [data-select-group-label] {
1050
- font-weight:500;color:var(--ink-soft);
1067
+ font-weight:500;color:var(--ink-mute);
1051
1068
  }
1052
1069
 
1053
1070
  /* =============================================================================
@@ -1075,11 +1092,11 @@
1075
1092
  }
1076
1093
 
1077
1094
  [data-style='material'] [data-select-filter-input]::placeholder {
1078
- color:var(--ink-soft);
1095
+ color:var(--ink-mute);
1079
1096
  }
1080
1097
 
1081
1098
  [data-style='material'] [data-select-empty] {
1082
- color:var(--ink-soft);
1099
+ color:var(--ink-mute);
1083
1100
  }
1084
1101
 
1085
1102
  /**
@@ -1110,7 +1127,7 @@
1110
1127
 
1111
1128
  /* Trigger elements */
1112
1129
  [data-style='material'] [data-menu-trigger] [data-menu-icon] {
1113
- color:var(--ink-soft);
1130
+ color:var(--ink-mute);
1114
1131
  }
1115
1132
 
1116
1133
  [data-style='material'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
@@ -1118,7 +1135,7 @@
1118
1135
  }
1119
1136
 
1120
1137
  [data-style='material'] [data-menu-trigger] [data-menu-arrow] {
1121
- color:var(--ink-soft);
1138
+ color:var(--ink-mute);
1122
1139
  }
1123
1140
 
1124
1141
  /* =============================================================================
@@ -1148,7 +1165,7 @@
1148
1165
 
1149
1166
  /* Item elements */
1150
1167
  [data-style='material'] [data-menu-item] [data-item-icon] {
1151
- color:var(--ink-soft);
1168
+ color:var(--ink-mute);
1152
1169
  }
1153
1170
 
1154
1171
  [data-style='material'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
@@ -1156,7 +1173,7 @@
1156
1173
  }
1157
1174
 
1158
1175
  [data-style='material'] [data-menu-item] [data-item-description] {
1159
- color:var(--ink-soft);
1176
+ color:var(--ink-mute);
1160
1177
  }
1161
1178
 
1162
1179
  /* =============================================================================
@@ -1164,7 +1181,7 @@
1164
1181
  ============================================================================= */
1165
1182
 
1166
1183
  [data-style='material'] [data-menu-group] {
1167
- font-weight:500;color:var(--ink-soft);
1184
+ font-weight:500;color:var(--ink-mute);
1168
1185
  }
1169
1186
 
1170
1187
  /* =============================================================================
@@ -1198,11 +1215,11 @@
1198
1215
  }
1199
1216
 
1200
1217
  [data-style='material'] [data-dropdown-trigger] [data-dropdown-icon] {
1201
- color:var(--ink-soft);
1218
+ color:var(--ink-mute);
1202
1219
  }
1203
1220
 
1204
1221
  [data-style='material'] [data-dropdown-trigger] [data-dropdown-arrow] {
1205
- color:var(--ink-soft);
1222
+ color:var(--ink-mute);
1206
1223
  }
1207
1224
 
1208
1225
  [data-style='material'] [data-dropdown-panel] {
@@ -1302,7 +1319,7 @@
1302
1319
  ============================================================================= */
1303
1320
 
1304
1321
  [data-style='material'] [data-table-header] th {
1305
- border-bottom-width:1px;font-weight:500;color:var(--ink-soft);background-color:var(--paper-mute);border-color:var(--paper-edge);
1322
+ border-bottom-width:1px;font-weight:500;color:var(--ink-mute);background-color:var(--paper-mute);border-color:var(--paper-edge);
1306
1323
  }
1307
1324
 
1308
1325
  [data-style='material'] [data-table-header-cell][data-sortable='true']:hover {
@@ -1315,7 +1332,7 @@
1315
1332
  }
1316
1333
 
1317
1334
  [data-style='material'] [data-table-sort-icon] {
1318
- color:var(--ink-soft);
1335
+ color:var(--ink-mute);
1319
1336
  }
1320
1337
 
1321
1338
  [data-style='material']
@@ -1378,7 +1395,7 @@
1378
1395
  ============================================================================= */
1379
1396
 
1380
1397
  [data-style='material'] [data-table-empty] {
1381
- color:var(--ink-soft);
1398
+ color:var(--ink-mute);
1382
1399
  }
1383
1400
 
1384
1401
  /* =============================================================================
@@ -1386,7 +1403,7 @@
1386
1403
  ============================================================================= */
1387
1404
 
1388
1405
  [data-style='material'] [data-table-cell] [data-cell-icon] {
1389
- color:var(--ink-soft);
1406
+ color:var(--ink-mute);
1390
1407
  }
1391
1408
 
1392
1409
  [data-style='material'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -1403,7 +1420,7 @@
1403
1420
  }
1404
1421
 
1405
1422
  [data-style='material'] [data-table-responsive] [data-table-cell]::before {
1406
- color:var(--ink-soft);
1423
+ color:var(--ink-mute);
1407
1424
  }
1408
1425
 
1409
1426
  /* Disable striped alternating bg in card layout */
@@ -1575,11 +1592,12 @@
1575
1592
  }
1576
1593
 
1577
1594
  [data-style='material'] [data-timeline-item][data-completed] [data-timeline-circle] {
1578
- --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);
1595
+ --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);
1596
+ background-color: var(--primary);
1579
1597
  }
1580
1598
 
1581
1599
  [data-style='material'] [data-timeline-item][data-active] [data-timeline-circle] {
1582
- --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);
1600
+ --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);
1583
1601
  }
1584
1602
 
1585
1603
  /* =============================================================================
@@ -1591,7 +1609,7 @@
1591
1609
  }
1592
1610
 
1593
1611
  [data-style='material'] [data-timeline-item][data-completed] [data-timeline-connector] {
1594
- background-color:var(--primary);
1612
+ background-color: var(--primary);
1595
1613
  }
1596
1614
 
1597
1615
  /* =============================================================================
@@ -0,0 +1,180 @@
1
+ /**
2
+ * Button - Minimal Theme Styles
3
+ *
4
+ * Clean, understated styling with subtle borders.
5
+ */
6
+
7
+ /* =============================================================================
8
+ Default Style (filled)
9
+ ============================================================================= */
10
+
11
+ [data-style='minimal'] [data-button][data-style='default'][data-variant='default'],
12
+ [data-style='minimal'] [data-button]:not([data-style])[data-variant='default'],
13
+ [data-style='minimal'] [data-button][data-style='default']:not([data-variant]),
14
+ [data-style='minimal'] [data-button]:not([data-style]):not([data-variant]) {
15
+ border-width:1px;background-image:none;background-color:var(--paper-mute);border-color:var(--paper-edge);color:var(--ink-mute);
16
+ }
17
+
18
+ [data-style='minimal'] [data-button][data-style='default'][data-variant='primary'],
19
+ [data-style='minimal'] [data-button]:not([data-style])[data-variant='primary'] {
20
+ border-color:transparent;background-image:none;color:var(--on-primary);
21
+ background-color: var(--primary);
22
+ }
23
+
24
+ [data-style='minimal'] [data-button][data-style='default'][data-variant='secondary'],
25
+ [data-style='minimal'] [data-button]:not([data-style])[data-variant='secondary'] {
26
+ border-color:transparent;background-image:none;color:var(--on-primary);
27
+ background-color: var(--accent);
28
+ }
29
+
30
+ [data-style='minimal'] [data-button][data-style='default'][data-variant='accent'],
31
+ [data-style='minimal'] [data-button]:not([data-style])[data-variant='accent'] {
32
+ border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
33
+ background-color: var(--accent);
34
+ }
35
+
36
+ [data-style='minimal'] [data-button][data-style='default'][data-variant='danger'],
37
+ [data-style='minimal'] [data-button]:not([data-style])[data-variant='danger'] {
38
+ border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
39
+ background-color: var(--danger);
40
+ }
41
+
42
+ /* =============================================================================
43
+ Outline Style
44
+ ============================================================================= */
45
+
46
+ [data-style='minimal'] [data-button][data-style='outline'][data-variant='default'],
47
+ [data-style='minimal'] [data-button][data-style='outline']:not([data-variant]) {
48
+ border-width:1px;background-color:transparent;border-color:var(--paper-edge);color:var(--ink-mute);
49
+ }
50
+
51
+ [data-style='minimal'] [data-button][data-style='outline'][data-variant='primary'] {
52
+ border-width:1px;background-color:transparent;border-color:var(--primary);color:var(--primary);
53
+ }
54
+
55
+ [data-style='minimal'] [data-button][data-style='outline'][data-variant='secondary'] {
56
+ border-width:1px;background-color:transparent;border-color:var(--accent);color:var(--accent);
57
+ }
58
+
59
+ [data-style='minimal'] [data-button][data-style='outline'][data-variant='accent'] {
60
+ border-width:1px;background-color:transparent;border-color:var(--accent);color:var(--accent);
61
+ }
62
+
63
+ [data-style='minimal'] [data-button][data-style='outline'][data-variant='danger'] {
64
+ border-width:1px;background-color:transparent;border-color:var(--danger);color:var(--danger);
65
+ }
66
+
67
+ /* =============================================================================
68
+ Ghost Style
69
+ ============================================================================= */
70
+
71
+ [data-style='minimal'] [data-button][data-style='ghost'] {
72
+ border-color:transparent;background-color:transparent;
73
+ }
74
+
75
+ [data-style='minimal'] [data-button][data-style='ghost'][data-variant='default'],
76
+ [data-style='minimal'] [data-button][data-style='ghost']:not([data-variant]) {
77
+ color:var(--ink-mute);
78
+ }
79
+
80
+ [data-style='minimal'] [data-button][data-style='ghost'][data-variant='primary'] {
81
+ color:var(--primary);
82
+ }
83
+
84
+ [data-style='minimal'] [data-button][data-style='ghost'][data-variant='secondary'] {
85
+ color:var(--accent);
86
+ }
87
+
88
+ [data-style='minimal'] [data-button][data-style='ghost'][data-variant='accent'] {
89
+ color:var(--accent);
90
+ }
91
+
92
+ [data-style='minimal'] [data-button][data-style='ghost'][data-variant='danger'] {
93
+ color:var(--danger);
94
+ }
95
+
96
+ /* =============================================================================
97
+ Gradient Style
98
+ ============================================================================= */
99
+
100
+ [data-style='minimal'] [data-button][data-style='gradient'][data-variant='default'],
101
+ [data-style='minimal'] [data-button][data-style='gradient']:not([data-variant]) {
102
+ --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));color:var(--ink);
103
+ }
104
+
105
+ [data-style='minimal'] [data-button][data-style='gradient'][data-variant='primary'] {
106
+ --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-primary) 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));color:var(--on-primary);
107
+ }
108
+
109
+ [data-style='minimal'] [data-button][data-style='gradient'][data-variant='secondary'] {
110
+ --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));color:var(--on-primary);
111
+ }
112
+
113
+ [data-style='minimal'] [data-button][data-style='gradient'][data-variant='accent'] {
114
+ --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));
115
+ }
116
+
117
+ [data-style='minimal'] [data-button][data-style='gradient'][data-variant='danger'] {
118
+ --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));
119
+ }
120
+
121
+ [data-style='minimal']
122
+ [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
123
+ filter: brightness(1.05);
124
+ }
125
+
126
+ /* =============================================================================
127
+ Link Style
128
+ ============================================================================= */
129
+
130
+ [data-style='minimal'] [data-button][data-style='link'][data-variant='default'],
131
+ [data-style='minimal'] [data-button][data-style='link']:not([data-variant]) {
132
+ color:var(--ink-mute);
133
+ }
134
+
135
+ [data-style='minimal'] [data-button][data-style='link'][data-variant='primary'] {
136
+ color:var(--primary);
137
+ }
138
+
139
+ [data-style='minimal'] [data-button][data-style='link'][data-variant='secondary'] {
140
+ color:var(--accent);
141
+ }
142
+
143
+ [data-style='minimal'] [data-button][data-style='link'][data-variant='accent'] {
144
+ color:var(--accent);
145
+ }
146
+
147
+ [data-style='minimal'] [data-button][data-style='link'][data-variant='danger'] {
148
+ color:var(--danger);
149
+ }
150
+
151
+ [data-style='minimal'] [data-button][data-style='link']:hover:not(:disabled):not([data-disabled]) {
152
+ color:var(--ink);
153
+ }
154
+
155
+ /* =============================================================================
156
+ Hover States
157
+ ============================================================================= */
158
+
159
+ [data-style='minimal']
160
+ [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
161
+ [data-style='minimal'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
162
+ background-image:none;background-color:var(--paper-mute);border-color:var(--ink-soft);
163
+ }
164
+
165
+ [data-style='minimal']
166
+ [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]) {
167
+ background-image:none;background-color:var(--paper-soft);border-color:var(--ink-soft);
168
+ }
169
+
170
+ [data-style='minimal'] [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]) {
171
+ background-color:var(--paper-mute);
172
+ }
173
+
174
+ /* =============================================================================
175
+ Focus
176
+ ============================================================================= */
177
+
178
+ [data-style='minimal'] [data-button]:focus-visible {
179
+ outline:2px solid transparent;outline-offset:2px;--un-ring-width:1px;--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:var(--ink-soft);
180
+ }