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/reference/tailwind-plugins.md DELETED
@@ -1,942 +0,0 @@
1
- ---
2
- title: Tailwind CSS Plugins
3
- description: Tailwind CSS plugins for TORCH Glare including color system mapping, TORCH mode, and typography utilities.
4
- component: Tailwind Plugins
5
- category: Reference
6
- tags: [tailwind, plugins, theming, typography, css-variables]
7
- related:
8
- - ThemeProvider
9
- - All Components
10
- ---
11
-
12
- # Tailwind CSS Plugins
13
-
14
- TORCH Glare provides four essential Tailwind CSS plugins that power the design system with theming, color mapping, and typography utilities.
15
-
16
- ## Available Plugins
17
-
18
- 1. **mapping-color-system** - Color system mapping with automatic theme switching
19
- 2. **mapping-color-system-v4** - Tailwind CSS v4 compatible color system
20
- 3. **glare-torch-mode** - TORCH mode theme variables and styles
21
- 4. **glare-typography** - Complete typography system with 48 utility classes
22
-
23
- ---
24
-
25
- ## mapping-color-system
26
-
27
- The color system mapping plugin provides essential theme variables for light, dark, and default modes. This plugin is **required** for TORCH Glare components to function correctly.
28
-
29
- ### Features
30
-
31
- - Automatic theme switching based on `data-theme` attribute
32
- - 100+ CSS custom properties for colors
33
- - Light, dark, and default theme support
34
- - Seamless integration with Tailwind CSS
35
- - Background, border, and content color tokens
36
-
37
- ### Installation
38
-
39
- ```bash
40
- npm install mapping-color-system
41
- ```
42
-
43
- Or using Yarn:
44
-
45
- ```bash
46
- yarn add mapping-color-system
47
- ```
48
-
49
- ### Basic Setup
50
-
51
- ```ts
52
- // tailwind.config.ts
53
- import type { Config } from "tailwindcss";
54
-
55
- export default {
56
- content: ["./src/**/*.{js,ts,jsx,tsx}"],
57
- theme: {},
58
- plugins: [
59
- require('mapping-color-system'),
60
- require('glare-torch-mode'), // Required companion plugin
61
- ],
62
- } satisfies Config;
63
- ```
64
-
65
- ### Using with Theme Attribute
66
-
67
- ```html
68
- <!-- Dark theme -->
69
- <html data-theme="dark">
70
- <body>
71
- <div class="bg-primary text-onPrimary">
72
- Dark theme content
73
- </div>
74
- </body>
75
- </html>
76
-
77
- <!-- Light theme -->
78
- <html data-theme="light">
79
- <body>
80
- <div class="bg-primary text-onPrimary">
81
- Light theme content
82
- </div>
83
- </body>
84
- </html>
85
- ```
86
-
87
- ### Available Color Classes
88
-
89
- The plugin exposes numerous color tokens that automatically adapt to the active theme:
90
-
91
- #### Background Colors
92
-
93
- ```html
94
- <div class="bg-background-system-body-primary">Primary background</div>
95
- <div class="bg-background-system-body-secondary">Secondary background</div>
96
- <div class="bg-background-presentation-form-base">Form background</div>
97
- <div class="bg-background-presentation-action-primary">Action background</div>
98
- <div class="bg-background-presentation-state-success-primary">Success background</div>
99
- <div class="bg-background-presentation-badge-green">Badge background</div>
100
- ```
101
-
102
- #### Text/Content Colors
103
-
104
- ```html
105
- <p class="text-content-presentation-global-primary">Primary text</p>
106
- <p class="text-content-presentation-global-secondary">Secondary text</p>
107
- <p class="text-content-presentation-action-light-primary">Light primary action</p>
108
- <p class="text-content-presentation-state-success">Success text</p>
109
- <p class="text-content-presentation-badge-blue">Badge text</p>
110
- ```
111
-
112
- #### Border Colors
113
-
114
- ```html
115
- <div class="border border-border-presentation-global-primary">Primary border</div>
116
- <div class="border border-border-presentation-action-hover">Hover border</div>
117
- <div class="border border-border-presentation-state-focus">Focus border</div>
118
- <div class="border border-border-system-global-primary">System border</div>
119
- ```
120
-
121
- ### Color Token Categories
122
-
123
- #### System Colors
124
- - **Body**: `background-system-body-{base,primary,secondary,tertiary}`
125
- - **Action**: `background-system-action-{primary,secondary,tertiary}`
126
- - **State**: `background-system-state-{negative}`
127
- - **Badge**: `background-system-badge-{purple,red}`
128
-
129
- #### Presentation Colors
130
- - **Body**: `background-presentation-body-{primary}`
131
- - **Form**: `background-presentation-form-{base,header,tabs}`
132
- - **Action**: `background-presentation-action-{primary,secondary,hover,selected}`
133
- - **State**: `background-presentation-state-{success,warning,negative,information}`
134
- - **Badge**: `background-presentation-badge-{green,yellow,red,blue,purple,gray}`
135
- - **Table**: `background-presentation-table-{row-hover,row-selected,row-disabled}`
136
-
137
- ### Theme-Specific Values
138
-
139
- ```css
140
- /* Automatically set by the plugin */
141
- [data-theme="dark"] {
142
- --background-system-body-primary: var(--black-900);
143
- --content-presentation-global-primary: var(--white-100);
144
- }
145
-
146
- [data-theme="light"] {
147
- --background-system-body-primary: var(--white-100);
148
- --content-presentation-global-primary: var(--black-900);
149
- }
150
- ```
151
-
152
- ### Example: Themed Card
153
-
154
- ```tsx
155
- function ThemedCard({ children }: { children: React.ReactNode }) {
156
- return (
157
- <div className="
158
- bg-background-presentation-form-base
159
- border border-border-presentation-global-primary
160
- text-content-presentation-global-primary
161
- rounded-lg p-4
162
- ">
163
- {children}
164
- </div>
165
- );
166
- }
167
- ```
168
-
169
- ### Example: Button States
170
-
171
- ```tsx
172
- function ThemedButton({ children }: { children: React.ReactNode }) {
173
- return (
174
- <button className="
175
- bg-background-presentation-action-primary
176
- hover:bg-background-presentation-action-hover
177
- active:bg-background-presentation-action-selected
178
- border border-border-presentation-action-primary
179
- text-content-presentation-action-light-primary
180
- px-4 py-2 rounded
181
- ">
182
- {children}
183
- </button>
184
- );
185
- }
186
- ```
187
-
188
- ---
189
-
190
- ## mapping-color-system-v4
191
-
192
- Tailwind CSS v4 compatible version of the color system mapping plugin. Includes a separate `tailwindVars.css` file for use with Tailwind v4's new architecture.
193
-
194
- ### Features
195
-
196
- - Tailwind CSS v4 compatibility
197
- - Separate CSS file for variable imports
198
- - Same color token system as v3 plugin
199
- - Optimized for Tailwind v4 architecture
200
-
201
- ### Installation
202
-
203
- ```bash
204
- npm install mapping-color-system-v4
205
- ```
206
-
207
- ### Tailwind v4 Setup
208
-
209
- ```ts
210
- // tailwind.config.ts
211
- import type { Config } from "tailwindcss";
212
-
213
- export default {
214
- content: ["./src/**/*.{js,ts,jsx,tsx}"],
215
- theme: {},
216
- plugins: [
217
- require('mapping-color-system-v4'),
218
- ],
219
- } satisfies Config;
220
- ```
221
-
222
- ### Import CSS Variables
223
-
224
- `tailwindVars.css` ships the `@theme` block that registers every `--color-*`
225
- token (badge, action, state, etc.) as a Tailwind utility. Without it, classes
226
- like `bg-background-presentation-badge-gray-solid` resolve to nothing and
227
- components render with no background.
228
-
229
- **Ordering is critical.** CSS requires all `@import` statements to come before
230
- any other at-rule. Place this `@import` **above** every `@plugin` and `@source`
231
- rule — directly under `@import "tailwindcss"`. If it sits after them, the
232
- bundler (Vite/Lightning CSS, PostCSS) treats it as a misplaced `@import` and
233
- **silently drops it**, removing the entire color registration. The tell-tale
234
- build warning is `@import must precede all other statements`.
235
-
236
- ```css
237
- /* app.css or globals.css — Tailwind v4 */
238
- @import "tailwindcss";
239
- @import "mapping-color-system-v4/tailwindVars.css"; /* MUST be before @plugin/@source */
240
- @plugin "glare-torch-mode";
241
- @plugin "mapping-color-system-v4";
242
- ```
243
-
244
- ```css
245
- /* Tailwind v3 */
246
- @import 'mapping-color-system-v4/tailwindVars.css';
247
-
248
- @tailwind base;
249
- @tailwind components;
250
- @tailwind utilities;
251
- ```
252
-
253
- ### Usage
254
-
255
- Usage is identical to the v3 plugin. All color classes and tokens work the same way:
256
-
257
- ```html
258
- <div class="bg-background-system-body-primary text-content-presentation-global-primary">
259
- Tailwind v4 compatible theming
260
- </div>
261
- ```
262
-
263
- ---
264
-
265
- ## glare-torch-mode
266
-
267
- The TORCH mode plugin provides the actual color values and theme-specific styles. This plugin **must be used** together with `mapping-color-system`.
268
-
269
- ### Features
270
-
271
- - TORCH design system color values
272
- - Light, dark, and default theme definitions
273
- - 500+ CSS custom properties
274
- - Gradient and alpha channel support
275
- - Comprehensive color palette
276
- - The shared **radius**, **container** and **breakpoint** scales (exported as
277
- `borderRadius`, `containers` and `screens`)
278
-
279
- ### Installation
280
-
281
- ```bash
282
- npm install glare-torch-mode
283
- ```
284
-
285
- ### The radius scale
286
-
287
- `borderRadius` produces the `rounded-radius-*` classes the components are built on — Button, Badge,
288
- the shared `Input` field root, ActionButton, Select and TextArea all use them. The keys mirror the
289
- Figma `radius/*` collection:
290
-
291
- | class | value | | class | value |
292
- |---|---|---|---|---|
293
- | `rounded-radius-none` | 0px | | `rounded-radius-2xl` | 16px |
294
- | `rounded-radius-xs` | 2px | | `rounded-radius-3xl` | 24px |
295
- | `rounded-radius-sm` | 4px | | `rounded-radius-4xl` | 32px |
296
- | `rounded-radius-md` | 6px | | `rounded-radius-5xl` | 40px |
297
- | `rounded-radius-lg` | 8px | | `rounded-radius-6xl` | 48px |
298
- | `rounded-radius-xl` | 12px | | `rounded-radius-round` | 9999px |
299
-
300
- Deliberately **not** reusing Tailwind's own `sm`/`md`/`lg` keys: that would override the built-in
301
- scale, where Glare's `sm` is 4px and Tailwind's is 2px, silently restyling every existing
302
- `rounded-sm`.
303
-
304
- Note that `tailwind-merge` does not dedupe these classes — they are custom scale keys, not values it
305
- recognises. Never put a `rounded-radius-*` on a `cva` base *and* on one of its variants: both survive
306
- and CSS source order decides the winner. Put it only on the variants.
307
-
308
- ### Tailwind v4
309
-
310
- The plugin is a plain `addBase` function, so under v4 `@plugin` registers the colour variables but
311
- **not** the scales — those reach Tailwind through `theme.extend` in a JS config, which v4 does not
312
- have. Import the theme file as well (requires **1.4.0 or newer**):
313
-
314
- ```css
315
- @import "tailwindcss";
316
- @import "glare-torch-mode/theme.css"; /* must precede the @plugin rules */
317
- @plugin "glare-torch-mode";
318
- ```
319
-
320
- Without it `rounded-radius-*` is never generated and `sm:` / `@md:` fall back to Tailwind's values.
321
- Two v4-only caveats: the container scale is shared with `max-w-*`, so `--container-md` also sets
322
- `max-w-md` to 650px; and the plugin's `--radius-*` variables land in v4's own border-radius
323
- namespace — matching values, but `px` where Tailwind uses `rem`.
324
-
325
- ### Setup (Required with mapping-color-system)
326
-
327
- ```ts
328
- // tailwind.config.ts
329
- import type { Config } from "tailwindcss";
330
-
331
- export default {
332
- content: ["./src/**/*.{js,ts,jsx,tsx}"],
333
- theme: {},
334
- plugins: [
335
- require('mapping-color-system'), // Required first
336
- require('glare-torch-mode'), // Then TORCH mode
337
- ],
338
- } satisfies Config;
339
- ```
340
-
341
- ### What It Provides
342
-
343
- The TORCH mode plugin defines the actual color values for:
344
-
345
- - **Base colors**: Black, white, and grayscale palettes
346
- - **Brand colors**: Purple, blue, red, green variants
347
- - **Alpha channels**: Transparent variants for overlays
348
- - **Gradients**: Start and end values for gradient backgrounds
349
- - **State colors**: Success, warning, error, information
350
-
351
- ### Color Palette Structure
352
-
353
- ```css
354
- :root {
355
- /* Grayscale */
356
- --black-1000: #000000;
357
- --black-900: #131415;
358
- --black-800: #1C1D1F;
359
- --black-700: #2A2B2E;
360
- /* ... */
361
- --white-00: #FFFFFF;
362
- --white-25: #FAFAFA;
363
- --white-100: #F9F9F9;
364
- /* ... */
365
-
366
- /* Brand colors */
367
- --purple-1000: #4200FF;
368
- --purple-900: #5215CC;
369
- /* ... */
370
-
371
- /* Alpha channels */
372
- --black-alpha-5: rgba(0, 0, 0, 0.05);
373
- --black-alpha-10: rgba(0, 0, 0, 0.10);
374
- --white-alpha-20: rgba(255, 255, 255, 0.20);
375
- /* ... */
376
-
377
- /* Theme-specific mappings */
378
- --background-system-dark-body-base: var(--black-1000);
379
- --background-system-light-body-base: var(--white-00);
380
- /* ... */
381
- }
382
- ```
383
-
384
- ### Example: Using TORCH Colors
385
-
386
- ```html
387
- <!-- These automatically adapt based on data-theme -->
388
- <div class="bg-background-system-body-primary">
389
- <h1 class="text-content-system-global-primary">Title</h1>
390
- <p class="text-content-system-global-secondary">Description</p>
391
- </div>
392
- ```
393
-
394
- ### Integration with ThemeProvider
395
-
396
- ```tsx
397
- import { ThemeProvider } from "@/providers/ThemeProvider";
398
-
399
- function App() {
400
- return (
401
- <ThemeProvider defaultTheme="dark" defaultThemeMode="TORCH">
402
- {/* Components automatically use TORCH color system */}
403
- <YourApp />
404
- </ThemeProvider>
405
- );
406
- }
407
- ```
408
-
409
- ---
410
-
411
- ## glare-typography
412
-
413
- Complete typography system with 48 utility classes covering Display, Headers, Labels, and Body text with multiple font weights.
414
-
415
- ### Features
416
-
417
- - 48 typography utility classes
418
- - 4 text categories: Display, Headers, Labels, Body
419
- - 4 font weights per category: Bold, Semibold, Medium, Regular
420
- - Consistent line heights and letter spacing
421
- - Responsive and scalable
422
- - Production-ready typography scale
423
-
424
- ### Installation
425
-
426
- ```bash
427
- npm install glare-typography
428
- ```
429
-
430
- ### Setup
431
-
432
- ```ts
433
- // tailwind.config.ts
434
- import type { Config } from "tailwindcss";
435
-
436
- export default {
437
- content: ["./src/**/*.{js,ts,jsx,tsx}"],
438
- theme: {},
439
- plugins: [
440
- require('glare-typography'),
441
- ],
442
- } satisfies Config;
443
- ```
444
-
445
- ### Typography Scale
446
-
447
- #### Display Text (Large headings, heroes)
448
-
449
- | Class | Size | Line Height | Weight | Letter Spacing |
450
- |-------|------|-------------|--------|----------------|
451
- | `typography-display-large-bold` | 34px | 120% | 700 | -0.34px |
452
- | `typography-display-large-semibold` | 34px | 120% | 590 | -0.34px |
453
- | `typography-display-large-medium` | 34px | 120% | 510 | -0.34px |
454
- | `typography-display-large-regular` | 34px | 120% | 400 | -0.34px |
455
- | `typography-display-medium-bold` | 28px | 120% | 700 | -0.28px |
456
- | `typography-display-medium-semibold` | 28px | 120% | 590 | -0.28px |
457
- | `typography-display-medium-medium` | 28px | 120% | 510 | -0.28px |
458
- | `typography-display-medium-regular` | 28px | 120% | 400 | -0.28px |
459
- | `typography-display-small-bold` | 22px | 120% | 700 | -0.22px |
460
- | `typography-display-small-semibold` | 22px | 120% | 590 | -0.22px |
461
- | `typography-display-small-medium` | 22px | 120% | 510 | -0.22px |
462
- | `typography-display-small-regular` | 22px | 120% | 400 | -0.22px |
463
-
464
- #### Headers (Page/section titles)
465
-
466
- | Class | Size | Line Height | Weight | Letter Spacing |
467
- |-------|------|-------------|--------|----------------|
468
- | `typography-headers-large-bold` | 20px | 132% | 700 | -0.2px |
469
- | `typography-headers-large-semibold` | 20px | 132% | 590 | -0.2px |
470
- | `typography-headers-large-medium` | 20px | 132% | 510 | -0.2px |
471
- | `typography-headers-large-regular` | 20px | 132% | 400 | -0.2px |
472
- | `typography-headers-medium-bold` | 18px | 132% | 700 | -0.18px |
473
- | `typography-headers-medium-semibold` | 18px | 132% | 590 | -0.18px |
474
- | `typography-headers-medium-medium` | 18px | 132% | 510 | -0.18px |
475
- | `typography-headers-medium-regular` | 18px | 132% | 400 | -0.18px |
476
- | `typography-headers-small-bold` | 16px | 132% | 700 | -0.16px |
477
- | `typography-headers-small-semibold` | 16px | 132% | 590 | -0.16px |
478
- | `typography-headers-small-medium` | 16px | 132% | 510 | -0.16px |
479
- | `typography-headers-small-regular` | 16px | 132% | 400 | -0.16px |
480
-
481
- #### Labels (Form labels, tags, badges)
482
-
483
- | Class | Size | Line Height | Weight | Letter Spacing |
484
- |-------|------|-------------|--------|----------------|
485
- | `typography-labels-large-bold` | 11px | 142% | 700 | 0.22px |
486
- | `typography-labels-large-semibold` | 11px | 142% | 590 | 0.22px |
487
- | `typography-labels-large-medium` | 11px | 142% | 510 | 0.22px |
488
- | `typography-labels-large-regular` | 11px | 142% | 400 | 0.22px |
489
- | `typography-labels-medium-bold` | 10px | 142% | 700 | 0.2px |
490
- | `typography-labels-medium-semibold` | 10px | 142% | 590 | 0.2px |
491
- | `typography-labels-medium-medium` | 10px | 142% | 510 | 0.2px |
492
- | `typography-labels-medium-regular` | 10px | 142% | 400 | 0.2px |
493
- | `typography-labels-small-bold` | 9px | 142% | 700 | 0.18px |
494
- | `typography-labels-small-semibold` | 9px | 142% | 590 | 0.18px |
495
- | `typography-labels-small-medium` | 9px | 142% | 510 | 0.18px |
496
- | `typography-labels-small-regular` | 9px | 142% | 400 | 0.18px |
497
-
498
- #### Body Text (Paragraphs, content)
499
-
500
- | Class | Size | Line Height | Weight | Letter Spacing |
501
- |-------|------|-------------|--------|----------------|
502
- | `typography-body-large-bold` | 16px | 148% | 700 | 0 |
503
- | `typography-body-large-semibold` | 16px | 148% | 590 | 0 |
504
- | `typography-body-large-medium` | 16px | 148% | 510 | 0 |
505
- | `typography-body-large-regular` | 16px | 147.5% | 400 | 0 |
506
- | `typography-body-medium-bold` | 14px | 148% | 700 | 0 |
507
- | `typography-body-medium-semibold` | 14px | 148% | 590 | 0 |
508
- | `typography-body-medium-medium` | 14px | 148% | 510 | 0 |
509
- | `typography-body-medium-regular` | 14px | 147.5% | 400 | 0 |
510
- | `typography-body-small-bold` | 12px | 148% | 700 | 0 |
511
- | `typography-body-small-semibold` | 12px | 148% | 590 | 0 |
512
- | `typography-body-small-medium` | 12px | 148% | 510 | 0 |
513
- | `typography-body-small-regular` | 12px | 147.5% | 400 | 0 |
514
-
515
- ### Usage Examples
516
-
517
- #### Landing Page Hero
518
-
519
- ```html
520
- <section class="hero">
521
- <h1 class="typography-display-large-bold">
522
- Welcome to TORCH Glare
523
- </h1>
524
- <p class="typography-body-large-regular">
525
- A comprehensive design system for modern applications
526
- </p>
527
- </section>
528
- ```
529
-
530
- #### Article Layout
531
-
532
- ```html
533
- <article>
534
- <h1 class="typography-display-medium-bold">Article Title</h1>
535
- <p class="typography-body-medium-regular">
536
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
537
- </p>
538
-
539
- <h2 class="typography-headers-large-semibold">Section Heading</h2>
540
- <p class="typography-body-medium-regular">
541
- More content here...
542
- </p>
543
-
544
- <h3 class="typography-headers-medium-semibold">Subsection</h3>
545
- <p class="typography-body-small-regular">
546
- Detailed information...
547
- </p>
548
- </article>
549
- ```
550
-
551
- #### Form with Labels
552
-
553
- ```html
554
- <form>
555
- <div class="field">
556
- <label class="typography-labels-medium-semibold">
557
- Email Address
558
- </label>
559
- <input type="email" class="typography-body-medium-regular" />
560
- </div>
561
-
562
- <button class="typography-body-medium-bold">
563
- Submit
564
- </button>
565
- </form>
566
- ```
567
-
568
- #### Dashboard Card
569
-
570
- ```html
571
- <div class="card">
572
- <h3 class="typography-headers-small-bold">Statistics</h3>
573
- <div class="stat">
574
- <span class="typography-labels-small-regular">Total Users</span>
575
- <span class="typography-display-small-bold">1,234</span>
576
- </div>
577
- <p class="typography-body-small-regular">
578
- Updated 5 minutes ago
579
- </p>
580
- </div>
581
- ```
582
-
583
- #### Badge Component
584
-
585
- ```tsx
586
- function Badge({ children, variant }: {
587
- children: React.ReactNode;
588
- variant: 'success' | 'warning' | 'error';
589
- }) {
590
- return (
591
- <span className={cn(
592
- 'typography-labels-small-semibold',
593
- 'px-2 py-1 rounded',
594
- variant === 'success' && 'bg-green-100 text-green-800',
595
- variant === 'warning' && 'bg-yellow-100 text-yellow-800',
596
- variant === 'error' && 'bg-red-100 text-red-800'
597
- )}>
598
- {children}
599
- </span>
600
- );
601
- }
602
- ```
603
-
604
- ### Customization
605
-
606
- Override or extend the default typography in your `tailwind.config.ts`:
607
-
608
- ```ts
609
- export default {
610
- theme: {
611
- extend: {
612
- typography: {
613
- 'display-large-bold': {
614
- fontSize: '36px',
615
- lineHeight: '125%',
616
- fontWeight: '700',
617
- letterSpacing: '-0.36px',
618
- },
619
- },
620
- },
621
- },
622
- plugins: [
623
- require('glare-typography'),
624
- ],
625
- } satisfies Config;
626
- ```
627
-
628
- ---
629
-
630
- ## Complete Setup Example
631
-
632
- ### Recommended Configuration
633
-
634
- ```ts
635
- // tailwind.config.ts
636
- import type { Config } from "tailwindcss";
637
-
638
- export default {
639
- content: [
640
- "./app/**/*.{js,ts,jsx,tsx}",
641
- "./src/**/*.{js,ts,jsx,tsx}",
642
- ],
643
- theme: {
644
- extend: {
645
- containers: {
646
- xs: "320px",
647
- sm: "600px",
648
- md: "768px",
649
- lg: "1024px",
650
- xl: "1280px",
651
- "2xl": "1536px",
652
- },
653
- },
654
- },
655
- plugins: [
656
- // Color system (required first)
657
- require('mapping-color-system'),
658
-
659
- // TORCH mode (required with color system)
660
- require('glare-torch-mode'),
661
-
662
- // Typography system
663
- require('glare-typography'),
664
-
665
- // Additional Tailwind plugins
666
- require('@tailwindcss/container-queries'),
667
- require('tailwindcss-animate'),
668
- require('tailwind-scrollbar-hide'),
669
- ],
670
- } satisfies Config;
671
- ```
672
-
673
- ### Application Setup
674
-
675
- ```tsx
676
- // app/layout.tsx (Next.js App Router)
677
- import { ThemeProvider } from "@/providers/ThemeProvider";
678
- import './globals.css';
679
-
680
- export default function RootLayout({
681
- children,
682
- }: {
683
- children: React.ReactNode;
684
- }) {
685
- return (
686
- <html lang="en">
687
- <body>
688
- <ThemeProvider defaultTheme="dark" defaultThemeMode="TORCH">
689
- {children}
690
- </ThemeProvider>
691
- </body>
692
- </html>
693
- );
694
- }
695
- ```
696
-
697
- ### Global Styles
698
-
699
- ```css
700
- /* globals.css */
701
- @tailwind base;
702
- @tailwind components;
703
- @tailwind utilities;
704
-
705
- /* Optional: Set default font */
706
- body {
707
- font-family: system-ui, -apple-system, sans-serif;
708
- }
709
- ```
710
-
711
- ---
712
-
713
- ## Testing
714
-
715
- ### Testing Theme Switching
716
-
717
- ```tsx
718
- import { render } from '@testing-library/react';
719
-
720
- describe('Theme switching', () => {
721
- it('should apply dark theme classes', () => {
722
- document.documentElement.setAttribute('data-theme', 'dark');
723
-
724
- const { container } = render(
725
- <div className="bg-background-system-body-primary">
726
- Content
727
- </div>
728
- );
729
-
730
- expect(container.querySelector('div')).toHaveClass(
731
- 'bg-background-system-body-primary'
732
- );
733
- });
734
- });
735
- ```
736
-
737
- ### Testing Typography
738
-
739
- ```tsx
740
- describe('Typography classes', () => {
741
- it('should apply correct font styles', () => {
742
- const { getByText } = render(
743
- <h1 className="typography-display-large-bold">Title</h1>
744
- );
745
-
746
- const heading = getByText('Title');
747
- const styles = window.getComputedStyle(heading);
748
-
749
- expect(styles.fontSize).toBe('34px');
750
- expect(styles.fontWeight).toBe('700');
751
- expect(styles.lineHeight).toBe('120%');
752
- });
753
- });
754
- ```
755
-
756
- ---
757
-
758
- ## TypeScript Support
759
-
760
- All plugins work seamlessly with TypeScript. Use Tailwind's IntelliSense for autocomplete:
761
-
762
- ```tsx
763
- // Type-safe Tailwind classes
764
- function Component() {
765
- return (
766
- <div className="
767
- bg-background-system-body-primary
768
- text-content-presentation-global-primary
769
- typography-body-medium-regular
770
- ">
771
- TypeScript + Tailwind
772
- </div>
773
- );
774
- }
775
- ```
776
-
777
- ---
778
-
779
- ## Performance Considerations
780
-
781
- ### CSS Output Size
782
-
783
- The plugins generate CSS custom properties that are reused across your application:
784
-
785
- - **mapping-color-system**: ~15KB (gzipped)
786
- - **glare-torch-mode**: ~25KB (gzipped)
787
- - **glare-typography**: ~3KB (gzipped)
788
-
789
- ### Optimization Tips
790
-
791
- 1. **PurgeCSS**: Automatically removes unused classes in production
792
- 2. **CSS Minification**: Use cssnano or similar for minification
793
- 3. **Critical CSS**: Extract above-the-fold CSS for faster initial paint
794
-
795
- ```ts
796
- // tailwind.config.ts
797
- export default {
798
- content: [
799
- "./src/**/*.{js,ts,jsx,tsx}",
800
- ],
801
- // PurgeCSS automatically enabled in production
802
- } satisfies Config;
803
- ```
804
-
805
- ---
806
-
807
- ## Best Practices
808
-
809
- ### 1. Always Use Companion Plugins
810
-
811
- ```ts
812
- // ✓ Good - Both required plugins
813
- plugins: [
814
- require('mapping-color-system'),
815
- require('glare-torch-mode'),
816
- ]
817
-
818
- // ✗ Bad - Missing glare-torch-mode
819
- plugins: [
820
- require('mapping-color-system'),
821
- ]
822
- ```
823
-
824
- ### 2. Set Theme Attribute Early
825
-
826
- ```html
827
- <!-- Set on <html> for best performance -->
828
- <html data-theme="dark" data-theme-mode="TORCH">
829
- <body>
830
- <!-- Content -->
831
- </body>
832
- </html>
833
- ```
834
-
835
- ### 3. Use Semantic Typography Classes
836
-
837
- ```tsx
838
- // ✓ Good - Semantic typography
839
- <h1 className="typography-display-large-bold">Title</h1>
840
- <p className="typography-body-medium-regular">Content</p>
841
-
842
- // ✗ Bad - Manual font sizing
843
- <h1 className="text-[34px] font-bold leading-[120%]">Title</h1>
844
- ```
845
-
846
- ### 4. Leverage Color Tokens
847
-
848
- ```tsx
849
- // ✓ Good - Theme-aware color tokens
850
- <div className="bg-background-presentation-form-base">
851
-
852
- // ✗ Bad - Hardcoded colors
853
- <div className="bg-white dark:bg-black">
854
- ```
855
-
856
- ---
857
-
858
- ## Migration Guide
859
-
860
- ### From Custom Theme Implementation
861
-
862
- ```diff
863
- // Before: Manual dark mode
864
- - <div className="bg-white dark:bg-gray-900">
865
-
866
- // After: Using TORCH color system
867
- + <div className="bg-background-system-body-primary">
868
- ```
869
-
870
- ### From Tailwind Default Typography
871
-
872
- ```diff
873
- // Before: Tailwind default
874
- - <h1 className="text-3xl font-bold">
875
-
876
- // After: TORCH typography
877
- + <h1 className="typography-display-large-bold">
878
- ```
879
-
880
- ---
881
-
882
- ## Troubleshooting
883
-
884
- ### Colors Not Updating
885
-
886
- **Problem**: Theme colors don't change when switching themes.
887
-
888
- **Solution**: Ensure both plugins are installed:
889
-
890
- ```ts
891
- plugins: [
892
- require('mapping-color-system'), // ← Required
893
- require('glare-torch-mode'), // ← Required
894
- ]
895
- ```
896
-
897
- ### Typography Classes Not Working
898
-
899
- **Problem**: Typography classes have no effect.
900
-
901
- **Solution**: Verify plugin is installed and imported:
902
-
903
- ```bash
904
- npm install glare-typography
905
- ```
906
-
907
- ```ts
908
- plugins: [
909
- require('glare-typography'), // ← Add this
910
- ]
911
- ```
912
-
913
- ### CSS Variables Not Defined
914
-
915
- **Problem**: CSS custom properties are undefined.
916
-
917
- **Solution**: Check that `data-theme` attribute is set:
918
-
919
- ```html
920
- <html data-theme="dark">
921
- ```
922
-
923
- ---
924
-
925
- ## Browser Support
926
-
927
- All plugins support:
928
-
929
- - Chrome 90+
930
- - Firefox 88+
931
- - Safari 14+
932
- - Edge 90+
933
-
934
- **CSS Custom Properties**: Required for all plugins. No IE11 support.
935
-
936
- ---
937
-
938
- ## Related Documentation
939
-
940
- - [ThemeProvider](./providers.md) - React context for theme management
941
- - [Component Documentation](../components/) - All themed components
942
- - [Tailwind CSS Documentation](https://tailwindcss.com) - Official Tailwind docs