chaiwind 2.1.3 → 3.0.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.
- package/CHANGELOG.md +145 -0
- package/README.md +392 -108
- package/package.json +12 -8
- package/src/engine.js +144 -0
- package/src/handlers.js +218 -0
- package/src/index.js +20 -0
- package/src/tokens.js +141 -0
- package/chaiwind.js +0 -383
- package/demo/demo.html +0 -104
package/README.md
CHANGED
|
@@ -1,10 +1,22 @@
|
|
|
1
|
-
# chaiwind
|
|
1
|
+
# chaiwind ☕
|
|
2
2
|
|
|
3
|
-
A lightweight utility-first CSS engine for the ChaiCode family
|
|
3
|
+
> **v3.0.0** - A lightweight utility-first CSS engine for the ChaiCode family
|
|
4
4
|
|
|
5
|
-
Write `chai-*` class names on your HTML elements.
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
Write `chai-*` class names on your HTML elements. ChaiWind scans the DOM, parses those class names, and applies inline styles directly. **No build step, no config, no stylesheet required.**
|
|
6
|
+
|
|
7
|
+
✨ **New in v3**: Modular ES modules architecture + MutationObserver for dynamic content!
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## What's New in v3.0.0
|
|
12
|
+
|
|
13
|
+
- ✨ **MutationObserver** - Automatically styles dynamically added content (works with React, Vue, Alpine.js!)
|
|
14
|
+
- 📁 **4-File Modular Architecture** - Easy to understand and customize
|
|
15
|
+
- 🎨 **70+ Utilities** - Added grid, line-height, letter-spacing, z-index, and more
|
|
16
|
+
- 🔧 **Easy Customization** - Edit `src/tokens.js` for colors/spacing, `src/handlers.js` for utilities
|
|
17
|
+
- 🚀 **ES Modules** - Modern JavaScript with better tooling support
|
|
18
|
+
|
|
19
|
+
**[See full changelog](./CHANGELOG.md)**
|
|
8
20
|
|
|
9
21
|
---
|
|
10
22
|
|
|
@@ -14,145 +26,317 @@ no config, no stylesheet required.
|
|
|
14
26
|
npm install chaiwind
|
|
15
27
|
```
|
|
16
28
|
|
|
17
|
-
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## Quick Start
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<!DOCTYPE html>
|
|
35
|
+
<html>
|
|
36
|
+
<head>
|
|
37
|
+
<title>ChaiWind v3</title>
|
|
38
|
+
</head>
|
|
39
|
+
<body>
|
|
40
|
+
<!-- Use chai-* classes anywhere -->
|
|
41
|
+
<div class="chai-bg-chai chai-p-4 chai-rounded-md chai-text-white">
|
|
42
|
+
Hello ChaiCode! ☕
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<div class="chai-flex chai-items-center chai-justify-between chai-gap-4">
|
|
46
|
+
<p class="chai-text-xl chai-font-bold chai-text-masala">Hitesh sir</p>
|
|
47
|
+
<p class="chai-text-sm chai-text-gray">ChaiCode</p>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<!-- Import and initialize ChaiWind -->
|
|
51
|
+
<script type="module">
|
|
52
|
+
import { initChai } from './node_modules/chaiwind/src/index.js'
|
|
53
|
+
initChai()
|
|
54
|
+
</script>
|
|
55
|
+
</body>
|
|
56
|
+
</html>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
**That's it!** ChaiWind will:
|
|
60
|
+
1. Scan all `chai-*` classes
|
|
61
|
+
2. Convert them to inline styles
|
|
62
|
+
3. Remove the classes (keeps your HTML clean)
|
|
63
|
+
4. Watch for new elements added dynamically
|
|
18
64
|
|
|
19
65
|
---
|
|
20
66
|
|
|
21
|
-
##
|
|
67
|
+
## Usage with Bundlers
|
|
68
|
+
|
|
69
|
+
### Vite / Webpack / Rollup
|
|
22
70
|
|
|
23
|
-
|
|
71
|
+
```js
|
|
72
|
+
import { initChai } from 'chaiwind'
|
|
73
|
+
|
|
74
|
+
initChai()
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### React
|
|
78
|
+
|
|
79
|
+
```jsx
|
|
80
|
+
// App.jsx
|
|
81
|
+
import { useEffect } from 'react'
|
|
82
|
+
import { initChai } from 'chaiwind'
|
|
83
|
+
|
|
84
|
+
function App() {
|
|
85
|
+
useEffect(() => {
|
|
86
|
+
initChai()
|
|
87
|
+
}, [])
|
|
88
|
+
|
|
89
|
+
return (
|
|
90
|
+
<div className="chai-bg-chai chai-p-8 chai-rounded-lg">
|
|
91
|
+
<h1 className="chai-text-white chai-text-4xl chai-font-bold">
|
|
92
|
+
ChaiWind + React
|
|
93
|
+
</h1>
|
|
94
|
+
</div>
|
|
95
|
+
)
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
The MutationObserver will automatically process new components as they mount!
|
|
24
100
|
|
|
25
101
|
---
|
|
26
102
|
|
|
27
|
-
##
|
|
103
|
+
## How It Works
|
|
104
|
+
|
|
105
|
+
1. **Parse** - Finds all `chai-*` classes (e.g., `chai-bg-piyush`)
|
|
106
|
+
2. **Apply** - Converts to inline style (`style.backgroundColor = '#ec4899'`)
|
|
107
|
+
3. **Clean** - Removes the class from the element
|
|
108
|
+
4. **Watch** - MutationObserver monitors for dynamically added content
|
|
109
|
+
|
|
110
|
+
---
|
|
28
111
|
|
|
29
|
-
|
|
112
|
+
## Dynamic Content (New in v3!)
|
|
30
113
|
|
|
31
|
-
|
|
114
|
+
ChaiWind automatically styles elements added after page load:
|
|
32
115
|
|
|
33
116
|
```html
|
|
34
|
-
<
|
|
117
|
+
<button id="add">Add Element</button>
|
|
118
|
+
<div id="container"></div>
|
|
119
|
+
|
|
120
|
+
<script type="module">
|
|
121
|
+
import { initChai } from './node_modules/chaiwind/src/index.js'
|
|
122
|
+
initChai()
|
|
123
|
+
|
|
124
|
+
document.getElementById('add').onclick = () => {
|
|
125
|
+
const div = document.createElement('div')
|
|
126
|
+
div.className = 'chai-bg-piyush chai-p-4 chai-rounded-md chai-text-white'
|
|
127
|
+
div.textContent = 'Dynamically added!'
|
|
128
|
+
document.getElementById('container').appendChild(div)
|
|
129
|
+
// Styled immediately - no manual rescan needed! ✨
|
|
130
|
+
}
|
|
131
|
+
</script>
|
|
35
132
|
```
|
|
36
133
|
|
|
37
|
-
|
|
134
|
+
---
|
|
38
135
|
|
|
39
|
-
|
|
40
|
-
@import "chaiwind/chaiwind.css";
|
|
41
|
-
```
|
|
136
|
+
## Customization
|
|
42
137
|
|
|
43
|
-
|
|
138
|
+
Want to add your own colors or utilities? ChaiWind v3 makes it super easy!
|
|
44
139
|
|
|
45
|
-
###
|
|
140
|
+
### Adding Custom Colors
|
|
46
141
|
|
|
47
|
-
|
|
142
|
+
Edit `node_modules/chaiwind/src/tokens.js` (or fork and modify):
|
|
48
143
|
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
|
|
144
|
+
```js
|
|
145
|
+
export const colors = {
|
|
146
|
+
// Add your brand colors
|
|
147
|
+
'mybrand': '#ff6b6b',
|
|
148
|
+
'mybrand-dark': '#ee5a6f',
|
|
52
149
|
|
|
53
|
-
|
|
54
|
-
|
|
150
|
+
// ... existing ChaiCode colors
|
|
151
|
+
}
|
|
55
152
|
```
|
|
56
153
|
|
|
57
|
-
|
|
154
|
+
Now use: `chai-bg-mybrand`, `chai-text-mybrand`, `chai-border-mybrand`
|
|
58
155
|
|
|
59
|
-
|
|
60
|
-
|
|
156
|
+
### Adding Custom Utilities
|
|
157
|
+
|
|
158
|
+
Edit `node_modules/chaiwind/src/handlers.js`:
|
|
159
|
+
|
|
160
|
+
```js
|
|
161
|
+
export const handlers = {
|
|
162
|
+
// Add custom utility
|
|
163
|
+
'shadow-glow': (el) => el.style.boxShadow = '0 0 20px rgba(255,107,107,0.5)',
|
|
61
164
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<p class="chai-fs-sm chai-text-gray">ChaiCode</p>
|
|
65
|
-
</div>
|
|
165
|
+
// ... existing handlers
|
|
166
|
+
}
|
|
66
167
|
```
|
|
67
168
|
|
|
68
|
-
|
|
69
|
-
class from the element. A `data-chaiwind` attribute is added so you can still
|
|
70
|
-
see what was applied by inspecting the element.
|
|
169
|
+
Now use: `chai-shadow-glow`
|
|
71
170
|
|
|
72
171
|
---
|
|
73
172
|
|
|
74
|
-
##
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
173
|
+
## Color Tokens
|
|
174
|
+
|
|
175
|
+
### ChaiCode Brand
|
|
176
|
+
|
|
177
|
+
| Class | Value | Use Case |
|
|
178
|
+
| ----------------------- | --------- | ------------- |
|
|
179
|
+
| `chai-bg-chaicode` | `#f97316` | Primary brand |
|
|
180
|
+
| `chai-bg-chaicode-dark` | `#1a1a2e` | Dark mode |
|
|
181
|
+
|
|
182
|
+
### ☕ Hitesh sir — Chai Palette
|
|
183
|
+
|
|
184
|
+
| Class | Value | Description |
|
|
185
|
+
| ---------------- | --------- | ---------------- |
|
|
186
|
+
| `chai-bg-chai` | `#c8843a` | Classic chai |
|
|
187
|
+
| `chai-bg-adrak` | `#d4a056` | Ginger gold |
|
|
188
|
+
| `chai-bg-masala` | `#8b4513` | Deep masala |
|
|
189
|
+
| `chai-bg-kulhad` | `#b5651d` | Clay kulhad |
|
|
190
|
+
| `chai-bg-tapri` | `#6b3a2a` | Dark roasted |
|
|
191
|
+
| `chai-bg-dudh` | `#f5f0e8` | Milk chai cream |
|
|
192
|
+
|
|
193
|
+
### 🩷 Piyush sir — Pink Palette
|
|
194
|
+
|
|
195
|
+
| Class | Value | Description |
|
|
196
|
+
| ---------------------- | --------- | ------------- |
|
|
197
|
+
| `chai-bg-piyush` | `#ec4899` | Hot pink |
|
|
198
|
+
| `chai-bg-piyush-light` | `#f9a8d4` | Soft blush |
|
|
199
|
+
| `chai-bg-piyush-dark` | `#be185d` | Deep magenta |
|
|
200
|
+
| `chai-bg-rose` | `#fb7185` | Rose |
|
|
201
|
+
| `chai-bg-blush` | `#fce7f3` | Barely blush |
|
|
202
|
+
| `chai-bg-fuschia` | `#d946ef` | Electric |
|
|
203
|
+
| `chai-bg-lipstick` | `#c2185b` | Bold lipstick |
|
|
204
|
+
|
|
205
|
+
### 🍎 Akash sir — Mac Palette
|
|
206
|
+
|
|
207
|
+
| Class | Value | Description |
|
|
208
|
+
| --------------------- | --------- | ----------- |
|
|
209
|
+
| `chai-bg-midnight` | `#1d1d1f` | Apple black |
|
|
210
|
+
| `chai-bg-spacegray` | `#86868b` | Mac gray |
|
|
211
|
+
| `chai-bg-silver` | `#e8e8ed` | Mac silver |
|
|
212
|
+
| `chai-bg-starlight` | `#f5f1eb` | Starlight |
|
|
213
|
+
| `chai-bg-macos-blue` | `#0071e3` | Apple blue |
|
|
214
|
+
| `chai-bg-macos-green` | `#34c759` | Apple green |
|
|
215
|
+
| `chai-bg-macos-red` | `#ff3b30` | Apple red |
|
|
216
|
+
| `chai-bg-aluminum` | `#d1d1d6` | Aluminum |
|
|
217
|
+
|
|
218
|
+
**Each color works with**: `chai-bg-*`, `chai-text-*`, `chai-border-*`
|
|
82
219
|
|
|
83
220
|
---
|
|
84
221
|
|
|
85
|
-
##
|
|
222
|
+
## Spacing
|
|
86
223
|
|
|
87
|
-
|
|
224
|
+
| Utility | Values | CSS Property |
|
|
225
|
+
| --------- | ---------------------------------------- | ------------ |
|
|
226
|
+
| `chai-p` | `0,1,2,3,4,5,6,7,8,9,10,12,14,16,20,24,32` | padding |
|
|
227
|
+
| `chai-px` | Same as above | padding-x |
|
|
228
|
+
| `chai-py` | Same as above | padding-y |
|
|
229
|
+
| `chai-pt` | Same as above | padding-top |
|
|
230
|
+
| `chai-pb` | Same as above | padding-bottom |
|
|
231
|
+
| `chai-pl` | Same as above | padding-left |
|
|
232
|
+
| `chai-pr` | Same as above | padding-right |
|
|
233
|
+
| `chai-m` | Same as above | margin |
|
|
234
|
+
| `chai-mx` | Same as above | margin-x |
|
|
235
|
+
| `chai-my` | Same as above | margin-y |
|
|
236
|
+
| `chai-mt` | Same as above | margin-top |
|
|
237
|
+
| `chai-mb` | Same as above | margin-bottom |
|
|
238
|
+
| `chai-ml` | Same as above | margin-left |
|
|
239
|
+
| `chai-mr` | Same as above | margin-right |
|
|
240
|
+
| `chai-gap` | Same as above | gap |
|
|
241
|
+
|
|
242
|
+
**Scale**: `0`=0px, `1`=4px, `2`=8px, `3`=12px, `4`=16px, `5`=20px, `6`=24px, `7`=28px, `8`=32px, `9`=36px, `10`=40px, `12`=48px, `14`=56px, `16`=64px, `20`=80px, `24`=96px, `32`=128px
|
|
243
|
+
|
|
244
|
+
**Example**: `chai-p-4` = 16px padding, `chai-mx-auto` = auto horizontal margin
|
|
88
245
|
|
|
89
|
-
|
|
90
|
-
| ----------------------- | --------- |
|
|
91
|
-
| `chai-bg-chaicode` | `#f97316` |
|
|
92
|
-
| `chai-bg-chaicode-dark` | `#1a1a2e` |
|
|
246
|
+
---
|
|
93
247
|
|
|
94
|
-
|
|
248
|
+
## Typography
|
|
95
249
|
|
|
96
|
-
|
|
97
|
-
| ---------------- | --------- |
|
|
98
|
-
| `chai-bg-chai` | `#c8843a` |
|
|
99
|
-
| `chai-bg-adrak` | `#d4a056` |
|
|
100
|
-
| `chai-bg-masala` | `#8b4513` |
|
|
101
|
-
| `chai-bg-kulhad` | `#b5651d` |
|
|
250
|
+
### Font Size, `chai-text-{size}`
|
|
102
251
|
|
|
103
|
-
|
|
252
|
+
| Class | Value | Output |
|
|
253
|
+
| -------------- | ----- | -------- |
|
|
254
|
+
| `chai-text-xs` | xs | 11px |
|
|
255
|
+
| `chai-text-sm` | sm | 13px |
|
|
256
|
+
| `chai-text-base` | base | 16px |
|
|
257
|
+
| `chai-text-lg` | lg | 18px |
|
|
258
|
+
| `chai-text-xl` | xl | 20px |
|
|
259
|
+
| `chai-text-2xl` | 2xl | 24px |
|
|
260
|
+
| `chai-text-3xl` | 3xl | 30px |
|
|
261
|
+
| `chai-text-4xl` | 4xl | 36px |
|
|
262
|
+
| `chai-text-5xl` | 5xl | 48px |
|
|
263
|
+
| `chai-text-6xl` | 6xl | 64px |
|
|
104
264
|
|
|
105
|
-
|
|
106
|
-
| --------------------- | --------- |
|
|
107
|
-
| `chai-bg-piyush` | `#ec4899` |
|
|
108
|
-
| `chai-bg-piyush-dark` | `#be185d` |
|
|
265
|
+
### Font Weight - `chai-font-{weight}`
|
|
109
266
|
|
|
110
|
-
|
|
267
|
+
`chai-font-thin` `chai-font-light` `chai-font-normal` `chai-font-medium`
|
|
268
|
+
`chai-font-semibold` `chai-font-bold` `chai-font-black`
|
|
111
269
|
|
|
112
|
-
|
|
113
|
-
| ------------------ | --------- |
|
|
114
|
-
| `chai-bg-midnight` | `#1d1d1f` |
|
|
115
|
-
| `chai-bg-silver` | `#e8e8ed` |
|
|
270
|
+
### Text Alignment - `chai-text-{align}`
|
|
116
271
|
|
|
117
|
-
|
|
272
|
+
`chai-text-left` `chai-text-center` `chai-text-right`
|
|
118
273
|
|
|
119
|
-
|
|
274
|
+
### Text Transform
|
|
120
275
|
|
|
121
|
-
|
|
276
|
+
`chai-uppercase` `chai-lowercase` `chai-capitalize`
|
|
122
277
|
|
|
123
|
-
|
|
124
|
-
`chai-px-` `chai-py-` `chai-pt-` `chai-pb-` `chai-pl-` `chai-pr-`
|
|
125
|
-
`chai-m-{0|1|2|3|4|6|8|10|12}` — margin
|
|
126
|
-
`chai-mx-` `chai-my-` `chai-mt-` `chai-mb-` `chai-ml-` `chai-mr-`
|
|
127
|
-
`chai-gap-{n}` `chai-w-{n}` `chai-h-{n}`
|
|
278
|
+
### Text Decoration
|
|
128
279
|
|
|
129
|
-
|
|
280
|
+
`chai-italic` `chai-underline` `chai-line-through` `chai-no-underline` `chai-truncate`
|
|
130
281
|
|
|
131
|
-
|
|
282
|
+
### Line Height - `chai-leading-{value}` (New!)
|
|
132
283
|
|
|
133
|
-
|
|
284
|
+
`chai-leading-none` `chai-leading-tight` `chai-leading-snug`
|
|
285
|
+
`chai-leading-normal` `chai-leading-relaxed` `chai-leading-loose`
|
|
134
286
|
|
|
135
|
-
`chai-
|
|
136
|
-
|
|
137
|
-
`chai-
|
|
138
|
-
`chai-
|
|
139
|
-
`chai-italic` `chai-underline` `chai-no-underline` `chai-truncate`
|
|
287
|
+
### Letter Spacing - `chai-tracking-{value}` (New!)
|
|
288
|
+
|
|
289
|
+
`chai-tracking-tight` `chai-tracking-normal` `chai-tracking-wide`
|
|
290
|
+
`chai-tracking-wider` `chai-tracking-widest`
|
|
140
291
|
|
|
141
292
|
---
|
|
142
293
|
|
|
143
294
|
## Layout
|
|
144
295
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
`chai-
|
|
148
|
-
|
|
296
|
+
### Display
|
|
297
|
+
|
|
298
|
+
`chai-flex` `chai-grid` `chai-block` `chai-inline-block` `chai-inline` `chai-hidden`
|
|
299
|
+
|
|
300
|
+
### Flexbox
|
|
301
|
+
|
|
302
|
+
`chai-flex-col` `chai-flex-row` `chai-flex-wrap` `chai-flex-1`
|
|
303
|
+
|
|
304
|
+
#### Align Items - `chai-items-{value}`
|
|
305
|
+
|
|
306
|
+
`chai-items-center` `chai-items-start` `chai-items-end` `chai-items-stretch`
|
|
307
|
+
|
|
308
|
+
#### Justify Content - `chai-justify-{value}`
|
|
309
|
+
|
|
310
|
+
`chai-justify-center` `chai-justify-start` `chai-justify-end`
|
|
311
|
+
`chai-justify-between` `chai-justify-around` `chai-justify-evenly`
|
|
312
|
+
|
|
313
|
+
### Grid (New!)
|
|
314
|
+
|
|
315
|
+
| Class | CSS |
|
|
316
|
+
| ------------------ | ---------------------------- |
|
|
317
|
+
| `chai-grid-cols-2` | grid-template-columns: repeat(2, 1fr) |
|
|
318
|
+
| `chai-grid-cols-3` | grid-template-columns: repeat(3, 1fr) |
|
|
319
|
+
| `chai-grid-cols-4` | grid-template-columns: repeat(4, 1fr) |
|
|
320
|
+
| `chai-col-span-2` | grid-column: span 2 |
|
|
321
|
+
| `chai-col-span-3` | grid-column: span 3 |
|
|
149
322
|
|
|
150
323
|
---
|
|
151
324
|
|
|
152
325
|
## Sizing
|
|
153
326
|
|
|
154
|
-
|
|
155
|
-
|
|
327
|
+
### Width - `chai-w-{value}`
|
|
328
|
+
|
|
329
|
+
`chai-w-full` (100%), `chai-w-screen` (100vw), `chai-w-auto`
|
|
330
|
+
Or use spacing scale: `chai-w-4`, `chai-w-8`, `chai-w-24`, etc.
|
|
331
|
+
|
|
332
|
+
### Height - `chai-h-{value}`
|
|
333
|
+
|
|
334
|
+
`chai-h-full` (100%), `chai-h-screen` (100vh), `chai-h-auto`
|
|
335
|
+
Or use spacing scale: `chai-h-4`, `chai-h-8`, `chai-h-24`, etc.
|
|
336
|
+
|
|
337
|
+
### Min/Max
|
|
338
|
+
|
|
339
|
+
`chai-max-w-{n}` `chai-min-h-{n}` `chai-min-w-{n}`
|
|
156
340
|
|
|
157
341
|
---
|
|
158
342
|
|
|
@@ -160,52 +344,152 @@ Scale: 0=0px 1=4px 2=8px 3=12px 4=16px 6=24px 8=32px 10=40px 12=48px
|
|
|
160
344
|
|
|
161
345
|
`chai-relative` `chai-absolute` `chai-fixed` `chai-sticky`
|
|
162
346
|
|
|
347
|
+
### Z-Index - `chai-z-{value}` (New!)
|
|
348
|
+
|
|
349
|
+
`chai-z-0` `chai-z-10` `chai-z-20` ... `chai-z-50`
|
|
350
|
+
|
|
163
351
|
---
|
|
164
352
|
|
|
165
353
|
## Border & Radius
|
|
166
354
|
|
|
167
|
-
|
|
168
|
-
|
|
355
|
+
### Border
|
|
356
|
+
|
|
357
|
+
`chai-border` (1px solid currentColor)
|
|
358
|
+
`chai-border-{color}` (1px solid with color)
|
|
359
|
+
|
|
360
|
+
### Border Radius - `chai-rounded-{size}`
|
|
361
|
+
|
|
362
|
+
`chai-rounded-none` `chai-rounded-sm` `chai-rounded-md`
|
|
363
|
+
`chai-rounded-lg` `chai-rounded-xl` `chai-rounded-2xl` `chai-rounded-full`
|
|
169
364
|
|
|
170
365
|
---
|
|
171
366
|
|
|
172
|
-
##
|
|
367
|
+
## Shadow
|
|
173
368
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
`chai-
|
|
177
|
-
`chai-
|
|
369
|
+
| Class | CSS |
|
|
370
|
+
| ------------------ | -------------------------------- |
|
|
371
|
+
| `chai-shadow-none` | none |
|
|
372
|
+
| `chai-shadow-sm` | 0 1px 3px rgba(0,0,0,0.10) |
|
|
373
|
+
| `chai-shadow-md` | 0 4px 12px rgba(0,0,0,0.12) |
|
|
374
|
+
| `chai-shadow-lg` | 0 8px 24px rgba(0,0,0,0.15) |
|
|
375
|
+
| `chai-shadow-xl` | 0 16px 48px rgba(0,0,0,0.20) |
|
|
376
|
+
| `chai-shadow-chai` | 0 4px 20px rgba(200,132,58,0.35) |
|
|
377
|
+
| `chai-shadow-piyush` | 0 4px 20px rgba(236,72,153,0.30) |
|
|
378
|
+
| `chai-shadow-mac` | 0 8px 32px rgba(29,29,31,0.25) |
|
|
178
379
|
|
|
179
380
|
---
|
|
180
381
|
|
|
181
|
-
##
|
|
382
|
+
## Misc Utilities
|
|
182
383
|
|
|
183
|
-
###
|
|
384
|
+
### Opacity - `chai-opacity-{value}`
|
|
184
385
|
|
|
185
|
-
|
|
386
|
+
`chai-opacity-0` (0%), `chai-opacity-50` (50%), `chai-opacity-100` (100%)
|
|
186
387
|
|
|
187
|
-
###
|
|
388
|
+
### Overflow
|
|
188
389
|
|
|
189
|
-
|
|
390
|
+
`chai-overflow-hidden` `chai-overflow-auto`
|
|
391
|
+
`chai-overflow-x-auto` `chai-overflow-y-auto`
|
|
190
392
|
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
393
|
+
### Cursor
|
|
394
|
+
|
|
395
|
+
`chai-cursor-pointer` `chai-cursor-not-allowed` `chai-cursor-{any CSS cursor value}`
|
|
396
|
+
|
|
397
|
+
### Object Fit (New!)
|
|
398
|
+
|
|
399
|
+
`chai-object-cover` `chai-object-contain`
|
|
400
|
+
|
|
401
|
+
### User Select
|
|
402
|
+
|
|
403
|
+
`chai-select-none`
|
|
404
|
+
|
|
405
|
+
### Transition
|
|
406
|
+
|
|
407
|
+
`chai-transition` (all 150ms ease), `chai-transition-none`
|
|
408
|
+
|
|
409
|
+
### Centering
|
|
410
|
+
|
|
411
|
+
`chai-mx-auto` (horizontal center with auto margins)
|
|
412
|
+
|
|
413
|
+
---
|
|
414
|
+
|
|
415
|
+
## Migration from v2.x
|
|
416
|
+
|
|
417
|
+
### Breaking Changes
|
|
418
|
+
|
|
419
|
+
1. **Import method changed** - ES modules instead of script tag
|
|
420
|
+
2. **Must call initChai()** - Not automatic anymore
|
|
421
|
+
|
|
422
|
+
### Migration Steps
|
|
423
|
+
|
|
424
|
+
**Before (v2.x)**:
|
|
425
|
+
```html
|
|
426
|
+
<script src="node_modules/chaiwind/chaiwind.js"></script>
|
|
427
|
+
```
|
|
428
|
+
|
|
429
|
+
**After (v3.x)**:
|
|
430
|
+
```html
|
|
431
|
+
<script type="module">
|
|
432
|
+
import { initChai } from './node_modules/chaiwind/src/index.js'
|
|
433
|
+
initChai()
|
|
434
|
+
</script>
|
|
435
|
+
```
|
|
436
|
+
|
|
437
|
+
All your `chai-*` classes work exactly the same! Just change how you load the script.
|
|
438
|
+
|
|
439
|
+
---
|
|
440
|
+
|
|
441
|
+
## File Structure
|
|
442
|
+
|
|
443
|
+
```
|
|
444
|
+
node_modules/chaiwind/
|
|
445
|
+
├── src/
|
|
446
|
+
│ ├── index.js # Entry point - exports initChai()
|
|
447
|
+
│ ├── tokens.js # Design tokens (customize colors/spacing here!)
|
|
448
|
+
│ ├── engine.js # Core parser + MutationObserver
|
|
449
|
+
│ └── handlers.js # Utility mappings (add custom utilities here!)
|
|
450
|
+
├── demo/
|
|
451
|
+
│ └── demo.html # Live demo
|
|
452
|
+
├── package.json
|
|
453
|
+
├── README.md
|
|
454
|
+
└── CHANGELOG.md
|
|
195
455
|
```
|
|
196
456
|
|
|
197
|
-
|
|
457
|
+
**Beginner-friendly!** Just 4 files - easy to understand and customize.
|
|
198
458
|
|
|
199
459
|
---
|
|
200
460
|
|
|
201
|
-
## Known
|
|
461
|
+
## Known Limitations
|
|
202
462
|
|
|
203
|
-
- Inline styles override
|
|
204
|
-
-
|
|
205
|
-
-
|
|
463
|
+
- **Inline styles override external CSS** - This is fundamental to the inline approach
|
|
464
|
+
- **No hover/focus states** - Inline styles can't express pseudo-classes (`:hover`, `:focus`)
|
|
465
|
+
- **No responsive breakpoints** - Media queries require a stylesheet
|
|
466
|
+
- **ES Module support required** - For older browsers, use a bundler or stay on v2.x
|
|
467
|
+
|
|
468
|
+
---
|
|
469
|
+
|
|
470
|
+
## Demo
|
|
471
|
+
|
|
472
|
+
Check out `node_modules/chaiwind/demo/demo.html` for a live example with all utilities!
|
|
473
|
+
|
|
474
|
+
Or try it online: [Coming soon]
|
|
475
|
+
|
|
476
|
+
---
|
|
477
|
+
|
|
478
|
+
## Why ChaiWind?
|
|
479
|
+
|
|
480
|
+
- ✅ **Zero build step** - Just import and go
|
|
481
|
+
- ✅ **No configuration** - Sensible ChaiCode-themed defaults
|
|
482
|
+
- ✅ **Dynamic content support** - MutationObserver handles SPAs
|
|
483
|
+
- ✅ **Beginner-friendly** - 4 simple files you can read and understand
|
|
484
|
+
- ✅ **Easy to customize** - Edit tokens.js and handlers.js
|
|
485
|
+
- ✅ **ChaiCode branding** - Themed colors celebrating our mentors
|
|
206
486
|
|
|
207
487
|
---
|
|
208
488
|
|
|
209
489
|
## License
|
|
210
490
|
|
|
211
491
|
MIT
|
|
492
|
+
|
|
493
|
+
---
|
|
494
|
+
|
|
495
|
+
Made with ☕ for the ChaiCode family
|
package/package.json
CHANGED
|
@@ -1,21 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "chaiwind",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "
|
|
5
|
-
"
|
|
3
|
+
"version": "3.0.0",
|
|
4
|
+
"description": "A lightweight utility-first CSS engine for ChaiCode - simple, modular, and beginner-friendly",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./src/index.js",
|
|
6
7
|
"files": [
|
|
7
|
-
"
|
|
8
|
+
"src/",
|
|
8
9
|
"demo/",
|
|
9
|
-
"README.md"
|
|
10
|
+
"README.md",
|
|
11
|
+
"CHANGELOG.md"
|
|
10
12
|
],
|
|
11
13
|
"keywords": [
|
|
12
14
|
"css",
|
|
13
15
|
"utility",
|
|
14
16
|
"framework",
|
|
15
17
|
"chaicode",
|
|
16
|
-
"inline-style"
|
|
18
|
+
"inline-style",
|
|
19
|
+
"runtime-css",
|
|
20
|
+
"chai",
|
|
21
|
+
"es-modules"
|
|
17
22
|
],
|
|
18
23
|
"author": "anand",
|
|
19
|
-
"license": "MIT"
|
|
20
|
-
"type": "commonjs"
|
|
24
|
+
"license": "MIT"
|
|
21
25
|
}
|