diff --git a/src/stylesheets/core/_functions.scss b/src/stylesheets/core/_functions.scss index cadd2838c4..b88419509a 100644 --- a/src/stylesheets/core/_functions.scss +++ b/src/stylesheets/core/_functions.scss @@ -598,19 +598,28 @@ 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, @@ -618,6 +627,13 @@ role-based 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 index 3d2ee1b4b2..d27953d7a2 100644 --- 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',