Skip to content

Theme: Support complementary color generation utilities #77346

@aduth

Description

@aduth

What problem does this address?

@wordpress/theme currently provides utilities for a single color ramp from a given seed value.

An existing use-case already exists in real-time collaboration, where collaborators are assigned a color used as a border in their avatar presence. These colors are currently hardcoded, and do not change or align to a given theme context. The pull request #74875 explored trying to integrate this behavior with theming, though the specific technical direction had some trade-offs.

What is your proposed solution?

The @wordpress/theme package should provide utilities for generating a set of complementary colors that follows from the theme and/or a specified seed value.

My recommendation would be a pair of:

  • Utility function that accepts a seed value provided by the consumer and generates a set of complementary colors
  • A higher-level React hook which uses the underlying utility function, but which prepopulates the seed value using the current theme context primary color

Example API signatures:

export function generateComplementaryColors(
  count: number,
  seed: ColorTypes,
): string;

export function useComplementaryColors( count: number ): string;

This should ideally use existing tools within @wordpress/theme and its color dependencies (colorjs.io).

Considerations:

  • Return type: Current known use-cases in real-time collaboration only have need for a set of color values that are used for avatar borders. Depending on how this is generalized as part of UI: Add Avatar component #76836, there might be situations where we'd want to know a good color for text that would be shown on top of each color (e.g. pairs of background/foreground colors, see Chakra UI example).

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions