diff --git a/packages/carbon-react/.storybook/styles.scss b/packages/carbon-react/.storybook/styles.scss index cb2c6a9b733c..faa2deec2de1 100644 --- 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 index 206036aaabce..90f89efc677b 100644 --- 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 index 377b5839ac9c..ff8c7cc8dfce 100644 --- 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 index bee51e3e44f9..8aeca15c0555 100644 --- 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 index 898520b21692..bcc48e5d4756 100644 --- 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 index 7eee2218693d..05b2ded8d900 100644 --- 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 index 6118d1ec6104..df4bb3ba8871 100644 --- 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 index 995b166632f9..28ae508307db 100644 --- 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 index 4fdd167c7af7..6aef735107fd 100644 --- 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 new file mode 100644 index 000000000000..013c3d86b193 --- /dev/null +++ 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 index e0847a4d9591..f4896db535e7 100644 --- 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