Make EuiTitleS usable, make $euiFontSizeM a real thing (#204)

EuiTitle small upped to 18px.

Author: snide

src/components/call_out/_call_out.scss

@@ -35,7 +35,7 @@ $callOutTypes: (
  * 3. Apply margin to all but last item in the flex.
  */
 .euiCallOutHeader {
-  @include euiFontSizeM;
+  @include euiFontSize;
   display: flex;
   align-items: baseline; /* 1 */
 

src/components/description_list/_description_list.scss

@@ -11,7 +11,7 @@
   &.euiDescriptionList--row {
 
     .euiDescriptionList__title {
-      @include euiFontSizeM;
+      @include euiFontSize;
       margin-top: $euiSize;
 
       // Make sure the first <dt> doesn't get a margine.
@@ -62,13 +62,13 @@
     }
 
     .euiDescriptionList__title {
-      @include euiFontSizeM;
+      @include euiFontSize;
       flex-basis: 50%;
       padding-right: $euiSizeS;
     }
 
     .euiDescriptionList__description {
-      @include euiFontSizeM;
+      @include euiFontSize;
       flex-basis: 50%;
       padding-left: $euiSizeS;
     }

src/components/header/header_alert/_header_alert.scss

@@ -24,7 +24,7 @@
 
   .euiHeaderAlert__title {
     font-weight: $euiFontWeightMedium;
-    @include euiFontSizeM;
+    @include euiFontSize;
     padding-right: $euiSizeL; // Accounts for the dismiss button.
   }
 

src/components/side_nav/_side_nav_item.scss

@@ -99,7 +99,7 @@
 
     .euiSideNavItemButton__label {
       @include euiTitle;
-      font-size: $euiSize + 2px;
+      font-size: $euiFontSizeM;
     }
   }
 

src/components/text/_text.scss

@@ -1,6 +1,6 @@
 .euiText {
   @include euiText;
-  @include euiFontSizeM;
+  @include euiFontSize;
 
   a {
     color: $euiLinkColor;
@@ -57,6 +57,7 @@
   }
 
   h3 {
+    font-size: 112.5%;
     font-weight: $euiFontWeightMedium;
   }
 

src/components/toast/_toast.scss

@@ -66,7 +66,7 @@ $toastTypes: (
  * 3. Account for close button.
  */
 .euiToastHeader {
-  @include euiFontSizeM;
+  @include euiFontSize;
   padding-right: $euiSizeL; /* 3 */
 
   display: flex;

src/components/tooltip/_tooltip.scss

@@ -21,17 +21,17 @@
   }
 
   // ANIMATING -- with slight delay
-  transition: 
+  transition:
     opacity $euiAnimSpeedNormal ease-out $euiAnimSpeedSlow,
     visibility $euiAnimSpeedNormal ease-out $euiAnimSpeedSlow,
     transform $euiAnimSpeedNormal ease-out $euiAnimSpeedSlow;
-  opacity: 0; 
-  visibility: hidden; 
+  opacity: 0;
+  visibility: hidden;
   transform: translateX(0) translateY($euiSize * -1) translateY(0); // default starting position of top
 
   // Don't delay the animation if the tooltip is on click
   .euiTooltip--click & {
-    transition: 
+    transition:
       opacity $euiAnimSpeedNormal ease-out,
       visibility $euiAnimSpeedNormal ease-out,
       transform $euiAnimSpeedNormal ease-out;
@@ -40,8 +40,8 @@
   &.euiTooltip-isVisible {
     opacity: 1;
     visibility: visible;
-    transform: translateX(0) translateY(0) translateZ(0) !important; 
-              // Using important here so we're always at (0,0,0) when visible, no matter the position. 
+    transform: translateX(0) translateY(0) translateZ(0) !important;
+              // Using important here so we're always at (0,0,0) when visible, no matter the position.
               // May need to revisit if we find override issues.
   }
 
@@ -59,8 +59,8 @@
     }
 }
 
-  // The tooltip content (for styling)  
-  
+  // The tooltip content (for styling)
+
   .euiTooltip__content {
 
     // Scoped variables for component-only re-use
@@ -70,13 +70,13 @@
 
     // STYLING
     @include euiBottomShadow;
-    @include euiFontSizeS();  
+    @include euiFontSizeS();
     background-color: $background-color;
     border-radius: $euiBorderRadius;
     padding: $euiSizeM;
     color: $text-color;
     white-space: nowrap;
-    
+
     // ARROW
     position: relative;
     &::before {
@@ -89,19 +89,19 @@
       background-color: $background-color;
       width: $arrow-size;
       height: $arrow-size;
-    
+
       // Positions
       .euiTooltip--right & {
         bottom: 50%;
         left: -$arrow-size/2;
         transform: translateY(50%) rotateZ(45deg);
       }
-     
+
       .euiTooltip--bottom & {
         bottom: auto;
         top: -$arrow-size/2;
       }
-     
+
       .euiTooltip--left & {
         bottom: 50%;
         left: auto;
@@ -113,8 +113,8 @@
 
   // The tooltip title if it exists
   .euiTooltip__title {
-    @include euiFontSizeM;
-    font-weight: $euiFontWeightMedium;    
+    @include euiFontSize;
+    font-weight: $euiFontWeightMedium;
     margin-bottom: $euiSizeS;
     border-bottom: $euiBorderWidthThin solid $euiColorDarkShade;
-  }
+  }

src/global_styling/mixins/_typography.scss

@@ -42,6 +42,11 @@
   line-height: $euiLineHeight;
 }
 
+@mixin euiFontSize {
+  @include fontSize($euiFontSize);
+  line-height: $euiLineHeight;
+}
+
 @mixin euiFontSizeL {
   @include fontSize($euiFontSizeL);
   line-height: $euiLineHeight;

src/global_styling/variables/_typography.scss

@@ -27,7 +27,7 @@ $euiFontSize:       $euiSize !default;
 
 $euiFontSizeXS:     $euiFontSize * .75 !default;
 $euiFontSizeS:      $euiFontSize * .875 !default;
-$euiFontSizeM:      $euiFontSize !default;
+$euiFontSizeM:      $euiFontSize * 1.125 !default;
 $euiFontSizeL:      $euiFontSize * 1.5 !default;
 $euiFontSizeXL:     $euiFontSize * 2 !default;
 $euiFontSizeXXL:    $euiFontSize * 3 !default;

src/themes/k6/k6_globals.scss

@@ -1,10 +1,11 @@
+$euiFontSize:       14px;
+
 $euiFontSizeXS:     12px;
 $euiFontSizeS:      14px;
-$euiFontSizeM:      14px;
-$euiFontSize:       14px;
-$euiFontSizeL:      24px;
-$euiFontSizeXL:     28px;
+$euiFontSizeM:      16px;
+$euiFontSizeL:      18px;
+$euiFontSizeXL:     24px;
 $euiFontSizeXXL:    32px;
 
 // Make titles bold.
-$euiFontWeightLight: 400;
+$euiFontWeightLight: 500;