Arwes LogotypeArwes Logotext

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.

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.