Feature/tailwind v4 update

package.json

@@ -11,23 +11,20 @@
         "@babel/core": "^7.23.9",
         "@hotwired/turbo": "^8.0.2",
         "@tailwindcss/forms": "^0.5.3",
-        "@tailwindcss/typography": "^0.5.9",
+        "@tailwindcss/typography": "^0.5.16",
+        "@tailwindcss/vite": "^4.0.8",
         "@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",
         "graphql-tag": "^2.12.6",
         "laravel-vite-plugin": "^1.0.5",
-        "postcss": "^8.4.29",
-        "postcss-import": "^16.1.0",
-        "postcss-nested": "^6.0.0",
         "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",

resources/css/app.css

@@ -1,18 +1,130 @@
-@import 'components/vue-slider';
-@import 'components/price-slider';
-@import 'components/pagination';
-@import 'components/autocomplete';
+@import 'tailwindcss';
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@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);
+
+@config "../../tailwind.config.js";
+
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+@plugin 'tailwind-scrollbar-hide';
+
+@theme {
+    /* Our variables used by different utilities */
+    --primary: #2fbc85;
+    --primary-text: var(--color-white);
+
+    --secondary: #202f60;
+    --secondary-text: var(--color-white);
+
+    --conversion: var(--color-green-500);
+    --conversion-text: var(--color-white);
+
+    --foreground-emphasis: var(--color-slate-900);
+    --foreground: var(--color-slate-800);
+    --foreground-muted: var(--color-slate-600);
+
+    --border-emphasis: var(--color-slate-400);
+    --border: var(--color-slate-300);
+    --border-muted: var(--color-slate-100);
+
+    --background-emphasis: var(--color-slate-200);
+    --background: var(--color-slate-100);
+    --background-muted: var(--color-slate-50);
+
+    /* Utility colors linked to our variables */
+    --color-primary: var(--primary);
+    --color-primary-text: var(--primary-text);
+
+    --color-secondary: var(--secondary);
+    --color-secondary-text: var(--secondary-text);
+
+    --color-conversion: var(--conversion);
+    --color-conversion-text: var(--conversion-text);
+
+    --text-color-emphasis: var(--foreground-emphasis);
+    --text-color-default: var(--foreground);
+    --text-color-muted: var(--foreground-muted);
+
+    --border-color-emphasis: var(--border-emphasis);
+    --border-color-default: var(--border);
+    --border-color-muted: var(--border-muted);
+
+    --ring-color-emphasis: var(--border-emphasis);
+    --ring-color-default: var(--border);
+    --ring-color-muted: var(--border-muted);
+
+    --outline-color-emphasis: var(--border-emphasis);
+    --outline-color-default: var(--border);
+    --outline-color-muted: var(--border-muted);
+
+    --background-color-emphasis: var(--background-emphasis);
+    --background-color-default: var(--background);
+    --background-color-muted: var(--background-muted);
+
+    --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;
+
+    --z-index-cookie: 140;
+}
+
+@utility container {
+    margin-inline: auto;
+    padding-inline: 1.25rem;
+}
+
+@utility text {
+    color: var(--text-color-default);
+}
+
+@utility bg {
+    background-color: var(--background-color-default);
+}
+
+/*
+    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: var(--border);
+    }
+
+    button:not(:disabled),
+    [role='button']:not(:disabled) {
+        cursor: pointer;
+    }
+}
 
 [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-default! 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-default 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"

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

@@ -2,7 +2,7 @@
     <template slot-scope="{ order, refreshOrder, hideBilling, shipping, billing, items }">
         <div v-if="order" dusk="checkout-success" class="container" v-cloak>
             <h1 class="font-bold text-4xl mb-5">@lang('Order placed succesfully')</h1>
-            <div class="bg rounded p-8">
+            <div class="bg rounded-sm p-8">
                 <p>@lang('We will get to work for you right away')</p>
                 <p>@lang('We will send a confirmation of your order to') <span class="font-bold">@{{ order.email }}</span></p>
                 <p>@lang('Your order is currently:') <span class="font-bold">@{{ order.status }}</span> <a class="inline-block" href="#" v-on:click.prevent="(e) => {e.target.classList.add('animate-spin'); refreshOrder().finally(() => e.target.classList.remove('animate-spin'))}">&#8635;</a></p>

resources/views/components/filter/heading.blade.php

@@ -2,7 +2,7 @@
 
 <input class="peer hidden" type="checkbox" checked :set="id = Math.random().toString(36).slice(2)" :id="id" />
 
-<label class="flex items-center justify-between gap-x-2 border-t pb-2.5 pt-4 text cursor-pointer peer-checked:[&>.chevron]:rotate-180" :for="id">
+<label class="flex items-center justify-between gap-x-2 border-t pb-2.5 pt-4 text cursor-pointer [&>.chevron]:peer-checked:rotate-180" :for="id">
     <span class="block font-sans text-base font-semibold">
         @if ($title->isNotEmpty())
             {{ $title }}
@@ -13,7 +13,7 @@
 
     <x-heroicon-o-chevron-down class="size-4 chevron transition" />
 </label>
-<div class="peer-checked:*:-my-1 peer-checked:*:py-1 grid grid-rows-[0fr] transition-all peer-checked:grid-rows-[1fr]">
+<div class="*:peer-checked:-my-1 *:peer-checked:py-1 grid grid-rows-[0fr] transition-all peer-checked:grid-rows-[1fr]">
     <div class="-mx-1 overflow-hidden px-1">
         {{ $slot }}
     </div>