[Button] Enhance component's interactive states

[abigailmbravo-uxuidev]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

A stronger and more noticeable hover state for calcite-neutral outline and outline-fill buttons.

This giphy is showing and comparing the new hover to state to the old hover state (while one is brand and one is neutral), the drastic hover state difference is creating a weird and unexpected interaction.

Part of epic #9299

Acceptance Criteria

• [ ] 1. Neutral and solid:

  • [ ] Update :hover background color to border.3
  • [ ] Update :press background color to border.2

• [ ] 2. Neutral and outline-fill & outline:

  • [ ] Update all :hover outline colors to border.input
  • [ ] Update all :press outline colors to text.3

• [ ] 3. Outline-fill and outline:

  • [ ] Update :hover to foreground.2 background change instead of a stroke width change
  • [ ] Update :press to a foreground.3 background change instead of a stroke width change

• [ ] 4. Transparent variants:

  • [ ] Update :hover background color to foreground.2
  • [ ] Update :press background color to foreground.3
  • [ ] For inverse transparent, update :hover background color to inverse.hover
  • [ ] For inverse transparent, update :press background color to inverse.press

Relevant Info

The neutral outline buttons are being added to the groups item details pages at R2. So if any type of enhancement can be made before then to make this a more clear experience, that would be great.

Which Component

Calcite-button

https://codepen.io/geospatialem/pen/dyLBvPm

Example Use Case

In this example, I am hovering on 'Add items to groups' - if you look closers, you can tell there is a very subtle difference.

Priority impact

p2 - want for current milestone

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Online

[geospatialem]

Updating the context and title above for consistent interactive states across the design system. ✨

[github-actions[bot]]

cc @geospatialem, @brittneytewks