ref: replace headerFontSize with fontSize.xl (#104448)

TkDodo · web-flow · commit 0a0080e3ed3e · 2025-12-05T13:58:34.000Z
diff --git a/static/app/components/charts/styles.tsx b/static/app/components/charts/styles.tsx
@@ -74,7 +74,7 @@ export const HeaderValue = styled('div')`
   position: absolute;
   top: 40px;
   z-index: 1;
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize.xl};
 `;
 
 export const ChartContainer = styled('div')`
diff --git a/static/app/components/modals/inviteMembersModal/index.tsx b/static/app/components/modals/inviteMembersModal/index.tsx
@@ -137,7 +137,7 @@ export const modalCss = css`
 
 const Heading = styled('h1')`
   font-weight: ${p => p.theme.fontWeight.normal};
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize.xl};
   margin-top: 0;
   margin-bottom: ${space(0.75)};
 `;
diff --git a/static/app/components/tours/startTour.tsx b/static/app/components/tours/startTour.tsx
@@ -85,7 +85,7 @@ const TextContainer = styled('div')`
 
 const Header = styled('div')`
   color: ${p => p.theme.tokens.content.primary};
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize.xl};
   font-weight: ${p => p.theme.fontWeight.bold};
 `;
 
diff --git a/static/app/components/versionHoverCard.tsx b/static/app/components/versionHoverCard.tsx
@@ -245,7 +245,7 @@ const StyledVersion = styled(Version)`
 
 const CountSince = styled('div')`
   color: ${p => p.theme.headingColor};
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize.xl};
 `;
 
 const AvatarListContainer = styled('div')`
diff --git a/static/app/utils/theme/theme.tsx b/static/app/utils/theme/theme.tsx
@@ -629,7 +629,6 @@ const commonTheme = {
    * @deprecated use fontSize instead
    */
   codeFontSize: '13px' as const,
-  headerFontSize: '22px' as const,
 
   text: {
     family: "'Rubik', 'Avenir Next', sans-serif",
diff --git a/static/app/views/insights/browser/webVitals/components/webVitalMetersWithIssues.tsx b/static/app/views/insights/browser/webVitals/components/webVitalMetersWithIssues.tsx
@@ -325,7 +325,7 @@ const MeterHeader = styled('div')`
 const MeterValueText = styled('div')`
   display: flex;
   align-items: center;
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize.xl};
   font-weight: ${p => p.theme.fontWeight.bold};
   color: ${p => p.theme.textColor};
   flex: 1;
@@ -341,7 +341,7 @@ const MeterValueText = styled('div')`
 
 const NoValueContainer = styled('span')`
   color: ${p => p.theme.subText};
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize.xl};
 `;
 
 function NoValue() {
diff --git a/static/app/views/insights/mobile/screens/components/vitalCard.tsx b/static/app/views/insights/mobile/screens/components/vitalCard.tsx
@@ -74,7 +74,7 @@ const MeterValueText = styled('div')`
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize.xl};
   color: ${p => p.theme.textColor};
   flex: 1;
   text-align: center;
diff --git a/static/app/views/issueDetails/reprocessingProgress.tsx b/static/app/views/issueDetails/reprocessingProgress.tsx
@@ -74,7 +74,7 @@ const Header = styled('div')`
 `;
 
 const Title = styled('h3')`
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize.xl};
   font-weight: ${p => p.theme.fontWeight.bold};
   margin-bottom: 0;
 `;
diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx
@@ -694,7 +694,7 @@ const HighlightsDurationWrapper = styled(FlexBox)`
 `;
 
 const HighlightDuration = styled('div')`
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize.xl};
   font-weight: 400;
 `;
 
diff --git a/static/app/views/sharedGroupDetails/sharedGroupHeader.tsx b/static/app/views/sharedGroupDetails/sharedGroupHeader.tsx
@@ -89,7 +89,7 @@ const Title = styled('h3')`
   ${p => p.theme.overflowEllipsis};
 
   @media (min-width: ${props => props.theme.breakpoints.sm}) {
-    font-size: ${p => p.theme.headerFontSize};
+    font-size: ${p => p.theme.fontSize.xl};
   }
 `;
 
diff --git a/static/gsApp/components/profiling/profilingUpgradeModal.tsx b/static/gsApp/components/profiling/profilingUpgradeModal.tsx
@@ -132,7 +132,7 @@ const SubheaderPrimary = styled(Subheader)`
 `;
 
 const Header = styled('h1')`
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize.xl};
   font-weight: bold;
   margin: ${space(1)} 0;
 `;
diff --git a/static/gsApp/components/upgradeNowModal/index.tsx b/static/gsApp/components/upgradeNowModal/index.tsx
@@ -117,7 +117,7 @@ const SubheaderPrimary = styled(Subheader)`
 `;
 
 const Header = styled('h1')`
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize.xl};
   font-weight: bold;
   margin: ${space(1)} 0;
 `;
diff --git a/static/gsApp/components/upgradeNowModal/modalSamePrice.tsx b/static/gsApp/components/upgradeNowModal/modalSamePrice.tsx
@@ -136,7 +136,7 @@ const Subheader = styled('h2')`
 `;
 
 const Header = styled('h1')`
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize.xl};
   font-weight: bold;
   margin: ${space(1.5)} 0;
 `;
diff --git a/static/gsApp/components/upsellModal/index.tsx b/static/gsApp/components/upsellModal/index.tsx
@@ -69,7 +69,7 @@ function UpsellModal({source, organization, subscription}: Props) {
 }
 
 const Header = styled('div')`
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize.xl};
   font-weight: bold;
   margin: ${space(1)} 0;
 `;
diff --git a/static/gsApp/views/amCheckout/components/checkoutOverview.tsx b/static/gsApp/views/amCheckout/components/checkoutOverview.tsx
@@ -389,7 +389,7 @@ const Currency = styled('div')`
 `;
 
 const BillingInterval = styled('div')`
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize.xl};
   padding-bottom: ${space(1.5)};
   align-self: end;
 `;
diff --git a/static/gsApp/views/amCheckout/components/checkoutOverviewV2.tsx b/static/gsApp/views/amCheckout/components/checkoutOverviewV2.tsx
@@ -452,7 +452,7 @@ const Price = styled('div')`
 `;
 
 const TotalPrice = styled(Price)`
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize.xl};
   font-weight: 600;
 `;
 
diff --git a/static/gsApp/views/amCheckout/components/unitTypeItem.tsx b/static/gsApp/views/amCheckout/components/unitTypeItem.tsx
@@ -59,7 +59,7 @@ const UnitTitle = styled('div')`
 `;
 
 const Weight = styled('div')`
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize.xl};
   color: ${p => p.theme.gray500};
   align-self: start;
 `;
diff --git a/static/gsApp/views/amCheckout/components/volumeSliders.tsx b/static/gsApp/views/amCheckout/components/volumeSliders.tsx
@@ -402,7 +402,7 @@ const Description = styled(SpaceBetweenGrid)<{isNewCheckout: boolean}>`
 `;
 
 const Events = styled('div')<{isLegacy: boolean}>`
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize.xl};
   margin: 0;
   font-weight: ${p => (p.isLegacy ? 'normal' : '600')};
 `;
diff --git a/static/gsApp/views/subscriptionPage/headerCards/subscriptionCard.tsx b/static/gsApp/views/subscriptionPage/headerCards/subscriptionCard.tsx
@@ -133,7 +133,7 @@ const PlanHeader = styled('div')<{isPastDue?: boolean}>`
   gap: ${space(0.5)};
   align-items: center;
   color: ${p => (p.isPastDue ? p.theme.red300 : p.theme.textColor)};
-  font-size: ${p => p.theme.headerFontSize};
+  font-size: ${p => p.theme.fontSize.xl};
   font-weight: bold;
   white-space: nowrap;
 `;

Original file line number	Diff line number	Diff line change
@@ -89,7 +89,7 @@ const Title = styled('h3')`
`89`	`89`	`${p => p.theme.overflowEllipsis};`
`90`	`90`
`91`	`91`	`@media (min-width: ${props => props.theme.breakpoints.sm}) {`
`92`		`- font-size: ${p => p.theme.headerFontSize};`
	`92`	`+ font-size: ${p => p.theme.fontSize.xl};`
`93`	`93`	`}`
`94`	`94`	`;
`95`	`95`