Refactor interaction state solution and apply hover

[jkaltoft]

📣 Update: Implement state layer based solution

Other than <button> which components and elements should utilize the apply-hover() mixin?

A quick search for :hover says it's only the calendar component and the chip component.

The chip components is (apparently) the only place we use the theme-background() mixin. Consider if there's room for improvement, i.e., can it be replaced by using the apply-hover() mixin?

Consider splitting this issue into at least 3 separate issues: Calender, Chip and Item + Dropdown.

Button

• [x] Apply state layer based solution to the kirby button directive.

Calendar

• [x] Apply hover to .day elements
  • Must handle selected and today also
• [x] Check year navigator button (fixed by Dropdown?)
• [x] Check month navigator buttons
• Hover color on all of the above should be the same (consult UX)

Chip

• [x] Remove use of theme-background()
• [x] Apply hover using the apply-hover() mixin

Item and Dropdown

• [x] Refactor hover on Items in Card in Dropdown
  • The hover effect is currently controlled by ion-item
  • Consider if apply-hover() can/should be used
  • ⚠️ What are the consequences if we can't use apply-hover()?
  • Do we want to use 3 (or more) different solutions for interaction states?
  • Solution: Use separate mixin for Ionic components (part of current refactorization)
• Clean up old API/interface
  • [x] Remove --kirby-item-background-hover state related CSS custom properties
  • [x] Update Cookbook showcase

Other Components

• [x] Page - Toolbar buttons etc.
• [x] Segmented Control - fix what doesn't get fixed by applying state layer to Chip
• [x] Slide Button
• [x] #2056
• [x] #2057
• [x] Improve suboptimal solutions for ion-back-button and ion-segment-button (in Page and Segmented Control)
• [x] FAB Button: Ionic variant of solution + transition mixin
• [x] #2016

Refactor interaction state solution and apply hover - Part 2

See #2028

• 2058

• 2089

• 2090

• 2091

• 2092

Misc.

• [x] ♿️ Accessibility: Hide state layer
• [x] 🔲 Borders: Should state layer cover border or not?
  • See e.g. button attention level 3 vs other attention levels
• [x] Verify that there are no other places we should replace :hover with apply-hover()
  • ion-reorder - maybe later
• [x] 🚶 Walk through all hover cases with UX/UI - adjust on the fly as needed
• [ ] (Optional) Move the hover() mixin to libs/core/src/scss/interaction-state/_hover.scss

Note: If this issue is a can of worms in terms of rewriting chip scss & theme-background mixin - it should be split into a seperate issue.

[jkaltoft]

Consider to move the hover() mixin to libs/core/src/scss/interaction-state/_hover.scss