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

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'

import themeable from '@instructure/ui-themeable'

import TextInput from '@instructure/ui-core/lib/components/TextInput'
import Link from '@instructure/ui-core/lib/components/Link'
import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent'

import NavToggle from '../NavToggle'

import styles from './styles.css'
import theme from './theme'

@themeable(theme, styles)
export default class DocsNav extends Component {
  static propTypes = {
    components: PropTypes.object, // eslint-disable-line react/forbid-prop-types
    documents: PropTypes.array, // eslint-disable-line react/forbid-prop-types
    themes: PropTypes.object, // eslint-disable-line react/forbid-prop-types
    selected: PropTypes.string // eslint-disable-line react/require-default-props
  }

  static defaultProps = {
    components: [],
    documents: [],
    themes: []
  }

  constructor (props) {
    super()

import testable from '@instructure/ui-testable'
import themeable from '@instructure/ui-themeable'
import ThemeablePropTypes from '@instructure/ui-themeable/lib/ThemeablePropTypes'

import Transition from '@instructure/ui-motion/lib/Transition'

import styles from './styles.css'
import theme from './theme'

/**
---
parent: TabList
---
**/
@testable()
@themeable(theme, styles)
export default class TabPanel extends Component {
  static propTypes = {
    /**
    * The content that will be rendered in the corresponding  and will label
    * this `` for screen readers
    */
    title: PropTypes.node.isRequired,
    children: PropTypes.node,
    variant: PropTypes.oneOf(['simple', 'minimal']),
    maxHeight: PropTypes.string,
    id: PropTypes.string,
    labelledBy: PropTypes.string,
    selected: PropTypes.bool,
    disabled: PropTypes.bool,
    padding: ThemeablePropTypes.spacing,
    textAlign: PropTypes.oneOf(['start', 'center', 'end']),

import { pickProps } from '@instructure/ui-react-utils/lib/pickProps'
import { controllable } from '@instructure/ui-prop-types'
import testable from '@instructure/ui-testable'

import TreeCollection from './TreeCollection'

import styles from './styles.css'
import theme from './theme'

/**
---
category: components
---
**/
@testable()
@themeable(theme, styles)
export default class TreeBrowser extends Component {
  static propTypes = {
    /**
    * a normalized hash of collections, keyed by id, that contain an
    * :id, :name, :items (an array of item ids), :collections (an array of
    * collection ids), and optional :descriptor text.
    * Each collection must have a unique id.
    */
    collections: PropTypes.object.isRequired,
    /**
    * a hash of items, keyed by id, that contain an :id, :name,
    * optional :descriptor text, and optional :thumbnail url
    */
    items: PropTypes.object.isRequired,
    /**
    * specifies the id of the root level collection, if present.

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import IconCheck from '@instructure/ui-icons/lib/Solid/IconCheck'
import themeable from '@instructure/ui-themeable'

import styles from './styles.css'
import theme from './theme'

/**
---
parent: Checkbox
---
**/
@themeable(theme, styles)
export default class CheckboxFacade extends Component {
  static propTypes = {
    children: PropTypes.node.isRequired,
    checked: PropTypes.bool,
    focused: PropTypes.bool,
    hovered: PropTypes.bool,
    size: PropTypes.oneOf(['small', 'medium', 'large'])
  }

  static defaultProps = {
    checked: false,
    focused: false,
    hovered: false,
    size: 'medium'
  }

/**
---
parent: FormField
---

This is a helper component that is used by most of the custom form
components. In most cases it shouldn't be used directly.

```js
---
example: true
---
Invalid value

**/ @themeable(theme, styles) export default class FormFieldMessage extends Component { static propTypes = { variant: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only']), children: PropTypes.node }

static defaultProps = { variant: 'hint' }

render () { const classes = { [styles.root]: true, [styles[this.props.variant]]: true } return (

import Container from '@instructure/ui-container/lib/components/Container'

import themeable from '@instructure/ui-themeable'
import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes'

import RatingIcon from './RatingIcon'

import styles from './styles.css'
import theme from './theme'

/**
---
category: components
---
**/
@themeable(theme, styles)
class Rating extends Component {
  static propTypes = {
    /**
    * A label is required for accessibility
    */
    label: PropTypes.string.isRequired,
    /**
    * A function that returns the current value formatted for screen readers
    */
    formatValueText: PropTypes.func,
    /**
    * Choose from a 0-3 or 0-5 rating system
    */
    iconCount: PropTypes.oneOf([3, 5]),
    /**
    * Choose from different rating icon sizes

import warning from '@instructure/ui-utils/lib/warning'
import uid from '@instructure/ui-utils/lib/uid'

import Tab from './Tab'
import TabPanel from './TabPanel'

import styles from './styles.css'
import theme from './theme'

/**
---
category: components/navigation
---
**/

@themeable(theme, styles)
export default class TabList extends Component {
  static propTypes = {
    /**
    * children of type `TabPanel`
    */
    children: CustomPropTypes.Children.oneOf([TabPanel]),
    /**
    * One of: simple, minimal
    */
    variant: CustomPropTypes.deprecatedVariant(
      PropTypes.oneOf(['simple', 'accordion', 'minimal']),
      'accordion',
      'For similar functionality, use the `ToggleDetails` component instead.'
    ),
    /**
    * the index (zero based) of the panel that should be selected on initial render

import theme from './theme'

function formatTime (time) {
  if (time && typeof time === 'number' && time < Infinity) {
    return new Date(1000 * time).toISOString().substr(14, 5)
  }

  return '00:00'
}

/**
---
private: true
---
**/
@themeable(theme, styles)
class Timebar extends Component {
  static propTypes = {
    /**
     * Id of the video element. Used to ensure
     * correct aria properties are applied.
     */
    videoId: PropTypes.string.isRequired,
    /**
     * Number of seconds that have been buffered.
     */
    buffered: PropTypes.number,
    /**
     * The current playback time in seconds.
     */
    currentTime: PropTypes.number,
    /**

import themeable from '@instructure/ui-themeable'
import ThemeablePropTypes from '@instructure/ui-themeable/lib/utils/ThemeablePropTypes'
import LayoutPropTypes from '@instructure/ui-layout/lib/utils/LayoutPropTypes'
import deprecated, { changedPackageWarning } from '@instructure/ui-utils/lib/react/deprecated'
import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'

import styles from './styles.css'
import theme from './theme'

/**
---
category: components
---
 **/
@themeable(theme, styles)
class ContextBox extends Component {
  static propTypes = {
    children:  PropTypes.node.isRequired,
    variant: PropTypes.oneOf(['default', 'inverse']),
    withArrow: PropTypes.bool,
    /**
     * Should the `` have a border
     */
    withBorder: PropTypes.bool,
    /**
     * Should the `` have a box shadow
     */
    withShadow: PropTypes.bool,
    arrowOffsetStart: PropTypes.oneOfType([
      PropTypes.number, PropTypes.string
    ]),

import testable from '@instructure/ui-testable'
import themeable from '@instructure/ui-themeable'
import findDOMNode from '@instructure/ui-dom-utils/lib/findDOMNode'

import styles from './styles.css'
import theme from './theme'

/**
---
parent: Tabs
id: Tabs.Tab
---
**/
@testable()
@themeable(theme, styles)
export default class Tab extends Component {
  static propTypes = {
    variant: PropTypes.oneOf(['default', 'secondary', 'screenreader-only']),
    id: PropTypes.string.isRequired,
    index: PropTypes.number.isRequired,
    controls: PropTypes.string.isRequired,
    disabled: PropTypes.bool,
    selected: PropTypes.bool,
    focus: PropTypes.bool,
    onClick: PropTypes.func,
    onKeyDown: PropTypes.func,
    role: PropTypes.string,
    children: PropTypes.node
  }

  static defaultProps = {