@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,66 +0,0 @@
1
- /**
2
- * StatusList - Grada UI Theme Styles
3
- */
4
-
5
- [data-style='grada-ui'] [data-status-item][data-status='pass'] span {
6
- color: rgba(var(--color-success-500), 1);
7
- }
8
- [data-style='grada-ui'] [data-status-item][data-status='fail'] span {
9
- color: rgba(var(--color-danger-400), 1);
10
- }
11
- [data-style='grada-ui'] [data-status-item][data-status='warn'] span {
12
- @apply text-warning-z6;
13
- }
14
- [data-style='grada-ui'] [data-status-item][data-status='unknown'] span {
15
- @apply text-surface-z4;
16
- }
17
-
18
- [data-style='grada-ui'] [data-status-item][data-status='pass'] {
19
- @apply text-surface-z8;
20
- }
21
- [data-style='grada-ui'] [data-status-item][data-status='fail'] {
22
- color: rgba(var(--color-danger-600), 1);
23
- }
24
- [data-style='grada-ui'] [data-status-item][data-status='warn'] {
25
- @apply text-warning-z8;
26
- }
27
- [data-style='grada-ui'] [data-status-item][data-status='unknown'] {
28
- @apply text-surface-z5;
29
- }
30
-
31
- [data-style='grada-ui'] [data-status-group][data-severity='error'] [data-status-header] {
32
- color: rgba(var(--color-danger-400), 1);
33
- }
34
- [data-style='grada-ui'] [data-status-group][data-severity='warning'] [data-status-header] {
35
- @apply text-warning-z6;
36
- }
37
- [data-style='grada-ui'] [data-status-group][data-severity='info'] [data-status-header] {
38
- color: rgba(var(--color-secondary-500), 1);
39
- }
40
- [data-style='grada-ui'] [data-status-group][data-severity='success'] [data-status-header] {
41
- color: rgba(var(--color-success-500), 1);
42
- }
43
-
44
- [data-style='grada-ui'] [data-status-item][data-status='error'] {
45
- color: rgba(var(--color-danger-600), 1);
46
- }
47
- [data-style='grada-ui'] [data-status-item][data-status='warning'] {
48
- @apply text-warning-z8;
49
- }
50
- [data-style='grada-ui'] [data-status-item][data-status='info'] {
51
- @apply text-info-z8;
52
- }
53
- [data-style='grada-ui'] [data-status-item][data-status='success'] {
54
- @apply text-surface-z8;
55
- }
56
-
57
- [data-style='grada-ui'] [data-status-count] {
58
- background-image: linear-gradient(
59
- to right,
60
- rgba(var(--color-primary-500), 1),
61
- rgba(var(--color-secondary-500), 1)
62
- );
63
- background-color: transparent;
64
- color: white;
65
- font-weight: 600;
66
- }
@@ -1,37 +0,0 @@
1
- /* StepIndicator — grada-ui theme (coral/purple gradient brand identity) */
2
-
3
- [data-style='grada-ui'] [data-step-item][data-step-state='complete'] [data-step-number] {
4
- @apply bg-gradient-to-br from-primary-z5 to-secondary-z5 border-transparent text-on-primary;
5
- }
6
-
7
- [data-style='grada-ui'] [data-step-item][data-step-state='current'] [data-step-number] {
8
- @apply bg-transparent border-primary-z5 text-primary-z7 bg-none;
9
- box-shadow:
10
- 0 0 0 3px color-mix(in srgb, var(--color-primary-500, #6366f1) 20%, transparent),
11
- 0 0 8px color-mix(in srgb, var(--color-secondary-500, #ec4899) 15%, transparent);
12
- }
13
-
14
- [data-style='grada-ui'] [data-step-item][data-step-state='upcoming'] [data-step-number] {
15
- @apply bg-surface-z1 border-surface-z3 text-surface-z5 bg-none;
16
- }
17
-
18
- [data-style='grada-ui'] [data-step-item][data-step-state='complete'] [data-step-label] {
19
- @apply text-primary-z7 bg-none;
20
- }
21
-
22
- [data-style='grada-ui'] [data-step-item][data-step-state='current'] [data-step-label] {
23
- @apply text-surface-z9 font-semibold bg-none;
24
- }
25
-
26
- [data-style='grada-ui'] [data-step-item][data-step-state='upcoming'] [data-step-label] {
27
- @apply text-surface-z5 bg-none;
28
- }
29
-
30
- [data-style='grada-ui'] [data-step-item][data-step-state='complete']::after {
31
- @apply bg-gradient-to-r from-primary-z5 to-secondary-z5;
32
- }
33
-
34
- [data-style='grada-ui'] [data-step-item][data-step-state='current']::after,
35
- [data-style='grada-ui'] [data-step-item][data-step-state='upcoming']::after {
36
- @apply bg-surface-z3;
37
- }
@@ -1,35 +0,0 @@
1
- /**
2
- * Switch - Grada UI Theme Styles
3
- *
4
- * Gradient track when active.
5
- */
6
-
7
- [data-style='grada-ui'] [data-switch-track] {
8
- @apply bg-surface-z3 bg-none;
9
- }
10
-
11
- [data-style='grada-ui'] [data-switch] [data-switch-thumb] {
12
- @apply bg-white shadow-md;
13
- }
14
-
15
- [data-style='grada-ui'] [data-switch]:focus-visible [data-switch-track] {
16
- @apply outline-primary-z5 outline outline-2 outline-offset-2;
17
- }
18
-
19
- /* On state — gradient track */
20
- [data-style='grada-ui'] [data-switch][aria-checked='true'] [data-switch-track] {
21
- background-image: linear-gradient(
22
- to right,
23
- rgba(var(--color-primary-500), 1),
24
- rgba(var(--color-secondary-500), 1)
25
- );
26
- background-color: transparent;
27
- }
28
-
29
- [data-style='grada-ui'] [data-switch][aria-checked='true'] [data-switch-thumb] {
30
- @apply bg-white shadow-lg;
31
- }
32
-
33
- [data-style='grada-ui'] [data-switch-label] {
34
- @apply text-surface-z7;
35
- }
@@ -1,79 +0,0 @@
1
- /**
2
- * Table - Grada UI Theme Styles
3
- */
4
-
5
- [data-style='grada-ui'] [data-table-header] th {
6
- @apply text-surface-z6 bg-surface-z1 border-b font-medium;
7
- font-family: 'Montserrat', sans-serif;
8
- font-size: 0.625rem;
9
- text-transform: uppercase;
10
- letter-spacing: 0.06em;
11
- border-color: rgba(var(--color-surface-z300), 1);
12
- }
13
-
14
- [data-style='grada-ui'] [data-table-header-cell][data-sortable='true']:hover {
15
- @apply text-surface-z9 bg-surface-z2;
16
- }
17
-
18
- [data-style='grada-ui'] [data-table-header-cell][data-sort-order='ascending'],
19
- [data-style='grada-ui'] [data-table-header-cell][data-sort-order='descending'] {
20
- color: rgba(var(--color-primary-500), 1);
21
- }
22
-
23
- [data-style='grada-ui'] [data-table-sort-icon] {
24
- @apply text-surface-z5;
25
- }
26
-
27
- [data-style='grada-ui']
28
- [data-table-header-cell][data-sort-order='ascending']
29
- [data-table-sort-icon],
30
- [data-style='grada-ui']
31
- [data-table-header-cell][data-sort-order='descending']
32
- [data-table-sort-icon] {
33
- color: rgba(var(--color-primary-500), 1);
34
- }
35
-
36
- /* Caption */
37
- [data-style='grada-ui'] [data-table-caption] {
38
- @apply text-surface-z7;
39
- }
40
-
41
- /* Rows */
42
- [data-style='grada-ui'] [data-table-row] {
43
- @apply text-surface-z8 border-b;
44
- border-color: rgba(var(--color-surface-z300), 1);
45
- }
46
-
47
- [data-style='grada-ui'] [data-table-row]:hover {
48
- @apply bg-surface-z1;
49
- }
50
-
51
- [data-style='grada-ui'] [data-table-row]:focus {
52
- @apply bg-surface-z1 text-surface-z10 outline-none;
53
- outline: 2px solid rgba(var(--color-primary-500), 1);
54
- outline-offset: -2px;
55
- }
56
-
57
- [data-style='grada-ui'] [data-table-row][data-selected='true'] {
58
- background: rgba(var(--color-primary-500), 0.1);
59
- color: rgba(var(--color-primary-500), 1);
60
- }
61
-
62
- /* Striped */
63
- [data-style='grada-ui'] [data-table-striped] [data-table-body] tr:nth-child(even) {
64
- @apply bg-surface-z1;
65
- }
66
-
67
- /* Empty */
68
- [data-style='grada-ui'] [data-table-empty] {
69
- @apply text-surface-z5;
70
- }
71
-
72
- /* Cell Icon */
73
- [data-style='grada-ui'] [data-table-cell] [data-cell-icon] {
74
- @apply text-surface-z5;
75
- }
76
-
77
- [data-style='grada-ui'] [data-table-row][data-selected='true'] [data-cell-icon] {
78
- color: rgba(var(--color-primary-500), 1);
79
- }
@@ -1,59 +0,0 @@
1
- /**
2
- * Tabs - Grada UI Theme Styles
3
- *
4
- * Gradient active tab with pill-shaped triggers.
5
- */
6
-
7
- [data-style='grada-ui'] [data-tabs-list] {
8
- @apply bg-surface-z2 gap-1 border-0;
9
- border-radius: 20px;
10
- padding: 3px;
11
- }
12
-
13
- [data-style='grada-ui'] [data-tabs][data-position='after'] [data-tabs-list] {
14
- border-radius: 20px;
15
- }
16
-
17
- [data-style='grada-ui'] [data-tabs-trigger] {
18
- background-color: transparent;
19
- @apply text-surface-z6;
20
- border-radius: 20px;
21
- font-family: 'Montserrat', sans-serif;
22
- font-weight: 600;
23
- font-size: 0.75rem;
24
- text-transform: uppercase;
25
- letter-spacing: 0.05em;
26
- }
27
-
28
- [data-style='grada-ui'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
29
- @apply bg-surface-z3 text-surface-z8;
30
- }
31
-
32
- /* Selected — primary→secondary gradient */
33
- [data-style='grada-ui'] [data-tabs-trigger][data-selected],
34
- [data-style='grada-ui'] [data-tabs-list]:focus-within [data-tabs-trigger][data-selected] {
35
- background-image: linear-gradient(
36
- to right,
37
- rgba(var(--color-primary-500), 1),
38
- rgba(var(--color-secondary-500), 1)
39
- );
40
- background-color: transparent;
41
- color: white;
42
- @apply shadow-sm;
43
- }
44
-
45
- [data-style='grada-ui'] [data-tabs-trigger] [data-tabs-icon] {
46
- @apply text-surface-z5;
47
- }
48
-
49
- [data-style='grada-ui'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
50
- @apply text-surface-z7;
51
- }
52
-
53
- [data-style='grada-ui'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
54
- color: white;
55
- }
56
-
57
- [data-style='grada-ui'] [data-tabs-content] {
58
- @apply text-surface-z8;
59
- }
@@ -1,46 +0,0 @@
1
- /**
2
- * Timeline - Grada UI Theme Styles
3
- */
4
-
5
- [data-style='grada-ui'] [data-timeline-circle] {
6
- @apply border-surface-z4 text-surface-z6;
7
- }
8
-
9
- [data-style='grada-ui'] [data-timeline-item][data-completed] [data-timeline-circle] {
10
- background-image: linear-gradient(
11
- to right,
12
- rgba(var(--color-primary-500), 1),
13
- rgba(var(--color-secondary-500), 1)
14
- );
15
- background-color: transparent;
16
- border-color: rgba(var(--color-primary-500), 1);
17
- color: white;
18
- @apply shadow-sm;
19
- }
20
-
21
- [data-style='grada-ui'] [data-timeline-item][data-active] [data-timeline-circle] {
22
- border-color: rgba(var(--color-primary-500), 1);
23
- color: rgba(var(--color-primary-500), 1);
24
- box-shadow: 0 0 0 3px rgba(var(--color-primary-500), 0.25);
25
- }
26
-
27
- [data-style='grada-ui'] [data-timeline-connector] {
28
- @apply bg-surface-z3;
29
- }
30
-
31
- [data-style='grada-ui'] [data-timeline-item][data-completed] [data-timeline-connector] {
32
- background-image: linear-gradient(
33
- to right,
34
- rgba(var(--color-primary-500), 1),
35
- rgba(var(--color-secondary-500), 1)
36
- );
37
- background-color: transparent;
38
- }
39
-
40
- [data-style='grada-ui'] [data-timeline-title] {
41
- @apply text-surface-z8;
42
- }
43
-
44
- [data-style='grada-ui'] [data-timeline-description] {
45
- @apply text-surface-z6;
46
- }
@@ -1,24 +0,0 @@
1
- /* TableOfContents — Grada UI theme */
2
-
3
- [data-style='grada-ui'] [data-toc] [data-toc-label] {
4
- @apply text-surface-z6;
5
- font-family: 'Montserrat', sans-serif;
6
- font-size: 0.625rem;
7
- text-transform: uppercase;
8
- letter-spacing: 0.06em;
9
- font-weight: 700;
10
- }
11
-
12
- [data-style='grada-ui'] [data-toc] [data-toc-item] {
13
- @apply text-surface-z7;
14
- }
15
-
16
- [data-style='grada-ui'] [data-toc] [data-toc-item]:hover,
17
- [data-style='grada-ui'] [data-toc] [data-toc-item][data-toc-focused] {
18
- @apply text-surface-z10 bg-surface-z1 outline-none;
19
- }
20
-
21
- [data-style='grada-ui'] [data-toc] [data-toc-item][data-toc-active] {
22
- color: rgba(var(--color-primary-500), 1);
23
- border-left-color: rgba(var(--color-primary-500), 1);
24
- }
@@ -1,47 +0,0 @@
1
- /**
2
- * Toggle - Grada UI Theme Styles
3
- *
4
- * Gradient selected option.
5
- */
6
-
7
- [data-style='grada-ui'] [data-toggle] {
8
- @apply bg-surface-z2 bg-none;
9
- border-radius: 20px;
10
- @apply shadow-sm;
11
- }
12
-
13
- [data-style='grada-ui'] [data-toggle-option] {
14
- @apply text-surface-z6;
15
- border-radius: 20px;
16
- }
17
-
18
- [data-style='grada-ui'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
19
- [data-style='grada-ui'] [data-toggle-option]:focus:not(:disabled):not([data-disabled='true']) {
20
- @apply bg-surface-z3 text-surface-z8 bg-none;
21
- }
22
-
23
- /* Selected state — gradient */
24
- [data-style='grada-ui'] [data-toggle-option][data-selected='true'] {
25
- background-image: linear-gradient(
26
- to right,
27
- rgba(var(--color-primary-500), 1),
28
- rgba(var(--color-secondary-500), 1)
29
- );
30
- background-color: transparent;
31
- color: white;
32
- border-radius: 20px;
33
- @apply shadow-sm;
34
- }
35
-
36
- [data-style='grada-ui'] [data-toggle-option] [data-toggle-icon] {
37
- @apply text-surface-z5;
38
- }
39
-
40
- [data-style='grada-ui'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
41
- [data-style='grada-ui'] [data-toggle-option]:focus:not(:disabled) [data-toggle-icon] {
42
- @apply text-surface-z7;
43
- }
44
-
45
- [data-style='grada-ui'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
46
- color: white;
47
- }
@@ -1,91 +0,0 @@
1
- /**
2
- * Toolbar - Grada UI Theme Styles
3
- */
4
-
5
- [data-style='grada-ui'] [data-toolbar] {
6
- @apply bg-white shadow-sm;
7
- border-bottom: 1px solid rgba(var(--color-surface-z300), 1);
8
- }
9
-
10
- [data-style='grada-ui'] [data-toolbar][data-toolbar-position='top'],
11
- [data-style='grada-ui'] [data-toolbar]:not([data-toolbar-position]) {
12
- border-bottom: 1px solid rgba(var(--color-surface-z300), 1);
13
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
14
- }
15
-
16
- [data-style='grada-ui'] [data-toolbar][data-toolbar-position='bottom'] {
17
- border-top: 1px solid rgba(var(--color-surface-z300), 1);
18
- border-bottom: none;
19
- box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
20
- }
21
-
22
- [data-style='grada-ui'] [data-toolbar][data-toolbar-position='left'] {
23
- border-right: 1px solid rgba(var(--color-surface-z300), 1);
24
- border-bottom: none;
25
- }
26
-
27
- [data-style='grada-ui'] [data-toolbar][data-toolbar-position='right'] {
28
- border-left: 1px solid rgba(var(--color-surface-z300), 1);
29
- border-bottom: none;
30
- }
31
-
32
- /* Items */
33
- [data-style='grada-ui'] [data-toolbar-item] {
34
- @apply text-surface-z7;
35
- border-radius: 3px;
36
- }
37
-
38
- [data-style='grada-ui'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
39
- @apply bg-surface-z1 text-surface-z9;
40
- }
41
-
42
- [data-style='grada-ui']
43
- [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
44
- @apply bg-surface-z1 text-surface-z9;
45
- outline: 2px solid rgba(var(--color-primary-500), 1);
46
- outline-offset: -2px;
47
- }
48
-
49
- /* Active */
50
- [data-style='grada-ui'] [data-toolbar-item][data-active='true'] {
51
- background-image: linear-gradient(
52
- to right,
53
- rgba(var(--color-primary-500), 1),
54
- rgba(var(--color-secondary-500), 1)
55
- );
56
- background-color: transparent;
57
- color: white;
58
- }
59
-
60
- [data-style='grada-ui'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
61
- background-image: linear-gradient(
62
- to right,
63
- rgba(var(--color-primary-500), 1),
64
- rgba(var(--color-secondary-500), 1)
65
- );
66
- background-color: transparent;
67
- filter: brightness(1.08);
68
- color: white;
69
- }
70
-
71
- /* Icons */
72
- [data-style='grada-ui'] [data-toolbar-item] [data-toolbar-icon] {
73
- @apply text-surface-z6;
74
- }
75
-
76
- [data-style='grada-ui'] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon] {
77
- @apply text-surface-z8;
78
- }
79
-
80
- [data-style='grada-ui'] [data-toolbar-item][data-active='true'] [data-toolbar-icon] {
81
- color: white;
82
- }
83
-
84
- /* Separator & Divider */
85
- [data-style='grada-ui'] [data-toolbar-separator] {
86
- @apply bg-surface-z3;
87
- }
88
-
89
- [data-style='grada-ui'] [data-toolbar-divider] {
90
- @apply bg-surface-z3;
91
- }
@@ -1,100 +0,0 @@
1
- /**
2
- * Tree - Grada UI Theme Styles
3
- */
4
-
5
- [data-style='grada-ui'] [data-tree]:focus-within {
6
- @apply outline-none;
7
- }
8
-
9
- [data-style='grada-ui'] [data-tree-toggle-btn] {
10
- @apply text-surface-z5;
11
- border-radius: 20px;
12
- }
13
-
14
- [data-style='grada-ui'] [data-tree-toggle-btn]:hover {
15
- @apply bg-surface-z2 text-surface-z7;
16
- }
17
-
18
- [data-style='grada-ui'] [data-tree-item-content] {
19
- @apply text-surface-z8;
20
- }
21
-
22
- [data-style='grada-ui'] [data-tree-item-content]:hover:not(:disabled),
23
- [data-style='grada-ui'] [data-tree-item-content]:focus:not(:disabled) {
24
- @apply bg-surface-z1 text-surface-z10 outline-none;
25
- }
26
-
27
- [data-style='grada-ui'] [data-tree-item-content]:focus-visible {
28
- outline: 2px solid rgba(var(--color-primary-500), 1);
29
- outline-offset: -2px;
30
- }
31
-
32
- /* Active/selected state */
33
- [data-style='grada-ui'] [data-tree-item-content][data-active='true'] {
34
- @apply bg-surface-z1;
35
- border-left: 3px solid rgba(var(--color-primary-500), 1);
36
- color: rgba(var(--color-primary-500), 1);
37
- }
38
-
39
- [data-style='grada-ui'] [data-tree-item-content][data-active='true']:hover:not(:disabled) {
40
- @apply bg-surface-z2;
41
- }
42
-
43
- [data-style='grada-ui'] [data-tree]:focus-within [data-tree-item-content][data-active='true'] {
44
- border-left: 3px solid rgba(var(--color-primary-500), 1);
45
- }
46
-
47
- [data-style='grada-ui']
48
- [data-tree]:not(:focus-within)
49
- [data-tree-item-content][data-active='true'] {
50
- border-left: 3px solid rgba(var(--color-primary-500), 1);
51
- opacity: 0.8;
52
- }
53
-
54
- /* Item Elements */
55
- [data-style='grada-ui'] [data-tree-item-content] [data-item-icon] {
56
- @apply text-surface-z5;
57
- }
58
-
59
- [data-style='grada-ui'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
60
- @apply text-surface-z7;
61
- }
62
-
63
- [data-style='grada-ui'] [data-tree-item-content][data-active='true'] [data-item-icon] {
64
- color: rgba(var(--color-primary-500), 1);
65
- }
66
-
67
- [data-style='grada-ui'] [data-tree-item-content] [data-item-description] {
68
- @apply text-surface-z5;
69
- }
70
-
71
- [data-style='grada-ui'] [data-tree-item-content] [data-item-badge] {
72
- @apply text-surface-z6 bg-surface-z2;
73
- border-radius: 20px;
74
- }
75
-
76
- [data-style='grada-ui'] [data-tree-item-content][data-active='true'] [data-item-badge] {
77
- background-image: linear-gradient(
78
- to right,
79
- rgba(var(--color-primary-500), 1),
80
- rgba(var(--color-secondary-500), 1)
81
- );
82
- background-color: transparent;
83
- color: white;
84
- }
85
-
86
- /* Multi-Selection */
87
- [data-style='grada-ui'] [data-tree-node][data-selected='true'] [data-tree-node-row] {
88
- background: rgba(var(--color-primary-500), 0.15);
89
- }
90
-
91
- [data-style='grada-ui'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
92
- color: rgba(var(--color-primary-500), 1);
93
- }
94
-
95
- [data-style='grada-ui']
96
- [data-tree-node][data-selected='true']
97
- [data-tree-item-content]
98
- [data-item-icon] {
99
- color: rgba(var(--color-primary-500), 1);
100
- }
@@ -1,6 +0,0 @@
1
- /**
2
- * Stack - Rokkit Theme Styles
3
- *
4
- * Stack is purely structural — no color theming needed.
5
- * All visual appearance comes from the base layout CSS.
6
- */