Verso - preview type tokens in use

readme.md

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.

_mixins-typography.scss

/// 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 👆👆👆
}