contact panel/nav panel shadows

packages/angular/src/app/app.component.ts

@@ -16,7 +16,9 @@ import { ScreenService, ThemeService } from './services';
 })
 export class AppComponent implements OnDestroy {
   @HostBinding('class') get getClass() {
-    return Object.keys(this.screen.sizes).filter((cl) => this.screen.sizes[cl]).join(' ');
+    const classes = Object.keys(this.screen.sizes).filter((cl) => this.screen.sizes[cl]);
+    classes.push(this.themeService.currentTheme);
+    return classes.join(' ');
   }
   private themeService =  inject(ThemeService);
   private screen = inject(ScreenService);

packages/angular/src/app/components/library/contact-panel/contact-panel.component.scss

@@ -8,13 +8,22 @@
   --contact-side-panel-width: 100vw;
 }
 
+:host-context(.dx-theme-fluent .light) .panel.open {
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.08);
+}
+
+:host-context(.dx-theme-fluent .dark) .panel.open {
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.48);
+}
+
 :host .panel {
   position: absolute;
   right: calc(-1 * var(--contact-side-panel-width));
   top: 0;
   bottom: 0;
   background: var(--base-bg);
   transition: right 400ms;
+  border-radius: 0 8px 8px 0;
 
   .embedded.dx-viewport & {
     top: 0;

packages/angular/src/styles.scss

@@ -244,8 +244,12 @@ body {
     font-family: "Inter", sans-serif;
   }
 
-  .dx-drawer-panel-content {
-    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.12);
+  .light .dx-drawer-panel-content {
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.08);
+  }
+
+  .dark .dx-drawer-panel-content {
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.96);
   }
 
   .layout-body .menu-container.theme-dependent,

packages/react/src/App.tsx

@@ -43,7 +43,7 @@ export const App = () => {
       <ThemeContext.Provider value={themeContext}>
         <AuthProvider>
           <NavigationProvider>
-            <div className={`app ${screenSizeClass}`}>
+            <div className={`app ${screenSizeClass} ${themeContext.theme}`}>
               {
                 themeContext.isLoaded ? <RootApp /> : ''
               }

packages/react/src/components/library/contact-panel/ContactPanel.scss

@@ -8,13 +8,22 @@
   --contact-side-panel-width: 100vw;
 }
 
+.dx-theme-fluent .light .panel.open {
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.08);
+}
+
+.dx-theme-fluent .dark .panel.open {
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.48);
+}
+
 .panel {
   position: absolute;
   top: 0;
   bottom: 0;
   right: calc(-1 * var(--contact-side-panel-width));
   background: var(--base-bg);
   transition: right 400ms;
+  border-radius: 0 8px 8px 0;
 
   .embedded.dx-viewport & {
     top: 0;

packages/react/src/styles.scss

@@ -277,8 +277,12 @@ body {
     font-family: "Inter", sans-serif;
   }
 
-  .dx-drawer-panel-content {
-    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.12);
+  .light .dx-drawer-panel-content {
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.08);
+  }
+
+  .dark .dx-drawer-panel-content {
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.96);
   }
 
   .layout-body .menu-container.theme-dependent,

packages/vue/src/App.vue

@@ -4,9 +4,10 @@ import {
 } from 'vue';
 import { AppInfo, appInfoInjectKey } from '@/types/app-info';
 import { screenInfo } from './utils/media-query';
+import { themeService } from './theme/theme-service';
 
 const appInfo = inject<AppInfo>(appInfoInjectKey);
-const cssClasses = computed(() => ['app'].concat(screenInfo.value.cssClasses));
+const cssClasses = computed(() => ['app'].concat(screenInfo.value.cssClasses).concat(themeService.currentTheme.value));
 document.title = appInfo?.title || '';
 </script>
 

packages/vue/src/components/library/contact-panel.vue

@@ -350,6 +350,7 @@ const navigateToDetails = () => {
   right: calc(-1 * var(--contact-side-panel-width));
   background: var(--base-bg);
   transition: right 400ms;
+  border-radius: 0 8px 8px 0;
 
   :deep(.dx-layout-manager-one-col) .dx-box-item {
     .dx-single-column-item-content .contact-fields-group {
@@ -371,7 +372,7 @@ const navigateToDetails = () => {
 
   &.open {
     right: 0;
-    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.04), 0px 4px 4px 0px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--panel-shadow, 0px 0px 6px 0px rgba(0, 0, 0, 0.04), 0px 4px 4px 0px rgba(0, 0, 0, 0.12));
   }
 
   &.pin {
@@ -438,3 +439,12 @@ const navigateToDetails = () => {
   }
 }
 </style>
+<style lang="scss">
+.dx-theme-fluent .light {
+  --panel-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
+}
+
+.dx-theme-fluent .dark {
+  --panel-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.48);
+}
+</style>

packages/vue/src/styles.scss

@@ -226,8 +226,12 @@
     font-family: "Inter", sans-serif;
   }
 
-  .dx-drawer-panel-content {
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);
+  .light .dx-drawer-panel-content {
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.08);
+  }
+
+  .dark .dx-drawer-panel-content {
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.96);
   }
 
   .layout-body {