Skip to content
This repository has been archived by the owner on Nov 26, 2024. It is now read-only.

Adding shadows to design tokens #137

Merged
merged 8 commits into from
Jun 24, 2022
Merged

Adding shadows to design tokens #137

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
574667e
Adding shadow tokens
georgewrmarshall Jun 21, 2022
415cd4f
Removing wrong shadow object from index
georgewrmarshall Jun 21, 2022
c2597fd
Making it uppercase
georgewrmarshall Jun 22, 2022
e29bded
Changing hex values to uppercase
georgewrmarshall Jun 22, 2022
c55bf5a
Adding story with controls and updating docs
georgewrmarshall Jun 23, 2022
526d538
Removing unused imports
georgewrmarshall Jun 23, 2022
e2538d7
Using design tokens for size options
georgewrmarshall Jun 23, 2022
e26f734
Updating Usage to ExampleUsage to match title
georgewrmarshall Jun 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import '../src/css/design-tokens.css';

export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
georgewrmarshall marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
79 changes: 79 additions & 0 deletions docs/Shadows.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do these token sizes and colors align in figma?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great question these should align with the tokens in Figma yes. I think Figma library is currently out of date @Akatori-Design

| ------ | ----------------- | ----------------------- |
| **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)` |

## Usage
georgewrmarshall marked this conversation as resolved.
Show resolved Hide resolved

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)
206 changes: 206 additions & 0 deletions docs/Shadows.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};
georgewrmarshall marked this conversation as resolved.
Show resolved Hide resolved
7 changes: 6 additions & 1 deletion docs/components/Text/Text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
georgewrmarshall marked this conversation as resolved.
Show resolved Hide resolved
import { fontFamilies } from '../../../src/js/typography/fontFamilies';

interface Props<C extends React.ElementType> {
/**
Expand All @@ -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>
);
};
6 changes: 5 additions & 1 deletion jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
georgewrmarshall marked this conversation as resolved.
Show resolved Hide resolved
],
coverageReporters: ['text', 'html'],
coverageThreshold: {
global: {
Expand Down
Loading