Skip to content

Commit b7feb8b

Browse files
ariflogsariflogs
committed
moved tailwind v3 -> v4
1 parent d70aac4 commit b7feb8b

Some content is hidden

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

54 files changed

+477
-528
lines changed

‎app/(docs)/docs/[[...slug]]/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default function page({ params }: IProps) {
4848
<div className="space-y-12 py-8">
4949
<div className="border-b border-black pb-6">
5050
<Text as="h1">{doc.title}</Text>
51-
<p className="text-lg text-muted mt-2">{doc.description}</p>
51+
<p className="text-lg text-muted-foreground mt-2">{doc.description}</p>
5252
{doc.links && (
5353
<div className="flex space-x-4 text-sm mt-4">
5454
{doc.links?.api_reference && (

‎app/(marketing)/blogs/[slug]/page.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -57,13 +57,15 @@ export default function page({ params }: IProps) {
5757
return (
5858
<div className="max-w-3xl mx-auto">
5959
<div className="border-b border-black pb-6 mb-6">
60-
<Text className="text-muted text-sm">
60+
<Text className="text-muted-foreground text-sm">
6161
{format(new Date(blog.publishedAt), "dd, MMMM yyyy")}
6262
</Text>
6363
<Text as="h2" className="mb-2">
6464
{blog.title}
6565
</Text>
66-
<p className="text-lg text-muted mb-8">{blog.description}</p>
66+
<p className="text-lg text-muted-foreground mb-8">
67+
{blog.description}
68+
</p>
6769
<Image
6870
src={blog.coverImage}
6971
alt={blog.title}
@@ -82,7 +84,7 @@ export default function page({ params }: IProps) {
8284
<Link
8385
href={`https://x.com/@${blog.author.x}`}
8486
target="_blank"
85-
className="text-muted"
87+
className="text-muted-foreground"
8688
>
8789
@{blog.author.x}
8890
</Link>

‎app/(marketing)/page.tsx

+18-24
Original file line numberDiff line numberDiff line change
@@ -60,15 +60,9 @@ export default async function Home() {
6060
<div className="bg-[url('/images/banner_void_2.svg')] bg-cover bg-no-repeat bg-center flex flex-col items-center h-[1900px] lg:h-[1400px]">
6161
<section className="container max-w-6xl mx-auto px-4 lg:px-0 text-gray-900 flex justify-center items-center lg:gap-28 xl:gap-32 my-28">
6262
<div className="text-center lg:text-left w-full lg:w-2/3">
63-
<Link
64-
id="checkout-figma-kit"
65-
data-umami-event="checkout-figma-kit"
66-
href="https://dub.sh/retroui-figma"
67-
target="_blank"
68-
className="mb-6 inline-block"
69-
>
63+
<Link href="/docs" className="mb-6 inline-block">
7064
<Badge>
71-
Checkout Retro UI Figma Kit{" "}
65+
We upgraded to TailwindCSS v4{" "}
7266
<ArrowRightIcon className="ml-2 h-4 w-4 inline-block" />
7367
</Badge>
7468
</Link>
@@ -80,7 +74,7 @@ export default async function Home() {
8074
stand out!
8175
</Text>
8276

83-
<p className="text-lg text-muted mb-8 mt-4">
77+
<p className="text-lg text-muted-foreground mb-8 mt-4">
8478
Retro styled component library based on React and TailwindCSS.
8579
Comes with 40+ free UI components that you can just copy paste
8680
into your projects.
@@ -187,14 +181,14 @@ export default async function Home() {
187181
Easily <span className="text-outlined">Customize</span> to Your Own
188182
Needs! 🛠️
189183
</Text>
190-
<div className="flex flex-col space-y-1 mt-6 mb-8 text-muted">
191-
<Text className="text-xl">
184+
<div className="flex flex-col space-y-1 mt-6 mb-8 text-muted-foreground">
185+
<Text className="text-lg">
192186
Copy-Paste Ready: Components that you can just copy paste.
193187
</Text>
194-
<Text className="text-xl">
188+
<Text className="text-lg">
195189
Tailwind Based: Customizable with Tailwind CSS.
196190
</Text>
197-
<Text className="text-xl">
191+
<Text className="text-lg">
198192
Type Safe: Typescript support for all components.
199193
</Text>
200194
</div>
@@ -292,20 +286,20 @@ export default async function Home() {
292286
</div>
293287
</section>
294288

295-
<section className="container max-w-6xl mx-auto px-4 lg:px-0 grid grid-cols-1 lg:grid-cols-2 items-center my-36">
289+
<section className="container max-w-6xl mx-auto px-4 lg:px-0 grid grid-cols-1 lg:grid-cols-2 gap-8 items-center my-36">
296290
<div className="w-full">
297291
<Text as="h2">
298292
The <span className="text-outlined">Figma</span> UI Kit You Were
299293
Looking For!
300294
</Text>
301-
<div className="flex flex-col space-y-1 mt-6 mb-8 text-muted">
302-
<Text className="text-xl">
295+
<div className="flex flex-col space-y-1 mt-6 mb-8 text-muted-foreground">
296+
<Text className="text-lg">
303297
- Based on the design foundation of RetroUI.
304298
</Text>
305-
<Text className="text-xl">
299+
<Text className="text-lg">
306300
- Comes with 60+ UI elements like cards, modals, stats, etc .
307301
</Text>
308-
<Text className="text-xl">
302+
<Text className="text-lg">
309303
- Get Lifetime update of new versions.
310304
</Text>
311305
</div>
@@ -329,11 +323,11 @@ export default async function Home() {
329323
</div>
330324
</section>
331325

332-
<section className="container max-w-6xl mx-auto border-2 bg-primary-400 border-black py-16 px-4 lg:p-16 my-36">
326+
<section className="container max-w-6xl mx-auto border-2 bg-primary border-black py-16 px-4 lg:p-16 my-36">
333327
<Text as="h2" className="text-center mb-2">
334328
Community Contributors
335329
</Text>
336-
<Text className="text-xl text-center text-muted mb-8">
330+
<Text className="text-xl text-center text-muted-foreground mb-8">
337331
RetroUI core is free and open-source, and it is made possible by our
338332
awesome contributors.
339333
</Text>
@@ -378,23 +372,23 @@ export default async function Home() {
378372
<footer className="bg-black py-8">
379373
<div className="container max-w-6xl mx-auto flex flex-col lg:flex-row space-y-4 lg:space-y-0 justify-between items-center">
380374
<div className="flex justify-center space-x-4">
381-
<a href="https://twitter.com/ariflogs" className="text-primary-500">
375+
<a href="https://twitter.com/ariflogs" className="text-primary">
382376
Twitter
383377
</a>
384378
<a
385379
href="https://github.com/Logging-Stuff/retroui"
386-
className="text-primary-500"
380+
className="text-primary"
387381
>
388382
GitHub
389383
</a>
390-
<a href="/docs" className="text-primary-500">
384+
<a href="/docs" className="text-primary">
391385
Documentation
392386
</a>
393387
</div>
394388

395389
<p className="text-gray-300 text-sm">
396390
Built by{" "}
397-
<a href="https://twitter.com/ariflogs" className="text-primary-500">
391+
<a href="https://twitter.com/ariflogs" className="text-primary">
398392
Arif Hossain
399393
</a>
400394
.

‎app/global.css

+67-18
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,78 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import "tailwindcss";
2+
3+
@theme {
4+
--font-head: var(--font-head);
5+
--font-sans: var(--font-sans);
6+
7+
--shadow-xs: 1px 1px 0 0 var(--border);
8+
--shadow-sm: 2px 2px 0 0 var(--border);
9+
--shadow-md: 3px 3px 0 0 var(--border);
10+
--shadow-lg: 4px 4px 0 1px var(--border);
11+
12+
--color-background: var(--background);
13+
--color-foreground: var(--foreground);
14+
--color-primary: var(--primary);
15+
--color-primary-hover: var(--primary-hover);
16+
--color-card: var(--card);
17+
--color-card-foreground: var(--card-foreground);
18+
--color-muted: var(--muted);
19+
--color-muted-foreground: var(--muted-foreground);
20+
--color-accent: var(--accent);
21+
--color-accent-foreground: var(--accent-foreground);
22+
--color-destructive: var(--destructive);
23+
--color-destructive-foreground: var(--destructive-foreground);
24+
--color-border: var(--border);
25+
}
426

527
:root {
6-
--muted: #606067;
728
--background: #fff;
829
--foreground: #000;
9-
--primary-50: #fffef0;
10-
--primary-100: #fffac2;
11-
--primary-200: #fff299;
12-
--primary-300: #ffe766;
13-
--primary-400: #ffdb33;
14-
--primary-500: #ffcc00;
15-
--primary-600: #ffb700;
16-
--primary-700: #ff9f00;
17-
--primary-800: #e68a00;
18-
--primary-900: #b36b00;
30+
--card: #fff;
31+
--card-foreground: #000;
32+
--primary: #ffdb33;
33+
--primary-hover: #ffcc00;
34+
--primary-foreground: #000;
35+
--muted: #aeaeae;
36+
--muted-foreground: #5a5a5a;
37+
--accent: #fae583;
38+
--accent-foreground: #000;
39+
--destructive: #e63946;
40+
--destructive-foreground: #fff;
41+
--border: #000;
42+
}
43+
44+
.dark {
45+
--background: #121212;
46+
--foreground: #fff;
47+
--card: #1e1e1e;
48+
--card-foreground: #fff;
49+
--popover: #1e1e1e;
50+
--popover-foreground: #fff;
51+
--primary: #ffdb33;
52+
--primary-foreground: #000;
53+
--secondary: #292929;
54+
--secondary-foreground: #e5e5e5;
55+
--muted: #3b3b3b;
56+
--muted-foreground: #9a9b9c;
57+
--accent: #ffdb33;
58+
--accent-foreground: #000;
59+
--destructive: #ff6b6b;
60+
--destructive-foreground: #fff;
61+
--border: #333;
62+
--input: #444;
63+
--ring: #ffdb33;
64+
--radius: 0.5rem;
65+
--chart-1: #ff4500;
66+
--chart-2: #ff8c00;
67+
--chart-3: #00b894;
68+
--chart-4: #355070;
69+
--chart-5: #e9c46a;
1970
}
2071

2172
.text-outlined {
22-
/* @apply relative text-primary-400 font-bold; */
2373
letter-spacing: 2px;
24-
text-shadow: 0px 0px 0 theme("colors.primary.400"),
25-
0px 0px 0 theme("colors.primary.400"), 4px 4px 0 theme("colors.primary.400"),
26-
4px 4px 0 theme("colors.primary.400");
74+
text-shadow: 0px 0px 0 var(--color-primary), 0px 0px 0 var(--color-primary),
75+
4px 4px 0 var(--color-primary), 4px 4px 0 var(--color-primary);
2776
}
2877

2978
/* Syntax Highlighting stuff */

‎app/layout.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import TopNav from "@/components/TopNav";
22
import "./global.css";
3-
import { Archivo_Black, Share_Tech, Share_Tech_Mono } from "next/font/google";
3+
import { Archivo_Black, Space_Grotesk, Space_Mono } from "next/font/google";
44
import { Metadata } from "next";
55

66
const archivoBlack = Archivo_Black({
@@ -10,14 +10,14 @@ const archivoBlack = Archivo_Black({
1010
display: "swap",
1111
});
1212

13-
const shareTech = Share_Tech({
13+
const space = Space_Grotesk({
1414
subsets: ["latin"],
1515
weight: "400",
1616
variable: "--font-sans",
1717
display: "swap",
1818
});
1919

20-
const shareTechMono = Share_Tech_Mono({
20+
const spaceMono = Space_Mono({
2121
subsets: ["latin"],
2222
weight: "400",
2323
variable: "--font-mono",
@@ -49,7 +49,7 @@ export default function RootLayout({
4949
/>
5050
</head>
5151
<body
52-
className={`${shareTech.className} ${archivoBlack.variable} ${shareTech.variable} ${shareTechMono.variable}`}
52+
className={`${space.className} ${archivoBlack.variable} ${space.variable} ${spaceMono.variable}`}
5353
>
5454
<div className="relative z-40 pb-16">
5555
<TopNav />

‎components/CodeBlock.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export function CodeBlock({ className, children, ...props }: ICodeBlock) {
3232
<div className="relative">
3333
<pre
3434
className={cn(
35-
"overflow-x-auto rounded bg-[#282A36] mt-3 mb-6 p-4",
35+
"overflow-x-auto rounded-sm bg-[#282A36] mt-3 mb-6 p-4",
3636
className
3737
)}
3838
{...props}

‎components/ComponentInstall.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ function ComponentInstallManual({ children }: { children: React.ReactNode }) {
1616
function ComponentInstall({ children }: IComponentShowcase) {
1717
return (
1818
<TabGroup>
19-
<TabList className="border-b bg-transparent flex space-x-4 mb-6">
20-
<Tab className="text-lg min-w-12 relative px-2 py-1 border-b-2 border-b-transparent bg-transparent data-[selected]:border-primary-500 data-[selected]:text-foreground focus:outline-none">
19+
<TabList className="border-b bg-transparent flex space-x-4 mb-6 text-sm">
20+
<Tab className="min-w-12 cursor-pointer relative px-2 py-1 bg-transparent data-selected:border data-selected:border-b-0 data-selected:bg-black data-selected:text-white focus:outline-hidden">
2121
CLI
2222
</Tab>
23-
<Tab className="text-lg min-w-12 relative px-2 py-1 border-b-2 border-b-transparent bg-transparent data-[selected]:border-primary-500 data-[selected]:text-foreground focus:outline-none">
23+
<Tab className="min-w-12 cursor-pointer relative px-2 py-1 bg-transparent data-selected:border data-selected:border-b-0 data-selected:bg-black data-selected:text-white focus:outline-hidden">
2424
Manual
2525
</Tab>
2626
</TabList>

‎components/ComponentShowcase.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,22 @@ export function ComponentShowcase({ name, children }: IComponentShowcase) {
1212

1313
return (
1414
<TabGroup>
15-
<TabList className="space-x-4 border-b mb-6">
16-
<Tab className="min-w-12 text-lg relative px-2 py-1 border-b-2 border-b-transparent bg-transparent data-[selected]:border-primary-500 data-[selected]:text-foreground focus:outline-none">
15+
<TabList className="space-x-4 border-b mb-6 text-sm">
16+
<Tab className="min-w-12 cursor-pointer relative px-2 py-1 bg-transparent data-selected:border data-selected:border-b-0 data-selected:bg-black data-selected:text-white focus:outline-hidden">
1717
Preview
1818
</Tab>
19-
<Tab className="min-w-12 text-lg relative px-2 py-1 border-b-2 border-b-transparent bg-transparent data-[selected]:border-primary-500 data-[selected]:text-foreground focus:outline-none">
19+
<Tab className="min-w-12 cursor-pointer relative px-2 py-1 bg-transparent data-selected:border data-selected:border-b-0 data-selected:bg-black data-selected:text-white focus:outline-hidden">
2020
Code
2121
</Tab>
2222
</TabList>
2323
<TabPanels>
2424
<TabPanel>
25-
<div className="border rounded p-6 mt-4">
25+
<div className="border rounded-sm p-6 mt-4">
2626
<Preview />
2727
</div>
2828
</TabPanel>
2929
<TabPanel>
30-
<div className="relative rounded overflow-auto">{Code}</div>
30+
<div className="relative rounded-sm overflow-auto">{Code}</div>
3131
</TabPanel>
3232
</TabPanels>
3333
</TabGroup>

‎components/JoinNewsletter.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ export function JoinNewsletter() {
151151
<div className="w-full max-w-6xl mx-auto py-16 px-4 border-2 border-black">
152152
<div className="flex flex-col justify-center items-center text-center">
153153
<Text as="h2">Join Our Newsletter</Text>
154-
<p className="text-lg text-muted mb-8">
154+
<p className="text-lg text-muted-foreground mb-8">
155155
Get notified about latest updates and new launches.
156156
</p>
157157

‎components/MDX.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -63,13 +63,13 @@ const components = (type: "doc" | "blog") => ({
6363
href={href}
6464
target={target || "_blank"}
6565
rel={rel || "noopener noreferrer"}
66-
className="underline underline-offset-4 hover:decoration-primary-500"
66+
className="underline underline-offset-4 hover:decoration-primary"
6767
{...rest}
6868
/>
6969
) : (
7070
<Link
7171
href={href}
72-
className="underline underline-offset-4 hover:decoration-primary-500"
72+
className="underline underline-offset-4 hover:decoration-primary"
7373
{...rest}
7474
/>
7575
);
@@ -82,7 +82,7 @@ const components = (type: "doc" | "blog") => ({
8282
}: React.HTMLAttributes<HTMLElement>) => (
8383
<code
8484
className={cn(
85-
"relative rounded bg-[#282A36] p-1 text-primary-500 text-sm",
85+
"relative rounded-sm bg-[#282A36] p-1 text-primary text-sm",
8686
className
8787
)}
8888
{...props}

‎components/TopNav.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function TopNav() {
1212
<div className="container max-w-6xl px-4 lg:px-0 mx-auto">
1313
<div className="flex justify-between items-center h-16">
1414
{/* Logo Section */}
15-
<div className="flex-shrink-0">
15+
<div className="shrink-0">
1616
<a
1717
href="/"
1818
className="text-black font-head text-2xl flex items-end"
@@ -34,7 +34,7 @@ export default function TopNav() {
3434
<Link
3535
key={item.title}
3636
href={item.href}
37-
className="hover:underline decoration-primary-500 underline-offset-2 transition-all"
37+
className="hover:underline decoration-primary underline-offset-2 transition-all"
3838
>
3939
{item.title}
4040
</Link>

‎components/ui/Accordion.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const AccordionHeader = React.forwardRef<
3131
<AccordionPrimitive.Trigger
3232
ref={ref}
3333
className={cn(
34-
"flex flex-1 items-start justify-between px-4 py-2 font-head text-black cursor-pointer focus:outline-none [&[data-state=open]>svg]:rotate-180",
34+
"flex flex-1 items-start justify-between px-4 py-2 font-head text-black cursor-pointer focus:outline-hidden [&[data-state=open]>svg]:rotate-180",
3535
className
3636
)}
3737
{...props}

0 commit comments

Comments
 (0)