fix: update sidebar styles for inset and floating variants

Author: tanerengiiin

packages/@primereact/styles/src/sidebar/Sidebar.style.ts

@@ -122,7 +122,7 @@ const theme = /*css*/ `
     .p-sidebar[data-side="right"][data-collapsible="offcanvas"] .p-sidebar-rail { left: -1.5px; }
     .p-sidebar[data-side="right"][data-collapsible="offcanvas"] .p-sidebar-rail::after { left: auto; right: 100%; transform: none; }
     
-    .p-sidebar-inset { position: relative; display: flex; width: 100%; flex: 1; flex-direction: column; background-color: light-dark(var(--p-surface-0), var(--p-surface-950)); }
+    .p-sidebar-inset { position: relative; display: flex; width: 100%; flex: 1; flex-direction: column; background-color: light-dark(var(--p-surface-50), var(--p-surface-900)); }
     .p-sidebar[data-variant="inset"] ~ .p-sidebar-inset, .p-sidebar-inset:has(~ .p-sidebar[data-variant="inset"]) { background-color: light-dark(var(--p-surface-0), var(--p-surface-950)); margin: 0.5rem; border-radius: 0.75rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
 `;
 

packages/@primereact/styles/src/sidebar/SidebarLayout.style.ts

@@ -3,12 +3,12 @@ import type { SidebarRootInstance } from '@primereact/types/primitive/sidebar';
 
 const theme = /*css*/ `
     .p-sidebar-layout { display: flex; min-height: 100svh; width: 100%; }
-    .p-sidebar-layout:has([data-variant="inset"]) { background-color: light-dark(var(--p-surface-50), var(--p-surface-900)); }
+    .p-sidebar-layout:has([data-variant="inset"]), .p-sidebar-layout:has([data-variant="floating"]) { background-color: light-dark(var(--p-surface-50), var(--p-surface-900)); }
 
     .p-sidebar-inset { position: relative; display: flex; width: 100%; flex: 1; flex-direction: column; background-color: light-dark(var(--p-surface-50), var(--p-surface-900)); }
     .p-sidebar[data-variant="inset"] ~ .p-sidebar-inset { background-color: light-dark(var(--p-surface-0), var(--p-surface-950)); margin: 0.5rem; border-radius: 0.75rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
 
-    .p-sidebar-backdrop { z-index: 25; }
+    .p-sidebar-backdrop { z-index: 15; }
     .p-sidebar-backdrop.p-overlay-mask { pointer-events: auto; }
 `;
 

packages/tailwind/src/sidebar.tsx

@@ -30,7 +30,7 @@ import {
 import * as React from 'react';
 
 function SidebarLayout({ className, ...props }: SidebarLayoutProps) {
-    return <PRSidebar.Layout className={cn('flex min-h-svh w-full has-[[data-variant=inset]]:bg-surface-50 dark:has-[[data-variant=inset]]:bg-surface-900', className)} {...props} />;
+    return <PRSidebar.Layout className={cn('flex min-h-svh w-full has-[[data-variant=inset]]:bg-surface-50 dark:has-[[data-variant=inset]]:bg-surface-900 has-[[data-variant=floating]]:bg-surface-50 dark:has-[[data-variant=floating]]:bg-surface-900', className)} {...props} />;
 }
 
 function Sidebar({ className, ...props }: SidebarRootProps) {
@@ -305,7 +305,7 @@ function SidebarInset({ className, ...props }: SidebarInsetProps) {
     return (
         <PRSidebar.Inset
             className={cn(
-                `relative flex w-full flex-1 flex-col bg-surface-0 dark:bg-surface-950
+                `relative flex w-full flex-1 flex-col bg-surface-50 dark:bg-surface-900
                 [[data-variant=inset]~&]:bg-surface-0 dark:[[data-variant=inset]~&]:bg-surface-950 [[data-variant=inset]~&]:m-2 [[data-variant=inset]~&]:rounded-xl [[data-variant=inset]~&]:shadow-sm
                 [&:has(~[data-variant=inset])]:bg-surface-0 dark:[&:has(~[data-variant=inset])]:bg-surface-950 [&:has(~[data-variant=inset])]:m-2 [&:has(~[data-variant=inset])]:rounded-xl [&:has(~[data-variant=inset])]:shadow-sm`,
                 className
@@ -316,7 +316,7 @@ function SidebarInset({ className, ...props }: SidebarInsetProps) {
 }
 
 function SidebarBackdrop({ className, ...props }: SidebarBackdropProps) {
-    return <PRSidebar.Backdrop className={cn('fixed inset-0 z-25 bg-black/50 opacity-100 data-enter-from:opacity-0 data-leave-to:opacity-0 transition-opacity duration-150 ease-out', className)} {...props} />;
+    return <PRSidebar.Backdrop className={cn('fixed inset-0 z-15 bg-black/50 opacity-100 data-enter-from:opacity-0 data-leave-to:opacity-0 transition-opacity duration-150 ease-out', className)} {...props} />;
 }
 
 export {