Reusing ThemeBuilder Exported Variables Using CSS

Environment

Product	ThemeBuilder
Product Version	Any

Description

I want to reuse the variables I have exported from ThemeBuilder in my application. How can I achieve this considering I am using the CSS output?

Solution

To reuse the variables exported from ThemeBuilder in your application using CSS, follow these steps:

1. Check the CSS output for the identifier of the variable you want to reuse:

   :root {
       /* ... */
       --tb-example-background: hsl(100deg, 50%, 50%);
       /* ... */
   

2. Refer to the desired variable in your application's styles using the following CSS syntax:

   .example-element {
       background-color: var(--tb-example-background);
   }
   

ThemeBuilder applies prefixes, such as the ThemeBuilder Export prefix and the Figma Plugin prefix to custom-defined variables. This makes it important to refer to the CSS output to ensure you access the correct variable.

Variables exported from ThemeBuilder are applied to the root element of the document tree using the pseudo-class :root. This allows all elements in the application to inherit these variables, and therefore access them.

Limitations

In ThemeBuilder, Fluent is the only CSS-based theme. For the other themes, such as Default, the custom-defined variables are replaced with plain values in the CSS output during the SASS compilation. In order to access such variables in these themes, use the SCSS output from the exported package instead.

Related Articles

• Using Variables
• Customizing ThemeBuilder Export Prefix
• Customizing Figma Plugin Prefix