Reusing ThemeBuilder Exported Variables Using SCSS

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 ThemeBuilder output as an npm package with SCSS?

Solution

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

1. Check the _tokens.scss file from the SCSS output for the identifier of the variable you want to reuse. For example:

   • For metric and color variables:

     $tb-example-metric: 1px;
     $tb-example-background: hsl(100deg, 50%, 50%);
     

   • For typography variables:

     $tb-typography: (
     // ...
       example-typography: (
           font-family: '"American Typewriter"',
           font-size: 1rem,
           font-weight: 500,
           line-height: 1,
           letter-spacing: 1px,
       ),
     // ...
     );
     

   • For effect variables:

     $tb-effects: (
     // ...
       example-effect: (box-shadow: (1px 3px 3px 0px green), ),
     // ...
     );
     

2. Import the SCSS file where you intend to reuse the specific variable after the _tokens.scss file from the ThemeBuilder output:

   @import '/themebuilder-styles/dist/scss';
   @import './custom-styles.scss'
   

3. Refer to the variable in your application's styles using the following SCSS syntax:

   • For metric and color variables:

     .example-element {
         border-width: $tb-example-metric;
         background-color: $tb-example-background;
     }
     

   • For typography and effect variables:

     .example-element {
         @extend %tb-typography-example-typography;
         @extend %tb-effects-example-effect;
     }
     

Fluent is the only CSS-based theme in ThemeBuilder. Therefore, in the _tokens.scss file, it uses CSS syntax for the metric and color variables:

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

Related Articles

• Using Variables
• Using the Exported Package
• Reusing ThemeBuilder Exported Variables Using CSS