Extract SCSS variables for use in JS

[ryankeairns]

With all the work going on around colors, there is a growing need to access EUI colors programmatically via JavaScript. Currently, all of our hex colors are defined as global SCSS variables, so it would be nice to extract those into a set of color palette arrays.

This would allow us to import and use them in things like chroma color functions, etc.

Related issue: #2611 - there is some overlapping functionality here perhaps, although this issue is tied into theming.

[lokeshrana9999]

@chandlerprall I would like to give it a try, please assign me.

[chandlerprall]

@lokeshrana9999 go ahead; this one has some extra considerations though, as our build output does not go through webpack (where these type of transformations usually happen). Instead, we have babel convert the source files into their target directories. We'd need another tool to similarly process SCSS into JS files with those variables.

[lokeshrana9999]

@ryankeairns I am working on an implementation of this issue. If you could point me to a specific use case, I might get a better idea of what is to be expected.

[chandlerprall]

@lokeshrana9999 a use case would be to import the $euiColorPrimary variable from either src/global_styling/variables/_colors.scss (light theme) or src/themes/eui/eui_colors_dark.scss (dark theme), for use in some additional computation.

[cchaos]

I'll also add to that that this would be in the EUI component creation src/components not in the consuming application/docs src-docs/src. We already have a solution for consuming applications where we build the full .json.

[lokeshrana9999]

Thanks @chandlerprall and @cchaos, I'll keepit in mind.

[lokeshrana9999]

Hii @chandlerprall I still have a query regarding this that needs to be resolved. If the application of scss variables is in docs ie src-docs then webpack along with scss-loader allows direct import of variables. Else if the application is during consuming the library this line
import * as euiVars from '@elastic/eui/dist/eui_theme_light.json';
allows import of json file. I guess I am still not sure as to the place of application of importing variables. Is there a third one that I am not seeing?

[chandlerprall]

Yes, the ask here is that files in src can import scss variables. The two cases you mention:

• src-docs, via webpack, can access via loader
• downstream / consuming applications via the theme json file

but we cannot use either of those methods to import a value from a component itself

[lokeshrana9999]

Yes, the ask here is that files in src can import scss variables. The two cases you mention:

• src-docs, via webpack, can access via loader
• downstream / consuming applications via the theme json file

but we cannot use either of those methods to import a value from a component itself

Understood, will get to it.

[chandlerprall]

Any progress, thoughts, or questions @lokeshrana9999 ? Just checking in - it's certainly a harder issue to tackle :)

[lokeshrana9999]

Any progress, thoughts, or questions @lokeshrana9999 ? Just checking in - it's certainly a harder issue to tackle :)

@chandlerprall I am trying to implement conditional import of variables based on the environment, while in build consumable colors can be used and during development imports with the help of webpack, I have implemented both conditions saperately but I am trying to figure out if NODE_ENV
can help with the conditional execution.

[thompsongl]

Since making the decision to move forward with a CSS-in-JS solution (#3912), any work related color variables, etc. will be part of a broader theming effort.

Closing this in favor of discussion the linked issue.