@grahamdigital/gmg-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>
);