I work with three different brands, each having its own set of variables for colors, sizing, etc. Our goal is to create a unified “mapped foundation” where we standardize colors for both light and dark themes. Once this is done, we integrate this file into our “alias foundation,” which organizes everything by brand.

For example, let’s consider a button. Currently, I have a --clr-surface-button-primary variable defined in each brand’s “mapped colors,” allowing us to specify both dark and light versions. We then incorporate this variable into the component alias file, where we have a “brand foundation” set up with the same variable name, --clr-surface-button-primary. In this setup, I define three modes: brand 1, brand 2, and brand 3. Here, I assign the alias for the surface button from each brand’s mapped colors.

Everything works well, but the issue arises when I create my file. I can switch brands, but Figma displays three variants of “mapped colors” instead of recognizing them as a single set with identical naming conventions. It would be better if Figma could recognize that all the variables with the same name and convention should be treated as a single “mapped colors” set for theming purposes.