Use the backdrop color variable (#696)

rapidez · Jan 30, 2025 · c38a71c · c38a71c
1 parent 7f7d518
commit c38a71c
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 2 deletions.
diff --git a/composer.json b/composer.json
@@ -27,7 +27,7 @@
         "lcobucci/clock": "^2.0|^3.2",
         "lcobucci/jwt": "^4.0|^5.3",
         "mailerlite/laravel-elasticsearch": "^11.1",
-        "rapidez/blade-components": "^1.4",
+        "rapidez/blade-components": "^1.5",
         "rapidez/blade-directives": "^1.0",
         "tormjens/eventy": "^0.8"
     },

diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -22,7 +22,7 @@ class="relative w-full"
 >
     <x-rapidez::reactive-base slot-scope="autocompleteScope">
         <div
-            class="z-header-autocomplete-overlay pointer-events-none fixed inset-0 cursor-pointer bg-black/40 opacity-0 transition duration-500"
+            class="z-header-autocomplete-overlay pointer-events-none fixed inset-0 cursor-pointer bg-backdrop opacity-0 transition duration-500"
             :class="autocompleteScope.overlay ? 'pointer-events-auto opacity-100 prevent-scroll' : 'opacity-0 pointer-events-none '"
         ></div>
         <x-rapidez::autocomplete.magnifying-glass v-bind:class="{ 'bg-primary text-white': autocompleteScope.overlay }" />

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -64,6 +64,7 @@ export default {
                     DEFAULT: color('--background', colors.slate[100]),
                     muted: color('--background-muted', colors.slate[50]),
                 },
+                backdrop: color('--backdrop', 'rgba(0, 0, 0, 0.4)'),
             },
             zIndex: {
                 'header': '100',