Skip to content

Add .palette() mode to field.color() for brand-constrained pickers #113

@akladekouassi

Description

@akladekouassi

Summary

Extend field.color() (see issue 01) with a .palette(brandTokens) modifier that constrains the picker to a fixed color palette. Free hex remains available as an explicit opt-in via .allowCustom(true).

Why this would help

  • Design-system-aware forms, theme editors, label / category selectors that must stay on-brand.
  • Today users either use field.select() with hard-coded options (and lose the visual swatches) or field.color() and police the value at submit time.
  • A palette-constrained picker is a one-line change once the base color field exists.

Proposed API

field.color('Label color')
  .palette(['#0f6fdc', '#22c55e', '#f59e0b', '#ef4444'])
  .allowCustom(false);

Suggested implementation areas

  • src/core/field-descriptors/color/ColorFieldBuilder.ts — depends on issue 01
  • a palette validator that rejects values outside the configured set when allowCustom(false)
  • src/renderers/web/ and src/renderers/native/ — swatch grid + optional free-form input toggle

Acceptance Criteria

  • Values outside the palette are rejected when allowCustom(false)
  • Toggling allowCustom(true) reopens the standard color picker as a secondary path
  • Tests for both modes and the validator rejection

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions