Theming

Internally, Arc UI relies on two concepts for theming and styling:

System UI

The theme object is intended to be a general purpose format for storing design system style values, scales, and/or design tokens.

The spec for Arc UI can be found in the repository at https://github.com/WPMedia/arc-ui/blob/master/packages/theme/src/index.ts.

The spec file is exported from @wpmedia/arc-ui-theme and can be imported or extended if desired.

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

The `sx` prop

To avoid importing large portions of Theme UI, Arc UI implements its own sx prop (code mostly copied from Theme UI directly). The required jsx pragma is exported from the theme-provider module.

From the Theme UI site:

The sx prop lets you style elements inline, using values from your theme. To use the sx prop, add the custom /** @jsx jsx */ pragma comment to the top of your module and import the jsx function.

/** @jsx jsx */
import { jsx } from '@wpmedia/arc-ui-system'
export default (props) => (
  <div
    {...props}
    sx={{
      // values referencing scales defined in a theme
      color: 'primary',
      bg: 'lightgray',
      fontFamily: 'body',
      // raw CSS value
      boxShadow: '0 0 1px 3px rgba(0, 0, 0, .125)',
    }}
  />
)

Under the hood, Theme UI uses a custom pragma comment that converts a theme-aware sx prop into a style object and passes it to the Emotion's jsx function. The sx prop only works in modules that have defined a custom pragma at the top of the file, which replaces the default React.createElement function. This means you can control which modules in your application opt into this feature without the need for a Babel plugin or additional configuration. This is intended as a complete replacement for the Emotion custom JSX pragma.

#System UI

#The sx prop

System UI

The `sx` prop