Tokens Globais

Os tokens de design são decisões de design que garantem experiências de produto sistematicamente unificadas e coesas.

Os tokens globais são os valores primitivos agnóstico de contexto definidos em consenso pelo grupo de designers, eles podem ser usados ​​diretamente e herdados por todos os outros tipos de token.

info

De onde surgiu esses nomes de categorias?

O Design System foi contruído com Stitches, então usamos o mapa de propriedades, o qual são mapeados automaticamente para propriedades CSS para uma experiência de desenvolvedor.

Tokens

export default {
  // Larguras de Borda
  borderWidths: {
    none: '0px',
    hairline: '1px',
    thin: '2px',
    thick: '4px',
    heavy: '8px'
  },

  // Cores
  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',

    background: '$neutralLightest'
  },

  // Família de Fontes
  fonts: {
    primary: 'Din Ot, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif',
    secondary: 'Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif'
  },

  // Tamanhos de Fonte
  fontSizes: {
    xxxxs: '.75rem',
    xxxs: '.875rem',
    xxs: '1rem',
    xs: '1.125rem',
    sm: '1.25rem',
    md: '1.5rem',
    lg: '1.75rem',
    xlg: '2rem',
    xxl: '2.5rem',
    xxxl: '3rem',
    xxxxl: '4rem',
    display: '5rem',
    giant: '6rem'
  },

  // Pesos de Fonte
  fontWeights: {
    light: 300,
    regular: 400,
    medium: 500,
    semibold: 600,
    bold: 700
  },

  // Alturas da Linha
  lineHeights: {
    tight: '100%',
    md: '120%',
    distant: '150%',
    superDistant: '200%'
  },

  // Opacidades
  opacities: {
    semitransparent: '0.08',
    light: '0.16',
    medium: '0.32',
    intense: '0.64',
    semiopaque: '0.80'
  },

  // Raios de Borda
  radii: {
    xxs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    pill: '500px',
    circle: '50%'
  },

  // Sombras
  shadows: {
    flat: '0 4px 8px rgba(0, 0, 0, .08)',
    soft: '0 8px 16px rgba(0, 0, 0, .08)',
    raised: '0 8px 32px rgba(0, 0, 0, .08)',
    spotlight: '0 16px 48px rgba(0, 0, 0, .08)'
  },

  // Espaçamentos
  space: {
    quarck: '0.25rem',
    nano: '0.5rem',
    xxxs: '1rem',
    xxs: '1.5rem',
    xs: '2rem',
    sm: '2.5rem',
    md: '3rem',
    lg: '4rem',
    xl: '5rem',
    xxl: '5.5rem',
    xxxl: '6rem',
    xxxxl: '6.5rem',
    huge: '7rem',
    xhuge: '7.5rem'
  },

  // Tamanhos
  sizes: {
    screenWidth: '1140px'
  },

  // Transições
  transitions: {
    base: '.2s'
  },

  // Indices
  zIndices: {
    base: 5,
    menu: 10,
    overlay: 15,
    modal: 20,
    alwaysOnTop: 25
  }
}