Configuration

SCSS variables

The Arc styles are split into three different SCSS files:

• arc-fonts.scss contains @font-face declarations for the Arc font, Output Sans.
• arc-variables.scss contains all design tokens for the design system, including colors, spacing and fonts.
• arc-bootstrap.scss maps variables to specific Bootstrap override values.

Bootstrap theme

Follow the documentation on Bootstrap theming for overriding the default values with the arc-bootstrap file provided by the design system.

Component theming

In order for the components to access the correct design tokens, you'll need to wrap your (or section using the design system) with a theme provider

import { ArcThemeProvider } from '@wpmedia/arc-ui-system'
;<ArcThemeProvider>
  <App />
</ArcThemeProvider>

Should you wish to override any of the theme values used by the components, ArcThemeProvider takes an optional theme prop. You'll probably want to merge the current theme with any overrides:

import { theme } from '@wpmedia/arc-ui-theme'
import { ArcThemeProvider } from '@wpmedia/arc-ui-system'

const newTheme = {
  ...theme,
  colors: {
    text: {
      default: 'hotpink'
    }
  }
}

<ArcThemeProvider theme={newTheme}>...</ArcThemeProvider>