components: Remove @emotion/css from Elevation

packages/components/src/elevation/component.tsx

@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { Ref } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useContextSystem,
+	contextConnect,
+	PolymorphicComponentProps,
+} from '../ui/context';
+import type { Props } from './types';
+import { ElevationView, ElevationViewProps } from './styles';
+
+const DEFAULT_PROPS: ElevationViewProps = {
+	isInteractive: false,
+	offset: 0,
+	value: 0,
+	active: null,
+	focus: null,
+	hover: null,
+	borderRadius: 'inherit',
+};
+
+function Elevation(
+	props: PolymorphicComponentProps< Props, 'div', false >,
+	forwardedRef: Ref< any >
+) {
+	const contextProps = useContextSystem( props, 'Elevation' );
+
+	return (
+		<ElevationView
+			ref={ forwardedRef }
+			{ ...DEFAULT_PROPS }
+			{ ...contextProps }
+			aria-hidden="true"
+		/>
+	);
+}
+
+/**
+ * `Elevation` is a core component that renders shadow, using the library's shadow system.
+ *
+ * The shadow effect is generated using the `value` prop.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *	__experimentalElevation as Elevation,
+ *	__experimentalSurface as Surface,
+ *	__experimentalText as Text,
+ * } from '@wordpress/components';
+ *
+ * function Example() {
+ * 	return (
+ * 		<Surface>
+ * 			<Text>Code is Poetry</Text>
+ * 			<Elevation value={ 5 } />
+ * 		</Surface>
+ * 	);
+ * }
+ * ```
+ */
+const ConnectedElevation = contextConnect( Elevation, 'Elevation' );
+
+export default ConnectedElevation;

packages/components/src/elevation/index.js → packages/components/src/elevation/index.ts

@@ -1,2 +1 @@
 export { default as Elevation } from './component';
-export * from './hook';

packages/components/src/elevation/styles.ts

@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css, CSSObject } from '@emotion/react';
+import type { Required } from 'utility-types';
+
+/**
+ * Internal dependencies
+ */
+import type { Props } from './types';
+import { CONFIG, reduceMotion } from '../utils';
+
+export type ElevationViewProps = Required< Props >;
+
+const getBoxShadow = ( value: number ) => {
+	const boxShadowColor = `rgba(0 ,0, 0, ${ value / 20 })`;
+	return `0 ${ value }px ${ value * 2 }px 0
+	${ boxShadowColor }`;
+};
+
+const renderBoxShadow = ( { value }: ElevationViewProps ) =>
+	css( { boxShadow: getBoxShadow( value ) } );
+
+const renderTransition = () =>
+	css( {
+		transition: `box-shadow ${ CONFIG.transitionDuration }
+${ CONFIG.transitionTimingFunction }`,
+	} );
+
+const renderBorderRadius = ( { borderRadius }: ElevationViewProps ) =>
+	css( { borderRadius } );
+
+const renderOffset = ( { offset }: ElevationViewProps ) =>
+	css( { bottom: offset, left: offset, right: offset, top: offset } );
+
+const renderHoverActiveFocus = ( {
+	isInteractive,
+	active,
+	hover,
+	focus,
+	value,
+}: ElevationViewProps ) => {
+	let hoverValue: number | null = hover !== null ? hover : value * 2;
+	let activeValue: number | null = active !== null ? active : value / 2;
+
+	if ( ! isInteractive ) {
+		hoverValue = hover;
+		activeValue = active;
+	}
+
+	const cssObj: CSSObject = {};
+
+	if ( hoverValue !== null ) {
+		cssObj[ '*:hover > &' ] = {
+			boxShadow: getBoxShadow( hoverValue ),
+		};
+	}
+
+	if ( activeValue !== null ) {
+		cssObj[ '*:active > &' ] = {
+			boxShadow: getBoxShadow( activeValue ),
+		};
+	}
+
+	if ( focus !== null ) {
+		cssObj[ '*focus > &' ] = {
+			boxShadow: getBoxShadow( focus ),
+		};
+	}
+
+	return css( cssObj );
+};
+
+const DO_NOT_FORWARD = [
+	'value',
+	'offset',
+	'hover',
+	'active',
+	'focus',
+	'borderRadius',
+	'isInteractive',
+];
+
+export const ElevationView = styled( 'div', {
+	shouldForwardProp: ( propName ) =>
+		! DO_NOT_FORWARD.includes( propName as string ),
+} )< ElevationViewProps >`
+	background: transparent;
+	display: block;
+	margin: 0 !important;
+	pointer-events: none;
+	position: absolute;
+	will-change: box-shadow;
+	opacity: ${ CONFIG.elevationIntensity };
+	${ renderTransition }
+	${ reduceMotion( 'transition' ) }
+	${ renderBoxShadow }
+	${ renderBorderRadius }
+	${ renderOffset }
+	${ renderHoverActiveFocus }
+`;