Shadow, outline and ring colors (#691)

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

@@ -10,7 +10,7 @@
                 'pointer-events-none cursor-default' => $currentStepKey < $checkoutStepKey,
                 'bg-emphasis' => $checkoutStepKey <= $currentStepKey,
                 'bg-white' => $checkoutStepKey > $currentStepKey,
-                'bg-emphasis shadow-md pointer-events-none cursor-default' => $checkoutStepKey === $currentStepKey
+                'bg-emphasis shadow-md shadow-emphasis pointer-events-none cursor-default' => $checkoutStepKey === $currentStepKey
             ])>
                 {{ $checkoutStepKey + 1 }}
             </a>

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

@@ -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-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-sm shadow-default rounded 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>
@@ -53,7 +53,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-sm shadow-default rounded 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>
@@ -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-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-sm shadow-default rounded 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-sm shadow-default rounded 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>
                     <p v-for="method in order.payment_methods">@{{ method.name || method.type }}</p>
                 </div>

resources/views/components/notifications.blade.php

@@ -12,7 +12,7 @@
             >
                 <component :is="link ? 'a' : 'div'" v-if="show" class="relative flex items-end justify-center pointer-events-none mb-3 sm:items-start sm:justify-end" :class="{ 'pointer-events-none': !link }">
 
-                    <div class="max-w-sm w-full shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden border" :class="classes">
+                    <div class="max-w-sm w-full shadow-lg shadow-default rounded-lg pointer-events-auto ring-1 ring-emphasis/10 overflow-hidden border" :class="classes">
                         <div class="p-4">
                             <div class="flex items-start">
                                 <div class="flex-shrink-0">

resources/views/layouts/partials/header/autocomplete.blade.php

@@ -48,7 +48,7 @@ class="relative [&_*]:!m-0"
             <div slot="render" slot-scope="dataSearchScope">
                 <div
                     v-if="dataSearchScope.downshiftProps.isOpen && !autocompleteScope.searchLoading && !dataSearchScope.loading && dataSearchScope.value"
-                    class="z-header-autocomplete absolute -inset-x-5 top-14 overflow-x-hidden overflow-y-auto scrollbar-hide pt-4 pb-7 bg-white shadow-xl max-md:h-[calc(100svh-150px)] max-md:max-h-[calc(100svh-150px)] md:top-14 md:max-h-[calc(100svh-150px)] md:rounded-xl md:border md:inset-x-0 md:w-full md:-translate-y-px"
+                    class="z-header-autocomplete absolute -inset-x-5 top-14 overflow-x-hidden overflow-y-auto scrollbar-hide pt-4 pb-7 bg-white max-md:h-[calc(100svh-150px)] max-md:max-h-[calc(100svh-150px)] md:top-14 md:max-h-[calc(100svh-150px)] md:rounded-xl md:border md:inset-x-0 md:w-full md:-translate-y-px"
                 >
                     <div v-if="dataSearchScope.data.length || autocompleteScope.resultsCount">
                         <div class="flex flex-col prose-li:px-5 hover:prose-li:bg-muted">

resources/views/listing/partials/filter/swatch.blade.php

@@ -17,8 +17,8 @@
                 <template v-for="swatch in data">
                     <label
                         v-if="filter.visual_swatch"
-                        class="size-6 ring-black/5 ring-1 ring-inset cursor-pointer flex items-center justify-center hover:opacity-75 rounded-full transition"
-                        v-bind:class="{'outline-2 outline outline-black outline-offset-1' : value[swatch.key]}"
+                        class="size-6 ring-1 ring-emphasis/10 ring-inset cursor-pointer flex items-center justify-center hover:opacity-75 rounded-full transition"
+                        v-bind:class="{'outline outline-2 outline-emphasis outline-offset-1' : value[swatch.key]}"
                         v-bind:style="{ background: $root.swatches[filter.code]?.options[swatch.key].swatch }"
                     >
                         <input type="checkbox" v-on:change="handleChange(swatch.key)" class="hidden" v-bind:checked="value[swatch.key]"/>

resources/views/product/partials/gallery/thumbnails.blade.php

@@ -32,7 +32,7 @@ class="absolute inset-0 items-center justify-center bg-black/20 hidden"
                 'max-sm:flex': imageId === {{ $breakpoints['xs'] }}
             }"
         >
-            <span class="size-9 flex items-center justify-center rounded-full shadow-lg bg-white text-sm font-bold text">
+            <span class="size-9 flex items-center justify-center rounded-full shadow-lg shadow-default bg-white text-sm font-bold text">
                 +@{{ images.length - (imageId + 1) }}
             </span>
         </span>

tailwind.config.js

@@ -53,6 +53,12 @@ export default {
                     muted: color('--border-muted', colors.slate[100]),
                 },
 
+                shadow: {
+                    emphasis: color('--shadow-emphasis', colors.slate[900]),
+                    DEFAULT: color('--shadow', colors.slate[700]),
+                    muted: color('--shadow-muted', colors.slate[500]),
+                },
+
                 background: {
                     emphasis: color('--background-emphasis', colors.slate[200]),
                     DEFAULT: color('--background', colors.slate[100]),
@@ -82,6 +88,18 @@ export default {
                 ...theme('colors.border'),
             }),
             backgroundColor: (theme) => theme('colors.background'),
+            ringColor: (theme) => ({
+                default: theme('colors.border'),
+                ...theme('colors.border'),
+            }),
+            outlineColor: (theme) => ({
+                default: theme('colors.border'),
+                ...theme('colors.border'),
+            }),
+            boxShadowColor: (theme) => ({
+                default: theme('colors.shadow'),
+                ...theme('colors.shadow'),
+            }),
         },
         container: {
             center: true,