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.

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

Improve font settings [take 2] #2919

Merged
merged 25 commits into from Feb 22, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
281595c
Add support for sans custom stack
thisisdano Feb 21, 2019
280a7b6
First pass of using maps for theme font info
thisisdano Feb 21, 2019
e4c0793
Firat pass at adding cond and icon families
thisisdano Feb 21, 2019
595a6cd
Move functions to function file
thisisdano Feb 21, 2019
c2bb6fc
[WIP] Delete theme typography settings until settings work is complete
thisisdano Feb 21, 2019
eb2ba60
Use vars for settings and collect as maps in variables.scss
thisisdano Feb 21, 2019
5131293
$theme-output-all-weights --> $theme-generate-all-weights
thisisdano Feb 21, 2019
5b5ff15
Move $theme-font-path into typography settings
thisisdano Feb 22, 2019
3ac32d5
Update typography settings [see description]
thisisdano Feb 22, 2019
a30c5db
Improve font-face mixins [see description]
thisisdano Feb 22, 2019
55d07f0
Move font definitions to system tokens [see description]
thisisdano Feb 22, 2019
ea8915f
Rewrite font-face generation loop [see description]
thisisdano Feb 22, 2019
ce284dd
Update internal variables [see description]
thisisdano Feb 22, 2019
983c48c
Update and improve font functions [see description]
thisisdano Feb 22, 2019
922edd3
Remove custom typeface test
thisisdano Feb 22, 2019
2fd42b6
Add theme typography settings
thisisdano Feb 22, 2019
808b03e
Update settings files to include current USWDS version
thisisdano Feb 22, 2019
fae2240
Remove debug line
thisisdano Feb 22, 2019
4073851
Reorganize and rewrite typography settings
thisisdano Feb 22, 2019
0365812
Improve documentation
thisisdano Feb 22, 2019
5b8acaa
Remove stray whitespace
thisisdano Feb 22, 2019
3258946
Add 'lang' font-type
thisisdano Feb 22, 2019
f4da4a5
Add font-display: fallback to improve page load and render
thisisdano Feb 22, 2019
5c34db9
Add a typeface token for `font-awesome`
thisisdano Feb 22, 2019
302bedd
Remove font-awesome token for now
thisisdano Feb 22, 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
180 changes: 0 additions & 180 deletions src/stylesheets/core/_font-definitions.scss

This file was deleted.

17 changes: 6 additions & 11 deletions src/stylesheets/core/_font-face.scss
@@ -1,16 +1,11 @@
/* stylelint-disable */

@if $theme-font-mono {
@include render-font-face($theme-font-mono);
}
@if $theme-font-sans {
@include render-font-face($theme-font-sans);
}
@if $theme-font-serif {
@include render-font-face($theme-font-serif);
}
@if $theme-font-cond {
@include render-font-face($theme-font-cond);
@each $font-type-token, $metadata in $project-font-type-tokens {
@if map-get($metadata, 'typeface-token') {
$this-typeface-token: map-get($metadata, 'typeface-token');
$this-src: map-get($metadata, 'src');
@include render-font-face($this-typeface-token, $this-src);
}
}

/* stylelint-enable */
103 changes: 95 additions & 8 deletions src/stylesheets/core/_functions.scss
Expand Up @@ -414,24 +414,41 @@ queries
@return $rem-to-user-em;
}

/*
----------------------------------------
validate-typeface-token()
----------------------------------------
Check to see if a typeface-token exists.
Throw an error if a passed token does
not exist in the typeface-token map.
----------------------------------------
*/

@function validate-typeface-token($typeface-token) {
@if not map-has-key($all-typeface-tokens, $typeface-token) {
@error '`#{$typeface-token}` is not a valid typeface token. '
+ 'Valid tokens: #{map-keys($all-typeface-tokens)} ';
}

@return $typeface-token;
}

/*
----------------------------------------
cap-height()
----------------------------------------
Get the cap height of a defined font
Get the cap height of a valid typeface
----------------------------------------
*/

@function cap-height($font) {
@if not $font {
@function cap-height($typeface-token) {
@if not $typeface-token {
@return false;
}

@return map-deep-get(
$all-font-definitions,
$font,
'cap-height'
);
$typeface-token: validate-typeface-token($typeface-token);
$token-data: map-get($all-typeface-tokens, $typeface-token);
@return map-get($token-data, 'cap-height');
}

/*
Expand Down Expand Up @@ -553,6 +570,76 @@ a family and a line-height scale unit
@return lh($props...);
}

/*
----------------------------------------
convert-to-font-type()
----------------------------------------
Converts a font-role token into a
font-type token. Leaves font-type tokens
unchanged.
----------------------------------------
*/

@function convert-to-font-type($token) {
@if map-has-key($project-font-role-tokens, $token) {
@return map-get($project-font-role-tokens, $token);
}

@return $token;
}

/*
----------------------------------------
get-font-stack()
----------------------------------------
Get a font stack from a style- or
role-based font token.
----------------------------------------
*/

@function get-font-stack($token) {
$type-token: convert-to-font-type($token);
$this-stack: null;
$this-font-map: map-get($project-font-type-tokens, $type-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'
);
@if map-get($this-font-map, 'custom-stack') {
$this-stack: map-get($this-font-map, 'custom-stack');
}
@else {
$this-stack: map-deep-get(
$all-typeface-tokens,
$this-font-token,
'stack'
);
}
@return #{$this-name}, #{$this-stack};
}
@return false;
}

/*
----------------------------------------
get-typeface-token()
----------------------------------------
Get a typeface token from a font-type or
font-role token.
----------------------------------------
*/

@function get-typeface-token($font-token) {
$this-token: $font-token;
@if map-has-key($project-font-role-tokens, $font-token) {
$this-token: map-get($project-font-role-tokens, $font-token);
}
@return map-deep-get($project-font-type-tokens, $this-token, 'typeface-token');
}

/*
----------------------------------------
get-system-color()
Expand Down