@rokkit/themes 1.1.15 → 1.1.17

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 (260) hide show
  1. package/build.mjs +71 -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 +148 -0
  45. package/dist/base/swatch.css +85 -0
  46. package/dist/base/switch.css +168 -0
  47. package/dist/base/table.css +310 -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 +185 -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 +7206 -0
  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 +115 -0
  93. package/dist/frosted.css +2357 -0
  94. package/dist/index.css +19199 -0
  95. package/dist/material/button.css +178 -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 +88 -0
  122. package/dist/material/timeline.css +45 -0
  123. package/dist/material/toc.css +18 -0
  124. package/dist/material/toggle.css +74 -0
  125. package/dist/material/toolbar.css +85 -0
  126. package/dist/material/tooltip.css +7 -0
  127. package/dist/material/tree.css +134 -0
  128. package/dist/material.css +2241 -0
  129. package/dist/minimal/button.css +176 -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 +141 -0
  162. package/dist/minimal.css +2317 -0
  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 +190 -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 +45 -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 +149 -0
  200. package/dist/rokkit/upload-progress.css +102 -0
  201. package/dist/rokkit/upload-target.css +50 -0
  202. package/dist/rokkit.css +2789 -0
  203. package/dist/zen-sumi/button.css +176 -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/dropdown.css +53 -0
  209. package/dist/zen-sumi/floating-action.css +68 -0
  210. package/dist/zen-sumi/floating-navigation.css +74 -0
  211. package/dist/zen-sumi/frame.css +20 -0
  212. package/dist/zen-sumi/grid.css +26 -0
  213. package/dist/zen-sumi/input.css +171 -0
  214. package/dist/zen-sumi/list.css +128 -0
  215. package/dist/zen-sumi/menu.css +91 -0
  216. package/dist/zen-sumi/message.css +37 -0
  217. package/dist/zen-sumi/palette-manager.css +97 -0
  218. package/dist/zen-sumi/pill.css +17 -0
  219. package/dist/zen-sumi/progress.css +13 -0
  220. package/dist/zen-sumi/range.css +62 -0
  221. package/dist/zen-sumi/rating.css +13 -0
  222. package/dist/zen-sumi/search-filter.css +49 -0
  223. package/dist/zen-sumi/select.css +160 -0
  224. package/dist/zen-sumi/status-list.css +66 -0
  225. package/dist/zen-sumi/step-indicator.css +40 -0
  226. package/dist/zen-sumi/swatch.css +21 -0
  227. package/dist/zen-sumi/switch.css +34 -0
  228. package/dist/zen-sumi/table.css +128 -0
  229. package/dist/zen-sumi/tabs.css +78 -0
  230. package/dist/zen-sumi/timeline.css +46 -0
  231. package/dist/zen-sumi/toc.css +22 -0
  232. package/dist/zen-sumi/toggle.css +85 -0
  233. package/dist/zen-sumi/toolbar.css +86 -0
  234. package/dist/zen-sumi/tooltip.css +7 -0
  235. package/dist/zen-sumi/tree.css +137 -0
  236. package/dist/zen-sumi.css +2284 -0
  237. package/package.json +45 -43
  238. package/src/frosted/button.css +12 -3
  239. package/src/frosted/card.css +5 -3
  240. package/src/frosted/command-palette.css +2 -1
  241. package/src/frosted/dropdown.css +6 -3
  242. package/src/frosted/floating-action.css +10 -5
  243. package/src/frosted/floating-navigation.css +7 -3
  244. package/src/frosted/input.css +4 -3
  245. package/src/frosted/list.css +12 -6
  246. package/src/frosted/menu.css +6 -3
  247. package/src/frosted/message.css +8 -4
  248. package/src/frosted/range.css +7 -4
  249. package/src/frosted/search-filter.css +7 -3
  250. package/src/frosted/select.css +26 -12
  251. package/src/frosted/status-list.css +2 -1
  252. package/src/frosted/step-indicator.css +6 -3
  253. package/src/frosted/switch.css +2 -1
  254. package/src/frosted/table.css +12 -6
  255. package/src/frosted/tabs.css +5 -2
  256. package/src/frosted/timeline.css +3 -2
  257. package/src/frosted/toc.css +2 -1
  258. package/src/frosted/toggle.css +5 -2
  259. package/src/frosted/toolbar.css +17 -9
  260. package/src/frosted/tree.css +10 -5
@@ -0,0 +1,49 @@
1
+ /**
2
+ * SearchFilter - Minimal Theme Styles
3
+ *
4
+ * Clean, understated styling with subtle borders.
5
+ */
6
+
7
+ /* =============================================================================
8
+ Input
9
+ ============================================================================= */
10
+
11
+ [data-style='minimal'] [data-search-input] {
12
+ border-width:1px;background-color:transparent;color:var(--ink-mute);border-color:var(--paper-edge);
13
+ }
14
+
15
+ [data-style='minimal'] [data-search-input]:focus {
16
+ --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);border-color:var(--ink-soft);--un-ring-color:var(--ink-soft);
17
+ }
18
+
19
+ [data-style='minimal'] [data-search-input]::placeholder {
20
+ color:var(--ink-soft);
21
+ }
22
+
23
+ /* =============================================================================
24
+ Clear Button
25
+ ============================================================================= */
26
+
27
+ [data-style='minimal'] [data-search-clear] {
28
+ color:var(--ink-soft);
29
+ }
30
+
31
+ [data-style='minimal'] [data-search-clear]:hover {
32
+ color:var(--ink-mute);
33
+ }
34
+
35
+ /* =============================================================================
36
+ Tags
37
+ ============================================================================= */
38
+
39
+ [data-style='minimal'] [data-search-tag] {
40
+ border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-edge);
41
+ }
42
+
43
+ [data-style='minimal'] [data-search-tag-remove] {
44
+ color:var(--ink-soft);
45
+ }
46
+
47
+ [data-style='minimal'] [data-search-tag-remove]:hover {
48
+ color:var(--ink-mute);
49
+ }
@@ -0,0 +1,158 @@
1
+ /**
2
+ * Select - Minimal Theme Styles
3
+ *
4
+ * Clean, understated select with subtle borders.
5
+ */
6
+
7
+ /* =============================================================================
8
+ Trigger Button
9
+ ============================================================================= */
10
+
11
+ [data-style='minimal'] [data-select-trigger] {
12
+ border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-edge);
13
+ }
14
+
15
+ [data-style='minimal'] [data-select-trigger]:hover:not(:disabled) {
16
+ background-image:none;border-color:var(--ink-soft);color:var(--ink-mute);
17
+ }
18
+
19
+ [data-style='minimal'] [data-select-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-select][data-open='true'] [data-select-trigger] {
24
+ background-image:none;border-color:var(--ink-soft);
25
+ }
26
+
27
+ /* =============================================================================
28
+ Placeholder
29
+ ============================================================================= */
30
+
31
+ [data-style='minimal'] [data-select-placeholder] {
32
+ color:var(--ink-soft);
33
+ }
34
+
35
+ /* =============================================================================
36
+ Arrow
37
+ ============================================================================= */
38
+
39
+ [data-style='minimal'] [data-select-arrow] {
40
+ color:var(--ink-soft);
41
+ }
42
+
43
+ [data-style='minimal'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
44
+ color:var(--ink-soft);
45
+ }
46
+
47
+ /* =============================================================================
48
+ Tags (MultiSelect)
49
+ ============================================================================= */
50
+
51
+ [data-style='minimal'] [data-select-tag] {
52
+ border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-edge);
53
+ }
54
+
55
+ [data-style='minimal'] [data-select-tag-remove] {
56
+ color:var(--ink-soft);
57
+ }
58
+
59
+ [data-style='minimal'] [data-select-tag-remove]:hover {
60
+ color:var(--ink-mute);
61
+ }
62
+
63
+ /* =============================================================================
64
+ Dropdown Panel
65
+ ============================================================================= */
66
+
67
+ [data-style='minimal'] [data-select-dropdown] {
68
+ 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);
69
+ }
70
+
71
+ /* =============================================================================
72
+ Options
73
+ ============================================================================= */
74
+
75
+ [data-style='minimal'] [data-select-option] {
76
+ border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
77
+ }
78
+
79
+ /* Hover and focus */
80
+ [data-style='minimal'] [data-select-option]:hover:not(:disabled),
81
+ [data-style='minimal'] [data-select-option]:focus:not(:disabled) {
82
+ border-left-width:2px;background-image:none;outline:2px solid transparent;outline-offset:2px;color:var(--ink);border-left-color:var(--accent);
83
+ }
84
+
85
+ /* Selected state */
86
+ [data-style='minimal'] [data-select-option][data-selected='true'] {
87
+ border-left-width:2px;background-image:none;color:var(--ink-mute);border-color:var(--primary);
88
+ }
89
+
90
+ /* Selected state — full highlight when dropdown has focus */
91
+ [data-style='minimal']
92
+ [data-select-dropdown]:focus-within
93
+ [data-select-option][data-selected='true'] {
94
+ border-left-width:2px;background-image:none;color:var(--primary);border-color:var(--primary);
95
+ }
96
+
97
+ /* Check mark */
98
+ [data-style='minimal'] [data-select-check] {
99
+ color:var(--primary);
100
+ }
101
+
102
+ /* Checkbox */
103
+ [data-style='minimal'] [data-select-checkbox] {
104
+ background-color:transparent;background-image:none;border-color:var(--ink-soft);
105
+ }
106
+
107
+ [data-style='minimal'] [data-select-checkbox][data-checked='true'] {
108
+ background-image:none;background-color:var(--primary);border-color:var(--primary);color:var(--on-primary);
109
+ }
110
+
111
+ /* Item elements */
112
+ [data-style='minimal'] [data-select-option] [data-item-description] {
113
+ color:var(--ink-soft);
114
+ }
115
+
116
+ [data-style='minimal'] [data-select-option][data-selected='true'] [data-item-description] {
117
+ color:var(--primary);
118
+ }
119
+
120
+ /* =============================================================================
121
+ Groups
122
+ ============================================================================= */
123
+
124
+ [data-style='minimal'] [data-select-group-label] {
125
+ color:var(--ink-soft);
126
+ }
127
+
128
+ /* =============================================================================
129
+ Divider
130
+ ============================================================================= */
131
+
132
+ [data-style='minimal'] [data-select-divider] {
133
+ background-image:none;background-color:var(--paper-mute);
134
+ }
135
+
136
+ /* =============================================================================
137
+ Filter Input
138
+ ============================================================================= */
139
+
140
+ [data-style='minimal'] [data-select-filter] {
141
+ background-color:var(--paper-soft);
142
+ }
143
+
144
+ [data-style='minimal'] [data-select-filter-input] {
145
+ border-width:1px;background-color:transparent;color:var(--ink-mute);border-color:var(--paper-edge);
146
+ }
147
+
148
+ [data-style='minimal'] [data-select-filter-input]:focus {
149
+ --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);border-color:var(--ink-soft);--un-ring-color:var(--ink-soft);
150
+ }
151
+
152
+ [data-style='minimal'] [data-select-filter-input]::placeholder {
153
+ color:var(--ink-soft);
154
+ }
155
+
156
+ [data-style='minimal'] [data-select-empty] {
157
+ color:var(--ink-soft);
158
+ }
@@ -0,0 +1,66 @@
1
+ /**
2
+ * StatusList - Minimal Theme Styles
3
+ */
4
+
5
+ /* ── @rokkit/ui StatusList: icon and text colors by status ── */
6
+
7
+ [data-style='minimal'] [data-status-item][data-status='pass'] span {
8
+ color:var(--success);
9
+ }
10
+ [data-style='minimal'] [data-status-item][data-status='fail'] span {
11
+ color:var(--error);
12
+ }
13
+ [data-style='minimal'] [data-status-item][data-status='warn'] span {
14
+ color:var(--warning);
15
+ }
16
+ [data-style='minimal'] [data-status-item][data-status='unknown'] span {
17
+ color:var(--paper-edge);
18
+ }
19
+
20
+ [data-style='minimal'] [data-status-item][data-status='pass'] {
21
+ color:var(--success);
22
+ }
23
+ [data-style='minimal'] [data-status-item][data-status='fail'] {
24
+ color:var(--error);
25
+ }
26
+ [data-style='minimal'] [data-status-item][data-status='warn'] {
27
+ color:var(--warning);
28
+ }
29
+ [data-style='minimal'] [data-status-item][data-status='unknown'] {
30
+ color:var(--ink-soft);
31
+ }
32
+
33
+ /* ── @rokkit/forms StatusList: group headers by severity ── */
34
+
35
+ [data-style='minimal'] [data-status-group][data-severity='error'] [data-status-header] {
36
+ color:var(--error);
37
+ }
38
+ [data-style='minimal'] [data-status-group][data-severity='warning'] [data-status-header] {
39
+ color:var(--warning);
40
+ }
41
+ [data-style='minimal'] [data-status-group][data-severity='info'] [data-status-header] {
42
+ color:var(--info);
43
+ }
44
+ [data-style='minimal'] [data-status-group][data-severity='success'] [data-status-header] {
45
+ color:var(--success);
46
+ }
47
+
48
+ /* ── @rokkit/forms StatusList: item colors ── */
49
+
50
+ [data-style='minimal'] [data-status-item][data-status='error'] {
51
+ color:var(--error);
52
+ }
53
+ [data-style='minimal'] [data-status-item][data-status='warning'] {
54
+ color:var(--warning);
55
+ }
56
+ [data-style='minimal'] [data-status-item][data-status='info'] {
57
+ color:var(--info);
58
+ }
59
+ [data-style='minimal'] [data-status-item][data-status='success'] {
60
+ color:var(--success);
61
+ }
62
+
63
+ /* Count badge */
64
+ [data-style='minimal'] [data-status-count] {
65
+ background-image:none;font-weight:600;color:var(--ink-soft);
66
+ }
@@ -0,0 +1,40 @@
1
+ /* StepIndicator — Minimal theme (flat, border-only) */
2
+
3
+ /* ── Number circles ── */
4
+
5
+ [data-style='minimal'] [data-step-item][data-step-state='complete'] [data-step-number] {
6
+ background-image:none;background-color:var(--primary);border-color:var(--primary);color:var(--on-primary);
7
+ }
8
+
9
+ [data-style='minimal'] [data-step-item][data-step-state='current'] [data-step-number] {
10
+ background-color:transparent;background-image:none;border-color:var(--primary);color:var(--primary);
11
+ }
12
+
13
+ [data-style='minimal'] [data-step-item][data-step-state='upcoming'] [data-step-number] {
14
+ background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--ink-soft);
15
+ }
16
+
17
+ /* ── Labels ── */
18
+
19
+ [data-style='minimal'] [data-step-item][data-step-state='complete'] [data-step-label] {
20
+ background-image:none;color:var(--primary);
21
+ }
22
+
23
+ [data-style='minimal'] [data-step-item][data-step-state='current'] [data-step-label] {
24
+ background-image:none;font-weight:600;color:var(--ink-mute);
25
+ }
26
+
27
+ [data-style='minimal'] [data-step-item][data-step-state='upcoming'] [data-step-label] {
28
+ background-image:none;color:var(--ink-soft);
29
+ }
30
+
31
+ /* ── Connector lines ── */
32
+
33
+ [data-style='minimal'] [data-step-item][data-step-state='complete']::after {
34
+ background-color:var(--primary);
35
+ }
36
+
37
+ [data-style='minimal'] [data-step-item][data-step-state='current']::after,
38
+ [data-style='minimal'] [data-step-item][data-step-state='upcoming']::after {
39
+ background-color:var(--paper-mute);
40
+ }
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Swatch — Minimal Theme
3
+ * Selected: secondary outline ring. Hover/focus: primary outline ring.
4
+ */
5
+
6
+ [data-style='minimal'] [data-swatch-item][data-selected] {
7
+ background: transparent;
8
+ outline-color:var(--accent);
9
+ }
10
+
11
+ [data-style='minimal']
12
+ [data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),
13
+ [data-style='minimal']
14
+ [data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]) {
15
+ outline-color:var(--primary);
16
+ }
17
+
18
+ [data-style='minimal'] [data-swatch-item][data-selected]:focus-visible {
19
+ outline-color:var(--accent);
20
+ outline-offset: 3px;
21
+ }
@@ -0,0 +1,32 @@
1
+ /**
2
+ * Switch - Minimal Theme Styles
3
+ * Flat filled pill — no borders, no shadows, just color transitions.
4
+ */
5
+
6
+ [data-style='minimal'] [data-switch-track] {
7
+ border-width:0px;background-color:var(--paper-edge);
8
+ background-image: none;
9
+ }
10
+
11
+ [data-style='minimal'] [data-switch] [data-switch-thumb] {
12
+ --switch-thumb-travel: 1.25rem;
13
+ background-color:var(--paper-soft);
14
+ }
15
+
16
+ [data-style='minimal'] [data-switch]:focus-visible [data-switch-track] {
17
+ --un-ring-width:2px;--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-offset-width:1px;--un-ring-color:var(--primary);
18
+ }
19
+
20
+ /* On state */
21
+ [data-style='minimal'] [data-switch][aria-checked='true'] [data-switch-track] {
22
+ border-width:0px;background-color:var(--primary);
23
+ background-image: none;
24
+ }
25
+
26
+ [data-style='minimal'] [data-switch][aria-checked='true'] [data-switch-thumb] {
27
+ background-color:var(--paper-soft);
28
+ }
29
+
30
+ [data-style='minimal'] [data-switch-label] {
31
+ color:var(--ink-mute);
32
+ }
@@ -0,0 +1,118 @@
1
+ /**
2
+ * Table - Minimal Theme Styles
3
+ *
4
+ * Clean, understated table with subtle borders.
5
+ */
6
+
7
+ /* =============================================================================
8
+ Header
9
+ ============================================================================= */
10
+
11
+ [data-style='minimal'] [data-table-header] th {
12
+ border-bottom-width:1px;color:var(--ink-soft);border-color:var(--paper-edge);background-color:var(--paper-mute);
13
+ }
14
+
15
+ [data-style='minimal'] [data-table-header-cell][data-sortable='true']:hover {
16
+ color:var(--ink-mute);
17
+ }
18
+
19
+ [data-style='minimal'] [data-table-header-cell][data-sort-order='ascending'],
20
+ [data-style='minimal'] [data-table-header-cell][data-sort-order='descending'] {
21
+ color:var(--primary);
22
+ }
23
+
24
+ [data-style='minimal'] [data-table-sort-icon] {
25
+ color:var(--ink-soft);
26
+ }
27
+
28
+ [data-style='minimal'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
29
+ [data-style='minimal']
30
+ [data-table-header-cell][data-sort-order='descending']
31
+ [data-table-sort-icon] {
32
+ color:var(--primary);
33
+ }
34
+
35
+ /* =============================================================================
36
+ Caption
37
+ ============================================================================= */
38
+
39
+ [data-style='minimal'] [data-table-caption] {
40
+ color:var(--ink-mute);
41
+ }
42
+
43
+ /* =============================================================================
44
+ Rows
45
+ ============================================================================= */
46
+
47
+ [data-style='minimal'] [data-table-row] {
48
+ border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-mute);
49
+ }
50
+
51
+ [data-style='minimal'] [data-table-row]:hover {
52
+ background-image:none;color:var(--ink);
53
+ }
54
+
55
+ [data-style='minimal'] [data-table-row]:focus {
56
+ background-image:none;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);color:var(--ink);--un-ring-color:var(--ink-soft);
57
+ }
58
+
59
+ [data-style='minimal'] [data-table-row][data-selected='true'] {
60
+ border-left-width:2px;background-image:none;color:var(--primary);border-left-color:var(--primary);
61
+ }
62
+
63
+ /* Keyboard-focused row + synthesised TreeTable group row */
64
+ [data-style='minimal'] [data-table] tr[data-table-row][data-focused] {
65
+ background-color:var(--paper-mute);
66
+ }
67
+
68
+ [data-style='minimal'] [data-table] tr[data-table-row][data-group] {
69
+ background-color:var(--paper-soft);color:var(--ink);
70
+ font-weight: 500;
71
+ }
72
+
73
+ /* =============================================================================
74
+ Striped
75
+ ============================================================================= */
76
+
77
+ [data-style='minimal'] [data-table-striped] [data-table-body] tr:nth-child(even) {
78
+ background-color:var(--paper-soft);
79
+ }
80
+
81
+ /* =============================================================================
82
+ Empty
83
+ ============================================================================= */
84
+
85
+ [data-style='minimal'] [data-table-empty] {
86
+ color:var(--ink-soft);
87
+ }
88
+
89
+ /* =============================================================================
90
+ Cell Icon
91
+ ============================================================================= */
92
+
93
+ [data-style='minimal'] [data-table-cell] [data-cell-icon] {
94
+ color:var(--ink-soft);
95
+ }
96
+
97
+ [data-style='minimal'] [data-table-row][data-selected='true'] [data-cell-icon] {
98
+ color:var(--primary);
99
+ }
100
+
101
+ /* =============================================================================
102
+ Responsive Card Layout
103
+ ============================================================================= */
104
+
105
+ @media (max-width: 639px) {
106
+ [data-style='minimal'] [data-table-responsive] [data-table-row] {
107
+ border-width:1px;background-image:none;border-color:var(--paper-mute);
108
+ }
109
+
110
+ [data-style='minimal'] [data-table-responsive] [data-table-cell]::before {
111
+ color:var(--ink-soft);
112
+ }
113
+
114
+ /* Disable striped alternating bg in card layout */
115
+ [data-style='minimal'] [data-table-responsive][data-table-striped] [data-table-body] tr:nth-child(even) {
116
+ background: unset;
117
+ }
118
+ }
@@ -0,0 +1,151 @@
1
+ /**
2
+ * Tabs - Minimal Theme Styles
3
+ *
4
+ * Underline-indicator tabs. Active tab: thick bottom border, bolder text.
5
+ * No background fill on any state — clean and typographic.
6
+ */
7
+
8
+ /* =============================================================================
9
+ Tab List
10
+ ============================================================================= */
11
+
12
+ [data-style='minimal'] [data-tabs-list] {
13
+ gap:0;border-width:0px;border-bottom-width:1px;padding-left:0;padding-right:0;border-color:var(--paper-mute);
14
+ }
15
+
16
+ [data-style='minimal'] [data-tabs][data-position='after'] [data-tabs-list] {
17
+ border-top-width:1px;border-bottom-width:0px;
18
+ }
19
+
20
+ [data-style='minimal'] [data-tabs][data-orientation='vertical'] [data-tabs-list] {
21
+ border-right-width:1px;border-bottom-width:0px;
22
+ }
23
+
24
+ [data-style='minimal']
25
+ [data-tabs][data-orientation='vertical'][data-position='after']
26
+ [data-tabs-list] {
27
+ border-top-width:0px;border-right-width:0px;border-left-width:1px;
28
+ }
29
+
30
+ /* =============================================================================
31
+ Tab Triggers — default: horizontal/before (bottom border)
32
+ ============================================================================= */
33
+
34
+ [data-style='minimal'] [data-tabs-trigger] {
35
+ border-bottom-width:3px;border-bottom-color:transparent;background-color:transparent;color:var(--ink-soft);
36
+ font-weight: 400;
37
+ transition:
38
+ color 150ms ease,
39
+ border-color 150ms ease;
40
+ }
41
+
42
+ [data-style='minimal'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
43
+ color:var(--ink-mute);border-bottom-color:var(--paper-edge);
44
+ }
45
+
46
+ [data-style='minimal'] [data-tabs-trigger][data-selected] {
47
+ background-image:none;color:var(--ink);border-bottom-color:var(--primary);
48
+ font-weight: 600;
49
+ }
50
+
51
+ /* Reset rokkit gradients bleeding in */
52
+ [data-style='minimal'] [data-tabs-list]:focus-within [data-tabs-trigger][data-selected] {
53
+ background-image:none;
54
+ }
55
+
56
+ [data-style='minimal']
57
+ [data-tabs][data-orientation='vertical']
58
+ [data-tabs-list]:focus-within
59
+ [data-tabs-trigger][data-selected] {
60
+ background-image:none;
61
+ }
62
+
63
+ [data-style='minimal']
64
+ [data-tabs][data-orientation='vertical'][data-position='after']
65
+ [data-tabs-list]:focus-within
66
+ [data-tabs-trigger][data-selected] {
67
+ background-image:none;
68
+ }
69
+
70
+ /* Horizontal after (tabs below content): top border */
71
+ [data-style='minimal'] [data-tabs][data-position='after'] [data-tabs-trigger] {
72
+ border-top-width:3px;border-bottom-width:0px;border-top-color:transparent;
73
+ }
74
+
75
+ [data-style='minimal']
76
+ [data-tabs][data-position='after']
77
+ [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
78
+ border-top-color:var(--paper-edge);
79
+ }
80
+
81
+ [data-style='minimal'] [data-tabs][data-position='after'] [data-tabs-trigger][data-selected] {
82
+ border-top-color:var(--primary);
83
+ font-weight: 600;
84
+ }
85
+
86
+ [data-style='minimal']
87
+ [data-tabs][data-position='after']
88
+ [data-tabs-list]:focus-within
89
+ [data-tabs-trigger][data-selected] {
90
+ background-image:none;
91
+ }
92
+
93
+ /* Vertical before (tabs on left): right border */
94
+ [data-style='minimal'] [data-tabs][data-orientation='vertical'] [data-tabs-trigger] {
95
+ border-right-width:3px;border-bottom-width:0px;border-right-color:transparent;border-radius:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem;
96
+ }
97
+
98
+ [data-style='minimal']
99
+ [data-tabs][data-orientation='vertical']
100
+ [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
101
+ border-right-color:var(--paper-edge);
102
+ }
103
+
104
+ [data-style='minimal'] [data-tabs][data-orientation='vertical'] [data-tabs-trigger][data-selected] {
105
+ border-right-color:var(--primary);
106
+ font-weight: 600;
107
+ }
108
+
109
+ /* Vertical after (tabs on right): left border */
110
+ [data-style='minimal']
111
+ [data-tabs][data-orientation='vertical'][data-position='after']
112
+ [data-tabs-trigger] {
113
+ border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:3px;border-left-color:transparent;border-radius:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem;
114
+ }
115
+
116
+ [data-style='minimal']
117
+ [data-tabs][data-orientation='vertical'][data-position='after']
118
+ [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
119
+ border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-color:var(--paper-edge);
120
+ }
121
+
122
+ [data-style='minimal']
123
+ [data-tabs][data-orientation='vertical'][data-position='after']
124
+ [data-tabs-trigger][data-selected] {
125
+ border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-color:var(--primary);
126
+ font-weight: 600;
127
+ }
128
+
129
+ /* =============================================================================
130
+ Tab Icon
131
+ ============================================================================= */
132
+
133
+ [data-style='minimal'] [data-tabs-trigger] [data-tabs-icon] {
134
+ color:var(--paper-edge);
135
+ }
136
+
137
+ [data-style='minimal'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
138
+ color:var(--ink-soft);
139
+ }
140
+
141
+ [data-style='minimal'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
142
+ color:var(--ink-mute);
143
+ }
144
+
145
+ /* =============================================================================
146
+ Tab Panel
147
+ ============================================================================= */
148
+
149
+ [data-style='minimal'] [data-tabs-content] {
150
+ color:var(--ink-mute);
151
+ }
@@ -0,0 +1,45 @@
1
+ /**
2
+ * Timeline - Minimal Theme Styles
3
+ *
4
+ * Clean, understated styling with subtle borders.
5
+ */
6
+
7
+ /* =============================================================================
8
+ Circle
9
+ ============================================================================= */
10
+
11
+ [data-style='minimal'] [data-timeline-circle] {
12
+ border-color:var(--paper-edge);color:var(--ink-soft);
13
+ }
14
+
15
+ [data-style='minimal'] [data-timeline-item][data-completed] [data-timeline-circle] {
16
+ border-color:var(--primary);color:var(--primary);
17
+ }
18
+
19
+ [data-style='minimal'] [data-timeline-item][data-active] [data-timeline-circle] {
20
+ border-bottom-width:2px;border-color:var(--primary);color:var(--primary);
21
+ }
22
+
23
+ /* =============================================================================
24
+ Connector
25
+ ============================================================================= */
26
+
27
+ [data-style='minimal'] [data-timeline-connector] {
28
+ background-color:var(--paper-mute);
29
+ }
30
+
31
+ [data-style='minimal'] [data-timeline-item][data-completed] [data-timeline-connector] {
32
+ background-color:var(--primary);
33
+ }
34
+
35
+ /* =============================================================================
36
+ Body
37
+ ============================================================================= */
38
+
39
+ [data-style='minimal'] [data-timeline-title] {
40
+ color:var(--ink-mute);
41
+ }
42
+
43
+ [data-style='minimal'] [data-timeline-description] {
44
+ color:var(--ink-soft);
45
+ }