@modulz/radix-system NPM

WIP

Radix System

yarn add @modulz/radix-system

Theme-aware responsive style props for building design systems

Built on top of @styled-system/core by Brent Jackson.

Install it

Radix System is currently under development, but if you'd like to use it anyway:

# npm
npm install @modulz/radix-system

# yarn
yarn add @modulz/radix-system

Features

Radix System is an alternative to Styled System, built on the same Core package but with a few tweaks:

Typescript support
style functions are independent
color style function has been renamed to textColor
space has been split into margin and space
Theme-aware variant API

Use it

Import style functions:

import styled from 'styled-components';
import { margin, backgroundColor, compose } from '@modulz/radix-system';

const styleProps = compose(
  margin,
  backgroundColor
);
const Box = styled('div')(styleProps);

const App = () => (
  <Box my={4} bg="blue">
    Hey there 👋
  </Box>
);

With Typescript:

import styled from 'styled-components';
import {
  margin,
  MarginProps,
  backgroundColor,
  BackgroundColorProps,
  compose,
} from '@modulz/radix-system';

const styleProps = compose(
  margin,
  backgroundColor
);
type BoxProps = MarginProps & BackgroundColorProps;
const Box = styled('div') < BoxProps > styleProps;

const App = () => (
  <Box my={4} bg="blue">
    Hey there 👋
  </Box>
);