diff --git a/CHANGELOG.md b/CHANGELOG.md index 04d9369662d2..67e4c60e8485 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ **Theme: Amsterdam** +- Text sizes are now based on a 14px base font size. Headings are now bold. ([#2936](https://github.com/elastic/eui/pull/2936)) - Altered `secondary`, `accent` colors to be more saturated ([#2873](https://github.com/elastic/eui/pull/2873)) diff --git a/src/themes/eui-amsterdam/global_styling/index.scss b/src/themes/eui-amsterdam/global_styling/index.scss index 0c105e468620..cb9a09de94d3 100644 --- a/src/themes/eui-amsterdam/global_styling/index.scss +++ b/src/themes/eui-amsterdam/global_styling/index.scss @@ -5,6 +5,7 @@ // Variables come next, and are used in some mixins @import '../../../global_styling/variables/index'; +@import 'variables/index'; // Mixins provide generic code expansion through helpers @import '../../../global_styling/mixins/index'; diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss index a5b58fb8b6ed..2690358ce99c 100644 --- a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss +++ b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss @@ -1 +1,2 @@ @import 'panel'; +@import 'typography'; diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss b/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss new file mode 100644 index 000000000000..4ce744a66b71 --- /dev/null +++ b/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss @@ -0,0 +1,40 @@ +@mixin euiTitle($size: 'm') { + color: $euiTitleColor; + + @if $size == 'xxxs' { + @include euiFontSizeXS; + @include lineHeightFromBaseline(3); + font-weight: $euiFontWeightSemiBold; + letter-spacing: 0; + } @else if $size == 'xxs' { + @include euiFontSizeS; + @include lineHeightFromBaseline(3); + font-weight: $euiFontWeightSemiBold; + letter-spacing: 0; + } @else if $size == 'xs' { + @include euiFontSize; + @include lineHeightFromBaseline(3); + font-weight: $euiFontWeightSemiBold; + letter-spacing: 0; + } @else if $size == 's' { + @include euiFontSizeL; + @include lineHeightFromBaseline(4); + font-weight: $euiFontWeightBold; + letter-spacing: 0; + } @else if $size == 'm' { + @include euiFontSizeXL; + @include lineHeightFromBaseline(5); + font-weight: $euiFontWeightBold; + letter-spacing: 0; + } @else if $size == 'l' { + @include euiFontSizeXXL; + @include lineHeightFromBaseline(6); + font-weight: $euiFontWeightBold; + letter-spacing: -.0625rem; + } @else { + @include fontSize($size); + @include lineHeightFromBaseline(3); + font-weight: $euiFontWeightBold; + letter-spacing: 0; + } +} diff --git a/src/themes/eui-amsterdam/global_styling/variables/_index.scss b/src/themes/eui-amsterdam/global_styling/variables/_index.scss new file mode 100644 index 000000000000..3be796aeb3fd --- /dev/null +++ b/src/themes/eui-amsterdam/global_styling/variables/_index.scss @@ -0,0 +1 @@ +@import 'typography'; diff --git a/src/themes/eui-amsterdam/global_styling/variables/_typography.scss b/src/themes/eui-amsterdam/global_styling/variables/_typography.scss new file mode 100644 index 000000000000..23a2da0860eb --- /dev/null +++ b/src/themes/eui-amsterdam/global_styling/variables/_typography.scss @@ -0,0 +1,9 @@ +$euiFontSize: $euiSize - 2; // 5th position in scale + +// These variables are unchanged, but the calculated values are smaller +$euiFontSizeXS: $euiFontSize * nth($euiTextScale, 7); // 11px +$euiFontSizeS: $euiFontSize * nth($euiTextScale, 6); // 12px +$euiFontSizeM: $euiFontSize * nth($euiTextScale, 4); // 16px +$euiFontSizeL: $euiFontSize * nth($euiTextScale, 3); // 18px +$euiFontSizeXL: $euiFontSize * nth($euiTextScale, 2); // 25px +$euiFontSizeXXL: $euiFontSize * nth($euiTextScale, 1); // 32px diff --git a/src/themes/eui-amsterdam/overrides/_text.scss b/src/themes/eui-amsterdam/overrides/_text.scss new file mode 100644 index 000000000000..45731e79f478 --- /dev/null +++ b/src/themes/eui-amsterdam/overrides/_text.scss @@ -0,0 +1,8 @@ +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: $euiFontWeightBold; +} diff --git a/src/themes/eui-amsterdam/overrides/_title.scss b/src/themes/eui-amsterdam/overrides/_title.scss new file mode 100644 index 000000000000..97d1d6c50431 --- /dev/null +++ b/src/themes/eui-amsterdam/overrides/_title.scss @@ -0,0 +1,4 @@ +.euiTitle { + font-weight: $euiFontWeightBold; + letter-spacing: 0; +}