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 @@ +
{{ lorem-l }}
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: -

ds-u-measure--narrow

-
{{ lorem-l }}
-

ds-u-measure--base

-
{{ lorem-l }}
-

ds-u-measure--wide

-
{{ lorem-l }}
+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;