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