Skip to content

Instantly share code, notes, and snippets.

@codingdesigner
Last active October 29, 2018 16:04
Show Gist options
  • Save codingdesigner/5e2ca51cd8a8ab73286701123e27e4e7 to your computer and use it in GitHub Desktop.
Save codingdesigner/5e2ca51cd8a8ab73286701123e27e4e7 to your computer and use it in GitHub Desktop.
Verso - preview type tokens in use

On a complex composition there can be a lot of tokens flying around. I need a way to show what type token was in use on the screen at each breakpoint. The code below adds a pseudo element any time a type token is assigned to show which token is on screen. I havenโ€™t worked out how to add this to our system yet so for now I just paste this into the fetch-definition-typography mixin when I need it.

/// Get type definition from configuration map
/// and write to a style block
/// @param {string} $definition-family - definition family from configuration map
/// @param {string} $definition-name - definition name from configuration map
@mixin fetch-definition-typography($definition-family, $definition-name) {
$type-definitions-map: map-get($typography, definitions);
$type-definitions-family: map-get($type-definitions-map, $definition-family);
$type-definition: map-get($type-definitions-family, $definition-name);
$letter-spacing-value: map-get($type-definition, letter-spacing);
@include fetch-type-sizes($type-definition);
// Uses SCSS built-in if() function; syntax is similar to JS ternary operators
letter-spacing: if(
$letter-spacing-value == 0,
normal,
#{$letter-spacing-value}em
);
$typeface-import-map: map-get(
$typefaces-map,
map-get($type-definition, family)
);
$fallback: map-get($typeface-import-map, fallback);
font-family: #{map-get($type-definition, family)}, #{$fallback};
font-weight: map-get($type-definition, weight);
@if map-get($type-definition, italic) == true {
font-style: italic;
}
@if map-get($type-definition, ligatures) {
font-variant-ligatures: map-get($type-definition, ligatures);
}
@if map-get($type-definition, case) == normal {
text-transform: none;
} @else {
text-transform: map-get($type-definition, case);
}
// paste ๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡
position: relative;
&::after {
position: absolute;
top: 100%;
left: 0;
background: pink;
padding: 0.2rem;
text-transform: lowercase;
white-space: nowrap;
font-family: monospace;
font-size: 0.5rem;
font-weight: normal;
font-style: normal;
content: '#{$definition-family}-#{$definition-name}';
}
// paste ๐Ÿ‘†๐Ÿ‘†๐Ÿ‘†
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment