From 7b8a915c063eeba94ef8be4ef69e73fc7576d21e Mon Sep 17 00:00:00 2001
From: Scott Weber <scott.weber@adhocteam.us>
Date: Wed, 29 May 2019 10:35:49 -0400
Subject: [PATCH] [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        |  2 +-
 .../utilities/measure/measure.example.html    |  1 +
 .../src/utilities/{ => measure}/measure.scss  | 20 ++++++-------------
 .../support/src/settings/_variables.type.scss |  6 +++---
 4 files changed, 11 insertions(+), 18 deletions(-)
 create mode 100644 packages/core/src/utilities/measure/measure.example.html
 rename packages/core/src/utilities/{ => measure}/measure.scss (64%)

diff --git a/packages/core/src/utilities/index.scss b/packages/core/src/utilities/index.scss
index 2d6c5c06fe..68ab465df6 100644
--- a/packages/core/src/utilities/index.scss
+++ b/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';
diff --git a/packages/core/src/utilities/measure/measure.example.html b/packages/core/src/utilities/measure/measure.example.html
new file mode 100644
index 0000000000..673980d28a
--- /dev/null
+++ b/packages/core/src/utilities/measure/measure.example.html
@@ -0,0 +1 @@
+<div class="{{modifier}}">{{ lorem-l }}</div>
diff --git a/packages/core/src/utilities/measure.scss b/packages/core/src/utilities/measure/measure.scss
similarity index 64%
rename from packages/core/src/utilities/measure.scss
rename to packages/core/src/utilities/measure/measure.scss
index 7721b7e702..d6275ac18d 100644
--- a/packages/core/src/utilities/measure.scss
+++ b/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
 */
diff --git a/packages/support/src/settings/_variables.type.scss b/packages/support/src/settings/_variables.type.scss
index 834e3ccf5c..4d55f3be72 100644
--- a/packages/support/src/settings/_variables.type.scss
+++ b/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;