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:
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)
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:
Ideas
initially we were thinking about it like this:
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":
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:
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:
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)