hypen_tailwind_parse/
colors.rs

1//! Color utilities: text, background, border colors
2
3use crate::parser::CssProperty;
4use std::collections::HashMap;
5use std::sync::LazyLock;
6
7/// Tailwind color palette
8pub static COLORS: LazyLock<HashMap<&'static str, &'static str>> = LazyLock::new(|| {
9    let mut m = HashMap::new();
10
11    // Basic colors
12    m.insert("transparent", "transparent");
13    m.insert("current", "currentColor");
14    m.insert("black", "#000000");
15    m.insert("white", "#ffffff");
16
17    // Slate
18    m.insert("slate-50", "#f8fafc");
19    m.insert("slate-100", "#f1f5f9");
20    m.insert("slate-200", "#e2e8f0");
21    m.insert("slate-300", "#cbd5e1");
22    m.insert("slate-400", "#94a3b8");
23    m.insert("slate-500", "#64748b");
24    m.insert("slate-600", "#475569");
25    m.insert("slate-700", "#334155");
26    m.insert("slate-800", "#1e293b");
27    m.insert("slate-900", "#0f172a");
28    m.insert("slate-950", "#020617");
29
30    // Gray
31    m.insert("gray-50", "#f9fafb");
32    m.insert("gray-100", "#f3f4f6");
33    m.insert("gray-200", "#e5e7eb");
34    m.insert("gray-300", "#d1d5db");
35    m.insert("gray-400", "#9ca3af");
36    m.insert("gray-500", "#6b7280");
37    m.insert("gray-600", "#4b5563");
38    m.insert("gray-700", "#374151");
39    m.insert("gray-800", "#1f2937");
40    m.insert("gray-900", "#111827");
41    m.insert("gray-950", "#030712");
42
43    // Zinc
44    m.insert("zinc-50", "#fafafa");
45    m.insert("zinc-100", "#f4f4f5");
46    m.insert("zinc-200", "#e4e4e7");
47    m.insert("zinc-300", "#d4d4d8");
48    m.insert("zinc-400", "#a1a1aa");
49    m.insert("zinc-500", "#71717a");
50    m.insert("zinc-600", "#52525b");
51    m.insert("zinc-700", "#3f3f46");
52    m.insert("zinc-800", "#27272a");
53    m.insert("zinc-900", "#18181b");
54    m.insert("zinc-950", "#09090b");
55
56    // Red
57    m.insert("red-50", "#fef2f2");
58    m.insert("red-100", "#fee2e2");
59    m.insert("red-200", "#fecaca");
60    m.insert("red-300", "#fca5a5");
61    m.insert("red-400", "#f87171");
62    m.insert("red-500", "#ef4444");
63    m.insert("red-600", "#dc2626");
64    m.insert("red-700", "#b91c1c");
65    m.insert("red-800", "#991b1b");
66    m.insert("red-900", "#7f1d1d");
67    m.insert("red-950", "#450a0a");
68
69    // Orange
70    m.insert("orange-50", "#fff7ed");
71    m.insert("orange-100", "#ffedd5");
72    m.insert("orange-200", "#fed7aa");
73    m.insert("orange-300", "#fdba74");
74    m.insert("orange-400", "#fb923c");
75    m.insert("orange-500", "#f97316");
76    m.insert("orange-600", "#ea580c");
77    m.insert("orange-700", "#c2410c");
78    m.insert("orange-800", "#9a3412");
79    m.insert("orange-900", "#7c2d12");
80    m.insert("orange-950", "#431407");
81
82    // Yellow
83    m.insert("yellow-50", "#fefce8");
84    m.insert("yellow-100", "#fef9c3");
85    m.insert("yellow-200", "#fef08a");
86    m.insert("yellow-300", "#fde047");
87    m.insert("yellow-400", "#facc15");
88    m.insert("yellow-500", "#eab308");
89    m.insert("yellow-600", "#ca8a04");
90    m.insert("yellow-700", "#a16207");
91    m.insert("yellow-800", "#854d0e");
92    m.insert("yellow-900", "#713f12");
93    m.insert("yellow-950", "#422006");
94
95    // Green
96    m.insert("green-50", "#f0fdf4");
97    m.insert("green-100", "#dcfce7");
98    m.insert("green-200", "#bbf7d0");
99    m.insert("green-300", "#86efac");
100    m.insert("green-400", "#4ade80");
101    m.insert("green-500", "#22c55e");
102    m.insert("green-600", "#16a34a");
103    m.insert("green-700", "#15803d");
104    m.insert("green-800", "#166534");
105    m.insert("green-900", "#14532d");
106    m.insert("green-950", "#052e16");
107
108    // Blue
109    m.insert("blue-50", "#eff6ff");
110    m.insert("blue-100", "#dbeafe");
111    m.insert("blue-200", "#bfdbfe");
112    m.insert("blue-300", "#93c5fd");
113    m.insert("blue-400", "#60a5fa");
114    m.insert("blue-500", "#3b82f6");
115    m.insert("blue-600", "#2563eb");
116    m.insert("blue-700", "#1d4ed8");
117    m.insert("blue-800", "#1e40af");
118    m.insert("blue-900", "#1e3a8a");
119    m.insert("blue-950", "#172554");
120
121    // Indigo
122    m.insert("indigo-50", "#eef2ff");
123    m.insert("indigo-100", "#e0e7ff");
124    m.insert("indigo-200", "#c7d2fe");
125    m.insert("indigo-300", "#a5b4fc");
126    m.insert("indigo-400", "#818cf8");
127    m.insert("indigo-500", "#6366f1");
128    m.insert("indigo-600", "#4f46e5");
129    m.insert("indigo-700", "#4338ca");
130    m.insert("indigo-800", "#3730a3");
131    m.insert("indigo-900", "#312e81");
132    m.insert("indigo-950", "#1e1b4b");
133
134    // Purple
135    m.insert("purple-50", "#faf5ff");
136    m.insert("purple-100", "#f3e8ff");
137    m.insert("purple-200", "#e9d5ff");
138    m.insert("purple-300", "#d8b4fe");
139    m.insert("purple-400", "#c084fc");
140    m.insert("purple-500", "#a855f7");
141    m.insert("purple-600", "#9333ea");
142    m.insert("purple-700", "#7e22ce");
143    m.insert("purple-800", "#6b21a8");
144    m.insert("purple-900", "#581c87");
145    m.insert("purple-950", "#3b0764");
146
147    // Pink
148    m.insert("pink-50", "#fdf2f8");
149    m.insert("pink-100", "#fce7f3");
150    m.insert("pink-200", "#fbcfe8");
151    m.insert("pink-300", "#f9a8d4");
152    m.insert("pink-400", "#f472b6");
153    m.insert("pink-500", "#ec4899");
154    m.insert("pink-600", "#db2777");
155    m.insert("pink-700", "#be185d");
156    m.insert("pink-800", "#9d174d");
157    m.insert("pink-900", "#831843");
158    m.insert("pink-950", "#500724");
159
160    // Rose
161    m.insert("rose-50", "#fff1f2");
162    m.insert("rose-100", "#ffe4e6");
163    m.insert("rose-200", "#fecdd3");
164    m.insert("rose-300", "#fda4af");
165    m.insert("rose-400", "#fb7185");
166    m.insert("rose-500", "#f43f5e");
167    m.insert("rose-600", "#e11d48");
168    m.insert("rose-700", "#be123c");
169    m.insert("rose-800", "#9f1239");
170    m.insert("rose-900", "#881337");
171    m.insert("rose-950", "#4c0519");
172
173    // Amber
174    m.insert("amber-50", "#fffbeb");
175    m.insert("amber-100", "#fef3c7");
176    m.insert("amber-200", "#fde68a");
177    m.insert("amber-300", "#fcd34d");
178    m.insert("amber-400", "#fbbf24");
179    m.insert("amber-500", "#f59e0b");
180    m.insert("amber-600", "#d97706");
181    m.insert("amber-700", "#b45309");
182    m.insert("amber-800", "#92400e");
183    m.insert("amber-900", "#78350f");
184    m.insert("amber-950", "#451a03");
185
186    // Lime
187    m.insert("lime-50", "#f7fee7");
188    m.insert("lime-100", "#ecfccb");
189    m.insert("lime-200", "#d9f99d");
190    m.insert("lime-300", "#bef264");
191    m.insert("lime-400", "#a3e635");
192    m.insert("lime-500", "#84cc16");
193    m.insert("lime-600", "#65a30d");
194    m.insert("lime-700", "#4d7c0f");
195    m.insert("lime-800", "#3f6212");
196    m.insert("lime-900", "#365314");
197    m.insert("lime-950", "#1a2e05");
198
199    // Emerald
200    m.insert("emerald-50", "#ecfdf5");
201    m.insert("emerald-100", "#d1fae5");
202    m.insert("emerald-200", "#a7f3d0");
203    m.insert("emerald-300", "#6ee7b7");
204    m.insert("emerald-400", "#34d399");
205    m.insert("emerald-500", "#10b981");
206    m.insert("emerald-600", "#059669");
207    m.insert("emerald-700", "#047857");
208    m.insert("emerald-800", "#065f46");
209    m.insert("emerald-900", "#064e3b");
210    m.insert("emerald-950", "#022c22");
211
212    // Teal
213    m.insert("teal-50", "#f0fdfa");
214    m.insert("teal-100", "#ccfbf1");
215    m.insert("teal-200", "#99f6e4");
216    m.insert("teal-300", "#5eead4");
217    m.insert("teal-400", "#2dd4bf");
218    m.insert("teal-500", "#14b8a6");
219    m.insert("teal-600", "#0d9488");
220    m.insert("teal-700", "#0f766e");
221    m.insert("teal-800", "#115e59");
222    m.insert("teal-900", "#134e4a");
223    m.insert("teal-950", "#042f2e");
224
225    // Cyan
226    m.insert("cyan-50", "#ecfeff");
227    m.insert("cyan-100", "#cffafe");
228    m.insert("cyan-200", "#a5f3fc");
229    m.insert("cyan-300", "#67e8f9");
230    m.insert("cyan-400", "#22d3ee");
231    m.insert("cyan-500", "#06b6d4");
232    m.insert("cyan-600", "#0891b2");
233    m.insert("cyan-700", "#0e7490");
234    m.insert("cyan-800", "#155e75");
235    m.insert("cyan-900", "#164e63");
236    m.insert("cyan-950", "#083344");
237
238    // Sky
239    m.insert("sky-50", "#f0f9ff");
240    m.insert("sky-100", "#e0f2fe");
241    m.insert("sky-200", "#bae6fd");
242    m.insert("sky-300", "#7dd3fc");
243    m.insert("sky-400", "#38bdf8");
244    m.insert("sky-500", "#0ea5e9");
245    m.insert("sky-600", "#0284c7");
246    m.insert("sky-700", "#0369a1");
247    m.insert("sky-800", "#075985");
248    m.insert("sky-900", "#0c4a6e");
249    m.insert("sky-950", "#082f49");
250
251    // Violet
252    m.insert("violet-50", "#f5f3ff");
253    m.insert("violet-100", "#ede9fe");
254    m.insert("violet-200", "#ddd6fe");
255    m.insert("violet-300", "#c4b5fd");
256    m.insert("violet-400", "#a78bfa");
257    m.insert("violet-500", "#8b5cf6");
258    m.insert("violet-600", "#7c3aed");
259    m.insert("violet-700", "#6d28d9");
260    m.insert("violet-800", "#5b21b6");
261    m.insert("violet-900", "#4c1d95");
262    m.insert("violet-950", "#2e1065");
263
264    // Fuchsia
265    m.insert("fuchsia-50", "#fdf4ff");
266    m.insert("fuchsia-100", "#fae8ff");
267    m.insert("fuchsia-200", "#f5d0fe");
268    m.insert("fuchsia-300", "#f0abfc");
269    m.insert("fuchsia-400", "#e879f9");
270    m.insert("fuchsia-500", "#d946ef");
271    m.insert("fuchsia-600", "#c026d3");
272    m.insert("fuchsia-700", "#a21caf");
273    m.insert("fuchsia-800", "#86198f");
274    m.insert("fuchsia-900", "#701a75");
275    m.insert("fuchsia-950", "#4a044e");
276
277    // Stone
278    m.insert("stone-50", "#fafaf9");
279    m.insert("stone-100", "#f5f5f4");
280    m.insert("stone-200", "#e7e5e4");
281    m.insert("stone-300", "#d6d3d1");
282    m.insert("stone-400", "#a8a29e");
283    m.insert("stone-500", "#78716c");
284    m.insert("stone-600", "#57534e");
285    m.insert("stone-700", "#44403c");
286    m.insert("stone-800", "#292524");
287    m.insert("stone-900", "#1c1917");
288    m.insert("stone-950", "#0c0a09");
289
290    // Neutral
291    m.insert("neutral-50", "#fafafa");
292    m.insert("neutral-100", "#f5f5f5");
293    m.insert("neutral-200", "#e5e5e5");
294    m.insert("neutral-300", "#d4d4d4");
295    m.insert("neutral-400", "#a3a3a3");
296    m.insert("neutral-500", "#737373");
297    m.insert("neutral-600", "#525252");
298    m.insert("neutral-700", "#404040");
299    m.insert("neutral-800", "#262626");
300    m.insert("neutral-900", "#171717");
301    m.insert("neutral-950", "#0a0a0a");
302
303    m
304});
305
306fn get_color(name: &str) -> Option<&'static str> {
307    COLORS.get(name).copied()
308}
309
310pub fn parse(utility: &str) -> Option<Vec<CssProperty>> {
311    // Text color: text-blue-500
312    if let Some(color_name) = utility.strip_prefix("text-") {
313        // Skip typography classes like text-xl
314        if !color_name.chars().next().map(|c| c.is_ascii_digit()).unwrap_or(false)
315            && !["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl", "9xl"]
316                .contains(&color_name)
317            && !["left", "center", "right", "justify", "start", "end"].contains(&color_name)
318        {
319            if let Some(color) = get_color(color_name) {
320                return Some(vec![CssProperty::new("color", color)]);
321            }
322        }
323    }
324
325    // Background color: bg-white
326    if let Some(color_name) = utility.strip_prefix("bg-") {
327        if let Some(color) = get_color(color_name) {
328            return Some(vec![CssProperty::new("background-color", color)]);
329        }
330    }
331
332    // Border color: border-gray-300
333    if let Some(color_name) = utility.strip_prefix("border-") {
334        // Skip border width classes like border-2
335        if !color_name.chars().next().map(|c| c.is_ascii_digit()).unwrap_or(false) {
336            if let Some(color) = get_color(color_name) {
337                return Some(vec![CssProperty::new("border-color", color)]);
338            }
339        }
340    }
341
342    // Opacity: opacity-50
343    if let Some(val) = utility.strip_prefix("opacity-") {
344        let opacity = match val {
345            "0" => "0",
346            "5" => "0.05",
347            "10" => "0.1",
348            "15" => "0.15",
349            "20" => "0.2",
350            "25" => "0.25",
351            "30" => "0.3",
352            "35" => "0.35",
353            "40" => "0.4",
354            "45" => "0.45",
355            "50" => "0.5",
356            "55" => "0.55",
357            "60" => "0.6",
358            "65" => "0.65",
359            "70" => "0.7",
360            "75" => "0.75",
361            "80" => "0.8",
362            "85" => "0.85",
363            "90" => "0.9",
364            "95" => "0.95",
365            "100" => "1",
366            _ => return None,
367        };
368        return Some(vec![CssProperty::new("opacity", opacity)]);
369    }
370
371    None
372}
373
374#[cfg(test)]
375mod tests {
376    use super::*;
377
378    #[test]
379    fn test_text_color() {
380        let props = parse("text-blue-500").unwrap();
381        assert_eq!(props[0].property, "color");
382        assert_eq!(props[0].value, "#3b82f6");
383    }
384
385    #[test]
386    fn test_bg_color() {
387        let props = parse("bg-white").unwrap();
388        assert_eq!(props[0].property, "background-color");
389        assert_eq!(props[0].value, "#ffffff");
390    }
391
392    #[test]
393    fn test_border_color() {
394        let props = parse("border-gray-300").unwrap();
395        assert_eq!(props[0].property, "border-color");
396        assert_eq!(props[0].value, "#d1d5db");
397    }
398
399    #[test]
400    fn test_opacity() {
401        let props = parse("opacity-50").unwrap();
402        assert_eq!(props[0].property, "opacity");
403        assert_eq!(props[0].value, "0.5");
404    }
405
406    #[test]
407    fn test_new_colors() {
408        // Cyan
409        let props = parse("text-cyan-500").unwrap();
410        assert_eq!(props[0].value, "#06b6d4");
411
412        // Teal
413        let props = parse("bg-teal-600").unwrap();
414        assert_eq!(props[0].value, "#0d9488");
415
416        // Emerald
417        let props = parse("border-emerald-400").unwrap();
418        assert_eq!(props[0].value, "#34d399");
419
420        // Rose
421        let props = parse("text-rose-500").unwrap();
422        assert_eq!(props[0].value, "#f43f5e");
423
424        // Amber
425        let props = parse("bg-amber-300").unwrap();
426        assert_eq!(props[0].value, "#fcd34d");
427
428        // Sky
429        let props = parse("text-sky-500").unwrap();
430        assert_eq!(props[0].value, "#0ea5e9");
431
432        // Violet
433        let props = parse("bg-violet-600").unwrap();
434        assert_eq!(props[0].value, "#7c3aed");
435
436        // Fuchsia
437        let props = parse("text-fuchsia-500").unwrap();
438        assert_eq!(props[0].value, "#d946ef");
439
440        // Lime
441        let props = parse("bg-lime-400").unwrap();
442        assert_eq!(props[0].value, "#a3e635");
443
444        // Stone
445        let props = parse("text-stone-700").unwrap();
446        assert_eq!(props[0].value, "#44403c");
447
448        // Neutral
449        let props = parse("bg-neutral-800").unwrap();
450        assert_eq!(props[0].value, "#262626");
451    }
452}
hypen_tailwind_parse/colors.rs

hypen_tailwind_parse/
colors.rs
