@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
@@ -0,0 +1,99 @@
1
+ /**
2
+ * Card - Minimal Theme Styles
3
+ *
4
+ * Clean, flat styling with subtle borders.
5
+ */
6
+
7
+ /* =============================================================================
8
+ Base Card Styles
9
+ ============================================================================= */
10
+
11
+ [data-style='minimal'] [data-card] {
12
+ border-width:1px;background-image:none;--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(--paper-soft);border-color:var(--paper-edge);color:var(--ink);
13
+ }
14
+
15
+ /* Interactive cards (buttons) */
16
+ [data-style='minimal'] [data-card][data-card-interactive] {
17
+ cursor: pointer;
18
+ transition:
19
+ border-color 0.2s ease,
20
+ box-shadow 0.2s ease;
21
+ }
22
+
23
+ [data-style='minimal'] [data-card][data-card-interactive]:hover {
24
+ --un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);border-color:var(--ink-soft);
25
+ }
26
+
27
+ [data-style='minimal'] [data-card][data-card-interactive]:active {
28
+ background-color:var(--paper-mute);
29
+ }
30
+
31
+ /* =============================================================================
32
+ Card Sections
33
+ ============================================================================= */
34
+
35
+ [data-style='minimal'] [data-card-header] {
36
+ border-bottom-width:1px;border-color:var(--paper-mute);
37
+ }
38
+
39
+ [data-style='minimal'] [data-card-body] {
40
+ color:var(--ink-mute);
41
+ }
42
+
43
+ [data-style='minimal'] [data-card-footer] {
44
+ border-top-width:1px;border-color:var(--paper-mute);color:var(--ink-mute);
45
+ }
46
+
47
+ /* =============================================================================
48
+ Focus States
49
+ ============================================================================= */
50
+
51
+ [data-style='minimal'] [data-card][data-card-interactive]:focus-visible {
52
+ 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);
53
+ }
54
+
55
+ /* =============================================================================
56
+ Disabled State
57
+ ============================================================================= */
58
+
59
+ [data-style='minimal'] [data-card][data-card-interactive][data-disabled],
60
+ [data-style='minimal'] [data-card][data-card-interactive]:disabled {
61
+ cursor:not-allowed;opacity:0.5;
62
+ }
63
+
64
+ /* =============================================================================
65
+ Variants
66
+ ============================================================================= */
67
+
68
+ /* Primary — solid primary fill */
69
+ [data-style='minimal'] [data-card][data-variant='primary'] {
70
+ border-width:1px;background-image:none;background-color:var(--primary);border-color:var(--primary);color:var(--on-primary);
71
+ }
72
+
73
+ [data-style='minimal'] [data-card][data-variant='primary'] [data-card-header],
74
+ [data-style='minimal'] [data-card][data-variant='primary'] [data-card-footer] {
75
+ border-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);
76
+ }
77
+
78
+ [data-style='minimal'] [data-card][data-variant='primary'] [data-card-body] {
79
+ color:rgb(22 22 22 / 0.8);
80
+ }
81
+
82
+ /* Secondary — solid secondary fill */
83
+ [data-style='minimal'] [data-card][data-variant='secondary'] {
84
+ border-width:1px;background-image:none;background-color:var(--accent);border-color:var(--accent);color:var(--on-primary);
85
+ }
86
+
87
+ [data-style='minimal'] [data-card][data-variant='secondary'] [data-card-header],
88
+ [data-style='minimal'] [data-card][data-variant='secondary'] [data-card-footer] {
89
+ border-color:color-mix(in srgb, var(--color-accent) calc(0.4 * 100%), transparent);
90
+ }
91
+
92
+ [data-style='minimal'] [data-card][data-variant='secondary'] [data-card-body] {
93
+ color:rgb(22 22 22 / 0.8);
94
+ }
95
+
96
+ /* Tertiary — recessed surface, lighter border */
97
+ [data-style='minimal'] [data-card][data-variant='tertiary'] {
98
+ border-width:1px;background-image:none;--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--paper);border-color:var(--paper-mute);color:var(--ink-mute);
99
+ }
@@ -0,0 +1,38 @@
1
+ /**
2
+ * Chart - Minimal Theme Styles
3
+ */
4
+
5
+ [data-style='minimal'] [data-chart-axis-line],
6
+ [data-style='minimal'] [data-chart-tick] line {
7
+ stroke:var(--paper-mute);
8
+ }
9
+
10
+ [data-style='minimal'] [data-chart-tick-label] {
11
+ fill:var(--ink-soft);
12
+ }
13
+
14
+ [data-style='minimal'] [data-chart-grid-line] {
15
+ stroke:var(--paper-mute);
16
+ stroke-opacity: 0.5;
17
+ stroke-dasharray: 2 4;
18
+ }
19
+
20
+ [data-style='minimal'] [data-chart-legend-label] {
21
+ fill:var(--ink-soft);
22
+ }
23
+
24
+ [data-style='minimal'] [data-chart-legend-item]:hover {
25
+ color:var(--ink-mute);
26
+ }
27
+
28
+ [data-style='minimal'] [data-plot-element='bar'][data-dimmed],
29
+ [data-style='minimal'] [data-plot-element='point'][data-dimmed],
30
+ [data-style='minimal'] [data-plot-element='arc'][data-dimmed],
31
+ [data-style='minimal'] [data-plot-element='line'][data-dimmed],
32
+ [data-style='minimal'] [data-plot-element='area'][data-dimmed] {
33
+ opacity: 0.15;
34
+ }
35
+
36
+ [data-style='minimal'] [data-facet-title] {
37
+ color:var(--ink-soft);
38
+ }
@@ -0,0 +1,33 @@
1
+ /**
2
+ * CodeBlock — minimal theme.
3
+ * Frame supplies the chrome; this adds typography + muted tokens for
4
+ * the title row, lang chip, action buttons, and pre/code body.
5
+ */
6
+
7
+ [data-style='minimal'] [data-code-block-icon] {
8
+ color:var(--ink-soft);
9
+ }
10
+
11
+ [data-style='minimal'] [data-code-block-filename] {
12
+ font: 500 11.5px var(--font-mono);
13
+ color:var(--ink-mute);
14
+ }
15
+
16
+ [data-style='minimal'] [data-code-block-lang] {
17
+ font: 500 10px var(--font-mono);
18
+ border-width:1px;color:var(--ink-soft);border-color:var(--paper-edge);
19
+ }
20
+
21
+ [data-style='minimal'] [data-code-block-actions] button {
22
+ font: 500 11px var(--font-mono);
23
+ color:var(--ink-soft);
24
+ }
25
+
26
+ [data-style='minimal'] [data-code-block-actions] button:hover {
27
+ background-color:var(--paper-mute);color:var(--ink);
28
+ }
29
+
30
+ [data-style='minimal'] [data-code-block-body] pre {
31
+ font: 400 12px/1.65 var(--font-mono);
32
+ color:var(--ink);
33
+ }
@@ -0,0 +1,37 @@
1
+ /**
2
+ * CommandPalette - Minimal Theme Styles
3
+ *
4
+ * Clean, understated styling with subtle borders.
5
+ */
6
+
7
+ [data-style='minimal'] [data-command-backdrop] {
8
+ background: rgb(0 0 0 / 0.25);
9
+ }
10
+
11
+ [data-style='minimal'] [data-command-palette] {
12
+ border-width:1px;background-color:var(--paper-soft);border-color:var(--paper-mute);
13
+ }
14
+
15
+ [data-style='minimal'] [data-command-input] {
16
+ color:var(--ink);
17
+ }[data-style='minimal'] [data-command-input]::placeholder{color:var(--ink-soft);}
18
+
19
+ [data-style='minimal'] [data-command-item] {
20
+ color:var(--ink-mute);
21
+ }
22
+
23
+ [data-style='minimal'] [data-command-item][data-active] {
24
+ border-left-width:2px;background-color:var(--paper-mute);color:var(--ink);border-left-color:var(--accent);
25
+ }
26
+
27
+ [data-style='minimal'] [data-command-shortcut] {
28
+ color:var(--ink-soft);
29
+ }
30
+
31
+ [data-style='minimal'] [data-command-label] {
32
+ font-size:0.75rem;line-height:1rem;font-weight:500;color:var(--ink-soft);
33
+ }
34
+
35
+ [data-style='minimal'] [data-command-empty] {
36
+ color:var(--ink-soft);
37
+ }
@@ -0,0 +1,50 @@
1
+ /**
2
+ * Dropdown - Minimal Theme Styles
3
+ *
4
+ * Clean, understated with subtle borders.
5
+ */
6
+
7
+ [data-style='minimal'] [data-dropdown-trigger] {
8
+ border-width:1px;background-color:transparent;background-image:none;border-color:var(--paper-edge);color:var(--ink-mute);
9
+ }
10
+
11
+ [data-style='minimal'] [data-dropdown-trigger]:hover:not(:disabled) {
12
+ background-image:none;color:var(--ink);border-color:var(--ink-soft);
13
+ }
14
+
15
+ [data-style='minimal'] [data-dropdown-trigger]:focus-visible {
16
+ 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);
17
+ }
18
+
19
+ [data-style='minimal'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
20
+ background-image:none;border-color:var(--ink-soft);
21
+ }
22
+
23
+ [data-style='minimal'] [data-dropdown-trigger] [data-dropdown-icon] {
24
+ color:var(--ink-mute);
25
+ }
26
+
27
+ [data-style='minimal'] [data-dropdown-trigger] [data-dropdown-arrow] {
28
+ color:var(--ink-mute);
29
+ }
30
+
31
+ [data-style='minimal'] [data-dropdown-panel] {
32
+ border-width:1px;background-image:none;--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(--paper-soft);border-color:var(--paper-mute);
33
+ }
34
+
35
+ [data-style='minimal'] [data-dropdown-option] {
36
+ color:var(--ink-mute);
37
+ }
38
+
39
+ [data-style='minimal'] [data-dropdown-option]:hover:not(:disabled),
40
+ [data-style='minimal'] [data-dropdown-option]:focus:not(:disabled) {
41
+ border-left-width:2px;background-image:none;outline:2px solid transparent;outline-offset:2px;color:var(--ink);border-left-color:var(--accent);
42
+ }
43
+
44
+ [data-style='minimal'] [data-dropdown-option][data-active='true'] {
45
+ border-left-width:2px;background-image:none;color:var(--ink);border-left-color:var(--primary);
46
+ }
47
+
48
+ [data-style='minimal'] [data-dropdown-separator] {
49
+ background-image:none;background-color:var(--paper-mute);
50
+ }
@@ -0,0 +1,63 @@
1
+ /**
2
+ * FloatingAction - Minimal Theme Styles
3
+ *
4
+ * Clean, understated styling with subtle borders.
5
+ */
6
+
7
+ /* =============================================================================
8
+ FAB Trigger Button
9
+ ============================================================================= */
10
+
11
+ [data-style='minimal'] [data-fab-trigger] {
12
+ border-width:1px;background-image:none;background-color:var(--paper-soft);color:var(--ink-mute);border-color:var(--paper-edge);
13
+ }
14
+
15
+ [data-style='minimal'] [data-fab-trigger]:hover:not(:disabled) {
16
+ background-image:none;background-color:var(--paper-mute);color:var(--ink);border-color:var(--ink-soft);
17
+ }
18
+
19
+ [data-style='minimal'] [data-fab-trigger]:focus-visible {
20
+ 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);
21
+ }
22
+
23
+ [data-style='minimal'] [data-fab][data-open='true'] [data-fab-trigger] {
24
+ background-image:none;background-color:var(--paper-mute);border-color:var(--ink-soft);
25
+ transform: rotate(45deg);
26
+ }
27
+
28
+ [data-style='minimal'] [data-fab][data-open='true'] [data-fab-trigger]:hover:not(:disabled) {
29
+ background-image:none;
30
+ }
31
+
32
+ /* =============================================================================
33
+ FAB Items
34
+ ============================================================================= */
35
+
36
+ [data-style='minimal'] [data-fab-item] {
37
+ border-width:1px;background-image:none;background-color:var(--paper-soft);color:var(--ink-mute);border-color:var(--paper-edge);
38
+ }
39
+
40
+ [data-style='minimal'] [data-fab-item]:hover:not(:disabled) {
41
+ background-image:none;background-color:var(--paper-mute);color:var(--ink);border-color:var(--ink-soft);
42
+ }
43
+
44
+ [data-style='minimal'] [data-fab-item]:focus-visible {
45
+ 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);
46
+ }
47
+
48
+ /* Item icon */
49
+ [data-style='minimal'] [data-fab-item] [data-fab-item-icon] {
50
+ color:var(--ink-soft);
51
+ }
52
+
53
+ [data-style='minimal'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {
54
+ color:var(--ink-mute);
55
+ }
56
+
57
+ /* =============================================================================
58
+ Backdrop
59
+ ============================================================================= */
60
+
61
+ [data-style='minimal'] [data-fab-backdrop] {
62
+ background-color:color-mix(in srgb, var(--color-ink) calc(0.2 * 100%), transparent);
63
+ }
@@ -0,0 +1,70 @@
1
+ /**
2
+ * FloatingNavigation - Minimal Theme Styles
3
+ *
4
+ * Clean, understated styling with subtle borders.
5
+ */
6
+
7
+ /* =============================================================================
8
+ Container
9
+ ============================================================================= */
10
+
11
+ [data-style='minimal'] [data-floating-nav] {
12
+ border-width:1px;background-image:none;background-color:var(--paper-soft);border-color:var(--paper-edge);
13
+ }
14
+
15
+ /* =============================================================================
16
+ Header
17
+ ============================================================================= */
18
+
19
+ [data-style='minimal'] [data-floating-nav-title] {
20
+ color:var(--ink-soft);
21
+ }
22
+
23
+ [data-style='minimal'] [data-floating-nav-pin] {
24
+ color:var(--ink-soft);
25
+ }
26
+
27
+ [data-style='minimal'] [data-floating-nav-pin]:hover {
28
+ color:var(--ink-mute);
29
+ }
30
+
31
+ [data-style='minimal'] [data-floating-nav-pin][aria-pressed='true'] {
32
+ color:var(--ink);
33
+ }
34
+
35
+ /* =============================================================================
36
+ Items
37
+ ============================================================================= */
38
+
39
+ [data-style='minimal'] [data-floating-nav-item] {
40
+ color:var(--ink-mute);
41
+ }
42
+
43
+ [data-style='minimal'] [data-floating-nav-item]:hover {
44
+ background-image:none;background-color:var(--paper-mute);color:var(--ink);
45
+ }
46
+
47
+ [data-style='minimal'] [data-floating-nav-item][data-active] {
48
+ background-image:none;color:var(--ink);background-color:var(--paper-mute);
49
+ }
50
+
51
+ [data-style='minimal'] [data-floating-nav-item]:focus-visible {
52
+ 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);
53
+ }
54
+
55
+ /* Icon */
56
+ [data-style='minimal'] [data-floating-nav-icon] {
57
+ color:var(--ink-soft);
58
+ }
59
+
60
+ [data-style='minimal'] [data-floating-nav-item][data-active] [data-floating-nav-icon] {
61
+ color:var(--ink);
62
+ }
63
+
64
+ /* =============================================================================
65
+ Active Indicator
66
+ ============================================================================= */
67
+
68
+ [data-style='minimal'] [data-floating-nav-indicator] {
69
+ background-image:none;background-color:var(--ink-mute);
70
+ }
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Frame — minimal theme.
3
+ * Border + background decoration. Base file owns layout / spacing.
4
+ */
5
+
6
+ [data-style='minimal'] [data-frame] {
7
+ border-width:1px;background-color:var(--paper);border-color:var(--paper-edge);
8
+ }
9
+
10
+ [data-style='minimal'] [data-frame-header] {
11
+ border-bottom-width:1px;background-color:var(--paper-soft);border-color:var(--paper-edge);
12
+ }
13
+
14
+ [data-style='minimal'] [data-frame-footer] {
15
+ background-color:var(--paper);border-color:var(--paper-edge);
16
+ border-top: 1px dashed var(--paper-edge);
17
+ }
@@ -0,0 +1,26 @@
1
+ /**
2
+ * Grid - Minimal Theme Styles
3
+ *
4
+ * Tile borders, hover/focus effects, selection highlight.
5
+ */
6
+
7
+ [data-style='minimal'] [data-grid-item] {
8
+ border-color:var(--paper-edge);color:var(--ink-mute);
9
+ }
10
+
11
+ [data-style='minimal'] [data-grid-item]:hover:not(:disabled):not([data-disabled]),
12
+ [data-style='minimal'] [data-grid-item]:focus:not(:disabled):not([data-disabled]) {
13
+ border-color:var(--ink-soft);background-color:var(--paper-mute);color:var(--ink);
14
+ }
15
+
16
+ [data-style='minimal'] [data-grid-item][data-active] {
17
+ border-color:var(--primary);color:var(--primary);
18
+ }
19
+
20
+ [data-style='minimal'] [data-grid-item] [data-item-icon] {
21
+ color:var(--ink-soft);
22
+ }
23
+
24
+ [data-style='minimal'] [data-grid-item][data-active] [data-item-icon] {
25
+ color:var(--primary);
26
+ }
@@ -0,0 +1,171 @@
1
+ /* Minimal Theme - Form field and input styles
2
+ * Underline-only inputs with animated expanding focus line.
3
+ */
4
+
5
+ /* Input root: transparent background, bottom border only */
6
+ [data-style='minimal'] [data-input-root] {
7
+ position:relative;display:flex;align-items:center;border-bottom-width:1px;background-color:transparent;padding:0;border-color:var(--paper-edge);
8
+ border-radius: 0;
9
+ background-image: none;
10
+ transition: background-color 150ms ease;
11
+ }
12
+
13
+ /* Hover: very subtle neutral tint */
14
+ [data-style='minimal'] [data-input-root]:hover:not(:focus-within) {
15
+ background-color:var(--paper-mute);
16
+ background-image: none;
17
+ }
18
+
19
+ /* Focus: keep transparent — the ::after animated line handles the accent */
20
+ [data-style='minimal'] [data-input-root]:focus-within {
21
+ background-color:var(--paper-soft);
22
+ background-image: none;
23
+ }
24
+
25
+ /* Animated underline — grows left to right on focus */
26
+ [data-style='minimal'] [data-input-root]::after {
27
+ content: '';
28
+ position: absolute;
29
+ bottom: -1px;
30
+ left: 0;
31
+ width: 0%;
32
+ height: 2px;
33
+ background-color:var(--accent);
34
+ transition: width 0.3s ease;
35
+ }
36
+
37
+ [data-style='minimal'] [data-input-root]:focus-within::after {
38
+ width: 100%;
39
+ }
40
+
41
+ /* Inputs inside wrapper */
42
+ [data-style='minimal']
43
+ [data-input-root]
44
+ input:not([type='checkbox'], [type='radio'], [type='color']),
45
+ [data-style='minimal'] [data-input-root] textarea,
46
+ [data-style='minimal'] [data-input-root] select {
47
+ width:100%;border-style:none;background-color:transparent;padding-left:0.25rem;padding-right:0.25rem;padding-top:0.375rem;padding-bottom:0.375rem;outline:2px solid transparent;outline-offset:2px;color:var(--ink);
48
+ border-radius: 0;
49
+ font-size: 0.875rem;
50
+ line-height: 1.25rem;
51
+ transition: color 150ms ease;
52
+ }
53
+
54
+ [data-style='minimal'] [data-input-root] textarea {
55
+ min-height:5rem;padding-top:0.5rem;padding-bottom:0.5rem;
56
+ }
57
+
58
+ /* Select inside input-root: match text input appearance */
59
+ [data-style='minimal'] [data-input-root] [data-select-trigger] {
60
+ border-radius:0;border-style:none;background-color:transparent;padding-left:0.25rem;padding-right:0.25rem;--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-width:0px;--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);color:var(--ink);
61
+ font-size: 0.875rem;
62
+ background-image: none;
63
+ transition: color 150ms ease;
64
+ }[data-style="minimal"] [data-input-root] [data-select-trigger]:focus{outline:2px solid transparent;outline-offset:2px;}
65
+
66
+ [data-style='minimal'] [data-input-root] [data-select-trigger]:hover:not(:disabled) {
67
+ background-color:transparent;
68
+ background-image: none;
69
+ }
70
+
71
+ [data-style='minimal'] [data-input-root] [data-select][data-open='true'] [data-select-trigger] {
72
+ border-style:none;background-color:transparent;--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-width:0px;--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);
73
+ }
74
+
75
+ /* Labels: smaller, uppercase */
76
+ [data-style='minimal'] [data-field] > label {
77
+ font-size:0.75rem;line-height:1rem;letter-spacing:0.025em;text-transform:uppercase;color:var(--ink-soft);
78
+ transition: color 150ms ease;
79
+ }
80
+
81
+ [data-style='minimal'] [data-form-root] label {
82
+ font-size:0.75rem;line-height:1rem;letter-spacing:0.025em;text-transform:uppercase;color:var(--ink-soft);
83
+ }
84
+
85
+ /* Focused label: secondary color */
86
+ [data-style='minimal'] [data-field]:has([data-input-root]:focus-within) > label {
87
+ color:var(--accent);
88
+ }
89
+
90
+ /* Field root */
91
+ [data-style='minimal'] [data-field-root] {
92
+ gap:0.125rem;
93
+ }
94
+
95
+ /* Info field value */
96
+ [data-style='minimal'] [data-field-info] {
97
+ color:var(--primary);
98
+ }
99
+
100
+ /* Separator */
101
+ [data-style='minimal'] [data-form-separator] {
102
+ border-color:var(--paper-mute);
103
+ }
104
+
105
+ /* Disabled state */
106
+ [data-style='minimal'] [data-field-disabled] [data-input-root] {
107
+ cursor:not-allowed;opacity:0.4;border-color:var(--paper-mute);
108
+ }
109
+
110
+ [data-style='minimal'] [data-field-disabled] [data-input-root]::after {
111
+ display: none;
112
+ }
113
+
114
+ /* Error state */
115
+ [data-style='minimal'] [data-field-state='fail'] [data-input-root] {
116
+ border-color:var(--danger);background-color:var(--danger-soft);
117
+ }
118
+
119
+ [data-style='minimal'] [data-field-state='fail'] [data-input-root]:hover:not(:focus-within) {
120
+ background-color:var(--danger-soft);
121
+ }
122
+
123
+ [data-style='minimal'] [data-field-state='fail'] [data-input-root]::after {
124
+ background-color:var(--danger);
125
+ }
126
+
127
+ /* Pass state */
128
+ [data-style='minimal'] [data-field-state='pass'] [data-input-root] {
129
+ background-color:var(--success-soft);
130
+ }
131
+
132
+ [data-style='minimal'] [data-field-state='pass'] [data-input-root]:hover:not(:focus-within) {
133
+ background-color:var(--success-soft);
134
+ }
135
+
136
+ [data-style='minimal'] [data-field-state='pass'] [data-input-root]::after {
137
+ background-color:var(--success);
138
+ width: 100%;
139
+ }
140
+
141
+ /* Description */
142
+ [data-style='minimal'] [data-description] {
143
+ margin-top:0.125rem;font-size:0.75rem;line-height:1rem;color:var(--ink-soft);
144
+ }
145
+
146
+ /* Message */
147
+ [data-style='minimal'] [data-message] {
148
+ margin-top:0.125rem;font-size:0.75rem;line-height:1rem;color:var(--danger);
149
+ }
150
+
151
+ /* Checkbox */
152
+ [data-style='minimal'] [data-checkbox-icon] {
153
+ font-size:1.125rem;line-height:1.75rem;color:var(--ink-soft);
154
+ }
155
+
156
+ [data-style='minimal']
157
+ [data-checkbox-root][data-variant='custom']:has(input:checked)
158
+ [data-checkbox-icon] {
159
+ color:var(--accent);
160
+ }
161
+
162
+ /* Checkbox label: secondary on focus (checkbox has no input-root) */
163
+ [data-style='minimal'] [data-field-type='checkbox'] [data-field]:has(:focus-within) > label {
164
+ color:var(--accent);
165
+ }
166
+
167
+ /* Placeholders */
168
+ [data-style='minimal'] [data-input-root] input::placeholder,
169
+ [data-style='minimal'] [data-input-root] textarea::placeholder {
170
+ color:var(--ink-soft);
171
+ }