-
Notifications
You must be signed in to change notification settings - Fork 62
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Group & file level properties #72
Comments
SHA: d8dc53d Reason: push, by @kevinmpowell Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
I'm definitely in favour of allowing both Note, that with
Example: {
"group 1": {
"type": "color",
"token A": {
// This token has the type color because it inherits it from group 1
"value": "#00ff00"
},
"token B": {
// This token has the type dimension, because its own type property
// takes precedence the inherited color type
"type": "dimension",
"value": "12rem"
},
"group 1.1": {
"token B": {
// This token also has type color because it inherits it from group 1
// since that is the nearest group with a type property
"value": "#ff0000"
}
},
"group 1.2": {
"type": "duration",
"token C": {
// This token has type duration because it inherits it from group 1.2
// (group 1.2's type takes precedence over its parent group's type)
"value": "150ms"
}
},
"token X": {
// This token is not within a group with a type, so it does not inherit a type.
// It also does not have its own type property. Therefore, tools must fall back
// to the JSON type of its value, which is "string".
// This token therefore has type "string" (don't be fooled by its value which
// *looks* like a color!)
"value": "#abcdef"
}
} |
The way to define the token is very free, and the handwriting experience is good. |
Setting rules on groups will mean this: Groups have an impact on tokens within them - or - reading the inverse tokens become dependent on the group they are in. Case A: Groups are only there for organizing tokens, then this shouldn't be allowed as it shouldn't matter in which group a token is in. Case B: Groups become contexts. Means, moving a token from one group to another will change its meaning. Let's make this an example: {
"colors": {
"type": "color",
"example-token": {
"value": "#AAA"
}
},
"dimensions": {
"type": "dimension",
"example-token": {
"value": "#AAA"
}
}
} So, what shall be the algorithm to resolve the value of a token? Possible scenarios for case B:
If groups act as context, then the spec shall deliever a resolving algorithm for how to reach at the value. I can compare it to the heading resolving algorithm for html. The benefit I see is in manually writing groups of tokens all of one type and only defining it once. More chill authoring tokens for sure. I consider this spec to describe the storage of tokens only and would avoid situations where reading rules become necessary. |
Could we name group types I disagree with @gossi here that the token file should just be a dumb interchange format. The format is targeted to humans first, not machine first. I can see a lot of developers and designers editing the file directly with minimal help from tools. Therefore it should be as human-readable as possible. And |
I'd suggest that properties specified on a group for tokens within that group to inherit should be specified in a different way than properties that apply to the group itself. Otherwise, there's ambiguity over which properties are inherited and which are not. (For example, is a group-level My proposal would be something like: {
"colorText": {
"description": "Our palette of colors for text only.",
"tokenProperties": {
"type": "color"
},
"primary": {
"value": "#000000",
"description": "Use as the default text color"
},
"secondary": {
"value": "#333333",
"description": "Use for text that is not as important."
}
}
} In this example, Addendum: Avoiding name collisionsWhat if a design system wants to use the same name for a token as for a group property? For example, imagine that the team wants to have a text color called "description" . An extension to accommodate this would be to allow group properties to be defined within a properties group. For example:{
"colorText": {
"properties": {
"description": "Our palette of colors for text only.",
},
"tokenProperties": {
"type": "color"
},
"description": {
"description": "Use for descriptive text, including definition lists and footnotes.",
"value": "#3f3f3f"
}
// other tokens...
}
} The token/group names |
As a followup to this, are values allowed at a group level? Example as follows: Let's say I want to define these css vars in a .token.json file:
Can I define a value for a group like so?
|
Adding a type property on group level might not be such a good idea after all. It would significantly increase the complexity. Comparing a diff would be easier because one wouldn't have to worry about context. So instead of trying to solve this problem it might be better to just remove it altogether. |
The implicit language for grouping is what is a little confusing to me as I wrote my prototype. From my perspective, groups are the default type for any object, nested or otherwise, until an explicit type is defined. Let's look at one chunk of the group types sample as it's proposed today. "text-size": {
"type": "dimension",
"scale": {
"0": {
"value": "1rem"
},
"1": {
"value": "1.25rem"
},
"2": {
"value": "1.563rem"
},
"3": {
"value": "1.953rem"
}
},
"title": {
"value": "{text-size.scale.3}"
},
"heading": {
"value": "{text-size.scale.2}"
},
"body-copy": {
"value": "{text-size.scale.0}"
}
}, This reads to me as "this token is not a group, it's a dimension". I'd like to propose something like... "text-size": {
"contains": "dimension",
"scale": {
"0": {
"value": "1rem"
},
"1": {
"value": "1.25rem"
},
"2": {
"value": "1.563rem"
},
"3": {
"value": "1.953rem"
}
},
"title": {
"value": "{text-size.scale.3}"
},
"heading": {
"value": "{text-size.scale.2}"
},
"body-copy": {
"value": "{text-size.scale.0}"
}
}, It may feel like this is a simple "change the language of Building a library of the groups of tokens that can be accessed later on for abstraction layers felt helpful in my prototype, plus labeling the group with Writing this proposal to avoid overloading the term "type" would seem to be quite helpful for implementors... correct me if I'm wrong too! My proposed modification helped me write more a more reasonable implementation, and craft formatting messages to give structured feedback that had felt reasonable for folks when working with this file during compilation. But yeah, even adding the ability to do Edit: Updated my language around the "group of tokens" paragraph to improve readability. |
A couple other fleeting thoughts I had after I posted the above:
|
Thanks everyone for your comments. There's some interesting points being made and we're planning to discuss them at an upcoming spec editors meeting. I think a few ideas & concerns have been raised in this thread, so I'll attempt to call out and summarise them here. Please comment if you feel this isn't accurate or I've missed out something.
|
Thanks for the summary @c1rrus
I vote "yes", this is okay. I think we can outline this in the spec when we define group properties and denote whether or not each property is inheritable. In my mind it's similar to whether or not javascript events bubble (though that's going from child -> parent).
Since one of the key principles of the format is that it be human readable and editable then I think we have to keep the ability for some group properties to be inheritable.
I prefer the simplicity of |
I've just opened PR #89 to update the spec to move group properties into a |
I agree with @kevinmpowell's points. I would put developer experience (reading and editing) over parsing complexity, I think having an inheritable |
I agree with @dbanksdesign 👍 |
Action: Spec to be updated indicating Group level |
The latest spec draft includes |
Several issues have raised the need for adding token properties at group and file levels. I'm creating this issue to consolidate discussions about this topic.
For example Types:
Or descriptions for documentation about an entire group:
The text was updated successfully, but these errors were encountered: