[Design Language] Shadow token

[alex-page]

https://www.figma.com/file/UNskjfsGU4YoDWqJ0BJBN32i/Product-Design-Language---Master?node-id=3141%3A2

Known values

• 0 0 1px
• 1px 0 2px
• 6px 0 1px
• 8px 0 2px

Suggested tokens

{
  depth: [
    '0 0 1px',
    '1px 0 2px',
    '6px 0 1px',
    '8px 0 2px',
    '50px 0 2px',
    '0px 1px 2px inset',
  },
}

Discussion points

Should this be called Shadow? This is what the token values create. Depth is the outcome that the shadow creates. Shadow is also what is used in CSS.

[alex-page]

I had a chat with @jessebc about naming this Depth vs Shadow. The thought was that Depth is created from multiple tokens, surface colors, blur, opacity and shadow. On a primitive level the token this would be describing is the shadow values.