@rokkit/themes 1.0.3 → 1.0.5

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 (252) hide show
  1. package/README.md +11 -19
  2. package/build.mjs +5 -21
  3. package/package.json +23 -132
  4. package/src/base/carousel.css +1 -2
  5. package/src/base/density.css +3 -3
  6. package/src/base/gradient-border.css +32 -0
  7. package/src/base/index.css +3 -0
  8. package/src/base/input.css +9 -5
  9. package/src/base/item.css +13 -0
  10. package/src/base/layout.css +17 -0
  11. package/src/base/nav-content.css +3 -3
  12. package/src/base/radius.css +41 -0
  13. package/src/base/stepper.css +9 -14
  14. package/src/frosted/button.css +6 -11
  15. package/src/frosted/card.css +5 -9
  16. package/src/frosted/dropdown.css +5 -10
  17. package/src/frosted/floating-action.css +2 -2
  18. package/src/frosted/input.css +2 -3
  19. package/src/frosted/list.css +25 -0
  20. package/src/frosted/menu.css +4 -8
  21. package/src/frosted/range.css +2 -2
  22. package/src/frosted/select.css +1 -1
  23. package/src/frosted/step-indicator.css +1 -2
  24. package/src/frosted/switch.css +2 -3
  25. package/src/frosted/timeline.css +1 -2
  26. package/src/index.css +2 -0
  27. package/src/index.js +0 -1
  28. package/src/material/floating-action.css +2 -2
  29. package/src/material/list.css +14 -0
  30. package/src/material/range.css +2 -2
  31. package/src/material/select.css +1 -1
  32. package/src/material/step-indicator.css +1 -2
  33. package/src/material/switch.css +1 -1
  34. package/src/material/tabs.css +2 -2
  35. package/src/material/timeline.css +1 -2
  36. package/src/material/toggle.css +2 -2
  37. package/src/minimal/floating-action.css +1 -1
  38. package/src/minimal/list.css +14 -0
  39. package/src/minimal/select.css +1 -13
  40. package/src/rokkit/floating-action.css +5 -5
  41. package/src/rokkit/floating-navigation.css +1 -1
  42. package/src/rokkit/index.css +0 -1
  43. package/src/rokkit/input.css +1 -1
  44. package/src/rokkit/list.css +25 -0
  45. package/src/rokkit/range.css +2 -2
  46. package/src/rokkit/select.css +1 -1
  47. package/src/rokkit/step-indicator.css +1 -2
  48. package/src/rokkit/swatch.css +1 -1
  49. package/src/rokkit/switch.css +1 -1
  50. package/src/rokkit/timeline.css +1 -2
  51. package/src/rokkit/upload-progress.css +4 -4
  52. package/src/zen-sumi/button.css +176 -0
  53. package/src/zen-sumi/card.css +104 -0
  54. package/src/zen-sumi/chart.css +41 -0
  55. package/src/zen-sumi/dropdown.css +53 -0
  56. package/src/zen-sumi/floating-action.css +68 -0
  57. package/src/zen-sumi/floating-navigation.css +74 -0
  58. package/src/{grada-ui → zen-sumi}/index.css +25 -30
  59. package/src/zen-sumi/input.css +145 -0
  60. package/src/zen-sumi/list.css +128 -0
  61. package/src/zen-sumi/menu.css +91 -0
  62. package/src/zen-sumi/message.css +37 -0
  63. package/src/zen-sumi/range.css +62 -0
  64. package/src/zen-sumi/search-filter.css +49 -0
  65. package/src/zen-sumi/select.css +160 -0
  66. package/src/zen-sumi/status-list.css +66 -0
  67. package/src/zen-sumi/step-indicator.css +40 -0
  68. package/src/zen-sumi/swatch.css +21 -0
  69. package/src/zen-sumi/switch.css +34 -0
  70. package/src/zen-sumi/table.css +118 -0
  71. package/src/zen-sumi/tabs.css +78 -0
  72. package/src/zen-sumi/timeline.css +46 -0
  73. package/src/zen-sumi/toc.css +22 -0
  74. package/src/zen-sumi/toggle.css +51 -0
  75. package/src/zen-sumi/toolbar.css +86 -0
  76. package/src/zen-sumi/tree.css +137 -0
  77. package/dist/ant-design.css +0 -2129
  78. package/dist/base.css +0 -6378
  79. package/dist/bits-ui.css +0 -2113
  80. package/dist/carbon.css +0 -2123
  81. package/dist/daisy-ui.css +0 -2138
  82. package/dist/frosted.css +0 -1953
  83. package/dist/grada-ui.css +0 -1915
  84. package/dist/index.css +0 -27231
  85. package/dist/material.css +0 -1924
  86. package/dist/minimal.css +0 -1978
  87. package/dist/rokkit.css +0 -2471
  88. package/dist/shadcn.css +0 -2099
  89. package/src/ant-design/button.css +0 -190
  90. package/src/ant-design/card.css +0 -100
  91. package/src/ant-design/chart.css +0 -34
  92. package/src/ant-design/connector.css +0 -11
  93. package/src/ant-design/dropdown.css +0 -50
  94. package/src/ant-design/floating-action.css +0 -63
  95. package/src/ant-design/floating-navigation.css +0 -70
  96. package/src/ant-design/grid.css +0 -46
  97. package/src/ant-design/index.css +0 -35
  98. package/src/ant-design/input.css +0 -151
  99. package/src/ant-design/list.css +0 -126
  100. package/src/ant-design/menu.css +0 -88
  101. package/src/ant-design/message.css +0 -35
  102. package/src/ant-design/range.css +0 -61
  103. package/src/ant-design/search-filter.css +0 -49
  104. package/src/ant-design/select.css +0 -158
  105. package/src/ant-design/status-list.css +0 -66
  106. package/src/ant-design/step-indicator.css +0 -38
  107. package/src/ant-design/switch.css +0 -29
  108. package/src/ant-design/table.css +0 -91
  109. package/src/ant-design/tabs.css +0 -153
  110. package/src/ant-design/timeline.css +0 -45
  111. package/src/ant-design/toc.css +0 -18
  112. package/src/ant-design/toggle.css +0 -48
  113. package/src/ant-design/toolbar.css +0 -85
  114. package/src/ant-design/tree.css +0 -137
  115. package/src/ant-design/upload-progress.css +0 -102
  116. package/src/ant-design/upload-target.css +0 -50
  117. package/src/bits-ui/button.css +0 -176
  118. package/src/bits-ui/card.css +0 -99
  119. package/src/bits-ui/chart.css +0 -34
  120. package/src/bits-ui/connector.css +0 -11
  121. package/src/bits-ui/dropdown.css +0 -50
  122. package/src/bits-ui/floating-action.css +0 -63
  123. package/src/bits-ui/floating-navigation.css +0 -70
  124. package/src/bits-ui/grid.css +0 -46
  125. package/src/bits-ui/index.css +0 -35
  126. package/src/bits-ui/input.css +0 -154
  127. package/src/bits-ui/list.css +0 -126
  128. package/src/bits-ui/menu.css +0 -88
  129. package/src/bits-ui/message.css +0 -35
  130. package/src/bits-ui/range.css +0 -61
  131. package/src/bits-ui/search-filter.css +0 -49
  132. package/src/bits-ui/select.css +0 -158
  133. package/src/bits-ui/status-list.css +0 -66
  134. package/src/bits-ui/step-indicator.css +0 -40
  135. package/src/bits-ui/switch.css +0 -29
  136. package/src/bits-ui/table.css +0 -89
  137. package/src/bits-ui/tabs.css +0 -151
  138. package/src/bits-ui/timeline.css +0 -45
  139. package/src/bits-ui/toc.css +0 -18
  140. package/src/bits-ui/toggle.css +0 -48
  141. package/src/bits-ui/toolbar.css +0 -85
  142. package/src/bits-ui/tree.css +0 -135
  143. package/src/bits-ui/upload-progress.css +0 -102
  144. package/src/bits-ui/upload-target.css +0 -50
  145. package/src/carbon/button.css +0 -186
  146. package/src/carbon/card.css +0 -97
  147. package/src/carbon/chart.css +0 -34
  148. package/src/carbon/connector.css +0 -11
  149. package/src/carbon/dropdown.css +0 -50
  150. package/src/carbon/floating-action.css +0 -63
  151. package/src/carbon/floating-navigation.css +0 -70
  152. package/src/carbon/grid.css +0 -46
  153. package/src/carbon/index.css +0 -34
  154. package/src/carbon/input.css +0 -148
  155. package/src/carbon/list.css +0 -124
  156. package/src/carbon/menu.css +0 -88
  157. package/src/carbon/message.css +0 -37
  158. package/src/carbon/range.css +0 -61
  159. package/src/carbon/search-filter.css +0 -49
  160. package/src/carbon/select.css +0 -158
  161. package/src/carbon/status-list.css +0 -66
  162. package/src/carbon/step-indicator.css +0 -40
  163. package/src/carbon/switch.css +0 -31
  164. package/src/carbon/table.css +0 -93
  165. package/src/carbon/tabs.css +0 -151
  166. package/src/carbon/timeline.css +0 -45
  167. package/src/carbon/toc.css +0 -22
  168. package/src/carbon/toggle.css +0 -48
  169. package/src/carbon/toolbar.css +0 -84
  170. package/src/carbon/tree.css +0 -135
  171. package/src/carbon/upload-progress.css +0 -102
  172. package/src/carbon/upload-target.css +0 -50
  173. package/src/daisy-ui/button.css +0 -196
  174. package/src/daisy-ui/card.css +0 -99
  175. package/src/daisy-ui/chart.css +0 -34
  176. package/src/daisy-ui/connector.css +0 -11
  177. package/src/daisy-ui/dropdown.css +0 -50
  178. package/src/daisy-ui/floating-action.css +0 -63
  179. package/src/daisy-ui/floating-navigation.css +0 -70
  180. package/src/daisy-ui/grid.css +0 -46
  181. package/src/daisy-ui/index.css +0 -34
  182. package/src/daisy-ui/input.css +0 -148
  183. package/src/daisy-ui/list.css +0 -127
  184. package/src/daisy-ui/menu.css +0 -88
  185. package/src/daisy-ui/message.css +0 -37
  186. package/src/daisy-ui/range.css +0 -61
  187. package/src/daisy-ui/search-filter.css +0 -49
  188. package/src/daisy-ui/select.css +0 -158
  189. package/src/daisy-ui/status-list.css +0 -66
  190. package/src/daisy-ui/step-indicator.css +0 -37
  191. package/src/daisy-ui/switch.css +0 -31
  192. package/src/daisy-ui/table.css +0 -91
  193. package/src/daisy-ui/tabs.css +0 -153
  194. package/src/daisy-ui/timeline.css +0 -45
  195. package/src/daisy-ui/toc.css +0 -22
  196. package/src/daisy-ui/toggle.css +0 -48
  197. package/src/daisy-ui/toolbar.css +0 -85
  198. package/src/daisy-ui/tree.css +0 -137
  199. package/src/daisy-ui/upload-progress.css +0 -102
  200. package/src/daisy-ui/upload-target.css +0 -50
  201. package/src/grada-ui/button.css +0 -249
  202. package/src/grada-ui/card.css +0 -96
  203. package/src/grada-ui/chart.css +0 -34
  204. package/src/grada-ui/dropdown.css +0 -58
  205. package/src/grada-ui/floating-action.css +0 -66
  206. package/src/grada-ui/floating-navigation.css +0 -69
  207. package/src/grada-ui/input.css +0 -154
  208. package/src/grada-ui/list.css +0 -124
  209. package/src/grada-ui/menu.css +0 -81
  210. package/src/grada-ui/message.css +0 -48
  211. package/src/grada-ui/range.css +0 -59
  212. package/src/grada-ui/search-filter.css +0 -47
  213. package/src/grada-ui/select.css +0 -190
  214. package/src/grada-ui/status-list.css +0 -66
  215. package/src/grada-ui/step-indicator.css +0 -37
  216. package/src/grada-ui/switch.css +0 -35
  217. package/src/grada-ui/table.css +0 -79
  218. package/src/grada-ui/tabs.css +0 -59
  219. package/src/grada-ui/timeline.css +0 -46
  220. package/src/grada-ui/toc.css +0 -24
  221. package/src/grada-ui/toggle.css +0 -47
  222. package/src/grada-ui/toolbar.css +0 -91
  223. package/src/grada-ui/tree.css +0 -100
  224. package/src/rokkit/stack.css +0 -6
  225. package/src/shadcn/button.css +0 -175
  226. package/src/shadcn/card.css +0 -99
  227. package/src/shadcn/chart.css +0 -34
  228. package/src/shadcn/connector.css +0 -11
  229. package/src/shadcn/dropdown.css +0 -50
  230. package/src/shadcn/floating-action.css +0 -63
  231. package/src/shadcn/floating-navigation.css +0 -70
  232. package/src/shadcn/grid.css +0 -46
  233. package/src/shadcn/index.css +0 -35
  234. package/src/shadcn/input.css +0 -143
  235. package/src/shadcn/list.css +0 -124
  236. package/src/shadcn/menu.css +0 -88
  237. package/src/shadcn/message.css +0 -35
  238. package/src/shadcn/range.css +0 -61
  239. package/src/shadcn/search-filter.css +0 -49
  240. package/src/shadcn/select.css +0 -158
  241. package/src/shadcn/status-list.css +0 -66
  242. package/src/shadcn/step-indicator.css +0 -37
  243. package/src/shadcn/switch.css +0 -31
  244. package/src/shadcn/table.css +0 -89
  245. package/src/shadcn/tabs.css +0 -151
  246. package/src/shadcn/timeline.css +0 -45
  247. package/src/shadcn/toc.css +0 -20
  248. package/src/shadcn/toggle.css +0 -48
  249. package/src/shadcn/toolbar.css +0 -84
  250. package/src/shadcn/tree.css +0 -135
  251. package/src/shadcn/upload-progress.css +0 -102
  252. package/src/shadcn/upload-target.css +0 -50
@@ -1,11 +0,0 @@
1
- /**
2
- * Connector - Carbon Theme Styles
3
- *
4
- * Visual theming for tree line connectors.
5
- */
6
-
7
- [data-style='carbon'] [data-connector] [data-connector-v],
8
- [data-style='carbon'] [data-connector] [data-connector-h],
9
- [data-style='carbon'] [data-connector] [data-connector-corner] {
10
- @apply border-surface-z4;
11
- }
@@ -1,50 +0,0 @@
1
- /**
2
- * Dropdown - Carbon Theme Styles
3
- *
4
- * Flat, no border-radius, structured borders.
5
- */
6
-
7
- [data-style='carbon'] [data-dropdown-trigger] {
8
- @apply border-surface-z4 text-surface-z7 rounded-none border bg-transparent bg-none;
9
- }
10
-
11
- [data-style='carbon'] [data-dropdown-trigger]:hover:not(:disabled) {
12
- @apply bg-surface-z3 text-surface-z9 bg-none;
13
- }
14
-
15
- [data-style='carbon'] [data-dropdown-trigger]:focus-visible {
16
- @apply border-primary-z5 border-2 outline-none;
17
- }
18
-
19
- [data-style='carbon'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
20
- @apply bg-surface-z3 border-surface-z5 bg-none;
21
- }
22
-
23
- [data-style='carbon'] [data-dropdown-trigger] [data-dropdown-icon] {
24
- @apply text-surface-z5;
25
- }
26
-
27
- [data-style='carbon'] [data-dropdown-trigger] [data-dropdown-arrow] {
28
- @apply text-surface-z4;
29
- }
30
-
31
- [data-style='carbon'] [data-dropdown-panel] {
32
- @apply bg-surface-z1 border-surface-z3 rounded-none border bg-none;
33
- }
34
-
35
- [data-style='carbon'] [data-dropdown-option] {
36
- @apply text-surface-z7 rounded-none;
37
- }
38
-
39
- [data-style='carbon'] [data-dropdown-option]:hover:not(:disabled),
40
- [data-style='carbon'] [data-dropdown-option]:focus:not(:disabled) {
41
- @apply bg-surface-z2 text-surface-z9 bg-none outline-none;
42
- }
43
-
44
- [data-style='carbon'] [data-dropdown-option][data-active='true'] {
45
- @apply bg-primary-z2 text-surface-z10 bg-none;
46
- }
47
-
48
- [data-style='carbon'] [data-dropdown-separator] {
49
- @apply bg-surface-z3 bg-none;
50
- }
@@ -1,63 +0,0 @@
1
- /**
2
- * FloatingAction - Carbon Theme Styles
3
- *
4
- * Flat, square FAB buttons, no border-radius.
5
- */
6
-
7
- /* =============================================================================
8
- FAB Trigger Button
9
- ============================================================================= */
10
-
11
- [data-style='carbon'] [data-fab-trigger] {
12
- @apply bg-primary-z5 text-on-primary rounded-none border-0 bg-none;
13
- }
14
-
15
- [data-style='carbon'] [data-fab-trigger]:hover:not(:disabled) {
16
- @apply bg-primary-z6 text-on-primary bg-none;
17
- }
18
-
19
- [data-style='carbon'] [data-fab-trigger]:focus-visible {
20
- @apply border-primary-z7 border-2 outline-none;
21
- }
22
-
23
- [data-style='carbon'] [data-fab][data-open='true'] [data-fab-trigger] {
24
- @apply bg-primary-z6 bg-none;
25
- transform: rotate(45deg);
26
- }
27
-
28
- [data-style='carbon'] [data-fab][data-open='true'] [data-fab-trigger]:hover:not(:disabled) {
29
- @apply bg-primary-z7 bg-none;
30
- }
31
-
32
- /* =============================================================================
33
- FAB Items
34
- ============================================================================= */
35
-
36
- [data-style='carbon'] [data-fab-item] {
37
- @apply bg-surface-z3 text-surface-z8 rounded-none border-0 bg-none;
38
- }
39
-
40
- [data-style='carbon'] [data-fab-item]:hover:not(:disabled) {
41
- @apply bg-surface-z4 text-surface-z9 bg-none;
42
- }
43
-
44
- [data-style='carbon'] [data-fab-item]:focus-visible {
45
- @apply border-primary-z5 border-2 outline-none;
46
- }
47
-
48
- /* Item icon */
49
- [data-style='carbon'] [data-fab-item] [data-fab-item-icon] {
50
- @apply text-surface-z6;
51
- }
52
-
53
- [data-style='carbon'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {
54
- @apply text-surface-z8;
55
- }
56
-
57
- /* =============================================================================
58
- Backdrop
59
- ============================================================================= */
60
-
61
- [data-style='carbon'] [data-fab-backdrop] {
62
- background: rgba(0, 0, 0, 0.3);
63
- }
@@ -1,70 +0,0 @@
1
- /**
2
- * FloatingNavigation - Carbon Theme Styles
3
- *
4
- * Flat, structured borders, no border-radius.
5
- */
6
-
7
- /* =============================================================================
8
- Container
9
- ============================================================================= */
10
-
11
- [data-style='carbon'] [data-floating-nav] {
12
- @apply bg-surface-z1 border-surface-z4 rounded-none border bg-none;
13
- }
14
-
15
- /* =============================================================================
16
- Header
17
- ============================================================================= */
18
-
19
- [data-style='carbon'] [data-floating-nav-title] {
20
- @apply text-surface-z5;
21
- }
22
-
23
- [data-style='carbon'] [data-floating-nav-pin] {
24
- @apply text-surface-z5;
25
- }
26
-
27
- [data-style='carbon'] [data-floating-nav-pin]:hover {
28
- @apply text-surface-z8;
29
- }
30
-
31
- [data-style='carbon'] [data-floating-nav-pin][aria-pressed='true'] {
32
- @apply text-surface-z9;
33
- }
34
-
35
- /* =============================================================================
36
- Items
37
- ============================================================================= */
38
-
39
- [data-style='carbon'] [data-floating-nav-item] {
40
- @apply text-surface-z7 rounded-none;
41
- }
42
-
43
- [data-style='carbon'] [data-floating-nav-item]:hover {
44
- @apply bg-surface-z3 text-surface-z9 bg-none;
45
- }
46
-
47
- [data-style='carbon'] [data-floating-nav-item][data-active] {
48
- @apply bg-primary-z2 text-primary-z8 bg-none;
49
- }
50
-
51
- [data-style='carbon'] [data-floating-nav-item]:focus-visible {
52
- @apply border-primary-z5 border-2 outline-none;
53
- }
54
-
55
- /* Icon */
56
- [data-style='carbon'] [data-floating-nav-icon] {
57
- @apply text-surface-z6;
58
- }
59
-
60
- [data-style='carbon'] [data-floating-nav-item][data-active] [data-floating-nav-icon] {
61
- @apply text-primary-z6;
62
- }
63
-
64
- /* =============================================================================
65
- Active Indicator
66
- ============================================================================= */
67
-
68
- [data-style='carbon'] [data-floating-nav-indicator] {
69
- @apply bg-primary-z5 bg-none;
70
- }
@@ -1,46 +0,0 @@
1
- /**
2
- * Grid - Carbon Theme Styles
3
- *
4
- * Flat tile borders, fill-based selection, no border-radius.
5
- */
6
-
7
- /* =============================================================================
8
- Grid Tiles
9
- ============================================================================= */
10
-
11
- [data-style='carbon'] [data-grid] [data-grid-item] {
12
- @apply border-surface-z3 text-surface-z7 rounded-none;
13
- }
14
-
15
- [data-style='carbon'] [data-grid] [data-grid-item]:hover:not(:disabled):not([data-disabled]) {
16
- @apply border-surface-z5 bg-surface-z2 text-surface-z9;
17
- }
18
-
19
- [data-style='carbon'] [data-grid] [data-grid-item]:focus:not(:disabled):not([data-disabled]) {
20
- @apply border-primary-z5 bg-surface-z2 text-surface-z9 outline-none;
21
- }
22
-
23
- /* Active / selected tile */
24
- [data-style='carbon'] [data-grid] [data-grid-item][data-active] {
25
- @apply border-primary-z5 bg-primary-z2 text-primary-z9;
26
- }
27
-
28
- [data-style='carbon'] [data-grid] [data-grid-item][data-active]:hover:not(:disabled) {
29
- @apply bg-primary-z3;
30
- }
31
-
32
- /* =============================================================================
33
- Item Elements
34
- ============================================================================= */
35
-
36
- [data-style='carbon'] [data-grid] [data-grid-item] [data-item-icon] {
37
- @apply text-surface-z5;
38
- }
39
-
40
- [data-style='carbon'] [data-grid] [data-grid-item]:hover:not(:disabled) [data-item-icon] {
41
- @apply text-surface-z7;
42
- }
43
-
44
- [data-style='carbon'] [data-grid] [data-grid-item][data-active] [data-item-icon] {
45
- @apply text-primary-z6;
46
- }
@@ -1,34 +0,0 @@
1
- /**
2
- * @rokkit/themes - Carbon Theme
3
- *
4
- * IBM Carbon Design System inspired. Flat, structured, zero border-radius.
5
- * Use with data-style="carbon" wrapper.
6
- */
7
-
8
- @import './button.css';
9
- @import './toolbar.css';
10
- @import './tabs.css';
11
- @import './toggle.css';
12
- @import './switch.css';
13
- @import './list.css';
14
- @import './tree.css';
15
- @import './connector.css';
16
- @import './select.css';
17
- @import './menu.css';
18
- @import './dropdown.css';
19
- @import './floating-action.css';
20
- @import './input.css';
21
- @import './table.css';
22
- @import './search-filter.css';
23
- @import './range.css';
24
- @import './timeline.css';
25
- @import './floating-navigation.css';
26
- @import './grid.css';
27
- @import './upload-target.css';
28
- @import './upload-progress.css';
29
- @import './toc.css';
30
- @import './card.css';
31
- @import './message.css';
32
- @import './status-list.css';
33
- @import './step-indicator.css';
34
- @import './chart.css';
@@ -1,148 +0,0 @@
1
- /**
2
- * Input - Carbon Theme Styles
3
- *
4
- * Bottom-border only inputs. Focus: thick primary bottom border.
5
- * No border-radius anywhere.
6
- */
7
-
8
- /* Input root: bottom border only, flat background */
9
- [data-style='carbon'] [data-input-root] {
10
- @apply border-surface-z5 bg-surface-z1 relative flex items-center border-t-0 border-r-0 border-b-2 border-l-0 p-0;
11
- border-radius: 0;
12
- background-image: none;
13
- transition: background-color 150ms ease;
14
- }
15
-
16
- /* Hover: slightly elevated surface */
17
- [data-style='carbon'] [data-input-root]:hover:not(:focus-within) {
18
- @apply bg-surface-z2;
19
- background-image: none;
20
- }
21
-
22
- /* Focus: primary thick bottom border */
23
- [data-style='carbon'] [data-input-root]:focus-within {
24
- @apply bg-surface-z2 border-primary-z5 border-b-2;
25
- background-image: none;
26
- }
27
-
28
- /* Inputs inside wrapper */
29
- [data-style='carbon']
30
- [data-input-root]
31
- input:not([type='checkbox'], [type='radio'], [type='color']),
32
- [data-style='carbon'] [data-input-root] textarea,
33
- [data-style='carbon'] [data-input-root] select {
34
- @apply text-surface-z9 w-full border-none bg-transparent px-1 py-1.5 outline-none;
35
- font-size: 0.875rem;
36
- line-height: 1.25rem;
37
- transition: color 150ms ease;
38
- }
39
-
40
- [data-style='carbon'] [data-input-root] textarea {
41
- @apply resize-vertical min-h-20 py-2;
42
- }
43
-
44
- /* Select inside input-root */
45
- [data-style='carbon'] [data-input-root] [data-select-trigger] {
46
- @apply text-surface-z9 rounded-none border-none bg-transparent px-1 shadow-none ring-0 focus:outline-none;
47
- font-size: 0.875rem;
48
- background-image: none;
49
- transition: color 150ms ease;
50
- }
51
-
52
- [data-style='carbon'] [data-input-root] [data-select-trigger]:hover:not(:disabled) {
53
- @apply bg-transparent;
54
- background-image: none;
55
- }
56
-
57
- [data-style='carbon'] [data-input-root] [data-select][data-open='true'] [data-select-trigger] {
58
- @apply border-none bg-transparent shadow-none ring-0;
59
- }
60
-
61
- /* Labels */
62
- [data-style='carbon'] [data-field] > label {
63
- @apply text-surface-z5 text-xs tracking-wide uppercase;
64
- transition: color 150ms ease;
65
- }
66
-
67
- [data-style='carbon'] [data-form-root] label {
68
- @apply text-surface-z5 text-xs tracking-wide uppercase;
69
- }
70
-
71
- /* Focused label: primary color */
72
- [data-style='carbon'] [data-field]:has([data-input-root]:focus-within) > label {
73
- @apply text-primary-z6;
74
- }
75
-
76
- /* Field root */
77
- [data-style='carbon'] [data-field-root] {
78
- @apply gap-0.5;
79
- }
80
-
81
- /* Info field value */
82
- [data-style='carbon'] [data-field-info] {
83
- @apply text-primary-z6;
84
- }
85
-
86
- /* Separator */
87
- [data-style='carbon'] [data-form-separator] {
88
- @apply border-surface-z3;
89
- }
90
-
91
- /* Disabled state */
92
- [data-style='carbon'] [data-field-disabled] [data-input-root] {
93
- @apply border-surface-z2 cursor-not-allowed opacity-40;
94
- }
95
-
96
- /* Error state */
97
- [data-style='carbon'] [data-field-state='fail'] [data-input-root] {
98
- @apply border-b-danger-z5 bg-danger-z1;
99
- }
100
-
101
- [data-style='carbon'] [data-field-state='fail'] [data-input-root]:hover:not(:focus-within) {
102
- @apply bg-danger-z2;
103
- }
104
-
105
- [data-style='carbon'] [data-field-state='fail'] [data-input-root]:focus-within {
106
- @apply border-b-danger-z5;
107
- }
108
-
109
- /* Pass state */
110
- [data-style='carbon'] [data-field-state='pass'] [data-input-root] {
111
- @apply bg-success-z1 border-b-success-z5;
112
- }
113
-
114
- [data-style='carbon'] [data-field-state='pass'] [data-input-root]:hover:not(:focus-within) {
115
- @apply bg-success-z2;
116
- }
117
-
118
- /* Description */
119
- [data-style='carbon'] [data-description] {
120
- @apply text-surface-z5 mt-0.5 text-xs;
121
- }
122
-
123
- /* Message */
124
- [data-style='carbon'] [data-message] {
125
- @apply text-danger-z5 mt-0.5 text-xs;
126
- }
127
-
128
- /* Checkbox */
129
- [data-style='carbon'] [data-checkbox-icon] {
130
- @apply text-surface-z5 text-lg;
131
- }
132
-
133
- [data-style='carbon']
134
- [data-checkbox-root][data-variant='custom']:has(input:checked)
135
- [data-checkbox-icon] {
136
- @apply text-primary-z6;
137
- }
138
-
139
- /* Checkbox label */
140
- [data-style='carbon'] [data-field-type='checkbox'] [data-field]:has(:focus-within) > label {
141
- @apply text-primary-z6;
142
- }
143
-
144
- /* Placeholders */
145
- [data-style='carbon'] [data-input-root] input::placeholder,
146
- [data-style='carbon'] [data-input-root] textarea::placeholder {
147
- @apply text-surface-z3;
148
- }
@@ -1,124 +0,0 @@
1
- /**
2
- * List - Carbon Theme Styles
3
- *
4
- * Flat list with fill-based selection, no border-radius.
5
- */
6
-
7
- /* =============================================================================
8
- List Container
9
- ============================================================================= */
10
-
11
- [data-style='carbon'] [data-list]:focus-within {
12
- @apply outline-none;
13
- }
14
-
15
- /* =============================================================================
16
- List Items
17
- ============================================================================= */
18
-
19
- [data-style='carbon'] [data-list] [data-list-item] {
20
- @apply text-surface-z7 rounded-none border-0 border-solid border-transparent;
21
- }
22
-
23
- [data-style='carbon'] [data-list] a[data-list-item],
24
- [data-style='carbon'] [data-list] button[data-list-item] {
25
- @apply text-surface-z6;
26
- }
27
-
28
- /* Hover and focus */
29
- [data-style='carbon'] [data-list] [data-list-item]:hover:not(:disabled):not([data-disabled='true']),
30
- [data-style='carbon']
31
- [data-list]
32
- [data-list-item]:focus:not(:disabled):not([data-disabled='true']) {
33
- @apply bg-surface-z2 text-surface-z9 bg-none outline-none;
34
- }
35
-
36
- /* Active state — muted when list not focused */
37
- [data-style='carbon'] [data-list] [data-list-item][data-active='true'] {
38
- @apply bg-primary-z2 text-surface-z9 bg-none;
39
- }
40
-
41
- /* Active state — full highlight when list has focus */
42
- [data-style='carbon'] [data-list]:focus-within [data-list-item][data-active='true'] {
43
- @apply bg-primary-z2 text-primary-z8 bg-none;
44
- }
45
-
46
- /* Active + hover/focus */
47
- [data-style='carbon'] [data-list] [data-list-item][data-active='true']:hover:not(:disabled),
48
- [data-style='carbon'] [data-list] [data-list-item][data-active='true']:focus:not(:disabled) {
49
- @apply bg-primary-z3 text-primary-z9 bg-none;
50
- }
51
-
52
- /* =============================================================================
53
- Item Elements
54
- ============================================================================= */
55
-
56
- [data-style='carbon'] [data-list] [data-list-item] [data-item-icon] {
57
- @apply text-surface-z5;
58
- }
59
-
60
- [data-style='carbon'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
61
- [data-style='carbon'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon] {
62
- @apply text-surface-z6;
63
- }
64
-
65
- [data-style='carbon'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
66
- @apply text-primary-z5;
67
- }
68
-
69
- [data-style='carbon'] [data-list] [data-list-item] [data-item-description] {
70
- @apply text-surface-z5;
71
- }
72
-
73
- [data-style='carbon'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
74
- @apply text-primary-z6;
75
- }
76
-
77
- [data-style='carbon'] [data-list] [data-list-item] [data-item-badge] {
78
- @apply text-surface-z6 border-surface-z4 rounded-none border bg-transparent bg-none;
79
- }
80
-
81
- [data-style='carbon'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
82
- @apply text-primary-z7 border-primary-z4 bg-none;
83
- }
84
-
85
- /* =============================================================================
86
- Groups
87
- ============================================================================= */
88
-
89
- [data-style='carbon'] [data-list] [data-list-group] {
90
- @apply text-surface-z5;
91
- }
92
-
93
- [data-style='carbon'] [data-list] [data-list-group]:hover:not(:disabled),
94
- [data-style='carbon'] [data-list] [data-list-group]:focus:not(:disabled) {
95
- @apply bg-surface-z2 text-surface-z7 bg-none;
96
- }
97
-
98
- /* =============================================================================
99
- Separator
100
- ============================================================================= */
101
-
102
- [data-style='carbon'] [data-list] [data-list-separator] {
103
- @apply bg-surface-z3 bg-none;
104
- }
105
-
106
- /* =============================================================================
107
- Multi-Selection
108
- ============================================================================= */
109
-
110
- [data-style='carbon'] [data-list] [data-list-item][data-selected='true'] {
111
- @apply bg-primary-z2 text-primary-z7 bg-none;
112
- }
113
-
114
- [data-style='carbon'] [data-list]:focus-within [data-list-item][data-selected='true'] {
115
- @apply bg-primary-z2 text-primary-z8 bg-none;
116
- }
117
-
118
- [data-style='carbon'] [data-list] [data-list-item][data-selected='true']:hover:not(:disabled) {
119
- @apply bg-primary-z3 text-primary-z9 bg-none;
120
- }
121
-
122
- [data-style='carbon'] [data-list] [data-list-item][data-selected='true'] [data-item-icon] {
123
- @apply text-primary-z5;
124
- }
@@ -1,88 +0,0 @@
1
- /**
2
- * Menu - Carbon Theme Styles
3
- *
4
- * Flat menu with thin border-b dividers, no border-radius.
5
- */
6
-
7
- /* =============================================================================
8
- Menu Trigger
9
- ============================================================================= */
10
-
11
- [data-style='carbon'] [data-menu-trigger] {
12
- @apply border-surface-z4 text-surface-z7 rounded-none border bg-transparent bg-none;
13
- }
14
-
15
- [data-style='carbon'] [data-menu-trigger]:hover:not(:disabled) {
16
- @apply bg-surface-z3 text-surface-z9 bg-none;
17
- }
18
-
19
- [data-style='carbon'] [data-menu-trigger]:focus-visible {
20
- @apply border-primary-z5 border-2 outline-none;
21
- }
22
-
23
- [data-style='carbon'] [data-menu][data-open='true'] [data-menu-trigger] {
24
- @apply bg-surface-z3 border-surface-z5 bg-none;
25
- }
26
-
27
- /* Trigger elements */
28
- [data-style='carbon'] [data-menu-trigger] [data-menu-icon] {
29
- @apply text-surface-z5;
30
- }
31
-
32
- [data-style='carbon'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
33
- @apply text-surface-z7;
34
- }
35
-
36
- [data-style='carbon'] [data-menu-trigger] [data-menu-arrow] {
37
- @apply text-surface-z4;
38
- }
39
-
40
- /* =============================================================================
41
- Menu Dropdown
42
- ============================================================================= */
43
-
44
- [data-style='carbon'] [data-menu-dropdown] {
45
- @apply bg-surface-z1 border-surface-z3 rounded-none border bg-none;
46
- }
47
-
48
- /* =============================================================================
49
- Menu Items
50
- ============================================================================= */
51
-
52
- [data-style='carbon'] [data-menu-item] {
53
- @apply text-surface-z7 border-surface-z2 rounded-none border-0 border-b;
54
- }
55
-
56
- [data-style='carbon'] [data-menu-item]:hover:not(:disabled),
57
- [data-style='carbon'] [data-menu-item]:focus:not(:disabled) {
58
- @apply bg-surface-z2 text-surface-z9 bg-none outline-none;
59
- }
60
-
61
- /* Item elements */
62
- [data-style='carbon'] [data-menu-item] [data-item-icon] {
63
- @apply text-surface-z5;
64
- }
65
-
66
- [data-style='carbon'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
67
- @apply text-surface-z6;
68
- }
69
-
70
- [data-style='carbon'] [data-menu-item] [data-item-description] {
71
- @apply text-surface-z5;
72
- }
73
-
74
- /* =============================================================================
75
- Groups
76
- ============================================================================= */
77
-
78
- [data-style='carbon'] [data-menu-group] {
79
- @apply text-surface-z5;
80
- }
81
-
82
- /* =============================================================================
83
- Divider
84
- ============================================================================= */
85
-
86
- [data-style='carbon'] [data-menu-separator] {
87
- @apply bg-surface-z3 bg-none;
88
- }
@@ -1,37 +0,0 @@
1
- /**
2
- * Message - Carbon Theme Styles
3
- *
4
- * Flat notification banners, no border-radius.
5
- */
6
-
7
- [data-style='carbon'] [data-message-root][data-type='error'] {
8
- @apply bg-error-z1 border-error-z4 text-error-z8 rounded-none border-l-4;
9
- }
10
- [data-style='carbon'] [data-message-root][data-type='error'] [data-message-icon],
11
- [data-style='carbon'] [data-message-root][data-type='error'] [data-message-dismiss] {
12
- @apply text-error-z5;
13
- }
14
-
15
- [data-style='carbon'] [data-message-root][data-type='warning'] {
16
- @apply bg-warning-z1 border-warning-z4 text-warning-z8 rounded-none border-l-4;
17
- }
18
- [data-style='carbon'] [data-message-root][data-type='warning'] [data-message-icon],
19
- [data-style='carbon'] [data-message-root][data-type='warning'] [data-message-dismiss] {
20
- @apply text-warning-z5;
21
- }
22
-
23
- [data-style='carbon'] [data-message-root][data-type='info'] {
24
- @apply bg-info-z1 border-info-z4 text-info-z8 rounded-none border-l-4;
25
- }
26
- [data-style='carbon'] [data-message-root][data-type='info'] [data-message-icon],
27
- [data-style='carbon'] [data-message-root][data-type='info'] [data-message-dismiss] {
28
- @apply text-info-z5;
29
- }
30
-
31
- [data-style='carbon'] [data-message-root][data-type='success'] {
32
- @apply bg-success-z1 border-success-z4 text-success-z8 rounded-none border-l-4;
33
- }
34
- [data-style='carbon'] [data-message-root][data-type='success'] [data-message-icon],
35
- [data-style='carbon'] [data-message-root][data-type='success'] [data-message-dismiss] {
36
- @apply text-success-z5;
37
- }