Other generated assets

Besides components, Plasmic also generates other useful assets that you need to use in your application.

Global variants

Global variants are represented in the generated code as React contexts.

If your components make use of global variants, you can provide the activated global variant value using the generated context provider. Usually you can do this at the root of your React tree to cover all components rendered across your application, though you can also specify different global variant values for different sections of the product — it’s just a React context, and you can just use it as such.

For example, here’s how you might use a Theme global variant to toggle between dark and light:

You can import and use the context in your own code.

import { ThemeContext } from './plasmic/PlasmicGlobalVariant__Theme';

function App() {
  const theme = useUserThemePreference(); // undefined or "dark" or "high-contrast-dark"
  return <ThemeContext.Provider value={theme}>...</ThemeContext.Provider>;
}

The Screen global variant

The Screen global variant is used to create responsive designs triggered by breakpoints. This enables Plasmic to express variations beyond what can be achieved in CSS media queries, and enable arbitrary rendering changes.

This global variant is special because it is automatically provided by Plasmic where needed.

Icons

All the SVG icons that you have in Plasmic are automatically generated as React components. You can use them as you would use any icon library:

By default, these icon components are sized to be 1em, with fill / stroke colors set to currentColor, so you can size them using the font-size css property, and color them using the color css property, just as you can with similar icon libraries — except they are your icons!

Style tokens

We also support generating design tokens into the codebase. This is so you can, for instance, reuse your color and spacing tokens as Sass variables. We specifically emit Salesforce Theo JSON files, which can in turn generate Sass variables, CSS custom properties, etc. by running the theo tool.

For example, here’s how you can generate Sass variables from the JSON file:

npm install --save-dev theo # or: yarn add theo
npm run theo plasmic-tokens.theo.json --transform web --format sass

Note that even if your Plasmic components use style tokens, the generated Plasmic* components do not directly use the values in the Theo file — so if you manually edit the Theo file, it will not be reflected in the rendered component. Instead, the generated Theo file is intended for you to reuse the style tokens defined in Plasmic in the rest of your application. For example, you can import them as sass variables into your own sass files, or reference the token values as javascript variables.

By default, when you run plasmic sync, the tokens that are used by the components you are syncing will be exported to your tokens file. You can also explicitly sync down all tokens of a project this way:

plasmic sync-style-tokens --projects PROJECTID

Note: Since tokens produce a Theo file for further processing, this is done via the codegen CLI; there is no PlasmicLoader mechanism for this.

Note: Plasmic Studio supports defining mixins, but we do not yet currently support emitting mixins into your codebase. If you have ideas about how you want to reuse mixins defined in Plasmic, please let us know!