Button.primary.color applies background instead of label color

button.primary.color sets background-color, instead of label color

Expected Behavior

button.primary.color sets label color

When setting the color property for button variants, a CSS rule for color should be applied to button element.

Actual Behavior

A background-color rule is applied instead, this making it impossible to overwrite colours for labels in button variants.

Steps to Reproduce

1. set up your theme

  global: {
    colors: {
      brand: '#A7893D'
    },
    font: {
      family: 'Helvetica'
    }
  },
  button: {
    primary: {
      color: 'salmon'
    }
  }
}

1. run storybook
2. see result

Your Environment

• Grommet version: grommet@2.13.0
• Browser Name and version: Chrome 81.0.4044.138
• Operating System and version (desktop or mobile): MacOS Catalina 10.15.4

[ShimiSun]

I agree with your comment. I think we should consider having separate color theme props for color and background.color within primary button.

Regardless, please take a look at how I was able to impact the text color of primary button in this code snippet: https://codesandbox.io/s/themed-button-pp77f?file=/index.js

const theme = {
  button: {
    primary: {
      extend: `color: white;`
    },
}

[mihai-ro]

I’m not sure whether this issue is a bug since we document the primary color as the fill color https://v2.grommet.io/button#color the color that is used for the text is text color https://v2.grommet.io/button#global.colors.text

My issue is not related to the primary colour in the global.colors object, but rather to the button variant called primary - <Button primary {...} />. I am trying to adjust the style for primary buttons, e.g. changing the label colour and its background colour. Now, I can see these being described in the documentation as button.primary.color and button.primary.background.color accordingly. However, changing button.primary.color actually changes the background colour, and button.primary.background.color is being ignored entirely. Am I missing something? According to the documentation, this is not intended behaviour.