@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,22 +0,0 @@
1
- /**
2
- * TableOfContents - Carbon Theme Styles
3
- *
4
- * Flat, structured, no border-radius.
5
- */
6
-
7
- [data-style='carbon'] [data-toc] [data-toc-label] {
8
- @apply text-surface-z5;
9
- }
10
-
11
- [data-style='carbon'] [data-toc] [data-toc-item] {
12
- @apply text-surface-z6;
13
- }
14
-
15
- [data-style='carbon'] [data-toc] [data-toc-item]:hover,
16
- [data-style='carbon'] [data-toc] [data-toc-item][data-toc-focused] {
17
- @apply bg-surface-z2 text-surface-z9 bg-none outline-none;
18
- }
19
-
20
- [data-style='carbon'] [data-toc] [data-toc-item][data-toc-active] {
21
- @apply text-primary-z7 border-l-primary-z5 border-l-2;
22
- }
@@ -1,48 +0,0 @@
1
- /**
2
- * Toggle - Carbon Theme Styles
3
- *
4
- * Square, flat, no border-radius.
5
- */
6
-
7
- /* =============================================================================
8
- Toggle Container
9
- ============================================================================= */
10
-
11
- [data-style='carbon'] [data-toggle] {
12
- @apply border-surface-z3 rounded-none border bg-transparent bg-none;
13
- }
14
-
15
- /* =============================================================================
16
- Toggle Options
17
- ============================================================================= */
18
-
19
- [data-style='carbon'] [data-toggle-option] {
20
- @apply text-surface-z6 rounded-none border-0 border-solid border-transparent;
21
- }
22
-
23
- [data-style='carbon'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
24
- [data-style='carbon'] [data-toggle-option]:focus:not(:disabled):not([data-disabled='true']) {
25
- @apply bg-surface-z3 text-surface-z8 bg-none;
26
- }
27
-
28
- /* Selected state */
29
- [data-style='carbon'] [data-toggle-option][data-selected='true'] {
30
- @apply bg-primary-z5 text-on-primary border-b-primary-z5 border-b-2 bg-none;
31
- }
32
-
33
- /* =============================================================================
34
- Toggle Icon
35
- ============================================================================= */
36
-
37
- [data-style='carbon'] [data-toggle-option] [data-toggle-icon] {
38
- @apply text-surface-z5;
39
- }
40
-
41
- [data-style='carbon'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
42
- [data-style='carbon'] [data-toggle-option]:focus:not(:disabled) [data-toggle-icon] {
43
- @apply text-surface-z7;
44
- }
45
-
46
- [data-style='carbon'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
47
- @apply text-on-primary;
48
- }
@@ -1,84 +0,0 @@
1
- /**
2
- * Toolbar - Carbon Theme Styles
3
- *
4
- * Flat, structured borders. No border-radius.
5
- */
6
-
7
- /* =============================================================================
8
- Toolbar Container
9
- ============================================================================= */
10
-
11
- [data-style='carbon'] [data-toolbar] {
12
- @apply bg-transparent bg-none;
13
- }
14
-
15
- /* Position-based borders */
16
- [data-style='carbon'] [data-toolbar][data-toolbar-position='top'],
17
- [data-style='carbon'] [data-toolbar]:not([data-toolbar-position]) {
18
- @apply border-surface-z3 border-b;
19
- }
20
-
21
- [data-style='carbon'] [data-toolbar][data-toolbar-position='bottom'] {
22
- @apply border-surface-z3 border-t;
23
- }
24
-
25
- [data-style='carbon'] [data-toolbar][data-toolbar-position='left'] {
26
- @apply border-surface-z3 border-r;
27
- }
28
-
29
- [data-style='carbon'] [data-toolbar][data-toolbar-position='right'] {
30
- @apply border-surface-z3 border-l;
31
- }
32
-
33
- /* =============================================================================
34
- Toolbar Items
35
- ============================================================================= */
36
-
37
- [data-style='carbon'] [data-toolbar-item] {
38
- @apply text-surface-z6 rounded-none;
39
- }
40
-
41
- [data-style='carbon'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
42
- @apply bg-surface-z3 text-surface-z9 bg-none;
43
- }
44
-
45
- [data-style='carbon'] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
46
- @apply text-surface-z9 border-primary-z5 border-2 bg-none outline-none;
47
- }
48
-
49
- /* Active/pressed state */
50
- [data-style='carbon'] [data-toolbar-item][data-active='true'] {
51
- @apply bg-primary-z2 text-primary-z7 bg-none;
52
- }
53
-
54
- [data-style='carbon'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
55
- @apply bg-primary-z3 text-primary-z8 bg-none;
56
- }
57
-
58
- /* =============================================================================
59
- Toolbar Icon
60
- ============================================================================= */
61
-
62
- [data-style='carbon'] [data-toolbar-item] [data-toolbar-icon] {
63
- @apply text-surface-z5;
64
- }
65
-
66
- [data-style='carbon'] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon] {
67
- @apply text-surface-z8;
68
- }
69
-
70
- [data-style='carbon'] [data-toolbar-item][data-active='true'] [data-toolbar-icon] {
71
- @apply text-primary-z6;
72
- }
73
-
74
- /* =============================================================================
75
- Separator & Divider
76
- ============================================================================= */
77
-
78
- [data-style='carbon'] [data-toolbar-separator] {
79
- @apply bg-surface-z3 bg-none;
80
- }
81
-
82
- [data-style='carbon'] [data-toolbar-divider] {
83
- @apply bg-surface-z3 bg-none;
84
- }
@@ -1,135 +0,0 @@
1
- /**
2
- * Tree - Carbon Theme Styles
3
- *
4
- * Flat tree, fill-based selection, no border-radius.
5
- */
6
-
7
- /* =============================================================================
8
- Tree Container
9
- ============================================================================= */
10
-
11
- [data-style='carbon'] [data-tree]:focus-within {
12
- @apply outline-none;
13
- }
14
-
15
- /* =============================================================================
16
- Tree Toggle Button
17
- ============================================================================= */
18
-
19
- [data-style='carbon'] [data-tree-toggle-btn] {
20
- @apply text-surface-z4 rounded-none;
21
- }
22
-
23
- [data-style='carbon'] [data-tree-toggle-btn]:hover {
24
- @apply bg-surface-z2 text-surface-z6 bg-none;
25
- }
26
-
27
- /* =============================================================================
28
- Tree Item Content
29
- ============================================================================= */
30
-
31
- [data-style='carbon'] [data-tree-item-content] {
32
- @apply text-surface-z7 rounded-none;
33
- }
34
-
35
- [data-style='carbon'] [data-tree-item-content]:hover:not(:disabled),
36
- [data-style='carbon'] [data-tree-item-content]:focus:not(:disabled) {
37
- @apply bg-surface-z2 text-surface-z9 bg-none outline-none;
38
- }
39
-
40
- /* Focus visible for keyboard navigation */
41
- [data-style='carbon'] [data-tree-item-content]:focus-visible {
42
- @apply border-primary-z5 border-2 outline-none;
43
- }
44
-
45
- /* Active/selected state */
46
- [data-style='carbon'] [data-tree-item-content][data-active='true'] {
47
- @apply bg-primary-z2 text-primary-z8 bg-none;
48
- }
49
-
50
- [data-style='carbon'] [data-tree-item-content][data-active='true']:hover:not(:disabled) {
51
- @apply bg-primary-z3 text-primary-z9 bg-none;
52
- }
53
-
54
- /* Reset gradients */
55
- [data-style='carbon'] [data-tree]:focus-within [data-tree-item-content][data-active='true'] {
56
- @apply bg-primary-z2 bg-none;
57
- }
58
-
59
- [data-style='carbon']
60
- [data-tree]:focus-within
61
- [data-tree-item-content][data-active='true']:hover:not(:disabled) {
62
- @apply bg-primary-z3 bg-none;
63
- }
64
-
65
- [data-style='carbon'] [data-tree]:not(:focus-within) [data-tree-item-content][data-active='true'] {
66
- @apply bg-primary-z2 bg-none;
67
- }
68
-
69
- /* =============================================================================
70
- Item Elements
71
- ============================================================================= */
72
-
73
- [data-style='carbon'] [data-tree-item-content] [data-item-icon] {
74
- @apply text-surface-z5;
75
- }
76
-
77
- [data-style='carbon'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
78
- @apply text-surface-z6;
79
- }
80
-
81
- [data-style='carbon'] [data-tree-item-content][data-active='true'] [data-item-icon] {
82
- @apply text-primary-z5;
83
- }
84
-
85
- [data-style='carbon'] [data-tree-item-content] [data-item-description] {
86
- @apply text-surface-z5;
87
- }
88
-
89
- [data-style='carbon'] [data-tree-item-content][data-active='true'] [data-item-description] {
90
- @apply text-primary-z6;
91
- }
92
-
93
- [data-style='carbon'] [data-tree-item-content] [data-item-badge] {
94
- @apply text-surface-z6 border-surface-z4 rounded-none border bg-transparent bg-none;
95
- }
96
-
97
- [data-style='carbon'] [data-tree-item-content][data-active='true'] [data-item-badge] {
98
- @apply text-primary-z7 border-primary-z4;
99
- }
100
-
101
- [data-style='carbon']
102
- [data-tree]:focus-within
103
- [data-tree-item-content][data-active='true']
104
- [data-item-badge] {
105
- @apply bg-none;
106
- }
107
-
108
- [data-style='carbon']
109
- [data-tree]:not(:focus-within)
110
- [data-tree-item-content][data-active='true']
111
- [data-item-badge] {
112
- @apply bg-none;
113
- }
114
-
115
- /* =============================================================================
116
- Multi-Selection
117
- ============================================================================= */
118
-
119
- [data-style='carbon'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
120
- @apply bg-primary-z2 text-primary-z7 bg-none;
121
- }
122
-
123
- [data-style='carbon']
124
- [data-tree]:focus-within
125
- [data-tree-node][data-selected='true']
126
- [data-tree-item-content] {
127
- @apply bg-primary-z2 text-primary-z8 bg-none;
128
- }
129
-
130
- [data-style='carbon']
131
- [data-tree-node][data-selected='true']
132
- [data-tree-item-content]
133
- [data-item-icon] {
134
- @apply text-primary-z5;
135
- }
@@ -1,102 +0,0 @@
1
- /**
2
- * UploadProgress - Carbon Theme Styles
3
- *
4
- * Status colors, flat progress fill, action buttons.
5
- */
6
-
7
- /* =============================================================================
8
- Header
9
- ============================================================================= */
10
-
11
- [data-style='carbon'] [data-upload-header] {
12
- @apply text-surface-z7;
13
- }
14
-
15
- [data-style='carbon'] [data-upload-clear] {
16
- @apply border-surface-z4 text-surface-z6 bg-surface-z2 rounded-none border;
17
- }
18
-
19
- [data-style='carbon'] [data-upload-clear]:hover {
20
- @apply bg-surface-z4 text-surface-z9;
21
- }
22
-
23
- /* =============================================================================
24
- File Rows
25
- ============================================================================= */
26
-
27
- [data-style='carbon'] [data-upload-file-status] {
28
- @apply text-surface-z7;
29
- }
30
-
31
- [data-style='carbon'] [data-upload-file-status]:hover {
32
- @apply bg-surface-z2;
33
- }
34
-
35
- /* =============================================================================
36
- File Elements
37
- ============================================================================= */
38
-
39
- [data-style='carbon'] [data-upload-file-icon] {
40
- @apply text-surface-z5;
41
- }
42
-
43
- [data-style='carbon'] [data-upload-file-size] {
44
- @apply text-surface-z5;
45
- }
46
-
47
- /* =============================================================================
48
- Progress Bar
49
- ============================================================================= */
50
-
51
- [data-style='carbon'] [data-upload-bar] {
52
- @apply bg-surface-z3;
53
- }
54
-
55
- [data-style='carbon'] [data-upload-fill] {
56
- @apply bg-primary-z5 bg-none;
57
- }
58
-
59
- /* =============================================================================
60
- Status Colors
61
- ============================================================================= */
62
-
63
- [data-style='carbon'] [data-upload-file-status][data-status='uploading'] [data-upload-status] {
64
- @apply text-primary-z6;
65
- }
66
-
67
- [data-style='carbon'] [data-upload-file-status][data-status='done'] [data-upload-status] {
68
- @apply text-green-500;
69
- }
70
-
71
- [data-style='carbon'] [data-upload-file-status][data-status='error'] [data-upload-status] {
72
- @apply text-red-500;
73
- }
74
-
75
- [data-style='carbon'] [data-upload-file-status][data-status='pending'] [data-upload-status] {
76
- @apply text-surface-z5;
77
- }
78
-
79
- /* Status-based file icon tinting */
80
- [data-style='carbon'] [data-upload-file-status][data-status='done'] [data-upload-file-icon] {
81
- @apply text-green-500;
82
- }
83
-
84
- [data-style='carbon'] [data-upload-file-status][data-status='error'] [data-upload-file-icon] {
85
- @apply text-red-500;
86
- }
87
-
88
- /* =============================================================================
89
- Action Buttons
90
- ============================================================================= */
91
-
92
- [data-style='carbon'] [data-upload-actions] button {
93
- @apply text-surface-z5 rounded-none;
94
- }
95
-
96
- [data-style='carbon'] [data-upload-actions] button:hover {
97
- @apply bg-surface-z3 text-surface-z9;
98
- }
99
-
100
- [data-style='carbon'] [data-upload-file-status][data-status='error'] [data-upload-retry]:hover {
101
- @apply text-primary-z7;
102
- }
@@ -1,50 +0,0 @@
1
- /**
2
- * UploadTarget - Carbon Theme Styles
3
- *
4
- * Flat drop zone with structured borders, no border-radius.
5
- */
6
-
7
- /* =============================================================================
8
- Drop Zone
9
- ============================================================================= */
10
-
11
- [data-style='carbon'] [data-upload-target] {
12
- @apply border-surface-z4 text-surface-z6 rounded-none border-2;
13
- }
14
-
15
- [data-style='carbon'] [data-upload-target]:hover:not([data-disabled]) {
16
- @apply border-surface-z5 text-surface-z7 bg-surface-z2;
17
- }
18
-
19
- [data-style='carbon'] [data-upload-target]:focus-visible:not([data-disabled]) {
20
- @apply border-primary-z5 border-2 outline-none;
21
- }
22
-
23
- /* Drag-over highlight */
24
- [data-style='carbon'] [data-upload-target][data-dragging] {
25
- @apply border-primary-z5 bg-primary-z2 text-primary-z7;
26
- }
27
-
28
- /* =============================================================================
29
- Upload Icon
30
- ============================================================================= */
31
-
32
- [data-style='carbon'] [data-upload-target] [data-upload-icon] {
33
- @apply text-surface-z5;
34
- }
35
-
36
- [data-style='carbon'] [data-upload-target][data-dragging] [data-upload-icon] {
37
- @apply text-primary-z6;
38
- }
39
-
40
- /* =============================================================================
41
- Browse Button
42
- ============================================================================= */
43
-
44
- [data-style='carbon'] [data-upload-target] [data-upload-button] {
45
- @apply border-surface-z4 text-surface-z7 bg-surface-z3 rounded-none border;
46
- }
47
-
48
- [data-style='carbon'] [data-upload-target] [data-upload-button]:hover:not(:disabled) {
49
- @apply bg-surface-z4 text-surface-z9;
50
- }
@@ -1,196 +0,0 @@
1
- /**
2
- * Button - DaisyUI Theme Styles
3
- *
4
- * Pill-shaped buttons with bold solid fills, no borders.
5
- * Focus: outline-2 with offset (DaisyUI signature).
6
- */
7
-
8
- /* =============================================================================
9
- Default Style (filled)
10
- ============================================================================= */
11
-
12
- [data-style='daisy-ui'] [data-button][data-style='default'][data-variant='default'],
13
- [data-style='daisy-ui'] [data-button]:not([data-style])[data-variant='default'],
14
- [data-style='daisy-ui'] [data-button][data-style='default']:not([data-variant]),
15
- [data-style='daisy-ui'] [data-button]:not([data-style]):not([data-variant]) {
16
- @apply bg-surface-z3 text-surface-z8 rounded-full border-0 border-transparent bg-none;
17
- }
18
-
19
- [data-style='daisy-ui'] [data-button][data-style='default'][data-variant='primary'],
20
- [data-style='daisy-ui'] [data-button]:not([data-style])[data-variant='primary'] {
21
- @apply bg-primary-z5 text-on-primary rounded-full border-0 border-transparent bg-none;
22
- }
23
-
24
- [data-style='daisy-ui'] [data-button][data-style='default'][data-variant='secondary'],
25
- [data-style='daisy-ui'] [data-button]:not([data-style])[data-variant='secondary'] {
26
- @apply bg-secondary-z4 text-on-secondary rounded-full border-0 border-transparent bg-none;
27
- }
28
-
29
- [data-style='daisy-ui'] [data-button][data-style='default'][data-variant='accent'],
30
- [data-style='daisy-ui'] [data-button]:not([data-style])[data-variant='accent'] {
31
- @apply bg-accent-z4 text-on-accent rounded-full border-0 border-transparent bg-none;
32
- }
33
-
34
- [data-style='daisy-ui'] [data-button][data-style='default'][data-variant='danger'],
35
- [data-style='daisy-ui'] [data-button]:not([data-style])[data-variant='danger'] {
36
- @apply bg-danger-z4 text-on-danger rounded-full border-0 border-transparent bg-none;
37
- }
38
-
39
- /* =============================================================================
40
- Outline Style
41
- ============================================================================= */
42
-
43
- [data-style='daisy-ui'] [data-button][data-style='outline'][data-variant='default'],
44
- [data-style='daisy-ui'] [data-button][data-style='outline']:not([data-variant]) {
45
- @apply border-surface-z5 text-surface-z7 rounded-full border bg-transparent;
46
- }
47
-
48
- [data-style='daisy-ui'] [data-button][data-style='outline'][data-variant='primary'] {
49
- @apply border-primary-z5 text-primary-z6 rounded-full border bg-transparent;
50
- }
51
-
52
- [data-style='daisy-ui'] [data-button][data-style='outline'][data-variant='secondary'] {
53
- @apply border-secondary-z5 text-secondary-z6 rounded-full border bg-transparent;
54
- }
55
-
56
- [data-style='daisy-ui'] [data-button][data-style='outline'][data-variant='accent'] {
57
- @apply border-accent-z4 text-accent-z6 rounded-full border bg-transparent;
58
- }
59
-
60
- [data-style='daisy-ui'] [data-button][data-style='outline'][data-variant='danger'] {
61
- @apply border-danger-z4 text-danger-z5 rounded-full border bg-transparent;
62
- }
63
-
64
- /* =============================================================================
65
- Ghost Style
66
- ============================================================================= */
67
-
68
- [data-style='daisy-ui'] [data-button][data-style='ghost'] {
69
- @apply rounded-full border-transparent bg-transparent;
70
- }
71
-
72
- [data-style='daisy-ui'] [data-button][data-style='ghost'][data-variant='default'],
73
- [data-style='daisy-ui'] [data-button][data-style='ghost']:not([data-variant]) {
74
- @apply text-surface-z7;
75
- }
76
-
77
- [data-style='daisy-ui'] [data-button][data-style='ghost'][data-variant='primary'] {
78
- @apply text-primary-z6;
79
- }
80
-
81
- [data-style='daisy-ui'] [data-button][data-style='ghost'][data-variant='secondary'] {
82
- @apply text-secondary-z6;
83
- }
84
-
85
- [data-style='daisy-ui'] [data-button][data-style='ghost'][data-variant='accent'] {
86
- @apply text-accent-z6;
87
- }
88
-
89
- [data-style='daisy-ui'] [data-button][data-style='ghost'][data-variant='danger'] {
90
- @apply text-danger-z5;
91
- }
92
-
93
- /* =============================================================================
94
- Gradient Style
95
- ============================================================================= */
96
-
97
- [data-style='daisy-ui'] [data-button][data-style='gradient'][data-variant='default'],
98
- [data-style='daisy-ui'] [data-button][data-style='gradient']:not([data-variant]) {
99
- @apply from-surface-z3 to-surface-z1 text-surface-z10 rounded-full bg-gradient-to-br;
100
- }
101
-
102
- [data-style='daisy-ui'] [data-button][data-style='gradient'][data-variant='primary'] {
103
- @apply from-primary-z5 to-primary-z3 text-on-primary rounded-full bg-gradient-to-br;
104
- }
105
-
106
- [data-style='daisy-ui'] [data-button][data-style='gradient'][data-variant='secondary'] {
107
- @apply from-secondary-z5 to-secondary-z3 text-on-secondary rounded-full bg-gradient-to-br;
108
- }
109
-
110
- [data-style='daisy-ui'] [data-button][data-style='gradient'][data-variant='accent'] {
111
- @apply from-accent-z5 to-accent-z3 text-on-accent rounded-full bg-gradient-to-br;
112
- }
113
-
114
- [data-style='daisy-ui'] [data-button][data-style='gradient'][data-variant='danger'] {
115
- @apply from-danger-z5 to-danger-z3 text-on-danger rounded-full bg-gradient-to-br;
116
- }
117
-
118
- [data-style='daisy-ui']
119
- [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
120
- opacity: 0.9;
121
- }
122
-
123
- /* =============================================================================
124
- Link Style
125
- ============================================================================= */
126
-
127
- [data-style='daisy-ui'] [data-button][data-style='link'][data-variant='default'],
128
- [data-style='daisy-ui'] [data-button][data-style='link']:not([data-variant]) {
129
- @apply text-surface-z7;
130
- }
131
-
132
- [data-style='daisy-ui'] [data-button][data-style='link'][data-variant='primary'] {
133
- @apply text-primary-z6;
134
- }
135
-
136
- [data-style='daisy-ui'] [data-button][data-style='link'][data-variant='secondary'] {
137
- @apply text-secondary-z6;
138
- }
139
-
140
- [data-style='daisy-ui'] [data-button][data-style='link'][data-variant='accent'] {
141
- @apply text-accent-z6;
142
- }
143
-
144
- [data-style='daisy-ui'] [data-button][data-style='link'][data-variant='danger'] {
145
- @apply text-danger-z5;
146
- }
147
-
148
- [data-style='daisy-ui'] [data-button][data-style='link']:hover:not(:disabled):not([data-disabled]) {
149
- @apply text-surface-z9;
150
- }
151
-
152
- /* =============================================================================
153
- Hover States
154
- ============================================================================= */
155
-
156
- [data-style='daisy-ui']
157
- [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
158
- [data-style='daisy-ui'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
159
- opacity: 0.9;
160
- }
161
-
162
- [data-style='daisy-ui']
163
- [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]) {
164
- @apply bg-surface-z2 bg-none;
165
- }
166
-
167
- [data-style='daisy-ui']
168
- [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]) {
169
- @apply bg-surface-z2;
170
- }
171
-
172
- /* =============================================================================
173
- Focus
174
- ============================================================================= */
175
-
176
- [data-style='daisy-ui'] [data-button]:focus-visible {
177
- @apply outline-primary-z5 outline outline-2 outline-offset-2;
178
- }
179
-
180
- /* =============================================================================
181
- Button Group — override pill radius for connected appearance
182
- ============================================================================= */
183
-
184
- [data-style='daisy-ui'] [data-button-group] [data-button] {
185
- border-radius: 0;
186
- }
187
-
188
- [data-style='daisy-ui'] [data-button-group] [data-button]:first-child {
189
- border-top-left-radius: 9999px;
190
- border-bottom-left-radius: 9999px;
191
- }
192
-
193
- [data-style='daisy-ui'] [data-button-group] [data-button]:last-child {
194
- border-top-right-radius: 9999px;
195
- border-bottom-right-radius: 9999px;
196
- }