[Enhancement] Investigate and align Elevation styles for code and design

[x] I have written a good issue

Describe the enhancement

Align elevation specs for code and design.

Describe the solution you'd like

In the "new" design we have adjustet the design to be more "flat" - turned down the elevation on cards and other components.

For this to work we need to adjust some of the elevation values.

In the Sketch design file we have the current elevations: z0 - Flat z2 - box-shadow: 0 1px 24px 0 rgba(28,28,28,0.04); z4 - box-shadow: 0 0 5px 0 rgba(28,28,28,0.04), 0 10px 24px -10px rgba(28,28,28,0.15); z8 - box-shadow: 0 0 5px 0 rgba(28,28,28,0.08), 0 20px 30px -15px rgba(28,28,28,0.30);

Before we align the elevation values we need to investigate where theese elevations are used in the code.

Example: z0 and z2 are used on cards, form fields, buttons z4 should be used on pop-out layers "cards" (Menu, dropdown, calender....) z8 Modals and other large elements.

We need to consider elevation on small elements (Radio, Range knob, white badge) If they have the right elevation.

Have you considered any alternatives?

Nope

Are there any additional context?

Elevation

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Refinement

[ ] Request that the issue is UX refined; do not proceed until this is done.
[ ] Request that the issue is tech refined; do not proceed until this is done.

Implementation

The contributor who wants to implement this issue should:

[ ] Make sure you have read: "Before you get coding".
[ ] Signal to others you are working on the issue by assigning yourself.
[ ] Create a branch from the develop branch following our branch naming convention.
[ ] Publish a WIP implementation to Github as a draft PR and ask for feedback.
[ ] Make sure you have implemented tests following the guidelines in: "The good: Test".
[ ] Update the cookbook with examples and showcases.

Review

Once the issue has been implemented and is ready for review:

[ ] Do a self-review.
[ ] Create a pull-request. If you created a draft PR during implementation you can just mark that as "ready for review".

@henrikvoetmand here's the findings of the investigation:

Currently only z2 + z4 is available as possible values (z8 has been removed)

kirby-modal: z4 -> z8
kirby-alert: z4 -> z8
_list utility (??): z2 -> as is
avatar -> badge: z2 -> remove (not visible with the human eye 😂)
button.floating: z4 -> z8
card: z2 -> as is
dropdown (button on open): z4 -> z4
dropdown (card): z4 -> z4
fab-sheet: z4 -> z4
form-field inputs: z2 -> as is
list: z2 -> z2
menu (card): z8 -> z4
action-sheet: z4 -> z8
action-sheet cancel button: z2 -> z8
modal-footer: z4 -> z8
modal-v2-footer: z8 (??) -> z8
radio.checked: z2 -> z4
segmented-control -> badge: z2 -> remove (not visible with the human eye 😂)
toggle (handle): z2 -> remove / none (not visible with the human eye 😂)

kirbydesign / designsystem