[TB] Unable to load saved design system

[aaronreed708]

Problem/Concern

Found by @Chessel.

If you create a design system and then set dropdowns to use full item selection indication instead of left border selection indication on menu items and list items (change the Molecules->Dropdowns->Full Color setting) and then save the design system, you won't be able to load it again.

[aaronreed708]

I did some debugging on this. When loading the design system, I followed this call stack.

DesignSystemPage.setDesignSystemName
ThemeBuilder.getDesignSystem
ThemeBuilder.newDesignSystemFromObject
DesignSystem.deserialize
Code.generate
CssGenerator.generate
Css.Generate.setAtomVars
atoms.colorThemes.defaultTheme.setPropertyListener(this.lkey("colorTheme"), this.defaultThemeListener.bind(this));
Property.setPropertyListener("_tb.cssGenerator.colorTheme”)
Property.setListener
listener(event)
CSSGenerator.defaultThemeListener
this.defaultTheme = new CSSTheme(this.atoms.colorThemes.getTheme(name), this);
CSSTheme
CSSTheme.start
this.cssGenerator.addPropsVar("lm-dropdowns", "", [...props, this.theme.lightModeBackground], this.generateDropDownVars.bind(this, true));
CSSGenerator.addPropsVar
CssDynamicVariableKind
new index_4.PropertyGroupListener(listenerKey, props, this.multiplePropCallback.bind(this), opts);
PropertyGroupListener
PropertyGroupListener.start()
log.debug(Starting property group listener for ${this.lname});
DEBUG prop Starting property group listener for _tb.PropertyGroupListener._tb.cssGenerator.lm-dropdowns
CSSGenerator.generateDropDownVars
if (mfsVal === index_2.Dropdowns.FULL_COLOR) {
vk.setVar(var1, "100%");
vk.setVar(var2, buttonShade.getOnShade2(lm).getRGBA());
—> vk.setVar(var3, surfaceShade.mix(buttonShade, 0.5).getContrastShade(lm).hex);
}
Shade.mix
Shade.fromHex
Shade
Shade.setHex
hex.toUpperCase

So Shade.setHex throws an error because hex isn’t a string, it is an object with an rgb value array

Looks like when surfaceShade.mix(buttonShade, 0.5) is calling “const hex = chroma_js_1.default.mix(this.hex, shade.hex, ratio, "rgb”)”, it is assuming that Chroma.mix() is returning a hex value, but it is returning a color object.

Chroma.mix seems to use the last parameter as a mode. So here the mode is “rgb”. It looks like the possible modes are:
hcg,
hcl,
hsi,
hsl,
hsv,
lab,
lch,
lrgb,
num,
oklab,
oklch,
and rgb. When mode is "rgb", Chroma.mix will call Chroma.rgb and return a new Chroma.Color object.

[aaronreed708]

So the next action that needs to happen here is that I need to:

• determine when the issue was introduced. I just updated the SDK to use Chroma 3 instead of Chroma 2, is this what caused the problem? Are there more compatibility issues that we might run into?
• modify the SDK to make sure that converting a Chroma Color to hex will fix this issue

[aaronreed708]

The change in Shade.mix that seems to be affecting this code appears to have been placed in the SDK in: finos/a11y-theme-builder-sdk@41da4df#diff-678a9a2b31f668a78c97cca14bc24776e34f86cb123f2789359e9e78f219d6d1. Apr 10, 2023. Using Netlify instances from PRs from over a year ago shows the problem. So been in there a long time. This leads me to conclude that this is not related to any recent Chroma.js updates.