adobe / adobe/leonardo

Theme url with background lightness of 0 causes js error

Open
#159 0 comments 0 reactions 0 assignees View on GitHub
bug UI
Dominant language
JavaScript
Stars
2.1k
Forks
130
PR merge metrics
No merged PRs in 30d

Description

## Description

If lightness value is set to 0, the theme URL causes the following js error:

```
Uncaught Error: unknown hex color: undefined
at hex2rgb$1 (chroma.js:804:1)
at new Color (chroma.js:183:1)
at chroma$k (chroma.js:204:1)
at Theme._findContrastColors (theme.js:218:1)
at Theme.set lightness [as lightness] (theme.js:67:1)
at paramSetup (params.js:99:5)
at Object.parcelRequire.m3VC.@spectrum-css/vars/dist/spectrum-global.css (theme.js:219:1)
at newRequire (index.js:1:404)
at index.js:1:637
at index.js:1:1413
chroma.js:804 Uncaught (in promise) Error: unknown hex color: undefined
at hex2rgb$1 (chroma.js:804:1)
at new Color (chroma.js:183:1)
at chroma$k (chroma.js:204:1)
at Theme._findContrastColors (theme.js:218:1)
at Theme.set output [as output] (theme.js:170:1)
at createOutputParameters.js:37:5
colorWheel.js:246 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getContext')
at createColorWheel (colorWheel.js:246:19)
at colorWheel.js:352:5
```

## Steps to reproduce

1. Go to https://leonardocolor.io/theme.html
2. Open "Theme Settings" dialog and change lightness slider to 0%
3. Open "Share" dialog and copy theme url
4. Paste theme url in a new tab

## Environment
All browsers on Macos 12.3.1

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue from theme.html by setting lightness to 0%, sharing the theme URL, and opening it in a new tab. Read the lightness and output handling in theme.js, then trace parameter setup in params.js and color-wheel initialization in colorWheel.js; done means the shared URL loads without the reported JavaScript errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.