[Next Theme] Set base font size to 18px (#1221) (#1226)

Signed-off-by: Miki <miki@amazon.com> (cherry picked from commit 15ab240) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Feb 2, 2024 · 2686c9d · 2686c9d
1 parent d8831c3
commit 2686c9d
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/src/components/suggest/_suggest_item.scss b/src/components/suggest/_suggest_item.scss
@@ -62,7 +62,7 @@
 
   .ouiSuggestItem__label {
     @include ouiTextTruncate;
-    font-family: var(--oui-code-font-family);
+    @include ouiCodeFont;
     overflow: hidden;
     text-overflow: ellipsis;
     padding: $ouiSizeXS $ouiSizeS;

diff --git a/src/themes/oui-next/global_styling/mixins/_typography.scss b/src/themes/oui-next/global_styling/mixins/_typography.scss
@@ -25,6 +25,7 @@
 @mixin ouiCodeFont {
   font-family: var(--oui-code-font-family);
   letter-spacing: normal;
+  line-height: 1.5;
 }
 
 @mixin ouiText {
@@ -84,7 +85,7 @@
       #{$property}: $value;
     }
   }
-  line-height: 1.25;
+  line-height: 1.111111;
 }
 
 @mixin ouiFontSizeXXL {
@@ -95,7 +96,7 @@
       #{$property}: $value;
     }
   }
-  line-height: 1.25;
+  line-height: 1.111111;
 }
 
 @mixin ouiTextBreakWord {

diff --git a/src/themes/oui-next/global_styling/reset/_reset.scss b/src/themes/oui-next/global_styling/reset/_reset.scss
@@ -42,6 +42,8 @@ time, mark, audio, video {
 
 code, pre, kbd, samp {
   font-family: var(--oui-code-font-family);
+  font-size: 16px;
+  line-height: 1.5;
 }
 
 h1, h2, h3, h4, h5, h6, p {

diff --git a/src/themes/oui-next/global_styling/variables/_typography.scss b/src/themes/oui-next/global_styling/variables/_typography.scss
@@ -29,8 +29,10 @@
 // EX: A proper line-height for text is 1.5 times the font-size.
 //     If our base font size (ouiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
 //     text stays on the baseline, we pass a multiplier to calculate a line-height in rems.
+// To maintain v7 line-heights, $ouiFontSize is replaced with 16px
 @function lineHeightFromBaseline($multiplier: 3) {
-  @return convertToRem(calc($ouiFontSize/2)*$multiplier);
+  @return convertToRem(calc(16px/2)*$multiplier);
+  //@return convertToRem(calc($ouiFontSize/2)*$multiplier);
 }
 @mixin lineHeightFromBaseline($multiplier: 3) {
   line-height: lineHeightFromBaseline($multiplier);
@@ -47,7 +49,7 @@ $ouiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default;
 // Font sizes -- scale is loosely based on Major Third (1.250)
 $ouiTextScale:      2.25, 1.75, 1.25, 1.125, 1, .875, .75 !default;
 
-$ouiFontSize:       $ouiSize !default; // 5th position in scale
+$ouiFontSize:       18px !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
@@ -56,7 +58,7 @@ $ouiFontSizeXL:     $ouiFontSize * nth($ouiTextScale, 2) !default; // 28px
 $ouiFontSizeXXL:    $ouiFontSize * nth($ouiTextScale, 1) !default; // 36px
 
 // Line height
-$ouiLineHeight:     1.5 !default;
+$ouiLineHeight:     1.333333 !default;
 $ouiBodyLineHeight: 1 !default;
 
 // Font weights