styled system

typography

Confira as propriedades de estilos destinadas a tipografia dos componentes.

índice

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 "styled-component":

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

const MyComponent = styled.div`
  ${typography}
`;

// ...

<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 styled from 'styled-components';
import { fontSize } from '@olist/styled-system';

const MyComponent = styled.div`
  ${fontSize}
`;

// ...

<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 styled from 'styled-components';
import { fontFamily, type FontFamilyProps } from '@olist/styled-system';

const MyComponent = styled.div<FontFamilyProps>`
  ${fontFamily}
`;

// ...

<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 styled from 'styled-components';
import { typography, type TypographyProps } from '@olist/styled-system';

const MyComponent = styled.div<TypographyProps>`
  ${typography}
`;

// ...

<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