[TB] Export and Import of theme gives inconsistent CSS #1091
Description
Problem/Concern
Found by Matt Mills at Discover
If a user creates a new design system using Theme Builder and saves off the generated CSS, and then imports the design system and exports its generated CSS, they don't match.
Steps to recteate:
Generate initial CSS
- Load https://try.a11y-theme-builder.finos.org/
- Click on
Your Design Systemsfrom the left Nav - Click the button to create a new design system. Give it a name, like "Default1".
- Select an initial color and give it a name
- Select values for all of the fields for your default color theme
- Click
Show Themebutton. Click ok to acknowledge that the color theme will not be modifiable in the future. - Click on the
Savebutton from the header - Click on
Codefrom the tab bar - Click on
CSSfrom the left nav bar to see the generated CSS - Click on the
Downloadbutton to save the generated CSS to your local filesystem.
Backup design system
- Click on the Logo from the header bar
- Click on
Your Design Systemsfrom the left Nav - Find the card for the design system that you just created (e.g. "Default1")
- From that card click on the 3 dots to get a dropdown menu with actions
- Select
Download Design System Datato save the design system to your filesystem
Load in previous design system
- Click on the Logo from the header bar
- Click on
Your Design Systemsfrom the left Nav - Click on the
Import a Design Systembutton - Navigate to the design system that you just downloaded to import it into Theme Builder under a different name.
- Double click on the card for the newly created design system to load it.
- Click on
Codefrom the tab bar - Click on
CSSfrom the left nav bar to see the generated CSS - Click on the
Downloadbutton to save the generated CSS to your local filesystem.
Compare the initially saved CSS to this most recently saved CSS. They should be identical because they came from the same design system. But they are not.
Proposed Solution
The generated CSS from a loaded design system should match the CSS generated when the same design system is loaded onto the same or different instance of Theme Builder.