Merge pull request #2947 from uswds/dw-fix-font-stacks

Fix font stack output
uswds · Mar 12, 2019 · dc4184a · dc4184a
2 parents 21fa360 + e1e44d0
commit dc4184a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/src/stylesheets/core/_functions.scss b/src/stylesheets/core/_functions.scss
@@ -598,26 +598,42 @@ role-based font token.
 */
 
 @function get-font-stack($token) {
+  // Start by converting to a type token (sans, serif, etc)
   $type-token: convert-to-font-type($token);
+  $output-display-name: true;
   $this-stack: null;
+  // Get the font type metadata
   $this-font-map: map-get($project-font-type-tokens, $type-token);
+  // Only output if the font type has an assigned typeface token
   @if map-get($this-font-map, 'typeface-token') {
     $this-font-token: map-get($this-font-map, 'typeface-token');
-    $this-name: map-deep-get(
-      $all-typeface-tokens,
-      $this-font-token,
-      'display-name'
-    );
+    // Get the typeface metadata
+    $this-typeface-data: map-get($all-typeface-tokens, $this-font-token);
+    $this-name: map-get($this-typeface-data, 'display-name');
+    // If it's a system typeface, don't output the display name
+    @if map-has-key($this-typeface-data, 'system-font') {
+      $output-display-name: false;
+    }
+    // If there's a custom stack, use it and output the display name
     @if map-get($this-font-map, 'custom-stack') {
       $this-stack: map-get($this-font-map, 'custom-stack');
+      $output-display-name: true;
     }
+    // Otherwise, just get the token's default stack
     @else {
       $this-stack: map-deep-get(
         $all-typeface-tokens,
         $this-font-token,
         'stack'
       );
     }
+    // If the typeface has no display name (system fonts), don't output the display name 
+    @if map-get($this-typeface-data, 'display-name') == null {
+      $output-display-name: false;
+    }
+    @if not $output-display-name {
+      @return #{$this-stack};
+    }
     @return #{$this-name}, #{$this-stack};
   }
   @return false;

diff --git a/src/stylesheets/core/_system-tokens.scss b/src/stylesheets/core/_system-tokens.scss
@@ -177,16 +177,19 @@ $system-typeface-tokens: (
     display-name: null,
     cap-height: 362px,
     stack: $font-stack-system,
+    system-font: true,
   ),
   'georgia': (
     display-name: 'Georgia',
     cap-height: 346px,
     stack: $font-stack-georgia,
+    system-font: true,
   ),
   'helvetica': (
-    display-name: 'Helvetica',
+    display-name: 'Helvetica Neue',
     cap-height: 357px,
     stack: $font-stack-helvetica,
+    system-font: true,
   ),
   'tahoma': (
     display-name: 'Tahoma',