diff --git a/.changeset/red-singers-tan.md b/.changeset/red-singers-tan.md new file mode 100644 index 0000000..921e732 --- /dev/null +++ b/.changeset/red-singers-tan.md @@ -0,0 +1,5 @@ +--- +"@zenml-io/react-component-library": minor +--- + +add new colors diff --git a/src/tailwind/index.ts b/src/tailwind/index.ts index 83d0744..f120541 100644 --- a/src/tailwind/index.ts +++ b/src/tailwind/index.ts @@ -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)", @@ -236,6 +291,71 @@ export const zenmlPlugin = plugin( 100: "hsl(var(--color-blue-100) / )", 50: "hsl(var(--color-blue-050) / )", 25: "hsl(var(--color-blue-025) / )" + }, + teal: { + 900: "hsl(var(--color-teal-900) / )", + 800: "hsl(var(--color-teal-800) / )", + 700: "hsl(var(--color-teal-700) / )", + 600: "hsl(var(--color-teal-600) / )", + 500: "hsl(var(--color-teal-500) / )", + 400: "hsl(var(--color-teal-400) / )", + 300: "hsl(var(--color-teal-300) / )", + 200: "hsl(var(--color-teal-200) / )", + 100: "hsl(var(--color-teal-100) / )", + 50: "hsl(var(--color-teal-050) / )", + 25: "hsl(var(--color-teal-025) / )" + }, + turquoise: { + 900: "hsl(var(--color-turquoise-900) / )", + 800: "hsl(var(--color-turquoise-800) / )", + 700: "hsl(var(--color-turquoise-700) / )", + 600: "hsl(var(--color-turquoise-600) / )", + 500: "hsl(var(--color-turquoise-500) / )", + 400: "hsl(var(--color-turquoise-400) / )", + 300: "hsl(var(--color-turquoise-300) / )", + 200: "hsl(var(--color-turquoise-200) / )", + 100: "hsl(var(--color-turquoise-100) / )", + 50: "hsl(var(--color-turquoise-050) / )", + 25: "hsl(var(--color-turquoise-025) / )" + }, + lime: { + 900: "hsl(var(--color-lime-900) / )", + 800: "hsl(var(--color-lime-800) / )", + 700: "hsl(var(--color-lime-700) / )", + 600: "hsl(var(--color-lime-600) / )", + 500: "hsl(var(--color-lime-500) / )", + 400: "hsl(var(--color-lime-400) / )", + 300: "hsl(var(--color-lime-300) / )", + 200: "hsl(var(--color-lime-200) / )", + 100: "hsl(var(--color-lime-100) / )", + 50: "hsl(var(--color-lime-050) / )", + 25: "hsl(var(--color-lime-025) / )" + }, + magenta: { + 900: "hsl(var(--color-magenta-900) / )", + 800: "hsl(var(--color-magenta-800) / )", + 700: "hsl(var(--color-magenta-700) / )", + 600: "hsl(var(--color-magenta-600) / )", + 500: "hsl(var(--color-magenta-500) / )", + 400: "hsl(var(--color-magenta-400) / )", + 300: "hsl(var(--color-magenta-300) / )", + 200: "hsl(var(--color-magenta-200) / )", + 100: "hsl(var(--color-magenta-100) / )", + 50: "hsl(var(--color-magenta-050) / )", + 25: "hsl(var(--color-magenta-025) / )" + }, + orange: { + 900: "hsl(var(--color-orange-900) / )", + 800: "hsl(var(--color-orange-800) / )", + 700: "hsl(var(--color-orange-700) / )", + 600: "hsl(var(--color-orange-600) / )", + 500: "hsl(var(--color-orange-500) / )", + 400: "hsl(var(--color-orange-400) / )", + 300: "hsl(var(--color-orange-300) / )", + 200: "hsl(var(--color-orange-200) / )", + 100: "hsl(var(--color-orange-100) / )", + 50: "hsl(var(--color-orange-050) / )", + 25: "hsl(var(--color-orange-025) / )" } }, backgroundImage: {