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:

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

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

export type TypographyProps = HandlerProps;
export type SpacingProps = HandlerProps;
export type LayoutProps = HandlerProps;
`

In your components:

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

export type BoxProps = TypographyProps & SpacingProps & LayoutProps;

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

$3

`tsx



`

$3

`tsx
// Array Syntax


// Object syntax

``