Wallet Rendering Entity Styles Discussion

[JaceHensley]

On todays call @dtmcg and I discussed how the Entity Style spec could be improved prior to CM's initial release. We took some notes in hackmd https://hackmd.io/JejxugEuQC-4KqgCzjp8Dg but I'll cover most of it directly in this issue.

---

Requirements:

• Support for different modes/themes
  • Dark mode
  • Accessibility, goes along side dark / light modes not "instead of"

Ideas

initially we were thinking about it like this:

{
  "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": {
      // ...
    }
  }
}

but then it got confusing how to have dark mode AND red green color blind mode. And this also enforces the notion of a dark mode being secondary while light mode is the default, and that's not always true. So we were thinking maybe 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": {
          // ...
        }
      }
    },
  }
}

But the issue there is you can have a dark => red-green-color-blind nest but also a red-green-color-blind => dark nest, which would lead to inconsistencies. And also doesn't solve the problem that dark mode was still treated as secondary. So we thought of it like this:

{
  "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": {}
      }
  },
}

This treats dark and light with the same significance as each other. With this at least light or dark must be defined or both. This also lets you set red-green-color-blind for dark and light independently. But now we have to define what these labels are for the nested schemes. So that led us to this:

{
  "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"
      },
      "style_refinement / style_modes / style_augments / etc.": [
        {
          "style_selector / style_label / key / name / etc.": "red-green-color-blind",
          "styles": {
             // same as the top-level but without the "style_refinement" attribute
          }
        },
        // OR
        {
          "style_selector / style_label / key / name / etc.": "red-green-color-blind",
          "thumbnail": {},
          "hero": {},
          // ...
        }
      ]
  }
}

This way this spec doesn't have to define different modes, the community gets to decide what to support (this could be a double edged sword)