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 ); };