-
Notifications
You must be signed in to change notification settings - Fork 64
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
Create typography tokens #3198
Comments
Update: We’re currently waiting for feedback from Figma about an estimated time of delivery for typography variables |
As we don't have any answer from Figma yet, we will to figure out a Plan B to work on this @vnys |
Update: Send another email to Fabian about the typography variables release date |
We had an answer and they will not have the features we need as soon as we expected, so we will need to proceed with plan b, that is basically do things in a way, so we can forward with the tokens and then when they have the feature re-make it. Now we will work on the Typography component after Victor finish the syntax task that has a highest priority. |
We have received feedback from Figma, we can proceed with Plan B. |
Released on 17 of June 🎉🎉🎉 |
In order to enable the product designers to create interfaces with well-designed typography, we’re going to offer a typography component in Figma – which will also be implemented in code, and eventually replace the React
<Typography />
component.In EDS 2.0 we use a hard grid, meaning that the spacing between text elements is based on the font baseline as opposed to a soft grid where the spacing is based on the (non-existing) bounding box of the text frame.
In Figma we are going to use vertical trim and top padding to make the baseline grid snap to the nearest layout grid, but since the top padding will vary based on the font-size, we’re going to hide the complexity and the calculations inside a component. This will ensure a consistent use of typography while saving the product designers the trouble of doing the calculations themselves.
The exception to the baseline grid snapping is cases where we only have one line of text, such as a button label. In this case it’s better that the text is vertically centred. The typography component therefore needs a toggle button to turn off snapping in these cases.
The Atlassian design system uses three categories for their typography tokens: Title, body and UI. We are considering using the same terminology to differentiate between tokens intended for use inside components, and tokens intended for use in body copy.
Sub tasks:
The text was updated successfully, but these errors were encountered: