Feat(variables-scss): Introduce export to javascript #DS-1437

[curdaj]

• Add global index files
• Add formatting of js output
• Add functionality for exludedGroups (for other file)

@crishpeen points:

• @themes - please add a comment noting which theme is default. It can be basically anywhere in the file
• @global - please add empty line to the end of the file
• everywhere if the value is 0px, please remove the units
• in scss and js add comma after line-height in typography
• in js prettier expects spaces instead of tabs
• in js some objects can be simplified eg. focusRing: focusRing, -> focusRing,

Thing out of the scope will be solve in DS-1486

• gradients and shadows color hexes can be shortened (in globals) - can be solved in the last issue (if you don't solve it here, add it to other issue, please)
• can forwards be sorted in global/index.scss
• in js eslint is failing on imports, probably not a problem of exporter, but I don't know what it is
• I don't see all colors in theme-light-on-brand, i know not all colors are set, but even the set ones are not there

Description

Additional context

Issue reference

[netlify]

✅ Deploy Preview for spirit-design-system-storybook canceled.

Name	Link
🔨 Latest commit	960986e
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-storybook/deploys/66f565c872d44200089970cb

[netlify]

✅ Deploy Preview for spirit-design-system ready!

Name	Link
🔨 Latest commit	960986e
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system/deploys/66f565c7f41d1c00094ef817
😎 Deploy Preview	https://deploy-preview-1656--spirit-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 96 (no change from production) Accessibility: 93 (no change from production) Best Practices: 100 (no change from production) SEO: 82 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[coveralls]

coverage: 78.732%. remained the same
when pulling 960986e on feat/ds-1437-export-into-js
into 7903f3c on main.

[crishpeen]

Please copy locally the exported files into the design-tokens package to see how it deals with the linters.

My points:

• @themes - please add a comment noting which theme is default. It can be basically anywhere in the file
• @global - please add empty line to the end of the file
• everywhere if the value is 0px, please remove the units
• gradients and shadows color hexes can be shortened (in globals) - can be solved in the last issue (if you don't solve it here, add it to other issue, please)
• in scss add comma after line-height in typography
• can forwards be sorted in global/index.scss
• in js eslint is failing on imports, probably not a problem of exporter, but I don't know what it is
• in js prettier expects spaces instead of tabs
• in js some objects can be simplified eg. focusRing: focusRing, -> focusRing,
• I don't see all colors in theme-light-on-brand, i know not all colors are set, but even the set ones are not there

[curdaj]

Please copy locally the exported files into the design-tokens package to see how it deals with the linters.

My points:

• @themes - please add a comment noting which theme is default. It can be basically anywhere in the file
• @global - please add empty line to the end of the file
• everywhere if the value is 0px, please remove the units
• gradients and shadows color hexes can be shortened (in globals) - can be solved in the last issue (if you don't solve it here, add it to other issue, please)
• in scss add comma after line-height in typography
• can forwards be sorted in global/index.scss
• in js eslint is failing on imports, probably not a problem of exporter, but I don't know what it is
• in js prettier expects spaces instead of tabs
• in js some objects can be simplified eg. focusRing: focusRing, -> focusRing,
• I don't see all colors in theme-light-on-brand, i know not all colors are set, but even the set ones are not there

Thanks. I solved some things, some were outside the scope of this issue and I created a follow-up issue. See description above.

[literat]

One little closing remark: I would prefer normalizing the themes directory content to the same casing, like darkmode or dark-mode, Dark theme to dark-theme or darktheme and same for the Lightmode, please.

Otherwise it is looking good. Great Job. Thanks 👍

[curdaj]

One little closing remark: I would prefer normalizing the themes directory content to the same casing, like darkmode or dark-mode, Dark theme to dark-theme or darktheme and same for the Lightmode, please.

Otherwise it is looking good. Great Job. Thanks 👍

Sorry, but I don't understand what you mean. Themes are loaded dynamically, including the name. So it depends on how it is named in the supernova.

[literat]

Sorry, but I don't understand what you mean. Themes are loaded dynamically, including the name. So it depends on how it is named in the supernova.

Ok, I see. So we need to standardize the naming of the themes or normalize them in JavaScript. Empty space can cause some troubles and I would like the directory structure to be normalized.

I will create an issue/long topic for this.