community-group
community-group copied to clipboard
Aliasing with layered shadow support
I just noticed an issue with #246
The spec does not describe how aliasing should be supported along the introduction of the optional array-based value.
Let's take
{
"simpleShadow": {
"$type": "shadow",
"$value": {
"color": "#000000",
"offsetX": "1px",
"offsetY": "1px",
"blur": "2px",
"spread": "4px"
}
},
"layeredShadow": {
"$type": "shadow",
"$value": [
{
"color": "#000000",
"offsetX": "1px",
"offsetY": "1px",
"blur": "2px",
"spread": "4px"
},
{
"color": "#CCCCCC",
"offsetX": "2px",
"offsetY": "2px",
"blur": "6px",
"spread": "6px"
}
]
}
}
Following the current aliasing rules, I guess we allow:
{
"referenceToSimpleShadow": {
"$value": "{simpleShadow}"
},
"referenceToLayeredShadow": {
"$value": "{layeredShadow}"
}
}
But, do we intend to allow "partial aliasing" within the array value 👇 ?
"layeredShadow": {
"$type": "shadow",
"$value": [
"{simpleShadow}",
{
"color": "#CCCCCC",
"offsetX": "2px",
"offsetY": "2px",
"blur": "6px",
"spread": "6px"
}
]
}
I dunno to what extend this feature might be appealing for users, opinions here?
Yet, the current state of having the "shadow" type allowing both object and array based values makes the adoption of the feature almost impossible due to inconsistent spread/merge behaviours required to compute. I described a solution addressing this in #239 - here and here
I guess that also relates to #241 - where it feels we'd need some simple rules we apply accros types with similar requirements.
But, do we intend to allow "partial aliasing" within the array value 👇 ?
"layeredShadow": { "$type": "shadow", "$value": [ "{simpleShadow}", { "color": "#CCCCCC", "offsetX": "2px", "offsetY": "2px", "blur": "6px", "spread": "6px" } ] }
That’s a great question! Agree this does need to be clarified in the spec. Because this example is valid syntax as far as I know; {simpleShadow} resolves to a complete, correct token type thus this should work.
But we do need to be explicit about the boundaries of this, e.g.:
"$value": [
"{layeredShadow}",
{
// …
If aliasing an array, do the arrays flatten together?
Further, does the gradient type allow aliasing like this, since that also has array values?
This is worth clarifying; I’ll add it to the TODO items for gradients.
This is good feedback for the updated groups and aliasing specs, here: https://github.com/design-tokens/community-group/pull/298 — @nclsndr would love to know what you think about the suggestions in that PR. It doesn't explicitly mention pointing to arrays, but that should be possible with the $ref + JSON pointer syntax.