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

import { themeable } from '@instructure/ui-themeable'
import { testable } from '@instructure/ui-testable'
import { deprecated } from '@instructure/ui-react-utils'

import theme from './theme'

/**
---
category: components/deprecated
id: DeprecatedRangeInput
---
**/

@deprecated('7.0.0', null, 'Use RangeInput from ui-range-input instead.')
@testable()
@themeable(theme)
class RangeInput extends Component {
  static propTypes = {
    min: PropTypes.number.isRequired,
    max: PropTypes.number.isRequired,
    /**
    * value to set on initial render
    */
    defaultValue: PropTypes.number,
    /**
    * the selected value (must be accompanied by an `onChange` prop)
    */
    value: controllable(PropTypes.number),
    /**
    * when used with the `value` prop, the component will not control its own state
    */
    onChange: PropTypes.func,

import { FormPropTypes } from '@instructure/ui-form-field'
import { testable } from '@instructure/ui-testable'
import { themeable } from '@instructure/ui-themeable'

import styles from './styles.css'

/**
---
category: components
---
**/
@deprecated('7.0.0', {
  label: 'renderLabel'
})
@testable()
@themeable(null, styles)
class DateInput extends Component {
  static Day = Calendar.Day

  static propTypes = {
    /**
    * Specifies the input label.
    */
    renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
        /**
    * deprecated
    */
    label: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
    /**
    * Specifies the input value.
    */
    value: controllable(PropTypes.string),

* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

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

import { isValid } from '@instructure/ui-color-utils'
import { themeable } from '@instructure/ui-themeable'

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

@themeable(theme, styles)
class ColorSwatch extends Component {
  static propTypes = {
    color: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
  }

  render () {
    const { color } = this.props
    return (
      isValid(color) ? <div color="" style="{{"> : null
    )
  }
}

export default ColorSwatch
export { ColorSwatch }
</div>

import classnames from 'classnames'

import { themeable } from '@instructure/ui-themeable'
import { Button } from '@instructure/ui-buttons'
import { Text } from '@instructure/ui-text'
import { TextInput } from '@instructure/ui-text-input'
import { ScreenReaderContent } from '@instructure/ui-a11y-content'
import { IconSearchLine } from '@instructure/ui-icons'
import { capitalizeFirstLetter } from '@instructure/ui-utils'

import { NavToggle } from '../NavToggle'

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

@themeable(theme, styles)
class Nav extends Component {

  constructor (props) {
    super(props)

    this.state = {
      query: null,
      expandedSections: this.setExpandedSections(false, props.sections),
      userToggling: false
    }

    this._themeId = '__themes'
  }

  static propTypes = {
    docs: PropTypes.object.isRequired,

---

A FormFieldMessages component

```js
---
example: true
---

/ @themeable(theme, styles) class FormFieldMessages extends Component { static propTypes = { / * object with shape: { * text: PropTypes.string, * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only']) * } */ messages: PropTypes.arrayOf(FormPropTypes.message) }

static defaultProps = { messages: undefined }

render () {

import PropTypes from 'prop-types'

import { getElementType } from '@instructure/ui-react-utils'
import { themeable } from '@instructure/ui-themeable'

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

/**
---
parent: Options
id: Options.Separator
---
@module Separator
**/
@themeable(theme, styles)
class Separator extends Component {
  static propTypes = {
    /**
    * Element type to render as
    */
    as: PropTypes.elementType
  }

  static defaultProps = {
    as: 'span'
  }

  render () {
    const { as, ...rest } = this.props
    const ElementType = getElementType(Separator, this.props, () => (as))

import { omitProps } from '@instructure/ui-react-utils'
import { testable } from '@instructure/ui-testable'

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

/**
---
category: components/deprecated
id: DeprecatedTable
---
**/

@testable()

@themeable(theme, styles)
class Table extends Component {
  static propTypes = {
    /**
    * Set the table's caption element (its label)
    */
    caption: PropTypes.node.isRequired,
    /**
    * Build the table markup via the children prop
    */
    children: PropTypes.node,
    /**
    * Highlight each row on hover
    */
    hover: PropTypes.bool,
    /**
    * Controls the padding and font-size of table cells

import { Portal } from '@instructure/ui-portal'

import { mirrorHorizontalPlacement } from '../../mirrorHorizontalPlacement'

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

/**
---
parent: DeprecatedDrawerLayout
id: DeprecatedDrawerLayout.Tray
---
**/
@testable()
@bidirectional()
@themeable(theme, styles)
class DrawerTray extends Component {
  static locatorAttribute = 'data-drawer-tray'
  static propTypes = {
    label: PropTypes.string.isRequired,
    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
    render: PropTypes.func,
    /**
     * Placement of the ``
     */
    placement: PropTypes.oneOf(['start', 'end']),

    /**
     * If the tray is open or closed.
     */
    open: PropTypes.bool,

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

/**
---
category: components
---
**/
@deprecated('7.0.0', {
  label: 'renderLabel',
  disabled: 'interaction',
  readOnly: 'interaction',
  required: 'isRequired',
  inline: 'display'
})
@themeable(theme, styles)
class TextInput extends Component {
  static propTypes = {
    /**
    * The form field label.
    */
    renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
    /**
    * The type of input.
    */
    type: PropTypes.oneOf(['text', 'email', 'url', 'tel', 'search', 'password']),
    /**
    * The id of the text input. One is generated if not supplied.
    */
    id: PropTypes.string,
    /**
    * the selected value (must be accompanied by an `onChange` prop)

import { testable } from '@instructure/ui-testable'
import { themeable } from '@instructure/ui-themeable'
import { passthroughProps } from '@instructure/ui-react-utils'
import { View } from '@instructure/ui-view'

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

/**
---
parent: TabList
id: TabList.Tab
---
**/
@testable()
@themeable(theme, styles)
class Tab extends Component {
  static propTypes = {
    variant: PropTypes.oneOf(['simple', 'minimal']),
    id: PropTypes.string.isRequired,
    index: PropTypes.number.isRequired,
    controls: PropTypes.string.isRequired,
    disabled: PropTypes.bool,
    selected: PropTypes.bool,
    onClick: PropTypes.func,
    onKeyDown: PropTypes.func,
    children: PropTypes.node
  }

  static defaultProps = {
    children: null,
    variant: 'simple',