[Emotion][Theming] Add new consumer-configurable font.defaultUnits token

src-docs/src/views/theme/typography/_typography_js.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent, useState } from 'react';
 import { css } from '@emotion/react';
-import { useEuiTheme } from '../../../../../src/services';
+import { useEuiTheme, EuiThemeProvider } from '../../../../../src/services';
 import {
   EuiBasicTable,
   EuiButtonGroup,
@@ -9,6 +9,7 @@ import {
   EuiDescribedFormGroup,
   EuiPanel,
   EuiSpacer,
+  EuiText,
 } from '../../../../../src/components';
 
 import {
@@ -104,6 +105,26 @@ export const FontJS = () => {
         snippet={'font-feature-settings: ${euiTheme.font.featureSettings};'}
         snippetLanguage="emotion"
       />
+
+      <ThemeExample
+        title={<code>euiTheme.font.fontSizeUnit</code>}
+        description={getDescription(baseProps.fontSizeUnit)}
+        example={
+          <EuiThemeProvider modify={{ font: { fontSizeUnit: 'px' } }}>
+            <EuiText>
+              My font size and line height is set using <EuiCode>px</EuiCode>{' '}
+              and not <EuiCode>rem</EuiCode>
+            </EuiText>
+          </EuiThemeProvider>
+        }
+        snippet={`<EuiProvider modify={{ font: { fontSizeUnit: 'px' } }}>
+  <EuiText>
+    <p>Hello world</p>
+  </EuiText>
+</EuiProvider>
+`}
+        snippetLanguage="jsx"
+      />
     </>
   );
 };

src/components/markdown_editor/markdown_format.styles.ts

@@ -67,19 +67,16 @@ export const euiMarkdownFormatStyles = (euiTheme: UseEuiTheme) => ({
   // Text sizes
   m: css`
     ${euiScaleMarkdownFormatText(euiTheme, {
-      measurement: 'rem',
       customScale: 'm',
     })}
   `,
   s: css`
     ${euiScaleMarkdownFormatText(euiTheme, {
-      measurement: 'rem',
       customScale: 's',
     })}
   `,
   xs: css`
     ${euiScaleMarkdownFormatText(euiTheme, {
-      measurement: 'rem',
       customScale: 'xs',
     })}
   `,

src/components/text/text.styles.ts

@@ -345,19 +345,16 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => {
     // Sizes
     m: css`
       ${euiScaleText(euiThemeContext, {
-        measurement: 'rem',
         customScale: 'm',
       })}
     `,
     s: css`
       ${euiScaleText(euiThemeContext, {
-        measurement: 'rem',
         customScale: 's',
       })}
     `,
     xs: css`
       ${euiScaleText(euiThemeContext, {
-        measurement: 'rem',
         customScale: 'xs',
       })}
     `,

src/global_styling/functions/__snapshots__/typography.test.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`euiFontSizeFromScale measurement em 1`] = `"1em"`;
+
+exports[`euiFontSizeFromScale measurement px 1`] = `"16px"`;
+
+exports[`euiFontSizeFromScale measurement rem 1`] = `"1.1429rem"`;
+
+exports[`euiFontSizeFromScale scale l 1`] = `"1.5714rem"`;
+
+exports[`euiFontSizeFromScale scale m 1`] = `"1.1429rem"`;
+
+exports[`euiFontSizeFromScale scale s 1`] = `"1.0000rem"`;
+
+exports[`euiFontSizeFromScale scale xl 1`] = `"1.9286rem"`;
+
+exports[`euiFontSizeFromScale scale xs 1`] = `"0.8571rem"`;
+
+exports[`euiFontSizeFromScale scale xxl 1`] = `"2.4286rem"`;
+
+exports[`euiFontSizeFromScale scale xxs 1`] = `"0.7857rem"`;
+
+exports[`euiFontSizeFromScale scale xxxs 1`] = `"0.6429rem"`;
+
+exports[`euiLineHeightFromBaseline measurement em 1`] = `"1.5000"`;
+
+exports[`euiLineHeightFromBaseline measurement px 1`] = `"24px"`;
+
+exports[`euiLineHeightFromBaseline measurement rem 1`] = `"1.7143rem"`;
+
+exports[`euiLineHeightFromBaseline scale l 1`] = `"1.7143rem"`;
+
+exports[`euiLineHeightFromBaseline scale m 1`] = `"1.7143rem"`;
+
+exports[`euiLineHeightFromBaseline scale s 1`] = `"1.4286rem"`;
+
+exports[`euiLineHeightFromBaseline scale xl 1`] = `"2.2857rem"`;
+
+exports[`euiLineHeightFromBaseline scale xs 1`] = `"1.1429rem"`;
+
+exports[`euiLineHeightFromBaseline scale xxl 1`] = `"2.8571rem"`;
+
+exports[`euiLineHeightFromBaseline scale xxs 1`] = `"1.1429rem"`;
+
+exports[`euiLineHeightFromBaseline scale xxxs 1`] = `"0.8571rem"`;

src/global_styling/functions/typography.test.tsx

@@ -0,0 +1,114 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent, PropsWithChildren } from 'react';
+import { renderHook } from '@testing-library/react';
+
+import { EuiProvider } from '../../components';
+import { useEuiTheme } from '../../services';
+import {
+  EuiThemeFontScales,
+  EuiThemeFontSizeMeasurements,
+} from '../variables/typography';
+
+import { euiFontSizeFromScale, euiLineHeightFromBaseline } from './typography';
+
+// Default euiTheme to use for most tests
+const { euiTheme } = renderHook(useEuiTheme).result.current;
+
+describe('euiFontSizeFromScale', () => {
+  describe('scale', () => {
+    EuiThemeFontScales.forEach((scale) => {
+      test(scale, () => {
+        expect(euiFontSizeFromScale(scale, euiTheme)).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('custom scale', () => {
+    it('allows passing a custom modifier to the existing scale', () => {
+      expect(
+        euiFontSizeFromScale('xxxs', euiTheme, { customScale: 's' })
+      ).toEqual('0.5625rem');
+    });
+  });
+
+  describe('measurement', () => {
+    EuiThemeFontSizeMeasurements.forEach((unit) => {
+      test(unit, () => {
+        const output = euiFontSizeFromScale('m', euiTheme, {
+          measurement: unit,
+        });
+        expect(output.endsWith(unit)).toBe(true);
+        expect(output).toMatchSnapshot();
+      });
+    });
+
+    it('falls back to the `fontSizeUnit` theme token if measurement is not passed', () => {
+      const wrapper: FunctionComponent<PropsWithChildren> = ({ children }) => (
+        <EuiProvider modify={{ font: { fontSizeUnit: 'px' } }}>
+          {children}
+        </EuiProvider>
+      );
+      const { euiTheme: modifiedEuiTheme } = renderHook(useEuiTheme, {
+        wrapper,
+      }).result.current;
+
+      expect(euiFontSizeFromScale('m', modifiedEuiTheme)).toEqual('16px');
+    });
+  });
+});
+
+describe('euiLineHeightFromBaseline', () => {
+  describe('scale', () => {
+    EuiThemeFontScales.forEach((scale) => {
+      test(scale, () => {
+        expect(euiLineHeightFromBaseline(scale, euiTheme)).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('custom scale', () => {
+    it('allows passing a custom modifier to the existing scale', () => {
+      expect(
+        euiLineHeightFromBaseline('xxxs', euiTheme, { customScale: 's' })
+      ).toEqual('0.8571rem');
+    });
+  });
+
+  describe('measurement', () => {
+    EuiThemeFontSizeMeasurements.forEach((unit) => {
+      test(unit, () => {
+        const output = euiLineHeightFromBaseline('m', euiTheme, {
+          measurement: unit,
+        });
+
+        if (unit !== 'em') {
+          expect(output.endsWith(unit)).toBe(true);
+        } else {
+          expect(Number(output)).not.toBeNaN();
+        }
+
+        expect(output).toMatchSnapshot();
+      });
+    });
+
+    it('falls back to the `fontSizeUnit` theme token if measurement is not passed', () => {
+      const wrapper: FunctionComponent<PropsWithChildren> = ({ children }) => (
+        <EuiProvider modify={{ font: { fontSizeUnit: 'px' } }}>
+          {children}
+        </EuiProvider>
+      );
+      const { euiTheme: modifiedEuiTheme } = renderHook(useEuiTheme, {
+        wrapper,
+      }).result.current;
+
+      expect(euiLineHeightFromBaseline('m', modifiedEuiTheme)).toEqual('24px');
+    });
+  });
+});

src/global_styling/functions/typography.ts

@@ -38,7 +38,7 @@ export interface _FontScaleOptions {
 export function euiFontSizeFromScale(
   scale: _EuiThemeFontScale,
   { base, font }: UseEuiTheme['euiTheme'],
-  { measurement = 'rem', customScale }: _FontScaleOptions = {}
+  { measurement = font.fontSizeUnit, customScale }: _FontScaleOptions = {}
 ) {
   if (measurement === 'em') {
     return `${font.scale[scale]}em`;
@@ -68,7 +68,7 @@ export function euiFontSizeFromScale(
 export function euiLineHeightFromBaseline(
   scale: _EuiThemeFontScale,
   { base, font }: UseEuiTheme['euiTheme'],
-  { measurement = 'rem', customScale }: _FontScaleOptions = {}
+  { measurement = font.fontSizeUnit, customScale }: _FontScaleOptions = {}
 ) {
   const { baseline, lineHeightMultiplier } = font;
   let numerator = base * font.scale[scale];

src/global_styling/variables/typography.ts

@@ -59,6 +59,15 @@ export type _EuiThemeFontBase = {
    * https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
    */
   featureSettings?: string;
+  /**
+   * Sets the default font size unit used by UI components like EuiText or EuiTitle.
+   *
+   * NOTE: This may overridden by some internal usages, e.g.
+   * EuiText's `relative` size which must use `em`.
+   *
+   * @default 'rem'
+   */
+  fontSizeUnit: _EuiThemeFontSizeMeasurement;
   /**
    * A computed number that is 1/4 of `base`
    */

src/themes/amsterdam/global_styling/variables/_typography.ts

@@ -34,6 +34,7 @@ export const fontBase: _EuiThemeFontBase = {
 
   // Careful using ligatures. Code editors like ACE will often error because of width calculations
   featureSettings: "'calt' 1, 'kern' 1, 'liga' 1",
+  fontSizeUnit: 'rem',
 
   baseline: computed(([base]) => base / 4, ['base']),
   lineHeightMultiplier: 1.5,

upcoming_changelogs/7133.md

@@ -0,0 +1 @@
+- Added `font.fontSizeUnit` theme token. EUI component font sizes default to `rem` units - this token allows consumers to configure this to `px` or `em`