feat(Plex): add plex package to @carbon/styles (#9350)

* feat(Plex): add plex package to @carbon/styles * feat(Plex): only emit if css--font-face is true * test(snapshot): update snapshots
carbon-design-system · Jul 29, 2021 · 29f7380 · 29f7380
1 parent cb71475
commit 29f7380
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 23 deletions.
diff --git a/packages/carbon-react/.storybook/styles.scss b/packages/carbon-react/.storybook/styles.scss
@@ -9,19 +9,10 @@ $feature-flags: (
   enable-v11-release: true,
 );
 
-@use "~@ibm/plex/default" as sans;
-@use "~@ibm/plex/mono";
-@use "~@ibm/plex/arabic";
-
 @use '../index.scss' as styles;
 @use '../scss/components/button';
 @use '../scss/components/tag';
 
-// For now, including all weights for testing
-@include arabic.all;
-@include sans.all;
-@include mono.all;
-
 :root {
   @include styles.theme(styles.$white, button.$white, tag.$white);
 }

diff --git a/packages/carbon-react/.storybook/theme.js b/packages/carbon-react/.storybook/theme.js
@@ -33,8 +33,9 @@ export default create({
   appBorderRadius: 0,
 
   // Typography
-  fontBase: '"IBM Plex Sans", sans-serif',
-  fontCode: '"IBM Plex Mono", monospace',
+  fontBase: "'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif",
+  fontCode:
+    "'IBM Plex Mono', Menlo, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace",
 
   // Text colors
   textColor: text01,

diff --git a/packages/carbon-react/index.scss b/packages/carbon-react/index.scss
@@ -6,6 +6,6 @@
 //
 
 @forward '@carbon/styles' with (
-  $css--font-face: false,
-  $css--default-type: false,
+  $css--font-face: true,
+  $css--plex-arabic: true,
 );
diff --git a/packages/carbon-react/package.json b/packages/carbon-react/package.json
@@ -44,7 +44,6 @@
     "@carbon/icons-react": "^10.36.0",
     "@carbon/styles": "^0.11.0",
     "@carbon/telemetry": "0.0.0-alpha.6",
-    "@ibm/plex": "6.0.0-next.6",
     "carbon-components-react": "^7.40.0"
   },
   "devDependencies": {

diff --git a/packages/carbon-react/src/components/Grid/Grid.stories.scss b/packages/carbon-react/src/components/Grid/Grid.stories.scss
@@ -2,12 +2,6 @@
 @import '~carbon-components/scss/globals/scss/colors';
 @import '~carbon-components/scss/globals/scss/typography';
 
-p {
-  @include type-style('body-short-02');
-
-  margin-top: $spacing-05;
-}
-
 // Grid modes
 .bx--css-grid {
   background-color: $blue-20;
@@ -18,7 +12,7 @@ p {
   @include type-style('code-02');
 }
 
-p:first-of-type:not(.bx--progress-label) {
+.bx--css-grid p:first-of-type {
   //messing up progress indicator stories
   margin-top: 0;
 }

diff --git a/packages/styles/index.scss b/packages/styles/index.scss
@@ -7,6 +7,7 @@
 
 @forward 'scss/config';
 @forward 'scss/colors' hide $white;
+@forward 'scss/font-face';
 @forward 'scss/grid';
 @forward 'scss/motion';
 @forward 'scss/type';

diff --git a/packages/styles/package.json b/packages/styles/package.json
@@ -24,7 +24,8 @@
     "@carbon/layout": "^10.28.0",
     "@carbon/motion": "^10.21.0",
     "@carbon/themes": "^10.39.0",
-    "@carbon/type": "^10.32.0"
+    "@carbon/type": "^10.32.0",
+    "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
     "@carbon/test-utils": "^10.16.0",

diff --git a/packages/styles/scss/__tests__/__snapshots__/config-test.js.snap b/packages/styles/scss/__tests__/__snapshots__/config-test.js.snap
@@ -4,6 +4,7 @@ exports[`@carbon/styles/scss/config Public API 1`] = `
 Object {
   "css--default-type": true,
   "css--font-face": true,
+  "css--plex-arabic": false,
   "css--reset": true,
   "prefix": "bx",
 }

diff --git a/packages/styles/scss/_config.scss b/packages/styles/scss/_config.scss
@@ -29,3 +29,9 @@ $css--reset: true !default;
 /// @type Bool
 /// @group config
 $css--default-type: true !default;
+
+/// If true, include IBM Plex Arabic type
+/// @access public
+/// @type Bool
+/// @group config
+$css--plex-arabic: false !default;
diff --git a/packages/styles/scss/_font-face.scss b/packages/styles/scss/_font-face.scss
@@ -0,0 +1,13 @@
+@use 'config';
+@use '@ibm/plex/default' as sans;
+@use '@ibm/plex/mono' as mono;
+@use '@ibm/plex/arabic' as arabic;
+
+@if config.$css--font-face == true {
+  @include sans.all;
+  @include mono.all;
+
+  @if config.$css--plex-arabic == true {
+    @include arabic.all;
+  }
+} ;
diff --git a/yarn.lock b/yarn.lock
@@ -2000,7 +2000,6 @@ __metadata:
     "@carbon/styles": ^0.11.0-rc.0
     "@carbon/telemetry": 0.0.0-alpha.6
     "@carbon/themes": ^10.39.0
-    "@ibm/plex": 6.0.0-next.6
     "@rollup/plugin-babel": ^5.3.0
     "@rollup/plugin-commonjs": ^18.0.0
     "@rollup/plugin-node-resolve": ^11.2.1
@@ -2077,6 +2076,7 @@ __metadata:
     "@carbon/test-utils": ^10.16.0
     "@carbon/themes": ^10.39.0
     "@carbon/type": ^10.32.0
+    "@ibm/plex": 6.0.0-next.6
     css: ^3.0.0
   languageName: unknown
   linkType: soft