Shadow Refactor

[francisrupert]

Shadows denotes an area's depth, implied direction of movement, and its edges; determined by its elevation and context to other areas. Currently most shadows are mostly consistent, but hard-coded, may not be attributed to a predictable elevation standard, and possibly a few too many are being used.

Tasks

• [x] Take inventory of all shadows
• [x] Create working sticker HTML sheet of all current components w/ shadow
• [x] Variables (Tokens) -- standardize shadow-color and number of shadows (see below)
• [x] Extract / reduce / refactor to X amount.
• [x] Light source update?
• [x] Add as Visual Style attribute (possibly)
• [x] Sass mixin?
• [x] Reapply to current elements and components with a shadow
• [x] Does anything suddenly get a new shadow?

Elevation Hypothesis

(See attached image)

• [x] Popout
• [x] Overlay
• [x] Raised (soft, one-step up)
• [x] Flat (i.e. single pixel, indistinguishable from a border)
• [x] None (implicitly unset)

Inventory

• [x] Modal
• [x] Growl Notification
• [x] Box
• [x] Date Picker
• [x] Stepped Control
• [x] Global Navigation (doesn't currently have one, considering adding)
• [x] Content Tabs (overflow inner)
• [x] Table (overflow inner)
• [x] Badge (flat)
• [x] Label (flat)
• [x] Button (flat)
• [x] Input (flat)
• [x] Select (flat)
• [x] Switch (flat)
• [x] <kbd>
• [x] Utilities (#479)

[aka: depth, elevation, shadow, layer, prominence]