[SharedUX] SCSS migration Home plugin

src/core/public/cssUtils.ts

@@ -9,7 +9,12 @@
 
 // This file replaces scss core/public/_mixins.scss
 
-import { css } from '@emotion/react';
+import { css, keyframes } from '@emotion/react';
+import { COLOR_MODES_STANDARD, UseEuiTheme, euiCanAnimate } from '@elastic/eui';
+import bg_top_branded from './styles/core_app/images/bg_top_branded.svg';
+import bg_top_branded_dark from './styles/core_app/images/bg_top_branded_dark.svg';
+import bg_bottom_branded from './styles/core_app/images/bg_bottom_branded.svg';
+import bg_bottom_branded_dark from './styles/core_app/images/bg_bottom_branded_dark.svg';
 
 // The `--kbnAppHeadersOffset` CSS variable is automatically updated by
 // styles/rendering/_base.scss, based on whether the Kibana chrome has a
@@ -19,3 +24,58 @@ export const kibanaFullBodyHeightCss = (additionalOffset = 0) => css`
     100vh - var(--kbnAppHeadersOffset, var(--euiFixedHeadersOffset, 0)) - ${additionalOffset}px
   );
 `;
+
+export const fullScreenGraphicsMixinStyles = (euiZLevel: number, euiTheme: UseEuiTheme) => {
+  const lightOrDarkTheme = (lightSvg: any, darkSvg: any) => {
+    return euiTheme.colorMode === COLOR_MODES_STANDARD.light ? lightSvg : darkSvg;
+  };
+  const fullScreenGraphicsFadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+  return css({
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: euiZLevel + 1000,
+    background: 'inherit',
+    backgroundColor: euiTheme.euiTheme.colors.backgroundBasePlain,
+    opacity: 0,
+    overflow: 'auto',
+    [euiCanAnimate]: {
+      animation: `${fullScreenGraphicsFadeIn} ${euiTheme.euiTheme.animation.extraSlow} ${euiTheme.euiTheme.animation.resistance} 0s forwards`,
+    },
+    '.kbnBody--hasHeaderBanner &': {
+      top: 'var(--kbnHeaderBannerHeight)',
+    },
+    '&::before': {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      zIndex: 1,
+      width: '400px',
+      height: '400px',
+      content: `url(${lightOrDarkTheme(bg_top_branded, bg_top_branded_dark)})`,
+    },
+    '&::after': {
+      position: 'fixed',
+      bottom: 0,
+      right: 0,
+      zIndex: 1,
+      width: '400px',
+      height: '400px',
+      content: `url(${lightOrDarkTheme(bg_bottom_branded, bg_bottom_branded_dark)})`,
+    },
+    [`@media (max-width: ${euiTheme.euiTheme.breakpoint.l}px)`]: {
+      '&::before, &::after': {
+        content: 'none',
+      },
+    },
+  });
+};

src/core/public/index.ts

@@ -309,4 +309,4 @@ export type { CoreSystem } from '@kbn/core-root-browser-internal';
 
 export { __kbnBootstrap__ } from '@kbn/core-root-browser-internal';
 
-export { kibanaFullBodyHeightCss } from './cssUtils';
+export { kibanaFullBodyHeightCss, fullScreenGraphicsMixinStyles } from './cssUtils';

src/platform/plugins/shared/home/public/application/application.tsx

@@ -16,7 +16,6 @@ import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { SampleDataTabKibanaProvider } from '@kbn/home-sample-data-tab';
 import { HomeApp } from './components/home_app';
 import { getServices } from './kibana_services';
-import './index.scss';
 
 export const renderApp = async (
   element: HTMLElement,

src/platform/plugins/shared/home/public/application/components/add_data/add_data.tsx

@@ -9,6 +9,7 @@
 
 import { i18n } from '@kbn/i18n';
 import React, { FC, MouseEvent } from 'react';
+import { css } from '@emotion/react';
 import {
   EuiButton,
   EuiButtonEmpty,
@@ -18,6 +19,9 @@ import {
   EuiSpacer,
   EuiText,
   EuiTitle,
+  UseEuiTheme,
+  mathWithUnits,
+  useEuiMinBreakpoint,
 } from '@elastic/eui';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -37,19 +41,33 @@ interface Props {
 
 export const AddData: FC<Props> = ({ addBasePath, application, isDarkMode, isCloudEnabled }) => {
   const { trackUiMetric, guidedOnboardingService } = getServices();
+  const euiBreakpointM = useEuiMinBreakpoint('m');
+  const euiBreakpointL = useEuiMinBreakpoint('l');
+  const styles = ({ euiTheme }: UseEuiTheme) =>
+    css({
+      display: 'block',
+      marginBlock: `0 -${mathWithUnits([euiTheme.size.xl, euiTheme.size.xs], (x, y) => x + y)}`,
+      marginInline: 'auto',
+      [euiBreakpointM]: {
+        marginBlockEnd: euiTheme.size.xl,
+      },
+      [euiBreakpointL]: {
+        inlineSize: '80%',
+      },
+    });
+
   const canAccessIntegrations = application.capabilities.navLinks.integrations;
   if (canAccessIntegrations) {
     return (
       <KibanaPageTemplate.Section
         bottomBorder
         paddingSize="xl"
-        className="homDataAdd"
-        aria-labelledby="homDataAdd__title"
+        aria-labelledby="homeDataAdd__title"
       >
         <EuiFlexGroup alignItems="flexEnd">
           <EuiFlexItem>
             <EuiTitle size="s">
-              <h2 id="homDataAdd__title">
+              <h2 id="homeDataAdd__title">
                 <FormattedMessage
                   id="home.addData.sectionTitle"
                   defaultMessage="Get started by adding integrations"
@@ -135,7 +153,7 @@ export const AddData: FC<Props> = ({ addBasePath, application, isDarkMode, isClo
                 alt={i18n.translate('home.addData.illustration.alt.text', {
                   defaultMessage: 'Illustration of Elastic data integrations',
                 })}
-                className="homDataAdd__illustration"
+                css={styles}
                 src={
                   addBasePath('/plugins/kibanaReact/assets/') +
                   (isDarkMode