Extract typography mixins into the mixins directory. Make headings bold.

elastic · Nov 21, 2017 · bc4a06f · bc4a06f
1 parent ebfe8d0
commit bc4a06f
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 61 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;