chaiwind 2.0.0 → 2.1.1
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/README.md +53 -23
- package/chaiwind.js +367 -323
- package/demo/demo.html +104 -0
- package/package.json +14 -8
- package/chaiwind.css-data.json +0 -1072
- package/scripts/postinstall.js +0 -142
package/README.md
CHANGED
|
@@ -14,18 +14,40 @@ no config, no stylesheet required.
|
|
|
14
14
|
npm install chaiwind
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
After installation, import `chaiwind.css` to enable autocomplete in your IDE (see Setup below).
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Quick Demo
|
|
22
|
+
|
|
23
|
+
Open `node_modules/chaiwind/demo/demo.html` in your browser to see chaiwind in action!
|
|
19
24
|
|
|
20
25
|
---
|
|
21
26
|
|
|
22
27
|
## Setup
|
|
23
28
|
|
|
29
|
+
### 1. Import CSS (for autocomplete)
|
|
30
|
+
|
|
31
|
+
Add this to your main CSS/HTML file to enable IDE autocomplete:
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<link rel="stylesheet" href="node_modules/chaiwind/chaiwind.css" />
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Or in CSS/SCSS:
|
|
38
|
+
|
|
39
|
+
```css
|
|
40
|
+
@import "chaiwind/chaiwind.css";
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
**Note:** This CSS file is only for autocomplete suggestions in your editor. The actual styling is done by the JavaScript at runtime.
|
|
44
|
+
|
|
45
|
+
### 2. Add the JavaScript
|
|
46
|
+
|
|
24
47
|
Add the script tag at the **bottom of your body** tag:
|
|
25
48
|
|
|
26
49
|
```html
|
|
27
50
|
<body>
|
|
28
|
-
|
|
29
51
|
<!-- your HTML here -->
|
|
30
52
|
|
|
31
53
|
<script src="node_modules/chaiwind/chaiwind.js"></script>
|
|
@@ -35,9 +57,7 @@ Add the script tag at the **bottom of your body** tag:
|
|
|
35
57
|
Then use `chai-*` classes on any element:
|
|
36
58
|
|
|
37
59
|
```html
|
|
38
|
-
<div class="chai-bg-chai chai-p-4 chai-rounded-md chai-text-white">
|
|
39
|
-
Haanji!
|
|
40
|
-
</div>
|
|
60
|
+
<div class="chai-bg-chai chai-p-4 chai-rounded-md chai-text-white">Haanji!</div>
|
|
41
61
|
|
|
42
62
|
<div class="chai-flex chai-items-center chai-justify-between chai-gap-4">
|
|
43
63
|
<p class="chai-fs-lg chai-font-bold chai-text-masala">Hitesh sir</p>
|
|
@@ -65,30 +85,34 @@ see what was applied by inspecting the element.
|
|
|
65
85
|
## Color tokens
|
|
66
86
|
|
|
67
87
|
### ChaiCode brand
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
|
88
|
+
|
|
89
|
+
| Class | Value |
|
|
90
|
+
| ----------------------- | --------- |
|
|
91
|
+
| `chai-bg-chaicode` | `#f97316` |
|
|
71
92
|
| `chai-bg-chaicode-dark` | `#1a1a2e` |
|
|
72
93
|
|
|
73
94
|
### Hitesh sir
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
|
77
|
-
| `chai-bg-
|
|
95
|
+
|
|
96
|
+
| Class | Value |
|
|
97
|
+
| ---------------- | --------- |
|
|
98
|
+
| `chai-bg-chai` | `#c8843a` |
|
|
99
|
+
| `chai-bg-adrak` | `#d4a056` |
|
|
78
100
|
| `chai-bg-masala` | `#8b4513` |
|
|
79
101
|
| `chai-bg-kulhad` | `#b5651d` |
|
|
80
102
|
|
|
81
103
|
### Piyush sir
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
|
104
|
+
|
|
105
|
+
| Class | Value |
|
|
106
|
+
| --------------------- | --------- |
|
|
107
|
+
| `chai-bg-piyush` | `#ec4899` |
|
|
85
108
|
| `chai-bg-piyush-dark` | `#be185d` |
|
|
86
109
|
|
|
87
110
|
### Akash sir
|
|
88
|
-
|
|
89
|
-
|
|
111
|
+
|
|
112
|
+
| Class | Value |
|
|
113
|
+
| ------------------ | --------- |
|
|
90
114
|
| `chai-bg-midnight` | `#1d1d1f` |
|
|
91
|
-
| `chai-bg-silver`
|
|
115
|
+
| `chai-bg-silver` | `#e8e8ed` |
|
|
92
116
|
|
|
93
117
|
Each color token generates three classes: `chai-bg-*`, `chai-text-*`, `chai-border-*`
|
|
94
118
|
|
|
@@ -154,9 +178,15 @@ Scale: 0=0px 1=4px 2=8px 3=12px 4=16px 6=24px 8=32px 10=40px 12=48px
|
|
|
154
178
|
|
|
155
179
|
---
|
|
156
180
|
|
|
157
|
-
##
|
|
181
|
+
## Autocomplete setup
|
|
182
|
+
|
|
183
|
+
### Option 1: Import CSS (recommended)
|
|
184
|
+
|
|
185
|
+
Import `chaiwind.css` in your project (see Setup above). Most modern IDEs will automatically provide autocomplete.
|
|
186
|
+
|
|
187
|
+
### Option 2: VS Code custom data
|
|
158
188
|
|
|
159
|
-
|
|
189
|
+
Add this to `.vscode/settings.json`:
|
|
160
190
|
|
|
161
191
|
```json
|
|
162
192
|
{
|
|
@@ -164,7 +194,7 @@ Configured automatically on install. To set up manually:
|
|
|
164
194
|
}
|
|
165
195
|
```
|
|
166
196
|
|
|
167
|
-
|
|
197
|
+
Restart VS Code after adding.
|
|
168
198
|
|
|
169
199
|
---
|
|
170
200
|
|
|
@@ -178,4 +208,4 @@ Add this to `.vscode/settings.json` and restart VS Code.
|
|
|
178
208
|
|
|
179
209
|
## License
|
|
180
210
|
|
|
181
|
-
MIT
|
|
211
|
+
MIT
|