Adding shadows to design tokens (#137)

* Adding shadow tokens * Removing wrong shadow object from index * Making it uppercase * Changing hex values to uppercase * Adding story with controls and updating docs * Removing unused imports * Using design tokens for size options * Updating Usage to ExampleUsage to match title
MetaMask · Jun 24, 2022 · 1ee2005 · 1ee2005
1 parent 46b4e1e
commit 1ee2005
Show file tree

Hide file tree

Showing 22 changed files with 880 additions and 474 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,83 @@
+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
+
+<Canvas>
+  <Story id="shadows-shadows--shadow" />
+</Canvas>
+
+## 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 error/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)`   |
+
+## Example 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/danger 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,237 @@
+import React from 'react';
+import { lightTheme } from '../src/js';
+
+import { Text } from './components';
+
+import README from './Shadows.mdx';
+
+export default {
+  title: 'Shadows/Shadows',
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: Object.keys(lightTheme.shadows.size),
+    },
+    color: {
+      control: 'select',
+      options: ['default', 'primary', 'error'],
+    },
+  },
+  args: {
+    color: 'default',
+    size: 'xs',
+  },
+};
+
+interface ShadowSwatchProps {
+  children: any;
+  style?: object;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  color?: 'default' | 'primary' | 'error';
+}
+
+const ShadowSwatch = ({
+  children,
+  style,
+  size = 'xs',
+  color = 'default',
+}: ShadowSwatchProps) => (
+  <div
+    style={{
+      height: 100,
+      backgroundColor: 'var(--color-background-default)',
+      boxShadow:
+        color === 'default'
+          ? `var(--shadow-size-${size}) var(--color-shadow-${color}`
+          : `var(--shadow-size-${size}) var(--color-${color}-shadow`,
+      borderRadius: '4px',
+      display: 'grid',
+      alignContent: 'center',
+      justifyContent: 'center',
+      textAlign: 'center',
+      ...style,
+    }}
+  >
+    {children}
+  </div>
+);
+
+export const Shadow = (args) => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gap: '32px',
+        gridTemplateColumns: 'repeat(auto-fill, 200px)',
+      }}
+    >
+      <ShadowSwatch {...args}>
+        <Text as="p" style={{ margin: 0 }}>
+          Shadow
+        </Text>
+      </ShadowSwatch>
+    </div>
+  );
+};
+
+export const Size = (args) => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gap: '32px',
+        gridTemplateColumns: 'repeat(auto-fill, 200px)',
+      }}
+    >
+      <ShadowSwatch color={args.color} size="xs">
+        <Text as="p" style={{ margin: 0 }}>
+          XS
+        </Text>
+      </ShadowSwatch>
+      <ShadowSwatch color={args.color} size="sm">
+        <Text as="p" style={{ margin: 0 }}>
+          SM
+        </Text>
+      </ShadowSwatch>
+      <ShadowSwatch color={args.color} size="md">
+        <Text as="p" style={{ margin: 0 }}>
+          MD
+        </Text>
+      </ShadowSwatch>
+      <ShadowSwatch color={args.color} size="lg">
+        <Text as="p" style={{ margin: 0 }}>
+          LG
+        </Text>
+      </ShadowSwatch>
+    </div>
+  );
+};
+
+export const Color = (args) => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gap: '32px',
+        gridTemplateColumns: 'repeat(auto-fill, 200px)',
+      }}
+    >
+      <ShadowSwatch color="default" size={args.size}>
+        <Text as="p" style={{ margin: 0 }}>
+          Default
+        </Text>
+      </ShadowSwatch>
+      <ShadowSwatch
+        color="primary"
+        size={args.size}
+        style={{
+          backgroundColor: 'var(--color-primary-default)',
+          color: 'var(--color-primary-inverse)',
+        }}
+      >
+        <Text as="p" style={{ margin: 0 }}>
+          Primary
+        </Text>
+      </ShadowSwatch>
+      <ShadowSwatch
+        color="error"
+        size={args.size}
+        style={{
+          backgroundColor: 'var(--color-error-default)',
+          color: 'var(--color-error-inverse)',
+        }}
+      >
+        <Text as="p" style={{ margin: 0 }}>
+          Error/Danger
+        </Text>
+      </ShadowSwatch>
+    </div>
+  );
+};
+
+export const ExampleUsage = () => {
+  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 Error/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>
+  );
 };
diff --git a/jest.config.js b/jest.config.js
@@ -2,7 +2,11 @@ module.exports = {
   collectCoverage: true,
   // Ensures that we collect coverage from all source files, not just tested
   // ones.
-  collectCoverageFrom: ['./src/**/*.ts', '!./src/**/*index.ts'],
+  collectCoverageFrom: [
+    './src/**/*.ts',
+    '!./src/**/*index.ts',
+    '!./src/js/colors/colors.ts',
+  ],
   coverageReporters: ['text', 'html'],
   coverageThreshold: {
     global: {