[6.x] Container shade (#12749)

Author: jaygeorge

packages/ui/src/Panel/Panel.vue

@@ -12,7 +12,7 @@ const props = defineProps({
 <template>
     <div
         :class="[
-            '@container/panel relative bg-gray-200/60 [.bg-architectural-lines_&]:backdrop-blur-[10px] dark:bg-gray-950 dark:inset-shadow-2xs dark:inset-shadow-black',
+            '@container/panel relative bg-gray-200/55 [.bg-architectural-lines_&]:backdrop-blur-[10px] dark:bg-gray-950 dark:inset-shadow-2xs dark:inset-shadow-black',
             'w-full rounded-2xl mb-5 max-[600px]:p-1.25 p-1.75 [&:has([data-ui-panel-header])]:pt-0 focus-none starting-style-transition starting-style-transition--siblings',
         ]"
         data-ui-panel

resources/css/components/index-fields.css

@@ -23,7 +23,7 @@
 }
 
 .status-index-field {
-    @apply inline-block shrink justify-center rounded-full bg-gray-200/60 px-2 py-0.5 text-center text-xs text-gray-900 dark:bg-gray-300/8 dark:text-dark-150;
+    @apply inline-block shrink justify-center rounded-full bg-gray-200/55 px-2 py-0.5 text-center text-xs text-gray-900 dark:bg-gray-300/8 dark:text-dark-150;
 
     &.status-published:not(.status-private) {
         @apply bg-green-200 text-green-900 dark:bg-green-300/6 dark:text-green-300;

resources/js/components/ui/Listing/BulkActions.vue

@@ -51,7 +51,7 @@ function actionFailed(response) {
             :animate="{ y: 0, opacity: 1 }"
             :transition="{ duration: 0.2, ease: 'easeInOut' }"
         >
-            <div class="[.nav-open_&]:translate-x-23 transition-transform duration-300 relative space-y-3 rounded-xl border border-gray-300/60 p-1 bg-gray-200/60 backdrop-blur-[20px] shadow-[0_1px_16px_-2px_rgba(63,63,71,0.2)] dark:border-none dark:bg-gray-800 dark:shadow-[0_10px_15px_rgba(0,0,0,.5)] dark:inset-shadow-2xs dark:inset-shadow-white/10">
+            <div class="[.nav-open_&]:translate-x-23 transition-transform duration-300 relative space-y-3 rounded-xl border border-gray-300/60 p-1 bg-gray-200/55 backdrop-blur-[20px] shadow-[0_1px_16px_-2px_rgba(63,63,71,0.2)] dark:border-none dark:bg-gray-800 dark:shadow-[0_10px_15px_rgba(0,0,0,.5)] dark:inset-shadow-2xs dark:inset-shadow-white/10">
             <ButtonGroup>
                 <Button
                     class="text-blue-500!"