[Theme] Fix typography scss order

[mgadewoll]

Summary

This PR updates the shared SCSS typography definitions in eui-theme-common and how they are imported in eui-theme-borealis.

Important

EUI does not officially support SCSS styling anymore. The existing files remain to support Kibana while it migrates off SCSS.

Problem

Based on the import order and variable definition the previous setup would result in the function lineHeightFromBaseline to return unexpected values. This was due to the dependency function convertToRem relying on $euiFontSize which is defined in the same file combined with the order of imports of the SCSS files.

Proposed solution

• remove duplicated shared typography SCSS in eui-theme-common which is defined specifically per theme in the themes themselves
• leave only actually shared typography SCSS
• ensure shared typography SCSS is loaded before theme typography SCSS in eui-theme-borealis

With this update the output matches the results of the CSS-in-JS equivalent euiLineHeightFromBaseline .

// before - $euiFontSize = 16px from eui-theme-common
line-height: lineHeightFromBaseline(2); // results in 1rem

// after - $euiFontSize = 14px from eui-theme-borealis
line-height: lineHeightFromBaseline(2); // results in 1.1429rem

Why are we making this change?

Ensuring that lecagy usages of lineHeightFromBaseline work as expected.

Screenshots

before

after

Impact to users

🟢 There are no changes needed on consumer side.

QA

ℹ️ Testing this requires a SCSS setup. You can either checkout an older EUI tag (e.g. v100.0.0) that still includes the old EUI docs, setup a small CRA project or use Kibana.

🔗 The changes have been tested in Kibana here.
login: https://p.elstc.co/paste/Cl3Ucde+#3Y5wj2XV9c4LQ047r9nsM7M8v6ILnAVtCASYPCQx20u

• verify that lineHeightFromBaseline(2) results in 1.1429rem instead of 1rem

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in both MacOS and Windows high contrast modes
    • (emulate forced colors if you do not have access to a Windows machine.)
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 72e4c72
• Documentation website
• Storybook

History

• 💚 Build #922 succeeded 29c6187

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 72e4c72

History

• 💚 Build #4488 succeeded 29c6187

cc @mgadewoll

[weronikaolejniczak]

Thank you for the quick changes, Lene!

There's only one usage of SCSS lineHeightFromBaseline in Kibana:

• src/platform/packages/shared/kbn-unified-data-table/src/components/data_table.scss

and that usage is being migrated. So this change is likely very low impact.

🟢 Testing

I tested with the version from this PR in the above-mentioned use case ☝🏻 here's the result:

Before	After
max-height: lineHeightFromBaseline(2);	max-height: lineHeightFromBaseline(2);
14px = 1rem	16px = 1.1429rem

so it looks alright 👌🏻