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

* feat: add chart colors to base colors * fix: format
shadcn-ui · Jul 9, 2024 · f0093d6 · f0093d6
1 parent c1b9554
commit f0093d6
Show file tree

Hide file tree

Showing 20 changed files with 163 additions and 71 deletions.
diff --git 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 />} />

diff --git 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"

diff --git 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
@@ -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>
                 )
               }}

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
@@ -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

diff --git 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 />} />

diff --git 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"

diff --git 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  }"
 }
diff --git 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  }"
 }
diff --git 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  }"
 }