Feature/tailwind v4 update

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",

postcss.config.js

@@ -1,6 +1,5 @@
 export default {
     plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
+        '@tailwindcss/postcss': {},
     },
 }

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;
 }
 
 * {

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;

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] {

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 {

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!;
 }

resources/views/cart/sidebar.blade.php

@@ -1,4 +1,4 @@
-<dl class="mb-5 flex w-full flex-col rounded-lg border *:flex *:flex-wrap *:justify-between *:p-3 *:border-b last:*:border-none">
+<dl class="mb-5 flex w-full flex-col rounded-lg border *:flex *:flex-wrap *:justify-between *:p-3 *:border-b *:last:border-none">
     <div>
         <dt>@lang('Subtotal')</dt>
         <dd v-if="showTax">@{{ cart.prices.subtotal_including_tax.value | price }}</dd>

resources/views/checkout/pages/credentials.blade.php

@@ -9,7 +9,7 @@
         @include('rapidez::checkout.partials.progressbar')
         <div v-if="hasCart" v-cloak>
             <div class="flex gap-5 max-xl:flex-col">
-                <div class="w-full rounded bg p-4 xl:p-8 xl:w-3/4">
+                <div class="w-full rounded-sm bg p-4 xl:p-8 xl:w-3/4">
                     <form
                         v-on:submit.prevent="(e) => {
                             submitPartials(e.target?.form ?? e.target)

resources/views/checkout/pages/onestep.blade.php

@@ -7,7 +7,7 @@
 @section('content')
     <div class="container">
         <div v-if="hasCart" class="flex gap-5 max-xl:flex-col" v-cloak>
-            <div class="w-full bg rounded p-4 xl:p-8 xl:w-3/4">
+            <div class="w-full bg rounded-sm p-4 xl:p-8 xl:w-3/4">
                 <form class="grid gap-5 lg:grid-cols-2" v-on:submit.prevent="(e) => {
                     submitPartials(e.target?.form ?? e.target)
                         .then((result) =>

resources/views/checkout/pages/payment.blade.php

@@ -9,7 +9,7 @@
         @include('rapidez::checkout.partials.progressbar')
         <div v-if="hasCart" v-cloak>
             <div class="flex gap-5 max-xl:flex-col">
-                <form class="w-full rounded bg h-fit p-4 xl:p-8 xl:w-3/4" v-on:submit.prevent="(e) => {
+                <form class="w-full rounded-sm bg h-fit p-4 xl:p-8 xl:w-3/4" v-on:submit.prevent="(e) => {
                         submitPartials(e.target?.form ?? e.target)
                             .then((result) =>
                                 window.app.$emit('checkout-payment-saved')

resources/views/checkout/partials/progressbar.blade.php

@@ -1,7 +1,7 @@
 
 <nav class="flex my-5">
     @foreach ($checkoutSteps as $checkoutStepKey => $checkoutStep)
-        <div class="text-center w-full relative focus:outline-none">
+        <div class="text-center w-full relative focus:outline-hidden">
             @if (!$loop->last)
                 <div class="absolute flex w-full h-0.5 top-5 left-1/2 {{ $currentStepKey > $checkoutStepKey ? 'bg-emphasis' : 'bg' }}"></div>
             @endif

resources/views/checkout/partials/sidebar.blade.php

@@ -1,5 +1,5 @@
 <div class="flex flex-col gap-5">
-    <div class="rounded border p-3">
+    <div class="rounded-sm border p-3">
         <div class="flex w-full flex-col">
             <div v-for="item in cart.items" class="flex gap-x-1 border-b last:border-b-0 py-3">
                 <div class="w-7/12">@{{ item.product.name }}</div>
@@ -9,7 +9,7 @@
         </div>
     </div>
 
-    <dl class="flex w-full flex-col rounded border *:flex *:flex-wrap *:justify-between *:p-3 *:border-b last:*:border-none">
+    <dl class="flex w-full flex-col rounded-sm border *:flex *:flex-wrap *:justify-between *:p-3 *:border-b *:last:border-none">
         <div>
             <dt>@lang('Subtotal')</dt>
             <dd>@{{ cart.prices.subtotal_including_tax.value | price }}</dd>
@@ -35,7 +35,7 @@
         </div>
     </dl>
 
-    <div v-if="cart.shipping_addresses[0]" class="flex w-full flex-col gap-x-1 border p-3 rounded">
+    <div v-if="cart.shipping_addresses[0]" class="flex w-full flex-col gap-x-1 border p-3 rounded-sm">
         <p class="font-lg mb-2 font-bold">
             <template v-if="cart.billing_address?.same_as_shipping">@lang('Shipping & billing address')</template>
             <template v-else>@lang('Shipping address')</template>

resources/views/checkout/steps/payment_method.blade.php

@@ -12,10 +12,10 @@
     v-slot="{ mutate, variables }"
 >
     <div class="flex flex-col gap-3" partial-submit="mutate">
-        <label class="flex items-center p-5 border rounded relative bg-white" v-if="!cart.is_virtual && !cart.shipping_addresses[0]?.uid">
+        <label class="flex items-center p-5 border rounded-sm relative bg-white" v-if="!cart.is_virtual && !cart.shipping_addresses[0]?.uid">
             <span>@lang('Please enter a shipping address first')</span>
         </label>
-        <label class="flex items-center p-5 border rounded relative bg-white cursor-pointer" v-else v-for="(method, index) in cart.available_payment_methods">
+        <label class="flex items-center p-5 border rounded-sm relative bg-white cursor-pointer" v-else v-for="(method, index) in cart.available_payment_methods">
             <template v-if="false"></template>
             @stack('payment_methods')
             <template v-else>

resources/views/checkout/steps/shipping_method.blade.php

@@ -17,10 +17,10 @@
     v-if="!cart.is_virtual"
 >
     <fieldset class="flex flex-col gap-3" partial-submit="mutate" v-on:change="window.app.$emit('setShippingAddressesOnCart')">
-        <label class="flex items-center p-5 border rounded relative bg-white" v-if="!cart.shipping_addresses[0]?.uid">
+        <label class="flex items-center p-5 border rounded-sm relative bg-white" v-if="!cart.shipping_addresses[0]?.uid">
             <span>@lang('Please enter a shipping address first')</span>
         </label>
-        <label class="flex items-center gap-x-1.5 p-5 border rounded bg-white cursor-pointer text-sm text" v-for="(method, index) in cart.shipping_addresses[0]?.available_shipping_methods">
+        <label class="flex items-center gap-x-1.5 p-5 border rounded-sm bg-white cursor-pointer text-sm text" v-for="(method, index) in cart.shipping_addresses[0]?.available_shipping_methods">
             <x-rapidez::input.radio.base
                 name="shipping_method"
                 v-model="variables.method"