Skip to content

Commit f1dd9c6

Browse files
shadcnshadcn
authored
feat: update dark mode colors (#6903)
* feat: update dark colors * feat(v4): update dark mode colors * fix * fix * fix: slate and stone mismatches * feat(v4): update skeleton and switch colors * feat(v4): add dashboard example * fix(v4): update dashboard components * fix: themes * feat: update sonner * feat(v4): update dashboard buttons * fix: test new colors * fix: build commands * feat(v4): more color updates * feat(v4): update theme selector * fix(v4): minor component fixes
1 parent abde549 commit f1dd9c6

File tree

104 files changed

+3005
-501
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

104 files changed

+3005
-501
lines changed

‎apps/v4/app/(app)/forms/page.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@ import { FormsDemo } from "@/components/forms-demo"
22

33
export default function FormsPage() {
44
return (
5-
<div className="flex flex-1 items-center justify-center p-4">
6-
<FormsDemo />
5+
<div className="flex flex-1 flex-col items-center justify-center gap-12 p-4 lg:flex-row">
6+
<div className="">
7+
<FormsDemo />
8+
</div>
9+
<div className="theme-small">
10+
<FormsDemo />
11+
</div>
712
</div>
813
)
914
}

‎apps/v4/app/(app)/layout.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { cookies } from "next/headers"
33
import { AppSidebar } from "@/components/app-sidebar"
44
import { ModeSwitcher } from "@/components/mode-switcher"
55
import { NavHeader } from "@/components/nav-header"
6+
import { ThemeSelector } from "@/components/theme-selector"
67
import { Separator } from "@/registry/new-york-v4/ui/separator"
78
import {
89
SidebarInset,
@@ -31,6 +32,7 @@ export default async function AppLayout({
3132
/>
3233
<NavHeader />
3334
<div className="ml-auto flex items-center gap-2">
35+
<ThemeSelector />
3436
<ModeSwitcher />
3537
</div>
3638
</div>

‎apps/v4/app/(app)/#/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default function LoginPage() {
1717
return (
1818
<div
1919
className={cn(
20-
"bg-muted flex flex-1 flex-col items-center justify-center gap-16 p-6 md:p-10",
20+
"bg-muted dark:bg-background flex flex-1 flex-col items-center justify-center gap-16 p-6 md:p-10",
2121
fontSans.variable,
2222
fontSerif.variable,
2323
fontManrope.variable

‎apps/v4/app/(examples)/dashboard/components/analytics-date-picker.tsx

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import { addDays, format } from "date-fns"
5+
import { CalendarIcon } from "lucide-react"
6+
import { DateRange } from "react-day-picker"
7+
8+
import { cn } from "@/lib/utils"
9+
import { Button } from "@/registry/new-york-v4/ui/button"
10+
import { Calendar } from "@/registry/new-york-v4/ui/calendar"
11+
import {
12+
Popover,
13+
PopoverContent,
14+
PopoverTrigger,
15+
} from "@/registry/new-york-v4/ui/popover"
16+
17+
export function AnalyticsDatePicker() {
18+
const [date, setDate] = React.useState<DateRange | undefined>({
19+
from: new Date(new Date().getFullYear(), 0, 20),
20+
to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),
21+
})
22+
23+
return (
24+
<Popover>
25+
<PopoverTrigger asChild>
26+
<Button
27+
id="date"
28+
variant="outline"
29+
className={cn(
30+
"w-fit justify-start px-2 font-normal",
31+
!date && "text-muted-foreground"
32+
)}
33+
>
34+
<CalendarIcon className="text-muted-foreground" />
35+
{date?.from ? (
36+
date.to ? (
37+
<>
38+
{format(date.from, "LLL dd, y")} -{" "}
39+
{format(date.to, "LLL dd, y")}
40+
</>
41+
) : (
42+
format(date.from, "LLL dd, y")
43+
)
44+
) : (
45+
<span>Pick a date</span>
46+
)}
47+
</Button>
48+
</PopoverTrigger>
49+
<PopoverContent className="w-auto p-0" align="end">
50+
<Calendar
51+
initialFocus
52+
mode="range"
53+
defaultMonth={date?.from}
54+
selected={date}
55+
onSelect={setDate}
56+
numberOfMonths={2}
57+
/>
58+
</PopoverContent>
59+
</Popover>
60+
)
61+
}

‎apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import {
5+
ChartLineIcon,
6+
FileIcon,
7+
HomeIcon,
8+
LifeBuoy,
9+
Send,
10+
Settings2Icon,
11+
ShoppingBagIcon,
12+
ShoppingCartIcon,
13+
UserIcon,
14+
} from "lucide-react"
15+
16+
import { Sidebar, SidebarContent } from "@/registry/new-york-v4/ui/sidebar"
17+
import { NavMain } from "@/app/(examples)/dashboard/components/nav-main"
18+
import { NavSecondary } from "@/app/(examples)/dashboard/components/nav-secondary"
19+
20+
const data = {
21+
navMain: [
22+
{
23+
title: "Dashboard",
24+
url: "/dashboard",
25+
icon: HomeIcon,
26+
},
27+
{
28+
title: "Analytics",
29+
url: "/dashboard/analytics",
30+
icon: ChartLineIcon,
31+
},
32+
{
33+
title: "Orders",
34+
url: "/dashboard/orders",
35+
icon: ShoppingBagIcon,
36+
},
37+
{
38+
title: "Products",
39+
url: "/dashboard/products",
40+
icon: ShoppingCartIcon,
41+
},
42+
{
43+
title: "Invoices",
44+
url: "/dashboard/invoices",
45+
icon: FileIcon,
46+
},
47+
{
48+
title: "Customers",
49+
url: "/dashboard/customers",
50+
icon: UserIcon,
51+
},
52+
{
53+
title: "Settings",
54+
url: "/dashboard/settings",
55+
icon: Settings2Icon,
56+
},
57+
],
58+
navSecondary: [
59+
{
60+
title: "Support",
61+
url: "#",
62+
icon: LifeBuoy,
63+
},
64+
{
65+
title: "Feedback",
66+
url: "#",
67+
icon: Send,
68+
},
69+
],
70+
}
71+
72+
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
73+
return (
74+
<Sidebar
75+
className="top-(--header-height) h-[calc(100svh-var(--header-height))]!"
76+
{...props}
77+
>
78+
<SidebarContent>
79+
<NavMain items={data.navMain} />
80+
<NavSecondary items={data.navSecondary} className="mt-auto" />
81+
</SidebarContent>
82+
</Sidebar>
83+
)
84+
}

‎apps/v4/app/(examples)/dashboard/components/chart-revenue.tsx

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
"use client"
2+
3+
import { TrendingUp } from "lucide-react"
4+
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"
5+
6+
import {
7+
Card,
8+
CardContent,
9+
CardDescription,
10+
CardFooter,
11+
CardHeader,
12+
CardTitle,
13+
} from "@/registry/new-york-v4/ui/card"
14+
import {
15+
ChartConfig,
16+
ChartContainer,
17+
ChartTooltip,
18+
ChartTooltipContent,
19+
} from "@/registry/new-york-v4/ui/chart"
20+
21+
const chartData = [
22+
{ month: "January", desktop: 186, mobile: 80 },
23+
{ month: "February", desktop: 305, mobile: 200 },
24+
{ month: "March", desktop: 237, mobile: 120 },
25+
{ month: "April", desktop: 73, mobile: 190 },
26+
{ month: "May", desktop: 209, mobile: 130 },
27+
{ month: "June", desktop: 346, mobile: 140 },
28+
{ month: "July", desktop: 321, mobile: 275 },
29+
{ month: "August", desktop: 132, mobile: 95 },
30+
{ month: "September", desktop: 189, mobile: 225 },
31+
{ month: "October", desktop: 302, mobile: 248 },
32+
{ month: "November", desktop: 342, mobile: 285 },
33+
{ month: "December", desktop: 328, mobile: 290 },
34+
]
35+
36+
const chartConfig = {
37+
desktop: {
38+
label: "Desktop",
39+
color: "var(--chart-1)",
40+
},
41+
mobile: {
42+
label: "Mobile",
43+
color: "var(--chart-2)",
44+
},
45+
} satisfies ChartConfig
46+
47+
export function ChartRevenue() {
48+
return (
49+
<Card>
50+
<CardHeader>
51+
<CardDescription>January - June 2024</CardDescription>
52+
<CardTitle className="text-3xl font-bold tracking-tight">
53+
$45,231.89
54+
</CardTitle>
55+
</CardHeader>
56+
<CardContent>
57+
<ChartContainer config={chartConfig} className="aspect-[3/1]">
58+
<BarChart
59+
accessibilityLayer
60+
data={chartData}
61+
margin={{
62+
left: -16,
63+
right: 0,
64+
}}
65+
>
66+
<CartesianGrid vertical={false} />
67+
<XAxis
68+
dataKey="month"
69+
tickLine={false}
70+
tickMargin={10}
71+
axisLine={false}
72+
tickFormatter={(value) => value.slice(0, 3)}
73+
/>
74+
<YAxis
75+
tickLine={false}
76+
tickMargin={10}
77+
axisLine={false}
78+
tickFormatter={(value) => value.toLocaleString()}
79+
domain={[0, "dataMax"]}
80+
/>
81+
<ChartTooltip
82+
cursor={false}
83+
content={<ChartTooltipContent hideIndicator />}
84+
/>
85+
<Bar
86+
dataKey="desktop"
87+
fill="var(--color-desktop)"
88+
radius={[0, 0, 4, 4]}
89+
stackId={1}
90+
/>
91+
<Bar
92+
dataKey="mobile"
93+
fill="var(--color-mobile)"
94+
radius={[4, 4, 0, 0]}
95+
stackId={1}
96+
/>
97+
</BarChart>
98+
</ChartContainer>
99+
</CardContent>
100+
<CardFooter className="flex-col items-start gap-2 text-sm">
101+
<div className="flex gap-2 leading-none font-medium">
102+
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
103+
</div>
104+
<div className="text-muted-foreground leading-none">
105+
Showing total visitors for the last 6 months
106+
</div>
107+
</CardFooter>
108+
</Card>
109+
)
110+
}

0 commit comments

Comments
 (0)