From f0093d6a41107ddad743775a6fbf6b85aae86aa0 Mon Sep 17 00:00:00 2001 From: shadcn Date: Tue, 9 Jul 2024 15:29:20 +0400 Subject: [PATCH] feat: add chart colors to base colors (#4228) * feat: add chart colors to base colors * fix: format --- .../default/block/chart-pie-label.tsx | 2 +- .../default/block/chart-pie-legend.tsx | 11 ++----- .../new-york/block/chart-bar-interactive.tsx | 4 +-- .../new-york/block/chart-pie-label-custom.tsx | 7 ++-- .../new-york/block/chart-pie-label-list.tsx | 2 +- .../new-york/block/chart-pie-label.tsx | 2 +- .../new-york/block/chart-pie-legend.tsx | 11 ++----- apps/www/public/registry/colors/gray.json | 16 +++++++-- apps/www/public/registry/colors/neutral.json | 16 +++++++-- apps/www/public/registry/colors/slate.json | 16 +++++++-- apps/www/public/registry/colors/stone.json | 16 +++++++-- apps/www/public/registry/colors/zinc.json | 16 +++++++-- apps/www/public/registry/themes/gray.json | 14 ++++++-- apps/www/public/registry/themes/neutral.json | 14 ++++++-- apps/www/public/registry/themes/slate.json | 14 ++++++-- apps/www/public/registry/themes/stone.json | 14 ++++++-- apps/www/public/registry/themes/zinc.json | 14 ++++++-- apps/www/registry/colors.ts | 10 ++++++ apps/www/scripts/build-registry.mts | 33 +++++++++---------- package.json | 2 +- 20 files changed, 163 insertions(+), 71 deletions(-) diff --git a/apps/www/__registry__/default/block/chart-pie-label.tsx b/apps/www/__registry__/default/block/chart-pie-label.tsx index 54914a2547..26c294cd65 100644 --- a/apps/www/__registry__/default/block/chart-pie-label.tsx +++ b/apps/www/__registry__/default/block/chart-pie-label.tsx @@ -64,7 +64,7 @@ export default function Component() { } /> diff --git a/apps/www/__registry__/default/block/chart-pie-legend.tsx b/apps/www/__registry__/default/block/chart-pie-legend.tsx index aca8cac60f..3e3d7534a8 100644 --- a/apps/www/__registry__/default/block/chart-pie-legend.tsx +++ b/apps/www/__registry__/default/block/chart-pie-legend.tsx @@ -1,6 +1,6 @@ "use client" -import { LabelList, Pie, PieChart } from "recharts" +import { Pie, PieChart } from "recharts" import { Card, @@ -65,14 +65,7 @@ export default function Component() { className="mx-auto aspect-square max-h-[300px]" > - - - + } className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center" diff --git a/apps/www/__registry__/new-york/block/chart-bar-interactive.tsx b/apps/www/__registry__/new-york/block/chart-bar-interactive.tsx index 84bcc6a28c..f988ef5e11 100644 --- a/apps/www/__registry__/new-york/block/chart-bar-interactive.tsx +++ b/apps/www/__registry__/new-york/block/chart-bar-interactive.tsx @@ -9,13 +9,13 @@ import { CardDescription, CardHeader, CardTitle, -} from "@/registry/default/ui/card" +} from "@/registry/new-york/ui/card" import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, -} from "@/registry/default/ui/chart" +} from "@/registry/new-york/ui/chart" export const description = "An interactive bar chart" diff --git a/apps/www/__registry__/new-york/block/chart-pie-label-custom.tsx b/apps/www/__registry__/new-york/block/chart-pie-label-custom.tsx index 5d31328d3a..ff956ebf9d 100644 --- a/apps/www/__registry__/new-york/block/chart-pie-label-custom.tsx +++ b/apps/www/__registry__/new-york/block/chart-pie-label-custom.tsx @@ -64,7 +64,7 @@ export default function Component() { - {`${ - chartConfig[payload.browser as keyof typeof chartConfig] - ?.label - } (${payload.visitors})`} + {payload.visitors} ) }} diff --git a/apps/www/__registry__/new-york/block/chart-pie-label-list.tsx b/apps/www/__registry__/new-york/block/chart-pie-label-list.tsx index 8c0841d27a..0bc77dfde0 100644 --- a/apps/www/__registry__/new-york/block/chart-pie-label-list.tsx +++ b/apps/www/__registry__/new-york/block/chart-pie-label-list.tsx @@ -64,7 +64,7 @@ export default function Component() { } /> diff --git a/apps/www/__registry__/new-york/block/chart-pie-legend.tsx b/apps/www/__registry__/new-york/block/chart-pie-legend.tsx index c5a280bfb0..d75f89eacf 100644 --- a/apps/www/__registry__/new-york/block/chart-pie-legend.tsx +++ b/apps/www/__registry__/new-york/block/chart-pie-legend.tsx @@ -1,6 +1,6 @@ "use client" -import { LabelList, Pie, PieChart } from "recharts" +import { Pie, PieChart } from "recharts" import { Card, @@ -65,14 +65,7 @@ export default function Component() { className="mx-auto aspect-square max-h-[300px]" > - - - + } className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center" diff --git a/apps/www/public/registry/colors/gray.json b/apps/www/public/registry/colors/gray.json index fc4b04722f..e3cdfcc0a4 100644 --- a/apps/www/public/registry/colors/gray.json +++ b/apps/www/public/registry/colors/gray.json @@ -63,7 +63,12 @@ "destructive-foreground": "210 20% 98%", "border": "220 13% 91%", "input": "220 13% 91%", - "ring": "224 71.4% 4.1%" + "ring": "224 71.4% 4.1%", + "chart-1": "12 76% 61%", + "chart-2": "173 58% 39%", + "chart-3": "197 37% 24%", + "chart-4": "43 74% 66%", + "chart-5": "27 87% 67%" }, "dark": { "background": "224 71.4% 4.1%", @@ -84,9 +89,14 @@ "destructive-foreground": "210 20% 98%", "border": "215 27.9% 16.9%", "input": "215 27.9% 16.9%", - "ring": "216 12.2% 83.9%" + "ring": "216 12.2% 83.9%", + "chart-1": "220 70% 50%", + "chart-2": "160 60% 45%", + "chart-3": "30 80% 55%", + "chart-4": "280 65% 60%", + "chart-5": "340 75% 55%" } }, "inlineColorsTemplate": "@tailwind base;\n @tailwind components;\n @tailwind utilities;\n ", - "cssVarsTemplate": "@tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n @layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 224 71.4% 4.1%;\n\n --card: 0 0% 100%;\n --card-foreground: 224 71.4% 4.1%;\n\n --popover: 0 0% 100%;\n --popover-foreground: 224 71.4% 4.1%;\n\n --primary: 220.9 39.3% 11%;\n --primary-foreground: 210 20% 98%;\n\n --secondary: 220 14.3% 95.9%;\n --secondary-foreground: 220.9 39.3% 11%;\n\n --muted: 220 14.3% 95.9%;\n --muted-foreground: 220 8.9% 46.1%;\n\n --accent: 220 14.3% 95.9%;\n --accent-foreground: 220.9 39.3% 11%;\n\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 20% 98%;\n\n --border: 220 13% 91%;\n --input: 220 13% 91%;\n --ring: 224 71.4% 4.1%;\n\n --radius: 0.5rem;\n }\n\n .dark {\n --background: 224 71.4% 4.1%;\n --foreground: 210 20% 98%;\n\n --card: 224 71.4% 4.1%;\n --card-foreground: 210 20% 98%;\n\n --popover: 224 71.4% 4.1%;\n --popover-foreground: 210 20% 98%;\n\n --primary: 210 20% 98%;\n --primary-foreground: 220.9 39.3% 11%;\n\n --secondary: 215 27.9% 16.9%;\n --secondary-foreground: 210 20% 98%;\n\n --muted: 215 27.9% 16.9%;\n --muted-foreground: 217.9 10.6% 64.9%;\n\n --accent: 215 27.9% 16.9%;\n --accent-foreground: 210 20% 98%;\n\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 20% 98%;\n\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --ring: 216 12.2% 83.9%;\n }\n }\n\n @layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n }" + "cssVarsTemplate": "@tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n @layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 224 71.4% 4.1%;\n --card: 0 0% 100%;\n --card-foreground: 224 71.4% 4.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 224 71.4% 4.1%;\n --primary: 220.9 39.3% 11%;\n --primary-foreground: 210 20% 98%;\n --secondary: 220 14.3% 95.9%;\n --secondary-foreground: 220.9 39.3% 11%;\n --muted: 220 14.3% 95.9%;\n --muted-foreground: 220 8.9% 46.1%;\n --accent: 220 14.3% 95.9%;\n --accent-foreground: 220.9 39.3% 11%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 20% 98%;\n --border: 220 13% 91%;\n --input: 220 13% 91%;\n --ring: 224 71.4% 4.1%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n\n .dark {\n --background: 224 71.4% 4.1%;\n --foreground: 210 20% 98%;\n --card: 224 71.4% 4.1%;\n --card-foreground: 210 20% 98%;\n --popover: 224 71.4% 4.1%;\n --popover-foreground: 210 20% 98%;\n --primary: 210 20% 98%;\n --primary-foreground: 220.9 39.3% 11%;\n --secondary: 215 27.9% 16.9%;\n --secondary-foreground: 210 20% 98%;\n --muted: 215 27.9% 16.9%;\n --muted-foreground: 217.9 10.6% 64.9%;\n --accent: 215 27.9% 16.9%;\n --accent-foreground: 210 20% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 20% 98%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --ring: 216 12.2% 83.9%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n }\n\n @layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n }" } \ No newline at end of file diff --git a/apps/www/public/registry/colors/neutral.json b/apps/www/public/registry/colors/neutral.json index e3168a69f9..11e734d3df 100644 --- a/apps/www/public/registry/colors/neutral.json +++ b/apps/www/public/registry/colors/neutral.json @@ -63,7 +63,12 @@ "destructive-foreground": "0 0% 98%", "border": "0 0% 89.8%", "input": "0 0% 89.8%", - "ring": "0 0% 3.9%" + "ring": "0 0% 3.9%", + "chart-1": "12 76% 61%", + "chart-2": "173 58% 39%", + "chart-3": "197 37% 24%", + "chart-4": "43 74% 66%", + "chart-5": "27 87% 67%" }, "dark": { "background": "0 0% 3.9%", @@ -84,9 +89,14 @@ "destructive-foreground": "0 0% 98%", "border": "0 0% 14.9%", "input": "0 0% 14.9%", - "ring": "0 0% 83.1%" + "ring": "0 0% 83.1%", + "chart-1": "220 70% 50%", + "chart-2": "160 60% 45%", + "chart-3": "30 80% 55%", + "chart-4": "280 65% 60%", + "chart-5": "340 75% 55%" } }, "inlineColorsTemplate": "@tailwind base;\n @tailwind components;\n @tailwind utilities;\n ", - "cssVarsTemplate": "@tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n @layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 0 0% 3.9%;\n\n --card: 0 0% 100%;\n --card-foreground: 0 0% 3.9%;\n\n --popover: 0 0% 100%;\n --popover-foreground: 0 0% 3.9%;\n\n --primary: 0 0% 9%;\n --primary-foreground: 0 0% 98%;\n\n --secondary: 0 0% 96.1%;\n --secondary-foreground: 0 0% 9%;\n\n --muted: 0 0% 96.1%;\n --muted-foreground: 0 0% 45.1%;\n\n --accent: 0 0% 96.1%;\n --accent-foreground: 0 0% 9%;\n\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n\n --border: 0 0% 89.8%;\n --input: 0 0% 89.8%;\n --ring: 0 0% 3.9%;\n\n --radius: 0.5rem;\n }\n\n .dark {\n --background: 0 0% 3.9%;\n --foreground: 0 0% 98%;\n\n --card: 0 0% 3.9%;\n --card-foreground: 0 0% 98%;\n\n --popover: 0 0% 3.9%;\n --popover-foreground: 0 0% 98%;\n\n --primary: 0 0% 98%;\n --primary-foreground: 0 0% 9%;\n\n --secondary: 0 0% 14.9%;\n --secondary-foreground: 0 0% 98%;\n\n --muted: 0 0% 14.9%;\n --muted-foreground: 0 0% 63.9%;\n\n --accent: 0 0% 14.9%;\n --accent-foreground: 0 0% 98%;\n\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n\n --border: 0 0% 14.9%;\n --input: 0 0% 14.9%;\n --ring: 0 0% 83.1%;\n }\n }\n\n @layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n }" + "cssVarsTemplate": "@tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n @layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 0 0% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 0 0% 3.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 0 0% 3.9%;\n --primary: 0 0% 9%;\n --primary-foreground: 0 0% 98%;\n --secondary: 0 0% 96.1%;\n --secondary-foreground: 0 0% 9%;\n --muted: 0 0% 96.1%;\n --muted-foreground: 0 0% 45.1%;\n --accent: 0 0% 96.1%;\n --accent-foreground: 0 0% 9%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --border: 0 0% 89.8%;\n --input: 0 0% 89.8%;\n --ring: 0 0% 3.9%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n\n .dark {\n --background: 0 0% 3.9%;\n --foreground: 0 0% 98%;\n --card: 0 0% 3.9%;\n --card-foreground: 0 0% 98%;\n --popover: 0 0% 3.9%;\n --popover-foreground: 0 0% 98%;\n --primary: 0 0% 98%;\n --primary-foreground: 0 0% 9%;\n --secondary: 0 0% 14.9%;\n --secondary-foreground: 0 0% 98%;\n --muted: 0 0% 14.9%;\n --muted-foreground: 0 0% 63.9%;\n --accent: 0 0% 14.9%;\n --accent-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n --border: 0 0% 14.9%;\n --input: 0 0% 14.9%;\n --ring: 0 0% 83.1%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n }\n\n @layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n }" } \ No newline at end of file diff --git a/apps/www/public/registry/colors/slate.json b/apps/www/public/registry/colors/slate.json index 2fe1bb19bd..2d8aa51ede 100644 --- a/apps/www/public/registry/colors/slate.json +++ b/apps/www/public/registry/colors/slate.json @@ -63,7 +63,12 @@ "destructive-foreground": "210 40% 98%", "border": "214.3 31.8% 91.4%", "input": "214.3 31.8% 91.4%", - "ring": "222.2 84% 4.9%" + "ring": "222.2 84% 4.9%", + "chart-1": "12 76% 61%", + "chart-2": "173 58% 39%", + "chart-3": "197 37% 24%", + "chart-4": "43 74% 66%", + "chart-5": "27 87% 67%" }, "dark": { "background": "222.2 84% 4.9%", @@ -84,9 +89,14 @@ "destructive-foreground": "210 40% 98%", "border": "217.2 32.6% 17.5%", "input": "217.2 32.6% 17.5%", - "ring": "212.7 26.8% 83.9%" + "ring": "212.7 26.8% 83.9%", + "chart-1": "220 70% 50%", + "chart-2": "160 60% 45%", + "chart-3": "30 80% 55%", + "chart-4": "280 65% 60%", + "chart-5": "340 75% 55%" } }, "inlineColorsTemplate": "@tailwind base;\n @tailwind components;\n @tailwind utilities;\n ", - "cssVarsTemplate": "@tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n @layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n\n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n\n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n\n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n\n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n\n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 222.2 84% 4.9%;\n\n --radius: 0.5rem;\n }\n\n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n\n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n\n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n\n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n\n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n\n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n\n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n\n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n --ring: 212.7 26.8% 83.9%;\n }\n }\n\n @layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n }" + "cssVarsTemplate": "@tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n @layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 222.2 84% 4.9%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n\n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n --ring: 212.7 26.8% 83.9%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n }\n\n @layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n }" } \ No newline at end of file diff --git a/apps/www/public/registry/colors/stone.json b/apps/www/public/registry/colors/stone.json index 3840256c6b..fa2e41517c 100644 --- a/apps/www/public/registry/colors/stone.json +++ b/apps/www/public/registry/colors/stone.json @@ -63,7 +63,12 @@ "destructive-foreground": "60 9.1% 97.8%", "border": "20 5.9% 90%", "input": "20 5.9% 90%", - "ring": "20 14.3% 4.1%" + "ring": "20 14.3% 4.1%", + "chart-1": "12 76% 61%", + "chart-2": "173 58% 39%", + "chart-3": "197 37% 24%", + "chart-4": "43 74% 66%", + "chart-5": "27 87% 67%" }, "dark": { "background": "20 14.3% 4.1%", @@ -84,9 +89,14 @@ "destructive-foreground": "60 9.1% 97.8%", "border": "12 6.5% 15.1%", "input": "12 6.5% 15.1%", - "ring": "24 5.7% 82.9%" + "ring": "24 5.7% 82.9%", + "chart-1": "220 70% 50%", + "chart-2": "160 60% 45%", + "chart-3": "30 80% 55%", + "chart-4": "280 65% 60%", + "chart-5": "340 75% 55%" } }, "inlineColorsTemplate": "@tailwind base;\n @tailwind components;\n @tailwind utilities;\n ", - "cssVarsTemplate": "@tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n @layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 20 14.3% 4.1%;\n\n --card: 0 0% 100%;\n --card-foreground: 20 14.3% 4.1%;\n\n --popover: 0 0% 100%;\n --popover-foreground: 20 14.3% 4.1%;\n\n --primary: 24 9.8% 10%;\n --primary-foreground: 60 9.1% 97.8%;\n\n --secondary: 60 4.8% 95.9%;\n --secondary-foreground: 24 9.8% 10%;\n\n --muted: 60 4.8% 95.9%;\n --muted-foreground: 25 5.3% 44.7%;\n\n --accent: 60 4.8% 95.9%;\n --accent-foreground: 24 9.8% 10%;\n\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 60 9.1% 97.8%;\n\n --border: 20 5.9% 90%;\n --input: 20 5.9% 90%;\n --ring: 20 14.3% 4.1%;\n\n --radius: 0.5rem;\n }\n\n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 60 9.1% 97.8%;\n\n --card: 20 14.3% 4.1%;\n --card-foreground: 60 9.1% 97.8%;\n\n --popover: 20 14.3% 4.1%;\n --popover-foreground: 60 9.1% 97.8%;\n\n --primary: 60 9.1% 97.8%;\n --primary-foreground: 24 9.8% 10%;\n\n --secondary: 12 6.5% 15.1%;\n --secondary-foreground: 60 9.1% 97.8%;\n\n --muted: 12 6.5% 15.1%;\n --muted-foreground: 24 5.4% 63.9%;\n\n --accent: 12 6.5% 15.1%;\n --accent-foreground: 60 9.1% 97.8%;\n\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 60 9.1% 97.8%;\n\n --border: 12 6.5% 15.1%;\n --input: 12 6.5% 15.1%;\n --ring: 24 5.7% 82.9%;\n }\n }\n\n @layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n }" + "cssVarsTemplate": "@tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n @layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 20 14.3% 4.1%;\n --card: 0 0% 100%;\n --card-foreground: 20 14.3% 4.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 20 14.3% 4.1%;\n --primary: 24 9.8% 10%;\n --primary-foreground: 60 9.1% 97.8%;\n --secondary: 60 4.8% 95.9%;\n --secondary-foreground: 24 9.8% 10%;\n --muted: 60 4.8% 95.9%;\n --muted-foreground: 25 5.3% 44.7%;\n --accent: 60 4.8% 95.9%;\n --accent-foreground: 24 9.8% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 60 9.1% 97.8%;\n --border: 20 5.9% 90%;\n --input: 20 5.9% 90%;\n --ring: 20 14.3% 4.1%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n\n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 60 9.1% 97.8%;\n --card: 20 14.3% 4.1%;\n --card-foreground: 60 9.1% 97.8%;\n --popover: 20 14.3% 4.1%;\n --popover-foreground: 60 9.1% 97.8%;\n --primary: 60 9.1% 97.8%;\n --primary-foreground: 24 9.8% 10%;\n --secondary: 12 6.5% 15.1%;\n --secondary-foreground: 60 9.1% 97.8%;\n --muted: 12 6.5% 15.1%;\n --muted-foreground: 24 5.4% 63.9%;\n --accent: 12 6.5% 15.1%;\n --accent-foreground: 60 9.1% 97.8%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 60 9.1% 97.8%;\n --border: 12 6.5% 15.1%;\n --input: 12 6.5% 15.1%;\n --ring: 24 5.7% 82.9%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n }\n\n @layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n }" } \ No newline at end of file diff --git a/apps/www/public/registry/colors/zinc.json b/apps/www/public/registry/colors/zinc.json index e4bb79d157..e8dd46385a 100644 --- a/apps/www/public/registry/colors/zinc.json +++ b/apps/www/public/registry/colors/zinc.json @@ -63,7 +63,12 @@ "destructive-foreground": "0 0% 98%", "border": "240 5.9% 90%", "input": "240 5.9% 90%", - "ring": "240 10% 3.9%" + "ring": "240 10% 3.9%", + "chart-1": "12 76% 61%", + "chart-2": "173 58% 39%", + "chart-3": "197 37% 24%", + "chart-4": "43 74% 66%", + "chart-5": "27 87% 67%" }, "dark": { "background": "240 10% 3.9%", @@ -84,9 +89,14 @@ "destructive-foreground": "0 0% 98%", "border": "240 3.7% 15.9%", "input": "240 3.7% 15.9%", - "ring": "240 4.9% 83.9%" + "ring": "240 4.9% 83.9%", + "chart-1": "220 70% 50%", + "chart-2": "160 60% 45%", + "chart-3": "30 80% 55%", + "chart-4": "280 65% 60%", + "chart-5": "340 75% 55%" } }, "inlineColorsTemplate": "@tailwind base;\n @tailwind components;\n @tailwind utilities;\n ", - "cssVarsTemplate": "@tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n @layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n\n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n\n --primary: 240 5.9% 10%;\n --primary-foreground: 0 0% 98%;\n\n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n\n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n\n --accent: 240 4.8% 95.9%;\n --accent-foreground: 240 5.9% 10%;\n\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n\n --border: 240 5.9% 90%;\n --input: 240 5.9% 90%;\n --ring: 240 10% 3.9%;\n\n --radius: 0.5rem;\n }\n\n .dark {\n --background: 240 10% 3.9%;\n --foreground: 0 0% 98%;\n\n --card: 240 10% 3.9%;\n --card-foreground: 0 0% 98%;\n\n --popover: 240 10% 3.9%;\n --popover-foreground: 0 0% 98%;\n\n --primary: 0 0% 98%;\n --primary-foreground: 240 5.9% 10%;\n\n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n\n --muted: 240 3.7% 15.9%;\n --muted-foreground: 240 5% 64.9%;\n\n --accent: 240 3.7% 15.9%;\n --accent-foreground: 0 0% 98%;\n\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n\n --border: 240 3.7% 15.9%;\n --input: 240 3.7% 15.9%;\n --ring: 240 4.9% 83.9%;\n }\n }\n\n @layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n }" + "cssVarsTemplate": "@tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n @layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n --primary: 240 5.9% 10%;\n --primary-foreground: 0 0% 98%;\n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n --accent: 240 4.8% 95.9%;\n --accent-foreground: 240 5.9% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --border: 240 5.9% 90%;\n --input: 240 5.9% 90%;\n --ring: 240 10% 3.9%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n\n .dark {\n --background: 240 10% 3.9%;\n --foreground: 0 0% 98%;\n --card: 240 10% 3.9%;\n --card-foreground: 0 0% 98%;\n --popover: 240 10% 3.9%;\n --popover-foreground: 0 0% 98%;\n --primary: 0 0% 98%;\n --primary-foreground: 240 5.9% 10%;\n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n --muted: 240 3.7% 15.9%;\n --muted-foreground: 240 5% 64.9%;\n --accent: 240 3.7% 15.9%;\n --accent-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n --border: 240 3.7% 15.9%;\n --input: 240 3.7% 15.9%;\n --ring: 240 4.9% 83.9%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n }\n\n @layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n }" } \ No newline at end of file diff --git a/apps/www/public/registry/themes/gray.json b/apps/www/public/registry/themes/gray.json index 81742502ab..a7f4d7498d 100644 --- a/apps/www/public/registry/themes/gray.json +++ b/apps/www/public/registry/themes/gray.json @@ -21,7 +21,12 @@ "destructive-foreground": "210 20% 98%", "border": "220 13% 91%", "input": "220 13% 91%", - "ring": "224 71.4% 4.1%" + "ring": "224 71.4% 4.1%", + "chart-1": "12 76% 61%", + "chart-2": "173 58% 39%", + "chart-3": "197 37% 24%", + "chart-4": "43 74% 66%", + "chart-5": "27 87% 67%" }, "dark": { "background": "224 71.4% 4.1%", @@ -42,7 +47,12 @@ "destructive-foreground": "210 20% 98%", "border": "215 27.9% 16.9%", "input": "215 27.9% 16.9%", - "ring": "216 12.2% 83.9%" + "ring": "216 12.2% 83.9%", + "chart-1": "220 70% 50%", + "chart-2": "160 60% 45%", + "chart-3": "30 80% 55%", + "chart-4": "280 65% 60%", + "chart-5": "340 75% 55%" } } } \ No newline at end of file diff --git a/apps/www/public/registry/themes/neutral.json b/apps/www/public/registry/themes/neutral.json index e00dec7f4a..775f929bc6 100644 --- a/apps/www/public/registry/themes/neutral.json +++ b/apps/www/public/registry/themes/neutral.json @@ -21,7 +21,12 @@ "destructive-foreground": "0 0% 98%", "border": "0 0% 89.8%", "input": "0 0% 89.8%", - "ring": "0 0% 3.9%" + "ring": "0 0% 3.9%", + "chart-1": "12 76% 61%", + "chart-2": "173 58% 39%", + "chart-3": "197 37% 24%", + "chart-4": "43 74% 66%", + "chart-5": "27 87% 67%" }, "dark": { "background": "0 0% 3.9%", @@ -42,7 +47,12 @@ "destructive-foreground": "0 0% 98%", "border": "0 0% 14.9%", "input": "0 0% 14.9%", - "ring": "0 0% 83.1%" + "ring": "0 0% 83.1%", + "chart-1": "220 70% 50%", + "chart-2": "160 60% 45%", + "chart-3": "30 80% 55%", + "chart-4": "280 65% 60%", + "chart-5": "340 75% 55%" } } } \ No newline at end of file diff --git a/apps/www/public/registry/themes/slate.json b/apps/www/public/registry/themes/slate.json index 7c72a9d6db..17db98cb27 100644 --- a/apps/www/public/registry/themes/slate.json +++ b/apps/www/public/registry/themes/slate.json @@ -21,7 +21,12 @@ "destructive-foreground": "210 40% 98%", "border": "214.3 31.8% 91.4%", "input": "214.3 31.8% 91.4%", - "ring": "222.2 84% 4.9%" + "ring": "222.2 84% 4.9%", + "chart-1": "12 76% 61%", + "chart-2": "173 58% 39%", + "chart-3": "197 37% 24%", + "chart-4": "43 74% 66%", + "chart-5": "27 87% 67%" }, "dark": { "background": "222.2 84% 4.9%", @@ -42,7 +47,12 @@ "destructive-foreground": "210 40% 98%", "border": "217.2 32.6% 17.5%", "input": "217.2 32.6% 17.5%", - "ring": "212.7 26.8% 83.9%" + "ring": "212.7 26.8% 83.9%", + "chart-1": "220 70% 50%", + "chart-2": "160 60% 45%", + "chart-3": "30 80% 55%", + "chart-4": "280 65% 60%", + "chart-5": "340 75% 55%" } } } \ No newline at end of file diff --git a/apps/www/public/registry/themes/stone.json b/apps/www/public/registry/themes/stone.json index 8ff9ab5cad..9b2babe0b2 100644 --- a/apps/www/public/registry/themes/stone.json +++ b/apps/www/public/registry/themes/stone.json @@ -21,7 +21,12 @@ "destructive-foreground": "60 9.1% 97.8%", "border": "20 5.9% 90%", "input": "20 5.9% 90%", - "ring": "20 14.3% 4.1%" + "ring": "20 14.3% 4.1%", + "chart-1": "12 76% 61%", + "chart-2": "173 58% 39%", + "chart-3": "197 37% 24%", + "chart-4": "43 74% 66%", + "chart-5": "27 87% 67%" }, "dark": { "background": "20 14.3% 4.1%", @@ -42,7 +47,12 @@ "destructive-foreground": "60 9.1% 97.8%", "border": "12 6.5% 15.1%", "input": "12 6.5% 15.1%", - "ring": "24 5.7% 82.9%" + "ring": "24 5.7% 82.9%", + "chart-1": "220 70% 50%", + "chart-2": "160 60% 45%", + "chart-3": "30 80% 55%", + "chart-4": "280 65% 60%", + "chart-5": "340 75% 55%" } } } \ No newline at end of file diff --git a/apps/www/public/registry/themes/zinc.json b/apps/www/public/registry/themes/zinc.json index b69bd36288..669fc8d3cd 100644 --- a/apps/www/public/registry/themes/zinc.json +++ b/apps/www/public/registry/themes/zinc.json @@ -21,7 +21,12 @@ "destructive-foreground": "0 0% 98%", "border": "240 5.9% 90%", "input": "240 5.9% 90%", - "ring": "240 10% 3.9%" + "ring": "240 10% 3.9%", + "chart-1": "12 76% 61%", + "chart-2": "173 58% 39%", + "chart-3": "197 37% 24%", + "chart-4": "43 74% 66%", + "chart-5": "27 87% 67%" }, "dark": { "background": "240 10% 3.9%", @@ -42,7 +47,12 @@ "destructive-foreground": "0 0% 98%", "border": "240 3.7% 15.9%", "input": "240 3.7% 15.9%", - "ring": "240 4.9% 83.9%" + "ring": "240 4.9% 83.9%", + "chart-1": "220 70% 50%", + "chart-2": "160 60% 45%", + "chart-3": "30 80% 55%", + "chart-4": "280 65% 60%", + "chart-5": "340 75% 55%" } } } \ No newline at end of file diff --git a/apps/www/registry/colors.ts b/apps/www/registry/colors.ts index f630f34294..314130e8ed 100644 --- a/apps/www/registry/colors.ts +++ b/apps/www/registry/colors.ts @@ -1531,6 +1531,11 @@ export const colorMapping = { border: "{{base}}-200", input: "{{base}}-200", ring: "{{base}}-950", + "chart-1": "12 76% 61%", + "chart-2": "173 58% 39%", + "chart-3": "197 37% 24%", + "chart-4": "43 74% 66%", + "chart-5": "27 87% 67%", }, dark: { background: "{{base}}-950", @@ -1552,5 +1557,10 @@ export const colorMapping = { border: "{{base}}-800", input: "{{base}}-800", ring: "{{base}}-300", + "chart-1": "220 70% 50%", + "chart-2": "160 60% 45%", + "chart-3": "30 80% 55%", + "chart-4": "280 65% 60%", + "chart-5": "340 75% 55%", }, } as const diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts index 5b6fc9e786..fe48f8335a 100644 --- a/apps/www/scripts/build-registry.mts +++ b/apps/www/scripts/build-registry.mts @@ -387,63 +387,56 @@ async function buildThemes() { :root { --background: <%- colors.light["background"] %>; --foreground: <%- colors.light["foreground"] %>; - --card: <%- colors.light["card"] %>; --card-foreground: <%- colors.light["card-foreground"] %>; - --popover: <%- colors.light["popover"] %>; --popover-foreground: <%- colors.light["popover-foreground"] %>; - --primary: <%- colors.light["primary"] %>; --primary-foreground: <%- colors.light["primary-foreground"] %>; - --secondary: <%- colors.light["secondary"] %>; --secondary-foreground: <%- colors.light["secondary-foreground"] %>; - --muted: <%- colors.light["muted"] %>; --muted-foreground: <%- colors.light["muted-foreground"] %>; - --accent: <%- colors.light["accent"] %>; --accent-foreground: <%- colors.light["accent-foreground"] %>; - --destructive: <%- colors.light["destructive"] %>; --destructive-foreground: <%- colors.light["destructive-foreground"] %>; - --border: <%- colors.light["border"] %>; --input: <%- colors.light["input"] %>; --ring: <%- colors.light["ring"] %>; - --radius: 0.5rem; + --chart-1: <%- colors.light["chart-1"] %>; + --chart-2: <%- colors.light["chart-2"] %>; + --chart-3: <%- colors.light["chart-3"] %>; + --chart-4: <%- colors.light["chart-4"] %>; + --chart-5: <%- colors.light["chart-5"] %>; } .dark { --background: <%- colors.dark["background"] %>; --foreground: <%- colors.dark["foreground"] %>; - --card: <%- colors.dark["card"] %>; --card-foreground: <%- colors.dark["card-foreground"] %>; - --popover: <%- colors.dark["popover"] %>; --popover-foreground: <%- colors.dark["popover-foreground"] %>; - --primary: <%- colors.dark["primary"] %>; --primary-foreground: <%- colors.dark["primary-foreground"] %>; - --secondary: <%- colors.dark["secondary"] %>; --secondary-foreground: <%- colors.dark["secondary-foreground"] %>; - --muted: <%- colors.dark["muted"] %>; --muted-foreground: <%- colors.dark["muted-foreground"] %>; - --accent: <%- colors.dark["accent"] %>; --accent-foreground: <%- colors.dark["accent-foreground"] %>; - --destructive: <%- colors.dark["destructive"] %>; --destructive-foreground: <%- colors.dark["destructive-foreground"] %>; - --border: <%- colors.dark["border"] %>; --input: <%- colors.dark["input"] %>; --ring: <%- colors.dark["ring"] %>; + --chart-1: <%- colors.dark["chart-1"] %>; + --chart-2: <%- colors.dark["chart-2"] %>; + --chart-3: <%- colors.dark["chart-3"] %>; + --chart-4: <%- colors.dark["chart-4"] %>; + --chart-5: <%- colors.dark["chart-5"] %>; } } @@ -466,6 +459,12 @@ async function buildThemes() { base["cssVars"][mode] = {} for (const [key, value] of Object.entries(values)) { if (typeof value === "string") { + // Chart colors do not have a 1-to-1 mapping with tailwind colors. + if (key.startsWith("chart-")) { + base["cssVars"][mode][key] = value + continue + } + const resolvedColor = value.replace(/{{base}}-/g, `${baseColor}-`) base["inlineColors"][mode][key] = resolvedColor diff --git a/package.json b/package.json index f3c583060f..8c2b392630 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "scripts": { "build": "turbo run build", "build:cli": "turbo --filter=shadcn-ui build", - "build:registry": "pnpm --filter=www build:registry", + "build:registry": "pnpm --filter=www build:registry && pnpm format:write", "dev": "turbo run dev --parallel", "cli:dev": "turbo --filter=shadcn-ui dev", "cli:start": "pnpm --filter=shadcn-ui start:dev",