ref(ui): Standardize page title styles (#31145)

* ref(ui): Standardize page title styling

* ref(ui): Standardize card title styles (#31151)

static/app/components/charts/styles.tsx

@@ -54,8 +54,8 @@ export const HeaderTitle = styled('div')`
   display: inline-grid;
   grid-auto-flow: column;
   gap: ${space(1)};
-  font-size: ${p => p.theme.fontSizeLarge};
-  color: ${p => p.theme.textColor};
+  ${p => p.theme.text.cardTitle};
+  color: ${p => p.theme.headingColor};
   align-items: center;
 `;
 

static/app/components/layouts/thirds.tsx

@@ -63,11 +63,9 @@ export const HeaderActions = styled('div')`
  * Heading container that includes margins.
  */
 export const Title = styled('h1')`
-  font-size: ${p => p.theme.headerFontSize};
-  font-weight: normal;
-  line-height: 1.2;
-  color: ${p => p.theme.textColor};
-  margin-top: ${space(3)};
+  ${p => p.theme.text.pageTitle};
+  color: ${p => p.theme.headingColor};
+  margin-top: ${space(2)};
   /* TODO(bootstrap) Remove important when bootstrap headings are removed */
   margin-bottom: 0 !important;
   min-height: 30px;

static/app/components/pageHeading.tsx

@@ -9,10 +9,8 @@ type Props = {
 };
 
 const PageHeading = styled('h1')<Props>`
-  color: ${p => p.theme.textColor};
-  font-size: ${p => p.theme.headerFontSize};
-  line-height: ${p => p.theme.headerFontSize};
-  font-weight: normal;
+  ${p => p.theme.text.pageTitle};
+  color: ${p => p.theme.headingColor};
   margin: 0;
   margin-bottom: ${p => p.withMargins && space(3)};
   margin-top: ${p => p.withMargins && space(1)};

static/app/components/scoreCard.tsx

@@ -80,6 +80,7 @@ export const Score = styled('span')`
   flex-shrink: 1;
   font-size: 32px;
   line-height: 1;
+  color: ${p => p.theme.headingColor};
   white-space: nowrap;
 `;
 

static/app/styles/organization.tsx

@@ -25,10 +25,8 @@ export const PageHeader = styled('div')`
 `;
 
 export const HeaderTitle = styled('h4')`
+  ${p => p.theme.text.pageTitle};
+  color: ${p => p.theme.headingColor};
   flex: 1;
-  font-size: ${p => p.theme.headerFontSize};
-  line-height: ${p => p.theme.headerFontSize};
-  font-weight: normal;
-  color: ${p => p.theme.textColor};
   margin: 0;
 `;

static/app/utils/theme.tsx

@@ -19,7 +19,7 @@ export const lightColors = {
   surface400: '#F5F3F7',
 
   gray500: '#2B2233',
-  gray400: '#4D4158',
+  gray400: '#3E3446',
   gray300: '#80708F',
   gray200: '#DBD6E1',
   gray100: '#EBE6EF',
@@ -144,10 +144,15 @@ const sidebarBackground = {
 type BaseColors = typeof lightColors;
 
 const generateAliases = (colors: BaseColors) => ({
+  /**
+   * Heading text color
+   */
+  headingColor: colors.gray500,
+
   /**
    * Primary text color
    */
-  textColor: colors.gray500,
+  textColor: colors.gray400,
 
   /**
    * Text that should not have as much emphasis
@@ -673,8 +678,19 @@ const commonTheme = {
   text: {
     family: '"Rubik", "Avenir Next", sans-serif',
     familyMono: '"Roboto Mono", Monaco, Consolas, "Courier New", monospace',
-    lineHeightHeading: '1.15',
-    lineHeightBody: '1.4',
+    lineHeightHeading: 1.2,
+    lineHeightBody: 1.4,
+    pageTitle: {
+      fontSize: '1.625rem',
+      fontWeight: 600,
+      letterSpacing: '-0.01em',
+      lineHeight: 1.2,
+    },
+    cardTitle: {
+      fontSize: '1rem',
+      fontWeight: 600,
+      lineHeight: 1.2,
+    },
   },
 
   dataCategory,

static/app/views/dashboardsV2/detail.tsx

@@ -693,8 +693,6 @@ const StyledPageHeader = styled('div')`
   grid-template-columns: minmax(0, 1fr);
   grid-row-gap: ${space(2)};
   align-items: center;
-  font-size: ${p => p.theme.headerFontSize};
-  color: ${p => p.theme.textColor};
   margin-bottom: ${space(2)};
 
   @media (min-width: ${p => p.theme.breakpoints[1]}) {

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

@@ -95,7 +95,8 @@ const CardHeader = styled('div')`
 `;
 
 const Title = styled('div')`
-  color: ${p => p.theme.textColor};
+  ${p => p.theme.text.cardTitle};
+  color: ${p => p.theme.headingColor};
   ${overflowEllipsis};
 `;
 

static/app/views/dashboardsV2/manage/index.tsx

@@ -8,6 +8,7 @@ import Feature from 'sentry/components/acl/feature';
 import Alert from 'sentry/components/alert';
 import Button from 'sentry/components/button';
 import DropdownControl, {DropdownItem} from 'sentry/components/dropdownControl';
+import {Title} from 'sentry/components/layouts/thirds';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import NoProjectMessage from 'sentry/components/noProjectMessage';
 import SearchBar from 'sentry/components/searchBar';
@@ -269,7 +270,7 @@ class ManageDashboards extends AsyncView<Props, State> {
             <NoProjectMessage organization={organization}>
               <PageContent>
                 <StyledPageHeader>
-                  {t('Dashboards')}
+                  <Title>{t('Dashboards')}</Title>
                   <ButtonContainer>
                     <Feature
                       organization={organization}
@@ -316,8 +317,6 @@ const StyledPageContent = styled(PageContent)`
 const StyledPageHeader = styled('div')`
   display: flex;
   align-items: flex-end;
-  font-size: ${p => p.theme.headerFontSize};
-  color: ${p => p.theme.textColor};
   justify-content: space-between;
   margin-bottom: ${space(2)};
 `;
@@ -347,6 +346,7 @@ const TemplateSwitch = styled(Switch)`
 
 const ButtonContainer = styled('div')`
   display: inline;
+  flex-shrink: 0;
 `;
 
 const TemplateContainer = styled('div')`

static/app/views/eventsV2/landing.tsx

@@ -10,6 +10,7 @@ import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import AsyncComponent from 'sentry/components/asyncComponent';
 import Button from 'sentry/components/button';
 import DropdownControl, {DropdownItem} from 'sentry/components/dropdownControl';
+import {Title} from 'sentry/components/layouts/thirds';
 import NoProjectMessage from 'sentry/components/noProjectMessage';
 import SearchBar from 'sentry/components/searchBar';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
@@ -293,9 +294,11 @@ class DiscoverLanding extends AsyncComponent<Props, State> {
             <NoProjectMessage organization={organization}>
               <PageContent>
                 <StyledPageHeader>
-                  <GuideAnchor target="discover_landing_header">
-                    {t('Discover')}
-                  </GuideAnchor>
+                  <Title>
+                    <GuideAnchor target="discover_landing_header">
+                      {t('Discover')}
+                    </GuideAnchor>
+                  </Title>
                   <StyledButton
                     data-test-id="build-new-query"
                     to={to}