Skip to content

Increasing and decreasing interpolation paths in cylindrical colour spaces for UI gradients #20007

@ickshonpe

Description

@ickshonpe

What problem does this solve or what need does it fill?

We only support the shortest and longest path interpolation methods. For completeness, I'd like us to also support increasing and decreasing paths, as CSS does.

Explanation of the CSS API here

What solution would you like?

Assuming the changes from #19992 are merged, the InterpolationColorSpace enum is:

pub enum InterpolationColorSpace {
    /// Interpolates in `OKLab` space.
    #[default]
    OkLab,
    /// Interpolates in OKLCH space, taking the shortest hue path.
    OkLch,
    /// Interpolates in OKLCH space, taking the longest hue path.
    OkLchLong,
    /// Interpolates in sRGB space.
    Srgb,
    /// Interpolates in linear sRGB space.
    LinearRgb,
    /// Interpolates in HSL space, taking the shortest hue path.
    Hsl,
    /// Interpolates in HSL space, taking the longest hue path.
    HslLong,
    /// Interpolates in HSV space, taking the shortest hue path.
    Hsv,
    /// Interpolates in HSV space, taking the longest hue path.
    HsvLong,
}

I kept the plain names OkLch, Hsl or Hsl for the shortest path variants, instead of adding a Short suffix, to signal that these are the default recommended choices.

We could either add extra variants with Increasing/Decreasing suffixes for each cylindrical colour space or we could add a separate enum:

pub enum HuePath {
    Shortest,
    Longest,
    Decreasing,
    Increasing,
}

I'm not too bothered, either API would be fine.

The implementation will need changes to the gradients.wgsl shader but it would just be some simple logic to choose the correct path and wouldn't require any technical knowledge of rendering or wgsl.

Additional context

The HSL and HSV interpolation PR is here: #19992

Metadata

Metadata

Assignees

No one assigned

    Labels

    A-ColorColor spaces and color mathA-RenderingDrawing game state to the screenA-UIGraphical user interfaces, styles, layouts, and widgetsC-FeatureA new feature, making something new possibleD-ModestA "normal" level of difficulty; suitable for simple features or challenging fixesD-ShadersThis code uses GPU shader languagesS-Ready-For-ImplementationThis issue is ready for an implementation PR. Go for it!

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions