@codecademy/gamut-system
TypeScript icon, indicating that this package has built-in type declarations

0.8.1 • Public • Published

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

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 }} />

Readme

Keywords

none

Package Sidebar

Install

npm i @codecademy/gamut-system

Weekly Downloads

0

Version

0.8.1

License

MIT

Unpacked Size

122 kB

Total Files

118

Last publish

Collaborators

  • codecademy