Skip to content

Commit 881225e

Browse files
devmountdevmount
committed
📦️ Upgrade to Tailwindcss v4
1 parent 599c4fd commit 881225e

22 files changed

+3857
-4865
lines changed

‎frontend/package-lock.json‎

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

‎frontend/package.json‎

Lines changed: 65 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,67 @@
11
{
2-
"name": "songdrive",
3-
"description": "A song management tool to store, synchronize and present songs and setlists. Built with Vue.js and Firebase.",
4-
"version": "3.1.4",
5-
"license": "MIT",
6-
"author": {
7-
"name": "Andreas Müller",
8-
"url": "https://devmount.de"
9-
},
10-
"repository": {
11-
"type": "git",
12-
"url": "https://github.com/devmount/SongDrive.git"
13-
},
14-
"homepage": "https://github.com/devmount/SongDrive",
15-
"keywords": [
16-
"firebase",
17-
"firestore",
18-
"music",
19-
"song-management",
20-
"vue",
21-
"songs",
22-
"setlists",
23-
"presentation"
24-
],
25-
"bugs": "https://github.com/devmount/SongDrive/issues",
26-
"browser": "./dist/index.html",
27-
"scripts": {
28-
"dev": "vite",
29-
"build": "vite build",
30-
"serve": "vite preview"
31-
},
32-
"dependencies": {
33-
"@kyvg/vue3-notification": "^3.1.3",
34-
"@tabler/icons-vue": "^3.3.0",
35-
"@vuepic/vue-datepicker": "^11.0.0",
36-
"@vueuse/core": "^12.3.0",
37-
"@vueuse/math": "^12.3.0",
38-
"@zip.js/zip.js": "^2.7.45",
39-
"chart.js": "^4.0.1",
40-
"date-fns": "^4.0.0",
41-
"firebase": "^10.0.0",
42-
"highlight.js": "^11.3.1",
43-
"marked": "^15.0.6",
44-
"marked-highlight": "^2.1.0",
45-
"pdfmake": "^0.2.2",
46-
"vue": "^3.2.37",
47-
"vue-i18n": "^11.0.1",
48-
"vue-prism-editor": "^2.0.0-alpha.2",
49-
"vue-router": "^4.0.16",
50-
"vue3-carousel": "^0.14.0",
51-
"vuedraggable": "^4.1.0"
52-
},
53-
"devDependencies": {
54-
"@tailwindcss/forms": "^0.5.10",
55-
"@vitejs/plugin-vue": "^5.0.3",
56-
"autoprefixer": "^10.4.13",
57-
"postcss": "^8.4.20",
58-
"tailwindcss": "^3.2.4",
59-
"vite": "^6.0.7"
60-
},
61-
"postcss": {
62-
"plugins": {
63-
"tailwindcss": {},
64-
"autoprefixer": {}
65-
}
66-
},
67-
"browserslist": [
68-
"> 1%",
69-
"last 2 versions",
70-
"not dead",
71-
"not ie 11"
72-
],
73-
"type": "module"
2+
"name": "songdrive",
3+
"description": "A song management tool to store, synchronize and present songs and setlists. Built with Vue.js and Firebase.",
4+
"version": "3.1.4",
5+
"license": "MIT",
6+
"author": {
7+
"name": "Andreas Müller",
8+
"url": "https://devmount.de"
9+
},
10+
"repository": {
11+
"type": "git",
12+
"url": "https://github.com/devmount/SongDrive.git"
13+
},
14+
"homepage": "https://github.com/devmount/SongDrive",
15+
"keywords": [
16+
"firebase",
17+
"firestore",
18+
"music",
19+
"song-management",
20+
"vue",
21+
"songs",
22+
"setlists",
23+
"presentation"
24+
],
25+
"bugs": "https://github.com/devmount/SongDrive/issues",
26+
"browser": "./dist/index.html",
27+
"scripts": {
28+
"dev": "vite",
29+
"build": "vite build",
30+
"serve": "vite preview"
31+
},
32+
"dependencies": {
33+
"@kyvg/vue3-notification": "^3.1.3",
34+
"@tabler/icons-vue": "^3.3.0",
35+
"@vuepic/vue-datepicker": "^11.0.0",
36+
"@vueuse/core": "^13.0.0",
37+
"@vueuse/math": "^13.0.0",
38+
"@zip.js/zip.js": "^2.7.45",
39+
"chart.js": "^4.0.1",
40+
"date-fns": "^4.0.0",
41+
"firebase": "^10.0.0",
42+
"highlight.js": "^11.3.1",
43+
"marked": "^15.0.6",
44+
"marked-highlight": "^2.1.0",
45+
"pdfmake": "^0.2.2",
46+
"vue": "^3.2.37",
47+
"vue-i18n": "^11.0.1",
48+
"vue-prism-editor": "^2.0.0-alpha.2",
49+
"vue-router": "^4.0.16",
50+
"vue3-carousel": "^0.14.0",
51+
"vuedraggable": "^4.1.0"
52+
},
53+
"devDependencies": {
54+
"@tailwindcss/vite": "^4.0.14",
55+
"@tailwindcss/forms": "^0.5.10",
56+
"@vitejs/plugin-vue": "^5.0.3",
57+
"tailwindcss": "^4.0.14",
58+
"vite": "^6.0.7"
59+
},
60+
"browserslist": [
61+
"> 1%",
62+
"last 2 versions",
63+
"not dead",
64+
"not ie 11"
65+
],
66+
"type": "module"
7467
}

‎frontend/src/App.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<!-- menu sidebar -->
2121
<div
2222
class="fixed shrink-0 -right-64 lg:left-0 lg:right-auto top-0 transition-all z-30 min-h-screen w-64 flex flex-col px-2 py-8 bg-blade-200 dark:bg-blade-900"
23-
:class="{ '!right-0': open }"
23+
:class="{ 'right-0!': open }"
2424
>
2525
<router-link :to="{ name: 'dashboard' }" class="flex flex-col w-max mx-auto mb-4 no-active">
2626
<logo :featured="false" :show-version="true" />
@@ -45,7 +45,7 @@
4545
<div v-if="ready.songs" class="font-bold">{{ Object.keys(c.songs).length }}</div>
4646
<secondary-button
4747
v-if="userRoles[c.permissions[auth.user].role] > 2"
48-
class="!p-1"
48+
class="p-1!"
4949
:title="t('tooltip.songAdd')"
5050
@click.stop.prevent="createNewSong"
5151
>
@@ -64,7 +64,7 @@
6464
<label v-if="ready.setlists" class="font-bold">{{ setlistCount }}</label>
6565
<secondary-button
6666
v-if="userRoles[c.permissions[auth.user].role] > 1"
67-
class="!p-1"
67+
class="p-1!"
6868
:title="t('tooltip.setlistAdd')"
6969
@click.stop.prevent="createNewSetlist"
7070
>
@@ -206,7 +206,7 @@
206206
<notifications position="bottom right" :duration="5000" width="">
207207
<template #body="props">
208208
<div
209-
class="mb-1 mx-1 xs:mb-2 xs:mx-2 py-2 px-3 rounded-sm text-white"
209+
class="mb-1 mx-1 xs:mb-2 xs:mx-2 py-2 px-3 rounded-xs text-white"
210210
:class="{
211211
'bg-spring-700': props.item.type === 'primary',
212212
'bg-rose-700': props.item.type === 'error',

‎frontend/src/assets/main.css‎

Lines changed: 102 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,92 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import 'tailwindcss';
2+
3+
@plugin '@tailwindcss/forms';
4+
5+
@custom-variant dark (&:is(.dark *));
6+
7+
@theme {
8+
--font-*: initial;
9+
--font-mono:
10+
'Fira Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
11+
'Liberation Mono', 'Courier New', monospace;
12+
--font-fira:
13+
'Fira Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
14+
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
15+
16+
--shadow-m: 0 4px 10px -4px rgb(0 0 0 / 0.5);
17+
--shadow-l: 0 5px 20px -10px rgb(0 0 0 / 0.95);
18+
19+
--color-spring-400: #bbdd77;
20+
--color-spring-600: #88b544;
21+
--color-spring-700: #759b3b;
22+
23+
--color-zinc-750: #313137;
24+
--color-zinc-850: #1f1f21;
25+
26+
--color-blade-50: #f9fafa;
27+
--color-blade-100: #f4f5f6;
28+
--color-blade-200: #e6e7ea;
29+
--color-blade-300: #d3d6d9;
30+
--color-blade-350: #bbbec3;
31+
--color-blade-400: #a0a4ab;
32+
--color-blade-500: #6f737b;
33+
--color-blade-600: #50565e;
34+
--color-blade-700: #3d434c;
35+
--color-blade-750: #30343b;
36+
--color-blade-800: #242a32;
37+
--color-blade-850: #1e2229;
38+
--color-blade-900: #161a22;
39+
--color-blade-950: #0a0c0f;
40+
41+
--grid-template-columns-2\/1: minmax(0, 2fr) minmax(0, 1fr);
42+
43+
--container-3xs: 12rem;
44+
--container-2xs: 16rem;
45+
46+
--breakpoint-2xs: 360px;
47+
--breakpoint-xs: 480px;
48+
--breakpoint-3xl: 1792px;
49+
50+
--height-2\/3v: 66.666667vh;
51+
--height-3\/4v: 75vh;
52+
--height-4\/5v: 80vh;
53+
54+
--stroke-width-10: 10;
55+
--stroke-width-1_5: 1.5;
56+
}
57+
58+
/*
59+
The default border color has changed to `currentColor` in Tailwind CSS v4,
60+
so we've added these compatibility styles to make sure everything still
61+
looks the same as it did with Tailwind CSS v3.
62+
63+
If we ever want to remove these styles, we need to add an explicit border
64+
color utility to any element that depends on these defaults.
65+
*/
66+
@layer base {
67+
*,
68+
::after,
69+
::before,
70+
::backdrop,
71+
::file-selector-button {
72+
border-color: var(--color-gray-200, currentColor);
73+
}
74+
}
75+
76+
@utility position-center {
77+
/* centering absolute or fixed positioned elements */
78+
@apply top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
79+
}
480

581
@layer base {
682
input, select, textarea {
7-
@apply transition-all !py-1.5 border-blade-400 dark:border-black focus:!ring-4 focus:!ring-spring-400/20 hover:!border-spring-400 focus:!border-spring-600 dark:!bg-blade-900 dark:!text-blade-100 hover:disabled:!border-black;
83+
@apply transition-all py-1.5! border-blade-400 dark:border-black focus:ring-4! focus:ring-spring-400/20! hover:border-spring-400! focus:border-spring-600! dark:bg-blade-900! dark:text-blade-100! hover:disabled:border-black!;
884
}
985
button, a {
10-
@apply transition-all;
86+
@apply cursor-pointer transition-all;
1187
}
1288
kbd {
13-
@apply font-mono rounded text-blade-600 dark:text-blade-200 bg-blade-300 dark:bg-blade-900 border border-b-4 border-blade-400 dark:border-blade-700 px-2 py-1
89+
@apply font-mono rounded-sm text-blade-600 dark:text-blade-200 bg-blade-300 dark:bg-blade-900 border border-b-4 border-blade-400 dark:border-blade-700 px-2 py-1
1490
}
1591
th {
1692
@apply text-left
@@ -23,13 +99,6 @@
2399
}
24100
}
25101

26-
@layer components {
27-
/* centering absolute or fixed positioned elements */
28-
.position-center {
29-
@apply top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
30-
}
31-
}
32-
33102
/* generated router links */
34103
.router-link-active:not(.no-active) {
35104
@apply bg-blade-300 dark:bg-blade-800
@@ -72,7 +141,7 @@ kbd > * {
72141
@apply text-spring-600 hover:text-white
73142
}
74143
.markdown code {
75-
@apply rounded-sm bg-blade-750 px-1.5 py-0.5 text-sm
144+
@apply rounded-xs bg-blade-750 px-1.5 py-0.5 text-sm
76145
}
77146
.markdown pre code {
78147
@apply bg-blade-900 mb-4
@@ -86,7 +155,7 @@ kbd > * {
86155

87156
/* songdrive syntax and prism editor */
88157
.language-songdrive {
89-
@apply block !p-4
158+
@apply block p-4!
90159
}
91160
.language-songdrive .sd-marker,
92161
.prism-editor__editor .sd-marker {
@@ -105,31 +174,31 @@ kbd > * {
105174
@apply transition-all p-1.5 border border-blade-400 dark:border-black focus:ring-4 focus:ring-spring-400/20 hover:border-spring-400 focus:border-spring-600 dark:bg-blade-900 dark:text-blade-100 hover:disabled:border-black;
106175
}
107176
.prism-editor__textarea {
108-
@apply !p-0
177+
@apply p-0!
109178
}
110179
.prism-editor__textarea:focus {
111-
@apply outline-none
180+
@apply outline-hidden
112181
}
113182

114183
/* date picker */
115184
.dp__theme_dark {
116-
--dp-background-color: theme(colors.blade.900);
117-
--dp-text-color: theme(colors.inherit);
118-
--dp-hover-color: theme(colors.blade.700);
119-
--dp-hover-text-color: theme(colors.white);
120-
--dp-hover-icon-color: theme(colors.white);
121-
--dp-primary-color: theme(colors.spring.600);
122-
--dp-primary-text-color: theme(colors.white);
123-
--dp-secondary-color: theme(colors.blade.500);
124-
--dp-border-color: theme(colors.black);
125-
--dp-menu-border-color: theme(colors.black);
126-
--dp-icon-color: theme(colors.inherit);
185+
--dp-background-color: var(--color-blade-900);
186+
--dp-text-color: inherit;
187+
--dp-hover-color: var(--color-blade-700);
188+
--dp-hover-text-color: var(--color-white);
189+
--dp-hover-icon-color: var(--color-white);
190+
--dp-primary-color: var(--color-spring-600);
191+
--dp-primary-text-color: var(--color-white);
192+
--dp-secondary-color: var(--color-blade-500);
193+
--dp-border-color: var(--color-black);
194+
--dp-menu-border-color: var(--color-black);
195+
--dp-icon-color: inherit;
127196
}
128197
.dp__theme_light {
129-
--dp-text-color: theme(colors.inherit);
130-
--dp-primary-color: theme(colors.spring.700);
131-
--dp-primary-text-color: theme(colors.white);
132-
--dp-icon-color: theme(colors.inherit);
198+
--dp-text-color: inherit;
199+
--dp-primary-color: var(--color-spring-700);
200+
--dp-primary-text-color: var(--color-white);
201+
--dp-icon-color: inherit;
133202
}
134203
.dp__menu,
135204
.dp__calendar,
@@ -148,5 +217,5 @@ kbd > * {
148217
}
149218
.dp__cell_inner,
150219
.dp__calendar_header_item {
151-
@apply h-10 w-auto !rounded-sm
220+
@apply h-10 w-auto rounded-xs!
152221
}

‎frontend/src/elements/Dropdown.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<transition-scale>
1111
<div v-if="open" class="relative">
1212
<div
13-
class="absolute right-0 p-1 bg-blade-200 dark:bg-blade-900 z-10 w-max rounded-sm shadow-lg flex flex-col gap-1"
13+
class="absolute right-0 p-1 bg-blade-200 dark:bg-blade-900 z-10 w-max rounded-xs shadow-lg flex flex-col gap-1"
1414
:class="{
1515
'top-0': !position || position === positions.down,
1616
'bottom-10': position === positions.up,

0 commit comments

Comments
 (0)