Browse Source

ref(styles): Add font weights to theme (#71484)

This was an item from the last Frontend TSC

- Adds `fontWeightBold` and `fontWeightNormal` to the theme. 
- Converts font-weight 600 and above to `fontWeightBold`
- Converts other font-weight values to `fontWeightNormal`
Malachi Willey 9 months ago
parent
commit
19a292825a

+ 1 - 1
static/app/actionCreators/indicator.tsx

@@ -253,7 +253,7 @@ const FormValue = styled('span')`
   margin: 0 ${space(0.5)};
 `;
 const FieldName = styled('span')`
-  font-weight: bold;
+  font-weight: ${p => p.theme.fontWeightBold};
   margin: 0 ${space(0.5)};
 `;
 const MessageContainer = styled('div')`

+ 1 - 1
static/app/components/actions/archive.tsx

@@ -198,5 +198,5 @@ const MenuWrapper = styled('div')`
 `;
 
 const StyledExternalLink = styled(ExternalLink)`
-  font-weight: normal;
+  font-weight: ${p => p.theme.fontWeightNormal};
 `;

+ 1 - 1
static/app/components/actions/menuHeader.tsx

@@ -5,7 +5,7 @@ import {space} from 'sentry/styles/space';
 
 const MenuHeader = styled(MenuItem)`
   text-transform: uppercase;
-  font-weight: 600;
+  font-weight: ${p => p.theme.fontWeightBold};
   color: ${p => p.theme.gray400};
   border-bottom: 1px solid ${p => p.theme.innerBorder};
   padding: ${space(1)};

+ 1 - 1
static/app/components/actions/resolve.tsx

@@ -357,7 +357,7 @@ const SetupReleases = styled('div')`
   color: ${p => p.theme.gray400};
   width: 250px;
   white-space: normal;
-  font-weight: normal;
+  font-weight: ${p => p.theme.fontWeightNormal};
 `;
 
 const SetupReleasesHeader = styled('h6')`

+ 1 - 1
static/app/components/activity/author.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 const ActivityAuthor = styled('span')`
-  font-weight: 600;
+  font-weight: ${p => p.theme.fontWeightBold};
   font-size: ${p => p.theme.fontSizeMedium};
 `;
 

+ 1 - 1
static/app/components/alerts/pageBanner.stories.tsx

@@ -123,5 +123,5 @@ export default storyBook(PageBanner, story => {
 
 const Green = styled('span')`
   color: ${p => p.theme.green400};
-  font-weight: bold;
+  font-weight: ${p => p.theme.fontWeightBold};
 `;

+ 1 - 1
static/app/components/alerts/pageBanner.tsx

@@ -118,7 +118,7 @@ const SubText = styled('div')`
 const TypeText = styled(SubText)`
   align-items: center;
   display: flex;
-  font-weight: 500;
+  font-weight: ${p => p.theme.fontWeightNormal};
   gap: ${space(0.5)};
   text-transform: uppercase;
 `;

+ 2 - 2
static/app/components/assistant/guideAnchor.tsx

@@ -298,7 +298,7 @@ const GuideContent = styled('div')`
 `;
 
 const GuideTitle = styled('div')`
-  font-weight: bold;
+  font-weight: ${p => p.theme.fontWeightBold};
   font-size: ${p => p.theme.fontSizeExtraLarge};
 `;
 
@@ -330,7 +330,7 @@ const DismissButton = styled(StyledButton)`
 
 const StepCount = styled('div')`
   font-size: ${p => p.theme.fontSizeSmall};
-  font-weight: bold;
+  font-weight: ${p => p.theme.fontWeightBold};
   text-transform: uppercase;
 `;
 

+ 1 - 1
static/app/components/avatar/avatarList.tsx

@@ -113,7 +113,7 @@ const CollapsedAvatars = styled('div')<{size: number}>`
   justify-content: center;
   position: relative;
   text-align: center;
-  font-weight: 600;
+  font-weight: ${p => p.theme.fontWeightBold};
   background-color: ${p => p.theme.gray200};
   color: ${p => p.theme.gray300};
   font-size: ${p => Math.floor(p.size / 2.3)}px;

+ 1 - 1
static/app/components/badge/badge.tsx

@@ -19,7 +19,7 @@ const Badge = styled(({children, text, ...props}: Props) => (
   padding: 0 5px;
   margin-left: ${space(0.5)};
   font-size: 75%;
-  font-weight: 600;
+  font-weight: ${p => p.theme.fontWeightBold};
   text-align: center;
   color: ${p => p.theme.badge[p.type ?? 'default'].color};
   background: ${p => p.theme.badge[p.type ?? 'default'].background};

Some files were not shown because too many files changed in this diff