Skip to content

Add new Colors #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Nov 21, 2023
Merged

Add new Colors #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c5644f6
feat: add teal
Cahllagerfeld Nov 21, 2023
a9ae38d
feat: add turquoise
Cahllagerfeld Nov 21, 2023
a1df611
feat: add lime
Cahllagerfeld Nov 21, 2023
f93ad7f
feat: add magenta
Cahllagerfeld Nov 21, 2023
e73d983
feat: add orange
Cahllagerfeld Nov 21, 2023
003c4ee
chore: add changeset
Cahllagerfeld Nov 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/red-singers-tan.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@zenml-io/react-component-library": minor
---

add new colors
120 changes: 120 additions & 0 deletions src/tailwind/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,61 @@ export const zenmlPlugin = plugin(
"--color-blue-100": "208 89% 75%",
"--color-blue-050": "209 90% 84%",
"--color-blue-025": "208 88% 90%",
"--color-teal-900": "180 61% 8%",
"--color-teal-800": "180 59% 14%",
"--color-teal-700": "180 60% 20%",
"--color-teal-600": "180 61% 27%",
"--color-teal-500": "180 60% 34%",
"--color-teal-400": "180 60% 41%",
"--color-teal-300": "180 41% 51%",
"--color-teal-200": "180 42% 60%",
"--color-teal-100": "180 41% 70%",
"--color-teal-050": "180 41% 80%",
"--color-teal-025": "180 41% 88%",
"--color-turquoise-900": "192 57% 9%",
"--color-turquoise-800": "190 57% 15%",
"--color-turquoise-700": "189 58% 22%",
"--color-turquoise-600": "190 58% 30%",
"--color-turquoise-500": "189 57% 37%",
"--color-turquoise-400": "190 58% 44%",
"--color-turquoise-300": "190 46% 54%",
"--color-turquoise-200": "190 46% 63%",
"--color-turquoise-100": "189 45% 72%",
"--color-turquoise-050": "190 45% 81%",
"--color-turquoise-025": "192 46% 89%",
"--color-lime-900": "96 60% 11%",
"--color-lime-800": "96 61% 18%",
"--color-lime-700": "96 60% 27%",
"--color-lime-600": "96 60% 36%",
"--color-lime-500": "96 60% 45%",
"--color-lime-400": "96 72% 54%",
"--color-lime-300": "96 71% 62%",
"--color-lime-200": "96 72% 70%",
"--color-lime-100": "96 71% 77%",
"--color-lime-050": "96 72% 85%",
"--color-lime-025": "96 70% 91%",
"--color-magenta-900": "337 61% 12%",
"--color-magenta-800": "338 61% 20%",
"--color-magenta-700": "338 60% 30%",
"--color-magenta-600": "338 60% 40%",
"--color-magenta-500": "338 60% 50%",
"--color-magenta-400": "338 90% 60%",
"--color-magenta-300": "338 91% 67%",
"--color-magenta-200": "338 90% 73%",
"--color-magenta-100": "338 90% 80%",
"--color-magenta-050": "338 91% 87%",
"--color-magenta-025": "337 90% 92%",
"--color-orange-900": "19 61% 12%",
"--color-orange-800": "19 61% 20%",
"--color-orange-700": "19 60% 30%",
"--color-orange-600": "19 60% 40%",
"--color-orange-500": "19 60% 50%",
"--color-orange-400": "19 90% 60%",
"--color-orange-300": "19 91% 67%",
"--color-orange-200": "19 90% 73%",
"--color-orange-100": "19 90% 80%",
"--color-orange-050": "19 91% 87%",
"--color-orange-025": "19 90% 92%",
"--color-text-primary": "var(--color-primary-900)",
"--color-text-secondary": "var(--color-neutral-500)",
"--color-text-tertiary": "var(--color-neutral-400)",
Expand Down Expand Up @@ -236,6 +291,71 @@ export const zenmlPlugin = plugin(
100: "hsl(var(--color-blue-100) / <alpha-value>)",
50: "hsl(var(--color-blue-050) / <alpha-value>)",
25: "hsl(var(--color-blue-025) / <alpha-value>)"
},
teal: {
900: "hsl(var(--color-teal-900) / <alpha-value>)",
800: "hsl(var(--color-teal-800) / <alpha-value>)",
700: "hsl(var(--color-teal-700) / <alpha-value>)",
600: "hsl(var(--color-teal-600) / <alpha-value>)",
500: "hsl(var(--color-teal-500) / <alpha-value>)",
400: "hsl(var(--color-teal-400) / <alpha-value>)",
300: "hsl(var(--color-teal-300) / <alpha-value>)",
200: "hsl(var(--color-teal-200) / <alpha-value>)",
100: "hsl(var(--color-teal-100) / <alpha-value>)",
50: "hsl(var(--color-teal-050) / <alpha-value>)",
25: "hsl(var(--color-teal-025) / <alpha-value>)"
},
turquoise: {
900: "hsl(var(--color-turquoise-900) / <alpha-value>)",
800: "hsl(var(--color-turquoise-800) / <alpha-value>)",
700: "hsl(var(--color-turquoise-700) / <alpha-value>)",
600: "hsl(var(--color-turquoise-600) / <alpha-value>)",
500: "hsl(var(--color-turquoise-500) / <alpha-value>)",
400: "hsl(var(--color-turquoise-400) / <alpha-value>)",
300: "hsl(var(--color-turquoise-300) / <alpha-value>)",
200: "hsl(var(--color-turquoise-200) / <alpha-value>)",
100: "hsl(var(--color-turquoise-100) / <alpha-value>)",
50: "hsl(var(--color-turquoise-050) / <alpha-value>)",
25: "hsl(var(--color-turquoise-025) / <alpha-value>)"
},
lime: {
900: "hsl(var(--color-lime-900) / <alpha-value>)",
800: "hsl(var(--color-lime-800) / <alpha-value>)",
700: "hsl(var(--color-lime-700) / <alpha-value>)",
600: "hsl(var(--color-lime-600) / <alpha-value>)",
500: "hsl(var(--color-lime-500) / <alpha-value>)",
400: "hsl(var(--color-lime-400) / <alpha-value>)",
300: "hsl(var(--color-lime-300) / <alpha-value>)",
200: "hsl(var(--color-lime-200) / <alpha-value>)",
100: "hsl(var(--color-lime-100) / <alpha-value>)",
50: "hsl(var(--color-lime-050) / <alpha-value>)",
25: "hsl(var(--color-lime-025) / <alpha-value>)"
},
magenta: {
900: "hsl(var(--color-magenta-900) / <alpha-value>)",
800: "hsl(var(--color-magenta-800) / <alpha-value>)",
700: "hsl(var(--color-magenta-700) / <alpha-value>)",
600: "hsl(var(--color-magenta-600) / <alpha-value>)",
500: "hsl(var(--color-magenta-500) / <alpha-value>)",
400: "hsl(var(--color-magenta-400) / <alpha-value>)",
300: "hsl(var(--color-magenta-300) / <alpha-value>)",
200: "hsl(var(--color-magenta-200) / <alpha-value>)",
100: "hsl(var(--color-magenta-100) / <alpha-value>)",
50: "hsl(var(--color-magenta-050) / <alpha-value>)",
25: "hsl(var(--color-magenta-025) / <alpha-value>)"
},
orange: {
900: "hsl(var(--color-orange-900) / <alpha-value>)",
800: "hsl(var(--color-orange-800) / <alpha-value>)",
700: "hsl(var(--color-orange-700) / <alpha-value>)",
600: "hsl(var(--color-orange-600) / <alpha-value>)",
500: "hsl(var(--color-orange-500) / <alpha-value>)",
400: "hsl(var(--color-orange-400) / <alpha-value>)",
300: "hsl(var(--color-orange-300) / <alpha-value>)",
200: "hsl(var(--color-orange-200) / <alpha-value>)",
100: "hsl(var(--color-orange-100) / <alpha-value>)",
50: "hsl(var(--color-orange-050) / <alpha-value>)",
25: "hsl(var(--color-orange-025) / <alpha-value>)"
}
},
backgroundImage: {
Expand Down