[WNMGDS-81] Updating measure variables to use ex instead of em. (#422)

* Updating measure varibales to use ex instead of em.

* Update measure location for import

packages/core/src/utilities/index.scss

@@ -29,7 +29,7 @@ Style guide: utilities
 @import 'font-weight';
 @import 'line-height';
 @import 'margin';
-@import 'measure';
+@import 'measure/measure';
 @import 'overflow';
 @import 'padding';
 @import 'text-align';

packages/core/src/utilities/measure/measure.example.html

@@ -0,0 +1 @@
+<div class="{{modifier}}">{{ lorem-l }}</div>

packages/core/src/utilities/measure.scss → packages/core/src/utilities/measure/measure.scss

@@ -4,23 +4,15 @@
 /*
 Measure
 
-Line length, also called "measure", is an important part of readability.
+Line length, also called "measure", is an important part of readability. CMSDS has 3 measure options to control reading length.
 
-The design system includes 3 measure modifiers:
+**Format:** `ds-u-measure--[NAME]`
 
-- **narrow** = line length ~45 characters
-- **base** = line length ~65 characters
-- **wide** = line length ~80 characters
+.ds-u-measure--narrow - line length ~45 characters
+.ds-u-measure--base - line length ~65 characters
+.ds-u-measure--wide - line length ~80 characters
 
-**Format**: `ds-u-measure--[NAME]`
-
-Markup:
-<h2 class="preview__label">ds-u-measure--narrow</h2>
-<div class="ds-u-measure--narrow">{{ lorem-l }}</div>
-<h2 class="preview__label">ds-u-measure--base</h2>
-<div class="ds-u-measure--base ds-u-font-size--small">{{ lorem-l }}</div>
-<h2 class="preview__label">ds-u-measure--wide</h2>
-<div class="ds-u-measure--wide ds-u-font-size--small">{{ lorem-l }}</div>
+Markup: measure.example.html
 
 Style guide: utilities.measure
 */

packages/support/src/settings/_variables.type.scss

@@ -5,6 +5,6 @@ $font-semibold: 600;
 $reset-line-height: 1 !default;
 
 // measure
-$measure-narrow: 21em;
-$measure-base: 31em;
-$measure-wide: 41em;
+$measure-narrow: 45ex;
+$measure-base: 65ex;
+$measure-wide: 80ex;