@colibri-ui/themes

Themes

Paleta de cores default

Por padrão, a Colibri possue tipagens prórpias para os tons de cinza, dessa forma, basta somente tipar seu objeto theme e atribuir as cores para cada chave. Ah, são opcionais e você não precisa ter alguma cor já definida.

A escola de cores pode ir de 50 a 900 e todas são tipagens opcionais, veja:

{
  gray?: {
    50?: string
    100?: string
    200?: string
    300?: string
    400?: string
    500?: string
    600?: string
    700?: string
    800?: string
    900?: string
  }
}

Veja no exemplo abaixo que, mesmo eu não definindo TODOS os valores para as chaves disponíveis, mesmo assim poderei referenciar somente ao que eu criei.

import { createTheme } from '@colibri/themes'

const theme = createTheme({
  gray?: {
    50: "#f7fafc"
    700?: "#2d3748"
    800?: "#1a202c"
    900?: "#171923"
  }
})

Como tema criado, você terá acesso as referências somento às que você criou.

theme.gray.50
          .700
          .800
          .900

Paleta de cores personalizada

Um detalhe muito legal da Colibri é que você pode passar outras chaves e seus respectivos valores, sem precisar preencher os valores da tipagem padrão.

De forma resumida, quem cria o seu tema é você mesmo, a Colibri não te limita a parâmetros.

Veja:

import { createTheme } from '@colibri/themes'

const theme = createTheme({
  verde: 'verde',
  verdeClaro: 'verdeclaro,
  roxo: 'roxo',
  roxoClaro: 'roxoClaro'
})

E quando forem acessar as propriedades...

theme.gray.verde
          .verdeClaro
          .roxo
          .roxoClaro;