Skip to main content

New theme

· 2 min read
Luiz Flipe
Luiz Flipe
Developer

If you've worked on Bonsai and now on BTA, you might have noticed that Figma looks a bit different, especially regarding colors and other variables like stroke. The theme of the template has been revamped to align more closely with Figma.

Theme​

Now, to set up the theme, you'll need to request three files from the design team:

  • ContextColors.json
  • GlobalColors.json
  • Measure.json

These files should be placed in the theme folder, and then run the following command in our CLI:

This will configure all the colors and values according to Figma.

We now have new values such as radius, stroke, and size, and the colors work a bit differently:

  • baseColors: An object containing all the base colors used in the design.
  • variants: Generated from baseColors, e.g., primary, resulting in names like primarySolid200 and primaryTransparent200. This naming convention is based on opacity to provide more options.
  • colors: Now contains various values related to component colors, such as buttonLabelDisabled. This object uses baseColors, and the names are aligned with what's in Figma to modify or create component variants.

In Figma, colors will appear in the format:

secondary/solid/150

While in the template, the standard will be camelCase, like:

secondarySolid150

Icons​

There's no longer a need to set up icons. The design team uses a library called mingcute, and the template will already include all the icons from this library. You can simply import them when needed.