I can be guided to only pick colours which follow the brand guidelines

[djay]

Description

Currently there are several issues with the independent theme control panel. The following need to be implemented:

• Dark and supplemental colour pickers should only be able to select 'dark' colours
• Light colour picker should only give a choice of light colours.
• All the colours can only be picked from two columns only. (brand guideline pdf).
  • maybe validation failure preventing save?
  • or have to pick the columns first? but then it's confusing you can't use all 8 colours...
  • or pick dark and supplemental as the two primary colours picking the two columns, and then that restricts what you can pick for accent and light?
• There needs to some indication on where that colour is used in the site.
  • https://digitalnsw.github.io/nsw-design-system/components/card/theme.html and https://digitalnsw.github.io/nsw-design-system/templates/theming/full-page.html
• There should be links to the theme demo and design documentation to help show what the changing colours will do to the site
• There should be a link to the theme rules - https://digitalnsw.github.io/nsw-design-system/docs/content/design/theming.html
• There should be a consent at the top that asks them to acknowledge that they have received independent or co-brand exemption before any of these options are enabled.
• The control panel name is too long so overlaps on control panel page on small screens. "NSW DDS" is probably fine.

[JeffersonBledsoe]

@djay What about "NSW Settings" or just "NSW" for the control panel rename?

[JeffersonBledsoe]

@djay How much should we improve the experience by? Adding in backend validation through directives and invariants and some filtering of the colours pickers would solve the first three the quickest, however it wouldn't be ideal as the person changing the settings would have to press save before realising that they can't use the selected colours.
The settings are currently backend-driven as there isn't any React code for the control panel except for the adjusted colour picker. We would likely have to either make the entire control panel React, or figure out a way for the colour picker to be colour-agnostic in some places, but have it be 'colour filtered' in others.
The latter might be possible now that I'm thinking about this some more. The widget could have options that the backend can set through the frontendOptions directive that is used throughout Volto.

[djay]

@JeffersonBledsoe NSW or NSW settings is fine.
Validation is better than nothing and is an ok first step with the right description.
But can't we at least have two different vocabs for light and dark? That doesn't require any interaction between fields.

[JeffersonBledsoe]

@djay The interaction between fields is needed for the All the colours can only be picked from two columns only option. Otherwise yes, we can easily separate the colours out. We mark a field needing the colour picker by doing the following:

directives.widget(
        "nsw_brand_light",
        frontendOptions={
            "widget": "color_picker",
            "widgetProps": {"colors": COLOUR_PALETTE},
        },
    )

So we can easily either send less colours in the COLOUR_PALETTE, or we can send all the colours and have a mode=light option to specify whether to only show light or dark colours