feat(type): update default type resolver to use Akamai CDN (#11070)

* Use Akamai CDN for Plex (#11002)

* feat(type): provide Plex through Akamai CDN

* docs(type): remove references to google fonts

* docs(type): clarify intended usage of Akamai CDN

* fix(type): ensure correct font-display

* fix(type): include url root

* fix(type): use font-display for sans condensed

* chore: false commit to re-kick v10 workflow actions

* revert: false commit to re-kick v10 workflow actions

* feat(type): update default type resolver to use Akamai CDN

* docs(type): akamai cdn updates

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

docs/guides/ibm-plex.md

@@ -23,13 +23,13 @@
 ## Overview
 
 The Carbon Design System uses [IBM Plex](https://www.ibm.com/plex) as its
-typeface. For teams using Carbon, this font is loaded by default through Google
-Fonts if you are using any of our projects, or if you are using
+typeface. For teams using Carbon, this font is loaded by default from the
+`@ibm/plex` package. Alternatively, the font can be loaded from an Akamai CDN if
+you are using any of our projects, or if you are using
 [`@carbon/type`](../packages/type) directly.
 
-However, the Google Fonts strategy loaded by default is not recommended for
-production use-cases. Below, we offer several alternative ways to include IBM
-Plex in your project for a variety of situations.
+Below, we offer several alternative ways to include IBM Plex in your project for
+a variety of situations.
 
 If you feel like a situation isn't fully covered, or you have an idea for
 another one to add, please
@@ -202,8 +202,8 @@ update to this document with guidance!
 
 ### unpkg
 
-If you're looking for a quick way to include IBM Plex, and the default Google
-Font solution from `@carbon/type` isn't working for you, you can use the hosted
+If you're looking for a quick way to include IBM Plex, and the default Akamai
+CDN solution from `@carbon/type` isn't working for you, you can use the hosted
 assets from [`unpkg`](https://unpkg.com).
 
 You can see the URL for a given font face by visiting the URL for the package
@@ -254,7 +254,7 @@ or `url-loader` in your webpack config.
 
 If hosting in a CDN, you will need to manually extract the files that you need
 and publish them to your CDN. For an example of how to structure these, you can
-view how Google Fonts does this in
+view how Akamai does this in
 [`@carbon/type`](https://github.com/IBM/carbon-elements/blob/master/packages/type/scss/font-face/_sans.scss).
 
 ## FAQ

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

@@ -38,7 +38,7 @@ Object {
   "grid-gutter": "2rem",
   "grid-gutter-condensed": "0.0625rem",
   "prefix": "cds",
+  "use-akamai-cdn": false,
   "use-flexbox-grid": false,
-  "use-google-fonts": false,
 }
 `;

packages/styles/scss/_config.scss

@@ -36,11 +36,11 @@ $font-display: 'swap' !default;
 /// @group config
 $font-path: '~@ibm/plex' !default;
 
-/// Specify if IBM Plex should be provided by Google Fonts
+/// Specify if IBM Plex should be provided by the IBM Akamai CDN
 /// @access public
 /// @type String
 /// @group config
-$use-google-fonts: false !default;
+$use-akamai-cdn: false !default;
 
 /// The value used to prefix selectors and CSS Custom Properties across the
 /// codebase

packages/styles/scss/fonts/__tests__/fonts-test.js

@@ -55,6 +55,7 @@ describe('@carbon/styles/scss/fonts', () => {
         emitted.set(fontFamily, {
           weights: new Set(),
           styles: new Set(),
+          src: new Set(),
         });
       }
 
@@ -68,6 +69,10 @@ describe('@carbon/styles/scss/fonts', () => {
         if (declaration.property === 'font-style') {
           entry.styles.add(declaration.value);
         }
+
+        if (declaration.property === 'src') {
+          entry.src.add(declaration.value);
+        }
       }
     }
 
@@ -91,6 +96,56 @@ describe('@carbon/styles/scss/fonts', () => {
     expect(emitted.get('IBM Plex Serif').styles).toEqual(
       new Set(['normal', 'italic'])
     );
+
+    expect(emitted).toMatchSnapshot();
+  });
+
+  it('should emit src from akamai cdn if $use-akamai-cdn is true', async () => {
+    const { result } = await render(`
+      @use '../../config' with (
+        $use-akamai-cdn: true,
+      );
+      @use '../' as fonts;
+    `);
+    const { stylesheet } = css.parse(result.css.toString());
+    const atRules = stylesheet.rules.filter((rule) => {
+      return rule.type === 'font-face';
+    });
+    const emitted = new Map();
+
+    for (const rule of atRules) {
+      const fontFamily = rule.declarations
+        .find((declaration) => {
+          return declaration.property === 'font-family';
+        })
+        .value.replace(/['"]/g, '');
+
+      if (!emitted.has(fontFamily)) {
+        emitted.set(fontFamily, {
+          weights: new Set(),
+          styles: new Set(),
+          src: new Set(),
+        });
+      }
+
+      const entry = emitted.get(fontFamily);
+
+      for (const declaration of rule.declarations) {
+        if (declaration.property === 'font-weight') {
+          entry.weights.add(declaration.value);
+        }
+
+        if (declaration.property === 'font-style') {
+          entry.styles.add(declaration.value);
+        }
+
+        if (declaration.property === 'src') {
+          entry.src.add(declaration.value);
+        }
+      }
+    }
+
+    expect(emitted).toMatchSnapshot();
   });
 
   it('should emit no @font-face blocks if $css--font-face is false', async () => {

packages/styles/scss/fonts/_src.scss

@@ -21,50 +21,42 @@ $-filenames: (
   IBM-Plex-Serif: 'IBMPlexSerif',
 );
 
-$-google-filenames: (
+$-akamai-filenames: (
   IBM-Plex-Mono: (
-    name: 'ibmplexmono',
-    version: 'v7',
-    hash: '-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-otFQ',
+    name: 'IBM-Plex-Mono',
+    filename: 'IBMPlexMono',
   ),
   IBM-Plex-Sans-Arabic: (
-    name: 'ibmplexsansarabic',
-    version: 'v5',
-    hash: 'Qw3CZRtWPQCuHme67tEYUIx3Kh0PHR9N6Ys43PW5fslBEg0',
+    name: 'IBM-Plex-Sans-Arabic',
+    filename: 'IBMPlexSansArabic',
   ),
   IBM-Plex-Sans-Devanagari: (
-    name: 'ibmplexsansdevanagari',
-    version: 'v5',
-    hash: 'XRXH3JCMvG4IDoS9SubXB6W-UX5iehIMBFR2-O_PX0j1Uc7wCWQq',
+    name: 'IBM-Plex-Sans-Devanagari',
+    filename: 'IBMPlexSansDevanagari',
   ),
   IBM-Plex-Sans-Hebrew: (
-    name: 'ibmplexsanshebrew',
-    version: 'v5',
-    hash: 'BCa2qYENg9Kw1mpLpO0bGM5lfHAAZHhDXE2v-lgVrjaNzC4',
+    name: 'IBM-Plex-Sans-Hebrew',
+    filename: 'IBMPlexSansHebrew',
   ),
   IBM-Plex-Sans-Thai-Looped: (
-    name: 'ibmplexsansthailooped',
-    version: 'v5',
-    hash: 'tss_AoJJRAhL3BTrK3r2xxbFhvKfyBB6l7hHT30L9BiKoXOrFCUb6Q',
+    name: 'IBM-Plex-Sans-Thai-Looped',
+    filename: 'IBMPlexSansThaiLooped',
   ),
   IBM-Plex-Sans-Thai: (
-    name: 'ibmplexsansthai',
-    version: 'v5',
-    hash: 'm8JPje1VVIzcq1HzJq2AEdo2Tj_qvLqMBNYgR8BKU4cX',
+    name: 'IBM-Plex-Sans-Thai',
+    filename: 'IBMPlexSansThai',
   ),
   IBM-Plex-Sans: (
-    name: 'ibmplexsans',
-    version: 'v9',
-    hash: 'zYXgKVElMYYaJe8bpLHnCwDKhdzeFaxOedfTDw',
+    name: 'IBM-Plex-Sans',
+    filename: 'IBMPlexSans',
   ),
   IBM-Plex-Serif: (
-    name: 'ibmplexserif',
-    version: 'v10',
-    hash: 'jizDREVNn1dOx-zrZ2X3pZvkTiUS2zcZiVbJsNo',
+    name: 'IBM-Plex-Serif',
+    filename: 'IBMPlexSerif',
   ),
 );
 
-@function -get-google-filename($map, $keys...) {
+@function -get-akamai-filename($map, $keys...) {
   @each $key in $keys {
     $map: map.get($map, $key);
   }
@@ -88,15 +80,34 @@ $-google-filenames: (
 /// @param {List} $formats
 /// @returns List
 @function -default-resolver($name, $weight, $style, $unicode-range, $formats) {
-  @if (config.$use-google-fonts) {
-    $filename: -get-google-filename($-google-filenames, $name, 'name');
-    $version: -get-google-filename($-google-filenames, $name, 'version');
-    $hash: -get-google-filename($-google-filenames, $name, 'hash');
+  @if (config.$use-akamai-cdn) {
+    $name: -get-akamai-filename($-akamai-filenames, $name, 'name');
+    $filename: -get-akamai-filename($-akamai-filenames, $name, 'filename');
+
+    // Special case for weight = Regular (400)
+    @if $weight == Regular {
+      @if $style == italic {
+        $filename: '#{$filename}-Italic';
+      } @else {
+        $filename: '#{$filename}-Regular';
+      }
+    } @else {
+      // Otherwise add weight + optional style (italic)
+      $filename: '#{$filename}-#{$weight}';
+      @if $style == italic {
+        $filename: '#{$filename}Italic';
+      }
+    }
 
     $filenames: ();
 
     @each $format in $formats {
-      $url: 'https://fonts.gstatic.com/s/#{$filename}/#{$version}/#{$hash}';
+      $url: 'https://1.www.s81c.com/common/carbon/plex/fonts/#{$name}';
+      @if $unicode-range {
+        $url: 'https://1.www.s81c.com/common/carbon/plex/fonts/#{$name}/fonts/split/#{$format}/#{$filename}-#{$unicode-range}';
+      } @else {
+        $url: 'https://1.www.s81c.com/common/carbon/plex/fonts/#{$name}/fonts/complete/#{$format}/#{$filename}';
+      }
 
       // Add extension
       $url: '#{$url}.#{$format}';

packages/type/README.md

@@ -26,7 +26,7 @@ These features include:
 
 | Feature                       | Description                                                                                                  |
 | ----------------------------- | ------------------------------------------------------------------------------------------------------------ |
-| [Font face](#font-face)       | Include IBM Plex™ font faces in your application. Uses Google fonts                                          |
+| [Font face](#font-face)       | Include IBM Plex™ font faces in your application. Uses Akamai CDN                                            |
 | [Type classes](#type-classes) | Helpers to use type styles directly. Not included by default                                                 |
 | [Font family](#font-family)   | Defines the font stack for IBM Plex™ in your application, provides helpers for working with font definitions |
 | [Reset](#reset)               | Provides a high-level CSS Reset to use in your project                                                       |
@@ -118,11 +118,7 @@ Plex to your project. These font-face definitions include support for:
 For most projects, only IBM Plex Mono and IBM Plex Sans is necessary. We also
 provide IBM Plex Serif if you are building an editorial or marketing project.
 
-These font-face definitions are pulling the above fonts from Google Fonts. As a
-result, they are not intended to be used as a production asset for your project.
-While you can depend on these for bootstrapping your project, we highly
-recommend using the fonts from the `@ibm/plex` package and hosting them on a
-global CDN.
+These font-face definitions are pulling the above fonts from an Akamai CDN.
 
 You can include each font-face definition by including the corresponding file
 and calling its mixin. For example, if you wanted to include IBM Plex Mono in