Additional tokens for ticketing
francesyun opened this issue · comments
On the ticketed experience modal, the font size decreases if the ticket name exceeds 23 characters. This smaller font size (font-size: 32px, line-height: 40px) isn't a token yet. It would be between our current font-size-xlarge (font-size: 48px) and font-size-large (font-size: 24px).
➡️ What are your thoughts on how we should approach the naming?
Suggestion: Change font-size-xlarge to font-size-xxlarge, and add 32px as font-size-xlarge.
Also, we would like to add letter-spacing: 1px to the design tokens, since we plan to use it in several places when we do ALL CAPS. There are no other expected changes to letter-spacing at this time.
➡️ Do you have thoughts about what to name this token?
Suggestion: letter-spacing-stretch
@francesyun @karuto I don't have a strong opinion here, if we are going forward with this font size it seems that it fills the "gap" and no other introductions will be needed.
Therefore, @francesyun, your first suggestion, pending @karuto's feedback, I can get behind. Where we bump xl to xxl and change xl to 32px....so we are editing font-size-xlarge to 32px and adding a new token for xxl at 48px. Sound good?
@francesyun @mannionaco One problem I can see with Frances' suggestion is that we need to replace every current usage of font-size-xlarge because the contract has changed. This is doable, but a bit tedious as many projects use font-size-xlarge now, not just rest profile.
I support the idea of adding letter spacing as a token, it is just a matter of time. I'm thinking whether we should bundle letter spacings inside the existing typography token or create a new one. I guess it depends on how explicit we want these "atom level" tokens to be. Right now, the typography token stores only 3 values: line-height, font-size and font-weight.
I don't have opinion on the naming of letter spacing, as long as it makes sense inside your broad design system! 🤗
Digging this issue up since @francesyun is doing another round of design review for the ticketing experience modal, which you can see over here: http://oc-registry-pp-sf.otenv.com/v2/ticketing-modal-web/1.0.6/~preview?tid=1001
In regards to the font size issue, @francesyun mentioned that "For the H1 on mobile, base font size should be 32px, line-height: 44px". This is different from the "smaller font size (font-size: 32px, line-height: 40px)" mentioned at top. Is the former font grouping a mobile specific one? If so, we can create a otkit-mobileweb-typography to address this.
@mannionaco @francesyun let's make a decision on the new font-size-xlarge (font-size: 32px, line-height: 40px) that you are proposing at top.
My number one question is - how permanent is this font grouping? How widespread will its usage be? My baseline is, I believe a token should store design decisions that are reusable.
I think if this new font grouping is only used in ticketing modal as a one-off, then let's not bother integrate it into a token because it'll disrupt more things than the value it's providing.
But if this is indeed a new font grouping that you'd like to permanently introduce into your design system, then let's do the right thing to make it a proper value even if that means we need to reassign a bunch of existing values.
Let me know what you think!
Sorry, it should be 32px, line-height: 40px (my 44px was incorrect).
@karuto this is a permanent font grouping, it will be used in mobile too. So, it is not just a one-off for ticketing. Sorry for the extra work this will cause.
See attachment of the latest typography stack by @mannionaco
@francesyun cool Kellen showed me this too, in that case let's create a mobile web typography token
So to summarize this issue, we will:
- create a new xxlarge values in https://github.com/opentable/design-tokens/blob/master/OTKit/otkit-typography/token.yml
- create a new xxlarge font group in https://github.com/opentable/design-tokens/blob/master/OTKit/otkit-desktop-typography/token.yml
- create a new set of font groups (that are not unique, e.g. are same as web) in a new package otkit-mobile-typography
yes?
@lastquestion yes that's correct - see my Pull Request addressing these concerns: #97
I am closing this as we have addressed most of the concerns in this thread with different PRs.