@andideve/sx v0.2.7

sx

Style props for building design systems with React.

Installation

npm i @andideve/sx @emotion/react @emotion/styled

Usage

import styled from '@emotion/styled';
import { systemProps, shouldForwardProp } from '@andideve/sx';

// Create a new styled component
const Box = styled('div', { shouldForwardProp })(systemProps);

function MyApp() {
  return <Box as="section" padding="5rem 5vw" />;
}

Use path to get theme:

<Box margin={4} />
// margin: theme.space[4]
<Box margin={1.5} />
// margin: theme.space[1.5]

or

<Box backgroundColor="gray.200" />
// backgroundColor: theme.colors.gray[200]

Use responsive value:

<Box margin={{ _: '1rem', lg: '1.5rem' }} />

Theming

By adding a theme, you can use features like responsive value, you can use ThemeProvider from @emotion/react as theme provider.

import { CoreThemeKey, ThemeKey } from '@andideve/sx';

const theme = {
  /**
   * If you work with responsive, don't forget to add screens to the theme.
   */
  [CoreThemeKey.screens]: {
    // sm: 576, // 576px
    // sm: '36em', // 36em
    // ...
  },
  /**
   * Define theme scale for space (optional)
   */
  [ThemeKey.space]: {
    1.5: '.375rem',
    4: '1rem',
    // ...
  },
  // ...
};

Tutorials

Make your own style-props

Define style config:

import { ThemeKey } from '@andideve/sx';

const config = {
  mx: {
    properties: ['marginRight', 'marginLeft'],
    scale: ThemeKey.space, // optional
  },
  // ...
};

Create parser:

import { system, createSfp } from '@andideve/sx/dist/core';

const parser = system(config);

const shouldForwardProp = createSfp(parser.propNames);

Finally you can add it to your styled component

import styled from '@emotion/styled';

const Box = styled('div', { shouldForwardProp })(parser);