Add customScale option to typography functions

+ convert optional params to an options object

+ clean up euiFontSize and euiTitle fns - remove `scale` fallback since the utils don't really make sense without that param, and remove rem fallbacks in place of just single options fallback

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

@@ -252,10 +252,12 @@ export const FontScaleValuesJS = () => {
               measurementSelected !== 'rem' ? `, '${measurementSelected}'` : ''
             })`,
             size: `${
-              euiFontSize(scale, euiTheme, measurementSelected).fontSize
+              euiFontSize(scale, euiTheme, { measurement: measurementSelected })
+                .fontSize
             }`,
             lineHeight: `${
-              euiFontSize(scale, euiTheme, measurementSelected).lineHeight
+              euiFontSize(scale, euiTheme, { measurement: measurementSelected })
+                .lineHeight
             }`,
             index,
           };
@@ -269,7 +271,9 @@ export const FontScaleValuesJS = () => {
             render: (sample, item) => (
               <div
                 css={css`
-                  ${euiFontSize(item.id, euiTheme, measurementSelected)}
+                  ${euiFontSize(item.id, euiTheme, {
+                    measurement: measurementSelected,
+                  })}
                 `}
               >
                 The quick brown fox jumped over the blue moon to catch a snail

src/components/title/title.styles.ts

@@ -13,7 +13,7 @@ import {
   euiTextBreakWord,
   euiFontSize,
   _EuiThemeFontScale,
-  _EuiThemeFontSizeMeasurement,
+  _FontScaleOptions,
 } from '../../global_styling';
 import { EuiTitleSize } from './title';
 
@@ -28,9 +28,9 @@ type EuiThemeTitle = {
 };
 
 export const euiTitle = (
-  scale: EuiTitleSize = 'm',
+  scale: EuiTitleSize,
   euiTheme: UseEuiTheme['euiTheme'],
-  measurement: _EuiThemeFontSizeMeasurement = 'rem'
+  options?: _FontScaleOptions
 ): EuiThemeTitle => {
   const titleScaleToFontSizeScaleMap: {
     [size in EuiTitleSize]: _EuiThemeFontScale;
@@ -44,19 +44,19 @@ export const euiTitle = (
   };
 
   return {
-    ...euiFontSize(titleScaleToFontSizeScaleMap[scale], euiTheme, measurement),
+    ...euiFontSize(titleScaleToFontSizeScaleMap[scale], euiTheme, options),
     fontWeight: euiTheme.font.weight[euiTheme.font.title.weight],
     color: euiTheme.colors.title,
   };
 };
 
 // Hook version
 export const useEuiTitle = (
-  scale: EuiTitleSize = 'm',
-  measurement: _EuiThemeFontSizeMeasurement = 'rem'
+  scale: EuiTitleSize,
+  options?: _FontScaleOptions
 ): EuiThemeTitle => {
   const { euiTheme } = useEuiTheme();
-  return euiTitle(scale, euiTheme, measurement);
+  return euiTitle(scale, euiTheme, options);
 };
 
 /**

src/global_styling/functions/typography.ts

@@ -13,6 +13,11 @@ import {
 } from '../variables/typography';
 import { UseEuiTheme } from '../../services/theme/hooks';
 
+export interface _FontScaleOptions {
+  measurement?: _EuiThemeFontSizeMeasurement;
+  customScale?: _EuiThemeFontScale;
+}
+
 /**
  * Calculates the font-size value based on the provided scale key
  * @param scale - The font scale key
@@ -25,13 +30,14 @@ import { UseEuiTheme } from '../../services/theme/hooks';
 export function euiFontSizeFromScale(
   scale: _EuiThemeFontScale,
   { base, font }: UseEuiTheme['euiTheme'],
-  measurement: _EuiThemeFontSizeMeasurement = 'rem'
+  { measurement = 'rem', customScale }: _FontScaleOptions = {}
 ) {
   if (measurement === 'em') {
     return `${font.scale[scale]}em`;
   }
 
-  const numerator = base * font.scale[scale];
+  let numerator = base * font.scale[scale];
+  if (customScale) numerator *= font.scale[customScale];
   const denominator = base * font.scale[font.body.scale];
 
   return measurement === 'px'
@@ -54,11 +60,12 @@ export function euiFontSizeFromScale(
 export function euiLineHeightFromBaseline(
   scale: _EuiThemeFontScale,
   { base, font }: UseEuiTheme['euiTheme'],
-  measurement: _EuiThemeFontSizeMeasurement = 'rem'
+  { measurement = 'rem', customScale }: _FontScaleOptions = {}
 ) {
-  const { baseline, body, lineHeightMultiplier } = font;
-  const numerator = base * font.scale[scale];
-  const denominator = base * font.scale[body.scale];
+  const { baseline, lineHeightMultiplier } = font;
+  let numerator = base * font.scale[scale];
+  if (customScale) numerator *= font.scale[customScale];
+  const denominator = base * font.scale[font.body.scale];
 
   const _lineHeightMultiplier =
     numerator <= base ? lineHeightMultiplier : lineHeightMultiplier * 0.833;

src/global_styling/mixins/__snapshots__/_typography.test.ts.snap

@@ -1,5 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`euiFontSize handles the optional customScale property by multiplying it against the passed scale 1`] = `
+Object {
+  "fontSize": "0.8571rem",
+  "lineHeight": "1.1429rem",
+}
+`;
+
+exports[`euiFontSize handles the optional customScale property by multiplying it against the passed scale 2`] = `
+Object {
+  "fontSize": "1.0804rem",
+  "lineHeight": "1.4286rem",
+}
+`;
+
+exports[`euiFontSize handles the optional customScale property by multiplying it against the passed scale 3`] = `
+Object {
+  "fontSize": "1.6875rem",
+  "lineHeight": "2.0000rem",
+}
+`;
+
 exports[`euiFontSize returns an object of font-size and line-height for each scale em l 1`] = `
 Object {
   "fontSize": "1.375em",

src/global_styling/mixins/_typography.test.ts

@@ -21,18 +21,30 @@ import {
 
 describe('euiFontSize', () => {
   describe('returns an object of font-size and line-height for each scale', () => {
-    EuiThemeFontSizeMeasurements.forEach((measure) => {
-      describe(measure, () => {
+    EuiThemeFontSizeMeasurements.forEach((measurement) => {
+      describe(measurement, () => {
         EuiThemeFontScales.forEach((size) => {
           test(size, () => {
             expect(
-              testCustomHook(() => useEuiFontSize(size, measure)).return
+              testCustomHook(() => useEuiFontSize(size, { measurement })).return
             ).toMatchSnapshot();
           });
         });
       });
     });
   });
+
+  it('handles the optional customScale property by multiplying it against the passed scale', () => {
+    expect(
+      testCustomHook(() => useEuiFontSize('m', { customScale: 'xs' })).return
+    ).toMatchSnapshot();
+    expect(
+      testCustomHook(() => useEuiFontSize('l', { customScale: 'xxs' })).return
+    ).toMatchSnapshot();
+    expect(
+      testCustomHook(() => useEuiFontSize('s', { customScale: 'xl' })).return
+    ).toMatchSnapshot();
+  });
 });
 
 describe('euiTextBreakWord', () => {

src/global_styling/mixins/_typography.ts

@@ -10,12 +10,10 @@ import { CSSProperties } from 'react';
 import {
   euiLineHeightFromBaseline,
   euiFontSizeFromScale,
+  _FontScaleOptions,
 } from '../functions/typography';
 import { useEuiTheme, UseEuiTheme } from '../../services/theme/hooks';
-import {
-  _EuiThemeFontScale,
-  _EuiThemeFontSizeMeasurement,
-} from '../variables/typography';
+import { _EuiThemeFontScale } from '../variables/typography';
 
 export type EuiThemeFontSize = {
   fontSize: CSSProperties['fontSize'];
@@ -28,21 +26,21 @@ export type EuiThemeFontSize = {
 export const euiFontSize = (
   scale: _EuiThemeFontScale,
   euiTheme: UseEuiTheme['euiTheme'],
-  measurement: _EuiThemeFontSizeMeasurement = 'rem'
+  options?: _FontScaleOptions
 ): EuiThemeFontSize => {
   return {
-    fontSize: euiFontSizeFromScale(scale, euiTheme, measurement),
-    lineHeight: euiLineHeightFromBaseline(scale, euiTheme, measurement),
+    fontSize: euiFontSizeFromScale(scale, euiTheme, options),
+    lineHeight: euiLineHeightFromBaseline(scale, euiTheme, options),
   };
 };
 
 // Hook version
 export const useEuiFontSize = (
-  scale: _EuiThemeFontScale = 'm',
-  measurement: _EuiThemeFontSizeMeasurement = 'rem'
+  scale: _EuiThemeFontScale,
+  options?: _FontScaleOptions
 ): EuiThemeFontSize => {
   const { euiTheme } = useEuiTheme();
-  return euiFontSize(scale, euiTheme, measurement);
+  return euiFontSize(scale, euiTheme, options);
 };
 
 /**