styled system

typography

Confira as propriedades de estilos destinadas a tipografia dos componentes.

como utilizar

Nós temos diversas propriedades disponíveis em relação a tipografia:

import {
  color,
  fontFamily,
  fontSize,
  fontWeight,
  letterSpacing,
  lineHeight,
  textAlign,
  textTransform,
} from '@olist/styled-system';

Você pode importar somente a desejada ou pode utilizar a função typography que encapsula todas em uma só.

// isso é o equivalente que importar todas as funções acima
import { typography } from '@olist/styled-system';

Para utilizar basta aplicar a função em seu componente:

import { styleProps } from '@olist/styled-system';

const MyComponent = (props) => <div style={styleProps(props)} />;

// ...

<MyComponent color="primary.base" />
<MyComponent fontFamily="brand" />
<MyComponent fontSize="1xlarge" />
<MyComponent fontWeight="1xbold" />
<MyComponent letterSpacing="tight" />
<MyComponent lineHeight="1xsmall" />
<MyComponent textAlign="center" />
<MyComponent textTransform="lowercase" />

Você também pode utilizar qualquer valor válido para as propriedades, não há restrição para utilizar somente os valores do tema:

import { styleProps } from '@olist/styled-system';

const MyComponent = (props) => <div style={styleProps(props)} />;

// ...

<MyComponent fontSize="16px" />;
<MyComponent fontWeight={700} />;

Essa lógica é aplicada para qualquer função exportada pelo @olist/styled-system.

utilização com typescript

Para utilizar as funções de tipografia com typescript é necessário importar o tipo correspondente a função utilizada do pacote @olist/styled-system:

Supondo que você está utilizando a função fontFamily você deve importar o tipo FontFamilyProps:

import {
  styleProps,
  type FontFamilyProps,
} from '@olist/styled-system';

const MyComponent = (props: FontFamilyProps) => <div style={styleProps(props)} />;

// ...

<MyComponent fontFamily="brand" />;

utilizando todas as propriedades de uma só vez

Você pode utilizar a função typography para aplicar todas as propriedades de uma só vez, basta importar a função typography e o seu tipo TypographyProps:

import {
  styleProps,
  type TypographyProps,
} from '@olist/styled-system';

const MyComponent = (props: TypographyProps) => <div style={styleProps(props)} />;

// ...

<MyComponent
  color="primary.base"
  fontFamily="brand"
  fontSize="1xlarge"
  fontWeight="1xbold"
  letterSpacing="tight"
  lineHeight="1xsmall"
  textAlign="center"
  textTransform="center"
/>;

utilizando a função typography você terá disponível as seguintes propriedades para utilizar em seu componente:

propriedadealiasestype
colorcColorProps
fontFamily-FontFamilyProps
fontSize-FontSizeProps
fontWeight-FontWeightProps
letterSpacing-LetterSpacingProps
lineHeight-LineHeightProps
textAlign-TextAlignProps
textTransform-TextTransformProps
typography-TypographyProps