intial shadows

.storybook/preview.js

@@ -1,3 +1,5 @@
+import '../src/css/design-tokens.css';
+
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {

docs/Shadows.mdx

@@ -0,0 +1,79 @@
+import { Meta, Canvas, Story } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Design Tokens/Shadows" />
+
+# Shadows
+
+Shadows convey elevation of elements on a page
+
+## Size
+
+There are 4 different sizes of shadow in MetaMask.
+
+<Canvas>
+  <Story id="shadows-shadows--size" />
+</Canvas>
+
+| Size   | JS               | CSS                     |
+| ------ | ---------------- | ----------------------- |
+| **XS** | `shadow.size.xs` | `var(--shadow-size-xs)` |
+| **SM** | `shadow.size.sm` | `var(--shadow-size-sm)` |
+| **MD** | `shadow.size.md` | `var(--shadow-size-md)` |
+| **LG** | `shadow.size.lg` | `var(--shadow-size-lg)` |
+
+## Color
+
+As well as the neutral colors for shadow 2 custom colors exist that are used for the primary and danger button hover states
+
+<Canvas>
+  <Story id="shadows-shadows--color" />
+</Canvas>
+
+| Color       | JS                      | CSS                           |
+| ----------- | ----------------------- | ----------------------------- |
+| **neutral** | `colors.shadow.default` | `var(--color-shadow-default)` |
+| **primary** | `colors.primary.shadow` | `var(--color-primary-shadow)` |
+| **danger**  | `colors.error.shadow`   | `var(--color-error-shadow)`   |
+
+## Usage
+
+Using both size and color tokens different shadows can be applied to components
+
+<Canvas>
+  <Story id="shadows-shadows--usage" />
+</Canvas>
+
+| Component                | JS                                                                 | CSS                                                              |
+| ------------------------ | ------------------------------------------------------------------ | ---------------------------------------------------------------- |
+| **Card**                 | `cardShadow: {...shadows.size.xs, colors.shadow.default }`         | `box-shadow: var(--shadow-size-xs) var(--color-shadow-default);` |
+| **Dropdown**             | `dropdownShadow: { ...shadows.size.sm, colors.shadow.default}`     | `box-shadow: var(--shadow-size-sm) var(--color-shadow-default);` |
+| **Toast**                | `toastShadow: { ...shadows.size.md, colors.shadow.default}`        | `box-shadow: var(--shadow-size-md) var(--color-shadow-default);` |
+| **Modal**                | `modalShadow: { ...shadows.size.lg, colors.shadow.default}`        | `box-shadow: var(--shadow-size-lg) var(--color-shadow-default);` |
+| **Button Primary Hover** | `buttonPrimaryHover: { ...shadows.size.sm, colors.primary.shadow}` | `box-shadow: var(--shadow-size-sm) var(--color-primary-shadow);` |
+| **Button Danger Hover**  | `buttonDangerHover: { ...shadows.size.sm, colors.primary.shadow}`  | `box-shadow: var(--shadow-size-sm) var(--color-error-shadow);`   |
+
+The CSS-in-JS `shadows.size` objects for React Native do contain a default color but colors should be overridden so the correct shadow colors are displayed in both light and dark themes.
+
+The `xs` shadow object from `shadows`
+
+```
+size: {
+    xs: {
+      shadowColor: colors.light.shadow.default, // should not be used
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowOpacity: 1,
+      shadowRadius: 4,
+    },
+    ...
+}
+
+```
+
+## References
+
+- [Figma Light Theme Colors Library(Shadows Page)](https://www.figma.com/file/kdFzEC7xzSNw7cXteqgzDW/%5BColor%5D-Light-Theme?node-id=753%3A719)(internal use only)
+- [Figma Dark Theme Colors Library(Shadows Page)](https://www.figma.com/file/rLKsoqpjyoKauYnFDcBIbO/%5BColor%5D-Dark-Theme?node-id=522%3A1022)(internal use only)

docs/Shadows.stories.tsx

@@ -0,0 +1,264 @@
+import { ComponentStoryFn, ComponentMeta } from '@storybook/react';
+import tokens from '../src/figma/tokens.json';
+import { Text } from './components';
+
+import README from './Shadows.mdx';
+
+export default {
+  title: 'Shadows/Shadows',
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+};
+// as ComponentMeta<typeof ColorSwatchGroup>;
+
+export const Size = () => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gap: '32px',
+        gridTemplateColumns: 'repeat(auto-fill, 200px)',
+      }}
+    >
+      <div
+        style={{
+          height: 100,
+          backgroundColor: 'var(--color-background-default)',
+          boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
+          borderRadius: '4px',
+          display: 'grid',
+          alignContent: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Text as="p" style={{ margin: 0 }}>
+          XS
+        </Text>
+      </div>
+      <div
+        style={{
+          height: 100,
+          backgroundColor: 'var(--color-background-default)',
+          boxShadow: 'var(--shadow-size-sm) var(--color-shadow-default)',
+          borderRadius: '4px',
+          display: 'grid',
+          alignContent: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Text as="p" style={{ margin: 0 }}>
+          SM
+        </Text>
+      </div>
+      <div
+        style={{
+          height: 100,
+          backgroundColor: 'var(--color-background-default)',
+          boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
+          borderRadius: '4px',
+          display: 'grid',
+          alignContent: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Text as="p" style={{ margin: 0 }}>
+          MD
+        </Text>
+      </div>
+      <div
+        style={{
+          height: 100,
+          backgroundColor: 'var(--color-background-default)',
+          boxShadow: 'var(--shadow-size-lg) var(--color-shadow-default)',
+          borderRadius: '4px',
+          display: 'grid',
+          alignContent: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Text as="p" style={{ margin: 0 }}>
+          LG
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+export const Color = () => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gap: '32px',
+        gridTemplateColumns: 'repeat(auto-fill, 200px)',
+      }}
+    >
+      <div
+        style={{
+          height: 100,
+          boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
+          borderRadius: '4px',
+          display: 'grid',
+          alignContent: 'center',
+          justifyContent: 'center',
+          backgroundColor: 'var(--color-background-default)',
+        }}
+      >
+        <Text as="p" style={{ margin: 0 }}>
+          Neutral
+        </Text>
+      </div>
+      <div
+        style={{
+          height: 100,
+          boxShadow: 'var(--shadow-size-md) var(--color-primary-shadow)',
+          borderRadius: '4px',
+          display: 'grid',
+          alignContent: 'center',
+          justifyContent: 'center',
+          backgroundColor: 'var(--color-primary-default)',
+          color: 'var(--color-primary-inverse)',
+        }}
+      >
+        <Text as="p" style={{ margin: 0 }}>
+          Primary
+        </Text>
+      </div>
+      <div
+        style={{
+          height: 100,
+          boxShadow: 'var(--shadow-size-md) var(--color-error-shadow)',
+          borderRadius: '4px',
+          display: 'grid',
+          alignContent: 'center',
+          justifyContent: 'center',
+          backgroundColor: 'var(--color-error-default)',
+          color: 'var(--color-error-inverse)',
+        }}
+      >
+        <Text as="p" style={{ margin: 0 }}>
+          Danger
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+export const Usage = () => {
+  return (
+    <div>
+      <div
+        style={{
+          display: 'grid',
+          gap: '32px',
+          gridTemplateColumns: 'repeat(auto-fill, 200px)',
+          marginBottom: '64px',
+        }}
+      >
+        <div
+          style={{
+            height: 100,
+            backgroundColor: 'var(--color-background-default)',
+            boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
+            borderRadius: '4px',
+            display: 'grid',
+            alignContent: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Text as="p" style={{ margin: 0 }}>
+            Card
+          </Text>
+        </div>
+        <div
+          style={{
+            height: 100,
+            backgroundColor: 'var(--color-background-default)',
+            boxShadow: 'var(--shadow-size-sm) var(--color-shadow-default)',
+            borderRadius: '4px',
+            display: 'grid',
+            alignContent: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Text as="p" style={{ margin: 0 }}>
+            Dropdown
+          </Text>
+        </div>
+        <div
+          style={{
+            height: 100,
+            backgroundColor: 'var(--color-background-default)',
+            boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
+            borderRadius: '4px',
+            display: 'grid',
+            alignContent: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Text as="p" style={{ margin: 0 }}>
+            Toast
+          </Text>
+        </div>
+        <div
+          style={{
+            height: 100,
+            backgroundColor: 'var(--color-background-default)',
+            boxShadow: 'var(--shadow-size-lg) var(--color-shadow-default)',
+            borderRadius: '4px',
+            display: 'grid',
+            alignContent: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Text as="p" style={{ margin: 0 }}>
+            Modal
+          </Text>
+        </div>
+      </div>
+      <div
+        style={{
+          display: 'grid',
+          gap: '32px',
+          gridTemplateColumns: 'repeat(auto-fill, 200px)',
+        }}
+      >
+        <div
+          style={{
+            height: 100,
+            boxShadow: 'var(--component-button-primary-shadow)',
+            borderRadius: '4px',
+            display: 'grid',
+            alignContent: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'var(--color-primary-default)',
+            color: 'var(--color-primary-inverse)',
+          }}
+        >
+          <Text as="p" style={{ margin: 0 }}>
+            Button Primary Hover
+          </Text>
+        </div>
+        <div
+          style={{
+            height: 100,
+            boxShadow: 'var(--component-button-danger-shadow)',
+            borderRadius: '4px',
+            display: 'grid',
+            alignContent: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'var(--color-error-default)',
+            color: 'var(--color-error-inverse)',
+          }}
+        >
+          <Text as="p" style={{ margin: 0 }}>
+            Button Danger Hover
+          </Text>
+        </div>
+      </div>
+    </div>
+  );
+};

docs/components/Text/Text.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { fontFamilies } from '../../../src/js/typography/fontFamilies';
 
 interface Props<C extends React.ElementType> {
   /**
@@ -24,5 +25,9 @@ export const Text = <C extends React.ElementType = 'span'>({
   as,
 }: TextProps<C>) => {
   const Component = as || 'span';
-  return <Component style={style}>{children}</Component>;
+  return (
+    <Component style={{ fontFamily: fontFamilies.euclidCircularB, ...style }}>
+      {children}
+    </Component>
+  );
 };