Skip to content

[Design Polish] Use 15px bold for content card and widget headers #100835

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

Merged
shawnborton merged 2 commits into from
Sep 14, 2026
Merged

[Design Polish] Use 15px bold for content card and widget headers #100835

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c56c31c
Use 15px bold textStrong variant for card and widget headers
MelvinBot Sep 10, 2026
e9b2e22
Revert eslint seatbelt baseline change per review feedback
MelvinBot Sep 11, 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: 2 additions & 5 deletions src/styles/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4282,8 +4282,7 @@ const staticStyles = (theme: ThemeColors) =>
},

cardSectionTitle: {
fontSize: variables.fontSizeLarge,
Comment on lines 4284 to -4285

@grgia grgia Sep 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@MelvinBot is there a reason to do it this way rather than <Text variant="textStrong" ...

please dont change, answer in thread

@MelvinBot MelvinBot Sep 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Two reasons, and they're not equally strong.

cardSectionTitle — variant wouldn't work without a much larger change.

In src/components/Text.tsx:65-66 the variant is spread before style, so anything in style wins. Every card header renders as style={[styles.textHeadline, styles.cardSectionTitle, ...]}, and textHeadline is textVariants.h1 + color: theme.heading. So <Text variant="textStrong" style={[styles.textHeadline, ...]}> would render at h1 size — the variant would be dead. Making it work means dropping textHeadline and re-supplying color: theme.heading at each call site.

And most of those call sites aren't <Text> at all — they pass the style down as a titleStyle/titleStyles prop, so there's no variant prop to set without threading a new one through each component:

The 9 call sites

Passed as a prop (no <Text> to put variant on):

Direct <Text>, but stacked behind textHeadline:

getWidgetContainerTitleStyle — you're right, variant would be cleaner here.

Only two consumers, both plain <Text style={styles.getWidgetContainerTitleStyle(theme.text)}> with nothing else stacked on: WidgetContainer.tsx:36 and InsightTitleDropdown.tsx:82. Those could become <Text variant="textStrong" color={theme.text}> and the helper could go away entirely. I kept them consistent with the cardSectionTitle change instead, but that's a preference, not a constraint.

Worth noting: nothing in src/ uses the variant prop yet, so either way this would be the first usage.

Not changing anything, per your note.

view run · view recording

lineHeight: variables.lineHeightXLarge,
...textVariants.textStrong,
},

emptyCardSectionTitle: {
Expand Down Expand Up @@ -7253,9 +7252,7 @@ const plainStyles = (theme: ThemeColors) =>

getWidgetContainerTitleStyle: (color: string) =>
({
...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
fontSize: 17,
lineHeight: variables.widgetHeaderTitleLineHeight,
...textVariants.textStrong,
color,
}) satisfies TextStyle,

Expand Down
Loading