Codegen: 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, defined in the file PlasmicGlobalVariant__{NAME}.tsx. These files are also owned by Plasmic, and will be overwritten when they are outdated.

If your components make use of global variants, you must provide the activated global variant value using the generated context provider. Usually you can do this at the root of your React tree, 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:

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

function App() {
  const theme = useUserThemePreference();
  return (
    <ThemeContext.Provider value={theme}>
      ...
    </ThemeContext.Provider>
  );
}

The Screen global variant

If you are making use of the Screen global variant to build responsive designs, then there is a special provider that you should install at the root of your application. This provider will automatically provide the currently-activated screen variants based on the window size:

import {ScreenVariantProvider} from "./plasmic/PlasmicGlobalVariant__Screen";

function App() {
  return (
    <ScreenVariantProvider>
      ...
    </ScreenVariantProvider>
  );
}

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:

import TrashIcon from "./plasmic/PlasmicIcon__Trash";

function App() {
  return <TrashIcon className="my-icon" />;
}

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!

If your Plasmic component make use of icons, then the generated Plasmic* React component will instantiate these corresponding icon components.

Style tokens

We also support generating design tokens into the codebase. This is so you can, for instance, reuse your color tokens as Sass variables. We specifically emit Salesforce Theo 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: Plasmic Studio currently supports only color tokens, but other token types including fonts and scales are to come.

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!