How to use the @looker/design-tokens.palette.charcoal900 function in @looker/design-tokens

bg: palette.charcoal100,
  color: palette.charcoal900,
}

const current: MenuItemStateStyle = {
  ...hover,
  fontWeight: 'bold',
  iconColor: palette.charcoal900,
}

export const defaultMenuItemStyle: MenuItemStyle = {
  current,
  hover,
  initial,
  marker: {
    color: palette.charcoal900,
    size: 4,
  },
}

fontSize: 'small',
  fontWeight: 'normal',
  iconColor: palette.charcoal300,
  iconSize: 20,
}

const hover: MenuItemStateStyle = {
  ...initial,
  bg: palette.charcoal100,
  color: palette.charcoal900,
}

const current: MenuItemStateStyle = {
  ...hover,
  fontWeight: 'bold',
  iconColor: palette.charcoal900,
}

export const defaultMenuItemStyle: MenuItemStyle = {
  current,
  hover,
  initial,
  marker: {
    color: palette.charcoal900,
    size: 4,
  },
}

}
}

const initial: MenuItemStateStyle = {
  bg: palette.white,
  color: palette.charcoal600,
  fontSize: 'small',
  fontWeight: 'normal',
  iconColor: palette.charcoal300,
  iconSize: 20,
}

const hover: MenuItemStateStyle = {
  ...initial,
  bg: palette.charcoal100,
  color: palette.charcoal900,
}

const current: MenuItemStateStyle = {
  ...hover,
  fontWeight: 'bold',
  iconColor: palette.charcoal900,
}

export const defaultMenuItemStyle: MenuItemStyle = {
  current,
  hover,
  initial,
  marker: {
    color: palette.charcoal900,
    size: 4,
  },