Changing font size to 14px and headings to bold

CHANGELOG.md

@@ -5,6 +5,7 @@
 
 **Theme: Amsterdam**
 
+- Text sizes are now based on a 14px base font size. Headings are now bold. ([#2936](https://github.com/elastic/eui/pull/2936))
 - Altered `secondary`, `accent` colors to be more saturated ([#2873](https://github.com/elastic/eui/pull/2873))
 
 

src/themes/eui-amsterdam/global_styling/index.scss

@@ -5,6 +5,7 @@
 
 // Variables come next, and are used in some mixins
 @import '../../../global_styling/variables/index';
+@import 'variables/index';
 
 // Mixins provide generic code expansion through helpers
 @import '../../../global_styling/mixins/index';

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

@@ -1 +1,2 @@
 @import 'panel';
+@import 'typography';

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

@@ -0,0 +1,40 @@
+@mixin euiTitle($size: 'm') {
+  color: $euiTitleColor;
+
+  @if $size == 'xxxs' {
+    @include euiFontSizeXS;
+    @include lineHeightFromBaseline(3);
+    font-weight: $euiFontWeightSemiBold;
+    letter-spacing: 0;
+  } @else if $size == 'xxs' {
+    @include euiFontSizeS;
+    @include lineHeightFromBaseline(3);
+    font-weight: $euiFontWeightSemiBold;
+    letter-spacing: 0;
+  } @else if $size == 'xs' {
+    @include euiFontSize;
+    @include lineHeightFromBaseline(3);
+    font-weight: $euiFontWeightSemiBold;
+    letter-spacing: 0;
+  } @else if $size == 's' {
+    @include euiFontSizeL;
+    @include lineHeightFromBaseline(4);
+    font-weight: $euiFontWeightBold;
+    letter-spacing: 0;
+  } @else if $size == 'm' {
+    @include euiFontSizeXL;
+    @include lineHeightFromBaseline(5);
+    font-weight: $euiFontWeightBold;
+    letter-spacing: 0;
+  } @else if $size == 'l' {
+    @include euiFontSizeXXL;
+    @include lineHeightFromBaseline(6);
+    font-weight: $euiFontWeightBold;
+    letter-spacing: -.0625rem;
+  } @else {
+    @include fontSize($size);
+    @include lineHeightFromBaseline(3);
+    font-weight: $euiFontWeightBold;
+    letter-spacing: 0;
+  }
+}

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

@@ -0,0 +1 @@
+@import 'typography';

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

@@ -0,0 +1,9 @@
+$euiFontSize:       $euiSize - 2; // 5th position in scale
+
+// These variables are unchanged, but the calculated values are smaller
+$euiFontSizeXS:     $euiFontSize * nth($euiTextScale, 7); // 11px
+$euiFontSizeS:      $euiFontSize * nth($euiTextScale, 6); // 12px
+$euiFontSizeM:      $euiFontSize * nth($euiTextScale, 4); // 16px
+$euiFontSizeL:      $euiFontSize * nth($euiTextScale, 3); // 18px
+$euiFontSizeXL:     $euiFontSize * nth($euiTextScale, 2); // 25px
+$euiFontSizeXXL:    $euiFontSize * nth($euiTextScale, 1); // 32px

src/themes/eui-amsterdam/overrides/_text.scss

@@ -0,0 +1,8 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: $euiFontWeightBold;
+}

src/themes/eui-amsterdam/overrides/_title.scss

@@ -0,0 +1,4 @@
+.euiTitle {
+  font-weight: $euiFontWeightBold;
+  letter-spacing: 0;
+}