Merge pull request #402 from storybookjs/update-fonts

Remove heaviest font-weight (black)

Author: Dominic Nguyen

src/components/ShadowBoxCTA.tsx

@@ -32,7 +32,7 @@ const TextWrapper = styled.div`
 
 const HeadingText = styled.div`
   font-size: ${typography.size.s3}px;
-  font-weight: ${typography.weight.black};
+  font-weight: ${typography.weight.bold};
 `;
 
 const MessageText = styled.div`

src/components/Subheading.tsx

@@ -6,7 +6,7 @@ const StyledSubheading = styled('span', { shouldForwardProp: (prop) => !['muted'
   Partial<SubheadingProps>
 >`
   font-size: ${typography.size.s2 - 1}px;
-  font-weight: ${typography.weight.black};
+  font-weight: ${typography.weight.extrabold};
   letter-spacing: 0.35em;
   text-transform: uppercase;
 

src/components/header/NavLink.tsx

@@ -6,7 +6,7 @@ import { HeaderContext } from './HeaderContext';
 
 const StyledNavLink = styled(Link)`
   font-size: ${typography.size.s2}px;
-  font-weight: ${typography.weight.extrabold};
+  font-weight: ${typography.weight.bold};
 `;
 
 type NavLinkProps = ComponentProps<typeof Link>;
@@ -17,3 +17,5 @@ export const NavLink = forwardRef<HTMLAnchorElement | HTMLButtonElement, NavLink
     return <StyledNavLink ref={ref} inverse={inverse} tertiary={!inverse} {...props} />;
   }
 );
+
+NavLink.displayName = 'NavLink';

src/components/marketing/DisplayCard/DisplayCard.styles.ts

@@ -74,7 +74,7 @@ type TitleProps = {
 };
 
 export const Title = styled.div<TitleProps>`
-  font-weight: ${typography.weight.black};
+  font-weight: ${typography.weight.bold};
   font-size: ${typography.size.s3}px;
   line-height: ${typography.size.m2}px;
   color: ${color.darker};

src/components/marketing/Heading.tsx

@@ -5,7 +5,7 @@ import { typography, color, breakpoint } from '../shared/styles';
 export const StyledHeading = styled.h2`
   color: ${color.darkest};
   font-size: ${typography.size.m3}px;
-  font-weight: ${typography.weight.black};
+  font-weight: ${typography.weight.bold};
   letter-spacing: -0.29px;
   line-height: ${typography.size.l2}px;
   margin-bottom: 4px;

src/components/marketing/PageFooter/PageFooter.styles.ts

@@ -21,7 +21,7 @@ export const Title = styled(Subheading)`
 `;
 
 export const ResourceTitle = styled.div`
-  font-weight: ${typography.weight.extrabold};
+  font-weight: ${typography.weight.bold};
   margin-bottom: 0.25rem;
 `;
 

src/components/marketing/Title.tsx

@@ -3,7 +3,7 @@ import { styled } from '@storybook/theming';
 import { typography, color } from '../shared/styles';
 
 const StyledTitle = styled.h3`
-  font-weight: ${typography.weight.black};
+  font-weight: ${typography.weight.bold};
   font-size: ${typography.size.m2}px;
   line-height: ${typography.size.m3}px;
   color: ${color.darkest};

src/components/shared/global.tsx

@@ -120,7 +120,7 @@ export const bodyStyles = css`
 // Allow design system consumers to access font settings but control how and
 // where they load the font.
 export const fontUrl =
-  'https://fonts.googleapis.com/css?family=Nunito+Sans:400,700,800,900&display=swap';
+  'https://fonts.googleapis.com/css?family=Nunito+Sans:400,700,800&display=swap';
 
 const globalStyles = css`
   body {

src/components/shared/styles.ts

@@ -72,7 +72,6 @@ export const typography = {
     regular: '400',
     bold: '700',
     extrabold: '800',
-    black: '900',
   },
   size: {
     s1: 12,

src/components/tooltip/TooltipMessage.tsx

@@ -5,7 +5,7 @@ import { color, typography } from '../shared/styles';
 import { Link } from '../Link';
 
 const Title = styled.div`
-  font-weight: ${typography.weight.black};
+  font-weight: ${typography.weight.bold};
 `;
 
 const Desc = styled.span``;
@@ -16,7 +16,7 @@ const Links = styled.div`
 
   > * {
     margin: 0 8px;
-    font-weight: ${typography.weight.black};
+    font-weight: ${typography.weight.bold};
   }
 `;