[#2452] Add paragraph tokens, bump version #9
Conversation
jiromaykin
changed the title
jiromaykin
force-pushed
the
feature/2452-add-paragraph-tokens
branch
5 times, most recently
from
49a9be4 to
432b077
Compare
jiromaykin
force-pushed
the
feature/2452-add-paragraph-tokens
branch
from
6c75250 to
8bfb388
Compare
| "paragraph": { | ||
| "small": { | ||
| "font-size": { | ||
| "value": "14px" |
There was a problem hiding this comment.
As I noted in your related PR, I'd prefer variable names with the size indicator at the end: oip-utrecht-paragraph-font-size-small, oip-utrecht-paragraph-font-size-medium, and so on. Differing strings are easier to discern if the differing part is at the end.
There was a problem hiding this comment.
As noted in OIP PR nr.1215: NL Design System works differently.
It first defines the modifier from a component (in this case 'small') and then it sets the attributes for those modifiers (in this case 'line-height'), that then finally will receive their value from JSON.
I know it is confusing, but these are SCSS variables, which are not the same as HTML classnames.
There was a problem hiding this comment.
Oh yeah, and another season why you don't want to have dash-separated stuff that all start with the same 'name' but need different values, is because the style-dictionary package would merge and throw away everything that starts with font-size-blah-blah, so all that start with font-size-small/font-size-default/font-size-large.. .etc. would just be ignored and not be part of the build.
So that is why in the Readme it says the structure needs to be
<prefix>.<component>.<modifier>.<UIState>.<CSSProperty>
There was a problem hiding this comment.
That's a good explanation. Makes sense now.
Add tokens for paragraphs, and expand Body tokens + bump version
Issue: https://taiga.maykinmedia.nl/project/open-inwoner/task/2452
Version number starts from 0.0.5... because the Buttons PR already has version 0.0.4...
Ugly commits were rebased here but can still be seen on https://www.npmjs.com/package/@open-inwoner/design-tokens?activeTab=versions since NPM is not dependent on commits.