Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix font stack output #2947

Merged
merged 4 commits into from Mar 12, 2019
Merged

Fix font stack output #2947

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3677e51
Add system font metadata to typeface tokens
thisisdano Mar 12, 2019
7fc5516
Output display name in font stack conditionally [see details]
thisisdano Mar 12, 2019
17fd81f
Add function comments
thisisdano Mar 12, 2019
e1e44d0
Use 'Helvetica Neue' as helvetica's display name
thisisdano Mar 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 21 additions & 5 deletions src/stylesheets/core/_functions.scss
View file
Open in desktop
Expand Up @@ -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;
Expand Down
5 changes: 4 additions & 1 deletion src/stylesheets/core/_system-tokens.scss
View file
Open in desktop
Expand Up @@ -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',
Expand Down