@brewcodex/chai-css 1.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/README.md +527 -0
- package/dist/chaitailwind.esm.js +135 -0
- package/dist/chaitailwind.iife.js +1 -0
- package/dist/favicon.svg +1 -0
- package/dist/icons.svg +24 -0
- package/package.json +34 -0
package/README.md
ADDED
|
@@ -0,0 +1,527 @@
|
|
|
1
|
+
# Chai Tailwind - Utility-First CSS Engine
|
|
2
|
+
|
|
3
|
+
A lightweight utility-first CSS engine that provides shorthand class names mapped to CSS properties. **16px base scale** with automatic REM conversion for responsive, accessible design.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## ๐ฆ Installation
|
|
8
|
+
|
|
9
|
+
### npm
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @brewcodex/chai-css
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
import "@brewcodex/chai-css"; // Auto-initializes on DOM ready
|
|
17
|
+
// Or for manual control:
|
|
18
|
+
import chaiEngine from "@brewcodex/chai-css";
|
|
19
|
+
chaiEngine.init();
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### CDN (unpkg / jsDelivr)
|
|
23
|
+
|
|
24
|
+
Add before `</body>`:
|
|
25
|
+
|
|
26
|
+
```html
|
|
27
|
+
<script src="https://unpkg.com/@brewcodex/chai-css"></script>
|
|
28
|
+
<!-- or -->
|
|
29
|
+
<script src="https://cdn.jsdelivr.net/npm/@brewcodex/chai-css"></script>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
The script auto-initializes when the DOM is ready. Exposes `window.ChaiTailwind` for manual `init()` if needed.
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## ๐ Complete Utilities Documentation
|
|
37
|
+
|
|
38
|
+
### 1. ๐จ **TYPOGRAPHY** (`typography.js`)
|
|
39
|
+
|
|
40
|
+
Text styling and font utilities. Use `chai-` prefix with any of these properties.
|
|
41
|
+
|
|
42
|
+
| Utility | CSS Property | Example | Usage |
|
|
43
|
+
| ------------ | -------------------- | ----------------------------------------------------------- | ------------------------ |
|
|
44
|
+
| `text` | `color` | `chai-text-[#4a362c]` | Hex color in brackets |
|
|
45
|
+
| `fs` | `fontSize` | `chai-fs-16`, `chai-fs-24` | Numeric value โ REM |
|
|
46
|
+
| `align` | `textAlign` | `chai-align-center`, `chai-align-left` | String keyword |
|
|
47
|
+
| `weight` | `fontWeight` | `chai-weight-bold`, `chai-weight-normal` | String keyword |
|
|
48
|
+
| `leading` | `lineHeight` | `chai-leading-[1.5]` | Custom value in brackets |
|
|
49
|
+
| `tracking` | `letterSpacing` | `chai-tracking-[0.05em]` | Custom value in brackets |
|
|
50
|
+
| `transform` | `textTransform` | `chai-transform-uppercase` | Implicit value |
|
|
51
|
+
| `transform` | `textTransform` | `chai-transform-lowercase` | Implicit value |
|
|
52
|
+
| `transform` | `textTransform` | `chai-transform-capitalize` | Implicit value |
|
|
53
|
+
| `style` | `fontStyle` | `chai-style-italic` | Implicit value |
|
|
54
|
+
| `decoration` | `textDecorationLine` | `chai-decoration-underline`, `chai-decoration-line-through` | String keyword |
|
|
55
|
+
| `family` | `fontFamily` | `chai-family-[Arial]` | Custom value in brackets |
|
|
56
|
+
|
|
57
|
+
**Examples:**
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<h2 class="chai-fs-26 chai-text-[#4a362c] chai-weight-bold">Heading</h2>
|
|
61
|
+
<p class="chai-fs-14 chai-text-[#815c4d] chai-align-center chai-leading-[1.6]">
|
|
62
|
+
Text
|
|
63
|
+
</p>
|
|
64
|
+
<span class="chai-uppercase chai-tracking-[0.1em]">Styled Text</span>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
**Value Format:**
|
|
68
|
+
|
|
69
|
+
- `chai-fs-16` โ `fontSize: 1rem` (16 รท 16)
|
|
70
|
+
- `chai-fs-24` โ `fontSize: 1.5rem` (24 รท 16)
|
|
71
|
+
- `chai-text-[#4a362c]` โ `color: #4a362c` (brackets stripped)
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
### 2. ๐ **SIZING** (`sizing.js`)
|
|
76
|
+
|
|
77
|
+
Dimension utilities for width, height, and constraints.
|
|
78
|
+
|
|
79
|
+
| Utility | CSS Property | Example | Usage |
|
|
80
|
+
| ------- | ------------ | ------------------------------------------ | -------------------------------------------- |
|
|
81
|
+
| `w` | `width` | `chai-w-100`, `chai-w-50p`, `chai-w-100vh` | Numeric (โ REM), `p` (โ%), or viewport units |
|
|
82
|
+
| `h` | `height` | `chai-h-100`, `chai-h-50p`, `chai-h-100vh` | Numeric (โ REM), `p` (โ%), or viewport units |
|
|
83
|
+
| `min-w` | `minWidth` | `chai-min-w-200`, `chai-min-w-[300px]` | Numeric (โ REM) or brackets |
|
|
84
|
+
| `max-w` | `maxWidth` | `chai-max-w-500`, `chai-max-w-[600px]` | Numeric (โ REM) or brackets |
|
|
85
|
+
| `min-h` | `minHeight` | `chai-min-h-100`, `chai-min-h-[80px]` | Numeric (โ REM) or brackets |
|
|
86
|
+
| `max-h` | `maxHeight` | `chai-max-h-300`, `chai-max-h-[400px]` | Numeric (โ REM) or brackets |
|
|
87
|
+
|
|
88
|
+
**Examples:**
|
|
89
|
+
|
|
90
|
+
```html
|
|
91
|
+
<div class="chai-w-100p chai-h-100vh">Full width & viewport height</div>
|
|
92
|
+
<img
|
|
93
|
+
class="chai-w-80 chai-h-80"
|
|
94
|
+
src="image.jpg" />
|
|
95
|
+
<div class="chai-min-h-100 chai-max-w-600">Constrained box</div>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
**Value Format:**
|
|
99
|
+
|
|
100
|
+
- `chai-w-100` โ `width: 6.25rem` (100 รท 16)
|
|
101
|
+
- `chai-w-50p` โ `width: 50%` (p suffix converts to %)
|
|
102
|
+
- `chai-h-100vh` โ `height: 100vh` (viewport units pass through)
|
|
103
|
+
- `chai-min-w-[300px]` โ `minWidth: 300px` (brackets pass through as-is)
|
|
104
|
+
|
|
105
|
+
---
|
|
106
|
+
|
|
107
|
+
### 3. ๐ **LAYOUT** (`layout.js`)
|
|
108
|
+
|
|
109
|
+
Display, positioning, and visibility utilities for page layout and component positioning.
|
|
110
|
+
|
|
111
|
+
| Utility | CSS Property | Example | Usage |
|
|
112
|
+
| ------------ | ------------ | ------------------------------------------------------ | --------------------------- |
|
|
113
|
+
| `display` | `display` | `chai-display-flex`, `chai-display-block` | String keyword |
|
|
114
|
+
| `visibility` | `visibility` | `chai-visibility-visible`, `chai-visibility-invisible` | String keyword |
|
|
115
|
+
| `pos` | `position` | `chai-pos-absolute`, `chai-pos-relative` | String keyword |
|
|
116
|
+
| `top` | `top` | `chai-top-0`, `chai-top-[20px]` | Numeric (โ REM) or brackets |
|
|
117
|
+
| `right` | `right` | `chai-right-0`, `chai-right-[15px]` | Numeric (โ REM) or brackets |
|
|
118
|
+
| `bottom` | `bottom` | `chai-bottom-0`, `chai-bottom-[10px]` | Numeric (โ REM) or brackets |
|
|
119
|
+
| `left` | `left` | `chai-left-0`, `chai-left-[25px]` | Numeric (โ REM) or brackets |
|
|
120
|
+
| `z` | `zIndex` | `chai-z-10`, `chai-z-50`, `chai-z-[999]` | Numeric or brackets |
|
|
121
|
+
| `overflow` | `overflow` | `chai-overflow-hidden`, `chai-overflow-auto` | String keyword |
|
|
122
|
+
| `overflow-x` | `overflowX` | `chai-overflow-x-hidden`, `chai-overflow-x-auto` | String keyword |
|
|
123
|
+
| `overflow-y` | `overflowY` | `chai-overflow-y-hidden`, `chai-overflow-y-auto` | String keyword |
|
|
124
|
+
| `object` | `objectFit` | `chai-object-cover`, `chai-object-contain` | String keyword |
|
|
125
|
+
|
|
126
|
+
**Examples:**
|
|
127
|
+
|
|
128
|
+
```html
|
|
129
|
+
<div class="chai-display-flex chai-pos-relative">Flex container</div>
|
|
130
|
+
<div class="chai-pos-absolute chai-top-0 chai-left-0 chai-z-10">
|
|
131
|
+
Positioned absolutely
|
|
132
|
+
</div>
|
|
133
|
+
<div class="chai-overflow-hidden chai-overflow-x-auto">Overflow control</div>
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
**Value Format:**
|
|
137
|
+
|
|
138
|
+
- `chai-top-0` โ `top: 0` (string "0" passed through)
|
|
139
|
+
- `chai-top-16` โ `top: 1rem` (16 รท 16)
|
|
140
|
+
- `chai-top-[20px]` โ `top: 20px` (brackets pass through)
|
|
141
|
+
- `chai-display-flex` โ `display: flex` (string keyword)
|
|
142
|
+
|
|
143
|
+
---
|
|
144
|
+
|
|
145
|
+
### 4. ๐ฆ **SPACING** (`spacing.js`)
|
|
146
|
+
|
|
147
|
+
Padding and margin utilities with directional control.
|
|
148
|
+
|
|
149
|
+
#### Padding (`p*`)
|
|
150
|
+
|
|
151
|
+
| Utility | CSS Property | Example | Usage |
|
|
152
|
+
| ------- | -------------------- | ------------------------ | --------------- |
|
|
153
|
+
| `p` | `padding` | `chai-p-16`, `chai-p-32` | Numeric (โ REM) |
|
|
154
|
+
| `pt` | `paddingBlockStart` | `chai-pt-8` | Numeric (โ REM) |
|
|
155
|
+
| `pb` | `paddingBlockEnd` | `chai-pb-8` | Numeric (โ REM) |
|
|
156
|
+
| `pl` | `paddingInlineStart` | `chai-pl-12` | Numeric (โ REM) |
|
|
157
|
+
| `pr` | `paddingInlineEnd` | `chai-pr-12` | Numeric (โ REM) |
|
|
158
|
+
| `px` | `paddingInline` | `chai-px-16` | Numeric (โ REM) |
|
|
159
|
+
| `py` | `paddingBlock` | `chai-py-12` | Numeric (โ REM) |
|
|
160
|
+
|
|
161
|
+
#### Margin (`m*`)
|
|
162
|
+
|
|
163
|
+
| Utility | CSS Property | Example | Usage |
|
|
164
|
+
| ------- | ------------------- | -------------------------- | ------------------------- |
|
|
165
|
+
| `m` | `margin` | `chai-m-16`, `chai-m-auto` | Numeric (โ REM) or string |
|
|
166
|
+
| `mt` | `marginBlockStart` | `chai-mt-8` | Numeric (โ REM) |
|
|
167
|
+
| `mb` | `marginBlockEnd` | `chai-mb-8` | Numeric (โ REM) |
|
|
168
|
+
| `ml` | `marginInlineStart` | `chai-ml-12` | Numeric (โ REM) |
|
|
169
|
+
| `mr` | `marginInlineEnd` | `chai-mr-12` | Numeric (โ REM) |
|
|
170
|
+
| `mx` | `marginInline` | `chai-mx-auto` | Numeric (โ REM) or string |
|
|
171
|
+
| `my` | `marginBlock` | `chai-my-16` | Numeric (โ REM) |
|
|
172
|
+
|
|
173
|
+
**Examples:**
|
|
174
|
+
|
|
175
|
+
```html
|
|
176
|
+
<div class="chai-p-32">All sides padding: 2rem (32px)</div>
|
|
177
|
+
<div class="chai-py-16 chai-px-24">Vertical 1rem, Horizontal 1.5rem</div>
|
|
178
|
+
<div class="chai-m-auto">Centered with auto margin</div>
|
|
179
|
+
<div class="chai-mt-8 chai-mb-16">Top 0.5rem, Bottom 1rem</div>
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
**Value Format:**
|
|
183
|
+
|
|
184
|
+
- `chai-p-32` โ `padding: 2rem` (32 รท 16)
|
|
185
|
+
- `chai-m-auto` โ `margin: auto` (string keyword)
|
|
186
|
+
- `chai-mx-auto` โ `marginInline: auto` (string keyword)
|
|
187
|
+
|
|
188
|
+
---
|
|
189
|
+
|
|
190
|
+
### 5. ๐จ **BACKGROUND** (`background.js`)
|
|
191
|
+
|
|
192
|
+
Background color utilities with hex color support.
|
|
193
|
+
|
|
194
|
+
| Utility | CSS Property | Example | Usage |
|
|
195
|
+
| ------- | ----------------- | ------------------- | ---------------------- |
|
|
196
|
+
| `bg` | `backgroundColor` | `chai-bg-[#f5f1e9]` | Hex colors in brackets |
|
|
197
|
+
|
|
198
|
+
**Examples:**
|
|
199
|
+
|
|
200
|
+
```html
|
|
201
|
+
<div class="chai-bg-[#f5f1e9]">Cream background</div>
|
|
202
|
+
<div class="chai-bg-[#815c4d]">Brown background</div>
|
|
203
|
+
<div class="chai-bg-[#ffffff]">White background</div>
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
**Value Format:**
|
|
207
|
+
|
|
208
|
+
- `chai-bg-[#f5f1e9]` โ `backgroundColor: #f5f1e9` (brackets stripped)
|
|
209
|
+
|
|
210
|
+
---
|
|
211
|
+
|
|
212
|
+
### 6. ๐ฒ **BORDER** (`border.js`)
|
|
213
|
+
|
|
214
|
+
Border styling utilities for width, color, style, and radius.
|
|
215
|
+
|
|
216
|
+
| Utility | CSS Property | Example | Usage |
|
|
217
|
+
| ----------------- | ---------------- | ------------------------------------ | --------------------------- |
|
|
218
|
+
| `bw` | `borderWidth` | `chai-bw-1`, `chai-bw-2` | Numeric (โ REM) |
|
|
219
|
+
| `bc` | `borderColor` | `chai-bc-[#ccc]` | Hex color in brackets |
|
|
220
|
+
| `bs` | `borderStyle` | `chai-bs-solid`, `chai-bs-dashed` | String keyword |
|
|
221
|
+
| `rounded` | `borderRadius` | `chai-rounded-8`, `chai-rounded-50p` | Numeric (โ REM) or `p` (โ%) |
|
|
222
|
+
| `border-collapse` | `borderCollapse` | `chai-border-collapse` | String keyword |
|
|
223
|
+
|
|
224
|
+
**Examples:**
|
|
225
|
+
|
|
226
|
+
```html
|
|
227
|
+
<div class="chai-bw-1 chai-bc-[#ccc] chai-bs-solid chai-rounded-8">
|
|
228
|
+
Bordered box
|
|
229
|
+
</div>
|
|
230
|
+
<div class="chai-rounded-50p">Circle - 50% radius</div>
|
|
231
|
+
<button class="chai-bw-2 chai-bc-[#4a362c] chai-rounded-12">Button</button>
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
**Value Format:**
|
|
235
|
+
|
|
236
|
+
- `chai-bw-1` โ `borderWidth: 0.0625rem` (1 รท 16)
|
|
237
|
+
- `chai-bc-[#ccc]` โ `borderColor: #ccc` (brackets stripped)
|
|
238
|
+
- `chai-rounded-8` โ `borderRadius: 0.5rem` (8 รท 16)
|
|
239
|
+
- `chai-rounded-50p` โ `borderRadius: 50%` (p suffix converts to %)
|
|
240
|
+
|
|
241
|
+
---
|
|
242
|
+
|
|
243
|
+
### 7. ๐ **FLEXBOX** (`flex_grid.js`)
|
|
244
|
+
|
|
245
|
+
Flex layout utilities for alignment, direction, sizing, and spacing.
|
|
246
|
+
|
|
247
|
+
#### Direction & Wrapping
|
|
248
|
+
|
|
249
|
+
| Utility | CSS Property | Example | Usage |
|
|
250
|
+
| ---------- | --------------- | ------------------------------------ | ----------------------- |
|
|
251
|
+
| `flex-row` | `flexDirection` | `chai-flex-row` | Row direction (default) |
|
|
252
|
+
| `flex-col` | `flexDirection` | `chai-flex-col` | Column direction |
|
|
253
|
+
| `flex-row` | `flexDirection` | `chai-flex-row-reverse` | Row direction recerse |
|
|
254
|
+
| `flex-col` | `flexDirection` | `chai-flex-col-reverse` | Row direction recerse |
|
|
255
|
+
| `wrap` | `flexWrap` | `chai-wrap-wrap`, `chai-wrap-nowrap` | Wrapping behavior |
|
|
256
|
+
|
|
257
|
+
#### Alignment
|
|
258
|
+
|
|
259
|
+
| Utility | CSS Property | Example | Usage |
|
|
260
|
+
| --------- | ---------------- | --------------------------------------------- | ------------------------- |
|
|
261
|
+
| `justify` | `justifyContent` | `chai-justify-center`, `chai-justify-between` | Horizontal alignment |
|
|
262
|
+
| `items` | `alignItems` | `chai-items-center`, `chai-items-start` | Vertical alignment |
|
|
263
|
+
| `self` | `alignSelf` | `chai-self-end`, `chai-self-center` | Individual item alignment |
|
|
264
|
+
|
|
265
|
+
#### Sizing & Spacing
|
|
266
|
+
|
|
267
|
+
| Utility | CSS Property | Example | Usage |
|
|
268
|
+
| -------- | ------------ | ------------------------------------------ | ------------------------- |
|
|
269
|
+
| `flex` | `flex` | `chai-flex-1`, `chai-flex-auto` | Flex grow behavior |
|
|
270
|
+
| `grow` | `flexGrow` | `chai-grow-1`, `chai-grow-0` | Flex grow value |
|
|
271
|
+
| `shrink` | `flexShrink` | `chai-shrink-0`, `chai-shrink-1` | Flex shrink value |
|
|
272
|
+
| `gap` | `gap` | `chai-gap-4`, `chai-gap-16`, `chai-gap-32` | Gap between items (โ REM) |
|
|
273
|
+
|
|
274
|
+
**Examples:**
|
|
275
|
+
|
|
276
|
+
```html
|
|
277
|
+
<!-- Flex row with centered items -->
|
|
278
|
+
<div
|
|
279
|
+
class="chai-display-flex chai-flex-row chai-gap-16 chai-justify-center chai-items-center">
|
|
280
|
+
<div class="chai-flex-1">Item 1</div>
|
|
281
|
+
<div class="chai-flex-1">Item 2</div>
|
|
282
|
+
</div>
|
|
283
|
+
|
|
284
|
+
<!-- Flex column layout -->
|
|
285
|
+
<div class="chai-display-flex chai-flex-col chai-gap-8">
|
|
286
|
+
<div>Header</div>
|
|
287
|
+
<div>Content</div>
|
|
288
|
+
<div>Footer</div>
|
|
289
|
+
</div>
|
|
290
|
+
|
|
291
|
+
<!-- Space-between layout -->
|
|
292
|
+
<div
|
|
293
|
+
class="chai-display-flex chai-justify-between chai-items-center chai-gap-32">
|
|
294
|
+
<span>Left</span>
|
|
295
|
+
<span>Right</span>
|
|
296
|
+
</div>
|
|
297
|
+
```
|
|
298
|
+
|
|
299
|
+
**Value Format:**
|
|
300
|
+
|
|
301
|
+
- `chai-gap-16` โ `gap: 1rem` (16 รท 16)
|
|
302
|
+
- `chai-gap-32` โ `gap: 2rem` (32 รท 16)
|
|
303
|
+
- `chai-justify-center` โ `justifyContent: center` (string keyword)
|
|
304
|
+
- `chai-items-center` โ `alignItems: center` (string keyword)
|
|
305
|
+
|
|
306
|
+
---
|
|
307
|
+
|
|
308
|
+
## ๐ Complete Usage Examples
|
|
309
|
+
|
|
310
|
+
### Example 1: Card Component
|
|
311
|
+
|
|
312
|
+
```html
|
|
313
|
+
<div
|
|
314
|
+
class="chai-bg-[#fff] chai-p-32 chai-rounded-16 chai-display-flex chai-flex-col chai-gap-16 chai-bw-1 chai-bc-[#ddd] chai-bs-solid">
|
|
315
|
+
<h2 class="chai-fs-24 chai-weight-bold chai-text-[#4a362c] chai-m-0">
|
|
316
|
+
Card Title
|
|
317
|
+
</h2>
|
|
318
|
+
<p class="chai-fs-14 chai-text-[#815c4d] chai-leading-[1.6] chai-m-0">
|
|
319
|
+
Card description with proper spacing and typography styling.
|
|
320
|
+
</p>
|
|
321
|
+
<button
|
|
322
|
+
class="chai-bg-[#4a362c] chai-text-[#fff] chai-p-12 chai-rounded-12 chai-fs-16 chai-weight-bold chai-bw-0">
|
|
323
|
+
Action Button
|
|
324
|
+
</button>
|
|
325
|
+
</div>
|
|
326
|
+
```
|
|
327
|
+
|
|
328
|
+
**Resulting CSS:**
|
|
329
|
+
|
|
330
|
+
```css
|
|
331
|
+
padding: 2rem; /* chai-p-32: 32 รท 16 */
|
|
332
|
+
borderradius: 1rem; /* chai-rounded-16: 16 รท 16 */
|
|
333
|
+
gap: 1rem; /* chai-gap-16: 16 รท 16 */
|
|
334
|
+
fontsize: 1.5rem; /* chai-fs-24: 24 รท 16 */
|
|
335
|
+
backgroundcolor: #4a362c; /* chai-bg-[#4a362c] */
|
|
336
|
+
```
|
|
337
|
+
|
|
338
|
+
### Example 2: Two-Column Layout
|
|
339
|
+
|
|
340
|
+
```html
|
|
341
|
+
<div
|
|
342
|
+
class="chai-display-flex chai-flex-row chai-gap-32 chai-justify-center chai-items-start">
|
|
343
|
+
<div class="chai-w-350 chai-display-flex chai-flex-col chai-gap-16">
|
|
344
|
+
<!-- Left column: 350px (21.875rem) -->
|
|
345
|
+
</div>
|
|
346
|
+
<div class="chai-w-400 chai-display-flex chai-flex-col chai-gap-16">
|
|
347
|
+
<!-- Right column: 400px (25rem) -->
|
|
348
|
+
</div>
|
|
349
|
+
</div>
|
|
350
|
+
```
|
|
351
|
+
|
|
352
|
+
**Resulting CSS:**
|
|
353
|
+
|
|
354
|
+
```css
|
|
355
|
+
width: 21.875rem; /* chai-w-350: 350 รท 16 */
|
|
356
|
+
gap: 2rem; /* chai-gap-32: 32 รท 16 */
|
|
357
|
+
justifycontent: center;
|
|
358
|
+
```
|
|
359
|
+
|
|
360
|
+
### Example 3: Responsive Hero Section
|
|
361
|
+
|
|
362
|
+
```html
|
|
363
|
+
<section
|
|
364
|
+
class="chai-bg-gradient chai-h-100vh chai-w-100p chai-display-flex chai-items-center chai-justify-center chai-flex-col chai-gap-24 chai-p-32">
|
|
365
|
+
<h1
|
|
366
|
+
class="chai-fs-48 chai-weight-bold chai-text-[#fff] chai-align-center chai-m-0">
|
|
367
|
+
Welcome to Chai Tailwind
|
|
368
|
+
</h1>
|
|
369
|
+
<p class="chai-fs-18 chai-text-[#f0f0f0] chai-align-center chai-max-w-600">
|
|
370
|
+
Lightweight utility-first CSS engine with 16px REM scaling
|
|
371
|
+
</p>
|
|
372
|
+
</section>
|
|
373
|
+
```
|
|
374
|
+
|
|
375
|
+
**Value Conversions:**
|
|
376
|
+
|
|
377
|
+
- `chai-h-100vh` โ `height: 100vh` (viewport unit)
|
|
378
|
+
- `chai-w-100p` โ `width: 100%` (percentage with p suffix)
|
|
379
|
+
- `chai-gap-24` โ `gap: 1.5rem` (24 รท 16)
|
|
380
|
+
- `chai-max-w-600` โ `maxWidth: 37.5rem` (600 รท 16)
|
|
381
|
+
|
|
382
|
+
---
|
|
383
|
+
|
|
384
|
+
## ๐ฏ Value Formatting System
|
|
385
|
+
|
|
386
|
+
The Chai engine has smart value parsing that automatically converts values based on their format:
|
|
387
|
+
|
|
388
|
+
### ๐ข **Numeric Values โ REM Conversion**
|
|
389
|
+
|
|
390
|
+
Any numeric value in these properties gets converted from pixels to REM (base: 16px):
|
|
391
|
+
|
|
392
|
+
**Numeric-to-REM Properties:**
|
|
393
|
+
|
|
394
|
+
- Spacing: `p`, `m`, `pt`, `pb`, `pl`, `pr`, `px`, `py`, `mt`, `mb`, `ml`, `mr`, `my`, `mx`
|
|
395
|
+
- Sizing: `w`, `h`, `min-w`, `min-h`, `max-w`, `max-h`
|
|
396
|
+
- Typography: `fs` (fontSize)
|
|
397
|
+
- Border: `rounded` (borderRadius), `bw` (borderWidth)
|
|
398
|
+
- Flexbox: `gap`
|
|
399
|
+
|
|
400
|
+
**Conversion Formula:** `value รท 16 = rem`
|
|
401
|
+
|
|
402
|
+
Examples:
|
|
403
|
+
|
|
404
|
+
- `chai-p-16` โ `padding: 1rem` (16 รท 16)
|
|
405
|
+
- `chai-fs-24` โ `fontSize: 1.5rem` (24 รท 16)
|
|
406
|
+
- `chai-gap-32` โ `gap: 2rem` (32 รท 16)
|
|
407
|
+
- `chai-w-100` โ `width: 6.25rem` (100 รท 16)
|
|
408
|
+
|
|
409
|
+
### ๐ **Percentage Values (p suffix)**
|
|
410
|
+
|
|
411
|
+
Any value ending with `p` converts to a percentage:
|
|
412
|
+
|
|
413
|
+
Examples:
|
|
414
|
+
|
|
415
|
+
- `chai-w-50p` โ `width: 50%`
|
|
416
|
+
- `chai-h-75p` โ `height: 75%`
|
|
417
|
+
- `chai-rounded-50p` โ `borderRadius: 50%`
|
|
418
|
+
|
|
419
|
+
### ๐ฑ **Viewport Units (vh/vw)**
|
|
420
|
+
|
|
421
|
+
Viewport units pass through unchanged:
|
|
422
|
+
|
|
423
|
+
Examples:
|
|
424
|
+
|
|
425
|
+
- `chai-h-100vh` โ `height: 100vh`
|
|
426
|
+
- `chai-w-50vw` โ `width: 50vw`
|
|
427
|
+
|
|
428
|
+
### ๐จ **Hex Colors (brackets)**
|
|
429
|
+
|
|
430
|
+
Hex colors wrapped in brackets get brackets stripped:
|
|
431
|
+
|
|
432
|
+
Examples:
|
|
433
|
+
|
|
434
|
+
- `chai-bg-[#f5f1e9]` โ `backgroundColor: #f5f1e9`
|
|
435
|
+
- `chai-text-[#4a362c]` โ `color: #4a362c`
|
|
436
|
+
- `chai-bc-[#ccc]` โ `borderColor: #ccc`
|
|
437
|
+
|
|
438
|
+
### ๐ท๏ธ **String Keywords**
|
|
439
|
+
|
|
440
|
+
String values pass through unchanged:
|
|
441
|
+
|
|
442
|
+
Examples:
|
|
443
|
+
|
|
444
|
+
- `chai-display-flex` โ `display: flex`
|
|
445
|
+
- `chai-items-center` โ `alignItems: center`
|
|
446
|
+
- `chai-justify-between` โ `justifyContent: between`
|
|
447
|
+
- `chai-bs-solid` โ `borderStyle: solid`
|
|
448
|
+
|
|
449
|
+
### ๐ฆ **Custom Values (brackets)**
|
|
450
|
+
|
|
451
|
+
Any custom value in brackets passes through as-is:
|
|
452
|
+
|
|
453
|
+
Examples:
|
|
454
|
+
|
|
455
|
+
- `chai-min-w-[300px]` โ `minWidth: 300px`
|
|
456
|
+
- `chai-p-[1.5em]` โ `padding: 1.5em`
|
|
457
|
+
- `chai-top-[calc(100% - 20px)]` โ `top: calc(100% - 20px)`
|
|
458
|
+
|
|
459
|
+
---
|
|
460
|
+
|
|
461
|
+
## ๐ REM Scale Reference
|
|
462
|
+
|
|
463
|
+
**16px Base Scale** - All numeric values convert to REM:
|
|
464
|
+
|
|
465
|
+
| Value | REM | Actual | Example |
|
|
466
|
+
| ----- | ------- | ------ | ------------- |
|
|
467
|
+
| 4 | 0.25rem | 4px | `chai-gap-4` |
|
|
468
|
+
| 8 | 0.5rem | 8px | `chai-p-8` |
|
|
469
|
+
| 12 | 0.75rem | 12px | `chai-pl-12` |
|
|
470
|
+
| 16 | 1rem | 16px | `chai-fs-16` |
|
|
471
|
+
| 24 | 1.5rem | 24px | `chai-m-24` |
|
|
472
|
+
| 32 | 2rem | 32px | `chai-p-32` |
|
|
473
|
+
| 48 | 3rem | 48px | `chai-gap-48` |
|
|
474
|
+
| 64 | 4rem | 64px | `chai-p-64` |
|
|
475
|
+
| 80 | 5rem | 80px | `chai-w-80` |
|
|
476
|
+
| 96 | 6rem | 96px | `chai-h-96` |
|
|
477
|
+
| 100 | 6.25rem | 100px | `chai-w-100` |
|
|
478
|
+
|
|
479
|
+
---
|
|
480
|
+
|
|
481
|
+
## ๐ฏ Class Naming Convention
|
|
482
|
+
|
|
483
|
+
All utilities follow the pattern:
|
|
484
|
+
|
|
485
|
+
```
|
|
486
|
+
chai-[property]-[value]
|
|
487
|
+
```
|
|
488
|
+
|
|
489
|
+
Examples:
|
|
490
|
+
|
|
491
|
+
- `chai-p-24` โ property: `p`, value: `24`
|
|
492
|
+
- `chai-text-[#4a362c]` โ property: `text`, value: `[#4a362c]`
|
|
493
|
+
- `chai-display-flex` โ property: `display`, value: `flex`
|
|
494
|
+
- `chai-w-100p` โ property: `w`, value: `100p`
|
|
495
|
+
|
|
496
|
+
---
|
|
497
|
+
|
|
498
|
+
## โจ Summary
|
|
499
|
+
|
|
500
|
+
### ๐ Statistics
|
|
501
|
+
|
|
502
|
+
- **Total Utilities**: 70+
|
|
503
|
+
- **Utility Categories**: 7
|
|
504
|
+
- **CSS Properties Mapped**: 40+
|
|
505
|
+
- **Base Scale**: 16px REM conversion
|
|
506
|
+
- **Value Types**: Numeric (REM), Percentage, Viewport, Hex Color, String Keyword, Custom
|
|
507
|
+
|
|
508
|
+
### ๐จ Categories
|
|
509
|
+
|
|
510
|
+
1. **Typography** (12 utilities) - Text styling, colors, decoration
|
|
511
|
+
2. **Sizing** (6 utilities) - Width, height, constraints
|
|
512
|
+
3. **Layout** (12 utilities) - Display, positioning, overflow
|
|
513
|
+
4. **Spacing** (14 utilities) - Padding and margin with directions
|
|
514
|
+
5. **Background** (1 utility) - Background colors
|
|
515
|
+
6. **Border** (4 utilities) - Width, color, style, radius
|
|
516
|
+
7. **Flexbox** (11 utilities) - Direction, alignment, gap, flex sizing
|
|
517
|
+
|
|
518
|
+
### ๐ Key Features
|
|
519
|
+
|
|
520
|
+
- โ
**Automatic REM Scaling** - Numeric values auto-convert with 16px base
|
|
521
|
+
- โ
**Smart Value Parsing** - Percentages (p suffix), viewport units (vh/vw), custom values (brackets)
|
|
522
|
+
- โ
**Hex Color Support** - Direct bracket notation for colors: `[#4a362c]`
|
|
523
|
+
- โ
**Responsive-First** - Built for fluid, accessible designs
|
|
524
|
+
- โ
**Lightweight** - Minimal CSS footprint, utility-first approach
|
|
525
|
+
- โ
**Accessibility** - Logical properties (start/end) support RTL/LTR
|
|
526
|
+
|
|
527
|
+
Perfect for rapid, utility-driven UI development! โ
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
//#region src/utilities/typography.js
|
|
2
|
+
var e = {
|
|
3
|
+
text: "color",
|
|
4
|
+
fs: "fontSize",
|
|
5
|
+
align: "textAlign",
|
|
6
|
+
weight: "fontWeight",
|
|
7
|
+
leading: "lineHeight",
|
|
8
|
+
tracking: "letterSpacing",
|
|
9
|
+
decoration: "textDecorationLine",
|
|
10
|
+
family: "fontFamily",
|
|
11
|
+
transform: "textTransform",
|
|
12
|
+
style: "fontStyle"
|
|
13
|
+
}, t = { bg: "backgroundColor" }, n = {
|
|
14
|
+
p: "padding",
|
|
15
|
+
pt: "paddingBlockStart",
|
|
16
|
+
pb: "paddingBlockEnd",
|
|
17
|
+
pl: "paddingInlineStart",
|
|
18
|
+
pr: "paddingInlineEnd",
|
|
19
|
+
px: "paddingInline",
|
|
20
|
+
py: "paddingBlock",
|
|
21
|
+
m: "margin",
|
|
22
|
+
mt: "marginBlockStart",
|
|
23
|
+
mb: "marginBlockEnd",
|
|
24
|
+
ml: "marginInlineStart",
|
|
25
|
+
mr: "marginInlineEnd",
|
|
26
|
+
mx: "marginInline",
|
|
27
|
+
my: "marginBlock"
|
|
28
|
+
}, r = {
|
|
29
|
+
bw: "borderWidth",
|
|
30
|
+
bc: "borderColor",
|
|
31
|
+
bs: "borderStyle",
|
|
32
|
+
bb: "borderBottom",
|
|
33
|
+
rounded: "borderRadius",
|
|
34
|
+
"border-collapse": "borderCollapse"
|
|
35
|
+
}, i = {
|
|
36
|
+
display: "display",
|
|
37
|
+
visibility: "visibility",
|
|
38
|
+
"box-sizing": "boxSizing",
|
|
39
|
+
pos: "position",
|
|
40
|
+
top: "top",
|
|
41
|
+
right: "right",
|
|
42
|
+
bottom: "bottom",
|
|
43
|
+
left: "left",
|
|
44
|
+
z: "zIndex",
|
|
45
|
+
overflow: "overflow",
|
|
46
|
+
"overflow-x": "overflowX",
|
|
47
|
+
"overflow-y": "overflowY",
|
|
48
|
+
object: "objectFit",
|
|
49
|
+
cursor: "cursor",
|
|
50
|
+
transition: "transition"
|
|
51
|
+
}, a = {
|
|
52
|
+
w: "width",
|
|
53
|
+
h: "height",
|
|
54
|
+
"min-w": "minWidth",
|
|
55
|
+
"min-h": "minHeight",
|
|
56
|
+
"max-w": "maxWidth",
|
|
57
|
+
"max-h": "maxHeight"
|
|
58
|
+
}, o = {
|
|
59
|
+
"flex-row": ["flexDirection"],
|
|
60
|
+
"flex-col": ["flexDirection"],
|
|
61
|
+
wrap: ["flexWrap"],
|
|
62
|
+
justify: ["justifyContent"],
|
|
63
|
+
items: ["alignItems"],
|
|
64
|
+
self: ["alignSelf"],
|
|
65
|
+
flex: ["flex"],
|
|
66
|
+
grow: ["flexGrow"],
|
|
67
|
+
shrink: ["flexShrink"],
|
|
68
|
+
gap: ["gap"]
|
|
69
|
+
}, s = {
|
|
70
|
+
...i,
|
|
71
|
+
...n,
|
|
72
|
+
...a,
|
|
73
|
+
...e,
|
|
74
|
+
...t,
|
|
75
|
+
...r,
|
|
76
|
+
...o
|
|
77
|
+
}, c = (e) => {
|
|
78
|
+
let t = e.replace("chai-", "").split("-"), n = `${t[0]}-${t[1]}`;
|
|
79
|
+
return console.log("Two parts:", n), s[n] ? {
|
|
80
|
+
propKey: n,
|
|
81
|
+
propValue: t.slice(2).join("-") || t[1]
|
|
82
|
+
} : s[t[0]] ? {
|
|
83
|
+
propKey: t[0],
|
|
84
|
+
propValue: t.slice(1).join("-")
|
|
85
|
+
} : {
|
|
86
|
+
propKey: null,
|
|
87
|
+
propValue: null
|
|
88
|
+
};
|
|
89
|
+
}, l = (e) => typeof e == "string" ? e.replace(/[\[\]]/g, "") : e, u = (e, t = 16) => {
|
|
90
|
+
let n = parseFloat(e);
|
|
91
|
+
return isNaN(n) ? e : `${n / t}rem`;
|
|
92
|
+
}, d = (e) => e.endsWith("vh") || e.endsWith("vw"), f = (e) => typeof e == "string" && e.endsWith("p"), p = (e) => e.replace("p", "%"), m = (e) => e.startsWith("#") || e.startsWith("[#") && e.endsWith("]"), h = (e) => typeof e == "string" && e.startsWith("[") && e.endsWith("]"), g = (e) => [
|
|
93
|
+
"p",
|
|
94
|
+
"m",
|
|
95
|
+
"fs",
|
|
96
|
+
"rounded",
|
|
97
|
+
"gap",
|
|
98
|
+
"w",
|
|
99
|
+
"h",
|
|
100
|
+
"min-w",
|
|
101
|
+
"min-h",
|
|
102
|
+
"max-w",
|
|
103
|
+
"max-h",
|
|
104
|
+
"pt",
|
|
105
|
+
"pb",
|
|
106
|
+
"pl",
|
|
107
|
+
"pr",
|
|
108
|
+
"px",
|
|
109
|
+
"py",
|
|
110
|
+
"mt",
|
|
111
|
+
"mb",
|
|
112
|
+
"ml",
|
|
113
|
+
"mr",
|
|
114
|
+
"mx",
|
|
115
|
+
"my",
|
|
116
|
+
"bw"
|
|
117
|
+
].includes(e), _ = (e, t) => e ? m(e) ? l(e) : f(e) ? p(e) : d(e) ? e : t === "flex-row" ? e === "reverse" ? "row-reverse" : "row" : t === "flex-col" ? (e === "column" || e === "col" || e === "reverse") && e === "reverse" ? "column-reverse" : "column" : !isNaN(e) && g(t) ? u(e) : h(e) ? l(e) : e : "", v = (e, t, n) => {
|
|
118
|
+
let r = s[t];
|
|
119
|
+
if (r) {
|
|
120
|
+
let i = _(n, t);
|
|
121
|
+
(Array.isArray(r) ? r : [r]).forEach((t) => {
|
|
122
|
+
e.style[t] = i;
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
}, y = { init() {
|
|
126
|
+
document.querySelectorAll("[class*=\"chai-\"]").forEach((e) => {
|
|
127
|
+
[...e.classList].filter((e) => e.startsWith("chai-")).forEach((t) => {
|
|
128
|
+
let { propKey: n, propValue: r } = c(t);
|
|
129
|
+
n && (v(e, n, r), e.classList.remove(t));
|
|
130
|
+
});
|
|
131
|
+
});
|
|
132
|
+
} }, b = y;
|
|
133
|
+
typeof window < "u" && (document.readyState === "loading" ? window.addEventListener("DOMContentLoaded", () => y.init()) : y.init());
|
|
134
|
+
//#endregion
|
|
135
|
+
export { b as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var ChaiTailwind=(function(){var e={text:`color`,fs:`fontSize`,align:`textAlign`,weight:`fontWeight`,leading:`lineHeight`,tracking:`letterSpacing`,decoration:`textDecorationLine`,family:`fontFamily`,transform:`textTransform`,style:`fontStyle`},t={bg:`backgroundColor`},n={p:`padding`,pt:`paddingBlockStart`,pb:`paddingBlockEnd`,pl:`paddingInlineStart`,pr:`paddingInlineEnd`,px:`paddingInline`,py:`paddingBlock`,m:`margin`,mt:`marginBlockStart`,mb:`marginBlockEnd`,ml:`marginInlineStart`,mr:`marginInlineEnd`,mx:`marginInline`,my:`marginBlock`},r={bw:`borderWidth`,bc:`borderColor`,bs:`borderStyle`,bb:`borderBottom`,rounded:`borderRadius`,"border-collapse":`borderCollapse`},i={display:`display`,visibility:`visibility`,"box-sizing":`boxSizing`,pos:`position`,top:`top`,right:`right`,bottom:`bottom`,left:`left`,z:`zIndex`,overflow:`overflow`,"overflow-x":`overflowX`,"overflow-y":`overflowY`,object:`objectFit`,cursor:`cursor`,transition:`transition`},a={w:`width`,h:`height`,"min-w":`minWidth`,"min-h":`minHeight`,"max-w":`maxWidth`,"max-h":`maxHeight`},o={"flex-row":[`flexDirection`],"flex-col":[`flexDirection`],wrap:[`flexWrap`],justify:[`justifyContent`],items:[`alignItems`],self:[`alignSelf`],flex:[`flex`],grow:[`flexGrow`],shrink:[`flexShrink`],gap:[`gap`]},s={...i,...n,...a,...e,...t,...r,...o},c=e=>{let t=e.replace(`chai-`,``).split(`-`),n=`${t[0]}-${t[1]}`;return console.log(`Two parts:`,n),s[n]?{propKey:n,propValue:t.slice(2).join(`-`)||t[1]}:s[t[0]]?{propKey:t[0],propValue:t.slice(1).join(`-`)}:{propKey:null,propValue:null}},l=e=>typeof e==`string`?e.replace(/[\[\]]/g,``):e,u=(e,t=16)=>{let n=parseFloat(e);return isNaN(n)?e:`${n/t}rem`},d=e=>e.endsWith(`vh`)||e.endsWith(`vw`),f=e=>typeof e==`string`&&e.endsWith(`p`),p=e=>e.replace(`p`,`%`),m=e=>e.startsWith(`#`)||e.startsWith(`[#`)&&e.endsWith(`]`),h=e=>typeof e==`string`&&e.startsWith(`[`)&&e.endsWith(`]`),g=e=>[`p`,`m`,`fs`,`rounded`,`gap`,`w`,`h`,`min-w`,`min-h`,`max-w`,`max-h`,`pt`,`pb`,`pl`,`pr`,`px`,`py`,`mt`,`mb`,`ml`,`mr`,`mx`,`my`,`bw`].includes(e),_=(e,t)=>e?m(e)?l(e):f(e)?p(e):d(e)?e:t===`flex-row`?e===`reverse`?`row-reverse`:`row`:t===`flex-col`?(e===`column`||e===`col`||e===`reverse`)&&e===`reverse`?`column-reverse`:`column`:!isNaN(e)&&g(t)?u(e):h(e)?l(e):e:``,v=(e,t,n)=>{let r=s[t];if(r){let i=_(n,t);(Array.isArray(r)?r:[r]).forEach(t=>{e.style[t]=i})}},y={init(){document.querySelectorAll(`[class*="chai-"]`).forEach(e=>{[...e.classList].filter(e=>e.startsWith(`chai-`)).forEach(t=>{let{propKey:n,propValue:r}=c(t);n&&(v(e,n,r),e.classList.remove(t))})})}},b=y;return typeof window<`u`&&(document.readyState===`loading`?window.addEventListener(`DOMContentLoaded`,()=>y.init()):y.init()),b})();
|
package/dist/favicon.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
|
package/dist/icons.svg
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
|
3
|
+
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
|
4
|
+
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
|
5
|
+
</symbol>
|
|
6
|
+
<symbol id="discord-icon" viewBox="0 0 20 19">
|
|
7
|
+
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
|
8
|
+
</symbol>
|
|
9
|
+
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
|
10
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
|
11
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
|
12
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
|
13
|
+
</symbol>
|
|
14
|
+
<symbol id="github-icon" viewBox="0 0 19 19">
|
|
15
|
+
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
|
16
|
+
</symbol>
|
|
17
|
+
<symbol id="social-icon" viewBox="0 0 20 20">
|
|
18
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
|
19
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
|
20
|
+
</symbol>
|
|
21
|
+
<symbol id="x-icon" viewBox="0 0 19 19">
|
|
22
|
+
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
|
23
|
+
</symbol>
|
|
24
|
+
</svg>
|
package/package.json
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@brewcodex/chai-css",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A lightweight utility-first CSS engine with shorthand class names and 16px base scale",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/chaitailwind.esm.js",
|
|
7
|
+
"module": "./dist/chaitailwind.esm.js",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": "./dist/chaitailwind.esm.js"
|
|
10
|
+
},
|
|
11
|
+
"unpkg": "./dist/chaitailwind.iife.js",
|
|
12
|
+
"jsdelivr": "./dist/chaitailwind.iife.js",
|
|
13
|
+
"files": [
|
|
14
|
+
"dist"
|
|
15
|
+
],
|
|
16
|
+
"scripts": {
|
|
17
|
+
"dev": "vite",
|
|
18
|
+
"build": "vite build",
|
|
19
|
+
"preview": "vite preview",
|
|
20
|
+
"prepublishOnly": "npm run build"
|
|
21
|
+
},
|
|
22
|
+
"keywords": [
|
|
23
|
+
"brewcodex",
|
|
24
|
+
"css",
|
|
25
|
+
"utility",
|
|
26
|
+
"tailwind",
|
|
27
|
+
"utility-first",
|
|
28
|
+
"styling"
|
|
29
|
+
],
|
|
30
|
+
"license": "MIT",
|
|
31
|
+
"devDependencies": {
|
|
32
|
+
"vite": "^8.0.1"
|
|
33
|
+
}
|
|
34
|
+
}
|