Tokens de Componente

Os tokens de componente são variáveis de CSS com valores de tokens globais que personaliza os componentes.

Utilização

É aconselhado criar componentTokens/index.ts com os tokens dos componentes para que o arquivo não fique extenso.

info

Veja os tokens de cada componente em sua respectiva documentação.

import { extendsTheme } from '@escaletech/delta'

import { componentTokens } from './componentTokens'

export const theme = extendsTheme({
  borderStyles: {
    ...componentTokens.borderStyles
  },
  borderWidths: {
    ...componentTokens.borderWidths
  },
  colors: {
    // cores do projeto
    ...componentTokens.colors
  },
  fonts: {
    // fontes do projeto,
    ...componentTokens.fonts
  },
  fontSizes: {
    ...componentTokens.fontSizes
  },
  fontWeights: {
    ...componentTokens.fontWeights
  },
  letterSpacings: {
    ...componentTokens.letterSpacings
  },
  lineHeights: {
    ...componentTokens.lineHeights
  },
  opacities: {
    ...componentTokens.opacities
  },
  radii: {
    ...componentTokens.radii
  },
  shadows: {
    ...componentTokens.shadows
  },
  sizes: {
    ...componentTokens.sizes
  },
  space: {
    ...componentTokens.space
  },
  transitions: {
    ...componentTokens.transitions
  },
  zIndices: {
    ...componentTokens.zIndices
  }
})