feature: Color inputs understands human friendly colors, like "red"

[pa-lem]

Component

Frontend UI

Describe the Feature Request

Instead of defining hex colors, we could be able to add only "red", "blue" etc, and the frontend would convert it to the hex value and send it to he backend for validation

Describe the Use Case

When choosing a color, it's not always easy to define only hex color

Having human friendly colors (like "red", "blue", "cyan", etc) would improve the user experience

Additional Information

No response

[james-m-henderson]

What if instead of supplying color information at all, semantic hints are provided in the model rather than display information? Then a style sheet could be used to fill in the details.

For example, we have the schema here:

      - name: role
        kind: Dropdown
        choices:
          - name: backbone
            label: Backbone
            description: "Provide main data routes"
            color: "#6a5acd"
          - name: transit
            label: Transit
            description: "Connect to Internet service provider"
            color: "#9090de"
          - name: peering
            label: Peering
            description: "Connect with other networks via an IX"
            color: "#85db9b"

Instead of providing color at all here, there could be a stylesheet that would look something like this:

Dropdown.backbone {
            color: "#6a5acd" # dark purple
}
Dropdown.transit {
            color: "#9090de" # light green
}
Dropdown.peering {
            color: "#85db9b" # light purple
}

This would decouple the data model from the presentation hints. In addition it would allow users to use custom stylesheet overrides to improve accessibility for users with vision impairments.

You could also use the standard CSS color names or even CSS custom properties/variables.

I can see the value of having this stuff in the model as well, since everything needed to render the control is in one place, and with this design we end up with a separate stylesheet to worry about.

[petercrocker]

FYI @BRBCoffeeDebuff and @UXvsOpsMill as we consider how to handle the UI in regards to color-blindness as well.

[ogenstad]

I like the idea of removing color from the backend as it's not really related to anything there. We have talked about having a color picker in the frontend though. We'd have to consider how these CSS files would be managed.