@rokkit/themes 1.0.4 → 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 (246) 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/input.css +9 -5
  6. package/src/base/nav-content.css +3 -3
  7. package/src/base/stepper.css +9 -14
  8. package/src/frosted/button.css +6 -11
  9. package/src/frosted/card.css +5 -9
  10. package/src/frosted/dropdown.css +5 -10
  11. package/src/frosted/floating-action.css +2 -2
  12. package/src/frosted/input.css +2 -3
  13. package/src/frosted/list.css +25 -0
  14. package/src/frosted/menu.css +4 -8
  15. package/src/frosted/range.css +2 -2
  16. package/src/frosted/select.css +1 -1
  17. package/src/frosted/step-indicator.css +1 -2
  18. package/src/frosted/switch.css +2 -3
  19. package/src/frosted/timeline.css +1 -2
  20. package/src/index.css +2 -0
  21. package/src/index.js +0 -1
  22. package/src/material/floating-action.css +2 -2
  23. package/src/material/list.css +14 -0
  24. package/src/material/range.css +2 -2
  25. package/src/material/select.css +1 -1
  26. package/src/material/step-indicator.css +1 -2
  27. package/src/material/switch.css +1 -1
  28. package/src/material/tabs.css +2 -2
  29. package/src/material/timeline.css +1 -2
  30. package/src/material/toggle.css +2 -2
  31. package/src/minimal/floating-action.css +1 -1
  32. package/src/minimal/list.css +14 -0
  33. package/src/minimal/select.css +1 -13
  34. package/src/rokkit/floating-action.css +5 -5
  35. package/src/rokkit/floating-navigation.css +1 -1
  36. package/src/rokkit/index.css +0 -1
  37. package/src/rokkit/input.css +1 -1
  38. package/src/rokkit/list.css +25 -0
  39. package/src/rokkit/range.css +2 -2
  40. package/src/rokkit/select.css +1 -1
  41. package/src/rokkit/step-indicator.css +1 -2
  42. package/src/rokkit/swatch.css +1 -1
  43. package/src/rokkit/switch.css +1 -1
  44. package/src/rokkit/timeline.css +1 -2
  45. package/src/rokkit/upload-progress.css +4 -4
  46. package/src/zen-sumi/button.css +176 -0
  47. package/src/zen-sumi/card.css +104 -0
  48. package/src/zen-sumi/chart.css +41 -0
  49. package/src/zen-sumi/dropdown.css +53 -0
  50. package/src/zen-sumi/floating-action.css +68 -0
  51. package/src/zen-sumi/floating-navigation.css +74 -0
  52. package/src/{grada-ui → zen-sumi}/index.css +25 -30
  53. package/src/zen-sumi/input.css +145 -0
  54. package/src/zen-sumi/list.css +128 -0
  55. package/src/zen-sumi/menu.css +91 -0
  56. package/src/zen-sumi/message.css +37 -0
  57. package/src/zen-sumi/range.css +62 -0
  58. package/src/zen-sumi/search-filter.css +49 -0
  59. package/src/zen-sumi/select.css +160 -0
  60. package/src/zen-sumi/status-list.css +66 -0
  61. package/src/zen-sumi/step-indicator.css +40 -0
  62. package/src/zen-sumi/swatch.css +21 -0
  63. package/src/zen-sumi/switch.css +34 -0
  64. package/src/zen-sumi/table.css +118 -0
  65. package/src/zen-sumi/tabs.css +78 -0
  66. package/src/zen-sumi/timeline.css +46 -0
  67. package/src/zen-sumi/toc.css +22 -0
  68. package/src/zen-sumi/toggle.css +51 -0
  69. package/src/zen-sumi/toolbar.css +86 -0
  70. package/src/zen-sumi/tree.css +137 -0
  71. package/dist/ant-design.css +0 -2129
  72. package/dist/base.css +0 -6506
  73. package/dist/bits-ui.css +0 -2113
  74. package/dist/carbon.css +0 -2123
  75. package/dist/daisy-ui.css +0 -2138
  76. package/dist/frosted.css +0 -1953
  77. package/dist/grada-ui.css +0 -1915
  78. package/dist/index.css +0 -27359
  79. package/dist/material.css +0 -1924
  80. package/dist/minimal.css +0 -1978
  81. package/dist/rokkit.css +0 -2471
  82. package/dist/shadcn.css +0 -2099
  83. package/src/ant-design/button.css +0 -190
  84. package/src/ant-design/card.css +0 -100
  85. package/src/ant-design/chart.css +0 -34
  86. package/src/ant-design/connector.css +0 -11
  87. package/src/ant-design/dropdown.css +0 -50
  88. package/src/ant-design/floating-action.css +0 -63
  89. package/src/ant-design/floating-navigation.css +0 -70
  90. package/src/ant-design/grid.css +0 -46
  91. package/src/ant-design/index.css +0 -35
  92. package/src/ant-design/input.css +0 -151
  93. package/src/ant-design/list.css +0 -126
  94. package/src/ant-design/menu.css +0 -88
  95. package/src/ant-design/message.css +0 -35
  96. package/src/ant-design/range.css +0 -61
  97. package/src/ant-design/search-filter.css +0 -49
  98. package/src/ant-design/select.css +0 -158
  99. package/src/ant-design/status-list.css +0 -66
  100. package/src/ant-design/step-indicator.css +0 -38
  101. package/src/ant-design/switch.css +0 -29
  102. package/src/ant-design/table.css +0 -91
  103. package/src/ant-design/tabs.css +0 -153
  104. package/src/ant-design/timeline.css +0 -45
  105. package/src/ant-design/toc.css +0 -18
  106. package/src/ant-design/toggle.css +0 -48
  107. package/src/ant-design/toolbar.css +0 -85
  108. package/src/ant-design/tree.css +0 -137
  109. package/src/ant-design/upload-progress.css +0 -102
  110. package/src/ant-design/upload-target.css +0 -50
  111. package/src/bits-ui/button.css +0 -176
  112. package/src/bits-ui/card.css +0 -99
  113. package/src/bits-ui/chart.css +0 -34
  114. package/src/bits-ui/connector.css +0 -11
  115. package/src/bits-ui/dropdown.css +0 -50
  116. package/src/bits-ui/floating-action.css +0 -63
  117. package/src/bits-ui/floating-navigation.css +0 -70
  118. package/src/bits-ui/grid.css +0 -46
  119. package/src/bits-ui/index.css +0 -35
  120. package/src/bits-ui/input.css +0 -154
  121. package/src/bits-ui/list.css +0 -126
  122. package/src/bits-ui/menu.css +0 -88
  123. package/src/bits-ui/message.css +0 -35
  124. package/src/bits-ui/range.css +0 -61
  125. package/src/bits-ui/search-filter.css +0 -49
  126. package/src/bits-ui/select.css +0 -158
  127. package/src/bits-ui/status-list.css +0 -66
  128. package/src/bits-ui/step-indicator.css +0 -40
  129. package/src/bits-ui/switch.css +0 -29
  130. package/src/bits-ui/table.css +0 -89
  131. package/src/bits-ui/tabs.css +0 -151
  132. package/src/bits-ui/timeline.css +0 -45
  133. package/src/bits-ui/toc.css +0 -18
  134. package/src/bits-ui/toggle.css +0 -48
  135. package/src/bits-ui/toolbar.css +0 -85
  136. package/src/bits-ui/tree.css +0 -135
  137. package/src/bits-ui/upload-progress.css +0 -102
  138. package/src/bits-ui/upload-target.css +0 -50
  139. package/src/carbon/button.css +0 -186
  140. package/src/carbon/card.css +0 -97
  141. package/src/carbon/chart.css +0 -34
  142. package/src/carbon/connector.css +0 -11
  143. package/src/carbon/dropdown.css +0 -50
  144. package/src/carbon/floating-action.css +0 -63
  145. package/src/carbon/floating-navigation.css +0 -70
  146. package/src/carbon/grid.css +0 -46
  147. package/src/carbon/index.css +0 -34
  148. package/src/carbon/input.css +0 -148
  149. package/src/carbon/list.css +0 -124
  150. package/src/carbon/menu.css +0 -88
  151. package/src/carbon/message.css +0 -37
  152. package/src/carbon/range.css +0 -61
  153. package/src/carbon/search-filter.css +0 -49
  154. package/src/carbon/select.css +0 -158
  155. package/src/carbon/status-list.css +0 -66
  156. package/src/carbon/step-indicator.css +0 -40
  157. package/src/carbon/switch.css +0 -31
  158. package/src/carbon/table.css +0 -93
  159. package/src/carbon/tabs.css +0 -151
  160. package/src/carbon/timeline.css +0 -45
  161. package/src/carbon/toc.css +0 -22
  162. package/src/carbon/toggle.css +0 -48
  163. package/src/carbon/toolbar.css +0 -84
  164. package/src/carbon/tree.css +0 -135
  165. package/src/carbon/upload-progress.css +0 -102
  166. package/src/carbon/upload-target.css +0 -50
  167. package/src/daisy-ui/button.css +0 -196
  168. package/src/daisy-ui/card.css +0 -99
  169. package/src/daisy-ui/chart.css +0 -34
  170. package/src/daisy-ui/connector.css +0 -11
  171. package/src/daisy-ui/dropdown.css +0 -50
  172. package/src/daisy-ui/floating-action.css +0 -63
  173. package/src/daisy-ui/floating-navigation.css +0 -70
  174. package/src/daisy-ui/grid.css +0 -46
  175. package/src/daisy-ui/index.css +0 -34
  176. package/src/daisy-ui/input.css +0 -148
  177. package/src/daisy-ui/list.css +0 -127
  178. package/src/daisy-ui/menu.css +0 -88
  179. package/src/daisy-ui/message.css +0 -37
  180. package/src/daisy-ui/range.css +0 -61
  181. package/src/daisy-ui/search-filter.css +0 -49
  182. package/src/daisy-ui/select.css +0 -158
  183. package/src/daisy-ui/status-list.css +0 -66
  184. package/src/daisy-ui/step-indicator.css +0 -37
  185. package/src/daisy-ui/switch.css +0 -31
  186. package/src/daisy-ui/table.css +0 -91
  187. package/src/daisy-ui/tabs.css +0 -153
  188. package/src/daisy-ui/timeline.css +0 -45
  189. package/src/daisy-ui/toc.css +0 -22
  190. package/src/daisy-ui/toggle.css +0 -48
  191. package/src/daisy-ui/toolbar.css +0 -85
  192. package/src/daisy-ui/tree.css +0 -137
  193. package/src/daisy-ui/upload-progress.css +0 -102
  194. package/src/daisy-ui/upload-target.css +0 -50
  195. package/src/grada-ui/button.css +0 -249
  196. package/src/grada-ui/card.css +0 -96
  197. package/src/grada-ui/chart.css +0 -34
  198. package/src/grada-ui/dropdown.css +0 -58
  199. package/src/grada-ui/floating-action.css +0 -66
  200. package/src/grada-ui/floating-navigation.css +0 -69
  201. package/src/grada-ui/input.css +0 -154
  202. package/src/grada-ui/list.css +0 -124
  203. package/src/grada-ui/menu.css +0 -81
  204. package/src/grada-ui/message.css +0 -48
  205. package/src/grada-ui/range.css +0 -59
  206. package/src/grada-ui/search-filter.css +0 -47
  207. package/src/grada-ui/select.css +0 -190
  208. package/src/grada-ui/status-list.css +0 -66
  209. package/src/grada-ui/step-indicator.css +0 -37
  210. package/src/grada-ui/switch.css +0 -35
  211. package/src/grada-ui/table.css +0 -79
  212. package/src/grada-ui/tabs.css +0 -59
  213. package/src/grada-ui/timeline.css +0 -46
  214. package/src/grada-ui/toc.css +0 -24
  215. package/src/grada-ui/toggle.css +0 -47
  216. package/src/grada-ui/toolbar.css +0 -91
  217. package/src/grada-ui/tree.css +0 -100
  218. package/src/rokkit/stack.css +0 -6
  219. package/src/shadcn/button.css +0 -175
  220. package/src/shadcn/card.css +0 -99
  221. package/src/shadcn/chart.css +0 -34
  222. package/src/shadcn/connector.css +0 -11
  223. package/src/shadcn/dropdown.css +0 -50
  224. package/src/shadcn/floating-action.css +0 -63
  225. package/src/shadcn/floating-navigation.css +0 -70
  226. package/src/shadcn/grid.css +0 -46
  227. package/src/shadcn/index.css +0 -35
  228. package/src/shadcn/input.css +0 -143
  229. package/src/shadcn/list.css +0 -124
  230. package/src/shadcn/menu.css +0 -88
  231. package/src/shadcn/message.css +0 -35
  232. package/src/shadcn/range.css +0 -61
  233. package/src/shadcn/search-filter.css +0 -49
  234. package/src/shadcn/select.css +0 -158
  235. package/src/shadcn/status-list.css +0 -66
  236. package/src/shadcn/step-indicator.css +0 -37
  237. package/src/shadcn/switch.css +0 -31
  238. package/src/shadcn/table.css +0 -89
  239. package/src/shadcn/tabs.css +0 -151
  240. package/src/shadcn/timeline.css +0 -45
  241. package/src/shadcn/toc.css +0 -20
  242. package/src/shadcn/toggle.css +0 -48
  243. package/src/shadcn/toolbar.css +0 -84
  244. package/src/shadcn/tree.css +0 -135
  245. package/src/shadcn/upload-progress.css +0 -102
  246. 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
- }