Adds semibold font weight to Text component (#1296)

Co-authored-by: Jason Basuil <[email protected]>

Author: kyleshike

scss/css_properties.scss

@@ -224,6 +224,7 @@
   --synth-font-family: Inter, sans-serif;
   --synth-font-weight-regular: 400;
   --synth-font-weight-medium: 500;
+  --synth-font-weight-semibold: 600;
   --synth-font-weight-bold: 700;
   --synth-font-size-base: 0.875rem;
 

scss/global.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 @import './baseline';
 @import './css_properties.scss';
 @import './theme';

src/Container/Col.tsx

@@ -83,7 +83,7 @@ export function Col({
       xxl={xxl}
       {...props}
     >
-      { children }
+      {children}
     </ReactBootstrapCol>
   );
 }

src/Container/Container.tsx

@@ -42,7 +42,7 @@ export function Container({
       fluid={fluid}
       {...props}
     >
-      { children }
+      {children}
     </ReactBootstrapContainer>
   );
 }

src/Container/Row.tsx

@@ -83,7 +83,7 @@ export function Row({
       xxl={xxl}
       {...props}
     >
-      { children }
+      {children}
     </ReactBootstrapRow>
   );
 }

src/Text/Text.mdx

@@ -39,7 +39,7 @@ Adjust the font `size` with the available sizes:
 
 Use to give text one of the supported font weights: 
 
-`bold`, `medium`, or `regular`
+`bold`, `semibold`, `medium`, or `regular`
 
 <Canvas of={ComponentStories.Weight} />
 

src/Text/Text.scss

@@ -22,6 +22,10 @@
     font-weight: var(--synth-font-weight-bold);
   }
 
+  &--semibold {
+    font-weight: var(--synth-font-weight-semibold);
+  }
+
   &--medium {
     font-weight: var(--synth-font-weight-medium);
   }

src/Text/Text.stories.tsx

@@ -35,6 +35,7 @@ export function Weight() {
   return (
     <>
       <Text weight="bold">Source from a pool of more than 2.1 million participants to reach nearly any target audience.</Text>
+      <Text weight="semibold">Source from a pool of more than 2.1 million participants to reach nearly any target audience.</Text>
       <Text weight="medium">Source from a pool of more than 2.1 million participants to reach nearly any target audience.</Text>
       <Text weight="regular">Source from a pool of more than 2.1 million participants to reach nearly any target audience.</Text>
     </>

src/Text/Text.types.ts

@@ -12,6 +12,7 @@ export const TEXT_PROPS = {
   weight: {
     bold: 'bold',
     medium: 'medium',
+    semibold: 'semibold',
     regular: 'regular',
   },
 } as const;