Skip to content

Commit 228abef

Browse files
peelarpeelar
authored
Merge pull request #48 from peelar/theme
add orange theme
2 parents 97dfc5c + 2f784d4 commit 228abef

38 files changed

Lines changed: 3846 additions & 422 deletions

‎.changeset/calm-carpets-fry.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"dopeshot-app": patch
3+
---
4+
5+
Align buttons and typography with the Shadcn theme, including the export CTA styling and subtle header accent.

‎apps/app/components.json‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
{
22
"$schema": "https://ui.shadcn.com/schema.json",
3-
"style": "new-york",
3+
"style": "base-nova",
44
"rsc": true,
55
"tsx": true,
66
"tailwind": {
77
"config": "tailwind.config.ts",
88
"css": "src/app/globals.css",
9-
"baseColor": "slate",
10-
"cssVariables": false,
9+
"baseColor": "neutral",
10+
"cssVariables": true,
1111
"prefix": ""
1212
},
13+
"iconLibrary": "lucide",
1314
"aliases": {
1415
"components": "@/components",
15-
"utils": "@/utils",
16-
"ui": "@/components/ui"
17-
}
16+
"utils": "@/lib/utils",
17+
"ui": "@/components/ui",
18+
"lib": "@/lib",
19+
"hooks": "@/hooks"
20+
},
21+
"menuColor": "default",
22+
"menuAccent": "subtle",
23+
"registries": {}
1824
}

‎apps/app/next-env.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/// <reference types="next" />
22
/// <reference types="next/image-types/global" />
3-
import "./.next/types/routes.d.ts";
3+
import "./.next/dev/types/routes.d.ts";
44

55
// NOTE: This file should not be edited
66
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

‎apps/app/package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"release": "pnpm -w changeset:version && pnpm check"
2020
},
2121
"dependencies": {
22+
"@base-ui/react": "^1.0.0",
2223
"@radix-ui/react-accordion": "^1.2.12",
2324
"@radix-ui/react-dialog": "^1.1.15",
2425
"@radix-ui/react-icons": "^1.3.2",
@@ -32,7 +33,7 @@
3233
"bcryptjs": "^3.0.3",
3334
"better-auth": "^1.4.7",
3435
"chroma-js": "^3.2.0",
35-
"class-variance-authority": "^0.7.0",
36+
"class-variance-authority": "^0.7.1",
3637
"clsx": "^2.1.1",
3738
"culori": "^4.0.2",
3839
"flags": "^4.0.2",
@@ -47,12 +48,15 @@
4748
"react": "19.2.1",
4849
"react-dom": "19.2.1",
4950
"resend": "^6.6.0",
51+
"shadcn": "^3.6.2",
5052
"sharp": "0.32.6",
5153
"shiki": "^3.19.0",
52-
"tailwind-merge": "^2.5.3"
54+
"tailwind-merge": "^2.6.0",
55+
"tw-animate-css": "^1.4.0"
5356
},
5457
"devDependencies": {
5558
"@playwright/test": "^1.57.0",
59+
"@tailwindcss/postcss": "^4.0.0",
5660
"@testing-library/dom": "^10.4.1",
5761
"@testing-library/jest-dom": "^6.9.1",
5862
"@testing-library/react": "^16.3.0",
@@ -75,7 +79,6 @@
7579
"postcss-load-config": "^6.0.1",
7680
"prettier": "^3.3.3",
7781
"prettier-plugin-tailwindcss": "^0.6.8",
78-
"@tailwindcss/postcss": "^4.0.0",
7982
"tailwindcss": "^4.0.0",
8083
"tsx": "^4.21.0",
8184
"typescript": "^5.6.3",

‎apps/app/src/app/(playground)/_components/playground-workspace.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
} from "@/domain/layout-def/definitions";
2020
import { track } from "@/lib/analytics";
2121
import { cn } from "@/lib/utils/cn";
22+
import { Button } from "@/components/ui/button";
2223

2324
/**
2425
* PlaygroundWorkspace
@@ -131,41 +132,47 @@ export function PlaygroundWorkspace({
131132
{/* Tiny icon-only orientation toggle - hidden for code snippets - centered against screenshot */}
132133
{!useFluidLayout ? (
133134
<div className="flex gap-1 rounded-md border border-border/40 bg-muted/20 p-0.5">
134-
<button
135+
<Button
135136
type="button"
137+
variant="ghost"
138+
size="icon-sm"
136139
onClick={() => handleOrientationChange("desktop")}
137140
aria-pressed={orientation === "desktop"}
138141
aria-label="Desktop mode (16:9)"
139142
className={cn(
140-
"flex h-7 w-7 items-center justify-center rounded transition-colors",
143+
"h-7 w-7 rounded transition-colors",
141144
orientation === "desktop"
142145
? "bg-foreground text-background shadow-sm"
143146
: "text-muted-foreground hover:text-foreground"
144147
)}
145148
>
146149
<Monitor className="h-3.5 w-3.5" />
147-
</button>
148-
<button
150+
</Button>
151+
<Button
149152
type="button"
153+
variant="ghost"
154+
size="icon-sm"
150155
onClick={() => handleOrientationChange("mobile")}
151156
aria-pressed={orientation === "mobile"}
152157
aria-label="Mobile mode (9:16)"
153158
className={cn(
154-
"flex h-7 w-7 items-center justify-center rounded transition-colors",
159+
"h-7 w-7 rounded transition-colors",
155160
orientation === "mobile"
156161
? "bg-foreground text-background shadow-sm"
157162
: "text-muted-foreground hover:text-foreground"
158163
)}
159164
>
160165
<Smartphone className="h-3.5 w-3.5" />
161-
</button>
166+
</Button>
162167
</div>
163168
) : null}
164169

165170
{/* Aspect lock positioned absolutely on the right */}
166171
{shouldShowAspectLock ? (
167-
<button
172+
<Button
168173
type="button"
174+
variant="ghost"
175+
size="sm"
169176
onClick={onToggleAspect}
170177
aria-pressed={isAspectLocked}
171178
className={cn(
@@ -176,7 +183,7 @@ export function PlaygroundWorkspace({
176183
)}
177184
>
178185
{isAspectLocked ? "Locked · 16:9" : "Lock to 16:9"}
179-
</button>
186+
</Button>
180187
) : null}
181188
</div>
182189

@@ -193,7 +200,7 @@ export function PlaygroundWorkspace({
193200
</PreviewViewport>
194201
{showFocusHint ? (
195202
<div className="pointer-events-none absolute inset-x-0 top-4 flex justify-center">
196-
<span className="rounded-full bg-background/80 px-3 py-1 text-[11px] font-semibold uppercase tracking-wide text-foreground/80 shadow-sm ring-1 ring-border/70">
203+
<span className="rounded-full bg-background/80 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-foreground/80 shadow-sm ring-1 ring-border/70">
197204
Screenshot-focused variant active
198205
</span>
199206
</div>

‎apps/app/src/app/globals.css‎

Lines changed: 83 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,78 @@
11
@import "tailwindcss";
2+
@import "tw-animate-css";
3+
@import "shadcn/tailwind.css";
4+
5+
@custom-variant dark (&:is(.dark *));
26

37
:root {
4-
--background: hsl(0 0% 100%);
5-
--foreground: hsl(0 0% 3.9%);
6-
--card: hsl(0 0% 100%);
7-
--card-foreground: hsl(0 0% 3.9%);
8-
--popover: hsl(0 0% 100%);
9-
--popover-foreground: hsl(0 0% 3.9%);
10-
--primary: hsl(0 0% 9%);
11-
--primary-foreground: hsl(0 0% 98%);
12-
--secondary: hsl(0 0% 96.1%);
13-
--secondary-foreground: hsl(0 0% 9%);
14-
--muted: hsl(0 0% 96.1%);
15-
--muted-foreground: hsl(0 0% 45.1%);
16-
--accent: hsl(0 0% 96.1%);
17-
--accent-foreground: hsl(0 0% 9%);
18-
--destructive: hsl(0 84.2% 60.2%);
8+
--card: oklch(1 0 0);
9+
--card-foreground: oklch(0.145 0 0);
10+
--popover: oklch(1 0 0);
11+
--popover-foreground: oklch(0.145 0 0);
12+
--primary: oklch(0.646 0.222 41.116);
13+
--primary-foreground: oklch(0.98 0.016 73.684);
14+
--secondary: oklch(0.967 0.001 286.375);
15+
--secondary-foreground: oklch(0.21 0.006 285.885);
16+
--muted: oklch(0.97 0 0);
17+
--muted-foreground: oklch(0.556 0 0);
18+
--accent: oklch(0.97 0 0);
19+
--accent-foreground: oklch(0.205 0 0);
20+
--destructive: oklch(0.58 0.22 27);
1921
--destructive-foreground: hsl(0 0% 98%);
20-
--border: hsl(0 0% 89.8%);
21-
--input: hsl(0 0% 89.8%);
22-
--ring: hsl(0 0% 3.9%);
23-
--radius: 0.5rem;
24-
--chart-1: hsl(12 76% 61%);
25-
--chart-2: hsl(173 58% 39%);
26-
--chart-3: hsl(197 37% 24%);
27-
--chart-4: hsl(43 74% 66%);
28-
--chart-5: hsl(27 87% 67%);
22+
--border: oklch(0.922 0 0);
23+
--input: oklch(0.922 0 0);
24+
--ring: oklch(0.708 0 0);
25+
--radius: 0.625rem;
26+
--chart-1: oklch(0.837 0.128 66.29);
27+
--chart-2: oklch(0.705 0.213 47.604);
28+
--chart-3: oklch(0.646 0.222 41.116);
29+
--chart-4: oklch(0.553 0.195 38.402);
30+
--chart-5: oklch(0.47 0.157 37.304);
31+
--background: oklch(1 0 0);
32+
--foreground: oklch(0.145 0 0);
33+
--sidebar: oklch(0.985 0 0);
34+
--sidebar-foreground: oklch(0.145 0 0);
35+
--sidebar-primary: oklch(0.646 0.222 41.116);
36+
--sidebar-primary-foreground: oklch(0.98 0.016 73.684);
37+
--sidebar-accent: oklch(0.97 0 0);
38+
--sidebar-accent-foreground: oklch(0.205 0 0);
39+
--sidebar-border: oklch(0.922 0 0);
40+
--sidebar-ring: oklch(0.708 0 0);
2941
}
3042

3143
.dark {
32-
--background: hsl(0 0% 3.9%);
33-
--foreground: hsl(0 0% 98%);
34-
--card: hsl(0 0% 3.9%);
35-
--card-foreground: hsl(0 0% 98%);
36-
--popover: hsl(0 0% 3.9%);
37-
--popover-foreground: hsl(0 0% 98%);
38-
--primary: hsl(0 0% 98%);
39-
--primary-foreground: hsl(0 0% 9%);
40-
--secondary: hsl(0 0% 14.9%);
41-
--secondary-foreground: hsl(0 0% 98%);
42-
--muted: hsl(0 0% 14.9%);
43-
--muted-foreground: hsl(0 0% 63.9%);
44-
--accent: hsl(0 0% 14.9%);
45-
--accent-foreground: hsl(0 0% 98%);
46-
--destructive: hsl(0 62.8% 30.6%);
44+
--background: oklch(0.145 0 0);
45+
--foreground: oklch(0.985 0 0);
46+
--card: oklch(0.205 0 0);
47+
--card-foreground: oklch(0.985 0 0);
48+
--popover: oklch(0.205 0 0);
49+
--popover-foreground: oklch(0.985 0 0);
50+
--primary: oklch(0.705 0.213 47.604);
51+
--primary-foreground: oklch(0.98 0.016 73.684);
52+
--secondary: oklch(0.274 0.006 286.033);
53+
--secondary-foreground: oklch(0.985 0 0);
54+
--muted: oklch(0.269 0 0);
55+
--muted-foreground: oklch(0.708 0 0);
56+
--accent: oklch(0.371 0 0);
57+
--accent-foreground: oklch(0.985 0 0);
58+
--destructive: oklch(0.704 0.191 22.216);
4759
--destructive-foreground: hsl(0 0% 98%);
48-
--border: hsl(0 0% 14.9%);
49-
--input: hsl(0 0% 14.9%);
50-
--ring: hsl(0 0% 83.1%);
51-
--chart-1: hsl(220 70% 50%);
52-
--chart-2: hsl(160 60% 45%);
53-
--chart-3: hsl(30 80% 55%);
54-
--chart-4: hsl(280 65% 60%);
55-
--chart-5: hsl(340 75% 55%);
60+
--border: oklch(1 0 0 / 10%);
61+
--input: oklch(1 0 0 / 15%);
62+
--ring: oklch(0.556 0 0);
63+
--chart-1: oklch(0.837 0.128 66.29);
64+
--chart-2: oklch(0.705 0.213 47.604);
65+
--chart-3: oklch(0.646 0.222 41.116);
66+
--chart-4: oklch(0.553 0.195 38.402);
67+
--chart-5: oklch(0.47 0.157 37.304);
68+
--sidebar: oklch(0.205 0 0);
69+
--sidebar-foreground: oklch(0.985 0 0);
70+
--sidebar-primary: oklch(0.705 0.213 47.604);
71+
--sidebar-primary-foreground: oklch(0.98 0.016 73.684);
72+
--sidebar-accent: oklch(0.269 0 0);
73+
--sidebar-accent-foreground: oklch(0.985 0 0);
74+
--sidebar-border: oklch(1 0 0 / 10%);
75+
--sidebar-ring: oklch(0.556 0 0);
5676
}
5777

5878
@theme inline {
@@ -83,13 +103,28 @@
83103
--radius-lg: var(--radius);
84104
--radius-md: calc(var(--radius) - 2px);
85105
--radius-sm: calc(var(--radius) - 4px);
106+
--font-sans: var(--font-sans);
107+
--color-sidebar-ring: var(--sidebar-ring);
108+
--color-sidebar-border: var(--sidebar-border);
109+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
110+
--color-sidebar-accent: var(--sidebar-accent);
111+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
112+
--color-sidebar-primary: var(--sidebar-primary);
113+
--color-sidebar-foreground: var(--sidebar-foreground);
114+
--color-sidebar: var(--sidebar);
115+
--radius-xl: calc(var(--radius) + 4px);
116+
--radius-2xl: calc(var(--radius) + 8px);
117+
--radius-3xl: calc(var(--radius) + 12px);
118+
--radius-4xl: calc(var(--radius) + 16px);
86119
}
87120

88121
@layer base {
89122
* {
90123
@apply border-border;
124+
@apply border-border outline-ring/50;
91125
}
92126
body {
93127
@apply bg-background text-foreground antialiased;
128+
@apply bg-background text-foreground;
94129
}
95-
}
130+
}

‎apps/app/src/app/layout.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ import { ThemeProvider } from "@/components/providers/theme-provider";
1515
import { UmamiProvider } from "@/components/providers/umami-provider";
1616
import { AuthProvider } from "@/lib/auth";
1717

18+
const inter = Inter({subsets:['latin'],variable:'--font-sans'});
19+
20+
1821
// Font definitions with CSS variables
1922
const geistSans = GeistSans;
2023

@@ -127,7 +130,7 @@ export default function RootLayout({
127130
children: React.ReactNode;
128131
}>) {
129132
return (
130-
<html lang="en" suppressHydrationWarning>
133+
<html lang="en" suppressHydrationWarning className={inter.variable}>
131134
<body
132135
className={`${fontVariables} min-h-screen bg-background font-sans tracking-tight antialiased`}
133136
style={

‎apps/app/src/components/auth/auth-form.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -321,13 +321,15 @@ export function AuthForm() {
321321
</div>
322322
</div>
323323

324-
<button
324+
<Button
325325
type="button"
326+
variant="link"
327+
size="sm"
326328
onClick={toggleAuthMethod}
327-
className="w-full text-center text-sm text-muted-foreground transition-colors hover:text-foreground"
329+
className="w-full text-center text-sm text-muted-foreground hover:text-foreground"
328330
>
329331
{useMagicLink ? "Use email & password instead" : "Send me a magic link"}
330-
</button>
332+
</Button>
331333
</>
332334
)}
333335
</div>
@@ -337,24 +339,28 @@ export function AuthForm() {
337339
{mode === "sign-in" ? (
338340
<>
339341
Don&apos;t have an account?{" "}
340-
<button
342+
<Button
341343
type="button"
344+
variant="link"
345+
size="sm"
342346
onClick={() => setMode("sign-up")}
343-
className="text-foreground underline underline-offset-2 transition-colors hover:text-foreground/80"
347+
className="h-auto p-0 text-foreground underline underline-offset-2 hover:text-foreground/80"
344348
>
345349
Sign up
346-
</button>
350+
</Button>
347351
</>
348352
) : (
349353
<>
350354
Already have an account?{" "}
351-
<button
355+
<Button
352356
type="button"
357+
variant="link"
358+
size="sm"
353359
onClick={() => setMode("sign-in")}
354-
className="text-foreground underline underline-offset-2 transition-colors hover:text-foreground/80"
360+
className="h-auto p-0 text-foreground underline underline-offset-2 hover:text-foreground/80"
355361
>
356362
Sign in
357-
</button>
363+
</Button>
358364
</>
359365
)}
360366
</div>

0 commit comments

Comments
 (0)