Skip to content
Branch: master
Find file History
peduarte Publish
 - @modulz/radix-system@0.0.1-alpha.10
 - @modulz/radix@0.0.1-beta.3
 - website@0.0.1-beta.3
Latest commit 139f6eb Dec 13, 2019

readme.md

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>
);

Docs

Proper docs coming soon.


License

MIT © Modulz

You can’t perform that action at this time.