Skip to content

Handle "none" channels (e.g. hue of white in OKLCh)#240

Open
DmitrySharabin wants to merge 1 commit into
mainfrom
none-channel-support
Open

Handle "none" channels (e.g. hue of white in OKLCh)#240
DmitrySharabin wants to merge 1 commit into
mainfrom
none-channel-support

Conversation

@DmitrySharabin

@DmitrySharabin DmitrySharabin commented Jun 10, 2026

Copy link
Copy Markdown
Member

Summary

  • color-slider: guard colorAt against null values, hide thumb via :state(no-value), replace "none" coords in gradient stops with 0
  • channel-slider: pass null through to spinner as empty string
  • hue-wheel: hide marker when hueValue is null (covers both missing color and "none" hue), announce "none" in ARIA valuetext

Fixes <color-picker color="white"> crashing — Color.js returns null for "none" channel values (e.g. hue of white in OKLCh), which previously caused toPrecision calls on null.

Test plan

  • <color-picker color="white"> renders without error, hue slider has no thumb
  • <color-picker color="black"> same behavior
  • <color-picker color="oklch(none none none)"> all three sliders have no thumb
  • <hue-wheel color="white"> shows no marker; clicking the wheel seeds one
  • Existing demos on color-picker, hue-wheel, channel-slider pages are unaffected

🤖 Generated with Claude Code

Color.js returns null for "none" channel values. Previously this crashed
color-picker when initialized with such colors (e.g. `color="white"`).

- color-slider: guard `colorAt` against null, hide thumb via `:state(no-value)`,
  replace none coords in gradient stops with 0
- channel-slider: pass null through to spinner as empty string
- hue-wheel: hide marker when `hueValue` is null, announce "none" in ARIA

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@netlify

netlify Bot commented Jun 10, 2026

Copy link
Copy Markdown

Deploy Preview for color-elements ready!

Name Link
🔨 Latest commit 52af15c
🔍 Latest deploy log https://app.netlify.com/projects/color-elements/deploys/6a2981ed2ff3ce0008826403
😎 Deploy Preview https://deploy-preview-240--color-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant