Design ideas

src/core/packages/application/common/src/global_app_style.tsx

@@ -39,10 +39,22 @@ export const renderingOverrides = (euiTheme: UseEuiTheme['euiTheme']) => css`
     flex-grow: 1;
     z-index: 0; // This effectively puts every high z-index inside the scope of this wrapper to it doesn't interfere with the header and/or overlay mask
     position: relative; // This is temporary for apps that relied on this being present on \`.application\`
+    background-color: ${euiTheme.colors.backgroundBasePlain};
+    border: ${euiTheme.border.thin};
+    border-radius: ${euiTheme.border.radius.medium};
+    margin: ${euiTheme.size.s};
+
+    .kbnAppWrapper {
+      // There is a kbnAppWrapper inside of kbnAppWrapper
+      background-color: transparent;
+      border: none;
+      border-radius: none;
+      margin: 0;
+    }
   }
 
   .kbnBody {
-    padding-top: var(--euiFixedHeadersOffset, 0);
+    padding-top: 64px;
   }
 
   // Conditionally override :root CSS fixed header variable. Updating \`--euiFixedHeadersOffset\`
@@ -88,6 +100,15 @@ export const renderingOverrides = (euiTheme: UseEuiTheme['euiTheme']) => css`
       --kbnAppHeadersOffset: var(--euiFixedHeadersOffset, 0);
     }
   }
+
+  // REMOVE THIS - CHANGE IN EUI
+  .euiPageTemplate {
+    background-color: ${euiTheme.colors.backgroundBasePlain};
+    border-radius: ${euiTheme.border.radius.medium};
+  }
+  .euiPageHeader {
+    background-color: ${euiTheme.colors.backgroundBasePlain};
+  }
 `;
 
 export const bannerStyles = (euiTheme: UseEuiTheme['euiTheme']) => css`

src/core/packages/chrome/browser-internal/src/ui/project/app_menu.tsx

@@ -29,14 +29,13 @@ export const AppMenuBar = ({ headerActionMenuMounter }: AppMenuBarProps) => {
       data-test-subj="kibanaProjectHeaderActionMenu"
       css={css`
         z-index: ${zIndex};
-        background: ${euiTheme.colors.body};
-        border-bottom: ${euiTheme.border.thin};
+        border-radius: ${euiTheme.border.radius.medium};
         display: flex;
         justify-content: end;
         align-items: center;
         padding: 0 ${euiTheme.size.s};
+        margin: 0 ${euiTheme.size.s};
         height: var(--kbnProjectHeaderAppActionMenuHeight, ${euiTheme.size.xxxl});
-        margin-bottom: -${euiTheme.border.width.thin};
         /* fixates the elements position in the viewport, removes the element from the flow of the page */
         position: sticky;
         /* position below the primary fixed EuiHeader in the viewport */

src/core/packages/chrome/browser-internal/src/ui/project/header.tsx

@@ -47,7 +47,16 @@ import { ScreenReaderRouteAnnouncements, SkipToMainContent } from '../header/scr
 import { AppMenuBar } from './app_menu';
 import { ProjectNavigation } from './navigation';
 
-const getHeaderCss = ({ size, colors }: EuiThemeComputed) => ({
+const getHeaderCss = ({ size, colors, border }: EuiThemeComputed) => ({
+  headerFirstBar: css`
+    background-color: ${colors.backgroundBaseFormsPrepend};
+    // background-color: rgb(255,255,255, .8);
+    // backdrop-filter: blur(15px);
+    box-shadow: none;
+    border: none;
+    border-radius: ${border.radius.medium};
+    margin: ${size.s};
+  `,
   logo: {
     container: css`
       display: flex;
@@ -70,6 +79,11 @@ const getHeaderCss = ({ size, colors }: EuiThemeComputed) => ({
     // needed to enable breadcrumbs truncation
     min-width: 0;
     flex-shrink: 1;
+
+    .euiCollapsibleNavButtonWrapper {
+      border: none;
+      margin-inline-end: 0;
+    }
   `,
   breadcrumbsSectionItem: css`
     min-width: 0; // needed to enable breadcrumbs truncation
@@ -247,7 +261,7 @@ export const ProjectHeader = ({
       <HeaderTopBanner headerBanner$={observables.headerBanner$} />
       <header data-test-subj="kibanaProjectHeader">
         <div id="globalHeaderBars" data-test-subj="headerGlobalNav" className="header__bars">
-          <EuiHeader position="fixed" className="header__firstBar">
+          <EuiHeader position="fixed" className="header__firstBar" css={headerCss.headerFirstBar}>
             <EuiHeaderSection grow={false} css={headerCss.leftHeaderSection}>
               <Router history={application.history}>
                 <ProjectNavigation

src/core/packages/chrome/browser-internal/src/ui/project/navigation.tsx

@@ -35,11 +35,19 @@ export const ProjectNavigation: FC<PropsWithChildren<Props>> = ({
       css={{
         overflow: 'visible',
         clipPath: `polygon(0 0, calc(var(--euiCollapsibleNavOffset) + ${PANEL_WIDTH}px) 0, calc(var(--euiCollapsibleNavOffset) + ${PANEL_WIDTH}px) 100%, 0 100%)`,
+        backgroundColor: 'transparent',
+        boxShadow: 'none',
+        border: 'none',
+        marginTop: '8px',
       }}
       className={css`
         .euiFlyoutBody__overflowContent {
           height: 100%;
         }
+
+        .euiFlyoutFooter {
+          background-color: transparent;
+        }
       `}
     >
       {children}

src/platform/plugins/shared/dashboard/public/dashboard_top_nav/_dashboard_top_nav.scss

@@ -9,6 +9,5 @@
     position: sticky;
     z-index: $euiZLevel3;
     top: var(--euiFixedHeadersOffset, 0);
-    background: $euiPageBackgroundColor;
   }
 }