Skip to content

Commit 6551af8

Browse files
noxifynoxify
committed
* fix tailwind v4 issues
* update shadcn components
1 parent 6d0e70a commit 6551af8

22 files changed

+1375
-1055
lines changed

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,10 @@
3333
"@radix-ui/react-dialog": "1.1.6",
3434
"@radix-ui/react-dropdown-menu": "2.1.6",
3535
"@radix-ui/react-select": "^2.1.6",
36+
"@radix-ui/react-separator": "^1.1.2",
3637
"@radix-ui/react-slot": "1.1.2",
3738
"@radix-ui/react-tabs": "1.1.3",
39+
"@radix-ui/react-tooltip": "^1.1.8",
3840
"@renoun/mdx": "1.6.0",
3941
"@tanstack/react-table": "^8.21.2",
4042
"class-variance-authority": "0.7.1",

‎pnpm-lock.yaml

+61
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎renoun.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
},
88
"siteUrl": "https://renoun-docs-template.vercel.app",
99

10-
"theme": "theme.json",
10+
"theme": {
11+
"dark": "github-dark-default",
12+
"light": "github-light-default"
13+
},
1114
"languages": [
1215
"css",
1316
"javascript",

‎src/app/globals.css

+105-127
Original file line numberDiff line numberDiff line change
@@ -4,145 +4,123 @@
44

55
@custom-variant dark (&:is(.dark *));
66

7-
/*
8-
The default border color has changed to `currentColor` in Tailwind CSS v4,
9-
so we've added these compatibility styles to make sure everything still
10-
looks the same as it did with Tailwind CSS v3.
11-
12-
If we ever want to remove these styles, we need to add an explicit border
13-
color utility to any element that depends on these defaults.
14-
*/
15-
@layer base {
16-
*,
17-
::after,
18-
::before,
19-
::backdrop,
20-
::file-selector-button {
21-
border-color: var(--color-gray-200, currentColor);
22-
}
7+
:root {
8+
--radius: 0.625rem;
9+
--background: oklch(1 0 0);
10+
--foreground: oklch(0.129 0.042 264.695);
11+
--card: oklch(1 0 0);
12+
--card-foreground: oklch(0.129 0.042 264.695);
13+
--popover: oklch(1 0 0);
14+
--popover-foreground: oklch(0.129 0.042 264.695);
15+
--primary: oklch(0.208 0.042 265.755);
16+
--primary-foreground: oklch(0.984 0.003 247.858);
17+
--secondary: oklch(0.968 0.007 247.896);
18+
--secondary-foreground: oklch(0.208 0.042 265.755);
19+
--muted: oklch(0.968 0.007 247.896);
20+
--muted-foreground: oklch(0.554 0.046 257.417);
21+
--accent: oklch(0.968 0.007 247.896);
22+
--accent-foreground: oklch(0.208 0.042 265.755);
23+
--destructive: oklch(0.577 0.245 27.325);
24+
--border: oklch(0.929 0.013 255.508);
25+
--input: oklch(0.929 0.013 255.508);
26+
--ring: oklch(0.704 0.04 256.788);
27+
--chart-1: oklch(0.646 0.222 41.116);
28+
--chart-2: oklch(0.6 0.118 184.704);
29+
--chart-3: oklch(0.398 0.07 227.392);
30+
--chart-4: oklch(0.828 0.189 84.429);
31+
--chart-5: oklch(0.769 0.188 70.08);
32+
--sidebar: oklch(0.984 0.003 247.858);
33+
--sidebar-foreground: oklch(0.129 0.042 264.695);
34+
--sidebar-primary: oklch(0.208 0.042 265.755);
35+
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
36+
--sidebar-accent: oklch(0.968 0.007 247.896);
37+
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
38+
--sidebar-border: oklch(0.929 0.013 255.508);
39+
--sidebar-ring: oklch(0.704 0.04 256.788);
2340
}
2441

25-
@layer base {
26-
:root {
27-
--background: 0 0% 100%;
28-
--foreground: 224 71.4% 4.1%;
29-
--card: 0 0% 100%;
30-
--card-foreground: 224 71.4% 4.1%;
31-
--popover: 0 0% 100%;
32-
--popover-foreground: 224 71.4% 4.1%;
33-
--primary: 220.9 39.3% 11%;
34-
--primary-foreground: 210 20% 98%;
35-
--secondary: 220 14.3% 95.9%;
36-
--secondary-foreground: 220.9 39.3% 11%;
37-
--muted: 220 14.3% 95.9%;
38-
--muted-foreground: 220 8.9% 46.1%;
39-
--accent: 220 14.3% 95.9%;
40-
--accent-foreground: 220.9 39.3% 11%;
41-
--destructive: 0 84.2% 60.2%;
42-
--destructive-foreground: 210 20% 98%;
43-
--border: 220 13% 91%;
44-
--input: 220 13% 91%;
45-
--ring: 224 71.4% 4.1%;
46-
--radius: 0.5rem;
47-
--chart-1: 12 76% 61%;
48-
--chart-2: 173 58% 39%;
49-
--chart-3: 197 37% 24%;
50-
--chart-4: 43 74% 66%;
51-
--chart-5: 27 87% 67%;
52-
}
53-
54-
.dark {
55-
--background: 224 71.4% 4.1%;
56-
--foreground: 210 20% 98%;
57-
--card: 224 71.4% 4.1%;
58-
--card-foreground: 210 20% 98%;
59-
--popover: 224 71.4% 4.1%;
60-
--popover-foreground: 210 20% 98%;
61-
--primary: 210 20% 98%;
62-
--primary-foreground: 220.9 39.3% 11%;
63-
--secondary: 215 27.9% 16.9%;
64-
--secondary-foreground: 210 20% 98%;
65-
--muted: 215 27.9% 16.9%;
66-
--muted-foreground: 217.9 10.6% 64.9%;
67-
--accent: 215 27.9% 16.9%;
68-
--accent-foreground: 210 20% 98%;
69-
--destructive: 0 62.8% 30.6%;
70-
--destructive-foreground: 210 20% 98%;
71-
--border: 215 27.9% 16.9%;
72-
--input: 215 27.9% 16.9%;
73-
--ring: 216 12.2% 83.9%;
74-
--chart-1: 220 70% 50%;
75-
--chart-2: 160 60% 45%;
76-
--chart-3: 30 80% 55%;
77-
--chart-4: 280 65% 60%;
78-
--chart-5: 340 75% 55%;
79-
}
42+
.dark {
43+
--background: oklch(0.129 0.042 264.695);
44+
--foreground: oklch(0.984 0.003 247.858);
45+
--card: oklch(0.208 0.042 265.755);
46+
--card-foreground: oklch(0.984 0.003 247.858);
47+
--popover: oklch(0.208 0.042 265.755);
48+
--popover-foreground: oklch(0.984 0.003 247.858);
49+
--primary: oklch(0.929 0.013 255.508);
50+
--primary-foreground: oklch(0.208 0.042 265.755);
51+
--secondary: oklch(0.279 0.041 260.031);
52+
--secondary-foreground: oklch(0.984 0.003 247.858);
53+
--muted: oklch(0.279 0.041 260.031);
54+
--muted-foreground: oklch(0.704 0.04 256.788);
55+
--accent: oklch(0.279 0.041 260.031);
56+
--accent-foreground: oklch(0.984 0.003 247.858);
57+
--destructive: oklch(0.704 0.191 22.216);
58+
--border: oklch(1 0 0 / 10%);
59+
--input: oklch(1 0 0 / 15%);
60+
--ring: oklch(0.551 0.027 264.364);
61+
--chart-1: oklch(0.488 0.243 264.376);
62+
--chart-2: oklch(0.696 0.17 162.48);
63+
--chart-3: oklch(0.769 0.188 70.08);
64+
--chart-4: oklch(0.627 0.265 303.9);
65+
--chart-5: oklch(0.645 0.246 16.439);
66+
--sidebar: oklch(0.208 0.042 265.755);
67+
--sidebar-foreground: oklch(0.984 0.003 247.858);
68+
--sidebar-primary: oklch(0.488 0.243 264.376);
69+
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
70+
--sidebar-accent: oklch(0.279 0.041 260.031);
71+
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
72+
--sidebar-border: oklch(1 0 0 / 10%);
73+
--sidebar-ring: oklch(0.551 0.027 264.364);
74+
}
75+
76+
@theme inline {
77+
--color-background: var(--background);
78+
--color-foreground: var(--foreground);
79+
--color-card: var(--card);
80+
--color-card-foreground: var(--card-foreground);
81+
--color-popover: var(--popover);
82+
--color-popover-foreground: var(--popover-foreground);
83+
--color-primary: var(--primary);
84+
--color-primary-foreground: var(--primary-foreground);
85+
--color-secondary: var(--secondary);
86+
--color-secondary-foreground: var(--secondary-foreground);
87+
--color-muted: var(--muted);
88+
--color-muted-foreground: var(--muted-foreground);
89+
--color-accent: var(--accent);
90+
--color-accent-foreground: var(--accent-foreground);
91+
--color-destructive: var(--destructive);
92+
--color-destructive-foreground: var(--destructive-foreground);
93+
--color-border: var(--border);
94+
--color-input: var(--input);
95+
--color-ring: var(--ring);
96+
--color-chart-1: var(--chart-1);
97+
--color-chart-2: var(--chart-2);
98+
--color-chart-3: var(--chart-3);
99+
--color-chart-4: var(--chart-4);
100+
--color-chart-5: var(--chart-5);
101+
--radius-sm: calc(var(--radius) - 4px);
102+
--radius-md: calc(var(--radius) - 2px);
103+
--radius-lg: var(--radius);
104+
--radius-xl: calc(var(--radius) + 4px);
105+
--color-sidebar: var(--sidebar);
106+
--color-sidebar-foreground: var(--sidebar-foreground);
107+
--color-sidebar-primary: var(--sidebar-primary);
108+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
109+
--color-sidebar-accent: var(--sidebar-accent);
110+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
111+
--color-sidebar-border: var(--sidebar-border);
112+
--color-sidebar-ring: var(--sidebar-ring);
80113
}
81114

82115
@layer base {
83116
* {
84-
@apply border-border;
117+
@apply border-border outline-ring/50;
85118
}
86119
body {
87120
@apply bg-background text-foreground;
88121
}
89122
}
90123

91-
@theme {
92-
--color-border: hsl(var(--border));
93-
--color-input: hsl(var(--input));
94-
--color-ring: hsl(var(--ring));
95-
--color-background: hsl(var(--background));
96-
--color-foreground: hsl(var(--foreground));
97-
98-
--color-primary: hsl(var(--primary));
99-
--color-primary-foreground: hsl(var(--primary-foreground));
100-
101-
--color-secondary: hsl(var(--secondary));
102-
--color-secondary-foreground: hsl(var(--secondary-foreground));
103-
104-
--color-destructive: hsl(var(--destructive));
105-
--color-destructive-foreground: hsl(var(--destructive-foreground));
106-
107-
--color-muted: hsl(var(--muted));
108-
--color-muted-foreground: hsl(var(--muted-foreground));
109-
110-
--color-accent: hsl(var(--accent));
111-
--color-accent-foreground: hsl(var(--accent-foreground));
112-
113-
--color-popover: hsl(var(--popover));
114-
--color-popover-foreground: hsl(var(--popover-foreground));
115-
116-
--color-card: hsl(var(--card));
117-
--color-card-foreground: hsl(var(--card-foreground));
118-
119-
--padding-0_5: 0.15rem;
120-
121-
--radius-lg: var(--radius);
122-
--radius-md: calc(var(--radius) - 2px);
123-
--radius-sm: calc(var(--radius) - 4px);
124-
125-
--animate-accordion-down: accordion-down 0.2s ease-out;
126-
--animate-accordion-up: accordion-up 0.2s ease-out;
127-
128-
@keyframes accordion-down {
129-
from {
130-
height: 0;
131-
}
132-
to {
133-
height: var(--radix-accordion-content-height);
134-
}
135-
}
136-
@keyframes accordion-up {
137-
from {
138-
height: var(--radix-accordion-content-height);
139-
}
140-
to {
141-
height: 0;
142-
}
143-
}
144-
}
145-
146124
@utility container {
147125
margin-inline: auto;
148126
padding-inline: 2rem;

‎src/app/layout.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { SiteSidebar } from "@/components/sidebar"
88
import { TailwindIndicator } from "@/components/tailwind-indicator"
99
import { ThemeProvider } from "@/components/theme-provider"
1010
import { PackageInstallScript } from "renoun/components"
11+
import { ThemeStyles } from "renoun/components/Theme/Theme"
1112

1213
export const metadata: Metadata = {
1314
title: {
@@ -33,9 +34,10 @@ export default function RootLayout({
3334
<html lang="en" suppressHydrationWarning>
3435
<head />
3536
<body>
37+
<ThemeStyles />
3638
<PackageInstallScript />
3739
<ThemeProvider
38-
attribute="class"
40+
attribute={["class", "data-theme"]}
3941
defaultTheme="system"
4042
enableSystem
4143
disableTransitionOnChange

0 commit comments

Comments
 (0)