theme: remove card text definition (#84735)

Remove card text definition. h1-h6 titles have line height set to 1.2
already by base.less and font size being in rem here is confusing. Below
is a before after example of the title inside replay memory tab

static/app/components/charts/styles.tsx

@@ -50,13 +50,19 @@ export const ChartControls = styled('div')`
 `;
 
 // Header element for charts within panels.
+// @TODO(jonasbadalic) This should be a title component and not a div
 export const HeaderTitle = styled('div')`
   display: inline-grid;
   grid-auto-flow: column;
   gap: ${space(1)};
-  ${p => p.theme.text.cardTitle};
+
   color: ${p => p.theme.headingColor};
   align-items: center;
+
+  /* @TODO(jonasbadalic) This should be a title component and not a div */
+  font-size: 1rem;
+  font-weight: ${p => p.theme.fontWeightBold};
+  line-height: 1.2;
 `;
 
 // Header element for charts within panels

static/app/components/workflowEngine/form/section.tsx

@@ -30,9 +30,7 @@ const Container = styled('section')`
 `;
 
 const Title = styled('h3')`
-  font-size: ${p => p.theme.text.cardTitle.fontSize};
-  font-weight: ${p => p.theme.text.cardTitle.fontWeight};
-  line-height: ${p => p.theme.text.cardTitle.lineHeight};
+  font-size: ${p => p.theme.fontSizeLarge};
   color: ${p => p.theme.textColor};
   margin: 0;
 `;

static/app/utils/theme.tsx

@@ -1067,6 +1067,7 @@ const commonTheme = {
   fontSizeMedium: '14px',
   fontSizeLarge: '16px',
   fontSizeExtraLarge: '18px',
+
   codeFontSize: '13px',
   headerFontSize: '22px',
 
@@ -1093,12 +1094,6 @@ const commonTheme = {
     familyMono: "'Roboto Mono', Monaco, Consolas, 'Courier New', monospace",
     lineHeightHeading: 1.2,
     lineHeightBody: 1.4,
-
-    cardTitle: {
-      fontSize: '1rem',
-      fontWeight: 600,
-      lineHeight: 1.2,
-    },
   },
 
   /**

static/app/views/dashboards/manage/dashboardCard.tsx

@@ -134,9 +134,13 @@ const CardWithoutMargin = styled(Card)`
 `;
 
 const Title = styled('div')`
-  ${p => p.theme.text.cardTitle};
   color: ${p => p.theme.headingColor};
   ${p => p.theme.overflowEllipsis};
+
+  /* @TODO(jonasbadalic) This should be a title component and not a div */
+  font-size: 1rem;
+  line-height: 1.2;
+  /* @TODO(jonasbadalic) font weight normal? This is inconsisten with other titles */
   font-weight: ${p => p.theme.fontWeightNormal};
 `;
 

static/app/views/discover/querycard.tsx

@@ -101,9 +101,13 @@ const QueryCardHeader = styled('div')`
 `;
 
 const QueryTitle = styled('div')`
-  ${p => p.theme.text.cardTitle};
   color: ${p => p.theme.headingColor};
   ${p => p.theme.overflowEllipsis};
+
+  /* @TODO(jonasbadalic) This should be a title component and not a div */
+  font-size: 1rem;
+  line-height: 1.2;
+  /* @TODO(jonasbadalic) font-weight: initial? */
   font-weight: initial;
 `;
 

static/app/views/explore/charts/index.tsx

@@ -325,9 +325,13 @@ const ChartHeader = styled('div')`
 `;
 
 const ChartTitle = styled('div')`
-  ${p => p.theme.text.cardTitle}
-  line-height: 32px;
   flex: 1;
+
+  /* @TODO(jonasbadalic) This should be a title component and not a div */
+  font-size: 1rem;
+  font-weight: ${p => p.theme.fontWeightBold};
+  /* @TODO(jonasbadalic) line height 32px ? */
+  line-height: 32px;
 `;
 
 const ChartLabel = styled('div')`

static/app/views/insights/common/components/chartPanel.tsx

@@ -75,7 +75,10 @@ const SubtitleContainer = styled('div')`
 `;
 
 const ChartLabel = styled('div')`
-  ${p => p.theme.text.cardTitle}
+  /* @TODO(jonasbadalic) This should be a title component and not a div */
+  font-size: 1rem;
+  font-weight: ${p => p.theme.fontWeightBold};
+  line-height: 1.2;
 `;
 
 const PanelBody = styled('div')`

static/app/views/insights/common/components/miniChartPanel.tsx

@@ -31,7 +31,10 @@ export default function MiniChartPanel({title, children, button, subtitle}: Prop
 }
 
 const ChartLabel = styled('p')`
-  ${p => p.theme.text.cardTitle}
+  /* @TODO(jonasbadalic) This should be a title component and not a p */
+  font-size: 1rem;
+  font-weight: ${p => p.theme.fontWeightBold};
+  line-height: 1.2;
 `;
 
 const HeaderContainer = styled('div')`

static/app/views/insights/mobile/common/components/spanSamplesPanelContainer.tsx

@@ -250,7 +250,10 @@ const StyledReadoutRibbon = styled(ReadoutRibbon)`
 `;
 
 const SectionTitle = styled('div')`
-  ${p => p.theme.text.cardTitle}
+  /* @TODO(jonasbadalic) This should be a title component and not a div */
+  font-size: 1rem;
+  font-weight: ${p => p.theme.fontWeightBold};
+  line-height: 1.2;
 `;
 
 const PaddedTitle = styled('div')`

static/app/views/insights/mobile/screenload/components/charts/screenBarChart.tsx

@@ -157,7 +157,10 @@ export function ScreensBarChart({
 }
 
 const ChartLabel = styled('p')`
-  ${p => p.theme.text.cardTitle}
+  /* @TODO(jonasbadalic) This should be a title component and not a p */
+  font-size: 1rem;
+  font-weight: ${p => p.theme.fontWeightBold};
+  line-height: 1.2;
 `;
 
 const HeaderContainer = styled('div')`