Frontend color change suggestion

rapidez · Nov 18, 2024 · 8d652ec · 8d652ec
1 parent ac44a09
commit 8d652ec
Show file tree

Hide file tree

Showing 31 changed files with 74 additions and 63 deletions.
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -1,7 +1,7 @@
 @import 'components/vue-slider';
 @import 'components/price-slider';
-@import './theme-variables.css';
-@import './components/pagination.css';
+@import 'theme-variables.css';
+@import 'components/pagination.css';
 
 @tailwind base;
 @tailwind components;

diff --git a/resources/css/components/pagination.css b/resources/css/components/pagination.css
@@ -8,7 +8,7 @@
 }
 
 .pagination-button {
-    @apply !font-semibold !font-sans !border !border-border !rounded !bg-white !text-neutral !shadow;
+    @apply !font-semibold !font-sans !border !border-neutral-110 !rounded !bg-white !text-neutral !shadow;
 }
 
 .pagination-button.active {

diff --git a/resources/css/components/price-slider.css b/resources/css/components/price-slider.css
@@ -8,15 +8,15 @@ div.vue-slider-rail {
 }
 
 div.vue-slider-rail {
-    @apply bg-highlight !important;
+    @apply bg-neutral-100 !important;
 }
 
 div.vue-slider .vue-slider-dot {
     @apply size-6 !important;
 }
 
 div.vue-slider-dot-tooltip-inner {
-    @apply bg-white text-neutral border-border border px-1.5 !important;
+    @apply bg-white text-neutral border-neutral-110 border px-1.5 !important;
 }
 
 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-neutral-110 shadow;
 }
 
 div.vue-slider-tooltip-wrap.vue-slider-tooltip-top {

diff --git a/resources/css/theme-variables.css b/resources/css/theme-variables.css
@@ -4,7 +4,9 @@
     --secondary: 249 115 22;
     --secondary-text: 255 255 255;
     --neutral: 51 65 85;
+    --neutral-100: 241 245 249;
+    --neutral-110: 231 235 239;
+    --enhanced: 54 180 34;
+    --enhanced-text: 255 255 255;
     --inactive: 100 116 139;
-    --highlight: 241 245 249;
-    --border: 231 235 239;
 }
diff --git a/resources/js/stores/useCart.js b/resources/js/stores/useCart.js
@@ -249,9 +249,9 @@ export const taxTotal = computed(() => {
     return cart.value.prices.applied_taxes.reduce((sum, tax) => sum + tax.amount.value, 0)
 })
 
-watch(mask, refresh)
-if (cartStorage.value?.id && !mask.value) {
-    clear()
-}
+// watch(mask, refresh)
+// if (cartStorage.value?.id && !mask.value) {
+//     clear()
+// }
 
 export default () => cart
diff --git a/resources/views/cart/coupon.blade.php b/resources/views/cart/coupon.blade.php
@@ -1,5 +1,5 @@
 <div class="bg-white rounded-lg border p-3">
-    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-5">
+    <h3 class="text-lg leading-6 font-medium text-neutral mb-5">
         @lang('Apply coupon code')
     </h3>
 

diff --git a/resources/views/cart/sidebar.blade.php b/resources/views/cart/sidebar.blade.php
@@ -42,6 +42,6 @@
     </div>
 </dl>
 
-<x-rapidez::button href="{{ route('checkout') }}" dusk="checkout" class="w-full text-center">
+<x-rapidez::button.enhanced href="{{ route('checkout') }}" dusk="checkout" class="w-full text-center">
     @lang('Checkout')
-</x-rapidez::button>
+</x-rapidez::button.enhanced>
diff --git 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')
         <div v-if="hasCart" v-cloak>
             <div class="flex gap-5 max-xl:flex-col">
-                <div class="w-full rounded bg-highlight p-4 xl:p-8 xl:w-3/4">
+                <div class="w-full rounded bg-neutral-100 p-4 xl:p-8 xl:w-3/4">
                     <form
                         v-on:submit.prevent="(e) => {
                             submitPartials(e.target?.form ?? e.target)
@@ -33,9 +33,9 @@ class="flex flex-col gap-5"
                             @include('rapidez::checkout.steps.shipping_method')
                         </template>
 
-                        <x-rapidez::button type="submit" dusk="continue" class="self-start">
+                        <x-rapidez::button.enhanced type="submit" dusk="continue" class="self-start">
                             @lang('Next')
-                        </x-rapidez::button>
+                        </x-rapidez::button.enhanced>
                     </form>
                 </div>
                 <div class="w-full xl:w-1/4">

diff --git a/resources/views/checkout/pages/login.blade.php b/resources/views/checkout/pages/login.blade.php
@@ -20,9 +20,9 @@ class="max-w-md mx-auto"
         >
             @include('rapidez::checkout.steps.login')
 
-            <x-rapidez::button type="submit" dusk="continue" class="mt-3">
+            <x-rapidez::button.enhanced type="submit" dusk="continue" class="mt-3">
                 @lang('Next')
-            </x-rapidez::button>
+            </x-rapidez::button.enhanced>
         </form>
     </div>
 @endsection
diff --git a/resources/views/checkout/pages/onestep.blade.php b/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-highlight rounded p-4 xl:p-8 xl:w-3/4">
+            <div class="w-full bg-neutral-100 rounded 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) =>

diff --git a/resources/views/checkout/pages/payment.blade.php b/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-highlight h-fit p-4 xl:p-8 xl:w-3/4" v-on:submit.prevent="(e) => {
+                <form class="w-full rounded bg-neutral-100 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')

diff --git a/resources/views/checkout/steps/agreements.blade.php b/resources/views/checkout/steps/agreements.blade.php
@@ -21,7 +21,7 @@
     </x-rapidez::slideover>
 
     @if ($agreement->mode == 'AUTO')
-        <label class="text-gray-700 cursor-pointer underline hover:no-underline" for="{{ $agreement->agreement_id }}_agreement">
+        <label class="text-neutral cursor-pointer underline hover:no-underline" for="{{ $agreement->agreement_id }}_agreement">
             {{ $agreement->checkbox_text }}
         </label>
     @else
@@ -32,7 +32,7 @@
                 dusk="agreements"
                 required
             >
-                <label class="text-gray-700 cursor-pointer underline hover:no-underline" for="{{ $agreement->agreement_id }}_agreement">
+                <label class="text-neutral cursor-pointer underline hover:no-underline" for="{{ $agreement->agreement_id }}_agreement">
                     {{ $agreement->checkbox_text }}
                 </label>
             </x-rapidez::checkbox>

diff --git a/resources/views/checkout/steps/credentials.blade.php b/resources/views/checkout/steps/credentials.blade.php
@@ -1,6 +1,6 @@
 <h1 class="mb-5 text-4xl font-bold">@lang('Credentials')</h1>
 
-<form v-on:submit.prevent="save(['credentials'], 3)" class="flex flex-col gap-5 rounded bg-highlight p-4 md:p-8">
+<form v-on:submit.prevent="save(['credentials'], 3)" class="flex flex-col gap-5 rounded bg-neutral-100 p-4 md:p-8">
     <div class="flex flex-col gap-2">
         <div class="grid grid-cols-12 gap-4">
             <p class="col-span-12 text-2xl font-bold">
@@ -31,7 +31,7 @@
             </x-rapidez::radio>
         </template>
     </div>
-    <x-rapidez::button type="submit" dusk="continue" class="self-start">
+    <x-rapidez::button.enhanced type="submit" dusk="continue" class="self-start">
         @lang('Continue')
-    </x-rapidez::button>
+    </x-rapidez::button.enhanced>
 </form>
diff --git a/resources/views/checkout/steps/payment.blade.php b/resources/views/checkout/steps/payment.blade.php
@@ -1,7 +1,7 @@
 @php($checkoutAgreements = \Rapidez\Core\Models\CheckoutAgreement::all())
 
 <h1 class="font-bold text-4xl mb-5">@lang('Payment method')</h1>
-<form class="bg-highlight p-8 rounded mt-6" v-on:submit.prevent="save(['payment_method'], 4)">
+<form class="bg-neutral-100 p-8 rounded mt-6" v-on:submit.prevent="save(['payment_method'], 4)">
     <div class="my-2 border bg-white p-4 rounded" v-for="(method, index) in checkout.payment_methods">
         <x-rapidez::radio
             v-bind:value="method.code"
@@ -62,7 +62,7 @@ class="ml-auto size-8"
         </div>
     @endif
 
-    <x-rapidez::button type="submit" class="mt-5" dusk="continue">
+    <x-rapidez::button.enhanced type="submit" class="mt-5" dusk="continue">
         @lang('Place order')
-    </x-rapidez::button>
+    </x-rapidez::button.enhanced>
 </form>
diff --git a/resources/views/checkout/steps/place_order.blade.php b/resources/views/checkout/steps/place_order.blade.php
@@ -9,8 +9,8 @@
     v-slot="{ mutate, variables }"
 >
     <fieldset>
-        <x-rapidez::button type="submit" dusk="continue" class="mt-3">
+        <x-rapidez::button.enhanced type="submit" dusk="continue" class="mt-3">
             @lang('Place order')
-        </x-rapidez::button>
+        </x-rapidez::button.enhanced>
     </fieldset>
 </graphql-mutation>
diff --git a/resources/views/checkout/steps/success.blade.php b/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-highlight rounded p-8">
+            <div class="bg-neutral-100 rounded 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>
@@ -44,7 +44,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-highlight rounded border-l-2 border-neutral md:w-1/2" v-if="order.billing_address">
+                <div class="w-full p-8 bg-neutral-100 rounded border-l-2 border-neutral md:w-1/2" v-if="order.billing_address">
                     <p class="text-neutral font-lg font-bold mb-2">@lang('Billing address')</p>
                     <ul>
                         <li>@{{ order.billing_address.firstname }} @{{ order.billing_address.lastname }}</li>
@@ -53,7 +53,7 @@ class="mx-auto"
                         <li>@{{ order.billing_address.telephone }}</li>
                     </ul>
                 </div>
-                <div class="w-full p-8 bg-highlight rounded border-l-2 border-neutral mt-4 md:mt-0 md:w-1/2" v-if="order.shipping_address">
+                <div class="w-full p-8 bg-neutral-100 rounded border-l-2 border-neutral mt-4 md:mt-0 md:w-1/2" v-if="order.shipping_address">
                     <p class="text-neutral font-lg font-bold mb-2">@lang('Shipping address')</p>
                     <ul>
                         <li>@{{ order.shipping_address.firstname }} @{{ order.shipping_address.lastname }}</li>
@@ -65,11 +65,11 @@ class="mx-auto"
             </div>
 
             <div class="flex flex-col mt-4 gap-x-4 md:flex-row">
-                <div class="w-full p-8 bg-highlight rounded border-l-2 border-neutral md:w-1/2" v-if="order.shipping_method">
+                <div class="w-full p-8 bg-neutral-100 rounded border-l-2 border-neutral md:w-1/2" v-if="order.shipping_method">
                     <p class="text-neutral font-lg font-bold mb-2">@lang('Shipping method')</p>
                     <p>@{{ order.shipping_method }}</p>
                 </div>
-                <div class="w-full p-8 bg-highlight rounded border-l-2 border-neutral mt-4 md:mt-0 md:w-1/2">
+                <div class="w-full p-8 bg-neutral-100 rounded border-l-2 border-neutral mt-4 md:mt-0 md:w-1/2">
                     <p class="text-neutral font-lg font-bold mb-2">@lang('Payment method')</p>
                     <p v-for="method in order.payment_methods">@{{ method.name || method.type }}</p>
                 </div>

diff --git a/resources/views/components/breadcrumb.blade.php b/resources/views/components/breadcrumb.blade.php
@@ -6,7 +6,7 @@
             <span itemprop="name">{{ $slot }}</span>
             <meta itemprop="position" content="{{ $position }}" />
         </a>
-        <x-heroicon-s-chevron-right class="h-4 w-4 text-gray-400"/>
+        <x-heroicon-s-chevron-right class="h-4 w-4 text-inactive"/>
     @else
         <span class="text-sm" itemprop="name">{{ $slot }}</span>
         <meta itemprop="position" content="{{ $position }}" />

diff --git a/resources/views/components/button/cart.blade.php b/resources/views/components/button/cart.blade.php
@@ -1,4 +1,4 @@
-<x-rapidez::button {{ $attributes->merge([
+<x-rapidez::button.enhanced {{ $attributes->merge([
     'type' => 'submit',
     'dusk' => 'add-to-cart',
 ])->class('flex items-center') }}>
@@ -8,4 +8,4 @@
     <span v-if="!addToCart.adding && !addToCart.added">@lang('Add to cart')</span>
     <span v-if="addToCart.adding" v-cloak>@lang('Adding')...</span>
     <span v-if="addToCart.added" v-cloak>@lang('Added')</span>
-</x-rapidez::button>
+</x-rapidez::button.enhanced>
diff --git a/resources/views/components/button/enhanced.blade.php b/resources/views/components/button/enhanced.blade.php
@@ -0,0 +1,3 @@
+<x-rapidez::button.base {{ $attributes->class('bg-enhanced text-enhanced-text') }}>
+    {{ $slot }}
+</x-rapidez::button.base>
diff --git a/resources/views/components/input.blade.php b/resources/views/components/input.blade.php
@@ -13,7 +13,7 @@
             'type' => 'text',
             'placeholder' => __($placeholder ?? ''),
             'dusk' => $attributes->get('v-bind:dusk') ? null : $name,
-            'class' => 'w-full py-2 px-3 border-border rounded !ring-0 focus:!border-inactive sm:text-sm text-neutral',
+            'class' => 'w-full py-2 px-3 border-neutral-110 rounded !ring-0 focus:!border-inactive sm:text-sm text-neutral',
         ]) }}
     >
 </div>
diff --git a/resources/views/components/radio.blade.php b/resources/views/components/radio.blade.php
@@ -1,6 +1,6 @@
 <label class="flex items-center">
     <input type="radio" {{ $attributes->merge(['class' => 'focus:ring-neutral h-4 w-4 text-neutral border']) }}>
-    <div class="ml-2 text-gray-700">
+    <div class="ml-2 text-neutral">
         {{ $slot }}
     </div>
 </label>
diff --git a/resources/views/components/select.blade.php b/resources/views/components/select.blade.php
@@ -10,7 +10,7 @@
         'id' => $name ?? null,
         'name' => $name ?? null,
         'dusk' => $attributes->get('v-bind:dusk') ? null : $name ?? null,
-        'class' => 'w-full py-2 pl-3 pr-8 border-gray-200 rounded focus:ring-neutral focus:border-neutral sm:text-sm'
+        'class' => 'w-full py-2 pl-3 pr-8 border border-neutral-110 rounded outline-0 ring-0 focus:ring-transparent focus:border-neutral sm:text-sm'
     ]) }}>
         {{ $slot }}
     </select>

diff --git a/resources/views/components/textarea.blade.php b/resources/views/components/textarea.blade.php
@@ -11,6 +11,6 @@
         'name' => $name,
         'placeholder' => __($placeholder ?? ucfirst($name)),
         'dusk' => $attributes->get('v-bind:dusk') ? null : $name,
-        'class' => 'w-full py-2 px-3 border-border rounded !ring-0 focus:!border-inactive sm:text-sm text-neutral',
+        'class' => 'w-full py-2 px-3 border-neutral-110 rounded !ring-0 focus:!border-inactive sm:text-sm text-neutral',
     ]) }}></textarea>
 </div>
diff --git a/resources/views/layouts/partials/footer/copyright.blade.php b/resources/views/layouts/partials/footer/copyright.blade.php
@@ -1,3 +1,3 @@
-<p class="text-base text-gray-400 md:order-1">
+<p class="text-base text-inactive md:order-1">
     &copy; {{ date('Y') }} {{ config('app.name') }}. @lang('All rights reserved.')
 </p>
diff --git a/resources/views/layouts/partials/footer/newsletter.blade.php b/resources/views/layouts/partials/footer/newsletter.blade.php
@@ -15,7 +15,7 @@
                                 name="email"
                                 type="email"
                                 v-model="variables.email"
-                                class="w-full min-w-0 appearance-none rounded-md border h-10 border-text-inactive bg-white py-2 px-4 text-base text-gray-900 placeholder-text-neutral shadow-sm focus:border-indigo-500 focus:placeholder-gray-400 focus:outline-none focus:ring-indigo-500"
+                                class="w-full min-w-0 appearance-none rounded-md border h-10 border-text-inactive bg-white py-2 px-4 text-base text-neutral placeholder-text-neutral shadow-sm focus:placeholder-inactive focus:outline-none"
                                 wrapperClass="flex-grow"
                                 dusk="newsletter-email"
                                 autocomplete="email"

diff --git a/resources/views/layouts/partials/header/minicart.blade.php b/resources/views/layouts/partials/header/minicart.blade.php
@@ -17,12 +17,12 @@
                 </tr>
             </table>
             <div class="flex justify-between items-center">
-                <x-rapidez::button.outline href="{{ route('cart') }}" class="mr-5">
+                <x-rapidez::button.outline href="{{ route('cart') }}" class="mr-5 whitespace-nowrap">
                     @lang('Show cart')
                 </x-rapidez::button.outline>
-                <x-rapidez::button href="{{ route('checkout') }}">
+                <x-rapidez::button.enhanced href="{{ route('checkout') }}">
                     @lang('Checkout')
-                </x-rapidez::button>
+                </x-rapidez::button.enhanced>
             </div>
         </div>
     </div>

diff --git a/resources/views/listing/partials/filter/swatch.blade.php b/resources/views/listing/partials/filter/swatch.blade.php
@@ -3,7 +3,7 @@
     :component-id="filter.code"
     :data-field="filter.super ? 'super_' + filter.code : (filter.visual_swatch ? 'visual_' + filter.code : filter.code)"
     :inner-class="{
-        title: 'capitalize text-sm font-medium text-gray-900',
+        title: 'capitalize text-sm font-medium text-neutral',
     }"
     :react="{and: filter.input == 'multiselect' ? reactiveFilters : reactiveFilters.filter(item => item != filter.code) }"
     :query-format="filter.input == 'multiselect' ? 'and' : 'or'"

diff --git a/resources/views/listing/partials/item.blade.php b/resources/views/listing/partials/item.blade.php
@@ -16,7 +16,7 @@ class="mb-3 h-48 w-full rounded-t object-contain" :alt="item.name" :loading="con
                 />
                 <x-rapidez::no-image v-else class="mb-3 h-48 rounded-t" />
                 <div class="px-2">
-                    <div class="text-base font-medium text-gray-900">@{{ item.name }}</div>
+                    <div class="text-base font-medium text-neutral">@{{ item.name }}</div>
                     @if (!Rapidez::config('catalog/frontend/show_swatches_in_product_list', 1))
                         <div class="flex items-center space-x-2">
                             <div class="font-semibold">@{{ (item.special_price || item.price) | price }}</div>

diff --git a/resources/views/listing/products.blade.php b/resources/views/listing/products.blade.php
@@ -1,4 +1,4 @@
-@php $dropdownClasses = '!h-auto !border-solid !border !border-border !rounded !py-2 !ring-0 focus:!border-inactive !text-sm !text-neutral !outline-none ' @endphp
+@php $dropdownClasses = '!h-auto !border-solid !border !border-neutral-110 !rounded !py-2 !ring-0 focus:!border-inactive !text-sm !text-neutral !outline-none ' @endphp
 <reactive-list
     id="products"
     component-id="products"

diff --git a/resources/views/product/overview.blade.php b/resources/views/product/overview.blade.php
@@ -31,7 +31,7 @@
                     </div>
                     <div>
                         <div class="mb-2 border-t pt-5 text-lg font-bold">@lang('Specifications')</div>
-                        <dl class="flex flex-col text-inactive [&>dd]:rounded [&>dd]:p-2 odd:[&>dd]:bg-highlight odd:[&>dd]:font-semibold odd:[&>dd]:text-neutral even:[&>dd]:pl-4">
+                        <dl class="flex flex-col text-inactive [&>dd]:rounded [&>dd]:p-2 odd:[&>dd]:bg-neutral-100 odd:[&>dd]:font-semibold odd:[&>dd]:text-neutral even:[&>dd]:pl-4">
                             <dd>ID</dd>
                             <dd>{{ $product->entity_id }}</dd>
                             <dd>SKU</dd>
@@ -52,7 +52,7 @@
         </div>
     </div>
     @if (App::providerIsLoaded('Rapidez\Reviews\ReviewsServiceProvider'))
-        <div class="my-5 py-8 bg-highlight min-h-[515px]">
+        <div class="my-5 py-8 bg-neutral-100 min-h-[515px]">
             <div class="container grid w-full grid-cols-1 gap-5 p-5 md:grid-cols-3">
                 @include('rapidez-reviews::form', ['sku' => $product->sku])
                 <div class="md:col-span-2">