@jack200714/mafw 4.5.1 → 4.8.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 (330) hide show
  1. package/README.md +5 -2
  2. package/bin/mafw.js +16 -14
  3. package/gateway/dist/index.js +52 -38
  4. package/gateway/dist/media/media-plugin-loader.js +0 -12
  5. package/gateway/dist/plugins/hub.js +153 -19
  6. package/gateway/dist/routes/plugins.js +15 -5
  7. package/gateway/dist/runtime/event-broadcast.js +33 -0
  8. package/gateway/dist/runtime/loader.js +23 -13
  9. package/gateway/dist/usage/builtin-plugins/gateway.js +25 -3
  10. package/gateway/dist/usage/plugin-loader.js +0 -11
  11. package/gateway/package.json +2 -2
  12. package/package.json +1 -7
  13. package/packages/tui/dist/cli.js +8 -3
  14. package/.opencode/mafw/.backup-v61/parametric/base-skill-manifest.yaml +0 -2
  15. package/.opencode/mafw/STATUS.md +0 -6
  16. package/.opencode/mafw/ledger.md +0 -20
  17. package/.opencode/mafw/memory/.harmonic_index.json +0 -28
  18. package/.opencode/mafw/memory/.review_queue.json +0 -1
  19. package/.opencode/mafw/memory/tier3/parametric.json +0 -13
  20. package/.opencode/mafw/memory/tier3/test-goal.json +0 -19
  21. package/.opencode/mafw/memory-index.json +0 -6
  22. package/.opencode/mafw/parametric/base-skill-manifest.yaml +0 -2
  23. package/.opencode/mafw/waves.json +0 -4
  24. package/.opencode/opencode.json +0 -3
  25. package/.opencode/plugins/mafw-plugin.ts +0 -8
  26. package/.opencode/skills/banner-design/SKILL.md +0 -196
  27. package/.opencode/skills/banner-design/references/banner-sizes-and-styles.md +0 -118
  28. package/.opencode/skills/brand/SKILL.md +0 -97
  29. package/.opencode/skills/brand/references/approval-checklist.md +0 -169
  30. package/.opencode/skills/brand/references/asset-organization.md +0 -157
  31. package/.opencode/skills/brand/references/brand-guideline-template.md +0 -140
  32. package/.opencode/skills/brand/references/color-palette-management.md +0 -186
  33. package/.opencode/skills/brand/references/consistency-checklist.md +0 -94
  34. package/.opencode/skills/brand/references/logo-usage-rules.md +0 -185
  35. package/.opencode/skills/brand/references/messaging-framework.md +0 -85
  36. package/.opencode/skills/brand/references/typography-specifications.md +0 -214
  37. package/.opencode/skills/brand/references/update.md +0 -118
  38. package/.opencode/skills/brand/references/visual-identity.md +0 -96
  39. package/.opencode/skills/brand/references/voice-framework.md +0 -88
  40. package/.opencode/skills/brand/scripts/extract-colors.cjs +0 -341
  41. package/.opencode/skills/brand/scripts/inject-brand-context.cjs +0 -349
  42. package/.opencode/skills/brand/scripts/sync-brand-to-tokens.cjs +0 -248
  43. package/.opencode/skills/brand/scripts/tests/test_sync_brand_to_tokens.py +0 -52
  44. package/.opencode/skills/brand/scripts/validate-asset.cjs +0 -387
  45. package/.opencode/skills/brand/templates/brand-guidelines-starter.md +0 -275
  46. package/.opencode/skills/design/SKILL.md +0 -313
  47. package/.opencode/skills/design/data/cip/deliverables.csv +0 -51
  48. package/.opencode/skills/design/data/cip/industries.csv +0 -21
  49. package/.opencode/skills/design/data/cip/mockup-contexts.csv +0 -21
  50. package/.opencode/skills/design/data/cip/styles.csv +0 -21
  51. package/.opencode/skills/design/data/icon/styles.csv +0 -16
  52. package/.opencode/skills/design/data/logo/colors.csv +0 -56
  53. package/.opencode/skills/design/data/logo/industries.csv +0 -56
  54. package/.opencode/skills/design/data/logo/styles.csv +0 -56
  55. package/.opencode/skills/design/references/banner-sizes-and-styles.md +0 -118
  56. package/.opencode/skills/design/references/cip-deliverable-guide.md +0 -95
  57. package/.opencode/skills/design/references/cip-design.md +0 -121
  58. package/.opencode/skills/design/references/cip-prompt-engineering.md +0 -84
  59. package/.opencode/skills/design/references/cip-style-guide.md +0 -68
  60. package/.opencode/skills/design/references/design-routing.md +0 -207
  61. package/.opencode/skills/design/references/icon-design.md +0 -122
  62. package/.opencode/skills/design/references/logo-color-psychology.md +0 -101
  63. package/.opencode/skills/design/references/logo-design.md +0 -92
  64. package/.opencode/skills/design/references/logo-prompt-engineering.md +0 -158
  65. package/.opencode/skills/design/references/logo-style-guide.md +0 -109
  66. package/.opencode/skills/design/references/slides-copywriting-formulas.md +0 -84
  67. package/.opencode/skills/design/references/slides-create.md +0 -4
  68. package/.opencode/skills/design/references/slides-html-template.md +0 -295
  69. package/.opencode/skills/design/references/slides-layout-patterns.md +0 -137
  70. package/.opencode/skills/design/references/slides-strategies.md +0 -94
  71. package/.opencode/skills/design/references/slides.md +0 -42
  72. package/.opencode/skills/design/references/social-photos-design.md +0 -329
  73. package/.opencode/skills/design/scripts/cip/core.py +0 -215
  74. package/.opencode/skills/design/scripts/cip/generate.py +0 -484
  75. package/.opencode/skills/design/scripts/cip/render-html.py +0 -424
  76. package/.opencode/skills/design/scripts/cip/search.py +0 -127
  77. package/.opencode/skills/design/scripts/icon/generate.py +0 -487
  78. package/.opencode/skills/design/scripts/logo/core.py +0 -175
  79. package/.opencode/skills/design/scripts/logo/generate.py +0 -362
  80. package/.opencode/skills/design/scripts/logo/search.py +0 -114
  81. package/.opencode/skills/design-system/SKILL.md +0 -244
  82. package/.opencode/skills/design-system/data/slide-backgrounds.csv +0 -11
  83. package/.opencode/skills/design-system/data/slide-charts.csv +0 -26
  84. package/.opencode/skills/design-system/data/slide-color-logic.csv +0 -14
  85. package/.opencode/skills/design-system/data/slide-copy.csv +0 -26
  86. package/.opencode/skills/design-system/data/slide-layout-logic.csv +0 -16
  87. package/.opencode/skills/design-system/data/slide-layouts.csv +0 -26
  88. package/.opencode/skills/design-system/data/slide-strategies.csv +0 -16
  89. package/.opencode/skills/design-system/data/slide-typography.csv +0 -15
  90. package/.opencode/skills/design-system/references/component-specs.md +0 -236
  91. package/.opencode/skills/design-system/references/component-tokens.md +0 -214
  92. package/.opencode/skills/design-system/references/primitive-tokens.md +0 -203
  93. package/.opencode/skills/design-system/references/semantic-tokens.md +0 -215
  94. package/.opencode/skills/design-system/references/states-and-variants.md +0 -241
  95. package/.opencode/skills/design-system/references/tailwind-integration.md +0 -251
  96. package/.opencode/skills/design-system/references/token-architecture.md +0 -224
  97. package/.opencode/skills/design-system/scripts/embed-tokens.cjs +0 -99
  98. package/.opencode/skills/design-system/scripts/fetch-background.py +0 -317
  99. package/.opencode/skills/design-system/scripts/generate-slide.py +0 -770
  100. package/.opencode/skills/design-system/scripts/generate-tokens.cjs +0 -205
  101. package/.opencode/skills/design-system/scripts/html-token-validator.py +0 -327
  102. package/.opencode/skills/design-system/scripts/search-slides.py +0 -218
  103. package/.opencode/skills/design-system/scripts/slide-token-validator.py +0 -35
  104. package/.opencode/skills/design-system/scripts/slide_search_core.py +0 -453
  105. package/.opencode/skills/design-system/scripts/tests/test_validate_tokens.py +0 -48
  106. package/.opencode/skills/design-system/scripts/validate-tokens.cjs +0 -246
  107. package/.opencode/skills/design-system/templates/design-tokens-starter.json +0 -143
  108. package/.opencode/skills/frontend-design/LICENSE.txt +0 -21
  109. package/.opencode/skills/frontend-design/SKILL.md +0 -115
  110. package/.opencode/skills/mafw-automation-interview/SKILL.md +0 -43
  111. package/.opencode/skills/mafw-cli-scanner/SKILL.md +0 -37
  112. package/.opencode/skills/mafw-compression-verifier/SKILL.md +0 -52
  113. package/.opencode/skills/mafw-desktop-inspector/SKILL.md +0 -170
  114. package/.opencode/skills/mafw-execute/SKILL.md +0 -62
  115. package/.opencode/skills/mafw-gateway-restart/SKILL.md +0 -87
  116. package/.opencode/skills/mafw-github-scanner/SKILL.md +0 -38
  117. package/.opencode/skills/mafw-goal/SKILL.md +0 -76
  118. package/.opencode/skills/mafw-interview/SKILL.md +0 -68
  119. package/.opencode/skills/mafw-memory-extractor/SKILL.md +0 -65
  120. package/.opencode/skills/mafw-plan/SKILL.md +0 -58
  121. package/.opencode/skills/mafw-review/SKILL.md +0 -85
  122. package/.opencode/skills/runtime-plugin-authoring/SKILL.md +0 -791
  123. package/.opencode/skills/slides/SKILL.md +0 -40
  124. package/.opencode/skills/slides/references/copywriting-formulas.md +0 -84
  125. package/.opencode/skills/slides/references/create.md +0 -4
  126. package/.opencode/skills/slides/references/html-template.md +0 -295
  127. package/.opencode/skills/slides/references/layout-patterns.md +0 -137
  128. package/.opencode/skills/slides/references/slide-strategies.md +0 -94
  129. package/.opencode/skills/ui-styling/LICENSE.txt +0 -202
  130. package/.opencode/skills/ui-styling/SKILL.md +0 -324
  131. package/.opencode/skills/ui-styling/references/canvas-design-system.md +0 -320
  132. package/.opencode/skills/ui-styling/references/shadcn-accessibility.md +0 -471
  133. package/.opencode/skills/ui-styling/references/shadcn-components.md +0 -424
  134. package/.opencode/skills/ui-styling/references/shadcn-theming.md +0 -373
  135. package/.opencode/skills/ui-styling/references/tailwind-customization.md +0 -483
  136. package/.opencode/skills/ui-styling/references/tailwind-responsive.md +0 -382
  137. package/.opencode/skills/ui-styling/references/tailwind-utilities.md +0 -455
  138. package/.opencode/skills/ui-styling/scripts/requirements.txt +0 -17
  139. package/.opencode/skills/ui-styling/scripts/shadcn_add.py +0 -308
  140. package/.opencode/skills/ui-styling/scripts/tailwind_config_gen.py +0 -473
  141. package/.opencode/skills/ui-styling/scripts/tests/coverage-ui.json +0 -1
  142. package/.opencode/skills/ui-styling/scripts/tests/requirements.txt +0 -3
  143. package/.opencode/skills/ui-styling/scripts/tests/test_shadcn_add.py +0 -266
  144. package/.opencode/skills/ui-styling/scripts/tests/test_tailwind_config_gen.py +0 -394
  145. package/.opencode/skills/ui-ux-pro-max/SKILL.md +0 -388
  146. package/.opencode/skills/ui-ux-pro-max/data/app-interface.csv +0 -31
  147. package/.opencode/skills/ui-ux-pro-max/data/charts.csv +0 -26
  148. package/.opencode/skills/ui-ux-pro-max/data/colors.csv +0 -193
  149. package/.opencode/skills/ui-ux-pro-max/data/google-fonts.csv +0 -1924
  150. package/.opencode/skills/ui-ux-pro-max/data/icons.csv +0 -106
  151. package/.opencode/skills/ui-ux-pro-max/data/landing.csv +0 -35
  152. package/.opencode/skills/ui-ux-pro-max/data/motion.csv +0 -17
  153. package/.opencode/skills/ui-ux-pro-max/data/products.csv +0 -193
  154. package/.opencode/skills/ui-ux-pro-max/data/react-performance.csv +0 -45
  155. package/.opencode/skills/ui-ux-pro-max/data/stacks/angular.csv +0 -51
  156. package/.opencode/skills/ui-ux-pro-max/data/stacks/astro.csv +0 -54
  157. package/.opencode/skills/ui-ux-pro-max/data/stacks/avalonia.csv +0 -57
  158. package/.opencode/skills/ui-ux-pro-max/data/stacks/flutter.csv +0 -53
  159. package/.opencode/skills/ui-ux-pro-max/data/stacks/html-tailwind.csv +0 -56
  160. package/.opencode/skills/ui-ux-pro-max/data/stacks/javafx.csv +0 -76
  161. package/.opencode/skills/ui-ux-pro-max/data/stacks/jetpack-compose.csv +0 -53
  162. package/.opencode/skills/ui-ux-pro-max/data/stacks/laravel.csv +0 -51
  163. package/.opencode/skills/ui-ux-pro-max/data/stacks/nextjs.csv +0 -53
  164. package/.opencode/skills/ui-ux-pro-max/data/stacks/nuxt-ui.csv +0 -71
  165. package/.opencode/skills/ui-ux-pro-max/data/stacks/nuxtjs.csv +0 -59
  166. package/.opencode/skills/ui-ux-pro-max/data/stacks/react-native.csv +0 -52
  167. package/.opencode/skills/ui-ux-pro-max/data/stacks/react.csv +0 -54
  168. package/.opencode/skills/ui-ux-pro-max/data/stacks/shadcn.csv +0 -61
  169. package/.opencode/skills/ui-ux-pro-max/data/stacks/svelte.csv +0 -54
  170. package/.opencode/skills/ui-ux-pro-max/data/stacks/swiftui.csv +0 -51
  171. package/.opencode/skills/ui-ux-pro-max/data/stacks/threejs.csv +0 -54
  172. package/.opencode/skills/ui-ux-pro-max/data/stacks/uno.csv +0 -60
  173. package/.opencode/skills/ui-ux-pro-max/data/stacks/uwp.csv +0 -56
  174. package/.opencode/skills/ui-ux-pro-max/data/stacks/vue.csv +0 -50
  175. package/.opencode/skills/ui-ux-pro-max/data/stacks/winui.csv +0 -60
  176. package/.opencode/skills/ui-ux-pro-max/data/stacks/wpf.csv +0 -57
  177. package/.opencode/skills/ui-ux-pro-max/data/styles.csv +0 -85
  178. package/.opencode/skills/ui-ux-pro-max/data/typography.csv +0 -75
  179. package/.opencode/skills/ui-ux-pro-max/data/ui-reasoning.csv +0 -162
  180. package/.opencode/skills/ui-ux-pro-max/data/ux-guidelines.csv +0 -100
  181. package/.opencode/skills/ui-ux-pro-max/scripts/core.py +0 -464
  182. package/.opencode/skills/ui-ux-pro-max/scripts/design_system.py +0 -1479
  183. package/.opencode/skills/ui-ux-pro-max/scripts/search.py +0 -162
  184. package/.opencode/skills/ui-ux-pro-max/scripts/tests/test_core.py +0 -134
  185. package/.opencode/skills/ui-ux-pro-max/scripts/tests/test_design_system_mode.py +0 -159
  186. package/.opencode/skills/ui-ux-pro-max/scripts/validate_data.py +0 -114
  187. package/dist/hooks/bash-python-guide.d.ts +0 -4
  188. package/dist/hooks/bash-python-guide.d.ts.map +0 -1
  189. package/dist/hooks/bash-python-guide.js +0 -67
  190. package/dist/hooks/bash-python-guide.js.map +0 -1
  191. package/dist/hooks/handoff.d.ts +0 -9
  192. package/dist/hooks/handoff.d.ts.map +0 -1
  193. package/dist/hooks/handoff.js +0 -8
  194. package/dist/hooks/handoff.js.map +0 -1
  195. package/dist/hooks/hook-manager.d.ts +0 -32
  196. package/dist/hooks/hook-manager.d.ts.map +0 -1
  197. package/dist/hooks/hook-manager.js +0 -91
  198. package/dist/hooks/hook-manager.js.map +0 -1
  199. package/dist/hooks/llm-after.d.ts +0 -8
  200. package/dist/hooks/llm-after.d.ts.map +0 -1
  201. package/dist/hooks/llm-after.js +0 -8
  202. package/dist/hooks/llm-after.js.map +0 -1
  203. package/dist/hooks/media-ingest.d.ts +0 -43
  204. package/dist/hooks/media-ingest.d.ts.map +0 -1
  205. package/dist/hooks/media-ingest.js +0 -269
  206. package/dist/hooks/media-ingest.js.map +0 -1
  207. package/dist/hooks/memory-guide.d.ts +0 -3
  208. package/dist/hooks/memory-guide.d.ts.map +0 -1
  209. package/dist/hooks/memory-guide.js +0 -47
  210. package/dist/hooks/memory-guide.js.map +0 -1
  211. package/dist/hooks/observation-capture.d.ts +0 -17
  212. package/dist/hooks/observation-capture.d.ts.map +0 -1
  213. package/dist/hooks/observation-capture.js +0 -20
  214. package/dist/hooks/observation-capture.js.map +0 -1
  215. package/dist/hooks/session-compacting.d.ts +0 -6
  216. package/dist/hooks/session-compacting.d.ts.map +0 -1
  217. package/dist/hooks/session-compacting.js +0 -6
  218. package/dist/hooks/session-compacting.js.map +0 -1
  219. package/dist/hooks/session-ending.d.ts +0 -20
  220. package/dist/hooks/session-ending.d.ts.map +0 -1
  221. package/dist/hooks/session-ending.js +0 -113
  222. package/dist/hooks/session-ending.js.map +0 -1
  223. package/dist/hooks/session-recall.d.ts +0 -2
  224. package/dist/hooks/session-recall.d.ts.map +0 -1
  225. package/dist/hooks/session-recall.js +0 -103
  226. package/dist/hooks/session-recall.js.map +0 -1
  227. package/dist/hooks/session-start.d.ts +0 -9
  228. package/dist/hooks/session-start.d.ts.map +0 -1
  229. package/dist/hooks/session-start.js +0 -42
  230. package/dist/hooks/session-start.js.map +0 -1
  231. package/dist/hooks/tool-before.d.ts +0 -10
  232. package/dist/hooks/tool-before.d.ts.map +0 -1
  233. package/dist/hooks/tool-before.js +0 -6
  234. package/dist/hooks/tool-before.js.map +0 -1
  235. package/dist/hooks/tool-executed.d.ts +0 -19
  236. package/dist/hooks/tool-executed.d.ts.map +0 -1
  237. package/dist/hooks/tool-executed.js +0 -12
  238. package/dist/hooks/tool-executed.js.map +0 -1
  239. package/dist/hooks/user-profile.d.ts +0 -2
  240. package/dist/hooks/user-profile.d.ts.map +0 -1
  241. package/dist/hooks/user-profile.js +0 -30
  242. package/dist/hooks/user-profile.js.map +0 -1
  243. package/dist/hooks/user-prompt.d.ts +0 -9
  244. package/dist/hooks/user-prompt.d.ts.map +0 -1
  245. package/dist/hooks/user-prompt.js +0 -8
  246. package/dist/hooks/user-prompt.js.map +0 -1
  247. package/dist/hooks/voice-guide.d.ts +0 -8
  248. package/dist/hooks/voice-guide.d.ts.map +0 -1
  249. package/dist/hooks/voice-guide.js +0 -101
  250. package/dist/hooks/voice-guide.js.map +0 -1
  251. package/dist/plugin.d.ts +0 -55
  252. package/dist/plugin.d.ts.map +0 -1
  253. package/dist/plugin.js +0 -342
  254. package/dist/plugin.js.map +0 -1
  255. package/dist/tools/add-memory.d.ts +0 -17
  256. package/dist/tools/add-memory.d.ts.map +0 -1
  257. package/dist/tools/add-memory.js +0 -60
  258. package/dist/tools/add-memory.js.map +0 -1
  259. package/dist/tools/media-ask.d.ts +0 -14
  260. package/dist/tools/media-ask.d.ts.map +0 -1
  261. package/dist/tools/media-ask.js +0 -224
  262. package/dist/tools/media-ask.js.map +0 -1
  263. package/dist/tools/media-speak.d.ts +0 -16
  264. package/dist/tools/media-speak.d.ts.map +0 -1
  265. package/dist/tools/media-speak.js +0 -78
  266. package/dist/tools/media-speak.js.map +0 -1
  267. package/dist/tools/media-upload.d.ts +0 -14
  268. package/dist/tools/media-upload.d.ts.map +0 -1
  269. package/dist/tools/media-upload.js +0 -155
  270. package/dist/tools/media-upload.js.map +0 -1
  271. package/dist/tools/python-exec.d.ts +0 -13
  272. package/dist/tools/python-exec.d.ts.map +0 -1
  273. package/dist/tools/python-exec.js +0 -99
  274. package/dist/tools/python-exec.js.map +0 -1
  275. package/dist/tools/python-restart.d.ts +0 -11
  276. package/dist/tools/python-restart.d.ts.map +0 -1
  277. package/dist/tools/python-restart.js +0 -33
  278. package/dist/tools/python-restart.js.map +0 -1
  279. package/dist/utils/circuit-breaker.d.ts +0 -23
  280. package/dist/utils/circuit-breaker.d.ts.map +0 -1
  281. package/dist/utils/circuit-breaker.js +0 -75
  282. package/dist/utils/circuit-breaker.js.map +0 -1
  283. package/dist/utils/config-loader.d.ts +0 -20
  284. package/dist/utils/config-loader.d.ts.map +0 -1
  285. package/dist/utils/config-loader.js +0 -194
  286. package/dist/utils/config-loader.js.map +0 -1
  287. package/dist/utils/fallback.d.ts +0 -7
  288. package/dist/utils/fallback.d.ts.map +0 -1
  289. package/dist/utils/fallback.js +0 -20
  290. package/dist/utils/fallback.js.map +0 -1
  291. package/dist/utils/git.d.ts +0 -24
  292. package/dist/utils/git.d.ts.map +0 -1
  293. package/dist/utils/git.js +0 -71
  294. package/dist/utils/git.js.map +0 -1
  295. package/dist/utils/github.d.ts +0 -37
  296. package/dist/utils/github.d.ts.map +0 -1
  297. package/dist/utils/github.js +0 -53
  298. package/dist/utils/github.js.map +0 -1
  299. package/dist/utils/global-path.d.ts +0 -2
  300. package/dist/utils/global-path.d.ts.map +0 -1
  301. package/dist/utils/global-path.js +0 -32
  302. package/dist/utils/global-path.js.map +0 -1
  303. package/dist/utils/logger.d.ts +0 -6
  304. package/dist/utils/logger.d.ts.map +0 -1
  305. package/dist/utils/logger.js +0 -69
  306. package/dist/utils/logger.js.map +0 -1
  307. package/dist/utils/obs-capture.d.ts +0 -7
  308. package/dist/utils/obs-capture.d.ts.map +0 -1
  309. package/dist/utils/obs-capture.js +0 -49
  310. package/dist/utils/obs-capture.js.map +0 -1
  311. package/dist/utils/retry.d.ts +0 -11
  312. package/dist/utils/retry.d.ts.map +0 -1
  313. package/dist/utils/retry.js +0 -45
  314. package/dist/utils/retry.js.map +0 -1
  315. package/dist/utils/self-wiring.d.ts +0 -13
  316. package/dist/utils/self-wiring.d.ts.map +0 -1
  317. package/dist/utils/self-wiring.js +0 -86
  318. package/dist/utils/self-wiring.js.map +0 -1
  319. package/dist/utils/state.d.ts +0 -106
  320. package/dist/utils/state.d.ts.map +0 -1
  321. package/dist/utils/state.js +0 -166
  322. package/dist/utils/state.js.map +0 -1
  323. package/dist/utils/status.d.ts +0 -47
  324. package/dist/utils/status.d.ts.map +0 -1
  325. package/dist/utils/status.js +0 -147
  326. package/dist/utils/status.js.map +0 -1
  327. package/dist/utils/ttl-map.d.ts +0 -17
  328. package/dist/utils/ttl-map.d.ts.map +0 -1
  329. package/dist/utils/ttl-map.js +0 -67
  330. package/dist/utils/ttl-map.js.map +0 -1
package/.opencode/skills/ui-styling/references/shadcn-theming.md DELETED
@@ -1,373 +0,0 @@
1
- # shadcn/ui Theming & Customization
2
-
3
- Theme configuration, CSS variables, dark mode, and component customization.
4
-
5
- ## Dark Mode Setup
6
-
7
- ### Next.js App Router
8
-
9
- **1. Install next-themes:**
10
- ```bash
11
- npm install next-themes
12
- ```
13
-
14
- **2. Create theme provider:**
15
- ```tsx
16
- // components/theme-provider.tsx
17
- "use client"
18
-
19
- import * as React from "react"
20
- import { ThemeProvider as NextThemesProvider } from "next-themes"
21
-
22
- export function ThemeProvider({
23
- children,
24
- ...props
25
- }: React.ComponentProps<typeof NextThemesProvider>) {
26
- return <NextThemesProvider {...props}>{children}</NextThemesProvider>
27
- }
28
- ```
29
-
30
- **3. Wrap app:**
31
- ```tsx
32
- // app/layout.tsx
33
- import { ThemeProvider } from "@/components/theme-provider"
34
-
35
- export default function RootLayout({ children }) {
36
- return (
37
- <html lang="en" suppressHydrationWarning>
38
- <body>
39
- <ThemeProvider
40
- attribute="class"
41
- defaultTheme="system"
42
- enableSystem
43
- disableTransitionOnChange
44
- >
45
- {children}
46
- </ThemeProvider>
47
- </body>
48
- </html>
49
- )
50
- }
51
- ```
52
-
53
- **4. Theme toggle component:**
54
- ```tsx
55
- import { Moon, Sun } from "lucide-react"
56
- import { useTheme } from "next-themes"
57
- import { Button } from "@/components/ui/button"
58
-
59
- export function ThemeToggle() {
60
- const { setTheme, theme } = useTheme()
61
-
62
- return (
63
- <Button
64
- variant="ghost"
65
- size="icon"
66
- onClick={() => setTheme(theme === "light" ? "dark" : "light")}
67
- >
68
- <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
69
- <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
70
- <span className="sr-only">Toggle theme</span>
71
- </Button>
72
- )
73
- }
74
- ```
75
-
76
- ### Vite / Other Frameworks
77
-
78
- Use similar approach with next-themes or implement custom solution:
79
-
80
- ```javascript
81
- // Store preference
82
- function toggleDarkMode() {
83
- const isDark = document.documentElement.classList.toggle('dark')
84
- localStorage.setItem('theme', isDark ? 'dark' : 'light')
85
- }
86
-
87
- // Initialize on load
88
- if (localStorage.theme === 'dark' ||
89
- (!('theme' in localStorage) &&
90
- window.matchMedia('(prefers-color-scheme: dark)').matches)) {
91
- document.documentElement.classList.add('dark')
92
- }
93
- ```
94
-
95
- ## CSS Variable System
96
-
97
- shadcn/ui uses CSS variables for theming. Variables defined in `globals.css`:
98
-
99
- ```css
100
- @layer base {
101
- :root {
102
- --background: 0 0% 100%;
103
- --foreground: 222.2 84% 4.9%;
104
- --primary: 222.2 47.4% 11.2%;
105
- --primary-foreground: 210 40% 98%;
106
- --secondary: 210 40% 96.1%;
107
- --secondary-foreground: 222.2 47.4% 11.2%;
108
- --muted: 210 40% 96.1%;
109
- --muted-foreground: 215.4 16.3% 46.9%;
110
- --accent: 210 40% 96.1%;
111
- --accent-foreground: 222.2 47.4% 11.2%;
112
- --destructive: 0 84.2% 60.2%;
113
- --destructive-foreground: 210 40% 98%;
114
- --border: 214.3 31.8% 91.4%;
115
- --input: 214.3 31.8% 91.4%;
116
- --ring: 222.2 84% 4.9%;
117
- --radius: 0.5rem;
118
- }
119
-
120
- .dark {
121
- --background: 222.2 84% 4.9%;
122
- --foreground: 210 40% 98%;
123
- --primary: 210 40% 98%;
124
- --primary-foreground: 222.2 47.4% 11.2%;
125
- --secondary: 217.2 32.6% 17.5%;
126
- --secondary-foreground: 210 40% 98%;
127
- --muted: 217.2 32.6% 17.5%;
128
- --muted-foreground: 215 20.2% 65.1%;
129
- --accent: 217.2 32.6% 17.5%;
130
- --accent-foreground: 210 40% 98%;
131
- --destructive: 0 62.8% 30.6%;
132
- --destructive-foreground: 210 40% 98%;
133
- --border: 217.2 32.6% 17.5%;
134
- --input: 217.2 32.6% 17.5%;
135
- --ring: 212.7 26.8% 83.9%;
136
- }
137
- }
138
- ```
139
-
140
- ### Color Format
141
-
142
- Values use HSL format without `hsl()` wrapper for better opacity control:
143
- ```css
144
- --primary: 222.2 47.4% 11.2%; /* H S L */
145
- ```
146
-
147
- Usage in Tailwind:
148
- ```css
149
- background: hsl(var(--primary));
150
- background: hsl(var(--primary) / 0.5); /* 50% opacity */
151
- ```
152
-
153
- ## Tailwind Configuration
154
-
155
- Map CSS variables to Tailwind utilities:
156
-
157
- ```ts
158
- // tailwind.config.ts
159
- export default {
160
- darkMode: ["class"],
161
- theme: {
162
- extend: {
163
- colors: {
164
- border: "hsl(var(--border))",
165
- input: "hsl(var(--input))",
166
- ring: "hsl(var(--ring))",
167
- background: "hsl(var(--background))",
168
- foreground: "hsl(var(--foreground))",
169
- primary: {
170
- DEFAULT: "hsl(var(--primary))",
171
- foreground: "hsl(var(--primary-foreground))",
172
- },
173
- secondary: {
174
- DEFAULT: "hsl(var(--secondary))",
175
- foreground: "hsl(var(--secondary-foreground))",
176
- },
177
- destructive: {
178
- DEFAULT: "hsl(var(--destructive))",
179
- foreground: "hsl(var(--destructive-foreground))",
180
- },
181
- muted: {
182
- DEFAULT: "hsl(var(--muted))",
183
- foreground: "hsl(var(--muted-foreground))",
184
- },
185
- accent: {
186
- DEFAULT: "hsl(var(--accent))",
187
- foreground: "hsl(var(--accent-foreground))",
188
- },
189
- },
190
- borderRadius: {
191
- lg: "var(--radius)",
192
- md: "calc(var(--radius) - 2px)",
193
- sm: "calc(var(--radius) - 4px)",
194
- },
195
- },
196
- },
197
- }
198
- ```
199
-
200
- ## Color Customization
201
-
202
- ### Method 1: Update CSS Variables
203
-
204
- Change colors by modifying CSS variables in `globals.css`:
205
-
206
- ```css
207
- :root {
208
- --primary: 262.1 83.3% 57.8%; /* Purple */
209
- --primary-foreground: 210 20% 98%;
210
- }
211
-
212
- .dark {
213
- --primary: 263.4 70% 50.4%; /* Darker purple */
214
- --primary-foreground: 210 20% 98%;
215
- }
216
- ```
217
-
218
- ### Method 2: Theme Generator
219
-
220
- Use shadcn/ui theme generator: https://ui.shadcn.com/themes
221
-
222
- Select base color, generate theme, copy CSS variables.
223
-
224
- ### Method 3: Multiple Themes
225
-
226
- Create theme variants with data attributes:
227
-
228
- ```css
229
- [data-theme="violet"] {
230
- --primary: 262.1 83.3% 57.8%;
231
- --primary-foreground: 210 20% 98%;
232
- }
233
-
234
- [data-theme="rose"] {
235
- --primary: 346.8 77.2% 49.8%;
236
- --primary-foreground: 355.7 100% 97.3%;
237
- }
238
- ```
239
-
240
- Apply theme:
241
- ```tsx
242
- <div data-theme="violet">
243
- <Button>Violet theme</Button>
244
- </div>
245
- ```
246
-
247
- ## Component Customization
248
-
249
- Components live in your codebase - modify directly.
250
-
251
- ### Customize Variants
252
-
253
- ```tsx
254
- // components/ui/button.tsx
255
- const buttonVariants = cva(
256
- "inline-flex items-center justify-center rounded-md text-sm font-medium",
257
- {
258
- variants: {
259
- variant: {
260
- default: "bg-primary text-primary-foreground",
261
- destructive: "bg-destructive text-destructive-foreground",
262
- outline: "border border-input bg-background",
263
- // Add custom variant
264
- gradient: "bg-gradient-to-r from-purple-500 to-pink-500 text-white",
265
- },
266
- size: {
267
- default: "h-10 px-4 py-2",
268
- sm: "h-9 rounded-md px-3",
269
- lg: "h-11 rounded-md px-8",
270
- // Add custom size
271
- xl: "h-14 rounded-md px-10 text-lg",
272
- },
273
- },
274
- defaultVariants: {
275
- variant: "default",
276
- size: "default",
277
- },
278
- }
279
- )
280
- ```
281
-
282
- Usage:
283
- ```tsx
284
- <Button variant="gradient" size="xl">Custom Button</Button>
285
- ```
286
-
287
- ### Customize Styles
288
-
289
- Modify base styles in component:
290
-
291
- ```tsx
292
- // components/ui/card.tsx
293
- const Card = React.forwardRef<
294
- HTMLDivElement,
295
- React.HTMLAttributes<HTMLDivElement>
296
- >(({ className, ...props }, ref) => (
297
- <div
298
- ref={ref}
299
- className={cn(
300
- "rounded-xl border bg-card text-card-foreground shadow-lg", // Modified
301
- className
302
- )}
303
- {...props}
304
- />
305
- ))
306
- ```
307
-
308
- ### Override with className
309
-
310
- Pass additional classes to override:
311
-
312
- ```tsx
313
- <Card className="border-2 border-purple-500 shadow-2xl hover:scale-105 transition-transform">
314
- Custom styled card
315
- </Card>
316
- ```
317
-
318
- ## Base Color Presets
319
-
320
- shadcn/ui provides base color presets during `init`:
321
-
322
- - **Slate**: Cool gray tones
323
- - **Gray**: Neutral gray
324
- - **Zinc**: Warm gray
325
- - **Neutral**: Balanced gray
326
- - **Stone**: Earthy gray
327
-
328
- Select during setup or change later by updating CSS variables.
329
-
330
- ## Style Variants
331
-
332
- Two component styles available:
333
-
334
- - **Default**: Softer, more rounded
335
- - **New York**: Sharp, more contrast
336
-
337
- Select during `init` or in `components.json`:
338
-
339
- ```json
340
- {
341
- "style": "new-york",
342
- "tailwind": {
343
- "cssVariables": true
344
- }
345
- }
346
- ```
347
-
348
- ## Radius Customization
349
-
350
- Control border radius globally:
351
-
352
- ```css
353
- :root {
354
- --radius: 0.5rem; /* Default */
355
- --radius: 0rem; /* Sharp corners */
356
- --radius: 1rem; /* Rounded */
357
- }
358
- ```
359
-
360
- Components use radius variable:
361
- ```tsx
362
- className="rounded-lg" /* Uses var(--radius) */
363
- ```
364
-
365
- ## Best Practices
366
-
367
- 1. **Use CSS Variables**: Enables runtime theme switching
368
- 2. **Consistent Foreground Colors**: Pair each color with appropriate foreground
369
- 3. **Test Both Themes**: Verify components in light and dark modes
370
- 4. **Semantic Naming**: Use `destructive` not `red`, `muted` not `gray`
371
- 5. **Accessibility**: Maintain sufficient color contrast (WCAG AA minimum)
372
- 6. **Component Overrides**: Use `className` prop for one-off customization
373
- 7. **Extract Patterns**: Create custom variants for repeated customizations