Styles: add default typography styles

[justintemps]

We need to align the default typography applied to text outside of individual components to the specifications in this Foundations file on Figma:

https://www.figma.com/file/qr8jQnxqJkRJFQnVC5PmrB/ILO-Foundations?type=design&node-id=6458-12248&mode=design&t=9jfxM7DV4iHAjayC-0

Right now, it seems to me like we don't apply any default typography at all. The packages/styles/scss/_typography.scss file just has some mixins borrowed from Carbon. It's not clear to me where or how those are even being used.

First, we need to devise a strategy for applying typography styles in components. It's really inconsistent right now, in some cases we're getting values from the themes package, in others the styles are hard coded. We can apply the strategy gradually, but we need to agree on what it should be.

Then we need to use this strategy to apply the defaults described in the Foundations file.

[GGKapanadze]

Reference for design Team @justintemps @inesdgomes @beatrizmartinmartins

• Google Material Design
• Elastic UI
• Ant Design
• IBM Carbon

[beatrizmartinmartins]

@GGKapanadze what do you need from our side in order to solve this issue? Should we focus on documentation about foundations? I know there's some issues on components as well, but the previous budget was not meant to change substancially any component, that's why we didn't included it in the scope. @inesdgomes what do you think we should do as well?

[GGKapanadze]

@beatrizmartinmartins On the design side, we should focus on the foundation's typography part. Right now, we have typographies with colors, and some of them are scoped at the component level. For example, we have body xxs, but it's different based on the component.

In an ideal scenario, our typography file should have

• Heading Definitions
• Body Definitions

1) They should not be dependent on components 2) Body elements should not have responsive styles, we can define as many body elements as we want 3) Component should reference to the correct typography naming

[inesdgomes]

@beatrizmartinmartins Could you please review the comment above?

[beatrizmartinmartins]

@justintemps I need to understand the implementation part to understand what we need to remove or not. Right now it is not very clear. Do you mind if we have a meeting on Monday next week? I'm available from 1 to 3pm. I'm going to add you as well @inesdgomes because you might have a better understanding of why we have colors attached to styles and so on, because this was done before I joined the project. You have edit access to the meeting so you can find a better spot that fits your calendars. Thank you!

[justintemps]

Hey @GGKapanadze,

Had a talk with @inesdgomes and @beatrizmartinmartins about this and we had some questions. Referring to this Figma here: https://www.figma.com/design/qr8jQnxqJkRJFQnVC5PmrB/ILO-Foundations?node-id=6458-12250&t=1Z5JU1lJeHOwH2Z4-1

What specifically is missing? It seems like all we're asking for is:

• A list of all of the possible font sizes so that we're not using explicit values in the figma but something that corresponds to the naming convention we use in the code (i.e. size(11) = 44px)
• Defaults that should be applied to the most html elements

Is this correct?

[GGKapanadze]

Utopian Scenario

1. Components should reference the typography foundation
2. Typography shouldn't have a component-specific name, for example: Navigation Small Regular, because we are locking at this typography only for navigation. button, caption or smaller building blocks can have their own typography definitions.
3. Typography should have a sizing system, not Desktop/Mobile, for example, if we have typography body 1, it should have sm, md, lg, xl
4. Typography should not have a locked color, because, it restricts further usability of it

[inesdgomes]

Thanks @GGKapanadze This makes sense to me. I think #1 is done in the design files, but we have to do some work on #2, #3 and #4. @beatrizmartinmartins what do you think?

[beatrizmartinmartins]

Hey @inesdgomes @GGKapanadze.

I think all components reference the typography foundation and if not, that's something that is wrong on the design files. I also agree with #2, #3 and #4, although the number #3 from what I understand, is because the body on Desktop and Mobile would have the same font-sizes right? Because if the idea is using a sm on desktop and a md on mobile for the same component, then I don't believe that's the correct use case for how tokens should be used.

I will make these changes ASAP.

[beatrizmartinmartins]

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

[inesdgomes]

@beatrizmartinmartins This needs to be reviewed once the naming convention for the tokens are changed. Also one small comment to resolve here: https://www.figma.com/design/qr8jQnxqJkRJFQnVC5PmrB?node-id=6458-12250#928311981

[inesdgomes]

@beatrizmartinmartins I believe this is all done from the design side, but could you please confirm here? As in, the typography in all components refer to the typography tokens, rather than having local styles.

[beatrizmartinmartins]

@inesdgomes done. I also created the variables for typography that figma released a while ago. This way it will be easier to use them on the templates. I just need to change it on the templates, but is done on the components.

[inesdgomes]

@justintemps This is done from a design point of view, including the typography tokens. Could you please review this and let us know if there's anything else we still need to address?

Foundations - Typography