Create JS euiTitle() mixin and add sizes styling

- and per-theme titles settings - just amsterdam for now, but we can possibly expand this if we add more themes in the future

+ delete old global_styling title files in favor of component-specific logic

Author: cee-chen

src/components/title/_title.scss

@@ -6,10 +6,89 @@
  * Side Public License, v 1.
  */
 
+import { CSSProperties } from 'react';
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
-import { euiTextBreakWord } from '../../global_styling';
+import {
+  euiTextBreakWord,
+  euiFontSizeFromScale,
+  euiLineHeightFromBaseline,
+  _EuiThemeFontScale,
+  _EuiThemeFontSizeMeasurement,
+} from '../../global_styling';
+import { EuiTitleSize } from './title';
 
+/**
+ * Theme-specific scale settings
+ */
+type _EuiThemeTitle = {
+  fontSize: _EuiThemeFontScale;
+  lineHeight: _EuiThemeFontScale;
+  fontWeight?: CSSProperties['fontWeight']; // Defaults to bold
+  letterSpacing?: string; // Not currently used in Amsterdam, but may be used in future themes
+};
+
+const amsterdamThemeTitles: {
+  [size in EuiTitleSize]: _EuiThemeTitle;
+} = {
+  xxxs: {
+    fontSize: 'xs',
+    lineHeight: 'xs',
+  },
+  xxs: {
+    fontSize: 's',
+    lineHeight: 'm',
+  },
+  xs: {
+    fontSize: 'm',
+    lineHeight: 'm',
+  },
+  s: {
+    fontSize: 'l',
+    lineHeight: 'xl',
+  },
+  m: {
+    fontSize: 'xl',
+    lineHeight: 'xl',
+  },
+  l: {
+    fontSize: 'xxl',
+    lineHeight: 'xxl',
+  },
+};
+
+/**
+ * Mixin
+ */
+export const euiTitle = (
+  scale: EuiTitleSize = 'm',
+  euiTheme: UseEuiTheme['euiTheme'],
+  measurement: _EuiThemeFontSizeMeasurement = 'rem'
+): {
+  fontSize: CSSProperties['fontSize'];
+  lineHeight: CSSProperties['lineHeight'];
+  fontWeight: CSSProperties['fontWeight'];
+  letterSpacing?: CSSProperties['letterSpacing'];
+} => {
+  // NOTE: For future themes, we can conditionally key off `euiTheme.themeName`
+  // and conditionally switch our title settings.
+  const title = amsterdamThemeTitles[scale];
+
+  return {
+    fontSize: euiFontSizeFromScale(title.fontSize, euiTheme, measurement),
+    lineHeight: euiLineHeightFromBaseline(
+      title.lineHeight,
+      euiTheme,
+      measurement
+    ),
+    fontWeight: title.fontWeight || euiTheme.font.weight.bold,
+    letterSpacing: title.letterSpacing,
+  };
+};
+
+/**
+ * Styles
+ */
 export const euiTitleStyles = ({ euiTheme }: UseEuiTheme) => ({
   euiTitle: css`
     ${euiTextBreakWord}
@@ -22,5 +101,23 @@ export const euiTitleStyles = ({ euiTheme }: UseEuiTheme) => ({
   uppercase: css`
     text-transform: uppercase;
   `,
-  // TODO: Sizes
+  // Sizes
+  xxxs: css`
+    ${euiTitle('xxxs', euiTheme)}
+  `,
+  xxs: css`
+    ${euiTitle('xxs', euiTheme)}
+  `,
+  xs: css`
+    ${euiTitle('xs', euiTheme)}
+  `,
+  s: css`
+    ${euiTitle('s', euiTheme)}
+  `,
+  m: css`
+    ${euiTitle('m', euiTheme)}
+  `,
+  l: css`
+    ${euiTitle('l', euiTheme)}
+  `,
 });

src/components/title/title.styles.ts

@@ -54,6 +54,7 @@ export const EuiTitle: FunctionComponent<EuiTitleProps> = ({
   const cssStyles = [
     styles.euiTitle,
     textTransform ? styles[textTransform] : undefined,
+    styles[size],
   ];
   const classes = classNames(
     'euiTitle',