Tema Customizado

Customizar tokens globais

Você pode extender e/ou substituir em seu projeto os tokens globais usando o metodo extendsTheme importado do Delta.

Defina junto com os designers as cores do site, entendendo que dividimos em primary, secondary e neutral com 5 níveis de tons. As cores de feedbacks success, warning e critical em 2 níveis de tons. E a cor de focus do projeto.

Obs: Para seguirmos um padrão, apenas é permitido sobrescrever tokens de cores e fontes.

import { extendsTheme } from '@escaletech/delta'

const theme = extendsTheme({
  colors: {
    primaryUltralight: '#F2F2F2',
    primaryLightest: '#D3D3D7',
    primaryLight: '#A4A6AC',
    primaryMedium: '#5B5D64',
    primaryDark: '#37383C',
    primaryDarkest: '#1C1C1C',

    secondaryUltralight: '#FFF6D9',
    secondaryLightest: '#FFE795',
    secondaryLight: '#FFDA5A',
    secondaryMedium: '#F6BE00',
    secondaryDark: '#E7AB13',
    secondaryDarkest: '#D2951F',

    tertiaryUltralight: '#E5DCE3',
    tertiaryLightest: '#C4A9BE',
    tertiaryLight: '#9C7194',
    tertiaryMedium: '#7E5075',
    tertiaryDark: '#643E5D',
    tertiaryDarkest: '#4C3046',

    neutralUltralight: '#FFFFFF',
    neutralLightest: '#E5E5E5',
    neutralLight: '#C7C7C7',
    neutralMedium: '#949494',
    neutralDark: '#4D4D4D',
    neutralDarkest: '#000000',

    criticalUltralight: '#FBECEE',
    criticalLightest: '#F0B4BC',
    criticalLight: '#F0B4BC',
    criticalMedium: '#F0B4BC',
    criticalDark: '#F0B4BC',
    criticalDarkest: '#F0B4BC',

    successUltralight: '#E5FAF5',
    successLightest: '#99F1DE',
    successLight: '#4ADDBD',
    successMedium: '#00C99E',
    successDark: '#06A280',
    successDarkest: '#027E64',

    warningUltralight: '#FDE4D1',
    warningLightest: '#FCC8A3',
    warningLight: '#FBA566',
    warningMedium: '#F88430',
    warningDark: '#E7721E',
    warningDarkest: '#CD671E',

    infoUltralight: '#BAD5F4',
    infoLightest: '#7FACE2',
    infoLight: '#2C73C7',
    infoMedium: '#0D4F9F',
    infoDark: '#0E3C74',
    infoDarkest: '#022652',

    focusedLight: '$infoUltralight',
    focused: '$infoMedium'
  },
  fonts: {
    primary:
      "'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
    secondary:
      "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"
  }
})

Adicione o tema retornado ao componente raíz de seu projeto

import { Button } from '@escaletech/delta'

const App = () => (
  <div className={theme}>
    <Button>Button</Button>
  </div>
)

Customizar component tokens

Você também pode customizar cada componente no mesmo arquivo onde configura seus tokens globais

import { extendsTheme } from '@escaletech/delta'

export const theme = extendsTheme({
  colors: {
    // customiza as cores do tema padrão
    primaryMedium: '#9EC',
    secondaryMedium: '#399',
    // ...
    // customiza as cores de fundo e texto do componente Button
    buttonPrimaryBackgroundColor: '#78E',
    buttonPrimaryColor: '#FFF'
  },
  fonts: {
    // customiza a familia de fonte do tema padrão
    primary: 'Helvetica',
    secondary: 'Arial',
    // ...
    // customiza a familia de fonte do componente Button
    buttonFontFamily: '$primary'
  }
})