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 totextColor
-
space
has been split intomargin
andspace
- 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