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