styled system

shadow

Confira as propriedades de estilos destinadas a shadow.

índice

como utilizar

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

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

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

// ...

<MyComponent boxShadow="low" />
<MyComponent boxShadow="high" />
<MyComponent boxShadow="higher" />
<MyComponent boxShadow="diffuse" />
// ou com o alias "elevation"
<MyComponent elevation="low" />
<MyComponent elevation="high" />
<MyComponent elevation="higher" />
<MyComponent elevation="diffuse" />

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

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

// ...

<MyComponent boxShadow="0px 4px 8px rgba(0, 0, 0, 0.8)" />;
<MyComponent elevation="0px 4px 8px rgba(0, 0, 0, 0.8)" />;

utilização com typescript

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

Ao utilizar a função shadow você deve importar o tipo ShadowProps:

import styled from 'styled-components';
import { shadow, type ShadowProps } from '@olist/styled-system';

const MyComponent = styled.div<ShadowProps>`
  ${shadow}
`;

// ...

<MyComponent boxShadow="higher" />;

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

propriedadealiasestype
boxShadowelevationShadowProps