From ae538345cacaf1d85f8e89032a330f9e13057bd4 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 20 Nov 2017 21:52:37 -0800
Subject: [PATCH] Extract typography mixins into the mixins directory. Make
 headings bold.

---
 src/global_styling/k6/_typography.scss        |  3 +
 src/global_styling/mixins/_index.scss         |  1 +
 src/global_styling/mixins/_typography.scss    | 58 +++++++++++++++++
 src/global_styling/variables/_typography.scss | 64 +------------------
 4 files changed, 65 insertions(+), 61 deletions(-)
 create mode 100644 src/global_styling/mixins/_typography.scss

diff --git a/src/global_styling/k6/_typography.scss b/src/global_styling/k6/_typography.scss
index b7fa0353165f..50c72558ed61 100644
--- a/src/global_styling/k6/_typography.scss
+++ b/src/global_styling/k6/_typography.scss
@@ -5,3 +5,6 @@ $euiFontSize:       14px;
 $euiFontSizeL:      18px;
 $euiFontSizeXL:     22px;
 $euiFontSizeXXL:    28px;
+
+// Make titles bold.
+$euiFontWeightLight: 500;
diff --git a/src/global_styling/mixins/_index.scss b/src/global_styling/mixins/_index.scss
index 0d92a58e5d68..169cfa6d37e3 100644
--- a/src/global_styling/mixins/_index.scss
+++ b/src/global_styling/mixins/_index.scss
@@ -2,4 +2,5 @@
 @import 'responsive';
 @import 'shadow';
 @import 'size';
+@import 'typography';
 @import 'helpers';
diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
new file mode 100644
index 000000000000..352783e35d97
--- /dev/null
+++ b/src/global_styling/mixins/_typography.scss
@@ -0,0 +1,58 @@
+
+// Our base fonts
+
+@mixin euiFont {
+  font-family: $euiFontFamily;
+  font-weight: $euiFontWeightRegular;
+}
+
+@mixin euiCodeFont {
+  font-family: $euiCodeFontFamily;
+}
+
+@mixin euiTitle {
+  color: $euiTitleColor;
+  font-weight: $euiFontWeightLight;
+}
+
+@mixin euiText {
+  color: $euiTextColor;
+  font-weight: $euiFontWeightRegular;
+}
+
+// Font sizing extends, using rem mixin
+
+@mixin euiFontSize {
+  @include fontSize($euiFontSize);
+  line-height: $euiLineHeight;
+}
+
+@mixin euiFontSizeXS {
+  @include fontSize($euiFontSizeXS);
+  line-height: $euiLineHeight;
+}
+
+@mixin euiFontSizeS {
+  @include fontSize($euiFontSizeS);
+  line-height: $euiLineHeight;
+}
+
+@mixin euiFontSizeM {
+  @include fontSize($euiFontSizeM);
+  line-height: $euiLineHeight;
+}
+
+@mixin euiFontSizeL {
+  @include fontSize($euiFontSizeL);
+  line-height: $euiLineHeight;
+}
+
+@mixin euiFontSizeXL {
+  @include fontSize($euiFontSizeXL);
+  line-height: $euiLineHeight;
+}
+
+@mixin euiFontSizeXXL {
+  @include fontSize($euiFontSizeXXL);
+  line-height: $euiLineHeight;
+}
diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
index 2670dec3dc54..ce88c0422088 100644
--- a/src/global_styling/variables/_typography.scss
+++ b/src/global_styling/variables/_typography.scss
@@ -39,64 +39,6 @@ $euiLineHeight:     1.5;
 
 // Font weights
 
-$euiFontWeightLight:    300;
-$euiFontWeightRegular:  400;
-$euiFontWeightMedium:   500;
-
-// Our base fonts
-
-@mixin euiFont {
-  font-family: $euiFontFamily;
-  font-weight: $euiFontWeightRegular;
-}
-
-@mixin euiCodeFont {
-  font-family: $euiCodeFontFamily;
-}
-
-@mixin euiTitle {
-  color: $euiTitleColor;
-  font-weight: $euiFontWeightLight;
-}
-
-@mixin euiText {
-  color: $euiTextColor;
-  font-weight: $euiFontWeightRegular;
-}
-
-// Font sizing extends, using rem mixin
-
-@mixin euiFontSize {
-  @include fontSize($euiFontSize);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeXS {
-  @include fontSize($euiFontSizeXS);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeS {
-  @include fontSize($euiFontSizeS);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeM {
-  @include fontSize($euiFontSizeM);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeL {
-  @include fontSize($euiFontSizeL);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeXL {
-  @include fontSize($euiFontSizeXL);
-  line-height: $euiLineHeight;
-}
-
-@mixin euiFontSizeXXL {
-  @include fontSize($euiFontSizeXXL);
-  line-height: $euiLineHeight;
-}
+$euiFontWeightLight:    300 !default;
+$euiFontWeightRegular:  400 !default;
+$euiFontWeightMedium:   500 !default;