@betterstart/cli 0.1.3 → 0.1.4

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 (234) hide show
  1. package/README.md +133 -0
  2. package/dist/cli.d.ts +1 -9
  3. package/dist/cli.js +13484 -367
  4. package/dist/cli.js.map +1 -1
  5. package/dist/index.d.ts +24 -266
  6. package/dist/index.js +4 -11378
  7. package/dist/index.js.map +1 -1
  8. package/package.json +29 -42
  9. package/templates/schema.json +959 -0
  10. package/templates/tiptap/hooks/use-composed-ref.ts +43 -0
  11. package/templates/tiptap/hooks/use-cursor-visibility.ts +68 -0
  12. package/templates/tiptap/hooks/use-element-rect.ts +166 -0
  13. package/templates/tiptap/hooks/use-is-breakpoint.ts +32 -0
  14. package/templates/tiptap/hooks/use-menu-navigation.ts +182 -0
  15. package/templates/tiptap/hooks/use-scrolling.ts +64 -0
  16. package/templates/tiptap/hooks/use-throttled-callback.ts +146 -0
  17. package/templates/tiptap/hooks/use-tiptap-editor.ts +46 -0
  18. package/templates/tiptap/hooks/use-unmount.ts +21 -0
  19. package/templates/tiptap/hooks/use-window-size.ts +87 -0
  20. package/templates/tiptap/lib/tiptap-utils.ts +587 -0
  21. package/templates/tiptap/styles/_keyframe-animations.scss +91 -0
  22. package/templates/tiptap/styles/_variables.scss +296 -0
  23. package/templates/tiptap/tiptap-extension/node-background-extension.ts +138 -0
  24. package/templates/tiptap/tiptap-icons/align-center-icon.tsx +38 -0
  25. package/templates/tiptap/tiptap-icons/align-justify-icon.tsx +38 -0
  26. package/templates/tiptap/tiptap-icons/align-left-icon.tsx +38 -0
  27. package/templates/tiptap/tiptap-icons/align-right-icon.tsx +38 -0
  28. package/templates/tiptap/tiptap-icons/arrow-left-icon.tsx +24 -0
  29. package/templates/tiptap/tiptap-icons/ban-icon.tsx +26 -0
  30. package/templates/tiptap/tiptap-icons/blockquote-icon.tsx +44 -0
  31. package/templates/tiptap/tiptap-icons/bold-icon.tsx +26 -0
  32. package/templates/tiptap/tiptap-icons/chevron-down-icon.tsx +26 -0
  33. package/templates/tiptap/tiptap-icons/close-icon.tsx +24 -0
  34. package/templates/tiptap/tiptap-icons/code-block-icon.tsx +38 -0
  35. package/templates/tiptap/tiptap-icons/code2-icon.tsx +32 -0
  36. package/templates/tiptap/tiptap-icons/corner-down-left-icon.tsx +26 -0
  37. package/templates/tiptap/tiptap-icons/external-link-icon.tsx +28 -0
  38. package/templates/tiptap/tiptap-icons/heading-five-icon.tsx +28 -0
  39. package/templates/tiptap/tiptap-icons/heading-four-icon.tsx +28 -0
  40. package/templates/tiptap/tiptap-icons/heading-icon.tsx +24 -0
  41. package/templates/tiptap/tiptap-icons/heading-one-icon.tsx +28 -0
  42. package/templates/tiptap/tiptap-icons/heading-six-icon.tsx +30 -0
  43. package/templates/tiptap/tiptap-icons/heading-three-icon.tsx +36 -0
  44. package/templates/tiptap/tiptap-icons/heading-two-icon.tsx +28 -0
  45. package/templates/tiptap/tiptap-icons/highlighter-icon.tsx +26 -0
  46. package/templates/tiptap/tiptap-icons/image-plus-icon.tsx +26 -0
  47. package/templates/tiptap/tiptap-icons/italic-icon.tsx +24 -0
  48. package/templates/tiptap/tiptap-icons/link-icon.tsx +28 -0
  49. package/templates/tiptap/tiptap-icons/list-icon.tsx +56 -0
  50. package/templates/tiptap/tiptap-icons/list-ordered-icon.tsx +56 -0
  51. package/templates/tiptap/tiptap-icons/list-todo-icon.tsx +50 -0
  52. package/templates/tiptap/tiptap-icons/moon-star-icon.tsx +30 -0
  53. package/templates/tiptap/tiptap-icons/redo2-icon.tsx +26 -0
  54. package/templates/tiptap/tiptap-icons/strike-icon.tsx +28 -0
  55. package/templates/tiptap/tiptap-icons/subscript-icon.tsx +38 -0
  56. package/templates/tiptap/tiptap-icons/sun-icon.tsx +58 -0
  57. package/templates/tiptap/tiptap-icons/superscript-icon.tsx +38 -0
  58. package/templates/tiptap/tiptap-icons/trash-icon.tsx +26 -0
  59. package/templates/tiptap/tiptap-icons/underline-icon.tsx +26 -0
  60. package/templates/tiptap/tiptap-icons/undo2-icon.tsx +26 -0
  61. package/templates/tiptap/tiptap-node/blockquote-node/blockquote-node.scss +37 -0
  62. package/templates/tiptap/tiptap-node/code-block-node/code-block-node.scss +54 -0
  63. package/templates/tiptap/tiptap-node/heading-node/heading-node.scss +45 -0
  64. package/templates/tiptap/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension.ts +10 -0
  65. package/templates/tiptap/tiptap-node/horizontal-rule-node/horizontal-rule-node.scss +25 -0
  66. package/templates/tiptap/tiptap-node/image-node/image-node.scss +35 -0
  67. package/templates/tiptap/tiptap-node/image-upload-node/image-upload-node-extension.ts +154 -0
  68. package/templates/tiptap/tiptap-node/image-upload-node/image-upload-node.scss +249 -0
  69. package/templates/tiptap/tiptap-node/image-upload-node/image-upload-node.tsx +522 -0
  70. package/templates/tiptap/tiptap-node/image-upload-node/index.tsx +1 -0
  71. package/templates/tiptap/tiptap-node/list-node/list-node.scss +208 -0
  72. package/templates/tiptap/tiptap-node/paragraph-node/paragraph-node.scss +273 -0
  73. package/templates/tiptap/tiptap-ui/blockquote-button/blockquote-button.tsx +104 -0
  74. package/templates/tiptap/tiptap-ui/blockquote-button/index.tsx +2 -0
  75. package/templates/tiptap/tiptap-ui/blockquote-button/use-blockquote.ts +252 -0
  76. package/templates/tiptap/tiptap-ui/code-block-button/code-block-button.tsx +106 -0
  77. package/templates/tiptap/tiptap-ui/code-block-button/index.tsx +2 -0
  78. package/templates/tiptap/tiptap-ui/code-block-button/use-code-block.ts +261 -0
  79. package/templates/tiptap/tiptap-ui/color-highlight-button/color-highlight-button.scss +49 -0
  80. package/templates/tiptap/tiptap-ui/color-highlight-button/color-highlight-button.tsx +153 -0
  81. package/templates/tiptap/tiptap-ui/color-highlight-button/index.tsx +2 -0
  82. package/templates/tiptap/tiptap-ui/color-highlight-button/use-color-highlight.ts +345 -0
  83. package/templates/tiptap/tiptap-ui/color-highlight-popover/color-highlight-popover.tsx +207 -0
  84. package/templates/tiptap/tiptap-ui/color-highlight-popover/index.tsx +1 -0
  85. package/templates/tiptap/tiptap-ui/heading-button/heading-button.tsx +107 -0
  86. package/templates/tiptap/tiptap-ui/heading-button/index.tsx +2 -0
  87. package/templates/tiptap/tiptap-ui/heading-button/use-heading.ts +314 -0
  88. package/templates/tiptap/tiptap-ui/heading-dropdown-menu/heading-dropdown-menu.tsx +131 -0
  89. package/templates/tiptap/tiptap-ui/heading-dropdown-menu/index.tsx +2 -0
  90. package/templates/tiptap/tiptap-ui/heading-dropdown-menu/use-heading-dropdown-menu.ts +130 -0
  91. package/templates/tiptap/tiptap-ui/image-upload-button/image-upload-button.tsx +114 -0
  92. package/templates/tiptap/tiptap-ui/image-upload-button/index.tsx +2 -0
  93. package/templates/tiptap/tiptap-ui/image-upload-button/use-image-upload.ts +192 -0
  94. package/templates/tiptap/tiptap-ui/link-popover/index.tsx +2 -0
  95. package/templates/tiptap/tiptap-ui/link-popover/link-popover.tsx +285 -0
  96. package/templates/tiptap/tiptap-ui/link-popover/use-link-popover.ts +286 -0
  97. package/templates/tiptap/tiptap-ui/list-button/index.tsx +2 -0
  98. package/templates/tiptap/tiptap-ui/list-button/list-button.tsx +108 -0
  99. package/templates/tiptap/tiptap-ui/list-button/use-list.ts +329 -0
  100. package/templates/tiptap/tiptap-ui/list-dropdown-menu/index.tsx +1 -0
  101. package/templates/tiptap/tiptap-ui/list-dropdown-menu/list-dropdown-menu.tsx +123 -0
  102. package/templates/tiptap/tiptap-ui/list-dropdown-menu/use-list-dropdown-menu.ts +203 -0
  103. package/templates/tiptap/tiptap-ui/mark-button/index.tsx +2 -0
  104. package/templates/tiptap/tiptap-ui/mark-button/mark-button.tsx +107 -0
  105. package/templates/tiptap/tiptap-ui/mark-button/use-mark.ts +206 -0
  106. package/templates/tiptap/tiptap-ui/text-align-button/index.tsx +2 -0
  107. package/templates/tiptap/tiptap-ui/text-align-button/text-align-button.tsx +118 -0
  108. package/templates/tiptap/tiptap-ui/text-align-button/use-text-align.ts +212 -0
  109. package/templates/tiptap/tiptap-ui/undo-redo-button/index.tsx +2 -0
  110. package/templates/tiptap/tiptap-ui/undo-redo-button/undo-redo-button.tsx +105 -0
  111. package/templates/tiptap/tiptap-ui/undo-redo-button/use-undo-redo.ts +173 -0
  112. package/templates/tiptap/tiptap-ui-primitive/badge/badge-colors.scss +395 -0
  113. package/templates/tiptap/tiptap-ui-primitive/badge/badge-group.scss +16 -0
  114. package/templates/tiptap/tiptap-ui-primitive/badge/badge.scss +99 -0
  115. package/templates/tiptap/tiptap-ui-primitive/badge/badge.tsx +46 -0
  116. package/templates/tiptap/tiptap-ui-primitive/badge/index.tsx +1 -0
  117. package/templates/tiptap/tiptap-ui-primitive/button/button-colors.scss +429 -0
  118. package/templates/tiptap/tiptap-ui-primitive/button/button-group.scss +22 -0
  119. package/templates/tiptap/tiptap-ui-primitive/button/button.scss +314 -0
  120. package/templates/tiptap/tiptap-ui-primitive/button/button.tsx +102 -0
  121. package/templates/tiptap/tiptap-ui-primitive/button/index.tsx +1 -0
  122. package/templates/tiptap/tiptap-ui-primitive/card/card.scss +77 -0
  123. package/templates/tiptap/tiptap-ui-primitive/card/card.tsx +59 -0
  124. package/templates/tiptap/tiptap-ui-primitive/card/index.tsx +1 -0
  125. package/templates/tiptap/tiptap-ui-primitive/dropdown-menu/dropdown-menu.scss +63 -0
  126. package/templates/tiptap/tiptap-ui-primitive/dropdown-menu/dropdown-menu.tsx +95 -0
  127. package/templates/tiptap/tiptap-ui-primitive/dropdown-menu/index.tsx +1 -0
  128. package/templates/tiptap/tiptap-ui-primitive/input/index.tsx +1 -0
  129. package/templates/tiptap/tiptap-ui-primitive/input/input.scss +45 -0
  130. package/templates/tiptap/tiptap-ui-primitive/input/input.tsx +18 -0
  131. package/templates/tiptap/tiptap-ui-primitive/popover/index.tsx +1 -0
  132. package/templates/tiptap/tiptap-ui-primitive/popover/popover.scss +63 -0
  133. package/templates/tiptap/tiptap-ui-primitive/popover/popover.tsx +33 -0
  134. package/templates/tiptap/tiptap-ui-primitive/separator/index.tsx +1 -0
  135. package/templates/tiptap/tiptap-ui-primitive/separator/separator.scss +23 -0
  136. package/templates/tiptap/tiptap-ui-primitive/separator/separator.tsx +33 -0
  137. package/templates/tiptap/tiptap-ui-primitive/spacer/index.tsx +1 -0
  138. package/templates/tiptap/tiptap-ui-primitive/spacer/spacer.tsx +21 -0
  139. package/templates/tiptap/tiptap-ui-primitive/toolbar/index.tsx +1 -0
  140. package/templates/tiptap/tiptap-ui-primitive/toolbar/toolbar.scss +98 -0
  141. package/templates/tiptap/tiptap-ui-primitive/toolbar/toolbar.tsx +113 -0
  142. package/templates/tiptap/tiptap-ui-primitive/tooltip/index.tsx +1 -0
  143. package/templates/tiptap/tiptap-ui-primitive/tooltip/tooltip.scss +43 -0
  144. package/templates/tiptap/tiptap-ui-primitive/tooltip/tooltip.tsx +223 -0
  145. package/templates/ui/accordion.tsx +52 -0
  146. package/templates/ui/alert-dialog.tsx +116 -0
  147. package/templates/ui/alert.tsx +48 -0
  148. package/templates/ui/aspect-ratio.tsx +7 -0
  149. package/templates/ui/avatar.tsx +46 -0
  150. package/templates/ui/badge.tsx +32 -0
  151. package/templates/ui/breadcrumb.tsx +98 -0
  152. package/templates/ui/button-group.tsx +77 -0
  153. package/templates/ui/button.tsx +48 -0
  154. package/templates/ui/calendar.tsx +176 -0
  155. package/templates/ui/card.tsx +54 -0
  156. package/templates/ui/carousel.tsx +234 -0
  157. package/templates/ui/chart.tsx +349 -0
  158. package/templates/ui/checkbox.tsx +27 -0
  159. package/templates/ui/collapsible.tsx +11 -0
  160. package/templates/ui/command.tsx +142 -0
  161. package/templates/ui/context-menu.tsx +188 -0
  162. package/templates/ui/curriculum-editor.tsx +601 -0
  163. package/templates/ui/date-picker.tsx +70 -0
  164. package/templates/ui/dialog.tsx +103 -0
  165. package/templates/ui/drawer.tsx +99 -0
  166. package/templates/ui/dropdown-menu.tsx +185 -0
  167. package/templates/ui/dynamic-list-field.tsx +95 -0
  168. package/templates/ui/empty.tsx +90 -0
  169. package/templates/ui/field.tsx +231 -0
  170. package/templates/ui/file-upload-example.tsx +113 -0
  171. package/templates/ui/form.tsx +172 -0
  172. package/templates/ui/hover-card.tsx +28 -0
  173. package/templates/ui/icon-picker.tsx +435 -0
  174. package/templates/ui/icons-data.ts +6 -0
  175. package/templates/ui/image-upload-field.tsx +360 -0
  176. package/templates/ui/input-group.tsx +160 -0
  177. package/templates/ui/input-otp.tsx +70 -0
  178. package/templates/ui/input.tsx +21 -0
  179. package/templates/ui/item.tsx +171 -0
  180. package/templates/ui/kbd.tsx +28 -0
  181. package/templates/ui/label.tsx +20 -0
  182. package/templates/ui/logo.tsx +113 -0
  183. package/templates/ui/markdown-editor.tsx +303 -0
  184. package/templates/ui/markdown-utils.ts +128 -0
  185. package/templates/ui/media-upload-field.tsx +255 -0
  186. package/templates/ui/menubar.tsx +230 -0
  187. package/templates/ui/navigation-menu.tsx +119 -0
  188. package/templates/ui/pagination.tsx +96 -0
  189. package/templates/ui/placeholder.tsx +25 -0
  190. package/templates/ui/popover.tsx +32 -0
  191. package/templates/ui/progress.tsx +24 -0
  192. package/templates/ui/radio-group.tsx +37 -0
  193. package/templates/ui/resizable.tsx +41 -0
  194. package/templates/ui/rich-text-editor.tsx +374 -0
  195. package/templates/ui/scroll-area.tsx +45 -0
  196. package/templates/ui/select.tsx +151 -0
  197. package/templates/ui/separator.tsx +25 -0
  198. package/templates/ui/sheet.tsx +120 -0
  199. package/templates/ui/sidebar.tsx +684 -0
  200. package/templates/ui/skeleton.tsx +7 -0
  201. package/templates/ui/slider.tsx +24 -0
  202. package/templates/ui/sonner.tsx +29 -0
  203. package/templates/ui/spinner.tsx +15 -0
  204. package/templates/ui/switch.tsx +28 -0
  205. package/templates/ui/table.tsx +93 -0
  206. package/templates/ui/tabs.tsx +54 -0
  207. package/templates/ui/textarea.tsx +20 -0
  208. package/templates/ui/toast.tsx +127 -0
  209. package/templates/ui/toggle-group.tsx +56 -0
  210. package/templates/ui/toggle.tsx +43 -0
  211. package/templates/ui/tooltip.tsx +31 -0
  212. package/templates/ui/use-mobile.tsx +19 -0
  213. package/templates/ui/video-upload-field.tsx +368 -0
  214. package/dist/chunk-EIH4RRIJ.js +0 -183
  215. package/dist/chunk-EIH4RRIJ.js.map +0 -1
  216. package/dist/chunk-NKRQYAS6.js +0 -260
  217. package/dist/chunk-NKRQYAS6.js.map +0 -1
  218. package/dist/chunk-QLVSHP7X.js +0 -235
  219. package/dist/chunk-QLVSHP7X.js.map +0 -1
  220. package/dist/chunk-WY6BC55D.js +0 -357
  221. package/dist/chunk-WY6BC55D.js.map +0 -1
  222. package/dist/config/index.d.ts +0 -93
  223. package/dist/config/index.js +0 -58
  224. package/dist/config/index.js.map +0 -1
  225. package/dist/core/index.d.ts +0 -415
  226. package/dist/core/index.js +0 -906
  227. package/dist/core/index.js.map +0 -1
  228. package/dist/import-resolver-BaZ-rzkH.d.ts +0 -123
  229. package/dist/logger-awLb347n.d.ts +0 -81
  230. package/dist/plugins/index.d.ts +0 -213
  231. package/dist/plugins/index.js +0 -365
  232. package/dist/plugins/index.js.map +0 -1
  233. package/dist/types-ByX_gl6y.d.ts +0 -232
  234. package/dist/types-eI549DEG.d.ts +0 -331
package/templates/tiptap/tiptap-ui-primitive/button/button-colors.scss ADDED
@@ -0,0 +1,429 @@
1
+ .tiptap-button {
2
+ /**************************************************
3
+ Default button background color
4
+ **************************************************/
5
+
6
+ /* Light mode */
7
+ --tt-button-default-bg-color: var(--tt-gray-light-a-100);
8
+ --tt-button-hover-bg-color: var(--tt-gray-light-200);
9
+ --tt-button-active-bg-color: var(--tt-gray-light-a-200);
10
+ --tt-button-active-bg-color-emphasized: var(
11
+ --tt-brand-color-100
12
+ ); //more important active state
13
+ --tt-button-active-bg-color-subdued: var(
14
+ --tt-gray-light-a-200
15
+ ); //less important active state
16
+ --tt-button-active-hover-bg-color: var(--tt-gray-light-300);
17
+ --tt-button-active-hover-bg-color-emphasized: var(
18
+ --tt-brand-color-200
19
+ ); //more important active state hover
20
+ --tt-button-active-hover-bg-color-subdued: var(
21
+ --tt-gray-light-a-300
22
+ ); //less important active state hover
23
+ --tt-button-disabled-bg-color: var(--tt-gray-light-a-50);
24
+
25
+ /* Dark mode */
26
+ .dark & {
27
+ --tt-button-default-bg-color: var(--tt-gray-dark-a-100);
28
+ --tt-button-hover-bg-color: var(--tt-gray-dark-200);
29
+ --tt-button-active-bg-color: var(--tt-gray-dark-a-200);
30
+ --tt-button-active-bg-color-emphasized: var(
31
+ --tt-brand-color-900
32
+ ); //more important active state
33
+ --tt-button-active-bg-color-subdued: var(
34
+ --tt-gray-dark-a-200
35
+ ); //less important active state
36
+ --tt-button-active-hover-bg-color: var(--tt-gray-dark-300);
37
+ --tt-button-active-hover-bg-color-emphasized: var(
38
+ --tt-brand-color-800
39
+ ); //more important active state hover
40
+ --tt-button-active-hover-bg-color-subdued: var(
41
+ --tt-gray-dark-a-300
42
+ ); //less important active state hover
43
+ --tt-button-disabled-bg-color: var(--tt-gray-dark-a-50);
44
+ }
45
+
46
+ /**************************************************
47
+ Default button text color
48
+ **************************************************/
49
+
50
+ /* Light mode */
51
+ --tt-button-default-text-color: var(--tt-gray-light-a-600);
52
+ --tt-button-hover-text-color: var(--tt-gray-light-a-900);
53
+ --tt-button-active-text-color: var(--tt-gray-light-a-900);
54
+ --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
55
+ --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
56
+ --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
57
+
58
+ /* Dark mode */
59
+ .dark & {
60
+ --tt-button-default-text-color: var(--tt-gray-dark-a-600);
61
+ --tt-button-hover-text-color: var(--tt-gray-dark-a-900);
62
+ --tt-button-active-text-color: var(--tt-gray-dark-a-900);
63
+ --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
64
+ --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
65
+ --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
66
+ }
67
+
68
+ /**************************************************
69
+ Default button icon color
70
+ **************************************************/
71
+
72
+ /* Light mode */
73
+ --tt-button-default-icon-color: var(--tt-gray-light-a-600);
74
+ --tt-button-hover-icon-color: var(--tt-gray-light-a-900);
75
+ --tt-button-active-icon-color: var(--tt-brand-color-500);
76
+ --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
77
+ --tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);
78
+ --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
79
+
80
+ /* Dark mode */
81
+ .dark & {
82
+ --tt-button-default-icon-color: var(--tt-gray-dark-a-600);
83
+ --tt-button-hover-icon-color: var(--tt-gray-dark-a-900);
84
+ --tt-button-active-icon-color: var(--tt-brand-color-400);
85
+ --tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);
86
+ --tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);
87
+ --tt-button-disabled-icon-color: var(--tt-gray-dark-a-400);
88
+ }
89
+
90
+ /**************************************************
91
+ Default button subicon color
92
+ **************************************************/
93
+
94
+ /* Light mode */
95
+ --tt-button-default-icon-sub-color: var(--tt-gray-light-a-400);
96
+ --tt-button-hover-icon-sub-color: var(--tt-gray-light-a-500);
97
+ --tt-button-active-icon-sub-color: var(--tt-gray-light-a-400);
98
+ --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
99
+ --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-400);
100
+ --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
101
+
102
+ /* Dark mode */
103
+ .dark & {
104
+ --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-300);
105
+ --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-400);
106
+ --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
107
+ --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
108
+ --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
109
+ --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
110
+ }
111
+
112
+ /**************************************************
113
+ Default button dropdown / arrows color
114
+ **************************************************/
115
+
116
+ /* Light mode */
117
+ --tt-button-default-dropdown-arrows-color: var(--tt-gray-light-a-600);
118
+ --tt-button-hover-dropdown-arrows-color: var(--tt-gray-light-a-700);
119
+ --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-600);
120
+ --tt-button-active-dropdown-arrows-color-emphasized: var(
121
+ --tt-gray-light-a-700
122
+ );
123
+ --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-light-a-600);
124
+ --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
125
+
126
+ /* Dark mode */
127
+ .dark & {
128
+ --tt-button-default-dropdown-arrows-color: var(--tt-gray-dark-a-600);
129
+ --tt-button-hover-dropdown-arrows-color: var(--tt-gray-dark-a-700);
130
+ --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
131
+ --tt-button-active-dropdown-arrows-color-emphasized: var(
132
+ --tt-gray-dark-a-700
133
+ );
134
+ --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-dark-a-600);
135
+ --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
136
+ }
137
+
138
+ /* ----------------------------------------------------------------
139
+ --------------------------- GHOST BUTTON --------------------------
140
+ ---------------------------------------------------------------- */
141
+
142
+ &[data-style="ghost"] {
143
+ /**************************************************
144
+ Ghost button background color
145
+ **************************************************/
146
+
147
+ /* Light mode */
148
+ --tt-button-default-bg-color: var(--transparent);
149
+ --tt-button-hover-bg-color: var(--tt-gray-light-200);
150
+ --tt-button-active-bg-color: var(--tt-gray-light-a-100);
151
+ --tt-button-active-bg-color-emphasized: var(
152
+ --tt-brand-color-100
153
+ ); //more important active state
154
+ --tt-button-active-bg-color-subdued: var(
155
+ --tt-gray-light-a-100
156
+ ); //less important active state
157
+ --tt-button-active-hover-bg-color: var(--tt-gray-light-200);
158
+ --tt-button-active-hover-bg-color-emphasized: var(
159
+ --tt-brand-color-200
160
+ ); //more important active state hover
161
+ --tt-button-active-hover-bg-color-subdued: var(
162
+ --tt-gray-light-a-200
163
+ ); //less important active state hover
164
+ --tt-button-disabled-bg-color: var(--transparent);
165
+
166
+ /* Dark mode */
167
+ .dark & {
168
+ --tt-button-default-bg-color: var(--transparent);
169
+ --tt-button-hover-bg-color: var(--tt-gray-dark-200);
170
+ --tt-button-active-bg-color: var(--tt-gray-dark-a-100);
171
+ --tt-button-active-bg-color-emphasized: var(
172
+ --tt-brand-color-900
173
+ ); //more important active state
174
+ --tt-button-active-bg-color-subdued: var(
175
+ --tt-gray-dark-a-100
176
+ ); //less important active state
177
+ --tt-button-active-hover-bg-color: var(--tt-gray-dark-200);
178
+ --tt-button-active-hover-bg-color-emphasized: var(
179
+ --tt-brand-color-800
180
+ ); //more important active state hover
181
+ --tt-button-active-hover-bg-color-subdued: var(
182
+ --tt-gray-dark-a-200
183
+ ); //less important active state hover
184
+ --tt-button-disabled-bg-color: var(--transparent);
185
+ }
186
+
187
+ /**************************************************
188
+ Ghost button text color
189
+ **************************************************/
190
+
191
+ /* Light mode */
192
+ --tt-button-default-text-color: var(--tt-gray-light-a-600);
193
+ --tt-button-hover-text-color: var(--tt-gray-light-a-900);
194
+ --tt-button-active-text-color: var(--tt-gray-light-a-900);
195
+ --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
196
+ --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
197
+ --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
198
+
199
+ /* Dark mode */
200
+ .dark & {
201
+ --tt-button-default-text-color: var(--tt-gray-dark-a-600);
202
+ --tt-button-hover-text-color: var(--tt-gray-dark-a-900);
203
+ --tt-button-active-text-color: var(--tt-gray-dark-a-900);
204
+ --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
205
+ --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
206
+ --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
207
+ }
208
+
209
+ /**************************************************
210
+ Ghost button icon color
211
+ **************************************************/
212
+
213
+ /* Light mode */
214
+ --tt-button-default-icon-color: var(--tt-gray-light-a-600);
215
+ --tt-button-hover-icon-color: var(--tt-gray-light-a-900);
216
+ --tt-button-active-icon-color: var(--tt-brand-color-500);
217
+ --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
218
+ --tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);
219
+ --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
220
+
221
+ /* Dark mode */
222
+ .dark & {
223
+ --tt-button-default-icon-color: var(--tt-gray-dark-a-600);
224
+ --tt-button-hover-icon-color: var(--tt-gray-dark-a-900);
225
+ --tt-button-active-icon-color: var(--tt-brand-color-400);
226
+ --tt-button-active-icon-color-emphasized: var(--tt-brand-color-300);
227
+ --tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);
228
+ --tt-button-disabled-icon-color: var(--tt-gray-dark-a-400);
229
+ }
230
+
231
+ /**************************************************
232
+ Ghost button subicon color
233
+ **************************************************/
234
+
235
+ /* Light mode */
236
+ --tt-button-default-icon-sub-color: var(--tt-gray-light-a-400);
237
+ --tt-button-hover-icon-sub-color: var(--tt-gray-light-a-500);
238
+ --tt-button-active-icon-sub-color: var(--tt-gray-light-a-400);
239
+ --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
240
+ --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-400);
241
+ --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
242
+
243
+ /* Dark mode */
244
+ .dark & {
245
+ --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-300);
246
+ --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-400);
247
+ --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
248
+ --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
249
+ --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
250
+ --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
251
+ }
252
+
253
+ /**************************************************
254
+ Ghost button dropdown / arrows color
255
+ **************************************************/
256
+
257
+ /* Light mode */
258
+ --tt-button-default-dropdown-arrows-color: var(--tt-gray-light-a-600);
259
+ --tt-button-hover-dropdown-arrows-color: var(--tt-gray-light-a-700);
260
+ --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-600);
261
+ --tt-button-active-dropdown-arrows-color-emphasized: var(
262
+ --tt-gray-light-a-700
263
+ );
264
+ --tt-button-active-dropdown-arrows-color-subdued: var(
265
+ --tt-gray-light-a-600
266
+ );
267
+ --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
268
+
269
+ /* Dark mode */
270
+ .dark & {
271
+ --tt-button-default-dropdown-arrows-color: var(--tt-gray-dark-a-600);
272
+ --tt-button-hover-dropdown-arrows-color: var(--tt-gray-dark-a-700);
273
+ --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
274
+ --tt-button-active-dropdown-arrows-color-emphasized: var(
275
+ --tt-gray-dark-a-700
276
+ );
277
+ --tt-button-active-dropdown-arrows-color-subdued: var(
278
+ --tt-gray-dark-a-600
279
+ );
280
+ --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
281
+ }
282
+ }
283
+
284
+ /* ----------------------------------------------------------------
285
+ -------------------------- PRIMARY BUTTON -------------------------
286
+ ---------------------------------------------------------------- */
287
+
288
+ &[data-style="primary"] {
289
+ /**************************************************
290
+ Primary button background color
291
+ **************************************************/
292
+
293
+ /* Light mode */
294
+ --tt-button-default-bg-color: var(--tt-brand-color-500);
295
+ --tt-button-hover-bg-color: var(--tt-brand-color-600);
296
+ --tt-button-active-bg-color: var(--tt-brand-color-100);
297
+ --tt-button-active-bg-color-emphasized: var(
298
+ --tt-brand-color-100
299
+ ); //more important active state
300
+ --tt-button-active-bg-color-subdued: var(
301
+ --tt-brand-color-100
302
+ ); //less important active state
303
+ --tt-button-active-hover-bg-color: var(--tt-brand-color-200);
304
+ --tt-button-active-hover-bg-color-emphasized: var(
305
+ --tt-brand-color-200
306
+ ); //more important active state hover
307
+ --tt-button-active-hover-bg-color-subdued: var(
308
+ --tt-brand-color-200
309
+ ); //less important active state hover
310
+ --tt-button-disabled-bg-color: var(--tt-gray-light-a-100);
311
+
312
+ /* Dark mode */
313
+ .dark & {
314
+ --tt-button-default-bg-color: var(--tt-brand-color-500);
315
+ --tt-button-hover-bg-color: var(--tt-brand-color-600);
316
+ --tt-button-active-bg-color: var(--tt-brand-color-900);
317
+ --tt-button-active-bg-color-emphasized: var(
318
+ --tt-brand-color-900
319
+ ); //more important active state
320
+ --tt-button-active-bg-color-subdued: var(
321
+ --tt-brand-color-900
322
+ ); //less important active state
323
+ --tt-button-active-hover-bg-color: var(--tt-brand-color-800);
324
+ --tt-button-active-hover-bg-color-emphasized: var(
325
+ --tt-brand-color-800
326
+ ); //more important active state hover
327
+ --tt-button-active-hover-bg-color-subdued: var(
328
+ --tt-brand-color-800
329
+ ); //less important active state hover
330
+ --tt-button-disabled-bg-color: var(--tt-gray-dark-a-100);
331
+ }
332
+
333
+ /**************************************************
334
+ Primary button text color
335
+ **************************************************/
336
+
337
+ /* Light mode */
338
+ --tt-button-default-text-color: var(--white);
339
+ --tt-button-hover-text-color: var(--white);
340
+ --tt-button-active-text-color: var(--tt-gray-light-a-900);
341
+ --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
342
+ --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
343
+ --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
344
+
345
+ /* Dark mode */
346
+ .dark & {
347
+ --tt-button-default-text-color: var(--white);
348
+ --tt-button-hover-text-color: var(--white);
349
+ --tt-button-active-text-color: var(--tt-gray-dark-a-900);
350
+ --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
351
+ --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
352
+ --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
353
+ }
354
+
355
+ /**************************************************
356
+ Primary button icon color
357
+ **************************************************/
358
+
359
+ /* Light mode */
360
+ --tt-button-default-icon-color: var(--white);
361
+ --tt-button-hover-icon-color: var(--white);
362
+ --tt-button-active-icon-color: var(--tt-brand-color-600);
363
+ --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
364
+ --tt-button-active-icon-color-subdued: var(--tt-brand-color-600);
365
+ --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
366
+
367
+ /* Dark mode */
368
+ .dark & {
369
+ --tt-button-default-icon-color: var(--white);
370
+ --tt-button-hover-icon-color: var(--white);
371
+ --tt-button-active-icon-color: var(--tt-brand-color-400);
372
+ --tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);
373
+ --tt-button-active-icon-color-subdued: var(--tt-brand-color-400);
374
+ --tt-button-disabled-icon-color: var(--tt-gray-dark-a-300);
375
+ }
376
+
377
+ /**************************************************
378
+ Primary button subicon color
379
+ **************************************************/
380
+
381
+ /* Light mode */
382
+ --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-500);
383
+ --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-500);
384
+ --tt-button-active-icon-sub-color: var(--tt-gray-light-a-500);
385
+ --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
386
+ --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-500);
387
+ --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
388
+
389
+ /* Dark mode */
390
+ .dark & {
391
+ --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-400);
392
+ --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-500);
393
+ --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
394
+ --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
395
+ --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
396
+ --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
397
+ }
398
+
399
+ /**************************************************
400
+ Primary button dropdown / arrows color
401
+ **************************************************/
402
+
403
+ /* Light mode */
404
+ --tt-button-default-dropdown-arrows-color: var(--white);
405
+ --tt-button-hover-dropdown-arrows-color: var(--white);
406
+ --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-700);
407
+ --tt-button-active-dropdown-arrows-color-emphasized: var(
408
+ --tt-gray-light-a-700
409
+ );
410
+ --tt-button-active-dropdown-arrows-color-subdued: var(
411
+ --tt-gray-light-a-700
412
+ );
413
+ --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
414
+
415
+ /* Dark mode */
416
+ .dark & {
417
+ --tt-button-default-dropdown-arrows-color: var(--white);
418
+ --tt-button-hover-dropdown-arrows-color: var(--white);
419
+ --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
420
+ --tt-button-active-dropdown-arrows-color-emphasized: var(
421
+ --tt-gray-dark-a-600
422
+ );
423
+ --tt-button-active-dropdown-arrows-color-subdued: var(
424
+ --tt-gray-dark-a-600
425
+ );
426
+ --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
427
+ }
428
+ }
429
+ }
package/templates/tiptap/tiptap-ui-primitive/button/button-group.scss ADDED
@@ -0,0 +1,22 @@
1
+ .tiptap-button-group {
2
+ position: relative;
3
+ display: flex;
4
+ vertical-align: middle;
5
+
6
+ &[data-orientation="vertical"] {
7
+ flex-direction: column;
8
+ align-items: flex-start;
9
+ justify-content: center;
10
+ min-width: max-content;
11
+
12
+ > .tiptap-button {
13
+ width: 100%;
14
+ }
15
+ }
16
+
17
+ &[data-orientation="horizontal"] {
18
+ gap: 0.125rem;
19
+ flex-direction: row;
20
+ align-items: center;
21
+ }
22
+ }