`@arwes/design`

Theming and styling tools with focus in Emotion in React.

The design tools are heavily inspired by Material UI.

Installation

All the tools are bundled and can be installed with the following NPM package:

bash

npm install @arwes/design

The design management tooling requires polished v4 as a peer-dependency.

bash

npm install polished@4

Theme

Any application can have a design definition managed by a theme. A theme is a set of visual configurations and utilities. Application components can make use of it to create their styles and animations.

A theme with default settings can be created like:

tsx

import { createTheme } from '@arwes/design';
const theme = createTheme();

The following features can be configured:

But any extra settings can be setup as needed.

Then the theme can be used in any CSS-in-JS library theme provider or referenced directly by components to generate dynamic styles and animations.

Theme Extension

A new theme can be created by extending a previously created one.

tsx

const theme1 = createTheme({ ... });
const theme2 = createTheme({ ... }, theme1);

The second theme will extend the first theme.

You can see and play with more examples in the playground.