One Calendar is a privacy-first calendar web app built with Next.js. It has modern security features, including e2ee, password-protected sharing, and self-destructing share links 📅
calendar.xyehr.cn
chore: migrate Tailwind CSS to v4.2.1
+87
-103
+69
-3
app/globals.css
+69
-3
app/globals.css
···
1
-
@tailwind base;
2
-
@tailwind components;
3
-
@tailwind utilities;
1
+
@import "tailwindcss";
2
+
@plugin "tailwindcss-animate";
3
+
4
+
@custom-variant dark (&:is(.dark *));
5
+
@custom-variant green (&:is(.green *));
6
+
@custom-variant orange (&:is(.orange *));
7
+
@custom-variant azalea (&:is(.azalea *));
8
+
@custom-variant pink (&:is(.pink *));
9
+
@custom-variant crimson (&:is(.crimson *));
10
+
11
+
@theme inline {
12
+
--color-background: hsl(var(--background));
13
+
--color-foreground: hsl(var(--foreground));
14
+
--color-card: hsl(var(--card));
15
+
--color-card-foreground: hsl(var(--card-foreground));
16
+
--color-popover: hsl(var(--popover));
17
+
--color-popover-foreground: hsl(var(--popover-foreground));
18
+
--color-primary: hsl(var(--primary));
19
+
--color-primary-foreground: hsl(var(--primary-foreground));
20
+
--color-secondary: hsl(var(--secondary));
21
+
--color-secondary-foreground: hsl(var(--secondary-foreground));
22
+
--color-muted: hsl(var(--muted));
23
+
--color-muted-foreground: hsl(var(--muted-foreground));
24
+
--color-accent: hsl(var(--accent));
25
+
--color-accent-foreground: hsl(var(--accent-foreground));
26
+
--color-destructive: hsl(var(--destructive));
27
+
--color-destructive-foreground: hsl(var(--destructive-foreground));
28
+
--color-border: hsl(var(--border));
29
+
--color-input: hsl(var(--input));
30
+
--color-ring: hsl(var(--ring));
31
+
--color-chart-1: hsl(var(--chart-1));
32
+
--color-chart-2: hsl(var(--chart-2));
33
+
--color-chart-3: hsl(var(--chart-3));
34
+
--color-chart-4: hsl(var(--chart-4));
35
+
--color-chart-5: hsl(var(--chart-5));
36
+
--color-sidebar-background: hsl(var(--sidebar-background));
37
+
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
38
+
--color-sidebar-primary: hsl(var(--sidebar-primary));
39
+
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
40
+
--color-sidebar-accent: hsl(var(--sidebar-accent));
41
+
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
42
+
--color-sidebar-border: hsl(var(--sidebar-border));
43
+
--color-sidebar-ring: hsl(var(--sidebar-ring));
44
+
45
+
--radius-lg: var(--radius);
46
+
--radius-md: calc(var(--radius) - 2px);
47
+
--radius-sm: calc(var(--radius) - 4px);
48
+
49
+
--animate-accordion-down: accordion-down 0.2s ease-out;
50
+
--animate-accordion-up: accordion-up 0.2s ease-out;
51
+
}
52
+
53
+
@keyframes accordion-down {
54
+
from {
55
+
height: 0;
56
+
}
57
+
to {
58
+
height: var(--radix-accordion-content-height);
59
+
}
60
+
}
61
+
62
+
@keyframes accordion-up {
63
+
from {
64
+
height: var(--radix-accordion-content-height);
65
+
}
66
+
to {
67
+
height: 0;
68
+
}
69
+
}
4
70
5
71
html {
6
72
scroll-behavior: smooth;
+16
-16
package.json
+16
-16
package.json
···
15
15
"generate:oauth-metadata": "bun lib/gen-oauth-metadata.mjs"
16
16
},
17
17
"dependencies": {
18
+
"@clerk/localizations": "latest",
19
+
"@clerk/nextjs": "latest",
18
20
"@hookform/resolvers": "5.2.2",
19
-
"radix-ui": "latest",
21
+
"@marsidev/react-turnstile": "latest",
20
22
"@radix-ui/react-accordion": "latest",
21
23
"@radix-ui/react-alert-dialog": "^1.1.7",
22
24
"@radix-ui/react-avatar": "^1.1.2",
···
41
43
"@radix-ui/react-toggle": "^1.1.1",
42
44
"@radix-ui/react-toggle-group": "^1.1.1",
43
45
"@radix-ui/react-tooltip": "^1.1.6",
44
-
"autoprefixer": "^10.4.20",
45
46
"class-variance-authority": "^0.7.1",
46
47
"clsx": "^2.1.1",
47
48
"cmdk": "latest",
48
49
"date-fns": "4.1.0",
49
50
"embla-carousel-react": "8.6.0",
51
+
"framer-motion": "^12.7.4",
52
+
"geist": "latest",
53
+
"ics": "latest",
50
54
"input-otp": "1.4.2",
51
55
"lucide-react": "latest",
56
+
"motion": "latest",
52
57
"next": "16.1.6",
53
58
"next-themes": "latest",
59
+
"pg": "latest",
60
+
"qr-code-styling": "latest",
61
+
"radix-ui": "latest",
54
62
"react": "^18",
55
63
"react-day-picker": "8.10.1",
56
64
"react-dom": "^18",
57
65
"react-hook-form": "^7.54.1",
66
+
"react-markdown": "latest",
58
67
"react-resizable-panels": "^2.1.7",
59
68
"recharts": "3.7.0",
69
+
"remark-gfm": "latest",
70
+
"sonner": "2.0.7",
60
71
"tailwind-merge": "^2.5.5",
61
72
"tailwindcss-animate": "^1.0.7",
62
73
"vaul": "1.1.2",
63
-
"zod": "4.3.6",
64
-
"ics": "latest",
65
-
"framer-motion": "^12.7.4",
66
-
"motion": "latest",
67
-
"qr-code-styling": "latest",
68
-
"@clerk/nextjs": "latest",
69
-
"@clerk/localizations": "latest",
70
-
"geist": "latest",
71
-
"sonner": "2.0.7",
72
-
"@marsidev/react-turnstile": "latest",
73
-
"pg": "latest",
74
-
"remark-gfm": "latest",
75
-
"react-markdown": "latest"
74
+
"zod": "4.3.6"
76
75
},
77
76
"devDependencies": {
77
+
"@tailwindcss/postcss": "4.2.1",
78
78
"@types/node": "25.2.3",
79
79
"@types/react": "^18",
80
80
"@types/react-dom": "^18",
81
81
"postcss": "8.5.6",
82
-
"tailwindcss": "3.4.19",
82
+
"tailwindcss": "4.2.1",
83
83
"turbo": "2.8.7",
84
84
"typescript": "5.9.3"
85
85
}
+1
-1
postcss.config.mjs
+1
-1
postcss.config.mjs
+1
-83
tailwind.config.ts
+1
-83
tailwind.config.ts
···
1
1
import type { Config } from "tailwindcss";
2
2
3
-
export default {
4
-
darkMode: ["class"],
5
-
content: [
6
-
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
7
-
"./components/**/*.{js,ts,jsx,tsx,mdx}",
8
-
"./app/**/*.{js,ts,jsx,tsx,mdx}",
9
-
],
10
-
theme: {
11
-
extend: {
12
-
colors: {
13
-
background: 'hsl(var(--background))',
14
-
foreground: 'hsl(var(--foreground))',
15
-
card: {
16
-
DEFAULT: 'hsl(var(--card))',
17
-
foreground: 'hsl(var(--card-foreground))'
18
-
},
19
-
popover: {
20
-
DEFAULT: 'hsl(var(--popover))',
21
-
foreground: 'hsl(var(--popover-foreground))'
22
-
},
23
-
primary: {
24
-
DEFAULT: 'hsl(var(--primary))',
25
-
foreground: 'hsl(var(--primary-foreground))'
26
-
},
27
-
secondary: {
28
-
DEFAULT: 'hsl(var(--secondary))',
29
-
foreground: 'hsl(var(--secondary-foreground))'
30
-
},
31
-
muted: {
32
-
DEFAULT: 'hsl(var(--muted))',
33
-
foreground: 'hsl(var(--muted-foreground))'
34
-
},
35
-
accent: {
36
-
DEFAULT: 'hsl(var(--accent))',
37
-
foreground: 'hsl(var(--accent-foreground))'
38
-
},
39
-
destructive: {
40
-
DEFAULT: 'hsl(var(--destructive))',
41
-
foreground: 'hsl(var(--destructive-foreground))'
42
-
},
43
-
border: 'hsl(var(--border))',
44
-
input: 'hsl(var(--input))',
45
-
ring: 'hsl(var(--ring))',
46
-
chart: {
47
-
'1': 'hsl(var(--chart-1))',
48
-
'2': 'hsl(var(--chart-2))',
49
-
'3': 'hsl(var(--chart-3))',
50
-
'4': 'hsl(var(--chart-4))',
51
-
'5': 'hsl(var(--chart-5))'
52
-
}
53
-
},
54
-
borderRadius: {
55
-
lg: 'var(--radius)',
56
-
md: 'calc(var(--radius) - 2px)',
57
-
sm: 'calc(var(--radius) - 4px)'
58
-
},
59
-
keyframes: {
60
-
"accordion-down": {
61
-
from: { height: "0" },
62
-
to: { height: "var(--radix-accordion-content-height)" },
63
-
},
64
-
"accordion-up": {
65
-
from: { height: "var(--radix-accordion-content-height)" },
66
-
to: { height: "0" },
67
-
},
68
-
},
69
-
animation: {
70
-
"accordion-down": "accordion-down 0.2s ease-out",
71
-
"accordion-up": "accordion-up 0.2s ease-out",
72
-
},
73
-
}
74
-
},
75
-
plugins: [
76
-
require("tailwindcss-animate"),
77
-
function ({ addVariant }) {
78
-
addVariant('green', '.green &')
79
-
addVariant('orange', '.orange &')
80
-
addVariant('azalea', '.azalea &')
81
-
addVariant('pink', '.pink &')
82
-
addVariant('crimson', '.crimson &')
83
-
},
84
-
],
85
-
} satisfies Config;
3
+
export default {} satisfies Config;