Initial typography tokens and docs

docs/BrandColors.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';
+import { Meta, Canvas, Story } from '@storybook/addon-docs';
 import LinkTo from '@storybook/addon-links/react';
 
 <Meta title="Design Tokens/Brand Colors" />

docs/ThemeColors.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';
+import { Meta, Canvas, Story } from '@storybook/addon-docs';
 
 import tokens from '../src/figma/tokens.json';
 

docs/Typography.mdx

@@ -0,0 +1,60 @@
+import { Meta, Canvas, Story } from '@storybook/addon-docs';
+
+import tokens from '../src/figma/tokens.json';
+
+<Meta title="Typography / Introduction" />
+
+# Typography
+
+Good typography improves readability and prioritization of information.
+
+## Font Family
+
+The main font family used in MetaMask products is **Euclid Circular B**
+
+## Scale
+
+There are 2 sets of typography scales for MetaMask products.
+
+### **Small screen**
+
+The typography scale for small screen sizes
+
+<Canvas>
+  <Story id="typography-typography--small-screen" />
+</Canvas>
+
+### **Large screen**
+
+The typography scale for large screen sizes
+
+<Canvas>
+  <Story id="typography-typography--large-screen" />
+</Canvas>
+
+<br />
+
+## Font Weight
+
+There are three available font weights
+
+<Canvas>
+  <Story id="typography-typography--font-weight" />
+</Canvas>
+
+#### CSS IN JS
+
+```
+export const fontWeights = {
+  regular: 400,
+  medium: 500,
+  bold: 700,
+};
+```
+
+#### CSS
+
+## References
+
+- [Figma Typography (Large screen)](https://www.figma.com/file/likmuA72JatXDKDChibHBG/%5BTypo%5D-Large-screen?node-id=2%3A134)(internal use only)
+- [Figma Typography (Small screen)](https://www.figma.com/file/Na8UKll7g12UywIPGEVLvX/%5BTypo%5D-Small-screen?node-id=2%3A134)(internal use only)

docs/Typography.stories.tsx

@@ -0,0 +1,204 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import {
+  typography,
+  fontSizes,
+  lineHeights,
+  fontFamilies,
+  fontWeights,
+  letterSpacing,
+} from '../src/typography';
+
+import { Text } from './components';
+
+import README from './Typography.mdx';
+
+export default {
+  title: 'Typography/Typography',
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+} as ComponentMeta<typeof Text>;
+
+export const SmallScreen = (...args) => {
+  const styles = {
+    displayMD: {
+      fontFamily: typography.displayMD.fontFamily,
+      fontSize: typography.displayMD.fontSize,
+      lineHeight: `${typography.displayMD.lineHeight}px`,
+      fontWeight: typography.displayMD.fontWeight,
+    },
+    headingLG: {
+      fontFamily: typography.headingLG.fontFamily,
+      fontSize: typography.headingLG.fontSize,
+      lineHeight: `${typography.headingLG.lineHeight}px`,
+      fontWeight: typography.headingLG.fontWeight,
+    },
+    headingMD: {
+      fontFamily: typography.headingMD.fontFamily,
+      fontSize: typography.headingMD.fontSize,
+      lineHeight: `${typography.headingMD.lineHeight}px`,
+      fontWeight: typography.headingMD.fontWeight,
+    },
+    headingSM: {
+      fontFamily: typography.headingSM.fontFamily,
+      fontSize: typography.headingSM.fontSize,
+      lineHeight: `${typography.headingSM.lineHeight}px`,
+      fontWeight: typography.headingSM.fontWeight,
+    },
+    bodyMD: {
+      fontFamily: typography.bodyMD.fontFamily,
+      fontSize: typography.bodyMD.fontSize,
+      lineHeight: `${typography.bodyMD.lineHeight}px`,
+      fontWeight: typography.bodyMD.fontWeight,
+    },
+    bodySM: {
+      fontFamily: typography.bodySM.fontFamily,
+      fontSize: typography.bodySM.fontSize,
+      lineHeight: `${typography.bodySM.lineHeight}px`,
+      fontWeight: typography.bodySM.fontWeight,
+    },
+    bodyXS: {
+      fontFamily: typography.bodyXS.fontFamily,
+      fontSize: typography.bodyXS.fontSize,
+      lineHeight: `${typography.bodyXS.lineHeight}px`,
+      fontWeight: typography.bodyXS.fontWeight,
+      letterSpacing: typography.bodyXS.letterSpacing,
+    },
+  };
+  return (
+    <>
+      <Text as="h1" style={styles.displayMD} {...args}>
+        DisplayMD 32px/40px 2rem
+      </Text>
+      <Text as="h2" style={styles.headingLG} {...args}>
+        HeadingLG 24px/32px 1.5rem
+      </Text>
+      <Text as="h3" style={styles.headingMD} {...args}>
+        HeadingMD 18px/24px 1.125rem
+      </Text>
+      <Text as="h4" style={styles.headingSM} {...args}>
+        HeadingSM 16px/24px 1rem
+      </Text>
+      <Text as="p" style={styles.bodyMD} {...args}>
+        BodyMD 14px/22px 0.875rem
+      </Text>
+      <Text as="p" style={styles.bodySM} {...args}>
+        BodySM 12px/20px 0.75rem
+      </Text>
+      <Text as="p" style={styles.bodyXS} {...args}>
+        BodyXS 10px/16px 0.625rem
+      </Text>
+    </>
+  );
+};
+
+export const LargeScreen = (...args) => {
+  const styles = {
+    displayMD: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize8,
+      lineHeight: `${lineHeights.lineHeight7}px`,
+      fontWeight: fontWeights.medium,
+    },
+    headingLG: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize7,
+      lineHeight: `${lineHeights.lineHeight6}px`,
+      fontWeight: fontWeights.bold,
+    },
+    headingMD: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize6,
+      lineHeight: `${lineHeights.lineHeight5}px`,
+      fontWeight: fontWeights.bold,
+    },
+    headingSM: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize5,
+      lineHeight: `${lineHeights.lineHeight4}px`,
+      fontWeight: fontWeights.bold,
+    },
+    bodyMD: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize4,
+      lineHeight: `${lineHeights.lineHeight4}px`,
+      fontWeight: fontWeights.regular,
+    },
+    bodySM: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize3,
+      lineHeight: `${lineHeights.lineHeight3}px`,
+      fontWeight: fontWeights.regular,
+    },
+    bodyXS: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize2,
+      lineHeight: `${lineHeights.lineHeight2}px`,
+      fontWeight: fontWeights.regular,
+      letterSpacing: letterSpacing.letterSpacing1,
+    },
+  };
+  return (
+    <>
+      <Text as="h1" style={styles.displayMD} {...args}>
+        DisplayMD 48px/56px 3rem
+      </Text>
+      <Text as="h2" style={styles.headingLG} {...args}>
+        HeadingLG 32px/40px 2rem
+      </Text>
+      <Text as="h3" style={styles.headingMD} {...args}>
+        HeadingMD 24px/32px 1.5rem
+      </Text>
+      <Text as="h4" style={styles.headingSM} {...args}>
+        HeadingSM 18px/24px 1.125rem
+      </Text>
+      <Text as="p" style={styles.bodyMD} {...args}>
+        BodyMD 16px/24px 1rem
+      </Text>
+      <Text as="p" style={styles.bodySM} {...args}>
+        BodySM 14px/22px 0.875rem
+      </Text>
+      <Text as="p" style={styles.bodyXS} {...args}>
+        BodyXS 12px/20px 0.75rem
+      </Text>
+    </>
+  );
+};
+
+export const FontWeight = (...args) => {
+  const styles = {
+    regular: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize4,
+      lineHeight: `${lineHeights.lineHeight5}px`,
+      fontWeight: fontWeights.regular,
+    },
+    medium: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize4,
+      lineHeight: `${lineHeights.lineHeight5}px`,
+      fontWeight: fontWeights.medium,
+    },
+    bold: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize4,
+      lineHeight: `${lineHeights.lineHeight5}px`,
+      fontWeight: fontWeights.bold,
+    },
+  };
+  return (
+    <>
+      <Text as="h3" style={styles.regular} {...args}>
+        Regular 400
+      </Text>
+      <Text as="h3" style={styles.medium} {...args}>
+        Medium 500
+      </Text>
+      <Text as="h3" style={styles.bold} {...args}>
+        Bold 700
+      </Text>
+    </>
+  );
+};

docs/components/Text/Text.stories.tsx

@@ -0,0 +1,90 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { typography } from '../../../src/typography';
+
+import { Text } from '.';
+
+export default {
+  title: 'Doc components/Text',
+} as ComponentMeta<typeof Text>;
+
+const Template: ComponentStory<typeof Text> = (args) => <Text {...args} />;
+
+export const DefaultStory = Template.bind({});
+
+DefaultStory.args = {
+  children: 'Text',
+};
+
+DefaultStory.storyName = 'Default';
+
+export const SmallScreenTypographyScale = (...args) => {
+  const styles = {
+    displayMD: {
+      fontFamily: typography.displayMD.fontFamily,
+      fontSize: typography.displayMD.fontSize,
+      // lineHeight: typography.displayMD.lineHeight,
+      fontWeight: typography.displayMD.fontWeight,
+    },
+    headingLG: {
+      fontFamily: typography.headingLG.fontFamily,
+      fontSize: typography.headingLG.fontSize,
+      // lineHeight: typography.headingLG.lineHeight,
+      fontWeight: typography.headingLG.fontWeight,
+    },
+    headingMD: {
+      fontFamily: typography.headingMD.fontFamily,
+      fontSize: typography.headingMD.fontSize,
+      // lineHeight: typography.headingMD.lineHeight,
+      fontWeight: typography.headingMD.fontWeight,
+    },
+    headingSM: {
+      fontFamily: typography.headingSM.fontFamily,
+      fontSize: typography.headingSM.fontSize,
+      // lineHeight: typography.headingSM.lineHeight,
+      fontWeight: typography.headingSM.fontWeight,
+    },
+    bodyMD: {
+      fontFamily: typography.bodyMD.fontFamily,
+      fontSize: typography.bodyMD.fontSize,
+      // lineHeight: typography.bodyMD.lineHeight,
+      fontWeight: typography.bodyMD.fontWeight,
+    },
+    bodySM: {
+      fontFamily: typography.bodySM.fontFamily,
+      fontSize: typography.bodySM.fontSize,
+      // lineHeight: typography.bodySM.lineHeight,
+      fontWeight: typography.bodySM.fontWeight,
+    },
+    bodyXS: {
+      fontFamily: typography.bodyXS.fontFamily,
+      fontSize: typography.bodyXS.fontSize,
+      // lineHeight: typography.bodyXS.lineHeight,
+      fontWeight: typography.bodyXS.fontWeight,
+    },
+  };
+  return (
+    <>
+      <Text as="h1" style={styles.displayMD} {...args}>
+        Display MD 32px 2rem 32px/40px
+      </Text>
+      <Text as="h2" style={styles.headingLG} {...args}>
+        HeadingLG
+      </Text>
+      <Text as="h3" style={styles.headingMD} {...args}>
+        HeadingMD
+      </Text>
+      <Text as="h4" style={styles.headingSM} {...args}>
+        HeadingSM
+      </Text>
+      <Text as="p" style={styles.bodyMD} {...args}>
+        BodyMD
+      </Text>
+      <Text as="p" style={styles.bodySM} {...args}>
+        BodySM
+      </Text>
+      <Text as="p" style={styles.bodyXS} {...args}>
+        BodyXS
+      </Text>
+    </>
+  );
+};

docs/components/Text/Text.tsx

@@ -0,0 +1,28 @@
+import React, { FunctionComponent } from 'react';
+
+interface Props<C extends React.ElementType> {
+  /**
+   * The size of the text
+   */
+  children?: React.ReactChild;
+  /**
+   * Polymorphic prop to change the html root element of the component
+   */
+  as?: string;
+  /**
+   * The style prop of the Text component
+   */
+  style?: object;
+}
+
+type TextProps<C extends React.ElementType> = Props<C> &
+  Omit<React.ComponentPropsWithoutRef<C>, keyof Props<C>>;
+
+export const Text = <C extends React.ElementType = 'span'>({
+  style,
+  children,
+  as,
+}) => {
+  const Component = as || 'span';
+  return <Component style={style}>{children}</Component>;
+};

docs/components/Text/index.tsx

@@ -0,0 +1 @@
+export { Text } from './Text';