mapbox / mapbox/mapbox-gl-js

Add color modifying expressions

Open
#5,676 11 comments 4 reactions 0 assignees View on GitHub
feature :green_apple:
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.