diff --git a/src/global_styling/k6/_typography.scss b/src/global_styling/k6/_typography.scss index b7fa0353165..50c72558ed6 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 0d92a58e5d6..169cfa6d37e 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 00000000000..352783e35d9 --- /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 2670dec3dc5..ce88c042208 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;