From 0df2b559e4fca84be288594f1434e7844249a228 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Tue, 29 Jul 2025 11:31:46 +0200 Subject: [PATCH 1/3] refactor: ensure typography variable order - removes unexpected common typography definitions as those are defined in the themes - ensures correct typography file order --- .../src/variables/_index.scss | 3 +- .../global_styling/variables/_typography.scss | 69 +------------------ 2 files changed, 3 insertions(+), 69 deletions(-) diff --git a/packages/eui-theme-borealis/src/variables/_index.scss b/packages/eui-theme-borealis/src/variables/_index.scss index c94dbfc238b..bd1fa1f4950 100644 --- a/packages/eui-theme-borealis/src/variables/_index.scss +++ b/packages/eui-theme-borealis/src/variables/_index.scss @@ -6,11 +6,12 @@ @import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/size'; // borders are used in the common package, to define them on theme level we require the size variables first @import 'borders'; -@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/index'; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/responsive'; @import 'states'; @import './colors/colors_severity'; @import 'form'; @import 'page'; @import 'font_weight'; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/typography'; @import 'typography'; diff --git a/packages/eui-theme-common/src/global_styling/variables/_typography.scss b/packages/eui-theme-common/src/global_styling/variables/_typography.scss index 1ca62f3248c..3660c08ded4 100644 --- a/packages/eui-theme-common/src/global_styling/variables/_typography.scss +++ b/packages/eui-theme-common/src/global_styling/variables/_typography.scss @@ -1,75 +1,8 @@ // Families -$euiFontFamily: 'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif !default; $euiCodeFontFamily: 'Roboto Mono', Menlo, Courier, monospace !default; // Careful using ligatures. Code editors like ACE will often error because of width calculations $euiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default; -// Font sizes -- scale is loosely based on Major Third (1.250) -$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 -$euiFontSizeL: $euiFontSize * nth($euiTextScale, 3) !default; // 20px -$euiFontSizeXL: $euiFontSize * nth($euiTextScale, 2) !default; // 28px -$euiFontSizeXXL: $euiFontSize * nth($euiTextScale, 1) !default; // 36px - // Line height -$euiLineHeight: 1.5 !default; -$euiBodyLineHeight: 1 !default; - -// Normally functions are imported before variables in `_index.scss` files -// But because they need to consume some typography variables they need to live here -@function convertToRem($size) { - @return #{$size / $euiFontSize}rem; -} - -// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline. -// 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); -} - -// 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; +$euiLineHeight: 1.5 !default; \ No newline at end of file From 29c618759d305ef55d732a569f72d26d2e573281 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Tue, 29 Jul 2025 13:15:32 +0200 Subject: [PATCH 2/3] chore: add changelogs --- .../changelogs/upcoming/8922.md | 4 ++++ .../eui-theme-common/changelogs/upcoming/8922.md | 16 ++++++++++++++++ packages/eui/changelogs/upcoming/8922.md | 4 ++++ 3 files changed, 24 insertions(+) create mode 100644 packages/eui-theme-borealis/changelogs/upcoming/8922.md create mode 100644 packages/eui-theme-common/changelogs/upcoming/8922.md create mode 100644 packages/eui/changelogs/upcoming/8922.md diff --git a/packages/eui-theme-borealis/changelogs/upcoming/8922.md b/packages/eui-theme-borealis/changelogs/upcoming/8922.md new file mode 100644 index 00000000000..23a8ed1da61 --- /dev/null +++ b/packages/eui-theme-borealis/changelogs/upcoming/8922.md @@ -0,0 +1,4 @@ +**Bug fixes** + +- Updated shared theme SCSS imports to ensure expected results for the SCSS function `lineHeightFromBaseline` + diff --git a/packages/eui-theme-common/changelogs/upcoming/8922.md b/packages/eui-theme-common/changelogs/upcoming/8922.md new file mode 100644 index 00000000000..4db8fda3af3 --- /dev/null +++ b/packages/eui-theme-common/changelogs/upcoming/8922.md @@ -0,0 +1,16 @@ +**Breaking changes** + +- Removed obsolete SCSS typography definitions - use the definitions from the themes directly + - $euiFontFamily + - $euiTextScale + - $euiFontSize + - $euiFontSizeXS + - $euiFontSizeS + - $euiFontSizeM + - $euiFontSizeL + - $euiFontSizeXL + - $euiFontSizeXXL + - $euiBodyLineHeight + - $euiTitles + - convertToRem() + - lineHeightFromBaseline() \ No newline at end of file diff --git a/packages/eui/changelogs/upcoming/8922.md b/packages/eui/changelogs/upcoming/8922.md new file mode 100644 index 00000000000..446b59da67b --- /dev/null +++ b/packages/eui/changelogs/upcoming/8922.md @@ -0,0 +1,4 @@ +**Bug fixes** + +- Fixed unexpected results for the SCSS function `lineHeightFromBaseline` + From 72e4c72366d11b330c37de42449724b8074111bf Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Thu, 31 Jul 2025 11:48:52 +0200 Subject: [PATCH 3/3] style: group common imports --- packages/eui-theme-borealis/src/variables/_index.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/eui-theme-borealis/src/variables/_index.scss b/packages/eui-theme-borealis/src/variables/_index.scss index bd1fa1f4950..55e32e73c37 100644 --- a/packages/eui-theme-borealis/src/variables/_index.scss +++ b/packages/eui-theme-borealis/src/variables/_index.scss @@ -4,14 +4,14 @@ // package instead of the common one @import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/size'; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/responsive'; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/typography'; + // borders are used in the common package, to define them on theme level we require the size variables first @import 'borders'; -@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/responsive'; @import 'states'; - @import './colors/colors_severity'; @import 'form'; @import 'page'; @import 'font_weight'; -@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/typography'; @import 'typography';