fix(RO-2202): code line height aligned with figma

[Zuzze]

Summary

Previously Code component line height was varying depending on the context where it was used but now line height is explicitly set based on Figma line-height to avoid unexpected vertical stretching/squeezing.

---

Related Jira issue: RO-2202: [Nice to have] Align LP Code component line-height with Figma

[changeset-bot]

🦋 Changeset detected

Latest commit: 0830f83

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@launchpad-ui/components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pkg-pr-new]

yarn add https://pkg.pr.new/@launchpad-ui/components@1834.tgz

yarn add https://pkg.pr.new/@launchpad-ui/icons@1834.tgz

yarn add https://pkg.pr.new/@launchpad-ui/tokens@1834.tgz

commit: 0830f83

[github-actions]

Size Change: +1 B (0%)

Total Size: 533 kB

Filename	Size	Change
packages/components/dist/style.css	8.45 kB	+1 B (+0.01%)

ℹ️ View Unchanged

Filename	Size
apps/vscode/dist/client.js	111 kB
apps/vscode/dist/server.js	261 kB
packages/box/dist/index.es.js	7.26 kB
packages/box/dist/index.js	7.82 kB
packages/box/dist/style.css	2.67 kB
packages/button/dist/index.es.js	1.89 kB
packages/button/dist/index.js	2.32 kB
packages/button/dist/style.css	3 kB
packages/components/dist/index.es.js	19.1 kB
packages/components/dist/index.js	20 kB
packages/core/dist/index.es.js	512 B
packages/core/dist/index.js	1.27 kB
packages/drawer/dist/index.es.js	1.76 kB
packages/drawer/dist/index.js	2.22 kB
packages/drawer/dist/style.css	497 B
packages/dropdown/dist/index.es.js	1.15 kB
packages/dropdown/dist/index.js	1.59 kB
packages/filter/dist/index.es.js	2.23 kB
packages/filter/dist/index.js	2.68 kB
packages/filter/dist/style.css	881 B
packages/focus-trap/dist/index.es.js	418 B
packages/focus-trap/dist/index.js	852 B
packages/form/dist/index.es.js	4.25 kB
packages/form/dist/index.js	4.73 kB
packages/form/dist/style.css	2.21 kB
packages/icons/dist/index.es.js	2.81 kB
packages/icons/dist/index.js	3.24 kB
packages/icons/dist/style.css	532 B
packages/menu/dist/index.es.js	3.69 kB
packages/menu/dist/index.js	4.16 kB
packages/menu/dist/style.css	872 B
packages/modal/dist/index.es.js	3.08 kB
packages/modal/dist/index.js	3.55 kB
packages/modal/dist/style.css	903 B
packages/navigation/dist/index.es.js	2.75 kB
packages/navigation/dist/index.js	3.21 kB
packages/navigation/dist/style.css	874 B
packages/overlay/dist/index.es.js	1.02 kB
packages/overlay/dist/index.js	1.42 kB
packages/popover/dist/index.es.js	3.01 kB
packages/popover/dist/index.js	3.43 kB
packages/popover/dist/style.css	529 B
packages/portal/dist/index.es.js	420 B
packages/portal/dist/index.js	835 B
packages/table/dist/index.es.js	1.01 kB
packages/table/dist/index.js	1.44 kB
packages/table/dist/style.css	700 B
packages/tokens/dist/fonts.css	183 B
packages/tokens/dist/index.css	1.47 kB
packages/tokens/dist/index.es.js	3.07 kB
packages/tokens/dist/index.js	3.11 kB
packages/tokens/dist/media-queries.css	113 B
packages/tokens/dist/themes.css	2.27 kB
packages/tooltip/dist/index.es.js	598 B
packages/tooltip/dist/index.js	1.02 kB
packages/tooltip/dist/style.css	337 B
packages/vars/dist/index.es.js	2.66 kB
packages/vars/dist/index.js	2.66 kB

_{compressed-size-action}

[apucacao]

Any reason we can't use the font tokens, like lp-text-code-1-regular and co.?

[Zuzze]

Sorry for the delay @apucacao , just saw this now!

I think we could use the font tokens here as well, but we’d need to make sure Figma is using the same ones for this component so everything stays in sync. I no longer have access to Figma, but iirc, there was just one variant while in code we have two.

Originally the styles were separate because it allowed custom styling for this “chip” component with more specific color and background styling than the usual code "text" used elsewhere in the app.

Let me know what Figma is currently using. I’m happy to switch all variants over to tokens if there are matching Figma font token counterparts available for small/medium variants 🙂