diff --git a/apps/storybook-react-native/.storybook/FontLoader.js b/apps/storybook-react-native/.storybook/FontLoader.js
index a1d65a5f..23a7e83e 100644
--- a/apps/storybook-react-native/.storybook/FontLoader.js
+++ b/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 SemiBold': require('../fonts/Geist/Geist SemiBold.otf'),
- 'Geist SemiBold Italic': require('../fonts/Geist/Geist SemiBold Italic.otf'),
+ 'Geist Bold': require('../fonts/Geist/Geist Bold.otf'),
+ 'Geist Bold Italic': require('../fonts/Geist/Geist Bold 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'),
diff --git a/apps/storybook-react-native/fonts/Geist/Geist SemiBold.otf b/apps/storybook-react-native/fonts/Geist/Geist SemiBold.otf
deleted file mode 100644
index 8184ec98..00000000
Binary files a/apps/storybook-react-native/fonts/Geist/Geist SemiBold.otf and /dev/null differ
diff --git a/apps/storybook-react-native/fonts/Geist/Geist SemiBoldItalic.otf b/apps/storybook-react-native/fonts/Geist/Geist SemiBoldItalic.otf
deleted file mode 100644
index 32475d32..00000000
Binary files a/apps/storybook-react-native/fonts/Geist/Geist SemiBoldItalic.otf and /dev/null differ
diff --git a/apps/storybook-react/fonts/Geist/Geist SemiBold Italic.woff2 b/apps/storybook-react/fonts/Geist/Geist SemiBold Italic.woff2
deleted file mode 100644
index 2f53ced4..00000000
Binary files a/apps/storybook-react/fonts/Geist/Geist SemiBold Italic.woff2 and /dev/null differ
diff --git a/apps/storybook-react/fonts/Geist/Geist SemiBold.woff2 b/apps/storybook-react/fonts/Geist/Geist SemiBold.woff2
deleted file mode 100644
index 83845230..00000000
Binary files a/apps/storybook-react/fonts/Geist/Geist SemiBold.woff2 and /dev/null differ
diff --git a/apps/storybook-react/tailwind.css b/apps/storybook-react/tailwind.css
index ccc61b87..0b08f01e 100644
--- a/apps/storybook-react/tailwind.css
+++ b/apps/storybook-react/tailwind.css
@@ -34,15 +34,15 @@
@font-face {
font-family: 'Geist';
font-style: normal;
- font-weight: 600;
- src: url('fonts/Geist/Geist SemiBold.woff2') format('woff2');
+ font-weight: 700;
+ src: url('fonts/Geist/Geist Bold.woff2') format('woff2');
}
@font-face {
font-family: 'Geist';
font-style: italic;
- font-weight: 600;
- src: url('fonts/Geist/Geist SemiBold Italic.woff2') format('woff2');
+ font-weight: 700;
+ src: url('fonts/Geist/Geist Bold Italic.woff2') format('woff2');
}
/* MM Sans */
@@ -63,7 +63,7 @@
@font-face {
font-family: 'MMSans';
font-style: normal;
- font-weight: 600;
+ font-weight: 700;
src: url('fonts/MMSans/MM Sans Bold.woff2') format('woff2');
}
@@ -85,6 +85,6 @@
@font-face {
font-family: 'MMPoly';
font-style: normal;
- font-weight: 600;
+ font-weight: 700;
src: url('fonts/MMPoly/MM Poly Regular.woff2') format('woff2');
}
diff --git a/packages/design-system-react-native/src/components/Text/README.md b/packages/design-system-react-native/src/components/Text/README.md
index db268773..3e00f564 100644
--- a/packages/design-system-react-native/src/components/Text/README.md
+++ b/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 `600`)
+- `FontWeight.Bold` (Weight `700`)
### `fontStyle`
diff --git a/packages/design-system-react-native/src/components/Text/Text.stories.tsx b/packages/design-system-react-native/src/components/Text/Text.stories.tsx
index a47ef259..83acac7b 100644
--- a/packages/design-system-react-native/src/components/Text/Text.stories.tsx
+++ b/packages/design-system-react-native/src/components/Text/Text.stories.tsx
@@ -115,7 +115,7 @@ export const FontWeightStory: Story = {
Regular (400)
Medium (500)
- Bold (600)
+ Bold (700)
),
name: 'Font Weight',
diff --git a/packages/design-system-react-native/src/components/Text/Text.types.ts b/packages/design-system-react-native/src/components/Text/Text.types.ts
index 56f5b3bd..fce2e9fd 100644
--- a/packages/design-system-react-native/src/components/Text/Text.types.ts
+++ b/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: 600
+ * Bold: 700
*/
fontWeight?: FontWeight;
/**
diff --git a/packages/design-system-react-native/src/types/index.ts b/packages/design-system-react-native/src/types/index.ts
index b26f13b2..f1838343 100644
--- a/packages/design-system-react-native/src/types/index.ts
+++ b/packages/design-system-react-native/src/types/index.ts
@@ -454,9 +454,9 @@ export enum TextColor {
*/
export enum FontWeight {
/**
- * Weight - 600
+ * Weight - 700
*/
- Bold = '600',
+ Bold = '700',
/**
* Weight - 500
*/
diff --git a/packages/design-system-react/src/components/Text/README.mdx b/packages/design-system-react/src/components/Text/README.mdx
index c6bffa46..27d72894 100644
--- a/packages/design-system-react/src/components/Text/README.mdx
+++ b/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
bold
|
- 600 |
+ 700 |
diff --git a/packages/design-system-react/src/components/Text/Text.stories.tsx b/packages/design-system-react/src/components/Text/Text.stories.tsx
index 550d7669..dbc08113 100644
--- a/packages/design-system-react/src/components/Text/Text.stories.tsx
+++ b/packages/design-system-react/src/components/Text/Text.stories.tsx
@@ -48,7 +48,7 @@ const meta: Meta = {
options: Object.keys(FontWeight),
mapping: FontWeight,
description:
- 'Optional prop to control the font weight of the text. Normal: 400, Medium: 500, Bold: 600',
+ 'Optional prop to control the font weight of the text. Normal: 400, Medium: 500, Bold: 700',
},
fontFamily: {
control: 'select',
@@ -221,7 +221,7 @@ export const FontWeightStory: Story = {
Regular (400)
Medium (500)
- Bold (600)
+ Bold (700)
),
name: 'Font Weight',
diff --git a/packages/design-system-react/src/components/Text/Text.types.ts b/packages/design-system-react/src/components/Text/Text.types.ts
index 847c2eda..9ab1fb03 100644
--- a/packages/design-system-react/src/components/Text/Text.types.ts
+++ b/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: 600
+ * Bold: 700
*/
fontWeight?: FontWeight;
/**
diff --git a/packages/design-system-react/src/types/index.ts b/packages/design-system-react/src/types/index.ts
index cf326e45..f685b062 100644
--- a/packages/design-system-react/src/types/index.ts
+++ b/packages/design-system-react/src/types/index.ts
@@ -482,7 +482,7 @@ export enum TextAlign {
*/
export enum FontWeight {
/**
- * Weight - 600
+ * Weight - 700
*/
Bold = 'font-bold',
/**
diff --git a/packages/design-system-twrnc-preset/src/typography.types.ts b/packages/design-system-twrnc-preset/src/typography.types.ts
index 5cf508c3..dc01e31e 100644
--- a/packages/design-system-twrnc-preset/src/typography.types.ts
+++ b/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: '600',
+ * fontWeight: '700',
* letterSpacing: '0',
* lineHeight: '40px',
* },
diff --git a/packages/design-tokens/src/css/typography.css b/packages/design-tokens/src/css/typography.css
index 3385c8a3..27f4fdf3 100644
--- a/packages/design-tokens/src/css/typography.css
+++ b/packages/design-tokens/src/css/typography.css
@@ -31,7 +31,7 @@
/* font weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
- --font-weight-bold: 600;
+ --font-weight-bold: 700;
/* letter spacing */
--letter-spacing-0: 0;
--letter-spacing-1: 2.5%;
diff --git a/packages/design-tokens/src/figma/tokens.json b/packages/design-tokens/src/figma/tokens.json
index da0c8930..7baf941d 100644
--- a/packages/design-tokens/src/figma/tokens.json
+++ b/packages/design-tokens/src/figma/tokens.json
@@ -404,7 +404,7 @@
"type": "fontWeights"
},
"bold": {
- "value": "600",
+ "value": "700",
"type": "fontWeights"
}
},
diff --git a/packages/design-tokens/src/js/typography/fontWeights.ts b/packages/design-tokens/src/js/typography/fontWeights.ts
index 3df4e520..af4c0306 100644
--- a/packages/design-tokens/src/js/typography/fontWeights.ts
+++ b/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: '600',
+ bold: '700',
};
diff --git a/packages/design-tokens/src/js/typography/typography.test.ts b/packages/design-tokens/src/js/typography/typography.test.ts
index d3eebf36..29f18cfa 100644
--- a/packages/design-tokens/src/js/typography/typography.test.ts
+++ b/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('600');
+ expect(typography.sDisplayMD.fontWeight).toBe('700');
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('600');
+ expect(typography.sHeadingLG.fontWeight).toBe('700');
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('600');
+ expect(typography.sHeadingMD.fontWeight).toBe('700');
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('600');
+ expect(typography.sHeadingSM.fontWeight).toBe('700');
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('600');
+ expect(typography.sBodyMDBold.fontWeight).toBe('700');
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('600');
+ expect(typography.sBodySMBold.fontWeight).toBe('700');
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('600');
+ expect(typography.lHeadingLG.fontWeight).toBe('700');
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('600');
+ expect(typography.lHeadingMD.fontWeight).toBe('700');
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('600');
+ expect(typography.lHeadingSM.fontWeight).toBe('700');
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('600');
+ expect(typography.lBodyMDBold.fontWeight).toBe('700');
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('600');
+ expect(typography.lBodySMBold.fontWeight).toBe('700');
expect(typography.lBodySMBold.fontSize).toStrictEqual(
Number(
diff --git a/packages/design-tokens/stories/Typography.mdx b/packages/design-tokens/stories/Typography.mdx
index b0196f87..86ab2ff2 100644
--- a/packages/design-tokens/stories/Typography.mdx
+++ b/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 (`600`).
+There are three available font weights: regular (`400`), medium (`500`), and bold (`700`).
diff --git a/packages/design-tokens/stories/Typography.stories.tsx b/packages/design-tokens/stories/Typography.stories.tsx
index e375a49a..0aff8372 100644
--- a/packages/design-tokens/stories/Typography.stories.tsx
+++ b/packages/design-tokens/stories/Typography.stories.tsx
@@ -531,7 +531,7 @@ export const FontWeight: StoryFn = () => {
<>
Regular 400
Medium 500
- Bold 600
+ Bold 700
>
);
};