Custom button hover state in Grommet theme

Question

Just started using Grommet. I must be missing something obvious because I feel like I'm trying to do something fairly simple. I've created a custom theme, and I'm trying to add a hover state to change the background color of a Button. The default hover behavior remains, and the background color does not change.

Here's an abbreviated sample of my code:

const customTheme = deepMerge(grommet, {
  global: {
    // colors and such
  },
  button: {
    hover: {
      primary: {
        background: { color: "accent-1" }
      }
    }
  }
};

// then I implement the Button like so
<Grommet theme={customTheme}>
  <Button
    label="My Sad Button"
    primary
  />
</Grommet>

What am I missing? Thank you!

UPDATE:

Using the extend property as @Bas suggested does work. I'm still curious why the provided hover wouldn't accomplish the same?

UPDATE 2:

As of Feb '21, according to this Github issue in order to make use of the button.hover.primary attribute as intended, you must first define values for button.hover.default. After defining the default values, then the primary and/or secondary button values seem to work as expected.

Answer 1

You can use the extend attribute on button, which value is a function to do something like this:

const customTheme = deepMerge(grommet, {
  button: {
    extend: ({ primary }) => {
      if (primary) {
        return `
        &:hover {
          background: ${"#6FFFB0"}; // accent-1 color
        }
      `;
      }
    }
  }
});

Color reference

Sandbox example

Answer 2

To clarify the solution, please find a Codepen built on grommet issue 4111 mentioned above. It confirms that default: {} must be defined in theme for hover to work.

const customTheme = deepMerge(grommet, {
  button: {
    default: {}, // this is required for hover below to work
    hover: {
      primary: {
        background: { color: "accent-1" }
      }
    }
  }
});