feat(styles): add support for IBM Plex from the @ibm/plex package

packages/carbon-react/.storybook/styles.scss

@@ -5,12 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../index.scss' as styles with (
-  $css--font-face: true,
-  $css--plex-arabic: true,
-);
-@use '../scss/components/button';
-@use '../scss/components/tag';
+@use '../index.scss' as styles;
 
 :root {
   @include styles.theme(styles.$white);
@@ -31,16 +26,3 @@
 body {
   background: styles.$background;
 }
-
-html[lang='en'] body {
-  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
-}
-
-html[lang='ar'] body {
-  font-family: 'IBM Plex Sans Arabic', 'Helvetica Neue', Arial, sans-serif;
-}
-
-.text-mono {
-  font-family: 'IBM Plex Mono', Menlo, 'DejaVu Sans Mono',
-    'Bitstream Vera Sans Mono', Courier, monospace;
-}

packages/carbon-react/scss/fonts/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/fonts';

packages/carbon-react/scss/fonts/_mono.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/fonts/mono';

packages/carbon-react/scss/fonts/_sans-arabic.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/fonts/sans-arabic';

packages/carbon-react/scss/fonts/_sans-devanagari.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/fonts/sans-devanagari';

packages/carbon-react/scss/fonts/_sans-hebrew.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/fonts/sans-hebrew';

packages/carbon-react/scss/fonts/_sans-thai-looped.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/fonts/sans-thai-looped';

packages/carbon-react/scss/fonts/_sans-thai.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/fonts/sans-thai';

packages/carbon-react/scss/fonts/_sans.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/fonts/sans';

packages/carbon-react/scss/fonts/_serif.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/fonts/serif';

packages/carbon-react/src/components/Plex/Plex.stories.js

@@ -4,62 +4,98 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
+import './story.scss';
+
 import React from 'react';
 
 export default {
-  title: 'Elements/Plex',
+  title: 'Elements/IBM Plex',
   argTypes: {
     fontWeight: {
+      control: {
+        type: 'radio',
+      },
       defaultValue: 'Regular',
-      options: [
-        'Thin',
-        'Extra Light',
-        'Light',
-        'Regular',
-        'Text',
-        'Medium',
-        'SemiBold',
-        'Bold',
-      ],
       mapping: {
-        Thin: 100,
-        'Extra Light': 200,
         Light: 300,
         Regular: 400,
-        Text: 450,
-        Medium: 500,
         SemiBold: 600,
-        Bold: 700,
       },
-      control: { type: 'radio' },
-    },
-    fontSize: {
-      defaultValue: 16,
-      control: { type: 'range', min: 12, max: 54, step: 4 },
+      options: ['Light', 'Regular', 'SemiBold'],
     },
   },
 };
 
-export const English = (args) => {
+export const IBMPlexMono = (args) => {
+  return (
+    <code dir="auto" style={args} className="text-mono">
+      This paragraph is in English and goes left to right.
+    </code>
+  );
+};
+
+export const IBMPlexSansArabic = (args) => {
   return (
-    <p dir="auto" style={args}>
-      This paragraph is in English and correctly goes left to right.
+    <p dir="auto" style={args} className="text-sans-arabic">
+      هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.
     </p>
   );
 };
 
-export const Mono = (args) => {
+export const IBMPlexSansDevanagari = (args) => {
   return (
-    <code className="text-mono" style={args}>
-      This paragraph is in English and is monospaced.
-    </code>
+    <p dir="auto" style={args} className="text-sans-devanagari">
+      कराना अपने सिद्धांत भेदनक्षमता गुजरना विनिमय पेदा ध्येय संपादक आशाआपस ।क
+      सक्षम नयेलिए सोफ़्टवेर सुस्पश्ट संभव जिसकी औषधिक संपादक प्रतिबध उपलब्धता
+      कैसे पढने विभाग पुर्णता गोपनीयता विवरन दिशामे प्रेरना व्याख्या भाषए ऎसाजीस
+      आधुनिक विकेन्द्रित कैसे बनाति परस्पर मुख्यतह अनुवादक उन्हे बारे लेकिन रखति
+      मानसिक जानकारी विभाग उसके जिम्मे सिद्धांत प्राथमिक समाज सारांश दुनिया
+      आवश्यकत ध्वनि विषय औषधिक ब्रौशर उसीएक् असक्षम आवश्यकत कार्यसिधान्तो देखने
+      जिवन
+    </p>
   );
 };
 
-export const Arabic = (args) => {
+export const IBMPlexSansHebrew = (args) => {
   return (
-    <p dir="auto" style={args}>
-      هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.
+    <p dir="auto" style={args} className="text-sans-hebrew">
+      גם החלה ואלקטרוניקה שער, כתב החול משפטית אדריכלות אם. אנא אודות חרטומים
+      דת, אחר תחבורה מדריכים דת. ראשי ומהימנה לרפובליקה כדי גם, של בקר מתוך
+      ביוני, ויקימדיה בהיסטוריה אם מלא. הבהרה הספרות האטמוספירה או אחר, את ביוני
+      תאולוגיה אנא, סדר ב לתרום בחירות בלשנות.
+    </p>
+  );
+};
+
+export const IBMPlexSansThaiLooped = (args) => {
+  return (
+    <p dir="auto" style={args} className="text-sans-thai-looped">
+      ลักษณะของตัวพิมพ์แต่ละตัวสามารถแสดงออกได้ถึงระดับเสียง
+    </p>
+  );
+};
+
+export const IBMPlexSansThai = (args) => {
+  return (
+    <p dir="auto" style={args} className="text-sans-thai">
+      ลักษณะของตัวพิมพ์แต่ละตัวสามารถแสดงออกได้ถึงระดับเสียง
+    </p>
+  );
+};
+
+export const IBMPlexSans = (args) => {
+  return (
+    <p dir="auto" style={args} className="text-sans">
+      This paragraph is in English and goes left to right.
+    </p>
+  );
+};
+
+export const IBMPlexSerif = (args) => {
+  return (
+    <p dir="auto" style={args} className="text-serif">
+      This paragraph is in English and goes left to right.
     </p>
   );
 };

packages/carbon-react/src/components/Plex/story.scss

@@ -0,0 +1,51 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '../../../scss/type';
+@use '../../../scss/fonts/sans-arabic';
+@use '../../../scss/fonts/sans-devanagari';
+@use '../../../scss/fonts/sans-hebrew';
+@use '../../../scss/fonts/sans-thai-looped';
+@use '../../../scss/fonts/sans-thai';
+
+@include sans-arabic.default();
+@include sans-devanagari.default();
+@include sans-hebrew.default();
+@include sans-thai-looped.default();
+@include sans-thai.default();
+
+.text-mono {
+  font-family: type.font-family('mono');
+}
+
+.text-sans-arabic {
+  font-family: type.font-family('sans-arabic');
+}
+
+.text-sans-devanagari {
+  font-family: type.font-family('sans-devanagari');
+}
+
+.text-sans-hebrew {
+  font-family: type.font-family('sans-hebrew');
+}
+
+.text-sans-thai-looped {
+  font-family: type.font-family('sans-thai-looped');
+}
+
+.text-sans-thai {
+  font-family: type.font-family('sans-thai');
+}
+
+.text-sans {
+  font-family: type.font-family('sans');
+}
+
+.text-serif {
+  font-family: type.font-family('serif');
+}

packages/carbon-react/tasks/build-styles.js

@@ -63,6 +63,20 @@ async function build() {
         type: 'file',
         filepath: '_zone.scss',
       },
+      {
+        type: 'directory',
+        filepath: 'compat',
+        files: [
+          {
+            type: 'file',
+            filepath: '_theme.scss',
+          },
+          {
+            type: 'file',
+            filepath: '_themes.scss',
+          },
+        ],
+      },
       {
         type: 'directory',
         filepath: 'components',
@@ -491,15 +505,43 @@ async function build() {
       },
       {
         type: 'directory',
-        filepath: 'compat',
+        filepath: 'fonts',
         files: [
           {
             type: 'file',
-            filepath: '_theme.scss',
+            filepath: '_index.scss',
           },
           {
             type: 'file',
-            filepath: '_themes.scss',
+            filepath: '_mono.scss',
+          },
+          {
+            type: 'file',
+            filepath: '_sans-arabic.scss',
+          },
+          {
+            type: 'file',
+            filepath: '_sans-devanagari.scss',
+          },
+          {
+            type: 'file',
+            filepath: '_sans-hebrew.scss',
+          },
+          {
+            type: 'file',
+            filepath: '_sans-thai-looped.scss',
+          },
+          {
+            type: 'file',
+            filepath: '_sans-thai.scss',
+          },
+          {
+            type: 'file',
+            filepath: '_sans.scss',
+          },
+          {
+            type: 'file',
+            filepath: '_serif.scss',
           },
         ],
       },

packages/styles/__tests__/__snapshots__/styles-test.js.snap

@@ -2,11 +2,14 @@
 
 exports[`Snapshot Tests should match snapshots 1`] = `
 Array [
+  "scss/compat/theme",
+  "scss/compat/themes",
+  "scss/components",
+  "scss/fonts",
   "scss/breakpoint",
   "scss/colors",
   "scss/config",
   "scss/feature-flags",
-  "scss/font-face",
   "scss/grid",
   "scss/motion",
   "scss/reset",