Skip to content

Commit 3b04f77

Browse files
tobiasdieztobiasdiez
authored
chore: migrate to tailwindcss v4 (#2851)
<!-- ☝️ PR title should follow conventional commits (https://conventionalcommits.org). In particular, the title should start with one of the following types: - docs: 📖 Documentation (updates to the documentation or readme) - fix: 🐞 Bug fix (a non-breaking change that fixes an issue) - feat: ✨ New feature/enhancement (a non-breaking change that adds functionality or improves existing one) - feat!/fix!: ⚠️ Breaking change (fix or feature that would cause existing functionality to change) - chore: 🧹 Chore (updates to the build process or auxiliary tools and libraries) --> ### 🔗 Linked issue <!-- If it resolves an open issue, please link the issue here. For example "Resolves #123" --> ### 📚 Description <!-- Describe your changes in detail --> <!-- Why is this change required? What problem does it solve? -->
1 parent d84f11c commit 3b04f77

16 files changed

+573
-855
lines changed

‎app.config.ts‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,19 @@
1-
import theme from '#tailwind-config/theme.mjs'
2-
31
export default defineAppConfig({
42
naiveui: {
53
themeConfig: {
6-
shared: {
7-
common: {
8-
fontFamily: theme.fontFamily.sans.join(', '),
9-
lineHeight: theme.lineHeight.normal,
10-
},
11-
},
124
light: {
135
common: {
14-
primaryColor: theme.colors.primary[500],
15-
primaryColorHover: theme.colors.primary[600],
16-
primaryColorPressed: theme.colors.primary[700],
17-
primaryColorSuppl: theme.colors.primary[600],
6+
primaryColor: '#6072A7',
7+
primaryColorHover: '#4F5F8F',
8+
primaryColorPressed: '#3B476B',
9+
primaryColorSuppl: '#4F5F8F',
1810
},
1911
},
2012
dark: {
2113
common: {
22-
primaryColor: theme.colors.primary[500],
23-
primaryColorHover: theme.colors.primary[400],
24-
primaryColorPressed: theme.colors.primary[600],
14+
primaryColor: '#6072A7',
15+
primaryColorHover: '#7A89B6',
16+
primaryColorPressed: '#4F5F8F',
2517
},
2618
},
2719
},

‎assets/css/main.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
@import 'tailwindcss';
2+
3+
@plugin "@tailwindcss/forms";
4+
@plugin "@tailwindcss/typography";
5+
6+
@theme {
7+
/* Generated with https://www.tailwindshades.com */
8+
--color-primary-50: #d6dbe8;
9+
--color-primary-100: #c9cfe1;
10+
--color-primary-200: #afb8d3;
11+
--color-primary-300: #94a0c4;
12+
--color-primary-400: #7a89b6;
13+
--color-primary-500: #6072a7;
14+
--color-primary-600: #4f5f8f;
15+
--color-primary-700: #3b476b;
16+
--color-primary-800: #272f47;
17+
--color-primary-900: #131723;
18+
--color-primary: #4f5f8f;
19+
20+
--color-gray-50: var(--color-neutral-50);
21+
--color-gray-100: var(--color-neutral-100);
22+
--color-gray-200: var(--color-neutral-200);
23+
--color-gray-300: var(--color-neutral-300);
24+
--color-gray-400: var(--color-neutral-400);
25+
--color-gray-500: var(--color-neutral-500);
26+
--color-gray-600: var(--color-neutral-600);
27+
--color-gray-700: var(--color-neutral-700);
28+
--color-gray-800: var(--color-neutral-800);
29+
--color-gray-900: var(--color-neutral-900);
30+
--color-secondary-50: var(--color-rose-50);
31+
--color-secondary-100: var(--color-rose-100);
32+
--color-secondary-200: var(--color-rose-200);
33+
--color-secondary-300: var(--color-rose-300);
34+
--color-secondary-400: var(--color-rose-400);
35+
--color-secondary-500: var(--color-rose-500);
36+
--color-secondary-600: var(--color-rose-600);
37+
--color-secondary-700: var(--color-rose-700);
38+
--color-secondary-800: var(--color-rose-800);
39+
--color-secondary-900: var(--color-rose-900);
40+
--color-info-50: var(--color-black-50);
41+
--color-info-100: var(--color-black-100);
42+
--color-info-200: var(--color-black-200);
43+
--color-info-300: var(--color-black-300);
44+
--color-info-400: var(--color-black-400);
45+
--color-info-500: var(--color-black-500);
46+
--color-info-600: var(--color-black-600);
47+
--color-info-700: var(--color-black-700);
48+
--color-info-800: var(--color-black-800);
49+
--color-info-900: var(--color-black-900);
50+
--color-success-50: var(--color-green-50);
51+
--color-success-100: var(--color-green-100);
52+
--color-success-200: var(--color-green-200);
53+
--color-success-300: var(--color-green-300);
54+
--color-success-400: var(--color-green-400);
55+
--color-success-500: var(--color-green-500);
56+
--color-success-600: var(--color-green-600);
57+
--color-success-700: var(--color-green-700);
58+
--color-success-800: var(--color-green-800);
59+
--color-success-900: var(--color-green-900);
60+
--color-warning-50: var(--color-amber-50);
61+
--color-warning-100: var(--color-amber-100);
62+
--color-warning-200: var(--color-amber-200);
63+
--color-warning-300: var(--color-amber-300);
64+
--color-warning-400: var(--color-amber-400);
65+
--color-warning-500: var(--color-amber-500);
66+
--color-warning-600: var(--color-amber-600);
67+
--color-warning-700: var(--color-amber-700);
68+
--color-warning-800: var(--color-amber-800);
69+
--color-warning-900: var(--color-amber-900);
70+
--color-error-50: var(--color-red-50);
71+
--color-error-100: var(--color-red-100);
72+
--color-error-200: var(--color-red-200);
73+
--color-error-300: var(--color-red-300);
74+
--color-error-400: var(--color-red-400);
75+
--color-error-500: var(--color-red-500);
76+
--color-error-600: var(--color-red-600);
77+
--color-error-700: var(--color-red-700);
78+
--color-error-800: var(--color-red-800);
79+
--color-error-900: var(--color-red-900);
80+
}
81+
82+
@layer utilities {
83+
.flip-horizontal {
84+
--tw-scale-x: -1;
85+
}
86+
87+
.flip-vertical {
88+
--tw-scale-y: -1;
89+
}
90+
}
91+
92+
@layer components {
93+
.prose {
94+
--tw-prose-bullets: var(--color-black);
95+
}
96+
}

‎components/DetailPane.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
<div
1212
v-if="isDetailsOpen"
1313
id="details"
14-
class="fixed top-20 bottom-0 right-0 flex flex-col flex-wrap bg-white border-l border-gray-300 z-40 w-1/3 md:shadow-sm p-4"
14+
class="fixed top-20 bottom-0 right-0 flex flex-col flex-wrap bg-white border-l border-gray-300 z-40 w-1/3 md:shadow-xs p-4"
1515
>
1616
<div
17-
class="absolute top-10 -left-3.5 w-7 h-7 rounded-full bg-white border border-gray-300 md:shadow-sm flex items-center justify-center active:border-gray-300 transform text-gray-400 hover:scale-110 hover:border-gray-400 hover:text-gray-500"
17+
class="absolute top-10 -left-3.5 w-7 h-7 rounded-full bg-white border border-gray-300 md:shadow-xs flex items-center justify-center active:border-gray-300 transform text-gray-400 hover:scale-110 hover:border-gray-400 hover:text-gray-500"
1818
>
1919
<n-button
2020
quaternary

‎components/LandingPageFeatures.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div
44
v-for="(feature, index) in features"
55
:key="feature.path"
6-
class="container mx-auto px-4 pb-4 lg:pb-16 mt-4 max-w-screen-xl"
6+
class="container mx-auto px-4 pb-4 lg:pb-16 mt-4 max-w-(--breakpoint-xl)"
77
>
88
<div class="flex flex-wrap">
99
<div
@@ -27,7 +27,7 @@
2727
}"
2828
>
2929
<img
30-
class="max-w-full h-auto shadow-[0_0_12px_#a7a7bd] rounded"
30+
class="max-w-full h-auto shadow-[0_0_12px_#a7a7bd] rounded-sm"
3131
:src="useAsset(feature.img)"
3232
alt=""
3333
/>
@@ -40,7 +40,7 @@
4040
<script lang="ts" setup>
4141
// Taken from https://github.com/nuxt/framework/issues/7121#issuecomment-1247934787
4242
function useAsset(path: string): string {
43-
const assets = import.meta.glob('~/assets/**/*', {
43+
const assets = import.meta.glob('~/assets/*', {
4444
eager: true,
4545
import: 'default',
4646
})

‎components/LandingPageFooter.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<footer class="md:pb-4 md:pt-8">
33
<div
4-
class="container mx-auto pr-4 pl-8 md:pl-4 py-6 border-t border-gray-200 flex flex-col md:flex-row flex-wrap max-w-screen-lg"
4+
class="container mx-auto pr-4 pl-8 md:pl-4 py-6 border-t border-gray-200 flex flex-col md:flex-row flex-wrap max-w-(--breakpoint-lg)"
55
>
66
<div class="w-4/12 md:w-1/5 md:mx-1/6">
77
<JabrefLogo class="max-w-full max-h-44 h-auto md:p-3" />

‎components/LandingPageGetInvolved.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
</div>
6060
<div class="flex flex-row flex-wrap lg:flex-nowrap pt-6 lg:pt-12">
6161
<div
62-
class="lg:min-w-0 mx-auto flex flex-col flex-no-shrink flex-grow break-words text-center py-6 md:px-6 max-w-prose"
62+
class="lg:min-w-0 mx-auto flex flex-col flex-no-shrink grow wrap-break-word text-center py-6 md:px-6 max-w-prose"
6363
>
6464
<n-button
6565
text
@@ -89,7 +89,7 @@
8989
</t-nuxtlink>
9090
</div>
9191
<div
92-
class="lg:min-w-0 mx-auto flex flex-col flex-no-shrink flex-grow break-words text-center py-6 md:px-6 max-w-prose"
92+
class="lg:min-w-0 mx-auto flex flex-col flex-no-shrink grow wrap-break-word text-center py-6 md:px-6 max-w-prose"
9393
>
9494
<n-button
9595
text
@@ -117,7 +117,7 @@
117117
</t-nuxtlink>
118118
</div>
119119
<div
120-
class="lg:min-w-0 mx-auto flex flex-col flex-no-shrink flex-grow break-words text-center py-6 md:px-6 max-w-prose"
120+
class="lg:min-w-0 mx-auto flex flex-col flex-no-shrink grow wrap-break-word text-center py-6 md:px-6 max-w-prose"
121121
>
122122
<n-button
123123
text

‎components/ModalDialog.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
<div>
33
<div
44
v-if="showModal"
5-
class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
5+
class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-hidden focus:outline-hidden justify-center items-center flex"
66
>
77
<div class="relative w-auto my-6 mx-auto max-w-3xl">
88
<!--content-->
99
<div
10-
class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none"
10+
class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-hidden focus:outline-hidden"
1111
>
1212
<!--header-->
1313
<div
@@ -17,11 +17,11 @@
1717
{{ header }}
1818
</h3>
1919
<button
20-
class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
20+
class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-hidden focus:outline-hidden"
2121
@click="showModal = false"
2222
>
2323
<span
24-
class="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none"
24+
class="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-hidden focus:outline-hidden"
2525
>
2626
×
2727
</span>

‎components/NavBar.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
aria-modal="true"
6666
>
6767
<div
68-
class="backdrop-blur-sm bg-gray-400/20 w-full h-full"
68+
class="backdrop-blur-xs bg-gray-400/20 w-full h-full"
6969
aria-hidden="true"
7070
/>
7171
</div>
@@ -153,21 +153,21 @@
153153
<template #default="{ blurHandler }">
154154
<div class="w-36">
155155
<button
156-
class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
156+
class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100"
157157
role="menuitem"
158158
@blur="blurHandler"
159159
>
160160
Your Profile
161161
</button>
162162
<button
163-
class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
163+
class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100"
164164
role="menuitem"
165165
@blur="blurHandler"
166166
>
167167
Settings
168168
</button>
169169
<button
170-
class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out border-t hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
170+
class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out border-t hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100"
171171
@click="logout()"
172172
>
173173
Logout

‎components/TTable.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const props = withDefaults(defineProps<Props>(), {
4242
})
4343
4444
let tableClass =
45-
'min-w-full divide-y divide-gray-100 shadow-sm border-gray-200 border'
45+
'min-w-full divide-y divide-gray-100 shadow-xs border-gray-200 border'
4646
const headerClass = 'px-3 py-2 font-semibold text-left bg-gray-100 border-b'
4747
let tbodyClass = 'bg-white divide-y divide-gray-100'
4848
let tdClass = 'px-3 py-2 whitespace-no-wrap'

‎components/t-dropdown.stories.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,24 +17,24 @@ const Template: StoryFnFn = (args) => ({
1717
return { args }
1818
},
1919
template: `<t-dropdown v-bind="args">
20-
<div class="py-1 rounded-md shadow-xs">
20+
<div class="py-1 rounded-md shadow-2xs">
2121
<a
2222
href="#"
23-
class="block px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
23+
class="block px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100"
2424
role="menuitem"
2525
>
2626
Your Profile
2727
</a>
2828
<a
2929
href="#"
30-
class="block px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
30+
class="block px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100"
3131
role="menuitem"
3232
>
3333
Settings
3434
</a>
3535
<a
3636
href="#"
37-
class="block px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
37+
class="block px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100"
3838
role="menuitem"
3939
>
4040
Sign out

0 commit comments

Comments
 (0)