Skip to content

Improve color parser: support short hex #RGB/#RGBA and named colors #21

@ZhukMax

Description

@ZhukMax

Extend EFx color parsing to accept the short hex forms #RGB and #RGBA (nibble-doubling) in addition to existing #RRGGBB and #RRGGBBAA. Add support for a curated set of named colors (e.g., white, black, red, tomato). Provide precise diagnostics for invalid lengths, non-hex input, and unknown names.

  • Developer/designer friendly: short hex is common in style guides and hand-written templates.
  • Better compatibility with assets and snippets copied from design tools/docs.
  • Improves DX by reducing verbosity and offering readable named aliases.

Scope

  • Accepted formats

    • #RGB#RRGGBB via nibble doubling.
    • #RGBA#RRGGBBAA via nibble doubling.
    • #RRGGBB, #RRGGBBAA (already supported).
    • Named colors: a small, well-chosen set (e.g., black, white, gray, red, green, blue, yellow, cyan, magenta, orange, purple, pink, tomato, teal, indigo, slate, emerald, …).
  • Optional feature flag css-color-names to enable the full CSS list (~140 names).

  • Output stays the same (egui::Color32 / ecolor::Rgba conversion inside renderers).

Non-goals (here):

  • rgb()/rgba()/hsl() functional notation.
  • Color space conversions beyond sRGB.

Proposed API (sketch)

Parser surface

// efx-core
pub fn parse_color(value: &str) -> Result<ColorRgba, ParseError>; 
// extends existing logic (#RRGGBB[AA]) with #RGB/#RGBA + names

Template usage

efx!(ui, r#"
  <Label color="#abc">Short Hex</Label>
  <Label color="#abcd">Short Hex + Alpha</Label>
  <Label color="tomato">Named Color</Label>
"#);

Diagnostics

  • Invalid hex length → “Expected #RGB/#RGBA/#RRGGBB/#RRGGBBAA; got …”
  • Non-hex characters → show first offending index.
  • Unknown name → list closest matches (e.g., “Did you mean tomato?”).

Tasks

  • Implement short-hex handling: detect #RGB/#RGBA, expand nibbles, parse to RGBA.

  • Introduce a &'static name→RGBA map:

    • Minimal built-in set (hand-curated).
    • Optional css-color-names feature for the full CSS table.
  • Integrate with existing attribute adapters (color, bg, etc.).

  • Diagnostics:

    • Clear errors for bad length/non-hex.
    • Fuzzy suggestions for unknown color names.
  • Tests:

    • Unit: nibble-doubling, alpha defaults, name lookups.
    • trybuild UI tests: invalid strings, unknown names (assert message text).
  • Docs:

    • Update docs/tags.md with a “Color values” section (formats, examples).
    • Mention the css-color-names feature and list of guaranteed built-ins.
  • Ensure examples build under wasm32-unknown-unknown (no runtime launch).

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions