torch-glare 2.5.6 → 2.6.0

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 (362) hide show
  1. package/README.md +4 -3
  2. package/dist/bin/index.js +9 -24
  3. package/dist/bin/index.js.map +1 -1
  4. package/dist/src/commands/add.d.ts +2 -2
  5. package/dist/src/commands/add.d.ts.map +1 -1
  6. package/dist/src/commands/add.js +4 -70
  7. package/dist/src/commands/add.js.map +1 -1
  8. package/dist/src/commands/hook.d.ts +5 -4
  9. package/dist/src/commands/hook.d.ts.map +1 -1
  10. package/dist/src/commands/hook.js +7 -75
  11. package/dist/src/commands/hook.js.map +1 -1
  12. package/dist/src/commands/init.js +1 -1
  13. package/dist/src/commands/init.js.map +1 -1
  14. package/dist/src/commands/layout.d.ts +5 -4
  15. package/dist/src/commands/layout.d.ts.map +1 -1
  16. package/dist/src/commands/layout.js +7 -75
  17. package/dist/src/commands/layout.js.map +1 -1
  18. package/dist/src/commands/provider.d.ts +5 -4
  19. package/dist/src/commands/provider.d.ts.map +1 -1
  20. package/dist/src/commands/provider.js +7 -75
  21. package/dist/src/commands/provider.js.map +1 -1
  22. package/dist/src/commands/update.d.ts.map +1 -1
  23. package/dist/src/commands/update.js +78 -43
  24. package/dist/src/commands/update.js.map +1 -1
  25. package/dist/src/commands/utils.d.ts +5 -4
  26. package/dist/src/commands/utils.d.ts.map +1 -1
  27. package/dist/src/commands/utils.js +7 -80
  28. package/dist/src/commands/utils.js.map +1 -1
  29. package/dist/src/shared/addFromRegistry.d.ts +16 -0
  30. package/dist/src/shared/addFromRegistry.d.ts.map +1 -0
  31. package/dist/src/shared/addFromRegistry.js +88 -0
  32. package/dist/src/shared/addFromRegistry.js.map +1 -0
  33. package/dist/src/shared/getInstallCommand.d.ts.map +1 -1
  34. package/dist/src/shared/getInstallCommand.js +5 -0
  35. package/dist/src/shared/getInstallCommand.js.map +1 -1
  36. package/dist/src/shared/installDependencies.d.ts +0 -10
  37. package/dist/src/shared/installDependencies.d.ts.map +1 -1
  38. package/dist/src/shared/installDependencies.js +0 -17
  39. package/dist/src/shared/installDependencies.js.map +1 -1
  40. package/dist/src/shared/installFromPlan.d.ts +7 -5
  41. package/dist/src/shared/installFromPlan.d.ts.map +1 -1
  42. package/dist/src/shared/installFromPlan.js +103 -36
  43. package/dist/src/shared/installFromPlan.js.map +1 -1
  44. package/dist/src/shared/loadRegistry.d.ts +12 -3
  45. package/dist/src/shared/loadRegistry.d.ts.map +1 -1
  46. package/dist/src/shared/loadRegistry.js +19 -20
  47. package/dist/src/shared/loadRegistry.js.map +1 -1
  48. package/dist/src/shared/registryClient.d.ts +19 -0
  49. package/dist/src/shared/registryClient.d.ts.map +1 -0
  50. package/dist/src/shared/registryClient.js +128 -0
  51. package/dist/src/shared/registryClient.js.map +1 -0
  52. package/dist/src/shared/resolveEntry.d.ts +10 -7
  53. package/dist/src/shared/resolveEntry.d.ts.map +1 -1
  54. package/dist/src/shared/resolveEntry.js +18 -13
  55. package/dist/src/shared/resolveEntry.js.map +1 -1
  56. package/dist/src/shared/suggestOtherCommand.d.ts +7 -1
  57. package/dist/src/shared/suggestOtherCommand.d.ts.map +1 -1
  58. package/dist/src/shared/suggestOtherCommand.js +29 -23
  59. package/dist/src/shared/suggestOtherCommand.js.map +1 -1
  60. package/dist/src/types/main.d.ts +31 -2
  61. package/dist/src/types/main.d.ts.map +1 -1
  62. package/package.json +6 -11
  63. package/apps/lib/components/ActionButton.tsx +0 -93
  64. package/apps/lib/components/ActionsGroup.tsx +0 -27
  65. package/apps/lib/components/AlertDialog.tsx +0 -204
  66. package/apps/lib/components/Avatar.tsx +0 -46
  67. package/apps/lib/components/Badge.tsx +0 -250
  68. package/apps/lib/components/BadgeField.tsx +0 -403
  69. package/apps/lib/components/Breadcrumb.tsx +0 -280
  70. package/apps/lib/components/Button.tsx +0 -325
  71. package/apps/lib/components/ButtonGroup.tsx +0 -190
  72. package/apps/lib/components/Calendar.tsx +0 -115
  73. package/apps/lib/components/Card.tsx +0 -95
  74. package/apps/lib/components/Checkbox.tsx +0 -42
  75. package/apps/lib/components/ColorPicker.tsx +0 -441
  76. package/apps/lib/components/ConclusionHeader.tsx +0 -148
  77. package/apps/lib/components/ContextMenu.tsx +0 -571
  78. package/apps/lib/components/CountBadge.tsx +0 -52
  79. package/apps/lib/components/DataTable.tsx +0 -213
  80. package/apps/lib/components/DataViews/badge.ts +0 -49
  81. package/apps/lib/components/DataViews/cell.tsx +0 -324
  82. package/apps/lib/components/DataViews/context.ts +0 -144
  83. package/apps/lib/components/DataViews/data-views.tsx +0 -395
  84. package/apps/lib/components/DataViews/filters/children.tsx +0 -98
  85. package/apps/lib/components/DataViews/filters/custom.tsx +0 -34
  86. package/apps/lib/components/DataViews/filters/filters.tsx +0 -157
  87. package/apps/lib/components/DataViews/filters/index.ts +0 -4
  88. package/apps/lib/components/DataViews/filters/labelled.tsx +0 -20
  89. package/apps/lib/components/DataViews/filters/presets.tsx +0 -65
  90. package/apps/lib/components/DataViews/filters/sync.tsx +0 -35
  91. package/apps/lib/components/DataViews/filters/values.ts +0 -173
  92. package/apps/lib/components/DataViews/header.tsx +0 -220
  93. package/apps/lib/components/DataViews/hooks/index.ts +0 -5
  94. package/apps/lib/components/DataViews/hooks/useActiveRow.ts +0 -22
  95. package/apps/lib/components/DataViews/hooks/useControllable.ts +0 -52
  96. package/apps/lib/components/DataViews/index.ts +0 -88
  97. package/apps/lib/components/DataViews/panel/columns.tsx +0 -153
  98. package/apps/lib/components/DataViews/panel/controls.tsx +0 -106
  99. package/apps/lib/components/DataViews/panel/index.ts +0 -3
  100. package/apps/lib/components/DataViews/panel/panel.tsx +0 -164
  101. package/apps/lib/components/DataViews/panel/saved-views.tsx +0 -67
  102. package/apps/lib/components/DataViews/panel/section.tsx +0 -81
  103. package/apps/lib/components/DataViews/panel/sort.tsx +0 -42
  104. package/apps/lib/components/DataViews/panel/tab.tsx +0 -31
  105. package/apps/lib/components/DataViews/slots.ts +0 -72
  106. package/apps/lib/components/DataViews/states.tsx +0 -73
  107. package/apps/lib/components/DataViews/types.ts +0 -510
  108. package/apps/lib/components/DataViews/views/board-view.tsx +0 -381
  109. package/apps/lib/components/DataViews/views/card-rows.tsx +0 -36
  110. package/apps/lib/components/DataViews/views/inbox-view.tsx +0 -260
  111. package/apps/lib/components/DataViews/views/pane-views.tsx +0 -196
  112. package/apps/lib/components/DataViews/views/table-view.tsx +0 -493
  113. package/apps/lib/components/DataViews/views/tree-view.tsx +0 -367
  114. package/apps/lib/components/DatePicker.tsx +0 -232
  115. package/apps/lib/components/Dialog.tsx +0 -116
  116. package/apps/lib/components/Divider.tsx +0 -28
  117. package/apps/lib/components/Drawer.tsx +0 -451
  118. package/apps/lib/components/DropdownMenu.tsx +0 -554
  119. package/apps/lib/components/FieldHint.tsx +0 -69
  120. package/apps/lib/components/Form.tsx +0 -182
  121. package/apps/lib/components/FormBuilder/context.ts +0 -85
  122. package/apps/lib/components/FormBuilder/field-kind.ts +0 -28
  123. package/apps/lib/components/FormBuilder/fields/ChoiceFields.tsx +0 -60
  124. package/apps/lib/components/FormBuilder/fields/ColorField.tsx +0 -59
  125. package/apps/lib/components/FormBuilder/fields/CustomField.tsx +0 -11
  126. package/apps/lib/components/FormBuilder/fields/DateField.tsx +0 -32
  127. package/apps/lib/components/FormBuilder/fields/FieldArray.tsx +0 -74
  128. package/apps/lib/components/FormBuilder/fields/FieldShell.tsx +0 -168
  129. package/apps/lib/components/FormBuilder/fields/FileField.tsx +0 -39
  130. package/apps/lib/components/FormBuilder/fields/OptionListFields.tsx +0 -132
  131. package/apps/lib/components/FormBuilder/fields/OtpField.tsx +0 -31
  132. package/apps/lib/components/FormBuilder/fields/PhoneField.tsx +0 -109
  133. package/apps/lib/components/FormBuilder/fields/RichTextEditorField.tsx +0 -31
  134. package/apps/lib/components/FormBuilder/fields/SelectField.tsx +0 -114
  135. package/apps/lib/components/FormBuilder/fields/SignatureField.tsx +0 -157
  136. package/apps/lib/components/FormBuilder/fields/SliderField.tsx +0 -67
  137. package/apps/lib/components/FormBuilder/fields/SwitchBoxField.tsx +0 -41
  138. package/apps/lib/components/FormBuilder/fields/TableField.tsx +0 -336
  139. package/apps/lib/components/FormBuilder/fields/TextField.tsx +0 -213
  140. package/apps/lib/components/FormBuilder/fields/TreeSelectField.tsx +0 -43
  141. package/apps/lib/components/FormBuilder/fields/countries.ts +0 -303
  142. package/apps/lib/components/FormBuilder/fields/index.ts +0 -25
  143. package/apps/lib/components/FormBuilder/form-builder.tsx +0 -198
  144. package/apps/lib/components/FormBuilder/index.ts +0 -31
  145. package/apps/lib/components/FormBuilder/numberFormat.ts +0 -16
  146. package/apps/lib/components/FormBuilder/submit.tsx +0 -67
  147. package/apps/lib/components/FormBuilder/types.ts +0 -316
  148. package/apps/lib/components/FormRenderer/FormDrawer.tsx +0 -250
  149. package/apps/lib/components/FormRenderer/detail.tsx +0 -256
  150. package/apps/lib/components/FormRenderer/form-renderer.tsx +0 -358
  151. package/apps/lib/components/FormRenderer/header.tsx +0 -88
  152. package/apps/lib/components/FormRenderer/index.ts +0 -17
  153. package/apps/lib/components/FormRenderer/notch-action.tsx +0 -64
  154. package/apps/lib/components/FormRenderer/section.tsx +0 -39
  155. package/apps/lib/components/FormRenderer/stepper.tsx +0 -393
  156. package/apps/lib/components/FormRenderer/types.ts +0 -115
  157. package/apps/lib/components/FormSummary.tsx +0 -282
  158. package/apps/lib/components/HeaderBar.tsx +0 -117
  159. package/apps/lib/components/ImageAttachment.tsx +0 -209
  160. package/apps/lib/components/InnerLabelField.tsx +0 -154
  161. package/apps/lib/components/Input.tsx +0 -224
  162. package/apps/lib/components/InputField.tsx +0 -147
  163. package/apps/lib/components/InputOTP.tsx +0 -84
  164. package/apps/lib/components/Label.tsx +0 -129
  165. package/apps/lib/components/LabelField.tsx +0 -76
  166. package/apps/lib/components/LabeledCheckBox.tsx +0 -51
  167. package/apps/lib/components/LabeledRadio.tsx +0 -51
  168. package/apps/lib/components/LinkButton.tsx +0 -94
  169. package/apps/lib/components/LoginButton.tsx +0 -51
  170. package/apps/lib/components/PasswordLevel.tsx +0 -58
  171. package/apps/lib/components/Popover.tsx +0 -312
  172. package/apps/lib/components/ProfileMenu.tsx +0 -85
  173. package/apps/lib/components/Radio.tsx +0 -59
  174. package/apps/lib/components/RadioCard.tsx +0 -50
  175. package/apps/lib/components/ScrollArea.tsx +0 -54
  176. package/apps/lib/components/SearchField.tsx +0 -62
  177. package/apps/lib/components/SearchableSelect.tsx +0 -318
  178. package/apps/lib/components/SearchableTable.tsx +0 -344
  179. package/apps/lib/components/SearchableTree.tsx +0 -485
  180. package/apps/lib/components/SearchableTreeDialog.tsx +0 -502
  181. package/apps/lib/components/SectionBlock.tsx +0 -168
  182. package/apps/lib/components/Select.tsx +0 -347
  183. package/apps/lib/components/SimpleSelect.tsx +0 -225
  184. package/apps/lib/components/Skeleton.tsx +0 -12
  185. package/apps/lib/components/SlideDatePicker.tsx +0 -255
  186. package/apps/lib/components/SpinLoading.tsx +0 -174
  187. package/apps/lib/components/Stepper.tsx +0 -480
  188. package/apps/lib/components/Switch.tsx +0 -82
  189. package/apps/lib/components/TabFormItem.tsx +0 -153
  190. package/apps/lib/components/TabSwitch.tsx +0 -172
  191. package/apps/lib/components/Table.tsx +0 -597
  192. package/apps/lib/components/TextEditor/ChartBlockTool.ts +0 -676
  193. package/apps/lib/components/TextEditor/RichTextField.tsx +0 -46
  194. package/apps/lib/components/TextEditor/TableDnDWrapper.ts +0 -462
  195. package/apps/lib/components/TextEditor/TextEditor.tsx +0 -1164
  196. package/apps/lib/components/TextEditor/TextEditorToolbar.tsx +0 -429
  197. package/apps/lib/components/TextEditor/editor-tools/AlignmentTune.ts +0 -70
  198. package/apps/lib/components/TextEditor/editor-tools/ColorInlineTool.ts +0 -50
  199. package/apps/lib/components/TextEditor/editor-tools/StrikethroughInlineTool.ts +0 -48
  200. package/apps/lib/components/TextEditor/editor-tools/inlineFormat.ts +0 -98
  201. package/apps/lib/components/TextEditor/editorjs.d.ts +0 -60
  202. package/apps/lib/components/TextEditor/index.ts +0 -7
  203. package/apps/lib/components/TextEditor/markdownParser.ts +0 -346
  204. package/apps/lib/components/Textarea.tsx +0 -117
  205. package/apps/lib/components/Timeline.tsx +0 -263
  206. package/apps/lib/components/Toast.tsx +0 -87
  207. package/apps/lib/components/Toggle.tsx +0 -125
  208. package/apps/lib/components/ToggleButton.tsx +0 -140
  209. package/apps/lib/components/Tooltip.tsx +0 -116
  210. package/apps/lib/components/TransparentLabel.tsx +0 -71
  211. package/apps/lib/components/TreeDropDown.tsx +0 -115
  212. package/apps/lib/components/TreeFolder/TreeFolder.tsx +0 -380
  213. package/apps/lib/components/TreeFolder/TreeFolderBreadcrumb.tsx +0 -75
  214. package/apps/lib/components/TreeFolder/TreeFolderRow.tsx +0 -354
  215. package/apps/lib/components/TreeFolder/TreeFolderStyles.tsx +0 -60
  216. package/apps/lib/components/TreeFolder/icons.tsx +0 -60
  217. package/apps/lib/components/TreeFolder/index.ts +0 -24
  218. package/apps/lib/components/TreeFolder/treeFolderUtils.ts +0 -109
  219. package/apps/lib/components/TreeFolder/types.ts +0 -77
  220. package/apps/lib/components/TreeFolder/useTreeFolderDnD.ts +0 -118
  221. package/apps/lib/hooks/useActiveTreeItem.ts +0 -61
  222. package/apps/lib/hooks/useClickOutside.ts +0 -27
  223. package/apps/lib/hooks/useDragDrop.tsx +0 -365
  224. package/apps/lib/hooks/useHtmlDir.ts +0 -31
  225. package/apps/lib/hooks/useInfiniteScroll.ts +0 -108
  226. package/apps/lib/hooks/useIsMobile.ts +0 -21
  227. package/apps/lib/hooks/useResize.ts +0 -67
  228. package/apps/lib/hooks/useTagSelection.ts +0 -300
  229. package/apps/lib/layouts/CNLayout.tsx +0 -372
  230. package/apps/lib/layouts/DataViewCard.tsx +0 -62
  231. package/apps/lib/layouts/FieldSection.tsx +0 -91
  232. package/apps/lib/layouts/TreeSubLayout.tsx +0 -173
  233. package/apps/lib/providers/ThemeProvider.tsx +0 -84
  234. package/apps/lib/registry.json +0 -1217
  235. package/apps/lib/tsconfig.json +0 -9
  236. package/apps/lib/tsconfig.tsbuildinfo +0 -1
  237. package/apps/lib/utils/cn.ts +0 -6
  238. package/apps/lib/utils/color.ts +0 -175
  239. package/apps/lib/utils/dataViews/path.ts +0 -67
  240. package/apps/lib/utils/dataViews/query.ts +0 -73
  241. package/apps/lib/utils/dataViews/types.ts +0 -187
  242. package/apps/lib/utils/dateFormat.ts +0 -108
  243. package/apps/lib/utils/resize.ts +0 -31
  244. package/apps/lib/utils/scroller.ts +0 -26
  245. package/apps/lib/utils/types.ts +0 -16
  246. package/docs/BLOCKS.md +0 -129
  247. package/docs/CHANGELOG-1.1.16.md +0 -108
  248. package/docs/Cover.png +0 -0
  249. package/docs/README.md +0 -215
  250. package/docs/components/action-button.md +0 -638
  251. package/docs/components/actions-group.md +0 -708
  252. package/docs/components/alert-dialog.md +0 -920
  253. package/docs/components/avatar.md +0 -709
  254. package/docs/components/badge-field.md +0 -738
  255. package/docs/components/badge.md +0 -301
  256. package/docs/components/breadcrumb.md +0 -930
  257. package/docs/components/button-group.md +0 -650
  258. package/docs/components/button.md +0 -639
  259. package/docs/components/calendar.md +0 -555
  260. package/docs/components/card.md +0 -622
  261. package/docs/components/chart-block-tool.md +0 -129
  262. package/docs/components/checkbox.md +0 -699
  263. package/docs/components/cn-layout.md +0 -854
  264. package/docs/components/color-picker.md +0 -101
  265. package/docs/components/conclusion-header.md +0 -80
  266. package/docs/components/context-menu.md +0 -483
  267. package/docs/components/count-badge.md +0 -560
  268. package/docs/components/data-table.md +0 -854
  269. package/docs/components/data-views/backend-response.md +0 -324
  270. package/docs/components/data-views/examples/a11y-rtl.md +0 -250
  271. package/docs/components/data-views/examples/api-orders-route.md +0 -130
  272. package/docs/components/data-views/examples/fields.md +0 -362
  273. package/docs/components/data-views/examples/filters.md +0 -307
  274. package/docs/components/data-views/examples/inbox-routing.md +0 -218
  275. package/docs/components/data-views/examples/index.md +0 -29
  276. package/docs/components/data-views/examples/overview.md +0 -244
  277. package/docs/components/data-views/examples/panel.md +0 -212
  278. package/docs/components/data-views/examples/scale.md +0 -231
  279. package/docs/components/data-views/examples/server-side.md +0 -210
  280. package/docs/components/data-views/examples/state.md +0 -250
  281. package/docs/components/data-views/examples/tree-custom.md +0 -388
  282. package/docs/components/data-views/examples/view-registry.md +0 -313
  283. package/docs/components/data-views/examples/views.md +0 -534
  284. package/docs/components/data-views/guide.md +0 -405
  285. package/docs/components/data-views/index.md +0 -1521
  286. package/docs/components/data-views/migration.md +0 -81
  287. package/docs/components/date-picker.md +0 -857
  288. package/docs/components/dialog.md +0 -929
  289. package/docs/components/divider.md +0 -766
  290. package/docs/components/drawer.md +0 -654
  291. package/docs/components/dropdown-menu.md +0 -668
  292. package/docs/components/field-hint.md +0 -898
  293. package/docs/components/field-section.md +0 -781
  294. package/docs/components/form-builder.md +0 -284
  295. package/docs/components/form-renderer.md +0 -396
  296. package/docs/components/form-summary.md +0 -138
  297. package/docs/components/form.md +0 -785
  298. package/docs/components/header-bar.md +0 -188
  299. package/docs/components/image-attachment.md +0 -906
  300. package/docs/components/inner-label-field.md +0 -819
  301. package/docs/components/input-field.md +0 -623
  302. package/docs/components/input-otp.md +0 -756
  303. package/docs/components/input.md +0 -634
  304. package/docs/components/label-field.md +0 -770
  305. package/docs/components/label.md +0 -761
  306. package/docs/components/labeled-check-box.md +0 -642
  307. package/docs/components/labeled-radio.md +0 -796
  308. package/docs/components/link-button.md +0 -685
  309. package/docs/components/login-button.md +0 -872
  310. package/docs/components/password-level.md +0 -803
  311. package/docs/components/popover.md +0 -649
  312. package/docs/components/profile-menu.md +0 -656
  313. package/docs/components/radio-card.md +0 -801
  314. package/docs/components/radio.md +0 -735
  315. package/docs/components/scroll-area.md +0 -691
  316. package/docs/components/search-field.md +0 -702
  317. package/docs/components/searchable-select.md +0 -368
  318. package/docs/components/searchable-table.md +0 -438
  319. package/docs/components/searchable-tree-dialog.md +0 -190
  320. package/docs/components/searchable-tree.md +0 -200
  321. package/docs/components/section-block.md +0 -483
  322. package/docs/components/select.md +0 -709
  323. package/docs/components/simple-select.md +0 -741
  324. package/docs/components/skeleton.md +0 -706
  325. package/docs/components/slide-date-picker.md +0 -837
  326. package/docs/components/spin-loading.md +0 -696
  327. package/docs/components/stepper.md +0 -316
  328. package/docs/components/switch.md +0 -770
  329. package/docs/components/tab-form-item.md +0 -773
  330. package/docs/components/tab-switch.md +0 -170
  331. package/docs/components/table-dnd-wrapper.md +0 -107
  332. package/docs/components/table.md +0 -1088
  333. package/docs/components/text-editor.md +0 -735
  334. package/docs/components/textarea.md +0 -681
  335. package/docs/components/timeline.md +0 -254
  336. package/docs/components/toast.md +0 -773
  337. package/docs/components/toggle-button.md +0 -643
  338. package/docs/components/toggle.md +0 -882
  339. package/docs/components/tooltip.md +0 -513
  340. package/docs/components/transparent-label.md +0 -721
  341. package/docs/components/tree-drop-down.md +0 -740
  342. package/docs/components/tree-folder.md +0 -110
  343. package/docs/components/tree-sub-layout.md +0 -707
  344. package/docs/explanation/architecture.md +0 -54
  345. package/docs/explanation/design-system.md +0 -52
  346. package/docs/how-to/form-and-list-recipes.md +0 -386
  347. package/docs/how-to/forms-with-form-builder.md +0 -472
  348. package/docs/how-to/guides.md +0 -1027
  349. package/docs/migration/changelog.md +0 -60
  350. package/docs/migration/form-builder-2.5.2.md +0 -113
  351. package/docs/reference/cli.md +0 -112
  352. package/docs/reference/components.md +0 -572
  353. package/docs/reference/hooks.md +0 -1523
  354. package/docs/reference/providers.md +0 -866
  355. package/docs/reference/tailwind-plugins.md +0 -942
  356. package/docs/reference/theme.md +0 -85
  357. package/docs/reference/types.md +0 -1016
  358. package/docs/reference/utilities.md +0 -726
  359. package/docs/tutorials/building-first-form.md +0 -846
  360. package/docs/tutorials/component-composition.md +0 -882
  361. package/docs/tutorials/getting-started.md +0 -302
  362. package/docs/tutorials/theming-basics.md +0 -785
package/docs/tutorials/theming-basics.md DELETED
@@ -1,785 +0,0 @@
1
- ---
2
- title: Theming Basics
3
- description: Learn how to work with themes, customize colors, and create consistent designs with TORCH Glare's theming system.
4
- category: Tutorial
5
- difficulty: Intermediate
6
- duration: 25 minutes
7
- tags: [theming, dark-mode, colors, customization, design-tokens]
8
- related:
9
- - Getting Started
10
- - ThemeProvider
11
- - Tailwind Plugins
12
- ---
13
-
14
- # Theming Basics
15
-
16
- Master the TORCH Glare theming system to create beautiful, consistent user interfaces that adapt to light and dark modes seamlessly.
17
-
18
- ## What You'll Learn
19
-
20
- - Understanding the TORCH color system
21
- - Working with theme modes (Light, Dark, Default)
22
- - Using color tokens effectively
23
- - Creating theme-aware components
24
- - Customizing themes
25
- - Best practices for accessible theming
26
-
27
- ## Prerequisites
28
-
29
- - Completed [Getting Started](./getting-started.md) tutorial
30
- - Basic understanding of CSS custom properties
31
- - Familiarity with Tailwind CSS
32
-
33
- ---
34
-
35
- ## Understanding the Theme System
36
-
37
- TORCH Glare uses a three-layer theming system:
38
-
39
- 1. **Theme Mode** - Light, Dark, or Default (system)
40
- 2. **Color Tokens** - Semantic color names (e.g., `background-presentation-form-base`)
41
- 3. **Color Values** - Actual color values that change based on theme
42
-
43
- ```
44
- User selects → Theme Mode (light/dark)
45
- ↓
46
- Color Tokens → Map to appropriate values
47
- ↓
48
- Components → Use tokens automatically
49
- ```
50
-
51
- ---
52
-
53
- ## Step 1: Set Up Theme Provider
54
-
55
- First, ensure `ThemeProvider` wraps your application:
56
-
57
- ```tsx
58
- // app/layout.tsx
59
- import { ThemeProvider } from "@/providers/ThemeProvider";
60
-
61
- export default function RootLayout({
62
- children,
63
- }: {
64
- children: React.ReactNode;
65
- }) {
66
- return (
67
- <html lang="en">
68
- <body>
69
- <ThemeProvider
70
- defaultTheme="light" // 'light' | 'dark' | 'default'
71
- defaultThemeMode="TORCH" // 'TORCH' | 'CSS'
72
- >
73
- {children}
74
- </ThemeProvider>
75
- </body>
76
- </html>
77
- );
78
- }
79
- ```
80
-
81
- ### Theme Options
82
-
83
- | Option | Values | Description |
84
- |--------|--------|-------------|
85
- | `defaultTheme` | `"light"` \| `"dark"` \| `"default"` | Initial theme preference |
86
- | `defaultThemeMode` | `"TORCH"` \| `"CSS"` | Theme system to use |
87
-
88
- ---
89
-
90
- ## Step 2: Create a Theme Toggle
91
-
92
- Let users switch between light and dark modes:
93
-
94
- ```tsx
95
- // components/ThemeToggle.tsx
96
- 'use client';
97
-
98
- import { Button } from "@/components/Button";
99
- import { useTheme } from "@/providers/ThemeProvider";
100
-
101
- export default function ThemeToggle() {
102
- const { theme, updateTheme } = useTheme();
103
-
104
- return (
105
- <Button
106
- theme={theme as any}
107
- variant="PrimeContStyle"
108
- buttonType="icon"
109
- onClick={() => updateTheme(theme === 'light' ? 'dark' : 'light')}
110
- aria-label="Toggle theme"
111
- >
112
- {theme === 'light' ? '🌙' : '☀️'}
113
- </Button>
114
- );
115
- }
116
- ```
117
-
118
- ### Advanced Theme Switcher
119
-
120
- ```tsx
121
- 'use client';
122
-
123
- import { useTheme } from "@/providers/ThemeProvider";
124
-
125
- export default function ThemeSelector() {
126
- const { theme, updateTheme } = useTheme();
127
-
128
- const themes = [
129
- { value: 'light', label: 'Light', icon: '☀️' },
130
- { value: 'dark', label: 'Dark', icon: '🌙' },
131
- { value: 'default', label: 'System', icon: '💻' },
132
- ] as const;
133
-
134
- return (
135
- <div className="flex gap-2">
136
- {themes.map(({ value, label, icon }) => (
137
- <button
138
- key={value}
139
- onClick={() => updateTheme(value)}
140
- className={cn(
141
- 'px-4 py-2 rounded-lg transition-all',
142
- 'typography-body-small-medium',
143
- theme === value
144
- ? 'bg-background-presentation-action-primary text-content-presentation-action-light-primary'
145
- : 'bg-background-presentation-action-secondary text-content-presentation-global-secondary'
146
- )}
147
- >
148
- <span className="mr-2">{icon}</span>
149
- {label}
150
- </button>
151
- ))}
152
- </div>
153
- );
154
- }
155
- ```
156
-
157
- ---
158
-
159
- ## Step 3: Understanding Color Tokens
160
-
161
- TORCH Glare uses semantic color tokens that automatically adapt to the current theme.
162
-
163
- ### Token Structure
164
-
165
- ```
166
- {category}-{component}-{element}-{variant}-{state}
167
- ```
168
-
169
- Examples:
170
- - `background-system-body-primary` - Primary body background
171
- - `content-presentation-global-secondary` - Secondary text color
172
- - `border-presentation-action-hover` - Border color on hover
173
-
174
- ### Color Categories
175
-
176
- #### System Colors
177
- Used for core UI elements:
178
-
179
- ```tsx
180
- <div className="bg-background-system-body-primary">
181
- <p className="text-content-system-global-primary">System colors</p>
182
- </div>
183
- ```
184
-
185
- #### Presentation Colors
186
- Used for content and interactive elements:
187
-
188
- ```tsx
189
- <div className="bg-background-presentation-form-base">
190
- <p className="text-content-presentation-global-primary">Presentation colors</p>
191
- </div>
192
- ```
193
-
194
- ---
195
-
196
- ## Step 4: Create Theme-Aware Components
197
-
198
- ### Basic Theme-Aware Card
199
-
200
- ```tsx
201
- export default function ThemedCard({
202
- children,
203
- }: {
204
- children: React.ReactNode;
205
- }) {
206
- return (
207
- <div className="
208
- bg-background-presentation-form-base
209
- border border-border-presentation-global-primary
210
- text-content-presentation-global-primary
211
- rounded-lg p-6
212
- transition-colors duration-200
213
- ">
214
- {children}
215
- </div>
216
- );
217
- }
218
- ```
219
-
220
- ### Theme-Aware Button
221
-
222
- ```tsx
223
- import { useTheme } from "@/providers/ThemeProvider";
224
-
225
- export default function CustomButton({
226
- children,
227
- onClick,
228
- }: {
229
- children: React.ReactNode;
230
- onClick?: () => void;
231
- }) {
232
- const { theme } = useTheme();
233
-
234
- return (
235
- <button
236
- onClick={onClick}
237
- className="
238
- px-4 py-2 rounded-lg
239
- bg-background-presentation-action-primary
240
- hover:bg-background-presentation-action-hover
241
- active:bg-background-presentation-action-selected
242
- text-content-presentation-action-light-primary
243
- border border-border-presentation-action-primary
244
- transition-all duration-200
245
- "
246
- >
247
- {children}
248
- </button>
249
- );
250
- }
251
- ```
252
-
253
- ---
254
-
255
- ## Step 5: Working with Color Tokens
256
-
257
- ### Background Colors
258
-
259
- ```tsx
260
- function BackgroundExamples() {
261
- return (
262
- <div className="space-y-4">
263
- {/* Body backgrounds */}
264
- <div className="bg-background-system-body-primary p-4">
265
- Primary body background
266
- </div>
267
- <div className="bg-background-system-body-secondary p-4">
268
- Secondary body background
269
- </div>
270
-
271
- {/* Form backgrounds */}
272
- <div className="bg-background-presentation-form-base p-4">
273
- Form base background
274
- </div>
275
- <div className="bg-background-presentation-form-header p-4">
276
- Form header background
277
- </div>
278
-
279
- {/* Action backgrounds */}
280
- <div className="bg-background-presentation-action-primary p-4">
281
- Primary action background
282
- </div>
283
- <div className="bg-background-presentation-action-hover p-4">
284
- Hover action background
285
- </div>
286
-
287
- {/* State backgrounds */}
288
- <div className="bg-background-presentation-state-success-primary p-4">
289
- Success background
290
- </div>
291
- <div className="bg-background-presentation-state-warning-primary p-4">
292
- Warning background
293
- </div>
294
- <div className="bg-background-presentation-state-negative-primary p-4">
295
- Error background
296
- </div>
297
- </div>
298
- );
299
- }
300
- ```
301
-
302
- ### Text/Content Colors
303
-
304
- ```tsx
305
- function TextColorExamples() {
306
- return (
307
- <div className="space-y-2">
308
- <p className="text-content-presentation-global-primary">
309
- Primary text
310
- </p>
311
- <p className="text-content-presentation-global-secondary">
312
- Secondary text
313
- </p>
314
- <p className="text-content-presentation-action-light-primary">
315
- Primary action text
316
- </p>
317
- <p className="text-content-presentation-state-success">
318
- Success message
319
- </p>
320
- <p className="text-content-presentation-state-warning">
321
- Warning message
322
- </p>
323
- <p className="text-content-presentation-state-negative">
324
- Error message
325
- </p>
326
- </div>
327
- );
328
- }
329
- ```
330
-
331
- ### Border Colors
332
-
333
- ```tsx
334
- function BorderColorExamples() {
335
- return (
336
- <div className="space-y-4">
337
- <div className="border-2 border-border-presentation-global-primary p-4">
338
- Primary border
339
- </div>
340
- <div className="border-2 border-border-presentation-action-hover p-4">
341
- Hover border
342
- </div>
343
- <div className="border-2 border-border-presentation-state-focus p-4">
344
- Focus border
345
- </div>
346
- <div className="border-2 border-border-presentation-state-success p-4">
347
- Success border
348
- </div>
349
- </div>
350
- );
351
- }
352
- ```
353
-
354
- ---
355
-
356
- ## Step 6: Badge Color System
357
-
358
- TORCH Glare provides 10 badge colors, each with `subtle` and `solid` background tokens:
359
-
360
- ```tsx
361
- import { Badge } from '@/components/Badge';
362
-
363
- function BadgeColors() {
364
- const colors = [
365
- 'gray',
366
- 'slate',
367
- 'red',
368
- 'orange',
369
- 'yellow',
370
- 'green',
371
- 'ocean',
372
- 'blue',
373
- 'purple',
374
- 'rose',
375
- ] as const;
376
-
377
- return (
378
- <div className="flex flex-col gap-3">
379
- <div className="flex flex-wrap gap-2">
380
- {colors.map((color) => (
381
- <Badge key={color} color={color} badgeStyle="subtle" label={color} />
382
- ))}
383
- </div>
384
- <div className="flex flex-wrap gap-2">
385
- {colors.map((color) => (
386
- <Badge key={color} color={color} badgeStyle="solid" label={color} />
387
- ))}
388
- </div>
389
- </div>
390
- );
391
- }
392
- ```
393
-
394
- The underlying CSS variables follow this pattern:
395
-
396
- ```
397
- --background-presentation-badge-{color}-subtle
398
- --background-presentation-badge-{color}-solid
399
- ```
400
-
401
- ---
402
-
403
- ## Step 7: Create a Complete Themed Component
404
-
405
- Here's a complete example combining everything:
406
-
407
- ```tsx
408
- 'use client';
409
-
410
- import { Badge } from "@/components/Badge";
411
- import { Button } from "@/components/Button";
412
- import { useTheme } from "@/providers/ThemeProvider";
413
-
414
- export default function ThemedDashboard() {
415
- const { theme } = useTheme();
416
-
417
- return (
418
- <div className="min-h-screen bg-background-system-body-primary p-6">
419
- {/* Header */}
420
- <header className="
421
- bg-background-presentation-form-base
422
- border-b border-border-presentation-global-primary
423
- p-4 rounded-t-lg
424
- ">
425
- <div className="flex justify-between items-center">
426
- <h1 className="typography-display-medium-bold text-content-presentation-global-primary">
427
- Dashboard
428
- </h1>
429
- <Badge theme={theme as any} color="gray">
430
- {theme} mode
431
- </Badge>
432
- </div>
433
- </header>
434
-
435
- {/* Stats Grid */}
436
- <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
437
- {/* Stat Card 1 */}
438
- <div className="
439
- bg-background-presentation-form-base
440
- border border-border-presentation-global-primary
441
- rounded-lg p-6
442
- ">
443
- <p className="typography-labels-small-regular text-content-presentation-global-secondary">
444
- Total Users
445
- </p>
446
- <p className="typography-display-small-bold text-content-presentation-global-primary mt-2">
447
- 1,234
448
- </p>
449
- <span className="
450
- inline-block mt-2 px-2 py-1 rounded
451
- bg-background-presentation-badge-green
452
- text-content-presentation-badge-green
453
- typography-labels-small-semibold
454
- ">
455
- +12% this month
456
- </span>
457
- </div>
458
-
459
- {/* Stat Card 2 */}
460
- <div className="
461
- bg-background-presentation-form-base
462
- border border-border-presentation-global-primary
463
- rounded-lg p-6
464
- ">
465
- <p className="typography-labels-small-regular text-content-presentation-global-secondary">
466
- Revenue
467
- </p>
468
- <p className="typography-display-small-bold text-content-presentation-global-primary mt-2">
469
- $45,678
470
- </p>
471
- <span className="
472
- inline-block mt-2 px-2 py-1 rounded
473
- bg-background-presentation-badge-blue
474
- text-content-presentation-badge-blue
475
- typography-labels-small-semibold
476
- ">
477
- +8% this month
478
- </span>
479
- </div>
480
-
481
- {/* Stat Card 3 */}
482
- <div className="
483
- bg-background-presentation-form-base
484
- border border-border-presentation-global-primary
485
- rounded-lg p-6
486
- ">
487
- <p className="typography-labels-small-regular text-content-presentation-global-secondary">
488
- Active Projects
489
- </p>
490
- <p className="typography-display-small-bold text-content-presentation-global-primary mt-2">
491
- 42
492
- </p>
493
- <span className="
494
- inline-block mt-2 px-2 py-1 rounded
495
- bg-background-presentation-badge-yellow
496
- text-content-presentation-badge-yellow
497
- typography-labels-small-semibold
498
- ">
499
- 3 due today
500
- </span>
501
- </div>
502
- </div>
503
-
504
- {/* Action Buttons */}
505
- <div className="flex gap-4 mt-6">
506
- <Button theme={theme as any} variant="PrimeStyle">
507
- Create Project
508
- </Button>
509
- <Button theme={theme as any} variant="PrimeContStyle">
510
- View Reports
511
- </Button>
512
- <Button theme={theme as any} variant="BorderStyle">
513
- Settings
514
- </Button>
515
- </div>
516
- </div>
517
- );
518
- }
519
- ```
520
-
521
- ---
522
-
523
- ## Step 8: Customizing Themes
524
-
525
- ### Method 1: CSS Custom Properties
526
-
527
- Override theme variables in your CSS:
528
-
529
- ```css
530
- /* globals.css */
531
- :root {
532
- /* Customize light theme */
533
- [data-theme="light"] {
534
- --background-presentation-action-primary: #your-color;
535
- }
536
-
537
- /* Customize dark theme */
538
- [data-theme="dark"] {
539
- --background-presentation-action-primary: #your-color;
540
- }
541
- }
542
- ```
543
-
544
- ### Method 2: Tailwind Config
545
-
546
- Extend colors in `tailwind.config.ts`:
547
-
548
- ```ts
549
- export default {
550
- theme: {
551
- extend: {
552
- colors: {
553
- 'custom-primary': '#4200FF',
554
- 'custom-secondary': '#5215CC',
555
- },
556
- },
557
- },
558
- } satisfies Config;
559
- ```
560
-
561
- ### Method 3: Component-Level Overrides
562
-
563
- ```tsx
564
- function CustomThemedButton() {
565
- return (
566
- <button
567
- className="
568
- px-4 py-2 rounded
569
- bg-purple-600 hover:bg-purple-700
570
- text-white
571
- dark:bg-purple-500 dark:hover:bg-purple-600
572
- "
573
- >
574
- Custom Colors
575
- </button>
576
- );
577
- }
578
- ```
579
-
580
- ---
581
-
582
- ## Best Practices
583
-
584
- ### 1. Always Use Color Tokens
585
-
586
- ```tsx
587
- // ✓ Good - Uses theme tokens
588
- <div className="bg-background-presentation-form-base">
589
-
590
- // ✗ Avoid - Hardcoded colors
591
- <div className="bg-white dark:bg-gray-900">
592
- ```
593
-
594
- ### 2. Provide Smooth Transitions
595
-
596
- ```tsx
597
- <div className="
598
- bg-background-system-body-primary
599
- text-content-system-global-primary
600
- transition-colors duration-200
601
- ">
602
- Smooth theme transitions
603
- </div>
604
- ```
605
-
606
- ### 3. Test Both Themes
607
-
608
- Always test your components in both light and dark themes:
609
-
610
- ```tsx
611
- // Test component in both themes
612
- <ThemeProvider defaultTheme="light">
613
- <YourComponent />
614
- </ThemeProvider>
615
-
616
- <ThemeProvider defaultTheme="dark">
617
- <YourComponent />
618
- </ThemeProvider>
619
- ```
620
-
621
- ### 4. Consider Color Contrast
622
-
623
- Ensure adequate contrast for accessibility:
624
-
625
- ```tsx
626
- // Good contrast in both themes
627
- <p className="
628
- text-content-presentation-global-primary
629
- bg-background-presentation-form-base
630
- ">
631
- High contrast text
632
- </p>
633
- ```
634
-
635
- ### 5. Use Semantic Colors
636
-
637
- Choose colors based on meaning:
638
-
639
- ```tsx
640
- // ✓ Good - Semantic colors
641
- <div className="bg-background-presentation-state-success-primary">
642
- Success message
643
- </div>
644
-
645
- // ✗ Avoid - Generic colors
646
- <div className="bg-green-500">
647
- Success message
648
- </div>
649
- ```
650
-
651
- ---
652
-
653
- ## Accessibility Considerations
654
-
655
- ### WCAG Contrast Requirements
656
-
657
- - **Normal text**: Minimum 4.5:1 contrast ratio
658
- - **Large text** (18px+ or 14px+ bold): Minimum 3:1 contrast ratio
659
-
660
- ### Respecting User Preferences
661
-
662
- Detect and respect system theme preference:
663
-
664
- ```tsx
665
- <ThemeProvider defaultTheme="default">
666
- {/* Uses prefers-color-scheme */}
667
- </ThemeProvider>
668
- ```
669
-
670
- ### Keyboard Navigation
671
-
672
- Ensure theme toggle is keyboard accessible:
673
-
674
- ```tsx
675
- <button
676
- onClick={toggleTheme}
677
- onKeyDown={(e) => e.key === 'Enter' && toggleTheme()}
678
- aria-label="Toggle theme"
679
- aria-pressed={theme === 'dark'}
680
- >
681
- {theme === 'light' ? '🌙' : '☀️'}
682
- </button>
683
- ```
684
-
685
- ---
686
-
687
- ## Common Patterns
688
-
689
- ### Conditional Styling Based on Theme
690
-
691
- ```tsx
692
- import { useTheme } from "@/providers/ThemeProvider";
693
-
694
- function ThemedComponent() {
695
- const { theme } = useTheme();
696
-
697
- return (
698
- <div
699
- className={cn(
700
- 'p-4 rounded-lg',
701
- theme === 'dark' && 'ring-2 ring-purple-500'
702
- )}
703
- >
704
- Content
705
- </div>
706
- );
707
- }
708
- ```
709
-
710
- ### Theme-Specific Images
711
-
712
- ```tsx
713
- import { useTheme } from "@/providers/ThemeProvider";
714
-
715
- function Logo() {
716
- const { theme } = useTheme();
717
-
718
- return (
719
- <img
720
- src={theme === 'dark' ? '/logo-dark.svg' : '/logo-light.svg'}
721
- alt="Logo"
722
- />
723
- );
724
- }
725
- ```
726
-
727
- ### Persistent Theme Preference
728
-
729
- Theme preferences are automatically persisted to `localStorage`:
730
-
731
- ```typescript
732
- // Automatically handled by ThemeProvider
733
- localStorage.getItem('theme'); // 'light' | 'dark' | 'default'
734
- localStorage.getItem('theme-mode'); // 'TORCH' | 'CSS'
735
- ```
736
-
737
- ---
738
-
739
- ## Troubleshooting
740
-
741
- ### Theme Not Switching
742
-
743
- **Problem**: Theme changes but colors don't update.
744
-
745
- **Solution**: Ensure both plugins are installed:
746
- ```ts
747
- plugins: [
748
- require('mapping-color-system'),
749
- require('glare-torch-mode'),
750
- ]
751
- ```
752
-
753
- ### Flash of Unstyled Content (FOUC)
754
-
755
- **Problem**: Brief flash of wrong theme on page load.
756
-
757
- **Solution**: Set initial theme on HTML element:
758
- ```tsx
759
- <html data-theme="dark">
760
- ```
761
-
762
- ### Custom Colors Not Working
763
-
764
- **Problem**: Custom color classes don't apply.
765
-
766
- **Solution**: Add to Tailwind config and ensure content paths include your files:
767
- ```ts
768
- content: ["./src/**/*.{js,ts,jsx,tsx}"]
769
- ```
770
-
771
- ---
772
-
773
- ## Next Steps
774
-
775
- Now that you understand theming, explore:
776
-
777
- 1. **[Component Composition](./component-composition.md)** - Build complex themed UIs
778
- 2. **[Tailwind Plugins Reference](../reference/tailwind-plugins.md)** - Deep dive into plugins
779
- 3. **[ThemeProvider API](../reference/providers.md)** - Complete provider documentation
780
-
781
- ## Additional Resources
782
-
783
- - [WCAG Color Contrast Guidelines](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html)
784
- - [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
785
- - [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)