kata-css 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/kata.js +405 -0
- package/dist/kata.min.js +1 -0
- package/package.json +32 -0
package/dist/kata.js
ADDED
|
@@ -0,0 +1,405 @@
|
|
|
1
|
+
(() => {
|
|
2
|
+
// src/classMap.js
|
|
3
|
+
var classMap = {};
|
|
4
|
+
var scale = {};
|
|
5
|
+
var spacing = 0.25;
|
|
6
|
+
for (let i = 0; i <= 96; i++) {
|
|
7
|
+
scale[i] = `${i * spacing}rem`;
|
|
8
|
+
}
|
|
9
|
+
for (const [k, v] of Object.entries(scale)) {
|
|
10
|
+
classMap[`kata-p-${k}`] = `padding: ${v};`;
|
|
11
|
+
classMap[`kata-pt-${k}`] = `padding-top: ${v};`;
|
|
12
|
+
classMap[`kata-pb-${k}`] = `padding-bottom: ${v};`;
|
|
13
|
+
classMap[`kata-pl-${k}`] = `padding-left: ${v};`;
|
|
14
|
+
classMap[`kata-pr-${k}`] = `padding-right: ${v};`;
|
|
15
|
+
classMap[`kata-px-${k}`] = `padding-left: ${v}; padding-right: ${v};`;
|
|
16
|
+
classMap[`kata-py-${k}`] = `padding-top: ${v}; padding-bottom: ${v};`;
|
|
17
|
+
}
|
|
18
|
+
for (const [k, v] of Object.entries(scale)) {
|
|
19
|
+
classMap[`kata-m-${k}`] = `margin: ${v};`;
|
|
20
|
+
classMap[`kata-mt-${k}`] = `margin-top: ${v};`;
|
|
21
|
+
classMap[`kata-mb-${k}`] = `margin-bottom: ${v};`;
|
|
22
|
+
classMap[`kata-ml-${k}`] = `margin-left: ${v};`;
|
|
23
|
+
classMap[`kata-mr-${k}`] = `margin-right: ${v};`;
|
|
24
|
+
classMap[`kata-mx-${k}`] = `margin-left: ${v}; margin-right: ${v};`;
|
|
25
|
+
classMap[`kata-my-${k}`] = `margin-top: ${v}; margin-bottom: ${v};`;
|
|
26
|
+
}
|
|
27
|
+
classMap["kata-m-auto"] = "margin: auto;";
|
|
28
|
+
classMap["kata-mx-auto"] = "margin-left: auto; margin-right: auto;";
|
|
29
|
+
classMap["kata-my-auto"] = "margin-top: auto; margin-bottom: auto;";
|
|
30
|
+
classMap["kata-ml-auto"] = "margin-left: auto;";
|
|
31
|
+
classMap["kata-mr-auto"] = "margin-right: auto;";
|
|
32
|
+
classMap["kata-mt-auto"] = "margin-top: auto;";
|
|
33
|
+
classMap["kata-mb-auto"] = "margin-bottom: auto;";
|
|
34
|
+
for (const [k, v] of Object.entries(scale)) {
|
|
35
|
+
classMap[`kata-w-${k}`] = `width: ${v};`;
|
|
36
|
+
}
|
|
37
|
+
classMap["kata-w-auto"] = "width: auto;";
|
|
38
|
+
classMap["kata-w-full"] = "width: 100%;";
|
|
39
|
+
classMap["kata-w-half"] = "width: 50%;";
|
|
40
|
+
classMap["kata-w-screen"] = "width: 100vw;";
|
|
41
|
+
classMap["kata-w-min"] = "width: min-content;";
|
|
42
|
+
classMap["kata-w-max"] = "width: max-content;";
|
|
43
|
+
classMap["kata-w-fit"] = "width: fit-content;";
|
|
44
|
+
for (const [k, v] of Object.entries(scale)) {
|
|
45
|
+
classMap[`kata-h-${k}`] = `height: ${v};`;
|
|
46
|
+
}
|
|
47
|
+
classMap["kata-h-auto"] = "height: auto;";
|
|
48
|
+
classMap["kata-h-full"] = "height: 100%;";
|
|
49
|
+
classMap["kata-h-half"] = "height: 50%;";
|
|
50
|
+
classMap["kata-h-screen"] = "height: 100vh;";
|
|
51
|
+
classMap["kata-h-min"] = "height: min-content;";
|
|
52
|
+
classMap["kata-h-max"] = "height: max-content;";
|
|
53
|
+
classMap["kata-h-fit"] = "height: fit-content;";
|
|
54
|
+
classMap["kata-box-border"] = "box-sizing: border-box;";
|
|
55
|
+
classMap["kata-box-content"] = "box-sizing: content-box;";
|
|
56
|
+
classMap["kata-block"] = "display: block;";
|
|
57
|
+
classMap["kata-inline"] = "display: inline;";
|
|
58
|
+
classMap["kata-inline-block"] = "display: inline-block;";
|
|
59
|
+
classMap["kata-flex"] = "display: flex;";
|
|
60
|
+
classMap["kata-inline-flex"] = "display: inline-flex;";
|
|
61
|
+
classMap["kata-grid"] = "display: grid;";
|
|
62
|
+
classMap["kata-inline-grid"] = "display: inline-grid;";
|
|
63
|
+
classMap["kata-hidden"] = "display: none;";
|
|
64
|
+
classMap["kata-contents"] = "display: contents;";
|
|
65
|
+
classMap["kata-flex-row"] = "flex-direction: row;";
|
|
66
|
+
classMap["kata-flex-row-reverse"] = "flex-direction: row-reverse;";
|
|
67
|
+
classMap["kata-flex-col"] = "flex-direction: column;";
|
|
68
|
+
classMap["kata-flex-col-reverse"] = "flex-direction: column-reverse;";
|
|
69
|
+
classMap["kata-flex-wrap"] = "flex-wrap: wrap;";
|
|
70
|
+
classMap["kata-flex-wrap-reverse"] = "flex-wrap: wrap-reverse;";
|
|
71
|
+
classMap["kata-flex-nowrap"] = "flex-wrap: nowrap;";
|
|
72
|
+
classMap["kata-justify-start"] = "justify-content: flex-start;";
|
|
73
|
+
classMap["kata-justify-end"] = "justify-content: flex-end;";
|
|
74
|
+
classMap["kata-justify-center"] = "justify-content: center;";
|
|
75
|
+
classMap["kata-justify-between"] = "justify-content: space-between;";
|
|
76
|
+
classMap["kata-justify-around"] = "justify-content: space-around;";
|
|
77
|
+
classMap["kata-justify-evenly"] = "justify-content: space-evenly;";
|
|
78
|
+
classMap["kata-items-start"] = "align-items: flex-start;";
|
|
79
|
+
classMap["kata-items-end"] = "align-items: flex-end;";
|
|
80
|
+
classMap["kata-items-center"] = "align-items: center;";
|
|
81
|
+
classMap["kata-items-baseline"] = "align-items: baseline;";
|
|
82
|
+
classMap["kata-items-stretch"] = "align-items: stretch;";
|
|
83
|
+
for (const [k, v] of Object.entries(scale)) {
|
|
84
|
+
classMap[`kata-gap-${k}`] = `gap: ${v};`;
|
|
85
|
+
classMap[`kata-gap-x-${k}`] = `column-gap: ${v};`;
|
|
86
|
+
classMap[`kata-gap-y-${k}`] = `row-gap: ${v};`;
|
|
87
|
+
}
|
|
88
|
+
classMap["kata-static"] = "position: static;";
|
|
89
|
+
classMap["kata-relative"] = "position: relative;";
|
|
90
|
+
classMap["kata-absolute"] = "position: absolute;";
|
|
91
|
+
classMap["kata-fixed"] = "position: fixed;";
|
|
92
|
+
classMap["kata-sticky"] = "position: sticky;";
|
|
93
|
+
for (const [k, v] of Object.entries(scale)) {
|
|
94
|
+
classMap[`kata-top-${k}`] = `top: ${v};`;
|
|
95
|
+
classMap[`kata-right-${k}`] = `right: ${v};`;
|
|
96
|
+
classMap[`kata-bottom-${k}`] = `bottom: ${v};`;
|
|
97
|
+
classMap[`kata-left-${k}`] = `left: ${v};`;
|
|
98
|
+
}
|
|
99
|
+
classMap["kata-top-auto"] = "top: auto;";
|
|
100
|
+
classMap["kata-right-auto"] = "right: auto;";
|
|
101
|
+
classMap["kata-bottom-auto"] = "bottom: auto;";
|
|
102
|
+
classMap["kata-left-auto"] = "left: auto;";
|
|
103
|
+
classMap["kata-inset-0"] = "top: 0; right: 0; bottom: 0; left: 0;";
|
|
104
|
+
classMap["kata-inset-auto"] = "top: auto; right: auto; bottom: auto; left: auto;";
|
|
105
|
+
for (let i = 0; i <= 96; i++) {
|
|
106
|
+
classMap[`kata-z-${i}`] = `z-index: ${i};`;
|
|
107
|
+
}
|
|
108
|
+
classMap["kata-z-auto"] = "z-index: auto;";
|
|
109
|
+
classMap["kata-font-sans"] = "font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;";
|
|
110
|
+
classMap["kata-font-serif"] = "font-family: ui-serif, Georgia, Cambria, serif;";
|
|
111
|
+
classMap["kata-font-mono"] = "font-family: ui-monospace, 'Cascadia Code', 'Courier New', monospace;";
|
|
112
|
+
classMap["kata-text-xs"] = "font-size: 0.75rem; line-height: 1rem;";
|
|
113
|
+
classMap["kata-text-sm"] = "font-size: 0.875rem; line-height: 1.25rem;";
|
|
114
|
+
classMap["kata-text-base"] = "font-size: 1rem; line-height: 1.5rem;";
|
|
115
|
+
classMap["kata-text-lg"] = "font-size: 1.125rem; line-height: 1.75rem;";
|
|
116
|
+
classMap["kata-text-xl"] = "font-size: 1.25rem; line-height: 1.75rem;";
|
|
117
|
+
classMap["kata-text-2xl"] = "font-size: 1.5rem; line-height: 2rem;";
|
|
118
|
+
classMap["kata-text-3xl"] = "font-size: 1.875rem; line-height: 2.25rem;";
|
|
119
|
+
classMap["kata-text-4xl"] = "font-size: 2.25rem; line-height: 2.5rem;";
|
|
120
|
+
classMap["kata-text-5xl"] = "font-size: 3rem; line-height: 1;";
|
|
121
|
+
classMap["kata-text-6xl"] = "font-size: 3.75rem; line-height: 1;";
|
|
122
|
+
classMap["kata-font-thin"] = "font-weight: 100;";
|
|
123
|
+
classMap["kata-font-extralight"] = "font-weight: 200;";
|
|
124
|
+
classMap["kata-font-light"] = "font-weight: 300;";
|
|
125
|
+
classMap["kata-font-normal"] = "font-weight: 400;";
|
|
126
|
+
classMap["kata-font-medium"] = "font-weight: 500;";
|
|
127
|
+
classMap["kata-font-semibold"] = "font-weight: 600;";
|
|
128
|
+
classMap["kata-font-bold"] = "font-weight: 700;";
|
|
129
|
+
classMap["kata-font-extrabold"] = "font-weight: 800;";
|
|
130
|
+
classMap["kata-font-black"] = "font-weight: 900;";
|
|
131
|
+
classMap["kata-italic"] = "font-style: italic;";
|
|
132
|
+
classMap["kata-not-italic"] = "font-style: normal;";
|
|
133
|
+
classMap["kata-text-left"] = "text-align: left;";
|
|
134
|
+
classMap["kata-text-center"] = "text-align: center;";
|
|
135
|
+
classMap["kata-text-right"] = "text-align: right;";
|
|
136
|
+
classMap["kata-text-justify"] = "text-align: justify;";
|
|
137
|
+
classMap["kata-text-start"] = "text-align: start;";
|
|
138
|
+
classMap["kata-text-end"] = "text-align: end;";
|
|
139
|
+
classMap["kata-underline"] = "text-decoration-line: underline;";
|
|
140
|
+
classMap["kata-overline"] = "text-decoration-line: overline;";
|
|
141
|
+
classMap["kata-line-through"] = "text-decoration-line: line-through;";
|
|
142
|
+
classMap["kata-no-underline"] = "text-decoration: none;";
|
|
143
|
+
classMap["kata-decoration-solid"] = "text-decoration-style: solid;";
|
|
144
|
+
classMap["kata-decoration-dashed"] = "text-decoration-style: dashed;";
|
|
145
|
+
classMap["kata-decoration-dotted"] = "text-decoration-style: dotted;";
|
|
146
|
+
classMap["kata-decoration-double"] = "text-decoration-style: double;";
|
|
147
|
+
classMap["kata-decoration-wavy"] = "text-decoration-style: wavy;";
|
|
148
|
+
classMap["kata-leading-none"] = "line-height: 1;";
|
|
149
|
+
classMap["kata-leading-tight"] = "line-height: 1.25;";
|
|
150
|
+
classMap["kata-leading-snug"] = "line-height: 1.375;";
|
|
151
|
+
classMap["kata-leading-normal"] = "line-height: 1.5;";
|
|
152
|
+
classMap["kata-leading-relaxed"] = "line-height: 1.625;";
|
|
153
|
+
classMap["kata-leading-loose"] = "line-height: 2;";
|
|
154
|
+
classMap["kata-tracking-tighter"] = "letter-spacing: -0.05em;";
|
|
155
|
+
classMap["kata-tracking-tight"] = "letter-spacing: -0.025em;";
|
|
156
|
+
classMap["kata-tracking-normal"] = "letter-spacing: 0em;";
|
|
157
|
+
classMap["kata-tracking-wide"] = "letter-spacing: 0.025em;";
|
|
158
|
+
classMap["kata-tracking-wider"] = "letter-spacing: 0.05em;";
|
|
159
|
+
classMap["kata-tracking-widest"] = "letter-spacing: 0.1em;";
|
|
160
|
+
var colors = {
|
|
161
|
+
black: "#000000",
|
|
162
|
+
white: "#ffffff",
|
|
163
|
+
transparent: "transparent",
|
|
164
|
+
"gray-50": "#f9fafb",
|
|
165
|
+
"gray-100": "#f3f4f6",
|
|
166
|
+
"gray-200": "#e5e7eb",
|
|
167
|
+
"gray-300": "#d1d5db",
|
|
168
|
+
"gray-400": "#9ca3af",
|
|
169
|
+
"gray-500": "#6b7280",
|
|
170
|
+
"gray-600": "#4b5563",
|
|
171
|
+
"gray-700": "#374151",
|
|
172
|
+
"gray-800": "#1f2937",
|
|
173
|
+
"gray-900": "#111827",
|
|
174
|
+
"red-100": "#fee2e2",
|
|
175
|
+
"red-300": "#fca5a5",
|
|
176
|
+
"red-500": "#ef4444",
|
|
177
|
+
"red-700": "#b91c1c",
|
|
178
|
+
"red-900": "#7f1d1d",
|
|
179
|
+
"orange-100": "#ffedd5",
|
|
180
|
+
"orange-300": "#fdba74",
|
|
181
|
+
"orange-500": "#f97316",
|
|
182
|
+
"orange-700": "#c2410c",
|
|
183
|
+
"yellow-100": "#fef9c3",
|
|
184
|
+
"yellow-300": "#fde047",
|
|
185
|
+
"yellow-500": "#eab308",
|
|
186
|
+
"yellow-700": "#a16207",
|
|
187
|
+
"green-100": "#dcfce7",
|
|
188
|
+
"green-300": "#86efac",
|
|
189
|
+
"green-500": "#22c55e",
|
|
190
|
+
"green-700": "#15803d",
|
|
191
|
+
"green-900": "#14532d",
|
|
192
|
+
"teal-100": "#ccfbf1",
|
|
193
|
+
"teal-300": "#5eead4",
|
|
194
|
+
"teal-500": "#14b8a6",
|
|
195
|
+
"teal-700": "#0f766e",
|
|
196
|
+
"blue-100": "#dbeafe",
|
|
197
|
+
"blue-300": "#93c5fd",
|
|
198
|
+
"blue-500": "#3b82f6",
|
|
199
|
+
"blue-700": "#1d4ed8",
|
|
200
|
+
"blue-900": "#1e3a8a",
|
|
201
|
+
"indigo-100": "#e0e7ff",
|
|
202
|
+
"indigo-300": "#a5b4fc",
|
|
203
|
+
"indigo-500": "#6366f1",
|
|
204
|
+
"indigo-700": "#4338ca",
|
|
205
|
+
"purple-100": "#f3e8ff",
|
|
206
|
+
"purple-300": "#d8b4fe",
|
|
207
|
+
"purple-500": "#a855f7",
|
|
208
|
+
"purple-700": "#7e22ce",
|
|
209
|
+
"pink-100": "#fce7f3",
|
|
210
|
+
"pink-300": "#f9a8d4",
|
|
211
|
+
"pink-500": "#ec4899",
|
|
212
|
+
"pink-700": "#be185d"
|
|
213
|
+
};
|
|
214
|
+
for (const [k, v] of Object.entries(colors)) {
|
|
215
|
+
classMap[`kata-text-${k}`] = `color: ${v};`;
|
|
216
|
+
classMap[`kata-bg-${k}`] = `background-color: ${v};`;
|
|
217
|
+
classMap[`kata-border-${k}`] = `border-color: ${v};`;
|
|
218
|
+
}
|
|
219
|
+
classMap["kata-bg-none"] = "background: none;";
|
|
220
|
+
classMap["kata-bg-cover"] = "background-size: cover;";
|
|
221
|
+
classMap["kata-bg-contain"] = "background-size: contain;";
|
|
222
|
+
classMap["kata-bg-center"] = "background-position: center;";
|
|
223
|
+
classMap["kata-bg-top"] = "background-position: top;";
|
|
224
|
+
classMap["kata-bg-bottom"] = "background-position: bottom;";
|
|
225
|
+
classMap["kata-bg-no-repeat"] = "background-repeat: no-repeat;";
|
|
226
|
+
classMap["kata-bg-repeat"] = "background-repeat: repeat;";
|
|
227
|
+
classMap["kata-border-0"] = "border-width: 0;";
|
|
228
|
+
classMap["kata-border"] = "border-width: 1px;";
|
|
229
|
+
classMap["kata-border-2"] = "border-width: 2px;";
|
|
230
|
+
classMap["kata-border-4"] = "border-width: 4px;";
|
|
231
|
+
classMap["kata-border-8"] = "border-width: 8px;";
|
|
232
|
+
classMap["kata-border-t"] = "border-top-width: 1px;";
|
|
233
|
+
classMap["kata-border-r"] = "border-right-width: 1px;";
|
|
234
|
+
classMap["kata-border-b"] = "border-bottom-width: 1px;";
|
|
235
|
+
classMap["kata-border-l"] = "border-left-width: 1px;";
|
|
236
|
+
classMap["kata-border-solid"] = "border-style: solid;";
|
|
237
|
+
classMap["kata-border-dashed"] = "border-style: dashed;";
|
|
238
|
+
classMap["kata-border-dotted"] = "border-style: dotted;";
|
|
239
|
+
classMap["kata-border-double"] = "border-style: double;";
|
|
240
|
+
classMap["kata-border-none"] = "border-style: none;";
|
|
241
|
+
classMap["kata-rounded-none"] = "border-radius: 0;";
|
|
242
|
+
classMap["kata-rounded-sm"] = "border-radius: 0.125rem;";
|
|
243
|
+
classMap["kata-rounded"] = "border-radius: 0.25rem;";
|
|
244
|
+
classMap["kata-rounded-md"] = "border-radius: 0.375rem;";
|
|
245
|
+
classMap["kata-rounded-lg"] = "border-radius: 0.5rem;";
|
|
246
|
+
classMap["kata-rounded-xl"] = "border-radius: 0.75rem;";
|
|
247
|
+
classMap["kata-rounded-2xl"] = "border-radius: 1rem;";
|
|
248
|
+
classMap["kata-rounded-3xl"] = "border-radius: 1.5rem;";
|
|
249
|
+
classMap["kata-rounded-full"] = "border-radius: 9999px;";
|
|
250
|
+
for (const [k, v] of Object.entries(scale)) {
|
|
251
|
+
classMap[`kata-rounded-${k}`] = `border-radius: ${v};`;
|
|
252
|
+
}
|
|
253
|
+
classMap["kata-cursor-auto"] = "cursor: auto;";
|
|
254
|
+
classMap["kata-cursor-default"] = "cursor: default;";
|
|
255
|
+
classMap["kata-cursor-pointer"] = "cursor: pointer;";
|
|
256
|
+
classMap["kata-cursor-wait"] = "cursor: wait;";
|
|
257
|
+
classMap["kata-cursor-text"] = "cursor: text;";
|
|
258
|
+
classMap["kata-cursor-move"] = "cursor: move;";
|
|
259
|
+
classMap["kata-cursor-not-allowed"] = "cursor: not-allowed;";
|
|
260
|
+
classMap["kata-cursor-grab"] = "cursor: grab;";
|
|
261
|
+
classMap["kata-visible"] = "visibility: visible;";
|
|
262
|
+
classMap["kata-invisible"] = "visibility: hidden;";
|
|
263
|
+
var chaiColors = {
|
|
264
|
+
"kata-chai-masala": "#8B4A2E",
|
|
265
|
+
// classic spiced milk tea — deep reddish-brown
|
|
266
|
+
"kata-chai-karak": "#C27B3E",
|
|
267
|
+
// Gulf-style strong chai — amber-caramel
|
|
268
|
+
"kata-chai-kashmiri": "#D4697A",
|
|
269
|
+
// pink salt tea — dusty rose
|
|
270
|
+
"kata-chai-noon": "#B85C6E",
|
|
271
|
+
// bolder Kashmiri noon chai — deeper rose
|
|
272
|
+
"kata-chai-ginger": "#A0522D",
|
|
273
|
+
// ginger-forward brew — warm sienna
|
|
274
|
+
"kata-chai-cardamom": "#BFA07A",
|
|
275
|
+
// aromatic cardamom chai — pale tan
|
|
276
|
+
"kata-chai-elaichi": "#E8C99A",
|
|
277
|
+
// heavy milk chai — creamy beige
|
|
278
|
+
"kata-chai-black": "#3B2314",
|
|
279
|
+
// unsweetened black tea — dark espresso
|
|
280
|
+
"kata-chai-saffron": "#E8A020",
|
|
281
|
+
// saffron-infused chai — vivid golden orange
|
|
282
|
+
"kata-chai-tulsi": "#5C8A5A",
|
|
283
|
+
// holy basil tea — forest green
|
|
284
|
+
"kata-chai-foam": "#F2E8DC",
|
|
285
|
+
// noon chai foam topping — warm off-white
|
|
286
|
+
// ── Japanese greens ──
|
|
287
|
+
"kata-chai-matcha": "#4A7C59",
|
|
288
|
+
// classic matcha — vivid forest green
|
|
289
|
+
"kata-chai-matcha-latte": "#7DAB7A",
|
|
290
|
+
// matcha with milk — softer sage
|
|
291
|
+
"kata-chai-matcha-ceremonial": "#2D5E3A",
|
|
292
|
+
// high-grade ceremonial — deep rich green
|
|
293
|
+
"kata-chai-sencha": "#6B8F47",
|
|
294
|
+
// sencha — lighter yellow-green
|
|
295
|
+
"kata-chai-hojicha": "#8B6347",
|
|
296
|
+
// roasted green tea — warm chestnut
|
|
297
|
+
"kata-chai-genmaicha": "#A8935A",
|
|
298
|
+
// green tea + roasted rice — toasty gold
|
|
299
|
+
"kata-chai-gyokuro": "#3D6B40",
|
|
300
|
+
// shade-grown — deep mossy green
|
|
301
|
+
// ── Oolong ──
|
|
302
|
+
"kata-chai-oolong-light": "#C9B87A",
|
|
303
|
+
// lightly oxidised — pale amber gold
|
|
304
|
+
"kata-chai-oolong-dark": "#8B5E3C",
|
|
305
|
+
// heavily oxidised — warm brown
|
|
306
|
+
"kata-chai-dahongpao": "#7A3E28",
|
|
307
|
+
// da hong pao Wuyi rock — deep reddish-brown
|
|
308
|
+
"kata-chai-dongding": "#B8895A",
|
|
309
|
+
// dong ding Taiwan — medium amber
|
|
310
|
+
"kata-chai-milk-oolong": "#D4C49A",
|
|
311
|
+
// jin xuan milk oolong — creamy buff
|
|
312
|
+
// ── Chinese teas ──
|
|
313
|
+
"kata-chai-longjing": "#8CAF6A",
|
|
314
|
+
// dragon well — fresh yellow-green
|
|
315
|
+
"kata-chai-tieguanyin": "#C4A96B",
|
|
316
|
+
// iron goddess — golden amber
|
|
317
|
+
"kata-chai-puerh": "#6B3A2A",
|
|
318
|
+
// aged pu-erh — dark earthy brown
|
|
319
|
+
"kata-chai-baimudan": "#E8D5B0",
|
|
320
|
+
// white peony — pale warm straw
|
|
321
|
+
"kata-chai-yinzhen": "#F0E6C8",
|
|
322
|
+
// silver needle — very pale cream
|
|
323
|
+
"kata-chai-chrysanthemum": "#F5D78E",
|
|
324
|
+
// chrysanthemum flower — pale yellow
|
|
325
|
+
// ── South Asian blacks ──
|
|
326
|
+
"kata-chai-assam": "#7B3F1E",
|
|
327
|
+
// assam CTC — deep malty brown
|
|
328
|
+
"kata-chai-darjeeling": "#C4875A",
|
|
329
|
+
// darjeeling first flush — copper-amber
|
|
330
|
+
"kata-chai-nilgiri": "#9B5C38",
|
|
331
|
+
// nilgiri — medium warm brown
|
|
332
|
+
"kata-chai-ceylon": "#A0522D",
|
|
333
|
+
// ceylon black — classic sienna
|
|
334
|
+
// ── African teas ──
|
|
335
|
+
"kata-chai-kenya": "#8B3A2A",
|
|
336
|
+
// kenyan black — bold deep red-brown
|
|
337
|
+
"kata-chai-rooibos": "#C1440E",
|
|
338
|
+
// rooibos — vivid burnt orange-red
|
|
339
|
+
"kata-chai-rooibos-latte": "#D4845A",
|
|
340
|
+
// rooibos with milk — softened terracotta
|
|
341
|
+
// ── Western & British ──
|
|
342
|
+
"kata-chai-earl-grey": "#6B5B8A",
|
|
343
|
+
// earl grey (bergamot) — lavender-purple
|
|
344
|
+
"kata-chai-english-breakfast": "#7A3B28",
|
|
345
|
+
// english breakfast — rich dark brown
|
|
346
|
+
// ── Herbal & floral ──
|
|
347
|
+
"kata-chai-chamomile": "#F0C96A",
|
|
348
|
+
// chamomile — warm golden yellow
|
|
349
|
+
"kata-chai-peppermint": "#4A8F6A",
|
|
350
|
+
// peppermint — cool mid-green
|
|
351
|
+
"kata-chai-hibiscus": "#C4204A",
|
|
352
|
+
// hibiscus — vivid magenta-red
|
|
353
|
+
"kata-chai-lavender": "#9B7EC8",
|
|
354
|
+
// lavender — soft purple
|
|
355
|
+
"kata-chai-lemon-verbena": "#D4C84A",
|
|
356
|
+
// lemon verbena — acid yellow-green
|
|
357
|
+
"kata-chai-rosehip": "#E8603A",
|
|
358
|
+
// rose hip — bright orange-red
|
|
359
|
+
// ── Middle Eastern & Central Asian ──
|
|
360
|
+
"kata-chai-moroccan-mint": "#3A8A5A",
|
|
361
|
+
// moroccan mint green tea — vivid green
|
|
362
|
+
"kata-chai-gunpowder": "#6B7A3A",
|
|
363
|
+
// gunpowder green — muted olive
|
|
364
|
+
"kata-chai-irani": "#C27040",
|
|
365
|
+
// irani chai — amber-orange
|
|
366
|
+
"kata-chai-samovar": "#8B3D28",
|
|
367
|
+
// samovar-brewed — deep red-brown
|
|
368
|
+
"kata-chai-saffron-persian": "#D4A020",
|
|
369
|
+
// persian saffron tea — golden amber
|
|
370
|
+
// ── South American ──
|
|
371
|
+
"kata-chai-yerba-mate": "#5A7A3A",
|
|
372
|
+
// yerba mate — medium grassy green
|
|
373
|
+
"kata-chai-mate-amargo": "#3A5A28",
|
|
374
|
+
// bitter mate — deep forest green
|
|
375
|
+
"kata-chai-muna": "#7A9A5A",
|
|
376
|
+
// muña muña Peru — light herbal green
|
|
377
|
+
"kata-chai-cascara": "#9B4A3A"
|
|
378
|
+
// cascara coffee cherry tea — rusty red-brown
|
|
379
|
+
};
|
|
380
|
+
for (const [k, v] of Object.entries(chaiColors)) {
|
|
381
|
+
classMap[`kata-text-${k}`] = `color: ${v};`;
|
|
382
|
+
classMap[`kata-bg-${k}`] = `background-color: ${v};`;
|
|
383
|
+
classMap[`kata-border-${k}`] = `border-color: ${v};`;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
// src/index.js
|
|
387
|
+
function applyKataStyles() {
|
|
388
|
+
const elements = document.querySelectorAll("[class*=kata-]");
|
|
389
|
+
elements.forEach((el) => {
|
|
390
|
+
const kataClasses = Array.from(el.classList).filter((c) => c.startsWith("kata-"));
|
|
391
|
+
if (!kataClasses.length) return;
|
|
392
|
+
let inlineStyles = el.getAttribute("style") || "";
|
|
393
|
+
kataClasses.forEach((cls) => {
|
|
394
|
+
if (classMap[cls]) {
|
|
395
|
+
inlineStyles += " " + classMap[cls];
|
|
396
|
+
el.classList.remove(cls);
|
|
397
|
+
} else {
|
|
398
|
+
console.warn(`[kata-css] Unknown class: "${cls}"`);
|
|
399
|
+
}
|
|
400
|
+
});
|
|
401
|
+
el.setAttribute("style", inlineStyles.trim());
|
|
402
|
+
});
|
|
403
|
+
}
|
|
404
|
+
document.addEventListener("DOMContentLoaded", applyKataStyles);
|
|
405
|
+
})();
|
package/dist/kata.min.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(()=>{var a={},i={};for(let t=0;t<=96;t++)i[t]=`${t*.25}rem`;for(let[t,e]of Object.entries(i))a[`kata-p-${t}`]=`padding: ${e};`,a[`kata-pt-${t}`]=`padding-top: ${e};`,a[`kata-pb-${t}`]=`padding-bottom: ${e};`,a[`kata-pl-${t}`]=`padding-left: ${e};`,a[`kata-pr-${t}`]=`padding-right: ${e};`,a[`kata-px-${t}`]=`padding-left: ${e}; padding-right: ${e};`,a[`kata-py-${t}`]=`padding-top: ${e}; padding-bottom: ${e};`;for(let[t,e]of Object.entries(i))a[`kata-m-${t}`]=`margin: ${e};`,a[`kata-mt-${t}`]=`margin-top: ${e};`,a[`kata-mb-${t}`]=`margin-bottom: ${e};`,a[`kata-ml-${t}`]=`margin-left: ${e};`,a[`kata-mr-${t}`]=`margin-right: ${e};`,a[`kata-mx-${t}`]=`margin-left: ${e}; margin-right: ${e};`,a[`kata-my-${t}`]=`margin-top: ${e}; margin-bottom: ${e};`;a["kata-m-auto"]="margin: auto;";a["kata-mx-auto"]="margin-left: auto; margin-right: auto;";a["kata-my-auto"]="margin-top: auto; margin-bottom: auto;";a["kata-ml-auto"]="margin-left: auto;";a["kata-mr-auto"]="margin-right: auto;";a["kata-mt-auto"]="margin-top: auto;";a["kata-mb-auto"]="margin-bottom: auto;";for(let[t,e]of Object.entries(i))a[`kata-w-${t}`]=`width: ${e};`;a["kata-w-auto"]="width: auto;";a["kata-w-full"]="width: 100%;";a["kata-w-half"]="width: 50%;";a["kata-w-screen"]="width: 100vw;";a["kata-w-min"]="width: min-content;";a["kata-w-max"]="width: max-content;";a["kata-w-fit"]="width: fit-content;";for(let[t,e]of Object.entries(i))a[`kata-h-${t}`]=`height: ${e};`;a["kata-h-auto"]="height: auto;";a["kata-h-full"]="height: 100%;";a["kata-h-half"]="height: 50%;";a["kata-h-screen"]="height: 100vh;";a["kata-h-min"]="height: min-content;";a["kata-h-max"]="height: max-content;";a["kata-h-fit"]="height: fit-content;";a["kata-box-border"]="box-sizing: border-box;";a["kata-box-content"]="box-sizing: content-box;";a["kata-block"]="display: block;";a["kata-inline"]="display: inline;";a["kata-inline-block"]="display: inline-block;";a["kata-flex"]="display: flex;";a["kata-inline-flex"]="display: inline-flex;";a["kata-grid"]="display: grid;";a["kata-inline-grid"]="display: inline-grid;";a["kata-hidden"]="display: none;";a["kata-contents"]="display: contents;";a["kata-flex-row"]="flex-direction: row;";a["kata-flex-row-reverse"]="flex-direction: row-reverse;";a["kata-flex-col"]="flex-direction: column;";a["kata-flex-col-reverse"]="flex-direction: column-reverse;";a["kata-flex-wrap"]="flex-wrap: wrap;";a["kata-flex-wrap-reverse"]="flex-wrap: wrap-reverse;";a["kata-flex-nowrap"]="flex-wrap: nowrap;";a["kata-justify-start"]="justify-content: flex-start;";a["kata-justify-end"]="justify-content: flex-end;";a["kata-justify-center"]="justify-content: center;";a["kata-justify-between"]="justify-content: space-between;";a["kata-justify-around"]="justify-content: space-around;";a["kata-justify-evenly"]="justify-content: space-evenly;";a["kata-items-start"]="align-items: flex-start;";a["kata-items-end"]="align-items: flex-end;";a["kata-items-center"]="align-items: center;";a["kata-items-baseline"]="align-items: baseline;";a["kata-items-stretch"]="align-items: stretch;";for(let[t,e]of Object.entries(i))a[`kata-gap-${t}`]=`gap: ${e};`,a[`kata-gap-x-${t}`]=`column-gap: ${e};`,a[`kata-gap-y-${t}`]=`row-gap: ${e};`;a["kata-static"]="position: static;";a["kata-relative"]="position: relative;";a["kata-absolute"]="position: absolute;";a["kata-fixed"]="position: fixed;";a["kata-sticky"]="position: sticky;";for(let[t,e]of Object.entries(i))a[`kata-top-${t}`]=`top: ${e};`,a[`kata-right-${t}`]=`right: ${e};`,a[`kata-bottom-${t}`]=`bottom: ${e};`,a[`kata-left-${t}`]=`left: ${e};`;a["kata-top-auto"]="top: auto;";a["kata-right-auto"]="right: auto;";a["kata-bottom-auto"]="bottom: auto;";a["kata-left-auto"]="left: auto;";a["kata-inset-0"]="top: 0; right: 0; bottom: 0; left: 0;";a["kata-inset-auto"]="top: auto; right: auto; bottom: auto; left: auto;";for(let t=0;t<=96;t++)a[`kata-z-${t}`]=`z-index: ${t};`;a["kata-z-auto"]="z-index: auto;";a["kata-font-sans"]="font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;";a["kata-font-serif"]="font-family: ui-serif, Georgia, Cambria, serif;";a["kata-font-mono"]="font-family: ui-monospace, 'Cascadia Code', 'Courier New', monospace;";a["kata-text-xs"]="font-size: 0.75rem; line-height: 1rem;";a["kata-text-sm"]="font-size: 0.875rem; line-height: 1.25rem;";a["kata-text-base"]="font-size: 1rem; line-height: 1.5rem;";a["kata-text-lg"]="font-size: 1.125rem; line-height: 1.75rem;";a["kata-text-xl"]="font-size: 1.25rem; line-height: 1.75rem;";a["kata-text-2xl"]="font-size: 1.5rem; line-height: 2rem;";a["kata-text-3xl"]="font-size: 1.875rem; line-height: 2.25rem;";a["kata-text-4xl"]="font-size: 2.25rem; line-height: 2.5rem;";a["kata-text-5xl"]="font-size: 3rem; line-height: 1;";a["kata-text-6xl"]="font-size: 3.75rem; line-height: 1;";a["kata-font-thin"]="font-weight: 100;";a["kata-font-extralight"]="font-weight: 200;";a["kata-font-light"]="font-weight: 300;";a["kata-font-normal"]="font-weight: 400;";a["kata-font-medium"]="font-weight: 500;";a["kata-font-semibold"]="font-weight: 600;";a["kata-font-bold"]="font-weight: 700;";a["kata-font-extrabold"]="font-weight: 800;";a["kata-font-black"]="font-weight: 900;";a["kata-italic"]="font-style: italic;";a["kata-not-italic"]="font-style: normal;";a["kata-text-left"]="text-align: left;";a["kata-text-center"]="text-align: center;";a["kata-text-right"]="text-align: right;";a["kata-text-justify"]="text-align: justify;";a["kata-text-start"]="text-align: start;";a["kata-text-end"]="text-align: end;";a["kata-underline"]="text-decoration-line: underline;";a["kata-overline"]="text-decoration-line: overline;";a["kata-line-through"]="text-decoration-line: line-through;";a["kata-no-underline"]="text-decoration: none;";a["kata-decoration-solid"]="text-decoration-style: solid;";a["kata-decoration-dashed"]="text-decoration-style: dashed;";a["kata-decoration-dotted"]="text-decoration-style: dotted;";a["kata-decoration-double"]="text-decoration-style: double;";a["kata-decoration-wavy"]="text-decoration-style: wavy;";a["kata-leading-none"]="line-height: 1;";a["kata-leading-tight"]="line-height: 1.25;";a["kata-leading-snug"]="line-height: 1.375;";a["kata-leading-normal"]="line-height: 1.5;";a["kata-leading-relaxed"]="line-height: 1.625;";a["kata-leading-loose"]="line-height: 2;";a["kata-tracking-tighter"]="letter-spacing: -0.05em;";a["kata-tracking-tight"]="letter-spacing: -0.025em;";a["kata-tracking-normal"]="letter-spacing: 0em;";a["kata-tracking-wide"]="letter-spacing: 0.025em;";a["kata-tracking-wider"]="letter-spacing: 0.05em;";a["kata-tracking-widest"]="letter-spacing: 0.1em;";var k={black:"#000000",white:"#ffffff",transparent:"transparent","gray-50":"#f9fafb","gray-100":"#f3f4f6","gray-200":"#e5e7eb","gray-300":"#d1d5db","gray-400":"#9ca3af","gray-500":"#6b7280","gray-600":"#4b5563","gray-700":"#374151","gray-800":"#1f2937","gray-900":"#111827","red-100":"#fee2e2","red-300":"#fca5a5","red-500":"#ef4444","red-700":"#b91c1c","red-900":"#7f1d1d","orange-100":"#ffedd5","orange-300":"#fdba74","orange-500":"#f97316","orange-700":"#c2410c","yellow-100":"#fef9c3","yellow-300":"#fde047","yellow-500":"#eab308","yellow-700":"#a16207","green-100":"#dcfce7","green-300":"#86efac","green-500":"#22c55e","green-700":"#15803d","green-900":"#14532d","teal-100":"#ccfbf1","teal-300":"#5eead4","teal-500":"#14b8a6","teal-700":"#0f766e","blue-100":"#dbeafe","blue-300":"#93c5fd","blue-500":"#3b82f6","blue-700":"#1d4ed8","blue-900":"#1e3a8a","indigo-100":"#e0e7ff","indigo-300":"#a5b4fc","indigo-500":"#6366f1","indigo-700":"#4338ca","purple-100":"#f3e8ff","purple-300":"#d8b4fe","purple-500":"#a855f7","purple-700":"#7e22ce","pink-100":"#fce7f3","pink-300":"#f9a8d4","pink-500":"#ec4899","pink-700":"#be185d"};for(let[t,e]of Object.entries(k))a[`kata-text-${t}`]=`color: ${e};`,a[`kata-bg-${t}`]=`background-color: ${e};`,a[`kata-border-${t}`]=`border-color: ${e};`;a["kata-bg-none"]="background: none;";a["kata-bg-cover"]="background-size: cover;";a["kata-bg-contain"]="background-size: contain;";a["kata-bg-center"]="background-position: center;";a["kata-bg-top"]="background-position: top;";a["kata-bg-bottom"]="background-position: bottom;";a["kata-bg-no-repeat"]="background-repeat: no-repeat;";a["kata-bg-repeat"]="background-repeat: repeat;";a["kata-border-0"]="border-width: 0;";a["kata-border"]="border-width: 1px;";a["kata-border-2"]="border-width: 2px;";a["kata-border-4"]="border-width: 4px;";a["kata-border-8"]="border-width: 8px;";a["kata-border-t"]="border-top-width: 1px;";a["kata-border-r"]="border-right-width: 1px;";a["kata-border-b"]="border-bottom-width: 1px;";a["kata-border-l"]="border-left-width: 1px;";a["kata-border-solid"]="border-style: solid;";a["kata-border-dashed"]="border-style: dashed;";a["kata-border-dotted"]="border-style: dotted;";a["kata-border-double"]="border-style: double;";a["kata-border-none"]="border-style: none;";a["kata-rounded-none"]="border-radius: 0;";a["kata-rounded-sm"]="border-radius: 0.125rem;";a["kata-rounded"]="border-radius: 0.25rem;";a["kata-rounded-md"]="border-radius: 0.375rem;";a["kata-rounded-lg"]="border-radius: 0.5rem;";a["kata-rounded-xl"]="border-radius: 0.75rem;";a["kata-rounded-2xl"]="border-radius: 1rem;";a["kata-rounded-3xl"]="border-radius: 1.5rem;";a["kata-rounded-full"]="border-radius: 9999px;";for(let[t,e]of Object.entries(i))a[`kata-rounded-${t}`]=`border-radius: ${e};`;a["kata-cursor-auto"]="cursor: auto;";a["kata-cursor-default"]="cursor: default;";a["kata-cursor-pointer"]="cursor: pointer;";a["kata-cursor-wait"]="cursor: wait;";a["kata-cursor-text"]="cursor: text;";a["kata-cursor-move"]="cursor: move;";a["kata-cursor-not-allowed"]="cursor: not-allowed;";a["kata-cursor-grab"]="cursor: grab;";a["kata-visible"]="visibility: visible;";a["kata-invisible"]="visibility: hidden;";var l={"kata-chai-masala":"#8B4A2E","kata-chai-karak":"#C27B3E","kata-chai-kashmiri":"#D4697A","kata-chai-noon":"#B85C6E","kata-chai-ginger":"#A0522D","kata-chai-cardamom":"#BFA07A","kata-chai-elaichi":"#E8C99A","kata-chai-black":"#3B2314","kata-chai-saffron":"#E8A020","kata-chai-tulsi":"#5C8A5A","kata-chai-foam":"#F2E8DC","kata-chai-matcha":"#4A7C59","kata-chai-matcha-latte":"#7DAB7A","kata-chai-matcha-ceremonial":"#2D5E3A","kata-chai-sencha":"#6B8F47","kata-chai-hojicha":"#8B6347","kata-chai-genmaicha":"#A8935A","kata-chai-gyokuro":"#3D6B40","kata-chai-oolong-light":"#C9B87A","kata-chai-oolong-dark":"#8B5E3C","kata-chai-dahongpao":"#7A3E28","kata-chai-dongding":"#B8895A","kata-chai-milk-oolong":"#D4C49A","kata-chai-longjing":"#8CAF6A","kata-chai-tieguanyin":"#C4A96B","kata-chai-puerh":"#6B3A2A","kata-chai-baimudan":"#E8D5B0","kata-chai-yinzhen":"#F0E6C8","kata-chai-chrysanthemum":"#F5D78E","kata-chai-assam":"#7B3F1E","kata-chai-darjeeling":"#C4875A","kata-chai-nilgiri":"#9B5C38","kata-chai-ceylon":"#A0522D","kata-chai-kenya":"#8B3A2A","kata-chai-rooibos":"#C1440E","kata-chai-rooibos-latte":"#D4845A","kata-chai-earl-grey":"#6B5B8A","kata-chai-english-breakfast":"#7A3B28","kata-chai-chamomile":"#F0C96A","kata-chai-peppermint":"#4A8F6A","kata-chai-hibiscus":"#C4204A","kata-chai-lavender":"#9B7EC8","kata-chai-lemon-verbena":"#D4C84A","kata-chai-rosehip":"#E8603A","kata-chai-moroccan-mint":"#3A8A5A","kata-chai-gunpowder":"#6B7A3A","kata-chai-irani":"#C27040","kata-chai-samovar":"#8B3D28","kata-chai-saffron-persian":"#D4A020","kata-chai-yerba-mate":"#5A7A3A","kata-chai-mate-amargo":"#3A5A28","kata-chai-muna":"#7A9A5A","kata-chai-cascara":"#9B4A3A"};for(let[t,e]of Object.entries(l))a[`kata-text-${t}`]=`color: ${e};`,a[`kata-bg-${t}`]=`background-color: ${e};`,a[`kata-border-${t}`]=`border-color: ${e};`;function d(){document.querySelectorAll("[class*=kata-]").forEach(e=>{let r=Array.from(e.classList).filter(o=>o.startsWith("kata-"));if(!r.length)return;let n=e.getAttribute("style")||"";r.forEach(o=>{a[o]?(n+=" "+a[o],e.classList.remove(o)):console.warn(`[kata-css] Unknown class: "${o}"`)}),e.setAttribute("style",n.trim())})}document.addEventListener("DOMContentLoaded",d);})();
|
package/package.json
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "kata-css",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "A tailwind style CSS styling which is a hobby project",
|
|
5
|
+
"homepage": "https://github.com/idreamfyrei/kata-css#readme",
|
|
6
|
+
"bugs": {
|
|
7
|
+
"url": "https://github.com/idreamfyrei/kata-css/issues"
|
|
8
|
+
},
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "git+https://github.com/idreamfyrei/kata-css.git"
|
|
12
|
+
},
|
|
13
|
+
"license": "ISC",
|
|
14
|
+
"author": "saumya",
|
|
15
|
+
"type": "module",
|
|
16
|
+
"main": "dist/kata.min.js",
|
|
17
|
+
"module": "dist/kata.js",
|
|
18
|
+
"exports": {
|
|
19
|
+
".": "./dist/kata.min.js"
|
|
20
|
+
},
|
|
21
|
+
"files": [
|
|
22
|
+
"dist"
|
|
23
|
+
],
|
|
24
|
+
"scripts": {
|
|
25
|
+
"build": "esbuild src/index.js --bundle --outfile=dist/kata.js",
|
|
26
|
+
"build:min": "esbuild src/index.js --bundle --minify --outfile=dist/kata.min.js",
|
|
27
|
+
"prepublishOnly": "npm run build && npm run build:min"
|
|
28
|
+
},
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"esbuild": "^0.27.4"
|
|
31
|
+
}
|
|
32
|
+
}
|