Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat(styles): add support for IBM Plex Sans Devanagari
joshblack committed Dec 1, 2021
commit a6e68f212e67fbc7b92d682b14efb93c8d4e151c
9 changes: 9 additions & 0 deletions packages/carbon-react/scss/fonts/_sans-devanagari.scss
Original file line number Diff line number Diff line change
@@ -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';
14 changes: 14 additions & 0 deletions packages/carbon-react/src/components/Plex/Plex.stories.js
Original file line number Diff line number Diff line change
@@ -43,6 +43,20 @@ export const IBMPlexSansArabic = (args) => {
);
};

export const IBMPlexSansDevanagari = (args) => {
return (
<p dir="auto" style={args} className="text-sans-devanagari">
कराना अपने सिद्धांत भेदनक्षमता गुजरना विनिमय पेदा ध्येय संपादक आशाआपस ।क
सक्षम नयेलिए सोफ़्टवेर सुस्पश्ट संभव जिसकी औषधिक संपादक प्रतिबध उपलब्धता
कैसे पढने विभाग पुर्णता गोपनीयता विवरन दिशामे प्रेरना व्याख्या भाषए ऎसाजीस
आधुनिक विकेन्द्रित कैसे बनाति परस्पर मुख्यतह अनुवादक उन्हे बारे लेकिन रखति
मानसिक जानकारी विभाग उसके जिम्मे सिद्धांत प्राथमिक समाज सारांश दुनिया
आवश्यकत ध्वनि विषय औषधिक ब्रौशर उसीएक् असक्षम आवश्यकत कार्यसिधान्तो देखने
जिवन
</p>
);
};

export const IBMPlexSans = (args) => {
return (
<p dir="auto" style={args} className="text-sans">
6 changes: 6 additions & 0 deletions packages/carbon-react/src/components/Plex/story.scss
Original file line number Diff line number Diff line change
@@ -7,8 +7,10 @@

@use '../../../scss/type';
@use '../../../scss/fonts/sans-arabic';
@use '../../../scss/fonts/sans-devanagari';

@include sans-arabic.default();
@include sans-devanagari.default();

.text-mono {
font-family: type.font-family('mono');
@@ -18,6 +20,10 @@
font-family: type.font-family('sans-arabic');
}

.text-sans-devanagari {
font-family: type.font-family('sans-arabic');
}

.text-sans {
font-family: type.font-family('sans');
}
4 changes: 4 additions & 0 deletions packages/carbon-react/tasks/build-styles.js
Original file line number Diff line number Diff line change
@@ -519,6 +519,10 @@ async function build() {
type: 'file',
filepath: '_sans-arabic.scss',
},
{
type: 'file',
filepath: '_sans-devanagari.scss',
},
{
type: 'file',
filepath: '_sans.scss',
3 changes: 3 additions & 0 deletions packages/styles/scss/fonts/README.md
Original file line number Diff line number Diff line change
@@ -129,3 +129,6 @@ You will need to do the following:
whether it should be included automatically
- [ ] Update the block at the end of the file to call the default mixin of the
file if the font is enabled
- [ ] Update `packages/carbon-react/tasks/build-styles.js` to include the font
file as a re-export
- [ ] Add a story for the font in `Plex.stories.js`
6 changes: 6 additions & 0 deletions packages/styles/scss/fonts/_index.scss
Original file line number Diff line number Diff line change
@@ -10,12 +10,14 @@
@use '../config';
@use './mono';
@use './sans-arabic';
@use './sans-devanagari';
@use './sans';
@use './serif';

$-fonts: (
IBM-Plex-Mono: true,
IBM-Plex-Sans-Arabic: false,
IBM-Plex-Sans-Devanagari: false,
IBM-Plex-Sans: true,
IBM-Plex-Serif: true,
);
@@ -41,6 +43,10 @@ $fonts: map.merge($-fonts, $fonts);
@include sans-arabic.default();
}

@if enabled(sans-devanagari.$name) {
@include sans-devanagari.default();
}

@if enabled(sans.$name) {
@include sans.default();
}
151 changes: 151 additions & 0 deletions packages/styles/scss/fonts/_sans-devanagari.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
//
// 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 '../config';
@use './src';

$font-family: 'IBM Plex Sans Devanagari';
$name: 'IBM-Plex-Sans-Devanagari';
$styles: (normal);
$formats: (woff2, woff);

@mixin thin() {
@font-face {
font-display: config.$font-display;
font-family: $font-family;
font-style: normal;
font-weight: 100;
src: src.get(
$name: $name,
$weight: Thin,
$style: $styles,
$formats: $formats
);
}
}

@mixin extralight() {
@font-face {
font-display: config.$font-display;
font-family: $font-family;
font-style: normal;
font-weight: 200;
src: src.get(
$name: $name,
$weight: ExtraLight,
$style: $styles,
$formats: $formats
);
}
}

@mixin light() {
@font-face {
font-display: config.$font-display;
font-family: $font-family;
font-style: normal;
font-weight: 300;
src: src.get(
$name: $name,
$weight: Light,
$style: $styles,
$formats: $formats
);
}
}

@mixin regular() {
@font-face {
font-display: config.$font-display;
font-family: $font-family;
font-style: normal;
font-weight: 400;
src: src.get(
$name: $name,
$weight: Regular,
$style: $styles,
$formats: $formats
);
}
}

@mixin text() {
@font-face {
font-display: config.$font-display;
font-family: $font-family;
font-style: normal;
font-weight: 450;
src: src.get(
$name: $name,
$weight: Text,
$style: $styles,
$formats: $formats
);
}
}

@mixin medium() {
@font-face {
font-display: config.$font-display;
font-family: $font-family;
font-style: normal;
font-weight: 500;
src: src.get(
$name: $name,
$weight: Medium,
$style: $styles,
$formats: $formats
);
}
}

@mixin semibold() {
@font-face {
font-display: config.$font-display;
font-family: $font-family;
font-style: normal;
font-weight: 500;
src: src.get(
$name: $name,
$weight: SemiBold,
$style: $styles,
$formats: $formats
);
}
}

@mixin bold() {
@font-face {
font-display: config.$font-display;
font-family: $font-family;
font-style: normal;
font-weight: 500;
src: src.get(
$name: $name,
$weight: Bold,
$style: $styles,
$formats: $formats
);
}
}

@mixin all() {
@include thin();
@include extralight();
@include light();
@include regular();
@include text();
@include medium();
@include semibold();
@include bold();
}

@mixin default() {
@include light();
@include regular();
@include semibold();
}
9 changes: 9 additions & 0 deletions packages/styles/scss/fonts/_sans.scss
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@
// LICENSE file in the root directory of this source tree.
//

@use '../config';
@use './src';
@use './unicode';

@@ -18,6 +19,7 @@ $formats: (woff2, woff);
@each $style in $styles {
@each $unicode-range in $unicode-ranges {
@font-face {
font-display: config.$font-display;
font-family: $font-family;
font-style: $style;
font-weight: 100;
@@ -32,6 +34,7 @@ $formats: (woff2, woff);
@each $style in $styles {
@each $unicode-range in $unicode-ranges {
@font-face {
font-display: config.$font-display;
font-family: $font-family;
font-style: $style;
font-weight: 200;
@@ -46,6 +49,7 @@ $formats: (woff2, woff);
@each $style in $styles {
@each $unicode-range in $unicode-ranges {
@font-face {
font-display: config.$font-display;
font-family: $font-family;
font-style: $style;
font-weight: 300;
@@ -60,6 +64,7 @@ $formats: (woff2, woff);
@each $style in $styles {
@each $unicode-range in $unicode-ranges {
@font-face {
font-display: config.$font-display;
font-family: $font-family;
font-style: $style;
font-weight: 400;
@@ -74,6 +79,7 @@ $formats: (woff2, woff);
@each $style in $styles {
@each $unicode-range in $unicode-ranges {
@font-face {
font-display: config.$font-display;
font-family: $font-family;
font-style: $style;
font-weight: 450;
@@ -88,6 +94,7 @@ $formats: (woff2, woff);
@each $style in $styles {
@each $unicode-range in $unicode-ranges {
@font-face {
font-display: config.$font-display;
font-family: $font-family;
font-style: $style;
font-weight: 500;
@@ -102,6 +109,7 @@ $formats: (woff2, woff);
@each $style in $styles {
@each $unicode-range in $unicode-ranges {
@font-face {
font-display: config.$font-display;
font-family: $font-family;
font-style: $style;
font-weight: 600;
@@ -116,6 +124,7 @@ $formats: (woff2, woff);
@each $style in $styles {
@each $unicode-range in $unicode-ranges {
@font-face {
font-display: config.$font-display;
font-family: $font-family;
font-style: $style;
font-weight: 700;
1 change: 1 addition & 0 deletions packages/styles/scss/fonts/_src.scss
Original file line number Diff line number Diff line change
@@ -13,6 +13,7 @@
$-filenames: (
IBM-Plex-Mono: 'IBMPlexMono',
IBM-Plex-Sans-Arabic: 'IBMPlexSansArabic',
IBM-Plex-Sans-Devanagari: 'IBMPlexSansDevanagari',
IBM-Plex-Sans: 'IBMPlexSans',
IBM-Plex-Serif: 'IBMPlexSerif',
);