Skip to content

Commit 8a31c6a

Browse files
Xeven777Xeven777
committed
started adding shadcn
1 parent 2ac880f commit 8a31c6a

10 files changed

Lines changed: 826 additions & 44 deletions

File tree

‎app/globals.css‎

Lines changed: 136 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,8 @@
11
@import "tailwindcss";
2+
@import "tw-animate-css";
3+
@import "shadcn/tailwind.css";
24

3-
/* ManyChat Alternative — Design System
4-
Plain and functional. No gradients, glass, glow, or animation. */
5-
6-
@theme inline {
7-
--color-background: #ffffff;
8-
--color-foreground: #18181b;
9-
--color-surface: #f7f7f8;
10-
--color-surface-hover: #efeff1;
11-
--color-border: #e4e4e7;
12-
--color-border-hover: #d4d4d8;
13-
--color-muted: #71717a;
14-
--color-accent: #f97316;
15-
--color-accent-hover: #ea580c;
16-
--color-success: #16a34a;
17-
--color-error: #dc2626;
18-
--color-warning: #d97706;
19-
--font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
20-
--font-mono: ui-monospace, monospace;
21-
}
22-
23-
html {
24-
color-scheme: light;
25-
}
26-
27-
body {
28-
background: var(--color-background);
29-
color: var(--color-foreground);
30-
font-family: var(--font-sans);
31-
}
5+
@custom-variant dark (&:is(.dark *));
326

337
/* Focus ring — visible, for keyboard users. */
348
:focus-visible {
@@ -88,3 +62,136 @@ select:focus-visible {
8862
transition-duration: 0.01ms !important;
8963
}
9064
}
65+
66+
@theme inline {
67+
68+
--color-surface: #f7f7f8;
69+
--color-surface-hover: #efeff1;
70+
--color-border-hover: #d4d4d8;
71+
--color-accent-hover: #ea580c;
72+
--color-success: #16a34a;
73+
--color-error: #dc2626;
74+
--color-warning: #d97706;
75+
76+
--font-heading: var(--font-sans);
77+
--font-sans: var(--font-sans);
78+
--color-sidebar-ring: var(--sidebar-ring);
79+
--color-sidebar-border: var(--sidebar-border);
80+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
81+
--color-sidebar-accent: var(--sidebar-accent);
82+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
83+
--color-sidebar-primary: var(--sidebar-primary);
84+
--color-sidebar-foreground: var(--sidebar-foreground);
85+
--color-sidebar: var(--sidebar);
86+
--color-chart-5: var(--chart-5);
87+
--color-chart-4: var(--chart-4);
88+
--color-chart-3: var(--chart-3);
89+
--color-chart-2: var(--chart-2);
90+
--color-chart-1: var(--chart-1);
91+
--color-ring: var(--ring);
92+
--color-input: var(--input);
93+
--color-border: var(--border);
94+
--color-destructive: var(--destructive);
95+
--color-accent-foreground: var(--accent-foreground);
96+
--color-accent: var(--accent);
97+
--color-muted-foreground: var(--muted-foreground);
98+
--color-muted: var(--muted);
99+
--color-secondary-foreground: var(--secondary-foreground);
100+
--color-secondary: var(--secondary);
101+
--color-primary-foreground: var(--primary-foreground);
102+
--color-primary: var(--primary);
103+
--color-popover-foreground: var(--popover-foreground);
104+
--color-popover: var(--popover);
105+
--color-card-foreground: var(--card-foreground);
106+
--color-card: var(--card);
107+
--color-foreground: var(--foreground);
108+
--color-background: var(--background);
109+
--radius-sm: calc(var(--radius) * 0.6);
110+
--radius-md: calc(var(--radius) * 0.8);
111+
--radius-lg: var(--radius);
112+
--radius-xl: calc(var(--radius) * 1.4);
113+
--radius-2xl: calc(var(--radius) * 1.8);
114+
--radius-3xl: calc(var(--radius) * 2.2);
115+
--radius-4xl: calc(var(--radius) * 2.6);
116+
}
117+
118+
:root {
119+
--background: oklch(1 0 0);
120+
--foreground: oklch(0.145 0 0);
121+
--card: oklch(1 0 0);
122+
--card-foreground: oklch(0.145 0 0);
123+
--popover: oklch(1 0 0);
124+
--popover-foreground: oklch(0.145 0 0);
125+
--primary: oklch(0.841 0.238 128.85);
126+
--primary-foreground: oklch(0.405 0.101 131.063);
127+
--secondary: oklch(0.967 0.001 286.375);
128+
--secondary-foreground: oklch(0.21 0.006 285.885);
129+
--muted: oklch(0.97 0 0);
130+
--muted-foreground: oklch(0.556 0 0);
131+
--accent: oklch(0.97 0 0);
132+
--accent-foreground: oklch(0.205 0 0);
133+
--destructive: oklch(0.577 0.245 27.325);
134+
--border: oklch(0.922 0 0);
135+
--input: oklch(0.922 0 0);
136+
--ring: oklch(0.708 0 0);
137+
--chart-1: oklch(0.823 0.12 346.018);
138+
--chart-2: oklch(0.656 0.241 354.308);
139+
--chart-3: oklch(0.592 0.249 0.584);
140+
--chart-4: oklch(0.525 0.223 3.958);
141+
--chart-5: oklch(0.459 0.187 3.815);
142+
--radius: 0.625rem;
143+
--sidebar: oklch(0.985 0 0);
144+
--sidebar-foreground: oklch(0.145 0 0);
145+
--sidebar-primary: oklch(0.648 0.2 131.684);
146+
--sidebar-primary-foreground: oklch(0.986 0.031 120.757);
147+
--sidebar-accent: oklch(0.97 0 0);
148+
--sidebar-accent-foreground: oklch(0.205 0 0);
149+
--sidebar-border: oklch(0.922 0 0);
150+
--sidebar-ring: oklch(0.708 0 0);
151+
}
152+
153+
.dark {
154+
--background: oklch(0.145 0 0);
155+
--foreground: oklch(0.985 0 0);
156+
--card: oklch(0.205 0 0);
157+
--card-foreground: oklch(0.985 0 0);
158+
--popover: oklch(0.205 0 0);
159+
--popover-foreground: oklch(0.985 0 0);
160+
--primary: oklch(0.768 0.233 130.85);
161+
--primary-foreground: oklch(0.405 0.101 131.063);
162+
--secondary: oklch(0.274 0.006 286.033);
163+
--secondary-foreground: oklch(0.985 0 0);
164+
--muted: oklch(0.269 0 0);
165+
--muted-foreground: oklch(0.708 0 0);
166+
--accent: oklch(0.269 0 0);
167+
--accent-foreground: oklch(0.985 0 0);
168+
--destructive: oklch(0.704 0.191 22.216);
169+
--border: oklch(1 0 0 / 10%);
170+
--input: oklch(1 0 0 / 15%);
171+
--ring: oklch(0.556 0 0);
172+
--chart-1: oklch(0.823 0.12 346.018);
173+
--chart-2: oklch(0.656 0.241 354.308);
174+
--chart-3: oklch(0.592 0.249 0.584);
175+
--chart-4: oklch(0.525 0.223 3.958);
176+
--chart-5: oklch(0.459 0.187 3.815);
177+
--sidebar: oklch(0.205 0 0);
178+
--sidebar-foreground: oklch(0.985 0 0);
179+
--sidebar-primary: oklch(0.768 0.233 130.85);
180+
--sidebar-primary-foreground: oklch(0.274 0.072 132.109);
181+
--sidebar-accent: oklch(0.269 0 0);
182+
--sidebar-accent-foreground: oklch(0.985 0 0);
183+
--sidebar-border: oklch(1 0 0 / 10%);
184+
--sidebar-ring: oklch(0.556 0 0);
185+
}
186+
187+
@layer base {
188+
* {
189+
@apply border-border outline-ring/50;
190+
}
191+
body {
192+
@apply bg-background text-foreground;
193+
}
194+
html {
195+
@apply font-sans;
196+
}
197+
}

‎app/layout.tsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Metadata } from "next";
22
import "./globals.css";
3-
import { Inter_Tight } from "next/font/google";
3+
import { Geist } from "next/font/google";
4+
import { cn } from "@/lib/utils";
45

56
export const metadata: Metadata = {
67
title: "OpenInstaDM - Open source Instagram comment-to-DM automation",
@@ -15,21 +16,16 @@ export const metadata: Metadata = {
1516
],
1617
};
1718

18-
const inter = Inter_Tight({ subsets: ["latin"], variable: "--font-sans" });
19+
const geist = Geist({ subsets: ["latin"], variable: "--font-sans" });
1920

2021
export default function RootLayout({
2122
children,
2223
}: Readonly<{
2324
children: React.ReactNode;
2425
}>) {
2526
return (
26-
<html lang="en" className="h-full dark">
27-
<body
28-
className={
29-
"min-h-full bg-background text-foreground font-sans antialiased " +
30-
inter.className
31-
}
32-
>
27+
<html lang="en" className={cn("h-full font-sans", geist.variable)}>
28+
<body className={"min-h-full antialiased " + geist.className}>
3329
{children}
3430
</body>
3531
</html>

0 commit comments

Comments
 (0)