Add color modifying expressions
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
**mapbox-gl-js version**: 0.42.0
### Problem
Developers want to use GL expressions for common color operations. A common use case is to indicate feature selection on a hover or click event of a feature by changing the color saturation.
There are no color functions in Expressions that can calculate changes in colors without using a third-party library such as chroma.js or the built-in color-space interpolations in GL JS Style Spec today.
### Proposal
Add two new [color expressions](https://www.mapbox.com/mapbox-gl-js/style-spec#expressions-color):
1. **saturate**
* Changes the saturation of a color by manipulating the Lch chromaticity.
* ["saturate", color, saturation scale] : color
2. **desaturate**
* Desaturates a color by manipulating the Lch chromaticity. Opposite of saturate.
* ["desaturate", color, saturation scale] : color
cc @anandthakker
Contributor guide
Research direction
Start by reading the existing GL color-expression documentation and implementation, then trace how expression names, signatures, and color values are handled. Done means adding saturate and desaturate expressions with the proposed color and saturation-scale arguments, using Lch chromaticity and opposite behavior for desaturation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100