@bobbykim/manguito-theme 0.25.0 → 0.26.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 +190 -0
  2. package/README.md +80 -55
  3. package/dist/core.cjs +2 -2
  4. package/dist/core.d.ts +3 -3
  5. package/dist/core.js +480 -384
  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,190 @@
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.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)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **mcl-cards:** update mcl-card-d ([06e95e0](https://github.com/bobbykim89/manguito-component-library/commit/06e95e060ea30bb446ec381a488747db275c0a49))
11
+
12
+ ### Features
13
+
14
+ - **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))
15
+ - **manguito-theme/:** add container class ([a651338](https://github.com/bobbykim89/manguito-component-library/commit/a651338365d9e3e83fab457715ea19ff254e698a))
16
+ - **manguito-theme:** refactor and bug fix ([6d4eb9a](https://github.com/bobbykim89/manguito-component-library/commit/6d4eb9a3da074dadcbcdef561c2574bf3f6f1d9e))
17
+ - **manguito-theme:** setup build script ([85598ce](https://github.com/bobbykim89/manguito-component-library/commit/85598ce8aa700ec293ec42456e4cb392758ff75a))
18
+ - **manguito-theme:** tailwind v4 migration wip ([66a288e](https://github.com/bobbykim89/manguito-component-library/commit/66a288eaf0fd86059a70a9d40a2801fd120a35f0))
19
+ - **manguito-theme:** wip on migrating to tailwindcss 4 ([c858ba1](https://github.com/bobbykim89/manguito-component-library/commit/c858ba1ab965f70fe063e4451edc205434cf16a3))
20
+ - **README,-manguito-theme,-stories/introduction/:** update readme files ([0ae82e9](https://github.com/bobbykim89/manguito-component-library/commit/0ae82e9c572feabd5508b9705cf470cdcefa608c))
21
+
22
+ # [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)
23
+
24
+ ### Features
25
+
26
+ - **manguito-theme:** remove commented out lines ([7292bd0](https://github.com/bobbykim89/manguito-component-library/commit/7292bd062c4cc5215785f4f717503f2897c40583))
27
+ - **manguito-theme:** storybook version bump minor fix ([247e33d](https://github.com/bobbykim89/manguito-component-library/commit/247e33d94d684994705ec95ae8bc225151a99d47))
28
+
29
+ # [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)
30
+
31
+ ### Bug Fixes
32
+
33
+ - **manguito-theme:** add modal base component to have option to choose width ([643c21f](https://github.com/bobbykim89/manguito-component-library/commit/643c21f213b8cfe7bb82863e47ad0cbacb1ea6fa))
34
+ - **manguito-theme:** refactor modal and sidebar components ([7360389](https://github.com/bobbykim89/manguito-component-library/commit/73603898f2074b62f1ddc7cc723de9dd0619566f))
35
+
36
+ ### Features
37
+
38
+ - **manguito-theme,stories:** add custom class list to the safeList pattern in plugin settings ([1399be3](https://github.com/bobbykim89/manguito-component-library/commit/1399be30cd3a931c571762cfa9c5ff49d7393923))
39
+ - **manguito-theme/lib/mclTheme.ts:** refactor theme plugin ([d1d055e](https://github.com/bobbykim89/manguito-component-library/commit/d1d055e541c4d2124e188f70c44abc3203f61737))
40
+
41
+ ## [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)
42
+
43
+ ### Bug Fixes
44
+
45
+ - **manguito-theme:** accessibility improvement on nav-drawer ([2563ff9](https://github.com/bobbykim89/manguito-component-library/commit/2563ff92764bcde0e670f335d27292d10dc5cfea))
46
+ - **manguito-theme:** SSR incompatibility fix ([364be07](https://github.com/bobbykim89/manguito-component-library/commit/364be07ca1421f868a13f961bd63a83a8239b8c8))
47
+
48
+ # [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)
49
+
50
+ ### Features
51
+
52
+ - **manguito-theme/:** update manguito-theme base components ([ccbf500](https://github.com/bobbykim89/manguito-component-library/commit/ccbf500f6f339d91d353939427b424341d8d9070))
53
+ - **manguito-theme:** code cleanup ([442ae40](https://github.com/bobbykim89/manguito-component-library/commit/442ae40adec137e2b9ed59c9363dcf8f7148839b))
54
+ - **manguito-theme:** update header-vertical component ([e3d43b0](https://github.com/bobbykim89/manguito-component-library/commit/e3d43b0664795a1dd665d8127f53a3f10e81d3ed))
55
+ - resolve build error fix ([5f9d3c8](https://github.com/bobbykim89/manguito-component-library/commit/5f9d3c83bb82404ff09795e847e62e2a6c49df27))
56
+
57
+ ## [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)
58
+
59
+ **Note:** Version bump only for package @bobbykim/manguito-theme
60
+
61
+ # [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)
62
+
63
+ ### Features
64
+
65
+ - **manguito-theme:** minor fix on sidebar component ([67cbc82](https://github.com/bobbykim89/manguito-component-library/commit/67cbc824f3088015957b569e503a11df7289515b))
66
+
67
+ # [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)
68
+
69
+ ### Features
70
+
71
+ - **manguito-theme,stories/\*:** update type def for className props, add type def for exposes ([74a1145](https://github.com/bobbykim89/manguito-component-library/commit/74a11450aabe6607c5b7e0c8b90cccbea569fe42))
72
+ - **manguito-theme/mcl-theme:** add new button group class ([d614a01](https://github.com/bobbykim89/manguito-component-library/commit/d614a017b3518666f9510f142e085ff3366e1a6c))
73
+ - **manguito-theme:** finalize carousel component and its story page ([a2584de](https://github.com/bobbykim89/manguito-component-library/commit/a2584ded96c575c970773e62f62cfa2d6f5ed5c6))
74
+ - **manguito-theme:** update btn-group class ([1e53656](https://github.com/bobbykim89/manguito-component-library/commit/1e53656babaf67aafbac1440051cc6266da9374e))
75
+ - **manguito-theme:** wip) initiate carousel base component ([7e60409](https://github.com/bobbykim89/manguito-component-library/commit/7e6040992861a3b565b4b825f49a02ac68d6db78))
76
+
77
+ # [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)
78
+
79
+ ### Features
80
+
81
+ - **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))
82
+ - **manguito-theme,stories:** finalize tab components, add stories ([4bbf9d0](https://github.com/bobbykim89/manguito-component-library/commit/4bbf9d05ae257c04ed06de52b80af21acec51704))
83
+ - **manguito-theme:** add transition property on tab-container ([b6e6c04](https://github.com/bobbykim89/manguito-component-library/commit/b6e6c046c837338a7516db4c24cda98b67e4a833))
84
+ - **manguito-theme:** init tabs component ([e1bb650](https://github.com/bobbykim89/manguito-component-library/commit/e1bb650be38304872f4d6e5fa6158764b4852198))
85
+
86
+ # [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)
87
+
88
+ ### Features
89
+
90
+ - **components/\*:** add vite-plugin-dts ([765aec7](https://github.com/bobbykim89/manguito-component-library/commit/765aec738227b68b8483f8b3e02d1bd191b90f20))
91
+ - **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))
92
+ - **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))
93
+ - **scripts,components/**/tsconfig.json:\*\* update scripts ([3ca588d](https://github.com/bobbykim89/manguito-component-library/commit/3ca588d692a2b9b685a1804696b1722d5f9fd874))
94
+ - **src/components:** finish updating rest of components ([bfbd4b1](https://github.com/bobbykim89/manguito-component-library/commit/bfbd4b15dcae4a244de1ac15836fa74870d20818))
95
+ - **src/stories:** update to storybook 8, update story pages accordingly ([f8a1502](https://github.com/bobbykim89/manguito-component-library/commit/f8a1502b83c056cef9e141c4e0c3821c992e9720))
96
+
97
+ # [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)
98
+
99
+ ### Features
100
+
101
+ - **manguito-theme:** update alert component event, update readme files, update story files ([99d4a7e](https://github.com/bobbykim89/manguito-component-library/commit/99d4a7ef192dfb628cf5b37b1cce34bb33aeb4c1))
102
+ - **manguito-theme:** update observeVisibleAttr composable, add alert component ([1629762](https://github.com/bobbykim89/manguito-component-library/commit/16297624b667066bd7076b02001f0ca8db65630d))
103
+ - ready for production ([4e2fc04](https://github.com/bobbykim89/manguito-component-library/commit/4e2fc048edd67791b4e917e0a764f301d4c610cb))
104
+
105
+ # [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)
106
+
107
+ ### Features
108
+
109
+ - build and release ([a372086](https://github.com/bobbykim89/manguito-component-library/commit/a3720861fb40dd6ec1d0e3dda1f06e2479967432))
110
+ - code refactor ([8a025e7](https://github.com/bobbykim89/manguito-component-library/commit/8a025e7cf870ff3dd0cb35878a08793e99ec5cef))
111
+ - **components/\*:** prepublish build ([c8eb95a](https://github.com/bobbykim89/manguito-component-library/commit/c8eb95a0ede6727bf183d2e9ad634ae64af1411d))
112
+ - **manguito-theme:** add header-vertical component ([05c339d](https://github.com/bobbykim89/manguito-component-library/commit/05c339d77cdded35d2e45a5c22c3833329e41532))
113
+ - **manguito-theme:** add new base component header-horizontal ([d3826ee](https://github.com/bobbykim89/manguito-component-library/commit/d3826ee1da15ea0edd2fa7f959269704f22008b3))
114
+ - **manguito-theme:** code refactor ([d310131](https://github.com/bobbykim89/manguito-component-library/commit/d31013189fa5e1c4f8085de63a08ee2932652f55))
115
+ - **mcl-header-a:** wip) update mcl-header-a ([344a13f](https://github.com/bobbykim89/manguito-component-library/commit/344a13f3cd25c6b02fc99866f19ae65bc89d9ec5))
116
+ - **mcl-header-b:** add mobile layout for mcl-header-b ([ca961ec](https://github.com/bobbykim89/manguito-component-library/commit/ca961ecbaecab1d2e879cb62e905e713878539c0))
117
+ - **mcl-header-b:** add more layouts for desktop screen ([bfd1c7e](https://github.com/bobbykim89/manguito-component-library/commit/bfd1c7e8ed3d9b839bea0dd1a7c3b5740a345c41))
118
+ - **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))
119
+ - **mcl-header-b:** wip) adding story file for mcl-header-b ([2a80675](https://github.com/bobbykim89/manguito-component-library/commit/2a8067553df9a138398aef2a898ebdf3b4a9a268))
120
+ - **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))
121
+ - tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
122
+
123
+ # [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)
124
+
125
+ ### Features
126
+
127
+ - code refactor ([8a025e7](https://github.com/bobbykim89/manguito-component-library/commit/8a025e7cf870ff3dd0cb35878a08793e99ec5cef))
128
+ - **manguito-theme:** add header-vertical component ([05c339d](https://github.com/bobbykim89/manguito-component-library/commit/05c339d77cdded35d2e45a5c22c3833329e41532))
129
+ - **manguito-theme:** add new base component header-horizontal ([d3826ee](https://github.com/bobbykim89/manguito-component-library/commit/d3826ee1da15ea0edd2fa7f959269704f22008b3))
130
+ - **mcl-header-a:** wip) update mcl-header-a ([344a13f](https://github.com/bobbykim89/manguito-component-library/commit/344a13f3cd25c6b02fc99866f19ae65bc89d9ec5))
131
+ - **mcl-header-b:** add mobile layout for mcl-header-b ([ca961ec](https://github.com/bobbykim89/manguito-component-library/commit/ca961ecbaecab1d2e879cb62e905e713878539c0))
132
+ - **mcl-header-b:** add more layouts for desktop screen ([bfd1c7e](https://github.com/bobbykim89/manguito-component-library/commit/bfd1c7e8ed3d9b839bea0dd1a7c3b5740a345c41))
133
+ - **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))
134
+ - **mcl-header-b:** wip) adding story file for mcl-header-b ([2a80675](https://github.com/bobbykim89/manguito-component-library/commit/2a8067553df9a138398aef2a898ebdf3b4a9a268))
135
+ - **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))
136
+ - tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
137
+
138
+ # [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)
139
+
140
+ ### Features
141
+
142
+ - **/components/**/README.md,/deprecated:\*\* update readme files, move deprecated packages to deprecated folder ([c0f8f7d](https://github.com/bobbykim89/manguito-component-library/commit/c0f8f7df158b8fcd99b4e3d191e02e3c8a9c144d))
143
+
144
+ # [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)
145
+
146
+ ### Features
147
+
148
+ - **components/\*:** run package:build ([fcc2d09](https://github.com/bobbykim89/manguito-component-library/commit/fcc2d0953d77ecaa317be27eb212c927dec33b17))
149
+ - **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))
150
+ - **mcl-collapse:** add mcl-collapse component library and add story for mcl-collapse-a ([397b63e](https://github.com/bobbykim89/manguito-component-library/commit/397b63e00b83801bdf1cd2c6710d0ba876c6bf87))
151
+ - **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))
152
+ - **stories:** add basic addons, add stories for theme and base component ([841d8db](https://github.com/bobbykim89/manguito-component-library/commit/841d8db015d3d861f567ae3d19cf0033b28bac7c))
153
+
154
+ # [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)
155
+
156
+ ### Features
157
+
158
+ - **tsconfig,-card-delta:** card-delta bug fix, update tsconfig ([4c469b9](https://github.com/bobbykim89/manguito-component-library/commit/4c469b933632e3e729f6b75f7e808c89c090d463))
159
+ - **tsconfig:** install dependencies and update tsconfig to not generate source map ([0bd4d4c](https://github.com/bobbykim89/manguito-component-library/commit/0bd4d4c78503ef156dbb3d49aa3e67e7e0e68289))
160
+
161
+ # [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)
162
+
163
+ ### Features
164
+
165
+ - **manguito-theme,accordion-alpha,accordion-beta,nav-alpha:** change tsconfig settings ([055e6d8](https://github.com/bobbykim89/manguito-component-library/commit/055e6d8781705fcc144769da90470eb0d5e36612))
166
+
167
+ # [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)
168
+
169
+ ### Features
170
+
171
+ - **manguito-theme:** update import path ([c6c69fa](https://github.com/bobbykim89/manguito-component-library/commit/c6c69fa416e6ff7f388d97f8663a8e77b2e806d3))
172
+
173
+ # [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)
174
+
175
+ ### Features
176
+
177
+ - **tsconfig:** update tsconfig file and some of import paths ([c7caaa3](https://github.com/bobbykim89/manguito-component-library/commit/c7caaa3101a5d57d0e799568f1c4f5cbebececc3))
178
+
179
+ # [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)
180
+
181
+ ### Features
182
+
183
+ - **components:** target version update ([fe78575](https://github.com/bobbykim89/manguito-component-library/commit/fe78575f5e82bb854333672c3853956e9e930044))
184
+
185
+ # [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)
186
+
187
+ ### Features
188
+
189
+ - prerelease run build ([f7a852c](https://github.com/bobbykim89/manguito-component-library/commit/f7a852c9bf12b77481bf5d2f1602e50367d834f8))
190
+ - **tsconfig.json,tsconfig.vue.json:** update tsconfig ([0f21861](https://github.com/bobbykim89/manguito-component-library/commit/0f2186167342314f5d218e789a68c03cf6faa8ff))
package/README.md CHANGED
@@ -26,78 +26,103 @@ 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';
46
50
  ```
47
51
 
48
52
  ## Theme color configuration
49
53
 
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
- ],
54
+ You can change theme configurations through few different methods.
55
+
56
+ Method 1: CSS Variable Override
57
+
58
+ ```css
59
+ @import 'tailwindcss';
60
+
61
+ /* User's custom theme overrides */
62
+ :root {
63
+ /* Custom color palette */
64
+ --mcl-primary: #3b82f6; /* Custom blue */
65
+ --mcl-secondary: #10b981; /* Custom green */
66
+ --mcl-danger: #ef4444; /* Custom red */
67
+ --mcl-warning: #f59e0b; /* Custom amber */
68
+
69
+ /* Custom spacing */
70
+ --mcl-spacing-xs: 12px; /* Instead of default 16px */
71
+ --mcl-spacing-md: 24px; /* Instead of default 32px */
72
+
73
+ /* Custom font sizes */
74
+ --mcl-text-size-lg: 20px; /* Instead of default 18px */
89
75
  }
76
+
77
+ /* Import MCL theme after defining overrides */
78
+ @import '@bobbykim/manguito-theme/mcl-theme-v4.css';
90
79
  ```
91
80
 
92
- ## VS Code Settings
81
+ Method 2: CSS Layer Override
93
82
 
94
- To reduce lags due to TailwindCSS Intellisense add following in `.vscode/settings.json`:
83
+ ```css
84
+ @import 'tailwindcss';
85
+ @import '@bobbykim/manguito-theme/mcl-theme-v4.css';
95
86
 
96
- ```json
97
- {
98
- "tailwindCSS.validate": false,
99
- "tailwindCSS.experimental.classRegex": []
87
+ @layer theme {
88
+ @theme {
89
+ /* Override specific colors */
90
+ --color-primary: #8b5cf6;
91
+ --color-secondary: #06b6d4;
92
+
93
+ /* Add new custom colors */
94
+ --color-brand: #ff6b35;
95
+ --color-accent: #4ade80;
96
+
97
+ /* Override spacing */
98
+ --spacing-lg: 56px;
99
+ --spacing-xl: 80px;
100
+ }
101
+ }
102
+ ```
103
+
104
+ Method 3: Dynamic Theme Switching
105
+ Users can implement theme switching by changing CSS variables dynamically:
106
+
107
+ ```css
108
+ @import 'tailwindcss';
109
+
110
+ /* Light theme */
111
+ [data-theme='light'] {
112
+ --mcl-primary: #2563eb;
113
+ --mcl-secondary: #059669;
114
+ --mcl-dark-3: #374151;
100
115
  }
116
+
117
+ /* Dark theme */
118
+ [data-theme='dark'] {
119
+ --mcl-primary: #3b82f6;
120
+ --mcl-secondary: #10b981;
121
+ --mcl-dark-3: #111827;
122
+ }
123
+
124
+ /* Import theme after defining theme variants */
125
+ @import '@bobbykim/manguito-theme/mcl-theme-v4.css';
101
126
  ```
102
127
 
103
128
  ## Usage