chore: update font weight from bold to semi-bold for Geist font alignment

apps/storybook-react-native/.storybook/FontLoader.js

@@ -12,8 +12,8 @@ const FontLoader = ({ children }) => {
         'Geist Regular Italic': require('../fonts/Geist/Geist Regular Italic.otf'),
         'Geist Medium': require('../fonts/Geist/Geist Medium.otf'),
         'Geist Medium Italic': require('../fonts/Geist/Geist Medium Italic.otf'),
-        'Geist Bold': require('../fonts/Geist/Geist Bold.otf'),
-        'Geist Bold Italic': require('../fonts/Geist/Geist Bold Italic.otf'),
+        'Geist SemiBold': require('../fonts/Geist/Geist SemiBold.otf'),
+        'Geist SemiBold Italic': require('../fonts/Geist/Geist SemiBold Italic.otf'),
         'MM Poly Regular': require('../fonts/MMPoly/MM Poly Regular.otf'),
         'MM Sans Regular': require('../fonts/MMSans/MM Sans Regular.otf'),
         'MM Sans Medium': require('../fonts/MMSans/MM Sans Medium.otf'),

apps/storybook-react/tailwind.css

@@ -34,15 +34,15 @@
 @font-face {
   font-family: 'Geist';
   font-style: normal;
-  font-weight: 700;
-  src: url('fonts/Geist/Geist Bold.woff2') format('woff2');
+  font-weight: 600;
+  src: url('fonts/Geist/Geist SemiBold.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'Geist';
   font-style: italic;
-  font-weight: 700;
-  src: url('fonts/Geist/Geist Bold Italic.woff2') format('woff2');
+  font-weight: 600;
+  src: url('fonts/Geist/Geist SemiBold Italic.woff2') format('woff2');
 }
 
 /* MM Sans */
@@ -63,7 +63,7 @@
 @font-face {
   font-family: 'MMSans';
   font-style: normal;
-  font-weight: 700;
+  font-weight: 600;
   src: url('fonts/MMSans/MM Sans Bold.woff2') format('woff2');
 }
 
@@ -85,6 +85,6 @@
 @font-face {
   font-family: 'MMPoly';
   font-style: normal;
-  font-weight: 700;
+  font-weight: 600;
   src: url('fonts/MMPoly/MM Poly Regular.woff2') format('woff2');
 }

packages/design-system-react-native/src/components/Text/README.md

@@ -76,7 +76,7 @@ Available `FontWeight` options:
 
 - `FontWeight.Regular` (Weight `400`)
 - `FontWeight.Medium` (Weight `500`)
-- `FontWeight.Bold` (Weight `700`)
+- `FontWeight.Bold` (Weight `600`)
 
 ### `fontStyle`
 

packages/design-system-react-native/src/components/Text/Text.stories.tsx

@@ -115,7 +115,7 @@ export const FontWeightStory: Story = {
     <View>
       <Text fontWeight={FontWeight.Regular}>Regular (400)</Text>
       <Text fontWeight={FontWeight.Medium}>Medium (500)</Text>
-      <Text fontWeight={FontWeight.Bold}>Bold (700)</Text>
+      <Text fontWeight={FontWeight.Bold}>Bold (600)</Text>
     </View>
   ),
   name: 'Font Weight',

packages/design-system-react-native/src/components/Text/Text.types.ts

@@ -31,7 +31,7 @@ export type TextProps = {
    * Optional prop to control the font weight of the text.
    * Normal: 400
    * Medium: 500
-   * Bold: 700
+   * Bold: 600
    */
   fontWeight?: FontWeight;
   /**

packages/design-system-react-native/src/types/index.ts

@@ -454,9 +454,9 @@ export enum TextColor {
  */
 export enum FontWeight {
   /**
-   * Weight - 700
+   * Weight - 600
    */
-  Bold = '700',
+  Bold = '600',
   /**
    * Weight - 500
    */

packages/design-system-react/src/components/Text/README.mdx

@@ -254,7 +254,7 @@ Use the `fontWeight` prop and the `FontWeight` enum from `@metamask/design-syste
       <td>
         <code>bold</code>
       </td>
-      <td>700</td>
+      <td>600</td>
     </tr>
   </tbody>
 </table>

packages/design-system-react/src/components/Text/Text.stories.tsx

@@ -48,7 +48,7 @@ const meta: Meta<typeof Text> = {
       options: Object.keys(FontWeight),
       mapping: FontWeight,
       description:
-        'Optional prop to control the font weight of the text. Normal: 400, Medium: 500, Bold: 700',
+        'Optional prop to control the font weight of the text. Normal: 400, Medium: 500, Bold: 600',
     },
     fontFamily: {
       control: 'select',
@@ -221,7 +221,7 @@ export const FontWeightStory: Story = {
     <div className="space-y-4">
       <Text fontWeight={FontWeight.Regular}>Regular (400)</Text>
       <Text fontWeight={FontWeight.Medium}>Medium (500)</Text>
-      <Text fontWeight={FontWeight.Bold}>Bold (700)</Text>
+      <Text fontWeight={FontWeight.Bold}>Bold (600)</Text>
     </div>
   ),
   name: 'Font Weight',

packages/design-system-react/src/components/Text/Text.types.ts

@@ -33,7 +33,7 @@ export type TextProps = {
    * Optional prop to control the font weight of the text.
    * Regular: 400
    * Medium: 500
-   * Bold: 700
+   * Bold: 600
    */
   fontWeight?: FontWeight;
   /**

packages/design-system-react/src/types/index.ts

@@ -482,7 +482,7 @@ export enum TextAlign {
  */
 export enum FontWeight {
   /**
-   * Weight - 700
+   * Weight - 600
    */
   Bold = 'font-bold',
   /**

packages/design-system-twrnc-preset/src/typography.types.ts

@@ -44,7 +44,7 @@ export type FontStyle = 'normal' | 'italic';
  *     'display-md': {
  *       fontFamily: 'Geist Bold',
  *       fontSize: '32',
- *       fontWeight: '700',
+ *       fontWeight: '600',
  *       letterSpacing: '0',
  *       lineHeight: '40px',
  *     },

packages/design-tokens/src/css/typography.css

@@ -31,7 +31,7 @@
   /* font weights */
   --font-weight-regular: 400;
   --font-weight-medium: 500;
-  --font-weight-bold: 700;
+  --font-weight-bold: 600;
   /* letter spacing */
   --letter-spacing-0: 0;
   --letter-spacing-1: 2.5%;

packages/design-tokens/src/figma/tokens.json

@@ -404,7 +404,7 @@
         "type": "fontWeights"
       },
       "bold": {
-        "value": "700",
+        "value": "600",
         "type": "fontWeights"
       }
     },

packages/design-tokens/src/js/typography/fontWeights.ts

@@ -3,5 +3,5 @@ import type { FontWeights } from './types';
 export const fontWeights: FontWeights = {
   regular: '400',
   medium: '500',
-  bold: '700',
+  bold: '600',
 };

packages/design-tokens/src/js/typography/typography.test.ts

@@ -55,7 +55,7 @@ function createNewFigmaTokenObject(str: string, obj: any) {
 describe('Typography', () => {
   describe('Typography Small Screen', () => {
     it('js tokens for sDisplayMD matches figma tokens sDisplayMD', () => {
-      expect(typography.sDisplayMD.fontWeight).toBe('700');
+      expect(typography.sDisplayMD.fontWeight).toBe('600');
 
       expect(typography.sDisplayMD.fontSize).toStrictEqual(
         Number(
@@ -86,7 +86,7 @@ describe('Typography', () => {
     });
 
     it('js tokens for sHeadingLG matches figma tokens sHeadingLG', () => {
-      expect(typography.sHeadingLG.fontWeight).toBe('700');
+      expect(typography.sHeadingLG.fontWeight).toBe('600');
 
       expect(typography.sHeadingLG.fontSize).toStrictEqual(
         Number(
@@ -117,7 +117,7 @@ describe('Typography', () => {
     });
 
     it('js tokens for sHeadingMD matches figma tokens sHeadingMD', () => {
-      expect(typography.sHeadingMD.fontWeight).toBe('700');
+      expect(typography.sHeadingMD.fontWeight).toBe('600');
 
       expect(typography.sHeadingMD.fontSize).toStrictEqual(
         Number(
@@ -148,7 +148,7 @@ describe('Typography', () => {
     });
 
     it('js tokens for sHeadingSM matches figma tokens sHeadingSM', () => {
-      expect(typography.sHeadingSM.fontWeight).toBe('700');
+      expect(typography.sHeadingSM.fontWeight).toBe('600');
 
       expect(typography.sHeadingSM.fontSize).toStrictEqual(
         Number(
@@ -210,7 +210,7 @@ describe('Typography', () => {
     });
 
     it('js tokens for sBodyMDBold matches figma tokens sBodyMDBold', () => {
-      expect(typography.sBodyMDBold.fontWeight).toBe('700');
+      expect(typography.sBodyMDBold.fontWeight).toBe('600');
 
       expect(typography.sBodyMDBold.fontSize).toStrictEqual(
         Number(
@@ -303,7 +303,7 @@ describe('Typography', () => {
     });
 
     it('js tokens for sBodySMBold matches figma tokens sBodySMBold', () => {
-      expect(typography.sBodySMBold.fontWeight).toBe('700');
+      expect(typography.sBodySMBold.fontWeight).toBe('600');
 
       expect(typography.sBodySMBold.fontSize).toStrictEqual(
         Number(
@@ -491,7 +491,7 @@ describe('Typography', () => {
     });
 
     it('js tokens for lHeadingLG matches figma tokens lHeadingLG', () => {
-      expect(typography.lHeadingLG.fontWeight).toBe('700');
+      expect(typography.lHeadingLG.fontWeight).toBe('600');
 
       expect(typography.lHeadingLG.fontSize).toStrictEqual(
         Number(
@@ -522,7 +522,7 @@ describe('Typography', () => {
     });
 
     it('js tokens for lHeadingMD matches figma tokens lHeadingMD', () => {
-      expect(typography.lHeadingMD.fontWeight).toBe('700');
+      expect(typography.lHeadingMD.fontWeight).toBe('600');
 
       expect(typography.lHeadingMD.fontSize).toStrictEqual(
         Number(
@@ -553,7 +553,7 @@ describe('Typography', () => {
     });
 
     it('js tokens for lHeadingSM matches figma tokens lHeadingSM', () => {
-      expect(typography.lHeadingSM.fontWeight).toBe('700');
+      expect(typography.lHeadingSM.fontWeight).toBe('600');
 
       expect(typography.lHeadingSM.fontSize).toStrictEqual(
         Number(
@@ -615,7 +615,7 @@ describe('Typography', () => {
     });
 
     it('js tokens for lBodyMDBold matches figma tokens lBodyMDBold', () => {
-      expect(typography.lBodyMDBold.fontWeight).toBe('700');
+      expect(typography.lBodyMDBold.fontWeight).toBe('600');
 
       expect(typography.lBodyMDBold.fontSize).toStrictEqual(
         Number(
@@ -708,7 +708,7 @@ describe('Typography', () => {
     });
 
     it('js tokens for lBodySMBold matches figma tokens lBodySMBold', () => {
-      expect(typography.lBodySMBold.fontWeight).toBe('700');
+      expect(typography.lBodySMBold.fontWeight).toBe('600');
 
       expect(typography.lBodySMBold.fontSize).toStrictEqual(
         Number(

packages/design-tokens/stories/Typography.mdx

@@ -984,7 +984,7 @@ For screens sizes `768px <` or larger, use the large screen typography scale
 
 ## Font Weight
 
-There are three available font weights: regular (`400`), medium (`500`), and bold (`700`).
+There are three available font weights: regular (`400`), medium (`500`), and bold (`600`).
 
 <Canvas of={TypographyStories.FontWeight} />
 

packages/design-tokens/stories/Typography.stories.tsx

@@ -531,7 +531,7 @@ export const FontWeight: StoryFn<typeof Text> = () => {
     <>
       <Text style={styles.regular}>Regular 400</Text>
       <Text style={styles.medium}>Medium 500</Text>
-      <Text style={styles.bold}>Bold 700</Text>
+      <Text style={styles.bold}>Bold 600</Text>
     </>
   );
 };