@rokkit/themes 1.0.0-next.151 → 1.0.0-next.153

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 (262) hide show
  1. package/build.mjs +14 -5
  2. package/dist/ant-design.css +89 -25
  3. package/dist/base.css +488 -40
  4. package/dist/bits-ui.css +69 -16
  5. package/dist/carbon.css +82 -31
  6. package/dist/daisy-ui.css +73 -16
  7. package/dist/frosted.css +1953 -0
  8. package/dist/grada-ui.css +186 -37
  9. package/dist/index.css +2433 -1065
  10. package/dist/material.css +95 -18
  11. package/dist/minimal.css +120 -47
  12. package/dist/rokkit.css +174 -17
  13. package/dist/shadcn.css +70 -24
  14. package/package.json +5 -5
  15. package/src/ant-design/button.css +31 -24
  16. package/src/ant-design/card.css +4 -4
  17. package/src/ant-design/chart.css +5 -5
  18. package/src/ant-design/dropdown.css +7 -7
  19. package/src/ant-design/floating-action.css +5 -5
  20. package/src/ant-design/floating-navigation.css +4 -4
  21. package/src/ant-design/grid.css +1 -1
  22. package/src/ant-design/index.css +1 -0
  23. package/src/ant-design/input.css +4 -2
  24. package/src/ant-design/list.css +11 -11
  25. package/src/ant-design/menu.css +6 -6
  26. package/src/ant-design/range.css +1 -1
  27. package/src/ant-design/search-filter.css +2 -2
  28. package/src/ant-design/select.css +12 -12
  29. package/src/ant-design/status-list.css +1 -1
  30. package/src/ant-design/step-indicator.css +38 -0
  31. package/src/ant-design/switch.css +2 -2
  32. package/src/ant-design/table.css +8 -6
  33. package/src/ant-design/tabs.css +13 -9
  34. package/src/ant-design/toggle.css +3 -3
  35. package/src/ant-design/toolbar.css +7 -7
  36. package/src/ant-design/tree.css +21 -11
  37. package/src/ant-design/upload-progress.css +1 -1
  38. package/src/ant-design/upload-target.css +1 -1
  39. package/src/base/avatar.css +82 -0
  40. package/src/base/badge.css +41 -0
  41. package/src/base/button.css +6 -6
  42. package/src/base/card.css +7 -4
  43. package/src/base/chart.css +5 -5
  44. package/src/base/density.css +51 -0
  45. package/src/base/divider.css +49 -0
  46. package/src/base/dropdown.css +5 -4
  47. package/src/base/index.css +6 -0
  48. package/src/base/input.css +3 -1
  49. package/src/base/list.css +12 -7
  50. package/src/base/menu.css +7 -5
  51. package/src/base/stack.css +76 -0
  52. package/src/base/step-indicator.css +74 -0
  53. package/src/base/swatch.css +12 -6
  54. package/src/base/table.css +52 -2
  55. package/src/bits-ui/button.css +18 -18
  56. package/src/bits-ui/card.css +4 -4
  57. package/src/bits-ui/chart.css +5 -5
  58. package/src/bits-ui/dropdown.css +5 -5
  59. package/src/bits-ui/floating-action.css +5 -5
  60. package/src/bits-ui/floating-navigation.css +2 -2
  61. package/src/bits-ui/index.css +1 -0
  62. package/src/bits-ui/input.css +8 -4
  63. package/src/bits-ui/list.css +4 -4
  64. package/src/bits-ui/menu.css +5 -5
  65. package/src/bits-ui/range.css +2 -2
  66. package/src/bits-ui/search-filter.css +2 -2
  67. package/src/bits-ui/select.css +9 -9
  68. package/src/bits-ui/status-list.css +1 -1
  69. package/src/bits-ui/step-indicator.css +40 -0
  70. package/src/bits-ui/switch.css +2 -2
  71. package/src/bits-ui/table.css +1 -1
  72. package/src/bits-ui/tabs.css +5 -5
  73. package/src/bits-ui/toggle.css +2 -2
  74. package/src/bits-ui/toolbar.css +7 -7
  75. package/src/bits-ui/tree.css +12 -4
  76. package/src/bits-ui/upload-progress.css +1 -1
  77. package/src/carbon/button.css +23 -20
  78. package/src/carbon/card.css +5 -5
  79. package/src/carbon/chart.css +5 -5
  80. package/src/carbon/dropdown.css +8 -8
  81. package/src/carbon/floating-action.css +8 -8
  82. package/src/carbon/floating-navigation.css +5 -5
  83. package/src/carbon/index.css +1 -0
  84. package/src/carbon/input.css +2 -2
  85. package/src/carbon/list.css +12 -14
  86. package/src/carbon/menu.css +8 -8
  87. package/src/carbon/range.css +2 -2
  88. package/src/carbon/search-filter.css +2 -2
  89. package/src/carbon/select.css +13 -13
  90. package/src/carbon/status-list.css +1 -1
  91. package/src/carbon/step-indicator.css +40 -0
  92. package/src/carbon/switch.css +3 -3
  93. package/src/carbon/table.css +6 -6
  94. package/src/carbon/tabs.css +10 -8
  95. package/src/carbon/toc.css +2 -2
  96. package/src/carbon/toggle.css +3 -3
  97. package/src/carbon/toolbar.css +8 -9
  98. package/src/carbon/tree.css +22 -14
  99. package/src/carbon/upload-progress.css +2 -2
  100. package/src/carbon/upload-target.css +2 -2
  101. package/src/daisy-ui/button.css +20 -19
  102. package/src/daisy-ui/card.css +5 -5
  103. package/src/daisy-ui/chart.css +5 -5
  104. package/src/daisy-ui/dropdown.css +8 -8
  105. package/src/daisy-ui/floating-action.css +6 -6
  106. package/src/daisy-ui/floating-navigation.css +5 -5
  107. package/src/daisy-ui/grid.css +1 -1
  108. package/src/daisy-ui/index.css +1 -0
  109. package/src/daisy-ui/input.css +5 -3
  110. package/src/daisy-ui/list.css +9 -9
  111. package/src/daisy-ui/menu.css +7 -7
  112. package/src/daisy-ui/range.css +3 -3
  113. package/src/daisy-ui/search-filter.css +3 -3
  114. package/src/daisy-ui/select.css +14 -14
  115. package/src/daisy-ui/status-list.css +1 -1
  116. package/src/daisy-ui/step-indicator.css +37 -0
  117. package/src/daisy-ui/switch.css +3 -3
  118. package/src/daisy-ui/table.css +7 -5
  119. package/src/daisy-ui/tabs.css +10 -6
  120. package/src/daisy-ui/toggle.css +3 -3
  121. package/src/daisy-ui/toolbar.css +6 -6
  122. package/src/daisy-ui/tree.css +20 -10
  123. package/src/daisy-ui/upload-target.css +1 -1
  124. package/src/frosted/button.css +224 -0
  125. package/src/frosted/card.css +130 -0
  126. package/src/frosted/chart.css +38 -0
  127. package/src/frosted/dropdown.css +66 -0
  128. package/src/{glass → frosted}/floating-action.css +10 -10
  129. package/src/{glass → frosted}/floating-navigation.css +13 -13
  130. package/src/{glass → frosted}/index.css +1 -0
  131. package/src/frosted/input.css +135 -0
  132. package/src/frosted/list.css +122 -0
  133. package/src/frosted/menu.css +108 -0
  134. package/src/frosted/message.css +35 -0
  135. package/src/{glass → frosted}/range.css +10 -10
  136. package/src/{glass → frosted}/search-filter.css +8 -8
  137. package/src/{glass → frosted}/select.css +34 -34
  138. package/src/frosted/status-list.css +66 -0
  139. package/src/frosted/step-indicator.css +41 -0
  140. package/src/frosted/swatch.css +21 -0
  141. package/src/frosted/switch.css +43 -0
  142. package/src/frosted/table.css +106 -0
  143. package/src/{glass → frosted}/tabs.css +10 -10
  144. package/src/{glass → frosted}/timeline.css +7 -7
  145. package/src/frosted/toc.css +18 -0
  146. package/src/{glass → frosted}/toggle.css +9 -9
  147. package/src/{glass → frosted}/toolbar.css +16 -16
  148. package/src/{glass → frosted}/tree.css +20 -20
  149. package/src/grada-ui/button.css +20 -6
  150. package/src/grada-ui/card.css +12 -6
  151. package/src/grada-ui/chart.css +5 -5
  152. package/src/grada-ui/dropdown.css +7 -3
  153. package/src/grada-ui/floating-action.css +11 -4
  154. package/src/grada-ui/floating-navigation.css +5 -1
  155. package/src/grada-ui/index.css +1 -0
  156. package/src/grada-ui/input.css +2 -2
  157. package/src/grada-ui/list.css +15 -3
  158. package/src/grada-ui/menu.css +2 -2
  159. package/src/grada-ui/range.css +5 -1
  160. package/src/grada-ui/search-filter.css +6 -2
  161. package/src/grada-ui/select.css +27 -9
  162. package/src/grada-ui/status-list.css +5 -1
  163. package/src/grada-ui/step-indicator.css +37 -0
  164. package/src/grada-ui/switch.css +7 -3
  165. package/src/grada-ui/table.css +2 -2
  166. package/src/grada-ui/tabs.css +5 -1
  167. package/src/grada-ui/timeline.css +10 -2
  168. package/src/grada-ui/toggle.css +7 -3
  169. package/src/grada-ui/toolbar.css +10 -2
  170. package/src/grada-ui/tree.css +8 -2
  171. package/src/index.css +2 -2
  172. package/src/material/button.css +5 -5
  173. package/src/material/card.css +4 -4
  174. package/src/material/chart.css +5 -5
  175. package/src/material/dropdown.css +7 -7
  176. package/src/material/floating-action.css +5 -5
  177. package/src/material/floating-navigation.css +4 -4
  178. package/src/material/index.css +1 -0
  179. package/src/material/input.css +1 -1
  180. package/src/material/list.css +11 -11
  181. package/src/material/menu.css +6 -6
  182. package/src/material/message.css +0 -1
  183. package/src/material/range.css +1 -1
  184. package/src/material/search-filter.css +1 -1
  185. package/src/material/select.css +14 -12
  186. package/src/material/status-list.css +1 -1
  187. package/src/material/step-indicator.css +41 -0
  188. package/src/material/swatch.css +4 -2
  189. package/src/material/switch.css +2 -2
  190. package/src/material/table.css +24 -5
  191. package/src/material/tabs.css +6 -3
  192. package/src/material/toggle.css +3 -3
  193. package/src/material/toolbar.css +7 -7
  194. package/src/material/tree.css +17 -7
  195. package/src/minimal/button.css +7 -7
  196. package/src/minimal/card.css +4 -4
  197. package/src/minimal/chart.css +5 -5
  198. package/src/minimal/dropdown.css +7 -7
  199. package/src/minimal/floating-action.css +5 -5
  200. package/src/minimal/floating-navigation.css +4 -4
  201. package/src/minimal/index.css +1 -0
  202. package/src/minimal/list.css +18 -16
  203. package/src/minimal/menu.css +6 -6
  204. package/src/minimal/message.css +0 -1
  205. package/src/minimal/range.css +1 -1
  206. package/src/minimal/search-filter.css +1 -1
  207. package/src/minimal/select.css +11 -11
  208. package/src/minimal/status-list.css +1 -1
  209. package/src/minimal/step-indicator.css +40 -0
  210. package/src/minimal/swatch.css +4 -2
  211. package/src/minimal/table.css +24 -5
  212. package/src/minimal/tabs.css +10 -8
  213. package/src/minimal/toggle.css +1 -1
  214. package/src/minimal/toolbar.css +7 -7
  215. package/src/minimal/tree.css +14 -6
  216. package/src/rokkit/avatar.css +29 -0
  217. package/src/rokkit/badge.css +29 -0
  218. package/src/rokkit/button.css +1 -1
  219. package/src/rokkit/chart.css +5 -5
  220. package/src/rokkit/divider.css +26 -0
  221. package/src/rokkit/index.css +5 -0
  222. package/src/rokkit/stack.css +6 -0
  223. package/src/rokkit/step-indicator.css +41 -0
  224. package/src/rokkit/swatch.css +4 -2
  225. package/src/rokkit/table.css +25 -6
  226. package/src/shadcn/button.css +20 -21
  227. package/src/shadcn/card.css +4 -4
  228. package/src/shadcn/chart.css +5 -5
  229. package/src/shadcn/dropdown.css +7 -7
  230. package/src/shadcn/floating-action.css +5 -5
  231. package/src/shadcn/floating-navigation.css +4 -4
  232. package/src/shadcn/index.css +1 -0
  233. package/src/shadcn/input.css +4 -2
  234. package/src/shadcn/list.css +13 -15
  235. package/src/shadcn/menu.css +7 -7
  236. package/src/shadcn/range.css +2 -2
  237. package/src/shadcn/search-filter.css +2 -2
  238. package/src/shadcn/select.css +13 -13
  239. package/src/shadcn/status-list.css +1 -1
  240. package/src/shadcn/step-indicator.css +37 -0
  241. package/src/shadcn/switch.css +2 -2
  242. package/src/shadcn/table.css +4 -4
  243. package/src/shadcn/tabs.css +10 -8
  244. package/src/shadcn/toc.css +2 -2
  245. package/src/shadcn/toggle.css +4 -4
  246. package/src/shadcn/toolbar.css +8 -9
  247. package/src/shadcn/tree.css +21 -13
  248. package/src/shadcn/upload-progress.css +1 -1
  249. package/dist/glass.css +0 -1760
  250. package/src/glass/button.css +0 -174
  251. package/src/glass/card.css +0 -103
  252. package/src/glass/chart.css +0 -38
  253. package/src/glass/dropdown.css +0 -50
  254. package/src/glass/input.css +0 -128
  255. package/src/glass/list.css +0 -122
  256. package/src/glass/menu.css +0 -92
  257. package/src/glass/message.css +0 -36
  258. package/src/glass/status-list.css +0 -66
  259. package/src/glass/swatch.css +0 -19
  260. package/src/glass/switch.css +0 -28
  261. package/src/glass/table.css +0 -87
  262. package/src/glass/toc.css +0 -18
@@ -17,7 +17,7 @@
17
17
  ============================================================================= */
18
18
 
19
19
  [data-style='bits-ui'] [data-list] [data-list-item] {
20
- @apply text-surface-z7 border-0 border-solid border-transparent rounded-lg;
20
+ @apply text-surface-z7 rounded-lg border-0 border-solid border-transparent;
21
21
  }
22
22
 
23
23
  [data-style='bits-ui'] [data-list] a[data-list-item],
@@ -77,11 +77,11 @@
77
77
  }
78
78
 
79
79
  [data-style='bits-ui'] [data-list] [data-list-item] [data-item-badge] {
80
- @apply bg-none text-surface-z6 border-surface-z3 border bg-transparent rounded-lg;
80
+ @apply text-surface-z6 border-surface-z3 rounded-lg border bg-transparent bg-none;
81
81
  }
82
82
 
83
83
  [data-style='bits-ui'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
84
- @apply bg-none text-primary-z7 border-primary-z3;
84
+ @apply text-primary-z7 border-primary-z3 bg-none;
85
85
  }
86
86
 
87
87
  /* =============================================================================
@@ -102,7 +102,7 @@
102
102
  ============================================================================= */
103
103
 
104
104
  [data-style='bits-ui'] [data-list] [data-list-separator] {
105
- @apply bg-none bg-surface-z3;
105
+ @apply bg-surface-z3 bg-none;
106
106
  }
107
107
 
108
108
  /* =============================================================================
@@ -9,11 +9,11 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='bits-ui'] [data-menu-trigger] {
12
- @apply bg-none border-surface-z3 text-surface-z7 border bg-surface-z1 rounded-lg shadow-sm;
12
+ @apply border-surface-z3 text-surface-z7 bg-surface-z1 rounded-lg border bg-none shadow-sm;
13
13
  }
14
14
 
15
15
  [data-style='bits-ui'] [data-menu-trigger]:hover:not(:disabled) {
16
- @apply bg-none text-surface-z9 border-surface-z4 shadow-md;
16
+ @apply text-surface-z9 border-surface-z4 bg-none shadow-md;
17
17
  }
18
18
 
19
19
  [data-style='bits-ui'] [data-menu-trigger]:focus-visible {
@@ -21,7 +21,7 @@
21
21
  }
22
22
 
23
23
  [data-style='bits-ui'] [data-menu][data-open='true'] [data-menu-trigger] {
24
- @apply bg-none border-surface-z5 ring-primary-z3 ring-2;
24
+ @apply border-surface-z5 ring-primary-z3 bg-none ring-2;
25
25
  }
26
26
 
27
27
  /* Trigger elements */
@@ -42,7 +42,7 @@
42
42
  ============================================================================= */
43
43
 
44
44
  [data-style='bits-ui'] [data-menu-dropdown] {
45
- @apply bg-none bg-surface-z1 border-surface-z3 border shadow-lg rounded-xl;
45
+ @apply bg-surface-z1 border-surface-z3 rounded-xl border bg-none shadow-lg;
46
46
  }
47
47
 
48
48
  /* =============================================================================
@@ -84,5 +84,5 @@
84
84
  ============================================================================= */
85
85
 
86
86
  [data-style='bits-ui'] [data-menu-separator] {
87
- @apply bg-none bg-surface-z3;
87
+ @apply bg-surface-z3 bg-none;
88
88
  }
@@ -13,7 +13,7 @@
13
13
  }
14
14
 
15
15
  [data-style='bits-ui'] [data-range-selected] {
16
- @apply bg-none bg-primary rounded-lg;
16
+ @apply bg-primary rounded-lg bg-none;
17
17
  }
18
18
 
19
19
  /* =============================================================================
@@ -21,7 +21,7 @@
21
21
  ============================================================================= */
22
22
 
23
23
  [data-style='bits-ui'] [data-range-thumb] {
24
- @apply bg-surface-z1 border-primary border-2 shadow-sm rounded-lg;
24
+ @apply bg-surface-z1 border-primary rounded-lg border-2 shadow-sm;
25
25
  }
26
26
 
27
27
  [data-style='bits-ui'] [data-range-thumb][data-sliding] {
@@ -9,7 +9,7 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='bits-ui'] [data-search-input] {
12
- @apply text-surface-z7 border-surface-z3 border bg-surface-z1 rounded-lg shadow-sm;
12
+ @apply text-surface-z7 border-surface-z3 bg-surface-z1 rounded-lg border shadow-sm;
13
13
  }
14
14
 
15
15
  [data-style='bits-ui'] [data-search-input]:focus {
@@ -37,7 +37,7 @@
37
37
  ============================================================================= */
38
38
 
39
39
  [data-style='bits-ui'] [data-search-tag] {
40
- @apply bg-none text-surface-z7 border-surface-z3 border bg-surface-z2 rounded-lg;
40
+ @apply text-surface-z7 border-surface-z3 bg-surface-z2 rounded-lg border bg-none;
41
41
  }
42
42
 
43
43
  [data-style='bits-ui'] [data-search-tag-remove] {
@@ -9,11 +9,11 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='bits-ui'] [data-select-trigger] {
12
- @apply bg-none text-surface-z7 border-surface-z3 border bg-surface-z1 rounded-lg shadow-sm;
12
+ @apply text-surface-z7 border-surface-z3 bg-surface-z1 rounded-lg border bg-none shadow-sm;
13
13
  }
14
14
 
15
15
  [data-style='bits-ui'] [data-select-trigger]:hover:not(:disabled) {
16
- @apply bg-none border-surface-z4 text-surface-z8 shadow-md;
16
+ @apply border-surface-z4 text-surface-z8 bg-none shadow-md;
17
17
  }
18
18
 
19
19
  [data-style='bits-ui'] [data-select-trigger]:focus-visible {
@@ -21,7 +21,7 @@
21
21
  }
22
22
 
23
23
  [data-style='bits-ui'] [data-select][data-open='true'] [data-select-trigger] {
24
- @apply bg-none border-surface-z5 ring-primary-z3 ring-2;
24
+ @apply border-surface-z5 ring-primary-z3 bg-none ring-2;
25
25
  }
26
26
 
27
27
  /* =============================================================================
@@ -49,7 +49,7 @@
49
49
  ============================================================================= */
50
50
 
51
51
  [data-style='bits-ui'] [data-select-tag] {
52
- @apply bg-none text-surface-z7 border-surface-z3 border bg-surface-z2 rounded-lg;
52
+ @apply text-surface-z7 border-surface-z3 bg-surface-z2 rounded-lg border bg-none;
53
53
  }
54
54
 
55
55
  [data-style='bits-ui'] [data-select-tag-remove] {
@@ -65,7 +65,7 @@
65
65
  ============================================================================= */
66
66
 
67
67
  [data-style='bits-ui'] [data-select-dropdown] {
68
- @apply bg-none bg-surface-z1 border-surface-z3 border shadow-lg rounded-xl;
68
+ @apply bg-surface-z1 border-surface-z3 rounded-xl border bg-none shadow-lg;
69
69
  }
70
70
 
71
71
  /* =============================================================================
@@ -101,11 +101,11 @@
101
101
 
102
102
  /* Checkbox */
103
103
  [data-style='bits-ui'] [data-select-checkbox] {
104
- @apply bg-none border-surface-z4 bg-transparent rounded;
104
+ @apply border-surface-z4 rounded bg-transparent bg-none;
105
105
  }
106
106
 
107
107
  [data-style='bits-ui'] [data-select-checkbox][data-checked='true'] {
108
- @apply bg-none bg-primary-z5 border-primary-z5 text-white;
108
+ @apply bg-primary-z5 border-primary-z5 bg-none text-white;
109
109
  }
110
110
 
111
111
  /* Item elements */
@@ -130,7 +130,7 @@
130
130
  ============================================================================= */
131
131
 
132
132
  [data-style='bits-ui'] [data-select-divider] {
133
- @apply bg-none bg-surface-z3;
133
+ @apply bg-surface-z3 bg-none;
134
134
  }
135
135
 
136
136
  /* =============================================================================
@@ -142,7 +142,7 @@
142
142
  }
143
143
 
144
144
  [data-style='bits-ui'] [data-select-filter-input] {
145
- @apply text-surface-z7 border-surface-z3 border bg-transparent rounded-lg;
145
+ @apply text-surface-z7 border-surface-z3 rounded-lg border bg-transparent;
146
146
  }
147
147
 
148
148
  [data-style='bits-ui'] [data-select-filter-input]:focus {
@@ -62,5 +62,5 @@
62
62
 
63
63
  /* Count badge */
64
64
  [data-style='bits-ui'] [data-status-count] {
65
- @apply bg-none text-surface-z6 font-semibold;
65
+ @apply text-surface-z6 bg-none font-semibold;
66
66
  }
@@ -0,0 +1,40 @@
1
+ /* StepIndicator — bits-ui theme (rounded-lg, shadow-sm, premium soft) */
2
+
3
+ [data-style='bits-ui'] [data-step-item][data-step-state='complete'] [data-step-number] {
4
+ @apply bg-primary-z5 border-primary-z5 text-on-primary bg-none shadow-sm;
5
+ border-radius: 0.5rem;
6
+ }
7
+
8
+ [data-style='bits-ui'] [data-step-item][data-step-state='current'] [data-step-number] {
9
+ @apply bg-surface-z2 border-primary-z4 text-primary-z7 bg-none shadow-sm;
10
+ border-radius: 0.5rem;
11
+ box-shadow:
12
+ 0 1px 2px 0 rgb(0 0 0 / 0.05),
13
+ 0 0 0 3px color-mix(in srgb, var(--color-primary-500, #6366f1) 15%, transparent);
14
+ }
15
+
16
+ [data-style='bits-ui'] [data-step-item][data-step-state='upcoming'] [data-step-number] {
17
+ @apply bg-surface-z1 border-surface-z3 text-surface-z5 bg-none shadow-sm;
18
+ border-radius: 0.5rem;
19
+ }
20
+
21
+ [data-style='bits-ui'] [data-step-item][data-step-state='complete'] [data-step-label] {
22
+ @apply text-primary-z7 bg-none;
23
+ }
24
+
25
+ [data-style='bits-ui'] [data-step-item][data-step-state='current'] [data-step-label] {
26
+ @apply text-surface-z9 font-semibold bg-none;
27
+ }
28
+
29
+ [data-style='bits-ui'] [data-step-item][data-step-state='upcoming'] [data-step-label] {
30
+ @apply text-surface-z5 bg-none;
31
+ }
32
+
33
+ [data-style='bits-ui'] [data-step-item][data-step-state='complete']::after {
34
+ @apply bg-primary-z5;
35
+ }
36
+
37
+ [data-style='bits-ui'] [data-step-item][data-step-state='current']::after,
38
+ [data-style='bits-ui'] [data-step-item][data-step-state='upcoming']::after {
39
+ @apply bg-surface-z3;
40
+ }
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  [data-style='bits-ui'] [data-switch-track] {
6
- @apply bg-none border-surface-z3 border-2 bg-surface-z2 rounded-lg;
6
+ @apply border-surface-z3 bg-surface-z2 rounded-lg border-2 bg-none;
7
7
  }
8
8
 
9
9
  [data-style='bits-ui'] [data-switch] [data-switch-thumb] {
@@ -17,7 +17,7 @@
17
17
 
18
18
  /* On state */
19
19
  [data-style='bits-ui'] [data-switch][aria-checked='true'] [data-switch-track] {
20
- @apply bg-none border-primary-z4 bg-primary-z2;
20
+ @apply border-primary-z4 bg-primary-z2 bg-none;
21
21
  }
22
22
 
23
23
  [data-style='bits-ui'] [data-switch][aria-checked='true'] [data-switch-thumb] {
@@ -64,7 +64,7 @@
64
64
  Striped
65
65
  ============================================================================= */
66
66
 
67
- [data-style='bits-ui'] [data-striped='true'] [data-table-body] tr:nth-child(even) {
67
+ [data-style='bits-ui'] [data-table-striped] [data-table-body] tr:nth-child(even) {
68
68
  @apply bg-surface-z1;
69
69
  }
70
70
 
@@ -31,7 +31,7 @@
31
31
  ============================================================================= */
32
32
 
33
33
  [data-style='bits-ui'] [data-tabs-trigger] {
34
- @apply bg-transparent text-surface-z5 rounded-lg border-b-[3px] border-b-transparent;
34
+ @apply text-surface-z5 rounded-lg border-b-[3px] border-b-transparent bg-transparent;
35
35
  font-weight: 400;
36
36
  transition:
37
37
  color 150ms ease,
@@ -69,7 +69,7 @@
69
69
 
70
70
  /* Horizontal after (tabs below content): top border */
71
71
  [data-style='bits-ui'] [data-tabs][data-position='after'] [data-tabs-trigger] {
72
- @apply border-b-0 border-t-[3px] border-t-transparent;
72
+ @apply border-t-[3px] border-b-0 border-t-transparent;
73
73
  }
74
74
 
75
75
  [data-style='bits-ui']
@@ -92,7 +92,7 @@
92
92
 
93
93
  /* Vertical before (tabs on left): right border */
94
94
  [data-style='bits-ui'] [data-tabs][data-orientation='vertical'] [data-tabs-trigger] {
95
- @apply border-b-0 border-r-[3px] border-r-transparent rounded-lg;
95
+ @apply rounded-lg border-r-[3px] border-b-0 border-r-transparent;
96
96
  }
97
97
 
98
98
  [data-style='bits-ui']
@@ -110,7 +110,7 @@
110
110
  [data-style='bits-ui']
111
111
  [data-tabs][data-orientation='vertical'][data-position='after']
112
112
  [data-tabs-trigger] {
113
- @apply border-t-0 border-b-0 border-r-0 border-l-[3px] border-l-transparent rounded-lg;
113
+ @apply rounded-lg border-t-0 border-r-0 border-b-0 border-l-[3px] border-l-transparent;
114
114
  }
115
115
 
116
116
  [data-style='bits-ui']
@@ -122,7 +122,7 @@
122
122
  [data-style='bits-ui']
123
123
  [data-tabs][data-orientation='vertical'][data-position='after']
124
124
  [data-tabs-trigger][data-selected] {
125
- @apply border-t-0 border-b-0 border-r-0 border-l-primary-z5;
125
+ @apply border-l-primary-z5 border-t-0 border-r-0 border-b-0;
126
126
  font-weight: 600;
127
127
  }
128
128
 
@@ -9,7 +9,7 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='bits-ui'] [data-toggle] {
12
- @apply bg-none border-surface-z3 rounded-lg border bg-surface-z1 shadow-sm;
12
+ @apply border-surface-z3 bg-surface-z1 rounded-lg border bg-none shadow-sm;
13
13
  }
14
14
 
15
15
  /* =============================================================================
@@ -17,7 +17,7 @@
17
17
  ============================================================================= */
18
18
 
19
19
  [data-style='bits-ui'] [data-toggle-option] {
20
- @apply text-surface-z6 border-0 border-solid border-transparent rounded-lg;
20
+ @apply text-surface-z6 rounded-lg border-0 border-solid border-transparent;
21
21
  }
22
22
 
23
23
  [data-style='bits-ui'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -9,7 +9,7 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='bits-ui'] [data-toolbar] {
12
- @apply bg-none bg-transparent;
12
+ @apply bg-transparent bg-none;
13
13
  }
14
14
 
15
15
  /* Position-based borders */
@@ -39,21 +39,21 @@
39
39
  }
40
40
 
41
41
  [data-style='bits-ui'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
42
- @apply bg-none text-surface-z9;
42
+ @apply text-surface-z9 bg-none;
43
43
  }
44
44
 
45
45
  [data-style='bits-ui']
46
46
  [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
47
- @apply bg-none text-surface-z9 ring-primary-z3 ring-2 outline-none;
47
+ @apply text-surface-z9 ring-primary-z3 bg-none ring-2 outline-none;
48
48
  }
49
49
 
50
50
  /* Active/pressed state */
51
51
  [data-style='bits-ui'] [data-toolbar-item][data-active='true'] {
52
- @apply bg-none text-primary-z7;
52
+ @apply text-primary-z7 bg-none;
53
53
  }
54
54
 
55
55
  [data-style='bits-ui'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
56
- @apply bg-none text-primary-z8;
56
+ @apply text-primary-z8 bg-none;
57
57
  }
58
58
 
59
59
  /* =============================================================================
@@ -77,9 +77,9 @@
77
77
  ============================================================================= */
78
78
 
79
79
  [data-style='bits-ui'] [data-toolbar-separator] {
80
- @apply bg-none bg-surface-z3;
80
+ @apply bg-surface-z3 bg-none;
81
81
  }
82
82
 
83
83
  [data-style='bits-ui'] [data-toolbar-divider] {
84
- @apply bg-none bg-surface-z3;
84
+ @apply bg-surface-z3 bg-none;
85
85
  }
@@ -56,7 +56,9 @@
56
56
  @apply bg-primary-z2;
57
57
  }
58
58
 
59
- [data-style='bits-ui'] [data-tree]:focus-within [data-tree-item-content][data-active='true']:hover:not(:disabled) {
59
+ [data-style='bits-ui']
60
+ [data-tree]:focus-within
61
+ [data-tree-item-content][data-active='true']:hover:not(:disabled) {
60
62
  @apply bg-primary-z3;
61
63
  }
62
64
 
@@ -89,18 +91,24 @@
89
91
  }
90
92
 
91
93
  [data-style='bits-ui'] [data-tree-item-content] [data-item-badge] {
92
- @apply bg-none text-surface-z6 border-surface-z3 border bg-transparent rounded-lg;
94
+ @apply text-surface-z6 border-surface-z3 rounded-lg border bg-transparent bg-none;
93
95
  }
94
96
 
95
97
  [data-style='bits-ui'] [data-tree-item-content][data-active='true'] [data-item-badge] {
96
98
  @apply text-primary-z7 border-primary-z3;
97
99
  }
98
100
 
99
- [data-style='bits-ui'] [data-tree]:focus-within [data-tree-item-content][data-active='true'] [data-item-badge] {
101
+ [data-style='bits-ui']
102
+ [data-tree]:focus-within
103
+ [data-tree-item-content][data-active='true']
104
+ [data-item-badge] {
100
105
  @apply bg-none;
101
106
  }
102
107
 
103
- [data-style='bits-ui'] [data-tree]:not(:focus-within) [data-tree-item-content][data-active='true'] [data-item-badge] {
108
+ [data-style='bits-ui']
109
+ [data-tree]:not(:focus-within)
110
+ [data-tree-item-content][data-active='true']
111
+ [data-item-badge] {
104
112
  @apply bg-none;
105
113
  }
106
114
 
@@ -53,7 +53,7 @@
53
53
  }
54
54
 
55
55
  [data-style='bits-ui'] [data-upload-fill] {
56
- @apply from-primary-z5 to-secondary-z5 bg-gradient-to-r rounded-lg;
56
+ @apply from-primary-z5 to-secondary-z5 rounded-lg bg-gradient-to-r;
57
57
  }
58
58
 
59
59
  /* =============================================================================
@@ -12,27 +12,27 @@
12
12
  [data-style='carbon'] [data-button]:not([data-style])[data-variant='default'],
13
13
  [data-style='carbon'] [data-button][data-style='default']:not([data-variant]),
14
14
  [data-style='carbon'] [data-button]:not([data-style]):not([data-variant]) {
15
- @apply bg-none bg-surface-z3 text-surface-z8 rounded-none border-0;
15
+ @apply bg-surface-z3 text-surface-z8 rounded-none border-0 bg-none;
16
16
  }
17
17
 
18
18
  [data-style='carbon'] [data-button][data-style='default'][data-variant='primary'],
19
19
  [data-style='carbon'] [data-button]:not([data-style])[data-variant='primary'] {
20
- @apply bg-none bg-primary-z5 text-on-primary rounded-none border-0;
20
+ @apply bg-primary-z5 text-on-primary rounded-none border-0 bg-none;
21
21
  }
22
22
 
23
23
  [data-style='carbon'] [data-button][data-style='default'][data-variant='secondary'],
24
24
  [data-style='carbon'] [data-button]:not([data-style])[data-variant='secondary'] {
25
- @apply bg-none bg-secondary-z5 text-on-secondary rounded-none border-0;
25
+ @apply bg-secondary-z5 text-on-secondary rounded-none border-0 bg-none;
26
26
  }
27
27
 
28
28
  [data-style='carbon'] [data-button][data-style='default'][data-variant='accent'],
29
29
  [data-style='carbon'] [data-button]:not([data-style])[data-variant='accent'] {
30
- @apply bg-none bg-accent-z5 text-on-accent rounded-none border-0;
30
+ @apply bg-accent-z5 text-on-accent rounded-none border-0 bg-none;
31
31
  }
32
32
 
33
33
  [data-style='carbon'] [data-button][data-style='default'][data-variant='danger'],
34
34
  [data-style='carbon'] [data-button]:not([data-style])[data-variant='danger'] {
35
- @apply bg-none bg-danger-z5 text-on-danger rounded-none border-0;
35
+ @apply bg-danger-z5 text-on-danger rounded-none border-0 bg-none;
36
36
  }
37
37
 
38
38
  /* =============================================================================
@@ -65,7 +65,7 @@
65
65
  ============================================================================= */
66
66
 
67
67
  [data-style='carbon'] [data-button][data-style='ghost'] {
68
- @apply border-transparent bg-transparent rounded-none;
68
+ @apply rounded-none border-transparent bg-transparent;
69
69
  }
70
70
 
71
71
  [data-style='carbon'] [data-button][data-style='ghost'][data-variant='default'],
@@ -95,23 +95,23 @@
95
95
 
96
96
  [data-style='carbon'] [data-button][data-style='gradient'][data-variant='default'],
97
97
  [data-style='carbon'] [data-button][data-style='gradient']:not([data-variant]) {
98
- @apply bg-none bg-surface-z4 text-surface-z9 rounded-none border-0;
98
+ @apply bg-surface-z4 text-surface-z9 rounded-none border-0 bg-none;
99
99
  }
100
100
 
101
101
  [data-style='carbon'] [data-button][data-style='gradient'][data-variant='primary'] {
102
- @apply bg-none bg-primary-z5 text-on-primary rounded-none border-0;
102
+ @apply bg-primary-z5 text-on-primary rounded-none border-0 bg-none;
103
103
  }
104
104
 
105
105
  [data-style='carbon'] [data-button][data-style='gradient'][data-variant='secondary'] {
106
- @apply bg-none bg-secondary-z5 text-on-secondary rounded-none border-0;
106
+ @apply bg-secondary-z5 text-on-secondary rounded-none border-0 bg-none;
107
107
  }
108
108
 
109
109
  [data-style='carbon'] [data-button][data-style='gradient'][data-variant='accent'] {
110
- @apply bg-none bg-accent-z5 text-on-accent rounded-none border-0;
110
+ @apply bg-accent-z5 text-on-accent rounded-none border-0 bg-none;
111
111
  }
112
112
 
113
113
  [data-style='carbon'] [data-button][data-style='gradient'][data-variant='danger'] {
114
- @apply bg-none bg-danger-z5 text-on-danger rounded-none border-0;
114
+ @apply bg-danger-z5 text-on-danger rounded-none border-0 bg-none;
115
115
  }
116
116
 
117
117
  /* =============================================================================
@@ -147,22 +147,25 @@
147
147
  Hover States
148
148
  ============================================================================= */
149
149
 
150
- [data-style='carbon']
151
- [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
150
+ [data-style='carbon'] [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
152
151
  [data-style='carbon'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
153
- @apply bg-none bg-surface-z4;
152
+ @apply bg-surface-z4 bg-none;
154
153
  }
155
154
 
156
155
  [data-style='carbon']
157
- [data-button][data-style='default'][data-variant='primary']:hover:not(:disabled):not([data-disabled]),
156
+ [data-button][data-style='default'][data-variant='primary']:hover:not(:disabled):not(
157
+ [data-disabled]
158
+ ),
158
159
  [data-style='carbon']
159
- [data-button]:not([data-style])[data-variant='primary']:hover:not(:disabled):not([data-disabled]) {
160
- @apply bg-none bg-primary-z6;
160
+ [data-button]:not([data-style])[data-variant='primary']:hover:not(:disabled):not(
161
+ [data-disabled]
162
+ ) {
163
+ @apply bg-primary-z6 bg-none;
161
164
  }
162
165
 
163
166
  [data-style='carbon']
164
167
  [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]) {
165
- @apply bg-none bg-surface-z2;
168
+ @apply bg-surface-z2 bg-none;
166
169
  }
167
170
 
168
171
  [data-style='carbon'] [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]) {
@@ -171,7 +174,7 @@
171
174
 
172
175
  [data-style='carbon']
173
176
  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
174
- @apply bg-none bg-surface-z5;
177
+ @apply bg-surface-z5 bg-none;
175
178
  }
176
179
 
177
180
  /* =============================================================================
@@ -179,5 +182,5 @@
179
182
  ============================================================================= */
180
183
 
181
184
  [data-style='carbon'] [data-button]:focus-visible {
182
- @apply outline-none border-2 border-primary-z5;
185
+ @apply border-primary-z5 border-2 outline-none;
183
186
  }
@@ -9,7 +9,7 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='carbon'] [data-card] {
12
- @apply bg-none bg-surface-z0 border-surface-z3 text-surface-z9 rounded-none border;
12
+ @apply bg-surface-z0 border-surface-z3 text-surface-z9 rounded-none border bg-none;
13
13
  }
14
14
 
15
15
  /* Interactive cards */
@@ -47,7 +47,7 @@
47
47
  ============================================================================= */
48
48
 
49
49
  [data-style='carbon'] [data-card][data-card-interactive]:focus-visible {
50
- @apply outline-none border-2 border-primary-z5;
50
+ @apply border-primary-z5 border-2 outline-none;
51
51
  }
52
52
 
53
53
  /* =============================================================================
@@ -65,7 +65,7 @@
65
65
 
66
66
  /* Primary — solid primary fill */
67
67
  [data-style='carbon'] [data-card][data-variant='primary'] {
68
- @apply bg-none bg-primary-z5 border-primary-z6 text-on-primary rounded-none border;
68
+ @apply bg-primary-z5 border-primary-z6 text-on-primary rounded-none border bg-none;
69
69
  }
70
70
 
71
71
  [data-style='carbon'] [data-card][data-variant='primary'] [data-card-header],
@@ -79,7 +79,7 @@
79
79
 
80
80
  /* Secondary — solid secondary fill */
81
81
  [data-style='carbon'] [data-card][data-variant='secondary'] {
82
- @apply bg-none bg-secondary-z4 border-secondary-z5 text-on-secondary rounded-none border;
82
+ @apply bg-secondary-z4 border-secondary-z5 text-on-secondary rounded-none border bg-none;
83
83
  }
84
84
 
85
85
  [data-style='carbon'] [data-card][data-variant='secondary'] [data-card-header],
@@ -93,5 +93,5 @@
93
93
 
94
94
  /* Tertiary — recessed surface */
95
95
  [data-style='carbon'] [data-card][data-variant='tertiary'] {
96
- @apply bg-none bg-surface-z1 border-surface-z3 text-surface-z7 rounded-none border;
96
+ @apply bg-surface-z1 border-surface-z3 text-surface-z7 rounded-none border bg-none;
97
97
  }
@@ -25,10 +25,10 @@
25
25
  @apply text-surface-z8;
26
26
  }
27
27
 
28
- [data-style='carbon'] [data-plot-element="bar"][data-dimmed],
29
- [data-style='carbon'] [data-plot-element="point"][data-dimmed],
30
- [data-style='carbon'] [data-plot-element="arc"][data-dimmed],
31
- [data-style='carbon'] [data-plot-element="line"][data-dimmed],
32
- [data-style='carbon'] [data-plot-element="area"][data-dimmed] {
28
+ [data-style='carbon'] [data-plot-element='bar'][data-dimmed],
29
+ [data-style='carbon'] [data-plot-element='point'][data-dimmed],
30
+ [data-style='carbon'] [data-plot-element='arc'][data-dimmed],
31
+ [data-style='carbon'] [data-plot-element='line'][data-dimmed],
32
+ [data-style='carbon'] [data-plot-element='area'][data-dimmed] {
33
33
  opacity: 0.15;
34
34
  }
@@ -5,19 +5,19 @@
5
5
  */
6
6
 
7
7
  [data-style='carbon'] [data-dropdown-trigger] {
8
- @apply bg-none border-surface-z4 text-surface-z7 rounded-none border bg-transparent;
8
+ @apply border-surface-z4 text-surface-z7 rounded-none border bg-transparent bg-none;
9
9
  }
10
10
 
11
11
  [data-style='carbon'] [data-dropdown-trigger]:hover:not(:disabled) {
12
- @apply bg-none bg-surface-z3 text-surface-z9;
12
+ @apply bg-surface-z3 text-surface-z9 bg-none;
13
13
  }
14
14
 
15
15
  [data-style='carbon'] [data-dropdown-trigger]:focus-visible {
16
- @apply outline-none border-2 border-primary-z5;
16
+ @apply border-primary-z5 border-2 outline-none;
17
17
  }
18
18
 
19
19
  [data-style='carbon'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
20
- @apply bg-none bg-surface-z3 border-surface-z5;
20
+ @apply bg-surface-z3 border-surface-z5 bg-none;
21
21
  }
22
22
 
23
23
  [data-style='carbon'] [data-dropdown-trigger] [data-dropdown-icon] {
@@ -29,7 +29,7 @@
29
29
  }
30
30
 
31
31
  [data-style='carbon'] [data-dropdown-panel] {
32
- @apply bg-none bg-surface-z1 border-surface-z3 rounded-none border;
32
+ @apply bg-surface-z1 border-surface-z3 rounded-none border bg-none;
33
33
  }
34
34
 
35
35
  [data-style='carbon'] [data-dropdown-option] {
@@ -38,13 +38,13 @@
38
38
 
39
39
  [data-style='carbon'] [data-dropdown-option]:hover:not(:disabled),
40
40
  [data-style='carbon'] [data-dropdown-option]:focus:not(:disabled) {
41
- @apply bg-none bg-surface-z2 text-surface-z9 outline-none;
41
+ @apply bg-surface-z2 text-surface-z9 bg-none outline-none;
42
42
  }
43
43
 
44
44
  [data-style='carbon'] [data-dropdown-option][data-active='true'] {
45
- @apply bg-none bg-primary-z2 text-surface-z10;
45
+ @apply bg-primary-z2 text-surface-z10 bg-none;
46
46
  }
47
47
 
48
48
  [data-style='carbon'] [data-dropdown-separator] {
49
- @apply bg-none bg-surface-z3;
49
+ @apply bg-surface-z3 bg-none;
50
50
  }