[Experimental][styled-components] Add button primitive

packages/block-editor/src/components/block-breadcrumb/block-breadcrumb-button.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { StyledPrimitives, styled } from '@wordpress/components';
+
+const Button = styled( StyledPrimitives.Button )`
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+    color: ${ ( props ) => props.theme.colors.primary };
+  }
+  &:focus{
+		outline: none;
+		outline-offset: -2px;
+		box-shadow: none;
+	}
+`;
+
+export default function BlockBreadcrumbButton( { children, ...props } ) {
+	return <Button
+		className="block-editor-block-breadcrumb__button"
+		px={ 'medium' }
+		py={ 0 }
+		color={ 'dark-gray-500' }
+		fontSize={ 'inherit' }
+		line-height={ 'xlarge' }
+		height={ 28 }
+		isTertiary
+		display={ 'inline-flex' }
+		textDecoration={ 'none' }
+		bg={ 'none' }
+		border={ 0 }
+		{ ...props }
+	>
+		{ children }
+	</Button>;
+}

packages/block-editor/src/components/block-breadcrumb/index.js

@@ -1,14 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import BlockTitle from '../block-title';
+import BlockBreadcrumbButton from './block-breadcrumb-button';
 
 /**
  * Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb.
@@ -43,25 +43,21 @@ const BlockBreadcrumb = function() {
 				aria-current={ ! hasSelection ? 'true' : undefined }
 			>
 				{ hasSelection && (
-					<Button
-						className="block-editor-block-breadcrumb__button"
-						isTertiary
+					<BlockBreadcrumbButton
 						onClick={ clearSelectedBlock }
 					>
 						{ __( 'Document' ) }
-					</Button>
+					</BlockBreadcrumbButton>
 				) }
 				{ ! hasSelection && __( 'Document' ) }
 			</li>
 			{ parents.map( ( parentClientId ) => (
 				<li key={ parentClientId }>
-					<Button
-						className="block-editor-block-breadcrumb__button"
-						isTertiary
+					<BlockBreadcrumbButton
 						onClick={ () => selectBlock( parentClientId ) }
 					>
 						<BlockTitle clientId={ parentClientId } />
-					</Button>
+					</BlockBreadcrumbButton>
 				</li>
 			) ) }
 			{ !! clientId && (

packages/block-editor/src/components/block-breadcrumb/style.scss

@@ -13,27 +13,10 @@
 	}
 }
 
-.block-editor-block-breadcrumb__button.components-button {
-	height: $icon-button-size-small;
-	line-height: $icon-button-size-small;
-	padding: 0;
-
-	&:hover {
-		text-decoration: underline;
-	}
-
-	&:focus {
-		@include square-style__focus();
-		outline-offset: -2px;
-		box-shadow: none;
-	}
-}
-
 .block-editor-block-breadcrumb__current {
 	cursor: default;
 }
 
-.block-editor-block-breadcrumb__button.components-button,
 .block-editor-block-breadcrumb__current {
 	color: $dark-gray-500;
 	padding: 0 $grid-size;

packages/block-editor/src/components/inserter/index.js

@@ -38,6 +38,14 @@ const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle, hasSingl
 				event.currentTarget.focus();
 			} }
 			onClick={ onToggle }
+			display={ 'inline-flex' }
+			alignItems={ 'center' }
+			color={ 'dark-gray-500' }
+			background={ 'none' }
+			border={ 'none' }
+			outline={ 'none' }
+			padding={ 'medium' }
+			margin={ 0 }
 			className="editor-inserter__toggle block-editor-inserter__toggle"
 			aria-haspopup={ ! hasSingleBlockType ? 'true' : false }
 			aria-expanded={ ! hasSingleBlockType ? isOpen : false }

packages/block-editor/src/components/inserter/style.scss

@@ -24,13 +24,6 @@ $block-inserter-search-height: 38px;
 }
 
 .block-editor-inserter__toggle {
-	display: inline-flex;
-	align-items: center;
-	color: $dark-gray-500;
-	background: none;
-	cursor: pointer;
-	border: none;
-	outline: none;
 	transition: color 0.2s ease;
 	@include reduce-motion("transition");
 }

packages/components/package.json

@@ -49,6 +49,8 @@
 		"react-spring": "^8.0.20",
 		"reakit": "^1.0.0-beta.12",
 		"rememo": "^3.0.0",
+		"styled-components": "^4.4.0",
+		"styled-system": "^5.1.2",
 		"tinycolor2": "^1.4.1",
 		"uuid": "^3.3.2"
 	},

packages/components/src/button/index.js

@@ -6,26 +6,29 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createElement, forwardRef } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
-export function Button( props, ref ) {
-	const {
-		href,
-		target,
-		isPrimary,
-		isLarge,
-		isSmall,
-		isTertiary,
-		isPressed,
-		isBusy,
-		isDefault,
-		isLink,
-		isDestructive,
-		className,
-		disabled,
-		...additionalProps
-	} = props;
+/**
+ * Internal dependencies
+ */
+import { Button as PrimitiveButton, A } from '../styled-primitives/button';
 
+export function Button( {
+	href,
+	target,
+	isPrimary,
+	isLarge,
+	isSmall,
+	isTertiary,
+	isPressed,
+	isBusy,
+	isDefault,
+	isLink,
+	isDestructive,
+	className,
+	disabled,
+	...additionalProps
+}, ref ) {
 	const classes = classnames( 'components-button', className, {
 		'is-button': isDefault || isPrimary || isLarge || isSmall,
 		'is-default': isDefault || ( ! isPrimary && ( isLarge || isSmall ) ),
@@ -43,13 +46,10 @@ export function Button( props, ref ) {
 	const tagProps = tag === 'a' ?
 		{ href, target } :
 		{ type: 'button', disabled, 'aria-pressed': isPressed };
-
-	return createElement( tag, {
-		...tagProps,
-		...additionalProps,
-		className: classes,
-		ref,
-	} );
+	const propsToPass = { ...tagProps, ...additionalProps, className: classes, ref };
+	if ( tag === 'a' ) {
+		return <A { ...propsToPass } />;
+	} return <PrimitiveButton { ...propsToPass } />;
 }
 
 export default forwardRef( Button );

packages/components/src/index.js

@@ -85,6 +85,9 @@ export {
 	Consumer as __experimentalSlotFillConsumer,
 } from './slot-fill';
 
+// Primitives with styled-system
+export { default as StyledPrimitives, styled } from './styled-primitives';
+
 // Higher-Order Components
 export { default as navigateRegions } from './higher-order/navigate-regions';
 export {
@@ -103,3 +106,4 @@ export { default as withNotices } from './higher-order/with-notices';
 export {
 	default as withSpokenMessages,
 } from './higher-order/with-spoken-messages';
+export { withTheme, default as ThemeProvider } from './theme-provider';

packages/components/src/styled-primitives/button/index.js

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import styled from 'styled-components';
+import { color, space, layout, flexbox, background, border, position, shadow }
+	from 'styled-system';
+
+export const Button = styled.button`
+${ color }
+${ space }
+${ layout }
+${ flexbox }
+${ background }
+${ border }
+${ position }
+${ shadow }
+`;
+
+export const A = styled.a`
+${ color }
+${ space }
+${ layout }
+${ flexbox }
+${ background }
+${ border }
+${ position }
+${ shadow }
+`;

packages/components/src/styled-primitives/index.js

@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+export { default as styled } from 'styled-components';
+
+/**
+ * Internal dependencies
+ */
+import { A, Button } from './button';
+
+export default {
+	A,
+	Button,
+};

packages/components/src/theme-provider/index.js

@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import { ThemeProvider } from 'styled-components';
+
+export { withTheme as withTheme } from 'styled-components';
+
+const getTheme = ( theme ) => ( {
+	fontSizes: {
+		small: 12,
+		medium: 18,
+		big: 22,
+	},
+	space: {
+		small: 4,
+		medium: 8,
+		large: 16,
+		xlarge: 24,
+	},
+	zIndices: {
+		'block-library-gallery-item__inline-menu': 20,
+	},
+	colors: themes[ theme || '' ] || themes.default,
+} );
+
+const themes = {
+	default: {
+		primary: '#0085ba',
+		secondary: '#11a0d2',
+		toggle: '#11a0d2',
+		button: '#0085ba',
+		outlines: '#007cba',
+		'dark-gray-500': '#555d66',
+	},
+	'admin-color-light': {
+		primary: '#0085ba',
+		secondary: '#c75726',
+		toggle: '#11a0d2',
+		button: '#0085ba',
+		outlines: '#007cba',
+	},
+	'admin-color-blue': {
+		primary: '#82b4cb',
+		secondary: '#d9ab59',
+		toggle: '#82b4cb',
+		button: '#d9ab59',
+		outlines: '#417e9B',
+	},
+	'admin-color-coffee': {
+		primary: '#c2a68c',
+		secondary: '#9fa47b',
+		toggle: '#c2a68c',
+		button: '#c2a68c',
+		outlines: '#59524c',
+	},
+	'admin-color-ectoplasm': {
+		primary: '#a7b656',
+		secondary: '#c77430',
+		toggle: '#a7b656',
+		button: '#a7b656',
+		outlines: '#523f6d',
+	},
+	'admin-color-midnight': {
+		primary: '#e14d43',
+		secondary: '#77a6b9',
+		toggle: '#77a6b9',
+		button: '#e14d43',
+		outlines: '#497b8d',
+	},
+	'admin-color-ocean': {
+		primary: '#a3b9a2',
+		secondary: '#a89d8a',
+		toggle: '#a3b9a2',
+		button: '#a3b9a2',
+		outlines: '#5e7d5e',
+	},
+	'admin-color-sunrise': {
+		primary: '#d1864a',
+		secondary: '#c8b03c',
+		toggle: '#c8b03c',
+		button: '#d1864a',
+		outlines: '#837425',
+	},
+};
+
+export default ( { theme, children } ) => (
+	<ThemeProvider theme={ getTheme( theme ) }>
+		{ children }
+	</ThemeProvider>
+);

packages/edit-post/src/editor.js

@@ -14,6 +14,7 @@ import {
 	KeyboardShortcuts,
 	SlotFillProvider,
 	DropZoneProvider,
+	ThemeProvider,
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 
@@ -125,7 +126,9 @@ class Editor extends Component {
 							>
 								<ErrorBoundary onError={ onError }>
 									<EditorInitialization postId={ postId } />
-									<Layout />
+									<ThemeProvider>
+										<Layout />
+									</ThemeProvider>
 									<KeyboardShortcuts shortcuts={ preventEventDiscovery } />
 								</ErrorBoundary>
 								<PostLockedModal />