Remove scaling of heading elements

Also: * Adjust sizing of headers in v9 * bump up the sizing of `$ouiFontSizeS` and `$ouiFontSizeXS` Signed-off-by: Miki <miki@amazon.com>
AMoo-Miki · Sep 6, 2024 · dc632bf · dc632bf
1 parent b8a9daa
commit dc632bf
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 69 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@
 
 - Add `compressed` to OuiDatePicker ([#1380](https://github.com/opensearch-project/oui/pull/1380))
 - Expand the definitions of `$ouiBreakpoints` to include `xxl` and `xxxl` ([#1387](https://github.com/opensearch-project/oui/pull/1387))
+- Remove scaling of heading elements ([#1389](https://github.com/opensearch-project/oui/pull/1389))
 
 ### 🐛 Bug Fixes
 

diff --git a/src-docs/src/views/text/text.js b/src-docs/src/views/text/text.js
@@ -85,6 +85,10 @@ export default () => (
         sint deserunt laboris. Excepteur nisi sint do non.
       </p>
 
+      <h2>This is Heading Two</h2>
+
+      <h3>This is Heading Three</h3>
+
       <p>
         Consequat consequat duis commodo magna fugiat commodo. Pariatur elit in
         sunt eu officia minim ipsum laborum non occaecat magna. Tempor fugiat ex

diff --git a/src-docs/src/views/text/text_small.js b/src-docs/src/views/text/text_small.js
@@ -72,6 +72,10 @@ const exampleText = (
       exercitation laborum cillum.
     </p>
 
+    <h2>This is Heading Two</h2>
+
+    <h3>This is Heading Three</h3>
+
     <p>
       Amet qui est et elit magna veniam id enim consequat in. Sunt anim mollit
       mollit amet. Dolor amet amet aliquip aute qui aliqua do aliqua id sunt ea.

diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
@@ -35,43 +35,10 @@
     font-size: convertToRem($baseFontSize * nth($ouiTextScale, 4));
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-bottom: convertToRem($baseLineHeightMultiplier * 1);
-  }
-
   dd + dt {
     margin-top: convertToRem($baseLineHeightMultiplier * 2);
   }
 
-  * + h2,
-  * + h3,
-  * + h4,
-  * + h5,
-  * + h6 {
-    margin-top: convertToRem($baseLineHeightMultiplier * 4);
-  }
-
-  h1 {
-    font-size: convertToRem($baseFontSize * nth($ouiTextScale, 1));
-    line-height: convertToRem($baseLineHeightMultiplier * 6);
-  }
-
-  h2 {
-    font-size: convertToRem($baseFontSize * nth($ouiTextScale, 2));
-    line-height: convertToRem($baseLineHeightMultiplier * 5);
-  }
-
-  h3 {
-    font-size: convertToRem($baseFontSize * nth($ouiTextScale, 3));
-    line-height: convertToRem($baseLineHeightMultiplier * 4);
-  }
-
-  h4,
   dt,
   .oui-definitionListReverse dd {
     font-size: convertToRem($baseFontSize * nth($ouiTextScale, 5)); // skip level 4 on purpose
@@ -83,16 +50,6 @@
     color: $ouiTextColor;
   }
 
-  h5 {
-    font-size: convertToRem($baseFontSize * nth($ouiTextScale, 6));
-    line-height: convertToRem($baseLineHeightMultiplier * 2);
-  }
-
-  h6 {
-    font-size: convertToRem($baseFontSize * nth($ouiTextScale, 7));
-    line-height: convertToRem($baseLineHeightMultiplier * 2);
-  }
-
   small {
     font-size: convertToRem($baseFontSize * nth($ouiTextScale, 6));
   }
@@ -180,6 +137,23 @@
     }
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-bottom: convertToRem(calc($ouiFontSize / 2));
+  }
+
+  * + h2,
+  * + h3,
+  * + h4,
+  * + h5,
+  * + h6 {
+    margin-top: convertToRem(calc($ouiFontSize / 2) * 4);
+  }
+
   h1 {
     @include ouiTitle('l');
   }

diff --git a/src/themes/v9/global_styling/variables/_typography.scss b/src/themes/v9/global_styling/variables/_typography.scss
@@ -47,15 +47,15 @@ $ouiCodeFontFamily: #{"'Fira Code', Consolas, Menlo, Courier, monospace"} !defau
 $ouiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default;
 
 // Font sizes -- scale is loosely based on Major Third (1.250)
-$ouiTextScale:      2, 1.7143, 1.2857, 1.125, 1, .875, .75 !default;
+$ouiTextScale:      2, 1.714286, 1.285714, 1.1429, 1, .857143, .75 !default;
 
-$ouiFontSize:       16px !default; // 5th position in scale
-$ouiFontSizeXS:     $ouiFontSize * nth($ouiTextScale, 7) !default; // 12px
-$ouiFontSizeS:      $ouiFontSize * nth($ouiTextScale, 6) !default; // 14px
-$ouiFontSizeM:      $ouiFontSize * nth($ouiTextScale, 4) !default; // 18px
-$ouiFontSizeL:      $ouiFontSize * nth($ouiTextScale, 3) !default; // 20px
-$ouiFontSizeXL:     $ouiFontSize * nth($ouiTextScale, 2) !default; // 28px
-$ouiFontSizeXXL:    $ouiFontSize * nth($ouiTextScale, 1) !default; // 36px
+$ouiFontSize:       14px !default; // 5th position in scale
+$ouiFontSizeXS:     $ouiFontSize * nth($ouiTextScale, 6) !default; // 12px
+$ouiFontSizeS:      $ouiFontSize * nth($ouiTextScale, 5) !default; // 14px
+$ouiFontSizeM:      $ouiFontSize * nth($ouiTextScale, 4) !default; // 16px
+$ouiFontSizeL:      $ouiFontSize * nth($ouiTextScale, 3) !default; // 18px
+$ouiFontSizeXL:     $ouiFontSize * nth($ouiTextScale, 2) !default; // 24px
+$ouiFontSizeXXL:    $ouiFontSize * nth($ouiTextScale, 1) !default; // 28px
 
 // This value is impacted by font-size
 $ouiLegibilityMaxWidth: 80ch !default;
@@ -77,41 +77,41 @@ $ouiCodeFontWeightBold:     700 !default;
 // Lists all the properties per OuiTitle size that then gets looped through to create the selectors.
 // The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves
 $ouiTitles: (
+  // h4: 12px / 15px / 400
   'xxxs': (
     'font-size': $ouiFontSizeXS,
-    'line-height': lineHeightFromBaseline(3),
-    'font-weight': $ouiFontWeightBold,
-    'letter-spacing': -.005em,
+    'line-height': lineHeightFromBaseline(2.1429),
+    'font-weight': $ouiFontWeightMedium,
   ),
+  // h4: 12px / 15px / 400
   'xxs': (
-    'font-size': $ouiFontSizeS,
-    'line-height': lineHeightFromBaseline(3),
-    'font-weight': $ouiFontWeightSemiBold,
-    'letter-spacing': -.005em,
+    'font-size': $ouiFontSizeXS,
+    'line-height': lineHeightFromBaseline(2.1429),
+    'font-weight': $ouiFontWeightMedium,
   ),
+  // h4: 14px / 17px / 400
   'xs': (
     'font-size': $ouiFontSize,
-    'line-height': lineHeightFromBaseline(3),
-    'font-weight': $ouiFontWeightSemiBold,
-    'letter-spacing': -.02em,
+    'line-height': lineHeightFromBaseline(2.8286),
+    'font-weight': $ouiFontWeightMedium,
   ),
+  // h3: 18px / 22px / 400
   's': (
     'font-size': $ouiFontSizeL,
-    'line-height': lineHeightFromBaseline(4),
+    'line-height': lineHeightFromBaseline(3.1429),
     'font-weight': $ouiFontWeightMedium,
-    'letter-spacing': -.025em,
   ),
+  // h2: 24px / 29px / 400
   'm': (
     'font-size': $ouiFontSizeXL,
-    'line-height': lineHeightFromBaseline(5),
-    'font-weight': $ouiFontWeightRegular,
-    'letter-spacing': -.04em,
+    'line-height': lineHeightFromBaseline(4.1429),
+    'font-weight': $ouiFontWeightLight,
   ),
+  // h1: 28px / 34px / 400
   'l': (
     'font-size': $ouiFontSizeXXL,
-    'line-height': lineHeightFromBaseline(6),
-    'font-weight': $ouiFontWeightRegular,
-    'letter-spacing': -.03em,
+    'line-height': lineHeightFromBaseline(4.857),
+    'font-weight': $ouiFontWeightLight,
   ),
 ) !default;