feat(fonts): add google font support via flag (#10393)

* feat(fonts): add google font support via flag * docs(config): add config docs * fix(flag): set google font flag to false by default * test(snapshot): update snapshots * docs(token): change token documentation Co-authored-by: Josefina Mancilla <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jan 14, 2022 · 69547cd · 69547cd
1 parent 405c510
commit 69547cd
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 28 deletions.
diff --git a/packages/styles/scss/__tests__/__snapshots__/config-test.js.snap b/packages/styles/scss/__tests__/__snapshots__/config-test.js.snap
@@ -8,5 +8,6 @@ Object {
   "font-display": "swap",
   "font-path": "~@ibm/plex",
   "prefix": "cds",
+  "use-google-fonts": false,
 }
 `;
diff --git a/packages/styles/scss/_config.scss b/packages/styles/scss/_config.scss
@@ -36,6 +36,12 @@ $font-display: 'swap' !default;
 /// @group config
 $font-path: '~@ibm/plex' !default;
 
+/// Specify if IBM Plex should be provided by Google Fonts
+/// @access public
+/// @type String
+/// @group config
+$use-google-fonts: false !default;
+
 /// The value used to prefix selectors and CSS Custom Properties across the
 /// codebase
 /// @access public

diff --git a/packages/styles/scss/fonts/_src.scss b/packages/styles/scss/fonts/_src.scss
@@ -21,6 +21,57 @@ $-filenames: (
   IBM-Plex-Serif: 'IBMPlexSerif',
 );
 
+$-google-filenames: (
+  IBM-Plex-Mono: (
+    name: 'ibmplexmono',
+    version: 'v7',
+    hash: '-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-otFQ',
+  ),
+  IBM-Plex-Sans-Arabic: (
+    name: 'ibmplexsansarabic',
+    version: 'v5',
+    hash: 'Qw3CZRtWPQCuHme67tEYUIx3Kh0PHR9N6Ys43PW5fslBEg0',
+  ),
+  IBM-Plex-Sans-Devanagari: (
+    name: 'ibmplexsansdevanagari',
+    version: 'v5',
+    hash: 'XRXH3JCMvG4IDoS9SubXB6W-UX5iehIMBFR2-O_PX0j1Uc7wCWQq',
+  ),
+  IBM-Plex-Sans-Hebrew: (
+    name: 'ibmplexsanshebrew',
+    version: 'v5',
+    hash: 'BCa2qYENg9Kw1mpLpO0bGM5lfHAAZHhDXE2v-lgVrjaNzC4',
+  ),
+  IBM-Plex-Sans-Thai-Looped: (
+    name: 'ibmplexsansthailooped',
+    version: 'v5',
+    hash: 'tss_AoJJRAhL3BTrK3r2xxbFhvKfyBB6l7hHT30L9BiKoXOrFCUb6Q',
+  ),
+  IBM-Plex-Sans-Thai: (
+    name: 'ibmplexsansthai',
+    version: 'v5',
+    hash: 'm8JPje1VVIzcq1HzJq2AEdo2Tj_qvLqMBNYgR8BKU4cX',
+  ),
+  IBM-Plex-Sans: (
+    name: 'ibmplexsans',
+    version: 'v9',
+    hash: 'zYXgKVElMYYaJe8bpLHnCwDKhdzeFaxOedfTDw',
+  ),
+  IBM-Plex-Serif: (
+    name: 'ibmplexserif',
+    version: 'v10',
+    hash: 'jizDREVNn1dOx-zrZ2X3pZvkTiUS2zcZiVbJsNo',
+  ),
+);
+
+@function -get-google-filename($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+
+  @return $map;
+}
+
 @function -get-base-filename($name) {
   @return map.get($-filenames, $name);
 }
@@ -37,44 +88,65 @@ $-filenames: (
 /// @param {List} $formats
 /// @returns List
 @function -default-resolver($name, $weight, $style, $unicode-range, $formats) {
-  $filename: -get-base-filename($name);
+  @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');
 
-  // Special case for weight = Regular (400)
-  @if $weight == Regular {
-    @if $style == italic {
-      $filename: '#{$filename}-Italic';
-    } @else {
-      $filename: '#{$filename}-Regular';
+    $filenames: ();
+
+    @each $format in $formats {
+      $url: 'https://fonts.gstatic.com/s/#{$filename}/#{$version}/#{$hash}';
+
+      // Add extension
+      $url: '#{$url}.#{$format}';
+      $filenames: list.append(
+        $filenames,
+        url('#{$url}') format('#{$format}'),
+        $separator: comma
+      );
     }
+
+    @return $filenames;
   } @else {
-    // Otherwise add weight + optional style (italic)
-    $filename: '#{$filename}-#{$weight}';
-    @if $style == italic {
-      $filename: '#{$filename}Italic';
+    $filename: -get-base-filename($name);
+
+    // 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: ();
+    $filenames: ();
 
-  @each $format in $formats {
-    $url: $filename;
+    @each $format in $formats {
+      $url: $filename;
+      @if $unicode-range {
+        $url: '#{config.$font-path}/#{$name}/fonts/split/#{$format}/#{$filename}-#{$unicode-range}';
+      } @else {
+        $url: '#{config.$font-path}/#{$name}/fonts/complete/#{$format}/#{$filename}';
+      }
 
-    @if $unicode-range {
-      $url: '#{config.$font-path}/#{$name}/fonts/split/#{$format}/#{$filename}-#{$unicode-range}';
-    } @else {
-      $url: '#{config.$font-path}/#{$name}/fonts/complete/#{$format}/#{$filename}';
+      // Add extension
+      $url: '#{$url}.#{$format}';
+      $filenames: list.append(
+        $filenames,
+        url('#{$url}') format('#{$format}'),
+        $separator: comma
+      );
     }
 
-    // Add extension
-    $url: '#{$url}.#{$format}';
-    $filenames: list.append(
-      $filenames,
-      url('#{$url}') format('#{$format}'),
-      $separator: comma
-    );
+    @return $filenames;
   }
-
-  @return $filenames;
 }
 
 /// The resolver used for locating the filepaths in `url() format()` values in