styled system

borders

Confira as propriedades de estilos destinadas as bordas dos componentes.

índice

como utilizar

Nós temos diversas propriedades disponíveis em relação as bordas:

import {
  border,
  borderTop,
  borderRight,
  borderBottom,
  borderLeft,
  borderColor,
  borderTopColor,
  borderRightColor,
  borderBottomColor,
  borderLeftColor,
  borderWidth,
  borderTopWidth,
  borderRightWidth,
  borderBottomWidth,
  borderLeftWidth,
  borderRadius,
  borderTopLeftRadius,
  borderTopRightRadius,
  borderBottomLeftRadius,
  borderBottomRightRadius,
} from '@olist/styled-system';

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

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

Para utilizar basta aplicar a função desejada em seu "styled-component":

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

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

// ...

<MyComponent borderRadius="pill" />
<MyComponent bRadius="circle" />
<MyComponent borderRadius="large" />
<MyComponent bRadius="medium" />
<MyComponent borderRadius="small" />
<MyComponent bRadius="1xsmall" />

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

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

// ...

<MyComponent borderRadius="10px" />;
<MyComponent bRadius="10px" />;

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

utilização com typescript

Para utilizar as funções de border 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 borderRadius você deve importar o tipo BordersRadiusProps:

import styled from 'styled-components';
import { borderColor, type BorderColorProps } from '@olist/styled-system';

const MyComponent = styled.div<BorderColorProps>`
  ${borderColor}
`;

// ...

<MyComponent borderColor="primary.base" />;

utilizando todas as propriedades de uma só vez

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

import styled from 'styled-components';
import { borders, type BordersProps } from '@olist/styled-system';

const MyComponent = styled.div<BordersProps>`
  ${borders}
`;

// ...

<MyComponent
  border="1px solid"
  borderColor="primary.base"
  borderRadius="circle"
/>;

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

propriedadealiasestype
border-BorderProps
borders-BordersProps
borderTop-BorderTopProps
borderRight-BorderRightProps
borderBottom-BorderBottomProps
borderLeft-BorderLeftProps
borderColor-BorderColorProps
borderTopColor-BorderTopColorProps
borderRightColor-BorderRightColorProps
borderBottomColor-BorderBottomColorProps
borderLeftColor-BorderLeftColorProps
borderWidth-BorderWidthProps
borderTopWidth-BorderTopWidthProps
borderRightWidth-BorderRightWidthProps
borderBottomWidth-BorderBottomWidthProps
borderLeftWidth-BorderLeftWidthProps
borderRadiusbRadiusBorderRadiusProps
borderTopLeftRadius-BorderTopLeftRadiusProps
borderTopRightRadius-BorderTopRightRadiusProps
borderBottomLeftRadius-BorderBottomLeftRadiusProps
borderBottomRightRadius-BorderBottomRightRadiusProps