@jack200714/mafw 4.5.1 → 4.5.2

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 (320) hide show
  1. package/README.md +5 -2
  2. package/bin/mafw.js +16 -14
  3. package/package.json +1 -7
  4. package/.opencode/mafw/.backup-v61/parametric/base-skill-manifest.yaml +0 -2
  5. package/.opencode/mafw/STATUS.md +0 -6
  6. package/.opencode/mafw/ledger.md +0 -20
  7. package/.opencode/mafw/memory/.harmonic_index.json +0 -28
  8. package/.opencode/mafw/memory/.review_queue.json +0 -1
  9. package/.opencode/mafw/memory/tier3/parametric.json +0 -13
  10. package/.opencode/mafw/memory/tier3/test-goal.json +0 -19
  11. package/.opencode/mafw/memory-index.json +0 -6
  12. package/.opencode/mafw/parametric/base-skill-manifest.yaml +0 -2
  13. package/.opencode/mafw/waves.json +0 -4
  14. package/.opencode/opencode.json +0 -3
  15. package/.opencode/plugins/mafw-plugin.ts +0 -8
  16. package/.opencode/skills/banner-design/SKILL.md +0 -196
  17. package/.opencode/skills/banner-design/references/banner-sizes-and-styles.md +0 -118
  18. package/.opencode/skills/brand/SKILL.md +0 -97
  19. package/.opencode/skills/brand/references/approval-checklist.md +0 -169
  20. package/.opencode/skills/brand/references/asset-organization.md +0 -157
  21. package/.opencode/skills/brand/references/brand-guideline-template.md +0 -140
  22. package/.opencode/skills/brand/references/color-palette-management.md +0 -186
  23. package/.opencode/skills/brand/references/consistency-checklist.md +0 -94
  24. package/.opencode/skills/brand/references/logo-usage-rules.md +0 -185
  25. package/.opencode/skills/brand/references/messaging-framework.md +0 -85
  26. package/.opencode/skills/brand/references/typography-specifications.md +0 -214
  27. package/.opencode/skills/brand/references/update.md +0 -118
  28. package/.opencode/skills/brand/references/visual-identity.md +0 -96
  29. package/.opencode/skills/brand/references/voice-framework.md +0 -88
  30. package/.opencode/skills/brand/scripts/extract-colors.cjs +0 -341
  31. package/.opencode/skills/brand/scripts/inject-brand-context.cjs +0 -349
  32. package/.opencode/skills/brand/scripts/sync-brand-to-tokens.cjs +0 -248
  33. package/.opencode/skills/brand/scripts/tests/test_sync_brand_to_tokens.py +0 -52
  34. package/.opencode/skills/brand/scripts/validate-asset.cjs +0 -387
  35. package/.opencode/skills/brand/templates/brand-guidelines-starter.md +0 -275
  36. package/.opencode/skills/design/SKILL.md +0 -313
  37. package/.opencode/skills/design/data/cip/deliverables.csv +0 -51
  38. package/.opencode/skills/design/data/cip/industries.csv +0 -21
  39. package/.opencode/skills/design/data/cip/mockup-contexts.csv +0 -21
  40. package/.opencode/skills/design/data/cip/styles.csv +0 -21
  41. package/.opencode/skills/design/data/icon/styles.csv +0 -16
  42. package/.opencode/skills/design/data/logo/colors.csv +0 -56
  43. package/.opencode/skills/design/data/logo/industries.csv +0 -56
  44. package/.opencode/skills/design/data/logo/styles.csv +0 -56
  45. package/.opencode/skills/design/references/banner-sizes-and-styles.md +0 -118
  46. package/.opencode/skills/design/references/cip-deliverable-guide.md +0 -95
  47. package/.opencode/skills/design/references/cip-design.md +0 -121
  48. package/.opencode/skills/design/references/cip-prompt-engineering.md +0 -84
  49. package/.opencode/skills/design/references/cip-style-guide.md +0 -68
  50. package/.opencode/skills/design/references/design-routing.md +0 -207
  51. package/.opencode/skills/design/references/icon-design.md +0 -122
  52. package/.opencode/skills/design/references/logo-color-psychology.md +0 -101
  53. package/.opencode/skills/design/references/logo-design.md +0 -92
  54. package/.opencode/skills/design/references/logo-prompt-engineering.md +0 -158
  55. package/.opencode/skills/design/references/logo-style-guide.md +0 -109
  56. package/.opencode/skills/design/references/slides-copywriting-formulas.md +0 -84
  57. package/.opencode/skills/design/references/slides-create.md +0 -4
  58. package/.opencode/skills/design/references/slides-html-template.md +0 -295
  59. package/.opencode/skills/design/references/slides-layout-patterns.md +0 -137
  60. package/.opencode/skills/design/references/slides-strategies.md +0 -94
  61. package/.opencode/skills/design/references/slides.md +0 -42
  62. package/.opencode/skills/design/references/social-photos-design.md +0 -329
  63. package/.opencode/skills/design/scripts/cip/core.py +0 -215
  64. package/.opencode/skills/design/scripts/cip/generate.py +0 -484
  65. package/.opencode/skills/design/scripts/cip/render-html.py +0 -424
  66. package/.opencode/skills/design/scripts/cip/search.py +0 -127
  67. package/.opencode/skills/design/scripts/icon/generate.py +0 -487
  68. package/.opencode/skills/design/scripts/logo/core.py +0 -175
  69. package/.opencode/skills/design/scripts/logo/generate.py +0 -362
  70. package/.opencode/skills/design/scripts/logo/search.py +0 -114
  71. package/.opencode/skills/design-system/SKILL.md +0 -244
  72. package/.opencode/skills/design-system/data/slide-backgrounds.csv +0 -11
  73. package/.opencode/skills/design-system/data/slide-charts.csv +0 -26
  74. package/.opencode/skills/design-system/data/slide-color-logic.csv +0 -14
  75. package/.opencode/skills/design-system/data/slide-copy.csv +0 -26
  76. package/.opencode/skills/design-system/data/slide-layout-logic.csv +0 -16
  77. package/.opencode/skills/design-system/data/slide-layouts.csv +0 -26
  78. package/.opencode/skills/design-system/data/slide-strategies.csv +0 -16
  79. package/.opencode/skills/design-system/data/slide-typography.csv +0 -15
  80. package/.opencode/skills/design-system/references/component-specs.md +0 -236
  81. package/.opencode/skills/design-system/references/component-tokens.md +0 -214
  82. package/.opencode/skills/design-system/references/primitive-tokens.md +0 -203
  83. package/.opencode/skills/design-system/references/semantic-tokens.md +0 -215
  84. package/.opencode/skills/design-system/references/states-and-variants.md +0 -241
  85. package/.opencode/skills/design-system/references/tailwind-integration.md +0 -251
  86. package/.opencode/skills/design-system/references/token-architecture.md +0 -224
  87. package/.opencode/skills/design-system/scripts/embed-tokens.cjs +0 -99
  88. package/.opencode/skills/design-system/scripts/fetch-background.py +0 -317
  89. package/.opencode/skills/design-system/scripts/generate-slide.py +0 -770
  90. package/.opencode/skills/design-system/scripts/generate-tokens.cjs +0 -205
  91. package/.opencode/skills/design-system/scripts/html-token-validator.py +0 -327
  92. package/.opencode/skills/design-system/scripts/search-slides.py +0 -218
  93. package/.opencode/skills/design-system/scripts/slide-token-validator.py +0 -35
  94. package/.opencode/skills/design-system/scripts/slide_search_core.py +0 -453
  95. package/.opencode/skills/design-system/scripts/tests/test_validate_tokens.py +0 -48
  96. package/.opencode/skills/design-system/scripts/validate-tokens.cjs +0 -246
  97. package/.opencode/skills/design-system/templates/design-tokens-starter.json +0 -143
  98. package/.opencode/skills/frontend-design/LICENSE.txt +0 -21
  99. package/.opencode/skills/frontend-design/SKILL.md +0 -115
  100. package/.opencode/skills/mafw-automation-interview/SKILL.md +0 -43
  101. package/.opencode/skills/mafw-cli-scanner/SKILL.md +0 -37
  102. package/.opencode/skills/mafw-compression-verifier/SKILL.md +0 -52
  103. package/.opencode/skills/mafw-desktop-inspector/SKILL.md +0 -170
  104. package/.opencode/skills/mafw-execute/SKILL.md +0 -62
  105. package/.opencode/skills/mafw-gateway-restart/SKILL.md +0 -87
  106. package/.opencode/skills/mafw-github-scanner/SKILL.md +0 -38
  107. package/.opencode/skills/mafw-goal/SKILL.md +0 -76
  108. package/.opencode/skills/mafw-interview/SKILL.md +0 -68
  109. package/.opencode/skills/mafw-memory-extractor/SKILL.md +0 -65
  110. package/.opencode/skills/mafw-plan/SKILL.md +0 -58
  111. package/.opencode/skills/mafw-review/SKILL.md +0 -85
  112. package/.opencode/skills/runtime-plugin-authoring/SKILL.md +0 -791
  113. package/.opencode/skills/slides/SKILL.md +0 -40
  114. package/.opencode/skills/slides/references/copywriting-formulas.md +0 -84
  115. package/.opencode/skills/slides/references/create.md +0 -4
  116. package/.opencode/skills/slides/references/html-template.md +0 -295
  117. package/.opencode/skills/slides/references/layout-patterns.md +0 -137
  118. package/.opencode/skills/slides/references/slide-strategies.md +0 -94
  119. package/.opencode/skills/ui-styling/LICENSE.txt +0 -202
  120. package/.opencode/skills/ui-styling/SKILL.md +0 -324
  121. package/.opencode/skills/ui-styling/references/canvas-design-system.md +0 -320
  122. package/.opencode/skills/ui-styling/references/shadcn-accessibility.md +0 -471
  123. package/.opencode/skills/ui-styling/references/shadcn-components.md +0 -424
  124. package/.opencode/skills/ui-styling/references/shadcn-theming.md +0 -373
  125. package/.opencode/skills/ui-styling/references/tailwind-customization.md +0 -483
  126. package/.opencode/skills/ui-styling/references/tailwind-responsive.md +0 -382
  127. package/.opencode/skills/ui-styling/references/tailwind-utilities.md +0 -455
  128. package/.opencode/skills/ui-styling/scripts/requirements.txt +0 -17
  129. package/.opencode/skills/ui-styling/scripts/shadcn_add.py +0 -308
  130. package/.opencode/skills/ui-styling/scripts/tailwind_config_gen.py +0 -473
  131. package/.opencode/skills/ui-styling/scripts/tests/coverage-ui.json +0 -1
  132. package/.opencode/skills/ui-styling/scripts/tests/requirements.txt +0 -3
  133. package/.opencode/skills/ui-styling/scripts/tests/test_shadcn_add.py +0 -266
  134. package/.opencode/skills/ui-styling/scripts/tests/test_tailwind_config_gen.py +0 -394
  135. package/.opencode/skills/ui-ux-pro-max/SKILL.md +0 -388
  136. package/.opencode/skills/ui-ux-pro-max/data/app-interface.csv +0 -31
  137. package/.opencode/skills/ui-ux-pro-max/data/charts.csv +0 -26
  138. package/.opencode/skills/ui-ux-pro-max/data/colors.csv +0 -193
  139. package/.opencode/skills/ui-ux-pro-max/data/google-fonts.csv +0 -1924
  140. package/.opencode/skills/ui-ux-pro-max/data/icons.csv +0 -106
  141. package/.opencode/skills/ui-ux-pro-max/data/landing.csv +0 -35
  142. package/.opencode/skills/ui-ux-pro-max/data/motion.csv +0 -17
  143. package/.opencode/skills/ui-ux-pro-max/data/products.csv +0 -193
  144. package/.opencode/skills/ui-ux-pro-max/data/react-performance.csv +0 -45
  145. package/.opencode/skills/ui-ux-pro-max/data/stacks/angular.csv +0 -51
  146. package/.opencode/skills/ui-ux-pro-max/data/stacks/astro.csv +0 -54
  147. package/.opencode/skills/ui-ux-pro-max/data/stacks/avalonia.csv +0 -57
  148. package/.opencode/skills/ui-ux-pro-max/data/stacks/flutter.csv +0 -53
  149. package/.opencode/skills/ui-ux-pro-max/data/stacks/html-tailwind.csv +0 -56
  150. package/.opencode/skills/ui-ux-pro-max/data/stacks/javafx.csv +0 -76
  151. package/.opencode/skills/ui-ux-pro-max/data/stacks/jetpack-compose.csv +0 -53
  152. package/.opencode/skills/ui-ux-pro-max/data/stacks/laravel.csv +0 -51
  153. package/.opencode/skills/ui-ux-pro-max/data/stacks/nextjs.csv +0 -53
  154. package/.opencode/skills/ui-ux-pro-max/data/stacks/nuxt-ui.csv +0 -71
  155. package/.opencode/skills/ui-ux-pro-max/data/stacks/nuxtjs.csv +0 -59
  156. package/.opencode/skills/ui-ux-pro-max/data/stacks/react-native.csv +0 -52
  157. package/.opencode/skills/ui-ux-pro-max/data/stacks/react.csv +0 -54
  158. package/.opencode/skills/ui-ux-pro-max/data/stacks/shadcn.csv +0 -61
  159. package/.opencode/skills/ui-ux-pro-max/data/stacks/svelte.csv +0 -54
  160. package/.opencode/skills/ui-ux-pro-max/data/stacks/swiftui.csv +0 -51
  161. package/.opencode/skills/ui-ux-pro-max/data/stacks/threejs.csv +0 -54
  162. package/.opencode/skills/ui-ux-pro-max/data/stacks/uno.csv +0 -60
  163. package/.opencode/skills/ui-ux-pro-max/data/stacks/uwp.csv +0 -56
  164. package/.opencode/skills/ui-ux-pro-max/data/stacks/vue.csv +0 -50
  165. package/.opencode/skills/ui-ux-pro-max/data/stacks/winui.csv +0 -60
  166. package/.opencode/skills/ui-ux-pro-max/data/stacks/wpf.csv +0 -57
  167. package/.opencode/skills/ui-ux-pro-max/data/styles.csv +0 -85
  168. package/.opencode/skills/ui-ux-pro-max/data/typography.csv +0 -75
  169. package/.opencode/skills/ui-ux-pro-max/data/ui-reasoning.csv +0 -162
  170. package/.opencode/skills/ui-ux-pro-max/data/ux-guidelines.csv +0 -100
  171. package/.opencode/skills/ui-ux-pro-max/scripts/core.py +0 -464
  172. package/.opencode/skills/ui-ux-pro-max/scripts/design_system.py +0 -1479
  173. package/.opencode/skills/ui-ux-pro-max/scripts/search.py +0 -162
  174. package/.opencode/skills/ui-ux-pro-max/scripts/tests/test_core.py +0 -134
  175. package/.opencode/skills/ui-ux-pro-max/scripts/tests/test_design_system_mode.py +0 -159
  176. package/.opencode/skills/ui-ux-pro-max/scripts/validate_data.py +0 -114
  177. package/dist/hooks/bash-python-guide.d.ts +0 -4
  178. package/dist/hooks/bash-python-guide.d.ts.map +0 -1
  179. package/dist/hooks/bash-python-guide.js +0 -67
  180. package/dist/hooks/bash-python-guide.js.map +0 -1
  181. package/dist/hooks/handoff.d.ts +0 -9
  182. package/dist/hooks/handoff.d.ts.map +0 -1
  183. package/dist/hooks/handoff.js +0 -8
  184. package/dist/hooks/handoff.js.map +0 -1
  185. package/dist/hooks/hook-manager.d.ts +0 -32
  186. package/dist/hooks/hook-manager.d.ts.map +0 -1
  187. package/dist/hooks/hook-manager.js +0 -91
  188. package/dist/hooks/hook-manager.js.map +0 -1
  189. package/dist/hooks/llm-after.d.ts +0 -8
  190. package/dist/hooks/llm-after.d.ts.map +0 -1
  191. package/dist/hooks/llm-after.js +0 -8
  192. package/dist/hooks/llm-after.js.map +0 -1
  193. package/dist/hooks/media-ingest.d.ts +0 -43
  194. package/dist/hooks/media-ingest.d.ts.map +0 -1
  195. package/dist/hooks/media-ingest.js +0 -269
  196. package/dist/hooks/media-ingest.js.map +0 -1
  197. package/dist/hooks/memory-guide.d.ts +0 -3
  198. package/dist/hooks/memory-guide.d.ts.map +0 -1
  199. package/dist/hooks/memory-guide.js +0 -47
  200. package/dist/hooks/memory-guide.js.map +0 -1
  201. package/dist/hooks/observation-capture.d.ts +0 -17
  202. package/dist/hooks/observation-capture.d.ts.map +0 -1
  203. package/dist/hooks/observation-capture.js +0 -20
  204. package/dist/hooks/observation-capture.js.map +0 -1
  205. package/dist/hooks/session-compacting.d.ts +0 -6
  206. package/dist/hooks/session-compacting.d.ts.map +0 -1
  207. package/dist/hooks/session-compacting.js +0 -6
  208. package/dist/hooks/session-compacting.js.map +0 -1
  209. package/dist/hooks/session-ending.d.ts +0 -20
  210. package/dist/hooks/session-ending.d.ts.map +0 -1
  211. package/dist/hooks/session-ending.js +0 -113
  212. package/dist/hooks/session-ending.js.map +0 -1
  213. package/dist/hooks/session-recall.d.ts +0 -2
  214. package/dist/hooks/session-recall.d.ts.map +0 -1
  215. package/dist/hooks/session-recall.js +0 -103
  216. package/dist/hooks/session-recall.js.map +0 -1
  217. package/dist/hooks/session-start.d.ts +0 -9
  218. package/dist/hooks/session-start.d.ts.map +0 -1
  219. package/dist/hooks/session-start.js +0 -42
  220. package/dist/hooks/session-start.js.map +0 -1
  221. package/dist/hooks/tool-before.d.ts +0 -10
  222. package/dist/hooks/tool-before.d.ts.map +0 -1
  223. package/dist/hooks/tool-before.js +0 -6
  224. package/dist/hooks/tool-before.js.map +0 -1
  225. package/dist/hooks/tool-executed.d.ts +0 -19
  226. package/dist/hooks/tool-executed.d.ts.map +0 -1
  227. package/dist/hooks/tool-executed.js +0 -12
  228. package/dist/hooks/tool-executed.js.map +0 -1
  229. package/dist/hooks/user-profile.d.ts +0 -2
  230. package/dist/hooks/user-profile.d.ts.map +0 -1
  231. package/dist/hooks/user-profile.js +0 -30
  232. package/dist/hooks/user-profile.js.map +0 -1
  233. package/dist/hooks/user-prompt.d.ts +0 -9
  234. package/dist/hooks/user-prompt.d.ts.map +0 -1
  235. package/dist/hooks/user-prompt.js +0 -8
  236. package/dist/hooks/user-prompt.js.map +0 -1
  237. package/dist/hooks/voice-guide.d.ts +0 -8
  238. package/dist/hooks/voice-guide.d.ts.map +0 -1
  239. package/dist/hooks/voice-guide.js +0 -101
  240. package/dist/hooks/voice-guide.js.map +0 -1
  241. package/dist/plugin.d.ts +0 -55
  242. package/dist/plugin.d.ts.map +0 -1
  243. package/dist/plugin.js +0 -342
  244. package/dist/plugin.js.map +0 -1
  245. package/dist/tools/add-memory.d.ts +0 -17
  246. package/dist/tools/add-memory.d.ts.map +0 -1
  247. package/dist/tools/add-memory.js +0 -60
  248. package/dist/tools/add-memory.js.map +0 -1
  249. package/dist/tools/media-ask.d.ts +0 -14
  250. package/dist/tools/media-ask.d.ts.map +0 -1
  251. package/dist/tools/media-ask.js +0 -224
  252. package/dist/tools/media-ask.js.map +0 -1
  253. package/dist/tools/media-speak.d.ts +0 -16
  254. package/dist/tools/media-speak.d.ts.map +0 -1
  255. package/dist/tools/media-speak.js +0 -78
  256. package/dist/tools/media-speak.js.map +0 -1
  257. package/dist/tools/media-upload.d.ts +0 -14
  258. package/dist/tools/media-upload.d.ts.map +0 -1
  259. package/dist/tools/media-upload.js +0 -155
  260. package/dist/tools/media-upload.js.map +0 -1
  261. package/dist/tools/python-exec.d.ts +0 -13
  262. package/dist/tools/python-exec.d.ts.map +0 -1
  263. package/dist/tools/python-exec.js +0 -99
  264. package/dist/tools/python-exec.js.map +0 -1
  265. package/dist/tools/python-restart.d.ts +0 -11
  266. package/dist/tools/python-restart.d.ts.map +0 -1
  267. package/dist/tools/python-restart.js +0 -33
  268. package/dist/tools/python-restart.js.map +0 -1
  269. package/dist/utils/circuit-breaker.d.ts +0 -23
  270. package/dist/utils/circuit-breaker.d.ts.map +0 -1
  271. package/dist/utils/circuit-breaker.js +0 -75
  272. package/dist/utils/circuit-breaker.js.map +0 -1
  273. package/dist/utils/config-loader.d.ts +0 -20
  274. package/dist/utils/config-loader.d.ts.map +0 -1
  275. package/dist/utils/config-loader.js +0 -194
  276. package/dist/utils/config-loader.js.map +0 -1
  277. package/dist/utils/fallback.d.ts +0 -7
  278. package/dist/utils/fallback.d.ts.map +0 -1
  279. package/dist/utils/fallback.js +0 -20
  280. package/dist/utils/fallback.js.map +0 -1
  281. package/dist/utils/git.d.ts +0 -24
  282. package/dist/utils/git.d.ts.map +0 -1
  283. package/dist/utils/git.js +0 -71
  284. package/dist/utils/git.js.map +0 -1
  285. package/dist/utils/github.d.ts +0 -37
  286. package/dist/utils/github.d.ts.map +0 -1
  287. package/dist/utils/github.js +0 -53
  288. package/dist/utils/github.js.map +0 -1
  289. package/dist/utils/global-path.d.ts +0 -2
  290. package/dist/utils/global-path.d.ts.map +0 -1
  291. package/dist/utils/global-path.js +0 -32
  292. package/dist/utils/global-path.js.map +0 -1
  293. package/dist/utils/logger.d.ts +0 -6
  294. package/dist/utils/logger.d.ts.map +0 -1
  295. package/dist/utils/logger.js +0 -69
  296. package/dist/utils/logger.js.map +0 -1
  297. package/dist/utils/obs-capture.d.ts +0 -7
  298. package/dist/utils/obs-capture.d.ts.map +0 -1
  299. package/dist/utils/obs-capture.js +0 -49
  300. package/dist/utils/obs-capture.js.map +0 -1
  301. package/dist/utils/retry.d.ts +0 -11
  302. package/dist/utils/retry.d.ts.map +0 -1
  303. package/dist/utils/retry.js +0 -45
  304. package/dist/utils/retry.js.map +0 -1
  305. package/dist/utils/self-wiring.d.ts +0 -13
  306. package/dist/utils/self-wiring.d.ts.map +0 -1
  307. package/dist/utils/self-wiring.js +0 -86
  308. package/dist/utils/self-wiring.js.map +0 -1
  309. package/dist/utils/state.d.ts +0 -106
  310. package/dist/utils/state.d.ts.map +0 -1
  311. package/dist/utils/state.js +0 -166
  312. package/dist/utils/state.js.map +0 -1
  313. package/dist/utils/status.d.ts +0 -47
  314. package/dist/utils/status.d.ts.map +0 -1
  315. package/dist/utils/status.js +0 -147
  316. package/dist/utils/status.js.map +0 -1
  317. package/dist/utils/ttl-map.d.ts +0 -17
  318. package/dist/utils/ttl-map.d.ts.map +0 -1
  319. package/dist/utils/ttl-map.js +0 -67
  320. 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