[Amsterdam] Updating base text sizing (#2936)

* Changing font size to 14px and headings to bold * Unifying font weights across EuiTitle sizes * Setting the scale and using mixins fo `.euiText--medium` * Finally start using the updated version of Inter * A few more fixes * Using a map for title sizing * Fixing text scales * Using only google fonts * Remove uneccesary selector override * Addressing a few review coments * cleanup Co-authored-by: cchaos <[email protected]>
elastic · Mar 13, 2020 · 2f04008 · 2f04008
1 parent 19971ab
commit 2f04008
Show file tree

Hide file tree

Showing 11 changed files with 127 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -79,6 +79,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))
 
 ## [`20.0.2`](https://github.com/elastic/eui/tree/v20.0.2)

diff --git a/src-docs/src/theme_amsterdam_dark.scss b/src-docs/src/theme_amsterdam_dark.scss
@@ -1,6 +1,5 @@
 // sass-lint:disable no-url-domains, no-url-protocols
-@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
-@import url('https://rsms.me/inter/inter-ui.css');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 
 @import '../../src/theme_amsterdam_dark';
 @import './components/guide_components';

diff --git a/src-docs/src/theme_amsterdam_light.scss b/src-docs/src/theme_amsterdam_light.scss
@@ -1,6 +1,5 @@
 // sass-lint:disable no-url-domains, no-url-protocols
-@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
-@import url('https://rsms.me/inter/inter-ui.css');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 
 @import '../../src/theme_amsterdam_light';
 @import './components/guide_components';

diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
@@ -25,31 +25,14 @@
 @mixin euiTitle($size: 'm') {
   color: $euiTitleColor;
 
-  @if $size == 'xxxs' {
-    @include euiFontSizeXS;
-    @include lineHeightFromBaseline(3);
-    font-weight: $euiFontWeightBold;
-  } @else if $size == 'xxs' {
-    @include euiFontSizeS;
-    @include lineHeightFromBaseline(3);
-    font-weight: $euiFontWeightBold;
-  } @else if $size == 'xs' {
-    @include euiFontSize;
-    @include lineHeightFromBaseline(3);
-    font-weight: $euiFontWeightSemiBold;
-    letter-spacing: -.02em;
-  } @else if $size == 's' {
-    @include euiFontSizeL;
-    @include lineHeightFromBaseline(4);
-    font-weight: $euiFontWeightMedium;
-    letter-spacing: -.025em;
-  } @else if $size == 'm' {
-    @include euiFontSizeXL;
-    @include lineHeightFromBaseline(5);
-    letter-spacing: -.04em;
-  } @else if $size == 'l' {
-    @include euiFontSizeXXL;
-    @include lineHeightFromBaseline(6);
+  @if (map-has-key($euiTitles, $size)) {
+    @each $property, $value in map-get($euiTitles, $size) {
+      @if ($property == 'font-size') {
+        @include fontSize($value);
+      } @else {
+        #{$property}: $value;
+      }
+    }
   } @else {
     @include fontSize($size);
     @include lineHeightFromBaseline(3);
@@ -84,17 +67,25 @@
 }
 
 @mixin euiFontSizeXL {
-  @include fontSize($euiFontSizeXL);
+  @each $property, $value in map-get($euiTitles, 'm') {
+    @if ($property == 'font-size') {
+      @include fontSize($value);
+    } @else {
+      #{$property}: $value;
+    }
+  }
   line-height: 1.25;
-  font-weight: $euiFontWeightLight; // always apply light weight to x-large type
-  letter-spacing: -.05em;
 }
 
 @mixin euiFontSizeXXL {
-  @include fontSize($euiFontSizeXXL);
+  @each $property, $value in map-get($euiTitles, 'l') {
+    @if ($property == 'font-size') {
+      @include fontSize($value);
+    } @else {
+      #{$property}: $value;
+    }
+  }
   line-height: 1.25;
-  font-weight: $euiFontWeightLight; // always apply light weight to xx-large type
-  letter-spacing: -.03em;
 }
 
 @mixin euiTextBreakWord {

diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
@@ -9,7 +9,6 @@
 }
 
 // Spit out rem and px
-
 @mixin fontSize($size: $euiFontSize) {
   font-size: $size;
   font-size: convertToRem($size);
@@ -19,13 +18,14 @@
 // EX: A proper line-height for text is 1.5 times the font-size.
 //     If our base font size (euiFontSize) 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.
+@function lineHeightFromBaseline($multiplier: 3) {
+  @return convertToRem(($euiFontSize/2)*$multiplier);
+}
 @mixin lineHeightFromBaseline($multiplier: 3) {
-  line-height: convertToRem(($euiFontSize/2)*$multiplier);
+  line-height: lineHeightFromBaseline($multiplier);
 }
 
-
 // Families
-
 $euiFontFamily: 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
 $euiCodeFontFamily: 'Roboto Mono', Consolas, Menlo, Courier, monospace !default;
 
@@ -36,7 +36,6 @@ $euiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default;
 $euiTextScale:      2.25, 1.75, 1.25, 1.125, 1, .875, .75 !default;
 
 $euiFontSize:       $euiSize !default; // 5th position in scale
-
 $euiFontSizeXS:     $euiFontSize * nth($euiTextScale, 7) !default; // 12px
 $euiFontSizeS:      $euiFontSize * nth($euiTextScale, 6) !default; // 14px
 $euiFontSizeM:      $euiFontSize * nth($euiTextScale, 4) !default; // 18px
@@ -45,14 +44,51 @@ $euiFontSizeXL:     $euiFontSize * nth($euiTextScale, 2) !default; // 28px
 $euiFontSizeXXL:    $euiFontSize * nth($euiTextScale, 1) !default; // 36px
 
 // Line height
-
 $euiLineHeight:     1.5;
 
-
 // Font weights
-
 $euiFontWeightLight:    300 !default;
 $euiFontWeightRegular:  400 !default;
 $euiFontWeightMedium:   500 !default;
 $euiFontWeightSemiBold: 600 !default;
 $euiFontWeightBold:     700 !default;
+
+// Titles map
+// Lists all the properties per EuiTitle 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
+$euiTitles: (
+  'xxxs': (
+    'font-size': $euiFontSizeXS,
+    'line-height': lineHeightFromBaseline(3),
+    'font-weight': $euiFontWeightBold,
+  ),
+  'xxs': (
+    'font-size': $euiFontSizeS,
+    'line-height': lineHeightFromBaseline(3),
+    'font-weight': $euiFontWeightBold,
+  ),
+  'xs': (
+    'font-size': $euiFontSize,
+    'line-height': lineHeightFromBaseline(3),
+    'font-weight': $euiFontWeightSemiBold,
+    'letter-spacing': -.02em,
+  ),
+  's': (
+    'font-size': $euiFontSizeL,
+    'line-height': lineHeightFromBaseline(4),
+    'font-weight': $euiFontWeightMedium,
+    'letter-spacing': -.025em,
+  ),
+  'm': (
+    'font-size': $euiFontSizeXL,
+    'line-height': lineHeightFromBaseline(5),
+    'font-weight': $euiFontWeightLight,
+    'letter-spacing': -.04em,
+  ),
+  'l': (
+    'font-size': $euiFontSizeXXL,
+    'line-height': lineHeightFromBaseline(6),
+    'font-weight': $euiFontWeightLight,
+    'letter-spacing': -.03em,
+  ),
+) !default;
diff --git a/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss b/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss
@@ -5,6 +5,8 @@ $euiColorPrimary:     #006DE4;
 $euiColorSecondary:   #00BFB3;
 $euiColorAccent:      #FC358E;
 
+$euiLinkColor: $euiColorPrimary; // Weirdly this one wasn't updating with new primary color
+
 // Contrasty text variants
 $euiColorPrimaryText: makeHighContrastColor($euiColorPrimary);
 $euiColorSecondaryText: makeHighContrastColor($euiColorSecondary);

diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss
@@ -1,2 +1,2 @@
-@import 'panel';
 @import 'button';
+@import 'panel';
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_index.scss b/src/themes/eui-amsterdam/global_styling/variables/_index.scss
@@ -1,2 +1,3 @@
 @import 'buttons';
 @import 'borders';
+@import 'typography';
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_typography.scss b/src/themes/eui-amsterdam/global_styling/variables/_typography.scss
@@ -0,0 +1,48 @@
+// Finally start using the non-beta version of Inter
+$euiFontFamily: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+
+// Font sizes -- scale is loosely based on Major Third (1.250) with a base of 14px
+// Base list is an altered scale based on 16px to match the resulted values below
+$euiTextScale:    2.125, 1.6875, 1.375, 1.125, 1, .875, .75;
+
+$euiFontSize:     $euiSize - 2; // 14px
+
+$euiFontSizeXS:   floor($euiFontSize * .86);  // 12px // h6
+$euiFontSizeS:    floor($euiFontSize * 1);    // 14px // h5 --> Now the same as the base $euiFontSize
+$euiFontSizeM:     ceil($euiFontSize * 1.14); // 16px // h4
+$euiFontSizeL:     ceil($euiFontSize * 1.57); // 22px // h3
+$euiFontSizeXL:   floor($euiFontSize * 1.93); // 27px // h2
+$euiFontSizeXXL:  floor($euiFontSize * 2.43); // 34px // h1
+
+$euiTitles: (
+  'xxxs': (
+    'font-size': $euiFontSizeXS,
+    'line-height': lineHeightFromBaseline(3),
+    'font-weight': $euiFontWeightBold,
+  ),
+  'xxs': (
+    'font-size': $euiFontSizeS,
+    'line-height': lineHeightFromBaseline(3),
+    'font-weight': $euiFontWeightBold,
+  ),
+  'xs': (
+    'font-size': $euiFontSizeM,
+    'line-height': lineHeightFromBaseline(3),
+    'font-weight': $euiFontWeightBold,
+  ),
+  's': (
+    'font-size': $euiFontSizeL,
+    'line-height': lineHeightFromBaseline(4),
+    'font-weight': $euiFontWeightBold,
+  ),
+  'm': (
+    'font-size': $euiFontSizeXL,
+    'line-height': lineHeightFromBaseline(5),
+    'font-weight': $euiFontWeightBold,
+  ),
+  'l': (
+    'font-size': $euiFontSizeXXL,
+    'line-height': lineHeightFromBaseline(6),
+    'font-weight': $euiFontWeightBold,
+  ),
+);
diff --git a/src/themes/eui-amsterdam/overrides/_index.scss b/src/themes/eui-amsterdam/overrides/_index.scss
@@ -1,3 +1,4 @@
 @import 'button';
 @import 'button_empty';
 @import 'button_group';
+@import 'text';
diff --git a/src/themes/eui-amsterdam/overrides/_text.scss b/src/themes/eui-amsterdam/overrides/_text.scss
@@ -0,0 +1,5 @@
+// Increase the medium (currently default) size of EuiText to original 16px
+.euiText--medium {
+  @include fontSize($euiFontSizeM);
+  @include euiScaleText($euiFontSizeM);
+}