styled system

system

Você pode aplicar todas as propriedades de estilo de uma só vez com a função system.

índice

como utilizar
utilização com typescript
tabela de propriedades do system

Utilizando a função system será aplicada todas as propriedades de estilo de uma única vez, ou seja, todas as propriedades de estilo que estão disponíveis.

como utilizar

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

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

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

// ...

<MyComponent
  bgColor="primary.base"
  mt="stack.medium"
  mb="stack.medium"
  opacity="base"
  padding="stretchedInset.1xlarge"
  textAlign="center"
/>;

utilização com typescript

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

Você deve importar a função system e o tipo SystemProps:

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

const MyComponent = styled.div<SystemProps>`
  ${system}
`;

// ...

<MyComponent
  bgColor="primary.base"
  mt="stack.medium"
  mb="stack.medium"
  opacity="base"
  padding="stretchedInset.1xlarge"
  textAlign="center"
/>;

tabela de propriedades do system

Propriedade	Descrição	Tipo	Exemplo
`backgroundColor`	Cor de fundo	`BackgroundColorProps`	`backgroundColor="primary.base"`
`bg`	Cor de fundo	`BackgroundColorProps`	`bg="primary.base"`
`bgColor`	Cor de fundo	`BackgroundColorProps`	`bgColor="primary.base"`
`border`	Borda	`BorderProps`	`border="1px solid"`
`borderTop`	Borda superior	`BorderTopProps`	`borderTop="1px solid"`
`borderRight`	Borda direita	`BorderRightProps`	`borderRight="1px solid"`
`borderBottom`	Borda inferior	`BorderBottomProps`	`borderBottom="1px solid"`
`borderLeft`	Borda esquerda	`BorderLeftProps`	`borderLeft="1px solid"`
`borderRadius`	Raio da borda	`BorderRadiusProps`	`borderRadius="small"`
`bRadius`	Raio da borda	`BorderRadiusProps`	`bRadius="small"`
`borderTopLeftRadius`	Raio da borda superior esquerda	`BorderTopLeftRadiusProps`	`borderTopLeftRadius="small"`
`borderTopRightRadius`	Raio da borda superior direita	`BorderTopRightRadiusProps`	`borderTopRightRadius="small"`
`borderBottomLeftRadius`	Raio da borda inferior esquerda	`BorderBottomLeftRadiusProps`	`borderBottomLeftRadius="small"`
`borderBottomRightRadius`	Raio da borda inferior direita	`BorderBottomRightRadiusProps`	`borderBottomRightRadius="small"`
`borderColor`	Cor da borda	`BorderColorProps`	`borderColor="primary.base"`
`borderTopColor`	Cor da borda superior	`BorderTopColorProps`	`borderTopColor="primary.base"`
`borderRightColor`	Cor da borda direita	`BorderRightColorProps`	`borderRightColor="primary.base"`
`borderBottomColor`	Cor da borda inferior	`BorderBottomColorProps`	`borderBottomColor="primary.base"`
`borderLeftColor`	Cor da borda esquerda	`BorderLeftColorProps`	`borderLeftColor="primary.base"`
`alignContent`	Alinhamento do conteúdo	`AlignContentProps`	`alignContent="center"`
`alignItems`	Alinhamento dos itens	`AlignItemsProps`	`alignItems="center"`
`alignSelf`	Alinhamento do próprio elemento	`AlignSelfProps`	`alignSelf="center"`
`flex`	Flex	`FlexProps`	`flex="1"`
`flexBasis`	Base do flex	`FlexBasisProps`	`flexBasis="1"`
`flexDirection`	Direção do flex	`FlexDirectionProps`	`flexDirection="row"`
`flexFlow`	Fluxo do flex	`FlexFlowProps`	`flexFlow="row nowrap"`
`flexGrow`	Crescimento do flex	`FlexGrowProps`	`flexGrow="1"`
`flexShrink`	Diminuição do flex	`FlexShrinkProps`	`flexShrink="1"`
`flexWrap`	Quebra do flex	`FlexWrapProps`	`flexWrap="nowrap"`
`gap`	Espaçamento entre os itens	`GapProps`	`gap="inline.medium"`
`justifyContent`	Justificação do conteúdo	`JustifyContentProps`	`justifyContent="center"`
`justifySelf`	Justificação do próprio elemento	`JustifySelfProps`	`justifySelf="center"`
`order`	Ordem do flex	`OrderProps`	`order="1"`
`display`	Exibição	`DisplayProps`	`display="flex"`
`position`	Posição	`PositionProps`	`position="absolute"`
`top`	Espaçamento superior	`TopProps`	`top="10px"`
`right`	Espaçamento direito	`RightProps`	`right="10px"`
`bottom`	Espaçamento inferior	`BottomProps`	`bottom="10px"`
`left`	Espaçamento esquerdo	`LeftProps`	`left="10px"`
`zIndex`	Índice z	`ZIndexProps`	`zIndex="1"`
`opacity`	Opacidade	`OpacityProps`	`opacity="base"`
`overflow`	Overflow	`OverflowProps`	`overflow="hidden"`
`overflows`	Overflow	`OverflowsProps`	`overflow="hidden", overflowX="hidden", overflowY="hidden"`
`overflowX`	Overflow horizontal	`OverflowXProps`	`overflowX="hidden"`
`overflowY`	Overflow vertical	`OverflowYProps`	`overflowY="hidden"`
`boxShadow`	Sombra	`ShadowProps`	`boxShadow="diffuse"`
`elevation`	Elevação	`ShadowProps`	`elevation="diffuse"`
`margins`	Todas as propriedades de margem	`MarginsProps`	`mt="stack.medium", mb="stack.medium", ml="inline.medium"`
`margin`	Margem	`MarginProps`	`margin="stretchedInset.1xlarge"`
`m`	Margem	`MarginProps`	`m="stretchedInset.1xlarge"`
`marginTop`	Margem superior	`MarginTopProps`	`marginTop="stack.medium"`
`mt`	Margem superior	`MarginTopProps`	`mt="stack.medium"`
`marginRight`	Margem direito	`MarginRightProps`	`marginRight="inline.medium"`
`mr`	Margem direito	`MarginRightProps`	`mr="inline.medium"`
`marginBottom`	Margem inferior	`MarginBottomProps`	`marginBottom="stack.medium"`
`mb`	Margem inferior	`MarginBottomProps`	`mb="stack.medium"`
`marginLeft`	Margem esquerdo	`MarginLeftProps`	`marginLeft="inline.medium"`
`ml`	Margem esquerdo	`MarginLeftProps`	`ml="inline.medium"`
`marginHorizontal`	Margem horizontal	`MarginHorizontalProps`	`marginHorizontal="inline.medium"`
`mx`	Margem horizontal	`MarginHorizontalProps`	`mx="inline.medium"`
`marginVertical`	Margem vertical	`MarginVerticalProps`	`marginVertical="stack.medium"`
`my`	Margem vertical	`MarginVerticalProps`	`my="stack.medium"`
`paddings`	Todas as propriedades de preenchimento	`PaddingsProps`	`pt="stack.medium", pb="stack.medium", pl="inline.medium"
`padding`	Preenchimento	`PaddingProps`	`padding="stretchedInset.1xlarge"`
`p`	Preenchimento	`PaddingProps`	`p="stretchedInset.1xlarge"`
`paddingTop`	Preenchimento superior	`PaddingTopProps`	`paddingTop="stack.medium"`
`pt`	Preenchimento superior	`PaddingTopProps`	`pt="stack.medium"`
`paddingRight`	Preenchimento direito	`PaddingRightProps`	`paddingRight="inline.medium"`
`pr`	Preenchimento direito	`PaddingRightProps`	`pr="inline.medium"`
`paddingBottom`	Preenchimento inferior	`PaddingBottomProps`	`paddingBottom="stack.medium"`
`pb`	Preenchimento inferior	`PaddingBottomProps`	`pb="stack.medium"`
`paddingLeft`	Preenchimento esquerdo	`PaddingLeftProps`	`paddingLeft="inline.medium"`
`pl`	Preenchimento esquerdo	`PaddingLeftProps`	`pl="inline.medium"`
`paddingHorizontal`	Preenchimento horizontal	`PaddingHorizontalProps`	`paddingHorizontal="inline.medium"`
`px`	Preenchimento horizontal	`PaddingHorizontalProps`	`px="inline.medium"`
`paddingVertical`	Preenchimento vertical	`PaddingVerticalProps`	`paddingVertical="stack.medium"`
`py`	Preenchimento vertical	`PaddingVerticalProps`	`py="stack.medium"`
`widths`	Todas as propriedades de largura	`WidthsProps`	`width="100%", maxWidth="100px", minWidth="50px"`
`width`	Largura	`WidthProps`	`width="100%"`
`w`	Largura	`WidthProps`	`w="100%"`
`heights`	Todas as propriedades de altura	`HeightsProps`	`height="100%", maxHeight="100px", minHeight="50px"`
`height`	Altura	`HeightProps`	`height="100%"`
`h`	Altura	`HeightProps`	`h="100%"`
`minWidth`	Largura mínima	`MinWidthProps`	`minWidth="100%"`
`minW`	Largura mínima	`MinWidthProps`	`minW="100%"`
`maxWidth`	Largura máxima	`MaxWidthProps`	`maxWidth="100%"`
`maxW`	Largura máxima	`MaxWidthProps`	`maxW="100%"`
`minHeight`	Altura mínima	`MinHeightProps`	`minHeight="100%"`
`minH`	Altura mínima	`MinHeightProps`	`minH="100%"`
`maxHeight`	Altura máxima	`MaxHeightProps`	`maxHeight="100%"`
`maxH`	Altura máxima	`MaxHeightProps`	`maxH="100%"`
`color`	Cor	`ColorProps`	`color="primary.base"`
`c`	Cor	`ColorProps`	`c="primary.base"`
`fontFamily`	Família da fonte	`FontFamilyProps`	`fontFamily="brand"`
`fontSize`	Tamanho da fonte	`FontSizeProps`	`fontSize="large"`
`fontWeight`	Peso da fonte	`FontWeightProps`	`fontWeight="bold"`
`letterSpacing`	Espaçamento entre as letras	`LetterSpacingProps`	`letterSpacing="loose"`
`lineHeight`	Altura da linha	`LineHeightProps`	`lineHeight="small"`
`textAlign`	Alinhamento do texto	`TextAlignProps`	`textAlign="center"`
`textTransform`	Transformação do texto	`TextTransformProps`	`textTransform="uppercase"`