harmonium
harmonium copied to clipboard
As a user, I want the generation of design tokens to be cleaned up to resolve some issues with lintron.
I'm submitting a ...
- [ ] bug report
- [ ] feature request
- [ ] support request
What is the current behavior?
-
Hex codes are changing their case when they get generated. For example, I used
#D5D5D5
in harmonium.config.js and it generates#d5d5d5
in _color-palette.scss which it causes a million lintron comments (letters should be uppercase). -
I'm also getting a ton of lintron comments on the harmonium.config file similar to this
Inconsistently quoted property 'border' found
. Its happening for a lot of things, not justborder
. Blur, color, brand, ui, ect. -
Lots of comments about missing trailing commas in harmoniun.config.js.
-
Lots of comments in harmonium-tokens file saying
Strings must use singlequote
for transparent colors -
What is the expected behavior?
- [ ] hex codes should be generated using uppercase letters
- [ ] strings generated in harmonium-tokens file should use single quotes.
- [ ] do some file clean up in harmonium.config.js so that lintron doesn't get mad at the above statements (inconsistent properties and missing trailing commas).
- [ ] missing trailing commas in harmonium-tokens.js
For feature requests: why should the behavior change?
- to help eliminate lintron comments.
Other information (we love stack traces!)
Here's a pr that you can reference to see what comments its leaving (I already mentioned in the lintron channel about lintron leaving multiples of the same comment on the same line of code so please try to ignore that ☺️ )
@bryanjos I'm not sure if this is supposed to be a fallback or something? But in harmonium-tokens for react-native (I haven't checked web yet) the first value
listed under a transparent color is a hex code and not the rgba value. So when you go to define a transparent color you have to use:
export const white80 = harmoniumTokens.color['white-80'].original.value
instead of
export const white80 = harmoniumTokens.color['white-80'].value
Let me know if this is supposed to just be a fallback so I can let designers know if they ask why it doesn't work the same :)
In this screenshot of my harmonium-tokens file you can see the difference between darker-gray
and white-03