components: Remove parts of @wp-g2 dependencies

packages/components/src/ui/context/index.js

@@ -4,5 +4,10 @@ export {
 	ContextSystemProvider,
 	useComponentsContext,
 } from './context-system-provider';
-export { contextConnect } from './context-connect';
+export {
+	contextConnect,
+	hasConnectNamespace,
+	getConnectNamespace,
+} from './context-connect';
 export { useContextSystem } from './use-context-system';
+export * from './polymorphic-component';

packages/components/src/ui/context/polymorphic-component.ts

@@ -4,16 +4,15 @@
 // eslint-disable-next-line no-restricted-imports
 import type * as React from 'react';
 import type { As, RenderProp, ExtractHTMLAttributes } from 'reakit-utils/types';
-import type { Interpolation, ObjectInterpolation } from 'create-emotion';
+import type { Interpolation } from 'create-emotion';
 
 /**
  * Based on https://github.com/reakit/reakit/blob/master/packages/reakit-utils/src/types.ts
  */
 export type ViewOwnProps< P, T extends As > = P &
-	Omit< React.ComponentPropsWithRef< T >, 'as' | 'css' | keyof P > & {
+	Omit< React.ComponentPropsWithRef< T >, 'as' | keyof P > & {
 		as?: T | keyof JSX.IntrinsicElements;
 		children?: React.ReactNode | RenderProp< ExtractHTMLAttributes< any > >;
-		css?: ObjectInterpolation< undefined > | string;
 	};
 
 export type ElementTypeFromViewOwnProps< P > = P extends ViewOwnProps<

packages/components/src/ui/control-label/hook.js

@@ -32,7 +32,7 @@ export function useControlLabel( props ) {
 	const htmlFor = useFormGroupContextId( htmlForProp );
 	const classes = cx(
 		styles.ControlLabel,
-		styles[ size ],
+		styles[ /** @type {'small' | 'medium' | 'large'} */ ( size ) ],
 		className,
 		isBlock ? styles.block : styles.inline
 	);

packages/components/src/ui/flex/use-flex.js

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { useContextSystem } from '@wp-g2/context';
-import { css, cx, ui, useResponsiveValue } from '@wp-g2/styles';
+import { css, cx } from 'emotion';
 
 /**
  * WordPress dependencies
@@ -12,6 +11,9 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { useContextSystem } from '../context';
+import { useResponsiveValue } from '../utils/use-responsive-value';
+import { space } from '../utils/space';
 import * as styles from './styles';
 
 /**
@@ -43,17 +45,13 @@ export function useFlex( props ) {
 		const sx = {};
 
 		sx.Base = css( {
-			[ ui.createToken( 'flexGap' ) ]: ui.space( gap ),
-			[ ui.createToken( 'flexItemDisplay' ) ]: isColumn
-				? 'block'
-				: undefined,
 			alignItems: isColumn ? 'normal' : align,
 			flexDirection: direction,
 			flexWrap: wrap ? 'wrap' : undefined,
 			justifyContent: justify,
 			height: isColumn && expanded ? '100%' : undefined,
 			width: ! isColumn && expanded ? '100%' : undefined,
-			marginBottom: wrap ? `calc(${ ui.space( gap ) } * -1)` : undefined,
+			marginBottom: wrap ? `calc(${ space( gap ) } * -1)` : undefined,
 		} );
 
 		sx.Items = css( {
@@ -65,21 +63,19 @@ export function useFlex( props ) {
 			 * Far less DOM less. However, UI rendering is not as reliable.
 			 */
 			'> * + *:not(marquee)': {
-				marginTop: isColumn ? ui.space( gap ) : undefined,
-				marginRight:
-					! isColumn && isReverse ? ui.space( gap ) : undefined,
+				marginTop: isColumn ? space( gap ) : undefined,
+				marginRight: ! isColumn && isReverse ? space( gap ) : undefined,
 				marginLeft:
-					! isColumn && ! isReverse ? ui.space( gap ) : undefined,
+					! isColumn && ! isReverse ? space( gap ) : undefined,
 			},
 		} );
 
 		sx.WrapItems = css( {
 			'> *:not(marquee)': {
-				marginBottom: ui.space( gap ),
-				marginLeft:
-					! isColumn && isReverse ? ui.space( gap ) : undefined,
+				marginBottom: space( gap ),
+				marginLeft: ! isColumn && isReverse ? space( gap ) : undefined,
 				marginRight:
-					! isColumn && ! isReverse ? ui.space( gap ) : undefined,
+					! isColumn && ! isReverse ? space( gap ) : undefined,
 			},
 			'> *:last-child:not(marquee)': {
 				marginLeft: ! isColumn && isReverse ? 0 : undefined,

packages/components/src/ui/heading/hook.ts

@@ -1,15 +1,13 @@
-/**
- * External dependencies
- */
-import { useContextSystem } from '@wp-g2/context';
-import { getHeadingFontSize, ui } from '@wp-g2/styles';
-import type { ViewOwnProps } from '@wp-g2/create-styles';
-
 /**
  * Internal dependencies
  */
+import { useContextSystem } from '../context';
+// eslint-disable-next-line no-duplicate-imports
+import type { ViewOwnProps } from '../context';
 import type { Props as TextProps } from '../text/types';
 import { useText } from '../text';
+import { getHeadingFontSize } from '../utils/font-size';
+import { CONFIG, COLORS } from '../../utils';
 
 export type HeadingSize =
 	| 1
@@ -71,11 +69,10 @@ export function useHeading( props: ViewOwnProps< HeadingProps, 'h1' > ) {
 	}
 
 	const textProps = useText( {
-		color: ui.get( 'colorTextHeading' ),
+		color: COLORS.darkGray.heading,
 		size: getHeadingFontSize( level ),
 		isBlock: true,
-		// @ts-ignore We're passing a variable so `string` is safe
-		weight: ui.get( 'fontWeightHeading' ),
+		weight: CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ],
 		...otherProps,
 	} );
 

packages/components/src/ui/heading/stories/index.js

@@ -11,7 +11,9 @@ export default {
 export const _default = () => {
 	return (
 		<>
-			<Heading level={ 1 }>Heading</Heading>
+			<Heading level={ 1 } uppercase>
+				Heading
+			</Heading>
 			<Heading level={ 2 }>Heading</Heading>
 			<Heading level={ 3 }>Heading</Heading>
 			<Heading level={ 4 }>Heading</Heading>

packages/components/src/ui/surface/hook.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { useContextSystem } from '@wp-g2/context';
 import { css, cx, ui } from '@wp-g2/styles';
 
 /**
@@ -12,6 +11,7 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { useContextSystem } from '../context';
 import * as styles from './styles';
 
 /**

packages/components/src/ui/text/get-line-height.ts

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { CSSProperties } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { Props } from './types';
+import { space } from '../utils/space';
+import { CONFIG } from '../../utils';
+
+export function getLineHeight(
+	adjustLineHeightForInnerControls: Props[ 'adjustLineHeightForInnerControls' ],
+	lineHeight: CSSProperties[ 'lineHeight' ]
+) {
+	if ( lineHeight ) return lineHeight;
+
+	if ( ! adjustLineHeightForInnerControls ) return;
+
+	let value = `calc(${ CONFIG.controlHeight } + ${ space( 2 ) })`;
+
+	switch ( adjustLineHeightForInnerControls ) {
+		case 'large':
+			value = `calc(${ CONFIG.controlHeightLarge } + ${ space( 2 ) })`;
+			break;
+		case 'small':
+			value = `calc(${ CONFIG.controlHeightSmall } + ${ space( 2 ) })`;
+			break;
+		case 'xSmall':
+			value = `calc(${ CONFIG.controlHeightXSmall } + ${ space( 2 ) })`;
+			break;
+		default:
+			break;
+	}
+
+	return value;
+}

packages/components/src/ui/text/hook.js

@@ -1,9 +1,8 @@
 /**
  * External dependencies
  */
-import { hasNamespace, useContextSystem } from '@wp-g2/context';
-import { css, cx, getFontSize, ui } from '@wp-g2/styles';
-import { isPlainObject, isNil } from 'lodash';
+import { css, cx } from 'emotion';
+import { isPlainObject } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -13,13 +12,17 @@ import { useMemo, Children, cloneElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { hasConnectNamespace, useContextSystem } from '../context';
 import { useTruncate } from '../truncate';
 import { getOptimalTextShade } from '../utils';
 import * as styles from './styles';
 import { createHighlighterText } from './utils';
+import { getFontSize } from '../utils/font-size';
+import { CONFIG, COLORS } from '../../utils';
+import { getLineHeight } from './get-line-height';
 
 /**
- * @param {import('@wp-g2/create-styles').ViewOwnProps<import('./types').Props, 'span'>} props
+ * @param {import('../context').ViewOwnProps<import('./types').Props, 'span'>} props
  */
 export default function useText( props ) {
 	const {
@@ -43,7 +46,7 @@ export default function useText( props ) {
 		truncate = false,
 		upperCase = false,
 		variant,
-		weight = ui.get( 'fontWeight' ),
+		weight = CONFIG.fontWeight,
 		...otherProps
 	} = useContextSystem( props, 'Text' );
 
@@ -73,10 +76,10 @@ export default function useText( props ) {
 	const classes = useMemo( () => {
 		const sx = {};
 
-		const lineHeight = getLineHeight( {
-			lineHeight: lineHeightProp,
+		const lineHeight = getLineHeight(
 			adjustLineHeightForInnerControls,
-		} );
+			lineHeightProp
+		);
 
 		sx.Base = css( {
 			color,
@@ -99,8 +102,8 @@ export default function useText( props ) {
 				getOptimalTextShade( optimizeReadabilityFor ) === 'dark';
 
 			sx.optimalTextColor = isOptimalTextColorDark
-				? css( { color: ui.get( 'black' ) } )
-				: css( { color: ui.get( 'white' ) } );
+				? css( { color: COLORS.black } )
+				: css( { color: COLORS.white } );
 		}
 
 		return cx(
@@ -162,7 +165,7 @@ export default function useText( props ) {
 				return child;
 			}
 
-			const isLink = hasNamespace( child, [ 'Link' ] );
+			const isLink = hasConnectNamespace( child, [ 'Link' ] );
 			if ( isLink ) {
 				return cloneElement( child, {
 					size: child.props.size || 'inherit',
@@ -178,40 +181,3 @@ export default function useText( props ) {
 		children: truncate ? truncateProps.children : content,
 	};
 }
-
-/* eslint-disable jsdoc/valid-types */
-/**
- * @param {Object} props
- * @param {import('./types').Props['adjustLineHeightForInnerControls']} [props.adjustLineHeightForInnerControls]
- * @param {import('react').CSSProperties['lineHeight']} [props.lineHeight]
- */
-/* eslint-enable jsdoc/valid-types */
-function getLineHeight( { adjustLineHeightForInnerControls, lineHeight } ) {
-	if ( ! isNil( lineHeight ) ) return lineHeight;
-
-	if ( ! adjustLineHeightForInnerControls ) return;
-
-	let value = `calc(${ ui.get( 'controlHeight' ) } + ${ ui.space( 2 ) })`;
-
-	switch ( adjustLineHeightForInnerControls ) {
-		case 'large':
-			value = `calc(${ ui.get( 'controlHeightLarge' ) } + ${ ui.space(
-				2
-			) })`;
-			break;
-		case 'small':
-			value = `calc(${ ui.get( 'controlHeightSmall' ) } + ${ ui.space(
-				2
-			) })`;
-			break;
-		case 'xSmall':
-			value = `calc(${ ui.get( 'controlHeightXSmall' ) } + ${ ui.space(
-				2
-			) })`;
-			break;
-		default:
-			break;
-	}
-
-	return value;
-}

packages/components/src/ui/text/styles.js

@@ -1,32 +1,38 @@
 /**
  * External dependencies
  */
-import { css, ui } from '@wp-g2/styles';
+import { css } from 'emotion';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS, CONFIG } from '../../utils';
 
 export const Text = css`
-	color: ${ ui.color.text };
-	line-height: ${ ui.get( 'fontLineHeightBase' ) };
+	color: ${ COLORS.black };
+	line-height: ${ CONFIG.fontLineHeightBase };
+	margin: 0;
 `;
 
 export const block = css`
 	display: block;
 `;
 
 export const positive = css`
-	color: ${ ui.color.positive };
+	color: ${ COLORS.alert.green };
 `;
 
 export const destructive = css`
-	color: ${ ui.color.destructive };
+	color: ${ COLORS.alert.red };
 `;
 
 export const muted = css`
-	color: ${ ui.get( 'colorTextMuted' ) };
+	color: ${ COLORS.mediumGray.text };
 `;
 
 export const highlighterText = css`
 	mark {
-		background: ${ ui.get( 'yellowRgba70' ) };
+		background: ${ COLORS.alert.yellow };
 		border-radius: 2px;
 		box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,
 			0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;

packages/components/src/ui/truncate/hook.js

@@ -16,7 +16,7 @@ import * as styles from './styles';
 import { TRUNCATE_ELLIPSIS, TRUNCATE_TYPE, truncateContent } from './utils';
 
 /**
- * @param {import('@wp-g2/create-styles').ViewOwnProps<import('./types').Props, 'span'>} props
+ * @param {import('../context').ViewOwnProps<import('./types').Props, 'span'>} props
  */
 export default function useTruncate( props ) {
 	const {