How to use the @instructure/ui-themeable.ThemeRegistry.registerTheme function in @instructure/ui-themeable

const key = 'canvas-high-contrast'

const variables = {
  borders,
  transitions,
  typography,
  spacing,
  forms,
  media,
  breakpoints,
  shadows,
  stacking,
  colors
}

const theme = ThemeRegistry.registerTheme({
  key,
  description: 'This theme meets WCAG 2.0 AA rules for color contrast.',
  variables
})

export default theme
export {
  borders,
  transitions,
  typography,
  spacing,
  forms,
  media,
  breakpoints,
  shadows,
  stacking,

'ic-link-decoration': 'none',

  'ic-brand-button--primary-bgd': colors.backgroundBrand,
  'ic-brand-button--primary-text': colors.textLightest,
  'ic-brand-button--secondary-bgd': colors.backgroundDarkest,
  'ic-brand-button--secondary-text': colors.textLightest,

  'ic-brand-global-nav-bgd': colors.backgroundBrandSecondary,
  'ic-global-nav-link-hover': colors.backgroundDarkest,
  'ic-brand-global-nav-ic-icon-svg-fill': colors.textLightest,
  'ic-brand-global-nav-ic-icon-svg-fill--active': colors.textBrand,
  'ic-brand-global-nav-menu-item__text-color': colors.textLightest,
  'ic-brand-global-nav-menu-item__text-color--active': colors.textBrand
}

const theme = ThemeRegistry.registerTheme({
  key,
  variables: { ...variables, ...brandVariables }
})

export default theme
export {
  functionalColors,
  borders,
  colors,
  transitions,
  typography,
  spacing,
  forms,
  media,
  breakpoints,
  shadows,