From dc632bfb4921e688738f11b341b212ba1d701277 Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Thu, 5 Sep 2024 15:04:17 -0700
Subject: [PATCH] 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>
---
 CHANGELOG.md                                  |  1 +
 src-docs/src/views/text/text.js               |  4 ++
 src-docs/src/views/text/text_small.js         |  4 ++
 src/components/text/_text.scss                | 60 ++++++-------------
 .../global_styling/variables/_typography.scss | 52 ++++++++--------
 5 files changed, 52 insertions(+), 69 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e314b5fadb..babe93000a 100644
--- 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
index cdd84ca0f3..2b241a0fa2 100644
--- 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
index 8a2e52e747..d38a237129 100644
--- 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
index 0938ac8335..b5fe71e0b4 100644
--- 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
index 73ed85b225..a7294346e6 100644
--- 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;