feat(@ibm/plex): Update plex dependency to use new packages (#17025)

* feat(@ibm/plex): migrate to individual plex packages * feat(@ibm/plex): add package-name to get resolver * fix(plex): add font-feature-settings to reset * fix(plex): add woff back to fonts that are not split --------- Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>
carbon-design-system · Aug 9, 2024 · efd08bc · efd08bc
1 parent e6d6fa4
commit efd08bc
Show file tree

Hide file tree

Showing 23 changed files with 553 additions and 261 deletions.
diff --git a/.yarn/cache/@ibm-plex-mono-npm-0.0.3-alpha.0-2becc6711b-fbdfb70762.zip b/.yarn/cache/@ibm-plex-mono-npm-0.0.3-alpha.0-2becc6711b-fbdfb70762.zip
diff --git a/.yarn/cache/@ibm-plex-npm-6.0.0-next.6-9aee23c93c-1a81475964.zip b/.yarn/cache/@ibm-plex-npm-6.0.0-next.6-9aee23c93c-1a81475964.zip
diff --git a/.yarn/cache/@ibm-plex-sans-arabic-npm-0.0.3-alpha.0-5a162c0760-c390dd9788.zip b/.yarn/cache/@ibm-plex-sans-arabic-npm-0.0.3-alpha.0-5a162c0760-c390dd9788.zip
diff --git a/.yarn/cache/@ibm-plex-sans-devanagari-npm-0.0.3-alpha.0-7f13ef378d-ef3cd96710.zip b/.yarn/cache/@ibm-plex-sans-devanagari-npm-0.0.3-alpha.0-7f13ef378d-ef3cd96710.zip
diff --git a/.yarn/cache/@ibm-plex-sans-hebrew-npm-0.0.3-alpha.0-e21223915a-e67ed6e081.zip b/.yarn/cache/@ibm-plex-sans-hebrew-npm-0.0.3-alpha.0-e21223915a-e67ed6e081.zip
diff --git a/.yarn/cache/@ibm-plex-sans-npm-0.0.3-alpha.0-eadb18db06-5b0b0521db.zip b/.yarn/cache/@ibm-plex-sans-npm-0.0.3-alpha.0-eadb18db06-5b0b0521db.zip
diff --git a/.yarn/cache/@ibm-plex-sans-thai-looped-npm-0.0.3-alpha.0-11cf24af96-11272b1353.zip b/.yarn/cache/@ibm-plex-sans-thai-looped-npm-0.0.3-alpha.0-11cf24af96-11272b1353.zip
diff --git a/.yarn/cache/@ibm-plex-sans-thai-npm-0.0.3-alpha.0-9228f6228a-baac49d77d.zip b/.yarn/cache/@ibm-plex-sans-thai-npm-0.0.3-alpha.0-9228f6228a-baac49d77d.zip
diff --git a/.yarn/cache/@ibm-plex-serif-npm-0.0.3-alpha.0-ef5dcb26c6-462dcf3393.zip b/.yarn/cache/@ibm-plex-serif-npm-0.0.3-alpha.0-ef5dcb26c6-462dcf3393.zip
diff --git a/README.md b/README.md
@@ -297,11 +297,8 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/nandininarayanofficial"><img src="https://avatars.githubusercontent.com/u/165769075?v=4?s=100" width="100px;" alt=""/><br /><sub><b>nandininarayanofficial</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=nandininarayanofficial" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/digiacomo-a"><img src="https://avatars.githubusercontent.com/u/117646602?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andrea DG</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=digiacomo-a" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/lluisrojass"><img src="https://avatars.githubusercontent.com/u/15043356?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luis</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=lluisrojass" title="Code">💻</a></td>
-
     <td align="center"><a href="https://github.com/lharrison13"><img src="https://avatars.githubusercontent.com/u/172074450?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luke Harrison</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=lharrison13" title="Code">💻</a></td>
-
     <td align="center"><a href="https://github.com/tekno0ryder"><img src="https://avatars.githubusercontent.com/u/8721803?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ahmed Alsinan</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=tekno0ryder" title="Code">💻</a></td>
-
   </tr>
 </table>
 

diff --git a/packages/styles/package.json b/packages/styles/package.json
@@ -47,7 +47,14 @@
     "@carbon/motion": "^11.20.0",
     "@carbon/themes": "^11.38.0",
     "@carbon/type": "^11.29.0",
-    "@ibm/plex": "6.0.0-next.6",
+    "@ibm/plex-mono": "0.0.3-alpha.0",
+    "@ibm/plex-sans": "0.0.3-alpha.0",
+    "@ibm/plex-sans-arabic": "0.0.3-alpha.0",
+    "@ibm/plex-sans-devanagari": "0.0.3-alpha.0",
+    "@ibm/plex-sans-hebrew": "0.0.3-alpha.0",
+    "@ibm/plex-sans-thai": "0.0.3-alpha.0",
+    "@ibm/plex-sans-thai-looped": "0.0.3-alpha.0",
+    "@ibm/plex-serif": "0.0.3-alpha.0",
     "@ibm/telemetry-js": "^1.5.0"
   },
   "devDependencies": {

diff --git a/packages/styles/scss/_reset.scss b/packages/styles/scss/_reset.scss
@@ -99,6 +99,7 @@
     border: 0;
     margin: 0;
     font: inherit;
+    font-feature-settings: 'liga' 1;
     font-size: 100%;
     vertical-align: baseline;
   }

diff --git a/packages/styles/scss/fonts/__tests__/__snapshots__/fonts-test.js.snap b/packages/styles/scss/fonts/__tests__/__snapshots__/fonts-test.js.snap
diff --git a/packages/styles/scss/fonts/_mono.scss b/packages/styles/scss/fonts/_mono.scss
@@ -13,7 +13,8 @@ $font-family: 'IBM Plex Mono';
 $name: 'IBM-Plex-Mono';
 $styles: (normal, italic);
 $unicode-ranges: (Cyrillic, Pi, Latin3, Latin2, Latin1);
-$formats: (woff2, woff);
+$formats: (woff2);
+$package-name: 'mono';
 
 @mixin thin($styles: $styles, $unicode-ranges: $unicode-ranges) {
   @each $style in $styles {
@@ -23,7 +24,14 @@ $formats: (woff2, woff);
         font-family: $font-family;
         font-style: $style;
         font-weight: 100;
-        src: src.get($name, Thin, $style, $unicode-range, $formats);
+        src: src.get(
+          $name,
+          Thin,
+          $style,
+          $unicode-range,
+          $formats,
+          $package-name
+        );
         unicode-range: unicode.get-range($unicode-range);
       }
     }
@@ -38,7 +46,14 @@ $formats: (woff2, woff);
         font-family: $font-family;
         font-style: $style;
         font-weight: 200;
-        src: src.get($name, ExtraLight, $style, $unicode-range, $formats);
+        src: src.get(
+          $name,
+          ExtraLight,
+          $style,
+          $unicode-range,
+          $formats,
+          $package-name
+        );
         unicode-range: unicode.get-range($unicode-range);
       }
     }
@@ -53,7 +68,14 @@ $formats: (woff2, woff);
         font-family: $font-family;
         font-style: $style;
         font-weight: 300;
-        src: src.get($name, Light, $style, $unicode-range, $formats);
+        src: src.get(
+          $name,
+          Light,
+          $style,
+          $unicode-range,
+          $formats,
+          $package-name
+        );
         unicode-range: unicode.get-range($unicode-range);
       }
     }
@@ -68,7 +90,14 @@ $formats: (woff2, woff);
         font-family: $font-family;
         font-style: $style;
         font-weight: 400;
-        src: src.get($name, Regular, $style, $unicode-range, $formats);
+        src: src.get(
+          $name,
+          Regular,
+          $style,
+          $unicode-range,
+          $formats,
+          $package-name
+        );
         unicode-range: unicode.get-range($unicode-range);
       }
     }
@@ -83,7 +112,14 @@ $formats: (woff2, woff);
         font-family: $font-family;
         font-style: $style;
         font-weight: 450;
-        src: src.get($name, Text, $style, $unicode-range, $formats);
+        src: src.get(
+          $name,
+          Text,
+          $style,
+          $unicode-range,
+          $formats,
+          $package-name
+        );
         unicode-range: unicode.get-range($unicode-range);
       }
     }
@@ -98,7 +134,14 @@ $formats: (woff2, woff);
         font-family: $font-family;
         font-style: $style;
         font-weight: 500;
-        src: src.get($name, Medium, $style, $unicode-range, $formats);
+        src: src.get(
+          $name,
+          Medium,
+          $style,
+          $unicode-range,
+          $formats,
+          $package-name
+        );
         unicode-range: unicode.get-range($unicode-range);
       }
     }
@@ -113,7 +156,14 @@ $formats: (woff2, woff);
         font-family: $font-family;
         font-style: $style;
         font-weight: 600;
-        src: src.get($name, SemiBold, $style, $unicode-range, $formats);
+        src: src.get(
+          $name,
+          SemiBold,
+          $style,
+          $unicode-range,
+          $formats,
+          $package-name
+        );
         unicode-range: unicode.get-range($unicode-range);
       }
     }
@@ -128,7 +178,14 @@ $formats: (woff2, woff);
         font-family: $font-family;
         font-style: $style;
         font-weight: 700;
-        src: src.get($name, Bold, $style, $unicode-range, $formats);
+        src: src.get(
+          $name,
+          Bold,
+          $style,
+          $unicode-range,
+          $formats,
+          $package-name
+        );
         unicode-range: unicode.get-range($unicode-range);
       }
     }

diff --git a/packages/styles/scss/fonts/_sans-arabic.scss b/packages/styles/scss/fonts/_sans-arabic.scss
@@ -12,6 +12,7 @@ $font-family: 'IBM Plex Sans Arabic';
 $name: 'IBM-Plex-Sans-Arabic';
 $styles: (normal);
 $formats: (woff2, woff);
+$package-name: 'sans-arabic';
 
 @mixin thin() {
   @font-face {
@@ -23,7 +24,8 @@ $formats: (woff2, woff);
       $name: $name,
       $weight: Thin,
       $style: $styles,
-      $formats: $formats
+      $formats: $formats,
+      $package-name: $package-name
     );
   }
 }
@@ -38,7 +40,8 @@ $formats: (woff2, woff);
       $name: $name,
       $weight: ExtraLight,
       $style: $styles,
-      $formats: $formats
+      $formats: $formats,
+      $package-name: $package-name
     );
   }
 }
@@ -53,7 +56,8 @@ $formats: (woff2, woff);
       $name: $name,
       $weight: Light,
       $style: $styles,
-      $formats: $formats
+      $formats: $formats,
+      $package-name: $package-name
     );
   }
 }
@@ -68,7 +72,8 @@ $formats: (woff2, woff);
       $name: $name,
       $weight: Regular,
       $style: $styles,
-      $formats: $formats
+      $formats: $formats,
+      $package-name: $package-name
     );
   }
 }
@@ -83,7 +88,8 @@ $formats: (woff2, woff);
       $name: $name,
       $weight: Text,
       $style: $styles,
-      $formats: $formats
+      $formats: $formats,
+      $package-name: $package-name
     );
   }
 }
@@ -98,7 +104,8 @@ $formats: (woff2, woff);
       $name: $name,
       $weight: Medium,
       $style: $styles,
-      $formats: $formats
+      $formats: $formats,
+      $package-name: $package-name
     );
   }
 }
@@ -113,7 +120,8 @@ $formats: (woff2, woff);
       $name: $name,
       $weight: SemiBold,
       $style: $styles,
-      $formats: $formats
+      $formats: $formats,
+      $package-name: $package-name
     );
   }
 }
@@ -128,7 +136,8 @@ $formats: (woff2, woff);
       $name: $name,
       $weight: Bold,
       $style: $styles,
-      $formats: $formats
+      $formats: $formats,
+      $package-name: $package-name
     );
   }
 }

diff --git a/packages/styles/scss/fonts/_sans-devanagari.scss b/packages/styles/scss/fonts/_sans-devanagari.scss
@@ -12,6 +12,7 @@ $font-family: 'IBM Plex Sans Devanagari';
 $name: 'IBM-Plex-Sans-Devanagari';
 $styles: (normal);
 $formats: (woff2, woff);
+$package-name: 'sans-devanagari';
 
 @mixin thin() {
   @font-face {
@@ -23,7 +24,8 @@ $formats: (woff2, woff);
       $name: $name,
       $weight: Thin,
       $style: $styles,
-      $formats: $formats
+      $formats: $formats,
+      $package-name: $package-name
     );
   }
 }
@@ -38,7 +40,8 @@ $formats: (woff2, woff);
       $name: $name,
       $weight: ExtraLight,
       $style: $styles,
-      $formats: $formats
+      $formats: $formats,
+      $package-name: $package-name
     );
   }
 }
@@ -53,7 +56,8 @@ $formats: (woff2, woff);
       $name: $name,
       $weight: Light,
       $style: $styles,
-      $formats: $formats
+      $formats: $formats,
+      $package-name: $package-name
     );
   }
 }
@@ -68,7 +72,8 @@ $formats: (woff2, woff);
       $name: $name,
       $weight: Regular,
       $style: $styles,
-      $formats: $formats
+      $formats: $formats,
+      $package-name: $package-name
     );
   }
 }
@@ -83,7 +88,8 @@ $formats: (woff2, woff);
       $name: $name,
       $weight: Text,
       $style: $styles,
-      $formats: $formats
+      $formats: $formats,
+      $package-name: $package-name
     );
   }
 }
@@ -98,7 +104,8 @@ $formats: (woff2, woff);
       $name: $name,
       $weight: Medium,
       $style: $styles,
-      $formats: $formats
+      $formats: $formats,
+      $package-name: $package-name
     );
   }
 }
@@ -113,7 +120,8 @@ $formats: (woff2, woff);
       $name: $name,
       $weight: SemiBold,
       $style: $styles,
-      $formats: $formats
+      $formats: $formats,
+      $package-name: $package-name
     );
   }
 }
@@ -128,7 +136,8 @@ $formats: (woff2, woff);
       $name: $name,
       $weight: Bold,
       $style: $styles,
-      $formats: $formats
+      $formats: $formats,
+      $package-name: $package-name
     );
   }
 }