0.1.2 • Published 3 years ago

@andideve/styled-system v0.1.2

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

styled-system

Responsive, theme-based style props for building design systems with React

Install

npm i @andideve/styled-system @emotion/react @emotion/styled

Usage

Create a new component

import styled from '@emotion/styled';
import { space, layout, typography, color } from '@andideve/styled-system';

// Add styled-system function(s) to your component
const Box = styled.div(space, layout, typography, color);

return <Box m={2} />;
// margin: theme.space[2]
// margin: 2px

Custom Props

import { system, ThemeKey } from '@andideve/styled-system';

// Define system config
const config = {
  rounded: {
    property: 'borderRadius',
    scale: ThemeKey.radii,
  },
  // ...
};

// Create a new style prop function
const borderRadius = system(config);

// Add styled-system function(s) to your component
const Box = styled.div(borderRadius);

return <Box rounded={6} />;
// borderRadius: theme.radii[6]
// borderRadius: 6px

Extending Styled System

import { compose } from '@andideve/styled-system';

// ...

// Combine multiple style prop functions into one
const systemProps = compose(space, layout, typography, color, borderRadius);

// Add styled-system function(s) to your component
const Box = styled.div(systemProps);

Removing props from HTML elements

import { createSfp } from '@andideve/styled-system';

// ...

const shouldForwardProp = createSfp(systemProps.propNames);

// Pass **shouldForwardProp** as filtering option arg.
const Box = styled('div', { shouldForwardProp })(systemProps);

MIT License