Example style variation

[mikachan]

Ref: #335

This is a small PR to provide an example of an alternative colour scheme using the theme.json format.

After looking through the colour names, I don't think any of these need to be changed. I think the colours with descriptive names (Grey Extra Extra Light, Orange, Blue Mid Light) can stay as they are, as these can likely be used across many different colour variations.

The ones that could potentially change are:

• Primary
• Primary State
• Secondary
• Accent

Maybe some other semantic colours could be added if there needs to be more flexibility, but I think it's fine to start with these.

This PR shows an example of switching the Primary and Secondary colours around, and I added a different shade of blue for the Secondary State.

Steps to test:
1.

Considerations:

• Accessibility
  • Regions (semantic HTML tags, e.g. <section>; landmarks; etc.)
  • Screen reader compatibility, labels (aria-label, aria-labelledby, etc.)
  • Keyboard navigability
• Localisation
• RTL

[mikachan]

I've used the 6.4 version of the JSON schema, as this makes it easier to use theme.json settings that are supported up to a specific version of WordPress.

[matiasbenedetto]

I want to note that before WordPress 6.6, mixing different style variations containing different settings was not possible. This means that if, for example, a user activates a variation containing only font families and later activates a variation containing only colors, the font families will be removed.

As we added style variations for fonts here: #356 we should be mindful of that if the production sites are running Wordpress core versions older than 6.6.