Skip to content

Commit b386094

Browse files
LucaRickliLucaRickli
authored
chore: update tailwind to v4 (#135)
* chore: update tailwind to v4 * chore: update tailwind ecosystem * fix: theme
1 parent e26b8dc commit b386094

9 files changed

Lines changed: 613 additions & 796 deletions

File tree

‎deno.lock‎

Lines changed: 458 additions & 513 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,33 @@
1010
"check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
1111
},
1212
"devDependencies": {
13-
"@lucide/svelte": "^0.482.0",
13+
"@lucide/svelte": "^0.562.0",
1414
"@sveltejs/vite-plugin-svelte": "^5.0.3",
15+
"@tailwindcss/vite": "^4.1.18",
1516
"@tsconfig/svelte": "^5.0.4",
1617
"@types/golang-wasm-exec": "^1.15.2",
1718
"@types/json-schema": "^7.0.15",
1819
"@types/node": "^22.13.5",
1920
"@types/novnc__novnc": "^1.5.0",
2021
"@types/serviceworker": "^0.0.158",
2122
"autoprefixer": "^10.4.20",
22-
"bits-ui": "^1.8.0",
23+
"bits-ui": "^2.14.4",
2324
"clsx": "^2.1.1",
2425
"dotenv": "^17.0.0",
26+
"formsnap": "^2.0.1",
2527
"lucide-svelte": "^0.476.0",
2628
"mode-watcher": "^0.5.1",
2729
"monaco-editor": "^0.54.0",
30+
"paneforge": "^1.0.0-next.6",
2831
"shadcn-svelte": "^1.0.0-next.4",
2932
"svelte": "^5.20.2",
3033
"svelte-check": "^4.1.4",
31-
"tailwind-merge": "^3.0.2",
32-
"tailwind-variants": "^0.2.1",
33-
"tailwindcss": "^3.4.17",
34-
"tailwindcss-animate": "^1.0.7",
34+
"tailwind-merge": "^3.4.0",
35+
"tailwind-variants": "^3.2.2",
36+
"tailwindcss": "^4.1.18",
37+
"tw-animate-css": "^1.4.0",
3538
"typescript": "~5.7.2",
39+
"vaul-svelte": "^1.0.0-next.7",
3640
"vite": "^6.2.0",
3741
"vite-plugin-pwa": "^1.0.3",
3842
"@novnc/novnc": "1.5.0",
@@ -43,7 +47,7 @@
4347
"ip-address": "^10.0.1",
4448
"qrcode-svg": "^1.1.0",
4549
"rxjs": "^7.8.2",
46-
"svelte-sonner": "^1.0.3",
50+
"svelte-sonner": "^1.0.7",
4751
"ua-parser-js": "^2.0.3",
4852
"workbox-precaching": "^7.4.0",
4953
"workbox-routing": "^7.4.0",

‎postcss.config.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/app.css‎

Lines changed: 127 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,116 @@
1-
@import "@xterm/xterm/css/xterm.css";
2-
3-
@tailwind base;
4-
@tailwind components;
5-
@tailwind utilities;
1+
@import "@xterm/xterm/css/xterm.css" layer(base);
2+
3+
@import "tailwindcss";
4+
@import "tw-animate-css";
5+
6+
@config '../tailwind.config.ts';
7+
8+
@custom-variant dark (&:is(.dark *));
9+
10+
:root {
11+
--background: hsl(0 0% 100%);
12+
--foreground: hsl(240 10% 3.9%);
13+
--muted: hsl(240 4.8% 96.1%);
14+
--muted-foreground: hsl(240 3.8% 46.1%);
15+
--popover: hsl(0 0% 100%);
16+
--popover-foreground: hsl(240 10% 3.9%);
17+
--card: hsl(0 0% 100%);
18+
--card-foreground: hsl(240 10% 3.9%);
19+
--border: hsl(240 5.9% 90%);
20+
--input: hsl(240 5.9% 90%);
21+
--primary: hsl(240 5.9% 10%);
22+
--primary-foreground: hsl(0 0% 98%);
23+
--secondary: hsl(240 4.8% 95.9%);
24+
--secondary-foreground: hsl(240 5.9% 10%);
25+
--accent: hsl(240 4.8% 95.9%);
26+
--accent-foreground: hsl(240 5.9% 10%);
27+
--destructive: hsl(0 72.2% 50.6%);
28+
--destructive-foreground: hsl(0 0% 98%);
29+
--ring: hsl(240 10% 3.9%);
30+
--sidebar: hsl(0 0% 98%);
31+
--sidebar-foreground: hsl(240 5.3% 26.1%);
32+
--sidebar-primary: hsl(240 5.9% 10%);
33+
--sidebar-primary-foreground: hsl(0 0% 98%);
34+
--sidebar-accent: hsl(240 4.8% 95.9%);
35+
--sidebar-accent-foreground: hsl(240 5.9% 10%);
36+
--sidebar-border: hsl(220 13% 91%);
37+
--sidebar-ring: hsl(217.2 91.2% 59.8%);
38+
--warning: oklch(0.84 0.16 84);
39+
--warning-foreground: oklch(0.28 0.07 46);
40+
41+
--radius: 0.5rem;
42+
}
643

7-
@layer base {
8-
:root {
9-
--background: 0 0% 100%;
10-
--foreground: 0 0% 3.9%;
11-
--muted: 0 0% 96.1%;
12-
--muted-foreground: 0 0% 45.1%;
13-
--popover: 0 0% 100%;
14-
--popover-foreground: 0 0% 3.9%;
15-
--card: 0 0% 100%;
16-
--card-foreground: 0 0% 3.9%;
17-
--border: 0 0% 89.8%;
18-
--input: 0 0% 89.8%;
19-
--primary: 0 0% 9%;
20-
--primary-foreground: 0 0% 98%;
21-
--secondary: 0 0% 96.1%;
22-
--secondary-foreground: 0 0% 9%;
23-
--accent: 0 0% 96.1%;
24-
--accent-foreground: 0 0% 9%;
25-
--destructive: 0 72.2% 50.6%;
26-
--destructive-foreground: 0 0% 98%;
27-
--ring: 0 0% 3.9%;
28-
--radius: 0.5rem;
29-
--sidebar-background: 0 0% 98%;
30-
--sidebar-foreground: 240 5.3% 26.1%;
31-
--sidebar-primary: 240 5.9% 10%;
32-
--sidebar-primary-foreground: 0 0% 98%;
33-
--sidebar-accent: 240 4.8% 95.9%;
34-
--sidebar-accent-foreground: 240 5.9% 10%;
35-
--sidebar-border: 220 13% 91%;
36-
--sidebar-ring: 217.2 91.2% 59.8%;
37-
}
44+
.dark {
45+
--background: hsl(0 0% 3.9%);
46+
--foreground: hsl(0 0% 98%);
47+
--muted: hsl(0 0% 7.8%);
48+
--muted-foreground: hsl(0 0% 63.9%);
49+
--popover: hsl(240 10% 3.9%);
50+
--popover-foreground: hsl(0 0% 98%);
51+
--card: hsl(240 10% 3.9%);
52+
--card-foreground: hsl(0 0% 98%);
53+
--border: hsl(240 3.7% 15.9%);
54+
--input: hsl(240 3.7% 15.9%);
55+
--primary: hsl(0 0% 98%);
56+
--primary-foreground: hsl(240 5.9% 10%);
57+
--secondary: hsl(240 3.7% 15.9%);
58+
--secondary-foreground: hsl(0 0% 98%);
59+
--accent: hsl(240 3.7% 15.9%);
60+
--accent-foreground: hsl(0 0% 98%);
61+
--destructive: hsl(0 62.8% 30.6%);
62+
--destructive-foreground: hsl(0 0% 98%);
63+
--ring: hsl(240 4.9% 83.9%);
64+
--sidebar: hsl(240 5.9% 10%);
65+
--sidebar-foreground: hsl(240 4.8% 95.9%);
66+
--sidebar-primary: hsl(224.3 76.3% 48%);
67+
--sidebar-primary-foreground: hsl(0 0% 100%);
68+
--sidebar-accent: hsl(240 3.7% 15.9%);
69+
--sidebar-accent-foreground: hsl(240 4.8% 95.9%);
70+
--sidebar-border: hsl(240 3.7% 15.9%);
71+
--sidebar-ring: hsl(217.2 91.2% 59.8%);
72+
--warning: oklch(0.41 0.11 46);
73+
--warning-foreground: oklch(0.99 0.02 95);
74+
}
3875

39-
.dark {
40-
--background: 0 0% 3.9%;
41-
--foreground: 0 0% 98%;
42-
--muted: 0 0% 7.8%;
43-
--muted-foreground: 0 0% 63.9%;
44-
--popover: 0 0% 3.9%;
45-
--popover-foreground: 0 0% 98%;
46-
--card: 0 0% 3.9%;
47-
--card-foreground: 0 0% 98%;
48-
--border: 0 0% 14.9%;
49-
--input: 0 0% 14.9%;
50-
--primary: 0 0% 98%;
51-
--primary-foreground: 0 0% 9%;
52-
--secondary: 0 0% 14.9%;
53-
--secondary-foreground: 0 0% 98%;
54-
--accent: 0 0% 14.9%;
55-
--accent-foreground: 0 0% 98%;
56-
--destructive: 0 62.8% 30.6%;
57-
--destructive-foreground: 0 0% 98%;
58-
--ring: 0 0% 83.1%;
59-
--sidebar-background: 240 5.9% 10%;
60-
--sidebar-foreground: 240 4.8% 95.9%;
61-
--sidebar-primary: 224.3 76.3% 48%;
62-
--sidebar-primary-foreground: 0 0% 100%;
63-
--sidebar-accent: 240 3.7% 15.9%;
64-
--sidebar-accent-foreground: 240 4.8% 95.9%;
65-
--sidebar-border: 240 3.7% 15.9%;
66-
--sidebar-ring: 217.2 91.2% 59.8%;
67-
}
76+
@theme inline {
77+
/* Radius (for rounded-*) */
78+
--radius-sm: calc(var(--radius) - 4px);
79+
--radius-md: calc(var(--radius) - 2px);
80+
--radius-lg: var(--radius);
81+
--radius-xl: calc(var(--radius) + 4px);
82+
83+
/* Colors */
84+
--color-background: var(--background);
85+
--color-foreground: var(--foreground);
86+
--color-muted: var(--muted);
87+
--color-muted-foreground: var(--muted-foreground);
88+
--color-popover: var(--popover);
89+
--color-popover-foreground: var(--popover-foreground);
90+
--color-card: var(--card);
91+
--color-card-foreground: var(--card-foreground);
92+
--color-border: var(--border);
93+
--color-input: var(--input);
94+
--color-primary: var(--primary);
95+
--color-primary-foreground: var(--primary-foreground);
96+
--color-secondary: var(--secondary);
97+
--color-secondary-foreground: var(--secondary-foreground);
98+
--color-accent: var(--accent);
99+
--color-accent-foreground: var(--accent-foreground);
100+
--color-destructive: var(--destructive);
101+
--color-destructive-foreground: var(--destructive-foreground);
102+
--color-ring: var(--ring);
103+
--color-radius: var(--radius);
104+
--color-sidebar: var(--sidebar);
105+
--color-sidebar-foreground: var(--sidebar-foreground);
106+
--color-sidebar-primary: var(--sidebar-primary);
107+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
108+
--color-sidebar-accent: var(--sidebar-accent);
109+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
110+
--color-sidebar-border: var(--sidebar-border);
111+
--color-sidebar-ring: var(--sidebar-ring);
112+
--color-warning: var(--warning);
113+
--color-warning-foreground: var(--warning-foreground);
68114
}
69115

70116
@layer base {
@@ -84,31 +130,27 @@
84130
}
85131
}
86132

87-
@layer utilities {
88-
.link {
89-
@apply text-blue-600 visited:text-blue-700 hover:underline;
90-
}
133+
@utility link {
134+
@apply text-blue-600 visited:text-blue-700 hover:underline;
135+
}
91136

92-
.scrolltrack-hidden {
93-
scrollbar-color: #2a2a2b transparent;
94-
scrollbar-width: none;
95-
}
96-
.scrolltrack-hidden::-webkit-scrollbar-track {
137+
@utility scrolltrack-hidden {
138+
scrollbar-color: #2a2a2b transparent;
139+
scrollbar-width: none;
140+
&::-webkit-scrollbar-track {
97141
@apply border bg-transparent h-0;
98142
}
99143
}
100144

101-
@layer components {
102-
.action-card {
103-
@apply cursor-pointer select-none bg-muted/50 text-muted-foreground hover:bg-muted/40 hover:text-foreground rounded-lg p-4 flex flex-col justify-between gap-1.5;
104-
}
145+
@utility action-card {
146+
@apply cursor-pointer select-none bg-muted/50 text-muted-foreground hover:bg-muted/40 hover:text-foreground rounded-lg p-4 flex flex-col justify-between gap-1.5;
147+
}
105148

106-
.basic-table {
107-
@apply w-full;
108-
th,
109-
td {
110-
@apply px-3 py-1 align-top text-left;
111-
}
149+
@utility basic-table {
150+
@apply w-full;
151+
th,
152+
td {
153+
@apply px-3 py-1 align-top text-left;
112154
}
113155
}
114156

@@ -123,7 +165,7 @@ label:has(+ input[required=""])::after {
123165
}
124166

125167
button[data-dialog-close=""] {
126-
@apply !mt-0;
168+
@apply mt-0!;
127169
}
128170

129171
input::-webkit-outer-spin-button,

0 commit comments

Comments
 (0)