Theme URL error/won't load

[markjharvey]

Description

I previously created a theme in Leonardo and saved the URL.
When I go back to the URL later to update and adjust it, it won't load.

Steps to reproduce

1. Create Key colors in OKLAB color space with Smoothing on
2. Go to my theme URL
3. Observe the website won't load
4. Open the console

Expected behavior

My theme to load

Screenshots

Environment

• Browser(s) and OS(s): Version 100.0.4896.127 (Official Build) (arm64) MacOS 12.4 MacBook Pro M1

[mminglis]

Same issue here #159

You can get around it by changing Theme Setting lightness to anything but 0

[NateBaldwinDesign]

@markjharvey @PossibleWorlds so sorry about delays in this issue! I will try to resolve this as soon as I can.

[guillaumecoquoz]

Kind of the same issue here.

I've created a Theme with OKLCH color space and smoothing ON.
When I try to load my Theme back I got an infinite spinner.

I confirm that @PossibleWorlds fix works. Change the Lightness theme to 100 at the end of the URL and it will load again.
lightness%22%3A0 → lightness%22%3A100

See my Theme URL and browser console screenshot bellow for details.

https://leonardocolor.io/theme.html?name=Freyja+-+Essential&config=%7B%22baseScale%22%3A%22Shades%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Shades%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%2250%22%2C%2254%22%2C%2262%22%2C%2270%22%2C%2278%22%2C%2286%22%2C%2294%22%2C%22102%22%5D%2C%22smooth%22%3Atrue%7D%2C%7B%22name%22%3A%22Red+%28Primary%29%22%2C%22colorKeys%22%3A%5B%22%23480104%22%2C%22%23e80020%22%2C%22%23ff787d%22%2C%22%23fff8f8%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%2250%22%2C%2254%22%2C%2262%22%2C%2270%22%2C%2278%22%2C%2286%22%2C%2294%22%2C%22102%22%5D%2C%22smooth%22%3Atrue%7D%2C%7B%22name%22%3A%22Orange%22%2C%22colorKeys%22%3A%5B%22%233c1400%22%2C%22%23b35008%22%2C%22%23ff8030%22%2C%22%23fff3f0%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%2250%22%2C%2254%22%2C%2262%22%2C%2270%22%2C%2278%22%2C%2286%22%2C%2294%22%2C%22102%22%5D%2C%22smooth%22%3Atrue%7D%2C%7B%22name%22%3A%22Yellow%22%2C%22colorKeys%22%3A%5B%22%232c1d01%22%2C%22%238c5908%22%2C%22%23d2a010%22%2C%22%23fffff8%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%2250%22%2C%2254%22%2C%2262%22%2C%2270%22%2C%2278%22%2C%2286%22%2C%2294%22%2C%22102%22%5D%2C%22smooth%22%3Atrue%7D%2C%7B%22name%22%3A%22Lime+%28Secondary%29%22%2C%22colorKeys%22%3A%5B%22%23162400%22%2C%22%2350780c%22%2C%22%2380b318%22%2C%22%23f8ffec%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%2250%22%2C%2254%22%2C%2262%22%2C%2270%22%2C%2278%22%2C%2286%22%2C%2294%22%2C%22102%22%5D%2C%22smooth%22%3Atrue%7D%2C%7B%22name%22%3A%22Green%22%2C%22colorKeys%22%3A%5B%22%23002610%22%2C%22%23047e48%22%2C%22%2308c080%22%2C%22%23dcfff0%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%2250%22%2C%2254%22%2C%2262%22%2C%2270%22%2C%2278%22%2C%2286%22%2C%2294%22%2C%22102%22%5D%2C%22smooth%22%3Atrue%7D%2C%7B%22name%22%3A%22Teal%22%2C%22colorKeys%22%3A%5B%22%23012426%22%2C%22%23047980%22%2C%22%2308b8c0%22%2C%22%23e0f8ff%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%2250%22%2C%2254%22%2C%2262%22%2C%2270%22%2C%2278%22%2C%2286%22%2C%2294%22%2C%22102%22%5D%2C%22smooth%22%3Atrue%7D%2C%7B%22name%22%3A%22Blue%22%2C%22colorKeys%22%3A%5B%22%23011e47%22%2C%22%230b69d8%22%2C%22%2380c0fe%22%2C%22%23f0f8ff%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%2250%22%2C%2254%22%2C%2262%22%2C%2270%22%2C%2278%22%2C%2286%22%2C%2294%22%2C%22102%22%5D%2C%22smooth%22%3Atrue%7D%2C%7B%22name%22%3A%22Purple%22%2C%22colorKeys%22%3A%5B%22%23280064%22%2C%22%23783cdc%22%2C%22%23a890fe%22%2C%22%23f7f5ff%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%2250%22%2C%2254%22%2C%2262%22%2C%2270%22%2C%2278%22%2C%2286%22%2C%2294%22%2C%22102%22%5D%2C%22smooth%22%3Atrue%7D%2C%7B%22name%22%3A%22Pink%22%2C%22colorKeys%22%3A%5B%22%23500028%22%2C%22%23d21878%22%2C%22%23f878aa%22%2C%22%23fff3f8%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%2250%22%2C%2254%22%2C%2262%22%2C%2270%22%2C%2278%22%2C%2286%22%2C%2294%22%2C%22102%22%5D%2C%22smooth%22%3Atrue%7D%5D%2C%22lightness%22%3A0%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag3%22%7D

[NateBaldwinDesign]

@markjharvey Hey I'm not sure exactly what's causing this, but I noticed that your gray color scale uses OKLAB and smoothing. When you remove smoothing from the monochromatic color, the URL loads just fine: URL with no smoothing on gray.

[NateBaldwinDesign]

I believe this has to do with the first color entered into the parameters. I've tested a few other use cases, and removing smoothing from the first declared color in the URL (when using OKLAB or OKLCH) seems to fix the issue. It is not related to monochromatic color scales.

Example that will not load, due to first scale using OKLCH and smoothing
Same colors with smoothing turned off for the first declared color scale

[markjharvey]

@markjharvey Hey I'm not sure exactly what's causing this, but I noticed that your gray color scale uses OKLAB and smoothing. When you remove smoothing from the monochromatic color, the URL loads just fine

I also noticed this after some troubleshooting. Is this expected behavior that URLs don't work if certain color settings are applied?

[NateBaldwinDesign]

@markjharvey no that shouldn't be happening. PR #205 should resolve this issue.