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

Commit 1ee2005

Browse files
georgewrmarshallgeorgewrmarshall
authored
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
1 parent 46b4e1e commit 1ee2005

File tree

22 files changed

+880
-474
lines changed

22 files changed

+880
-474
lines changed

‎.storybook/preview.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import '../src/css/design-tokens.css';
2+
13
export const parameters = {
24
actions: { argTypesRegex: '^on[A-Z].*' },
35
controls: {

‎docs/Shadows.mdx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { Meta, Canvas, Story } from '@storybook/addon-docs';
2+
import LinkTo from '@storybook/addon-links/react';
3+
4+
<Meta title="Design Tokens/Shadows" />
5+
6+
# Shadows
7+
8+
Shadows convey elevation of elements on a surface
9+
10+
<Canvas>
11+
<Story id="shadows-shadows--shadow" />
12+
</Canvas>
13+
14+
## Size
15+
16+
There are 4 different sizes of shadow in MetaMask.
17+
18+
<Canvas>
19+
<Story id="shadows-shadows--size" />
20+
</Canvas>
21+
22+
| Size | JS | CSS |
23+
| ------ | ----------------- | ----------------------- |
24+
| **XS** | `shadows.size.xs` | `var(--shadow-size-xs)` |
25+
| **SM** | `shadows.size.sm` | `var(--shadow-size-sm)` |
26+
| **MD** | `shadows.size.md` | `var(--shadow-size-md)` |
27+
| **LG** | `shadows.size.lg` | `var(--shadow-size-lg)` |
28+
29+
## Color
30+
31+
As well as the neutral colors for shadow 2 other colors exist that are used for the primary and error/danger button hover states
32+
33+
<Canvas>
34+
<Story id="shadows-shadows--color" />
35+
</Canvas>
36+
37+
| Color | JS | CSS |
38+
| ----------- | ----------------------- | ----------------------------- |
39+
| **neutral** | `colors.shadow.default` | `var(--color-shadow-default)` |
40+
| **primary** | `colors.primary.shadow` | `var(--color-primary-shadow)` |
41+
| **danger** | `colors.error.shadow` | `var(--color-error-shadow)` |
42+
43+
## Example usage
44+
45+
Using both size and color tokens, different shadows can be applied to components.
46+
47+
<Canvas>
48+
<Story id="shadows-shadows--usage" />
49+
</Canvas>
50+
51+
| Component | JS | CSS |
52+
| ------------------------ | ------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
53+
| **Card** | `cardShadow: {...shadows.size.xs }` | `box-shadow: var(--shadow-size-xs) var(--color-shadow-default);` |
54+
| **Dropdown** | `dropdownShadow: { ...shadows.size.sm }` | `box-shadow: var(--shadow-size-sm) var(--color-shadow-default);` |
55+
| **Toast** | `toastShadow: { ...shadows.size.md }` | `box-shadow: var(--shadow-size-md) var(--color-shadow-default);` |
56+
| **Modal** | `modalShadow: { ...shadows.size.lg }` | `box-shadow: var(--shadow-size-lg) var(--color-shadow-default);` |
57+
| **Button Primary Hover** | `buttonPrimaryHover: { ...shadows.size.sm, shadowColor: colors.primary.shadow}` | `box-shadow: var(--shadow-size-sm) var(--color-primary-shadow);` |
58+
| **Button Danger Hover** | `buttonDangerHover: { ...shadows.size.sm, shadowColor: colors.primary.shadow}` | `box-shadow: var(--shadow-size-sm) var(--color-error-shadow);` |
59+
60+
**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**
61+
62+
Example shape of the `xs` shadow size object from `shadows`
63+
64+
```
65+
size: {
66+
xs: {
67+
shadowColor: colors.light.shadow.default,
68+
shadowOffset: {
69+
width: 0,
70+
height: 2,
71+
},
72+
shadowOpacity: 1,
73+
shadowRadius: 4,
74+
},
75+
...
76+
}
77+
78+
```
79+
80+
## References
81+
82+
- [Figma Light Theme Colors Library(Shadows Page)](https://www.figma.com/file/kdFzEC7xzSNw7cXteqgzDW/%5BColor%5D-Light-Theme?node-id=753%3A719)(internal use only)
83+
- [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‎

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
import React from 'react';
2+
import { lightTheme } from '../src/js';
3+
4+
import { Text } from './components';
5+
6+
import README from './Shadows.mdx';
7+
8+
export default {
9+
title: 'Shadows/Shadows',
10+
parameters: {
11+
docs: {
12+
page: README,
13+
},
14+
},
15+
argTypes: {
16+
size: {
17+
control: 'select',
18+
options: Object.keys(lightTheme.shadows.size),
19+
},
20+
color: {
21+
control: 'select',
22+
options: ['default', 'primary', 'error'],
23+
},
24+
},
25+
args: {
26+
color: 'default',
27+
size: 'xs',
28+
},
29+
};
30+
31+
interface ShadowSwatchProps {
32+
children: any;
33+
style?: object;
34+
size?: 'xs' | 'sm' | 'md' | 'lg';
35+
color?: 'default' | 'primary' | 'error';
36+
}
37+
38+
const ShadowSwatch = ({
39+
children,
40+
style,
41+
size = 'xs',
42+
color = 'default',
43+
}: ShadowSwatchProps) => (
44+
<div
45+
style={{
46+
height: 100,
47+
backgroundColor: 'var(--color-background-default)',
48+
boxShadow:
49+
color === 'default'
50+
? `var(--shadow-size-${size}) var(--color-shadow-${color}`
51+
: `var(--shadow-size-${size}) var(--color-${color}-shadow`,
52+
borderRadius: '4px',
53+
display: 'grid',
54+
alignContent: 'center',
55+
justifyContent: 'center',
56+
textAlign: 'center',
57+
...style,
58+
}}
59+
>
60+
{children}
61+
</div>
62+
);
63+
64+
export const Shadow = (args) => {
65+
return (
66+
<div
67+
style={{
68+
display: 'grid',
69+
gap: '32px',
70+
gridTemplateColumns: 'repeat(auto-fill, 200px)',
71+
}}
72+
>
73+
<ShadowSwatch {...args}>
74+
<Text as="p" style={{ margin: 0 }}>
75+
Shadow
76+
</Text>
77+
</ShadowSwatch>
78+
</div>
79+
);
80+
};
81+
82+
export const Size = (args) => {
83+
return (
84+
<div
85+
style={{
86+
display: 'grid',
87+
gap: '32px',
88+
gridTemplateColumns: 'repeat(auto-fill, 200px)',
89+
}}
90+
>
91+
<ShadowSwatch color={args.color} size="xs">
92+
<Text as="p" style={{ margin: 0 }}>
93+
XS
94+
</Text>
95+
</ShadowSwatch>
96+
<ShadowSwatch color={args.color} size="sm">
97+
<Text as="p" style={{ margin: 0 }}>
98+
SM
99+
</Text>
100+
</ShadowSwatch>
101+
<ShadowSwatch color={args.color} size="md">
102+
<Text as="p" style={{ margin: 0 }}>
103+
MD
104+
</Text>
105+
</ShadowSwatch>
106+
<ShadowSwatch color={args.color} size="lg">
107+
<Text as="p" style={{ margin: 0 }}>
108+
LG
109+
</Text>
110+
</ShadowSwatch>
111+
</div>
112+
);
113+
};
114+
115+
export const Color = (args) => {
116+
return (
117+
<div
118+
style={{
119+
display: 'grid',
120+
gap: '32px',
121+
gridTemplateColumns: 'repeat(auto-fill, 200px)',
122+
}}
123+
>
124+
<ShadowSwatch color="default" size={args.size}>
125+
<Text as="p" style={{ margin: 0 }}>
126+
Default
127+
</Text>
128+
</ShadowSwatch>
129+
<ShadowSwatch
130+
color="primary"
131+
size={args.size}
132+
style={{
133+
backgroundColor: 'var(--color-primary-default)',
134+
color: 'var(--color-primary-inverse)',
135+
}}
136+
>
137+
<Text as="p" style={{ margin: 0 }}>
138+
Primary
139+
</Text>
140+
</ShadowSwatch>
141+
<ShadowSwatch
142+
color="error"
143+
size={args.size}
144+
style={{
145+
backgroundColor: 'var(--color-error-default)',
146+
color: 'var(--color-error-inverse)',
147+
}}
148+
>
149+
<Text as="p" style={{ margin: 0 }}>
150+
Error/Danger
151+
</Text>
152+
</ShadowSwatch>
153+
</div>
154+
);
155+
};
156+
157+
export const ExampleUsage = () => {
158+
return (
159+
<div>
160+
<div
161+
style={{
162+
display: 'grid',
163+
gap: '32px',
164+
gridTemplateColumns: 'repeat(auto-fill, 200px)',
165+
marginBottom: '64px',
166+
}}
167+
>
168+
<ShadowSwatch
169+
style={{
170+
boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
171+
}}
172+
>
173+
<Text as="p" style={{ margin: 0 }}>
174+
Card
175+
</Text>
176+
</ShadowSwatch>
177+
<ShadowSwatch
178+
style={{
179+
boxShadow: 'var(--shadow-size-sm) var(--color-shadow-default)',
180+
}}
181+
>
182+
<Text as="p" style={{ margin: 0 }}>
183+
Dropdown
184+
</Text>
185+
</ShadowSwatch>
186+
<ShadowSwatch
187+
style={{
188+
boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
189+
}}
190+
>
191+
<Text as="p" style={{ margin: 0 }}>
192+
Toast
193+
</Text>
194+
</ShadowSwatch>
195+
<ShadowSwatch
196+
style={{
197+
boxShadow: 'var(--shadow-size-lg) var(--color-shadow-default)',
198+
}}
199+
>
200+
<Text as="p" style={{ margin: 0 }}>
201+
Modal
202+
</Text>
203+
</ShadowSwatch>
204+
</div>
205+
<div
206+
style={{
207+
display: 'grid',
208+
gap: '32px',
209+
gridTemplateColumns: 'repeat(auto-fill, 200px)',
210+
}}
211+
>
212+
<ShadowSwatch
213+
style={{
214+
boxShadow: 'var(--component-button-primary-shadow)',
215+
backgroundColor: 'var(--color-primary-default)',
216+
color: 'var(--color-primary-inverse)',
217+
}}
218+
>
219+
<Text as="p" style={{ margin: 0 }}>
220+
Button Primary Hover
221+
</Text>
222+
</ShadowSwatch>
223+
<ShadowSwatch
224+
style={{
225+
boxShadow: 'var(--component-button-danger-shadow)',
226+
backgroundColor: 'var(--color-error-default)',
227+
color: 'var(--color-error-inverse)',
228+
}}
229+
>
230+
<Text as="p" style={{ margin: 0 }}>
231+
Button Error/Danger Hover
232+
</Text>
233+
</ShadowSwatch>
234+
</div>
235+
</div>
236+
);
237+
};

‎docs/components/Text/Text.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { fontFamilies } from '../../../src/js/typography/fontFamilies';
23

34
interface Props<C extends React.ElementType> {
45
/**
@@ -24,5 +25,9 @@ export const Text = <C extends React.ElementType = 'span'>({
2425
as,
2526
}: TextProps<C>) => {
2627
const Component = as || 'span';
27-
return <Component style={style}>{children}</Component>;
28+
return (
29+
<Component style={{ fontFamily: fontFamilies.euclidCircularB, ...style }}>
30+
{children}
31+
</Component>
32+
);
2833
};

‎jest.config.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ module.exports = {
22
collectCoverage: true,
33
// Ensures that we collect coverage from all source files, not just tested
44
// ones.
5-
collectCoverageFrom: ['./src/**/*.ts', '!./src/**/*index.ts'],
5+
collectCoverageFrom: [
6+
'./src/**/*.ts',
7+
'!./src/**/*index.ts',
8+
'!./src/js/colors/colors.ts',
9+
],
610
coverageReporters: ['text', 'html'],
711
coverageThreshold: {
812
global: {

0 commit comments

Comments
 (0)