@motif-js/tokens

Default opinionated token presets for motif-js — colors, spacing, typography, radii, shadows, plus light and dark themes built on top.

Install

yarn add @motif-js/tokens

Use

The pre-built themes:

import { ThemeProvider } from 'motif-js';
import { lightTheme, darkTheme } from '@motif-js/tokens';

<ThemeProvider themes={[lightTheme, darkTheme]} active="light">
  …
</ThemeProvider>;

Or extend them with your own brand:

import { createTheme } from 'motif-js';
import { colors, space } from '@motif-js/tokens';

export const brand = createTheme({
  name: 'brand',
  tokens: {
    colors: { ...colors, accent: '#C2410C' },
    space,
  },
});

Docs

https://usemotif.dev

License

MIT