diff --git a/CHANGELOG.md b/CHANGELOG.md index c55b85bcab9..68ca6b0c8c9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -66,6 +66,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)) ## [`20.0.2`](https://github.com/elastic/eui/tree/v20.0.2) diff --git a/src-docs/src/theme_amsterdam_dark.scss b/src-docs/src/theme_amsterdam_dark.scss index cb6f21c0804..9d601757801 100644 --- a/src-docs/src/theme_amsterdam_dark.scss +++ b/src-docs/src/theme_amsterdam_dark.scss @@ -1,6 +1,5 @@ // sass-lint:disable no-url-domains, no-url-protocols -@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i'); -@import url('https://rsms.me/inter/inter-ui.css'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); @import '../../src/theme_amsterdam_dark'; @import './components/guide_components'; diff --git a/src-docs/src/theme_amsterdam_light.scss b/src-docs/src/theme_amsterdam_light.scss index 60cb7e6156d..73cf6abaa18 100644 --- a/src-docs/src/theme_amsterdam_light.scss +++ b/src-docs/src/theme_amsterdam_light.scss @@ -1,6 +1,5 @@ // sass-lint:disable no-url-domains, no-url-protocols -@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i'); -@import url('https://rsms.me/inter/inter-ui.css'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); @import '../../src/theme_amsterdam_light'; @import './components/guide_components'; diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss index d668df1e4f1..0905e5476cb 100644 --- a/src/global_styling/mixins/_typography.scss +++ b/src/global_styling/mixins/_typography.scss @@ -25,31 +25,14 @@ @mixin euiTitle($size: 'm') { color: $euiTitleColor; - @if $size == 'xxxs' { - @include euiFontSizeXS; - @include lineHeightFromBaseline(3); - font-weight: $euiFontWeightBold; - } @else if $size == 'xxs' { - @include euiFontSizeS; - @include lineHeightFromBaseline(3); - font-weight: $euiFontWeightBold; - } @else if $size == 'xs' { - @include euiFontSize; - @include lineHeightFromBaseline(3); - font-weight: $euiFontWeightSemiBold; - letter-spacing: -.02em; - } @else if $size == 's' { - @include euiFontSizeL; - @include lineHeightFromBaseline(4); - font-weight: $euiFontWeightMedium; - letter-spacing: -.025em; - } @else if $size == 'm' { - @include euiFontSizeXL; - @include lineHeightFromBaseline(5); - letter-spacing: -.04em; - } @else if $size == 'l' { - @include euiFontSizeXXL; - @include lineHeightFromBaseline(6); + @if (map-has-key($euiTitles, $size)) { + @each $property, $value in map-get($euiTitles, $size) { + @if ($property == 'font-size') { + @include fontSize($value); + } @else { + #{$property}: $value; + } + } } @else { @include fontSize($size); @include lineHeightFromBaseline(3); @@ -84,17 +67,25 @@ } @mixin euiFontSizeXL { - @include fontSize($euiFontSizeXL); + @each $property, $value in map-get($euiTitles, 'm') { + @if ($property == 'font-size') { + @include fontSize($value); + } @else { + #{$property}: $value; + } + } line-height: 1.25; - font-weight: $euiFontWeightLight; // always apply light weight to x-large type - letter-spacing: -.05em; } @mixin euiFontSizeXXL { - @include fontSize($euiFontSizeXXL); + @each $property, $value in map-get($euiTitles, 'l') { + @if ($property == 'font-size') { + @include fontSize($value); + } @else { + #{$property}: $value; + } + } line-height: 1.25; - font-weight: $euiFontWeightLight; // always apply light weight to xx-large type - letter-spacing: -.03em; } @mixin euiTextBreakWord { diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss index 7f75be32920..61523572c54 100644 --- a/src/global_styling/variables/_typography.scss +++ b/src/global_styling/variables/_typography.scss @@ -9,7 +9,6 @@ } // Spit out rem and px - @mixin fontSize($size: $euiFontSize) { font-size: $size; font-size: convertToRem($size); @@ -19,13 +18,14 @@ // EX: A proper line-height for text is 1.5 times the font-size. // If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the // text stays on the baseline, we pass a multiplier to calculate a line-height in rems. +@function lineHeightFromBaseline($multiplier: 3) { + @return convertToRem(($euiFontSize/2)*$multiplier); +} @mixin lineHeightFromBaseline($multiplier: 3) { - line-height: convertToRem(($euiFontSize/2)*$multiplier); + line-height: lineHeightFromBaseline($multiplier); } - // Families - $euiFontFamily: 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default; $euiCodeFontFamily: 'Roboto Mono', Consolas, Menlo, Courier, monospace !default; @@ -36,7 +36,6 @@ $euiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default; $euiTextScale: 2.25, 1.75, 1.25, 1.125, 1, .875, .75 !default; $euiFontSize: $euiSize !default; // 5th position in scale - $euiFontSizeXS: $euiFontSize * nth($euiTextScale, 7) !default; // 12px $euiFontSizeS: $euiFontSize * nth($euiTextScale, 6) !default; // 14px $euiFontSizeM: $euiFontSize * nth($euiTextScale, 4) !default; // 18px @@ -45,14 +44,51 @@ $euiFontSizeXL: $euiFontSize * nth($euiTextScale, 2) !default; // 28px $euiFontSizeXXL: $euiFontSize * nth($euiTextScale, 1) !default; // 36px // Line height - $euiLineHeight: 1.5; - // Font weights - $euiFontWeightLight: 300 !default; $euiFontWeightRegular: 400 !default; $euiFontWeightMedium: 500 !default; $euiFontWeightSemiBold: 600 !default; $euiFontWeightBold: 700 !default; + +// Titles map +// Lists all the properties per EuiTitle size that then gets looped through to create the selectors. +// The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves +$euiTitles: ( + 'xxxs': ( + 'font-size': $euiFontSizeXS, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightBold, + ), + 'xxs': ( + 'font-size': $euiFontSizeS, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightBold, + ), + 'xs': ( + 'font-size': $euiFontSize, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightSemiBold, + 'letter-spacing': -.02em, + ), + 's': ( + 'font-size': $euiFontSizeL, + 'line-height': lineHeightFromBaseline(4), + 'font-weight': $euiFontWeightMedium, + 'letter-spacing': -.025em, + ), + 'm': ( + 'font-size': $euiFontSizeXL, + 'line-height': lineHeightFromBaseline(5), + 'font-weight': $euiFontWeightLight, + 'letter-spacing': -.04em, + ), + 'l': ( + 'font-size': $euiFontSizeXXL, + 'line-height': lineHeightFromBaseline(6), + 'font-weight': $euiFontWeightLight, + 'letter-spacing': -.03em, + ), +) !default; diff --git a/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss b/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss index 084c58a44c5..2ef835ad56a 100644 --- a/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss +++ b/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss @@ -5,6 +5,8 @@ $euiColorPrimary: #006DE4; $euiColorSecondary: #00BFB3; $euiColorAccent: #FC358E; +$euiLinkColor: $euiColorPrimary; // Weirdly this one wasn't updating with new primary color + // Contrasty text variants $euiColorPrimaryText: makeHighContrastColor($euiColorPrimary); $euiColorSecondaryText: makeHighContrastColor($euiColorSecondary); diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss index e60436f4927..7f441a58f79 100644 --- a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss +++ b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss @@ -1,2 +1,2 @@ -@import 'panel'; @import 'button'; +@import 'panel'; diff --git a/src/themes/eui-amsterdam/global_styling/variables/_index.scss b/src/themes/eui-amsterdam/global_styling/variables/_index.scss index c129d849cb7..d8e6fea9de2 100644 --- a/src/themes/eui-amsterdam/global_styling/variables/_index.scss +++ b/src/themes/eui-amsterdam/global_styling/variables/_index.scss @@ -1,2 +1,3 @@ @import 'buttons'; @import 'borders'; +@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 00000000000..8e9a49ade77 --- /dev/null +++ b/src/themes/eui-amsterdam/global_styling/variables/_typography.scss @@ -0,0 +1,48 @@ +// Finally start using the non-beta version of Inter +$euiFontFamily: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + +// Font sizes -- scale is loosely based on Major Third (1.250) with a base of 14px +// Base list is an altered scale based on 16px to match the resulted values below +$euiTextScale: 2.125, 1.6875, 1.375, 1.125, 1, .875, .75; + +$euiFontSize: $euiSize - 2; // 14px + +$euiFontSizeXS: floor($euiFontSize * .86); // 12px // h6 +$euiFontSizeS: floor($euiFontSize * 1); // 14px // h5 --> Now the same as the base $euiFontSize +$euiFontSizeM: ceil($euiFontSize * 1.14); // 16px // h4 +$euiFontSizeL: ceil($euiFontSize * 1.57); // 22px // h3 +$euiFontSizeXL: floor($euiFontSize * 1.93); // 27px // h2 +$euiFontSizeXXL: floor($euiFontSize * 2.43); // 34px // h1 + +$euiTitles: ( + 'xxxs': ( + 'font-size': $euiFontSizeXS, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightBold, + ), + 'xxs': ( + 'font-size': $euiFontSizeS, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightBold, + ), + 'xs': ( + 'font-size': $euiFontSizeM, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightBold, + ), + 's': ( + 'font-size': $euiFontSizeL, + 'line-height': lineHeightFromBaseline(4), + 'font-weight': $euiFontWeightBold, + ), + 'm': ( + 'font-size': $euiFontSizeXL, + 'line-height': lineHeightFromBaseline(5), + 'font-weight': $euiFontWeightBold, + ), + 'l': ( + 'font-size': $euiFontSizeXXL, + 'line-height': lineHeightFromBaseline(6), + 'font-weight': $euiFontWeightBold, + ), +); diff --git a/src/themes/eui-amsterdam/overrides/_index.scss b/src/themes/eui-amsterdam/overrides/_index.scss index 8188c997879..7e0fea7c17f 100644 --- a/src/themes/eui-amsterdam/overrides/_index.scss +++ b/src/themes/eui-amsterdam/overrides/_index.scss @@ -1,3 +1,4 @@ @import 'button'; @import 'button_empty'; @import 'button_group'; +@import 'text'; diff --git a/src/themes/eui-amsterdam/overrides/_text.scss b/src/themes/eui-amsterdam/overrides/_text.scss new file mode 100644 index 00000000000..ffda9eff4ba --- /dev/null +++ b/src/themes/eui-amsterdam/overrides/_text.scss @@ -0,0 +1,5 @@ +// Increase the medium (currently default) size of EuiText to original 16px +.euiText--medium { + @include fontSize($euiFontSizeM); + @include euiScaleText($euiFontSizeM); +}