Sass Library

[michaelurban]

See title

[mwaldheim]

that should be possible if the developers work with CSS variables set via Typescript to maintain the dynamic. So an implementation in Angular would be super possible. Unfortunately, I personally also lack the documentation on how to use the extension.

https://www.npmjs.com/package/@elemental-design/material-color-utilities

I hope for a fast processing of the topic, I have three projects where I would need it right now.

[jpohhhh]

Hey, I'm James O'Leary, I work on color at Google.

You're absolutely right re: needing HCT.

Frankly, I'm not very familiar with the web stack but it seems obvious in retrospect that CSS would need support as well. My mental model is that SASS is a CSS generator.

Also frankly, there's no one at Google working on this currently.

I checked in w/Material on process today, we'd be thrilled and very appreciative of your contribution. Basically, we'll handcopy it from your branch/ZIP file/whatever into Google's internal repository for 3rd party code, then mirror it here. We also discussed opening up to contributions in Q2, once we have a more complete story told & policies set.

If you'd like some help, ex. the color space code can be particularly challenging, I can help. I'm a bit discombulated because there's a lot going on, so I can't 100% commit to that — but do let me know if there's anything that looks particularly challenging for you, I'll try to shuffle things around and let you know when you can expect it.

[jpohhhh]

I checked a bunch of hex codes against my HCT color picker and I'm really impressed, I believe you ported all of it correctly. 🥳

The only ones that look odd are md-ref-palette-secondary, they wander away from blue towards purple as tone increases, which may be a problem on the original algo's end given how well the rest worked for you.

I'm open to anything from here, as far as delivering the SASS library in the repo itself.

Decision points:

1. You can keep your code private and we implement from scratch, it's not too hard. Or, if you're up for it, I'd love to kickstart a SASS lib by taking your code as a contribution. (I'm not sure how to do that via GitHub UI while we're formally set up to not take contributions, you may want to provide an independent repo, ZIP file, carrier pigeon, whatever works)
2. If you provide code, we can check in your version (approximately) immediately, then I can work on adding tests / validation.

[jpohhhh]

Ahh, I see, I bamboozled myself: your work guaranteed the right L* in Lab*, which matches HCT's T, and when I checked the hex codes to verify if they were proper, I only checked the L* coordinate.

Good news, hopefully: I have a SASS library that does HCT here: https://gist.github.com/jpohhhh/6ade636f207bf97742d101650798a088

Key functions are:

• hct(hue deg, chroma, tone)
• hcta(hue deg, chroma, tone, alpha).

Looks like its working based on testing a few conversions manually @ https://www.sassmeister.com/, but, I only started on this yesterday afternoon and am not familiar with SASS, so feedback on design / real world testing like you did with these palettes is appreciated.

[jpohhhh]

Also, I'll ask around re: shadow spec starting tomorrow, will let you know by Wednesday.

[jpohhhh]

In light of that closing this issue; and for posterity, we're working to add the SASS code for the new color space to this repo instead of just in the gist.

[Whip]

Hi James. Was a SASS library or function created for this repo? Any update on this?

Edit: The gist does work and generates the right colors. Thanks a lot. It should get integrated into the repo.

[palexdev]

Hello @jpohhhh,
In the past days, I played around with the SASS library you provided above. Unfortunately, it seems that the generated colors do not match perfectly with the ones generated by the Material Theme Builder, they tend to be darker towards 0L and lighter towards 100L.
Since my main programming language is Java, I also tried to port the already available library (which is pretty good in my testings) directly to SASS. The results were better, but I'm stuck on the last piece of the puzzle, converting ARGB colors to hex colors, because on SASS bitwise operators are not a thing. I even tried with SassyBitwise, but the conversion is imprecise, and alpha conversion fails because of how numbers are represented I think.
I think that if this last issue could be solved than provide a fully functional and accurate SASS library would be pretty easy by porting one of the already available ones.

[Whip]

Please don't forget about this. SASS library is very important