@instructure/canvas-theme

canvas-theme

A UI component theme made by Instructure Inc.

This theme has WCAG 2.1 Level AA minimum contrast requirement.

Installation

npm install @instructure/canvas-theme

Usage

Before mounting (rendering) your React application:

import { theme } from '@instructure/canvas-theme'

ReactDOM.render(
  <InstUISettingsProvider theme={theme}>
    <App />
  </InstUISettingsProvider>,
  element
)

To override the variables:

import { theme } from '@instructure/canvas-theme'
const themeOverrides = { spacing: { xxxSmall: '0.3rem' } }

ReactDOM.render(
  <InstUISettingsProvider theme={{ ...theme, ...themeOverrides }}>
    <App />
  </InstUISettingsProvider>,
  element
)