@bobbykim/manguito-theme 0.25.0 → 0.27.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 (10) hide show
  1. package/CHANGELOG.md +204 -0
  2. package/README.md +81 -55
  3. package/dist/core.cjs +2 -2
  4. package/dist/core.d.ts +3 -3
  5. package/dist/core.js +487 -391
  6. package/dist/mcl-theme-v4.css +747 -0
  7. package/package.json +20 -11
  8. package/dist/mcl-theme.cjs +0 -1
  9. package/dist/mcl-theme.d.ts +0 -12
  10. package/dist/mcl-theme.js +0 -523
package/CHANGELOG.md ADDED
@@ -0,0 +1,204 @@
1
+ # Change Log
2
+
3
+ All notable changes to this project will be documented in this file.
4
+ See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
+
6
+ # [0.27.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.26.0...@bobbykim/manguito-theme@0.27.0) (2025-08-13)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **manguito-theme:** circular import fix ([3422509](https://github.com/bobbykim89/manguito-component-library/commit/3422509f87a7c16956e0c2288b11c6afe342cd36))
11
+
12
+ ### Features
13
+
14
+ - **manguito-theme,README.md,stories/introduction/:** update readme files ([3e84112](https://github.com/bobbykim89/manguito-component-library/commit/3e84112b421db970175e4233617d753441ce0d72))
15
+
16
+ ### BREAKING CHANGES
17
+
18
+ - **manguito-theme:** mcl-74
19
+
20
+ # [0.26.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.25.0...@bobbykim/manguito-theme@0.26.0) (2025-08-06)
21
+
22
+ ### Bug Fixes
23
+
24
+ - **mcl-cards:** update mcl-card-d ([06e95e0](https://github.com/bobbykim89/manguito-component-library/commit/06e95e060ea30bb446ec381a488747db275c0a49))
25
+
26
+ ### Features
27
+
28
+ - **manguito-theme/,-mcl-tabs/:** add outline related options for mcl class, update mcl-tabs-a ([7f5f5eb](https://github.com/bobbykim89/manguito-component-library/commit/7f5f5eb32ea34105408ac6ce31c7bed690d99afb))
29
+ - **manguito-theme/:** add container class ([a651338](https://github.com/bobbykim89/manguito-component-library/commit/a651338365d9e3e83fab457715ea19ff254e698a))
30
+ - **manguito-theme:** refactor and bug fix ([6d4eb9a](https://github.com/bobbykim89/manguito-component-library/commit/6d4eb9a3da074dadcbcdef561c2574bf3f6f1d9e))
31
+ - **manguito-theme:** setup build script ([85598ce](https://github.com/bobbykim89/manguito-component-library/commit/85598ce8aa700ec293ec42456e4cb392758ff75a))
32
+ - **manguito-theme:** tailwind v4 migration wip ([66a288e](https://github.com/bobbykim89/manguito-component-library/commit/66a288eaf0fd86059a70a9d40a2801fd120a35f0))
33
+ - **manguito-theme:** wip on migrating to tailwindcss 4 ([c858ba1](https://github.com/bobbykim89/manguito-component-library/commit/c858ba1ab965f70fe063e4451edc205434cf16a3))
34
+ - **README,-manguito-theme,-stories/introduction/:** update readme files ([0ae82e9](https://github.com/bobbykim89/manguito-component-library/commit/0ae82e9c572feabd5508b9705cf470cdcefa608c))
35
+
36
+ # [0.25.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.24.0...@bobbykim/manguito-theme@0.25.0) (2025-05-06)
37
+
38
+ ### Features
39
+
40
+ - **manguito-theme:** remove commented out lines ([7292bd0](https://github.com/bobbykim89/manguito-component-library/commit/7292bd062c4cc5215785f4f717503f2897c40583))
41
+ - **manguito-theme:** storybook version bump minor fix ([247e33d](https://github.com/bobbykim89/manguito-component-library/commit/247e33d94d684994705ec95ae8bc225151a99d47))
42
+
43
+ # [0.24.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.23.1...@bobbykim/manguito-theme@0.24.0) (2025-03-21)
44
+
45
+ ### Bug Fixes
46
+
47
+ - **manguito-theme:** add modal base component to have option to choose width ([643c21f](https://github.com/bobbykim89/manguito-component-library/commit/643c21f213b8cfe7bb82863e47ad0cbacb1ea6fa))
48
+ - **manguito-theme:** refactor modal and sidebar components ([7360389](https://github.com/bobbykim89/manguito-component-library/commit/73603898f2074b62f1ddc7cc723de9dd0619566f))
49
+
50
+ ### Features
51
+
52
+ - **manguito-theme,stories:** add custom class list to the safeList pattern in plugin settings ([1399be3](https://github.com/bobbykim89/manguito-component-library/commit/1399be30cd3a931c571762cfa9c5ff49d7393923))
53
+ - **manguito-theme/lib/mclTheme.ts:** refactor theme plugin ([d1d055e](https://github.com/bobbykim89/manguito-component-library/commit/d1d055e541c4d2124e188f70c44abc3203f61737))
54
+
55
+ ## [0.23.1](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.23.0...@bobbykim/manguito-theme@0.23.1) (2024-12-31)
56
+
57
+ ### Bug Fixes
58
+
59
+ - **manguito-theme:** accessibility improvement on nav-drawer ([2563ff9](https://github.com/bobbykim89/manguito-component-library/commit/2563ff92764bcde0e670f335d27292d10dc5cfea))
60
+ - **manguito-theme:** SSR incompatibility fix ([364be07](https://github.com/bobbykim89/manguito-component-library/commit/364be07ca1421f868a13f961bd63a83a8239b8c8))
61
+
62
+ # [0.23.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.22.1...@bobbykim/manguito-theme@0.23.0) (2024-12-13)
63
+
64
+ ### Features
65
+
66
+ - **manguito-theme/:** update manguito-theme base components ([ccbf500](https://github.com/bobbykim89/manguito-component-library/commit/ccbf500f6f339d91d353939427b424341d8d9070))
67
+ - **manguito-theme:** code cleanup ([442ae40](https://github.com/bobbykim89/manguito-component-library/commit/442ae40adec137e2b9ed59c9363dcf8f7148839b))
68
+ - **manguito-theme:** update header-vertical component ([e3d43b0](https://github.com/bobbykim89/manguito-component-library/commit/e3d43b0664795a1dd665d8127f53a3f10e81d3ed))
69
+ - resolve build error fix ([5f9d3c8](https://github.com/bobbykim89/manguito-component-library/commit/5f9d3c83bb82404ff09795e847e62e2a6c49df27))
70
+
71
+ ## [0.22.1](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.22.0...@bobbykim/manguito-theme@0.22.1) (2024-08-15)
72
+
73
+ **Note:** Version bump only for package @bobbykim/manguito-theme
74
+
75
+ # [0.22.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.21.0...@bobbykim/manguito-theme@0.22.0) (2024-07-13)
76
+
77
+ ### Features
78
+
79
+ - **manguito-theme:** minor fix on sidebar component ([67cbc82](https://github.com/bobbykim89/manguito-component-library/commit/67cbc824f3088015957b569e503a11df7289515b))
80
+
81
+ # [0.21.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.20.0...@bobbykim/manguito-theme@0.21.0) (2024-07-12)
82
+
83
+ ### Features
84
+
85
+ - **manguito-theme,stories/\*:** update type def for className props, add type def for exposes ([74a1145](https://github.com/bobbykim89/manguito-component-library/commit/74a11450aabe6607c5b7e0c8b90cccbea569fe42))
86
+ - **manguito-theme/mcl-theme:** add new button group class ([d614a01](https://github.com/bobbykim89/manguito-component-library/commit/d614a017b3518666f9510f142e085ff3366e1a6c))
87
+ - **manguito-theme:** finalize carousel component and its story page ([a2584de](https://github.com/bobbykim89/manguito-component-library/commit/a2584ded96c575c970773e62f62cfa2d6f5ed5c6))
88
+ - **manguito-theme:** update btn-group class ([1e53656](https://github.com/bobbykim89/manguito-component-library/commit/1e53656babaf67aafbac1440051cc6266da9374e))
89
+ - **manguito-theme:** wip) initiate carousel base component ([7e60409](https://github.com/bobbykim89/manguito-component-library/commit/7e6040992861a3b565b4b825f49a02ac68d6db78))
90
+
91
+ # [0.20.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.19.0...@bobbykim/manguito-theme@0.20.0) (2024-04-23)
92
+
93
+ ### Features
94
+
95
+ - **manguito-theme,-mcl-carousel:** update type definition for dropdown components, code refactor on mcl-carousel ([6b36c73](https://github.com/bobbykim89/manguito-component-library/commit/6b36c73a70b188886a66416c14e50ed37826406a))
96
+ - **manguito-theme,stories:** finalize tab components, add stories ([4bbf9d0](https://github.com/bobbykim89/manguito-component-library/commit/4bbf9d05ae257c04ed06de52b80af21acec51704))
97
+ - **manguito-theme:** add transition property on tab-container ([b6e6c04](https://github.com/bobbykim89/manguito-component-library/commit/b6e6c046c837338a7516db4c24cda98b67e4a833))
98
+ - **manguito-theme:** init tabs component ([e1bb650](https://github.com/bobbykim89/manguito-component-library/commit/e1bb650be38304872f4d6e5fa6158764b4852198))
99
+
100
+ # [0.19.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.18.0...@bobbykim/manguito-theme@0.19.0) (2024-04-15)
101
+
102
+ ### Features
103
+
104
+ - **components/\*:** add vite-plugin-dts ([765aec7](https://github.com/bobbykim89/manguito-component-library/commit/765aec738227b68b8483f8b3e02d1bd191b90f20))
105
+ - **manguito-theme,mcl-cards,mcl-carousel,mcl-collapse:** move index.ts file inside lib folder update mcl-cards,mcl-carousel,mcl-collapse components to be bundled on build process. update imports of story files accordingly ([d405a2e](https://github.com/bobbykim89/manguito-component-library/commit/d405a2e81deef1ea28e6fdb4fceb90398c56e467))
106
+ - **root,-manguito-theme:** update default package manager to pnpm, update manguito-theme to be bundled through vite ([94049c1](https://github.com/bobbykim89/manguito-component-library/commit/94049c1d25aada802cceb9f2b3e124d14d6d6d7d))
107
+ - **scripts,components/**/tsconfig.json:\*\* update scripts ([3ca588d](https://github.com/bobbykim89/manguito-component-library/commit/3ca588d692a2b9b685a1804696b1722d5f9fd874))
108
+ - **src/components:** finish updating rest of components ([bfbd4b1](https://github.com/bobbykim89/manguito-component-library/commit/bfbd4b15dcae4a244de1ac15836fa74870d20818))
109
+ - **src/stories:** update to storybook 8, update story pages accordingly ([f8a1502](https://github.com/bobbykim89/manguito-component-library/commit/f8a1502b83c056cef9e141c4e0c3821c992e9720))
110
+
111
+ # [0.18.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.17.0...@bobbykim/manguito-theme@0.18.0) (2024-04-01)
112
+
113
+ ### Features
114
+
115
+ - **manguito-theme:** update alert component event, update readme files, update story files ([99d4a7e](https://github.com/bobbykim89/manguito-component-library/commit/99d4a7ef192dfb628cf5b37b1cce34bb33aeb4c1))
116
+ - **manguito-theme:** update observeVisibleAttr composable, add alert component ([1629762](https://github.com/bobbykim89/manguito-component-library/commit/16297624b667066bd7076b02001f0ca8db65630d))
117
+ - ready for production ([4e2fc04](https://github.com/bobbykim89/manguito-component-library/commit/4e2fc048edd67791b4e917e0a764f301d4c610cb))
118
+
119
+ # [0.17.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.15.0...@bobbykim/manguito-theme@0.17.0) (2024-03-24)
120
+
121
+ ### Features
122
+
123
+ - build and release ([a372086](https://github.com/bobbykim89/manguito-component-library/commit/a3720861fb40dd6ec1d0e3dda1f06e2479967432))
124
+ - code refactor ([8a025e7](https://github.com/bobbykim89/manguito-component-library/commit/8a025e7cf870ff3dd0cb35878a08793e99ec5cef))
125
+ - **components/\*:** prepublish build ([c8eb95a](https://github.com/bobbykim89/manguito-component-library/commit/c8eb95a0ede6727bf183d2e9ad634ae64af1411d))
126
+ - **manguito-theme:** add header-vertical component ([05c339d](https://github.com/bobbykim89/manguito-component-library/commit/05c339d77cdded35d2e45a5c22c3833329e41532))
127
+ - **manguito-theme:** add new base component header-horizontal ([d3826ee](https://github.com/bobbykim89/manguito-component-library/commit/d3826ee1da15ea0edd2fa7f959269704f22008b3))
128
+ - **manguito-theme:** code refactor ([d310131](https://github.com/bobbykim89/manguito-component-library/commit/d31013189fa5e1c4f8085de63a08ee2932652f55))
129
+ - **mcl-header-a:** wip) update mcl-header-a ([344a13f](https://github.com/bobbykim89/manguito-component-library/commit/344a13f3cd25c6b02fc99866f19ae65bc89d9ec5))
130
+ - **mcl-header-b:** add mobile layout for mcl-header-b ([ca961ec](https://github.com/bobbykim89/manguito-component-library/commit/ca961ecbaecab1d2e879cb62e905e713878539c0))
131
+ - **mcl-header-b:** add more layouts for desktop screen ([bfd1c7e](https://github.com/bobbykim89/manguito-component-library/commit/bfd1c7e8ed3d9b839bea0dd1a7c3b5740a345c41))
132
+ - **mcl-header-b:** fix minor issues with mcl closing collapses in menu item click, update text color of menu items ([1ecfcf3](https://github.com/bobbykim89/manguito-component-library/commit/1ecfcf3ec474e6a6097a34bb9861cbb680280530))
133
+ - **mcl-header-b:** wip) adding story file for mcl-header-b ([2a80675](https://github.com/bobbykim89/manguito-component-library/commit/2a8067553df9a138398aef2a898ebdf3b4a9a268))
134
+ - **mcl-header:** move deprecated items to deprecated folder in root dir, update configs, init mcl-header-b component ([19aa842](https://github.com/bobbykim89/manguito-component-library/commit/19aa842faa7f1594f7be030b97d5093014efe7cb))
135
+ - tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
136
+
137
+ # [0.16.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.15.0...@bobbykim/manguito-theme@0.16.0) (2024-03-21)
138
+
139
+ ### Features
140
+
141
+ - code refactor ([8a025e7](https://github.com/bobbykim89/manguito-component-library/commit/8a025e7cf870ff3dd0cb35878a08793e99ec5cef))
142
+ - **manguito-theme:** add header-vertical component ([05c339d](https://github.com/bobbykim89/manguito-component-library/commit/05c339d77cdded35d2e45a5c22c3833329e41532))
143
+ - **manguito-theme:** add new base component header-horizontal ([d3826ee](https://github.com/bobbykim89/manguito-component-library/commit/d3826ee1da15ea0edd2fa7f959269704f22008b3))
144
+ - **mcl-header-a:** wip) update mcl-header-a ([344a13f](https://github.com/bobbykim89/manguito-component-library/commit/344a13f3cd25c6b02fc99866f19ae65bc89d9ec5))
145
+ - **mcl-header-b:** add mobile layout for mcl-header-b ([ca961ec](https://github.com/bobbykim89/manguito-component-library/commit/ca961ecbaecab1d2e879cb62e905e713878539c0))
146
+ - **mcl-header-b:** add more layouts for desktop screen ([bfd1c7e](https://github.com/bobbykim89/manguito-component-library/commit/bfd1c7e8ed3d9b839bea0dd1a7c3b5740a345c41))
147
+ - **mcl-header-b:** fix minor issues with mcl closing collapses in menu item click, update text color of menu items ([1ecfcf3](https://github.com/bobbykim89/manguito-component-library/commit/1ecfcf3ec474e6a6097a34bb9861cbb680280530))
148
+ - **mcl-header-b:** wip) adding story file for mcl-header-b ([2a80675](https://github.com/bobbykim89/manguito-component-library/commit/2a8067553df9a138398aef2a898ebdf3b4a9a268))
149
+ - **mcl-header:** move deprecated items to deprecated folder in root dir, update configs, init mcl-header-b component ([19aa842](https://github.com/bobbykim89/manguito-component-library/commit/19aa842faa7f1594f7be030b97d5093014efe7cb))
150
+ - tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
151
+
152
+ # [0.15.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.14.0...@bobbykim/manguito-theme@0.15.0) (2024-02-27)
153
+
154
+ ### Features
155
+
156
+ - **/components/**/README.md,/deprecated:\*\* update readme files, move deprecated packages to deprecated folder ([c0f8f7d](https://github.com/bobbykim89/manguito-component-library/commit/c0f8f7df158b8fcd99b4e3d191e02e3c8a9c144d))
157
+
158
+ # [0.14.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.13.0...@bobbykim/manguito-theme@0.14.0) (2024-02-27)
159
+
160
+ ### Features
161
+
162
+ - **components/\*:** run package:build ([fcc2d09](https://github.com/bobbykim89/manguito-component-library/commit/fcc2d0953d77ecaa317be27eb212c927dec33b17))
163
+ - **manguito-theme,mcl-cards,mcl-header,mcl-footer,mcl-carousel:** add vueuse as one of dependencies, update code to make them ssr friendly ([119a327](https://github.com/bobbykim89/manguito-component-library/commit/119a327adf1ca9866e6ac063bce5acd4790db612))
164
+ - **mcl-collapse:** add mcl-collapse component library and add story for mcl-collapse-a ([397b63e](https://github.com/bobbykim89/manguito-component-library/commit/397b63e00b83801bdf1cd2c6710d0ba876c6bf87))
165
+ - **stories/\*:** ran package:build to build type declaration, move deprecated story files into deprecated folder ([ffc487d](https://github.com/bobbykim89/manguito-component-library/commit/ffc487dbcc093be7a3ccfeae98c5e10e8372a0e3))
166
+ - **stories:** add basic addons, add stories for theme and base component ([841d8db](https://github.com/bobbykim89/manguito-component-library/commit/841d8db015d3d861f567ae3d19cf0033b28bac7c))
167
+
168
+ # [0.13.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.12.0...@bobbykim/manguito-theme@0.13.0) (2023-12-06)
169
+
170
+ ### Features
171
+
172
+ - **tsconfig,-card-delta:** card-delta bug fix, update tsconfig ([4c469b9](https://github.com/bobbykim89/manguito-component-library/commit/4c469b933632e3e729f6b75f7e808c89c090d463))
173
+ - **tsconfig:** install dependencies and update tsconfig to not generate source map ([0bd4d4c](https://github.com/bobbykim89/manguito-component-library/commit/0bd4d4c78503ef156dbb3d49aa3e67e7e0e68289))
174
+
175
+ # [0.12.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.11.0...@bobbykim/manguito-theme@0.12.0) (2023-12-02)
176
+
177
+ ### Features
178
+
179
+ - **manguito-theme,accordion-alpha,accordion-beta,nav-alpha:** change tsconfig settings ([055e6d8](https://github.com/bobbykim89/manguito-component-library/commit/055e6d8781705fcc144769da90470eb0d5e36612))
180
+
181
+ # [0.11.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.10.0...@bobbykim/manguito-theme@0.11.0) (2023-12-02)
182
+
183
+ ### Features
184
+
185
+ - **manguito-theme:** update import path ([c6c69fa](https://github.com/bobbykim89/manguito-component-library/commit/c6c69fa416e6ff7f388d97f8663a8e77b2e806d3))
186
+
187
+ # [0.10.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.9.0...@bobbykim/manguito-theme@0.10.0) (2023-12-01)
188
+
189
+ ### Features
190
+
191
+ - **tsconfig:** update tsconfig file and some of import paths ([c7caaa3](https://github.com/bobbykim89/manguito-component-library/commit/c7caaa3101a5d57d0e799568f1c4f5cbebececc3))
192
+
193
+ # [0.9.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.8.0...@bobbykim/manguito-theme@0.9.0) (2023-12-01)
194
+
195
+ ### Features
196
+
197
+ - **components:** target version update ([fe78575](https://github.com/bobbykim89/manguito-component-library/commit/fe78575f5e82bb854333672c3853956e9e930044))
198
+
199
+ # [0.8.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.7.0...@bobbykim/manguito-theme@0.8.0) (2023-12-01)
200
+
201
+ ### Features
202
+
203
+ - prerelease run build ([f7a852c](https://github.com/bobbykim89/manguito-component-library/commit/f7a852c9bf12b77481bf5d2f1602e50367d834f8))
204
+ - **tsconfig.json,tsconfig.vue.json:** update tsconfig ([0f21861](https://github.com/bobbykim89/manguito-component-library/commit/0f2186167342314f5d218e789a68c03cf6faa8ff))
package/README.md CHANGED
@@ -26,78 +26,104 @@ manguito-theme includes basic config for MCL, including type definitions for the
26
26
  ## Install
27
27
 
28
28
  ```sh
29
- npm i -D tailwindcss postcss autoprefixer sass @vueuse/core
29
+ npm i -D tailwindcss postcss @tailwindcss/postcss sass @vueuse/core
30
30
  npm i @bobbykim/manguito-theme
31
- npx tailwindcss init -p
32
31
  ```
33
32
 
34
33
  ## Setup
35
34
 
36
- tailwind.config.{js|ts}
37
-
38
- ```ts
39
- import type { Config } from 'tailwindcss'
40
- import { mclTheme } from '@bobbykim/manguito-theme/mcl-theme'
35
+ in postcss.config.js file:
41
36
 
37
+ ```js
42
38
  export default {
43
- content: ['./src/**/*.{vue,ts,js,cjs}'],
44
- plugins: [mclTheme({})],
45
- } satisfies Config
39
+ plugins: {
40
+ '@tailwindcss/postcss': {},
41
+ },
42
+ }
43
+ ```
44
+
45
+ in you main css file
46
+
47
+ ```css
48
+ @import 'tailwindcss';
49
+ @import '@bobbykim/manguito-theme/mcl-theme-v4.css';
50
+ @source '...<relative path from css file>/node_modules/@bobbykim';
46
51
  ```
47
52
 
48
53
  ## Theme color configuration
49
54
 
50
- You can change theme colors by adding colors/spacing in `tailwind.config.cjs` | `tailwind.config.js` | `tailwind.config.ts`
51
-
52
- ```cjs
53
- module.exports = {
54
- content: [
55
- './src/**/*.{vue,ts,js,cjs}',
56
- './node_modules/@bobbykim/**/*.{vue,ts,js,cjs}',
57
- ],
58
- plugins: [
59
- mclTheme({
60
- colors: {
61
- primary: '#ec489a',
62
- secondary: '#00feda',
63
- success: '#78be20',
64
- info: '#00a3e0',
65
- warning: '#f1ac18',
66
- danger: '#cc2f2f',
67
- 'light-1': '#fafafa',
68
- 'light-2': '#f1f1f1',
69
- 'light-3': '#e8e8e8',
70
- 'light-4': '#d0d0d0',
71
- 'dark-1': '#747474',
72
- 'dark-2': '#484848',
73
- 'dark-3': '#1f2937',
74
- 'dark-4': '#191919',
75
- },
76
- spacing: {
77
- '3xs': '4px',
78
- '2xs': '8px',
79
- xs: '16px',
80
- sm: '24px',
81
- md: '32px',
82
- lg: '48px',
83
- xl: '64px',
84
- '2xl': '96px',
85
- '3xl': '128px',
86
- },
87
- }),
88
- ],
55
+ You can change theme configurations through few different methods.
56
+
57
+ Method 1: CSS Variable Override
58
+
59
+ ```css
60
+ @import 'tailwindcss';
61
+
62
+ /* User's custom theme overrides */
63
+ :root {
64
+ /* Custom color palette */
65
+ --mcl-primary: #3b82f6; /* Custom blue */
66
+ --mcl-secondary: #10b981; /* Custom green */
67
+ --mcl-danger: #ef4444; /* Custom red */
68
+ --mcl-warning: #f59e0b; /* Custom amber */
69
+
70
+ /* Custom spacing */
71
+ --mcl-spacing-xs: 12px; /* Instead of default 16px */
72
+ --mcl-spacing-md: 24px; /* Instead of default 32px */
73
+
74
+ /* Custom font sizes */
75
+ --mcl-text-size-lg: 20px; /* Instead of default 18px */
89
76
  }
77
+
78
+ /* Import MCL theme after defining overrides */
79
+ @import '@bobbykim/manguito-theme/mcl-theme-v4.css';
90
80
  ```
91
81
 
92
- ## VS Code Settings
82
+ Method 2: CSS Layer Override
93
83
 
94
- To reduce lags due to TailwindCSS Intellisense add following in `.vscode/settings.json`:
84
+ ```css
85
+ @import 'tailwindcss';
86
+ @import '@bobbykim/manguito-theme/mcl-theme-v4.css';
95
87
 
96
- ```json
97
- {
98
- "tailwindCSS.validate": false,
99
- "tailwindCSS.experimental.classRegex": []
88
+ @layer theme {
89
+ @theme {
90
+ /* Override specific colors */
91
+ --color-primary: #8b5cf6;
92
+ --color-secondary: #06b6d4;
93
+
94
+ /* Add new custom colors */
95
+ --color-brand: #ff6b35;
96
+ --color-accent: #4ade80;
97
+
98
+ /* Override spacing */
99
+ --spacing-lg: 56px;
100
+ --spacing-xl: 80px;
101
+ }
102
+ }
103
+ ```
104
+
105
+ Method 3: Dynamic Theme Switching
106
+ Users can implement theme switching by changing CSS variables dynamically:
107
+
108
+ ```css
109
+ @import 'tailwindcss';
110
+
111
+ /* Light theme */
112
+ [data-theme='light'] {
113
+ --mcl-primary: #2563eb;
114
+ --mcl-secondary: #059669;
115
+ --mcl-dark-3: #374151;
100
116
  }
117
+
118
+ /* Dark theme */
119
+ [data-theme='dark'] {
120
+ --mcl-primary: #3b82f6;
121
+ --mcl-secondary: #10b981;
122
+ --mcl-dark-3: #111827;
123
+ }
124
+
125
+ /* Import theme after defining theme variants */
126
+ @import '@bobbykim/manguito-theme/mcl-theme-v4.css';
101
127
  ```
102
128
 
103
129
  ## Usage