rapidez · royduin · Mar 20, 2026 · Feb 26, 2026 · Feb 26, 2026 · Feb 26, 2026
@@ -28,7 +28,7 @@
         "laravel/scout": "^10.14",
         "lcobucci/clock": "^2.0|^3.2",
         "lcobucci/jwt": "^4.0|^5.3",
-        "rapidez/blade-components": "^1.11",
+        "rapidez/blade-components": "^2.0",
         "rapidez/blade-directives": "^1.1",
         "rapidez/laravel-multi-cache": "^2.1",
         "rapidez/laravel-scout-elasticsearch": "^1.0",

@@ -16,12 +16,12 @@
         "@searchkit/instantsearch-client": "^4.14.1",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/typography": "^0.5.9",
+        "@tailwindcss/vite": "^4.2.1",
         "@types/node": "^24.0.1",
         "@vitejs/plugin-vue": "^6.0.1",
+        "@vueuse/components": "^13.6.0",
         "@vueuse/core": "^13.6.0",
         "@vueuse/integrations": "^13.6.0",
-        "@vueuse/components": "^13.6.0",
-        "autoprefixer": "^10.4.15",
         "cross-env": "^10.0.0",
         "dotenv": "^17.2.0",
         "graphql": "^16.8.1",
@@ -31,20 +31,17 @@
         "laravel-vite-plugin": "^2.0.0",
         "lighthouse": "^12.8.2",
         "playwright-lighthouse": "^4.0.0",
-        "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.4",
+        "tailwindcss": "^4.2.1",
         "universal-cookie": "^7.1.4",
         "vite": "^7.0",
         "vue": "^3.5.23",
-        "vue3-click-away": "^1.2.4",
         "vue-cookies": "^1.8.2",
         "vue-instantsearch": "^4.19.13",
-        "vue-turbolinks": "^2.2.2"
+        "vue-turbolinks": "^2.2.2",
+        "vue3-click-away": "^1.2.4"
     },
     "dependencies": {},
     "workspaces": [

@@ -1,23 +1,60 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/*
+All colors are defined in rapidez/blade-components, see:
+https://github.com/rapidez/blade-components/tree/master/resources/css
+
+For more information: https://docs.rapidez.io/5.x/theming.html#colors
+*/
+
+@theme {
+    --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-popup: 130;
+    --z-index-popup-actions: 10;
+
+    --z-index-cookie: 140;
+
+    --animate-loading: loading 1s infinite;
+
+    @keyframes loading {
+        0% {
+            left: 0%;
+            width: 0%;
+        }
+        50% {
+            left: 0%;
+            width: 100%;
+        }
+        100% {
+            left: 100%;
+            width: 0%;
+        }
+    }
+}
+
+@utility container {
+    margin-inline: auto;
+    padding-inline: 1.25rem;
+}
 
 [v-cloak] {
     display: none;
 }
 
 [v-blur] {
-    @apply animate-pulse blur;
+    @apply animate-pulse blur-sm;
 }
 
 @view-transition {
     navigation: auto;
 }
 
-* {
-    -webkit-tap-highlight-color: transparant;
-}
-
 listing,
 autocomplete {
     /*  Reset browser added styling causing unexpected behavior */
@@ -28,17 +65,6 @@ autocomplete {
     white-space: unset;
 }
 
-/* Remove default browser arrows for input type="number" */
-.arrows-hidden[type='number']::-webkit-inner-spin-button,
-.arrows-hidden[type='number']::-webkit-outer-spin-button {
-    @apply appearance-none m-0;
-}
-
-/* Firefox */
-.arrows-hidden[type='number'] {
-    -moz-appearance: textfield;
-}
-
 mark {
     @apply bg-transparent font-bold;
 }
@@ -55,12 +81,6 @@ input[type='search']::-webkit-search-results-decoration {
     field-sizing: content;
 }
 
-@supports (interpolate-size: allow-keywords) {
-    :root {
-        interpolate-size: allow-keywords;
-    }
-}
-
 .turbo-progress-bar {
     @apply bg-primary;
 }

@@ -0,0 +1,42 @@
+@import 'tailwindcss' source(none);
+
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+@plugin 'tailwind-scrollbar-hide';
+
+@import '../../vendor/rapidez/core/resources/css/app.css';
+@import '../../vendor/rapidez/blade-components/resources/css/package.css';
+@import './luma.css';
+
+@source '../**/*.blade.php';
+@source '../**/*.vue';
+
+@source '../../vendor/rapidez/**/*.blade.php';
+@source '../../vendor/rapidez/**/*.vue';
+
+@source '../../config/rapidez/frontend.php';
+@source '../../vendor/rapidez/core/config/rapidez/frontend.php';
+
+@source '../../config/rapidez/menu.php';
+@source '../../vendor/rapidez/menu/config/rapidez/menu.php';
+
+@source '../../storage/framework/views/*.php';
+@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
+
+:root {
+    --primary: #2fbc85;
+    --primary-text: #ffffff;
+
+    --secondary: #202f60;
+    --secondary-text: #ffffff;
+
+    --conversion: #15803d;
+    --conversion-text: #ffffff;
+
+    /*
+    --foreground: #334155;
+    --border: #e7ebef;
+    --background: #f1f5f9;
+    etc, see: https://docs.rapidez.io/5.x/theming.html#colors
+    */
+}
@@ -3,13 +3,15 @@ import { defineConfig } from 'vite'
 import laravel from 'laravel-vite-plugin'
 import vue from '@vitejs/plugin-vue'
 import { visualizer } from 'rollup-plugin-visualizer'
+import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
     plugins: [
         laravel({
             input: ['resources/css/app.css', 'resources/js/app.js'],
             refresh: true,
         }),
+        tailwindcss(),
         vue(),
         visualizer(),
     ],

@@ -1,6 +1,6 @@
 <table class="w-full border-b">
     <tbody class="divide-y">
-        <tr v-for="(item, index) in cart.value.items" class="flex-wrap max-md:flex *:first:pt-0 *:p-2 md:*:p-4"  data-testid="cart-item">
+        <tr v-for="(item, index) in cart.value.items" class="flex-wrap max-md:flex first:*:pt-0 *:p-2 md:*:p-4"  data-testid="cart-item">
             <td class="w-24">
                 <a :href="url(item.product.url_key + item.product.url_suffix)">
                     <img
@@ -27,7 +27,7 @@ class="mx-auto"
                             @lang('This product is out of stock, remove it to continue your order.')
                         </div>
                     </a>
-                    <div class="*:border-r last:*:border-r-0 *:px-2 *:mb-1.5 *:leading-3 -mx-2 flex flex-wrap text-sm mb-1.5 text-muted mt-1.5">
+                    <div class="*:border-r *:last:border-r-0 *:px-2 *:mb-1.5 *:leading-3 -mx-2 flex flex-wrap text-sm mb-1.5 text-muted mt-1.5">
                         <div v-for="option in item.configurable_options">
                             @{{ option.option_label }}: @{{ option.value_label }}
                         </div>

@@ -9,7 +9,7 @@
         @include('rapidez::checkout.partials.progressbar')
         <div v-if="hasCart" v-cloak>
             <div class="flex gap-14 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) => {
                             window.app.config.globalProperties.submitPartials(e.target?.form ?? e.target, (cart?.billing_address?.same_as_shipping ?? true))

@@ -7,7 +7,7 @@
 @section('content')
     <div class="container">
         <div v-if="hasCart" class="flex gap-14 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) => {
                     window.app.config.globalProperties.submitPartials(e.target?.form ?? e.target)
                         .then((result) =>

@@ -9,7 +9,7 @@
         @include('rapidez::checkout.partials.progressbar')
         <div v-if="hasCart" v-cloak>
             <div class="flex gap-10 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) => {
                         window.app.config.globalProperties.submitPartials(e.target?.form ?? e.target)
                             .then((result) =>
                                 window.$emit('checkout-payment-saved')

@@ -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

@@ -25,8 +25,8 @@ class="w-10 h-auto object-contain"
                     </div>
                     <div class="flex-1">
                         <div class="mb-1">@{{ item.product.name }}</div>
-                        <div class="last:*:pr-0 *:pr-2 flex flex-wrap gap-x-2 text-xs text-muted">
-                            <div class="*:border-r last:*:border-r-0 *:px-2 *:mb-1.5 *:leading-3 -mx-2 flex flex-wrap text-xs -mb-1.5">
+                        <div class="*:last:pr-0 *:pr-2 flex flex-wrap gap-x-2 text-xs text-muted">
+                            <div class="*:border-r *:last:border-r-0 *:px-2 *:mb-1.5 *:leading-3 -mx-2 flex flex-wrap text-xs -mb-1.5">
                                 <div>
                                     @{{ item.quantity }}x
                                 </div>
@@ -77,7 +77,7 @@ class="w-10 h-auto object-contain"
         </div>
     </x-rapidez::summary>
 
-    <div v-if="cart.value.shipping_addresses?.[0]" class="flex w-full flex-col gap-x-1 bg px-5 py-4 rounded">
+    <div v-if="cart.value.shipping_addresses?.[0]" class="flex w-full flex-col gap-x-1 bg px-5 py-4 rounded-sm">
         <p class="font-lg mb-2 font-bold">
             <template v-if="cart.value.billing_address?.same_as_shipping">@lang('Shipping & billing address')</template>
             <template v-else>@lang('Shipping address')</template>

@@ -12,10 +12,10 @@
     v-slot="{ mutate, variables }"
 >
     <div class="flex flex-col gap-3" partial-submit v-on:partial-submit="(e) => mutate().then(e.detail.resolve).catch(e.detail.reject)">
-        <label class="flex items-center p-5 border rounded relative bg-white" v-if="!cart.value.is_virtual && !cart.value.shipping_addresses?.[0]?.uid">
+        <label class="flex items-center p-5 border rounded-sm relative bg-white" v-if="!cart.value.is_virtual && !cart.value.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.value.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.value.available_payment_methods">
             <template v-if="false"></template>
             @stack('payment_methods')
             <template v-else>

@@ -17,10 +17,10 @@
     v-if="!cart.value.is_virtual"
 >
     <fieldset class="flex flex-col gap-3" partial-submit v-on:partial-submit="(e) => mutate().then(e.detail.resolve).catch(e.detail.reject)" v-on:change="window.$emit('setShippingAddressesOnCart')">
-        <label class="flex items-center p-5 border rounded relative bg-white" v-if="!cart.value.shipping_addresses?.[0]?.uid">
+        <label class="flex items-center p-5 border rounded-sm relative bg-white" v-if="!cart.value.shipping_addresses?.[0]?.uid">
             <span>@lang('Please enter a shipping address first')</span>
         </label>
-        <label class="flex gap-x-1.5 p-5 border rounded bg-white text-sm text has-[[disabled]]:cursor-not-allowed" v-for="(method, index) in cart.value.shipping_addresses?.[0]?.available_shipping_methods">
+        <label class="flex gap-x-1.5 p-5 border rounded-sm bg-white text-sm text has-disabled:cursor-not-allowed" v-for="(method, index) in cart.value.shipping_addresses?.[0]?.available_shipping_methods">
             <template v-if="false"></template>
 
             @stack('shipping_methods')

@@ -2,7 +2,7 @@
     <template v-slot="{ order, refreshOrder, hideBilling, shipping, billing, items, needsLogin }">
         <div v-if="order" data-testid="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" data-testid="masked">
+            <div class="bg rounded-sm-sm p-8" data-testid="masked">
                 <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>
 
@@ -50,7 +50,7 @@ class="mx-auto"
                 </div>
             </div>
             <div class="flex flex-col mt-4 gap-x-4 md:flex-row">
-                <div class="w-full p-8 bg-white shadow-sm rounded border border-l-2 border-l-primary md:w-1/2" v-if="order.billing_address">
+                <div class="w-full p-8 bg-white shadow-xs rounded-sm border border-l-2 border-l-primary md:w-1/2" v-if="order.billing_address">
                     <p class="text font-lg font-bold mb-2">@lang('Billing address')</p>
                     <ul>
                         <li>@{{ order.billing_address.firstname }} @{{ order.billing_address.lastname }}</li>
@@ -59,7 +59,7 @@ class="mx-auto"
                         <li>@{{ order.billing_address.telephone }}</li>
                     </ul>
                 </div>
-                <div class="w-full p-8 bg-white shadow-sm rounded border-l-2 border border-l-primary mt-4 md:mt-0 md:w-1/2" v-if="order.shipping_address">
+                <div class="w-full p-8 bg-white shadow-xs rounded-sm border-l-2 border border-l-primary mt-4 md:mt-0 md:w-1/2" v-if="order.shipping_address">
                     <p class="text font-lg font-bold mb-2">@lang('Shipping address')</p>
                     <ul>
                         <li>@{{ order.shipping_address.firstname }} @{{ order.shipping_address.lastname }}</li>
@@ -71,11 +71,11 @@ class="mx-auto"
             </div>
 
             <div class="flex flex-col pb-1 mt-4 gap-x-4 md:flex-row">
-                <div class="w-full p-8 bg-white shadow-sm rounded border-l-2 border border-l-primary md:w-1/2" v-if="order.shipping_method">
+                <div class="w-full p-8 bg-white shadow-xs rounded-sm border-l-2 border border-l-primary md:w-1/2" v-if="order.shipping_method">
                     <p class="text font-lg font-bold mb-2">@lang('Shipping method')</p>
                     <p>@{{ order.shipping_method }}</p>
                 </div>
-                <div class="w-full p-8 bg-white shadow-sm rounded border-l-2 border border-l-primary mt-4 md:mt-0 md:w-1/2">
+                <div class="w-full p-8 bg-white shadow-xs rounded-sm border-l-2 border border-l-primary mt-4 md:mt-0 md:w-1/2">
                     <p class="text font-lg font-bold mb-2">@lang('Payment method')</p>
                     <template v-for="method in order.payment_methods">
                         <p>@{{ method.name || method.type }}</p>

@@ -30,7 +30,7 @@ class="absolute right-14 top-1/2 -translate-y-1/2 transition-opacity opacity-100
         <x-heroicon-s-x-mark class="size-7" />
     </button>
     <x-rapidez::button
-        class="!absolute right-0 top-0 bg-opacity-0 hover:bg-opacity-0 border-none *:peer-placeholder-shown:bg-muted *:peer-placeholder-shown:text"
+        class="absolute! right-0 top-0 bg-black/0 hover:bg-black/0 border-none peer-placeholder-shown:*:bg-muted peer-placeholder-shown:*:text"
         type="submit"
         :title="__('Search')"
     >

@@ -1,3 +1,3 @@
-<x-rapidez::button.tag {{ $attributes->twMerge('relative inline-flex items-center justify-center transition font-medium text-base rounded min-h-12 py-1.5 px-5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-x-1.5') }}>
+<x-rapidez::button.tag {{ $attributes->twMerge('relative inline-flex items-center justify-center transition font-medium text-base rounded-sm min-h-12 py-1.5 px-5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-x-1.5') }}>
     {{ $slot }}
 </x-rapidez::button.tag>
@@ -9,7 +9,7 @@
         v-cloak
         v-slot="{ close }"
     >
-        <dialog ref="root" class="container rounded bg-white p-6 border shadow-lg fixed inset-x-0 bottom-4 z-cookie">
+        <dialog ref="root" class="container rounded-sm bg-white p-6 border shadow-lg fixed inset-x-0 bottom-4 z-cookie">
             <div class="flex flex-wrap items-center justify-between">
                 <div class="flex-1 items-center">
                     <div class="text-sm text-black">

@@ -1,14 +1,13 @@
 <div>
     <toggler v-slot="{ isOpen, toggle }">
-        <div class="relative" >
+        <div class="relative">
             <x-rapidez::input
                 class="[&>input]:pr-12"
-                type="password"
                 v-bind:type="isOpen ? 'text' : 'password'"
                 {{ $attributes }}
             />
             @if (!$attributes['disabled'] ?? false)
-                <div v-on:click="toggle" class="absolute right-5 top-1/2 -translate-y-1/2 cursor-pointer">
+                <div v-on:click="() => toggle()" class="absolute right-5 top-1/2 -translate-y-1/2 cursor-pointer">
                     <x-heroicon-o-eye-slash v-if="isOpen" class="h-5"/>
                     <x-heroicon-o-eye v-else class="h-5" v-cloak/>
                 </div>