@modulz/radix-system
TypeScript icon, indicating that this package has built-in type declarations

0.0.1-alpha.13 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @modulz/radix-system

Weekly Downloads

180

Version

0.0.1-alpha.13

License

MIT

Unpacked Size

59.1 kB

Total Files

75

Last publish

Collaborators

  • stephenhaney
  • colmtuite
  • benoitgrelard