Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Zuzze wants to merge 3 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
284f878
fix(RO-2022): code line height aligned with figma
Zuzze Dec 19, 2025
0830f83
fix(RO-2202): changeset added
Zuzze Dec 19, 2025
99f5a6a
Merge branch 'main' into fix/RO-2202-code-line-height
zmdavis Feb 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/icon-color-and-code-line-height-fixes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@launchpad-ui/components": patch
---

Fix Code component line height

- **Code**: Added explicit line heights using design system tokens (`--lp-line-height-100` and `--lp-line-height-200`) for consistent typography spacing
2 changes: 2 additions & 0 deletions packages/components/src/styles/Code.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,10 @@

.small {
font-size: var(--lp-font-size-100);
line-height: var(--lp-line-height-100);
Copy link
Contributor

@apucacao apucacao Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@Zuzze Zuzze Jan 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 🙂

}

.medium {
font-size: var(--lp-font-size-200);
line-height: var(--lp-line-height-200);
}
Loading