[Enhancement] Interaction states adjustments

[henrikvoetmand]

• [x] I have written a good issue

Describe the enhancement

PLACEHOLDER ISSUE We need to adjust hover and pressed state values ("loudness") for several components:

• card
• input (form field)
• button
• item
• ...

Maybe create som design tokens for the values.

Describe the solution you'd like

Have you considered any alternatives?

Are there any additional context?

---

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".

[RasmusKjeldgaard]

A small adjustment that would be beneficial to do when we are looking at this is using outline instead of border for our focus ring, to avoid this issue when focus ring is applied on other types of backgrounds than light and white:

Previously this was not an option due to safari not respecting the border radius for outline, which would result in a square focus indicator. This is now fixed, and only older versions will be affected. @henrikvoetmand and I have deemed that a fair tradeoff, instead of everyone seeing the issue above.