Adding initial shadows

MetaMask · Jun 21, 2022 · ce4218b · ce4218b
1 parent 1e2d6d2
commit ce4218b
Show file tree

Hide file tree

Showing 19 changed files with 840 additions and 21 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,3 +1,5 @@
+import '../src/css/design-tokens.css';
+
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {

diff --git a/docs/Shadows.mdx b/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 surface
+
+## Size
+
+There are 4 different sizes of shadow in MetaMask.
+
+<Canvas>
+  <Story id="shadows-shadows--size" />
+</Canvas>
+
+| Size   | JS                | CSS                     |
+| ------ | ----------------- | ----------------------- |
+| **XS** | `shadows.size.xs` | `var(--shadow-size-xs)` |
+| **SM** | `shadows.size.sm` | `var(--shadow-size-sm)` |
+| **MD** | `shadows.size.md` | `var(--shadow-size-md)` |
+| **LG** | `shadows.size.lg` | `var(--shadow-size-lg)` |
+
+## Color
+
+As well as the neutral colors for shadow 2 other 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 }`                                             | `box-shadow: var(--shadow-size-xs) var(--color-shadow-default);` |
+| **Dropdown**             | `dropdownShadow: { ...shadows.size.sm }`                                        | `box-shadow: var(--shadow-size-sm) var(--color-shadow-default);` |
+| **Toast**                | `toastShadow: { ...shadows.size.md }`                                           | `box-shadow: var(--shadow-size-md) var(--color-shadow-default);` |
+| **Modal**                | `modalShadow: { ...shadows.size.lg }`                                           | `box-shadow: var(--shadow-size-lg) var(--color-shadow-default);` |
+| **Button Primary Hover** | `buttonPrimaryHover: { ...shadows.size.sm, shadowColor: colors.primary.shadow}` | `box-shadow: var(--shadow-size-sm) var(--color-primary-shadow);` |
+| **Button Danger Hover**  | `buttonDangerHover: { ...shadows.size.sm, shadowColor: colors.primary.shadow}`  | `box-shadow: var(--shadow-size-sm) var(--color-error-shadow);`   |
+
+**NOTE: The CSS-in-JS `shadows.size` objects for React Native contain all the correct tokens for neutral shadows. For primary and error shadows change the `shadowColor` key**
+
+Example shape of the `xs` shadow size object from `shadows`
+
+```
+size: {
+    xs: {
+      shadowColor: colors.light.shadow.default,
+      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)
diff --git a/docs/Shadows.stories.tsx b/docs/Shadows.stories.tsx
@@ -0,0 +1,206 @@
+import React from 'react';
+import { Text } from './components';
+
+import README from './Shadows.mdx';
+
+export default {
+  title: 'Shadows/Shadows',
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+};
+
+interface ShadowSwatchProps {
+  children: any;
+  style?: object;
+}
+
+const ShadowSwatch = ({ children, style }: ShadowSwatchProps) => (
+  <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',
+      ...style,
+    }}
+  >
+    {children}
+  </div>
+);
+
+export const Size = () => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gap: '32px',
+        gridTemplateColumns: 'repeat(auto-fill, 200px)',
+      }}
+    >
+      <ShadowSwatch>
+        <Text as="p" style={{ margin: 0 }}>
+          XS
+        </Text>
+      </ShadowSwatch>
+      <ShadowSwatch
+        style={{
+          boxShadow: 'var(--shadow-size-sm) var(--color-shadow-default)',
+        }}
+      >
+        <Text as="p" style={{ margin: 0 }}>
+          SM
+        </Text>
+      </ShadowSwatch>
+      <ShadowSwatch
+        style={{
+          boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
+        }}
+      >
+        <Text as="p" style={{ margin: 0 }}>
+          MD
+        </Text>
+      </ShadowSwatch>
+      <ShadowSwatch
+        style={{
+          boxShadow: 'var(--shadow-size-lg) var(--color-shadow-default)',
+        }}
+      >
+        <Text as="p" style={{ margin: 0 }}>
+          LG
+        </Text>
+      </ShadowSwatch>
+    </div>
+  );
+};
+
+export const Color = () => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gap: '32px',
+        gridTemplateColumns: 'repeat(auto-fill, 200px)',
+      }}
+    >
+      <ShadowSwatch
+        style={{
+          boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
+        }}
+      >
+        <Text as="p" style={{ margin: 0 }}>
+          Neutral
+        </Text>
+      </ShadowSwatch>
+      <ShadowSwatch
+        style={{
+          boxShadow: 'var(--shadow-size-md) var(--color-primary-shadow)',
+          backgroundColor: 'var(--color-primary-default)',
+          color: 'var(--color-primary-inverse)',
+        }}
+      >
+        <Text as="p" style={{ margin: 0 }}>
+          Primary
+        </Text>
+      </ShadowSwatch>
+      <ShadowSwatch
+        style={{
+          boxShadow: 'var(--shadow-size-md) var(--color-error-shadow)',
+          backgroundColor: 'var(--color-error-default)',
+          color: 'var(--color-error-inverse)',
+        }}
+      >
+        <Text as="p" style={{ margin: 0 }}>
+          Danger
+        </Text>
+      </ShadowSwatch>
+    </div>
+  );
+};
+
+export const Usage = () => {
+  return (
+    <div>
+      <div
+        style={{
+          display: 'grid',
+          gap: '32px',
+          gridTemplateColumns: 'repeat(auto-fill, 200px)',
+          marginBottom: '64px',
+        }}
+      >
+        <ShadowSwatch
+          style={{
+            boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
+          }}
+        >
+          <Text as="p" style={{ margin: 0 }}>
+            Card
+          </Text>
+        </ShadowSwatch>
+        <ShadowSwatch
+          style={{
+            boxShadow: 'var(--shadow-size-sm) var(--color-shadow-default)',
+          }}
+        >
+          <Text as="p" style={{ margin: 0 }}>
+            Dropdown
+          </Text>
+        </ShadowSwatch>
+        <ShadowSwatch
+          style={{
+            boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
+          }}
+        >
+          <Text as="p" style={{ margin: 0 }}>
+            Toast
+          </Text>
+        </ShadowSwatch>
+        <ShadowSwatch
+          style={{
+            boxShadow: 'var(--shadow-size-lg) var(--color-shadow-default)',
+          }}
+        >
+          <Text as="p" style={{ margin: 0 }}>
+            Modal
+          </Text>
+        </ShadowSwatch>
+      </div>
+      <div
+        style={{
+          display: 'grid',
+          gap: '32px',
+          gridTemplateColumns: 'repeat(auto-fill, 200px)',
+        }}
+      >
+        <ShadowSwatch
+          style={{
+            boxShadow: 'var(--component-button-primary-shadow)',
+            backgroundColor: 'var(--color-primary-default)',
+            color: 'var(--color-primary-inverse)',
+          }}
+        >
+          <Text as="p" style={{ margin: 0 }}>
+            Button Primary Hover
+          </Text>
+        </ShadowSwatch>
+        <ShadowSwatch
+          style={{
+            boxShadow: 'var(--component-button-danger-shadow)',
+            backgroundColor: 'var(--color-error-default)',
+            color: 'var(--color-error-inverse)',
+          }}
+        >
+          <Text as="p" style={{ margin: 0 }}>
+            Button Danger Hover
+          </Text>
+        </ShadowSwatch>
+      </div>
+    </div>
+  );
+};
diff --git a/docs/components/Text/Text.tsx b/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>
+  );
 };