Make it possible to generate CSS/SCSS variables out of tint and shades

[aranoe]

Problem

If you want to use the generated colors as variables (CSS/SCSS) in your code base, you have to copy every single value one by one and paste it in correct place.

Solution

Make it possible to create CSS/SCSS variables from tint and shades.
Might be related to this: #30
Would especially be useful in combination with this feature: #32

How could it work?

Define the color, name for your variable and the amount of tint and shades to be generated. Hit "generate variables" button.

Example

Color: #00a870
Name: accent-color
Amount of tint and shades: 9

Result CSS-Variables

--accent-color-100: #cceee2;
--accent-color-200: #99dcc6;
--accent-color-300: #66cba9;
--accent-color-400: #33b98d;
--accent-color-500: #00a870; // main color
--accent-color-600: #00865a;
--accent-color-700: #006543;
--accent-color-800: #00432d;
--accent-color-900: #002216;

Result SCSS-Variables

$accent-color-100: #cceee2;
$accent-color-200: #99dcc6;
$accent-color-300: #66cba9;
$accent-color-400: #33b98d;
$accent-color-500: #00a870; // main color
$accent-color-600: #00865a;
$accent-color-700: #006543;
$accent-color-800: #00432d;
$accent-color-900: #002216;

Happy to discuss how the prefix numbers (in this case: 100-900) should determined and how the range of colors should be calculated.

[edelstone]

Hey @aranoe, thanks for the detailed write-up.

This seems like a more-specific version of #30, and based on the thumb-ups from that issue, it looks like there's a demand for some solution. It might be smarter to add a simple "export palette" function, one that just gives you a list of all the hex colors that appear on the screen after submitting the form, without the fine-tuned controls for variable naming and the amount of tints/shades – at least initially. That proposition is essentially an entirely new tool/form within the application, which is OK, but also adds a lot of complexity.

Take a look at the simple export function at the bottom of https://materialpalettes.com and let me know if you think that solves your problem to any reasonable degree.

[aranoe]

I do agree with you on the complexity part, it's very specific to a certain problem (CSS/SCSS). To cover the general use case adding this export feature does make more sense.

Take a look at the simple export function at the bottom of https://materialpalettes.com and let me know if you think that solves your problem to any reasonable degree.

That would defintely improve the current situation with probably not too much effort involved.

On a side note:
I think the click behaviour on the exported JSON is kinda odd. A click selects the whole text. Also it appears that one could edit the text.
I would display the exported result as a plain readonly text. But that's something a designer should decide.

[edelstone]

Hi @aranoe, so you're saying the export dialog appears editable (it shouldn't appear that way), and that you'd prefer to copy/paste portions of the JSON text and not all of it at once?

I don't use JSON in my daily life so I never considered those options. All that development was done by another contributor, and it seemed OK to me when I approved.

If you'd like, please make an issue on that project, or - if you're able and willing - even a PR with the changes you'd suggest.

As far as this issue goes, I may close this issue in favor of #30 and continue to build off that request. Thoughts welcome.

[aranoe]

Yes, that's what I mean. It's fine how it is there, I just wanted to emphasize, that if you add the feature on this page you could make it even better UX-wise.
I agree that this issue can be closed for now.