Nitrogenous Polymorphic Molecule

    @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

    Keywords

    none

    Install

    npm i @modulz/radix-system

    DownloadsWeekly Downloads

    262

    Version

    0.0.1-alpha.13

    License

    MIT

    Unpacked Size

    59.1 kB

    Total Files

    75

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar