Credential Manifest Styling Brainstorm

Requirements:
- Different modes
- Accecibility (not the same as dark mode, more important)
- Dark mode
- a11y goes along side dark / light modes

{
  "thumbnail": {
    "uri": "https://dol.wa.com/logo.png",
    "alt": "Washington State Seal"
  },
  "hero": {
    "uri": "https://dol.wa.com/people-working.png",
    "alt": "People working on serious things"
  },
  "background": {
    "color": "#ff0000"
  },
  "text": {
    "color": "#d4d400"
  },
  "schemes": {
    "dark": {
      "thumbnail": {
        "uri": "https://dol.wa.com/logo-dark.png",
        "alt": "Washington State Seal"
      },
      "hero": {
        "uri": "https://dol.wa.com/people-working.png",
        "alt": "People working on serious things"
      },
      "background": {
        "color": "#ff0000"
      },
      "text": {
        "color": "#d4d400"
      },
    },
    "red-green-color-blind": {
      // Hero and thumbnail are defaulted to the "base" schema values
      "background": {
        "color": "#ff0000"
      },
      "text": {
        "color": "#d4d400"
      },
    },
    "dark-red-green-color-blind": {
      // ...
    }
  }
}

Nested schemes

{
  "thumbnail": {
    "uri": "https://dol.wa.com/logo.png",
    "alt": "Washington State Seal"
  },
  "hero": {
    "uri": "https://dol.wa.com/people-working.png",
    "alt": "People working on serious things"
  },
  "background": {
    "color": "#ff0000"
  },
  "text": {
    "color": "#d4d400"
  },
  "schemes": {
    "dark": {
      "thumbnail": {
        "uri": "https://dol.wa.com/logo-dark.png",
        "alt": "Washington State Seal"
      },
      "hero": {
        "uri": "https://dol.wa.com/people-working.png",
        "alt": "People working on serious things"
      },
      "background": {
        "color": "#ff0000"
      },
      "text": {
        "color": "#d4d400"
      },
      "schemes": {
        "red-green-color-blind": {
        // Hero and thumbnail are defaulted to the "base" schema values
        "background": {
          "color": "#ff0000"
        },
        "text": {
          "color": "#d4d400"
         },
       }
      }
    },
    "red-green-color-blind": {
      // Hero and thumbnail are defaulted to the "base" schema values
      "background": {
        "color": "#ff0000"
      },
      "text": {
        "color": "#d4d400"
      },
      "schemes": {
        "dark": {
          // ...
        }
      }
    },
  }
}

Make top-level ligth and dark properties that are optional but at least one is required. Then each has a nested "schemes" property that can override the default values. The "schemes" can allow different a11y modes, or any other modes people ask for

{
  "light": {
      "thumbnail": {
        "uri": "https://dol.wa.com/logo.png",
        "alt": "Washington State Seal"
      },
      "hero": {
        "uri": "https://dol.wa.com/people-working.png",
        "alt": "People working on serious things"
      },
      "background": {
        "color": "#ff0000"
      },
      "text": {
        "color": "#d4d400"
      },
      "schemes": {
        "red-green-color-blind": {}
      }
  }
  "dark": {
      "thumbnail": {
        "uri": "https://dol.wa.com/logo-dark.png",
        "alt": "Washington State Seal"
      },
      "hero": {
        "uri": "https://dol.wa.com/people-working.png",
        "alt": "People working on serious things"
      },
      "background": {
        "color": "#ff0000"
      },
      "text": {
        "color": "#d4d400"
      },
      "schemes": {
        "red-green-color-blind": {}
      }
  },
}

Nested "styles" (referred to as "schemes" above)

{
  "styles": [
    {
      "style_label": "red-green-color-blind",
      "styles": {
      "thumbnail": {
        "uri": "https://dol.wa.com/logo-dark.png",
        "alt": "Washington State Seal"
      },
      "hero": {
        "uri": "https://dol.wa.com/people-working.png",
        "alt": "People working on serious things"
      },
      "background": {
        "color": "#ff0000"
      },
      "text": {
        "color": "#d4d400"
      },
      }
    }
  ]
}

// OR

{
  "style_refinement // style_mode // style_augments // style_overrides // style_modifications // etc.": [
    {
      "style_selector": "red-green-color-blind",
      "thumbnail": {
        "uri": "https://dol.wa.com/logo-dark.png",
        "alt": "Washington State Seal"
      },
      "hero": {
        "uri": "https://dol.wa.com/people-working.png",
        "alt": "People working on serious things"
      },
      "background": {
        "color": "#ff0000"
      },
      "text": {
        "color": "#d4d400"
      },
    }
  ]
}