Skip to content

Commit 73566b7

Browse files
CahllagerfeldCahllagerfeld
authored
feat: add new colors (#37)
1 parent ca5124c commit 73566b7

File tree

2 files changed

+125
-0
lines changed

2 files changed

+125
-0
lines changed

‎.changeset/red-singers-tan.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@zenml-io/react-component-library": minor
3+
---
4+
5+
add new colors

‎src/tailwind/index.ts‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,61 @@ export const zenmlPlugin = plugin(
7171
"--color-blue-100": "208 89% 75%",
7272
"--color-blue-050": "209 90% 84%",
7373
"--color-blue-025": "208 88% 90%",
74+
"--color-teal-900": "180 61% 8%",
75+
"--color-teal-800": "180 59% 14%",
76+
"--color-teal-700": "180 60% 20%",
77+
"--color-teal-600": "180 61% 27%",
78+
"--color-teal-500": "180 60% 34%",
79+
"--color-teal-400": "180 60% 41%",
80+
"--color-teal-300": "180 41% 51%",
81+
"--color-teal-200": "180 42% 60%",
82+
"--color-teal-100": "180 41% 70%",
83+
"--color-teal-050": "180 41% 80%",
84+
"--color-teal-025": "180 41% 88%",
85+
"--color-turquoise-900": "192 57% 9%",
86+
"--color-turquoise-800": "190 57% 15%",
87+
"--color-turquoise-700": "189 58% 22%",
88+
"--color-turquoise-600": "190 58% 30%",
89+
"--color-turquoise-500": "189 57% 37%",
90+
"--color-turquoise-400": "190 58% 44%",
91+
"--color-turquoise-300": "190 46% 54%",
92+
"--color-turquoise-200": "190 46% 63%",
93+
"--color-turquoise-100": "189 45% 72%",
94+
"--color-turquoise-050": "190 45% 81%",
95+
"--color-turquoise-025": "192 46% 89%",
96+
"--color-lime-900": "96 60% 11%",
97+
"--color-lime-800": "96 61% 18%",
98+
"--color-lime-700": "96 60% 27%",
99+
"--color-lime-600": "96 60% 36%",
100+
"--color-lime-500": "96 60% 45%",
101+
"--color-lime-400": "96 72% 54%",
102+
"--color-lime-300": "96 71% 62%",
103+
"--color-lime-200": "96 72% 70%",
104+
"--color-lime-100": "96 71% 77%",
105+
"--color-lime-050": "96 72% 85%",
106+
"--color-lime-025": "96 70% 91%",
107+
"--color-magenta-900": "337 61% 12%",
108+
"--color-magenta-800": "338 61% 20%",
109+
"--color-magenta-700": "338 60% 30%",
110+
"--color-magenta-600": "338 60% 40%",
111+
"--color-magenta-500": "338 60% 50%",
112+
"--color-magenta-400": "338 90% 60%",
113+
"--color-magenta-300": "338 91% 67%",
114+
"--color-magenta-200": "338 90% 73%",
115+
"--color-magenta-100": "338 90% 80%",
116+
"--color-magenta-050": "338 91% 87%",
117+
"--color-magenta-025": "337 90% 92%",
118+
"--color-orange-900": "19 61% 12%",
119+
"--color-orange-800": "19 61% 20%",
120+
"--color-orange-700": "19 60% 30%",
121+
"--color-orange-600": "19 60% 40%",
122+
"--color-orange-500": "19 60% 50%",
123+
"--color-orange-400": "19 90% 60%",
124+
"--color-orange-300": "19 91% 67%",
125+
"--color-orange-200": "19 90% 73%",
126+
"--color-orange-100": "19 90% 80%",
127+
"--color-orange-050": "19 91% 87%",
128+
"--color-orange-025": "19 90% 92%",
74129
"--color-text-primary": "var(--color-primary-900)",
75130
"--color-text-secondary": "var(--color-neutral-500)",
76131
"--color-text-tertiary": "var(--color-neutral-400)",
@@ -236,6 +291,71 @@ export const zenmlPlugin = plugin(
236291
100: "hsl(var(--color-blue-100) / <alpha-value>)",
237292
50: "hsl(var(--color-blue-050) / <alpha-value>)",
238293
25: "hsl(var(--color-blue-025) / <alpha-value>)"
294+
},
295+
teal: {
296+
900: "hsl(var(--color-teal-900) / <alpha-value>)",
297+
800: "hsl(var(--color-teal-800) / <alpha-value>)",
298+
700: "hsl(var(--color-teal-700) / <alpha-value>)",
299+
600: "hsl(var(--color-teal-600) / <alpha-value>)",
300+
500: "hsl(var(--color-teal-500) / <alpha-value>)",
301+
400: "hsl(var(--color-teal-400) / <alpha-value>)",
302+
300: "hsl(var(--color-teal-300) / <alpha-value>)",
303+
200: "hsl(var(--color-teal-200) / <alpha-value>)",
304+
100: "hsl(var(--color-teal-100) / <alpha-value>)",
305+
50: "hsl(var(--color-teal-050) / <alpha-value>)",
306+
25: "hsl(var(--color-teal-025) / <alpha-value>)"
307+
},
308+
turquoise: {
309+
900: "hsl(var(--color-turquoise-900) / <alpha-value>)",
310+
800: "hsl(var(--color-turquoise-800) / <alpha-value>)",
311+
700: "hsl(var(--color-turquoise-700) / <alpha-value>)",
312+
600: "hsl(var(--color-turquoise-600) / <alpha-value>)",
313+
500: "hsl(var(--color-turquoise-500) / <alpha-value>)",
314+
400: "hsl(var(--color-turquoise-400) / <alpha-value>)",
315+
300: "hsl(var(--color-turquoise-300) / <alpha-value>)",
316+
200: "hsl(var(--color-turquoise-200) / <alpha-value>)",
317+
100: "hsl(var(--color-turquoise-100) / <alpha-value>)",
318+
50: "hsl(var(--color-turquoise-050) / <alpha-value>)",
319+
25: "hsl(var(--color-turquoise-025) / <alpha-value>)"
320+
},
321+
lime: {
322+
900: "hsl(var(--color-lime-900) / <alpha-value>)",
323+
800: "hsl(var(--color-lime-800) / <alpha-value>)",
324+
700: "hsl(var(--color-lime-700) / <alpha-value>)",
325+
600: "hsl(var(--color-lime-600) / <alpha-value>)",
326+
500: "hsl(var(--color-lime-500) / <alpha-value>)",
327+
400: "hsl(var(--color-lime-400) / <alpha-value>)",
328+
300: "hsl(var(--color-lime-300) / <alpha-value>)",
329+
200: "hsl(var(--color-lime-200) / <alpha-value>)",
330+
100: "hsl(var(--color-lime-100) / <alpha-value>)",
331+
50: "hsl(var(--color-lime-050) / <alpha-value>)",
332+
25: "hsl(var(--color-lime-025) / <alpha-value>)"
333+
},
334+
magenta: {
335+
900: "hsl(var(--color-magenta-900) / <alpha-value>)",
336+
800: "hsl(var(--color-magenta-800) / <alpha-value>)",
337+
700: "hsl(var(--color-magenta-700) / <alpha-value>)",
338+
600: "hsl(var(--color-magenta-600) / <alpha-value>)",
339+
500: "hsl(var(--color-magenta-500) / <alpha-value>)",
340+
400: "hsl(var(--color-magenta-400) / <alpha-value>)",
341+
300: "hsl(var(--color-magenta-300) / <alpha-value>)",
342+
200: "hsl(var(--color-magenta-200) / <alpha-value>)",
343+
100: "hsl(var(--color-magenta-100) / <alpha-value>)",
344+
50: "hsl(var(--color-magenta-050) / <alpha-value>)",
345+
25: "hsl(var(--color-magenta-025) / <alpha-value>)"
346+
},
347+
orange: {
348+
900: "hsl(var(--color-orange-900) / <alpha-value>)",
349+
800: "hsl(var(--color-orange-800) / <alpha-value>)",
350+
700: "hsl(var(--color-orange-700) / <alpha-value>)",
351+
600: "hsl(var(--color-orange-600) / <alpha-value>)",
352+
500: "hsl(var(--color-orange-500) / <alpha-value>)",
353+
400: "hsl(var(--color-orange-400) / <alpha-value>)",
354+
300: "hsl(var(--color-orange-300) / <alpha-value>)",
355+
200: "hsl(var(--color-orange-200) / <alpha-value>)",
356+
100: "hsl(var(--color-orange-100) / <alpha-value>)",
357+
50: "hsl(var(--color-orange-050) / <alpha-value>)",
358+
25: "hsl(var(--color-orange-025) / <alpha-value>)"
239359
}
240360
},
241361
backgroundImage: {

0 commit comments

Comments
 (0)