feat(typography): adopt system typography tokens - #2545
Conversation
bd13883 to
f9b9224
Compare
spike-rabbit
changed the title
| font-family: ( | ||
| 'SiemensSans Pro VF', | ||
| 'SiemensSans Pro', | ||
| helvetica, | ||
| arial, | ||
| sans-serif | ||
| ), | ||
| font-weight: 600, | ||
| font-size: 0.75rem, | ||
| line-height: 1, | ||
| letter-spacing: 0 |
There was a problem hiding this comment.
sorry, but that is a big NO for me. this will apply all these unnecessary attributes each and every time. i.e. font-family and letter-spacing remain unchanged. this causes the resulting CSS to be bigger than needed. Can't we somehow set the defaults somewhere and only include these attributes if they deviate from the default?
also, I don't like the name si-typography-map. that's cumbersome to type and also misleading when all the consumer usually wants is the mixin. why not just 'typography'`
There was a problem hiding this comment.
yes, fully agree. I just did not got to it yet. So far this is the file coming from design-tokens without any modifications.
There was a problem hiding this comment.
another point is to make the font-sizes into css vars for the density topic. We're still exploring, so it's unclear at this point. I anyway implemented this in the PoC in #2471
direct link for customization: https://d33c9dcnqinn2a.cloudfront.net/pr-2471/pages/element-examples/#/overview/si-theme/spacer-controls
There was a problem hiding this comment.
I put a more smarter mixin in the typography file. That only includes family and letter spacing if diverging from body.
I kept the filename to have in sync with the sdl repo. Please have a look and let me know what you think
There was a problem hiding this comment.
Regarding the density thing, this obviously does not work with the current sdl output. If needed I think we should then introduce it there.
f93b287 to
d1f88c5
Compare
Copy the typography map in element-theme and apply its tokens across theme and form styles. Replace legacy input font variables with a single configurable input token while retaining legacy scales that have no token equivalent.
d1f88c5 to
b9bd70a
Compare
Use utility classes for host visibility, positioning, overflow, and stacking so the directives do not inject inline styles that violate strict CSP policies.
3 participants
Copy the typography map in element-theme and apply its tokens across theme and form styles.
Replace legacy input font variables with a single configurable input token while retaining
legacy scales that have no token equivalent.
Documentation.
Examples.
Dashboards Demo.
Playwright report.
Coverage Reports: