styled system

background color

Confira as propriedades de estilos destinadas ao background-color.

índice

como utilizar

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

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

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

// ...

<MyComponent backgroundColor="primary.base" />
<MyComponent bgColor="neutral.stronger" />
<MyComponent bg="alert.base" />

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

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

// ...

<MyComponent backgroundColor="red" />;
<MyComponent bgColor="#000" />;

utilização com typescript

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

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

import styled from 'styled-components';
import {
  backgroundColor,
  type BackgroundColorProps,
} from '@olist/styled-system';

const MyComponent = styled.div<BackgroundColorProps>`
  ${backgroundColor}
`;

// ...

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

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

propriedadealiasestype
backgroundColorbgColor, bgBackgroundColorProps