search

international-labour-organization / designsystem

A design system for the International Labour Organization
Apache License 2.0
1 stars 3 forks source link

Typography: create tokens for font sizes #1087

Closed inesdgomes closed 1 month ago

inesdgomes commented 4 months ago

Convert the current font sizes in tokens.

beatrizmartinmartins commented 4 months ago

@inesdgomes done. but we need to review them with devs https://www.figma.com/design/qr8jQnxqJkRJFQnVC5PmrB/ILO-Foundations?node-id=1955-1697&t=4K1hxG1wPqvHXSBZ-1 also, can you check the line-height comment I made on the left side of the screen?

beatrizmartinmartins commented 3 months ago

All done. Check the tokens here and the different sizings for Desktop and Mobile. @inesdgomes

justintemps commented 2 months ago

Hey @inesdgomes could you have a look at this and clear for development?

inesdgomes commented 2 months ago

Hi @beatrizmartinmartins Justin and I went through this again and we think this naming convention (e.g. 25, 50, 75, etc.) for the tokens is going to be hard to maintain. Justin suggested we'd use these names: https://v2.chakra-ui.com/docs/styled-system/theme#typography

See for example the names for font sizes: xs, sm, md, lg, xl, 2xl, 3xl, etc. What do you think? Could we try this?

beatrizmartinmartins commented 2 months ago

@inesdgomes @justintemps Hey! No problem, we can change them, just keep in mind that if we want to include a token between xs and sm, we would need to change every following name and the tokens will need to be aligned again. This means that there's no possibility to include new tokens that won't affect the other ones. Does it make sense? Should we really change them thou to this new naming even if it doesn't allow us to have flexibility?

inesdgomes commented 2 months ago

@justintemps Can you discuss and confirm this approach with Giorgi?

inesdgomes commented 2 months ago

Hi @beatrizmartinmartins We discussed this with Giorgi and the other developers. We think it's more beneficial to use a naming convention that is easily understandable than catering for potential font size changes in the future. It's very unlikely we'll be adding new font sizes to our design system, and if we were to do that we would try to adjust the existing ones. So consensus is that we go for a similar naming convention as the one used in chakra's UI.

beatrizmartinmartins commented 2 months ago

@inesdgomes tokens changed. Please see the new naming here. I followed Chakra's DS example and included it everywhere (not only font-size) as I feel like we should follow the same naming convention everywhere

inesdgomes commented 1 month ago

Thanks @beatrizmartinmartins @justintemps All done from the design side. Closing this ticket because we can follow up on this one: https://github.com/international-labour-organization/designsystem/issues/896