From d0571c9c7645793115d81071749444760db0365f Mon Sep 17 00:00:00 2001 From: Roene Date: Fri, 21 Feb 2025 14:34:59 +0100 Subject: [PATCH 1/6] WIP - Tailwind v4 update --- package.json | 6 +- postcss.config.js | 3 +- resources/css/app.css | 136 +++- resources/css/components/autocomplete.css | 2 +- resources/css/components/pagination.css | 14 +- resources/css/components/price-slider.css | 10 +- resources/css/components/vue-slider.css | 4 +- resources/views/cart/sidebar.blade.php | 2 +- .../checkout/pages/credentials.blade.php | 2 +- .../views/checkout/pages/onestep.blade.php | 2 +- .../views/checkout/pages/payment.blade.php | 2 +- .../checkout/partials/progressbar.blade.php | 2 +- .../views/checkout/partials/sidebar.blade.php | 6 +- .../checkout/steps/payment_method.blade.php | 4 +- .../checkout/steps/shipping_method.blade.php | 4 +- .../views/checkout/steps/success.blade.php | 10 +- .../views/components/cookie-notice.blade.php | 2 +- .../views/components/filter/heading.blade.php | 4 +- .../views/components/notifications.blade.php | 6 +- .../views/components/productlist.blade.php | 2 +- resources/views/components/quantity.blade.php | 2 +- .../components/slideover/global.blade.php | 2 +- .../views/layouts/checkout/header.blade.php | 2 +- .../partials/footer/navigation.blade.php | 2 +- .../partials/footer/newsletter.blade.php | 2 +- .../partials/global-slideover.blade.php | 2 +- .../views/layouts/partials/header.blade.php | 2 +- .../layouts/partials/header/account.blade.php | 2 +- .../partials/header/autocomplete.blade.php | 6 +- .../partials/header/minicart.blade.php | 4 +- resources/views/listing/filters.blade.php | 38 +- .../listing/partials/filter/price.blade.php | 2 +- .../listing/partials/filter/select.blade.php | 2 +- .../partials/filter/selected.blade.php | 2 +- .../listing/partials/filter/swatch.blade.php | 2 +- .../views/listing/partials/item.blade.php | 2 +- resources/views/listing/products.blade.php | 4 +- resources/views/product/overview.blade.php | 2 +- .../product/partials/gallery/slider.blade.php | 4 +- .../partials/gallery/thumbnails.blade.php | 4 +- tailwind.config.js | 96 +-- yarn.lock | 741 ++++++------------ 42 files changed, 441 insertions(+), 707 deletions(-) diff --git a/package.json b/package.json index a556c625..2d118580 100644 --- a/package.json +++ b/package.json @@ -11,11 +11,11 @@ "@babel/core": "^7.23.9", "@hotwired/turbo": "^8.0.2", "@tailwindcss/forms": "^0.5.3", - "@tailwindcss/typography": "^0.5.9", + "@tailwindcss/postcss": "^4.0.7", + "@tailwindcss/typography": "^0.5.16", "@vitejs/plugin-vue2": "^2.2.0", "@vueuse/core": "^11.1.0", "@vueuse/integrations": "^10.11.0", - "autoprefixer": "^10.4.15", "cross-env": "^7.0.3", "graphql": "^16.8.1", "graphql-combine-query": "indykoning/graphql-combine-query#feature/add-allowed-duplicates", @@ -27,7 +27,7 @@ "rollup": "^4.24.0", "rollup-plugin-visualizer": "^5.9.0", "tailwind-scrollbar-hide": "^1.1.7", - "tailwindcss": "^3.3.3", + "tailwindcss": "^4.0.7", "universal-cookie": "^7.1.4", "vite": "^5.0", "vue": "^2.7", diff --git a/postcss.config.js b/postcss.config.js index d41ad635..4d19be25 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,5 @@ export default { plugins: { - tailwindcss: {}, - autoprefixer: {}, + '@tailwindcss/postcss': {}, }, } diff --git a/resources/css/app.css b/resources/css/app.css index 0c0cd17d..14ab9104 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -1,18 +1,138 @@ -@import 'components/vue-slider'; -@import 'components/price-slider'; -@import 'components/pagination'; -@import 'components/autocomplete'; +@import './components/vue-slider.css' layer(base); +@import './components/price-slider.css' layer(base); +@import './components/pagination.css' layer(base); +@import './components/autocomplete.css' layer(base); -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; +@config "../../tailwind.config.js"; + +@plugin '@tailwindcss/forms'; +@plugin '@tailwindcss/typography'; +@plugin 'tailwind-scrollbar-hide'; + +@theme { + --color-primary: color-mix(in srgb, var(--primary, #2fbc85) calc(100% * 1), transparent); + --color-primary-text: color-mix(in srgb, var(--primary-text, #fff) calc(100% * 1), transparent); + --color-secondary: color-mix(in srgb, var(--secondary, #202f60) calc(100% * 1), transparent); + --color-secondary-text: color-mix(in srgb, var(--secondary-text, #fff) calc(100% * 1), transparent); + --color-conversion: color-mix(in srgb, var(--conversion, #22c55e) calc(100% * 1), transparent); + --color-conversion-text: color-mix(in srgb, var(--conversion-text, #fff) calc(100% * 1), transparent); + --color-foreground-emphasis: color-mix(in srgb, var(--foreground-emphasis, #0f172a) calc(100% * 1), transparent); + --color-foreground: color-mix(in srgb, var(--foreground, #1e293b) calc(100% * 1), transparent); + --color-foreground-muted: color-mix(in srgb, var(--foreground-muted, #475569) calc(100% * 1), transparent); + --color-border-emphasis: color-mix(in srgb, var(--border-emphasis, #94a3b8) calc(100% * 1), transparent); + --color-border: color-mix(in srgb, var(--border, #cbd5e1) calc(100% * 1), transparent); + --color-border-muted: color-mix(in srgb, var(--border-muted, #f1f5f9) calc(100% * 1), transparent); + --color-shadow-emphasis: color-mix(in srgb, var(--shadow-emphasis, #64748b) calc(100% * 1), transparent); + --color-shadow: color-mix(in srgb, var(--shadow, #94a3b8) calc(100% * 1), transparent); + --color-shadow-muted: color-mix(in srgb, var(--shadow-muted, #cbd5e1) calc(100% * 1), transparent); + --color-background-emphasis: color-mix(in srgb, var(--background-emphasis, #e2e8f0) calc(100% * 1), transparent); + --color-background: color-mix(in srgb, var(--background, #f1f5f9) calc(100% * 1), transparent); + --color-background-muted: color-mix(in srgb, var(--background-muted, #f8fafc) calc(100% * 1), transparent); + --color-backdrop: color-mix(in srgb, var(--backdrop, rgba(0, 0, 0, 0.4)) calc(100% * 1), transparent); + + --z-index-header: 100; + --z-index-header-autocomplete-overlay: 10; + --z-index-header-autocomplete: 20; + --z-index-header-dropdown: 30; + --z-index-header-minicart: 30; + --z-index-header-autocomplete-button: 30; + --z-index-notifications: 110; + --z-index-slideover: 120; + --z-index-slideover-overlay: 10; + --z-index-slideover-sidebar: 20; + --z-index-popup: 130; + --z-index-popup-actions: 10; + + --text-color-emphasis: color-mix(in srgb, var(--foreground-emphasis, #0f172a) calc(100% * 1), transparent); + --text-color: color-mix(in srgb, var(--foreground, #1e293b) calc(100% * 1), transparent); + --text-color-muted: color-mix(in srgb, var(--foreground-muted, #475569) calc(100% * 1), transparent); + + --border-color-default-emphasis: color-mix(in srgb, var(--border-emphasis, #94a3b8) calc(100% * 1), transparent); + --border-color-default: color-mix(in srgb, var(--border, #cbd5e1) calc(100% * 1), transparent); + --border-color-default-muted: color-mix(in srgb, var(--border-muted, #f1f5f9) calc(100% * 1), transparent); + + --border-color-emphasis: color-mix(in srgb, var(--border-emphasis, #94a3b8) calc(100% * 1), transparent); + --border-color-muted: color-mix(in srgb, var(--border-muted, #f1f5f9) calc(100% * 1), transparent); + + --background-color-emphasis: color-mix(in srgb, var(--background-emphasis, #e2e8f0) calc(100% * 1), transparent); + --background-color: color-mix(in srgb, var(--background, #f1f5f9) calc(100% * 1), transparent); + --background-color-muted: color-mix(in srgb, var(--background-muted, #f8fafc) calc(100% * 1), transparent); + + --ring-color-default-emphasis: color-mix(in srgb, var(--border-emphasis, #94a3b8) calc(100% * 1), transparent); + --ring-color-default: color-mix(in srgb, var(--border, #cbd5e1) calc(100% * 1), transparent); + --ring-color-default-muted: color-mix(in srgb, var(--border-muted, #f1f5f9) calc(100% * 1), transparent); + + --ring-color-emphasis: color-mix(in srgb, var(--border-emphasis, #94a3b8) calc(100% * 1), transparent); + --ring-color: color-mix(in srgb, var(--border, #cbd5e1) calc(100% * 1), transparent); + --ring-color-muted: color-mix(in srgb, var(--border-muted, #f1f5f9) calc(100% * 1), transparent); + + --outline-color-default-emphasis: color-mix(in srgb, var(--border-emphasis, #94a3b8) calc(100% * 1), transparent); + --outline-color-default: color-mix(in srgb, var(--border, #cbd5e1) calc(100% * 1), transparent); + --outline-color-default-muted: color-mix(in srgb, var(--border-muted, #f1f5f9) calc(100% * 1), transparent); + + --outline-color-emphasis: color-mix(in srgb, var(--border-emphasis, #94a3b8) calc(100% * 1), transparent); + --outline-color: color-mix(in srgb, var(--border, #cbd5e1) calc(100% * 1), transparent); + --outline-color-muted: color-mix(in srgb, var(--border-muted, #f1f5f9) calc(100% * 1), transparent); + + --box-shadow-color-default-emphasis: color-mix(in srgb, var(--shadow-emphasis, #64748b) calc(100% * 1), transparent); + --box-shadow-color-default: color-mix(in srgb, var(--shadow, #94a3b8) calc(100% * 1), transparent); + --box-shadow-color-default-muted: color-mix(in srgb, var(--shadow-muted, #cbd5e1) calc(100% * 1), transparent); + + --box-shadow-color-emphasis: color-mix(in srgb, var(--shadow-emphasis, #0f172a) calc(100% * 1), transparent); + --box-shadow-color: color-mix(in srgb, var(--shadow, #334155) calc(100% * 1), transparent); + --box-shadow-color-muted: color-mix(in srgb, var(--shadow-muted, #64748b) calc(100% * 1), transparent); +} + +@utility container { + margin-inline: auto; + padding-inline: 1.25rem; +} + +@utility text { + color: var(--text-color); +} +@utility text-emphasis { + color: var(--text-color-emphasis); +} +@utility text-muted { + color: var(--text-color-muted); +} + +@utility bg { + background-color: var(--background-color); +} +@utility bg-emphasis { + background-color: var(--background-color-emphasis); +} +@utility bg-muted { + background-color: var(--background-color-muted); +} + +/* + The default border color has changed to `currentColor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: color-mix(in srgb, var(--border, #cbd5e1) calc(100% * 1), transparent); + } +} [v-cloak] { display: none; } [v-blur] { - @apply animate-pulse blur; + @apply animate-pulse blur-sm; } * { diff --git a/resources/css/components/autocomplete.css b/resources/css/components/autocomplete.css index 1ce3ace8..28298473 100644 --- a/resources/css/components/autocomplete.css +++ b/resources/css/components/autocomplete.css @@ -1,5 +1,5 @@ .search-input + div div[groupposition='right'] { - @apply size-6 right-16 cursor-pointer z-50 !-translate-y-1/2 !top-1/2 !absolute; + @apply size-6! right-16! cursor-pointer z-50 top-1/2! absolute!; .cancel-icon { @apply hidden; diff --git a/resources/css/components/pagination.css b/resources/css/components/pagination.css index 1027377b..fac7f46e 100644 --- a/resources/css/components/pagination.css +++ b/resources/css/components/pagination.css @@ -4,32 +4,32 @@ } .pagination { - @apply flex flex-wrap justify-center gap-x-2 !m-0 !my-6 max-md:gap-y-4; + @apply flex flex-wrap justify-center gap-x-2 m-0! my-6! max-md:gap-y-4; } .pagination-button { - @apply !font-semibold !font-sans !border !border-border !rounded !bg-white !text !shadow; + @apply font-semibold! font-sans! border! border-border! rounded-sm! bg-white! text! shadow-sm!; } .pagination-button.active { - @apply !border !border-none !bg-primary !text-white !shadow-none; + @apply border! border-none! bg-primary! text-white! shadow-none!; } .pagination-button:first-child { - @apply !mr-auto max-md:w-full max-md:order-last; + @apply mr-auto! max-md:w-full max-md:order-last; } .pagination-button:last-child { - @apply !ml-auto max-md:w-full max-md:-order-1; + @apply ml-auto! max-md:w-full max-md:-order-1; } .pagination-button:not(:first-child):not(:last-child) { - @apply !m-0 !size-14 max-md:flex-1 max-md:w-auto; + @apply m-0! size-14! max-md:flex-1 max-md:w-auto; } .pagination-button:first-child, .pagination-button:last-child { - @apply h-14 px-6 max-md:!m-0; + @apply h-14 px-6 max-md:m-0!; } .pagination-button[disabled] { diff --git a/resources/css/components/price-slider.css b/resources/css/components/price-slider.css index 1452735b..e38d59e5 100644 --- a/resources/css/components/price-slider.css +++ b/resources/css/components/price-slider.css @@ -4,19 +4,19 @@ div.vue-slider { div.vue-slider-process, div.vue-slider-rail { - @apply h-2 bg-primary !important; + @apply h-2! bg-primary!; } div.vue-slider-rail { - @apply bg-emphasis !important; + @apply bg-emphasis!; } div.vue-slider .vue-slider-dot { - @apply size-6 !important; + @apply size-6!; } div.vue-slider-dot-tooltip-inner { - @apply bg-white text border border-default px-1.5 !important; + @apply bg-white! text! border! border-default! px-1.5!; } span.vue-slider-dot-tooltip-text { @@ -28,7 +28,7 @@ div.vue-slider-dot-tooltip::before { } div.vue-slider-dot .vue-slider-dot-handle { - @apply border border-border shadow; + @apply border border-border shadow-sm; } div.vue-slider-tooltip-wrap.vue-slider-tooltip-top { diff --git a/resources/css/components/vue-slider.css b/resources/css/components/vue-slider.css index 53a7b0ac..aca7762b 100644 --- a/resources/css/components/vue-slider.css +++ b/resources/css/components/vue-slider.css @@ -3,9 +3,9 @@ } .vue-slider-dot-tooltip-inner { - @apply border-primary bg-primary !important; + @apply border-primary! bg-primary!; } .vue-slider-process { - @apply bg-primary !important; + @apply bg-primary!; } diff --git a/resources/views/cart/sidebar.blade.php b/resources/views/cart/sidebar.blade.php index 8eb87eb0..d362e6bc 100644 --- a/resources/views/cart/sidebar.blade.php +++ b/resources/views/cart/sidebar.blade.php @@ -1,4 +1,4 @@ -
+
@lang('Subtotal')
@{{ cart.prices.subtotal_including_tax.value | price }}
diff --git a/resources/views/checkout/pages/credentials.blade.php b/resources/views/checkout/pages/credentials.blade.php index 22819ce9..45f7de73 100644 --- a/resources/views/checkout/pages/credentials.blade.php +++ b/resources/views/checkout/pages/credentials.blade.php @@ -9,7 +9,7 @@ @include('rapidez::checkout.partials.progressbar')
-
+
-
+
- @foreach ($checkoutSteps as $checkoutStepKey => $checkoutStep) -
+
@if (!$loop->last)
@endif diff --git a/resources/views/checkout/partials/sidebar.blade.php b/resources/views/checkout/partials/sidebar.blade.php index 09d3ddf9..399927da 100644 --- a/resources/views/checkout/partials/sidebar.blade.php +++ b/resources/views/checkout/partials/sidebar.blade.php @@ -1,5 +1,5 @@
-
+
@{{ item.product.name }}
@@ -9,7 +9,7 @@
-
+
@lang('Subtotal')
@{{ cart.prices.subtotal_including_tax.value | price }}
@@ -35,7 +35,7 @@
-
+

diff --git a/resources/views/checkout/steps/payment_method.blade.php b/resources/views/checkout/steps/payment_method.blade.php index 93149a10..7db57cd5 100644 --- a/resources/views/checkout/steps/payment_method.blade.php +++ b/resources/views/checkout/steps/payment_method.blade.php @@ -12,10 +12,10 @@ v-slot="{ mutate, variables }" >

-