torch-glare 2.5.5 → 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 (359) 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 -338
  69. package/apps/lib/components/Breadcrumb.tsx +0 -280
  70. package/apps/lib/components/Button.tsx +0 -317
  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 -383
  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 -84
  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 -63
  106. package/apps/lib/components/DataViews/states.tsx +0 -38
  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 -420
  118. package/apps/lib/components/DropdownMenu.tsx +0 -540
  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 -73
  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 -163
  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 -91
  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 -47
  147. package/apps/lib/components/FormBuilder/types.ts +0 -311
  148. package/apps/lib/components/FormRenderer/FormDrawer.tsx +0 -128
  149. package/apps/lib/components/FormRenderer/detail.tsx +0 -207
  150. package/apps/lib/components/FormRenderer/form-renderer.tsx +0 -297
  151. package/apps/lib/components/FormRenderer/header.tsx +0 -88
  152. package/apps/lib/components/FormRenderer/index.ts +0 -15
  153. package/apps/lib/components/FormRenderer/section.tsx +0 -39
  154. package/apps/lib/components/FormRenderer/stepper.tsx +0 -339
  155. package/apps/lib/components/FormRenderer/types.ts +0 -78
  156. package/apps/lib/components/FormSummary.tsx +0 -282
  157. package/apps/lib/components/HeaderBar.tsx +0 -117
  158. package/apps/lib/components/ImageAttachment.tsx +0 -209
  159. package/apps/lib/components/InnerLabelField.tsx +0 -154
  160. package/apps/lib/components/Input.tsx +0 -224
  161. package/apps/lib/components/InputField.tsx +0 -147
  162. package/apps/lib/components/InputOTP.tsx +0 -84
  163. package/apps/lib/components/Label.tsx +0 -129
  164. package/apps/lib/components/LabelField.tsx +0 -76
  165. package/apps/lib/components/LabeledCheckBox.tsx +0 -51
  166. package/apps/lib/components/LabeledRadio.tsx +0 -51
  167. package/apps/lib/components/LinkButton.tsx +0 -94
  168. package/apps/lib/components/LoginButton.tsx +0 -51
  169. package/apps/lib/components/PasswordLevel.tsx +0 -58
  170. package/apps/lib/components/Popover.tsx +0 -312
  171. package/apps/lib/components/ProfileMenu.tsx +0 -85
  172. package/apps/lib/components/Radio.tsx +0 -59
  173. package/apps/lib/components/RadioCard.tsx +0 -50
  174. package/apps/lib/components/ScrollArea.tsx +0 -54
  175. package/apps/lib/components/SearchField.tsx +0 -62
  176. package/apps/lib/components/SearchableSelect.tsx +0 -318
  177. package/apps/lib/components/SearchableTable.tsx +0 -344
  178. package/apps/lib/components/SearchableTree.tsx +0 -485
  179. package/apps/lib/components/SearchableTreeDialog.tsx +0 -502
  180. package/apps/lib/components/SectionBlock.tsx +0 -147
  181. package/apps/lib/components/Select.tsx +0 -347
  182. package/apps/lib/components/SimpleSelect.tsx +0 -225
  183. package/apps/lib/components/Skeleton.tsx +0 -12
  184. package/apps/lib/components/SlideDatePicker.tsx +0 -253
  185. package/apps/lib/components/SpinLoading.tsx +0 -174
  186. package/apps/lib/components/Stepper.tsx +0 -480
  187. package/apps/lib/components/Switch.tsx +0 -82
  188. package/apps/lib/components/TabFormItem.tsx +0 -153
  189. package/apps/lib/components/TabSwitch.tsx +0 -172
  190. package/apps/lib/components/Table.tsx +0 -610
  191. package/apps/lib/components/TextEditor/ChartBlockTool.ts +0 -676
  192. package/apps/lib/components/TextEditor/RichTextField.tsx +0 -46
  193. package/apps/lib/components/TextEditor/TableDnDWrapper.ts +0 -462
  194. package/apps/lib/components/TextEditor/TextEditor.tsx +0 -1164
  195. package/apps/lib/components/TextEditor/TextEditorToolbar.tsx +0 -429
  196. package/apps/lib/components/TextEditor/editor-tools/AlignmentTune.ts +0 -70
  197. package/apps/lib/components/TextEditor/editor-tools/ColorInlineTool.ts +0 -50
  198. package/apps/lib/components/TextEditor/editor-tools/StrikethroughInlineTool.ts +0 -48
  199. package/apps/lib/components/TextEditor/editor-tools/inlineFormat.ts +0 -98
  200. package/apps/lib/components/TextEditor/editorjs.d.ts +0 -60
  201. package/apps/lib/components/TextEditor/index.ts +0 -7
  202. package/apps/lib/components/TextEditor/markdownParser.ts +0 -346
  203. package/apps/lib/components/Textarea.tsx +0 -117
  204. package/apps/lib/components/Timeline.tsx +0 -263
  205. package/apps/lib/components/Toast.tsx +0 -87
  206. package/apps/lib/components/Toggle.tsx +0 -125
  207. package/apps/lib/components/ToggleButton.tsx +0 -140
  208. package/apps/lib/components/Tooltip.tsx +0 -116
  209. package/apps/lib/components/TransparentLabel.tsx +0 -71
  210. package/apps/lib/components/TreeDropDown.tsx +0 -115
  211. package/apps/lib/components/TreeFolder/TreeFolder.tsx +0 -380
  212. package/apps/lib/components/TreeFolder/TreeFolderBreadcrumb.tsx +0 -75
  213. package/apps/lib/components/TreeFolder/TreeFolderRow.tsx +0 -354
  214. package/apps/lib/components/TreeFolder/TreeFolderStyles.tsx +0 -60
  215. package/apps/lib/components/TreeFolder/icons.tsx +0 -60
  216. package/apps/lib/components/TreeFolder/index.ts +0 -24
  217. package/apps/lib/components/TreeFolder/treeFolderUtils.ts +0 -109
  218. package/apps/lib/components/TreeFolder/types.ts +0 -77
  219. package/apps/lib/components/TreeFolder/useTreeFolderDnD.ts +0 -118
  220. package/apps/lib/hooks/useActiveTreeItem.ts +0 -58
  221. package/apps/lib/hooks/useClickOutside.ts +0 -27
  222. package/apps/lib/hooks/useDragDrop.tsx +0 -365
  223. package/apps/lib/hooks/useInfiniteScroll.ts +0 -108
  224. package/apps/lib/hooks/useIsMobile.ts +0 -21
  225. package/apps/lib/hooks/useResize.ts +0 -67
  226. package/apps/lib/hooks/useTagSelection.ts +0 -214
  227. package/apps/lib/layouts/CNLayout.tsx +0 -372
  228. package/apps/lib/layouts/DataViewCard.tsx +0 -62
  229. package/apps/lib/layouts/FieldSection.tsx +0 -91
  230. package/apps/lib/layouts/TreeSubLayout.tsx +0 -173
  231. package/apps/lib/providers/ThemeProvider.tsx +0 -84
  232. package/apps/lib/registry.json +0 -1201
  233. package/apps/lib/tsconfig.json +0 -9
  234. package/apps/lib/tsconfig.tsbuildinfo +0 -1
  235. package/apps/lib/utils/cn.ts +0 -6
  236. package/apps/lib/utils/color.ts +0 -175
  237. package/apps/lib/utils/dataViews/path.ts +0 -67
  238. package/apps/lib/utils/dataViews/query.ts +0 -73
  239. package/apps/lib/utils/dataViews/types.ts +0 -187
  240. package/apps/lib/utils/dateFormat.ts +0 -108
  241. package/apps/lib/utils/resize.ts +0 -31
  242. package/apps/lib/utils/types.ts +0 -16
  243. package/docs/BLOCKS.md +0 -129
  244. package/docs/CHANGELOG-1.1.16.md +0 -108
  245. package/docs/Cover.png +0 -0
  246. package/docs/README.md +0 -215
  247. package/docs/components/action-button.md +0 -638
  248. package/docs/components/actions-group.md +0 -708
  249. package/docs/components/alert-dialog.md +0 -920
  250. package/docs/components/avatar.md +0 -709
  251. package/docs/components/badge-field.md +0 -712
  252. package/docs/components/badge.md +0 -301
  253. package/docs/components/breadcrumb.md +0 -930
  254. package/docs/components/button-group.md +0 -650
  255. package/docs/components/button.md +0 -639
  256. package/docs/components/calendar.md +0 -555
  257. package/docs/components/card.md +0 -622
  258. package/docs/components/chart-block-tool.md +0 -129
  259. package/docs/components/checkbox.md +0 -699
  260. package/docs/components/cn-layout.md +0 -854
  261. package/docs/components/color-picker.md +0 -101
  262. package/docs/components/conclusion-header.md +0 -80
  263. package/docs/components/context-menu.md +0 -483
  264. package/docs/components/count-badge.md +0 -560
  265. package/docs/components/data-table.md +0 -854
  266. package/docs/components/data-views/backend-response.md +0 -324
  267. package/docs/components/data-views/examples/a11y-rtl.md +0 -250
  268. package/docs/components/data-views/examples/api-orders-route.md +0 -130
  269. package/docs/components/data-views/examples/fields.md +0 -362
  270. package/docs/components/data-views/examples/filters.md +0 -307
  271. package/docs/components/data-views/examples/inbox-routing.md +0 -218
  272. package/docs/components/data-views/examples/index.md +0 -29
  273. package/docs/components/data-views/examples/overview.md +0 -244
  274. package/docs/components/data-views/examples/panel.md +0 -212
  275. package/docs/components/data-views/examples/scale.md +0 -231
  276. package/docs/components/data-views/examples/server-side.md +0 -210
  277. package/docs/components/data-views/examples/state.md +0 -250
  278. package/docs/components/data-views/examples/tree-custom.md +0 -388
  279. package/docs/components/data-views/examples/view-registry.md +0 -313
  280. package/docs/components/data-views/examples/views.md +0 -534
  281. package/docs/components/data-views/guide.md +0 -405
  282. package/docs/components/data-views/index.md +0 -1495
  283. package/docs/components/data-views/migration.md +0 -79
  284. package/docs/components/date-picker.md +0 -857
  285. package/docs/components/dialog.md +0 -929
  286. package/docs/components/divider.md +0 -766
  287. package/docs/components/drawer.md +0 -654
  288. package/docs/components/dropdown-menu.md +0 -668
  289. package/docs/components/field-hint.md +0 -898
  290. package/docs/components/field-section.md +0 -781
  291. package/docs/components/form-builder.md +0 -276
  292. package/docs/components/form-renderer.md +0 -326
  293. package/docs/components/form-summary.md +0 -138
  294. package/docs/components/form.md +0 -785
  295. package/docs/components/header-bar.md +0 -188
  296. package/docs/components/image-attachment.md +0 -906
  297. package/docs/components/inner-label-field.md +0 -819
  298. package/docs/components/input-field.md +0 -623
  299. package/docs/components/input-otp.md +0 -756
  300. package/docs/components/input.md +0 -634
  301. package/docs/components/label-field.md +0 -770
  302. package/docs/components/label.md +0 -761
  303. package/docs/components/labeled-check-box.md +0 -642
  304. package/docs/components/labeled-radio.md +0 -796
  305. package/docs/components/link-button.md +0 -685
  306. package/docs/components/login-button.md +0 -872
  307. package/docs/components/password-level.md +0 -803
  308. package/docs/components/popover.md +0 -649
  309. package/docs/components/profile-menu.md +0 -656
  310. package/docs/components/radio-card.md +0 -801
  311. package/docs/components/radio.md +0 -735
  312. package/docs/components/scroll-area.md +0 -691
  313. package/docs/components/search-field.md +0 -702
  314. package/docs/components/searchable-select.md +0 -368
  315. package/docs/components/searchable-table.md +0 -438
  316. package/docs/components/searchable-tree-dialog.md +0 -190
  317. package/docs/components/searchable-tree.md +0 -200
  318. package/docs/components/section-block.md +0 -477
  319. package/docs/components/select.md +0 -709
  320. package/docs/components/simple-select.md +0 -741
  321. package/docs/components/skeleton.md +0 -706
  322. package/docs/components/slide-date-picker.md +0 -837
  323. package/docs/components/spin-loading.md +0 -696
  324. package/docs/components/stepper.md +0 -316
  325. package/docs/components/switch.md +0 -770
  326. package/docs/components/tab-form-item.md +0 -773
  327. package/docs/components/tab-switch.md +0 -170
  328. package/docs/components/table-dnd-wrapper.md +0 -107
  329. package/docs/components/table.md +0 -1088
  330. package/docs/components/text-editor.md +0 -735
  331. package/docs/components/textarea.md +0 -681
  332. package/docs/components/timeline.md +0 -254
  333. package/docs/components/toast.md +0 -773
  334. package/docs/components/toggle-button.md +0 -643
  335. package/docs/components/toggle.md +0 -882
  336. package/docs/components/tooltip.md +0 -513
  337. package/docs/components/transparent-label.md +0 -721
  338. package/docs/components/tree-drop-down.md +0 -740
  339. package/docs/components/tree-folder.md +0 -110
  340. package/docs/components/tree-sub-layout.md +0 -707
  341. package/docs/explanation/architecture.md +0 -54
  342. package/docs/explanation/design-system.md +0 -52
  343. package/docs/how-to/form-and-list-recipes.md +0 -386
  344. package/docs/how-to/forms-with-form-builder.md +0 -472
  345. package/docs/how-to/guides.md +0 -1027
  346. package/docs/migration/changelog.md +0 -54
  347. package/docs/migration/form-builder-2.5.2.md +0 -113
  348. package/docs/reference/cli.md +0 -112
  349. package/docs/reference/components.md +0 -572
  350. package/docs/reference/hooks.md +0 -1500
  351. package/docs/reference/providers.md +0 -866
  352. package/docs/reference/tailwind-plugins.md +0 -942
  353. package/docs/reference/theme.md +0 -85
  354. package/docs/reference/types.md +0 -1016
  355. package/docs/reference/utilities.md +0 -704
  356. package/docs/tutorials/building-first-form.md +0 -846
  357. package/docs/tutorials/component-composition.md +0 -882
  358. package/docs/tutorials/getting-started.md +0 -302
  359. 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)