[v16] Backport part of the typography changes

web/packages/design/src/Text/Text.jsx

@@ -52,3 +52,83 @@ Text.defaultProps = {
 };
 
 export default Text;
+
+/**
+ * H1 heading. Example usage: page titles and empty result set notifications.
+ *
+ * Do not use where `h1` typography is used only to make the text bigger (i.e.
+ * there's no following content that is logically tied to the heading).
+ */
+export const H1 = props => <Text as="h1" typography="newH1" {...props} />;
+
+/** Subtitle for heading level 1. Renders as a paragraph. */
+export const Subtitle1 = props => (
+  <Text as="p" typography="newSubtitle1" {...props} />
+);
+
+/**
+ * H2 heading. Example usage: dialog titles, dialog-like side panel titles.
+ *
+ * Do not use where `h2` typography is used only to make the text bigger (i.e.
+ * there's no following content that is logically tied to the heading).
+ */
+export const H2 = props => <Text as="h2" typography="newH2" {...props} />;
+
+/** Subtitle for heading level 2. Renders as a paragraph. */
+export const Subtitle2 = props => (
+  <Text as="p" typography="newSubtitle2" {...props} />
+);
+
+/**
+ * H3 heading. Example usage: explanatory side panel titles, resource enrollment
+ * step boxes.
+ *
+ * Do not use where `h3` typography is used only to make the text stand out more
+ * (i.e.  there's no following content that is logically tied to the heading).
+ */
+export const H3 = props => <Text as="h3" typography="newH3" {...props} />;
+
+/** Subtitle for heading level 3. Renders as a paragraph. */
+export const Subtitle3 = props => (
+  <Text as="p" typography="newSubtitle3" {...props} />
+);
+
+/**
+ * H4 heading.
+ *
+ * Do not use where `h4` typography is used only to make the text stand out more
+ * (i.e.  there's no following content that is logically tied to the heading).
+ */
+export const H4 = props => <Text as="h4" typography="newH4" {...props} />;
+
+/**
+ * A paragraph. Use for text consisting of actual sentences. Applies
+ * inter-paragraph spacing if grouped with other paragraphs, but doesn't apply
+ * typography. Use directly when typography is expected to be set by the parent
+ * component; prefer {@link P1}, {@link P2}, {@link P3} otherwise.
+ */
+export const P = styled(Text).attrs({ as: 'p' })`
+  p + & {
+    margin-top: ${props => props.theme.space[3]}px;
+    // Allow overriding.
+    ${space}
+  }
+`;
+
+/**
+ * A {@link P} that uses `body1` typography. Applies inter-paragraph spacing if
+ * grouped with other paragraphs.
+ */
+export const P1 = props => <Text as={P} typography="newBody1" {...props} />;
+
+/**
+ * A {@link P} that uses `body2` typography. Applies inter-paragraph spacing if
+ * grouped with other paragraphs.
+ */
+export const P2 = props => <Text as={P} typography="newBody2" {...props} />;
+
+/**
+ * A {@link P} that uses `body3` typography. Applies inter-paragraph spacing if
+ * grouped with other paragraphs.
+ */
+export const P3 = props => <Text as={P} typography="newBody3" {...props} />;

web/packages/design/src/Text/index.js

@@ -17,4 +17,16 @@
  */
 
 import Text from './Text';
+export {
+  H1,
+  H2,
+  H3,
+  H4,
+  P1,
+  P2,
+  P3,
+  Subtitle1,
+  Subtitle2,
+  Subtitle3,
+} from './Text';
 export default Text;

web/packages/design/src/index.ts

@@ -39,7 +39,18 @@ import LabelState from './LabelState';
 import Link from './Link';
 import { Mark } from './Mark';
 import Image from './Image';
-import Text from './Text';
+import Text, {
+  H1,
+  H2,
+  H3,
+  H4,
+  P1,
+  P2,
+  P3,
+  Subtitle1,
+  Subtitle2,
+  Subtitle3,
+} from './Text';
 import SideNav, { SideNavItem } from './SideNav';
 import { StepSlider } from './StepSlider';
 import TopNav from './TopNav';
@@ -69,6 +80,10 @@ export {
   CardSuccessLogin,
   DocumentTitle,
   Flex,
+  H1,
+  H2,
+  H3,
+  H4,
   Indicator,
   Input,
   Label,
@@ -88,8 +103,14 @@ export {
   Menu,
   MenuItem,
   MenuItemIcon,
+  P1,
+  P2,
+  P3,
   TextArea,
   Toggle,
+  Subtitle1,
+  Subtitle2,
+  Subtitle3,
 };
 export type { TextAreaProps } from './TextArea';
 export * from './keyframes';

web/packages/design/src/theme/typography.js

@@ -18,6 +18,7 @@
 
 const light = 300;
 const regular = 400;
+const medium = 500;
 const bold = 600;
 
 export const fontSizes = [10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 34];
@@ -101,6 +102,84 @@ const typography = {
     fontSize: '14px',
     lineHeight: '20px',
   },
+
+  newBody1: {
+    fontSize: '16px',
+    fontWeight: light,
+    lineHeight: '24px',
+    letterSpacing: '0.08px',
+  },
+  newBody2: {
+    fontSize: '14px',
+    fontWeight: light,
+    lineHeight: '24px',
+    letterSpacing: '0.035px',
+  },
+  newBody3: {
+    fontSize: '12px',
+    fontWeight: regular,
+    lineHeight: '20px',
+    letterSpacing: '0.015px',
+  },
+  newBody4: {
+    fontSize: '10px',
+    fontWeight: regular,
+    lineHeight: '16px',
+    letterSpacing: '0.013px',
+  },
+
+  /**
+   * Don't use directly, prefer the `H1` component except for text that doesn't
+   * introduce document structure.
+   */
+  newH1: {
+    fontWeight: medium,
+    fontSize: '24px',
+    lineHeight: '32px',
+  },
+  /**
+   * Don't use directly, prefer the `H2` component except for text that doesn't
+   * introduce document structure.
+   */
+  newH2: {
+    fontWeight: medium,
+    fontSize: '18px',
+    lineHeight: '24px',
+  },
+  /**
+   * Don't use directly, prefer the `H3` component except for text that doesn't
+   * introduce document structure.
+   */
+  newH3: {
+    fontWeight: bold,
+    fontSize: '14px',
+    lineHeight: '20px',
+  },
+  newH4: {
+    fontWeight: medium,
+    fontSize: '12px',
+    lineHeight: '20px',
+    letterSpacing: '0.03px',
+    textTransform: 'uppercase',
+  },
+  newSubtitle1: {
+    fontSize: '16px',
+    fontWeight: regular,
+    lineHeight: '24px',
+    letterSpacing: '0.024px',
+  },
+  newSubtitle2: {
+    fontSize: '14px',
+    fontWeight: regular,
+    lineHeight: '20px',
+    letterSpacing: '0.014px',
+  },
+  newSubtitle3: {
+    fontSize: '12px',
+    fontWeight: bold,
+    lineHeight: '20px',
+    letterSpacing: '0.012px',
+  },
 };
 
 export default typography;