Update "Select" component selected background and selected + hover background

[taysea]

Designs: https://www.figma.com/file/2lqQ97jab3vlxIoS0Ab8nO/Selected-state?type=design&node-id=68%3A4841&mode=design&t=5yvMpYbntlJmVbhu-1

Review link in Figma: https://www.figma.com/file/eZYR3dtWdb9U90QvJ7p3T9/branch/EDFet4NbZ5Sftupzm1SRtt/HPE-Color-Styles?type=design&mode=design&review-number=3&t=IdGn5zc3RhTL8IRs-0

Designer contact: Oliver/Kenny

Deliverables:

• Update "selected" background color in Select (should not affect other components like Calendar, etc.)
• Update "selected + hover" background color in Select

[britt6612]

In order to have the color for selected be the new selected color #CBFAEB We need to change out our current button.selected.options to the following of course we would pull out the color into our color files.

    selected: {
      option: {
        background: '#CBFAEB',
        color: 'text-strong',
        font: {
          weight: 500,
        },
      },

However with the hover + selected since we are leveraging the selected which is a internal prop that is used in a variety of places within Grommet to instruct the underlying button to use the “selected” style as define by the theme.

we can either pass selected to https://github.com/grommet/grommet/blob/master/src/js/components/Button/Button.js#L485 this line here so we can leverage the selected in our extend to be able to have a background color. Since select is build up by using Buttons this would make sense to leverage here.

Or

we can add a theme object to live in either Select or Button that can have for example

button: {
  selected: {
    hover: 'color',
  }
}

This way we have selected” + “hover in one place and we wont have to have
selected? &hover in our extend

[jcfilben]

Marking this as blocked, the background color values need to be revisited by designers for color contrast