From f4850c99041e92ed18448d96317071f7312643b1 Mon Sep 17 00:00:00 2001 From: Scott Strubberg Date: Mon, 26 Jul 2021 14:52:17 -0500 Subject: [PATCH 1/4] fix(font-family): added system fonts --- packages/type/scss/_font-family.scss | 16 ++++++++++++---- packages/type/src/fontFamily.js | 10 ++++++---- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/packages/type/scss/_font-family.scss b/packages/type/scss/_font-family.scss index 9803c8013ceb..c2b528ee36f9 100644 --- a/packages/type/scss/_font-family.scss +++ b/packages/type/scss/_font-family.scss @@ -15,14 +15,22 @@ $carbon--font-families: ( unquote( "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" ), - 'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"), + 'sans': + unquote( + "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), 'sans-condensed': - unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"), + unquote( + "'IBM Plex Sans Condensed', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), 'sans-hebrew': unquote( - "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif" + "'IBM Plex Sans Hebrew', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), + 'serif': + unquote( + "'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif" ), - 'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"), ) !default; /// Get the font-family for an IBM Plex font diff --git a/packages/type/src/fontFamily.js b/packages/type/src/fontFamily.js index bd1d7cfcf049..2ff19af30041 100644 --- a/packages/type/src/fontFamily.js +++ b/packages/type/src/fontFamily.js @@ -10,12 +10,14 @@ export const fontFamilies = { mono: "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", - sans: "'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif", + sans: + "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", sansCondensed: - "'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif", + "'IBM Plex Sans Condensed', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", sansHebrew: - "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif", - serif: "'IBM Plex Serif', 'Georgia', Times, serif", + "'IBM Plex Sans Hebrew', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + serif: + "'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif", }; export function fontFamily(name) { From 22f24ca2ba6ce78738f35b1e90f6fa84f838aa4d Mon Sep 17 00:00:00 2001 From: Scott Strubberg Date: Mon, 26 Jul 2021 15:20:53 -0500 Subject: [PATCH 2/4] fix(font-family): updated tests --- .../src/__tests__/__snapshots__/fontFamily-test.js.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/type/src/__tests__/__snapshots__/fontFamily-test.js.snap b/packages/type/src/__tests__/__snapshots__/fontFamily-test.js.snap index 1acc7d992208..ae9bcc9ee0bb 100644 --- a/packages/type/src/__tests__/__snapshots__/fontFamily-test.js.snap +++ b/packages/type/src/__tests__/__snapshots__/fontFamily-test.js.snap @@ -5,9 +5,9 @@ exports[`fontFamily should be printable 1`] = `"font-family: 'IBM Plex Mono', 'M exports[`fontFamily should export the supported font families 1`] = ` Object { "mono": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", - "sans": "'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif", - "sansCondensed": "'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif", - "sansHebrew": "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif", - "serif": "'IBM Plex Serif', 'Georgia', Times, serif", + "sans": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "sansCondensed": "'IBM Plex Sans Condensed', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "sansHebrew": "'IBM Plex Sans Hebrew', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "serif": "'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif", } `; From 51ed37d6ab4426e8f65ae787fc814b48f48efe7b Mon Sep 17 00:00:00 2001 From: Scott Strubberg Date: Mon, 26 Jul 2021 19:36:37 -0500 Subject: [PATCH 3/4] fix(font-family): update reset-test --- packages/type/src/__tests__/__snapshots__/reset-test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/type/src/__tests__/__snapshots__/reset-test.js.snap b/packages/type/src/__tests__/__snapshots__/reset-test.js.snap index 5a152f57b76b..febad093ff24 100644 --- a/packages/type/src/__tests__/__snapshots__/reset-test.js.snap +++ b/packages/type/src/__tests__/__snapshots__/reset-test.js.snap @@ -3,7 +3,7 @@ exports[`reset should be printable 1`] = `"font-size: 16px;"`; exports[`reset should be printable 2`] = ` -"font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; +"font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; font-weight: 400; text-rendering: optimizeLegibility; --webkit--font--smoothing: antialiased; From 9af05b1e86d23db6ca2c49f6b309fad0957fb223 Mon Sep 17 00:00:00 2001 From: Scott Strubberg Date: Thu, 29 Jul 2021 14:04:28 -0500 Subject: [PATCH 4/4] fix(font-family): undid last changes and added more languages --- packages/type/scss/_font-family.scss | 16 ++------ packages/type/scss/modules/_font-family.scss | 38 ++++++++++++++++--- .../__snapshots__/fontFamily-test.js.snap | 8 ++-- .../__snapshots__/reset-test.js.snap | 2 +- packages/type/src/fontFamily.js | 10 ++--- 5 files changed, 46 insertions(+), 28 deletions(-) diff --git a/packages/type/scss/_font-family.scss b/packages/type/scss/_font-family.scss index c2b528ee36f9..9803c8013ceb 100644 --- a/packages/type/scss/_font-family.scss +++ b/packages/type/scss/_font-family.scss @@ -15,22 +15,14 @@ $carbon--font-families: ( unquote( "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" ), - 'sans': - unquote( - "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" - ), + 'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"), 'sans-condensed': - unquote( - "'IBM Plex Sans Condensed', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" - ), + unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"), 'sans-hebrew': unquote( - "'IBM Plex Sans Hebrew', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" - ), - 'serif': - unquote( - "'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif" + "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif" ), + 'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"), ) !default; /// Get the font-family for an IBM Plex font diff --git a/packages/type/scss/modules/_font-family.scss b/packages/type/scss/modules/_font-family.scss index ac0184478061..12f90dfa81bd 100644 --- a/packages/type/scss/modules/_font-family.scss +++ b/packages/type/scss/modules/_font-family.scss @@ -13,16 +13,44 @@ $font-families: ( 'mono': unquote( - "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + "'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace" + ), + 'sans': + unquote( + "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" ), - 'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"), 'sans-condensed': - unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"), + unquote( + "'IBM Plex Sans Condensed', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), + 'sans-arabic': + unquote( + "'IBM Plex Sans Arabic', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), + 'sans-devanagari': + unquote( + "'IBM Plex Sans Devanagari', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), 'sans-hebrew': unquote( - "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif" + "'IBM Plex Sans Hebrew', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), + 'sans-jp': + unquote( + "'IBM Plex Sans JP', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), + 'sans-kr': + unquote( + "'IBM Plex Sans KR', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), + 'sans-thai': + unquote( + "'IBM Plex Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), + 'serif': + unquote( + "'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif" ), - 'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"), ) !default; /// Get the font-family for an IBM Plex font diff --git a/packages/type/src/__tests__/__snapshots__/fontFamily-test.js.snap b/packages/type/src/__tests__/__snapshots__/fontFamily-test.js.snap index ae9bcc9ee0bb..1acc7d992208 100644 --- a/packages/type/src/__tests__/__snapshots__/fontFamily-test.js.snap +++ b/packages/type/src/__tests__/__snapshots__/fontFamily-test.js.snap @@ -5,9 +5,9 @@ exports[`fontFamily should be printable 1`] = `"font-family: 'IBM Plex Mono', 'M exports[`fontFamily should export the supported font families 1`] = ` Object { "mono": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", - "sans": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "sansCondensed": "'IBM Plex Sans Condensed', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "sansHebrew": "'IBM Plex Sans Hebrew', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "serif": "'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif", + "sans": "'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif", + "sansCondensed": "'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif", + "sansHebrew": "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif", + "serif": "'IBM Plex Serif', 'Georgia', Times, serif", } `; diff --git a/packages/type/src/__tests__/__snapshots__/reset-test.js.snap b/packages/type/src/__tests__/__snapshots__/reset-test.js.snap index febad093ff24..5a152f57b76b 100644 --- a/packages/type/src/__tests__/__snapshots__/reset-test.js.snap +++ b/packages/type/src/__tests__/__snapshots__/reset-test.js.snap @@ -3,7 +3,7 @@ exports[`reset should be printable 1`] = `"font-size: 16px;"`; exports[`reset should be printable 2`] = ` -"font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; +"font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; text-rendering: optimizeLegibility; --webkit--font--smoothing: antialiased; diff --git a/packages/type/src/fontFamily.js b/packages/type/src/fontFamily.js index 2ff19af30041..bd1d7cfcf049 100644 --- a/packages/type/src/fontFamily.js +++ b/packages/type/src/fontFamily.js @@ -10,14 +10,12 @@ export const fontFamilies = { mono: "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", - sans: - "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + sans: "'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif", sansCondensed: - "'IBM Plex Sans Condensed', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif", sansHebrew: - "'IBM Plex Sans Hebrew', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - serif: - "'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif", + "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif", + serif: "'IBM Plex Serif', 'Georgia', Times, serif", }; export function fontFamily(name) {