search

international-labour-organization / designsystem

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

Create tokens for components sizing #707

Open inesdgomes opened 5 months ago

inesdgomes commented 5 months ago

Just like we created tokens for spacing, should we do the same thing for sizing? Something to discuss before we action this task.

beatrizmartinmartins commented 5 months ago

Yes, we should totally do that. As of now I feel like the sizing tokens will be the same. Where will you include those tokens? I generally do it on icons only or do you asign them to height and widt for components? @justintemps

beatrizmartinmartins commented 4 months ago

@inesdgomes done. You can check it out here https://www.figma.com/file/qr8jQnxqJkRJFQnVC5PmrB/ILO-Foundations?type=design&node-id=1648%3A571&mode=design&t=8VBKSM4tjwjO5DX7-1

inesdgomes commented 4 months ago

Thanks @beatrizmartinmartins If the spacing and sizing use the exact same measures, could we have just one page with the same info that is called 'Spacing and sizing'? My first instinct was to compare both pages to understand if there were any differences. We can spare that effort to designers and developers :)

Also, you said you only use the sizing tokens for icons, so this wouldn't be used to design new components? Wondering how the large sizes would be used then?

justintemps commented 4 months ago

Hey @inesdgomes and @beatrizmartinmartins, we have the tokens listed in this file

This includes some legacy padding-* tokens which are being used by the new website so we didn't want to change or remove them.

beatrizmartinmartins commented 4 months ago

@inesdgomes the sizings can be used for a lot of places, mainly for icons (media uses aspect ratio tokens which are mainly sizing tokens). We can also use the sizing tokens for components, but this can constrain the height or width if we want that component to scale, that's why I usually only implement those sizing tokens on icons, because it allows flexibility on the components. I will put both into the same page