Merge pull request #2964 from uswds/dw-update-measure

Use `ex` unit for measure values
uswds · Mar 18, 2019 · 26210b7 · 26210b7
2 parents ece050c + 72e8172
commit 26210b7
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 27 deletions.
diff --git a/src/components/01-type/typesetting.njk b/src/components/01-type/typesetting.njk
@@ -2,7 +2,7 @@
   <div class="usa-line-length-example usa-prose">
     <h6 class="usa-heading-alt">Line length</h6>
     <section class="typography-example usa-prose margin-top-1">
-      <p><strong>75 characters (66ch) max-width:</strong> Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.</p>
+      <p><strong>75 characters (68ex) max-width:</strong> Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.</p>
     </section>
   </div>
 

diff --git a/src/stylesheets/core/_properties.scss b/src/stylesheets/core/_properties.scss
@@ -435,6 +435,7 @@ $system-properties: (
       3:	    $system-measure-base,
       4:	    $system-measure-large,
       5:	    $system-measure-larger,
+      6:	    $system-measure-largest,
       'none':   none,
     ),
     extended: (),

diff --git a/src/stylesheets/core/_system-tokens.scss b/src/stylesheets/core/_system-tokens.scss
@@ -369,11 +369,12 @@ Measure
 ----------------------------------------
 */
 
-$system-measure-smaller:      40ch;
-$system-measure-small:        60ch;
-$system-measure-base:         66ch;
-$system-measure-large:        72ch;
-$system-measure-larger:       77ch;
+$system-measure-smaller:      44ex;
+$system-measure-small:        60ex;
+$system-measure-base:         64ex;
+$system-measure-large:        68ex;
+$system-measure-larger:       74ex;
+$system-measure-largest:      88ex;
 
 /*
 ----------------------------------------

diff --git a/src/stylesheets/settings/_settings-components.scss b/src/stylesheets/settings/_settings-components.scss
@@ -26,7 +26,7 @@ $theme-accordion-font-family:         'body' !default;
 $theme-alert-bar-width:               1 !default;
 $theme-alert-font-family:             'ui' !default;
 $theme-alert-icon-size:               4 !default;
-$theme-alert-measure:                 3 !default;
+$theme-alert-measure:                 5 !default;
 $theme-alert-padding-x:               2.5 !default;
 
 // Banner

diff --git a/src/stylesheets/settings/_settings-typography.scss b/src/stylesheets/settings/_settings-typography.scss
@@ -381,11 +381,12 @@ Font role tokens
 ----------------------------------------
 Measure (max-width) tokens
 ----------------------------------------
-1:       40ch
-2:       60ch
-3:       66ch
-4:       72ch
-5:       77ch
+1:       44ex
+2:       60ex
+3:       64ex
+4:       68ex
+5:       74ex
+6:       88ex
 none:    none
 ----------------------------------------
 */
@@ -411,12 +412,12 @@ $theme-title-font-size:            '3xl' !default;
 
 // Text and prose
 $theme-text-measure-narrow:        1 !default;
-$theme-text-measure:               3 !default;
-$theme-text-measure-wide:          4 !default;
+$theme-text-measure:               4 !default;
+$theme-text-measure-wide:          6 !default;
 $theme-prose-font-family:          'body' !default;
 
 // Lead text
 $theme-lead-font-family:           'heading' !default;
 $theme-lead-font-size:             'lg' !default;
 $theme-lead-line-height:           6 !default;
-$theme-lead-measure:               5 !default;
+$theme-lead-measure:               6 !default;
diff --git a/src/stylesheets/theme/_uswds-theme-components.scss b/src/stylesheets/theme/_uswds-theme-components.scss
@@ -26,7 +26,7 @@ $theme-accordion-font-family:         'body';
 $theme-alert-bar-width:               1;
 $theme-alert-font-family:             'ui';
 $theme-alert-icon-size:               4;
-$theme-alert-measure:                 3;
+$theme-alert-measure:                 5;
 $theme-alert-padding-x:               2.5;
 
 // Banner

diff --git a/src/stylesheets/theme/_uswds-theme-typography.scss b/src/stylesheets/theme/_uswds-theme-typography.scss
@@ -7,7 +7,7 @@
 ========================================
 ========================================
 ----------------------------------------
-USWDS 2.0.0 Beta 6
+USWDS 2.0.0 Beta 5
 ----------------------------------------
 TYPOGRAPHY SETTINGS
 ----------------------------------------
@@ -381,11 +381,12 @@ Font role tokens
 ----------------------------------------
 Measure (max-width) tokens
 ----------------------------------------
-1:       40ch
-2:       60ch
-3:       66ch
-4:       72ch
-5:       77ch
+1:       44ex
+2:       60ex
+3:       64ex
+4:       68ex
+5:       74ex
+6:       88ex
 none:    none
 ----------------------------------------
 */
@@ -411,12 +412,12 @@ $theme-title-font-size:            '3xl';
 
 // Text and prose
 $theme-text-measure-narrow:        1;
-$theme-text-measure:               3;
-$theme-text-measure-wide:          4;
+$theme-text-measure:               4;
+$theme-text-measure-wide:          6;
 $theme-prose-font-family:          'body';
 
 // Lead text
 $theme-lead-font-family:           'heading';
 $theme-lead-font-size:             'lg';
 $theme-lead-line-height:           6;
-$theme-lead-measure:               5;
+$theme-lead-measure:               6;
diff --git a/src/stylesheets/utilities/rules/measure.scss b/src/stylesheets/utilities/rules/measure.scss
@@ -11,8 +11,8 @@ output:
   max-width: [value];
 ----------------------------------------
 example:
-  .measure-base {
-    max-width: 66ch; }
+  .measure-4 {
+    max-width: 68ex; }
 ----------------------------------------
 */