How to use @instructure/canvas-theme - 3 common examples

* 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.
 */

// eslint-disable-next-line import/no-unresolved
import '@instructure/ui-polyfill-loader!'

import React from 'react'
import 'storybook-chromatic'

import { create } from '@storybook/theming'
import { getStorybook, storiesOf, configure, addParameters } from '@storybook/react'

import { theme } from '@instructure/canvas-theme'
theme.use({ overrides: { transitions: { duration: '0ms' } } })

// eslint-disable-next-line no-console
console.log('Generating component examples...')

addParameters({
  options: {
    theme: create({
      base: 'light',
      name: 'instructure-ui',
      brandUrl: 'https://instructure.design',
      brandImage: 'https://instructure.design/icons-bea652a7d0546b99c7cba9d3b4a538ee/favicon-32x32.png'
    }),
    showPanel: false,
    isFullscreen: false
  }
})

// eslint-disable-next-line no-restricted-imports
import '@instructure/ui-icons/lib/font/Solid/InstructureIcons-Solid.css'
// eslint-disable-next-line no-restricted-imports
import '@instructure/ui-icons/lib/font/Line/InstructureIcons-Line.css'

import { DateTime } from '@instructure/ui-i18n'

// eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved
import iconExample from '!svg-inline-loader!./heart_lg.svg'
import avatarSquare from './avatarSquare.jpg'
import avatarPortrait from './avatarPortrait.jpg'
import placeholderImage from './placeholder-image'
import placeholderLogo from './placeholder-logo'

import { theme } from '@instructure/canvas-theme'
theme.use()

const globals = {
  ...Components,
  moment,
  locales: moment.locales(),
  avatarSquare,
  avatarPortrait,
  DateTime,
  iconExample,
  lorem: {
    sentence () {
     return lorem({
       count: 1,
       units: 'sentences'
     })
   },

link: '#0770A3',
   electric: '#0770A3',
   shamrock: '#127A1B',
   barney: '#B8309E',
   crimson: '#D01A19',
   fire: '#C23C0D',
   licorice: '#2D3B45',
   oxford: '#394B58',
   ash: '#556572',
   slate: '#556572',
   tiara: '#556572',
   porcelain: '#FFFFFF',
   white: '#FFFFFF'
 }

 const colors = Object.freeze(functionalColors(values))

 export default colors
 export { colors }