[CSS-in-JS] Create font scale functions/mixins

src-docs/src/views/theme/_props.tsx

@@ -30,7 +30,8 @@ import {
   _EuiThemeFontBase,
   _EuiThemeFontWeight,
   _EuiThemeFontScale,
-} from '../../../../src/global_styling/variables/_typography';
+  _EuiThemeBody,
+} from '../../../../src/global_styling';
 
 export const EuiThemeFontBase: FunctionComponent<_EuiThemeFontBase> = () => (
   <div />
@@ -41,6 +42,7 @@ export const EuiThemeFontWeight: FunctionComponent<_EuiThemeFontWeight> = () =>
 export const EuiThemeFontScale: FunctionComponent<_EuiThemeFontScale> = () => (
   <div />
 );
+export const EuiThemeBody: FunctionComponent<_EuiThemeBody> = () => <div />;
 
 import {
   _EuiThemeBorderColorValues,

src-docs/src/views/theme/customizing/_typography.js

@@ -13,7 +13,7 @@ import {
 import {
   fontWeight,
   fontScale,
-} from '../../../../../src/global_styling/variables/_typography';
+} from '../../../../../src/themes/amsterdam/global_styling/variables/_typography';
 
 import { getPropsFromComponent } from '../../../services/props/get_props';
 import { ThemeValue } from './_values';
@@ -22,6 +22,7 @@ import {
   EuiThemeFontBase,
   EuiThemeFontWeight,
   EuiThemeFontScale,
+  EuiThemeBody,
 } from '../_props';
 
 import { useDebouncedUpdate } from '../hooks';
@@ -52,6 +53,7 @@ export default ({ onThemeUpdate }) => {
   const baseProps = getPropsFromComponent(EuiThemeFontBase);
   const weightProps = getPropsFromComponent(EuiThemeFontWeight);
   const scaleProps = getPropsFromComponent(EuiThemeFontScale);
+  const bodyProps = getPropsFromComponent(EuiThemeBody);
 
   const fontFamilies = fontClone.family.split(',');
   const codeFontFamilies = fontClone.familyCode.split(',');
@@ -200,8 +202,8 @@ export default ({ onThemeUpdate }) => {
         <EuiText size="s" grow={false}>
           <p>
             This typographic scale is used to calculate the font sizes which are
-            multiplied against the <EuiCode>base</EuiCode> value and convertd to
-            pixel and/or rem values.
+            multiplied against the <EuiCode>base</EuiCode> value and converted
+            to pixel and/or rem values.
           </p>
         </EuiText>
 
@@ -226,6 +228,61 @@ export default ({ onThemeUpdate }) => {
           />
         ))}
       </EuiPanel>
+
+      <EuiSpacer size="xl" />
+
+      <EuiPanel color="subdued">
+        <EuiTitle size="xs">
+          <h3>
+            <code>_EuiThemeFontBody</code>
+          </h3>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+        <EuiText size="s" grow={false}>
+          <p>
+            The <EuiCode>body.scale</EuiCode> value determines the base
+            font-size at which every font-size is calculated against.
+          </p>
+        </EuiText>
+
+        <EuiSpacer />
+
+        <ThemeValue
+          property="font.body"
+          type={bodyProps.scale}
+          name={'scale'}
+          value={fontClone.body.scale}
+          buttonStyle={css`
+            font-size: ${scaleClone.scale[fontClone.body.scale] *
+            euiTheme.base}px;
+            min-width: calc(${euiTheme.size.xxl} * 3);
+            text-align: left;
+          `}
+          example={`${
+            scaleClone.scale[fontClone.body.scale] * euiTheme.base
+          }px`}
+          // onUpdate={(value) => updateScale(key, value)}
+          // numberProps={{ step: 0.1, style: { width: '6em' } }}
+          groupProps={{ alignItems: 'center' }}
+        />
+        <EuiSpacer />
+
+        <ThemeValue
+          property="font.body"
+          type={bodyProps.weight}
+          name={'weight'}
+          value={fontClone.body.weight}
+          buttonStyle={css`
+            font-weight: ${weightClone.weight[fontClone.body.weight]};
+            min-width: calc(${euiTheme.size.xxl} * 3);
+            text-align: left;
+          `}
+          example={weightClone.weight[fontClone.body.weight]}
+          // onUpdate={(value) => updateScale(key, value)}
+          // numberProps={{ step: 0.1, style: { width: '6em' } }}
+          groupProps={{ alignItems: 'center' }}
+        />
+      </EuiPanel>
     </div>
   );
 };

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

@@ -1,18 +1,28 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useState } from 'react';
 import { css } from '@emotion/react';
 import { useEuiTheme } from '../../../../../src/services';
-import { EuiCode } from '../../../../../src/components';
+import {
+  EuiBasicTable,
+  EuiButtonGroup,
+  EuiCode,
+  EuiDescribedFormGroup,
+  EuiPanel,
+  EuiSpacer,
+} from '../../../../../src/components';
 
 import {
-  fontWeight,
   _EuiThemeFontWeight,
-} from '../../../../../src/global_styling/variables/_typography';
+  _EuiThemeFontSizeMeasurement,
+  _EuiThemeFontScale,
+  euiFontSize,
+  useEuiFontSize,
+} from '../../../../../src/global_styling';
 
 import { EuiThemeFontBase, EuiThemeFontWeight, ThemeRowType } from '../_props';
 import { getPropsFromComponent } from '../../../services/props/get_props';
+import { getDescription } from '../../../services/props/get_description';
 import { ThemeExample } from '../_components/_theme_example';
 import { ThemeValuesTable } from '../_components/_theme_values_table';
-import { getDescription } from '../../../services/props/get_description';
 
 export const FontJS = () => {
   const { euiTheme } = useEuiTheme();
@@ -77,13 +87,14 @@ export const FontJS = () => {
   );
 };
 
-const weightKeys = Object.keys(fontWeight) as Array<keyof _EuiThemeFontWeight>;
-
 export const FontWeightJS: FunctionComponent<ThemeRowType> = ({
   description,
 }) => {
   const { euiTheme } = useEuiTheme();
   const weightProps = getPropsFromComponent(EuiThemeFontWeight);
+  const weightKeys = Object.keys(euiTheme.font.weight) as Array<
+    keyof _EuiThemeFontWeight
+  >;
 
   return (
     <>
@@ -124,3 +135,165 @@ export const FontWeightJS: FunctionComponent<ThemeRowType> = ({
     </>
   );
 };
+
+export const FontScaleJS = () => {
+  const { euiTheme } = useEuiTheme();
+  const scaleKeys = Object.keys(euiTheme.font.scale) as _EuiThemeFontScale[];
+
+  const measurements: _EuiThemeFontSizeMeasurement[] = ['rem', 'px', 'em'];
+
+  const measurementButtons = measurements.map((m) => {
+    return {
+      id: m,
+      label: m,
+    };
+  });
+
+  const [measurementSelected, setMeasurementSelected] = useState<
+    _EuiThemeFontSizeMeasurement
+  >(measurementButtons[0].id);
+
+  return (
+    <>
+      <ThemeExample
+        title={<code>useEuiFontSize()</code>}
+        description={
+          <p>
+            Font sizing is provided through this React hook (or function
+            version) and not the global theme. It returns both the{' '}
+            <EuiCode>font-size</EuiCode> and <EuiCode>line-height</EuiCode> for
+            the provided <EuiCode>scale</EuiCode>.
+          </p>
+        }
+        example={
+          <p
+            css={css`
+              ${useEuiFontSize('l')}
+            `}
+          >
+            The quick brown fox jumped over the blue moon to catch a snail
+          </p>
+        }
+        snippet="useEuiFontSize('l');"
+      />
+      <ThemeExample
+        title={<code>useEuiFontSize().fontSize</code>}
+        description={
+          <p>
+            To use precisely only the <EuiCode>font-size</EuiCode> value, you
+            will still use the same hook (or function) to grab the individual
+            property via the returned object.
+          </p>
+        }
+        example={
+          <p
+            css={css`
+              font-size: ${useEuiFontSize('xs').fontSize};
+            `}
+          >
+            The quick brown fox jumped over the blue moon to catch a snail
+          </p>
+        }
+        snippet="font-size: ${useEuiFontSize('xs').fontSize};"
+      />
+      <EuiPanel color="accent">
+        <EuiDescribedFormGroup
+          fullWidth
+          title={<h3>Value measurements</h3>}
+          description={
+            <p>
+              The font sizing function also supports the three main measurements
+              for font-size, <EuiCode>rem | px | em</EuiCode>, with{' '}
+              <EuiCode>rem</EuiCode> being default for all EUI components.
+            </p>
+          }
+        >
+          <EuiSpacer />
+          <EuiButtonGroup
+            buttonSize="m"
+            legend="Value measurement to show in table"
+            options={measurementButtons}
+            idSelected={measurementSelected}
+            onChange={(id) =>
+              setMeasurementSelected(id as _EuiThemeFontSizeMeasurement)
+            }
+            color="accent"
+            isFullWidth
+          />
+        </EuiDescribedFormGroup>
+      </EuiPanel>
+      <EuiSpacer />
+      <EuiBasicTable
+        tableLayout="auto"
+        items={scaleKeys.map((scale, index) => {
+          return {
+            id: scale,
+            value: `useEuiFontSize('${scale}'${
+              measurementSelected !== 'rem' ? `, '${measurementSelected}'` : ''
+            })`,
+            size: `${
+              euiFontSize(scale, euiTheme, measurementSelected).fontSize
+            }`,
+            lineHeight: `${
+              euiFontSize(scale, euiTheme, measurementSelected).lineHeight
+            }`,
+            index,
+          };
+        })}
+        columns={[
+          {
+            field: 'sample',
+            name: 'Sample',
+            valign: 'baseline',
+            width: '50%',
+            render: (sample, item) => (
+              <div
+                css={css`
+                  ${euiFontSize(item.id, euiTheme, measurementSelected)}
+                `}
+              >
+                The quick brown fox jumped over the blue moon to catch a snail
+              </div>
+            ),
+            mobileOptions: {
+              width: '100%',
+            },
+          },
+          {
+            field: 'value',
+            name: 'Function',
+            width: 'auto',
+            valign: 'baseline',
+            render: (value: React.ReactNode) => (
+              <EuiCode language="css">{value}</EuiCode>
+            ),
+          },
+          {
+            field: 'size',
+            name: 'Font size',
+            width: '100px',
+            valign: 'baseline',
+            align: 'right',
+            render: (size: string) => (
+              <small>
+                <code>{size}</code>
+              </small>
+            ),
+          },
+          {
+            field: 'lineHeight',
+            name: 'Line height',
+            width: '100px',
+            valign: 'baseline',
+            align: 'right',
+            render: (lineHeight: string) => (
+              <small>
+                <code>{lineHeight}</code>
+              </small>
+            ),
+          },
+        ]}
+      />
+    </>
+  );
+};

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

@@ -209,10 +209,10 @@ export const FontWeightSass: FunctionComponent<ThemeRowType> = ({
 const euiFontSizes = [
   'euiFontSizeXS',
   'euiFontSizeS',
-  'euiFontSize',
   'euiFontSizeM',
   'euiFontSizeL',
   'euiFontSizeXL',
+  'euiFontSizeXXL',
 ];
 
 export const FontScaleSass = () => {
@@ -234,12 +234,13 @@ export const FontScaleSass = () => {
       />
 
       <EuiBasicTable
-        items={euiFontSizes.map(function (size) {
+        items={euiFontSizes.map(function (size, index) {
           return {
             id: size,
             token: `$${size}`,
             mixin: `@include ${size}`,
             value: values[size],
+            index,
           };
         })}
         columns={[