Reformat elevation tokens

[zephraph]

I'd like the elevation tokens to have this shape to be a bit more consistent with the rest of our system.

📦 Published PR as canary version: 0.1.1--canary.10.6ffc3bf.0

✨ Test out this PR locally via:

npm install @oxide/design-system@0.1.1--canary.10.6ffc3bf.0
# or 
yarn add @oxide/design-system@0.1.1--canary.10.6ffc3bf.0

[benjaminleonard]

Do you think it's worth going with: primary, secondary, tertiary to match our other ordering schemes?

@paryhin

[paryhin]

@benjaminleonard In this case it makes less sense, there is no really a primary elevation, rather layers of it. But I can go with any naming convention that works for the team.

[benjaminleonard]

I'm happy to stick with 1/2/3
I did consider there might be names that might be more descriptive; high/higher/highest or sm/md/lg as it relates to shadow, but I think what we have is probably fine.

One thing we might want to include is a elevation-0 which resets the shadow but thats a dev facing detail if that'd be useful @zephraph?
https://storybook.hotjar.com/?path=/docs/tokens-elevation--page

[paryhin]

Sm/Md/Lg is a viable option.

[benjaminleonard]

@zephraph hoping that declaring the elevation-none like this will work—that it would transform as: box-shadow: none. If not, I can remove.

[zephraph]

I think sm/md/lg might not make sense because elevation covers more than the box shadow. That's all that's implemented here, but we could also add background color and potentially other properties.

[benjaminleonard]

In that case, happy to revert to 1/2/3

[zephraph]

Yeah, to me that maps the closest. I'm kind of thinking of this similar to z-index but with added details. elevation-0 to me says there is no elevation. elevation-1 is the lowest elevation, etc.

[zephraph]

🚀 PR was released in v0.2.0 🚀