ref(scraps): apply typography #104468
ref(scraps): apply typography #104468
Conversation
github-actions
bot
added
the
Scope: Frontend
| const legacyTypography = { | ||
| fontSize: typography.font.size, | ||
| fontWeight: { | ||
| normal: typography.font.weight.regular, | ||
| bold: typography.font.weight.medium, | ||
| }, | ||
| text: { | ||
| family: typography.font.family.sans, | ||
| familyMono: typography.font.family.mono, | ||
| lineHeightHeading: typography.font.lineHeight.default, | ||
| lineHeightBody: typography.font.lineHeight.comfortable, | ||
| }, | ||
| } as const; |
There was a problem hiding this comment.
Separated to a legacy object so we can migrate in follow-up
| type: 'light' as 'light' | 'dark', | ||
| // @TODO: color theme contains some colors (like chart color palette, diff, tag and level) | ||
| ...commonTheme, | ||
| fontSize, |
There was a problem hiding this comment.
Note that the fontSize property of commonTheme was being overwritten here. That is no longer the case, but the overrides match the new values. No functional change here.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| } as const; | ||
|
|
||
| const legacyTypography = { | ||
| fontSize: typography.font.size, |
There was a problem hiding this comment.
Bug: Font size xl and 2xl values changed unexpectedly
The PR description states "The values are equivalent" but fontSize.xl changed from '18px' to '20px' and fontSize['2xl'] changed from '20px' to '24px'. This affects any component using these font size tokens and could cause visual regressions across the application.
Additional Locations (1)
There was a problem hiding this comment.
See #104468 (comment). The old values were already being overwritten, so there is no functional change here. It was an intentional decision to adjust our type scale in UI2.
| fontSize: typography.font.size, | ||
| fontWeight: { | ||
| normal: typography.font.weight.regular, | ||
| bold: typography.font.weight.medium, |
There was a problem hiding this comment.
Bug: fontWeight.bold changed from 600 to 500
The PR description claims values are equivalent, but fontWeight.bold changed from 600 to 500 (via typography.font.weight.medium). This makes bold text noticeably lighter throughout the application, which is a visual breaking change that contradicts the stated intent of the PR.
There was a problem hiding this comment.
This one is actually accurate! I'll check with @Jesse-Box.
Follow-up to #103685. This PR applies our new typography tokens to the existing theme object.
The values are equivalent, they just are now generated from from the Figma document and exposed in the theme.
Migration for core components will happen in a follow-up PR.