Skip to content

Commit 8f5670e

Browse files
mehdibhamehdibha
committed
wip site themes
1 parent fe72664 commit 8f5670e

14 files changed

+627
-272
lines changed

‎www/scripts/build-internal-registry.ts

+48
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import { existsSync, promises as fs } from "node:fs";
22
import path from "node:path";
33
import { rimraf } from "rimraf";
4+
import { accentColors } from "@/modules/themes";
5+
import {
6+
createTheme,
7+
createThemeCssVars,
8+
} from "@/modules/themes/lib/create-theme";
49

510
// import { iconLibraries, icons } from "@/registry/registry-icons";
611

@@ -171,6 +176,49 @@ async function buildDemos() {
171176
// // export const Components = {`;
172177
// }
173178

179+
const createPalette = () => {
180+
181+
}
182+
183+
const buildThemes = async () => {
184+
const targetPath = path.join(process.cwd(), "src/styles/themes.css");
185+
const ACCENT_THEME = `
186+
.theme-<%- theme %> {
187+
--background: <%- colors.light["background"] %>;
188+
--foreground: <%- colors.light["foreground"] %>;
189+
}
190+
191+
.dark .theme-<%- theme %> {
192+
--background: <%- colors.dark["background"] %>;
193+
--foreground: <%- colors.dark["foreground"] %>;
194+
}`;
195+
196+
const themesCSS = [];
197+
198+
for (const accentColor of accentColors) {
199+
const generatedTheme = createThemeCssVars(
200+
{
201+
light: {
202+
palettes: {
203+
neutral: { baseColors: ["#fff"] },
204+
accent: {
205+
baseColors: ["#f9a825"],
206+
},
207+
},
208+
},
209+
},
210+
"light"
211+
)
212+
themesCSS
213+
.push
214+
// template(THEME_STYLES_WITH_VARIABLES)({
215+
// colors: theme.cssVars,
216+
// theme: theme.name,
217+
// })
218+
();
219+
}
220+
};
221+
174222
async function run() {
175223
try {
176224
await setup();

‎www/src/app/(app)/themes/layout.tsx

+15-5
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,19 @@ export default function ThemesLayout({
2727
<PreviewProvider>
2828
<div className={cn("max-w-screen-3xl relative mx-auto flex")}>
2929
<div className="relative flex-1">
30-
<div className="sticky top-0 flex h-12 items-center justify-end pr-2">
30+
<div className="container max-w-4xl px-0">
31+
<div
32+
className={cn(
33+
"container max-w-none border-x",
34+
isOpen && "border-transparent"
35+
)}
36+
>
37+
{children}
38+
</div>
39+
</div>
40+
</div>
41+
<div className="relative">
42+
<div className="absolute -left-2 top-2 -translate-x-full">
3143
<AnimatePresence>
3244
{!isOpen && isMounted && (
3345
<motion.div
@@ -37,19 +49,17 @@ export default function ThemesLayout({
3749
transition={{ duration: 0.2 }}
3850
>
3951
<Button
52+
variant="default"
4053
size="sm"
4154
onPress={() => setIsOpen(true)}
42-
className="sticky top-0"
55+
className="bg-bg-inverse/5 sticky top-0 border"
4356
>
4457
Preview
4558
</Button>
4659
</motion.div>
4760
)}
4861
</AnimatePresence>
4962
</div>
50-
<div className="container max-w-4xl">{children}</div>
51-
</div>
52-
<div className="relative">
5363
<motion.div
5464
initial={false}
5565
animate={{ width: isOpen ? (isCollapsed ? 600 : 500) : 0 }}

‎www/src/app/(app)/themes/page.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const metadata: Metadata = {
2727
export default function Page() {
2828
return (
2929
<div className="pb-20">
30-
<section className="py-10">
30+
<section className="pt-16 pb-10">
3131
<h1 className="font-heading xs:text-2xl text-pretty text-xl font-semibold tracking-tighter sm:text-3xl md:text-4xl">
3232
Everything starts with identity.
3333
</h1>
@@ -39,7 +39,7 @@ export default function Page() {
3939
<Button variant="primary">Explore themes</Button>
4040
</ExploreThemesDialog>
4141
<CreateThemeDialog>
42-
<Button variant="outline" prefix={<PlusIcon />}>
42+
<Button variant="outline" className="bg-bg-inverse/5" prefix={<PlusIcon />}>
4343
Create theme
4444
</Button>
4545
</CreateThemeDialog>

‎www/src/app/layout.tsx

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import type { Metadata, Viewport } from "next";
3+
import { cookies } from "next/headers";
34
import { Analytics } from "@vercel/analytics/react";
45
import { truncateOnWord } from "@/lib/string";
56
import { cn } from "@/lib/utils";
@@ -43,11 +44,14 @@ export const viewport: Viewport = {
4344
],
4445
};
4546

46-
export default function RootLayout({
47+
export default async function RootLayout({
4748
children,
4849
}: {
4950
children: React.ReactNode;
5051
}) {
52+
const cookieStore = await cookies();
53+
const theme = cookieStore.get("site-theme")?.value ?? ""
54+
console.log(theme)
5155
return (
5256
<html lang="en" suppressHydrationWarning>
5357
<body
@@ -61,8 +65,13 @@ export default function RootLayout({
6165
>
6266
<Analytics />
6367
<Providers>
64-
<ThemeOverride id="custom-theme-portal" className="bg-transparent" />
65-
{children}
68+
<div>
69+
<ThemeOverride
70+
id="custom-theme-portal"
71+
className="bg-transparent"
72+
/>
73+
{children}
74+
</div>
6675
</Providers>
6776
</body>
6877
</html>

‎www/src/components/core/color-swatch-picker.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "@/registry/core/color-swatch-picker_basic"

‎www/src/components/header.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@
22

33
import React from "react";
44
import Link from "next/link";
5-
import { SearchIcon } from "lucide-react";
5+
import { SearchIcon, SwatchBookIcon } from "lucide-react";
66
import { cn } from "@/lib/utils";
77
import { Button } from "@/components/core/button";
88
import { siteConfig } from "@/config";
99
import { Kbd } from "./core/kbd";
1010
import { GitHubIcon, TwitterIcon } from "./icons";
1111
import { SearchCommand } from "./search-command";
12+
import { ThemeColorsSelector } from "./theme-colors-selector";
1213
import { ThemeSwitcher } from "./theme-switcher";
1314

1415
export function Header({ className }: { className?: string }) {
@@ -65,6 +66,12 @@ export function Header({ className }: { className?: string }) {
6566
>
6667
<TwitterIcon />
6768
</Button>
69+
70+
<ThemeColorsSelector>
71+
<Button variant="quiet" size="sm" shape="square">
72+
<SwatchBookIcon />
73+
</Button>
74+
</ThemeColorsSelector>
6875
<ThemeSwitcher />
6976
</div>
7077
</div>

‎www/src/components/sidebar.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,8 @@ export const SidebarProvider = ({
195195
}: {
196196
children: React.ReactNode;
197197
}) => {
198-
const [isCollapsed, setCollapsed] = React.useState(true);
198+
const pathname = usePathname();
199+
const [isCollapsed, setCollapsed] = React.useState(pathname === "/themes");
199200
return (
200201
<SidebarContext value={{ isCollapsed, setCollapsed }}>
201202
{children}

‎www/src/components/theme-colors-selector.tsx

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
"use client";
2+
3+
import React from "react";
4+
import { parseColor, type Color } from "react-aria-components";
5+
import { Button } from "@/components/core/button";
6+
import {
7+
ColorSwatchPicker,
8+
ColorSwatchPickerItem,
9+
} from "@/components/core/color-swatch-picker";
10+
import { Dialog, DialogRoot } from "@/components/core/dialog";
11+
12+
export const ThemeColorsSelector = ({
13+
children,
14+
}: {
15+
children?: React.ReactNode;
16+
}) => {
17+
const [accentColor, setAccentColor] = React.useState<{
18+
name: "";
19+
value: Color;
20+
}>({
21+
name: "",
22+
value: parseColor("#f9a825"),
23+
});
24+
const [primaryColor, setPrimaryColor] = React.useState<string | null>(null);
25+
26+
return (
27+
<DialogRoot>
28+
{children}
29+
<Dialog type="popover" popoverProps={{ placement: "bottom right", shouldFlip: false }}>
30+
<p className="text-fg-muted text-sm">Neutral</p>
31+
<ColorSwatchPicker
32+
value={accentColor.value}
33+
className="grid grid-cols-5"
34+
>
35+
{neutralColors.map((color) => (
36+
<ColorSwatchPickerItem key={color.name} color={color.color}>
37+
{color.name}
38+
</ColorSwatchPickerItem>
39+
))}
40+
</ColorSwatchPicker>
41+
<p className="text-fg-muted mt-4 text-sm">Primary</p>
42+
<ColorSwatchPicker className="grid grid-cols-5">
43+
{accentColors.map((color) => (
44+
<ColorSwatchPickerItem key={color.name} color={color.color}>
45+
{color.name}
46+
</ColorSwatchPickerItem>
47+
))}
48+
{/* <ColorSwatchPickerItem color= /> */}
49+
</ColorSwatchPicker>
50+
</Dialog>
51+
</DialogRoot>
52+
);
53+
};
54+
55+
const neutralColors = [
56+
{
57+
name: "slate",
58+
color: "#1f2937",
59+
},
60+
{
61+
name: "gray",
62+
color: "#f4f4f4",
63+
},
64+
{
65+
name: "zinc",
66+
color: "#f9f9f9",
67+
},
68+
{
69+
name: "neutral",
70+
color: "#f5f5f5",
71+
},
72+
{
73+
name: "stone",
74+
color: "#f5f5f5",
75+
},
76+
];
77+
78+
const accentColors = [
79+
{
80+
name: "Orange",
81+
color: "#f9a825",
82+
},
83+
{
84+
name: "Green",
85+
color: "#43a047",
86+
},
87+
{
88+
name: "Blue",
89+
color: "#1e88e5",
90+
},
91+
{
92+
name: "Red",
93+
color: "#e53935",
94+
},
95+
{
96+
name: "Purple",
97+
color: "#8e24aa",
98+
},
99+
{
100+
name: "Yellow",
101+
color: "#fdd835",
102+
},
103+
{
104+
name: "Pink",
105+
color: "#e91e63",
106+
},
107+
{
108+
name: "Cyan",
109+
color: "#00acc1",
110+
},
111+
{
112+
name: "Teal",
113+
color: "#00897b",
114+
},
115+
{
116+
name: "Indigo",
117+
color: "#3949ab",
118+
},
119+
{
120+
name: "Lime",
121+
color: "#cddc39",
122+
},
123+
{
124+
name: "Amber",
125+
color: "#ffc107",
126+
},
127+
{
128+
name: "Deep Orange",
129+
color: "#ff5722",
130+
},
131+
{
132+
name: "Deep Purple",
133+
color: "#673ab7",
134+
},
135+
{
136+
name: "Light Blue",
137+
color: "#03a9f4",
138+
},
139+
{
140+
name: "Light Green",
141+
color: "#8bc34a",
142+
},
143+
{
144+
name: "Brown",
145+
color: "#795548",
146+
},
147+
{
148+
name: "Blue Gray",
149+
color: "#607d8b",
150+
},
151+
{
152+
name: "Black",
153+
color: "#000000",
154+
},
155+
{
156+
name: "White",
157+
color: "#ffffff",
158+
},
159+
];

0 commit comments

Comments
 (0)