What problem does this address?

This is partly a follow up to this issue and colour token naming standardisation in general. Lots of discussions about this in the past . Its super important to get right as its a core requirement for creating this mix and match type experience we are looking for. e.g. sharing patterns across the community and having them fit right into your site.

A lot of the previous discussions have been around encouraging a standard way of naming colours in a non semantic way (e.g. base, contrast or theme-1, theme-2 etc) to enforce cross theme pattern compatibility. This still feels a little fragile unless you force map colours to elements like background and text. A more stable approach might be to rely on the theme's element styling, however you are then limited in terms of what colour combinations are possible (95% of patterns in directory will be white/black).

@richtabor and I started discussing the idea of colour sets for elements and how that would almost remove the need to try and enforce standard colour names in your palette. Rich has already done some really interesting exploration in this area.

What would this look like?

You can ignore the UI details in the video below but basically a theme creator could optionally provide multiple variations of colours for each element on their site. These variations are then available for groups/patterns to reference. Patterns shared in the pattern directory would only use default element styling where possible so that a themes element variations can be applied to them.

Much like other global style properties, including style variations, element variations should be able to be managed via UI and theme.json which could look something like the below.

{
  "elements": {
    "button": {
      "typography": {
        "fontWeight": "700",
        "fontSize": "1.2rem"
      },
      "color": {
        "variations": {
          "light": {
            "background": "#111111",
            "text": "#fafafa"
          },
          "dark": {
            "background": "#fafafa",
            "text": "#111111"
          },
          "brand": {
            "background": "transparent",
            "text": "#111111"
          }
        }
      },
      "border": {
        "radius": "0",
        "width": "2px",
        "style": "solid"
      }
    },
    "heading": {
      "color": {
        "variations": {
          "light": {
            "background": "#111111",
            "text": "#fafafa"
          },
          "dark": {
            "background": "#fafafa",
            "text": "#111111"
          },
          "brand": {
            "background": "transparent",
            "text": "#111111"
          }
        }
      }
    }
  }
}