kata-css 0.0.1 → 0.0.2
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 +581 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,581 @@
|
|
|
1
|
+
# KataCSS
|
|
2
|
+
|
|
3
|
+
A utility-first inline CSS engine. Write `kata-*` classes, get inline styles. No build step, no config, no compiler.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## What this is
|
|
8
|
+
|
|
9
|
+
KataCSS reads `kata-*` class names on your HTML elements and converts them into inline CSS styles when the page loads. That's the whole thing.
|
|
10
|
+
|
|
11
|
+
No PostCSS. No JIT. No purge configuration. You add a script tag or an npm import, write some classes, open the browser, and it works.
|
|
12
|
+
|
|
13
|
+
The spacing scale is `i × 0.25rem` — so `kata-p-4` is `1rem`, same as Tailwind. If you've used Tailwind before, the spacing feels immediately familiar.
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
### CDN
|
|
20
|
+
|
|
21
|
+
```html
|
|
22
|
+
<script src="https://cdn.jsdelivr.net/npm/kata-css@latest/dist/kata.min.js"></script>
|
|
23
|
+
```
|
|
24
|
+
Drop the script tag and start using styling by typing `kata-` followed by style
|
|
25
|
+
|
|
26
|
+
### npm
|
|
27
|
+
|
|
28
|
+
[](https://www.npmjs.com/package/kata-css)
|
|
29
|
+
[](https://www.npmjs.com/package/kata-css)
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npm install kata-css
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
import "kata-css";
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
That single import is all you need. It self-executes — no initialization, no setup object.
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
## How it works
|
|
44
|
+
|
|
45
|
+
KataCSS listens for `DOMContentLoaded`. Once the DOM is ready, it scans every element with a class attribute, finds anything starting with `kata-`, looks it up in a flat key-value map, writes the result as an inline `style`, and removes the original class.
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
Browser parses HTML
|
|
49
|
+
→ script registers DOMContentLoaded listener
|
|
50
|
+
→ DOM finishes loading
|
|
51
|
+
→ KataCSS scans all elements
|
|
52
|
+
→ finds kata-* classes
|
|
53
|
+
→ looks up each in classMap
|
|
54
|
+
→ writes inline style attribute
|
|
55
|
+
→ removes kata-* classes from classList
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Nothing left behind. No `kata-*` classes in the final DOM, just plain inline styles.
|
|
59
|
+
|
|
60
|
+
If you write a class that doesn't exist in the map, KataCSS tells you:
|
|
61
|
+
|
|
62
|
+
```
|
|
63
|
+
[kata-css] Unknown class: "kata-xyz"
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
---
|
|
67
|
+
|
|
68
|
+
## Basic usage
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
<!DOCTYPE html>
|
|
72
|
+
<html>
|
|
73
|
+
<head>
|
|
74
|
+
<script src="https://cdn.jsdelivr.net/npm/kata-css@latest/dist/kata.min.js"></script>
|
|
75
|
+
</head>
|
|
76
|
+
<body>
|
|
77
|
+
|
|
78
|
+
<h1 class="kata-text-3xl kata-font-bold kata-text-blue-500">
|
|
79
|
+
Hello, KataCSS
|
|
80
|
+
</h1>
|
|
81
|
+
|
|
82
|
+
<div class="kata-flex kata-gap-4 kata-p-6 kata-bg-kata-chai-matcha kata-rounded-lg">
|
|
83
|
+
<p class="kata-text-white kata-font-medium">Styles applied on load</p>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
</body>
|
|
87
|
+
</html>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
## Spacing scale
|
|
93
|
+
|
|
94
|
+
All spacing utilities multiply by `0.25rem`. Scale runs 0 to 96.
|
|
95
|
+
|
|
96
|
+
| Class | Value |
|
|
97
|
+
|---|---|
|
|
98
|
+
| `kata-p-1` | `0.25rem` (4px) |
|
|
99
|
+
| `kata-p-2` | `0.5rem` (8px) |
|
|
100
|
+
| `kata-p-4` | `1rem` (16px) |
|
|
101
|
+
| `kata-p-8` | `2rem` (32px) |
|
|
102
|
+
| `kata-p-16` | `4rem` (64px) |
|
|
103
|
+
|
|
104
|
+
No decimals in class names. Need `0.75rem`? Use `kata-p-3`.
|
|
105
|
+
|
|
106
|
+
### Padding
|
|
107
|
+
|
|
108
|
+
```
|
|
109
|
+
kata-p-{n} padding: n×0.25rem
|
|
110
|
+
kata-px-{n} padding-left + padding-right
|
|
111
|
+
kata-py-{n} padding-top + padding-bottom
|
|
112
|
+
kata-pt-{n} padding-top
|
|
113
|
+
kata-pb-{n} padding-bottom
|
|
114
|
+
kata-pl-{n} padding-left
|
|
115
|
+
kata-pr-{n} padding-right
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Margin
|
|
119
|
+
|
|
120
|
+
```
|
|
121
|
+
kata-m-{n} margin: n×0.25rem
|
|
122
|
+
kata-mx-{n} margin-left + margin-right
|
|
123
|
+
kata-my-{n} margin-top + margin-bottom
|
|
124
|
+
kata-mt-{n} margin-top
|
|
125
|
+
kata-mb-{n} margin-bottom
|
|
126
|
+
kata-ml-{n} margin-left
|
|
127
|
+
kata-mr-{n} margin-right
|
|
128
|
+
kata-m-auto margin: auto
|
|
129
|
+
kata-mx-auto margin-left: auto; margin-right: auto
|
|
130
|
+
kata-my-auto margin-top: auto; margin-bottom: auto
|
|
131
|
+
kata-mt-auto margin-top: auto
|
|
132
|
+
kata-mb-auto margin-bottom: auto
|
|
133
|
+
kata-ml-auto margin-left: auto
|
|
134
|
+
kata-mr-auto margin-right: auto
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
### Gap
|
|
138
|
+
|
|
139
|
+
```
|
|
140
|
+
kata-gap-{n} gap: n×0.25rem
|
|
141
|
+
kata-gap-x-{n} column-gap: n×0.25rem
|
|
142
|
+
kata-gap-y-{n} row-gap: n×0.25rem
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
---
|
|
146
|
+
|
|
147
|
+
## Width
|
|
148
|
+
|
|
149
|
+
```
|
|
150
|
+
kata-w-{0–96} width: n×0.25rem
|
|
151
|
+
kata-w-auto width: auto
|
|
152
|
+
kata-w-full width: 100%
|
|
153
|
+
kata-w-half width: 50%
|
|
154
|
+
kata-w-screen width: 100vw
|
|
155
|
+
kata-w-min width: min-content
|
|
156
|
+
kata-w-max width: max-content
|
|
157
|
+
kata-w-fit width: fit-content
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
## Height
|
|
161
|
+
|
|
162
|
+
```
|
|
163
|
+
kata-h-{0–96} height: n×0.25rem
|
|
164
|
+
kata-h-auto height: auto
|
|
165
|
+
kata-h-full height: 100%
|
|
166
|
+
kata-h-half height: 50%
|
|
167
|
+
kata-h-screen height: 100vh
|
|
168
|
+
kata-h-min height: min-content
|
|
169
|
+
kata-h-max height: max-content
|
|
170
|
+
kata-h-fit height: fit-content
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
---
|
|
174
|
+
|
|
175
|
+
## Box sizing
|
|
176
|
+
|
|
177
|
+
```
|
|
178
|
+
kata-box-border box-sizing: border-box
|
|
179
|
+
kata-box-content box-sizing: content-box
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
---
|
|
183
|
+
|
|
184
|
+
## Display
|
|
185
|
+
|
|
186
|
+
```
|
|
187
|
+
kata-block display: block
|
|
188
|
+
kata-inline display: inline
|
|
189
|
+
kata-inline-block display: inline-block
|
|
190
|
+
kata-flex display: flex
|
|
191
|
+
kata-inline-flex display: inline-flex
|
|
192
|
+
kata-grid display: grid
|
|
193
|
+
kata-inline-grid display: inline-grid
|
|
194
|
+
kata-hidden display: none
|
|
195
|
+
kata-contents display: contents
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
---
|
|
199
|
+
|
|
200
|
+
## Flexbox
|
|
201
|
+
|
|
202
|
+
### Direction
|
|
203
|
+
|
|
204
|
+
```
|
|
205
|
+
kata-flex-row flex-direction: row
|
|
206
|
+
kata-flex-row-reverse flex-direction: row-reverse
|
|
207
|
+
kata-flex-col flex-direction: column
|
|
208
|
+
kata-flex-col-reverse flex-direction: column-reverse
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
### Wrap
|
|
212
|
+
|
|
213
|
+
```
|
|
214
|
+
kata-flex-wrap flex-wrap: wrap
|
|
215
|
+
kata-flex-wrap-reverse flex-wrap: wrap-reverse
|
|
216
|
+
kata-flex-nowrap flex-wrap: nowrap
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
### Justify content
|
|
220
|
+
|
|
221
|
+
```
|
|
222
|
+
kata-justify-start justify-content: flex-start
|
|
223
|
+
kata-justify-end justify-content: flex-end
|
|
224
|
+
kata-justify-center justify-content: center
|
|
225
|
+
kata-justify-between justify-content: space-between
|
|
226
|
+
kata-justify-around justify-content: space-around
|
|
227
|
+
kata-justify-evenly justify-content: space-evenly
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
### Align items
|
|
231
|
+
|
|
232
|
+
```
|
|
233
|
+
kata-items-start align-items: flex-start
|
|
234
|
+
kata-items-end align-items: flex-end
|
|
235
|
+
kata-items-center align-items: center
|
|
236
|
+
kata-items-baseline align-items: baseline
|
|
237
|
+
kata-items-stretch align-items: stretch
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
---
|
|
241
|
+
|
|
242
|
+
## Position
|
|
243
|
+
|
|
244
|
+
```
|
|
245
|
+
kata-static position: static
|
|
246
|
+
kata-relative position: relative
|
|
247
|
+
kata-absolute position: absolute
|
|
248
|
+
kata-fixed position: fixed
|
|
249
|
+
kata-sticky position: sticky
|
|
250
|
+
kata-inset-0 top: 0; right: 0; bottom: 0; left: 0
|
|
251
|
+
kata-inset-auto top: auto; right: auto; bottom: auto; left: auto
|
|
252
|
+
kata-top-{0–96} top: n×0.25rem
|
|
253
|
+
kata-right-{0–96} right: n×0.25rem
|
|
254
|
+
kata-bottom-{0–96} bottom: n×0.25rem
|
|
255
|
+
kata-left-{0–96} left: n×0.25rem
|
|
256
|
+
kata-top-auto top: auto
|
|
257
|
+
kata-right-auto right: auto
|
|
258
|
+
kata-bottom-auto bottom: auto
|
|
259
|
+
kata-left-auto left: auto
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
---
|
|
263
|
+
|
|
264
|
+
## Z-index
|
|
265
|
+
|
|
266
|
+
```
|
|
267
|
+
kata-z-{0–96} z-index: n
|
|
268
|
+
kata-z-auto z-index: auto
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
---
|
|
272
|
+
|
|
273
|
+
## Typography
|
|
274
|
+
|
|
275
|
+
### Font family
|
|
276
|
+
|
|
277
|
+
```
|
|
278
|
+
kata-font-sans font-family: ui-sans-serif, system-ui, -apple-system, sans-serif
|
|
279
|
+
kata-font-serif font-family: ui-serif, Georgia, Cambria, serif
|
|
280
|
+
kata-font-mono font-family: ui-monospace, Cascadia Code, Courier New, monospace
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
### Font size
|
|
284
|
+
|
|
285
|
+
Each size also sets a default line-height.
|
|
286
|
+
|
|
287
|
+
```
|
|
288
|
+
kata-text-xs 0.75rem / line-height: 1rem
|
|
289
|
+
kata-text-sm 0.875rem / line-height: 1.25rem
|
|
290
|
+
kata-text-base 1rem / line-height: 1.5rem
|
|
291
|
+
kata-text-lg 1.125rem / line-height: 1.75rem
|
|
292
|
+
kata-text-xl 1.25rem / line-height: 1.75rem
|
|
293
|
+
kata-text-2xl 1.5rem / line-height: 2rem
|
|
294
|
+
kata-text-3xl 1.875rem / line-height: 2.25rem
|
|
295
|
+
kata-text-4xl 2.25rem / line-height: 2.5rem
|
|
296
|
+
kata-text-5xl 3rem / line-height: 1
|
|
297
|
+
kata-text-6xl 3.75rem / line-height: 1
|
|
298
|
+
```
|
|
299
|
+
|
|
300
|
+
### Font weight
|
|
301
|
+
|
|
302
|
+
```
|
|
303
|
+
kata-font-thin font-weight: 100
|
|
304
|
+
kata-font-extralight font-weight: 200
|
|
305
|
+
kata-font-light font-weight: 300
|
|
306
|
+
kata-font-normal font-weight: 400
|
|
307
|
+
kata-font-medium font-weight: 500
|
|
308
|
+
kata-font-semibold font-weight: 600
|
|
309
|
+
kata-font-bold font-weight: 700
|
|
310
|
+
kata-font-extrabold font-weight: 800
|
|
311
|
+
kata-font-black font-weight: 900
|
|
312
|
+
```
|
|
313
|
+
|
|
314
|
+
### Font style
|
|
315
|
+
|
|
316
|
+
```
|
|
317
|
+
kata-italic font-style: italic
|
|
318
|
+
kata-not-italic font-style: normal
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
### Text align
|
|
322
|
+
|
|
323
|
+
```
|
|
324
|
+
kata-text-left text-align: left
|
|
325
|
+
kata-text-center text-align: center
|
|
326
|
+
kata-text-right text-align: right
|
|
327
|
+
kata-text-justify text-align: justify
|
|
328
|
+
kata-text-start text-align: start
|
|
329
|
+
kata-text-end text-align: end
|
|
330
|
+
```
|
|
331
|
+
|
|
332
|
+
### Line height
|
|
333
|
+
|
|
334
|
+
```
|
|
335
|
+
kata-leading-none line-height: 1
|
|
336
|
+
kata-leading-tight line-height: 1.25
|
|
337
|
+
kata-leading-snug line-height: 1.375
|
|
338
|
+
kata-leading-normal line-height: 1.5
|
|
339
|
+
kata-leading-relaxed line-height: 1.625
|
|
340
|
+
kata-leading-loose line-height: 2
|
|
341
|
+
```
|
|
342
|
+
|
|
343
|
+
### Letter spacing
|
|
344
|
+
|
|
345
|
+
```
|
|
346
|
+
kata-tracking-tighter letter-spacing: -0.05em
|
|
347
|
+
kata-tracking-tight letter-spacing: -0.025em
|
|
348
|
+
kata-tracking-normal letter-spacing: 0em
|
|
349
|
+
kata-tracking-wide letter-spacing: 0.025em
|
|
350
|
+
kata-tracking-wider letter-spacing: 0.05em
|
|
351
|
+
kata-tracking-widest letter-spacing: 0.1em
|
|
352
|
+
```
|
|
353
|
+
|
|
354
|
+
---
|
|
355
|
+
|
|
356
|
+
## Text decoration
|
|
357
|
+
|
|
358
|
+
```
|
|
359
|
+
kata-underline text-decoration-line: underline
|
|
360
|
+
kata-overline text-decoration-line: overline
|
|
361
|
+
kata-line-through text-decoration-line: line-through
|
|
362
|
+
kata-no-underline text-decoration: none
|
|
363
|
+
kata-decoration-solid text-decoration-style: solid
|
|
364
|
+
kata-decoration-dashed text-decoration-style: dashed
|
|
365
|
+
kata-decoration-dotted text-decoration-style: dotted
|
|
366
|
+
kata-decoration-double text-decoration-style: double
|
|
367
|
+
kata-decoration-wavy text-decoration-style: wavy
|
|
368
|
+
```
|
|
369
|
+
|
|
370
|
+
---
|
|
371
|
+
|
|
372
|
+
## Colors
|
|
373
|
+
|
|
374
|
+
Every color key works with three prefixes:
|
|
375
|
+
|
|
376
|
+
```
|
|
377
|
+
kata-text-{key} color
|
|
378
|
+
kata-bg-{key} background-color
|
|
379
|
+
kata-border-{key} border-color
|
|
380
|
+
```
|
|
381
|
+
|
|
382
|
+
### Standard palette
|
|
383
|
+
|
|
384
|
+
```
|
|
385
|
+
black, white, transparent
|
|
386
|
+
|
|
387
|
+
gray: 50 100 200 300 400 500 600 700 800 900
|
|
388
|
+
red: 100 300 500 700 900
|
|
389
|
+
orange: 100 300 500 700
|
|
390
|
+
yellow: 100 300 500 700
|
|
391
|
+
green: 100 300 500 700 900
|
|
392
|
+
teal: 100 300 500 700
|
|
393
|
+
blue: 100 300 500 700 900
|
|
394
|
+
indigo: 100 300 500 700
|
|
395
|
+
purple: 100 300 500 700
|
|
396
|
+
pink: 100 300 500 700
|
|
397
|
+
```
|
|
398
|
+
|
|
399
|
+
Example:
|
|
400
|
+
|
|
401
|
+
```html
|
|
402
|
+
<p class="kata-text-blue-500 kata-bg-gray-100 kata-border-red-300">...</p>
|
|
403
|
+
```
|
|
404
|
+
|
|
405
|
+
---
|
|
406
|
+
|
|
407
|
+
## Background helpers
|
|
408
|
+
|
|
409
|
+
```
|
|
410
|
+
kata-bg-none background: none
|
|
411
|
+
kata-bg-cover background-size: cover
|
|
412
|
+
kata-bg-contain background-size: contain
|
|
413
|
+
kata-bg-center background-position: center
|
|
414
|
+
kata-bg-top background-position: top
|
|
415
|
+
kata-bg-bottom background-position: bottom
|
|
416
|
+
kata-bg-no-repeat background-repeat: no-repeat
|
|
417
|
+
kata-bg-repeat background-repeat: repeat
|
|
418
|
+
```
|
|
419
|
+
|
|
420
|
+
---
|
|
421
|
+
|
|
422
|
+
## Borders
|
|
423
|
+
|
|
424
|
+
### Width
|
|
425
|
+
|
|
426
|
+
```
|
|
427
|
+
kata-border-0 border-width: 0
|
|
428
|
+
kata-border border-width: 1px
|
|
429
|
+
kata-border-2 border-width: 2px
|
|
430
|
+
kata-border-4 border-width: 4px
|
|
431
|
+
kata-border-8 border-width: 8px
|
|
432
|
+
kata-border-t border-top-width: 1px
|
|
433
|
+
kata-border-r border-right-width: 1px
|
|
434
|
+
kata-border-b border-bottom-width: 1px
|
|
435
|
+
kata-border-l border-left-width: 1px
|
|
436
|
+
```
|
|
437
|
+
|
|
438
|
+
### Style
|
|
439
|
+
|
|
440
|
+
```
|
|
441
|
+
kata-border-solid border-style: solid
|
|
442
|
+
kata-border-dashed border-style: dashed
|
|
443
|
+
kata-border-dotted border-style: dotted
|
|
444
|
+
kata-border-double border-style: double
|
|
445
|
+
kata-border-none border-style: none
|
|
446
|
+
```
|
|
447
|
+
|
|
448
|
+
### Radius
|
|
449
|
+
|
|
450
|
+
```
|
|
451
|
+
kata-rounded-none border-radius: 0
|
|
452
|
+
kata-rounded-sm border-radius: 0.125rem
|
|
453
|
+
kata-rounded border-radius: 0.25rem
|
|
454
|
+
kata-rounded-md border-radius: 0.375rem
|
|
455
|
+
kata-rounded-lg border-radius: 0.5rem
|
|
456
|
+
kata-rounded-xl border-radius: 0.75rem
|
|
457
|
+
kata-rounded-2xl border-radius: 1rem
|
|
458
|
+
kata-rounded-3xl border-radius: 1.5rem
|
|
459
|
+
kata-rounded-full border-radius: 9999px
|
|
460
|
+
kata-rounded-{n} border-radius: n×0.25rem
|
|
461
|
+
```
|
|
462
|
+
|
|
463
|
+
---
|
|
464
|
+
|
|
465
|
+
## Cursor
|
|
466
|
+
|
|
467
|
+
```
|
|
468
|
+
kata-cursor-auto cursor: auto
|
|
469
|
+
kata-cursor-default cursor: default
|
|
470
|
+
kata-cursor-pointer cursor: pointer
|
|
471
|
+
kata-cursor-wait cursor: wait
|
|
472
|
+
kata-cursor-text cursor: text
|
|
473
|
+
kata-cursor-move cursor: move
|
|
474
|
+
kata-cursor-not-allowed cursor: not-allowed
|
|
475
|
+
kata-cursor-grab cursor: grab
|
|
476
|
+
```
|
|
477
|
+
|
|
478
|
+
---
|
|
479
|
+
|
|
480
|
+
## Visibility
|
|
481
|
+
|
|
482
|
+
```
|
|
483
|
+
kata-visible visibility: visible
|
|
484
|
+
kata-invisible visibility: hidden
|
|
485
|
+
```
|
|
486
|
+
|
|
487
|
+
---
|
|
488
|
+
|
|
489
|
+
## Chai color scheme (ChaiCode Exclusive)
|
|
490
|
+
|
|
491
|
+
Colors named after real chai and tea varieties. Built for the ChaiCode cohort.
|
|
492
|
+
|
|
493
|
+
All chai colors follow the same three-prefix pattern:
|
|
494
|
+
|
|
495
|
+
```
|
|
496
|
+
kata-bg-kata-chai-masala
|
|
497
|
+
kata-text-kata-chai-earl-grey
|
|
498
|
+
kata-border-kata-chai-matcha
|
|
499
|
+
```
|
|
500
|
+
|
|
501
|
+
### The Flavours of Tea
|
|
502
|
+
|
|
503
|
+
| Key | Hex | Tea |
|
|
504
|
+
|---|---|---|
|
|
505
|
+
| `kata-chai-masala` | `#8B4A2E` | Classic spiced milk tea |
|
|
506
|
+
| `kata-chai-karak` | `#C27B3E` | Gulf-style strong chai |
|
|
507
|
+
| `kata-chai-kashmiri` | `#D4697A` | Pink salt tea |
|
|
508
|
+
| `kata-chai-noon` | `#B85C6E` | Noon chai |
|
|
509
|
+
| `kata-chai-ginger` | `#A0522D` | Ginger chai |
|
|
510
|
+
| `kata-chai-cardamom` | `#BFA07A` | Cardamom chai |
|
|
511
|
+
| `kata-chai-elaichi` | `#E8C99A` | Heavy milk chai |
|
|
512
|
+
| `kata-chai-black` | `#3B2314` | Unsweetened black tea |
|
|
513
|
+
| `kata-chai-saffron` | `#E8A020` | Saffron chai |
|
|
514
|
+
| `kata-chai-tulsi` | `#5C8A5A` | Holy basil tea |
|
|
515
|
+
| `kata-chai-foam` | `#F2E8DC` | Noon chai foam |
|
|
516
|
+
| `kata-chai-matcha` | `#4A7C59` | Matcha |
|
|
517
|
+
| `kata-chai-matcha-latte` | `#7DAB7A` | Matcha latte |
|
|
518
|
+
| `kata-chai-matcha-ceremonial` | `#2D5E3A` | Ceremonial matcha |
|
|
519
|
+
| `kata-chai-sencha` | `#6B8F47` | Sencha |
|
|
520
|
+
| `kata-chai-hojicha` | `#8B6347` | Hojicha |
|
|
521
|
+
| `kata-chai-genmaicha` | `#A8935A` | Genmaicha |
|
|
522
|
+
| `kata-chai-gyokuro` | `#3D6B40` | Gyokuro |
|
|
523
|
+
| `kata-chai-oolong-light` | `#C9B87A` | Light oolong |
|
|
524
|
+
| `kata-chai-oolong-dark` | `#8B5E3C` | Dark oolong |
|
|
525
|
+
| `kata-chai-dahongpao` | `#7A3E28` | Da Hong Pao |
|
|
526
|
+
| `kata-chai-dongding` | `#B8895A` | Dong Ding |
|
|
527
|
+
| `kata-chai-milk-oolong` | `#D4C49A` | Milk oolong |
|
|
528
|
+
| `kata-chai-longjing` | `#8CAF6A` | Longjing |
|
|
529
|
+
| `kata-chai-tieguanyin` | `#C4A96B` | Tie Guan Yin |
|
|
530
|
+
| `kata-chai-puerh` | `#6B3A2A` | Pu-erh |
|
|
531
|
+
| `kata-chai-baimudan` | `#E8D5B0` | White Peony |
|
|
532
|
+
| `kata-chai-yinzhen` | `#F0E6C8` | Silver Needle |
|
|
533
|
+
| `kata-chai-chrysanthemum` | `#F5D78E` | Chrysanthemum |
|
|
534
|
+
| `kata-chai-assam` | `#7B3F1E` | Assam |
|
|
535
|
+
| `kata-chai-darjeeling` | `#C4875A` | Darjeeling |
|
|
536
|
+
| `kata-chai-nilgiri` | `#9B5C38` | Nilgiri |
|
|
537
|
+
| `kata-chai-ceylon` | `#A0522D` | Ceylon black |
|
|
538
|
+
| `kata-chai-kenya` | `#8B3A2A` | Kenyan black |
|
|
539
|
+
| `kata-chai-rooibos` | `#C1440E` | Rooibos |
|
|
540
|
+
| `kata-chai-rooibos-latte` | `#D4845A` | Rooibos latte |
|
|
541
|
+
| `kata-chai-earl-grey` | `#6B5B8A` | Earl Grey |
|
|
542
|
+
| `kata-chai-english-breakfast` | `#7A3B28` | English Breakfast |
|
|
543
|
+
| `kata-chai-chamomile` | `#F0C96A` | Chamomile |
|
|
544
|
+
| `kata-chai-peppermint` | `#4A8F6A` | Peppermint |
|
|
545
|
+
| `kata-chai-hibiscus` | `#C4204A` | Hibiscus |
|
|
546
|
+
| `kata-chai-lavender` | `#9B7EC8` | Lavender |
|
|
547
|
+
| `kata-chai-lemon-verbena` | `#D4C84A` | Lemon verbena |
|
|
548
|
+
| `kata-chai-rosehip` | `#E8603A` | Rose hip |
|
|
549
|
+
| `kata-chai-moroccan-mint` | `#3A8A5A` | Moroccan mint |
|
|
550
|
+
| `kata-chai-gunpowder` | `#6B7A3A` | Gunpowder green |
|
|
551
|
+
| `kata-chai-irani` | `#C27040` | Irani chai |
|
|
552
|
+
| `kata-chai-samovar` | `#8B3D28` | Samovar chai |
|
|
553
|
+
| `kata-chai-saffron-persian` | `#D4A020` | Persian saffron tea |
|
|
554
|
+
| `kata-chai-yerba-mate` | `#5A7A3A` | Yerba mate |
|
|
555
|
+
| `kata-chai-mate-amargo` | `#3A5A28` | Mate amargo |
|
|
556
|
+
| `kata-chai-muna` | `#7A9A5A` | Muña muña |
|
|
557
|
+
| `kata-chai-cascara` | `#9B4A3A` | Cascara |
|
|
558
|
+
|
|
559
|
+
---
|
|
560
|
+
|
|
561
|
+
## Project structure
|
|
562
|
+
|
|
563
|
+
```
|
|
564
|
+
kata-css/
|
|
565
|
+
├── src/
|
|
566
|
+
│ ├── classMap.js class → CSS string definitions
|
|
567
|
+
│ └── index.js engine + DOMContentLoaded listener
|
|
568
|
+
├── dist/
|
|
569
|
+
│ ├── kata.js UMD build (CDN)
|
|
570
|
+
│ └── kata.min.js minified UMD build
|
|
571
|
+
├── .gitignore
|
|
572
|
+
├── package.json
|
|
573
|
+
└── package-lock.json
|
|
574
|
+
└── README.md
|
|
575
|
+
```
|
|
576
|
+
|
|
577
|
+
---
|
|
578
|
+
|
|
579
|
+
## License
|
|
580
|
+
|
|
581
|
+
MIT. Built for the [ChaiCode](https://chaicode.com) cohort.
|