Skip to content

Latest commit

 

History

History
307 lines (282 loc) · 7.87 KB

4.SHADOW.stories.mdx

File metadata and controls

307 lines (282 loc) · 7.87 KB

import { Meta, Canvas, Story } from '@storybook/addon-docs';

Shadow

Shadows convey elevation of elements on a surface

Size

There are 4 different sizes of shadow in MetaMask

XS
SM
MD
LG
Size CSS
XS var(--shadow-size-xs)
SM var(--shadow-size-sm)
MD var(--shadow-size-md)
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

Default
Primary
Error/Danger
Color CSS
neutral var(--color-shadow-default)
primary var(--color-primary-shadow)
danger var(--color-error-shadow)

Example usage

Using both size and color tokens, different shadows can be applied to components

Card
Dropdown
Toast
Modal
Button Primary Hover
Button Error/Danger Hover
Component JS CSS
Card box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
Dropdown box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
Toast box-shadow: var(--shadow-size-md) var(--color-shadow-default);
Modal box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
Button Primary Hover box-shadow: var(--shadow-size-sm) var(--color-primary-shadow);
Button Danger Hover box-shadow: var(--shadow-size-sm) var(--color-error-shadow);

Takeaways

  • Try to avoid using static media queries in your code
  • Try to use the provided SCSS mixins

❌ Don't do this

Don't use static media queries in your code

/**
* Don't do this
* Static box-shadows create inconsistency in elevation of elements
**/
.card {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

✅ Do this

Do use the provided shadow design token css variables

.card {
  box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
}

References