Gamut System

Style props for building robustly typed design systems in react.

Features

• Completely customizable style props (with theme agnostic implementation);
• Flexible props that are both responsive and composable.
• Strict design system aware types with no manual fuss.
• Works with emotion and styled-components in preferred syntax.

Docs

Checkout each section

• Getting Started
• Properties
• Responsive Properties
• Variants
• Customization
• Compose

Usage

Create your new system locally to your app:

import { system, HandlerProps } from '@codecademy/gamut-system';

export const {
  propGroups: { typography, spacing, layout },
} = system.create({});

export type TypographyProps = HandlerProps<typeof typography>;
export type SpacingProps = HandlerProps<typeof spacing>;
export type LayoutProps = HandlerProps<typeof layout>;

In your components:

import styled from '@emotion/styled';
import {
  typography,
  spacing,
  layout,
  TypographyProps,
  SpacingProps,
  LayoutProps,
} from '../system';

export type BoxProps = TypographyProps & SpacingProps & LayoutProps;

export const Box = styled<BoxProps>`
  ${typography}
  ${spacing}
  ${layout}
`;

Regular Props

<Box margin="1rem" />

<Box fontSize="2rem" />

<Box width={1 / 5} />

Responsive Props

// Array Syntax
<Box width={[50, 100, 200]} />

// Object syntax
<Box margin={{ xs: 16, sm: 24, md: 32 }} />