custom-theme.js

import { theme } from '@chakra-ui/react'

export const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    primary: {
      50: '#f6f8fe',
      100: '#eef0fe',
      200: '#d3dafb',
      300: '#b9c4f9',
      400: '#8597f5',
      500: '#506bf0',
      600: '#4860d8',
      700: '#3c50b4',
      800: '#304090',
      900: '#273476',
    },
    black: '#243141',
    gray: {
      50: '#f4f5f6',
      100: '#e9eaec',
      200: '#c8ccd0',
      300: '#a7adb3',
      400: '#666f7a',
      500: '#243141',
      600: '#202c3b',
      700: '#1b2531',
      800: '#161d27',
      900: '#121820',
    },
    crimson: {
      50: '#fbf3f3',
      100: '#f8e7e7',
      200: '#edc3c2',
      300: '#e39f9d',
      400: '#cd5754',
      500: '#b80f0a',
      600: '#a60e09',
      700: '#8a0b08',
      800: '#6e0906',
      900: '#5a0705',
    },
    red: {
      400: '#FB1164',
      500: '#E53E3E',
      700: '#FF0101',
    },
    green: {
      400: '#43E28E',
      500: '#43E28E',
    },
  },
  fonts: {
    ...theme.fonts,
    body: 'Raleway',
  },
  fontSizes: {
    '3xs': '0.25rem',
    '2xs': '0.5rem',
    xs: '0.75rem',
    sm: '0.875rem',
    md: '1rem',
    lg: '1.125rem',
    xl: '1.25rem',
    '2xl': '1.5rem',
    '3xl': '1.875rem',
    '4xl': '2.25rem',
    '5xl': '3rem',
    '6xl': '3.75rem',
    '7xl': '4.5rem',
    '8xl': '6rem',
    '9xl': '8rem',
  },
  fontWeights: {
    hairline: 100,
    thin: 200,
    light: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
    extrabold: 800,
    black: 900,
  },
  lineHeights: {
    normal: 'normal',
    none: 1,
    shorter: 1.25,
    short: 1.375,
    base: 1.5,
    tall: 1.625,
    taller: 2,
    3: '.75rem',
    4: '1rem',
    5: '1.25rem',
    6: '1.5rem',
    7: '1.75rem',
    8: '2rem',
    9: '2.25rem',
    10: '2.5rem',
  },
  letterSpacings: {
    tighter: '-0.05em',
    tight: '-0.025em',
    normal: '0',
    wide: '0.025em',
    wider: '0.05em',
    widest: '0.1em',
  },
  sizes: {
    ...theme.space,
    max: 'max-content',
    min: 'min-content',
    full: '100%',
    '3xs': '14rem',
    '2xs': '16rem',
    xs: '20rem',
    sm: '24rem',
    md: '28rem',
    lg: '32rem',
    xl: '36rem',
    '2xl': '42rem',
    '3xl': '48rem',
    '4xl': '56rem',
    '4.5xl': '60rem',
    '5xl': '64rem',
    '6xl': '72rem',
    '7xl': '80rem',
    '8xl': '90rem',
  },
  zIndices: {
    hide: -1,
    auto: 'auto',
    base: 0,
    docked: 10,
    dropdown: 1000,
    sticky: 1100,
    banner: 1200,
    overlay: 1300,
    modal: 1400,
    popover: 1500,
    skipLink: 1600,
    toast: 1700,
    tooltip: 1800,
  },
  space: {
    px: '1px',
    0: '0',
    0.5: '0.125rem',
    1: '0.25rem',
    1.5: '0.375rem',
    2: '0.5rem',
    2.5: '0.625rem',
    3: '0.75rem',
    3.5: '0.875rem',
    4: '1rem',
    5: '1.25rem',
    6: '1.5rem',
    7: '1.75rem',
    8: '2rem',
    9: '2.25rem',
    10: '2.5rem',
    12: '3rem',
    14: '3.5rem',
    16: '4rem',
    18: '4.5rem',
    20: '5rem',
    24: '6rem',
    26: '6.5rem',
    28: '7rem',
    30: '7.5rem',
    32: '8rem',
    36: '9rem',
    40: '10rem',
    44: '11rem',
    48: '12rem',
    52: '13rem',
    56: '14rem',
    60: '15rem',
    64: '16rem',
    72: '18rem',
    80: '20rem',
    96: '24rem',
  },
}