feat: add chart colors to base colors (#4228)

* feat: add chart colors to base colors * fix: format
2026-06-11 09:51:40 +00:00 · 2024-07-09 15:29:20 +04:00
parent c1b955444d
commit f0093d6a41
20 changed files with 163 additions and 71 deletions
--- 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() {
      <CardContent className="flex-1 pb-0">
        <ChartContainer
          config={chartConfig}
-          className="mx-auto aspect-square max-h-[250px] pb-0"
+          className="mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground"
        >
          <PieChart>
            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
--- 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]"
        >
          <PieChart>
-            <Pie data={chartData} dataKey="visitors">
-              <LabelList
-                dataKey="visitors"
-                className="fill-background"
-                stroke="none"
-                fontSize={12}
-              />
-            </Pie>
+            <Pie data={chartData} dataKey="visitors" />
            <ChartLegend
              content={<ChartLegendContent nameKey="browser" />}
              className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
--- 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"

--- 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() {
      <CardContent className="flex-1 pb-0">
        <ChartContainer
          config={chartConfig}
-          className="mx-auto aspect-square max-h-[250px]"
+          className="mx-auto aspect-square max-h-[250px] px-0"
        >
          <PieChart>
            <ChartTooltip
@@ -85,10 +85,7 @@ export default function Component() {
                    dominantBaseline={props.dominantBaseline}
                    fill="hsla(var(--foreground))"
                  >
-                    {`${
-                      chartConfig[payload.browser as keyof typeof chartConfig]
-                        ?.label
-                    } (${payload.visitors})`}
+                    {payload.visitors}
                  </text>
                )
              }}
--- 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() {
      <CardContent className="flex-1 pb-0">
        <ChartContainer
          config={chartConfig}
-          className="mx-auto aspect-square max-h-[250px]"
+          className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"
        >
          <PieChart>
            <ChartTooltip
--- a/apps/www/registry/new-york/block/chart-pie-label.tsx
+++ b/apps/www/registry/new-york/block/chart-pie-label.tsx
@@ -64,7 +64,7 @@ export default function Component() {
      <CardContent className="flex-1 pb-0">
        <ChartContainer
          config={chartConfig}
-          className="mx-auto aspect-square max-h-[250px] pb-0"
+          className="mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground"
        >
          <PieChart>
            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
--- 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]"
        >
          <PieChart>
-            <Pie data={chartData} dataKey="visitors">
-              <LabelList
-                dataKey="visitors"
-                className="fill-background"
-                stroke="none"
-                fontSize={12}
-              />
-            </Pie>
+            <Pie data={chartData} dataKey="visitors" />
            <ChartLegend
              content={<ChartLegendContent nameKey="browser" />}
              className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
--- 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  }"
 }
--- 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  }"
 }
--- 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  }"
 }
--- 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  }"
 }
--- 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  }"
 }
--- 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%"
    }
  }
 }
--- 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%"
    }
  }
 }
--- 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%"
    }
  }
 }
--- 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%"
    }
  }
 }
--- 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%"
    }
  }
 }
--- 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
--- 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

--- 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",