Fixing Amsterdam base line-heights (#4229)

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-- Added `EuiColorPaletteDisplay` component ([#3865](https://github.com/elastic/eui/pull/3865)) 
+- Added `EuiColorPaletteDisplay` component ([#3865](https://github.com/elastic/eui/pull/3865))
 - Added `initialFocusedItemIndex` support to `EuiContextMenuPanelDescriptor` ([#4223](https://github.com/elastic/eui/pull/4223))
 
 **Bug fixes**
@@ -11,6 +11,10 @@
 - Fixed bug in small `EuiImage`'s not respecting the optional sizes when `allowFullScreen` is set to true ([#4207](https://github.com/elastic/eui/pull/4207))
 - Fixed incorrect initial rendering of `EuiDualRange` thumbs when element width is 0 ([#4230](https://github.com/elastic/eui/pull/4230))
 
+**Theme: Amsterdam**
+
+- Fixed base `line-heights` for within `euiFontSize[size]()` SASS mixins ([#4229](https://github.com/elastic/eui/pull/4229))
+
 ## [`30.2.0`](https://github.com/elastic/eui/tree/v30.2.0)
 
 - Added `labelWidth` and `descriptionDisplay` props to `EuiSuggestItem` ([#4180](https://github.com/elastic/eui/pull/4180))

src/components/form/field_search/__snapshots__/field_search.test.tsx.snap

@@ -33,7 +33,7 @@ exports[`EuiFieldSearch props append is rendered 1`] = `
 >
   <eui-validatable-control>
     <input
-      class="euiFieldSearch euiFieldText--inGroup"
+      class="euiFieldSearch euiFieldSearch--inGroup"
       type="search"
     />
   </eui-validatable-control>
@@ -134,7 +134,7 @@ exports[`EuiFieldSearch props prepend is rendered 1`] = `
 >
   <eui-validatable-control>
     <input
-      class="euiFieldSearch euiFieldText--inGroup"
+      class="euiFieldSearch euiFieldSearch--inGroup"
       type="search"
     />
   </eui-validatable-control>

src/components/form/field_search/field_search.tsx

@@ -244,8 +244,8 @@ export class EuiFieldSearch extends Component<
       {
         'euiFieldSearch--fullWidth': fullWidth,
         'euiFieldSearch--compressed': compressed,
+        'euiFieldSearch--inGroup': prepend || append,
         'euiFieldSearch-isLoading': isLoading,
-        'euiFieldText--inGroup': prepend || append,
         'euiFieldSearch-isClearable': isClearable && value,
       },
       className

src/components/form/form_control_layout/_form_control_layout.scss

@@ -100,7 +100,7 @@
   .euiText {
     background-color: $euiFormInputGroupLabelBackground;
     padding: $euiFormControlPadding;
-    line-height: $euiFontSize !important;
+    line-height: $euiSize !important;
     cursor: default !important; // pointer cursor on some form labels but not others is confusing
 
     // If the next sibling is not the input, pull it closer to the text to reduce space

src/global_styling/reset/_reset.scss

@@ -66,7 +66,7 @@ html {
 }
 
 body {
-  line-height: 1;
+  line-height: $euiBodyLineHeight;
 }
 
 *:focus {

src/global_styling/variables/_typography.scss

@@ -44,7 +44,8 @@ $euiFontSizeXL:     $euiFontSize * nth($euiTextScale, 2) !default; // 28px
 $euiFontSizeXXL:    $euiFontSize * nth($euiTextScale, 1) !default; // 36px
 
 // Line height
-$euiLineHeight:     1.5;
+$euiLineHeight:     1.5 !default;
+$euiBodyLineHeight: 1 !default;
 
 // Font weights
 $euiFontWeightLight:    300 !default;

src/themes/eui-amsterdam/global_styling/mixins/_index.scss

@@ -1,7 +1,23 @@
 // Import base theme first, then override
-@import '../../../../global_styling/mixins/index';
+@import '../../../../global_styling/mixins/responsive';
+@import '../../../../global_styling/mixins/shadow';
+@import 'shadow';
+@import '../../../../global_styling/mixins/size';
+@import '../../../../global_styling/mixins/typography';
+@import 'typography';
+@import '../../../../global_styling/mixins/helpers';
+@import '../../../../global_styling/mixins/states';
+@import '../../../../global_styling/mixins/icons';
 
+@import '../../../../global_styling/mixins/beta_badge';
+@import '../../../../global_styling/mixins/button';
 @import 'button';
+@import '../../../../global_styling/mixins/form';
+@import 'form';
+@import '../../../../global_styling/mixins/header';
+@import '../../../../global_styling/mixins/loading';
+@import '../../../../global_styling/mixins/panel';
 @import 'panel';
-@import 'shadow';
-@import 'form';
+@import '../../../../global_styling/mixins/popover';
+@import '../../../../global_styling/mixins/range';
+@import '../../../../global_styling/mixins/tool_tip';

src/themes/eui-amsterdam/global_styling/mixins/_typography.scss

@@ -0,0 +1,37 @@
+// Font sizing extends, using rem mixin
+// All line-heights are aligned to baseline grid
+
+@mixin euiFontSizeXS {
+  @include fontSize($euiFontSizeXS);
+  @include lineHeightFromBaseline(2);
+}
+
+@mixin euiFontSizeS {
+  @include fontSize($euiFontSizeS);
+  @include lineHeightFromBaseline(3);
+}
+
+@mixin euiFontSize {
+  @include fontSize($euiFontSize);
+  @include lineHeightFromBaseline(3);
+}
+
+@mixin euiFontSizeM {
+  @include fontSize($euiFontSizeM);
+  @include lineHeightFromBaseline(3);
+}
+
+@mixin euiFontSizeL {
+  @include fontSize($euiFontSizeL);
+  @include lineHeightFromBaseline(4);
+}
+
+@mixin euiFontSizeXL {
+  @include fontSize($euiFontSizeXL);
+  @include lineHeightFromBaseline(4);
+}
+
+@mixin euiFontSizeXXL {
+  @include fontSize($euiFontSizeXXL);
+  @include lineHeightFromBaseline(5);
+}

src/themes/eui-amsterdam/global_styling/variables/_typography.scss

@@ -14,10 +14,15 @@ $euiFontSizeL:     ceil($euiFontSize * 1.57); // 22px // h3
 $euiFontSizeXL:   floor($euiFontSize * 1.93); // 27px // h2
 $euiFontSizeXXL:  floor($euiFontSize * 2.43); // 34px // h1
 
+$euiBodyLineHeight: 1.142857143; // 16px from a 14px base font size to ensure it aligns to our 16px grid
+
 // Use 8px increments for base gridline
 @function lineHeightFromBaseline($multiplier: 3) {
   @return convertToRem(($euiSize/2)*$multiplier);
 }
+@mixin lineHeightFromBaseline($multiplier: 3) {
+  line-height: lineHeightFromBaseline($multiplier);
+}
 
 $euiTitles: (
   'xxxs': (