Inter UI Font Family (#1402)

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added Inter UI to the font family stack ([#1402](https://github.com/elastic/eui/pull/1402))
+
 **Bug fixes**
 
 - Added `legend` for accessibility of `EuiButtonGroup` and fixed opacity of disabled input ([#1444](https://github.com/elastic/eui/pull/1444))

src-docs/src/theme_dark.scss

@@ -1,3 +1,7 @@
+// 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 '../../src/theme_dark';
 @import './components/guide_components';
 @import './views/header/global_filter_group';

src-docs/src/theme_light.scss

@@ -1,3 +1,7 @@
+// 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 '../../src/theme_light';
 @import './components/guide_components';
 @import './views/header/global_filter_group';

src-docs/src/views/guidelines/colors.js

@@ -34,7 +34,6 @@ const allowedColors = [
   'euiColorDarkShade',
   'euiColorDarkestShade',
   'euiColorFullShade',
-  'euiColorSlightHue',
   'euiColorPrimary',
   'euiColorSecondary',
   'euiColorWarning',

src-docs/src/views/guidelines/index.scss

@@ -86,7 +86,7 @@
 }
 
 .guideSass__level {
-  background-color: $euiColorSlightHue;
+  background-color: $euiColorMediumShade;
   transform: scaleY(.5) rotate(30deg) skew(-30deg, 0deg);
   width: $euiSize;
   height: $euiSize;
@@ -223,7 +223,7 @@
   color: $euiColorEmptyShade;
 
   &--code {
-    font-family: $euiCodeFontFamily;
+    @include euiCodeFont;
   }
 }
 

src-docs/src/views/guidelines/sass.js

@@ -37,7 +37,6 @@ const euiColors = [
   'euiColorDarkShade',
   'euiColorDarkestShade',
   'euiColorFullShade',
-  'euiColorSlightHue',
   'euiColorPrimary',
   'euiColorSecondary',
   'euiColorAccent',
@@ -117,7 +116,7 @@ const euiOverFlowShadows = [
 
 const euiBreakPoints = Object.getOwnPropertyNames(breakpoints.euiBreakpoints);
 
-function renderPaletteColor(color, index) {
+function renderPaletteColor(color) {
   let optionalDefault;
   if (color === 'euiTextColor') {
     optionalDefault = (
@@ -128,7 +127,7 @@ function renderPaletteColor(color, index) {
   }
 
   return (
-    <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s" className="guideSass__swatchItem"  key={index}>
+    <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s" className="guideSass__swatchItem"  key={color}>
       <EuiFlexItem grow={false}>
         <div className="guideSass__swatch" style={{ background: rgbToHex(lightColors[color].rgba).toUpperCase() }} />
       </EuiFlexItem>
@@ -140,9 +139,9 @@ function renderPaletteColor(color, index) {
   );
 }
 
-function renderSize(size, index) {
+function renderSize(size) {
   return (
-    <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s" key={index} className="guideSass__sizeRow">
+    <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s" key={size} className="guideSass__sizeRow">
       <EuiFlexItem grow={false} className="guideSass__sizeItem">
         <div className="guideSass__size" style={{ width: sizes[size], height: sizes[size] }} />
       </EuiFlexItem>
@@ -160,9 +159,9 @@ function renderSize(size, index) {
   );
 }
 
-function renderFontSize(size, index) {
+function renderFontSize(size) {
   return (
-    <div key={index} className="guideSass__fontSizeExample">
+    <div key={size} className="guideSass__fontSizeExample">
       <div className={`guideSass__fontSize guideSass__fontSize--${size}`}>
         The quick brown fox
       </div>
@@ -173,7 +172,7 @@ function renderFontSize(size, index) {
 
 function renderLevel(level, index) {
   return (
-    <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s" key={index}  className="guideSass__levelRow">
+    <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s" key={level}  className="guideSass__levelRow">
       <EuiFlexItem grow={false}>
         <div className="guideSass__level" style={{ opacity: (1 - (index * .1)) }} />
       </EuiFlexItem>
@@ -191,61 +190,61 @@ function renderLevel(level, index) {
   );
 }
 
-function renderShadow(shadow, index) {
+function renderShadow(shadow) {
   return (
-    <div key={index} className={`guideSass__shadow guideSass__shadow--${shadow}`}>
+    <div key={shadow} className={`guideSass__shadow guideSass__shadow--${shadow}`}>
       <EuiCodeBlock language="scss" paddingSize="none" transparentBackground>@include {shadow};</EuiCodeBlock>
     </div>
   );
 }
 
-function renderBorder(border, index) {
+function renderBorder(border) {
   return (
-    <EuiFlexItem key={index} className={`guideSass__border guideSass__border--${border}`}>
+    <EuiFlexItem key={border} className={`guideSass__border guideSass__border--${border}`}>
       <EuiCodeBlock language="scss" paddingSize="none" transparentBackground>border: ${border}</EuiCodeBlock>
     </EuiFlexItem>
   );
 }
 
-function renderAnimationSpeed(speed, index) {
+function renderAnimationSpeed(speed) {
   return (
-    <div key={index} className={`guideSass__animRow guideSass__animRow--${speed}`}>
-      <EuiFlexGroup alignItems="center" gutterSize="s" key={index}>
+    <div key={speed} className={`guideSass__animRow guideSass__animRow--${speed}`}>
+      <EuiFlexGroup alignItems="center" gutterSize="s">
         <EuiFlexItem grow={false}>
           {animations[speed]}ms
           <EuiSpacer size="s" />
           <EuiCodeBlock transparentBackground paddingSize="none" language="scss">animation-duration: ${speed}</EuiCodeBlock>
           <EuiSpacer size="s" />
         </EuiFlexItem>
       </EuiFlexGroup>
-      <div key={index} className={`guideSass__animParent`}>
+      <div className={`guideSass__animParent`}>
         <div className="guideSass__animChild" />
       </div>
     </div>
   );
 }
 
-function renderAnimationTiming(speed, index) {
+function renderAnimationTiming(speed) {
   return (
-    <div key={index} className={`guideSass__animRow guideSass__animRow--${speed}`}>
-      <EuiFlexGroup alignItems="center" gutterSize="s" key={index}>
+    <div key={speed} className={`guideSass__animRow guideSass__animRow--${speed}`}>
+      <EuiFlexGroup alignItems="center" gutterSize="s">
         <EuiFlexItem grow={false}>
           {animations[speed]}
           <EuiSpacer size="s" />
           <EuiCodeBlock transparentBackground paddingSize="none" language="scss">animation-timing-function: ${speed}</EuiCodeBlock>
           <EuiSpacer size="s" />
         </EuiFlexItem>
       </EuiFlexGroup>
-      <div key={index} className={`guideSass__animParent`}>
+      <div className={`guideSass__animParent`}>
         <div className="guideSass__animChild" />
       </div>
     </div>
   );
 }
 
-function renderBreakpoint(size, index) {
+function renderBreakpoint(size) {
   return (
-    <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s" key={index}>
+    <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s" key={size}>
       <EuiFlexItem grow={false}>
         <EuiText size="s" className="eui-textRight" style={{ minWidth: 50 }}>
           <EuiCode>{size}</EuiCode>
@@ -556,7 +555,7 @@ export default() => (
         {' '} and <Link to="https://github.com/elastic/eui/blob/master/src/global_styling/mixins/_typpography.scss">mixins</Link>
         {' '}sass code for typography.
         For most of your components we recommend using <Link to="/display/text">EuiText</Link> or
-        {' '}<Link to="/display/title">EuiTitle</Link> instead of these Sass varaibles.
+        {' '}<Link to="/display/title">EuiTitle</Link> instead of these Sass variables.
       </p>
     </EuiText>
 
@@ -566,7 +565,7 @@ export default() => (
       color="warning"
       title={
         <span>
-          It is more common to use these in a mixin (e.g. <EuiCode language="sass">@include $euiFontSize;</EuiCode>)
+          It is more common to use these as a mixin (e.g. <EuiCode language="css">@include euiFontSizeS;</EuiCode>)
           to automatically apply line-height as well as size.
         </span>
       }
@@ -609,7 +608,7 @@ export default() => (
               Abc
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiCode>$euiFontFamily</EuiCode>
+              <EuiCode language="css">@include euiFont;</EuiCode>
             </EuiFlexItem>
           </EuiFlexGroup>
 
@@ -618,7 +617,7 @@ export default() => (
               Abc
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiCode>$euiCodeFontFamily</EuiCode>
+              <EuiCode language="css">@include euiCodeFont;</EuiCode>
             </EuiFlexItem>
           </EuiFlexGroup>
         </div>

src/components/badge/_badge.scss

@@ -65,7 +65,7 @@ $badgeTypes: (
   primary: lighten(desaturate($euiColorPrimary, 30%), 30%),
   secondary: lighten(desaturate($euiColorSecondary, 40%), 40%),
   warning: lighten(desaturate($euiColorWarning, 30%), 20%),
-  danger: lighten(desaturate($euiColorDanger, 40%), 40%),
+  danger: lighten(desaturate($euiColorDanger, 0%), 30%),
   accent: lighten(desaturate($euiColorAccent, 40%), 40%),
 );
 

src/components/button/_mixins.scss

@@ -1,4 +1,5 @@
 @mixin euiButton {
+  @include euiFont;
 
   display: inline-block;
   appearance: none;
@@ -8,7 +9,6 @@
   text-decoration: none;
   border: solid 1px transparent;
   text-align: center;
-  font-family: $euiFontFamily;
   transition: all $euiAnimSpeedNormal $euiAnimSlightBounce;
   white-space: nowrap;
   max-width: 100%;

src/components/code/_code_block.scss

@@ -12,9 +12,9 @@
   }
 
   .euiCodeBlock__code {
+    @include euiCodeFont;
     display: block;
     line-height: $euiLineHeight;
-    font-family: $euiCodeFontFamily;
     font-weight: $euiFontWeightRegular;
   }
 

src/components/combo_box/_combo_box.scss

@@ -52,12 +52,12 @@
     overflow: hidden; /* 5 */
 
     > input {
+      @include euiFont;
       appearance: none; /* 3 */
       padding: 0;
       border: none;
       background: transparent;
       font-size: $euiFontSizeS;
-      font-family: $euiFontFamily;
       color: $euiTextColor;
       margin: $euiSizeXS;
       line-height: $euiLineHeight; /* 4 */

src/components/combo_box/combo_box_input/_combo_box_pill.scss

@@ -6,11 +6,11 @@
   vertical-align: baseline;
 
   &--plainText {
+    @include euiFont;
     @include euiTextTruncate;
 
     line-height: $euiSizeL;
     font-size: $euiFontSizeS;
-    font-family: $euiFontFamily;
     padding: 0 $euiSizeXS;
     color: $euiTextColor;
     vertical-align: middle;

src/components/date_picker/_date_picker.scss

@@ -55,13 +55,12 @@
 // }
 
 .react-datepicker {
-  font-family: $euiFontFamily;
+  @include euiFont;
   font-size: $euiFontSizeXS;
   color: $euiColorFullShade;
   display: flex;
   position: relative;
   border-radius: $euiBorderRadius;
-
 }
 
 // When in time only mode we make the dropdown look more like the combo box styling.

src/components/expression/_expression.scss

@@ -5,7 +5,7 @@
 .euiExpression {
   @include euiTextOverflowWrap; /* 1 */
   @include euiFontSizeS;
-  font-family: $euiCodeFontFamily;
+  @include euiCodeFont;
 
   display: inline-block; /* 1 */
   text-align: left;

src/components/form/_mixins.scss

@@ -14,8 +14,8 @@
  */
 
 @mixin euiFormControlText {
+  @include euiFont;
   font-size: $euiFontSizeS;
-  font-family: $euiFontFamily;
   line-height: 1em; // fixes text alignment in IE
   color: $euiTextColor;
 

src/components/key_pad_menu/_key_pad_menu.scss

@@ -17,6 +17,7 @@
  * 2. If it has a BetaBadge, make sure only the first letter shows
  */
 .euiKeyPadMenuItem {
+  @include euiFont; /* 1 */
   // Disable indentation for transition legibility
   // sass-lint:disable-block indentation
   display: block;
@@ -27,7 +28,6 @@
   border: $euiBorderThin;
   border-color: transparent;
   border-radius: $euiBorderRadius;
-  font-family: $euiFontFamily; /* 1 */
   transition:
     border-color $euiAnimSpeedFast ease-in,
     box-shadow $euiAnimSpeedFast ease-in;

src/components/table/_table.scss

@@ -4,6 +4,7 @@
  */
 .euiTable {
   @include euiFontSizeS;
+  @include euiNumberFormat;
 
   width: 100%;
   table-layout: fixed;

src/components/text/_text.scss

@@ -142,6 +142,7 @@
     margin-right: auto;
     font-family: Georgia, Times, Times New Roman, serif;
     font-style: italic;
+    letter-spacing: normal;
 
     p:last-child {
       margin-bottom: 0;
@@ -207,8 +208,8 @@
   // unset font-size from euiCodeBlock so it doesn't doubly add 90%
 
   code {
+    @include euiCodeFont;
     display: inline-block; // ensures background stretches the full line-height
-    font-family: $euiCodeFontFamily;
     font-weight: $euiFontWeightRegular;
   }
 

src/components/toast/_toast.scss

@@ -69,7 +69,6 @@ $toastTypes: (
  */
 .euiToastHeader {
   padding-right: $euiSizeL; /* 3 */
-
   display: flex;
   align-items: baseline; /* 1 */