[SDK] Enable management of shades in both AA and AAA

[aaronreed708]

Problem/Concern

This issue is to investigate, design and code the capability to tell the SDK to update a shade/color and whether that shade or color is a AA or AAA value (e.g. a shade)

• For both querying (displaying) and updating
• Is AAA already supported? Ask @lwnoble
• How will errors be communicated? Will the error have suggestions or details? What might they be?

Proposed Solution

[aaronreed708]

@lwnoble to add documentation here to tell us what changes in a switch from AA to AAA so that we can identify in code where Keith added this support.

[aaronreed708]

Talked with @lwnoble today

In V1, a design system is either AA or AAA
In V2, a design system will contain:

• AA light and dark mode
• AAA light and dark mode
• color themes are groupings of colors

If I add orange to palette, shades will need to be calculated for AA light and dark and AAA light and dark modes

If I select orange-400 as background in AA light, that would cause the corresponding orange-400 to be selected for AAA light and then normal calculations would ensue to determine AA and AAA dark

If I select orange-600 as button color in AA light, calculations would need to ensue to select the appropriate color in AA dark and AAA light and dark to ensure text foreground appropriate contrast with the button color

• orange-600 in AAA might not have the 3.1:1 contrast out of the box so may have to darken it in light mode and lighten it in dark mode.
• normal AA dark mode calculations would need to be made
• normal AAA dark mode calculations would need to be made

Need to follow up with @lwnoble, but I believe that it would be fine to leave AAA light and dark mode as readonly, like AA dark mode. So that if the user selects the AAA tab, they will be presented with the color values, but not the ability to change them.

[aaronreed708]

Seems to me that the next steps would be to:

• understand and document how AAA works in V1 w.r.t. calculations
• build a list and document it so that we know what all is different in AA and AAA as it applies to Theme Builder
  • off the top of her head Lise mentioned:
    • 4.5:1 and 7.5:1 contrast with small text
    • minimum target area
• find the appropriate organization of classes, hierarchies, etc as we support both AA and AAA in the same design system
  • do we consider AA and AAA to be variations on a design system?
  • consider that AA and AAA both have light and dark modes
  • there is one color palette
  • all four have their own shades for the colors in the color palette

[aaronreed708]

Another question for @lwnoble : when we DO support user being able to update AAA light and AA and AAA dark, what does that mean? What should the user experience be? If the user has picked orange-600 for AA light already, would the other 3 also get updated? Or are they all strictly standalone and the user would need to change all 3 to make a sweeping change?