Add Gutenberg font size utilities + misc. typographic token improvements (#1333)

tylersticka · web-flow · commit f7781a105ae3 · 2021-06-23T09:03:49.000-07:00
* Add line-height tokens

* Use line-height tokens

* Add heading level tokens

* Update heading mixin to use tokens

* Small and big font tokens

* Gutenberg font-size utilities

Co-authored by: Caleb Eby &lt;caleb@cloudfour.com&gt;
diff --git a/.changeset/fast-mugs-itch.md b/.changeset/fast-mugs-itch.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add big, small and heading level font size tokens
diff --git a/.changeset/olive-berries-watch.md b/.changeset/olive-berries-watch.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add line-height tokens
diff --git a/.changeset/two-ghosts-punch.md b/.changeset/two-ghosts-punch.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add font-size utilities for Gutenberg block editor
diff --git a/.changeset/violet-schools-mix.md b/.changeset/violet-schools-mix.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Fix issue where Gutenberg quote paragraphs were incorrectly sized
diff --git a/.style-dictionary/build.js b/.style-dictionary/build.js
@@ -49,6 +49,20 @@ StyleDictionary.registerTransform({
   },
 });
 
+/**
+ * Custom Transform: Re-join negative number name segments
+ * Looks for occurrences of `n-{number}` and removes the `-`. Useful for keeping
+ * negative number modular scale step token names consistent with related class
+ * names.
+ */
+StyleDictionary.registerTransform({
+  name: 'custom/name/i/kebab-rejoin-n',
+  type: 'name',
+  transformer: function (prop) {
+    return prop.name.replace(/-n-(\d)/g, '-n$1');
+  },
+});
+
 /**
  * Custom Transform Group: CSS
  * This is a modified version of the CSS transform group without the time,
@@ -57,7 +71,12 @@ StyleDictionary.registerTransform({
  */
 StyleDictionary.registerTransformGroup({
   name: 'custom/transform-group/css',
-  transforms: ['attribute/cti', 'name/cti/kebab', 'color/css'],
+  transforms: [
+    'attribute/cti',
+    'name/cti/kebab',
+    'custom/name/i/kebab-rejoin-n',
+    'color/css',
+  ],
 });
 
 /**
@@ -67,7 +86,12 @@ StyleDictionary.registerTransformGroup({
  */
 StyleDictionary.registerTransformGroup({
   name: 'custom/transform-group/css-category',
-  transforms: ['attribute/cti', 'custom/name/ti/kebab', 'color/css'],
+  transforms: [
+    'attribute/cti',
+    'custom/name/ti/kebab',
+    'custom/name/i/kebab-rejoin-n',
+    'color/css',
+  ],
 });
 
 /**
@@ -77,7 +101,12 @@ StyleDictionary.registerTransformGroup({
  */
 StyleDictionary.registerTransformGroup({
   name: 'custom/transform-group/css-category-type',
-  transforms: ['attribute/cti', 'custom/name/i/kebab', 'color/css'],
+  transforms: [
+    'attribute/cti',
+    'custom/name/i/kebab',
+    'custom/name/i/kebab-rejoin-n',
+    'color/css',
+  ],
 });
 
 /**
diff --git a/.style-dictionary/config.js b/.style-dictionary/config.js
@@ -82,6 +82,13 @@ module.exports = {
             attributes: { category: 'number', type: 'font_weight' },
           },
         },
+        {
+          destination: '_line-height.scss',
+          format: 'scss/variables',
+          filter: {
+            attributes: { category: 'number', type: 'line_height' },
+          },
+        },
         {
           destination: '_opacity.scss',
           format: 'scss/variables',
diff --git a/src/base/_defaults.scss b/src/base/_defaults.scss
@@ -258,7 +258,7 @@ figure {
 }
 
 figcaption {
-  font-size: ms.step(-1);
+  font-size: size.$font-small;
   font-style: italic;
   text-align: center;
 }
diff --git a/src/base/_typography.scss b/src/base/_typography.scss
@@ -1,6 +1,7 @@
 @use "_fonts";
 @use "../compiled/tokens/scss/breakpoint";
 @use "../compiled/tokens/scss/font-family";
+@use "../compiled/tokens/scss/line-height";
 @use "../mixins/fluid";
 @use "../mixins/headings";
 @use "../mixins/ms";
@@ -31,7 +32,7 @@ html {
 
 body {
   font-family: font-family.$sans-fallback;
-  line-height: ms.step(2, 1);
+  line-height: line-height.$loose;
   text-size-adjust: none; /* 1 */
   word-wrap: break-word; /* 2 */
 
diff --git a/src/components/calendar-date/calendar-date.scss b/src/components/calendar-date/calendar-date.scss
@@ -1,5 +1,6 @@
 @use "../../compiled/tokens/scss/color";
 @use "../../compiled/tokens/scss/font-weight";
+@use "../../compiled/tokens/scss/line-height";
 @use "../../compiled/tokens/scss/size";
 @use '../../mixins/ms';
 @use '../../mixins/theme';
@@ -25,7 +26,7 @@ $radius: size.$border-radius-medium;
   flex-direction: column;
   font-weight: font-weight.$medium;
   height: $size;
-  line-height: ms.step(1, 1);
+  line-height: line-height.$tight;
   text-align: center;
   user-select: none;
   width: $size;
@@ -108,7 +109,7 @@ $radius: size.$border-radius-medium;
  */
 
 .c-calendar-date__note {
-  font-size: ms.step(-1);
+  font-size: size.$font-small;
   overflow: hidden; /* 1 */
   padding: 0 size.$spacing-control-text-inset;
   text-overflow: ellipsis; /* 1 */
diff --git a/src/components/ground-nav/ground-nav.scss b/src/components/ground-nav/ground-nav.scss
@@ -128,7 +128,7 @@ $_ground-nav-border-color: color.$base-gray-light;
 
 .c-ground-nav__kudos,
 .c-ground-nav__legal {
-  font-size: ms.step(-1);
+  font-size: size.$font-small;
 }
 
 /**
diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss
@@ -48,11 +48,12 @@ $max-width-permalink-shift: math.div($min-width-permalink-shift * 16 - 1, 16);
  * We start at `-2` so template designers have three sizes larger than a default
  * `<h1>` to apply thoughtfully within templates.
  *
- * We end at 3 because that is the maximum depth we support with distinct
- * visual differences.
+ * Even though distinct sizes end at level 3, we output modifier classes for all
+ * 6 levels to encourage semantic sizing that will be future-friendly if that
+ * ever changes.
  */
 
-@for $level from -2 through headings.$max-level {
+@for $level from -2 through 6 {
   $level-segment: ms.step-class-segment($level);
 
   .c-heading--level-#{$level-segment} {
diff --git a/src/components/message/message.scss b/src/components/message/message.scss
@@ -1,6 +1,7 @@
 @use "../../compiled/tokens/scss/brightness";
 @use "../../compiled/tokens/scss/color";
 @use "../../compiled/tokens/scss/ease";
+@use "../../compiled/tokens/scss/line-height";
 @use "../../compiled/tokens/scss/transition";
 @use "../../compiled/tokens/scss/scale";
 @use "../../compiled/tokens/scss/size";
@@ -18,7 +19,7 @@
   color: color.$text-dark;
   display: flex; /* 1 */
   justify-content: space-between; /* 1 */
-  line-height: ms.step(1, 1); /* 2 */
+  line-height: line-height.$tight; /* 2 */
 }
 
 .c-message__content {
@@ -42,7 +43,7 @@
   color: inherit; /* 1 */
   cursor: pointer;
   display: flex;
-  font-size: ms.step(1); /* 2 */
+  font-size: size.$font-big; /* 2 */
   margin-left: ms.step(1); /* 3 */
   padding: 0 ms.step(1);
 
diff --git a/src/components/pagination/pagination.scss b/src/components/pagination/pagination.scss
@@ -3,6 +3,7 @@
 @use "../../compiled/tokens/scss/color";
 @use "../../compiled/tokens/scss/ease";
 @use "../../compiled/tokens/scss/font-weight";
+@use "../../compiled/tokens/scss/line-height";
 @use "../../compiled/tokens/scss/scale";
 @use "../../compiled/tokens/scss/size";
 @use "../../compiled/tokens/scss/transition";
@@ -233,7 +234,7 @@ $indicator-width-current: $indicator-height-current;
   font-weight: font-weight.$medium;
   height: ($action-size - $action-pad * 2); /* 1 */
   justify-content: center;
-  line-height: ms.step(0, 1); /* 2 */
+  line-height: line-height.$tighter; /* 2 */
   max-width: ($action-size - $action-pad * 2); /* 1 */
   position: relative; /* 3 */
   width: 100%; /* 1 */
diff --git a/src/components/sky-nav/sky-nav.scss b/src/components/sky-nav/sky-nav.scss
@@ -3,6 +3,7 @@
 @use "../../compiled/tokens/scss/breakpoint";
 @use "../../compiled/tokens/scss/color";
 @use "../../compiled/tokens/scss/ease";
+@use "../../compiled/tokens/scss/line-height";
 @use "../../compiled/tokens/scss/opacity";
 @use "../../compiled/tokens/scss/scale";
 @use "../../compiled/tokens/scss/size";
@@ -378,9 +379,9 @@ $_masthead-height-sm: ms.step(7);
 .c-sky-nav__menu-action {
   align-items: center; /* 1 */
   display: flex; /* 2 */
-  font-size: ms.step(1);
+  font-size: size.$font-big;
   justify-content: center; /* 1 */
-  line-height: ms.step(1, 1);
+  line-height: line-height.$tight;
   text-align: center; /* 1 */
   text-decoration: none;
   transition: opacity transition.$quick ease.$out;
diff --git a/src/mixins/_headings.scss b/src/mixins/_headings.scss
@@ -1,39 +1,49 @@
 @use "../compiled/tokens/scss/breakpoint";
 @use "../compiled/tokens/scss/font-weight";
+@use "../compiled/tokens/scss/line-height";
+@use "../compiled/tokens/scss/size";
 @use 'fluid';
 @use 'ms';
+@use 'sass:map';
+@use 'sass:meta';
 
-$max-level: 3;
-$fluid-steps: 1;
+$size-tokens: meta.module-variables('size');
 
-/**
- * Mixin for applying heading styles at a particular level. Accepts an argument
- * so it may be easily baked into "for" loops. The size jumps and responsive
- * behavior are determined mathematically, so the level may be lower than 1 for
- * constructing larger heading classes.
- */
-
-@mixin level($level) {
-  @if $level <= $max-level {
-    $min-step: $level * -1 + $max-level;
-    $max-step: $min-step + $fluid-steps;
+/// Mixin for applying heading styles at a particular level. Accepts an argument
+/// so it may be easily baked into "for" loops.
+/// @param {number} $level
+@mixin level($level, $include-weight: true) {
+  // Build token name to check for
+  $token-name-root: 'font-heading-' + ms.step-class-segment($level);
+  // Get minimum size token
+  $min-size: map.get($size-tokens, $token-name-root + '-min');
+  // Get maximum size token
+  $max-size: map.get($size-tokens, $token-name-root + '-max');
 
+  // If tokens were found...
+  @if $min-size and $max-size {
+    // Output a fluid font size
     @include fluid.font-size(
       breakpoint.$xs,
       breakpoint.$l,
-      ms.step($min-step),
-      ms.step($max-step)
+      $min-size,
+      $max-size
     );
 
+    // Line heights above standard heading levels should be tighter
     @if $level < 1 {
-      line-height: ms.step(0, 1);
+      line-height: line-height.$tighter;
     } @else {
-      line-height: ms.step(1, 1);
+      line-height: line-height.$tight;
     }
   } @else {
+    // Otherwise, assume this is a lower heading level
     font-size: inherit;
     line-height: inherit;
   }
 
-  font-weight: font-weight.$bold;
+  @if $include-weight {
+    // Consistently bold headings to differentiate from normal copy
+    font-weight: font-weight.$bold;
+  }
 }
diff --git a/src/mixins/_table.scss b/src/mixins/_table.scss
@@ -58,7 +58,7 @@ $table-border-thick: size.$edge-medium solid $table-border-color;
 @mixin t-caption {
   caption-side: bottom;
   color: var(--theme-color-table-caption);
-  font-size: ms.step(-1);
+  font-size: size.$font-small;
   font-style: italic;
   padding: ms.step(-1) 0;
 }
diff --git a/src/tokens/line-height.stories.mdx b/src/tokens/line-height.stories.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import tokens from '../compiled/tokens/js/tokens';
+const lineHeightRows = Object.entries(tokens.number.line_height).map(
+  ([key, { name, value, comment, attributes }]) => (
+    <tr key={name}>
+      <td>
+        <code>line-height.${attributes.item}</code>
+      </td>
+      <td>
+        <code>{value}</code>
+      </td>
+      <td>{comment}</td>
+    </tr>
+  )
+);
+
+<Meta title="Design/Tokens/Line Height" />
+
+# Line Height
+
+```scss
+@use "../../compiled/tokens/scss/line-height";
+$example: line-height.$loose; // => 1.5625
+```
+
+```javascript
+import tokens from '../../compiled/tokens/js/tokens';
+console.log(tokens.number.line_height.loose.value); // => 1.5625
+```
+
+<table>
+  <thead>
+    <tr>
+      <th style={{ width: '10%' }}>Name</th>
+      <th>Value</th>
+      <th>Comment</th>
+    </tr>
+  </thead>
+  <tbody>{lineHeightRows}</tbody>
+</table>
diff --git a/src/tokens/number/line-height.js b/src/tokens/number/line-height.js
@@ -0,0 +1,21 @@
+const { modularScale } = require('../../scripts/modular-scale');
+
+module.exports = {
+  number: {
+    line_height: {
+      loose: {
+        value: modularScale(2),
+        comment: 'For multiline copy.',
+      },
+      tight: {
+        value: modularScale(1),
+        comment: 'For headings and single-line text.',
+      },
+      tighter: {
+        value: modularScale(0),
+        comment:
+          'For very large headings or UI elements with built-in height or padding.',
+      },
+    },
+  },
+};
diff --git a/src/tokens/size/font.js b/src/tokens/size/font.js
@@ -0,0 +1,18 @@
+const { modularEm } = require('../../scripts/modular-scale');
+
+module.exports = {
+  size: {
+    font: {
+      big: {
+        value: modularEm(1),
+        comment:
+          'Slightly larger than normal. Good for short introductory sections or important actions.',
+      },
+      small: {
+        value: modularEm(-1),
+        comment:
+          'Slightly smaller than usual. Good for badges, captions or other space-constrained bits of copy.',
+      },
+    },
+  },
+};
diff --git a/src/tokens/size/heading.js b/src/tokens/size/heading.js
diff --git a/src/vendor/wordpress/demo/font-size.twig b/src/vendor/wordpress/demo/font-size.twig
diff --git a/src/vendor/wordpress/styles/_core-blocks.scss b/src/vendor/wordpress/styles/_core-blocks.scss
diff --git a/src/vendor/wordpress/styles/_utilities.scss b/src/vendor/wordpress/styles/_utilities.scss
diff --git a/src/vendor/wordpress/utilities.stories.mdx b/src/vendor/wordpress/utilities.stories.mdx

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@cloudfour/patterns': minor
 +---
++
 +Add big, small and heading level font size tokens
Original file line number	Diff line number	Diff line change
`@@ -258,7 +258,7 @@ figure {`
`258`	`258`	`}`
`259`	`259`
`260`	`260`	`figcaption {`
`261`		`- font-size: ms.step(-1);`
	`261`	`+ font-size: size.$font-small;`
`262`	`262`	`font-style: italic;`
`263`	`263`	`text-align: center;`
`264`	`264`	`}`
Original file line number	Diff line number	Diff line change
`@@ -128,7 +128,7 @@ $_ground-nav-border-color: color.$base-gray-light;`
`128`	`128`
`129`	`129`	`.c-ground-nav__kudos,`
`130`	`130`	`.c-ground-nav__legal {`
`131`		`- font-size: ms.step(-1);`
	`131`	`+ font-size: size.$font-small;`
`132`	`132`	`}`
`133`	`133`
`134`	`134`	`/**`