search

cisco-sbg-ui / magna-react

magna-react.vercel.app
5 stars 0 forks source link

Heading font-weight and font-size inconsistent with magnetic #83

Closed mvelkCisco closed 1 year ago

mvelkCisco commented 1 year ago

Describe the bug All heading styles should use font-weight: 700 according to https://www.figma.com/file/oVZWatImEIbl1c8sjdGxi0/%F0%9F%A7%B2--Magnetic-Design-Library?node-id=4801%3A49992&t=IjTLYe3iUu0dKAF8-0

font-weight: 300 is used in magna-react https://magna-react.vercel.app/components/app.

h2 should be font-size: 18px; according to magnetic, it's 20px in magna-react. All smaller sizes are also 1 level larger than they should be.

To Reproduce Compare magnetic https://www.figma.com/file/oVZWatImEIbl1c8sjdGxi0/%F0%9F%A7%B2--Magnetic-Design-Library?node-id=4801%3A49992&t=IjTLYe3iUu0dKAF8-0 to magna-react https://magna-react.vercel.app/components/app.

Expected behavior See above.

Screenshots

image image

Environment (please complete the following information):

sabrinamokerji commented 1 year ago

It also looks like the headings should be using the Sharp Sans font: https://www.figma.com/file/oVZWatImEIbl1c8sjdGxi0/branch/yU3qYkj6T2kfN4XYtUkEeD/%F0%9F%A7%B2--Magnetic-Design-Library?node-id=33322%3A330366&t=lfgOvTEpyz0u6u2H-0

mvelkCisco commented 1 year ago

Hey @rwharrisjr, what about the Sharp Sans for headings? I've heard there were some uncertainties about licensing, but apparently we should have a license across SBG, but we are not clear on what this means:

image

Font: https://magnetic.cisco.com/0a43ab5cd/p/4119aa-typography/b/412f4c/t/50c42f

Should we include it ourselves in each app as a @font-face + font-family override for headings or are you planning to add it eventually to magna-react?

rwharrisjr commented 1 year ago

@mvelkCisco It will not be added to magna-react. While we do have a license, it would require posting the font file on the CDN, or bundling it into this public repository/package, and I don't want to open up risk by hosting a licensed file on a publicly accessible server.

I am thinking we might add font family for headings to check for Sharp Sans if it's available - but each product would need to host and load the font file rather than magna-react.

mvelkCisco commented 1 year ago

Ok, makes sense now. Maybe we could also include it only in the sell app.