Interface ColorProps

Valores aceitos para colorização de texto, fundo e borda.

Basicamente todas as propriedades já conhecidas do HTML estão presentes, mas seus valores são pré-definidos

Veja abaixo um exemplo utilizando algumas as propriedades:

<View
   backgroundColor="primary-300"
   borderColor="neutral-900"
   borderWidth="hairline"
>
 <Text color="neutral-900">Super customizado</Text>
</View>

Hierarchy

ColorProps

Index

Properties

backgroundColor? borderColor? color?

Properties

`Optional` backgroundColor

backgroundColor?: "none" | "primary-100" | "primary-300" | "primary-500" | "primary-700" | "primary-900" | "secondary-100" | "secondary-300" | "secondary-500" | "secondary-700" | "secondary-900" | "tertiary-100" | "tertiary-300" | "tertiary-500" | "tertiary-700" | "tertiary-900" | "accent-100" | "accent-300" | "accent-500" | "accent-700" | "accent-900" | "neutral-900" | "neutral-700" | "neutral-500" | "neutral-300" | "neutral-100" | "positive-700" | "positive-300" | "warning-700" | "warning-300" | "negative-700" | "negative-300" | "support-01" | "support-02" | "support-03"

Cor de fundo do componente

`Optional` borderColor

borderColor?: "none" | "primary-100" | "primary-300" | "primary-500" | "primary-700" | "primary-900" | "secondary-100" | "secondary-300" | "secondary-500" | "secondary-700" | "secondary-900" | "tertiary-100" | "tertiary-300" | "tertiary-500" | "tertiary-700" | "tertiary-900" | "accent-100" | "accent-300" | "accent-500" | "accent-700" | "accent-900" | "neutral-900" | "neutral-700" | "neutral-500" | "neutral-300" | "neutral-100" | "positive-700" | "positive-300" | "warning-700" | "warning-300" | "negative-700" | "negative-300" | "support-01" | "support-02" | "support-03"

Cor das bordas do componente

`Optional` color

color?: "none" | "primary-100" | "primary-300" | "primary-500" | "primary-700" | "primary-900" | "secondary-100" | "secondary-300" | "secondary-500" | "secondary-700" | "secondary-900" | "tertiary-100" | "tertiary-300" | "tertiary-500" | "tertiary-700" | "tertiary-900" | "accent-100" | "accent-300" | "accent-500" | "accent-700" | "accent-900" | "neutral-900" | "neutral-700" | "neutral-500" | "neutral-300" | "neutral-100" | "positive-700" | "positive-300" | "warning-700" | "warning-300" | "negative-700" | "negative-300" | "support-01" | "support-02" | "support-03"

Cor do texto no componente