@wp-g2/create-styles NPM | npm.io

0.0.164 • Published 4 years ago

Install

Weekly downloads

7,689

License

MIT

Repository

Last release

4 years ago

Create Styles

Creates the style system. Powered (under the hood) by Emotion

Table of Contents

Usage
Demo

Usage

npm install @wp-g2/create-styles @wordpress/data @wordpress/is-shallow-equal

import React from 'react';
import { createStyleSystem } from '@wp-g2/create-styles';

const baseStyles = {
	background: 'dodgerblue',
	margin: 0,
};

// Values for your system
const config = {};
// Dark mode values for your system
const darkModeConfig = {};
// High contrast mode values for your system
const highContrastModeConfig = {};
// Dark High contrast mode values for your system
const darkHighContrastModeConfig = {};

const styleSystemProps = {
	baseStyles,
	config,
	darkModeConfig,
	highContrastModeConfig,
	darkHighContrastModeConfig,
};

const {
	// A collection of styled elements. (core.div)
	core,
	// The custom Emotion instance.
	compiler,
	// Getter for configs (CSS Variables).
	get,
	// Styled components. (styled.div)
	styled,
	// The base View.
	View,
} = createStyleSystem(styleSystemProps);

export default function App() {
	return (
		<View className="App">
			<View as="h1">Hello CodeSandbox</View>
			<View as="h2">Start editing to see some magic happen!</View>
		</View>
	);
}

Demo

CodeSandbox Demo: https://codesandbox.io/s/wp-g2-create-styles-demo-4tv4k

@emotion/core @emotion/hash @emotion/is-prop-valid @wp-g2/utils create-emotion emotion emotion-theming lodash mitt styled-griddie

@infinitebrahmanuniverse/nolb-_wp @everything-registry/sub-chunk-1022 @wp-g2/context @wp-g2/styles @zalastax/nolb-_wp

4 years ago

4 years ago

4 years ago

0.0.163-alpha.0

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

0.0.160-alpha.0

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

0.0.135-alpha.0

4 years ago

0.0.135-alpha.1

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago