diff --git a/apps/storybook-react-native/.storybook/FontLoader.js b/apps/storybook-react-native/.storybook/FontLoader.js
index 23a7e83e..a1d65a5f 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 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'),
diff --git a/apps/storybook-react-native/fonts/Geist/Geist SemiBold.otf b/apps/storybook-react-native/fonts/Geist/Geist SemiBold.otf
new file mode 100644
index 00000000..8184ec98
Binary files /dev/null and b/apps/storybook-react-native/fonts/Geist/Geist SemiBold.otf differ
diff --git a/apps/storybook-react-native/fonts/Geist/Geist SemiBoldItalic.otf b/apps/storybook-react-native/fonts/Geist/Geist SemiBoldItalic.otf
new file mode 100644
index 00000000..32475d32
Binary files /dev/null and b/apps/storybook-react-native/fonts/Geist/Geist SemiBoldItalic.otf differ
diff --git a/apps/storybook-react/fonts/Geist/Geist SemiBold Italic.woff2 b/apps/storybook-react/fonts/Geist/Geist SemiBold Italic.woff2
new file mode 100644
index 00000000..2f53ced4
Binary files /dev/null and b/apps/storybook-react/fonts/Geist/Geist SemiBold Italic.woff2 differ
diff --git a/apps/storybook-react/fonts/Geist/Geist SemiBold.woff2 b/apps/storybook-react/fonts/Geist/Geist SemiBold.woff2
new file mode 100644
index 00000000..83845230
Binary files /dev/null and b/apps/storybook-react/fonts/Geist/Geist SemiBold.woff2 differ
diff --git a/apps/storybook-react/tailwind.css b/apps/storybook-react/tailwind.css
index 0b08f01e..ccc61b87 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: 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');
}
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 3e00f564..db268773 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 `700`)
+- `FontWeight.Bold` (Weight `600`)
### `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 83acac7b..a47ef259 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 (700)
+ Bold (600)
),
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 fce2e9fd..56f5b3bd 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: 700
+ * Bold: 600
*/
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 f1838343..b26f13b2 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 - 700
+ * Weight - 600
*/
- Bold = '700',
+ Bold = '600',
/**
* 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 27d72894..c6bffa46 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
|
- 700 |
+ 600 |
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 dbc08113..550d7669 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: 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 = {
Regular (400)
Medium (500)
- Bold (700)
+ Bold (600)
),
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 9ab1fb03..847c2eda 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: 700
+ * Bold: 600
*/
fontWeight?: FontWeight;
/**
diff --git a/packages/design-system-react/src/types/index.ts b/packages/design-system-react/src/types/index.ts
index f685b062..cf326e45 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 - 700
+ * Weight - 600
*/
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 dc01e31e..5cf508c3 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: '700',
+ * fontWeight: '600',
* letterSpacing: '0',
* lineHeight: '40px',
* },
diff --git a/packages/design-tokens/src/css/typography.css b/packages/design-tokens/src/css/typography.css
index 27f4fdf3..3385c8a3 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: 700;
+ --font-weight-bold: 600;
/* 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 7baf941d..da0c8930 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": "700",
+ "value": "600",
"type": "fontWeights"
}
},
diff --git a/packages/design-tokens/src/js/typography/fontWeights.ts b/packages/design-tokens/src/js/typography/fontWeights.ts
index af4c0306..3df4e520 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: '700',
+ bold: '600',
};
diff --git a/packages/design-tokens/src/js/typography/typography.test.ts b/packages/design-tokens/src/js/typography/typography.test.ts
index 29f18cfa..d3eebf36 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('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(
diff --git a/packages/design-tokens/stories/Typography.mdx b/packages/design-tokens/stories/Typography.mdx
index 86ab2ff2..b0196f87 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 (`700`).
+There are three available font weights: regular (`400`), medium (`500`), and bold (`600`).
diff --git a/packages/design-tokens/stories/Typography.stories.tsx b/packages/design-tokens/stories/Typography.stories.tsx
index 0aff8372..e375a49a 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 700
+ Bold 600
>
);
};