Introduce $ouiLegibilityMaxWidth variable and `ouiLegibilityMaxWidt…

…h` mixin (#1359)

Signed-off-by: Miki <[email protected]>
(cherry picked from commit b049275)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

src/global_styling/mixins/_typography.scss

@@ -147,6 +147,19 @@
   }
 }
 
+// Lowest max-width
+//
+// Legibility research specific to digital text has shown that line length can affect reading
+// speed. If lines are too long it is difficult for the reader to quickly return to the start
+// of the next line, whereas if lines are too short more scrolling or paging will be required.
+//
+// This mixin will choose the lesser of the magic $ouiLegibilityMaxWidth number and the
+// supplied $maxWidth to allow controlling the max-width without needing media-queries.
+
+@mixin ouiLegibilityMaxWidth($maxWidth) {
+  max-width: min($ouiLegibilityMaxWidth, $maxWidth);
+}
+
 
 
 /* OUI -> EUI Aliases */
@@ -165,4 +178,5 @@
 @mixin euiTextTruncate { @include ouiTextTruncate; }
 @mixin euiNumberFormat { @include ouiNumberFormat; }
 @mixin euiTextShift($fontWeight: $ouiFontWeightBold, $attr: 'data-text') { @include ouiTextShift($fontWeight, $attr); }
+@mixin euiLegibilityMaxWidth($maxWidth) { @include ouiLegibilityMaxWidth($maxWidth); }
 /* End of Aliases */

src/global_styling/variables/_typography.scss

@@ -56,6 +56,9 @@ $ouiFontSizeL:      $ouiFontSize * nth($ouiTextScale, 3) !default; // 20px
 $ouiFontSizeXL:     $ouiFontSize * nth($ouiTextScale, 2) !default; // 28px
 $ouiFontSizeXXL:    $ouiFontSize * nth($ouiTextScale, 1) !default; // 36px
 
+// This value is impacted by font-size
+$ouiLegibilityMaxWidth: 80ch !default;
+
 // Line height
 $ouiLineHeight:     1.5 !default;
 $ouiBodyLineHeight: 1 !default;
@@ -122,6 +125,7 @@ $euiFontSizeM: $ouiFontSizeM;
 $euiFontSizeL: $ouiFontSizeL;
 $euiFontSizeXL: $ouiFontSizeXL;
 $euiFontSizeXXL: $ouiFontSizeXXL;
+$euiLegibilityMaxWidth: $ouiLegibilityMaxWidth;
 $euiLineHeight: $ouiLineHeight;
 $euiBodyLineHeight: $ouiBodyLineHeight;
 $euiFontWeightLight: $ouiFontWeightLight;

src/themes/oui-next/global_styling/mixins/_typography.scss

@@ -147,6 +147,19 @@
   }
 }
 
+// Lowest max-width
+//
+// Legibility research specific to digital text has shown that line length can affect reading
+// speed. If lines are too long it is difficult for the reader to quickly return to the start
+// of the next line, whereas if lines are too short more scrolling or paging will be required.
+//
+// This mixin will choose the lesser of the magic $ouiLegibilityMaxWidth number and the
+// supplied $maxWidth to allow controlling the max-width without needing media-queries.
+
+@mixin ouiLegibilityMaxWidth($maxWidth) {
+  max-width: min($ouiLegibilityMaxWidth, $maxWidth);
+}
+
 
 
 /* OUI -> EUI Aliases */
@@ -165,4 +178,5 @@
 @mixin euiTextTruncate { @include ouiTextTruncate; }
 @mixin euiNumberFormat { @include ouiNumberFormat; }
 @mixin euiTextShift($fontWeight: $ouiFontWeightBold, $attr: 'data-text') { @include ouiTextShift($fontWeight, $attr); }
+@mixin euiLegibilityMaxWidth($maxWidth) { @include ouiLegibilityMaxWidth($maxWidth); }
 /* End of Aliases */

src/themes/oui-next/global_styling/variables/_typography.scss

@@ -57,6 +57,9 @@ $ouiFontSizeL:      $ouiFontSize * nth($ouiTextScale, 3) !default; // 20px
 $ouiFontSizeXL:     $ouiFontSize * nth($ouiTextScale, 2) !default; // 28px
 $ouiFontSizeXXL:    $ouiFontSize * nth($ouiTextScale, 1) !default; // 36px
 
+// This value is impacted by font-size
+$ouiLegibilityMaxWidth: 80ch !default;
+
 // Line height
 $ouiLineHeight:     1.333333 !default;
 $ouiBodyLineHeight: 1 !default;
@@ -125,6 +128,7 @@ $euiFontSizeM: $ouiFontSizeM;
 $euiFontSizeL: $ouiFontSizeL;
 $euiFontSizeXL: $ouiFontSizeXL;
 $euiFontSizeXXL: $ouiFontSizeXXL;
+$euiLegibilityMaxWidth: $ouiLegibilityMaxWidth;
 $euiLineHeight: $ouiLineHeight;
 $euiBodyLineHeight: $ouiBodyLineHeight;
 $euiFontWeightLight: $ouiFontWeightLight;

src/themes/v9/global_styling/mixins/_typography.scss

@@ -147,6 +147,19 @@
   }
 }
 
+// Lowest max-width
+//
+// Legibility research specific to digital text has shown that line length can affect reading
+// speed. If lines are too long it is difficult for the reader to quickly return to the start
+// of the next line, whereas if lines are too short more scrolling or paging will be required.
+//
+// This mixin will choose the lesser of the magic $ouiLegibilityMaxWidth number and the
+// supplied $maxWidth to allow controlling the max-width without needing media-queries.
+
+@mixin ouiLegibilityMaxWidth($maxWidth) {
+  max-width: min($ouiLegibilityMaxWidth, $maxWidth);
+}
+
 
 
 /* OUI -> EUI Aliases */
@@ -165,4 +178,5 @@
 @mixin euiTextTruncate { @include ouiTextTruncate; }
 @mixin euiNumberFormat { @include ouiNumberFormat; }
 @mixin euiTextShift($fontWeight: $ouiFontWeightBold, $attr: 'data-text') { @include ouiTextShift($fontWeight, $attr); }
+@mixin euiLegibilityMaxWidth($maxWidth) { @include ouiLegibilityMaxWidth($maxWidth); }
 /* End of Aliases */

src/themes/v9/global_styling/variables/_typography.scss

@@ -57,6 +57,9 @@ $ouiFontSizeL:      $ouiFontSize * nth($ouiTextScale, 3) !default; // 20px
 $ouiFontSizeXL:     $ouiFontSize * nth($ouiTextScale, 2) !default; // 28px
 $ouiFontSizeXXL:    $ouiFontSize * nth($ouiTextScale, 1) !default; // 36px
 
+// This value is impacted by font-size
+$ouiLegibilityMaxWidth: 80ch !default;
+
 // Line height
 $ouiLineHeight:     1.5 !default;
 $ouiBodyLineHeight: 1 !default;
@@ -125,6 +128,7 @@ $euiFontSizeM: $ouiFontSizeM;
 $euiFontSizeL: $ouiFontSizeL;
 $euiFontSizeXL: $ouiFontSizeXL;
 $euiFontSizeXXL: $ouiFontSizeXXL;
+$euiLegibilityMaxWidth: $ouiLegibilityMaxWidth;
 $euiLineHeight: $ouiLineHeight;
 $euiBodyLineHeight: $ouiBodyLineHeight;
 $euiFontWeightLight: $ouiFontWeightLight;