De-dupe unnecessary tokens in theme stylesheets

[mcoker]

When creating a theme (dark, high contrast), the tokens generated for that theme include every var in the collection they're theming. IMO what it should do is only include vars with different values for that particular theme.

For example, tokens-charts-dark.scss overrides every variable from tokens-charts.scss, when only some vars need to be overridden. The dimension stuff at the top of the file does not change with dark theme, so those tokens (and probably others) shouldn't be in the dark theme tokens stylesheet.

From @lboehling

there is no way for me to just set high contrast value for a subset of tokens in a collection -- i'd have to pull them out into a separate collection which i don't think we'd want to do from an organization perspective

Can we do this in code? Is there a way to verify if the value in a theme override is the same as the base value it's overriding? That could get complicated... but probably worth exploring a little. It would cut down on the amount of code generated, and make it easier to see what all a particular theme does by looking at the tokens that are different in a given stylesheet.

---

Jira Issue: PF-2108

[srambach]

I agree, the dark charts stylesheet should only include the overrides.

At a glance, it seems to be something with the structure of the collection in figma and/or the exporter - the dark charts tokens aren't coming with 'dark' as a layer.

Once that's done, the dark charts config might also need to look for charts.dark instead of just charts