Dark and Light Colors as different frames

[KelvinOm]

Is your feature request related to a problem? Please describe. I try to create implement different themes like dark and light mode and for this I need two different sets of colors.

I plan to use them as css variables.

Describe the solution you'd like Support nesting frames in «Color» frame where I can add different frames. Whit this i can create JSON like this

const tokens = {
  dark: {
     primary: #116D47
  },
  light: {
     primary: #61CBA0
  }
};

Additional context If I can get achieve theming behavior another way, please tell me. I don't understand how I can implement themes using this dogmatic.

[mikaelvesavuori]

Hi!

Typically theming will be done in a higher level abstraction, such as creating a theme.js file or similar and doing the mapping you just displayed there. In that file you would import the basic singular colors (and anything else), like:

const colors = require('tokens/colors');
const { primaryDark, primaryLight } = colors;

const tokens = {
  dark: {
     primary: primaryDark
  },
  light: {
     primary: primaryLight
  }
};

Since it's a very easy thing to implement (and the right thing to do, to add abstractions that are unique to your way of working) and since this is not necessarily a feature that will be widely used, I am not currently planning to add such support.

[KelvinOm]

@mikaelvesavuori I was thinking about adding the prefix. But it seemed to me that such an implementation would be more difficult to scale.

Thank you for quick response. I really appreciate it.

Seems this issue can be closed.

[mikaelvesavuori]

Sure thing. If you have further questions I am still here!