IdsPersonalize: Rethink theming page

[tmcconechy]

Describe the bug After doing tokens http://localhost:4300/ids-theme-switcher/theme-builder-minimal.html is broken in that if you change the primary color it doesnt update. This is because mapped tokens do not map to the theme colors any more.

Need to discuss this with design.

Key Points:

• what should change?
• should we remap these tokens?
• should we add the datagrid where you can change values ect.

Expected behavior It is still possible to map all the tokens but a lot more work for personalization

[inforandy]

We want to have a couple elements here when we are finished

1. Filterable datagrid populated with the full inheritance schemes of our tokens.
   1. So, being able to bidirectionally sort out what hex codes are mapped to what palette numbers, all the way to what component slots are taking those tokens. We’ll need this as we work with teams that don’t have the same component slots as IDS, but want to take our tokens to match our look on a broad scale.
2. Ability to change a subset of system level token values and see the results for the component set.
   1. This is the editability we already have going here, and we just want to expand on it. Users should be able to change a few key system token values, like the primary, secondary and bg colors, for instance, and then see the effects cascade across the component set.
3. Visualizing effects of system token changes on key semantic and component tokens
   1. Thinking here is, for example, if the azure-10 is set as the color-primary, and the color-primary is used for, say, button-bg-color, then the user should see the button-bg-color token set as azure-10 after they change the primary color to that.
4. Functionality Reference: https://fluentuipr.z22.web.core.windows.net/heads/master/theming-designer/index.html

[inforandy]

Airtable interface for reference: https://airtable.com/appeUwBXfCRXsqq5F/pagfysmGKSsBkCE6Z?5bFrb=b%3AWzAsWyJNSnVwNCIsNixbInNlbGdnWDU4ZjVneExIQUF2Il0sIjdSS1NaIl1d ignore data values