Color tests

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,92 @@
+import { Meta, Canvas, Story } from '@storybook/addon-docs';
+
+import tokens from '../src/figma/tokens.json';
+
+<Meta title="Typography / Introduction" />
+
+# Typography
+
+Good typography improves readability, legibility and prioritization of information.
+
+## Font Family
+
+The main font family used in MetaMask products is **Euclid Circular B**
+
+<Canvas>
+  <Story id="typography-typography--font-family" />
+</Canvas>
+
+| Font Family           | JS                             | CSS                                    |
+| --------------------- | ------------------------------ | -------------------------------------- |
+| **Euclid Circular B** | `fontFamilies.euclidCircularB` | `var(--font-family-euclid-circular-b)` |
+
+## Scale
+
+There are 2 sets of typography scales for MetaMask products.
+
+### **Small screen**
+
+For screens sizes `767px >` or smaller, use the small screen typography scale
+
+**Key:** S: small screen L: large screen | name | font-size/line-height | rems
+
+<Canvas>
+  <Story id="typography-typography--small-screen" />
+</Canvas>
+
+| Variation       | JS                                                                                                                                                                                                          | CSS                                                                                                                                                                                                                                                          |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **S DisplayMD** | `typography.sDisplayMD.fontFamily` <br /> `typography.sDisplayMD.fontWeight` <br /> `typography.sDisplayMD.fontSize` <br /> `typography.sDisplayMD.lineHeight` <br /> `typography.sDisplayMD.letterSpacing` | `var(--typography-s-display-md-font-family)` <br /> `var(--typography-s-display-md-font-weight)`<br /> `var(--typography-s-display-md-font-size)` <br /> `var(--typography-s-display-md-line-height)` <br /> `var(--typography-s-display-md-letter-spacing)` |
+| **S HeadingLG** | `typography.sHeadingLG.fontFamily` <br /> `typography.sHeadingLG.fontWeight` <br /> `typography.sHeadingLG.fontSize` <br /> `typography.sHeadingLG.lineHeight` <br /> `typography.sHeadingLG.letterSpacing` | `var(--typography-s-heading-lg-font-family)` <br /> `var(--typography-s-heading-lg-font-weight)`<br /> `var(--typography-s-heading-lg-font-size)` <br /> `var(--typography-s-heading-lg-line-height)` <br /> `var(--typography-s-heading-lg-letter-spacing)` |
+| **S HeadingMD** | `typography.sHeadingMD.fontFamily` <br /> `typography.sHeadingMD.fontWeight` <br /> `typography.sHeadingMD.fontSize` <br /> `typography.sHeadingMD.lineHeight` <br /> `typography.sHeadingMD.letterSpacing` | `var(--typography-s-heading-md-font-family)` <br /> `var(--typography-s-heading-md-font-weight)`<br /> `var(--typography-s-heading-md-font-size)` <br /> `var(--typography-s-heading-md-line-height)` <br /> `var(--typography-s-heading-md-letter-spacing)` |
+| **S HeadingSM** | `typography.sHeadingSM.fontFamily` <br /> `typography.sHeadingSM.fontWeight` <br /> `typography.sHeadingSM.fontSize` <br /> `typography.sHeadingSM.lineHeight` <br /> `typography.sHeadingSM.letterSpacing` | `var(--typography-s-heading-sm-font-family)` <br /> `var(--typography-s-heading-sm-font-weight)`<br /> `var(--typography-s-heading-sm-font-size)` <br /> `var(--typography-s-heading-sm-line-height)` <br /> `var(--typography-s-heading-sm-letter-spacing)` |
+| **S BodyMD**    | `typography.sBodyMD.fontFamily` <br /> `typography.sBodyMD.fontWeight` <br /> `typography.sBodyMD.fontSize` <br /> `typography.sBodyMD.lineHeight` <br /> `typography.sBodyMD.letterSpacing`                | `var(--typography-s-body-md-font-family)` <br /> `var(--typography-s-body-md-font-weight)`<br /> `var(--typography-s-body-md-font-size)` <br /> `var(--typography-s-body-md-line-height)` <br /> `var(--typography-s-body-md-letter-spacing)`                |
+| **S BodySM**    | `typography.sBodySM.fontFamily` <br /> `typography.sBodySM.fontWeight` <br /> `typography.sBodySM.fontSize` <br /> `typography.sBodySM.lineHeight` <br /> `typography.sBodySM.letterSpacing`                | `var(--typography-s-body-sm-font-family)` <br /> `var(--typography-s-body-sm-font-weight)`<br /> `var(--typography-s-body-sm-font-size)` <br /> `var(--typography-s-body-sm-line-height)` <br /> `var(--typography-s-body-sm-letter-spacing)`                |
+| **S BodyXS**    | `typography.sBodyXS.fontFamily` <br /> `typography.sBodyXS.fontWeight` <br /> `typography.sBodyXS.fontSize` <br /> `typography.sBodyXS.lineHeight` <br /> `typography.sBodyXS.letterSpacing`                | `var(--typography-s-body-xs-font-family)` <br /> `var(--typography-s-body-xs-font-weight)`<br /> `var(--typography-s-body-xs-font-size)` <br /> `var(--typography-s-body-xs-line-height)` <br /> `var(--typography-s-body-xs-letter-spacing)`                |
+
+**NOTE: The JS token format was initially intended for react native. Therefore, `fontSize` and `lineHeight` use integers not REMS or unitless values. Some conversion will need to happen at app level if the JS token format is used for web applications.**
+
+### **Large screen**
+
+For screens sizes `768px <` or larger, use the large screen typography scale
+
+**Key:** S: small screen L: large screen | name | font-size/line-height | rems
+
+<Canvas>
+  <Story id="typography-typography--large-screen" />
+</Canvas>
+
+| Variation       | JS                                                                                                                                                                                                          | CSS                                                                                                                                                                                                                                                          |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **L DisplayMD** | `typography.lDisplayMD.fontFamily` <br /> `typography.lDisplayMD.fontWeight` <br /> `typography.lDisplayMD.fontSize` <br /> `typography.lDisplayMD.lineHeight` <br /> `typography.lDisplayMD.letterSpacing` | `var(--typography-s-display-md-font-family)` <br /> `var(--typography-s-display-md-font-weight)`<br /> `var(--typography-s-display-md-font-size)` <br /> `var(--typography-s-display-md-line-height)` <br /> `var(--typography-s-display-md-letter-spacing)` |
+| **L HeadingLG** | `typography.lHeadingLG.fontFamily` <br /> `typography.lHeadingLG.fontWeight` <br /> `typography.lHeadingLG.fontSize` <br /> `typography.lHeadingLG.lineHeight` <br /> `typography.lHeadingLG.letterSpacing` | `var(--typography-s-heading-lg-font-family)` <br /> `var(--typography-s-heading-lg-font-weight)`<br /> `var(--typography-s-heading-lg-font-size)` <br /> `var(--typography-s-heading-lg-line-height)` <br /> `var(--typography-s-heading-lg-letter-spacing)` |
+| **L HeadingMD** | `typography.lHeadingMD.fontFamily` <br /> `typography.lHeadingMD.fontWeight` <br /> `typography.lHeadingMD.fontSize` <br /> `typography.lHeadingMD.lineHeight` <br /> `typography.lHeadingMD.letterSpacing` | `var(--typography-s-heading-md-font-family)` <br /> `var(--typography-s-heading-md-font-weight)`<br /> `var(--typography-s-heading-md-font-size)` <br /> `var(--typography-s-heading-md-line-height)` <br /> `var(--typography-s-heading-md-letter-spacing)` |
+| **L HeadingSM** | `typography.lHeadingSM.fontFamily` <br /> `typography.lHeadingSM.fontWeight` <br /> `typography.lHeadingSM.fontSize` <br /> `typography.lHeadingSM.lineHeight` <br /> `typography.lHeadingSM.letterSpacing` | `var(--typography-s-heading-sm-font-family)` <br /> `var(--typography-s-heading-sm-font-weight)`<br /> `var(--typography-s-heading-sm-font-size)` <br /> `var(--typography-s-heading-sm-line-height)` <br /> `var(--typography-s-heading-sm-letter-spacing)` |
+| **L BodyMD**    | `typography.lBodyMD.fontFamily` <br /> `typography.lBodyMD.fontWeight` <br /> `typography.lBodyMD.fontSize` <br /> `typography.lBodyMD.lineHeight` <br /> `typography.lBodyMD.letterSpacing`                | `var(--typography-s-body-md-font-family)` <br /> `var(--typography-s-body-md-font-weight)`<br /> `var(--typography-s-body-md-font-size)` <br /> `var(--typography-s-body-md-line-height)` <br /> `var(--typography-s-body-md-letter-spacing)`                |
+| **L BodySM**    | `typography.lBodySM.fontFamily` <br /> `typography.lBodySM.fontWeight` <br /> `typography.lBodySM.fontSize` <br /> `typography.lBodySM.lineHeight` <br /> `typography.lBodySM.letterSpacing`                | `var(--typography-s-body-sm-font-family)` <br /> `var(--typography-s-body-sm-font-weight)`<br /> `var(--typography-s-body-sm-font-size)` <br /> `var(--typography-s-body-sm-line-height)` <br /> `var(--typography-s-body-sm-letter-spacing)`                |
+| **L BodyXS**    | `typography.lBodyXS.fontFamily` <br /> `typography.lBodyXS.fontWeight` <br /> `typography.lBodyXS.fontSize` <br /> `typography.lBodyXS.lineHeight` <br /> `typography.lBodyXS.letterSpacing`                | `var(--typography-s-body-xs-font-family)` <br /> `var(--typography-s-body-xs-font-weight)`<br /> `var(--typography-s-body-xs-font-size)` <br /> `var(--typography-s-body-xs-line-height)` <br /> `var(--typography-s-body-xs-letter-spacing)`                |
+
+**NOTE: The JS token format was initially intended for react native. Therefore, `fontSize` and `lineHeight` use integers not REMS or unitless values. Some conversion will need to happen at app level if the JS token format is used for web applications.**
+
+<br />
+
+## Font Weight
+
+There are three available font weights: regular`400`, medium`700` and bold`900`
+
+<Canvas>
+  <Story id="typography-typography--font-weight" />
+</Canvas>
+
+| Font Weight                                   | JS                    | CSS                          |
+| --------------------------------------------- | --------------------- | ---------------------------- |
+| Regular                                       | `fontWeights.regular` | `var(--font-weight-regular)` |
+| <span style={{fontWeight: 500}}>Medium</span> | `fontWeights.medium`  | `var(--font-weight-medium)`  |
+| **Bold**                                      | `fontWeights.bold`    | `var(--font-weight-bold)`    |
+
+<br />
+
+## 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,222 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { typography } from '../src/js/typography';
+
+import { fontSizes } from '../src/js/typography/fontSizes';
+import { lineHeights } from '../src/js/typography/lineHeights';
+import { fontFamilies } from '../src/js/typography/fontFamilies';
+import { fontWeights } from '../src/js/typography/fontWeights';
+import { letterSpacing } from '../src/js/typography/letterSpacing';
+
+import { Text } from './components';
+
+import README from './Typography.mdx';
+
+export default {
+  title: 'Typography/Typography',
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+} as ComponentMeta<typeof Text>;
+
+export const FontFamily: ComponentStory<typeof Text> = (...args) => {
+  const styles = {
+    displayMD: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize7,
+      lineHeight: `${lineHeights.lineHeight6}px`,
+      fontWeight: fontWeights.regular,
+      letterSpacing: letterSpacing.letterSpacing1,
+    },
+  };
+  return (
+    <>
+      <Text as="h1" style={styles.displayMD} {...args}>
+        Euclid Circular B
+      </Text>
+    </>
+  );
+};
+
+export const SmallScreen: ComponentStory<typeof Text> = (...args) => {
+  const styles = {
+    displayMD: {
+      fontFamily: typography.sDisplayMD.fontFamily,
+      fontSize: typography.sDisplayMD.fontSize,
+      lineHeight: `${typography.sDisplayMD.lineHeight}px`,
+      fontWeight: typography.sDisplayMD.fontWeight,
+    },
+    headingLG: {
+      fontFamily: typography.sHeadingLG.fontFamily,
+      fontSize: typography.sHeadingLG.fontSize,
+      lineHeight: `${typography.sHeadingLG.lineHeight}px`,
+      fontWeight: typography.sHeadingLG.fontWeight,
+    },
+    headingMD: {
+      fontFamily: typography.sHeadingMD.fontFamily,
+      fontSize: typography.sHeadingMD.fontSize,
+      lineHeight: `${typography.sHeadingMD.lineHeight}px`,
+      fontWeight: typography.sHeadingMD.fontWeight,
+    },
+    headingSM: {
+      fontFamily: typography.sHeadingSM.fontFamily,
+      fontSize: typography.sHeadingSM.fontSize,
+      lineHeight: `${typography.sHeadingSM.lineHeight}px`,
+      fontWeight: typography.sHeadingSM.fontWeight,
+    },
+    bodyMD: {
+      fontFamily: typography.sBodyMD.fontFamily,
+      fontSize: typography.sBodyMD.fontSize,
+      lineHeight: `${typography.sBodyMD.lineHeight}px`,
+      fontWeight: typography.sBodyMD.fontWeight,
+    },
+    bodySM: {
+      fontFamily: typography.sBodySM.fontFamily,
+      fontSize: typography.sBodySM.fontSize,
+      lineHeight: `${typography.sBodySM.lineHeight}px`,
+      fontWeight: typography.sBodySM.fontWeight,
+    },
+    bodyXS: {
+      fontFamily: typography.sBodyXS.fontFamily,
+      fontSize: typography.sBodyXS.fontSize,
+      lineHeight: `${typography.sBodyXS.lineHeight}px`,
+      fontWeight: typography.sBodyXS.fontWeight,
+      letterSpacing: typography.sBodyXS.letterSpacing,
+    },
+  };
+  return (
+    <>
+      <Text as="h1" style={styles.displayMD} {...args}>
+        S DisplayMD 32px/40px 2rem
+      </Text>
+      <Text as="h2" style={styles.headingLG} {...args}>
+        S HeadingLG 24px/32px 1.5rem
+      </Text>
+      <Text as="h3" style={styles.headingMD} {...args}>
+        S HeadingMD 18px/24px 1.125rem
+      </Text>
+      <Text as="h4" style={styles.headingSM} {...args}>
+        S HeadingSM 16px/24px 1rem
+      </Text>
+      <Text as="p" style={styles.bodyMD} {...args}>
+        S BodyMD 14px/22px 0.875rem
+      </Text>
+      <Text as="p" style={styles.bodySM} {...args}>
+        S BodySM 12px/20px 0.75rem
+      </Text>
+      <Text as="p" style={styles.bodyXS} {...args}>
+        S BodyXS 10px/16px 0.625rem
+      </Text>
+    </>
+  );
+};
+
+export const LargeScreen: ComponentStory<typeof Text> = (...args) => {
+  const styles = {
+    displayMD: {
+      fontFamily: typography.lDisplayMD.fontFamily,
+      fontSize: typography.lDisplayMD.fontSize,
+      lineHeight: `${typography.lDisplayMD.lineHeight}px`,
+      fontWeight: typography.lDisplayMD.fontWeight,
+    },
+    headingLG: {
+      fontFamily: typography.lHeadingLG.fontFamily,
+      fontSize: typography.lHeadingLG.fontSize,
+      lineHeight: `${typography.lHeadingLG.lineHeight}px`,
+      fontWeight: typography.lHeadingLG.fontWeight,
+    },
+    headingMD: {
+      fontFamily: typography.lHeadingMD.fontFamily,
+      fontSize: typography.lHeadingMD.fontSize,
+      lineHeight: `${typography.lHeadingMD.lineHeight}px`,
+      fontWeight: typography.lHeadingMD.fontWeight,
+    },
+    headingSM: {
+      fontFamily: typography.lHeadingSM.fontFamily,
+      fontSize: typography.lHeadingSM.fontSize,
+      lineHeight: `${typography.lHeadingSM.lineHeight}px`,
+      fontWeight: typography.lHeadingSM.fontWeight,
+    },
+    bodyMD: {
+      fontFamily: typography.lBodyMD.fontFamily,
+      fontSize: typography.lBodyMD.fontSize,
+      lineHeight: `${typography.lBodyMD.lineHeight}px`,
+      fontWeight: typography.lBodyMD.fontWeight,
+    },
+    bodySM: {
+      fontFamily: typography.lBodySM.fontFamily,
+      fontSize: typography.lBodySM.fontSize,
+      lineHeight: `${typography.lBodySM.lineHeight}px`,
+      fontWeight: typography.lBodySM.fontWeight,
+    },
+    bodyXS: {
+      fontFamily: typography.lBodyXS.fontFamily,
+      fontSize: typography.lBodyXS.fontSize,
+      lineHeight: `${typography.lBodyXS.lineHeight}px`,
+      fontWeight: typography.lBodyXS.fontWeight,
+      letterSpacing: typography.lBodyXS.letterSpacing,
+    },
+  };
+  return (
+    <>
+      <Text as="h1" style={styles.displayMD} {...args}>
+        L DisplayMD 32px/40px 2rem
+      </Text>
+      <Text as="h2" style={styles.headingLG} {...args}>
+        L HeadingLG 24px/32px 1.5rem
+      </Text>
+      <Text as="h3" style={styles.headingMD} {...args}>
+        L HeadingMD 18px/24px 1.125rem
+      </Text>
+      <Text as="h4" style={styles.headingSM} {...args}>
+        L HeadingSM 16px/24px 1rem
+      </Text>
+      <Text as="p" style={styles.bodyMD} {...args}>
+        L BodyMD 14px/22px 0.875rem
+      </Text>
+      <Text as="p" style={styles.bodySM} {...args}>
+        L BodySM 12px/20px 0.75rem
+      </Text>
+      <Text as="p" style={styles.bodyXS} {...args}>
+        L BodyXS 10px/16px 0.625rem
+      </Text>
+    </>
+  );
+};
+
+export const FontWeight: ComponentStory<typeof Text> = (...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,29 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Text } from '.';
+
+export default {
+  title: 'Doc components/Text',
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    as: {
+      control: 'select',
+      options: ['h1', 'h2', 'p', 'a', 'li'],
+    },
+    style: {
+      control: 'object',
+    },
+  },
+} as ComponentMeta<typeof Text>;
+
+const Template: ComponentStory<typeof Text> = (args) => <Text {...args} />;
+
+export const DefaultStory = Template.bind({});
+
+DefaultStory.args = {
+  children: 'Text',
+};
+
+DefaultStory.storyName = 'Default';